@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

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

@@ -0,0 +1,338 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const ChronoContext = createContext(null);
+function useChronoContext() {
+  const ctx = useContext(ChronoContext);
+  if (!ctx) {
+    throw new Error("ChronoEvent used outside ChronologicalTimeline.");
+  }
+  return ctx;
+}
+function ImageMedia({ media }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: media.alt,
+        className: "aspect-video w-full object-cover",
+        loading: "lazy",
+        src: media.src
+      }
+    ),
+    media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: [
+      media.caption ? /* @__PURE__ */ jsx("span", { className: "block", children: media.caption }) : null,
+      media.credit ? /* @__PURE__ */ jsx("span", { className: "block italic", children: media.credit }) : null
+    ] }) : null
+  ] });
+}
+function VideoMedia({ media }) {
+  const iframeTitle = media.title || "Embedded timeline video";
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        className: "h-full w-full",
+        src: media.src,
+        title: iframeTitle
+      }
+    ) }),
+    media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: [
+      media.caption ? /* @__PURE__ */ jsx("span", { className: "block", children: media.caption }) : null,
+      media.credit ? /* @__PURE__ */ jsx("span", { className: "block italic", children: media.credit }) : null
+    ] }) : null
+  ] });
+}
+function AudioMedia({ media }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted p-3", children: [
+    /* @__PURE__ */ jsx(
+      "audio",
+      {
+        "aria-label": media.alt,
+        className: "w-full",
+        controls: true,
+        preload: "metadata",
+        src: media.src,
+        children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+      }
+    ),
+    media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "pt-2 text-xs text-muted-foreground", children: [
+      media.caption ? /* @__PURE__ */ jsx("span", { className: "block", children: media.caption }) : null,
+      media.credit ? /* @__PURE__ */ jsx("span", { className: "block italic", children: media.credit }) : null
+    ] }) : null
+  ] });
+}
+function Media({ media }) {
+  if (media.type === "image") return /* @__PURE__ */ jsx(ImageMedia, { media });
+  if (media.type === "video") return /* @__PURE__ */ jsx(VideoMedia, { media });
+  return /* @__PURE__ */ jsx(AudioMedia, { media });
+}
+function DateColumn({ date }) {
+  return /* @__PURE__ */ jsx("div", { className: "hidden items-start justify-end pr-4 text-right text-xs font-semibold uppercase tracking-wide text-muted-foreground md:flex md:group-[[data-side='right']]:order-3 md:group-[[data-side='right']]:justify-start md:group-[[data-side='right']]:pl-4 md:group-[[data-side='right']]:text-left", children: /* @__PURE__ */ jsx("time", { className: "pt-2", children: date }) });
+}
+function RailColumn({ featured }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative hidden md:flex md:w-6 md:items-start md:justify-center",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative z-10 mt-3 block size-3 rounded-full border-2 border-background bg-primary",
+              featured ? "size-4" : ""
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function EventCard({
+  children,
+  date,
+  eventId,
+  featured,
+  media,
+  subtitle,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border bg-background p-5 shadow-sm md:group-[[data-side='right']]:order-1",
+        featured ? "ring-1 ring-primary/30" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "mb-3 flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("time", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground md:hidden", children: date }),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn(
+                "font-semibold text-foreground",
+                featured ? "text-xl" : "text-lg"
+              ),
+              id: `${eventId}-title`,
+              children: title
+            }
+          ),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
+        ] }),
+        media ? /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(Media, { media }) }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground", children }) : null
+      ]
+    }
+  );
+}
+const ChronoEvent = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      children,
+      className,
+      date,
+      featured = false,
+      id,
+      media,
+      subtitle,
+      title,
+      ...rest
+    } = props;
+    const generatedId = useId();
+    const eventId = id ?? generatedId;
+    const ref = useRef(null);
+    const { registerEvent, setActiveId } = useChronoContext();
+    const refCallback = useCallback(
+      (node) => {
+        ref.current = node;
+        registerEvent(eventId, node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [eventId, forwardedRef, registerEvent]
+    );
+    const handleFocus = useCallback(() => {
+      setActiveId(eventId);
+    }, [eventId, setActiveId]);
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-labelledby": `${eventId}-title`,
+        className: cn(
+          "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
+          className
+        ),
+        "data-event-id": eventId,
+        "data-featured": featured ? "true" : void 0,
+        id: eventId,
+        onFocus: handleFocus,
+        ref: refCallback,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(DateColumn, { date }),
+          /* @__PURE__ */ jsx(RailColumn, { featured }),
+          /* @__PURE__ */ jsx(
+            EventCard,
+            {
+              date,
+              eventId,
+              featured,
+              media,
+              subtitle,
+              title,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChronoEvent.displayName = "ChronoEvent";
+function ProgressStrip({
+  activeId,
+  ids,
+  label
+}) {
+  if (ids.length === 0) return null;
+  const activeIndex = activeId ? ids.indexOf(activeId) : -1;
+  const ratio = activeIndex < 0 ? 0 : (activeIndex + 1) / ids.length;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(ratio * 100),
+      className: "sticky top-0 z-10 h-1 w-full bg-border",
+      role: "progressbar",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block h-full bg-primary transition-[width] duration-200",
+          style: { width: `${(ratio * 100).toString()}%` }
+        }
+      )
+    }
+  );
+}
+function useChronoActiveTracker() {
+  const eventsRef = useRef(/* @__PURE__ */ new Map());
+  const [ids, setIds] = useState([]);
+  const [activeId, setActiveId] = useState();
+  const registerEvent = useCallback((id, node) => {
+    const map = eventsRef.current;
+    if (node) map.set(id, node);
+    else map.delete(id);
+    setIds([...map.keys()]);
+  }, []);
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        const first = visible[0];
+        if (first) {
+          const target = first.target;
+          if (target instanceof HTMLElement) {
+            const eventId = target.dataset.eventId;
+            if (eventId) setActiveId(eventId);
+          }
+        }
+      },
+      { rootMargin: "-30% 0px -50% 0px", threshold: 0.1 }
+    );
+    [...eventsRef.current.values()].forEach((node) => {
+      observer.observe(node);
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [ids]);
+  return { activeId, ids, registerEvent, setActiveId };
+}
+function EventList({ activeId, children }) {
+  if (!Array.isArray(children)) {
+    return /* @__PURE__ */ jsx("ol", { className: "relative flex flex-col px-4 pb-6 md:px-6", children });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "relative flex flex-col px-4 pb-6 md:px-6", children: children.map((child, index) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: "block list-none",
+      "data-active": isReactElementWithEventId(child, activeId) ? "true" : void 0,
+      "data-side": index % 2 === 0 ? "left" : "right",
+      children: child
+    },
+    getChildKey(child, index)
+  )) });
+}
+const ChronologicalTimeline = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    progressLabel = "Timeline progress",
+    title,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const { activeId, ids, registerEvent, setActiveId } = useChronoActiveTracker();
+  const ctx = useMemo(
+    () => ({ registerEvent, setActiveId, titleId }),
+    [registerEvent, setActiveId, titleId]
+  );
+  return /* @__PURE__ */ jsx(ChronoContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": title ? titleId : void 0,
+      className: cn(
+        "relative mx-auto flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ProgressStrip, { activeId, ids, label: progressLabel }),
+        title ? /* @__PURE__ */ jsx("header", { className: "p-6", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", id: titleId, children: title }) }) : null,
+        /* @__PURE__ */ jsx(EventList, { activeId, children })
+      ]
+    }
+  ) });
+});
+ChronologicalTimeline.displayName = "ChronologicalTimeline";
+function isReactElementWithEventId(child, activeId) {
+  if (!activeId) return false;
+  if (typeof child !== "object" || child === null) return false;
+  if (!("props" in child)) return false;
+  const props = child.props;
+  if (typeof props !== "object" || props === null) return false;
+  const id = props.id;
+  return typeof id === "string" && id === activeId;
+}
+function getChildKey(child, fallback) {
+  if (typeof child !== "object" || child === null) return fallback;
+  if (!("key" in child)) return fallback;
+  const key = child.key;
+  if (typeof key === "string" || typeof key === "number") return key;
+  return fallback;
+}
+export {
+  ChronoEvent,
+  ChronologicalTimeline
+};

