@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/primary-source-viewer/primary-source-viewer.js

@@ -0,0 +1,439 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 8;
+const ZOOM_STEP = 1.25;
+const ROTATE_STEP = 90;
+const ANNOTATION_PALETTE = {
+  amber: {
+    border: "border-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    fill: "bg-amber-500/15"
+  },
+  blue: {
+    border: "border-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    fill: "bg-blue-500/15"
+  },
+  emerald: {
+    border: "border-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    fill: "bg-emerald-500/15"
+  },
+  purple: {
+    border: "border-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    fill: "bg-purple-500/15"
+  },
+  red: {
+    border: "border-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300",
+    fill: "bg-red-500/15"
+  },
+  rose: {
+    border: "border-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+    fill: "bg-rose-500/15"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Primary source viewer",
+  rotate: "Rotate",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out"
+};
+const ViewerContext = createContext(null);
+function useViewerContext() {
+  const ctx = useContext(ViewerContext);
+  if (!ctx) {
+    throw new Error("PrimarySourceViewer subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function useViewerState(resolvedLabels) {
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const zoomIn = useCallback(() => {
+    setZoom((current) => clamp(current * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, []);
+  const zoomOut = useCallback(() => {
+    setZoom((current) => clamp(current / ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, []);
+  const rotate = useCallback(() => {
+    setRotation((current) => (current + ROTATE_STEP) % 360);
+  }, []);
+  return useMemo(
+    () => ({
+      labels: resolvedLabels,
+      rotate,
+      rotation,
+      zoom,
+      zoomIn,
+      zoomOut
+    }),
+    [resolvedLabels, rotate, rotation, zoom, zoomIn, zoomOut]
+  );
+}
+const PrimarySourceToolbar = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 px-4 py-2",
+      className
+    ),
+    ref,
+    role: "toolbar",
+    ...rest,
+    children
+  }
+));
+PrimarySourceToolbar.displayName = "PrimarySourceToolbar";
+const ToolbarButton = forwardRef(
+  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onClick: onActivate,
+      ref,
+      type: "button",
+      ...rest,
+      children: glyph
+    }
+  )
+);
+ToolbarButton.displayName = "ToolbarButton";
+const PrimarySourceZoomIn = forwardRef(({ ...rest }, ref) => {
+  const { labels, zoomIn } = useViewerContext();
+  return /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      ariaLabel: labels.zoomIn,
+      glyph: "+",
+      onActivate: zoomIn,
+      ref,
+      ...rest
+    }
+  );
+});
+PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
+const PrimarySourceZoomOut = forwardRef(({ ...rest }, ref) => {
+  const { labels, zoomOut } = useViewerContext();
+  return /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      ariaLabel: labels.zoomOut,
+      glyph: "\u2212",
+      onActivate: zoomOut,
+      ref,
+      ...rest
+    }
+  );
+});
+PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
+const PrimarySourceRotate = forwardRef(({ ...rest }, ref) => {
+  const { labels, rotate } = useViewerContext();
+  return /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      ariaLabel: labels.rotate,
+      glyph: "\u27F3",
+      onActivate: rotate,
+      ref,
+      ...rest
+    }
+  );
+});
+PrimarySourceRotate.displayName = "PrimarySourceRotate";
+const PrimarySourceAnnotations = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-label": "Annotations",
+    className: cn("pointer-events-none absolute inset-0 z-10", className),
+    ref,
+    ...rest,
+    children
+  }
+));
+PrimarySourceAnnotations.displayName = "PrimarySourceAnnotations";
+function AnnotationTooltip({
+  category,
+  color,
+  note,
+  tooltipId
+}) {
+  const palette = ANNOTATION_PALETTE[color];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "pointer-events-none absolute left-0 top-full z-10 mt-1 hidden min-w-44 max-w-sm rounded-md border bg-popover px-2 py-1 text-left text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block",
+      id: tooltipId,
+      role: "tooltip",
+      children: [
+        category ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "mb-1 inline-block rounded px-1 text-[10px] font-medium uppercase tracking-wide",
+              palette.chip
+            ),
+            children: category
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "block", children: note })
+      ]
+    }
+  );
+}
+const PrimarySourceAnnotation = forwardRef((props, ref) => {
+  const {
+    category,
+    className,
+    color = "amber",
+    id,
+    note,
+    region,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const annotationId = id ?? generatedId;
+  const palette = ANNOTATION_PALETTE[color];
+  const tooltipId = `${annotationId}-tooltip`;
+  const noteText = typeof note === "string" ? note : "Annotation";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-describedby": tooltipId,
+      "aria-label": noteText,
+      className: cn(
+        "group pointer-events-auto absolute rounded-md border-2 outline-none transition-colors hover:bg-foreground/10 focus-visible:bg-foreground/10",
+        palette.border,
+        palette.fill,
+        className
+      ),
+      "data-annotation-id": annotationId,
+      ref,
+      style: {
+        height: `${region.height.toString()}%`,
+        left: `${region.x.toString()}%`,
+        top: `${region.y.toString()}%`,
+        width: `${region.width.toString()}%`
+      },
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        AnnotationTooltip,
+        {
+          category,
+          color,
+          note,
+          tooltipId
+        }
+      )
+    }
+  );
+});
+PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
+const PrimarySourceTranscription = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+  "aside",
+  {
+    "aria-label": "Transcription",
+    className: cn(
+      "flex h-full flex-col gap-2 border-l border-border bg-background p-4 text-sm leading-relaxed",
+      className
+    ),
+    ref,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Transcription" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 text-foreground", children })
+    ]
+  }
+));
+PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
+const PrimarySourceContext = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "footer",
+  {
+    className: cn(
+      "grid gap-6 border-t border-border bg-muted/30 p-4 md:grid-cols-2",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+PrimarySourceContext.displayName = "PrimarySourceContext";
+const PrimarySourceMetadata = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "dl",
+  {
+    "aria-label": "Metadata",
+    className: cn(
+      "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-sm",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
+const PrimarySourceQuestions = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "aria-label": "Discussion questions",
+    className: cn("space-y-2 text-sm", className),
+    ref,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Discussion questions" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1 text-foreground", children })
+    ]
+  }
+));
+PrimarySourceQuestions.displayName = "PrimarySourceQuestions";
+const SLOT_DISPLAY_NAMES = {
+  annotations: PrimarySourceAnnotations.displayName,
+  context: PrimarySourceContext.displayName,
+  toolbar: PrimarySourceToolbar.displayName,
+  transcription: PrimarySourceTranscription.displayName
+};
+const SLOT_KEY_BY_NAME = {
+  [SLOT_DISPLAY_NAMES.annotations]: "annotations",
+  [SLOT_DISPLAY_NAMES.context]: "context",
+  [SLOT_DISPLAY_NAMES.toolbar]: "toolbar",
+  [SLOT_DISPLAY_NAMES.transcription]: "transcription"
+};
+function bucketChildren(children) {
+  const list = Array.isArray(children) ? children : [children];
+  return list.reduce(
+    (accumulator, child) => {
+      const name = displayName(child);
+      if (!name) return accumulator;
+      const key = SLOT_KEY_BY_NAME[name];
+      if (!key) return accumulator;
+      accumulator[key] = child;
+      return accumulator;
+    },
+    { annotations: null, context: null, toolbar: null, transcription: null }
+  );
+}
+function displayName(child) {
+  if (typeof child !== "object" || child === null) return void 0;
+  if (!("type" in child)) return void 0;
+  const type = child.type;
+  if (typeof type !== "object" && typeof type !== "function") return void 0;
+  const name = type.displayName;
+  return typeof name === "string" ? name : void 0;
+}
+function Stage({ annotations, source }) {
+  const { rotation, zoom } = useViewerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative h-full w-full overflow-auto bg-muted",
+      "data-rotation": rotation,
+      "data-zoom": zoom,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative inline-block",
+          style: {
+            transform: `rotate(${rotation.toString()}deg) scale(${zoom.toString()})`,
+            transformOrigin: "top left"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: source.alt,
+                className: "block h-auto max-w-none select-none",
+                draggable: false,
+                loading: "lazy",
+                src: source.src
+              }
+            ),
+            annotations
+          ]
+        }
+      )
+    }
+  );
+}
+const PrimarySourceViewer = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    labels,
+    origin,
+    period,
+    source,
+    title,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const ctx = useViewerState(resolvedLabels);
+  const buckets = useMemo(() => bucketChildren(children), [children]);
+  return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1 border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", id: titleId, children: title }),
+          period || origin ? /* @__PURE__ */ jsxs("p", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: [
+            period,
+            period && origin ? " \xB7 " : null,
+            origin
+          ] }) : null
+        ] }),
+        buckets.toolbar,
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-0 md:grid-cols-[2fr_1fr]", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative h-[420px] md:h-[520px]", children: /* @__PURE__ */ jsx(Stage, { annotations: buckets.annotations, source }) }),
+          buckets.transcription
+        ] }),
+        buckets.context
+      ]
+    }
+  ) });
+});
+PrimarySourceViewer.displayName = "PrimarySourceViewer";
+export {
+  PrimarySourceAnnotation,
+  PrimarySourceAnnotations,
+  PrimarySourceContext,
+  PrimarySourceMetadata,
+  PrimarySourceQuestions,
+  PrimarySourceRotate,
+  PrimarySourceToolbar,
+  PrimarySourceTranscription,
+  PrimarySourceViewer,
+  PrimarySourceZoomIn,
+  PrimarySourceZoomOut
+};

