love-ui 1.2.13 → 1.2.15

package/public/r/list-simple.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "list-simple",
-  "description": "Simplified list view using drag-and-drop ordering.",
-  "registryDependencies": [
-    "@loveui/list",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/list-simple.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\n\nimport type { DragEndEvent } from \"../../../../../packages/list\"\nimport {\n  ListGroup,\n  ListHeader,\n  ListItem,\n  ListItems,\n  ListProvider,\n} from \"../../../../../packages/list\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n  }))\n\nconst Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find((status) => status.name === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <ListProvider onDragEnd={handleDragEnd}>\n      {statuses.map((status) => (\n        <ListGroup id={status.name} key={status.name}>\n          <ListHeader color={status.color} name={status.name} />\n          <ListItems>\n            {features\n              .filter((feature) => feature.status.name === status.name)\n              .map((feature, index) => (\n                <ListItem\n                  id={feature.id}\n                  index={index}\n                  key={feature.id}\n                  name={feature.name}\n                  parent={feature.status.name}\n                />\n              ))}\n          </ListItems>\n        </ListGroup>\n      ))}\n    </ListProvider>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "list",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/list.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "list",
-  "description": "Draggable list view grouped by status with avatars.",
-  "registryDependencies": [
-    "@loveui/list",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/list.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nimport type { DragEndEvent } from \"../../../../../packages/list\"\nimport {\n  ListGroup,\n  ListHeader,\n  ListItem,\n  ListItems,\n  ListProvider,\n} from \"../../../../../packages/list\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n  }))\n\nconst Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find((status) => status.name === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <ListProvider onDragEnd={handleDragEnd}>\n      {statuses.map((status) => (\n        <ListGroup id={status.name} key={status.name}>\n          <ListHeader color={status.color} name={status.name} />\n          <ListItems>\n            {features\n              .filter((feature) => feature.status.name === status.name)\n              .map((feature, index) => (\n                <ListItem\n                  id={feature.id}\n                  index={index}\n                  key={feature.id}\n                  name={feature.name}\n                  parent={feature.status.name}\n                >\n                  <div\n                    className=\"h-2 w-2 shrink-0 rounded-full\"\n                    style={{ backgroundColor: feature.status.color }}\n                  />\n                  <p className=\"m-0 flex-1 text-sm font-medium\">\n                    {feature.name}\n                  </p>\n                  {feature.owner && (\n                    <Avatar className=\"h-4 w-4 shrink-0\">\n                      <AvatarImage src={feature.owner.image} />\n                      <AvatarFallback>\n                        {feature.owner.name?.slice(0, 2)}\n                      </AvatarFallback>\n                    </Avatar>\n                  )}\n                </ListItem>\n              ))}\n          </ListItems>\n        </ListGroup>\n      ))}\n    </ListProvider>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "list",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/maps.json

@@ -1,188 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "maps",
-  "type": "registry:block",
-  "title": "Social Pulse Map",
-  "description": "A social media map for check-ins, saved spots, and creator discovery.",
-  "files": [
-    {
-      "path": "registry/example-apps/default/maps/components/dashboard/map-controls.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/dashboard/map-controls.tsx",
-      "content": "\"use client\"\n\nimport {\n  Add01Icon,\n  Compass01Icon,\n  Layers01Icon,\n  Location01Icon,\n  MapsIcon,\n  MinusSignIcon,\n  MountainIcon,\n  SatelliteIcon,\n  StarCircleIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useMapsStore } from \"../../store/maps-store\"\nimport { ThemeToggle } from \"../theme-toggle\"\n\nconst mapStyles = [\n  {\n    id: \"default\",\n    name: \"Default\",\n    icon: StarCircleIcon,\n    description: \"Follows theme\",\n  },\n  {\n    id: \"streets\",\n    name: \"Streets\",\n    icon: MapsIcon,\n    description: \"Detailed roads\",\n  },\n  {\n    id: \"outdoors\",\n    name: \"Outdoors\",\n    icon: MountainIcon,\n    description: \"Terrain & trails\",\n  },\n  {\n    id: \"satellite\",\n    name: \"Satellite\",\n    icon: SatelliteIcon,\n    description: \"Aerial view\",\n  },\n] as const\n\nexport function MapControls() {\n  const {\n    mapZoom,\n    setMapZoom,\n    setMapCenter,\n    setUserLocation,\n    userLocation,\n    mapStyle,\n    setMapStyle,\n  } = useMapsStore()\n\n  const handleZoomIn = () => {\n    setMapZoom(Math.min(mapZoom + 1, 18))\n  }\n\n  const handleZoomOut = () => {\n    setMapZoom(Math.max(mapZoom - 1, 3))\n  }\n\n  const handleResetView = () => {\n    if (userLocation) {\n      setMapCenter(userLocation)\n      setMapZoom(12)\n    } else {\n      setMapCenter({ lat: 39.8283, lng: -98.5795 })\n      setMapZoom(4)\n    }\n  }\n\n  const getLocationFromIP = async (): Promise<{\n    lat: number\n    lng: number\n  } | null> => {\n    try {\n      const response = await fetch(\"https://ipapi.co/json/\")\n      const data = await response.json()\n      if (data.latitude && data.longitude) {\n        return { lat: data.latitude, lng: data.longitude }\n      }\n      return null\n    } catch {\n      return null\n    }\n  }\n\n  const handleLocate = async () => {\n    if (userLocation) {\n      setMapCenter(userLocation)\n      setMapZoom(15)\n      return\n    }\n\n    const tryIPFallback = async () => {\n      const ipLocation = await getLocationFromIP()\n      if (ipLocation) {\n        setUserLocation(ipLocation)\n        setMapCenter(ipLocation)\n        setMapZoom(15)\n      } else {\n        alert(\"Unable to get your location. Please try again later.\")\n      }\n    }\n\n    if (!(\"geolocation\" in navigator)) {\n      await tryIPFallback()\n      return\n    }\n\n    navigator.geolocation.getCurrentPosition(\n      (position) => {\n        const location = {\n          lat: position.coords.latitude,\n          lng: position.coords.longitude,\n        }\n        setUserLocation(location)\n        setMapCenter(location)\n        setMapZoom(15)\n      },\n      () => {\n        tryIPFallback()\n      },\n      { enableHighAccuracy: false, timeout: 5000, maximumAge: 300000 }\n    )\n  }\n\n  return (\n    <>\n      <div className=\"absolute top-4 right-4 z-10 flex flex-col items-center gap-2 sm:flex-row\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"size-11 bg-background! shadow-lg\"\n              >\n                <HugeiconsIcon icon={Layers01Icon} className=\"size-4\" />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            <DropdownMenuGroup>\n              {mapStyles.map((style) => {\n                return (\n                  <DropdownMenuItem\n                    key={style.id}\n                    onClick={() => setMapStyle(style.id)}\n                    className={cn(\n                      \"gap-3\",\n                      mapStyle === style.id && \"bg-accent\"\n                    )}\n                  >\n                    <HugeiconsIcon\n                      icon={style.icon}\n                      className=\"size-4 shrink-0\"\n                    />\n                    <div className=\"flex flex-col\">\n                      <span className=\"font-medium\">{style.name}</span>\n                      <span className=\"text-xs text-muted-foreground\">\n                        {style.description}\n                      </span>\n                    </div>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <ThemeToggle className=\"size-11 bg-background! shadow-lg\" />\n      </div>\n\n      <div className=\"absolute right-4 bottom-4 z-10 flex flex-col gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"size-11 bg-background! shadow-lg\"\n          onClick={handleLocate}\n        >\n          <HugeiconsIcon icon={Location01Icon} className=\"size-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"size-11 bg-background! shadow-lg\"\n          onClick={handleResetView}\n        >\n          <HugeiconsIcon icon={Compass01Icon} className=\"size-4\" />\n        </Button>\n        <div className=\"flex flex-col overflow-hidden rounded-lg border border-border bg-background! shadow-lg\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"flex size-11 items-center justify-center rounded-none border-b\"\n            onClick={handleZoomIn}\n          >\n            <HugeiconsIcon icon={Add01Icon} className=\"size-4\" />\n          </Button>\n          <div className=\"border-b border-border\"></div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"flex size-11 items-center justify-center rounded-none\"\n            onClick={handleZoomOut}\n          >\n            <HugeiconsIcon icon={MinusSignIcon} className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n    </>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/dashboard/map-view.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/dashboard/map-view.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport maplibregl from \"maplibre-gl\"\n\nimport \"maplibre-gl/dist/maplibre-gl.css\"\n\nimport { useTheme } from \"next-themes\"\n\nimport { tags as allTags, categories } from \"../../mock-data/locations\"\nimport { useMapsStore } from \"../../store/maps-store\"\n\nconst MAP_STYLES = {\n  light: \"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json\",\n  dark: \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n  streets: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n  outdoors: \"https://tiles.stadiamaps.com/styles/outdoors.json\",\n  satellite: \"https://tiles.stadiamaps.com/styles/alidade_satellite.json\",\n}\n\nexport function MapView() {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const mapRef = React.useRef<maplibregl.Map | null>(null)\n  const markersRef = React.useRef<Map<string, maplibregl.Marker>>(new Map())\n  const userMarkerRef = React.useRef<maplibregl.Marker | null>(null)\n  const popupRef = React.useRef<maplibregl.Popup | null>(null)\n  const isAnimatingRef = React.useRef(false)\n  const closeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)\n  const isHoveringPopupRef = React.useRef(false)\n  const { resolvedTheme } = useTheme()\n\n  const {\n    mapCenter,\n    mapZoom,\n    mapStyle,\n    setMapCenter,\n    setMapZoom,\n    selectLocation,\n    selectedLocationId,\n    userLocation,\n    routeDestinationId,\n    setUserLocation,\n    getFilteredLocations,\n    locations: allLocations,\n  } = useMapsStore()\n\n  const getMapStyleUrl = React.useCallback(() => {\n    if (mapStyle === \"default\") {\n      return resolvedTheme === \"dark\" ? MAP_STYLES.dark : MAP_STYLES.light\n    }\n    return MAP_STYLES[mapStyle]\n  }, [mapStyle, resolvedTheme])\n\n  const locations = getFilteredLocations()\n\n  const getTagName = (tagId: string) => {\n    return allTags.find((t) => t.id === tagId)?.name || tagId\n  }\n\n  const formatDate = (dateString: string) => {\n    const date = new Date(dateString)\n    return date.toLocaleDateString(\"en-US\", {\n      month: \"short\",\n      day: \"numeric\",\n      year: \"numeric\",\n    })\n  }\n\n  React.useEffect(() => {\n    const getLocationFromIP = async () => {\n      try {\n        const response = await fetch(\"https://ipapi.co/json/\")\n        const data = await response.json()\n        if (data.latitude && data.longitude) {\n          const location = { lat: data.latitude, lng: data.longitude }\n          setUserLocation(location)\n          setMapCenter(location)\n        }\n      } catch {\n        console.log(\"IP geolocation failed\")\n      }\n    }\n\n    if (\"geolocation\" in navigator) {\n      navigator.geolocation.getCurrentPosition(\n        (position) => {\n          const location = {\n            lat: position.coords.latitude,\n            lng: position.coords.longitude,\n          }\n          setUserLocation(location)\n          setMapCenter(location)\n        },\n        () => {\n          getLocationFromIP()\n        },\n        { enableHighAccuracy: false, timeout: 5000, maximumAge: 300000 }\n      )\n    } else {\n      getLocationFromIP()\n    }\n  }, [setUserLocation, setMapCenter])\n\n  const closePopup = React.useCallback(() => {\n    if (closeTimeoutRef.current) {\n      clearTimeout(closeTimeoutRef.current)\n    }\n    closeTimeoutRef.current = setTimeout(() => {\n      if (!isHoveringPopupRef.current && popupRef.current) {\n        popupRef.current.remove()\n        popupRef.current = null\n      }\n    }, 150)\n  }, [])\n\n  React.useEffect(() => {\n    if (!containerRef.current || mapRef.current) return\n\n    const map = new maplibregl.Map({\n      container: containerRef.current,\n      style: getMapStyleUrl(),\n      center: [mapCenter.lng, mapCenter.lat],\n      zoom: mapZoom,\n      minZoom: 3,\n      maxZoom: 18,\n      attributionControl: false,\n    })\n\n    map.addControl(\n      new maplibregl.AttributionControl({ compact: true }),\n      \"bottom-right\"\n    )\n\n    map.on(\"moveend\", () => {\n      if (isAnimatingRef.current) {\n        isAnimatingRef.current = false\n        return\n      }\n      const center = map.getCenter()\n      const zoom = map.getZoom()\n      setMapCenter({ lat: center.lat, lng: center.lng })\n      setMapZoom(zoom)\n    })\n\n    mapRef.current = map\n\n    return () => {\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current)\n      }\n      map.remove()\n      mapRef.current = null\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n    mapRef.current.setStyle(getMapStyleUrl())\n  }, [mapStyle, resolvedTheme, getMapStyleUrl])\n\n  React.useEffect(() => {\n    if (!mapRef.current || !userLocation) return\n\n    if (userMarkerRef.current) {\n      userMarkerRef.current.setLngLat([userLocation.lng, userLocation.lat])\n      return\n    }\n\n    const el = document.createElement(\"div\")\n    el.className = \"user-marker\"\n    el.innerHTML = `\n      <div class=\"relative\">\n        <div class=\"w-4 h-4 rounded-full bg-blue-500 border-2 border-white shadow-lg\"></div>\n        <div class=\"absolute inset-0 w-4 h-4 rounded-full bg-blue-500/50 animate-ping\"></div>\n      </div>\n    `\n\n    const marker = new maplibregl.Marker({ element: el })\n      .setLngLat([userLocation.lng, userLocation.lat])\n      .addTo(mapRef.current)\n\n    userMarkerRef.current = marker\n  }, [userLocation])\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n\n    markersRef.current.forEach((marker) => marker.remove())\n    markersRef.current.clear()\n\n    locations.forEach((location) => {\n      const category = categories.find((c) => c.id === location.categoryId)\n      const color = category?.color || \"#6b7280\"\n      const isSelected = selectedLocationId === location.id\n      const isRouteDestination = routeDestinationId === location.id\n\n      const el = document.createElement(\"div\")\n      el.className = \"marker-container\"\n      el.innerHTML = `\n        <div class=\"relative cursor-pointer transition-transform ${\n          isSelected || isRouteDestination ? \"scale-125\" : \"hover:scale-110\"\n        }\">\n          <svg width=\"32\" height=\"40\" viewBox=\"0 0 32 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M16 0C7.164 0 0 7.164 0 16C0 28 16 40 16 40C16 40 32 28 32 16C32 7.164 24.836 0 16 0Z\" fill=\"${\n              isRouteDestination ? \"#22c55e\" : isSelected ? \"#3b82f6\" : color\n            }\"/>\n            <circle cx=\"16\" cy=\"14\" r=\"6\" fill=\"white\"/>\n          </svg>\n          ${\n            isSelected\n              ? '<div class=\"absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-primary/30 animate-ping\"></div>'\n              : \"\"\n          }\n          ${\n            isRouteDestination\n              ? '<div class=\"absolute -top-1 -right-1 w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center shadow-md\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg></div>'\n              : \"\"\n          }\n        </div>\n      `\n\n      el.addEventListener(\"click\", () => {\n        selectLocation(location.id)\n      })\n\n      el.addEventListener(\"mouseenter\", () => {\n        if (closeTimeoutRef.current) {\n          clearTimeout(closeTimeoutRef.current)\n        }\n\n        if (popupRef.current) {\n          popupRef.current.remove()\n        }\n\n        const stars =\n          \"★\".repeat(Math.floor(location.rating)) +\n          \"☆\".repeat(5 - Math.floor(location.rating))\n\n        const tagsHtml = location.tags\n          .slice(0, 4)\n          .map((tag) => `<span class=\"popup-tag\">${getTagName(tag)}</span>`)\n          .join(\"\")\n\n        const popupContent = `\n          <div class=\"location-popup\" data-popup-hover=\"true\">\n            <div class=\"popup-header\">\n              <div class=\"popup-icon\" style=\"background-color: ${color}20;\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${color}\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"/>\n                  <circle cx=\"12\" cy=\"10\" r=\"3\"/>\n                </svg>\n              </div>\n              <div class=\"popup-title-section\">\n                <h3 class=\"popup-title\">${location.name}</h3>\n                <p class=\"popup-category\">${category?.name || \"Spot\"}</p>\n              </div>\n            </div>\n\n            <p class=\"popup-description\">${location.description}</p>\n\n            <p class=\"popup-address\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"/>\n                <circle cx=\"12\" cy=\"10\" r=\"3\"/>\n              </svg>\n              ${location.address}\n            </p>\n\n            ${tagsHtml ? `<div class=\"popup-tags\">${tagsHtml}</div>` : \"\"}\n\n            <div class=\"popup-stats\">\n              <div class=\"popup-stat\">\n                <span class=\"popup-rating\">\n                  <span class=\"stars\">${stars}</span>\n                  <span class=\"rating-value\">${location.rating}</span>\n                </span>\n              </div>\n              <div class=\"popup-stat\">\n                <svg class=\"popup-stat-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                  <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n                </svg>\n                <span class=\"popup-stat-value\">${location.visitCount}</span>\n                <span class=\"popup-stat-label\">check-ins</span>\n              </div>\n            </div>\n\n            <div class=\"popup-footer\">\n              ${\n                location.isFavorite\n                  ? '<span class=\"popup-favorite\">❤️ Saved</span>'\n                  : \"<span></span>\"\n              }\n              <span class=\"popup-date\">Posted ${formatDate(location.createdAt)}</span>\n            </div>\n          </div>\n        `\n\n        const popup = new maplibregl.Popup({\n          offset: [0, -35],\n          closeButton: false,\n          closeOnClick: false,\n          className: \"location-hover-popup\",\n          maxWidth: \"380px\",\n        })\n          .setLngLat([location.coordinates.lng, location.coordinates.lat])\n          .setHTML(popupContent)\n          .addTo(mapRef.current!)\n\n        const popupElement = popup.getElement()\n        if (popupElement) {\n          popupElement.addEventListener(\"mouseenter\", () => {\n            isHoveringPopupRef.current = true\n            if (closeTimeoutRef.current) {\n              clearTimeout(closeTimeoutRef.current)\n            }\n          })\n          popupElement.addEventListener(\"mouseleave\", () => {\n            isHoveringPopupRef.current = false\n            closePopup()\n          })\n          popupElement.addEventListener(\"click\", () => {\n            selectLocation(location.id)\n            popup.remove()\n            popupRef.current = null\n          })\n        }\n\n        popupRef.current = popup\n      })\n\n      el.addEventListener(\"mouseleave\", () => {\n        closePopup()\n      })\n\n      const marker = new maplibregl.Marker({ element: el })\n        .setLngLat([location.coordinates.lng, location.coordinates.lat])\n        .addTo(mapRef.current!)\n\n      markersRef.current.set(location.id, marker)\n    })\n  }, [\n    locations,\n    selectedLocationId,\n    selectLocation,\n    closePopup,\n    routeDestinationId,\n  ])\n\n  const routeDataRef = React.useRef<{\n    coordinates: [number, number][]\n    bounds: maplibregl.LngLatBounds\n  } | null>(null)\n\n  React.useEffect(() => {\n    if (!routeDestinationId || !userLocation) {\n      routeDataRef.current = null\n      return\n    }\n\n    const destination = allLocations.find((l) => l.id === routeDestinationId)\n    if (!destination) {\n      routeDataRef.current = null\n      return\n    }\n\n    const fetchRoute = async () => {\n      const start = `${userLocation.lng},${userLocation.lat}`\n      const end = `${destination.coordinates.lng},${destination.coordinates.lat}`\n\n      try {\n        const response = await fetch(\n          `https://router.project-osrm.org/route/v1/driving/${start};${end}?overview=full&geometries=geojson`\n        )\n        const data = await response.json()\n\n        if (data.routes && data.routes[0]) {\n          const coordinates = data.routes[0].geometry.coordinates as [\n            number,\n            number,\n          ][]\n          const bounds = new maplibregl.LngLatBounds()\n          bounds.extend([userLocation.lng, userLocation.lat])\n          bounds.extend([\n            destination.coordinates.lng,\n            destination.coordinates.lat,\n          ])\n          coordinates.forEach((coord) => bounds.extend(coord))\n\n          routeDataRef.current = { coordinates, bounds }\n\n          const map = mapRef.current\n          if (map) {\n            drawRoute(map, coordinates)\n            isAnimatingRef.current = true\n            map.fitBounds(bounds, { padding: 80 })\n          }\n        }\n      } catch (error) {\n        console.error(\"Failed to fetch route:\", error)\n      }\n    }\n\n    fetchRoute()\n  }, [routeDestinationId, userLocation, allLocations])\n\n  const drawRoute = React.useCallback(\n    (map: maplibregl.Map, coordinates: [number, number][]) => {\n      if (map.getLayer(\"route-line\")) map.removeLayer(\"route-line\")\n      if (map.getLayer(\"route-line-outline\"))\n        map.removeLayer(\"route-line-outline\")\n      if (map.getSource(\"route\")) map.removeSource(\"route\")\n\n      map.addSource(\"route\", {\n        type: \"geojson\",\n        data: {\n          type: \"Feature\",\n          properties: {},\n          geometry: {\n            type: \"LineString\",\n            coordinates,\n          },\n        },\n      })\n\n      map.addLayer({\n        id: \"route-line-outline\",\n        type: \"line\",\n        source: \"route\",\n        layout: {\n          \"line-join\": \"round\",\n          \"line-cap\": \"round\",\n        },\n        paint: {\n          \"line-color\": \"#1d4ed8\",\n          \"line-width\": 8,\n          \"line-opacity\": 0.4,\n        },\n      })\n\n      map.addLayer({\n        id: \"route-line\",\n        type: \"line\",\n        source: \"route\",\n        layout: {\n          \"line-join\": \"round\",\n          \"line-cap\": \"round\",\n        },\n        paint: {\n          \"line-color\": \"#3b82f6\",\n          \"line-width\": 4,\n          \"line-opacity\": 1,\n        },\n      })\n    },\n    []\n  )\n\n  React.useEffect(() => {\n    const map = mapRef.current\n    if (!map) return\n\n    const clearRoute = () => {\n      if (map.getLayer(\"route-line\")) map.removeLayer(\"route-line\")\n      if (map.getLayer(\"route-line-outline\"))\n        map.removeLayer(\"route-line-outline\")\n      if (map.getSource(\"route\")) map.removeSource(\"route\")\n    }\n\n    if (!routeDestinationId) {\n      clearRoute()\n    }\n  }, [routeDestinationId])\n\n  React.useEffect(() => {\n    const map = mapRef.current\n    if (!map) return\n\n    const handleStyleLoad = () => {\n      if (routeDataRef.current && routeDestinationId) {\n        drawRoute(map, routeDataRef.current.coordinates)\n      }\n    }\n\n    map.on(\"style.load\", handleStyleLoad)\n\n    return () => {\n      map.off(\"style.load\", handleStyleLoad)\n    }\n  }, [drawRoute, routeDestinationId])\n\n  React.useEffect(() => {\n    if (!mapRef.current || !selectedLocationId) return\n    if (routeDestinationId) return\n\n    const location = locations.find((l) => l.id === selectedLocationId)\n    if (location) {\n      isAnimatingRef.current = true\n      mapRef.current.flyTo({\n        center: [location.coordinates.lng, location.coordinates.lat],\n        zoom: Math.max(mapRef.current.getZoom(), 14),\n        essential: true,\n      })\n    }\n  }, [selectedLocationId, locations, routeDestinationId])\n\n  const lastCenterRef = React.useRef({\n    lat: mapCenter.lat,\n    lng: mapCenter.lng,\n  })\n  const lastZoomRef = React.useRef(mapZoom)\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n\n    const centerChanged =\n      Math.abs(lastCenterRef.current.lat - mapCenter.lat) > 0.0001 ||\n      Math.abs(lastCenterRef.current.lng - mapCenter.lng) > 0.0001\n    const zoomChanged = Math.abs(lastZoomRef.current - mapZoom) > 0.1\n\n    if (centerChanged || zoomChanged) {\n      isAnimatingRef.current = true\n      mapRef.current.flyTo({\n        center: [mapCenter.lng, mapCenter.lat],\n        zoom: mapZoom,\n        essential: true,\n      })\n      lastCenterRef.current = { lat: mapCenter.lat, lng: mapCenter.lng }\n      lastZoomRef.current = mapZoom\n    }\n  }, [mapCenter, mapZoom])\n\n  return (\n    <>\n      <div ref={containerRef} className=\"absolute inset-0 h-full w-full\" />\n      <style>{`\n        .maplibregl-popup-content {\n          background-color: var(--background) !important;\n          color: var(--foreground) !important;\n          border: 1px solid var(--border) !important;\n          border-radius: 0.5rem !important;\n          box-shadow:\n            0 10px 40px -10px rgba(0, 0, 0, 0.2),\n            0 4px 12px rgba(0, 0, 0, 0.1) !important;\n          padding: 0 !important;\n        }\n\n        .maplibregl-popup-tip {\n          display: none !important;\n        }\n\n        .location-hover-popup .maplibregl-popup-content {\n          border-radius: 16px !important;\n          overflow: hidden;\n        }\n\n        .location-popup {\n          min-width: 320px;\n          max-width: 360px;\n          cursor: pointer !important;\n          padding: 16px;\n        }\n\n        .location-popup .popup-header {\n          display: flex;\n          align-items: flex-start;\n          gap: 12px;\n          margin-bottom: 12px;\n        }\n\n        .location-popup .popup-icon {\n          width: 48px;\n          height: 48px;\n          border-radius: 12px;\n          flex-shrink: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .location-popup .popup-title-section {\n          flex: 1;\n          min-width: 0;\n        }\n\n        .location-popup .popup-title {\n          color: var(--foreground);\n          font-size: 16px;\n          font-weight: 600;\n          line-height: 1.3;\n          margin: 0;\n        }\n\n        .location-popup .popup-category {\n          color: var(--muted-foreground);\n          font-size: 12px;\n          margin: 4px 0 0;\n        }\n\n        .location-popup .popup-description {\n          color: var(--foreground);\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: 3;\n          font-size: 13px;\n          line-height: 1.5;\n          margin: 0 0 12px;\n          overflow: hidden;\n        }\n\n        .location-popup .popup-address {\n          color: var(--muted-foreground);\n          display: flex;\n          align-items: flex-start;\n          gap: 6px;\n          font-size: 12px;\n          line-height: 1.4;\n          margin: 0 0 12px;\n        }\n\n        .location-popup .popup-address svg {\n          flex-shrink: 0;\n          margin-top: 2px;\n        }\n\n        .location-popup .popup-tags {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 6px;\n          margin-bottom: 12px;\n        }\n\n        .location-popup .popup-tag {\n          background-color: var(--muted);\n          color: var(--foreground);\n          border-radius: 6px;\n          font-size: 11px;\n          padding: 4px 8px;\n        }\n\n        .location-popup .popup-stats {\n          border-top: 1px solid var(--border);\n          border-bottom: 1px solid var(--border);\n          display: flex;\n          align-items: center;\n          gap: 16px;\n          margin-bottom: 12px;\n          padding: 12px 0;\n        }\n\n        .location-popup .popup-stat {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n        }\n\n        .location-popup .popup-stat-icon {\n          color: var(--muted-foreground);\n        }\n\n        .location-popup .popup-stat-value {\n          color: var(--foreground);\n          font-size: 13px;\n          font-weight: 600;\n        }\n\n        .location-popup .popup-stat-label {\n          color: var(--muted-foreground);\n          font-size: 11px;\n        }\n\n        .location-popup .popup-rating {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n        }\n\n        .location-popup .popup-rating .stars {\n          color: #facc15;\n          font-size: 14px;\n          letter-spacing: -1px;\n        }\n\n        .location-popup .popup-rating .rating-value {\n          color: var(--foreground);\n          font-size: 13px;\n          font-weight: 600;\n        }\n\n        .location-popup .popup-favorite {\n          color: #ef4444;\n          display: inline-flex;\n          align-items: center;\n          gap: 4px;\n          font-size: 12px;\n          font-weight: 500;\n        }\n\n        .location-popup .popup-footer {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n        }\n\n        .location-popup .popup-date {\n          color: var(--muted-foreground);\n          font-size: 11px;\n        }\n\n        .dark .location-hover-popup .maplibregl-popup-content {\n          box-shadow:\n            0 10px 40px -10px rgba(0, 0, 0, 0.5),\n            0 4px 12px rgba(0, 0, 0, 0.3) !important;\n        }\n      `}</style>\n    </>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/dashboard/maps-panel.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/dashboard/maps-panel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpDownIcon,\n  Calendar01Icon,\n  Cancel01Icon,\n  ChartIncreaseIcon,\n  Clock01Icon,\n  FavouriteIcon,\n  Loading01Icon,\n  Location01Icon,\n  Navigation01Icon,\n  Route01Icon,\n  Search01Icon,\n  SortByDown02Icon,\n  SortByUp02Icon,\n  StarIcon,\n  Tick01Icon,\n  ViewIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useMediaQuery } from \"usehooks-ts\"\n\nimport { Badge } from \"@loveui/ui/ui/badge\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\n\nimport { cn } from \"../../lib/utils\"\nimport {\n  tags as allTags,\n  categories,\n  type Location,\n} from \"../../mock-data/locations\"\nimport { useMapsStore } from \"../../store/maps-store\"\n\ntype PanelMode = \"all\" | \"favorites\" | \"recents\"\n\ninterface MapsPanelProps {\n  mode?: PanelMode\n}\n\nconst panelConfig = {\n  all: {\n    title: \"Explore Feed\",\n    emptyIcon: Location01Icon,\n    emptyTitle: \"No spots found\",\n    emptyDescription: null,\n    getSubtitle: (count: number) => `${count} spot${count !== 1 ? \"s\" : \"\"}`,\n  },\n  favorites: {\n    title: \"Saved Spots\",\n    emptyIcon: FavouriteIcon,\n    emptyTitle: \"No saved spots yet\",\n    emptyDescription: \"Tap the heart icon on a spot to save it\",\n    getSubtitle: (count: number) =>\n      `${count} saved spot${count !== 1 ? \"s\" : \"\"}`,\n  },\n  recents: {\n    title: \"Recent Check-ins\",\n    emptyIcon: Clock01Icon,\n    emptyTitle: \"No recent check-ins\",\n    emptyDescription: null,\n    getSubtitle: (count: number) => `Last ${count} check-ins`,\n  },\n}\n\nfunction calculateDistance(\n  lat1: number,\n  lng1: number,\n  lat2: number,\n  lng2: number\n): number {\n  const R = 6371\n  const dLat = ((lat2 - lat1) * Math.PI) / 180\n  const dLng = ((lng2 - lng1) * Math.PI) / 180\n  const a =\n    Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n    Math.cos((lat1 * Math.PI) / 180) *\n      Math.cos((lat2 * Math.PI) / 180) *\n      Math.sin(dLng / 2) *\n      Math.sin(dLng / 2)\n  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))\n  return R * c\n}\n\nfunction formatDistance(km: number): string {\n  if (km < 1) {\n    return `${Math.round(km * 1000)} m`\n  }\n  if (km < 10) {\n    return `${km.toFixed(1)} km`\n  }\n  return `${Math.round(km)} km`\n}\n\nexport function MapsPanel({ mode = \"all\" }: MapsPanelProps) {\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const [isLoadingRoute, setIsLoadingRoute] = React.useState(false)\n  const [isRequestingLocation, setIsRequestingLocation] = React.useState(false)\n  const {\n    selectedLocationId,\n    searchQuery,\n    sortBy,\n    selectLocation,\n    toggleFavorite,\n    setSearchQuery,\n    setSortBy,\n    getFilteredLocations,\n    getFavoriteLocations,\n    getRecentLocations,\n    userLocation,\n    routeDestinationId,\n    setRouteDestination,\n    setUserLocation,\n    clearRoute,\n    isPanelVisible,\n    setPanelVisible,\n  } = useMapsStore()\n\n  const isDesktop = useMediaQuery(\"(min-width: 640px)\")\n\n  React.useEffect(() => {\n    if (isDesktop && !isPanelVisible) {\n      setPanelVisible(true)\n    }\n  }, [isDesktop, isPanelVisible, setPanelVisible])\n\n  const getDistance = React.useCallback(\n    (location: Location) => {\n      if (!userLocation) return null\n      return calculateDistance(\n        userLocation.lat,\n        userLocation.lng,\n        location.coordinates.lat,\n        location.coordinates.lng\n      )\n    },\n    [userLocation]\n  )\n\n  const getLocationFromIP = React.useCallback(async (): Promise<{\n    lat: number\n    lng: number\n  } | null> => {\n    try {\n      const response = await fetch(\"https://ipapi.co/json/\")\n      const data = await response.json()\n      if (data.latitude && data.longitude) {\n        return { lat: data.latitude, lng: data.longitude }\n      }\n      return null\n    } catch {\n      return null\n    }\n  }, [])\n\n  const requestUserLocation = React.useCallback(() => {\n    return new Promise<{ lat: number; lng: number } | null>((resolve) => {\n      setIsRequestingLocation(true)\n\n      const tryIPFallback = async () => {\n        const ipLocation = await getLocationFromIP()\n        setIsRequestingLocation(false)\n        if (ipLocation) {\n          setUserLocation(ipLocation)\n          resolve(ipLocation)\n        } else {\n          alert(\"Unable to get your location. Please try again later.\")\n          resolve(null)\n        }\n      }\n\n      if (!(\"geolocation\" in navigator)) {\n        tryIPFallback()\n        return\n      }\n\n      navigator.geolocation.getCurrentPosition(\n        (position) => {\n          const location = {\n            lat: position.coords.latitude,\n            lng: position.coords.longitude,\n          }\n          setUserLocation(location)\n          setIsRequestingLocation(false)\n          resolve(location)\n        },\n        () => {\n          tryIPFallback()\n        },\n        { enableHighAccuracy: false, timeout: 5000, maximumAge: 300000 }\n      )\n    })\n  }, [setUserLocation, getLocationFromIP])\n\n  const getLocations = () => {\n    switch (mode) {\n      case \"favorites\":\n        return getFavoriteLocations()\n      case \"recents\":\n        return getRecentLocations()\n      default:\n        return getFilteredLocations()\n    }\n  }\n\n  const rawLocations = getLocations()\n  const locations = React.useMemo(() => {\n    if (!selectedLocationId) return rawLocations\n    const selected = rawLocations.find((l) => l.id === selectedLocationId)\n    if (!selected) return rawLocations\n    return [\n      selected,\n      ...rawLocations.filter((l) => l.id !== selectedLocationId),\n    ]\n  }, [rawLocations, selectedLocationId])\n\n  const config = panelConfig[mode]\n  const EmptyIcon = config.emptyIcon\n\n  React.useEffect(() => {\n    if (selectedLocationId) {\n      const isInList = rawLocations.some((l) => l.id === selectedLocationId)\n      if (!isInList) {\n        selectLocation(null)\n        clearRoute()\n      }\n    }\n  }, [rawLocations, selectedLocationId, selectLocation, clearRoute])\n\n  React.useEffect(() => {\n    if (selectedLocationId && scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTo({ top: 0, behavior: \"smooth\" })\n    }\n  }, [selectedLocationId])\n\n  const handleLocationClick = (location: Location) => {\n    if (selectedLocationId === location.id) {\n      selectLocation(null)\n    } else {\n      selectLocation(location.id)\n    }\n  }\n\n  const handleClose = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    selectLocation(null)\n    clearRoute()\n  }\n\n  const handleGetDirections = async (\n    e: React.MouseEvent,\n    location: Location\n  ) => {\n    e.stopPropagation()\n\n    if (routeDestinationId === location.id) {\n      clearRoute()\n      return\n    }\n\n    let currentUserLocation = userLocation\n\n    if (!currentUserLocation) {\n      currentUserLocation = await requestUserLocation()\n      if (!currentUserLocation) {\n        return\n      }\n    }\n\n    setIsLoadingRoute(true)\n    setRouteDestination(location.id)\n\n    setTimeout(() => {\n      setIsLoadingRoute(false)\n    }, 1500)\n  }\n\n  const formatDate = (dateString: string) => {\n    const date = new Date(dateString)\n    const now = new Date()\n    const diffTime = Math.abs(now.getTime() - date.getTime())\n    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))\n\n    if (diffDays === 0) return \"Today\"\n    if (diffDays === 1) return \"Yesterday\"\n    if (diffDays < 7) return `${diffDays} days ago`\n    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`\n    return date.toLocaleDateString()\n  }\n\n  const getTagName = (tagId: string) => {\n    return allTags.find((t) => t.id === tagId)?.name || tagId\n  }\n\n  if (!isPanelVisible) {\n    return (\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"absolute top-4 left-4 z-20 size-10 bg-background! shadow-xl sm:hidden\"\n        onClick={() => setPanelVisible(true)}\n      >\n        <HugeiconsIcon icon={Location01Icon} className=\"size-5\" />\n      </Button>\n    )\n  }\n\n  return (\n    <div className=\"absolute top-4 bottom-4 left-4 z-20 flex w-80 flex-col overflow-hidden rounded-xl border bg-background shadow-xl sm:w-[400px]\">\n      <div className=\"flex items-center justify-between border-b p-3\">\n        <div className=\"\">\n          <h2 className=\"flex items-center gap-2 font-semibold\">\n            {mode === \"recents\" && (\n              <HugeiconsIcon icon={Clock01Icon} className=\"size-4\" />\n            )}\n            {config.title}\n          </h2>\n          <p className=\"text-xs text-muted-foreground\">\n            {config.getSubtitle(locations.length)}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-1\">\n          <SidebarTrigger className=\"size-7\" />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-7 sm:hidden\"\n            onClick={() => setPanelVisible(false)}\n          >\n            <HugeiconsIcon icon={Cancel01Icon} className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"border-b p-2\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative flex-1\">\n            <HugeiconsIcon\n              icon={Search01Icon}\n              className=\"pointer-events-none absolute top-1/2 left-2.5 z-10 size-4 -translate-y-1/2 text-muted-foreground\"\n            />\n            <Input\n              placeholder=\"Search spots, creators, or tags...\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className={cn(\"h-9 pl-8\", searchQuery && \"pr-8\")}\n            />\n            {searchQuery && (\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"absolute top-1/2 right-1 size-7 -translate-y-1/2\"\n                onClick={() => setSearchQuery(\"\")}\n              >\n                <HugeiconsIcon icon={Cancel01Icon} className=\"size-3.5\" />\n              </Button>\n            )}\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"size-9 shrink-0\"\n                >\n                  <HugeiconsIcon icon={ArrowUpDownIcon} className=\"size-4\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-48\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"nearest\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={Navigation01Icon} className=\"size-4\" />\n                  <span className=\"flex-1\">Nearest</span>\n                  {sortBy === \"nearest\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"rating\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={StarIcon} className=\"size-4\" />\n                  <span className=\"flex-1\">Best rated</span>\n                  {sortBy === \"rating\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"visits\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={ChartIncreaseIcon} className=\"size-4\" />\n                  <span className=\"flex-1\">Most check-ins</span>\n                  {sortBy === \"visits\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"date-newest\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={Calendar01Icon} className=\"size-4\" />\n                  <span className=\"flex-1\">Newest first</span>\n                  {sortBy === \"date-newest\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"date-oldest\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={Calendar01Icon} className=\"size-4\" />\n                  <span className=\"flex-1\">Oldest first</span>\n                  {sortBy === \"date-oldest\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"alpha-az\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={SortByDown02Icon} className=\"size-4\" />\n                  <span className=\"flex-1\">A to Z</span>\n                  {sortBy === \"alpha-az\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"alpha-za\")}\n                  className=\"gap-2\"\n                >\n                  <HugeiconsIcon icon={SortByUp02Icon} className=\"size-4\" />\n                  <span className=\"flex-1\">Z to A</span>\n                  {sortBy === \"alpha-za\" && (\n                    <HugeiconsIcon icon={Tick01Icon} className=\"size-4\" />\n                  )}\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div ref={scrollContainerRef} className=\"flex-1 overflow-y-auto\">\n        <div className=\"space-y-2 p-2\">\n          {locations.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n              <HugeiconsIcon\n                icon={EmptyIcon}\n                className=\"mb-2 size-8 text-muted-foreground\"\n              />\n              <p className=\"text-sm font-medium\">{config.emptyTitle}</p>\n              {config.emptyDescription && (\n                <p className=\"mt-1 text-xs text-muted-foreground\">\n                  {config.emptyDescription}\n                </p>\n              )}\n            </div>\n          ) : (\n            locations.map((location) => {\n              const category = categories.find(\n                (c) => c.id === location.categoryId\n              )\n              const isSelected = selectedLocationId === location.id\n              const isRouteActive = routeDestinationId === location.id\n\n              if (isSelected) {\n                return (\n                  <div\n                    key={location.id}\n                    className={cn(\n                      \"flex flex-col overflow-hidden rounded-lg border-2\",\n                      isRouteActive\n                        ? \"border-green-500 bg-green-500/10\"\n                        : \"border-primary bg-accent/30\"\n                    )}\n                  >\n                    <div className=\"p-4\">\n                      <div className=\"mb-3 flex items-start justify-between\">\n                        <div className=\"flex items-start gap-3\">\n                          <div\n                            className=\"flex size-11 shrink-0 items-center justify-center rounded-lg\"\n                            style={{ backgroundColor: `${category?.color}20` }}\n                          >\n                            <HugeiconsIcon\n                              icon={Location01Icon}\n                              className=\"size-5\"\n                              style={{ color: category?.color }}\n                            />\n                          </div>\n                          <div>\n                            <div className=\"flex items-center gap-2\">\n                              <h3 className=\"text-base font-semibold\">\n                                {location.name}\n                              </h3>\n                              {location.isFavorite && (\n                                <HugeiconsIcon\n                                  icon={FavouriteIcon}\n                                  className=\"size-4 shrink-0 fill-red-500 text-red-500\"\n                                />\n                              )}\n                            </div>\n                            <p className=\"text-sm text-muted-foreground\">\n                              {category?.name}\n                            </p>\n                          </div>\n                        </div>\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className=\"size-8 shrink-0\"\n                          onClick={handleClose}\n                        >\n                          <HugeiconsIcon\n                            icon={Cancel01Icon}\n                            className=\"size-4\"\n                          />\n                        </Button>\n                      </div>\n\n                      <p className=\"mb-3 text-sm text-muted-foreground\">\n                        {location.address}\n                      </p>\n\n                      <p className=\"mb-4 text-sm\">{location.description}</p>\n\n                      <div className=\"mb-4 flex flex-wrap items-center gap-4\">\n                        {userLocation && (\n                          <div className=\"flex items-center gap-1.5\">\n                            <HugeiconsIcon\n                              icon={Navigation01Icon}\n                              className=\"size-4 text-primary\"\n                            />\n                            <span className=\"font-semibold text-primary\">\n                              {formatDistance(getDistance(location) || 0)}\n                            </span>\n                          </div>\n                        )}\n                        <div className=\"flex items-center gap-1.5\">\n                          <HugeiconsIcon\n                            icon={StarIcon}\n                            className=\"size-4 fill-yellow-400 text-yellow-400\"\n                          />\n                          <span className=\"font-semibold\">\n                            {location.rating}\n                          </span>\n                          <span className=\"text-sm text-muted-foreground\">\n                            /5\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-1.5\">\n                          <HugeiconsIcon\n                            icon={ViewIcon}\n                            className=\"size-4 text-muted-foreground\"\n                          />\n                          <span className=\"text-sm text-muted-foreground\">\n                            {location.visitCount} check-ins\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-1.5\">\n                          <HugeiconsIcon\n                            icon={Clock01Icon}\n                            className=\"size-4 text-muted-foreground\"\n                          />\n                          <span className=\"text-sm text-muted-foreground\">\n                            {formatDate(location.createdAt)}\n                          </span>\n                        </div>\n                      </div>\n\n                      {location.tags.length > 0 && (\n                        <div className=\"mb-4 flex flex-wrap gap-1.5\">\n                          {location.tags.map((tag) => (\n                            <Badge\n                              key={tag}\n                              variant=\"secondary\"\n                              className=\"text-xs\"\n                            >\n                              {getTagName(tag)}\n                            </Badge>\n                          ))}\n                        </div>\n                      )}\n\n                      <div className=\"flex items-center gap-2\">\n                        <Button\n                          variant=\"outline\"\n                          size=\"sm\"\n                          className=\"flex-1\"\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            toggleFavorite(location.id)\n                          }}\n                        >\n                          <HugeiconsIcon\n                            icon={FavouriteIcon}\n                            className={cn(\n                              \"mr-2 size-4\",\n                              location.isFavorite && \"fill-red-500 text-red-500\"\n                            )}\n                          />\n                          {location.isFavorite ? \"Unsave\" : \"Save\"}\n                        </Button>\n                        <Button\n                          size=\"sm\"\n                          className={cn(\n                            \"flex-1\",\n                            isRouteActive\n                              ? \"bg-green-500 hover:bg-green-600\"\n                              : \"\"\n                          )}\n                          onClick={(e) => handleGetDirections(e, location)}\n                          disabled={isLoadingRoute || isRequestingLocation}\n                        >\n                          {isLoadingRoute || isRequestingLocation ? (\n                            <HugeiconsIcon\n                              icon={Loading01Icon}\n                              className=\"mr-2 size-4 animate-spin\"\n                            />\n                          ) : (\n                            <HugeiconsIcon\n                              icon={Route01Icon}\n                              className=\"mr-2 size-4\"\n                            />\n                          )}\n                          {isRequestingLocation\n                            ? \"Getting location...\"\n                            : isRouteActive\n                              ? \"Clear route\"\n                              : \"Get directions\"}\n                        </Button>\n                      </div>\n                    </div>\n                  </div>\n                )\n              }\n\n              return (\n                <div\n                  key={location.id}\n                  className={cn(\n                    \"group flex cursor-pointer flex-col gap-2 rounded-lg border p-3 transition-colors hover:bg-accent/50\",\n                    routeDestinationId === location.id &&\n                      \"border-green-500 bg-green-500/10\"\n                  )}\n                  onClick={() => handleLocationClick(location)}\n                >\n                  <div className=\"flex items-start gap-3\">\n                    <div\n                      className=\"flex size-9 shrink-0 items-center justify-center rounded-lg\"\n                      style={{ backgroundColor: `${category?.color}20` }}\n                    >\n                      <HugeiconsIcon\n                        icon={Location01Icon}\n                        className=\"size-4\"\n                        style={{ color: category?.color }}\n                      />\n                    </div>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex items-center gap-2\">\n                        <h3 className=\"truncate text-sm font-medium\">\n                          {location.name}\n                        </h3>\n                        {location.isFavorite && (\n                          <HugeiconsIcon\n                            icon={FavouriteIcon}\n                            className=\"size-3 shrink-0 fill-red-500 text-red-500\"\n                          />\n                        )}\n                        {routeDestinationId === location.id && (\n                          <Badge\n                            variant=\"secondary\"\n                            className=\"h-5 bg-green-500/20 text-[10px] text-green-600\"\n                          >\n                            Route active\n                          </Badge>\n                        )}\n                      </div>\n                      <p className=\"truncate text-xs text-muted-foreground\">\n                        {location.address}\n                      </p>\n                    </div>\n                    <div className=\"flex shrink-0 items-center gap-1\">\n                      <HugeiconsIcon\n                        icon={StarIcon}\n                        className=\"size-3 fill-yellow-400 text-yellow-400\"\n                      />\n                      <span className=\"text-xs font-medium\">\n                        {location.rating}\n                      </span>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center gap-3\">\n                      {userLocation && (\n                        <div className=\"flex items-center gap-1\">\n                          <HugeiconsIcon\n                            icon={Navigation01Icon}\n                            className=\"size-3 text-muted-foreground\"\n                          />\n                          <span className=\"text-xs font-medium text-muted-foreground\">\n                            {formatDistance(getDistance(location) || 0)}\n                          </span>\n                        </div>\n                      )}\n                      {mode === \"recents\" && (\n                        <div className=\"flex items-center gap-1\">\n                          <HugeiconsIcon\n                            icon={Clock01Icon}\n                            className=\"size-3 text-muted-foreground\"\n                          />\n                          <span className=\"text-xs text-muted-foreground\">\n                            {formatDate(location.createdAt)}\n                          </span>\n                        </div>\n                      )}\n                      <div className=\"flex items-center gap-1\">\n                        <HugeiconsIcon\n                          icon={ViewIcon}\n                          className=\"size-3 text-muted-foreground\"\n                        />\n                        <span className=\"text-xs text-muted-foreground\">\n                          {location.visitCount}{\" \"}\n                          {mode !== \"recents\" && \"check-ins\"}\n                        </span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-0.5\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"size-7\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          toggleFavorite(location.id)\n                        }}\n                      >\n                        <HugeiconsIcon\n                          icon={FavouriteIcon}\n                          className={cn(\n                            \"size-3.5\",\n                            location.isFavorite && \"fill-red-500 text-red-500\"\n                          )}\n                        />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className={cn(\n                          \"size-7\",\n                          routeDestinationId === location.id && \"text-green-500\"\n                        )}\n                        onClick={(e) => handleGetDirections(e, location)}\n                      >\n                        <HugeiconsIcon\n                          icon={Route01Icon}\n                          className=\"size-3.5\"\n                        />\n                      </Button>\n                    </div>\n                  </div>\n\n                  {location.tags.length > 0 && (\n                    <div className=\"flex flex-wrap gap-1\">\n                      {location.tags.slice(0, 3).map((tag) => (\n                        <Badge\n                          key={tag}\n                          variant=\"secondary\"\n                          className=\"h-5 text-[10px]\"\n                        >\n                          {getTagName(tag)}\n                        </Badge>\n                      ))}\n                      {location.tags.length > 3 && (\n                        <Badge variant=\"outline\" className=\"h-5 text-[10px]\">\n                          +{location.tags.length - 3}\n                        </Badge>\n                      )}\n                    </div>\n                  )}\n                </div>\n              )\n            })\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/dashboard/sidebar.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/dashboard/sidebar.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport {\n  BedIcon,\n  Building01Icon,\n  Clock01Icon,\n  Coffee01Icon,\n  DrinkIcon,\n  Dumbbell01Icon,\n  FavouriteIcon,\n  Location01Icon,\n  Logout01Icon,\n  Restaurant01Icon,\n  Settings01Icon,\n  ShoppingBag01Icon,\n  Tree01Icon,\n  UnfoldMoreIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nimport { categories } from \"../../mock-data/locations\"\nimport { useMapsStore } from \"../../store/maps-store\"\n\nconst navItems = [\n  { id: \"all\", title: \"Explore Feed\", icon: Location01Icon, href: \"/\" },\n  { id: \"favorites\", title: \"Saved\", icon: FavouriteIcon, href: \"/favorites\" },\n  { id: \"recents\", title: \"Check-ins\", icon: Clock01Icon, href: \"/recents\" },\n]\n\nconst iconMap: Record<string, typeof Location01Icon> = {\n  utensils: Restaurant01Icon,\n  coffee: Coffee01Icon,\n  wine: DrinkIcon,\n  trees: Tree01Icon,\n  landmark: Building01Icon,\n  \"shopping-bag\": ShoppingBag01Icon,\n  bed: BedIcon,\n  dumbbell: Dumbbell01Icon,\n}\n\nexport function LocationsSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const pathname = usePathname()\n  const {\n    locations,\n    selectedCategory,\n    setSelectedCategory,\n    getRecentLocations,\n  } = useMapsStore()\n\n  const favoriteCount = locations.filter((l) => l.isFavorite).length\n  const recentCount = getRecentLocations().length\n\n  const getCategoryCount = (categoryId: string) => {\n    if (categoryId === \"all\") return locations.length\n    return locations.filter((l) => l.categoryId === categoryId).length\n  }\n\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader className=\"px-2.5 py-3\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <button className=\"-m-1 flex w-full shrink-0 items-center gap-2.5 rounded-md p-1 transition-colors hover:bg-sidebar-accent\">\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-lg bg-foreground text-background\">\n                  <HugeiconsIcon icon={Location01Icon} className=\"size-4\" />\n                </div>\n                <div className=\"flex items-center gap-1 group-data-[collapsible=icon]:hidden\">\n                  <span className=\"text-sm font-medium\">\n                    LoveUI - Social Pulse\n                  </span>\n                  <HugeiconsIcon\n                    icon={UnfoldMoreIcon}\n                    className=\"size-3 text-muted-foreground\"\n                  />\n                </div>\n              </button>\n            }\n          />\n          <DropdownMenuContent align=\"start\" className=\"w-56\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Settings01Icon} className=\"size-4\" />\n                <span>Settings</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n                <HugeiconsIcon icon={Logout01Icon} className=\"size-4\" />\n                <span>Log out</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-2.5\">\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {navItems.map((item) => {\n                const isActive = pathname === item.href\n                let badge: number | undefined\n                if (item.id === \"favorites\") badge = favoriteCount\n                if (item.id === \"recents\") badge = recentCount\n                if (item.id === \"all\") badge = locations.length\n\n                return (\n                  <SidebarMenuItem key={item.id}>\n                    <SidebarMenuButton\n                      render={<Link href={item.href} />}\n                      isActive={isActive}\n                      className=\"h-8\"\n                    >\n                      <HugeiconsIcon icon={item.icon} className=\"size-4\" />\n                      <span className=\"text-sm\">{item.title}</span>\n                    </SidebarMenuButton>\n                    {badge !== undefined && badge > 0 && (\n                      <SidebarMenuBadge>{badge}</SidebarMenuBadge>\n                    )}\n                  </SidebarMenuItem>\n                )\n              })}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup className=\"mt-4 p-0\">\n          <SidebarGroupLabel className=\"h-6 px-0\">\n            <span className=\"text-[10px] font-medium tracking-wider text-muted-foreground uppercase\">\n              Vibes\n            </span>\n          </SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  isActive={selectedCategory === \"all\"}\n                  onClick={() => setSelectedCategory(\"all\")}\n                  className=\"h-7\"\n                >\n                  <HugeiconsIcon icon={Location01Icon} className=\"size-3.5\" />\n                  <span className=\"text-sm\">All spots</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{getCategoryCount(\"all\")}</SidebarMenuBadge>\n              </SidebarMenuItem>\n              {categories.map((category) => {\n                const Icon = iconMap[category.icon] || Location01Icon\n                const count = getCategoryCount(category.id)\n\n                return (\n                  <SidebarMenuItem key={category.id}>\n                    <SidebarMenuButton\n                      isActive={selectedCategory === category.id}\n                      onClick={() => setSelectedCategory(category.id)}\n                      className=\"h-7\"\n                    >\n                      <HugeiconsIcon\n                        icon={Icon}\n                        className=\"size-3.5\"\n                        style={{ color: category.color }}\n                      />\n                      <span className=\"text-sm\">{category.name}</span>\n                    </SidebarMenuButton>\n                    {count > 0 && <SidebarMenuBadge>{count}</SidebarMenuBadge>}\n                  </SidebarMenuItem>\n                )\n              })}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarFooter className=\"px-2.5 pb-3\">\n        <div className=\"space-y-3 group-data-[collapsible=icon]:hidden\">\n          <div className=\"text-center text-[11px] text-muted-foreground\">\n            Map powered by{\" \"}\n            <Link\n              href=\"https://mapcn.vercel.app/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"underline transition-colors hover:text-foreground\"\n            >\n              mapcn\n            </Link>{\" \"}\n            by{\" \"}\n            <Link\n              href=\"https://x.com/sainianmol16\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"underline transition-colors hover:text-foreground\"\n            >\n              @sainianmol16\n            </Link>\n          </div>\n        </div>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/theme-provider.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/theme-provider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\n\nexport function ThemeProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/theme-toggle.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/maps/components/theme-toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon01Icon, Sun01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\ninterface ThemeToggleProps {\n  className?: string\n}\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n  const { setTheme, theme } = useTheme()\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      className={className}\n      onClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}\n    >\n      <HugeiconsIcon\n        icon={Sun01Icon}\n        className=\"size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\"\n      />\n      <HugeiconsIcon\n        icon={Moon01Icon}\n        className=\"absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\"\n      />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/badge.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/button.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Comp: any = asChild ? Slot : \"button\"\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...(props as any)}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/collapsible.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/collapsible.tsx",
-      "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/dropdown-menu.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { ArrowRight01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <HugeiconsIcon\n        icon={ArrowRight01Icon}\n        strokeWidth={2}\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100\",\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/input.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/scroll-area.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/separator.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/sheet.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\nimport { Cancel01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/sidebar.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { SidebarLeftIcon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"../../hooks/use-mobile\"\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Separator } from \"./separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"./sheet\"\nimport { Skeleton } from \"./skeleton\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as any\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"top-[var(--sidebar-top-offset,0px)] h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as any\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed top-[var(--sidebar-top-offset,0px)] bottom-0 z-10 hidden h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2} />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as any\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/skeleton.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/skeleton.tsx",
-      "content": "import type { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Skeleton({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/components/ui/tooltip.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/maps/components/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-background\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/hooks/use-mobile.ts",
-      "type": "registry:hook",
-      "target": "components/example-apps/maps/hooks/use-mobile.ts",
-      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/index.tsx",
-      "type": "registry:file",
-      "target": "components/example-apps/maps/index.tsx",
-      "content": "/**\n * Wrapper export for embedding the app in the docs app\n */\n\"use client\"\n\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\"\n\nimport { MapControls } from \"./components/dashboard/map-controls\"\nimport { MapView } from \"./components/dashboard/map-view\"\nimport { MapsPanel } from \"./components/dashboard/maps-panel\"\nimport { LocationsSidebar } from \"./components/dashboard/sidebar\"\n\nexport default function MapsWrapper() {\n  return (\n    <SidebarProvider>\n      <LocationsSidebar />\n      <SidebarInset className=\"overflow-hidden\">\n        <div className=\"relative h-full w-full overflow-hidden\">\n          <MapView />\n          <MapsPanel />\n          <MapControls />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/lib/utils.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/maps/lib/utils.ts",
-      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/mock-data/locations.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/maps/mock-data/locations.ts",
-      "content": "export type LocationCategory = {\n  id: string\n  name: string\n  icon: string\n  color: string\n}\n\nexport type Location = {\n  id: string\n  name: string\n  description: string\n  address: string\n  categoryId: string\n  coordinates: {\n    lat: number\n    lng: number\n  }\n  rating: number\n  tags: string[]\n  createdAt: string\n  isFavorite: boolean\n  visitCount: number\n  lastVisited?: string\n}\n\nexport const categories: LocationCategory[] = [\n  { id: \"food-drops\", name: \"Food Drops\", icon: \"utensils\", color: \"#ef4444\" },\n  {\n    id: \"creator-cafes\",\n    name: \"Creator Cafes\",\n    icon: \"coffee\",\n    color: \"#f97316\",\n  },\n  {\n    id: \"night-sessions\",\n    name: \"Night Sessions\",\n    icon: \"wine\",\n    color: \"#8b5cf6\",\n  },\n  {\n    id: \"park-meetups\",\n    name: \"Park Meetups\",\n    icon: \"trees\",\n    color: \"#22c55e\",\n  },\n  {\n    id: \"photo-spots\",\n    name: \"Photo Spots\",\n    icon: \"landmark\",\n    color: \"#3b82f6\",\n  },\n  {\n    id: \"pop-up-markets\",\n    name: \"Pop-up Markets\",\n    icon: \"shopping-bag\",\n    color: \"#ec4899\",\n  },\n  {\n    id: \"weekend-stays\",\n    name: \"Weekend Stays\",\n    icon: \"bed\",\n    color: \"#06b6d4\",\n  },\n  {\n    id: \"fit-check-zones\",\n    name: \"Fit Check Zones\",\n    icon: \"dumbbell\",\n    color: \"#eab308\",\n  },\n]\n\nexport const tags = [\n  { id: \"trending\", name: \"Trending\" },\n  { id: \"reels-hotspot\", name: \"Reels Hotspot\" },\n  { id: \"rooftop\", name: \"Rooftop\" },\n  { id: \"late-night\", name: \"Late Night\" },\n  { id: \"pet-friendly\", name: \"Pet Friendly\" },\n  { id: \"collab-friendly\", name: \"Collab Friendly\" },\n  { id: \"fast-wifi\", name: \"Fast WiFi\" },\n  { id: \"sunset\", name: \"Sunset Views\" },\n  { id: \"live-music\", name: \"Live Music\" },\n  { id: \"budget\", name: \"Budget Friendly\" },\n  { id: \"quiet-editing\", name: \"Quiet Editing\" },\n  { id: \"event-ready\", name: \"Event Ready\" },\n  { id: \"fit-check\", name: \"Fit Check\" },\n]\n\nconst createLocation = (\n  id: string,\n  name: string,\n  description: string,\n  address: string,\n  categoryId: string,\n  lat: number,\n  lng: number,\n  rating: number,\n  tagIds: string[],\n  createdAt: string,\n  visitCount: number,\n  isFavorite: boolean = false,\n  lastVisited?: string\n): Location => ({\n  id,\n  name,\n  description,\n  address,\n  categoryId,\n  coordinates: { lat, lng },\n  rating,\n  tags: tagIds,\n  createdAt,\n  isFavorite,\n  visitCount,\n  lastVisited,\n})\n\nexport const locations: Location[] = [\n  createLocation(\n    \"spot-1\",\n    \"Late Plate Run Club\",\n    \"Night food truck cluster where creators post quick review reels after run meetups.\",\n    \"1422 S Congress Ave, Austin, TX\",\n    \"food-drops\",\n    30.2496,\n    -97.7494,\n    4.8,\n    [\"trending\", \"reels-hotspot\", \"late-night\", \"budget\"],\n    \"2025-11-21\",\n    312,\n    true,\n    \"2026-02-14\"\n  ),\n  createLocation(\n    \"spot-2\",\n    \"Harbor Slice Drop\",\n    \"Pop-up pizza dock with creator menu collabs every Friday night.\",\n    \"912 Alaskan Way, Seattle, WA\",\n    \"food-drops\",\n    47.6075,\n    -122.3406,\n    4.7,\n    [\"event-ready\", \"live-music\", \"trending\"],\n    \"2025-10-03\",\n    245,\n    false,\n    \"2026-02-11\"\n  ),\n  createLocation(\n    \"spot-3\",\n    \"Neon Noodle Garage\",\n    \"Street noodle kitchen used for food edits, creator duets, and challenge videos.\",\n    \"630 N Broadway, Los Angeles, CA\",\n    \"food-drops\",\n    34.0519,\n    -118.2428,\n    4.6,\n    [\"late-night\", \"reels-hotspot\", \"trending\"],\n    \"2025-08-16\",\n    286,\n    true,\n    \"2026-02-08\"\n  ),\n  createLocation(\n    \"spot-4\",\n    \"Cutscene Coffee Lab\",\n    \"Creator-friendly cafe with wall outlets, podcast corners, and fast upload speeds.\",\n    \"410 W Lake St, Chicago, IL\",\n    \"creator-cafes\",\n    41.8856,\n    -87.6386,\n    4.9,\n    [\"fast-wifi\", \"collab-friendly\", \"quiet-editing\"],\n    \"2025-09-27\",\n    199,\n    true,\n    \"2026-02-16\"\n  ),\n  createLocation(\n    \"spot-5\",\n    \"Edit Hour Cafe\",\n    \"Early-morning creator grind spot known for silent edit blocks and standing desks.\",\n    \"118 NW 13th Ave, Portland, OR\",\n    \"creator-cafes\",\n    45.5244,\n    -122.6846,\n    4.8,\n    [\"quiet-editing\", \"fast-wifi\", \"budget\"],\n    \"2025-07-02\",\n    177,\n    false,\n    \"2026-02-12\"\n  ),\n  createLocation(\n    \"spot-6\",\n    \"Threadline Espresso\",\n    \"Street-level cafe where local stylists and photographers run collab mornings.\",\n    \"35 Prince St, New York, NY\",\n    \"creator-cafes\",\n    40.7236,\n    -73.9982,\n    4.7,\n    [\"collab-friendly\", \"trending\", \"reels-hotspot\"],\n    \"2025-12-01\",\n    289,\n    true,\n    \"2026-02-18\"\n  ),\n  createLocation(\n    \"spot-7\",\n    \"Afterlight Rooftop\",\n    \"Night skyline bar used for launch parties and social clips with city backdrops.\",\n    \"201 Biscayne Blvd, Miami, FL\",\n    \"night-sessions\",\n    25.7743,\n    -80.1893,\n    4.8,\n    [\"rooftop\", \"late-night\", \"event-ready\", \"live-music\"],\n    \"2025-10-29\",\n    341,\n    true,\n    \"2026-02-17\"\n  ),\n  createLocation(\n    \"spot-8\",\n    \"Blue Hour Social Hall\",\n    \"Open-format music room where DJs test sets and creators stream live reactions.\",\n    \"804 14th St NW, Washington, DC\",\n    \"night-sessions\",\n    38.9016,\n    -77.0325,\n    4.6,\n    [\"live-music\", \"late-night\", \"collab-friendly\"],\n    \"2025-06-14\",\n    213,\n    false,\n    \"2026-01-29\"\n  ),\n  createLocation(\n    \"spot-9\",\n    \"Signal Loft Sessions\",\n    \"Small venue for creator meetups, listening parties, and rooftop DJ recaps.\",\n    \"1200 Broadway, Nashville, TN\",\n    \"night-sessions\",\n    36.1604,\n    -86.7782,\n    4.7,\n    [\"rooftop\", \"event-ready\", \"trending\"],\n    \"2025-09-10\",\n    228,\n    false,\n    \"2026-02-07\"\n  ),\n  createLocation(\n    \"spot-10\",\n    \"Sunset Frames Park\",\n    \"Open lawn where creators coordinate golden-hour portrait swaps and drone practice.\",\n    \"500 N Harbor Dr, San Diego, CA\",\n    \"park-meetups\",\n    32.7152,\n    -117.173,\n    4.9,\n    [\"sunset\", \"reels-hotspot\", \"pet-friendly\"],\n    \"2025-05-04\",\n    268,\n    true,\n    \"2026-02-15\"\n  ),\n  createLocation(\n    \"spot-11\",\n    \"Creator Picnic Commons\",\n    \"Weekly meetup zone for collab circles, walking vlogs, and community intros.\",\n    \"600 Atlantic Ave, Brooklyn, NY\",\n    \"park-meetups\",\n    40.6827,\n    -73.9755,\n    4.7,\n    [\"collab-friendly\", \"pet-friendly\", \"trending\"],\n    \"2025-08-09\",\n    204,\n    false,\n    \"2026-02-09\"\n  ),\n  createLocation(\n    \"spot-12\",\n    \"Trail Loop Meetup Deck\",\n    \"Fitness and lifestyle creators start routes here before posting split-screen recaps.\",\n    \"1700 29th St, Boulder, CO\",\n    \"park-meetups\",\n    40.0168,\n    -105.2816,\n    4.6,\n    [\"fit-check\", \"sunset\", \"budget\"],\n    \"2025-07-23\",\n    149,\n    false,\n    \"2026-01-31\"\n  ),\n  createLocation(\n    \"spot-13\",\n    \"Mirrorline Alley\",\n    \"Street art corridor with reflective walls, top-ranked for outfit transitions.\",\n    \"71 Peachtree St, Atlanta, GA\",\n    \"photo-spots\",\n    33.7589,\n    -84.3879,\n    4.8,\n    [\"reels-hotspot\", \"trending\", \"budget\"],\n    \"2025-11-03\",\n    271,\n    true,\n    \"2026-02-13\"\n  ),\n  createLocation(\n    \"spot-14\",\n    \"Old Station Arches\",\n    \"Historic brick arches and soft ambient light for editorial style posts.\",\n    \"240 King St, Toronto, ON\",\n    \"photo-spots\",\n    43.6487,\n    -79.3748,\n    4.7,\n    [\"quiet-editing\", \"sunset\", \"collab-friendly\"],\n    \"2025-06-30\",\n    164,\n    false,\n    \"2026-02-05\"\n  ),\n  createLocation(\n    \"spot-15\",\n    \"Skyline Frame Deck\",\n    \"Raised city platform with day-to-night angles popular for launch countdown posts.\",\n    \"2 Marina Blvd, San Francisco, CA\",\n    \"photo-spots\",\n    37.8067,\n    -122.4324,\n    4.9,\n    [\"sunset\", \"rooftop\", \"reels-hotspot\"],\n    \"2025-12-18\",\n    334,\n    true,\n    \"2026-02-18\"\n  ),\n  createLocation(\n    \"spot-16\",\n    \"Studio Lane Market\",\n    \"Weekend creator market with rotating thrift drops and handmade set props.\",\n    \"8801 Melrose Ave, West Hollywood, CA\",\n    \"pop-up-markets\",\n    34.0837,\n    -118.3778,\n    4.6,\n    [\"trending\", \"event-ready\", \"budget\"],\n    \"2025-09-14\",\n    183,\n    false,\n    \"2026-02-03\"\n  ),\n  createLocation(\n    \"spot-17\",\n    \"Canvas Flea Yard\",\n    \"Outdoor pop-up where designers and short-form creators trade visual merch.\",\n    \"301 S Ervay St, Dallas, TX\",\n    \"pop-up-markets\",\n    32.7803,\n    -96.7969,\n    4.5,\n    [\"collab-friendly\", \"budget\", \"pet-friendly\"],\n    \"2025-08-20\",\n    141,\n    false,\n    \"2026-01-22\"\n  ),\n  createLocation(\n    \"spot-18\",\n    \"Pulse Pop Bazaar\",\n    \"Night market with live hosts, mini stages, and creator challenge booths.\",\n    \"12 W 21st St, New York, NY\",\n    \"pop-up-markets\",\n    40.7415,\n    -73.9918,\n    4.7,\n    [\"late-night\", \"event-ready\", \"live-music\"],\n    \"2025-10-08\",\n    259,\n    true,\n    \"2026-02-10\"\n  ),\n  createLocation(\n    \"spot-19\",\n    \"Weekend Loft Suites\",\n    \"Short-stay creator suites with wardrobe rails and edit nooks for campaign weekends.\",\n    \"1450 W 18th St, Chicago, IL\",\n    \"weekend-stays\",\n    41.8582,\n    -87.6665,\n    4.8,\n    [\"fast-wifi\", \"quiet-editing\", \"event-ready\"],\n    \"2025-11-12\",\n    122,\n    true,\n    \"2026-02-04\"\n  ),\n  createLocation(\n    \"spot-20\",\n    \"Harbor Studio Hotel\",\n    \"Creator-focused boutique stay with in-room lighting kits and sound blankets.\",\n    \"95 Main St, Vancouver, BC\",\n    \"weekend-stays\",\n    49.2822,\n    -123.1062,\n    4.7,\n    [\"fast-wifi\", \"quiet-editing\", \"collab-friendly\"],\n    \"2025-07-17\",\n    111,\n    false,\n    \"2026-01-30\"\n  ),\n  createLocation(\n    \"spot-21\",\n    \"Downtown Recovery Suites\",\n    \"Stay-and-shoot concept hotel for post-event editing and sponsored recap shoots.\",\n    \"601 California St, Denver, CO\",\n    \"weekend-stays\",\n    39.7415,\n    -104.9899,\n    4.6,\n    [\"event-ready\", \"quiet-editing\", \"budget\"],\n    \"2025-05-29\",\n    97,\n    false,\n    \"2026-01-21\"\n  ),\n  createLocation(\n    \"spot-22\",\n    \"Fit Reel Yard\",\n    \"Open-air gym plaza used for form checks, brand demos, and weekly fitness collabs.\",\n    \"1220 NW 2nd Ave, Miami, FL\",\n    \"fit-check-zones\",\n    25.7861,\n    -80.1989,\n    4.8,\n    [\"fit-check\", \"trending\", \"event-ready\"],\n    \"2025-12-05\",\n    274,\n    true,\n    \"2026-02-16\"\n  ),\n  createLocation(\n    \"spot-23\",\n    \"Motion Lab Court\",\n    \"Indoor training hub with mirrored walls for movement creators and dance edits.\",\n    \"1090 W 6th St, Los Angeles, CA\",\n    \"fit-check-zones\",\n    34.0488,\n    -118.2576,\n    4.7,\n    [\"reels-hotspot\", \"collab-friendly\", \"late-night\"],\n    \"2025-06-05\",\n    236,\n    false,\n    \"2026-02-06\"\n  ),\n  createLocation(\n    \"spot-24\",\n    \"Riverside Pace Club\",\n    \"Run creator hotspot with sunrise and sunset loops mapped for social challenges.\",\n    \"250 S Wacker Dr, Chicago, IL\",\n    \"fit-check-zones\",\n    41.8788,\n    -87.6377,\n    4.6,\n    [\"fit-check\", \"sunset\", \"budget\"],\n    \"2025-09-01\",\n    188,\n    false,\n    \"2026-02-01\"\n  ),\n]\n"
-    },
-    {
-      "path": "registry/example-apps/default/maps/store/maps-store.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/maps/store/maps-store.ts",
-      "content": "import { create } from \"zustand\"\n\nimport {\n  locations as initialLocations,\n  type Location,\n} from \"../mock-data/locations\"\n\ntype ViewMode = \"map\" | \"list\" | \"split\"\ntype SortBy =\n  | \"date-newest\"\n  | \"date-oldest\"\n  | \"alpha-az\"\n  | \"alpha-za\"\n  | \"rating\"\n  | \"visits\"\n  | \"nearest\"\ntype MapStyle = \"default\" | \"streets\" | \"outdoors\" | \"satellite\"\n\nfunction calculateDistance(\n  lat1: number,\n  lng1: number,\n  lat2: number,\n  lng2: number\n): number {\n  const R = 6371\n  const dLat = ((lat2 - lat1) * Math.PI) / 180\n  const dLng = ((lng2 - lng1) * Math.PI) / 180\n  const a =\n    Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n    Math.cos((lat1 * Math.PI) / 180) *\n      Math.cos((lat2 * Math.PI) / 180) *\n      Math.sin(dLng / 2) *\n      Math.sin(dLng / 2)\n  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))\n  return R * c\n}\n\ninterface MapsState {\n  locations: Location[]\n  selectedCategory: string\n  selectedTags: string[]\n  searchQuery: string\n  viewMode: ViewMode\n  sortBy: SortBy\n  selectedLocationId: string | null\n  mapCenter: { lat: number; lng: number }\n  mapZoom: number\n  mapStyle: MapStyle\n  userLocation: { lat: number; lng: number } | null\n  routeDestinationId: string | null\n  isPanelVisible: boolean\n  setSelectedCategory: (categoryId: string) => void\n  toggleTag: (tagId: string) => void\n  clearTags: () => void\n  setSearchQuery: (query: string) => void\n  setViewMode: (mode: ViewMode) => void\n  setSortBy: (sort: SortBy) => void\n  toggleFavorite: (locationId: string) => void\n  selectLocation: (locationId: string | null) => void\n  setMapCenter: (center: { lat: number; lng: number }) => void\n  setMapZoom: (zoom: number) => void\n  setMapStyle: (style: MapStyle) => void\n  setUserLocation: (location: { lat: number; lng: number } | null) => void\n  setRouteDestination: (locationId: string | null) => void\n  clearRoute: () => void\n  setPanelVisible: (visible: boolean) => void\n  resetSelectionIfNotInList: (locations: Location[]) => void\n  getFilteredLocations: () => Location[]\n  getFavoriteLocations: () => Location[]\n  getRecentLocations: () => Location[]\n}\n\nexport const useMapsStore = create<MapsState>((set, get) => ({\n  locations: initialLocations,\n  selectedCategory: \"all\",\n  selectedTags: [],\n  searchQuery: \"\",\n  viewMode: \"split\",\n  sortBy: \"nearest\",\n  selectedLocationId: null,\n  mapCenter: { lat: 39.8283, lng: -98.5795 },\n  mapZoom: 4,\n  mapStyle: \"default\",\n  userLocation: null,\n  routeDestinationId: null,\n  isPanelVisible: true,\n\n  setSelectedCategory: (categoryId) => {\n    const state = get()\n    const newState: Partial<MapsState> = { selectedCategory: categoryId }\n\n    if (state.selectedLocationId) {\n      const location = state.locations.find(\n        (l) => l.id === state.selectedLocationId\n      )\n      if (\n        location &&\n        categoryId !== \"all\" &&\n        location.categoryId !== categoryId\n      ) {\n        newState.selectedLocationId = null\n        newState.routeDestinationId = null\n      }\n    }\n\n    set(newState)\n  },\n\n  toggleTag: (tagId) =>\n    set((state) => ({\n      selectedTags: state.selectedTags.includes(tagId)\n        ? state.selectedTags.filter((t) => t !== tagId)\n        : [...state.selectedTags, tagId],\n    })),\n\n  clearTags: () => set({ selectedTags: [] }),\n\n  setSearchQuery: (query) => set({ searchQuery: query }),\n\n  setViewMode: (mode) => set({ viewMode: mode }),\n\n  setSortBy: (sort) => set({ sortBy: sort }),\n\n  toggleFavorite: (locationId) =>\n    set((state) => ({\n      locations: state.locations.map((location) =>\n        location.id === locationId\n          ? { ...location, isFavorite: !location.isFavorite }\n          : location\n      ),\n    })),\n\n  selectLocation: (locationId) => set({ selectedLocationId: locationId }),\n\n  setMapCenter: (center) => set({ mapCenter: center }),\n\n  setMapZoom: (zoom) => set({ mapZoom: zoom }),\n\n  setMapStyle: (style) => set({ mapStyle: style }),\n\n  setUserLocation: (location) => set({ userLocation: location }),\n\n  setRouteDestination: (locationId) => set({ routeDestinationId: locationId }),\n\n  clearRoute: () => set({ routeDestinationId: null }),\n\n  setPanelVisible: (visible) => set({ isPanelVisible: visible }),\n\n  resetSelectionIfNotInList: (locations) => {\n    const state = get()\n    if (state.selectedLocationId) {\n      const isInList = locations.some((l) => l.id === state.selectedLocationId)\n      if (!isInList) {\n        set({ selectedLocationId: null, routeDestinationId: null })\n      }\n    }\n  },\n\n  getFilteredLocations: () => {\n    const state = get()\n    let filtered = [...state.locations]\n\n    if (state.selectedCategory !== \"all\") {\n      filtered = filtered.filter((l) => l.categoryId === state.selectedCategory)\n    }\n\n    if (state.selectedTags.length > 0) {\n      filtered = filtered.filter((l) =>\n        state.selectedTags.some((tag) => l.tags.includes(tag))\n      )\n    }\n\n    if (state.searchQuery) {\n      const query = state.searchQuery.toLowerCase()\n      filtered = filtered.filter(\n        (l) =>\n          l.name.toLowerCase().includes(query) ||\n          l.description.toLowerCase().includes(query) ||\n          l.address.toLowerCase().includes(query)\n      )\n    }\n\n    switch (state.sortBy) {\n      case \"nearest\":\n        if (state.userLocation) {\n          filtered.sort((a, b) => {\n            const distA = calculateDistance(\n              state.userLocation!.lat,\n              state.userLocation!.lng,\n              a.coordinates.lat,\n              a.coordinates.lng\n            )\n            const distB = calculateDistance(\n              state.userLocation!.lat,\n              state.userLocation!.lng,\n              b.coordinates.lat,\n              b.coordinates.lng\n            )\n            return distA - distB\n          })\n        }\n        break\n      case \"date-newest\":\n        filtered.sort(\n          (a, b) =>\n            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()\n        )\n        break\n      case \"date-oldest\":\n        filtered.sort(\n          (a, b) =>\n            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()\n        )\n        break\n      case \"alpha-az\":\n        filtered.sort((a, b) => a.name.localeCompare(b.name))\n        break\n      case \"alpha-za\":\n        filtered.sort((a, b) => b.name.localeCompare(a.name))\n        break\n      case \"rating\":\n        filtered.sort((a, b) => b.rating - a.rating)\n        break\n      case \"visits\":\n        filtered.sort((a, b) => b.visitCount - a.visitCount)\n        break\n    }\n\n    return filtered\n  },\n\n  getFavoriteLocations: () => {\n    const state = get()\n    let filtered = state.locations.filter((l) => l.isFavorite)\n\n    if (state.selectedCategory !== \"all\") {\n      filtered = filtered.filter((l) => l.categoryId === state.selectedCategory)\n    }\n\n    if (state.searchQuery) {\n      const query = state.searchQuery.toLowerCase()\n      filtered = filtered.filter(\n        (l) =>\n          l.name.toLowerCase().includes(query) ||\n          l.description.toLowerCase().includes(query) ||\n          l.address.toLowerCase().includes(query)\n      )\n    }\n\n    filtered.sort(\n      (a, b) =>\n        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()\n    )\n\n    return filtered\n  },\n\n  getRecentLocations: () => {\n    const state = get()\n    let filtered = [...state.locations]\n\n    if (state.selectedCategory !== \"all\") {\n      filtered = filtered.filter((l) => l.categoryId === state.selectedCategory)\n    }\n\n    if (state.searchQuery) {\n      const query = state.searchQuery.toLowerCase()\n      filtered = filtered.filter(\n        (l) =>\n          l.name.toLowerCase().includes(query) ||\n          l.description.toLowerCase().includes(query) ||\n          l.address.toLowerCase().includes(query)\n      )\n    }\n\n    filtered.sort(\n      (a, b) =>\n        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()\n    )\n\n    return filtered.slice(0, 20)\n  },\n}))\n"
-    }
-  ],
-  "categories": [
-    "example-app",
-    "social",
-    "creator",
-    "check-ins",
-    "maps"
-  ],
-  "dependencies": [
-    "@base-ui/react",
-    "@hugeicons/core-free-icons",
-    "@hugeicons/react",
-    "@radix-ui/react-slot",
-    "class-variance-authority",
-    "clsx",
-    "maplibre-gl",
-    "next-themes",
-    "tailwind-merge",
-    "usehooks-ts",
-    "zustand"
-  ],
-  "registryDependencies": [
-    "https://www.loveui.dev/r/badge.json",
-    "https://www.loveui.dev/r/button.json",
-    "https://www.loveui.dev/r/input.json",
-    "https://www.loveui.dev/r/menu.json"
-  ],
-  "meta": {
-    "source": "example-app",
-    "appName": "maps",
-    "routes": [
-      {
-        "path": "/",
-        "title": "Explore Feed",
-        "description": "All social spots map view"
-      },
-      {
-        "path": "/favorites",
-        "title": "Saved Spots",
-        "description": "Saved social spots"
-      },
-      {
-        "path": "/recents",
-        "title": "Recent Check-ins",
-        "description": "Most recent social check-ins"
-      }
-    ]
-  }
-}