@alexgorbatchev/shadcn 0.0.12 → 0.0.16

package/dist/chunk-djrb64cg.js

@@ -0,0 +1,141 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  useMediaDuration
+} from "./chunk-pb8tsrdf.js";
+import {
+  formatMediaDuration
+} from "./chunk-64564z9p.js";
+import {
+  paper,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/AudioPlayer.tsx
+import { useEffect, useRef, useState } from "react";
+import { PauseIcon, PlayIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AudioPlayer2({ src, title, artwork, durationMs, ...props }) {
+  const audioRef = useRef(null);
+  const [playback, setPlayback] = useState({
+    src,
+    currentTime: 0,
+    playing: false,
+    hasError: false
+  });
+  const { duration, setDurationFromMetadata } = useMediaDuration(audioRef, src, durationMs);
+  const playbackState = playback.src === src ? playback : { src, currentTime: 0, playing: false, hasError: false };
+  const { currentTime, playing, hasError } = playbackState;
+  const update = (patch) => setPlayback((current) => ({
+    ...current.src === src ? current : { src, currentTime: 0, playing: false, hasError: false },
+    ...patch
+  }));
+  const displayTitle = title ?? "Audio";
+  const playbackLabel = title ? ` ${title}` : " audio";
+  const durationLabel = duration === undefined ? "--:--" : formatMediaDuration(duration);
+  useEffect(() => {
+    if (audioRef.current?.error) {
+      setPlayback({ src, currentTime: 0, playing: false, hasError: true });
+    }
+  }, [src]);
+  const togglePlayback = () => {
+    const audio = audioRef.current;
+    if (!audio || hasError)
+      return;
+    if (playing) {
+      audio.pause();
+      update({ playing: false });
+      return;
+    }
+    audio.play().then(() => update({ playing: true }), () => update(audio.error ? { hasError: true, playing: false } : { playing: false }));
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "AudioPlayer",
+    "data-slot": "audio-player",
+    className: cn2(paper, "flex w-full max-w-md items-center gap-3 rounded-md p-3"),
+    ...props,
+    children: [
+      artwork ? /* @__PURE__ */ jsx("img", {
+        src: artwork,
+        alt: "",
+        className: "size-10 shrink-0 rounded-lg object-cover"
+      }) : null,
+      /* @__PURE__ */ jsx(Button2, {
+        variant: "default",
+        type: "button",
+        "aria-label": `${playing ? "Pause" : "Play"}${playbackLabel}`,
+        disabled: hasError,
+        onClick: togglePlayback,
+        size: "icon",
+        children: playing ? /* @__PURE__ */ jsx(PauseIcon, {
+          "aria-hidden": "true",
+          "data-icon": "inline-start"
+        }) : /* @__PURE__ */ jsx(PlayIcon, {
+          "aria-hidden": "true",
+          "data-icon": "inline-start"
+        })
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex min-w-0 grow basis-16 flex-col gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "truncate text-base font-medium",
+            children: displayTitle
+          }),
+          /* @__PURE__ */ jsx("input", {
+            type: "range",
+            min: 0,
+            max: duration ?? 0,
+            step: 0.1,
+            value: Math.min(currentTime, duration ?? 0),
+            "aria-label": "Seek",
+            "aria-valuetext": `${formatMediaDuration(currentTime)} of ${durationLabel}`,
+            disabled: hasError,
+            onChange: (event) => {
+              const nextTime = Number(event.currentTarget.value);
+              if (!Number.isFinite(nextTime))
+                return;
+              const resolvedTime = Math.min(nextTime, duration ?? nextTime);
+              if (audioRef.current)
+                audioRef.current.currentTime = resolvedTime;
+              update({ currentTime: resolvedTime });
+            },
+            className: "accent-foreground w-full cursor-pointer disabled:cursor-default"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2(mono, "text-muted-foreground tabular-nums"),
+        children: [
+          formatMediaDuration(currentTime),
+          " / ",
+          durationLabel
+        ]
+      }),
+      /* @__PURE__ */ jsx("audio", {
+        ref: audioRef,
+        src,
+        preload: "metadata",
+        className: "hidden",
+        onLoadedMetadata: (event) => {
+          setDurationFromMetadata(event.currentTarget.duration);
+        },
+        onTimeUpdate: (event) => update({ currentTime: event.currentTarget.currentTime }),
+        onPlay: () => update({ playing: true }),
+        onPause: () => update({ playing: false }),
+        onError: () => update({ hasError: true, playing: false })
+      }),
+      hasError ? /* @__PURE__ */ jsx("span", {
+        role: "alert",
+        className: "text-muted-foreground text-sm",
+        children: "Can't play this audio"
+      }) : null
+    ]
+  });
+}
+
+export { AudioPlayer2 };

package/dist/chunk-dnja1pz5.js

@@ -0,0 +1,18 @@
+import {
+  CommandEmpty2
+} from "./chunk-4gby2v61.js";
+
+// src/components/assistant-ui/elements/ModelSelectorEmpty.tsx
+import { jsx } from "react/jsx-runtime";
+function ModelSelectorEmpty2({
+  children = "No models found.",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CommandEmpty2, {
+    "data-slot": "model-selector-empty",
+    ...props,
+    children
+  });
+}
+
+export { ModelSelectorEmpty2 };

package/dist/chunk-dnvb9r71.js

@@ -0,0 +1,96 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  paper,
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/DocumentReference.tsx
+import { FileTextIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DocumentReference2({
+  title,
+  pages,
+  anchors,
+  activePage,
+  onJump,
+  ...props
+}) {
+  const currentIndex = anchors.findIndex((anchor) => anchor.page === activePage);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "DocumentReference",
+    "data-slot": "document-reference",
+    className: cn2(paper, "flex w-full max-w-sm flex-col gap-3 rounded-md p-3.5"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2.5",
+        children: [
+          /* @__PURE__ */ jsx(FileTextIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4", "text-muted-foreground", "rounded-sm bg-secondary p-1")
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "flex min-w-0 flex-1 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "truncate text-base font-medium",
+                children: title
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: cn2(mono, "text-muted-foreground"),
+                children: [
+                  pages,
+                  " pages · ",
+                  anchors.length,
+                  " cited"
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex flex-col gap-1.5",
+        children: anchors.map((anchor, i) => {
+          const className = cn2("flex flex-col gap-1 rounded-md px-2.5 py-2 text-start transition-colors", anchor.page === activePage ? field : onJump ? "hover:bg-foreground/[0.035]" : undefined);
+          const content = /* @__PURE__ */ jsxs("span", {
+            className: "flex flex-col gap-1",
+            children: [
+              /* @__PURE__ */ jsxs("span", {
+                className: cn2(mono, "text-muted-foreground"),
+                children: [
+                  "p. ",
+                  anchor.page
+                ]
+              }),
+              /* @__PURE__ */ jsx("q", {
+                className: "text-muted-foreground border-border border-s-2 ps-2 text-sm leading-relaxed break-words",
+                children: anchor.quote
+              })
+            ]
+          });
+          return onJump ? /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            "aria-current": i === currentIndex || undefined,
+            onClick: () => onJump(anchor.page),
+            variant: "ghost",
+            align: "start",
+            children: content
+          }, `${anchor.page}-${i}`) : /* @__PURE__ */ jsx("div", {
+            "aria-current": i === currentIndex || undefined,
+            className,
+            children: content
+          }, `${anchor.page}-${i}`);
+        })
+      })
+    ]
+  });
+}
+
+export { DocumentReference2 };

