refactor(Map): rename LocationCard to MapPlaceCard with variant system

Major refactoring to rename LocationCard to MapPlaceCard and introduce a variant system for different visual contexts. This is a breaking change that improves component flexibility and naming consistency.

Breaking Changes:
- LocationCard → MapPlaceCard (component, props, exports)
- LocationCardProps → MapPlaceCardProps
- New: MapPlaceCardVariant type ('carousel' | 'list')

Component Changes:
- Added variant prop: 'carousel' (subtle) or 'list' (prominent)
- Simplified component structure (~700 lines removed)
- Updated all internal usage (LocationCarousel, MapSidebar)

Files Renamed:
- LocationCard.tsx → MapPlaceCard.tsx
- LocationCard.module.css → MapPlaceCard.module.css
- LocationCard.stories.tsx → MapPlaceCard.stories.tsx
- LocationCard.test.tsx → MapPlaceCard.test.tsx

Documentation Updates:
- Maps.stories.tsx: Updated cross-references
- useErrorState.ts: Updated comment
- All exports updated in index.ts files

Test Results:
- ✅ All 697 tests passing (48 MapPlaceCard tests)
- ✅ Linter passing
- ✅ Build successful (bundle 1.4KB smaller)

Migration Guide:
// Before
import { LocationCard } from '@ainativekit/ui';

// After
import { MapPlaceCard } from '@ainativekit/ui';
<MapPlaceCard variant="carousel" {...props} />

Author: JakeLin

packages/ui/src/components/Map/LocationCarousel.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import type { EmblaCarouselType } from 'embla-carousel';
 import { Carousel } from '../Carousel';
-import { LocationCard } from './LocationCard';
+import { MapPlaceCard } from './MapPlaceCard';
 import { cn } from '../../utils/cn';
 import type { LocationData } from './types';
 import styles from './LocationCarousel.module.css';
