@vllnt/ui 0.2.1-canary.25c4600 → 0.2.1-canary.2994ef2

package/dist/components/auto-reload/auto-reload.js

@@ -39,7 +39,7 @@ function getCurrencyFormatter(locale, currency) {
   const key = `${locale}|${currency}`;
   let formatter = CURRENCY_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, {
+    formatter = Intl.NumberFormat(locale, {
       currency,
       style: "currency"
     });

package/dist/components/carousel/carousel.js

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
@@ -43,6 +44,10 @@ function useCarouselLogic({
     setCanScrollPrevious(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
+  const onSelectReference = useRef(onSelect);
+  useEffect(() => {
+    onSelectReference.current = onSelect;
+  }, [onSelect]);
   const scrollPrevious = useCallback(() => {
     api?.scrollPrev();
   }, [api]);
@@ -71,17 +76,20 @@ function useCarouselLogic({
     if (!api) {
       return;
     }
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const notifySelection = (selectedApi) => {
+      onSelectReference.current(selectedApi);
+    };
+    api.on("reInit", notifySelection);
+    api.on("select", notifySelection);
     const rafId = requestAnimationFrame(() => {
-      onSelect(api);
+      notifySelection(api);
     });
     return () => {
-      api?.off("select", onSelect);
-      api?.off("reInit", onSelect);
+      api?.off("select", notifySelection);
+      api?.off("reInit", notifySelection);
       cancelAnimationFrame(rafId);
     };
-  }, [api, onSelect]);
+  }, [api]);
   return {
     api,
     canScrollNext,

package/dist/components/checklist/checklist.js

@@ -3,6 +3,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
 const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
+const CHECKLIST_STORAGE_VERSION = 1;
+function stringItemsFromUnknown(value) {
+  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+}
+function parseChecklistStorageValue(saved) {
+  try {
+    const parsed = JSON.parse(saved);
+    if (Array.isArray(parsed)) {
+      return stringItemsFromUnknown(parsed);
+    }
+    if (typeof parsed === "object" && parsed !== null && "version" in parsed && "checked" in parsed && parsed.version === CHECKLIST_STORAGE_VERSION) {
+      return stringItemsFromUnknown(parsed.checked);
+    }
+  } catch {
+    return [];
+  }
+  return [];
+}
+function createChecklistStorageValue(ids) {
+  const payload = {
+    checked: [...ids],
+    version: CHECKLIST_STORAGE_VERSION
+  };
+  return JSON.stringify(payload);
+}
 function ChecklistItemRow({
   isChecked,
   item,
@@ -117,10 +142,7 @@ function Checklist({
     if (typeof window !== "undefined" && persistKey) {
       const saved = localStorage.getItem(`checklist:${persistKey}`);
       if (saved) {
-        try {
-          return new Set(JSON.parse(saved));
-        } catch {
-        }
+        return new Set(parseChecklistStorageValue(saved));
       }
     }
     return /* @__PURE__ */ new Set();
@@ -134,7 +156,7 @@ function Checklist({
       try {
         localStorage.setItem(
           `checklist:${persistKey}`,
-          JSON.stringify([...newChecked])
+          createChecklistStorageValue(newChecked)
         );
         window.dispatchEvent(
           new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
@@ -187,5 +209,8 @@ function Checklist({
 }
 export {
   CHECKLIST_PROGRESS_EVENT,
-  Checklist
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };

package/dist/components/checklist/index.js

@@ -1,8 +1,14 @@
 import {
   Checklist,
-  CHECKLIST_PROGRESS_EVENT
+  CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 } from "./checklist";
 export {
   CHECKLIST_PROGRESS_EVENT,
-  Checklist
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };

package/dist/components/completion-dialog/completion-dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
 function DialogContent({
@@ -98,8 +98,11 @@ function CompletionDialogImpl({
   onConfirm,
   title
 }) {
-  const handleKeyDown = useCallback(
-    (event) => {
+  const keyDownHandlerRef = useRef(() => {
+    return;
+  });
+  useEffect(() => {
+    keyDownHandlerRef.current = (event) => {
       if (!isOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -118,16 +121,18 @@ function CompletionDialogImpl({
         event.stopPropagation();
         onCancel();
       }
-    },
-    [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut]
-  );
+    };
+  }, [cancelShortcut, confirmShortcut, isOpen, onCancel, onClose, onConfirm]);
   useEffect(() => {
     if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown, true);
+    const onDocumentKeyDown = (event) => {
+      keyDownHandlerRef.current(event);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("keydown", onDocumentKeyDown, true);
     };
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/components/content-intro/content-intro.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
 const DEFAULT_LABELS = {
@@ -25,21 +25,22 @@ function ContentIntroImpl({
 }) {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
-  const handleKeyDown = useCallback(
-    (event) => {
+  const onStartRef = useRef(onStart);
+  useEffect(() => {
+    onStartRef.current = onStart;
+  }, [onStart]);
+  useEffect(() => {
+    const onDocumentKeyDown = (event) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        onStart();
+        onStartRef.current();
       }
-    },
-    [onStart]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
       /* @__PURE__ */ jsxs("section", { className: "py-6", children: [

package/dist/components/conversation-thread/conversation-thread.js

@@ -319,18 +319,18 @@ const ConversationLoading = forwardRef(({ className }, reference) => {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.3s" }
           }
         ),
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.15s" }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "size-2 animate-bounce rounded-full bg-muted-foreground" })
+        /* @__PURE__ */ jsx("span", { className: "size-2 animate-pulse rounded-full bg-muted-foreground" })
       ]
     }
   );

package/dist/components/filter-bar/filter-bar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useTransition } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge";
 function SearchInput({
@@ -160,15 +160,15 @@ function FilterBarImpl({
   searchQuery,
   tags
 }) {
-  const [isPending, setIsPending] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const handleDifficultyChange = useCallback(
     (difficulty) => {
-      setIsPending(true);
-      onFiltersChange({ difficulty });
-      setIsPending(false);
+      startTransition(() => {
+        onFiltersChange({ difficulty });
+      });
     },
-    [onFiltersChange]
+    [onFiltersChange, startTransition]
   );
   const handleSearchChange = useCallback(
     (search) => {

package/dist/components/gantt-chart/gantt-chart.js

@@ -56,7 +56,7 @@ function getTickDateTimeFormatter(locale, scale) {
   let formatter = TICK_FORMATTER_CACHE.get(key);
   if (!formatter) {
     const options = scale === "month" ? { month: "short", year: "numeric" } : { day: "2-digit", month: "short" };
-    formatter = new Intl.DateTimeFormat(locale, options);
+    formatter = Intl.DateTimeFormat(locale, options);
     TICK_FORMATTER_CACHE.set(key, formatter);
   }
   return formatter;
@@ -93,13 +93,14 @@ function buildTicks(input) {
   const formatter = buildTickFormatter(scale, locale);
   const stepDays = getTickStep(scale);
   const tickCount = Math.floor(totalDays / stepDays);
-  return Array.from({ length: tickCount + 1 }).map((_, index) => {
+  return Array.from({ length: tickCount + 1 }).reduce((ticks, _, index) => {
     const day = index * stepDays;
-    return {
-      date: new Date(start.getTime() + day * MS_PER_DAY),
-      offset: day
-    };
-  }).filter((tick) => tick.date.getTime() <= end.getTime()).map((tick) => ({ label: formatter(tick.date), offset: tick.offset }));
+    const date = new Date(start.getTime() + day * MS_PER_DAY);
+    if (date.getTime() <= end.getTime()) {
+      ticks.push({ label: formatter(date), offset: day });
+    }
+    return ticks;
+  }, []);
 }
 function useChartGeometry(options) {
   const { endDate, locale, scale, startDate } = options;

package/dist/components/globe-3d/globe-3d.js

@@ -161,9 +161,12 @@ const GlobeArc = forwardRef(
 GlobeArc.displayName = "GlobeArc";
 function buildLine(arguments_) {
   const { points, rotationLat, rotationLng } = arguments_;
-  return points.map((coord) => project(coord, rotationLng, rotationLat)).reduce(
-    (state, projected) => {
-      if (!projected.visible) return { path: state.path, pen: "up" };
+  return points.reduce(
+    (state, coord) => {
+      const projected = project(coord, rotationLng, rotationLat);
+      if (!projected.visible) {
+        return { path: state.path, pen: "up" };
+      }
       const head = state.pen === "up" ? "M" : "L";
       const separator = state.path.length > 0 ? " " : "";
       return {
@@ -185,7 +188,16 @@ function Graticule({ rotationLat, rotationLng }) {
   const meridians = range(-150, 180, 30).map(
     (lng) => range(-85, 85, 5).map((lat) => ({ lat, lng }))
   );
-  const lines = [...parallels, ...meridians].map((points) => buildLine({ points, rotationLat, rotationLng })).filter((path) => path.length > 0);
+  const lines = [...parallels, ...meridians].reduce(
+    (paths, points) => {
+      const path = buildLine({ points, rotationLat, rotationLng });
+      if (path.length > 0) {
+        paths.push(path);
+      }
+      return paths;
+    },
+    []
+  );
   return /* @__PURE__ */ jsx(
     "g",
     {

package/dist/components/interactive-timeline/interactive-timeline.js

@@ -607,9 +607,12 @@ function useTimelineContextValue(arguments_) {
 function useTimelineFilter(categories, events) {
   const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
   const visibleCategories = useMemo(
-    () => new Set(
-      categories.filter((category) => !hidden.has(category.id)).map((category) => category.id)
-    ),
+    () => categories.reduce((visible, category) => {
+      if (!hidden.has(category.id)) {
+        visible.add(category.id);
+      }
+      return visible;
+    }, /* @__PURE__ */ new Set()),
     [categories, hidden]
   );
   const toggleCategory = useCallback((id) => {

package/dist/components/live-feed/live-feed.js

@@ -131,7 +131,7 @@ const LiveFeed = React.forwardRef(
       [events, maxItems]
     );
     return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 gap-y-0 pb-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
           description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null

package/dist/components/map-2d/map-2d.js

@@ -53,7 +53,7 @@ function useMapState(arguments_) {
   }, [center]);
   const [pan, setPan] = useState(initialPan);
   const [zoom, setZoom] = useState(
-    clamp(initialZoom, MIN_ZOOM, MAX_ZOOM)
+    () => clamp(initialZoom, MIN_ZOOM, MAX_ZOOM)
   );
   const zoomIn = useCallback(() => {
     setZoom((current) => clamp(current * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));

package/dist/components/map-timeline/map-timeline.js

@@ -301,7 +301,7 @@ function useTimelineCtx(arguments_) {
 function useTimelineState(arguments_) {
   const { endYear, initialYear, onYearChange, startYear } = arguments_;
   const [year, setYear] = useState(
-    clamp(initialYear ?? startYear, startYear, endYear)
+    () => clamp(initialYear ?? startYear, startYear, endYear)
   );
   const [isPlaying, setIsPlaying] = useState(false);
   const updateYear = useCallback(

package/dist/components/mdx-content/mdx-content.js

@@ -16,7 +16,7 @@ const MDXComponents = {
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }
@@ -89,8 +89,8 @@ const proseClasses = [
   "prose-strong:font-semibold prose-em:italic",
   "prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80",
   "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono",
-  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
-  "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
+  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
+  "prose-blockquote:border-l prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
   "prose-hr:my-8 prose-hr:border-border",
   "prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border",
   "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium",

package/dist/components/number-ticker/number-ticker.js

@@ -7,7 +7,7 @@ function getNumberTickerFormatter(locale, formatOptions) {
   const key = `${locale ?? ""}|${formatOptions ? JSON.stringify(formatOptions) : ""}`;
   let formatter = NUMBER_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, formatOptions);
+    formatter = Intl.NumberFormat(locale, formatOptions);
     NUMBER_FORMATTER_CACHE.set(key, formatter);
   }
   return formatter;

package/dist/components/progress-tracker/progress-tracker.js

@@ -10,7 +10,10 @@ import {
   CardHeader,
   CardTitle
 } from "../card";
-import { CHECKLIST_PROGRESS_EVENT } from "../checklist";
+import {
+  CHECKLIST_PROGRESS_EVENT,
+  parseChecklistStorageValue
+} from "../checklist";
 import { ProgressBar } from "../progress-bar";
 const ProgressTrackerContext = React.createContext(null);
 function clampPercentage(value) {
@@ -41,15 +44,13 @@ function readPersistedChecklistItems(persistKey) {
   try {
     const saved = localStorage.getItem(`checklist:${persistKey}`);
     if (!saved) return [];
-    const parsed = JSON.parse(saved);
-    return Array.isArray(parsed) ? parsed.filter((item) => typeof item === "string") : [];
+    return parseChecklistStorageValue(saved);
   } catch {
     return [];
   }
 }
 function areStringArraysEqual(left, right) {
-  if (left.length !== right.length) return false;
-  return left.every((value, index) => value === right[index]);
+  return left.length === right.length && left.every((value, index) => value === right[index]);
 }
 function getChecklistPersistKey(event) {
   if (!(event instanceof CustomEvent)) return null;
@@ -162,7 +163,12 @@ function ProgressTrackerOverview({
 }) {
   const { modules, overallProgress, streak, title } = useProgressTrackerContext();
   const trackedPersistKeys = React.useMemo(
-    () => modules.map((module) => module.persistKey).filter(Boolean),
+    () => modules.reduce((keys, module) => {
+      if (module.persistKey) {
+        keys.push(module.persistKey);
+      }
+      return keys;
+    }, []),
     [modules]
   );
   const [, forceChecklistRefresh] = React.useState(0);

package/dist/components/sidebar/sidebar.js

@@ -37,7 +37,7 @@ function useScrollFade(containerReference) {
       setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
     };
     checkScroll();
-    container.addEventListener("scroll", checkScroll);
+    container.addEventListener("scroll", checkScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", checkScroll);
     };

package/dist/components/social-fab/social-fab.js

@@ -7,7 +7,7 @@ function ShareMenu({
   onPlatformSelect,
   platforms
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: platforms.map((p) => {
     const handleSelectSharePlatform = () => {
       onPlatformSelect(p.key);
     };
@@ -47,7 +47,7 @@ function ActionPanel({
   const handleShareClick = shareAction?.onClick;
   const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
   const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: [
     shareAction ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -77,9 +77,9 @@ function MainFabButton({
       "aria-label": isExpanded ? labels.close : labels.share,
       className: cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500"
       ),
       onClick: handleToggleSharePanel,
       type: "button",

package/dist/components/spinner/spinner.js

@@ -14,7 +14,7 @@ function Spinner({ className, size = "md", ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" })
     }
   );
 }

package/dist/components/stat-card/stat-card.js

@@ -74,7 +74,7 @@ const StatCard = React.forwardRef(
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
-        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 space-y-0 pb-3", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 gap-y-0 pb-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-[0.14em]", children: label }),
             /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: value })

package/dist/components/status-board/status-board.js

@@ -71,10 +71,16 @@ function getSummary(items) {
       warning: 0
     }
   );
-  return STATUS_ORDER.map((status) => ({
-    count: counts[status],
-    status
-  })).filter((entry) => entry.count > 0);
+  return STATUS_ORDER.reduce(
+    (summary, status) => {
+      const count = counts[status];
+      if (count > 0) {
+        summary.push({ count, status });
+      }
+      return summary;
+    },
+    []
+  );
 }
 function StatusBoardSummary({ items }) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSummary(items).map(({ count, status }) => {

package/dist/components/tags-input/tags-input.js

@@ -7,9 +7,17 @@ function normalizeTag(tag) {
   return tag.trim();
 }
 function getNormalizedTags(tags) {
-  return tags.map(normalizeTag).filter(
-    (tag, index, values) => tag.length > 0 && values.indexOf(tag) === index
-  );
+  return tags.reduce(
+    (state, tag) => {
+      const normalizedTag = normalizeTag(tag);
+      if (normalizedTag.length > 0 && !state.seen.has(normalizedTag)) {
+        state.seen.add(normalizedTag);
+        state.tags.push(normalizedTag);
+      }
+      return state;
+    },
+    { seen: /* @__PURE__ */ new Set(), tags: [] }
+  ).tags;
 }
 function shouldAddTagFromKey(key) {
   return key === "Enter" || key === ",";

package/dist/components/terminal/terminal.js

@@ -3,13 +3,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
 import { Button } from "../button";
+function getCommandContents(lines) {
+  return lines.reduce((commands, line) => {
+    if (line.type === "command") {
+      commands.push(line.content);
+    }
+    return commands;
+  }, []);
+}
 function Terminal({
   copyable = true,
   lines,
   title = "Terminal"
 }) {
   const [copied, setCopied] = useState(false);
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);
@@ -75,7 +83,7 @@ function SimpleTerminal({
     }
     return { content: line, type: "output" };
   });
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);

package/dist/components/theme-toggle/theme-toggle.js

@@ -20,7 +20,7 @@ function ThemeButton({
     Button,
     {
       "aria-label": ariaLabel,
-      className: "bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
+      className: "bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
       size: "icon",
       variant: "outline",
       ...props,
@@ -120,7 +120,7 @@ function ThemeToggle({ dict }) {
       DropdownMenuContent,
       {
         align: "end",
-        className: "bg-background border border-gray-300 dark:border-gray-600",
+        className: "bg-background border border-zinc-300 dark:border-zinc-600",
         onMouseEnter: () => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();

package/dist/components/thinking-block/thinking-block.js

@@ -33,7 +33,7 @@ function ThinkingBlock({
           isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Thinking",
-            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null
+            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "\u2026" }) : null
           ] })
         ]
       }
@@ -41,7 +41,7 @@ function ThinkingBlock({
     isExpanded ? /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto",
+        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto",
         id: contentId,
         children: [
           thinking,

package/dist/components/tldr-section/tldr-section.js

@@ -3,20 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 function TLDRSection({ children, label }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [showSkeleton, setShowSkeleton] = useState(false);
+  const hasBeenOpenedRef = useRef(false);
   const timerReference = useRef(null);
   useEffect(() => {
-    if (isExpanded && !hasBeenOpened) {
+    if (isExpanded && !hasBeenOpenedRef.current) {
       if (timerReference.current) {
         clearTimeout(timerReference.current);
       }
       const rafId = requestAnimationFrame(() => {
-        setIsLoading(true);
-        setHasBeenOpened(true);
+        setShowSkeleton(true);
+        hasBeenOpenedRef.current = true;
       });
       timerReference.current = setTimeout(() => {
-        setIsLoading(false);
+        setShowSkeleton(false);
         timerReference.current = null;
       }, 800);
       return () => {
@@ -25,6 +25,7 @@ function TLDRSection({ children, label }) {
           clearTimeout(timerReference.current);
           timerReference.current = null;
         }
+        setShowSkeleton(false);
       };
     }
     return () => {
@@ -32,6 +33,7 @@ function TLDRSection({ children, label }) {
         clearTimeout(timerReference.current);
         timerReference.current = null;
       }
+      setShowSkeleton(false);
     };
   }, [isExpanded]);
   return /* @__PURE__ */ jsxs("div", { className: "my-8 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [
@@ -88,7 +90,7 @@ function TLDRSection({ children, label }) {
         ]
       }
     ),
-    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: showSkeleton ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-5/6", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-4/5", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),

package/dist/components/transaction-list/transaction-list.js

@@ -12,7 +12,7 @@ function getCurrencyFormatter(locale, currency) {
   const key = `${locale}|${currency}`;
   let formatter = CURRENCY_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, {
+    formatter = Intl.NumberFormat(locale, {
       currency,
       style: "currency"
     });
@@ -24,7 +24,7 @@ const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
 function getTransactionDateFormatter(locale) {
   let formatter = DATE_FORMATTER_CACHE.get(locale);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       day: "numeric",
       month: "short",
       year: "numeric"

package/dist/components/tutorial-complete/tutorial-complete.js

@@ -119,7 +119,7 @@ function TutorialCompleteImpl({
     /* @__PURE__ */ jsx("div", { className: "text-center pt-8", children: /* @__PURE__ */ jsx(
       LinkComponent,
       {
-        className: "inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors",
+        className: "inline-flex items-center gap-x-2 text-muted-foreground hover:text-foreground transition-colors",
         href: backHref,
         children: /* @__PURE__ */ jsxs("span", { children: [
           "\u2190 ",

package/dist/components/tutorial-intro-content/tutorial-intro-content.js

@@ -21,7 +21,7 @@ const serverMarkdownComponents = {
   }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }

package/dist/components/tutorial-mdx/tutorial-mdx.js

@@ -95,7 +95,7 @@ const markdownComponents = {
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }

package/dist/components/world-clock-bar/world-clock-bar.js

@@ -34,7 +34,7 @@ function getTimeFormatter(locale, timeZone) {
   const key = `${locale}|${timeZone}`;
   let formatter = TIME_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       hour: "numeric",
       minute: "2-digit",
       timeZone,
@@ -49,7 +49,7 @@ function getDateFormatter(locale, timeZone) {
   const key = `${locale}|${timeZone}`;
   let formatter = DATE_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale, {
+    formatter = Intl.DateTimeFormat(locale, {
       day: "numeric",
       month: "short",
       timeZone,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.2.1-canary.25c4600",
+  "version": "0.2.1-canary.2994ef2",
   "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",