package/dist/components/chronological-timeline/index.js

@@ -0,0 +1,8 @@
+import {
+  ChronoEvent,
+  ChronologicalTimeline
+} from "./chronological-timeline";
+export {
+  ChronoEvent,
+  ChronologicalTimeline
+};

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

@@ -0,0 +1,258 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { Globe } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+const CIVILIZATION_COLOR_VARIANTS = {
+  amber: {
+    gradient: "from-amber-500/20 to-amber-700/40",
+    ring: "ring-amber-500/30"
+  },
+  blue: {
+    gradient: "from-blue-500/20 to-blue-700/40",
+    ring: "ring-blue-500/30"
+  },
+  emerald: {
+    gradient: "from-emerald-500/20 to-emerald-700/40",
+    ring: "ring-emerald-500/30"
+  },
+  neutral: {
+    gradient: "from-muted to-muted-foreground/10",
+    ring: "ring-border"
+  },
+  purple: {
+    gradient: "from-purple-500/20 to-purple-700/40",
+    ring: "ring-purple-500/30"
+  },
+  red: {
+    gradient: "from-red-500/20 to-red-700/40",
+    ring: "ring-red-500/30"
+  }
+};
+const DEFAULT_LABELS = {
+  achievements: "Achievements",
+  capital: "Capital",
+  duration: "Duration",
+  leaders: "Notable leaders",
+  peakPopulation: "Peak population",
+  timeline: "Era timeline"
+};
+function formatEraYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function formatEra(era) {
+  const start = formatEraYear(era.start);
+  if (era.end === void 0) return `${start} \u2013 present`;
+  return `${start} \u2013 ${formatEraYear(era.end)}`;
+}
+function getDuration(era) {
+  if (!era) return void 0;
+  const end = era.end ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const years = end - era.start;
+  if (years <= 0) return void 0;
+  return `${years.toString()} years`;
+}
+function CivilizationHero({ color, image, imageAlt }) {
+  const palette = CIVILIZATION_COLOR_VARIANTS[color];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative h-32 w-full overflow-hidden rounded-t-2xl bg-gradient-to-br",
+        palette.gradient
+      ),
+      children: image ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: imageAlt ?? "",
+          className: "h-full w-full object-cover mix-blend-multiply",
+          src: image
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/50", children: /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "size-12" }) })
+    }
+  );
+}
+function EraTimeline({ era, label }) {
+  const eraLabel = formatEra(era);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${label}: ${eraLabel}`,
+      className: "flex flex-col gap-1",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: eraLabel }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: "block h-full w-2/3 rounded-full bg-primary" }) })
+      ]
+    }
+  );
+}
+function CivilizationStats({
+  capital,
+  capitalCaption,
+  durationCaption,
+  durationValue,
+  peakCaption,
+  peakPopulation
+}) {
+  const items = [];
+  if (capital) items.push({ caption: capitalCaption, value: capital });
+  if (peakPopulation) {
+    items.push({ caption: peakCaption, value: peakPopulation });
+  }
+  if (durationValue) {
+    items.push({ caption: durationCaption, value: durationValue });
+  }
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-x-3 gap-y-2 text-sm", children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: item.caption }),
+    /* @__PURE__ */ jsx("dd", { className: "font-medium text-foreground", children: item.value })
+  ] }, item.caption)) });
+}
+function CivilizationListBlock({
+  heading,
+  items,
+  variant
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: heading }),
+    variant === "badge" ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item }, `${heading}-${index.toString()}`)) }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm text-foreground", children: items.map((item, index) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: "leading-tight",
+        children: item
+      },
+      `${heading}-${index.toString()}`
+    )) })
+  ] });
+}
+function CivilizationBody({
+  achievements,
+  actionHref,
+  capital,
+  era,
+  labels,
+  leaders,
+  name,
+  peakPopulation,
+  region
+}) {
+  const durationValue = getDuration(era);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-5", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold leading-tight tracking-tight", children: name }),
+      region ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: region }) : null
+    ] }),
+    era ? /* @__PURE__ */ jsx(EraTimeline, { era, label: labels.timeline }) : null,
+    /* @__PURE__ */ jsx(
+      CivilizationStats,
+      {
+        capital,
+        capitalCaption: labels.capital,
+        durationCaption: labels.duration,
+        durationValue,
+        peakCaption: labels.peakPopulation,
+        peakPopulation
+      }
+    ),
+    achievements && achievements.length > 0 ? /* @__PURE__ */ jsx(
+      CivilizationListBlock,
+      {
+        heading: labels.achievements,
+        items: achievements,
+        variant: "badge"
+      }
+    ) : null,
+    leaders && leaders.length > 0 ? /* @__PURE__ */ jsx(
+      CivilizationListBlock,
+      {
+        heading: labels.leaders,
+        items: leaders,
+        variant: "list"
+      }
+    ) : null,
+    actionHref ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "text-sm font-medium text-primary underline-offset-4 hover:underline",
+        href: actionHref,
+        children: "Explore \u2192"
+      }
+    ) : null
+  ] });
+}
+const CivilizationCard = forwardRef(
+  (props, ref) => {
+    const {
+      achievements,
+      actionHref,
+      capital,
+      className,
+      color = "neutral",
+      era,
+      image,
+      labels,
+      leaders,
+      name,
+      peakPopulation,
+      region,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const palette = CIVILIZATION_COLOR_VARIANTS[color];
+    const altName = typeof name === "string" ? name : void 0;
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
+          palette.ring,
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(CivilizationHero, { color, image, imageAlt: altName }),
+          /* @__PURE__ */ jsx(
+            CivilizationBody,
+            {
+              achievements,
+              actionHref,
+              capital,
+              era,
+              labels: resolvedLabels,
+              leaders,
+              name,
+              peakPopulation,
+              region
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CivilizationCard.displayName = "CivilizationCard";
+const CivilizationComparison = forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+CivilizationComparison.displayName = "CivilizationComparison";
+export {
+  CivilizationCard,
+  CivilizationComparison
+};

package/dist/components/civilization-card/index.js

@@ -0,0 +1,8 @@
+import {
+  CivilizationCard,
+  CivilizationComparison
+} from "./civilization-card";
+export {
+  CivilizationCard,
+  CivilizationComparison
+};

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

@@ -107,11 +107,11 @@ function CodeBlock({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  className: "h-8 w-8",
+                  className: "size-8",
                   onClick: handleCopy,
                   size: "icon",
                   variant: "ghost",
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
                 }
               )
             ] })

package/dist/components/code-playground/code-playground.js

@@ -11,11 +11,12 @@ function CodeLine({ highlightLines, line, lineNumber }) {
     /* @__PURE__ */ jsx("span", { children: line })
   ] });
 }
+const EMPTY_HIGHLIGHT_LINES = [];
 function CodePlayground({
   children,
   description,
   filename,
-  highlightLines = [],
+  highlightLines = EMPTY_HIGHLIGHT_LINES,
   language = "typescript",
   showLineNumbers = false,
   title
@@ -33,7 +34,7 @@ function CodePlayground({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
@@ -41,17 +42,17 @@ function CodePlayground({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         filename ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(FileCode, { className: "size-3" }),
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: filename })
         ] }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
-            className: "h-8 w-8",
+            className: "size-8",
             onClick: handleCopy,
             size: "icon",
             variant: "ghost",
-            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
           }
         )
       ] })
@@ -63,7 +64,7 @@ function CodePlayground({
         line,
         lineNumber: index + 1
       },
-      index
+      `${line}-${index + 1}`
     )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
   ] });
@@ -74,7 +75,7 @@ function FileTree({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(FileCode, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(FileCode, { className: "size-4" }),
       title
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground", children })