clio-design-system 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnnotationPanel: () => AnnotationPanel,
+  AnnotationToggle: () => AnnotationToggle,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
+  Button: () => Button,
+  CardHeader: () => CardHeader,
+  CardShell: () => CardShell,
+  CodeCard: () => CodeCard,
+  ColorSwatch: () => ColorSwatch,
+  ContextMenu: () => ContextMenu,
+  DragHandle: () => DragHandle,
+  EquationBlock: () => EquationBlock,
+  ExportRow: () => ExportRow,
+  FillBlankInput: () => FillBlankInput,
+  Flashcard: () => Flashcard,
+  IconButton: () => IconButton,
+  ImageCard: () => ImageCard,
+  ImportExportModal: () => ImportExportModal,
+  IntuitionCallout: () => IntuitionCallout,
+  McqOption: () => McqOption,
+  NavTabs: () => NavTabs,
+  NoteRow: () => NoteRow,
+  QuizCard: () => QuizCard,
+  RateButtons: () => RateButtons,
+  ReferencesCard: () => ReferencesCard,
+  RelatedCard: () => RelatedCard,
+  ScenarioBox: () => ScenarioBox,
+  Sidebar: () => Sidebar,
+  SolvedStatusButton: () => SolvedStatusButton,
+  TableCard: () => TableCard,
+  TagChip: () => TagChip,
+  TextArea: () => TextArea,
+  TextBlock: () => TextBlock,
+  TextInput: () => TextInput,
+  TocFab: () => TocFab,
+  TocRail: () => TocRail,
+  TocSheetList: () => TocSheetList,
+  TopicRow: () => TopicRow,
+  WalkthroughCard: () => WalkthroughCard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZE = {
+  sm: { padY: "6px", padX: "14px", font: "var(--font-size-sm)" },
+  md: { padY: "9px", padX: "18px", font: "var(--font-size-base)" }
+};
+function Button({
+  variant = "secondary",
+  size = "md",
+  active = false,
+  disabled = false,
+  icon = null,
+  children,
+  onClick,
+  title,
+  ...rest
+}) {
+  const s = SIZE[size] ?? SIZE.md;
+  const base = {
+    fontFamily: "var(--font-family-mono)",
+    fontSize: s.font,
+    letterSpacing: "var(--letter-spacing-mono-label)",
+    padding: `${s.padY} ${s.padX}`,
+    borderRadius: "var(--radius-pill)",
+    border: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "7px",
+    cursor: disabled ? "default" : "pointer",
+    opacity: disabled ? 0.4 : 1,
+    transition: "background var(--duration-fast) ease, color var(--duration-fast) ease"
+  };
+  let style = { ...base };
+  if (variant === "primary") {
+    style = { ...style, background: "var(--color-accent)", color: "#FFFFFF" };
+  } else if (variant === "dark") {
+    style = { ...style, background: "var(--color-ink-900)", color: "var(--color-cream-50)" };
+  } else if (variant === "secondary") {
+    style = {
+      ...style,
+      background: "var(--color-surface)",
+      color: "var(--color-text-secondary)",
+      border: "1px solid var(--border-medium)"
+    };
+  } else if (variant === "ghost") {
+    style = { ...style, background: "transparent", color: "var(--color-text-muted)", padding: "2px 4px" };
+  } else if (variant === "nav") {
+    style = {
+      ...style,
+      background: active ? "var(--color-ink-900)" : "transparent",
+      color: active ? "var(--color-cream-50)" : "var(--color-text-muted)"
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", title, disabled, onClick, ...rest, style, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { fontSize: "13px", lineHeight: 1 }, children: icon }) : null,
+    children
+  ] });
+}
+
+// src/internal/useHover.ts
+var import_react = require("react");
+function useHover(options = {}) {
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  return {
+    hovered,
+    focused,
+    active: hovered || focused,
+    interactionHandlers: {
+      onMouseEnter: (e) => {
+        setHovered(true);
+        options.onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setHovered(false);
+        options.onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        setFocused(true);
+        options.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        options.onBlur?.(e);
+      }
+    }
+  };
+}
+
+// src/components/IconButton/IconButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function IconButton({
+  size = 26,
+  children,
+  onClick,
+  title,
+  bordered = false,
+  hoverColor = "var(--color-text-secondary)",
+  disabled = false,
+  radius = "var(--radius-md)",
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      onClick,
+      disabled,
+      ...rest,
+      ...interactionHandlers,
+      style: {
+        width: size,
+        height: size,
+        border: bordered ? "1px solid var(--border-medium)" : "none",
+        background: active ? "rgba(17,17,17,0.08)" : bordered ? "var(--color-surface)" : "transparent",
+        borderRadius: radius,
+        color: active ? hoverColor : "var(--color-text-muted)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "15px",
+        lineHeight: 1,
+        padding: 0,
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        transition: "background var(--duration-fast) ease, color var(--duration-fast) ease"
+      },
+      children
+    }
+  );
+}
+
+// src/components/TagChip/TagChip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TagChip({
+  label,
+  color = "var(--color-ink-500)",
+  active = false,
+  onClick,
+  removable = false,
+  onRemove,
+  size = "md",
+  ...rest
+}) {
+  const tint = active ? color : `color-mix(in srgb, ${color} 14%, transparent)`;
+  const textColor = active ? "#FFFFFF" : color;
+  const font = size === "sm" ? "9px" : "10.5px";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        borderRadius: "var(--radius-pill)",
+        padding: removable ? "3px 6px 3px 9px" : "3px 10px",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: font,
+        background: tint,
+        color: textColor,
+        whiteSpace: "nowrap"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick,
+            ...rest,
+            style: { border: "none", background: "none", padding: 0, font: "inherit", color: "inherit", cursor: "pointer" },
+            children: [
+              "#",
+              label
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove?.();
+            },
+            "aria-label": `Remove ${label} tag`,
+            style: {
+              border: "none",
+              background: "none",
+              padding: "0 1px",
+              opacity: 0.7,
+              fontSize: "12px",
+              lineHeight: 1,
+              color: "inherit",
+              cursor: "pointer"
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Badge({ variant = "mono", children, color, tint }) {
+  if (variant === "topic") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        style: {
+          fontFamily: "var(--font-family-mono)",
+          fontSize: "var(--font-size-sm)",
+          letterSpacing: "0.06em",
+          fontWeight: 500,
+          color: color || "var(--color-accent)",
+          background: tint || "color-mix(in srgb, var(--color-accent) 10%, transparent)",
+          padding: "3px 9px",
+          borderRadius: "var(--radius-xs)",
+          whiteSpace: "nowrap",
+          display: "inline-block"
+        },
+        children
+      }
+    );
+  }
+  if (variant === "eyebrow") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        style: {
+          fontFamily: "var(--font-family-mono)",
+          fontSize: "var(--font-size-xs)",
+          letterSpacing: "var(--letter-spacing-mono-wide)",
+          color: color || "var(--color-accent)",
+          whiteSpace: "nowrap"
+        },
+        children
+      }
+    );
+  }
+  if (variant === "count") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        style: {
+          minWidth: 17,
+          height: 17,
+          padding: "0 4px",
+          boxSizing: "border-box",
+          borderRadius: "var(--radius-full)",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "9.5px",
+          background: tint || "color-mix(in srgb, var(--color-accent) 14%, transparent)",
+          color: color || "var(--color-accent)"
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      style: {
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "var(--font-size-xs)",
+        letterSpacing: "0.1em",
+        color: "var(--color-text-muted)",
+        background: "var(--border-hairline)",
+        padding: "2px 8px",
+        borderRadius: "var(--radius-xs)"
+      },
+      children
+    }
+  );
+}
+
+// src/components/SolvedStatusButton/SolvedStatusButton.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SolvedStatusButton({ solved = false, onClick, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      ...rest,
+      style: {
+        border: `1px solid ${solved ? "color-mix(in srgb, var(--color-success) 35%, transparent)" : "var(--border-medium)"}`,
+        background: solved ? "var(--color-success-tint)" : "transparent",
+        color: solved ? "var(--color-success)" : "var(--color-text-muted)",
+        borderRadius: "var(--radius-sm)",
+        padding: "3px 10px",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "var(--font-size-xs)",
+        letterSpacing: "0.06em"
+      },
+      children: solved ? "\u2713 SOLVED" : "MARK SOLVED"
+    }
+  );
+}
+
+// src/components/TextInput/TextInput.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  mono = false,
+  autoFocus = false,
+  style,
+  "aria-label": ariaLabel,
+  type = "text",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "input",
+    {
+      type,
+      value,
+      onChange,
+      placeholder,
+      autoFocus,
+      "aria-label": ariaLabel,
+      ...rest,
+      style: {
+        border: "1px solid var(--border-medium)",
+        borderRadius: "var(--radius-md)",
+        background: "var(--color-surface)",
+        fontFamily: mono ? "var(--font-family-mono)" : "inherit",
+        fontSize: mono ? "var(--font-size-base)" : "var(--font-size-lg)",
+        color: "var(--color-text-primary)",
+        padding: "7px 11px",
+        boxSizing: "border-box",
+        ...style
+      }
+    }
+  );
+}
+
+// src/components/TextArea/TextArea.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TextArea({
+  value,
+  onChange,
+  placeholder,
+  rows = 6,
+  mono = true,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "textarea",
+    {
+      value,
+      onChange,
+      placeholder,
+      rows,
+      "aria-label": ariaLabel,
+      ...rest,
+      style: {
+        width: "100%",
+        boxSizing: "border-box",
+        resize: "vertical",
+        border: "1px solid var(--border-medium)",
+        borderRadius: "var(--radius-xl)",
+        background: "var(--color-surface)",
+        padding: "12px 14px",
+        fontFamily: mono ? "var(--font-family-mono)" : "inherit",
+        fontSize: mono ? "var(--font-size-md)" : "var(--font-size-lg)",
+        lineHeight: 1.55,
+        color: "var(--color-text-body)"
+      }
+    }
+  );
+}
+
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Avatar({ initial = "M", size = 28, dark = false, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      ...rest,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: dark ? "var(--color-surface-inverse)" : "var(--color-stone-100)",
+        color: dark ? "var(--color-text-on-inverse)" : "var(--color-text-secondary)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: size * 0.43,
+        fontWeight: 600,
+        fontFamily: "var(--font-family-sans)",
+        ...style
+      },
+      children: initial
+    }
+  );
+}
+
+// src/components/ColorSwatch/ColorSwatch.tsx
+var import_react2 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ColorSwatch = (0, import_react2.forwardRef)(function ColorSwatch2({ color, active = false, onClick, size = 17, title = "Recolor", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick,
+      title,
+      "aria-label": title,
+      ...rest,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: color,
+        padding: 0,
+        border: `2px solid ${active ? "var(--color-ink-900)" : "transparent"}`
+      }
+    }
+  );
+});
+
+// src/components/DragHandle/DragHandle.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DragHandle({ onDragStart, title = "Drag to reorder", style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "span",
+    {
+      draggable: true,
+      onDragStart,
+      title,
+      "aria-hidden": "true",
+      ...rest,
+      style: {
+        cursor: "grab",
+        width: 16,
+        height: 22,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "var(--color-ink-300)",
+        fontSize: 19,
+        letterSpacing: "-2px",
+        lineHeight: 1,
+        userSelect: "none",
+        ...style
+      },
+      children: "\u22EE\u22EE"
+    }
+  );
+}
+
+// src/components/NavTabs/NavTabs.tsx
+var import_react3 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TAB_ORDER = ["notes", "practice", "review"];
+var TAB_LABEL = { notes: "LEARN", practice: "PRACTICE", review: "REVIEW" };
+function Tab({ id, active, badge, onSelect, onKeyDown, buttonRef }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      role: "tab",
+      "aria-selected": active,
+      tabIndex: active ? 0 : -1,
+      onClick: () => onSelect(id),
+      onKeyDown: (e) => onKeyDown(e, id),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 7,
+        border: "none",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "var(--font-size-sm)",
+        letterSpacing: "var(--letter-spacing-mono-label)",
+        padding: "7px 18px",
+        borderRadius: "var(--radius-pill)",
+        background: active ? "var(--color-ink-900)" : "transparent",
+        color: active ? "var(--color-cream-50)" : "var(--color-text-muted)",
+        transition: "background var(--duration-fast) ease, color var(--duration-fast) ease"
+      },
+      children: [
+        TAB_LABEL[id],
+        badge != null && badge > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { variant: "count", color: "inherit", tint: "rgba(255,255,255,0.22)", children: badge })
+      ]
+    }
+  );
+}
+function NavTabs({ active = "notes", onChange, reviewCount = 0, ...rest }) {
+  const buttonRefs = (0, import_react3.useRef)({});
+  const select = (id) => onChange?.(id);
+  const focusTab = (id) => {
+    buttonRefs.current[id]?.focus();
+  };
+  const handleKeyDown = (event, id) => {
+    const currentIndex = TAB_ORDER.indexOf(id);
+    let nextIndex = null;
+    if (event.key === "ArrowRight") {
+      nextIndex = (currentIndex + 1) % TAB_ORDER.length;
+    } else if (event.key === "ArrowLeft") {
+      nextIndex = (currentIndex - 1 + TAB_ORDER.length) % TAB_ORDER.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = TAB_ORDER.length - 1;
+    }
+    if (nextIndex !== null) {
+      event.preventDefault();
+      const nextId = TAB_ORDER[nextIndex];
+      select(nextId);
+      focusTab(nextId);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "tablist", "aria-label": "Sections", ...rest, style: { display: "flex", alignItems: "center", gap: 6, ...rest.style }, children: TAB_ORDER.map((id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Tab,
+    {
+      id,
+      active: active === id,
+      badge: id === "review" ? reviewCount : void 0,
+      onSelect: select,
+      onKeyDown: handleKeyDown,
+      buttonRef: (el) => {
+        buttonRefs.current[id] = el;
+      }
+    },
+    id
+  )) });
+}
+
+// src/components/Sidebar/Sidebar.tsx
+var import_react4 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Sidebar({
+  collapsed = false,
+  onToggle,
+  label,
+  width = 222,
+  children,
+  borderSide = "right",
+  style,
+  ...rest
+}) {
+  const contentId = (0, import_react4.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        borderRight: borderSide === "right" ? "1px solid var(--border-hairline)" : "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: 26, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          IconButton,
+          {
+            title: collapsed ? "Expand" : "Collapse",
+            onClick: onToggle,
+            size: 22,
+            radius: "var(--radius-sm)",
+            "aria-expanded": !collapsed,
+            "aria-controls": contentId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  display: "flex",
+                  fontSize: 12,
+                  transform: `rotate(${collapsed ? 180 : 0}deg)`,
+                  transition: "transform var(--duration-standard) var(--ease-standard)"
+                },
+                children: "\u2039"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            id: contentId,
+            inert: collapsed,
+            style: {
+              width: collapsed ? 0 : width,
+              opacity: collapsed ? 0 : 1,
+              overflow: "hidden",
+              transition: "width var(--duration-standard) var(--ease-standard), opacity var(--duration-fast) ease"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { width, minHeight: "100%", boxSizing: "border-box", padding: "16px 10px 16px 0", display: "flex", flexDirection: "column", gap: 3 }, children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  style: {
+                    fontFamily: "var(--font-family-mono)",
+                    fontSize: "var(--font-size-xs)",
+                    letterSpacing: "var(--letter-spacing-mono-wider)",
+                    color: "var(--color-text-muted)",
+                    padding: "4px 12px 10px"
+                  },
+                  children: label
+                }
+              ),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TopicRow/TopicRow.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function TopicRow({
+  name,
+  color,
+  notesLabel,
+  selected = false,
+  onClick,
+  onMenuClick,
+  draggable = true,
+  onDragStart,
+  dense = false,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 8,
+        padding: dense ? "12px 8px" : "9px 32px 9px 8px",
+        borderRadius: "var(--radius-row)",
+        background: selected ? "var(--color-surface-sunken)" : "transparent",
+        position: "relative",
+        ...style
+      },
+      children: [
+        draggable && !dense && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DragHandle, { onDragStart }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick,
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: 8,
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              background: "none",
+              padding: 0,
+              textAlign: "left",
+              font: "inherit",
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { width: 7, height: 7, borderRadius: "50%", flexShrink: 0, background: color, marginTop: 6 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 5, flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--font-size-base)",
+                      fontWeight: selected ? 600 : 500,
+                      color: selected ? "var(--color-text-primary)" : "var(--color-text-secondary)"
+                    },
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--font-family-mono)",
+                      fontSize: "var(--font-size-2xs)",
+                      color: "var(--color-text-faint)",
+                      paddingLeft: dense ? 0 : 15
+                    },
+                    children: notesLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        onMenuClick && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { position: "absolute", top: 8, right: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          IconButton,
+          {
+            title: "Topic options",
+            onClick: (e) => {
+              e.stopPropagation();
+              onMenuClick(e);
+            },
+            size: 22,
+            radius: "var(--radius-sm)",
+            children: "\u22EF"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/NoteRow/NoteRow.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function NoteRow({
+  title,
+  meta,
+  selected = false,
+  showTopic = false,
+  topicColor,
+  topicName,
+  tags = [],
+  onClick,
+  onMenuClick,
+  draggable = true,
+  onDragStart,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 8,
+        padding: "9px 32px 9px 8px",
+        borderRadius: "var(--radius-row)",
+        background: selected ? "var(--color-surface-sunken)" : "transparent",
+        position: "relative",
+        ...style
+      },
+      children: [
+        draggable && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DragHandle, { onDragStart, style: { marginTop: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              background: "none",
+              padding: 0,
+              textAlign: "left",
+              font: "inherit",
+              cursor: "pointer"
+            },
+            children: [
+              showTopic && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: topicColor } }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--font-family-mono)",
+                      fontSize: "9px",
+                      letterSpacing: "0.08em",
+                      color: "var(--color-text-faint)",
+                      textTransform: "uppercase"
+                    },
+                    children: topicName
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: "var(--font-size-base)",
+                    lineHeight: 1.4,
+                    fontWeight: selected ? 600 : 500,
+                    color: selected ? "var(--color-text-primary)" : "var(--color-text-secondary)"
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-2xs)", color: "var(--color-text-faint)" }, children: meta }),
+              tags.length > 0 && !selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 1 }, children: tags.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                "span",
+                {
+                  style: {
+                    fontFamily: "var(--font-family-mono)",
+                    fontSize: "9px",
+                    color: t.color,
+                    background: `color-mix(in srgb, ${t.color} 14%, transparent)`,
+                    padding: "1px 7px",
+                    borderRadius: "var(--radius-pill)"
+                  },
+                  children: [
+                    "#",
+                    t.label
+                  ]
+                },
+                `${t.label}-${i}`
+              )) })
+            ]
+          }
+        ),
+        onMenuClick && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { position: "absolute", top: 7, right: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          IconButton,
+          {
+            title: "Concept options",
+            onClick: (e) => {
+              e.stopPropagation();
+              onMenuClick(e);
+            },
+            size: 22,
+            radius: "var(--radius-sm)",
+            children: "\u22EF"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/ContextMenu/ContextMenu.tsx
+var import_react5 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ContextMenu({
+  items = [],
+  swatches,
+  width = 176,
+  style,
+  onClose,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const nonDividerCount = items.filter((it) => !it.divider).length;
+  const itemFocusIndex = items.map((it, i) => it.divider ? -1 : items.slice(0, i).filter((x) => !x.divider).length);
+  const swatchFocusIndex = (swatches ?? []).map((_, i) => nonDividerCount + i);
+  const focusableCount = nonDividerCount + (swatches?.length ?? 0);
+  const controlRefs = (0, import_react5.useRef)([]);
+  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    controlRefs.current[0]?.focus();
+  }, []);
+  const focusIndex = (index) => {
+    const clamped = (index + focusableCount) % focusableCount;
+    controlRefs.current[clamped]?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      onClose?.();
+      return;
+    }
+    if (focusableCount === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusIndex(activeIndex + 1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusIndex(activeIndex - 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusIndex(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusIndex(focusableCount - 1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": ariaLabel,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      ...rest,
+      style: {
+        width,
+        background: "var(--color-surface)",
+        border: "1px solid var(--border-medium)",
+        borderRadius: "var(--radius-xl)",
+        boxShadow: "var(--shadow-md)",
+        padding: 6,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        ...style
+      },
+      children: [
+        items.map((it, i) => {
+          if (it.divider) {
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "separator", "aria-orientation": "horizontal", style: { height: 1, background: "var(--border-subtle)", margin: "2px 4px" } }, i);
+          }
+          const index = itemFocusIndex[i];
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "button",
+            {
+              role: "menuitem",
+              ref: (el) => {
+                controlRefs.current[index] = el;
+              },
+              tabIndex: activeIndex === index ? 0 : -1,
+              onFocus: () => setActiveIndex(index),
+              onClick: it.onClick,
+              style: {
+                textAlign: "left",
+                border: "none",
+                background: "none",
+                borderRadius: "var(--radius-sm)",
+                padding: "7px 9px",
+                fontFamily: "inherit",
+                fontSize: "var(--font-size-base)",
+                color: it.danger ? "var(--color-danger)" : "var(--color-text-secondary)"
+              },
+              children: [
+                it.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", style: { marginRight: 7 }, children: it.icon }),
+                it.label
+              ]
+            },
+            i
+          );
+        }),
+        swatches && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "group", "aria-label": "Color", style: { display: "flex", gap: 5, padding: "7px 9px 4px" }, children: swatches.map((sw, i) => {
+          const index = swatchFocusIndex[i];
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ColorSwatch,
+            {
+              ref: (el) => {
+                controlRefs.current[index] = el;
+              },
+              tabIndex: activeIndex === index ? 0 : -1,
+              onFocus: () => setActiveIndex(index),
+              color: sw.color,
+              active: sw.active,
+              onClick: sw.pick,
+              role: "menuitemradio",
+              "aria-checked": !!sw.active
+            },
+            i
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/internal/useDialog.ts
+var import_react6 = require("react");
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useDialog({ open, onClose }) {
+  const containerRef = (0, import_react6.useRef)(null);
+  const previouslyFocusedRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!open) return;
+    previouslyFocusedRef.current = document.activeElement;
+    const container = containerRef.current;
+    const focusables = container?.querySelectorAll(FOCUSABLE_SELECTOR);
+    (focusables?.[0] ?? container)?.focus();
+    return () => {
+      previouslyFocusedRef.current?.focus?.();
+    };
+  }, [open]);
+  (0, import_react6.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        if (containerRef.current?.contains(document.activeElement)) {
+          onClose?.();
+        }
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const container = containerRef.current;
+      if (!container) return;
+      const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  return containerRef;
+}
+
+// src/components/BottomSheet/BottomSheet.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function BottomSheet({
+  open,
+  onClose,
+  children,
+  maxHeight = "70%",
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const dialogRef = useDialog({ open, onClose });
+  if (!open) return null;
+  return (
+    // Escape (handled by useDialog) is the keyboard-equivalent way to
+    // dismiss the sheet; clicking the backdrop is a mouse-only convenience,
+    // not the only way to close it.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        onClick: onClose,
+        style: { position: "absolute", inset: 0, zIndex: 60, background: "rgba(24,23,20,0.4)", display: "flex", alignItems: "flex-end" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            tabIndex: -1,
+            onClick: (e) => e.stopPropagation(),
+            ...rest,
+            style: {
+              width: "100%",
+              boxSizing: "border-box",
+              background: "var(--color-background)",
+              borderRadius: "var(--radius-surface) var(--radius-surface) 0 0",
+              padding: "18px 18px 26px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              maxHeight,
+              overflowY: "auto",
+              boxShadow: "var(--shadow-sheet)",
+              ...style
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "aria-hidden": "true", style: { width: 36, height: 4, borderRadius: 2, background: "rgba(17,17,17,0.15)", margin: "0 auto 4px" } }),
+              children
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+
+// src/components/ImportExportModal/ImportExportModal.tsx
+var import_react7 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TAB_ORDER2 = ["import", "export"];
+var TAB_LABEL2 = { import: "IMPORT", export: "EXPORT" };
+function ImportExportModal({ open, tab = "import", onTabChange, onClose, children, ...rest }) {
+  const dialogRef = useDialog({ open, onClose });
+  const tabRefs = (0, import_react7.useRef)({});
+  (0, import_react7.useEffect)(() => {
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open]);
+  if (!open) return null;
+  const selectTab = (id) => onTabChange?.(id);
+  const handleTabKeyDown = (event, id) => {
+    const currentIndex = TAB_ORDER2.indexOf(id);
+    let nextIndex = null;
+    if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % TAB_ORDER2.length;
+    else if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + TAB_ORDER2.length) % TAB_ORDER2.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = TAB_ORDER2.length - 1;
+    if (nextIndex !== null) {
+      event.preventDefault();
+      const nextId = TAB_ORDER2[nextIndex];
+      selectTab(nextId);
+      tabRefs.current[nextId]?.focus();
+    }
+  };
+  return (
+    // Escape (handled by useDialog) is the keyboard-equivalent way to
+    // dismiss the modal; clicking the backdrop is a mouse-only convenience,
+    // not the only way to close it.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        onClick: onClose,
+        style: { position: "fixed", inset: 0, zIndex: 100, background: "rgba(24,23,20,0.42)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Import or export notes",
+            tabIndex: -1,
+            onClick: (e) => e.stopPropagation(),
+            ...rest,
+            style: {
+              width: 640,
+              maxWidth: "100%",
+              maxHeight: "86vh",
+              background: "var(--color-background)",
+              borderRadius: "var(--radius-surface)",
+              boxShadow: "var(--shadow-lg)",
+              padding: "20px 24px 22px",
+              boxSizing: "border-box",
+              display: "flex",
+              flexDirection: "column",
+              gap: 14,
+              overflowY: "auto"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "div",
+                  {
+                    role: "tablist",
+                    "aria-label": "Import or export",
+                    style: { display: "flex", alignItems: "center", gap: 4, background: "var(--color-stone-100)", borderRadius: "var(--radius-pill)", padding: 3 },
+                    children: TAB_ORDER2.map((id) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "button",
+                      {
+                        ref: (el) => {
+                          tabRefs.current[id] = el;
+                        },
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": tab === id,
+                        tabIndex: tab === id ? 0 : -1,
+                        onClick: () => selectTab(id),
+                        onKeyDown: (e) => handleTabKeyDown(e, id),
+                        style: {
+                          border: "none",
+                          borderRadius: 17,
+                          padding: "6px 16px",
+                          fontFamily: "var(--font-family-mono)",
+                          fontSize: "var(--font-size-sm)",
+                          letterSpacing: "0.1em",
+                          background: tab === id ? "var(--color-ink-900)" : "transparent",
+                          color: tab === id ? "var(--color-cream-50)" : "var(--color-text-muted)"
+                        },
+                        children: TAB_LABEL2[id]
+                      },
+                      id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { title: "Close", onClick: onClose, children: "\xD7" })
+              ] }),
+              children
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+function ExportRow({ title, sub, onCopy, copyLabel = "COPY", onDownload }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-xl)", padding: "12px 16px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)" }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: sub })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onCopy,
+        style: { border: "1px solid var(--border-medium)", background: "var(--color-surface)", color: "var(--color-text-secondary)", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.08em", padding: "7px 14px", borderRadius: "var(--radius-md)" },
+        children: copyLabel
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onDownload,
+        style: { border: "none", background: "var(--color-ink-900)", color: "var(--color-cream-50)", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.08em", padding: "8px 14px", borderRadius: "var(--radius-md)" },
+        children: "DOWNLOAD"
+      }
+    )
+  ] });
+}
+
+// src/components/TocRail/TocRail.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function TocRail({
+  items,
+  hovered,
+  onHoverIn,
+  onHoverOut,
+  "aria-label": ariaLabel = "Page outline",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      onMouseEnter: onHoverIn,
+      onMouseLeave: onHoverOut,
+      onFocus: onHoverIn,
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) onHoverOut?.();
+      },
+      ...rest,
+      style: { padding: "6px 4px", ...style },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ol", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }, children: items.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "button",
+        {
+          onClick: t.go,
+          "aria-current": t.active ? "true" : void 0,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            border: "none",
+            background: "none",
+            padding: "2px 4px",
+            fontFamily: "var(--font-family-mono)",
+            fontSize: "var(--font-size-sm)",
+            textAlign: "left"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  width: 7,
+                  height: 7,
+                  borderRadius: "50%",
+                  flexShrink: 0,
+                  background: t.active ? "var(--color-accent)" : "rgba(17,17,17,0.22)",
+                  transform: t.active ? "scale(1.4)" : "scale(1)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "span",
+              {
+                style: {
+                  width: hovered ? 82 : 0,
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  color: t.active ? "var(--color-accent)" : "var(--color-text-muted)",
+                  fontWeight: t.active ? 600 : 500,
+                  transition: "width var(--duration-standard) var(--ease-standard)"
+                },
+                children: t.label
+              }
+            )
+          ]
+        }
+      ) }, i)) })
+    }
+  );
+}
+
+// src/components/TocFab/TocFab.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function TocFab({ onClick, "aria-label": ariaLabel = "Open outline", style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      ...rest,
+      style: {
+        position: "absolute",
+        right: 16,
+        bottom: 16,
+        width: 46,
+        height: 46,
+        borderRadius: "50%",
+        border: "none",
+        background: "var(--color-surface-inverse)",
+        color: "var(--color-text-on-inverse)",
+        fontSize: 17,
+        boxShadow: "var(--shadow-fab)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 20,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": "true", children: "\u2630" })
+    }
+  );
+}
+
+// src/components/TocSheetList/TocSheetList.tsx
+var import_react8 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function TocSheetList({ items }) {
+  const headingId = (0, import_react8.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("nav", { "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        id: headingId,
+        style: {
+          fontFamily: "var(--font-family-mono)",
+          fontSize: "var(--font-size-xs)",
+          letterSpacing: "var(--letter-spacing-mono-wide)",
+          color: "var(--color-text-muted)",
+          marginBottom: 6
+        },
+        children: "OUTLINE"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ol", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: items.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "button",
+      {
+        onClick: t.go,
+        "aria-current": t.active ? "true" : void 0,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          border: "none",
+          background: "none",
+          padding: "10px 4px",
+          fontFamily: "var(--font-family-mono)",
+          fontSize: "var(--font-size-base)",
+          textAlign: "left",
+          width: "100%",
+          boxSizing: "border-box"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: { width: 7, height: 7, borderRadius: "50%", flexShrink: 0, background: t.active ? "var(--color-accent)" : "rgba(17,17,17,0.22)" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { color: t.active ? "var(--color-accent)" : "var(--color-text-muted)", fontWeight: t.active ? 600 : 500 }, children: t.label })
+        ]
+      }
+    ) }, i)) })
+  ] });
+}
+
+// src/components/CardShell/CardShell.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function CardShell({ children, dark = false, tint = false, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ...rest,
+      style: {
+        background: dark ? "var(--color-surface-code)" : tint ? "var(--color-accent-tint)" : "var(--color-surface)",
+        border: dark ? "none" : `1px solid ${tint ? "color-mix(in srgb, var(--color-accent) 22%, transparent)" : "var(--border-default)"}`,
+        borderRadius: "var(--radius-card)",
+        margin: "24px 0",
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/components/CardHeader/CardHeader.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function CardHeader({
+  eyebrow,
+  eyebrowColor = "var(--color-accent)",
+  title,
+  as: TitleTag = "span",
+  subtitle,
+  right,
+  dark = false,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...rest, style: { display: "flex", alignItems: "baseline", gap: 10, padding: "13px 16px 9px", minWidth: 0, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "span",
+      {
+        style: {
+          fontFamily: "var(--font-family-mono)",
+          fontSize: "var(--font-size-xs)",
+          letterSpacing: "var(--letter-spacing-mono-wide)",
+          color: eyebrowColor,
+          whiteSpace: "nowrap",
+          flexShrink: 0
+        },
+        children: eyebrow
+      }
+    ),
+    title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      TitleTag,
+      {
+        style: {
+          margin: 0,
+          fontSize: "var(--font-size-base)",
+          fontWeight: 600,
+          color: dark ? "#EDEBE3" : "var(--color-text-primary)",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          minWidth: 0
+        },
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: "var(--font-size-md)", color: dark ? "var(--color-ink-500)" : "var(--color-text-faint)", whiteSpace: "nowrap", flexShrink: 0 }, children: subtitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { flex: 1, minWidth: 4 } }),
+    right
+  ] });
+}
+
+// src/components/TextBlock/TextBlock.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function TextBlock({ text, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { ...rest, style: { margin: "18px 0", color: "var(--color-text-body)", textWrap: "pretty", ...style }, children: text });
+}
+
+// src/components/EquationBlock/EquationBlock.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function EquationBlock({ tex, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...rest, style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: "17px", color: "var(--color-text-primary)" }, children: tex }) });
+}
+
+// src/components/IntuitionCallout/IntuitionCallout.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        margin: "18px 0",
+        padding: "13px 16px",
+        borderRadius: "var(--radius-lg)",
+        background: "var(--color-warning-tint)",
+        border: "1px solid var(--color-warning-border)",
+        fontSize: "var(--font-size-lg)",
+        color: "var(--color-text-secondary)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 6 }, children: label }),
+        text
+      ]
+    }
+  );
+}
+
+// src/components/WalkthroughCard/WalkthroughCard.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...rest }) {
+  const visible = steps.slice(0, currentStep + 1);
+  const atStart = currentStep === 0;
+  const atEnd = currentStep === steps.length - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        background: "var(--color-surface)",
+        border: "1px solid var(--border-default)",
+        borderRadius: "var(--radius-card)",
+        margin: "24px 0",
+        padding: "16px 20px 14px",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "WALKTHROUGH" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap" }, children: [
+            "STEP ",
+            currentStep + 1,
+            " OF ",
+            steps.length
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "26px 1fr",
+              gap: 12,
+              padding: "9px 0",
+              borderTop: "1px solid var(--border-subtle)",
+              opacity: i === currentStep ? 1 : 0.65
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "span",
+                {
+                  style: {
+                    width: 24,
+                    height: 24,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontFamily: "var(--font-family-mono)",
+                    fontSize: "var(--font-size-sm)",
+                    marginTop: 4,
+                    background: i === currentStep ? "var(--color-accent)" : "var(--color-stone-100)",
+                    color: i === currentStep ? "#fff" : "var(--color-text-faint)"
+                  },
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", textAlign: "center", fontSize: 15, color: "var(--color-text-primary)" }, children: s.tex }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", textAlign: "center" }, children: s.note })
+              ] })
+            ]
+          },
+          i
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onPrev,
+              disabled: atStart,
+              style: {
+                border: "1px solid var(--border-strong)",
+                background: "#fff",
+                borderRadius: "var(--radius-sm)",
+                padding: "5px 14px",
+                fontFamily: "var(--font-family-mono)",
+                fontSize: "var(--font-size-sm)",
+                color: "var(--color-text-secondary)",
+                opacity: atStart ? 0.4 : 1
+              },
+              children: "\u2039 Back"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onNext,
+              disabled: atEnd,
+              style: {
+                border: "none",
+                background: "var(--color-accent)",
+                borderRadius: "var(--radius-sm)",
+                padding: "6px 16px",
+                fontFamily: "var(--font-family-mono)",
+                fontSize: "var(--font-size-sm)",
+                color: "#fff",
+                opacity: atEnd ? 0.4 : 1
+              },
+              children: atEnd ? "Done \u2713" : "Next step \u203A"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/CodeCard/CodeCard.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-code-green)", whiteSpace: "nowrap", flexShrink: 0 }, children: "CODE" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "#EDEBE3", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-500)", whiteSpace: "nowrap", flexShrink: 0 }, children: lang }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { flex: 1, minWidth: 4 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onCopy,
+          style: { border: "none", background: "none", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-400)", padding: "2px 7px", borderRadius: 5, whiteSpace: "nowrap", flexShrink: 0 },
+          children: copyLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { style: { margin: 0, padding: "4px 20px 18px", overflowX: "auto", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-base)", lineHeight: "var(--line-height-relaxed)", color: "var(--color-text-on-code)", whiteSpace: "pre-wrap" }, children: code })
+  ] });
+}
+
+// src/components/TableCard/TableCard.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var srOnly = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function TableCard({ title, header, rows, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 18px", ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "COMPARE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: header.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "th",
+            {
+              scope: "col",
+              style: {
+                textAlign: "left",
+                padding: "8px 10px",
+                fontWeight: i === 0 ? 400 : 600,
+                color: i === 0 ? "var(--color-text-muted)" : "var(--color-text-primary)",
+                fontFamily: i === 0 ? "var(--font-family-mono)" : "inherit",
+                fontSize: i === 0 ? "var(--font-size-sm)" : "inherit",
+                borderBottom: "1px solid var(--border-subtle)"
+              },
+              children: h || /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: srOnly, children: "Row label" })
+            },
+            i
+          )) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: r.map((c, ci) => {
+            const cellStyle = {
+              padding: "8px 10px",
+              color: ci === 0 ? "var(--color-text-muted)" : "var(--color-text-secondary)",
+              fontFamily: ci === 0 ? "var(--font-family-mono)" : "inherit",
+              fontSize: ci === 0 ? "var(--font-size-sm)" : "inherit",
+              borderBottom: ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)"
+            };
+            return ci === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "row", style: { ...cellStyle, textAlign: "left", fontWeight: 400 }, children: c }, ci) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { style: cellStyle, children: c }, ci);
+          }) }, ri)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/QuizCard/QuizCard.tsx
+var import_react9 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
+  const answerId = (0, import_react9.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: {
+        background: "var(--color-accent-tint)",
+        border: "1px solid color-mix(in srgb, var(--color-accent) 22%, transparent)",
+        borderRadius: "var(--radius-card)",
+        margin: "24px 0",
+        padding: "16px 20px 18px",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "CHECKPOINT" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap" }, children: "Still with it?" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { style: { margin: "0 0 10px", fontSize: "var(--font-size-lg)", color: "var(--color-text-body)" }, children: question }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleQuiz,
+            "aria-expanded": answerOpen,
+            "aria-controls": answerId,
+            style: { border: "none", background: "none", padding: 0, fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-base)", color: "var(--color-accent)", whiteSpace: "nowrap" },
+            children: quizLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onAddFlash,
+            style: { marginLeft: 14, border: "none", background: "none", padding: 0, fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", whiteSpace: "nowrap" },
+            children: addFlashLabel
+          }
+        ),
+        answerOpen && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            id: answerId,
+            style: {
+              marginTop: 10,
+              padding: "12px 15px",
+              borderRadius: "var(--radius-lg)",
+              background: "var(--color-surface)",
+              border: "1px solid color-mix(in srgb, var(--color-accent) 18%, transparent)",
+              fontSize: "var(--font-size-base)",
+              color: "var(--color-text-secondary)"
+            },
+            children: answer
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ImageCard/ImageCard.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 20px", ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("image-slot", { id: slotId, shape: "rounded", radius: "10", placeholder, style: { width: "100%", height, display: "block" } }),
+    caption && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 8, fontSize: "var(--font-size-md)", color: "var(--color-text-muted)", textAlign: "center" }, children: caption })
+  ] });
+}
+
+// src/components/RelatedCard/RelatedCard.tsx
+var import_react10 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function RelatedCard({ items, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "RELATED" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((it, i) => {
+      const Element = it.as ?? (it.href ? "a" : "button");
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: (0, import_react10.createElement)(
+        Element,
+        {
+          type: Element === "button" ? "button" : void 0,
+          href: it.href,
+          onClick: it.onClick,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            width: "100%",
+            boxSizing: "border-box",
+            border: "1px solid var(--border-medium)",
+            background: "var(--color-background)",
+            borderRadius: "var(--radius-xl)",
+            padding: "9px 12px",
+            fontFamily: "inherit",
+            fontSize: "var(--font-size-base)",
+            color: "var(--color-text-secondary)",
+            textAlign: "left",
+            textDecoration: "none"
+          }
+        },
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: it.color, flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { flex: 1 }, children: it.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" })
+      ) }, i);
+    }) })
+  ] });
+}
+
+// src/components/ReferencesCard/ReferencesCard.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ReferencesCard({ items, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "REFERENCES" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { style: { display: "flex", alignItems: "baseline", gap: 8, fontSize: "var(--font-size-base)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { color: "var(--color-text-secondary)" }, children: t })
+    ] }, i)) })
+  ] });
+}
+
+// src/components/AnnotationPanel/AnnotationPanel.tsx
+var import_react11 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
+  const labelId = (0, import_react11.useId)();
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { marginTop: 10, background: "var(--color-annotation-fill)", borderLeft: "3px solid var(--color-annotation-border)", borderRadius: "0 8px 8px 0", padding: "10px 14px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: labelId, style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.14em", color: "var(--color-annotation-label)", marginBottom: 5 }, children: "MY NOTE" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "textarea",
+      {
+        "aria-labelledby": labelId,
+        value,
+        onChange,
+        rows: 2,
+        placeholder,
+        ...rest,
+        style: { width: "100%", boxSizing: "border-box", border: "none", background: "none", fontFamily: "var(--font-family-hand)", fontSize: "14.5px", color: "var(--color-annotation-text)", resize: "vertical", padding: 0 }
+      }
+    )
+  ] });
+}
+
+// src/components/AnnotationToggle/AnnotationToggle.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function AnnotationToggle({
+  hasText = false,
+  open = false,
+  onClick,
+  hot = false,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
+  const visible = hot || open || hasText || active;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      ...rest,
+      ...interactionHandlers,
+      style: {
+        border: "none",
+        background: "none",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "var(--font-size-xs)",
+        letterSpacing: "0.06em",
+        color: "var(--color-annotation-label)",
+        padding: "2px 7px",
+        borderRadius: 5,
+        whiteSpace: "nowrap",
+        opacity: visible ? 1 : 0
+      },
+      children: hasText ? "\u270E My note" : "+ My note"
+    }
+  );
+}
+
+// src/components/McqOption/McqOption.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var STATE_TEXT = { correct: "Correct", wrong: "Incorrect" };
+function McqOption({ label, state = "default", onClick, ...rest }) {
+  let border = "var(--border-medium)";
+  let bg = "var(--color-surface)";
+  let color = "var(--color-text-body)";
+  let mark = "";
+  if (state === "correct") {
+    border = "var(--color-success-border)";
+    bg = "var(--color-success-tint)";
+    color = "var(--color-success)";
+    mark = "\u2713";
+  }
+  if (state === "wrong") {
+    border = "var(--color-danger-border)";
+    bg = "var(--color-danger-tint)";
+    color = "var(--color-danger)";
+    mark = "\u2715";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: state !== "default",
+      ...rest,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 10,
+        textAlign: "left",
+        border: `1px solid ${border}`,
+        background: bg,
+        color,
+        borderRadius: "var(--radius-lg)",
+        padding: "9px 13px",
+        fontFamily: "inherit",
+        fontSize: "var(--font-size-lg)",
+        width: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: label }),
+        mark && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true", children: mark }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: "hidden",
+                clip: "rect(0, 0, 0, 0)",
+                whiteSpace: "nowrap",
+                border: 0
+              },
+              children: [
+                " ",
+                "(",
+                STATE_TEXT[state],
+                ")"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/FillBlankInput/FillBlankInput.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function FillBlankInput({ value, onChange, checked = false, correct = false, onCheck, resultLabel, style, ...rest }) {
+  const borderColor = checked ? correct ? "var(--color-success-border)" : "var(--color-danger-border)" : "var(--border-medium)";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...rest, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        TextInput,
+        {
+          value,
+          onChange,
+          placeholder: "Your answer",
+          "aria-label": "Your answer",
+          "aria-invalid": checked ? !correct : void 0,
+          style: { flex: 1, border: `1px solid ${borderColor}`, background: "var(--color-background)", fontSize: "var(--font-size-lg)" }
+        }
+      ),
+      !checked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onCheck,
+          style: { border: "none", background: "var(--color-accent)", color: "#fff", borderRadius: "var(--radius-md)", padding: "0 16px", fontFamily: "inherit", fontSize: "var(--font-size-base)", fontWeight: 600 },
+          children: "Check"
+        }
+      )
+    ] }),
+    checked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "aria-live": "polite", style: { marginTop: 12, padding: "13px 16px", borderRadius: "var(--radius-lg)", background: "var(--color-surface-sunken)", border: "1px solid var(--border-subtle)" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.1em", color: correct ? "var(--color-success)" : "var(--color-danger)" }, children: resultLabel }) })
+  ] });
+}
+
+// src/components/ScenarioBox/ScenarioBox.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function ScenarioBox({ text, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      ...rest,
+      style: { margin: "2px 0 12px", padding: "12px 14px", borderRadius: "var(--radius-lg)", background: "var(--color-warning-tint)", border: "1px solid var(--color-warning-border)", ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 5 }, children: "SCENARIO" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { style: { margin: 0, fontSize: "var(--font-size-base)", color: "var(--color-ink-700)", textWrap: "pretty" }, children: text })
+      ]
+    }
+  );
+}
+
+// src/components/Flashcard/Flashcard.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { textAlign: "right", marginBottom: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.1em", color: "var(--color-ink-300)" }, children: boxLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onFlip,
+        "aria-pressed": flipped,
+        ...rest,
+        style: {
+          display: "block",
+          width: "100%",
+          minHeight: 220,
+          background: "var(--color-surface)",
+          border: "1px solid var(--border-medium)",
+          borderRadius: "var(--radius-surface)",
+          padding: "30px 34px",
+          fontFamily: "inherit",
+          textAlign: "center",
+          boxShadow: "var(--shadow-sm)",
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "aria-live": "polite", children: !flipped ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-text-faint)", marginBottom: 18 }, children: "PROMPT" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { fontSize: "var(--font-size-2xl)", fontWeight: 600, color: "var(--color-text-primary)", marginBottom: 14, textWrap: "pretty" }, children: front }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-300)", marginTop: 26 }, children: "tap to reveal" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-accent)", marginBottom: 18 }, children: "ANSWER" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { fontSize: "var(--font-size-lg)", color: "var(--color-text-tertiary)", textWrap: "pretty" }, children: back })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+// src/components/RateButtons/RateButtons.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var buttonStyle = (border, bg, color) => ({
+  border: `1px solid ${border}`,
+  background: bg,
+  color,
+  borderRadius: "var(--radius-lg)",
+  padding: "8px 22px",
+  fontFamily: "inherit",
+  fontSize: "var(--font-size-lg)",
+  fontWeight: 600
+});
+function RateButtons({ enabled = false, onAgain, onGood, onEasy, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { role: "group", "aria-label": "Rate your recall", ...rest, style: { display: "flex", gap: 10, justifyContent: "center", marginTop: 18, opacity: enabled ? 1 : 0.25, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: onAgain, disabled: !enabled, style: buttonStyle("var(--color-danger-border)", "var(--color-danger-tint)", "var(--color-danger)"), children: "Again" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: onGood, disabled: !enabled, style: buttonStyle("var(--color-warning-border)", "var(--color-warning-tint)", "var(--color-warning)"), children: "Good" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: onEasy, disabled: !enabled, style: buttonStyle("var(--color-success-border)", "var(--color-success-tint)", "var(--color-success)"), children: "Easy" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnnotationPanel,
+  AnnotationToggle,
+  Avatar,
+  Badge,
+  BottomSheet,
+  Button,
+  CardHeader,
+  CardShell,
+  CodeCard,
+  ColorSwatch,
+  ContextMenu,
+  DragHandle,
+  EquationBlock,
+  ExportRow,
+  FillBlankInput,
+  Flashcard,
+  IconButton,
+  ImageCard,
+  ImportExportModal,
+  IntuitionCallout,
+  McqOption,
+  NavTabs,
+  NoteRow,
+  QuizCard,
+  RateButtons,
+  ReferencesCard,
+  RelatedCard,
+  ScenarioBox,
+  Sidebar,
+  SolvedStatusButton,
+  TableCard,
+  TagChip,
+  TextArea,
+  TextBlock,
+  TextInput,
+  TocFab,
+  TocRail,
+  TocSheetList,
+  TopicRow,
+  WalkthroughCard
+});
+//# sourceMappingURL=index.cjs.map