@@ -131,7 +131,7 @@ export const LocationCarousel: React.FC<LocationCarouselProps> = ({
         >
           {Array.from({ length: loadingCardCount }).map((_, i) => (
             <div key={i} className={styles.cardWrapper}>
-              <LocationCard loading />
+              <MapPlaceCard loading />
             </div>
           ))}
         </Carousel>
@@ -196,7 +196,7 @@ export const LocationCarousel: React.FC<LocationCarouselProps> = ({
       >
         {locations.map((location) => (
           <div key={location.id} className={styles.cardWrapper} data-location-id={location.id}>
-            <LocationCard
+            <MapPlaceCard
               image={location.thumbnail}
               title={location.name}
               subtitle={location.subtitle}

packages/ui/src/components/Map/LocationCard.module.css renamed to packages/ui/src/components/Map/MapPlaceCard.module.css

@@ -1,5 +1,5 @@
-/* LocationCard Container */
-.locationCard {
+/* MapPlaceCard Container */
+.mapPlaceCard {
   position: relative;
   display: flex;
   align-items: center;
@@ -12,28 +12,52 @@
   user-select: none;
   transition:
     background-color 0.2s ease,
-    box-shadow 0.2s ease;
+    box-shadow 0.2s ease,
+    border-radius 0.2s ease;
   min-width: 280px;
   max-width: 330px;
 }
 
-.locationCard:hover {
+.mapPlaceCard:hover {
   background-color: var(--ai-color-bg-tertiary);
 }
 
-.locationCard:focus-visible {
+.mapPlaceCard:focus-visible {
   outline: 2px solid var(--ai-color-brand-primary);
   outline-offset: 2px;
 }
 
-/* Selected State */
+/* Selected State - Carousel variant */
 .selected,
-.locationCard.selected {
+.mapPlaceCard.selected {
   background-color: var(--ai-color-bg-tertiary);
   border-color: var(--ai-color-brand-primary);
   border-width: 2px;
 }
 
+/* List Variant */
+.variantList {
+  /* Base class for variant detection - actual styling in compound selectors */
+  position: relative;
+}
+
+/* List Variant - Remove border, rectangle by default, rounded on hover/selected */
+.mapPlaceCard.variantList {
+  border: none;
+  border-radius: 0;
+}
+
+.mapPlaceCard.variantList.selected {
+  background-color: var(--ai-color-bg-secondary);
+  border: none;
+  border-radius: var(--ai-radius-xl);
+}
+
+.mapPlaceCard.variantList:hover {
+  background-color: var(--ai-color-bg-tertiary);
+  border-radius: var(--ai-radius-xl);
+}
+
 /* Loading State */
 .loadingCard {
   cursor: default;

packages/ui/src/components/Map/LocationCard.module.css.d.ts renamed to packages/ui/src/components/Map/MapPlaceCard.module.css.d.ts

@@ -1,6 +1,7 @@
 declare const styles: {
-  readonly locationCard: string;
+  readonly mapPlaceCard: string;
   readonly selected: string;
+  readonly variantList: string;
   readonly loadingCard: string;
   readonly errorCard: string;
   readonly errorContainer: string;

packages/ui/src/components/Map/LocationCard.stories.tsx renamed to packages/ui/src/components/Map/MapPlaceCard.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { LocationCard } from './LocationCard';
+import { MapPlaceCard } from './MapPlaceCard';
 
-const meta: Meta<typeof LocationCard> = {
+const meta: Meta<typeof MapPlaceCard> = {
   title: 'Composed Components/Cards/Location Cards',
-  component: LocationCard,
+  component: MapPlaceCard,
   parameters: {
     layout: 'padded',
   },
@@ -39,13 +39,13 @@ const SAMPLE_LOCATIONS = [
 ];
 
 // Main unified showcase component
-const LocationCardShowcase: React.FC = () => {
+const MapPlaceCardShowcase: React.FC = () => {
   const [selectedId, setSelectedId] = useState<string>('1');
   const [retryCount, setRetryCount] = useState(0);
 
   return (
     <div style={{ padding: '24px' }}>
-      <h1 style={{ marginBottom: '32px' }}>LocationCard System</h1>
+      <h1 style={{ marginBottom: '32px' }}>MapPlaceCard System</h1>
 
       {/* Overview */}
       <section style={{ marginBottom: '64px' }}>
@@ -65,7 +65,7 @@ const LocationCardShowcase: React.FC = () => {
       {/* Variants Gallery */}
       <section style={{ marginBottom: '64px' }}>
         <header style={{ marginBottom: '24px' }}>
-          <h2 style={{ marginBottom: '8px' }}>LocationCard Variants</h2>
+          <h2 style={{ marginBottom: '8px' }}>MapPlaceCard Variants</h2>
           <p style={{ color: 'var(--ai-color-text-secondary)', margin: 0, fontSize: '14px' }}>
             Different content configurations and states
           </p>
@@ -76,17 +76,17 @@ const LocationCardShowcase: React.FC = () => {
             Standard Locations
           </h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}>
-            <LocationCard
+            <MapPlaceCard
               {...SAMPLE_LOCATIONS[0]}
               selected={selectedId === '1'}
               onClick={() => setSelectedId('1')}
             />
-            <LocationCard
+            <MapPlaceCard
               {...SAMPLE_LOCATIONS[1]}
               selected={selectedId === '2'}
               onClick={() => setSelectedId('2')}
             />
-            <LocationCard
+            <MapPlaceCard
               {...SAMPLE_LOCATIONS[2]}
               selected={selectedId === '3'}
               onClick={() => setSelectedId('3')}
@@ -99,12 +99,12 @@ const LocationCardShowcase: React.FC = () => {
             Minimal Content
           </h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}>
-            <LocationCard
+            <MapPlaceCard
               image={SAMPLE_LOCATIONS[0].image}
               title="Simple Location"
               onClick={() => console.log('Clicked')}
             />
-            <LocationCard
+            <MapPlaceCard
               image={SAMPLE_LOCATIONS[1].image}
               title="With Subtitle Only"
               subtitle="Description text"
@@ -118,9 +118,9 @@ const LocationCardShowcase: React.FC = () => {
             With Badges & Chips
           </h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }}>
-            <LocationCard {...SAMPLE_LOCATIONS[0]} badge="New" badgeVariant="success" />
-            <LocationCard {...SAMPLE_LOCATIONS[1]} badge="Popular" badgeVariant="filled" />
-            <LocationCard {...SAMPLE_LOCATIONS[2]} badge={5} badgeVariant="default" />
+            <MapPlaceCard {...SAMPLE_LOCATIONS[0]} badge="New" badgeVariant="success" />
+            <MapPlaceCard {...SAMPLE_LOCATIONS[1]} badge="Popular" badgeVariant="filled" />
+            <MapPlaceCard {...SAMPLE_LOCATIONS[2]} badge={5} badgeVariant="default" />
           </div>
         </div>
       </section>
@@ -146,7 +146,7 @@ const LocationCardShowcase: React.FC = () => {
             >
               Loading
             </h3>
-            <LocationCard
+            <MapPlaceCard
               image={SAMPLE_LOCATIONS[0].image}
               title="Loading Location"
               loading={true}
@@ -164,7 +164,7 @@ const LocationCardShowcase: React.FC = () => {
             >
               Error (with retry)
             </h3>
-            <LocationCard
+            <MapPlaceCard
               image={SAMPLE_LOCATIONS[0].image}
               title="Error Location"
               error={true}
@@ -188,7 +188,7 @@ const LocationCardShowcase: React.FC = () => {
             >
               Empty
             </h3>
-            <LocationCard
+            <MapPlaceCard
               image=""
               title=""
               emptyTitle="No location selected"
@@ -218,7 +218,7 @@ const LocationCardShowcase: React.FC = () => {
           <h3 style={{ fontSize: '18px', marginBottom: '16px' }}>Nearby Locations</h3>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
             {SAMPLE_LOCATIONS.map((location, index) => (
-              <LocationCard
+              <MapPlaceCard
                 key={index}
                 {...location}
                 selected={selectedId === `real-${index}`}
@@ -307,7 +307,7 @@ const LocationCardShowcase: React.FC = () => {
         <header style={{ marginBottom: '24px' }}>
           <h2 style={{ marginBottom: '8px' }}>Props Reference</h2>
           <p style={{ color: 'var(--ai-color-text-secondary)', margin: 0, fontSize: '14px' }}>
-            Complete API documentation for LocationCard
+            Complete API documentation for MapPlaceCard
           </p>
         </header>
 
@@ -528,6 +528,6 @@ const LocationCardShowcase: React.FC = () => {
   );
 };
 
-export const LocationCards: StoryObj = {
-  render: () => <LocationCardShowcase />,
+export const MapPlaceCards: StoryObj = {
+  render: () => <MapPlaceCardShowcase />,
 };