clio-design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,2096 @@
+// src/components/Button/Button.tsx
+import { jsx, jsxs } from "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__ */ jsxs("button", { type: "button", title, disabled, onClick, ...rest, style, children: [
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: "13px", lineHeight: 1 }, children: icon }) : null,
+    children
+  ] });
+}
+
+// src/internal/useHover.ts
+import { useState } from "react";
+function useHover(options = {}) {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = 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
+import { jsx as jsx2 } from "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__ */ jsx2(
+    "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
+import { jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2(
+    "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__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            onClick,
+            ...rest,
+            style: { border: "none", background: "none", padding: 0, font: "inherit", color: "inherit", cursor: "pointer" },
+            children: [
+              "#",
+              label
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ jsx3(
+          "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
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Badge({ variant = "mono", children, color, tint }) {
+  if (variant === "topic") {
+    return /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+      "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__ */ jsx4(
+      "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__ */ jsx4(
+    "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
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SolvedStatusButton({ solved = false, onClick, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "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
+import { jsx as jsx6 } from "react/jsx-runtime";
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  mono = false,
+  autoFocus = false,
+  style,
+  "aria-label": ariaLabel,
+  type = "text",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx6(
+    "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
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TextArea({
+  value,
+  onChange,
+  placeholder,
+  rows = 6,
+  mono = true,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7(
+    "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
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Avatar({ initial = "M", size = 28, dark = false, style, ...rest }) {
+  return /* @__PURE__ */ jsx8(
+    "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
+import { forwardRef } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ColorSwatch = forwardRef(function ColorSwatch2({ color, active = false, onClick, size = 17, title = "Recolor", ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(
+    "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
+import { jsx as jsx10 } from "react/jsx-runtime";
+function DragHandle({ onDragStart, title = "Drag to reorder", style, ...rest }) {
+  return /* @__PURE__ */ jsx10(
+    "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
+import { useRef } from "react";
+import { jsx as jsx11, jsxs as jsxs3 } from "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__ */ jsxs3(
+    "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__ */ jsx11(Badge, { variant: "count", color: "inherit", tint: "rgba(255,255,255,0.22)", children: badge })
+      ]
+    }
+  );
+}
+function NavTabs({ active = "notes", onChange, reviewCount = 0, ...rest }) {
+  const buttonRefs = 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__ */ jsx11("div", { role: "tablist", "aria-label": "Sections", ...rest, style: { display: "flex", alignItems: "center", gap: 6, ...rest.style }, children: TAB_ORDER.map((id) => /* @__PURE__ */ jsx11(
+    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
+import { useId } from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function Sidebar({
+  collapsed = false,
+  onToggle,
+  label,
+  width = 222,
+  children,
+  borderSide = "right",
+  style,
+  ...rest
+}) {
+  const contentId = useId();
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        borderRight: borderSide === "right" ? "1px solid var(--border-hairline)" : "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx12("div", { style: { width: 26, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 16 }, children: /* @__PURE__ */ jsx12(
+          IconButton,
+          {
+            title: collapsed ? "Expand" : "Collapse",
+            onClick: onToggle,
+            size: 22,
+            radius: "var(--radius-sm)",
+            "aria-expanded": !collapsed,
+            "aria-controls": contentId,
+            children: /* @__PURE__ */ jsx12(
+              "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__ */ jsx12(
+          "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__ */ jsxs4("div", { style: { width, minHeight: "100%", boxSizing: "border-box", padding: "16px 10px 16px 0", display: "flex", flexDirection: "column", gap: 3 }, children: [
+              label && /* @__PURE__ */ jsx12(
+                "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
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function TopicRow({
+  name,
+  color,
+  notesLabel,
+  selected = false,
+  onClick,
+  onMenuClick,
+  draggable = true,
+  onDragStart,
+  dense = false,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsx13(DragHandle, { onDragStart }),
+        /* @__PURE__ */ jsxs5(
+          "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__ */ jsx13("span", { style: { width: 7, height: 7, borderRadius: "50%", flexShrink: 0, background: color, marginTop: 6 } }),
+              /* @__PURE__ */ jsxs5("span", { style: { display: "flex", flexDirection: "column", gap: 5, flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx13(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--font-size-base)",
+                      fontWeight: selected ? 600 : 500,
+                      color: selected ? "var(--color-text-primary)" : "var(--color-text-secondary)"
+                    },
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  "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__ */ jsx13("div", { style: { position: "absolute", top: 8, right: 6 }, children: /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            title: "Topic options",
+            onClick: (e) => {
+              e.stopPropagation();
+              onMenuClick(e);
+            },
+            size: 22,
+            radius: "var(--radius-sm)",
+            children: "\u22EF"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/NoteRow/NoteRow.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function NoteRow({
+  title,
+  meta,
+  selected = false,
+  showTopic = false,
+  topicColor,
+  topicName,
+  tags = [],
+  onClick,
+  onMenuClick,
+  draggable = true,
+  onDragStart,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsx14(DragHandle, { onDragStart, style: { marginTop: 1 } }),
+        /* @__PURE__ */ jsxs6(
+          "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__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ jsx14("span", { style: { width: 6, height: 6, borderRadius: "50%", background: topicColor } }),
+                /* @__PURE__ */ jsx14(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--font-family-mono)",
+                      fontSize: "9px",
+                      letterSpacing: "0.08em",
+                      color: "var(--color-text-faint)",
+                      textTransform: "uppercase"
+                    },
+                    children: topicName
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx14(
+                "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__ */ jsx14("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-2xs)", color: "var(--color-text-faint)" }, children: meta }),
+              tags.length > 0 && !selected && /* @__PURE__ */ jsx14("span", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 1 }, children: tags.map((t, i) => /* @__PURE__ */ jsxs6(
+                "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__ */ jsx14("div", { style: { position: "absolute", top: 7, right: 4 }, children: /* @__PURE__ */ jsx14(
+          IconButton,
+          {
+            title: "Concept options",
+            onClick: (e) => {
+              e.stopPropagation();
+              onMenuClick(e);
+            },
+            size: 22,
+            radius: "var(--radius-sm)",
+            children: "\u22EF"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/ContextMenu/ContextMenu.tsx
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "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 = useRef2([]);
+  const [activeIndex, setActiveIndex] = useState2(0);
+  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__ */ jsxs7(
+    "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__ */ jsx15("div", { role: "separator", "aria-orientation": "horizontal", style: { height: 1, background: "var(--border-subtle)", margin: "2px 4px" } }, i);
+          }
+          const index = itemFocusIndex[i];
+          return /* @__PURE__ */ jsxs7(
+            "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__ */ jsx15("span", { "aria-hidden": "true", style: { marginRight: 7 }, children: it.icon }),
+                it.label
+              ]
+            },
+            i
+          );
+        }),
+        swatches && /* @__PURE__ */ jsx15("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__ */ jsx15(
+            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
+import { useEffect as useEffect2, useRef as useRef3 } from "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 = useRef3(null);
+  const previouslyFocusedRef = useRef3(null);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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
+import { jsx as jsx16, jsxs as jsxs8 } from "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__ */ jsx16(
+      "div",
+      {
+        onClick: onClose,
+        style: { position: "absolute", inset: 0, zIndex: 60, background: "rgba(24,23,20,0.4)", display: "flex", alignItems: "flex-end" },
+        children: /* @__PURE__ */ jsxs8(
+          "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__ */ jsx16("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
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { jsx as jsx17, jsxs as jsxs9 } from "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 = useRef4({});
+  useEffect3(() => {
+    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__ */ jsx17(
+      "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__ */ jsxs9(
+          "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__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx17(
+                  "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__ */ jsx17(
+                      "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__ */ jsx17(IconButton, { title: "Close", onClick: onClose, children: "\xD7" })
+              ] }),
+              children
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+function ExportRow({ title, sub, onCopy, copyLabel = "COPY", onDownload }) {
+  return /* @__PURE__ */ jsxs9("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__ */ jsxs9("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }, children: [
+      /* @__PURE__ */ jsx17("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)" }, children: title }),
+      /* @__PURE__ */ jsx17("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__ */ jsx17(
+      "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__ */ jsx17(
+      "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
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function TocRail({
+  items,
+  hovered,
+  onHoverIn,
+  onHoverOut,
+  "aria-label": ariaLabel = "Page outline",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx18(
+    "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__ */ jsx18("ol", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }, children: items.map((t, i) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsxs10(
+        "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__ */ jsx18(
+              "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__ */ jsx18(
+              "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
+import { jsx as jsx19 } from "react/jsx-runtime";
+function TocFab({ onClick, "aria-label": ariaLabel = "Open outline", style, ...rest }) {
+  return /* @__PURE__ */ jsx19(
+    "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__ */ jsx19("span", { "aria-hidden": "true", children: "\u2630" })
+    }
+  );
+}
+
+// src/components/TocSheetList/TocSheetList.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function TocSheetList({ items }) {
+  const headingId = useId2();
+  return /* @__PURE__ */ jsxs11("nav", { "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ jsx20(
+      "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__ */ jsx20("ol", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: items.map((t, i) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsxs11(
+      "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__ */ jsx20(
+            "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__ */ jsx20("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
+import { jsx as jsx21 } from "react/jsx-runtime";
+function CardShell({ children, dark = false, tint = false, style, ...rest }) {
+  return /* @__PURE__ */ jsx21(
+    "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
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function CardHeader({
+  eyebrow,
+  eyebrowColor = "var(--color-accent)",
+  title,
+  as: TitleTag = "span",
+  subtitle,
+  right,
+  dark = false,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs12("div", { ...rest, style: { display: "flex", alignItems: "baseline", gap: 10, padding: "13px 16px 9px", minWidth: 0, ...style }, children: [
+    /* @__PURE__ */ jsx22(
+      "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__ */ jsx22(
+      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__ */ jsx22("span", { style: { fontSize: "var(--font-size-md)", color: dark ? "var(--color-ink-500)" : "var(--color-text-faint)", whiteSpace: "nowrap", flexShrink: 0 }, children: subtitle }),
+    /* @__PURE__ */ jsx22("span", { style: { flex: 1, minWidth: 4 } }),
+    right
+  ] });
+}
+
+// src/components/TextBlock/TextBlock.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function TextBlock({ text, style, ...rest }) {
+  return /* @__PURE__ */ jsx23("p", { ...rest, style: { margin: "18px 0", color: "var(--color-text-body)", textWrap: "pretty", ...style }, children: text });
+}
+
+// src/components/EquationBlock/EquationBlock.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function EquationBlock({ tex, style, ...rest }) {
+  return /* @__PURE__ */ jsx24("div", { ...rest, style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style }, children: /* @__PURE__ */ jsx24("span", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: "17px", color: "var(--color-text-primary)" }, children: tex }) });
+}
+
+// src/components/IntuitionCallout/IntuitionCallout.tsx
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
+  return /* @__PURE__ */ jsxs13(
+    "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__ */ jsx25("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
+import { jsx as jsx26, jsxs as jsxs14 } from "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__ */ jsxs14(
+    "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__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
+            /* @__PURE__ */ jsx26("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__ */ jsx26("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__ */ jsxs14("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__ */ jsx26("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ jsxs14(
+          "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__ */ jsx26(
+                "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__ */ jsxs14("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx26("div", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", textAlign: "center", fontSize: 15, color: "var(--color-text-primary)" }, children: s.tex }),
+                /* @__PURE__ */ jsx26("div", { style: { fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", textAlign: "center" }, children: s.note })
+              ] })
+            ]
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
+          /* @__PURE__ */ jsx26(
+            "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__ */ jsx26(
+            "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
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
+  return /* @__PURE__ */ jsxs15("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
+    /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx27("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__ */ jsx27("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "#EDEBE3", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title }),
+      /* @__PURE__ */ jsx27("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-500)", whiteSpace: "nowrap", flexShrink: 0 }, children: lang }),
+      /* @__PURE__ */ jsx27("span", { style: { flex: 1, minWidth: 4 } }),
+      /* @__PURE__ */ jsx27(
+        "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__ */ jsx27("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
+import { jsx as jsx28, jsxs as jsxs16 } from "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__ */ jsxs16(
+    "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__ */ jsxs16("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsx28("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__ */ jsx28("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__ */ jsxs16("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
+          /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsx28("tr", { children: header.map((h, i) => /* @__PURE__ */ jsx28(
+            "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__ */ jsx28("span", { style: srOnly, children: "Row label" })
+            },
+            i
+          )) }) }),
+          /* @__PURE__ */ jsx28("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx28("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__ */ jsx28("th", { scope: "row", style: { ...cellStyle, textAlign: "left", fontWeight: 400 }, children: c }, ci) : /* @__PURE__ */ jsx28("td", { style: cellStyle, children: c }, ci);
+          }) }, ri)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/QuizCard/QuizCard.tsx
+import { useId as useId3 } from "react";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
+  const answerId = useId3();
+  return /* @__PURE__ */ jsxs17(
+    "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__ */ jsxs17("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
+          /* @__PURE__ */ jsx29("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__ */ jsx29("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap" }, children: "Still with it?" })
+        ] }),
+        /* @__PURE__ */ jsx29("p", { style: { margin: "0 0 10px", fontSize: "var(--font-size-lg)", color: "var(--color-text-body)" }, children: question }),
+        /* @__PURE__ */ jsx29(
+          "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__ */ jsx29(
+          "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__ */ jsx29(
+          "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
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
+  return /* @__PURE__ */ jsxs18("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__ */ jsxs18("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsx30("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__ */ jsx30("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__ */ jsx30("image-slot", { id: slotId, shape: "rounded", radius: "10", placeholder, style: { width: "100%", height, display: "block" } }),
+    caption && /* @__PURE__ */ jsx30("div", { style: { marginTop: 8, fontSize: "var(--font-size-md)", color: "var(--color-text-muted)", textAlign: "center" }, children: caption })
+  ] });
+}
+
+// src/components/RelatedCard/RelatedCard.tsx
+import { createElement } from "react";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+function RelatedCard({ items, style, ...rest }) {
+  return /* @__PURE__ */ jsxs19("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__ */ jsx31("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsx31("li", { children: 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__ */ jsx31("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: it.color, flexShrink: 0 } }),
+        /* @__PURE__ */ jsx31("span", { style: { flex: 1 }, children: it.label }),
+        /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" })
+      ) }, i);
+    }) })
+  ] });
+}
+
+// src/components/ReferencesCard/ReferencesCard.tsx
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+function ReferencesCard({ items, style, ...rest }) {
+  return /* @__PURE__ */ jsxs20("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__ */ jsx32("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ jsx32("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__ */ jsx32("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((t, i) => /* @__PURE__ */ jsxs20("li", { style: { display: "flex", alignItems: "baseline", gap: 8, fontSize: "var(--font-size-base)" }, children: [
+      /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" }),
+      /* @__PURE__ */ jsx32("span", { style: { color: "var(--color-text-secondary)" }, children: t })
+    ] }, i)) })
+  ] });
+}
+
+// src/components/AnnotationPanel/AnnotationPanel.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
+  const labelId = useId4();
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs21("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__ */ jsx33("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__ */ jsx33(
+      "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
+import { jsx as jsx34 } from "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__ */ jsx34(
+    "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
+import { jsx as jsx35, jsxs as jsxs22 } from "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__ */ jsxs22(
+    "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__ */ jsx35("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: label }),
+        mark && /* @__PURE__ */ jsxs22("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", children: mark }),
+          /* @__PURE__ */ jsxs22(
+            "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
+import { jsx as jsx36, jsxs as jsxs23 } from "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__ */ jsxs23("div", { ...rest, style, children: [
+    /* @__PURE__ */ jsxs23("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
+      /* @__PURE__ */ jsx36(
+        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__ */ jsx36(
+        "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__ */ jsx36("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__ */ jsx36("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
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+function ScenarioBox({ text, style, ...rest }) {
+  return /* @__PURE__ */ jsxs24(
+    "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__ */ jsx37("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__ */ jsx37("p", { style: { margin: 0, fontSize: "var(--font-size-base)", color: "var(--color-ink-700)", textWrap: "pretty" }, children: text })
+      ]
+    }
+  );
+}
+
+// src/components/Flashcard/Flashcard.tsx
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
+  return /* @__PURE__ */ jsxs25("div", { children: [
+    /* @__PURE__ */ jsx38("div", { style: { textAlign: "right", marginBottom: 6 }, children: /* @__PURE__ */ jsx38("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.1em", color: "var(--color-ink-300)" }, children: boxLabel }) }),
+    /* @__PURE__ */ jsx38(
+      "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__ */ jsx38("div", { "aria-live": "polite", children: !flipped ? /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx38("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__ */ jsx38("div", { style: { fontSize: "var(--font-size-2xl)", fontWeight: 600, color: "var(--color-text-primary)", marginBottom: 14, textWrap: "pretty" }, children: front }),
+          /* @__PURE__ */ jsx38("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-300)", marginTop: 26 }, children: "tap to reveal" })
+        ] }) : /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx38("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__ */ jsx38("div", { style: { fontSize: "var(--font-size-lg)", color: "var(--color-text-tertiary)", textWrap: "pretty" }, children: back })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+// src/components/RateButtons/RateButtons.tsx
+import { jsx as jsx39, jsxs as jsxs26 } from "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__ */ jsxs26("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__ */ jsx39("button", { type: "button", onClick: onAgain, disabled: !enabled, style: buttonStyle("var(--color-danger-border)", "var(--color-danger-tint)", "var(--color-danger)"), children: "Again" }),
+    /* @__PURE__ */ jsx39("button", { type: "button", onClick: onGood, disabled: !enabled, style: buttonStyle("var(--color-warning-border)", "var(--color-warning-tint)", "var(--color-warning)"), children: "Good" }),
+    /* @__PURE__ */ jsx39("button", { type: "button", onClick: onEasy, disabled: !enabled, style: buttonStyle("var(--color-success-border)", "var(--color-success-tint)", "var(--color-success)"), children: "Easy" })
+  ] });
+}
+export {
+  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.js.map