@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

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/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
+};