@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,457 @@
+@layer tokens {
+  /* ─────────────────────────────────────────────────────────────────────────
+   * Scale tokens. Theme-independent. Never redeclared in a theme block.
+   * Radius and spacing use the library's shared pixel and rem scales.
+   * ───────────────────────────────────────────────────────────────────────── */
+  :root {
+    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --font-size-xs: 0.75rem; /* 12 — badges, micro-labels */
+    --font-size-sm: 0.875rem; /* 14 — buttons, secondary cells */
+    --font-size-md: 1rem; /* 16 — body */
+    --font-size-md-lg: 1.0625rem; /* 17 — primary table cell */
+    --font-size-lead: 1.25rem; /* 20 */
+    --font-size-lg: 1.5rem; /* 24 — section titles */
+    --font-size-xl: 2rem; /* 32 — page titles */
+    --font-size-display: 3rem; /* 48 — empty states, marketing only */
+
+    --line-height-tight: 1.15;
+    --line-height-body: 1.5;
+
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-pill: 999px;
+    --field-radius: 4px;
+
+    --field-height-sm: var(--space-8); /* 32 */
+    --field-height-md: var(--space-10); /* 40 */
+    --field-height-lg: var(--space-12); /* 48 */
+    --field-font-size-sm: 0.8125rem; /* 13 */
+    --field-font-size-md: 0.9375rem; /* 15 */
+
+    /* Writing surfaces — the editor's three body heights. */
+    --editor-height-sm: 8rem;
+    --editor-height-md: 14rem;
+    --editor-height-lg: 22rem;
+
+    /* Navigation — one rail width, one bar height, everywhere in the product. */
+    --sidenav-width: 17rem;
+    --sidenav-width-collapsed: 4rem;
+    --nav-item-height: var(--space-10);
+    --topnav-height: 4rem;
+    --subnav-height: var(--space-12);
+    --choice-card-min-width: 15rem;
+
+    /* Stepper — one marker size, one connector weight. */
+    --stepper-marker-size: var(--space-8);
+    --stepper-marker-size-sm: var(--space-6);
+    --stepper-connector-width: var(--control-border-width);
+
+
+    /* Boards — one lane width, so every board in the product lines up. */
+    --board-column-width: 19rem;
+    --board-column-max-height: 34rem;
+    --board-column-min-body: 6rem;
+
+    /* Media library — one tile width everywhere, so grids line up across
+     * pickers, drawers and full pages. The grid auto-fills to the container. */
+    --asset-tile-min-width: 11rem;
+    --asset-tile-gap: var(--space-4);
+    --asset-thumb-aspect: 4 / 3;
+
+    /* Cropper — the stage is a fixed working surface, not a preview. */
+    --cropper-stage-height: 22rem;
+    --cropper-grid-color: rgb(255 255 255 / 28%);
+    --cropper-veil: rgb(0 0 0 / 45%);
+
+    /* Pickers — one popover height everywhere a list floats over the page. */
+    --menu-max-height: 18rem;
+    --calendar-cell-size: 2.25rem;
+
+    /* Sliders — one track, one thumb, in every size of field. */
+    --slider-track-height: 6px;
+    --slider-thumb-size: 20px;
+
+    /* Switch — the only control whose knob moves; the frame never does. */
+    --switch-width: 44px;
+    --switch-height: 24px;
+    --switch-knob-size: 16px;
+
+    /* Entry picker — thumbnail square and the list's working height. */
+    --entry-thumb-size: 3rem;
+    --entry-list-max-height: 24rem;
+
+
+
+
+
+
+    /* Bold layer. The house style lives here — a heavy outer frame, hairline
+     * inner rules, and a solid selection rail. Changing these three values
+     * restyles every collection surface in the product at once. */
+    --frame-width: 3px;
+    --frame-color: var(--color-text);
+    --rule-width: 1px;
+    --rule-color: var(--color-border-muted);
+    --rail-width: 4px;
+    --rail-color: var(--color-primary);
+
+    /* Hard border. Buttons, fields, checkboxes and badges all carry a constant
+     * 2px stroke; state stays on the fill so nothing shifts on interaction.
+     * Deliberately thinner than --frame-width: the container must outrank its
+     * contents. Controls stroke in --control-border-color; badges stroke in
+     * their own tone, so a badge never competes with a button for attention. */
+    --control-border-width: 2px;
+    --control-border-color: var(--color-text);
+    --badge-border-width: 2px;
+
+    --table-head-size: 0.8125rem; /* 13 */
+    --table-head-weight: var(--font-weight-bold);
+    --table-head-tracking: 0.06em;
+    --table-cell-size: var(--font-size-md);
+    --table-cell-primary-size: var(--font-size-md-lg);
+    --table-row-pad-block: var(--space-4);
+    --table-row-pad-inline: var(--space-5);
+
+    --icon-sm: 16px;
+    --icon-md: 20px;
+    --icon-lg: 24px;
+    --icon-stroke: 2.25;
+
+    --scrim: rgb(15 23 42 / 42%);
+    --overlay-radius: var(--radius-xl);
+    --drawer-width: 560px;
+    --drawer-width-wide: 760px;
+    --modal-width: 720px;
+    --modal-width-wide: 920px;
+    --dialog-width: 440px;
+    --toast-width: 400px;
+    --toast-duration: 5000ms;
+
+    --content-width-md: 840px;
+    --content-width-lg: 1040px;
+    --content-max-width: 88rem;
+    --sidebar-width: 16rem;
+    --breakpoint-nav: 56rem;
+
+    /* ── The measure scale ─────────────────────────────────────────────────
+     * Five widths, and every content area in the product picks one. The same
+     * five values are the breakpoints components respond at, so a layout
+     * changes shape exactly where a measure runs out. Container queries take
+     * literals (custom properties are not allowed there), so the numbers are
+     * repeated in Grid.css / Container.css — change them together. */
+    --width-xs: 24rem; /* 384 — a dialog body */
+    --width-sm: 30rem; /* 480 — a single-column form */
+    --width-md: 40rem; /* 640 — prose */
+    --width-lg: 60rem; /* 960 — a page body */
+    --width-xl: 80rem; /* 1280 — a full working surface */
+    --container-gutter: var(--space-6);
+
+
+    --skeleton-duration: 1400ms;
+    --skeleton-easing: ease-in-out;
+    --skeleton-stagger: 60ms;
+
+    --duration-fast: 120ms;
+    --duration-base: 150ms;
+    --duration-panel: 280ms;
+    --ease-standard: ease;
+    --ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
+
+    /* Field fill system. Derived from --color-text / --color-danger, which every
+     * theme redefines — so these six never need duplicating into a theme block.
+     * Any container that is not the page canvas overrides --field-bg locally. */
+    --field-bg: var(--color-canvas);
+    --tint-rest: 4%;
+    --tint-hover: 7%;
+    --tint-focus: 11%;
+    --tint-pressed: 15%;
+    --field-rest: color-mix(in srgb, var(--color-text) var(--tint-rest), var(--field-bg));
+    --field-hover: color-mix(in srgb, var(--color-text) var(--tint-hover), var(--field-bg));
+    --field-focus: color-mix(in srgb, var(--color-text) var(--tint-focus), var(--field-bg));
+    --field-pressed: color-mix(in srgb, var(--color-text) var(--tint-pressed), var(--field-bg));
+    --field-invalid: color-mix(in srgb, var(--color-danger) 9%, var(--field-bg));
+    --field-invalid-focus: color-mix(in srgb, var(--color-danger) 16%, var(--field-bg));
+
+    /* ── The interaction ladder ────────────────────────────────────────────
+     * Every interactive surface moves rest → hover → pressed on FILL ONLY.
+     * Two kinds of ladder, and a component uses one or the other, never both:
+     *
+     *   SOLID  --color-<tone>          rest
+     *          --color-<tone>-hover    hover      hand-picked per theme, because
+     *          --color-<tone>-pressed  pressed    a dark theme lightens where a
+     *                                             light theme darkens
+     *
+     *   SOFT   --color-<tone>-soft          rest  derived — one rule, every tone,
+     *          --color-<tone>-soft-hover    hover every theme, nothing to hand-pick
+     *          --color-<tone>-soft-pressed  press and nothing to get wrong
+     *
+     * Text on a soft fill is the tone itself, except where that fails 4.5:1 —
+     * those get a --color-<tone>-text override in their theme block, and the
+     * override is the exception that proves the rule rather than a habit.
+     *
+     * Solid ladders exist only for the three tones that are ever a button fill:
+     * primary, danger, accent. Success, warning and review are tones, not
+     * actions — if one of them ever needs a solid ladder, that is a decision
+     * record, not a token. */
+    --soft-step-hover: 10%;
+    --soft-step-pressed: 18%;
+    --color-primary-soft-hover: color-mix(in srgb, var(--color-primary) var(--soft-step-hover), var(--color-primary-soft));
+    --color-primary-soft-pressed: color-mix(in srgb, var(--color-primary) var(--soft-step-pressed), var(--color-primary-soft));
+    --color-accent-soft-hover: color-mix(in srgb, var(--color-accent) var(--soft-step-hover), var(--color-accent-soft));
+    --color-accent-soft-pressed: color-mix(in srgb, var(--color-accent) var(--soft-step-pressed), var(--color-accent-soft));
+    --color-success-soft-hover: color-mix(in srgb, var(--color-success) var(--soft-step-hover), var(--color-success-soft));
+    --color-success-soft-pressed: color-mix(in srgb, var(--color-success) var(--soft-step-pressed), var(--color-success-soft));
+    --color-warning-soft-hover: color-mix(in srgb, var(--color-warning) var(--soft-step-hover), var(--color-warning-soft));
+    --color-warning-soft-pressed: color-mix(in srgb, var(--color-warning) var(--soft-step-pressed), var(--color-warning-soft));
+    --color-danger-soft-hover: color-mix(in srgb, var(--color-danger) var(--soft-step-hover), var(--color-danger-soft));
+    --color-danger-soft-pressed: color-mix(in srgb, var(--color-danger) var(--soft-step-pressed), var(--color-danger-soft));
+    --color-review-soft-hover: color-mix(in srgb, var(--color-review) var(--soft-step-hover), var(--color-review-soft));
+    --color-review-soft-pressed: color-mix(in srgb, var(--color-review) var(--soft-step-pressed), var(--color-review-soft));
+
+    /* Text on a soft fill. Every theme may override; only two need to. */
+    --color-primary-text: var(--color-primary);
+    --color-accent-text: var(--color-accent);
+    --color-success-text: var(--color-success);
+    --color-warning-text: var(--color-warning);
+    --color-danger-text: var(--color-danger);
+    --color-review-text: var(--color-review);
+
+    /* Derived tone borders, used by soft-filled callouts and banners. */
+    --color-primary-border: color-mix(in srgb, var(--color-primary) 50%, var(--color-primary-soft));
+    --color-success-border: color-mix(in srgb, var(--color-success) 50%, var(--color-success-soft));
+    --color-warning-border: color-mix(in srgb, var(--color-warning) 50%, var(--color-warning-soft));
+    --color-danger-border: color-mix(in srgb, var(--color-danger) 50%, var(--color-danger-soft));
+
+    /* Publication status. Aliases only — every theme inherits these by
+       redefining the semantic tones above. Six states, no seventh. */
+    --status-draft: var(--color-border-strong);
+    --status-draft-text: var(--color-text-muted);
+    --status-draft-soft: var(--color-surface-muted);
+    --status-scheduled: var(--color-primary);
+    --status-scheduled-soft: var(--color-primary-soft);
+    --status-published: var(--color-success);
+    --status-published-soft: var(--color-success-soft);
+    --status-changed: var(--color-warning);
+    --status-changed-soft: var(--color-warning-soft);
+    --status-unpublished: var(--color-danger);
+    --status-unpublished-soft: var(--color-danger-soft);
+    --status-archived: var(--color-border);
+    --status-archived-text: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-surface));
+    --status-archived-soft: transparent;
+    /* Status tabs are interactive, so each soft needs its two further steps.
+     * Four inherit their tone's ladder; draft and archived have no tone of
+     * their own and fall back to the neutral field ladder. */
+    --status-draft-soft-hover: var(--field-hover);
+    --status-draft-soft-pressed: var(--field-pressed);
+    --status-scheduled-soft-hover: var(--color-primary-soft-hover);
+    --status-scheduled-soft-pressed: var(--color-primary-soft-pressed);
+    --status-published-soft-hover: var(--color-success-soft-hover);
+    --status-published-soft-pressed: var(--color-success-soft-pressed);
+    --status-changed-soft-hover: var(--color-warning-soft-hover);
+    --status-changed-soft-pressed: var(--color-warning-soft-pressed);
+    --status-unpublished-soft-hover: var(--color-danger-soft-hover);
+    --status-unpublished-soft-pressed: var(--color-danger-soft-pressed);
+    --status-archived-soft-hover: var(--field-hover);
+    --status-archived-soft-pressed: var(--field-pressed);
+
+  }
+
+  /* ── Theme: light (default) ───────────────────────────────────────────── */
+  :root {
+    color-scheme: light;
+    --color-canvas: #f4f6f9;
+    --color-surface: #ffffff;
+    --color-surface-raised: #fbfcfe;
+    --color-surface-subtle: #eef2f7;
+    --color-border: #d5dce7;
+    --color-border-muted: #e1e8f0;
+    --color-border-strong: #b8c4d6;
+    --color-text: #0f1728;
+    --color-text-muted: #51617b;
+    --color-text-on-solid: #ffffff;
+    --color-primary: #0052cc;
+    --color-primary-hover: #003f9e;
+    --color-primary-pressed: #00337f;
+    --color-primary-soft: #dbe8ff;
+    --color-success: #136c3f;
+    --color-success-soft: #daf4e6;
+    --color-warning: #8a5800;
+    --color-warning-soft: #fff0c9;
+    --color-danger: #a72020;
+    --color-danger-soft: #fee7e7;
+    --color-review: #7c53d6;
+    --color-review-soft: #efe9fb;
+    --color-focus: #3a74ff;
+    --color-accent: var(--color-primary);
+    --color-accent-hover: var(--color-primary-hover);
+    --color-accent-pressed: var(--color-primary-pressed);
+    --color-accent-soft: var(--color-primary-soft);
+    --color-text-on-accent: #ffffff;
+    --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 9%);
+    --shadow-md: 0 2px 4px -2px rgb(16 24 40 / 8%), 0 6px 12px -3px rgb(16 24 40 / 10%);
+    --shadow-lg: 0 8px 16px -6px rgb(16 24 40 / 12%), 0 18px 40px -12px rgb(16 24 40 / 16%);
+  }
+
+  /* ── Theme: dark ──────────────────────────────────────────────────────── */
+  [data-theme='dark'] {
+    color-scheme: dark;
+    --color-canvas: #0d1117;
+    --color-surface: #161b22;
+    --color-surface-raised: #1c2230;
+    --color-surface-subtle: #21262d;
+    --color-border: #30363d;
+    --color-border-muted: #21262d;
+    --color-border-strong: #484f58;
+    --color-text: #e6edf3;
+    --color-text-muted: #8b949e;
+    --color-text-on-solid: #0d1117;
+    --color-primary: #388bfd;
+    --color-primary-hover: #58a6ff;
+    --color-primary-pressed: #79b8ff;
+    --color-primary-soft: #1a2e4a;
+    --color-success: #3fb950;
+    --color-success-soft: #122a1d;
+    --color-warning: #d29922;
+    --color-warning-soft: #2d2208;
+    --color-danger: #f85149;
+    --color-danger-hover: #ff6b63;
+    --color-danger-pressed: #ff8a84;
+    --color-danger-soft: #3a1515;
+    --color-review: #a78bfa;
+    --color-review-soft: #2d1f4a;
+    --color-focus: #58a6ff;
+    --color-accent: var(--color-primary);
+    --color-accent-hover: var(--color-primary-hover);
+    --color-accent-pressed: var(--color-primary-pressed);
+    --color-accent-soft: var(--color-primary-soft);
+    --color-text-on-accent: #0d1117;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 40%);
+    --shadow-md: 0 4px 10px -3px rgb(0 0 0 / 45%);
+    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 55%);
+  }
+
+  /* ── Theme: cherry-glaze ──────────────────────────────────────────────── */
+  [data-theme='cherry-glaze'] {
+    color-scheme: light;
+    --color-canvas: #e7d8cd;
+    --color-surface: #f5f2ea;
+    --color-surface-raised: #efe4dc;
+    --color-surface-subtle: #d7a3be;
+    --color-border: #d7a3be;
+    --color-border-muted: #e7d8cd;
+    --color-border-strong: #b86b9c;
+    --color-text: #2f1d28;
+    --color-text-muted: #7c6470;
+    --color-text-on-solid: #f5f2ea;
+    --color-primary: #496f24;
+    --color-primary-hover: #3a5a1c;
+    --color-primary-pressed: #2d4615;
+    --color-primary-soft: #b7c991;
+    --color-success: #496f24;
+    --color-success-soft: #b7c991;
+    --color-warning: #6f4f24;
+    --color-warning-soft: #e7d8cd;
+    --color-danger: #8f3e6e;
+    --color-danger-hover: #743158;
+    --color-danger-pressed: #5c2746;
+    --color-danger-soft: #d7a3be;
+    --color-review: #7c53d6;
+    --color-review-soft: #e8e0f8;
+    --color-focus: #7fa34c;
+    --color-accent: #b86b9c;
+    --color-accent-hover: #a55b8a;
+    --color-accent-pressed: #8f4c76;
+    --color-accent-soft: #e8c2d3;
+    /* Cherry Glaze is one of the two overrides: the accent pink lands at 2.9:1
+     * on its own soft fill, so text on it goes darker than the accent itself. */
+    --color-accent-text: #66304f;
+    --color-text-on-accent: #201018;
+    --shadow-sm: 0 1px 2px rgb(73 111 36 / 8%), 0 1px 3px rgb(73 111 36 / 12%);
+    --shadow-md: 0 2px 4px -2px rgb(73 111 36 / 10%), 0 6px 12px -3px rgb(73 111 36 / 12%);
+    --shadow-lg: 0 8px 16px -6px rgb(73 111 36 / 14%), 0 18px 40px -12px rgb(73 111 36 / 18%);
+  }
+
+  /* ── Theme: black-hawaii ──────────────────────────────────────────────── */
+  [data-theme='black-hawaii'] {
+    color-scheme: dark;
+    --color-canvas: #101010;
+    --color-surface: #242321;
+    --color-surface-raised: #3a2a22;
+    --color-surface-subtle: #3a2a22;
+    --color-border: #6e6a63;
+    --color-border-muted: #3a2a22;
+    --color-border-strong: #c99a5f;
+    --color-text: #f1e6d6;
+    --color-text-muted: #c99a5f;
+    --color-text-on-solid: #101010;
+    --color-primary: #d66a3a;
+    --color-primary-hover: #e0854f;
+    --color-primary-pressed: #ea9f73;
+    --color-primary-soft: #3a2a22;
+    --color-success: #4e8f8a;
+    --color-success-soft: #242321;
+    --color-warning: #c99a5f;
+    --color-warning-soft: #3a2a22;
+    /* Lifted from #c44040, which sat at 3.8:1 against --color-text-on-solid. */
+    --color-danger: #d45454;
+    --color-danger-hover: #df6868;
+    --color-danger-pressed: #e98282;
+    --color-danger-soft: #3a2a22;
+    --color-review: #9b7fe8;
+    --color-review-soft: #2a2040;
+    --color-focus: #e0854f;
+    --color-accent: #d66a3a;
+    --color-accent-hover: #e0854f;
+    --color-accent-pressed: #ea9f73;
+    --color-accent-soft: #3a2a22;
+    /* The second override: the accent orange is 3.9:1 on its own soft fill. */
+    --color-accent-text: #e0854f;
+    --color-text-on-accent: #101010;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 50%);
+    --shadow-md: 0 4px 10px -3px rgb(0 0 0 / 55%);
+    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 62%);
+  }
+
+  /* Skeletons pulse between the two fills a control moves between — structure
+   * never pulses, only content. Stagger by --skeleton-stagger per row or tile.
+   * The element MUST also set background: var(--field-rest) statically: during
+   * the stagger delay, and whenever the animation is suppressed by
+   * prefers-reduced-motion, the keyframe supplies no fill at all. */
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      background-color: var(--field-rest);
+    }
+
+    50% {
+      background-color: var(--field-hover);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-fast: 0ms;
+      --duration-base: 0ms;
+      --duration-panel: 0ms;
+    }
+  }
+}

