@traky-app/ui 0.0.0-stage → 1.1.0

package/registry/traky/json/map.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "map",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react",
+    "geojson",
+    "maplibre-gl"
+  ],
+  "files": [
+    {
+      "path": "ui/map.tsx",
+      "content": "\"use client\";\n\nimport { IconX, IconMinus, IconPlus, IconCurrentLocation, IconMaximize, IconLoader2 } from \"@tabler/icons-react\";\nimport * as MapLibreGL from \"maplibre-gl\";\nimport type { PopupOptions, MarkerOptions } from \"maplibre-gl\";\nimport \"maplibre-gl/dist/maplibre-gl.css\";\nimport type * as GeoJSON from \"geojson\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst defaultStyles = {\n  dark: \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n  light: \"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json\",\n};\n\n// A tile-less, dependency-free style with a transparent background. Use it for\n// data visualizations (choropleths, world arcs, dot maps) where you draw your\n// own layers and don't need a street basemap. The easiest way to opt in is the\n// `blank` prop:\n//   <Map blank>...</Map>\n// The transparent background lets the themed container show through.\nconst blankMapStyle: MapLibreGL.StyleSpecification = {\n  version: 8,\n  sources: {},\n  layers: [\n    {\n      id: \"background\",\n      type: \"background\",\n      paint: { \"background-color\": \"rgba(0, 0, 0, 0)\" },\n    },\n  ],\n};\n\n// Prevent equivalent inline style objects from triggering a full map style reload.\nfunction useStableValue<T>(value: T): T {\n  const key = useMemo(() => JSON.stringify(value) ?? \"\", [value]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => value, [key]);\n}\n\nfunction mergeHoverPaint<T extends Record<string, unknown>>(\n  paint: T,\n  hoverPaint: T | undefined,\n): T {\n  if (!hoverPaint) return paint;\n  const merged: Record<string, unknown> = { ...paint };\n  for (const [key, hoverValue] of Object.entries(hoverPaint)) {\n    if (hoverValue === undefined) continue;\n    const baseValue = merged[key];\n    merged[key] =\n      baseValue === undefined\n        ? hoverValue\n        : [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            hoverValue,\n            baseValue,\n          ];\n  }\n  return merged as T;\n}\n\ntype Theme = \"light\" | \"dark\";\n\n// Check the document for an explicit theme (works with next-themes, etc.).\n// Covers both `attribute=\"class\"` (the default) and `attribute=\"data-theme\"`.\nfunction getDocumentTheme(): Theme | null {\n  if (typeof document === \"undefined\") return null;\n  const root = document.documentElement;\n  if (root.classList.contains(\"dark\")) return \"dark\";\n  if (root.classList.contains(\"light\")) return \"light\";\n  const dataTheme = root.dataset.theme;\n  if (dataTheme === \"dark\" || dataTheme === \"light\") return dataTheme;\n  return null;\n}\n\n// Get system preference\nfunction getSystemTheme(): Theme {\n  if (typeof window === \"undefined\") return \"light\";\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction useResolvedTheme(themeProp?: \"light\" | \"dark\"): Theme {\n  const [detectedTheme, setDetectedTheme] = useState<Theme>(\n    () => getDocumentTheme() ?? getSystemTheme(),\n  );\n\n  useEffect(() => {\n    if (themeProp) return; // Skip detection if theme is provided via prop\n\n    // Watch for document theme changes (e.g., next-themes toggling the class\n    // or the data-theme attribute).\n    const observer = new MutationObserver(() => {\n      const docTheme = getDocumentTheme();\n      if (docTheme) {\n        setDetectedTheme(docTheme);\n      }\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    });\n\n    // Also watch for system preference changes\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const handleSystemChange = (e: MediaQueryListEvent) => {\n      // Only use system preference if no document class is set\n      if (!getDocumentTheme()) {\n        setDetectedTheme(e.matches ? \"dark\" : \"light\");\n      }\n    };\n    mediaQuery.addEventListener(\"change\", handleSystemChange);\n\n    return () => {\n      observer.disconnect();\n      mediaQuery.removeEventListener(\"change\", handleSystemChange);\n    };\n  }, [themeProp]);\n\n  return themeProp ?? detectedTheme;\n}\n\ntype MapContextValue = {\n  map: MapLibreGL.Map | null;\n  isLoaded: boolean;\n  resolvedTheme: Theme;\n};\n\nconst MapContext = createContext<MapContextValue | null>(null);\n\nfunction useMap() {\n  const context = useContext(MapContext);\n  if (!context) {\n    throw new Error(\"useMap must be used within a Map component\");\n  }\n  return context;\n}\n\n/** Map viewport state */\ntype MapViewport = {\n  /** Center coordinates [longitude, latitude] */\n  center: [number, number];\n  /** Zoom level */\n  zoom: number;\n  /** Bearing (rotation) in degrees */\n  bearing: number;\n  /** Pitch (tilt) in degrees */\n  pitch: number;\n};\n\ntype MapStyleOption = string | MapLibreGL.StyleSpecification;\n\ntype MapRef = MapLibreGL.Map;\n\ntype MapProps = {\n  children?: ReactNode;\n  /** Additional CSS classes for the map container */\n  className?: string;\n  /**\n   * Theme for the map. If not provided, automatically detects system preference.\n   * Pass your theme value here.\n   */\n  theme?: Theme;\n  /** Custom map styles for light and dark themes. Overrides the default Carto styles. */\n  styles?: {\n    light?: MapStyleOption;\n    dark?: MapStyleOption;\n  };\n  /**\n   * Use a transparent, tile-less basemap instead of the default Carto street\n   * basemap — a blank canvas. Used alone it renders nothing; add your own\n   * layers on top (`<MapGeoJSON>`, `<MapArc>`, markers, etc.). Ideal for data\n   * visualizations (choropleths, arcs, dot maps).\n   * Ignored when an explicit `styles` prop is provided.\n   */\n  blank?: boolean;\n  /** Map projection type. Use `{ type: \"globe\" }` for 3D globe view. */\n  projection?: MapLibreGL.ProjectionSpecification;\n  /**\n   * Controlled viewport. When provided with onViewportChange,\n   * the map becomes controlled and viewport is driven by this prop.\n   */\n  viewport?: Partial<MapViewport>;\n  /**\n   * Callback fired continuously as the viewport changes (pan, zoom, rotate, pitch).\n   * Can be used standalone to observe changes, or with `viewport` prop\n   * to enable controlled mode where the map viewport is driven by your state.\n   */\n  onViewportChange?: (viewport: MapViewport) => void;\n  /** Show a loading indicator on the map */\n  loading?: boolean;\n} & Omit<MapLibreGL.MapOptions, \"container\" | \"style\">;\n\nfunction DefaultLoader() {\n  return (\n    <div className=\"bg-background/50 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-xs\">\n      <div className=\"flex gap-1\">\n        <span className=\"bg-muted-foreground/60 size-1.5 animate-pulse rounded-full\" />\n        <span className=\"bg-muted-foreground/60 size-1.5 animate-pulse rounded-full [animation-delay:150ms]\" />\n        <span className=\"bg-muted-foreground/60 size-1.5 animate-pulse rounded-full [animation-delay:300ms]\" />\n      </div>\n    </div>\n  );\n}\n\nfunction getViewport(map: MapLibreGL.Map): MapViewport {\n  const center = map.getCenter();\n  return {\n    center: [center.lng, center.lat],\n    zoom: map.getZoom(),\n    bearing: map.getBearing(),\n    pitch: map.getPitch(),\n  };\n}\n\nconst Map = forwardRef<MapRef, MapProps>(function Map(\n  {\n    children,\n    className,\n    theme: themeProp,\n    styles,\n    blank = false,\n    projection,\n    viewport,\n    onViewportChange,\n    loading = false,\n    ...props\n  },\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mapInstance, setMapInstance] = useState<MapLibreGL.Map | null>(null);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [isStyleLoaded, setIsStyleLoaded] = useState(false);\n  const [pendingStyle, setPendingStyle] = useState<MapStyleOption | null>(null);\n  const currentStyleRef = useRef<MapStyleOption | null>(null);\n  const styleSwapInFlightRef = useRef(false);\n  const internalUpdateRef = useRef(false);\n  const resolvedTheme = useResolvedTheme(themeProp);\n\n  const isControlled = viewport !== undefined && onViewportChange !== undefined;\n\n  const onViewportChangeRef = useRef(onViewportChange);\n  onViewportChangeRef.current = onViewportChange;\n\n  const stableStyles = useStableValue(styles);\n\n  const mapStyles = useMemo(() => {\n    // Explicit styles win. Otherwise `blank` opts into the transparent\n    // tile-less basemap; with neither, fall back to the Carto defaults.\n    if (stableStyles) {\n      return {\n        dark: stableStyles.dark ?? defaultStyles.dark,\n        light: stableStyles.light ?? defaultStyles.light,\n      };\n    }\n    if (blank) {\n      return { dark: blankMapStyle, light: blankMapStyle };\n    }\n    return defaultStyles;\n  }, [stableStyles, blank]);\n\n  // Expose the map instance to the parent component\n  useImperativeHandle(ref, () => mapInstance as MapLibreGL.Map, [mapInstance]);\n\n  // Initialize the map\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const initialStyle =\n      resolvedTheme === \"dark\" ? mapStyles.dark : mapStyles.light;\n    currentStyleRef.current = initialStyle;\n\n    const map = new MapLibreGL.Map({\n      container: containerRef.current,\n      style: initialStyle,\n      renderWorldCopies: false,\n      attributionControl: {\n        compact: true,\n      },\n      ...props,\n      ...viewport,\n    });\n\n    const styleLoadHandler = () => {\n      styleSwapInFlightRef.current = false;\n      setIsStyleLoaded(true);\n    };\n    const loadHandler = () => setIsLoaded(true);\n\n    // Viewport change handler - skip if triggered by internal update\n    const handleMove = () => {\n      if (internalUpdateRef.current) return;\n      onViewportChangeRef.current?.(getViewport(map));\n    };\n\n    map.on(\"load\", loadHandler);\n    map.on(\"style.load\", styleLoadHandler);\n    map.on(\"move\", handleMove);\n    setMapInstance(map);\n\n    return () => {\n      map.off(\"load\", loadHandler);\n      map.off(\"style.load\", styleLoadHandler);\n      map.off(\"move\", handleMove);\n      map.remove();\n      setIsLoaded(false);\n      setIsStyleLoaded(false);\n      setMapInstance(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Sync controlled viewport to map\n  useEffect(() => {\n    if (!mapInstance || !isControlled || !viewport) return;\n    if (mapInstance.isMoving()) return;\n\n    const current = getViewport(mapInstance);\n    const next = {\n      center: viewport.center ?? current.center,\n      zoom: viewport.zoom ?? current.zoom,\n      bearing: viewport.bearing ?? current.bearing,\n      pitch: viewport.pitch ?? current.pitch,\n    };\n\n    if (\n      next.center[0] === current.center[0] &&\n      next.center[1] === current.center[1] &&\n      next.zoom === current.zoom &&\n      next.bearing === current.bearing &&\n      next.pitch === current.pitch\n    ) {\n      return;\n    }\n\n    internalUpdateRef.current = true;\n    mapInstance.jumpTo(next);\n    internalUpdateRef.current = false;\n  }, [mapInstance, isControlled, viewport]);\n\n  // Handle style change: close the gate (so layer children tear down and\n  // re-add on the incoming style) - the swap itself is staged to the effect below.\n  useEffect(() => {\n    if (!mapInstance || !resolvedTheme) return;\n\n    const newStyle =\n      resolvedTheme === \"dark\" ? mapStyles.dark : mapStyles.light;\n\n    if (currentStyleRef.current === newStyle) return;\n\n    currentStyleRef.current = newStyle;\n    setIsStyleLoaded(false);\n    setPendingStyle(newStyle);\n  }, [mapInstance, resolvedTheme, mapStyles]);\n\n  useEffect(() => {\n    if (!mapInstance || !pendingStyle) return;\n\n    setPendingStyle(null);\n    styleSwapInFlightRef.current = true;\n    // Full reload (no diff) so `style.load` fires deterministically. A\n    // successful diff would never fire it, leaving isStyleLoaded stuck false.\n    mapInstance.setStyle(pendingStyle, { diff: false });\n  }, [mapInstance, pendingStyle]);\n\n  // Sync projection when the prop changes after mount.\n  useEffect(() => {\n    if (!mapInstance || !isStyleLoaded || !projection) return;\n    if (styleSwapInFlightRef.current) return;\n    mapInstance.setProjection(projection);\n  }, [mapInstance, isStyleLoaded, projection]);\n\n  const contextValue = useMemo(\n    () => ({\n      map: mapInstance,\n      isLoaded: isLoaded && isStyleLoaded,\n      resolvedTheme,\n    }),\n    [mapInstance, isLoaded, isStyleLoaded, resolvedTheme],\n  );\n\n  return (\n    <MapContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        className={cn(\"relative h-full w-full\", className)}\n      >\n        {(!isLoaded || loading) && <DefaultLoader />}\n        {/* SSR-safe: children render only when map is loaded on client */}\n        {mapInstance && children}\n      </div>\n    </MapContext.Provider>\n  );\n});\n\ntype MarkerContextValue = {\n  marker: MapLibreGL.Marker;\n  map: MapLibreGL.Map | null;\n};\n\nconst MarkerContext = createContext<MarkerContextValue | null>(null);\n\nfunction useMarkerContext() {\n  const context = useContext(MarkerContext);\n  if (!context) {\n    throw new Error(\"Marker components must be used within MapMarker\");\n  }\n  return context;\n}\n\ntype MapMarkerProps = {\n  /** Longitude coordinate for marker position */\n  longitude: number;\n  /** Latitude coordinate for marker position */\n  latitude: number;\n  /** Marker subcomponents (MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel) */\n  children: ReactNode;\n  /** Callback when marker is clicked */\n  onClick?: (e: MouseEvent) => void;\n  /** Callback when mouse enters marker */\n  onMouseEnter?: (e: MouseEvent) => void;\n  /** Callback when mouse leaves marker */\n  onMouseLeave?: (e: MouseEvent) => void;\n  /** Callback when marker drag starts (requires draggable: true) */\n  onDragStart?: (lngLat: { lng: number; lat: number }) => void;\n  /** Callback during marker drag (requires draggable: true) */\n  onDrag?: (lngLat: { lng: number; lat: number }) => void;\n  /** Callback when marker drag ends (requires draggable: true) */\n  onDragEnd?: (lngLat: { lng: number; lat: number }) => void;\n} & Omit<MarkerOptions, \"element\">;\n\nfunction MapMarker({\n  longitude,\n  latitude,\n  children,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  onDragStart,\n  onDrag,\n  onDragEnd,\n  draggable = false,\n  ...markerOptions\n}: MapMarkerProps) {\n  const { map } = useMap();\n\n  const callbacksRef = useRef({\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onDragStart,\n    onDrag,\n    onDragEnd,\n  });\n  callbacksRef.current = {\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onDragStart,\n    onDrag,\n    onDragEnd,\n  };\n\n  const marker = useMemo(() => {\n    const markerInstance = new MapLibreGL.Marker({\n      ...markerOptions,\n      element: document.createElement(\"div\"),\n      draggable,\n    }).setLngLat([longitude, latitude]);\n\n    const handleClick = (e: MouseEvent) => callbacksRef.current.onClick?.(e);\n    const handleMouseEnter = (e: MouseEvent) =>\n      callbacksRef.current.onMouseEnter?.(e);\n    const handleMouseLeave = (e: MouseEvent) =>\n      callbacksRef.current.onMouseLeave?.(e);\n\n    markerInstance.getElement()?.addEventListener(\"click\", handleClick);\n    markerInstance\n      .getElement()\n      ?.addEventListener(\"mouseenter\", handleMouseEnter);\n    markerInstance\n      .getElement()\n      ?.addEventListener(\"mouseleave\", handleMouseLeave);\n\n    const handleDragStart = () => {\n      const lngLat = markerInstance.getLngLat();\n      callbacksRef.current.onDragStart?.({ lng: lngLat.lng, lat: lngLat.lat });\n    };\n    const handleDrag = () => {\n      const lngLat = markerInstance.getLngLat();\n      callbacksRef.current.onDrag?.({ lng: lngLat.lng, lat: lngLat.lat });\n    };\n    const handleDragEnd = () => {\n      const lngLat = markerInstance.getLngLat();\n      callbacksRef.current.onDragEnd?.({ lng: lngLat.lng, lat: lngLat.lat });\n    };\n\n    markerInstance.on(\"dragstart\", handleDragStart);\n    markerInstance.on(\"drag\", handleDrag);\n    markerInstance.on(\"dragend\", handleDragEnd);\n\n    return markerInstance;\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!map) return;\n\n    marker.addTo(map);\n\n    return () => {\n      marker.remove();\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [map]);\n\n  const { offset, rotation, rotationAlignment, pitchAlignment } = markerOptions;\n\n  useEffect(() => {\n    const current = marker.getLngLat();\n    if (current.lng !== longitude || current.lat !== latitude) {\n      marker.setLngLat([longitude, latitude]);\n    }\n\n    if (marker.isDraggable() !== draggable) {\n      marker.setDraggable(draggable);\n    }\n\n    const currentOffset = marker.getOffset();\n    const newOffset = offset ?? [0, 0];\n    const [newOffsetX, newOffsetY] = Array.isArray(newOffset)\n      ? newOffset\n      : [newOffset.x, newOffset.y];\n    if (currentOffset.x !== newOffsetX || currentOffset.y !== newOffsetY) {\n      marker.setOffset(newOffset);\n    }\n\n    if (marker.getRotation() !== (rotation ?? 0)) {\n      marker.setRotation(rotation ?? 0);\n    }\n    if (marker.getRotationAlignment() !== (rotationAlignment ?? \"auto\")) {\n      marker.setRotationAlignment(rotationAlignment ?? \"auto\");\n    }\n    if (marker.getPitchAlignment() !== (pitchAlignment ?? \"auto\")) {\n      marker.setPitchAlignment(pitchAlignment ?? \"auto\");\n    }\n  }, [\n    marker,\n    longitude,\n    latitude,\n    draggable,\n    offset,\n    rotation,\n    rotationAlignment,\n    pitchAlignment,\n  ]);\n\n  return (\n    <MarkerContext.Provider value={{ marker, map }}>\n      {children}\n    </MarkerContext.Provider>\n  );\n}\n\ntype MarkerContentProps = {\n  /** Custom marker content. Defaults to a blue dot if not provided */\n  children?: ReactNode;\n  /** Additional CSS classes for the marker container */\n  className?: string;\n};\n\nfunction MarkerContent({ children, className }: MarkerContentProps) {\n  const { marker } = useMarkerContext();\n\n  return createPortal(\n    <div className={cn(\"relative cursor-pointer\", className)}>\n      {children || <DefaultMarkerIcon />}\n    </div>,\n    marker.getElement(),\n  );\n}\n\nfunction DefaultMarkerIcon() {\n  return (\n    <div className=\"relative h-4 w-4 rounded-full border-2 border-white bg-blue-500 shadow-lg\" />\n  );\n}\n\nfunction PopupCloseButton({ onClick }: { onClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label=\"Close popup\"\n      className=\"focus-visible:ring-ring hover:bg-muted text-foreground absolute top-1 right-1 z-10 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset\"\n    >\n      <IconX className=\"size-3.5\" />\n    </button>\n  );\n}\n\ntype MarkerPopupProps = {\n  /** Popup content */\n  children: ReactNode;\n  /** Additional CSS classes for the popup container */\n  className?: string;\n  /** Show a close button in the popup (default: false) */\n  closeButton?: boolean;\n} & Omit<PopupOptions, \"className\" | \"closeButton\">;\n\nfunction MarkerPopup({\n  children,\n  className,\n  closeButton = false,\n  ...popupOptions\n}: MarkerPopupProps) {\n  const { marker, map } = useMarkerContext();\n  const container = useMemo(() => document.createElement(\"div\"), []);\n  const { offset, maxWidth } = popupOptions;\n\n  const popup = useMemo(() => {\n    const popupInstance = new MapLibreGL.Popup({\n      offset: 16,\n      ...popupOptions,\n      closeButton: false,\n    })\n      .setMaxWidth(\"none\")\n      .setDOMContent(container);\n\n    return popupInstance;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!map) return;\n\n    popup.setDOMContent(container);\n    marker.setPopup(popup);\n\n    return () => {\n      marker.setPopup(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [map]);\n\n  // Sync popup options when they change.\n  useEffect(() => {\n    popup.setOffset(offset ?? 16);\n    if (maxWidth) {\n      popup.setMaxWidth(maxWidth);\n    }\n  }, [popup, offset, maxWidth]);\n\n  const handleClose = () => popup.remove();\n\n  return createPortal(\n    <div\n      className={cn(\n        \"bg-popover text-popover-foreground relative max-w-62 rounded-md border p-3 shadow-md\",\n        \"animate-in fade-in-0 zoom-in-95 duration-200 ease-out\",\n        className,\n      )}\n    >\n      {closeButton && <PopupCloseButton onClick={handleClose} />}\n      {children}\n    </div>,\n    container,\n  );\n}\n\ntype MarkerTooltipProps = {\n  /** Tooltip content */\n  children: ReactNode;\n  /** Additional CSS classes for the tooltip container */\n  className?: string;\n} & Omit<PopupOptions, \"className\" | \"closeButton\" | \"closeOnClick\">;\n\nfunction MarkerTooltip({\n  children,\n  className,\n  ...popupOptions\n}: MarkerTooltipProps) {\n  const { marker, map } = useMarkerContext();\n  const container = useMemo(() => document.createElement(\"div\"), []);\n  const { offset, maxWidth } = popupOptions;\n\n  const tooltip = useMemo(() => {\n    const tooltipInstance = new MapLibreGL.Popup({\n      offset: 16,\n      ...popupOptions,\n      closeOnClick: true,\n      closeButton: false,\n    }).setMaxWidth(\"none\");\n\n    return tooltipInstance;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!map) return;\n\n    tooltip.setDOMContent(container);\n\n    const handleMouseEnter = () => {\n      tooltip.setLngLat(marker.getLngLat()).addTo(map);\n    };\n    const handleMouseLeave = () => tooltip.remove();\n\n    marker.getElement()?.addEventListener(\"mouseenter\", handleMouseEnter);\n    marker.getElement()?.addEventListener(\"mouseleave\", handleMouseLeave);\n\n    return () => {\n      marker.getElement()?.removeEventListener(\"mouseenter\", handleMouseEnter);\n      marker.getElement()?.removeEventListener(\"mouseleave\", handleMouseLeave);\n      tooltip.remove();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [map]);\n\n  // Sync tooltip options when they change.\n  useEffect(() => {\n    tooltip.setOffset(offset ?? 16);\n    if (maxWidth) {\n      tooltip.setMaxWidth(maxWidth);\n    }\n  }, [tooltip, offset, maxWidth]);\n\n  return createPortal(\n    <div\n      className={cn(\n        \"bg-foreground text-background pointer-events-none rounded-md px-2 py-1 text-xs text-balance shadow-md\",\n        \"animate-in fade-in-0 zoom-in-95 duration-200 ease-out\",\n        className,\n      )}\n    >\n      {children}\n    </div>,\n    container,\n  );\n}\n\ntype MarkerLabelProps = {\n  /** Label text content */\n  children: ReactNode;\n  /** Additional CSS classes for the label */\n  className?: string;\n  /** Position of the label relative to the marker (default: \"top\") */\n  position?: \"top\" | \"bottom\";\n};\n\nfunction MarkerLabel({\n  children,\n  className,\n  position = \"top\",\n}: MarkerLabelProps) {\n  const positionClasses = {\n    top: \"bottom-full mb-1\",\n    bottom: \"top-full mt-1\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"absolute left-1/2 -translate-x-1/2 whitespace-nowrap\",\n        \"text-foreground text-[10px] font-medium\",\n        positionClasses[position],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\ntype MapControlsProps = {\n  /** Position of the controls on the map (default: \"bottom-right\") */\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n  /** Show zoom in/out buttons (default: true) */\n  showZoom?: boolean;\n  /** Show compass button to reset bearing (default: false) */\n  showCompass?: boolean;\n  /** Show locate button to find user's location (default: false) */\n  showLocate?: boolean;\n  /** Show fullscreen toggle button (default: false) */\n  showFullscreen?: boolean;\n  /** Additional CSS classes for the controls container */\n  className?: string;\n  /** Callback with user coordinates when located */\n  onLocate?: (coords: { longitude: number; latitude: number }) => void;\n};\n\nconst positionClasses = {\n  \"top-left\": \"top-2 left-2\",\n  \"top-right\": \"top-2 right-2\",\n  \"bottom-left\": \"bottom-2 left-2\",\n  \"bottom-right\": \"bottom-10 right-2\",\n};\n\nfunction ControlGroup({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"border-border bg-background [&>button:not(:last-child)]:border-border flex flex-col overflow-hidden rounded-md border shadow-sm [&>button:not(:last-child)]:border-b\">\n      {children}\n    </div>\n  );\n}\n\nfunction ControlButton({\n  onClick,\n  label,\n  children,\n  disabled = false,\n}: {\n  onClick: () => void;\n  label: string;\n  children: React.ReactNode;\n  disabled?: boolean;\n}) {\n  return (\n    <button\n      onClick={onClick}\n      aria-label={label}\n      type=\"button\"\n      className={cn(\n        \"flex size-8 items-center justify-center transition-colors\",\n        \"first:rounded-t-md last:rounded-b-md\",\n        \"hover:bg-accent dark:hover:bg-accent/40\",\n        \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n      )}\n      disabled={disabled}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction MapControls({\n  position = \"bottom-right\",\n  showZoom = true,\n  showCompass = false,\n  showLocate = false,\n  showFullscreen = false,\n  className,\n  onLocate,\n}: MapControlsProps) {\n  const { map } = useMap();\n  const [waitingForLocation, setWaitingForLocation] = useState(false);\n\n  const handleZoomIn = useCallback(() => {\n    map?.zoomTo(map.getZoom() + 1, { duration: 300 });\n  }, [map]);\n\n  const handleZoomOut = useCallback(() => {\n    map?.zoomTo(map.getZoom() - 1, { duration: 300 });\n  }, [map]);\n\n  const handleResetBearing = useCallback(() => {\n    map?.resetNorthPitch({ duration: 300 });\n  }, [map]);\n\n  const handleLocate = useCallback(() => {\n    if (!(\"geolocation\" in navigator)) return;\n    setWaitingForLocation(true);\n    navigator.geolocation.getCurrentPosition(\n      (pos) => {\n        const coords = {\n          longitude: pos.coords.longitude,\n          latitude: pos.coords.latitude,\n        };\n        map?.flyTo({\n          center: [coords.longitude, coords.latitude],\n          zoom: 14,\n          duration: 1500,\n        });\n        onLocate?.(coords);\n        setWaitingForLocation(false);\n      },\n      (error) => {\n        console.error(\"Error getting location:\", error);\n        setWaitingForLocation(false);\n      },\n      // Without a timeout the spec default is Infinity: a dismissed permission\n      // prompt would leave the button disabled forever.\n      { timeout: 10000 },\n    );\n  }, [map, onLocate]);\n\n  const handleFullscreen = useCallback(() => {\n    const container = map?.getContainer();\n    if (!container) return;\n    if (document.fullscreenElement) {\n      document.exitFullscreen();\n    } else {\n      container.requestFullscreen();\n    }\n  }, [map]);\n\n  return (\n    <div\n      className={cn(\n        \"absolute z-10 flex flex-col gap-1.5\",\n        positionClasses[position],\n        className,\n      )}\n    >\n      {showZoom && (\n        <ControlGroup>\n          <ControlButton onClick={handleZoomIn} label=\"Zoom in\">\n            <IconPlus className=\"size-4\" />\n          </ControlButton>\n          <ControlButton onClick={handleZoomOut} label=\"Zoom out\">\n            <IconMinus className=\"size-4\" />\n          </ControlButton>\n        </ControlGroup>\n      )}\n      {showCompass && (\n        <ControlGroup>\n          <CompassButton onClick={handleResetBearing} />\n        </ControlGroup>\n      )}\n      {showLocate && (\n        <ControlGroup>\n          <ControlButton\n            onClick={handleLocate}\n            label=\"Find my location\"\n            disabled={waitingForLocation}\n          >\n            {waitingForLocation ? (\n              <IconLoader2 className=\"size-4 animate-spin\" />\n            ) : (\n              <IconCurrentLocation className=\"size-4\" />\n            )}\n          </ControlButton>\n        </ControlGroup>\n      )}\n      {showFullscreen && (\n        <ControlGroup>\n          <ControlButton onClick={handleFullscreen} label=\"Toggle fullscreen\">\n            <IconMaximize className=\"size-4\" />\n          </ControlButton>\n        </ControlGroup>\n      )}\n    </div>\n  );\n}\n\nfunction CompassButton({ onClick }: { onClick: () => void }) {\n  const { map } = useMap();\n  const compassRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!map || !compassRef.current) return;\n\n    const compass = compassRef.current;\n\n    const updateRotation = () => {\n      const bearing = map.getBearing();\n      const pitch = map.getPitch();\n      compass.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`;\n    };\n\n    map.on(\"rotate\", updateRotation);\n    map.on(\"pitch\", updateRotation);\n    updateRotation();\n\n    return () => {\n      map.off(\"rotate\", updateRotation);\n      map.off(\"pitch\", updateRotation);\n    };\n  }, [map]);\n\n  return (\n    <ControlButton onClick={onClick} label=\"Reset bearing to north\">\n      <svg\n        ref={compassRef}\n        viewBox=\"0 0 24 24\"\n        className=\"size-5\"\n        style={{ transformStyle: \"preserve-3d\" }}\n      >\n        <path d=\"M12 2L16 12H12V2Z\" className=\"fill-red-500\" />\n        <path d=\"M12 2L8 12H12V2Z\" className=\"fill-red-300\" />\n        <path d=\"M12 22L16 12H12V22Z\" className=\"fill-muted-foreground/60\" />\n        <path d=\"M12 22L8 12H12V22Z\" className=\"fill-muted-foreground/30\" />\n      </svg>\n    </ControlButton>\n  );\n}\n\ntype MapPopupProps = {\n  /** Longitude coordinate for popup position */\n  longitude: number;\n  /** Latitude coordinate for popup position */\n  latitude: number;\n  /** Callback when popup is closed */\n  onClose?: () => void;\n  /** Popup content */\n  children: ReactNode;\n  /** Additional CSS classes for the popup container */\n  className?: string;\n  /** Show a close button in the popup (default: false) */\n  closeButton?: boolean;\n} & Omit<PopupOptions, \"className\" | \"closeButton\">;\n\nfunction MapPopup({\n  longitude,\n  latitude,\n  onClose,\n  children,\n  className,\n  closeButton = false,\n  ...popupOptions\n}: MapPopupProps) {\n  const { map } = useMap();\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  const container = useMemo(() => document.createElement(\"div\"), []);\n  const { offset, maxWidth } = popupOptions;\n\n  const popup = useMemo(() => {\n    const popupInstance = new MapLibreGL.Popup({\n      offset: 16,\n      ...popupOptions,\n      closeButton: false,\n    })\n      .setMaxWidth(\"none\")\n      .setLngLat([longitude, latitude]);\n\n    return popupInstance;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!map) return;\n\n    const onCloseProp = () => onCloseRef.current?.();\n\n    popup.on(\"close\", onCloseProp);\n\n    popup.setDOMContent(container);\n    popup.addTo(map);\n\n    return () => {\n      popup.off(\"close\", onCloseProp);\n      if (popup.isOpen()) {\n        popup.remove();\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [map]);\n\n  // Sync popup position and options when they change.\n  useEffect(() => {\n    const current = popup.getLngLat();\n    if (!current || current.lng !== longitude || current.lat !== latitude) {\n      popup.setLngLat([longitude, latitude]);\n    }\n    popup.setOffset(offset ?? 16);\n    if (maxWidth) {\n      popup.setMaxWidth(maxWidth);\n    }\n  }, [popup, longitude, latitude, offset, maxWidth]);\n\n  const handleClose = () => {\n    popup.remove();\n  };\n\n  return createPortal(\n    <div\n      className={cn(\n        \"bg-popover text-popover-foreground relative max-w-62 rounded-md border p-3 shadow-md\",\n        \"animate-in fade-in-0 zoom-in-95 duration-200 ease-out\",\n        className,\n      )}\n    >\n      {closeButton && <PopupCloseButton onClick={handleClose} />}\n      {children}\n    </div>,\n    container,\n  );\n}\n\ntype MapRouteProps = {\n  /** Optional unique identifier for the route layer */\n  id?: string;\n  /** Array of [longitude, latitude] coordinate pairs defining the route */\n  coordinates: [number, number][];\n  /** Line color as CSS color value (default: \"#4285F4\") */\n  color?: string;\n  /** Line width in pixels (default: 3) */\n  width?: number;\n  /** Line opacity from 0 to 1 (default: 0.8) */\n  opacity?: number;\n  /** Dash pattern [dash length, gap length] for dashed lines */\n  dashArray?: [number, number];\n  /** Callback when the route line is clicked */\n  onClick?: () => void;\n  /** Callback when mouse enters the route line */\n  onMouseEnter?: () => void;\n  /** Callback when mouse leaves the route line */\n  onMouseLeave?: () => void;\n  /** Whether the route is interactive - shows pointer cursor on hover (default: true) */\n  interactive?: boolean;\n};\n\nfunction MapRoute({\n  id: propId,\n  coordinates,\n  color = \"#4285F4\",\n  width = 3,\n  opacity = 0.8,\n  dashArray,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  interactive = true,\n}: MapRouteProps) {\n  const { map, isLoaded } = useMap();\n  const autoId = useId();\n  const id = propId ?? autoId;\n  const sourceId = `route-source-${id}`;\n  const layerId = `route-layer-${id}`;\n\n  // Add source and layer on mount\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    map.addSource(sourceId, {\n      type: \"geojson\",\n      data: {\n        type: \"Feature\",\n        properties: {},\n        geometry: { type: \"LineString\", coordinates: [] },\n      },\n    });\n\n    map.addLayer({\n      id: layerId,\n      type: \"line\",\n      source: sourceId,\n      layout: { \"line-join\": \"round\", \"line-cap\": \"round\" },\n      paint: {\n        \"line-color\": color,\n        \"line-width\": width,\n        \"line-opacity\": opacity,\n        ...(dashArray && { \"line-dasharray\": dashArray }),\n      },\n    });\n\n    return () => {\n      try {\n        if (map.getLayer(layerId)) map.removeLayer(layerId);\n        if (map.getSource(sourceId)) map.removeSource(sourceId);\n      } catch {\n        // ignore\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoaded, map]);\n\n  // When coordinates change, update the source data\n  useEffect(() => {\n    if (!isLoaded || !map || coordinates.length < 2) return;\n\n    const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource;\n    if (source) {\n      source.setData({\n        type: \"Feature\",\n        properties: {},\n        geometry: { type: \"LineString\", coordinates },\n      });\n    }\n  }, [isLoaded, map, coordinates, sourceId]);\n\n  useEffect(() => {\n    if (!isLoaded || !map || !map.getLayer(layerId)) return;\n\n    map.setPaintProperty(layerId, \"line-color\", color);\n    map.setPaintProperty(layerId, \"line-width\", width);\n    map.setPaintProperty(layerId, \"line-opacity\", opacity);\n    map.setPaintProperty(layerId, \"line-dasharray\", dashArray);\n  }, [isLoaded, map, layerId, color, width, opacity, dashArray]);\n\n  // Handle click and hover events\n  useEffect(() => {\n    if (!isLoaded || !map || !interactive) return;\n\n    const handleClick = () => {\n      onClick?.();\n    };\n    const handleMouseEnter = () => {\n      map.getCanvas().style.cursor = \"pointer\";\n      onMouseEnter?.();\n    };\n    const handleMouseLeave = () => {\n      map.getCanvas().style.cursor = \"\";\n      onMouseLeave?.();\n    };\n\n    map.on(\"click\", layerId, handleClick);\n    map.on(\"mouseenter\", layerId, handleMouseEnter);\n    map.on(\"mouseleave\", layerId, handleMouseLeave);\n\n    return () => {\n      map.off(\"click\", layerId, handleClick);\n      map.off(\"mouseenter\", layerId, handleMouseEnter);\n      map.off(\"mouseleave\", layerId, handleMouseLeave);\n    };\n  }, [\n    isLoaded,\n    map,\n    layerId,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    interactive,\n  ]);\n\n  return null;\n}\n\ntype MapGeoJSONData<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n> =\n  | GeoJSON.FeatureCollection<GeoJSON.Geometry, P>\n  | GeoJSON.Feature<GeoJSON.Geometry, P>\n  | GeoJSON.Geometry\n  | string;\n\ntype MapFillPaint = NonNullable<MapLibreGL.FillLayerSpecification[\"paint\"]>;\ntype MapLinePaint = NonNullable<MapLibreGL.LineLayerSpecification[\"paint\"]>;\n\n/** A rendered feature with strongly-typed `properties`. */\ntype MapGeoJSONFeature<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n> = Omit<MapLibreGL.MapGeoJSONFeature, \"properties\"> & { properties: P };\n\n/** Event payload passed to MapGeoJSON interaction callbacks. */\ntype MapGeoJSONEvent<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n> = {\n  /** The feature under the cursor, with its typed GeoJSON properties. */\n  feature: MapGeoJSONFeature<P>;\n  /** Longitude of the cursor at the time of the event. */\n  longitude: number;\n  /** Latitude of the cursor at the time of the event. */\n  latitude: number;\n  /** The underlying MapLibre mouse event for advanced use cases. */\n  originalEvent: MapLibreGL.MapLayerMouseEvent;\n};\n\ntype MapGeoJSONProps<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n> = {\n  /** GeoJSON data (FeatureCollection, Feature, Geometry) or a URL to fetch it from. */\n  data: MapGeoJSONData<P>;\n  /** Optional unique identifier prefix for the source/layers. Auto-generated if not provided. */\n  id?: string;\n  /**\n   * Feature property to promote to the feature `id`. Required for hover\n   * feature-state (`fillHoverPaint`) and stable `onHover`/`onClick` payloads.\n   */\n  promoteId?: string;\n  /**\n   * Paint for the polygon fill layer. Merged on top of a theme-aware monochrome\n   * surface tone (`fill-color`). Pass `false` to omit the fill layer entirely\n   * (e.g. outlines only).\n   */\n  fillPaint?: MapFillPaint | false;\n  /**\n   * Paint for the outline layer. Merged on top of a hairline default\n   * (`line-color` = a near-surface neutral, `line-width` = 0.5) for thin\n   * separators. Override `line-color` if your container differs, or pass\n   * `false` to omit the layer.\n   */\n  linePaint?: MapLinePaint | false;\n  /**\n   * Paint merged onto the fill layer for the feature under the cursor, applied\n   * as a `case` expression keyed on hover feature-state. Requires `promoteId`.\n   */\n  fillHoverPaint?: MapFillPaint;\n  /** Callback when a feature is clicked. */\n  onClick?: (e: MapGeoJSONEvent<P>) => void;\n  /** Callback fired when the hovered feature changes; `null` when the cursor leaves. */\n  onHover?: (e: MapGeoJSONEvent<P> | null) => void;\n  /** Whether features respond to mouse events (default: false). */\n  interactive?: boolean;\n  /** Optional MapLibre layer id to insert the layers before (z-order control). */\n  beforeId?: string;\n};\n\n// Monochrome defaults: a neutral-gray fill (hex of the grayscale chart tokens)\n// with a fixed near-surface line for thin separators. Colors are hardcoded (not\n// theme tokens), tuned for a typical light/dark surface. Override via\n// `fillPaint` / `linePaint`.\nconst GEOJSON_DEFAULT_COLORS = {\n  light: { fill: \"#d4d4d4\", line: \"#ffffff\" },\n  dark: { fill: \"#404040\", line: \"#171717\" },\n} satisfies Record<Theme, { fill: string; line: string }>;\n\n/**\n * Renders arbitrary GeoJSON as fill + outline layers on the map. Composes like\n * `MapRoute` / `MapArc` — drop it inside `<Map>` (typically with `blank`) for\n * choropleths and region/data maps. For full control over expressions and\n * multiple layers, manage layers directly via `useMap()` instead.\n */\nfunction MapGeoJSON<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n>({\n  data,\n  id: propId,\n  promoteId,\n  fillPaint,\n  linePaint,\n  fillHoverPaint,\n  onClick,\n  onHover,\n  interactive = false,\n  beforeId,\n}: MapGeoJSONProps<P>) {\n  const { map, isLoaded, resolvedTheme } = useMap();\n  const autoId = useId();\n  const id = propId ?? autoId;\n  const sourceId = `geojson-source-${id}`;\n  const fillLayerId = `geojson-fill-${id}`;\n  const lineLayerId = `geojson-line-${id}`;\n\n  const defaults = GEOJSON_DEFAULT_COLORS[resolvedTheme];\n\n  const showFill = fillPaint !== false;\n  const showLine = linePaint !== false;\n\n  const mergedFillPaint = useMemo(\n    () =>\n      mergeHoverPaint(\n        { \"fill-color\": defaults.fill, ...(fillPaint || {}) },\n        fillHoverPaint,\n      ),\n    [defaults.fill, fillPaint, fillHoverPaint],\n  );\n  const mergedLinePaint = useMemo(\n    () => ({\n      \"line-color\": defaults.line,\n      \"line-width\": 0.5,\n      ...(linePaint || {}),\n    }),\n    [defaults.line, linePaint],\n  );\n  const latestRef = useRef({ onClick, onHover });\n  latestRef.current = { onClick, onHover };\n\n  // Add source on mount.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    map.addSource(sourceId, {\n      type: \"geojson\",\n      data,\n      ...(promoteId ? { promoteId } : {}),\n    });\n\n    return () => {\n      try {\n        if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);\n        if (map.getLayer(fillLayerId)) map.removeLayer(fillLayerId);\n        if (map.getSource(sourceId)) map.removeSource(sourceId);\n      } catch {\n        // style may be mid-reload\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoaded, map]);\n\n  // Sync data when it changes.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n    const source = map.getSource(sourceId) as\n      | MapLibreGL.GeoJSONSource\n      | undefined;\n    source?.setData(data as never);\n  }, [isLoaded, map, data, sourceId]);\n\n  // Sync layers and paint when visibility or styling changes.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    const source = map.getSource(sourceId);\n    if (!source) return;\n\n    if (showFill && !map.getLayer(fillLayerId)) {\n      map.addLayer(\n        {\n          id: fillLayerId,\n          type: \"fill\",\n          source: sourceId,\n          paint: mergedFillPaint,\n        },\n        beforeId,\n      );\n    } else if (!showFill && map.getLayer(fillLayerId)) {\n      map.removeLayer(fillLayerId);\n    }\n\n    if (showLine && !map.getLayer(lineLayerId)) {\n      map.addLayer(\n        {\n          id: lineLayerId,\n          type: \"line\",\n          source: sourceId,\n          paint: mergedLinePaint,\n        },\n        beforeId,\n      );\n    } else if (!showLine && map.getLayer(lineLayerId)) {\n      map.removeLayer(lineLayerId);\n    }\n\n    if (showFill && map.getLayer(fillLayerId)) {\n      for (const [key, value] of Object.entries(mergedFillPaint)) {\n        map.setPaintProperty(\n          fillLayerId,\n          key as keyof MapFillPaint,\n          value as never,\n        );\n      }\n    }\n    if (showLine && map.getLayer(lineLayerId)) {\n      for (const [key, value] of Object.entries(mergedLinePaint)) {\n        map.setPaintProperty(\n          lineLayerId,\n          key as keyof MapLinePaint,\n          value as never,\n        );\n      }\n    }\n  }, [\n    isLoaded,\n    map,\n    sourceId,\n    fillLayerId,\n    lineLayerId,\n    showFill,\n    showLine,\n    mergedFillPaint,\n    mergedLinePaint,\n    beforeId,\n  ]);\n\n  // Interaction handlers (bound to the fill layer).\n  useEffect(() => {\n    if (!isLoaded || !map || !interactive || !showFill) return;\n\n    let hoveredId: string | number | null = null;\n\n    const setHover = (next: string | number | null) => {\n      if (next === hoveredId) return;\n      const sourceExists = !!map.getSource(sourceId);\n      if (hoveredId != null && sourceExists) {\n        map.setFeatureState(\n          { source: sourceId, id: hoveredId },\n          { hover: false },\n        );\n      }\n      hoveredId = next;\n      if (next != null && sourceExists) {\n        map.setFeatureState({ source: sourceId, id: next }, { hover: true });\n      }\n    };\n\n    const handleMouseMove = (e: MapLibreGL.MapLayerMouseEvent) => {\n      const feature = e.features?.[0];\n      if (!feature) return;\n      map.getCanvas().style.cursor = \"pointer\";\n\n      const featureId = feature.id;\n      if (featureId === hoveredId) return;\n      setHover(featureId ?? null);\n      latestRef.current.onHover?.({\n        feature: feature as unknown as MapGeoJSONFeature<P>,\n        longitude: e.lngLat.lng,\n        latitude: e.lngLat.lat,\n        originalEvent: e,\n      });\n    };\n\n    const handleMouseLeave = () => {\n      setHover(null);\n      map.getCanvas().style.cursor = \"\";\n      latestRef.current.onHover?.(null);\n    };\n\n    const handleClick = (e: MapLibreGL.MapLayerMouseEvent) => {\n      const feature = e.features?.[0];\n      if (!feature) return;\n      latestRef.current.onClick?.({\n        feature: feature as unknown as MapGeoJSONFeature<P>,\n        longitude: e.lngLat.lng,\n        latitude: e.lngLat.lat,\n        originalEvent: e,\n      });\n    };\n\n    map.on(\"mousemove\", fillLayerId, handleMouseMove);\n    map.on(\"mouseleave\", fillLayerId, handleMouseLeave);\n    map.on(\"click\", fillLayerId, handleClick);\n\n    return () => {\n      map.off(\"mousemove\", fillLayerId, handleMouseMove);\n      map.off(\"mouseleave\", fillLayerId, handleMouseLeave);\n      map.off(\"click\", fillLayerId, handleClick);\n      setHover(null);\n      map.getCanvas().style.cursor = \"\";\n    };\n  }, [isLoaded, map, fillLayerId, sourceId, interactive, showFill]);\n\n  return null;\n}\n\n/** A single arc to render inside <MapArc data={...}>. */\ntype MapArcDatum = {\n  /** Unique identifier for this arc. Required for hover state tracking and event payloads. */\n  id: string | number;\n  /** Start coordinate as [longitude, latitude]. */\n  from: [number, number];\n  /** End coordinate as [longitude, latitude]. */\n  to: [number, number];\n};\n\n/** Event payload passed to MapArc interaction callbacks. */\ntype MapArcEvent<T extends MapArcDatum = MapArcDatum> = {\n  /** The arc datum that was hovered or clicked. */\n  arc: T;\n  /** Longitude of the cursor at the time of the event. */\n  longitude: number;\n  /** Latitude of the cursor at the time of the event. */\n  latitude: number;\n  /** The underlying MapLibre mouse event for advanced use cases. */\n  originalEvent: MapLibreGL.MapMouseEvent;\n};\n\ntype MapArcLinePaint = NonNullable<MapLibreGL.LineLayerSpecification[\"paint\"]>;\ntype MapArcLineLayout = NonNullable<\n  MapLibreGL.LineLayerSpecification[\"layout\"]\n>;\n\ntype MapArcProps<T extends MapArcDatum = MapArcDatum> = {\n  /** Array of arcs to render. Each arc must have a unique `id`. */\n  data: T[];\n  /** Optional unique identifier prefix for the arc source/layers. Auto-generated if not provided. */\n  id?: string;\n  /**\n   * How far each arc bows away from a straight line. `0` renders straight\n   * lines; higher values bend further. Negative values bend to the opposite\n   * side. Arcs are computed as a quadratic Bézier in lng/lat space; the\n   * destination longitude is unwrapped relative to the origin so that arcs\n   * cross the antimeridian via the shorter great-circle direction. (default: 0.2)\n   */\n  curvature?: number;\n  /** Number of samples used to render each curve. Higher = smoother. (default: 64) */\n  samples?: number;\n  /**\n   * MapLibre paint properties for the arc layer. Merged on top of sensible\n   * defaults (`line-color: #4285F4`, `line-width: 2`, `line-opacity: 0.85`).\n   * Any value can be a MapLibre expression for per-feature styling, every\n   * field on each arc datum (besides `from`/`to`) is exposed via `[\"get\", ...]`.\n   */\n  paint?: MapArcLinePaint;\n  /** MapLibre layout properties for the arc layer. Defaults to rounded joins/caps. */\n  layout?: MapArcLineLayout;\n  /**\n   * Paint properties applied to the arc currently under the cursor. Each key\n   * is merged into `paint` as a `case` expression keyed on per-feature hover\n   * state, so only the hovered arc changes appearance.\n   */\n  hoverPaint?: MapArcLinePaint;\n  /** Callback when an arc is clicked. */\n  onClick?: (e: MapArcEvent<T>) => void;\n  /**\n   * Callback fired when the hovered arc changes. Receives the cursor's\n   * lng/lat at the moment of entry, and `null` when the cursor leaves the\n   * last hovered arc.\n   */\n  onHover?: (e: MapArcEvent<T> | null) => void;\n  /** Whether arcs respond to mouse events (default: true). */\n  interactive?: boolean;\n  /** Optional MapLibre layer id to insert the arc layers before (z-order control). */\n  beforeId?: string;\n};\n\nconst DEFAULT_ARC_CURVATURE = 0.2;\nconst DEFAULT_ARC_SAMPLES = 64;\nconst ARC_HIT_MIN_WIDTH = 12;\nconst ARC_HIT_PADDING = 6;\n\nconst DEFAULT_ARC_PAINT: MapArcLinePaint = {\n  \"line-color\": \"#4285F4\",\n  \"line-width\": 2,\n  \"line-opacity\": 0.85,\n};\n\nconst DEFAULT_ARC_LAYOUT: MapArcLineLayout = {\n  \"line-join\": \"round\",\n  \"line-cap\": \"round\",\n};\n\nfunction buildArcCoordinates(\n  from: [number, number],\n  to: [number, number],\n  curvature: number,\n  samples: number,\n): [number, number][] {\n  const [x0, y0] = from;\n  const [xTo, y2] = to;\n  // Unwrap the destination longitude so |dx| <= 180. This makes arcs that\n  // straddle the antimeridian (e.g. Tokyo -> San Francisco) bow the short way\n  // across the Pacific instead of the long way around the globe. Resulting\n  // longitudes may fall outside [-180, 180]; MapLibre renders them correctly\n  // on the globe projection, and on mercator when world copies are enabled.\n  const rawDx = xTo - x0;\n  const x2 = rawDx > 180 ? xTo - 360 : rawDx < -180 ? xTo + 360 : xTo;\n  const dx = x2 - x0;\n  const dy = y2 - y0;\n  const distance = Math.hypot(dx, dy);\n\n  if (distance === 0 || curvature === 0) return [from, [x2, y2]];\n\n  const mx = (x0 + x2) / 2;\n  const my = (y0 + y2) / 2;\n  const nx = -dy / distance;\n  const ny = dx / distance;\n  const offset = distance * curvature;\n  const cx = mx + nx * offset;\n  const cy = my + ny * offset;\n\n  const points: [number, number][] = [];\n  const segments = Math.max(2, Math.floor(samples));\n  for (let i = 0; i <= segments; i += 1) {\n    const t = i / segments;\n    const inv = 1 - t;\n    const x = inv * inv * x0 + 2 * inv * t * cx + t * t * x2;\n    const y = inv * inv * y0 + 2 * inv * t * cy + t * t * y2;\n    points.push([x, y]);\n  }\n  return points;\n}\n\nfunction MapArc<T extends MapArcDatum = MapArcDatum>({\n  data,\n  id: propId,\n  curvature = DEFAULT_ARC_CURVATURE,\n  samples = DEFAULT_ARC_SAMPLES,\n  paint,\n  layout,\n  hoverPaint,\n  onClick,\n  onHover,\n  interactive = true,\n  beforeId,\n}: MapArcProps<T>) {\n  const { map, isLoaded } = useMap();\n  const autoId = useId();\n  const id = propId ?? autoId;\n  const sourceId = `arc-source-${id}`;\n  const layerId = `arc-layer-${id}`;\n  const hitLayerId = `arc-hit-layer-${id}`;\n\n  const mergedPaint = useMemo(\n    () => mergeHoverPaint({ ...DEFAULT_ARC_PAINT, ...paint }, hoverPaint),\n    [paint, hoverPaint],\n  );\n  const mergedLayout = useMemo(\n    () => ({ ...DEFAULT_ARC_LAYOUT, ...layout }),\n    [layout],\n  );\n\n  const hitWidth = useMemo(() => {\n    const w = paint?.[\"line-width\"] ?? DEFAULT_ARC_PAINT[\"line-width\"];\n    const base = typeof w === \"number\" ? w : ARC_HIT_MIN_WIDTH;\n    return Math.max(base + ARC_HIT_PADDING, ARC_HIT_MIN_WIDTH);\n  }, [paint]);\n\n  const geoJSON = useMemo<GeoJSON.FeatureCollection<GeoJSON.LineString>>(\n    () => ({\n      type: \"FeatureCollection\",\n      features: data.map((arc) => {\n        const { from, to, ...properties } = arc;\n        return {\n          type: \"Feature\",\n          properties,\n          geometry: {\n            type: \"LineString\",\n            coordinates: buildArcCoordinates(from, to, curvature, samples),\n          },\n        };\n      }),\n    }),\n    [data, curvature, samples],\n  );\n\n  const latestRef = useRef({ data, onClick, onHover });\n  latestRef.current = { data, onClick, onHover };\n\n  // Add source and layers on mount.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    map.addSource(sourceId, {\n      type: \"geojson\",\n      data: geoJSON,\n      promoteId: \"id\",\n    });\n\n    map.addLayer(\n      {\n        id: hitLayerId,\n        type: \"line\",\n        source: sourceId,\n        layout: DEFAULT_ARC_LAYOUT,\n        paint: {\n          \"line-color\": \"rgba(0, 0, 0, 0)\",\n          \"line-width\": hitWidth,\n          \"line-opacity\": 1,\n        },\n      },\n      beforeId,\n    );\n\n    map.addLayer(\n      {\n        id: layerId,\n        type: \"line\",\n        source: sourceId,\n        layout: mergedLayout,\n        paint: mergedPaint,\n      },\n      beforeId,\n    );\n\n    return () => {\n      try {\n        if (map.getLayer(layerId)) map.removeLayer(layerId);\n        if (map.getLayer(hitLayerId)) map.removeLayer(hitLayerId);\n        if (map.getSource(sourceId)) map.removeSource(sourceId);\n      } catch {\n        // ignore\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoaded, map]);\n\n  // Sync features when data / curvature / samples change.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n    const source = map.getSource(sourceId) as\n      | MapLibreGL.GeoJSONSource\n      | undefined;\n    source?.setData(geoJSON);\n  }, [isLoaded, map, geoJSON, sourceId]);\n\n  // Sync paint/layout when they change.\n  useEffect(() => {\n    if (!isLoaded || !map || !map.getLayer(layerId)) return;\n    for (const [key, value] of Object.entries(mergedPaint)) {\n      map.setPaintProperty(\n        layerId,\n        key as keyof MapArcLinePaint,\n        value as never,\n      );\n    }\n    for (const [key, value] of Object.entries(mergedLayout)) {\n      map.setLayoutProperty(\n        layerId,\n        key as keyof MapArcLineLayout,\n        value as never,\n      );\n    }\n    if (map.getLayer(hitLayerId)) {\n      map.setPaintProperty(hitLayerId, \"line-width\", hitWidth);\n    }\n  }, [isLoaded, map, layerId, hitLayerId, mergedPaint, mergedLayout, hitWidth]);\n\n  // Interaction handlers\n  useEffect(() => {\n    if (!isLoaded || !map || !interactive) return;\n\n    let hoveredId: string | number | null = null;\n\n    const setHover = (next: string | number | null) => {\n      if (next === hoveredId) return;\n      const sourceExists = !!map.getSource(sourceId);\n      if (hoveredId != null && sourceExists) {\n        map.setFeatureState(\n          { source: sourceId, id: hoveredId },\n          { hover: false },\n        );\n      }\n      hoveredId = next;\n      if (next != null && sourceExists) {\n        map.setFeatureState({ source: sourceId, id: next }, { hover: true });\n      }\n    };\n\n    const findArc = (featureId: string | number | undefined) =>\n      featureId == null\n        ? undefined\n        : latestRef.current.data.find(\n            (arc) => String(arc.id) === String(featureId),\n          );\n\n    const handleMouseMove = (e: MapLibreGL.MapLayerMouseEvent) => {\n      const featureId = e.features?.[0]?.id as string | number | undefined;\n      if (featureId == null || featureId === hoveredId) return;\n\n      setHover(featureId);\n      map.getCanvas().style.cursor = \"pointer\";\n\n      const arc = findArc(featureId);\n      if (arc) {\n        latestRef.current.onHover?.({\n          arc: arc as T,\n          longitude: e.lngLat.lng,\n          latitude: e.lngLat.lat,\n          originalEvent: e,\n        });\n      }\n    };\n\n    const handleMouseLeave = () => {\n      setHover(null);\n      map.getCanvas().style.cursor = \"\";\n      latestRef.current.onHover?.(null);\n    };\n\n    const handleClick = (e: MapLibreGL.MapLayerMouseEvent) => {\n      const arc = findArc(e.features?.[0]?.id as string | number | undefined);\n      if (!arc) return;\n      latestRef.current.onClick?.({\n        arc: arc as T,\n        longitude: e.lngLat.lng,\n        latitude: e.lngLat.lat,\n        originalEvent: e,\n      });\n    };\n\n    map.on(\"mousemove\", hitLayerId, handleMouseMove);\n    map.on(\"mouseleave\", hitLayerId, handleMouseLeave);\n    map.on(\"click\", hitLayerId, handleClick);\n\n    return () => {\n      map.off(\"mousemove\", hitLayerId, handleMouseMove);\n      map.off(\"mouseleave\", hitLayerId, handleMouseLeave);\n      map.off(\"click\", hitLayerId, handleClick);\n      setHover(null);\n      map.getCanvas().style.cursor = \"\";\n    };\n  }, [isLoaded, map, hitLayerId, sourceId, interactive]);\n\n  return null;\n}\n\ntype MapClusterLayerProps<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n> = {\n  /** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */\n  data: string | GeoJSON.FeatureCollection<GeoJSON.Point, P>;\n  /** Maximum zoom level to cluster points on (default: 14) */\n  clusterMaxZoom?: number;\n  /** Radius of each cluster when clustering points in pixels (default: 50) */\n  clusterRadius?: number;\n  /** Colors for cluster circles: [small, medium, large] based on point count (default: [\"#3b82f6\", \"#1d4ed8\", \"#1e3a8a\"]) */\n  clusterColors?: [string, string, string];\n  /** Point count thresholds for color/size steps: [medium, large] (default: [100, 750]) */\n  clusterThresholds?: [number, number];\n  /** Color for unclustered individual points (default: \"#3b82f6\") */\n  pointColor?: string;\n  /** Callback when an unclustered point is clicked */\n  onPointClick?: (\n    feature: GeoJSON.Feature<GeoJSON.Point, P>,\n    coordinates: [number, number],\n  ) => void;\n  /** Callback when a cluster is clicked. If not provided, zooms into the cluster */\n  onClusterClick?: (\n    clusterId: number,\n    coordinates: [number, number],\n    pointCount: number,\n  ) => void;\n};\n\nconst DEFAULT_CLUSTER_COLORS: [string, string, string] = [\n  \"#3b82f6\",\n  \"#1d4ed8\",\n  \"#1e3a8a\",\n];\nconst DEFAULT_CLUSTER_THRESHOLDS: [number, number] = [100, 750];\n\nfunction MapClusterLayer<\n  P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties,\n>({\n  data,\n  clusterMaxZoom = 14,\n  clusterRadius = 50,\n  clusterColors = DEFAULT_CLUSTER_COLORS,\n  clusterThresholds = DEFAULT_CLUSTER_THRESHOLDS,\n  pointColor = \"#3b82f6\",\n  onPointClick,\n  onClusterClick,\n}: MapClusterLayerProps<P>) {\n  const { map, isLoaded } = useMap();\n  const id = useId();\n  const sourceId = `cluster-source-${id}`;\n  const clusterLayerId = `clusters-${id}`;\n  const clusterCountLayerId = `cluster-count-${id}`;\n  const unclusteredLayerId = `unclustered-point-${id}`;\n\n  const stylePropsRef = useRef({\n    clusterColors,\n    clusterThresholds,\n    pointColor,\n  });\n\n  // Add source and layers on mount\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    // Add clustered GeoJSON source\n    map.addSource(sourceId, {\n      type: \"geojson\",\n      data,\n      cluster: true,\n      clusterMaxZoom,\n      clusterRadius,\n    });\n\n    // Add cluster circles layer\n    map.addLayer({\n      id: clusterLayerId,\n      type: \"circle\",\n      source: sourceId,\n      filter: [\"has\", \"point_count\"],\n      paint: {\n        \"circle-color\": [\n          \"step\",\n          [\"get\", \"point_count\"],\n          clusterColors[0],\n          clusterThresholds[0],\n          clusterColors[1],\n          clusterThresholds[1],\n          clusterColors[2],\n        ],\n        \"circle-radius\": [\n          \"step\",\n          [\"get\", \"point_count\"],\n          20,\n          clusterThresholds[0],\n          30,\n          clusterThresholds[1],\n          40,\n        ],\n        \"circle-stroke-width\": 0.75,\n        \"circle-stroke-color\": \"#fff\",\n        \"circle-opacity\": 0.85,\n      },\n    });\n\n    // Add cluster count text layer\n    map.addLayer({\n      id: clusterCountLayerId,\n      type: \"symbol\",\n      source: sourceId,\n      filter: [\"has\", \"point_count\"],\n      layout: {\n        \"text-field\": \"{point_count_abbreviated}\",\n        \"text-font\": [\"Open Sans Semibold\"],\n        \"text-size\": 12,\n      },\n      paint: {\n        \"text-color\": \"#fff\",\n      },\n    });\n\n    // Add unclustered point layer\n    map.addLayer({\n      id: unclusteredLayerId,\n      type: \"circle\",\n      source: sourceId,\n      filter: [\"!\", [\"has\", \"point_count\"]],\n      paint: {\n        \"circle-color\": pointColor,\n        \"circle-radius\": 5,\n        \"circle-stroke-width\": 2,\n        \"circle-stroke-color\": \"#fff\",\n      },\n    });\n\n    return () => {\n      try {\n        if (map.getLayer(clusterCountLayerId))\n          map.removeLayer(clusterCountLayerId);\n        if (map.getLayer(unclusteredLayerId))\n          map.removeLayer(unclusteredLayerId);\n        if (map.getLayer(clusterLayerId)) map.removeLayer(clusterLayerId);\n        if (map.getSource(sourceId)) map.removeSource(sourceId);\n      } catch {\n        // ignore\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoaded, map, sourceId]);\n\n  // Update source data when data prop changes (only for non-URL data)\n  useEffect(() => {\n    if (!isLoaded || !map || typeof data === \"string\") return;\n\n    const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource;\n    if (source) {\n      source.setData(data);\n    }\n  }, [isLoaded, map, data, sourceId]);\n\n  // Update layer styles when props change\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    const prev = stylePropsRef.current;\n    const colorsChanged =\n      prev.clusterColors !== clusterColors ||\n      prev.clusterThresholds !== clusterThresholds;\n\n    // Update cluster layer colors and sizes\n    if (map.getLayer(clusterLayerId) && colorsChanged) {\n      map.setPaintProperty(clusterLayerId, \"circle-color\", [\n        \"step\",\n        [\"get\", \"point_count\"],\n        clusterColors[0],\n        clusterThresholds[0],\n        clusterColors[1],\n        clusterThresholds[1],\n        clusterColors[2],\n      ]);\n      map.setPaintProperty(clusterLayerId, \"circle-radius\", [\n        \"step\",\n        [\"get\", \"point_count\"],\n        20,\n        clusterThresholds[0],\n        30,\n        clusterThresholds[1],\n        40,\n      ]);\n    }\n\n    // Update unclustered point layer color\n    if (map.getLayer(unclusteredLayerId) && prev.pointColor !== pointColor) {\n      map.setPaintProperty(unclusteredLayerId, \"circle-color\", pointColor);\n    }\n\n    stylePropsRef.current = { clusterColors, clusterThresholds, pointColor };\n  }, [\n    isLoaded,\n    map,\n    clusterLayerId,\n    unclusteredLayerId,\n    clusterColors,\n    clusterThresholds,\n    pointColor,\n  ]);\n\n  // Handle click events\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    // Cluster click handler - zoom into cluster\n    const handleClusterClick = async (\n      e: MapLibreGL.MapMouseEvent & {\n        features?: MapLibreGL.MapGeoJSONFeature[];\n      },\n    ) => {\n      const features = map.queryRenderedFeatures(e.point, {\n        layers: [clusterLayerId],\n      });\n      if (!features.length) return;\n\n      const feature = features[0];\n      const clusterId = feature.properties?.cluster_id as number;\n      const pointCount = feature.properties?.point_count as number;\n      const coordinates = (feature.geometry as GeoJSON.Point).coordinates as [\n        number,\n        number,\n      ];\n\n      if (onClusterClick) {\n        onClusterClick(clusterId, coordinates, pointCount);\n      } else {\n        // Default behavior: zoom to cluster expansion zoom\n        const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource;\n        const zoom = await source.getClusterExpansionZoom(clusterId);\n        map.easeTo({\n          center: coordinates,\n          zoom,\n        });\n      }\n    };\n\n    // Unclustered point click handler\n    const handlePointClick = (\n      e: MapLibreGL.MapMouseEvent & {\n        features?: MapLibreGL.MapGeoJSONFeature[];\n      },\n    ) => {\n      if (!onPointClick || !e.features?.length) return;\n\n      const feature = e.features[0];\n      const coordinates = (\n        feature.geometry as GeoJSON.Point\n      ).coordinates.slice() as [number, number];\n\n      // Handle world copies\n      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {\n        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;\n      }\n\n      onPointClick(\n        feature as unknown as GeoJSON.Feature<GeoJSON.Point, P>,\n        coordinates,\n      );\n    };\n\n    // Cursor style handlers\n    const handleMouseEnterCluster = () => {\n      map.getCanvas().style.cursor = \"pointer\";\n    };\n    const handleMouseLeaveCluster = () => {\n      map.getCanvas().style.cursor = \"\";\n    };\n    const handleMouseEnterPoint = () => {\n      if (onPointClick) {\n        map.getCanvas().style.cursor = \"pointer\";\n      }\n    };\n    const handleMouseLeavePoint = () => {\n      map.getCanvas().style.cursor = \"\";\n    };\n\n    map.on(\"click\", clusterLayerId, handleClusterClick);\n    map.on(\"click\", unclusteredLayerId, handlePointClick);\n    map.on(\"mouseenter\", clusterLayerId, handleMouseEnterCluster);\n    map.on(\"mouseleave\", clusterLayerId, handleMouseLeaveCluster);\n    map.on(\"mouseenter\", unclusteredLayerId, handleMouseEnterPoint);\n    map.on(\"mouseleave\", unclusteredLayerId, handleMouseLeavePoint);\n\n    return () => {\n      map.off(\"click\", clusterLayerId, handleClusterClick);\n      map.off(\"click\", unclusteredLayerId, handlePointClick);\n      map.off(\"mouseenter\", clusterLayerId, handleMouseEnterCluster);\n      map.off(\"mouseleave\", clusterLayerId, handleMouseLeaveCluster);\n      map.off(\"mouseenter\", unclusteredLayerId, handleMouseEnterPoint);\n      map.off(\"mouseleave\", unclusteredLayerId, handleMouseLeavePoint);\n    };\n  }, [\n    isLoaded,\n    map,\n    clusterLayerId,\n    unclusteredLayerId,\n    sourceId,\n    onClusterClick,\n    onPointClick,\n  ]);\n\n  return null;\n}\n\nexport {\n  Map,\n  useMap,\n  MapMarker,\n  MarkerContent,\n  MarkerPopup,\n  MarkerTooltip,\n  MarkerLabel,\n  MapPopup,\n  MapControls,\n  MapRoute,\n  MapArc,\n  MapGeoJSON,\n  MapClusterLayer,\n};\n\nexport type {\n  MapRef,\n  MapViewport,\n  MapStyleOption,\n  MapArcDatum,\n  MapArcEvent,\n  MapGeoJSONData,\n  MapGeoJSONFeature,\n  MapGeoJSONEvent,\n  MapProps,\n  MapMarkerProps,\n  MarkerContentProps,\n  MarkerPopupProps,\n  MarkerTooltipProps,\n  MarkerLabelProps,\n  MapControlsProps,\n  MapPopupProps,\n  MapRouteProps,\n  MapArcProps,\n  MapGeoJSONProps,\n  MapClusterLayerProps,\n};\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/marker.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "marker",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "class-variance-authority",
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "ui/marker.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        separator:\n          \"before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border\",\n        border: \"border-b border-border pb-2\",\n      },\n    },\n  }\n)\n\nfunction Marker({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof markerVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"marker\"\n      data-variant={variant}\n      className={cn(markerVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        \"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerIcon, MarkerContent, markerVariants }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/marquee.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "marquee",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "files": [
+    {
+      "path": "ui/marquee.tsx",
+      "content": "import { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface MarqueeProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional CSS class name to apply custom styles\n   */\n  className?: string\n  /**\n   * Whether to reverse the animation direction\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Whether to pause the animation on hover\n   * @default false\n   */\n  pauseOnHover?: boolean\n  /**\n   * Content to be displayed in the marquee\n   */\n  children: React.ReactNode\n  /**\n   * Whether to animate vertically instead of horizontally\n   * @default false\n   */\n  vertical?: boolean\n  /**\n   * Number of times to repeat the content\n   * @default 4\n   */\n  repeat?: number\n}\n\nexport function Marquee({\n  className,\n  reverse = false,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]\",\n        {\n          \"flex-row\": !vertical,\n          \"flex-col\": vertical,\n        },\n        className\n      )}\n    >\n      {Array(repeat)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            key={i}\n            className={cn(\"flex shrink-0 justify-around [gap:var(--gap)]\", {\n              \"animate-marquee flex-row\": !vertical,\n              \"animate-marquee-vertical flex-col\": vertical,\n              \"group-hover:[animation-play-state:paused]\": pauseOnHover,\n              \"[animation-direction:reverse]\": reverse,\n            })}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/message.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "message",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "files": [
+    {
+      "path": "ui/message.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = \"start\",\n  ...props\n}: React.ComponentProps<\"div\"> & { align?: \"start\" | \"end\" }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        \"group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        \"flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        \"flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  MessageGroup,\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageHeader,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/navigation-menu.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@radix-ui/react-navigation-menu",
+    "@tabler/icons-react",
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu.tsx",
+      "content": "import { IconChevronDown } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  viewportClassName,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n  viewportClassName?: string\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport className={viewportClassName} />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconChevronDown\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-1/2 isolate z-50 flex -translate-x-1/2 justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/number-ticker.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "number-ticker",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "files": [
+    {
+      "path": "ui/number-ticker.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, type ComponentPropsWithoutRef } from \"react\"\nimport { useInView, useMotionValue, useSpring } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface NumberTickerProps extends ComponentPropsWithoutRef<\"span\"> {\n  value: number\n  startValue?: number\n  direction?: \"up\" | \"down\"\n  delay?: number\n  decimalPlaces?: number\n  prefix?: string\n  suffix?: string\n  springDamping?: number\n  springStiffness?: number\n  springMass?: number\n}\n\nfunction formatTickerValue(value: number, decimalPlaces: number): string {\n  return Intl.NumberFormat(\"en-US\", {\n    minimumFractionDigits: decimalPlaces,\n    maximumFractionDigits: decimalPlaces,\n  }).format(Number(value.toFixed(decimalPlaces)))\n}\n\nexport function NumberTicker({\n  value,\n  startValue = 0,\n  direction = \"up\",\n  delay = 0,\n  className,\n  decimalPlaces = 0,\n  prefix,\n  suffix,\n  springDamping = 60,\n  springStiffness = 100,\n  springMass = 1,\n  ...props\n}: NumberTickerProps) {\n  const containerRef = useRef<HTMLSpanElement>(null)\n  const displayRef = useRef<HTMLSpanElement>(null)\n  const motionValue = useMotionValue(direction === \"down\" ? value : startValue)\n  const springValue = useSpring(motionValue, {\n    damping: springDamping,\n    stiffness: springStiffness,\n    mass: springMass,\n  })\n  const isInView = useInView(containerRef, { once: true, amount: 0.3 })\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | null = null\n\n    if (isInView) {\n      timer = setTimeout(() => {\n        motionValue.set(direction === \"down\" ? startValue : value)\n      }, delay * 1000)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [motionValue, isInView, delay, value, direction, startValue])\n\n  useEffect(() => {\n    const updateDisplay = (latest: number) => {\n      if (displayRef.current) {\n        displayRef.current.textContent = formatTickerValue(latest, decimalPlaces)\n      }\n    }\n\n    updateDisplay(springValue.get())\n    return springValue.on(\"change\", updateDisplay)\n  }, [springValue, decimalPlaces])\n\n  return (\n    <span\n      ref={containerRef}\n      className={cn(\"inline-block tabular-nums tracking-wider\", className)}\n      {...props}\n    >\n      {prefix}\n      <span ref={displayRef}>{formatTickerValue(startValue, decimalPlaces)}</span>\n      {suffix}\n    </span>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/pagination.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination.tsx",
+      "content": "import { IconChevronLeft, IconChevronRight, IconDots } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <IconChevronLeft />\n      {/* <span className=\"hidden sm:block text-xs\">Anterior</span> */}\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      {/* <span className=\"hidden sm:block text-xs\">Siguiente</span> */}\n      <IconChevronRight />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <IconDots className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/popover.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@radix-ui/react-popover"
+  ],
+  "files": [
+    {
+      "path": "ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/progress.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"h-full w-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/select.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@radix-ui/react-select",
+    "@tabler/icons-react"
+  ],
+  "files": [
+    {
+      "path": "ui/select.tsx",
+      "content": "\"use client\"\n\nimport { IconCheck, IconChevronDown, IconChevronUp } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconChevronDown className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  viewportClassName,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content> & {\n  viewportClassName?: string\n}) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\",\n            viewportClassName,\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <IconCheck className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronUp className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronDown className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/separator.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/sheet.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react",
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport { IconX } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n          side === \"left\" &&\n            \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n          side === \"top\" &&\n            \"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n          side === \"bottom\" &&\n            \"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary\">\n            <IconX className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\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({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/sidebar.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "@tabler/icons-react",
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "button",
+    "drawer",
+    "hook-use-mobile",
+    "input",
+    "lib-sidebar-persistence",
+    "separator",
+    "skeleton",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport { IconLayoutSidebar } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport { readSidebarOpen, writeSidebarOpen } from \"@/lib/sidebar-persistence\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from \"@/components/ui/drawer\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/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(() => readSidebarOpen(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      writeSidebarOpen(openState)\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      <TooltipProvider delayDuration={0}>\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 React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\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          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    const roundedSide =\n      side === \"left\"\n        ? [\n            \"data-[vaul-drawer-direction=left]:inset-y-3\",\n            \"data-[vaul-drawer-direction=left]:left-3\",\n            \"data-[vaul-drawer-direction=left]:right-auto\",\n            \"data-[vaul-drawer-direction=left]:h-[calc(100%-1.5rem)]\",\n            \"data-[vaul-drawer-direction=left]:max-h-[calc(100%-1.5rem)]\",\n            \"data-[vaul-drawer-direction=left]:w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=left]:max-w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=left]:sm:max-w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=left]:rounded-2xl\",\n            \"data-[vaul-drawer-direction=left]:border\",\n          ].join(\" \")\n        : [\n            \"data-[vaul-drawer-direction=right]:inset-y-3\",\n            \"data-[vaul-drawer-direction=right]:right-3\",\n            \"data-[vaul-drawer-direction=right]:left-auto\",\n            \"data-[vaul-drawer-direction=right]:h-[calc(100%-1.5rem)]\",\n            \"data-[vaul-drawer-direction=right]:max-h-[calc(100%-1.5rem)]\",\n            \"data-[vaul-drawer-direction=right]:w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=right]:max-w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=right]:sm:max-w-(--sidebar-width)\",\n            \"data-[vaul-drawer-direction=right]:rounded-2xl\",\n            \"data-[vaul-drawer-direction=right]:border\",\n          ].join(\" \")\n\n    return (\n      <Drawer\n        open={openMobile}\n        onOpenChange={setOpenMobile}\n        direction={side}\n        shouldScaleBackground={false}\n        {...(props as React.ComponentProps<typeof Drawer>)}\n      >\n        <DrawerContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className={cn(\n            \"bg-sidebar text-sidebar-foreground overflow-hidden p-0 shadow-xl\",\n            roundedSide\n          )}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <DrawerHeader className=\"sr-only\">\n            <DrawerTitle>Sidebar</DrawerTitle>\n            <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden 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 inset-y-0 z-10 hidden h-svh 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=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\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\"\n      aria-label=\"Alternar barra lateral\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconLayoutSidebar />\n      <span className=\"sr-only\">Alternar barra lateral</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        \"hover:after:bg-sidebar-border 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] 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        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\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        \"bg-background relative flex w-full flex-1 flex-col\",\n        \"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(\"bg-background h-8 w-full 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(\"bg-sidebar-border mx-2 w-auto\", 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        \"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  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\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 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\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  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot : \"button\"\n  const { isMobile, state } = useSidebar()\n  const ariaLabel = typeof tooltip === \"string\" ? tooltip : undefined\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      aria-label={ariaLabel}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\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  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\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        \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\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.useMemo(() => {\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 React.CSSProperties\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        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"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  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\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",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/skeleton.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "files": [
+    {
+      "path": "ui/skeleton.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-foreground/10\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/sonner.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { IconCircleCheck, IconInfoCircle, IconLoader2, IconCircleX, IconAlertTriangle } from \"@tabler/icons-react\";\nimport { useTheme } from \"@/components/theme-provider\"\nimport { cn } from \"@/lib/utils\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      duration={4500}\n      containerAriaLabel=\"Notificaciones\"\n      className={cn(\n        \"toaster group\",\n        \"[--width:min(28rem,calc(100vw-2rem))]\",\n      )}\n      icons={{\n        success: <IconCircleCheck className=\"size-5 text-primary\" aria-hidden />,\n        info: <IconInfoCircle className=\"size-5 text-chart-3\" aria-hidden />,\n        warning: (\n          <IconAlertTriangle className=\"size-5 text-amber-600 dark:text-amber-400\" aria-hidden />\n        ),\n        error: <IconCircleX className=\"size-5 text-destructive\" aria-hidden />,\n        loading: <IconLoader2 className=\"size-5 animate-spin text-primary\" aria-hidden />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: cn(\n            \"!w-[var(--width)] !max-w-[calc(100vw-2rem)] !rounded-xl !border !border-border\",\n            \"!bg-card/95 !text-card-foreground !shadow-lg !backdrop-blur-md\",\n            \"!p-4 !gap-3 !text-sm\",\n            \"dark:!shadow-black/25\",\n          ),\n          title: \"!text-sm !font-semibold !text-foreground !leading-snug\",\n          description:\n            \"!text-xs !text-muted-foreground !leading-relaxed !font-normal !opacity-100\",\n          content: \"!gap-1\",\n          icon: \"!size-5 !mt-0.5 shrink-0 [&_svg]:!size-5\",\n          actionButton: cn(\n            \"!rounded-lg !px-3 !py-1.5 !text-xs !font-medium\",\n            \"!bg-primary !text-primary-foreground hover:!bg-primary/90\",\n          ),\n          cancelButton:\n            \"!rounded-lg !border !border-border !bg-background !text-foreground hover:!bg-muted\",\n          closeButton:\n            \"!border-border !bg-muted/40 !text-foreground hover:!bg-muted\",\n          success: \"!border-l-4 !border-l-primary\",\n          error: \"!border-l-4 !border-l-destructive\",\n          warning:\n            \"!border-l-4 !border-l-amber-500 dark:!border-l-amber-400\",\n          info: \"!border-l-4 !border-l-[var(--chart-3)]\",\n          loading: \"!border-l-4 !border-l-primary/50\",\n        },\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--card)\",\n          \"--normal-text\": \"var(--card-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}