package/dist/chunk-ds65prb9.js

@@ -0,0 +1,229 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  paper,
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/utils/geoMap.ts
+function isCoordinate(lat, lng) {
+  return Number.isFinite(lat) && Number.isFinite(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
+}
+function markerIcon(leaflet, selected) {
+  const size = selected ? 16 : 10;
+  return leaflet.divIcon({
+    className: "geo-map-marker",
+    html: `<span data-slot="assistant-map-marker" data-selected="${selected}"></span>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2]
+  });
+}
+
+// src/components/assistant-ui/elements/GeoMap.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+var DEFAULT_ATTRIBUTION = "© OpenStreetMap contributors";
+function GeoMap2({
+  places,
+  routes,
+  selectedId,
+  onSelect,
+  theme = "auto",
+  tileUrl,
+  attribution,
+  height = 260,
+  variant = "default",
+  ...props
+}) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const leafletRef = useRef(null);
+  const markersRef = useRef(new Map);
+  const [mapReady, setMapReady] = useState(false);
+  const mapContent = useMemo(() => {
+    const validPlaces = places.filter((place) => isCoordinate(place.lat, place.lng));
+    const routePoints = [];
+    const validRoutes = routes?.map((route) => {
+      const points = route.points.filter(([lat, lng]) => isCoordinate(lat, lng)).map(([lat, lng]) => [lat, lng]);
+      routePoints.push(...points);
+      return { ...route, points };
+    }).filter((route) => route.points.length > 1) ?? [];
+    return {
+      signature: JSON.stringify([
+        places.map((place) => [place.id, place.lat, place.lng, place.label, place.description]),
+        routes?.map((route) => [route.id, route.points, route.label]) ?? []
+      ]),
+      validPlaces,
+      routePoints,
+      validRoutes
+    };
+  }, [places, routes]);
+  const { signature: contentSignature, validPlaces } = mapContent;
+  const mapContentRef = useRef(mapContent);
+  mapContentRef.current = mapContent;
+  const resolvedTileUrl = tileUrl ?? DEFAULT_TILE_URL;
+  const resolvedAttribution = attribution ?? DEFAULT_ATTRIBUTION;
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState(() => validPlaces[0]?.id);
+  const activeId = selectedId ?? (validPlaces.some((place) => place.id === uncontrolledSelectedId) ? uncontrolledSelectedId : validPlaces[0]?.id);
+  const activeIdRef = useRef(activeId);
+  activeIdRef.current = activeId;
+  const selectPlace = useCallback((place) => {
+    if (selectedId === undefined)
+      setUncontrolledSelectedId(place.id);
+    onSelect?.(place.id);
+    mapRef.current?.panTo([place.lat, place.lng]);
+  }, [onSelect, selectedId]);
+  const selectPlaceRef = useRef(selectPlace);
+  selectPlaceRef.current = selectPlace;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    let cancelled = false;
+    let map = null;
+    setMapReady(false);
+    (async () => {
+      const leaflet = await import("leaflet");
+      if (cancelled)
+        return;
+      leafletRef.current = leaflet;
+      map = leaflet.map(container, { keyboard: true });
+      mapRef.current = map;
+      leaflet.tileLayer(resolvedTileUrl, {
+        attribution: resolvedAttribution
+      }).addTo(map);
+      setMapReady(true);
+    })();
+    return () => {
+      cancelled = true;
+      if (mapRef.current === map)
+        mapRef.current = null;
+      map?.remove();
+    };
+  }, [resolvedAttribution, resolvedTileUrl]);
+  useEffect(() => {
+    const leaflet = leafletRef.current;
+    const map = mapRef.current;
+    if (!leaflet || !map || !mapReady)
+      return;
+    const { routePoints, validPlaces, validRoutes } = mapContentRef.current;
+    const markers = markersRef.current;
+    const layer = leaflet.layerGroup().addTo(map);
+    const points = [
+      ...validPlaces.map((place) => [place.lat, place.lng]),
+      ...routePoints
+    ];
+    const [first] = points;
+    if (points.length === 1 && first) {
+      map.setView(first, 13);
+    } else if (points.length > 1) {
+      map.fitBounds(leaflet.latLngBounds(points), { padding: [24, 24] });
+    } else {
+      map.setView([0, 0], 2);
+    }
+    for (const route of validRoutes) {
+      const polyline = leaflet.polyline(route.points, {
+        color: "var(--muted-foreground)",
+        weight: 2
+      }).addTo(layer);
+      if (route.label) {
+        const label = document.createElement("span");
+        label.textContent = route.label;
+        polyline.bindTooltip(label);
+        const path = polyline.getElement();
+        path?.setAttribute("role", "graphics-symbol");
+        path?.setAttribute("aria-label", route.label);
+        path?.setAttribute("tabindex", "0");
+      }
+    }
+    for (const place of validPlaces) {
+      const marker = leaflet.marker([place.lat, place.lng], {
+        icon: markerIcon(leaflet, place.id === activeIdRef.current),
+        title: place.label
+      }).addTo(layer).on("click", () => selectPlaceRef.current(place));
+      markers.set(place.id, marker);
+    }
+    return () => {
+      markers.clear();
+      layer.remove();
+    };
+  }, [contentSignature, mapReady]);
+  useEffect(() => {
+    const leaflet = leafletRef.current;
+    if (!leaflet)
+      return;
+    for (const place of mapContentRef.current.validPlaces) {
+      markersRef.current.get(place.id)?.setIcon(markerIcon(leaflet, place.id === activeId));
+    }
+  }, [activeId, contentSignature]);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "GeoMap",
+    "data-slot": "geo-map",
+    className: cn2(paper, "flex w-full flex-col overflow-hidden rounded-md p-2", variant === "default" && "max-w-sm"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        "data-slot": "assistant-map",
+        "data-native-tiles": tileUrl === undefined || undefined,
+        ref: containerRef,
+        role: "region",
+        "aria-label": `Map of ${validPlaces.length} places`,
+        "aria-busy": !mapReady || undefined,
+        style: { height },
+        "data-theme": theme,
+        className: cn2(field, "relative overflow-hidden rounded-md"),
+        children: !mapReady ? /* @__PURE__ */ jsx("span", {
+          className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-sm",
+          children: "Loading map"
+        }) : null
+      }),
+      /* @__PURE__ */ jsx("ol", {
+        className: "mt-2 flex flex-col gap-0.5",
+        children: validPlaces.map((place) => {
+          const selected = place.id === activeId;
+          return /* @__PURE__ */ jsx("li", {
+            children: /* @__PURE__ */ jsxs(Button2, {
+              variant: "ghost",
+              align: "start",
+              type: "button",
+              "aria-current": selected || undefined,
+              onClick: () => selectPlace(place),
+              children: [
+                /* @__PURE__ */ jsxs("span", {
+                  className: "min-w-0 flex-1",
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "text-foreground/90 block text-base leading-5 break-words",
+                      children: place.label
+                    }),
+                    place.description ? /* @__PURE__ */ jsx("span", {
+                      className: "text-muted-foreground block text-sm leading-4 break-words",
+                      children: place.description
+                    }) : null
+                  ]
+                }),
+                variant === "default" ? /* @__PURE__ */ jsxs("span", {
+                  "data-slot": "geo-map-coordinates",
+                  className: cn2(mono, "text-muted-foreground shrink-0 pt-0.5 tabular-nums"),
+                  children: [
+                    place.lat.toFixed(4),
+                    ", ",
+                    place.lng.toFixed(4)
+                  ]
+                }) : null
+              ]
+            })
+          }, place.id);
+        })
+      })
+    ]
+  });
+}
+
+export { GeoMap2 };

package/dist/chunk-dtkw8m6d.js

@@ -0,0 +1,18 @@
+import {
+  usePortalContainer2
+} from "./chunk-j89xg1ak.js";
+
+// src/components/assistant-ui/hooks/useResolvedPortalContainer.ts
+import { useLayoutEffect, useState } from "react";
+function useResolvedPortalContainer() {
+  const provided = usePortalContainer2();
+  const [resolved, setResolved] = useState({ container: undefined, isReady: false });
+  useLayoutEffect(() => {
+    const container = provided && "current" in provided ? provided.current : provided;
+    const isReady = container !== null;
+    setResolved((previous) => previous.container === container && previous.isReady === isReady ? previous : { container, isReady });
+  });
+  return resolved;
+}
+
+export { useResolvedPortalContainer };

package/dist/chunk-e50068hn.js

@@ -0,0 +1,51 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+import {
+  formatMediaDuration
+} from "./chunk-64564z9p.js";
+import {
+  clamp
+} from "./chunk-v8ks0cfq.js";
+import {
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ComposerVoice.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComposerVoice2({ recording, seconds, audioLevels = [], ...props }) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ComposerVoice",
+    "data-slot": "composer-voice",
+    "data-recording": recording || undefined,
+    className: cn2("flex min-h-11 items-center gap-3 ps-3"),
+    ...props,
+    children: [
+      recording && /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: "size-1.5 animate-pulse rounded-full bg-primary bg-primary"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex h-6 items-center gap-[3px]",
+        "aria-hidden": true,
+        children: audioLevels.map((level, index) => /* @__PURE__ */ jsx("span", {
+          "data-testid": "ComposerVoice--audio-level",
+          className: cn2("w-0.5 rounded-full transition-[height,background-color] duration-150 motion-reduce:transition-none", recording ? "bg-foreground/50" : "bg-foreground/25"),
+          style: { height: recording ? 3 + clamp(level, 0, 1) * 15 : 3 }
+        }, index))
+      }),
+      recording ? /* @__PURE__ */ jsx("span", {
+        className: cn2(mono, "text-muted-foreground tabular-nums"),
+        children: formatMediaDuration(seconds)
+      }) : /* @__PURE__ */ jsx(ShimmerLabel2, {
+        role: "status",
+        children: "Transcribing"
+      })
+    ]
+  });
+}
+
+export { ComposerVoice2 };

package/dist/chunk-e59sfvpe.js

@@ -0,0 +1,78 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+
+// src/components/assistant-ui/elements/ErrorState.tsx
+import { useId } from "react";
+import { CircleAlertIcon, RefreshCwIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ErrorState2({ title, detail, retrying, onRetry, ...props }) {
+  const titleId = useId();
+  const detailId = useId();
+  if (retrying) {
+    return /* @__PURE__ */ jsxs("div", {
+      "data-testid": "ErrorState",
+      "data-slot": "error-state",
+      role: "status",
+      className: "flex w-full max-w-sm items-center gap-2 text-sm",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(RefreshCwIcon, {
+          "aria-hidden": "true",
+          className: cn2("size-4", "animate-spin motion-reduce:animate-none")
+        }),
+        /* @__PURE__ */ jsx(ShimmerLabel2, {
+          children: "Retrying"
+        })
+      ]
+    }, "retrying");
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ErrorState",
+    "data-slot": "error-state",
+    role: "alert",
+    "aria-labelledby": titleId,
+    "aria-describedby": detailId,
+    className: "flex w-full max-w-sm items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(CircleAlertIcon, {
+        "aria-hidden": "true",
+        className: cn2("size-4", "text-destructive")
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            id: titleId,
+            className: "font-medium text-destructive",
+            children: title
+          }),
+          /* @__PURE__ */ jsx("p", {
+            id: detailId,
+            className: "mt-1 text-sm leading-snug text-muted-foreground",
+            children: detail
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(Button2, {
+        variant: "destructive",
+        onClick: onRetry,
+        children: [
+          /* @__PURE__ */ jsx(RefreshCwIcon, {
+            "aria-hidden": "true",
+            "data-icon": "inline-start"
+          }),
+          "Retry"
+        ]
+      })
+    ]
+  }, "error");
+}
+
+export { ErrorState2 };

package/dist/{chunk-rjjwytbx.js → chunk-e6hk39ev.js}

@@ -1,9 +1,11 @@
+// src/hooks/useDensity.ts
+import { useContext } from "react";
+
 // src/density/DensityContext.ts
 import { createContext } from "react";
 var DensityContext = createContext("comfortable");
 
 // src/hooks/useDensity.ts
-import { useContext } from "react";
 function useDensity(density) {
   const inheritedDensity = useContext(DensityContext);
   return density ?? inheritedDensity;