@hydralms/components 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,159 +1,491 @@
-import { c as r } from "./table-CW4_BYny.js";
-import { A as p, a as b, b as C, d as f, e as A, f as D, g as k, h as v, i as h, j as F, k as x, l as y, m as B, n as S, o as I, B as P, p as j, C as H, q as N, r as R, s as V, t as w, u as z, v as L, w as $, x as E, y as Q, z as U, D as q, E as G, F as M, G as O, H as Z, I as J, J as K, K as W, L as X, M as Y, N as _, O as aa, P as ea, Q as sa, R as ta, S as ra, T as oa, U as la, V as ia, W as na, X as da, Y as ua, Z as ca, _ as ga, $ as ma, a0 as Ta, a1 as pa, a2 as ba, a3 as Ca, a4 as fa, a5 as Aa, a6 as Da, a7 as ka, a8 as va, a9 as ha, aa as Fa, ab as xa, ac as ya, ad as Ba, ae as Sa, af as Ia, ag as Pa, ah as ja, ai as Ha, aj as Na, ak as Ra, al as Va, am as wa } from "./table-CW4_BYny.js";
-import { jsx as s } from "react/jsx-runtime";
-function n({
+import { c as l, f as g, a as h, P as N } from "./table-BrS5cDQu.js";
+import { A as Z, b as J, d as K, e as O, g as W, h as X, i as Y, j as _, k as S, l as ee, m as ae, n as te, o as re, p as se, q as ie, B as le, r as oe, C as ne, s as de, t as ce, u as me, v as ue, w as fe, x as xe, y as pe, z as ge, D as he, E as be, F as ve, G as Ne, H as ye, I as Ce, J as Te, K as ze, L as we, M as De, N as Ae, O as je, Q as ke, R as Ve, S as Ie, T as Re, U as Be, V as Fe, W as Pe, X as He, Y as Le, Z as Me, _ as $e, $ as Ee, a0 as Qe, a1 as Ue, a2 as qe, a3 as Ge, a4 as Ze, a5 as Je, a6 as Ke, a7 as Oe, a8 as We, a9 as Xe, aa as Ye, ab as _e, ac as Se, ad as ea, ae as aa, af as ta, ag as ra, ah as sa, ai as ia, aj as la, ak as oa, al as na, am as da, an as ca, ao as ma } from "./table-BrS5cDQu.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Clock as y, Play as p, Video as C, Bookmark as T, Pencil as z, Trash2 as w, CheckCircle2 as D, Circle as A } from "lucide-react";
+import { useRef as v, useEffect as j } from "react";
+const B = ({
+  entries: a,
+  currentTime: r = 0,
+  onSeek: t,
+  readOnly: s = !1,
+  maxHeight: n = "400px",
+  className: c,
+  style: i
+}) => {
+  const m = v(null), d = v(null), b = a.reduce(
+    (u, x, f) => x.time <= r ? f : u,
+    -1
+  );
+  return j(() => {
+    d.current && m.current && d.current.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }, [b]), a.length === 0 ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: l(
+        "flex flex-col items-center justify-center gap-2 rounded-md border border-border bg-muted p-6",
+        c
+      ),
+      style: i,
+      children: [
+        /* @__PURE__ */ e(y, { size: 20, className: "text-muted-foreground" }),
+        /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: "No transcript available" })
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      ref: m,
+      className: l(
+        "overflow-y-auto rounded-md border border-border",
+        c
+      ),
+      style: { maxHeight: n, ...i },
+      children: a.map((u, x) => {
+        const f = x === b;
+        return /* @__PURE__ */ o(
+          "div",
+          {
+            ref: f ? d : void 0,
+            className: l(
+              "flex gap-3 px-3 py-2 text-sm transition-colors",
+              f && "bg-primary/10",
+              !s && t && "cursor-pointer hover:bg-muted"
+            ),
+            onClick: () => !s && (t == null ? void 0 : t(u.time)),
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: l(
+                    "shrink-0 font-mono text-xs tabular-nums pt-0.5",
+                    f ? "text-primary font-medium" : "text-muted-foreground"
+                  ),
+                  children: g(Math.floor(u.time))
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: "min-w-0", children: [
+                u.speaker && /* @__PURE__ */ o("span", { className: "mr-1 font-semibold text-foreground", children: [
+                  u.speaker,
+                  ":"
+                ] }),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: f ? "text-foreground" : "text-muted-foreground",
+                    children: u.text
+                  }
+                )
+              ] })
+            ]
+          },
+          x
+        );
+      })
+    }
+  );
+}, F = ({
+  chapters: a,
+  currentTime: r = 0,
+  onSeek: t,
+  className: s,
+  style: n
+}) => {
+  const c = a.reduce(
+    (i, m, d) => m.time <= r ? d : i,
+    -1
+  );
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        "divide-y divide-border rounded-md border border-border",
+        s
+      ),
+      style: n,
+      children: a.map((i, m) => {
+        const d = m === c;
+        return /* @__PURE__ */ o(
+          "div",
+          {
+            className: l(
+              "flex items-center gap-3 p-3 transition-colors",
+              d && "bg-primary/10",
+              t && "cursor-pointer hover:bg-muted"
+            ),
+            onClick: () => t == null ? void 0 : t(i.time),
+            children: [
+              i.thumbnail ? /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "relative shrink-0 w-16 overflow-hidden rounded",
+                  style: { aspectRatio: "16/9" },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: i.thumbnail,
+                        alt: i.title,
+                        className: "size-full object-cover"
+                      }
+                    ),
+                    d && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ e(p, { size: 14, className: "ml-px text-white" }) })
+                  ]
+                }
+              ) : /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    "flex shrink-0 items-center justify-center size-8 rounded-full",
+                    d ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                  ),
+                  children: /* @__PURE__ */ e("span", { className: "text-xs font-semibold", children: m + 1 })
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: l(
+                      "truncate text-sm font-medium",
+                      d ? "text-primary" : "text-foreground"
+                    ),
+                    children: i.title
+                  }
+                ),
+                /* @__PURE__ */ o("div", { className: "mt-0.5 flex items-center gap-2", children: [
+                  /* @__PURE__ */ e("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: g(Math.floor(i.time)) }),
+                  i.duration != null && i.duration > 0 && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: h(i.duration) })
+                ] })
+              ] })
+            ]
+          },
+          m
+        );
+      })
+    }
+  );
+}, P = ({
+  poster: a,
+  title: r,
+  duration: t,
+  progress: s,
+  onClick: n,
+  className: c,
+  style: i
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: l(
+      "group overflow-hidden rounded-lg border border-border transition-colors",
+      n && "cursor-pointer hover:border-primary/50 hover:shadow-sm",
+      c
+    ),
+    style: i,
+    onClick: n,
+    children: [
+      /* @__PURE__ */ o("div", { className: "relative overflow-hidden", style: { aspectRatio: "16/9" }, children: [
+        a ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: a,
+            alt: r,
+            className: "size-full object-cover transition-transform duration-300 group-hover:scale-105"
+          }
+        ) : /* @__PURE__ */ e("div", { className: "flex size-full items-center justify-center bg-muted", children: /* @__PURE__ */ e(C, { size: 32, className: "text-muted-foreground" }) }),
+        /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/20", children: /* @__PURE__ */ e("div", { className: "flex size-10 items-center justify-center rounded-full bg-black/60 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ e(p, { size: 20, className: "ml-0.5 text-white" }) }) }),
+        t != null && t > 0 && /* @__PURE__ */ e("span", { className: "absolute bottom-2 right-2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-medium tabular-nums text-white", children: h(t) })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e("h4", { className: "truncate text-sm font-medium text-foreground", children: r }) }),
+      s != null && s >= 0 && /* @__PURE__ */ e("div", { className: "px-3 pb-3", children: /* @__PURE__ */ e(
+        N,
+        {
+          value: s,
+          size: "sm",
+          variant: s >= 100 ? "success" : "default"
+        }
+      ) })
+    ]
+  }
+), H = ({
+  bookmark: a,
+  onSeek: r,
+  onDelete: t,
+  onEdit: s,
+  className: n,
+  style: c
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: l(
+      "flex items-start gap-3 rounded-md border border-border p-3",
+      n
+    ),
+    style: c,
+    children: [
+      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center size-8 rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ e(T, { size: 16 }) }),
+      /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: l(
+              "font-mono text-xs font-medium tabular-nums",
+              r ? "cursor-pointer text-primary hover:underline" : "text-muted-foreground"
+            ),
+            onClick: () => r == null ? void 0 : r(a.time),
+            disabled: !r,
+            children: g(Math.floor(a.time))
+          }
+        ),
+        a.note && /* @__PURE__ */ e("p", { className: "mt-0.5 text-sm text-foreground", children: a.note }),
+        a.createdAt && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: new Date(a.createdAt).toLocaleDateString() })
+      ] }),
+      (s || t) && /* @__PURE__ */ o("div", { className: "flex shrink-0 items-center gap-1", children: [
+        s && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            "aria-label": "Edit bookmark",
+            onClick: () => s(a.id),
+            children: /* @__PURE__ */ e(z, { size: 14 })
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+            "aria-label": "Delete bookmark",
+            onClick: () => t(a.id),
+            children: /* @__PURE__ */ e(w, { size: 14 })
+          }
+        )
+      ] })
+    ]
+  }
+), L = ({
+  thumbnail: a,
+  title: r,
+  duration: t,
+  status: s = "unwatched",
+  isActive: n = !1,
+  index: c,
+  onClick: i,
+  className: m,
+  style: d
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: l(
+      "flex items-center gap-3 rounded-md px-3 py-2 transition-colors",
+      n && "bg-primary/10",
+      i && "cursor-pointer hover:bg-muted",
+      m
+    ),
+    style: d,
+    onClick: i,
+    children: [
+      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center size-6", children: s === "completed" ? /* @__PURE__ */ e("span", { className: "text-success", children: /* @__PURE__ */ e(D, { size: 18 }) }) : n ? /* @__PURE__ */ e("span", { className: "text-primary", children: /* @__PURE__ */ e(p, { size: 16, className: "ml-px" }) }) : c != null ? /* @__PURE__ */ e("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: c }) : /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: /* @__PURE__ */ e(A, { size: 16 }) }) }),
+      a && /* @__PURE__ */ o(
+        "div",
+        {
+          className: "relative shrink-0 w-16 overflow-hidden rounded",
+          style: { aspectRatio: "16/9" },
+          children: [
+            /* @__PURE__ */ e(
+              "img",
+              {
+                src: a,
+                alt: r,
+                className: l(
+                  "size-full object-cover",
+                  s === "completed" && "opacity-60"
+                )
+              }
+            ),
+            n && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ e(p, { size: 12, className: "ml-px text-white" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: l(
+              "truncate text-sm",
+              n ? "font-medium text-primary" : "text-foreground",
+              s === "completed" && !n && "text-muted-foreground"
+            ),
+            children: r
+          }
+        ),
+        t != null && t > 0 && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: h(t) })
+      ] })
+    ]
+  }
+);
+function M({
   children: a,
-  colorMode: e,
+  colorMode: r = "dark",
   className: t,
-  style: o
+  style: s
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: `hydra-root${e === "dark" ? " dark" : ""}${t ? ` ${t}` : ""}`,
-      style: o,
+      className: `hydra-root${r === "dark" ? " dark" : ""}${t ? ` ${t}` : ""}`,
+      style: s,
       children: a
     }
   );
 }