package/dist/tokens.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/package.json

@@ -1,6 +1,132 @@
 {
   "name": "@namroodinc/liquid-editorial",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A bold, accessible React component library for editorial products.",
+  "author": "Namrood Inc",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "components/*": ["dist/components/*/index.d.ts"],
+      "styles.css": ["dist/styles.css.d.ts"],
+      "tokens.css": ["dist/tokens.css.d.ts"],
+      "reset.css": ["dist/reset.css.d.ts"]
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./components/*": {
+      "import": {
+        "types": "./dist/components/*/index.d.ts",
+        "default": "./dist/components/*/index.js"
+      },
+      "require": {
+        "types": "./dist/components/*/index.d.cts",
+        "default": "./dist/components/*/index.cjs"
+      }
+    },
+    "./styles.css": {
+      "types": "./dist/styles.css.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./tokens.css": {
+      "types": "./dist/tokens.css.d.ts",
+      "default": "./dist/tokens.css"
+    },
+    "./reset.css": {
+      "types": "./dist/reset.css.d.ts",
+      "default": "./dist/reset.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/namroodinc/liquid-editorial.git"
+  },
+  "bugs": { "url": "https://github.com/namroodinc/liquid-editorial/issues" },
+  "homepage": "https://github.com/namroodinc/liquid-editorial#readme",
+  "keywords": ["react", "components", "design-system", "editorial", "typescript"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "clean": "node scripts/clean.mjs",
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "build": "npm run clean && vite build && tsc -p tsconfig.build.json && node scripts/copy-declarations.mjs && node scripts/copy-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "fallow": "fallow dead-code --no-cache --fail-on-issues",
+    "fallow:report": "node scripts/generate-fallow-report.mjs",
+    "package:smoke": "node scripts/package-smoke.mjs",
+    "package:lint": "publint --strict",
+    "package:types": "attw --pack .",
+    "package:check": "npm run build && publint --strict && attw --pack . && npm run package:smoke",
+    "validate": "npm run lint && npm run typecheck && npm run test:coverage && npm run build:storybook && npm run package:check && npm run fallow",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0 <20",
+    "react-dom": ">=18.2.0 <20"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tiptap/extension-link": "^3.30.3",
+    "@tiptap/extension-placeholder": "^3.30.3",
+    "@tiptap/react": "^3.30.3",
+    "@tiptap/starter-kit": "^3.30.3",
+    "lucide-react": "^1.33.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.0.0",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest-axe": "^3.5.9",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "fallow": "2.95.0",
+    "globals": "^16.5.0",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^27.0.0",
+    "publint": "^0.3.16",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.0.0",
+    "typescript": "^5.9.0",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^8.0.16",
+    "vitest": "^4.0.0"
+  },
+  "engines": { "node": ">=22" }
+}