package/dist/components/pro-tip/pro-tip.js

@@ -39,10 +39,10 @@ function ProTip({
     {
       className: cn("my-6 rounded-lg border p-4", config.className, className),
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-current/10 flex-shrink-0", children: icon ? /* @__PURE__ */ jsx("span", { className: "h-4 w-4", children: icon }) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-current/10 flex-shrink-0", children: icon ? /* @__PURE__ */ jsx("span", { className: "size-4", children: icon }) : /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-4 w-4",
+            className: "size-4",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -82,10 +82,10 @@ function CommonMistake({
       ),
       children: [
         /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-          icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5", children: icon }) : /* @__PURE__ */ jsx(
+          icon ? /* @__PURE__ */ jsx("span", { className: "size-5 text-red-500 flex-shrink-0 mt-0.5", children: icon }) : /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5",
+              className: "size-5 text-red-500 flex-shrink-0 mt-0.5",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -106,10 +106,10 @@ function CommonMistake({
           ] })
         ] }) }),
         fix ? /* @__PURE__ */ jsx("div", { className: "border-t border-red-500/30 bg-green-500/5 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-          fixIcon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5", children: fixIcon }) : /* @__PURE__ */ jsx(
+          fixIcon ? /* @__PURE__ */ jsx("span", { className: "size-5 text-green-500 flex-shrink-0 mt-0.5", children: fixIcon }) : /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+              className: "size-5 text-green-500 flex-shrink-0 mt-0.5",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",

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

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Button } from "../button/button";
 function ProfileSection({
+  as: Heading = "h3",
   compact = false,
   dict,
   imageAlt,
@@ -13,7 +14,7 @@ function ProfileSection({
   const showImage = !compact && Boolean(imageSource);
   const showSocialLinks = !compact && Boolean(socialLinks && socialLinks.length > 0);
   return /* @__PURE__ */ jsxs("div", { className: "text-center space-y-4", children: [
-    showImage ? /* @__PURE__ */ jsx("div", { className: "relative w-24 h-24 mx-auto overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+    showImage ? /* @__PURE__ */ jsx("div", { className: "relative size-24 mx-auto overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
       Image,
       {
         alt: displayImageAlt,
@@ -25,7 +26,7 @@ function ProfileSection({
       }
     ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: `font-semibold ${compact ? "text-lg" : "text-xl"}`, children: dict.profile.name }),
+      /* @__PURE__ */ jsx(Heading, { className: `font-semibold ${compact ? "text-lg" : "text-xl"}`, children: dict.profile.name }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compact ? dict.profile.tagline : `> ${dict.profile.tagline}` })
     ] }),
     showSocialLinks ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center items-center gap-2", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(

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

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
 import { useMounted } from "../../lib/use-mounted";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 function DefaultLink({
   children,
   className,
@@ -17,6 +17,7 @@ function DefaultLink({
 }) {
   return /* @__PURE__ */ jsx("a", { className, href, children });
 }
+const EMPTY_PROGRESS_CARD_LIST = [];
 function ContentCardImpl({
   badgeLabel,
   badgeVariant = "default",
@@ -24,9 +25,9 @@ function ContentCardImpl({
   getProgress,
   href,
   linkComponent: LinkComponent = DefaultLink,
-  metadata = [],
+  metadata = EMPTY_PROGRESS_CARD_LIST,
   progressLabel = "completed",
-  tags = [],
+  tags = EMPTY_PROGRESS_CARD_LIST,
   title
 }) {
   const [progress, setProgress] = useState(null);
@@ -59,7 +60,7 @@ function ContentCardImpl({
       metadata.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: metadata.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
         index > 0 ? /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u2022" }) : null,
         item
-      ] }, index)) }) : null,
+      ] }, item)) }) : null,
       tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: tag }, tag)) }) : null
     ] })
   ] }) });

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

@@ -0,0 +1,20 @@
+import {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+} from "./progress-tracker";
+export {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+};