-function d({
+function $({
   className: a,
-  ...e
+  ...r
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ e(
     "span",
     {
       "data-slot": "avatar",
-      className: r(
+      className: l(
         "relative flex size-9 shrink-0 overflow-hidden rounded-full",
         a
       ),
-      ...e
+      ...r
     }
   );
 }
-function u({
+function E({
   className: a,
-  onError: e,
+  onError: r,
   ...t
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ e(
     "img",
     {
       "data-slot": "avatar-image",
-      className: r("aspect-square size-full object-cover", a),
-      onError: e,
+      className: l("aspect-square size-full object-cover", a),
+      onError: r,
       ...t
     }
   );
 }
-function c({
+function Q({
   className: a,
-  ...e
+  ...r
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ e(
     "span",
     {
       "data-slot": "avatar-fallback",
-      className: r(
+      className: l(
         "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-xs font-medium",
         a
       ),
-      ...e
+      ...r
     }
   );
 }
-function g({ className: a, ...e }) {
-  return /* @__PURE__ */ s(
+function U({ className: a, ...r }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "skeleton",
-      className: r("bg-muted animate-pulse rounded-md", a),
-      ...e
+      className: l("bg-muted animate-pulse rounded-md", a),
+      ...r
     }
   );
 }
 export {
-  p as Alert,
-  b as AlertDescription,
-  C as AlertDialog,
-  f as AlertDialogAction,
-  A as AlertDialogBackdrop,
-  D as AlertDialogCancel,
-  k as AlertDialogContent,
-  v as AlertDialogDescription,
-  h as AlertDialogFooter,
-  F as AlertDialogHeader,
-  x as AlertDialogPortal,
-  y as AlertDialogTitle,
-  B as AlertDialogTrigger,
-  S as AlertTitle,
-  I as AssessmentToolbar,
-  d as Avatar,
-  c as AvatarFallback,
-  u as AvatarImage,
-  P as Badge,
-  j as Button,
-  H as Card,
-  N as CardAction,
-  R as CardContent,
-  V as CardDescription,
-  w as CardFooter,
-  z as CardHeader,
-  L as CardTitle,
-  $ as Choice,
-  E as ConfirmDialog,
-  Q as ContentBlock,
-  U as CurriculumItemRow,
-  q as CurriculumTree,
-  G as DueDateDisplay,
-  M as EmptyState,
-  O as Essay,
-  Z as FeedbackBanner,
-  J as FileUploadZone,
-  K as FillInTheBlank,
-  W as Flashcard,
-  X as FlashcardDeck,
-  Y as GradeIndicator,
-  n as HydraProvider,
-  _ as Input,
-  aa as LearningObjectIcon,
-  ea as LikertScale,
-  sa as MultipleChoice,
-  ta as PostCard,
-  ra as Progress,
-  oa as ProgressRing,
-  la as QuestionNavigator,
-  ia as QuestionRenderer,
-  na as SearchInput,
-  da as Separator,
-  g as Skeleton,
-  ua as StarRating,
-  ca as StatCard,
-  ga as StatusBadge,
-  ma as Table,
-  Ta as TableBody,
-  pa as TableCaption,
-  ba as TableCell,
-  Ca as TableFooter,
-  fa as TableHead,
-  Aa as TableHeader,
-  Da as TableRow,
-  ka as Tabs,
-  va as TabsContent,
-  ha as TabsList,
-  Fa as TabsTrigger,
-  xa as Textarea,
-  ya as TimerDisplay,
-  Ba as Tooltip,
-  Sa as TooltipContent,
-  Ia as TooltipTrigger,
-  Pa as TrueFalse,
-  ja as UserAvatar,
-  Ha as VideoPlayer,
-  Na as alertVariants,
-  Ra as badgeVariants,
-  Va as buttonVariants,
-  r as cn,
-  wa as progressVariants
+  Z as Alert,
+  J as AlertDescription,
+  K as AlertDialog,
+  O as AlertDialogAction,
+  W as AlertDialogBackdrop,
+  X as AlertDialogCancel,
+  Y as AlertDialogContent,
+  _ as AlertDialogDescription,
+  S as AlertDialogFooter,
+  ee as AlertDialogHeader,
+  ae as AlertDialogPortal,
+  te as AlertDialogTitle,
+  re as AlertDialogTrigger,
+  se as AlertTitle,
+  ie as AssessmentToolbar,
+  $ as Avatar,
+  Q as AvatarFallback,
+  E as AvatarImage,
+  le as Badge,
+  oe as Button,
+  ne as Card,
+  de as CardAction,
+  ce as CardContent,
+  me as CardDescription,
+  ue as CardFooter,
+  fe as CardHeader,
+  xe as CardTitle,
+  pe as Choice,
+  ge as ConfirmDialog,
+  he as ContentBlock,
+  be as CurriculumItemRow,
+  ve as CurriculumTree,
+  Ne as DueDateDisplay,
+  ye as EmptyState,
+  Ce as Essay,
+  Te as FeedbackBanner,
+  ze as FileUploadZone,
+  we as FillInTheBlank,
+  De as Flashcard,
+  Ae as FlashcardDeck,
+  je as GradeIndicator,
+  M as HydraProvider,
+  ke as Input,
+  Ve as LearningObjectIcon,
+  Ie as LikertScale,
+  Re as MultipleChoice,
+  Be as PostCard,
+  N as Progress,
+  Fe as ProgressRing,
+  Pe as QuestionNavigator,
+  He as QuestionRenderer,
+  Le as SearchInput,
+  Me as Separator,
+  U as Skeleton,
+  $e as StarRating,
+  Ee as StatCard,
+  Qe as StatusBadge,
+  Ue as Table,
+  qe as TableBody,
+  Ge as TableCaption,
+  Ze as TableCell,
+  Je as TableFooter,
+  Ke as TableHead,
+  Oe as TableHeader,
+  We as TableRow,
+  Xe as Tabs,
+  Ye as TabsContent,
+  _e as TabsList,
+  Se as TabsTrigger,
+  ea as Textarea,
+  aa as TimerDisplay,
+  ta as Tooltip,
+  ra as TooltipContent,
+  sa as TooltipTrigger,
+  ia as TrueFalse,
+  la as UserAvatar,
+  H as VideoBookmark,
+  F as VideoChapterList,
+  oa as VideoPlayer,
+  L as VideoPlaylistItem,
+  P as VideoThumbnailCard,
+  B as VideoTranscript,
+  na as alertVariants,
+  da as badgeVariants,
+  ca as buttonVariants,
+  l as cn,
+  ma as progressVariants
 };

package/dist/modules/CoursePlayer/CoursePlayer.d.ts

@@ -0,0 +1,2 @@
+import { CoursePlayerProps } from './types';
+export declare function CoursePlayer({ courseTitle, curriculum, progress, items, initialItemUid, onItemComplete, onItemChange, sidebarCollapsed, readOnly, className, style, }: CoursePlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/modules/CoursePlayer/types.d.ts

@@ -0,0 +1,59 @@
+import { CurriculumItem, CurriculumItemProgress } from '../../curriculum/types';
+import { LessonBlock } from '../../content/types';
+import { QuestionData } from '../../questions/types';
+/**
+ * CoursePlayer — a complete course consumption shell with sidebar and content panel.
+ *
+ * Renders a collapsible CourseOutline sidebar alongside a content panel that
+ * switches between LessonPage, LecturePlayer, or PracticeQuiz based on the
+ * active item type. Includes a bottom bar with progress and navigation.
+ *
+ * @example
+ * <CoursePlayer
+ *   courseTitle="Introduction to React"
+ *   curriculum={curriculum}
+ *   items={courseItems}
+ *   onItemComplete={(uid) => markComplete(uid)}
+ * />
+ */
+export interface CoursePlayerProps {
+    /** Course title displayed in the sidebar header */
+    courseTitle: string;
+    /** Hierarchical curriculum structure for the sidebar */
+    curriculum: CurriculumItem[];
+    /** User's progress data for completion indicators */
+    progress?: CurriculumItemProgress[];
+    /** Content data for each leaf curriculum item */
+    items: CoursePlayerItem[];
+    /** UID of the initially active item */
+    initialItemUid?: string;
+    /** Called when the user marks a content item as complete */
+    onItemComplete?: (itemUid: string) => void;
+    /** Called when the active item changes (user navigates) */
+    onItemChange?: (itemUid: string) => void;
+    /** Whether the sidebar starts collapsed. @default false */
+    sidebarCollapsed?: boolean;
+    /** When true, disables all interactive elements */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export type CoursePlayerItem = {
+    uid: string;
+    type: "lesson";
+    title: string;
+    blocks: LessonBlock[];
+} | {
+    uid: string;
+    type: "video";
+    title: string;
+    src: string;
+    poster?: string;
+} | {
+    uid: string;
+    type: "quiz";
+    title: string;
+    questions: QuestionData[];
+};

package/dist/modules/FlashcardLab/FlashcardLab.d.ts

@@ -0,0 +1,2 @@
+import { FlashcardLabProps } from './types';
+export declare function FlashcardLab({ decks, showShuffleToggle, defaultShuffled, allowMultiSelect, onComplete, className, style, }: FlashcardLabProps): import("react/jsx-runtime").JSX.Element;