@arbidocs/blocks 0.5.23 → 0.5.25

package/dist/{chunk-SLRVI2YU.js → chunk-X6U6L6BG.js}

@@ -1,5 +1,5 @@
 "use client";
-import { tid } from './chunk-AMTWY22T.js';
+import { tid } from './chunk-5ZBXFHZW.js';
 import { EmptyState } from './chunk-P6GHJSLR.js';
 import { ArrowUp, ArrowDown, ChevronsUpDown } from 'lucide-react';
 import { Table, TableHeader, TableRow, TableHead, cn, TableBody, TableCell } from '@arbidocs/react/ui';
@@ -115,7 +115,32 @@ function DataTable({
     }) })
   ] }) });
 }
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  leading,
+  actions,
+  tabs,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+        leading && /* @__PURE__ */ jsx("div", { className: "shrink-0", "data-slot": "page-header-leading", children: leading }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    tabs && /* @__PURE__ */ jsx("div", { "data-slot": "page-header-tabs", children: tabs })
+  ] });
+}
 
-export { DataTable };
-//# sourceMappingURL=chunk-SLRVI2YU.js.map
-//# sourceMappingURL=chunk-SLRVI2YU.js.map
+export { DataTable, PageHeader };
+//# sourceMappingURL=chunk-X6U6L6BG.js.map
+//# sourceMappingURL=chunk-X6U6L6BG.js.map

package/dist/chunk-X6U6L6BG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataTable.tsx","../src/components/PageHeader.tsx"],"names":["jsxs","cn","jsx"],"mappings":"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","file":"chunk-X6U6L6BG.js","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@arbidocs/react/ui'\nimport { tid } from '../lib/testid'\nimport { EmptyState } from './EmptyState'\n\nexport interface Column<T> {\n  key: string\n  header: ReactNode\n  render: (row: T) => ReactNode\n  align?: 'left' | 'right' | 'center'\n  /** Header becomes a sort button (needs `sort` and `onSortChange` on the table). */\n  isSortable?: boolean\n  className?: string\n  headClassName?: string\n}\n\nexport interface DataTableSort {\n  key: string\n  direction: 'asc' | 'desc'\n}\n\nexport interface DataTableTestIds {\n  table: string\n  empty: string\n  /** Test id of a row. */\n  row: (id: string) => string\n}\n\nexport interface DataTableProps<T> {\n  columns: Column<T>[]\n  rows: T[]\n  getRowId: (row: T) => string\n  onRowClick?: (row: T) => void\n  /** Test id area prefix, e.g. \"orders\" gives rows \"orders-row-{id}\". Default \"data\". */\n  area?: string\n  /** Replaces the ids derived from `area`. */\n  testIds?: Partial<DataTableTestIds>\n  emptyTitle?: string\n  emptyDescription?: string\n  /** Controlled sort state. The host sorts `rows`; the table only renders headers. */\n  sort?: DataTableSort | null\n  onSortChange?: (sort: DataTableSort) => void\n  /** Controlled row selection: adds a leading checkbox column when `onSelectedIdsChange` is set. */\n  selectedIds?: string[]\n  onSelectedIdsChange?: (ids: string[]) => void\n  /** Accessible names of the selection checkboxes. */\n  selectionLabels?: { selectAll: string; selectRow: string }\n  className?: string\n}\n\nconst alignClass = { left: 'text-left', right: 'text-right', center: 'text-center' } as const\n\nconst DEFAULT_SELECTION_LABELS = { selectAll: 'Select all rows', selectRow: 'Select row' }\n\n/** The one true table. Column-config driven, fully test-id'd, optional navigation, sort, selection. */\nexport function DataTable<T>({\n  columns,\n  rows,\n  getRowId,\n  onRowClick,\n  area = 'data',\n  testIds,\n  emptyTitle = 'Nothing to show',\n  emptyDescription,\n  sort,\n  onSortChange,\n  selectedIds,\n  onSelectedIdsChange,\n  selectionLabels,\n  className,\n}: DataTableProps<T>) {\n  const ids = {\n    table: testIds?.table ?? tid(area, 'table'),\n    empty: testIds?.empty ?? tid(area, 'empty'),\n    row: testIds?.row ?? ((id: string) => tid(area, 'row', id)),\n  }\n  const labels = { ...DEFAULT_SELECTION_LABELS, ...selectionLabels }\n  if (rows.length === 0) {\n    return <EmptyState title={emptyTitle} description={emptyDescription} testId={ids.empty} />\n  }\n\n  const isSelectable = Boolean(onSelectedIdsChange)\n  const selected = new Set(selectedIds ?? [])\n  const rowIds = rows.map(getRowId)\n  const allSelected = rowIds.length > 0 && rowIds.every((id) => selected.has(id))\n  const toggleRow = (id: string) => {\n    const next = new Set(selected)\n    if (next.has(id)) next.delete(id)\n    else next.add(id)\n    onSelectedIdsChange?.([...next])\n  }\n\n  return (\n    <div className={cn('rounded-lg border border-border bg-card', className)}>\n      <Table data-testid={ids.table}>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            {isSelectable && (\n              <TableHead className=\"w-10\">\n                <input\n                  type=\"checkbox\"\n                  aria-label={labels.selectAll}\n                  checked={allSelected}\n                  onChange={() => onSelectedIdsChange?.(allSelected ? [] : rowIds)}\n                />\n              </TableHead>\n            )}\n            {columns.map((c) => {\n              const active = sort?.key === c.key ? sort : null\n              const isSortable = c.isSortable && onSortChange\n              return (\n                <TableHead\n                  key={c.key}\n                  aria-sort={\n                    active ? (active.direction === 'asc' ? 'ascending' : 'descending') : undefined\n                  }\n                  className={cn(c.align && alignClass[c.align], c.headClassName)}\n                >\n                  {isSortable ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground\"\n                      onClick={() =>\n                        onSortChange({\n                          key: c.key,\n                          direction: active?.direction === 'asc' ? 'desc' : 'asc',\n                        })\n                      }\n                    >\n                      {c.header}\n                      {active ? (\n                        active.direction === 'asc' ? (\n                          <ArrowUp className=\"size-3\" />\n                        ) : (\n                          <ArrowDown className=\"size-3\" />\n                        )\n                      ) : (\n                        <ChevronsUpDown className=\"size-3 opacity-50\" />\n                      )}\n                    </button>\n                  ) : (\n                    c.header\n                  )}\n                </TableHead>\n              )\n            })}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {rows.map((row) => {\n            const id = getRowId(row)\n            return (\n              <TableRow\n                key={id}\n                data-testid={ids.row(id)}\n                data-state={selected.has(id) ? 'selected' : undefined}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n                className={cn(onRowClick && 'cursor-pointer')}\n              >\n                {isSelectable && (\n                  <TableCell className=\"w-10\" onClick={(e) => e.stopPropagation()}>\n                    <input\n                      type=\"checkbox\"\n                      aria-label={labels.selectRow}\n                      checked={selected.has(id)}\n                      onChange={() => toggleRow(id)}\n                    />\n                  </TableCell>\n                )}\n                {columns.map((c) => (\n                  <TableCell\n                    key={c.key}\n                    className={cn(c.align && alignClass[c.align], c.className)}\n                  >\n                    {c.render(row)}\n                  </TableCell>\n                ))}\n              </TableRow>\n            )\n          })}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport interface PageHeaderProps {\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  /** Before the title block: a back button, an avatar or an icon. */\n  leading?: ReactNode\n  actions?: ReactNode\n  /** Under the whole header: a tab strip or segmented control. */\n  tabs?: ReactNode\n  className?: string\n  testId?: string\n}\n\n/** Standard page title block: leading + eyebrow + title + description + actions, then tabs. */\nexport function PageHeader({\n  title,\n  eyebrow,\n  description,\n  leading,\n  actions,\n  tabs,\n  className,\n  testId,\n}: PageHeaderProps) {\n  return (\n    <div className={cn('flex flex-col gap-3', className)} data-testid={testId}>\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          {leading && (\n            <div className=\"shrink-0\" data-slot=\"page-header-leading\">\n              {leading}\n            </div>\n          )}\n          <div className=\"min-w-0\">\n            {eyebrow && (\n              <p className=\"mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                {eyebrow}\n              </p>\n            )}\n            <h1 className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n              {title}\n            </h1>\n            {description && (\n              <p className=\"mt-1 max-w-2xl text-sm text-muted-foreground\">{description}</p>\n            )}\n          </div>\n        </div>\n        {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n      </div>\n      {tabs && <div data-slot=\"page-header-tabs\">{tabs}</div>}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-SQ5F5BFW.cjs → chunk-XDU3HHUU.cjs}

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkZU2B2RZK_cjs = require('./chunk-ZU2B2RZK.cjs');
+var chunkKUQOHPKP_cjs = require('./chunk-KUQOHPKP.cjs');
 var chunkZW6FPIFC_cjs = require('./chunk-ZW6FPIFC.cjs');
 var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');
@@ -26,9 +26,9 @@ function DataTable({
   className
 }) {
   const ids = {
-    table: testIds?.table ?? chunkZU2B2RZK_cjs.tid(area, "table"),
-    empty: testIds?.empty ?? chunkZU2B2RZK_cjs.tid(area, "empty"),
-    row: testIds?.row ?? ((id) => chunkZU2B2RZK_cjs.tid(area, "row", id))
+    table: testIds?.table ?? chunkKUQOHPKP_cjs.tid(area, "table"),
+    empty: testIds?.empty ?? chunkKUQOHPKP_cjs.tid(area, "empty"),
+    row: testIds?.row ?? ((id) => chunkKUQOHPKP_cjs.tid(area, "row", id))
   };
   const labels = { ...DEFAULT_SELECTION_LABELS, ...selectionLabels };
   if (rows.length === 0) {
@@ -117,7 +117,33 @@ function DataTable({
     }) })
   ] }) });
 }
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  leading,
+  actions,
+  tabs,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex flex-col gap-3", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+        leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", "data-slot": "page-header-leading", children: leading }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    tabs && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-tabs", children: tabs })
+  ] });
+}
 
 exports.DataTable = DataTable;
-//# sourceMappingURL=chunk-SQ5F5BFW.cjs.map
-//# sourceMappingURL=chunk-SQ5F5BFW.cjs.map
+exports.PageHeader = PageHeader;
+//# sourceMappingURL=chunk-XDU3HHUU.cjs.map
+//# sourceMappingURL=chunk-XDU3HHUU.cjs.map

package/dist/chunk-XDU3HHUU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataTable.tsx","../src/components/PageHeader.tsx"],"names":["tid","jsx","EmptyState","cn","jsxs","Table","TableHeader","TableRow","TableHead","ArrowUp","ArrowDown","ChevronsUpDown","TableBody","TableCell"],"mappings":"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","file":"chunk-XDU3HHUU.cjs","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@arbidocs/react/ui'\nimport { tid } from '../lib/testid'\nimport { EmptyState } from './EmptyState'\n\nexport interface Column<T> {\n  key: string\n  header: ReactNode\n  render: (row: T) => ReactNode\n  align?: 'left' | 'right' | 'center'\n  /** Header becomes a sort button (needs `sort` and `onSortChange` on the table). */\n  isSortable?: boolean\n  className?: string\n  headClassName?: string\n}\n\nexport interface DataTableSort {\n  key: string\n  direction: 'asc' | 'desc'\n}\n\nexport interface DataTableTestIds {\n  table: string\n  empty: string\n  /** Test id of a row. */\n  row: (id: string) => string\n}\n\nexport interface DataTableProps<T> {\n  columns: Column<T>[]\n  rows: T[]\n  getRowId: (row: T) => string\n  onRowClick?: (row: T) => void\n  /** Test id area prefix, e.g. \"orders\" gives rows \"orders-row-{id}\". Default \"data\". */\n  area?: string\n  /** Replaces the ids derived from `area`. */\n  testIds?: Partial<DataTableTestIds>\n  emptyTitle?: string\n  emptyDescription?: string\n  /** Controlled sort state. The host sorts `rows`; the table only renders headers. */\n  sort?: DataTableSort | null\n  onSortChange?: (sort: DataTableSort) => void\n  /** Controlled row selection: adds a leading checkbox column when `onSelectedIdsChange` is set. */\n  selectedIds?: string[]\n  onSelectedIdsChange?: (ids: string[]) => void\n  /** Accessible names of the selection checkboxes. */\n  selectionLabels?: { selectAll: string; selectRow: string }\n  className?: string\n}\n\nconst alignClass = { left: 'text-left', right: 'text-right', center: 'text-center' } as const\n\nconst DEFAULT_SELECTION_LABELS = { selectAll: 'Select all rows', selectRow: 'Select row' }\n\n/** The one true table. Column-config driven, fully test-id'd, optional navigation, sort, selection. */\nexport function DataTable<T>({\n  columns,\n  rows,\n  getRowId,\n  onRowClick,\n  area = 'data',\n  testIds,\n  emptyTitle = 'Nothing to show',\n  emptyDescription,\n  sort,\n  onSortChange,\n  selectedIds,\n  onSelectedIdsChange,\n  selectionLabels,\n  className,\n}: DataTableProps<T>) {\n  const ids = {\n    table: testIds?.table ?? tid(area, 'table'),\n    empty: testIds?.empty ?? tid(area, 'empty'),\n    row: testIds?.row ?? ((id: string) => tid(area, 'row', id)),\n  }\n  const labels = { ...DEFAULT_SELECTION_LABELS, ...selectionLabels }\n  if (rows.length === 0) {\n    return <EmptyState title={emptyTitle} description={emptyDescription} testId={ids.empty} />\n  }\n\n  const isSelectable = Boolean(onSelectedIdsChange)\n  const selected = new Set(selectedIds ?? [])\n  const rowIds = rows.map(getRowId)\n  const allSelected = rowIds.length > 0 && rowIds.every((id) => selected.has(id))\n  const toggleRow = (id: string) => {\n    const next = new Set(selected)\n    if (next.has(id)) next.delete(id)\n    else next.add(id)\n    onSelectedIdsChange?.([...next])\n  }\n\n  return (\n    <div className={cn('rounded-lg border border-border bg-card', className)}>\n      <Table data-testid={ids.table}>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            {isSelectable && (\n              <TableHead className=\"w-10\">\n                <input\n                  type=\"checkbox\"\n                  aria-label={labels.selectAll}\n                  checked={allSelected}\n                  onChange={() => onSelectedIdsChange?.(allSelected ? [] : rowIds)}\n                />\n              </TableHead>\n            )}\n            {columns.map((c) => {\n              const active = sort?.key === c.key ? sort : null\n              const isSortable = c.isSortable && onSortChange\n              return (\n                <TableHead\n                  key={c.key}\n                  aria-sort={\n                    active ? (active.direction === 'asc' ? 'ascending' : 'descending') : undefined\n                  }\n                  className={cn(c.align && alignClass[c.align], c.headClassName)}\n                >\n                  {isSortable ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground\"\n                      onClick={() =>\n                        onSortChange({\n                          key: c.key,\n                          direction: active?.direction === 'asc' ? 'desc' : 'asc',\n                        })\n                      }\n                    >\n                      {c.header}\n                      {active ? (\n                        active.direction === 'asc' ? (\n                          <ArrowUp className=\"size-3\" />\n                        ) : (\n                          <ArrowDown className=\"size-3\" />\n                        )\n                      ) : (\n                        <ChevronsUpDown className=\"size-3 opacity-50\" />\n                      )}\n                    </button>\n                  ) : (\n                    c.header\n                  )}\n                </TableHead>\n              )\n            })}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {rows.map((row) => {\n            const id = getRowId(row)\n            return (\n              <TableRow\n                key={id}\n                data-testid={ids.row(id)}\n                data-state={selected.has(id) ? 'selected' : undefined}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n                className={cn(onRowClick && 'cursor-pointer')}\n              >\n                {isSelectable && (\n                  <TableCell className=\"w-10\" onClick={(e) => e.stopPropagation()}>\n                    <input\n                      type=\"checkbox\"\n                      aria-label={labels.selectRow}\n                      checked={selected.has(id)}\n                      onChange={() => toggleRow(id)}\n                    />\n                  </TableCell>\n                )}\n                {columns.map((c) => (\n                  <TableCell\n                    key={c.key}\n                    className={cn(c.align && alignClass[c.align], c.className)}\n                  >\n                    {c.render(row)}\n                  </TableCell>\n                ))}\n              </TableRow>\n            )\n          })}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport interface PageHeaderProps {\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  /** Before the title block: a back button, an avatar or an icon. */\n  leading?: ReactNode\n  actions?: ReactNode\n  /** Under the whole header: a tab strip or segmented control. */\n  tabs?: ReactNode\n  className?: string\n  testId?: string\n}\n\n/** Standard page title block: leading + eyebrow + title + description + actions, then tabs. */\nexport function PageHeader({\n  title,\n  eyebrow,\n  description,\n  leading,\n  actions,\n  tabs,\n  className,\n  testId,\n}: PageHeaderProps) {\n  return (\n    <div className={cn('flex flex-col gap-3', className)} data-testid={testId}>\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          {leading && (\n            <div className=\"shrink-0\" data-slot=\"page-header-leading\">\n              {leading}\n            </div>\n          )}\n          <div className=\"min-w-0\">\n            {eyebrow && (\n              <p className=\"mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                {eyebrow}\n              </p>\n            )}\n            <h1 className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n              {title}\n            </h1>\n            {description && (\n              <p className=\"mt-1 max-w-2xl text-sm text-muted-foreground\">{description}</p>\n            )}\n          </div>\n        </div>\n        {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n      </div>\n      {tabs && <div data-slot=\"page-header-tabs\">{tabs}</div>}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-SKVVOEMX.js → chunk-XXUPUXBF.js}

@@ -1,142 +1,15 @@
 "use client";
-import { getFontPairing, matchFontPairing, FONT_PAIRINGS } from './chunk-NHZK64TQ.js';
+import { applyThemeVars } from './chunk-5ZBXFHZW.js';
+import { getFontPairing } from './chunk-NHZK64TQ.js';
 import { initials } from './chunk-5VYJP6XD.js';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { createContext, useState, useEffect, useContext } from 'react';
-import { RotateCcw, ChevronDown, Palette, ImageIcon, ArrowRight, Quote, X, Menu, Check, ArrowUpRight, Save } from 'lucide-react';
-import { Input, Card, CardHeader, CardTitle, CardContent, cn, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown } from '@arbidocs/react/ui';
+import { cn, Button, Card, Avatar, AvatarImage, AvatarFallback, AiMarkdown } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+import { ImageIcon, ArrowRight, Quote, ChevronDown, X, Menu, Check, ArrowUpRight } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-// src/theme/tokens.ts
-var THEME_STYLE_ID = "arbi-theme-vars";
-var TRIPLET_RE = /^-?\d+(?:\.\d+)?\s+-?\d+(?:\.\d+)?%\s+-?\d+(?:\.\d+)?%$/;
-function parseRgb(color) {
-  if (color.startsWith("#")) {
-    let hex = color.slice(1);
-    if (hex.length === 3) {
-      hex = hex.split("").map((ch) => ch + ch).join("");
-    }
-    if (hex.length === 6 && /^[0-9a-fA-F]{6}$/.test(hex)) {
-      return {
-        r: parseInt(hex.slice(0, 2), 16),
-        g: parseInt(hex.slice(2, 4), 16),
-        b: parseInt(hex.slice(4, 6), 16)
-      };
-    }
-    return null;
-  }
-  const m = color.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
-  if (m) return { r: Number(m[1]), g: Number(m[2]), b: Number(m[3]) };
-  return null;
-}
-function rgbToHslTriplet(r, g, b) {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const max = Math.max(rn, gn, bn);
-  const min = Math.min(rn, gn, bn);
-  const l = (max + min) / 2;
-  const d = max - min;
-  let h = 0;
-  let s = 0;
-  if (d !== 0) {
-    s = d / (1 - Math.abs(2 * l - 1));
-    switch (max) {
-      case rn:
-        h = 60 * ((gn - bn) / d % 6);
-        break;
-      case gn:
-        h = 60 * ((bn - rn) / d + 2);
-        break;
-      default:
-        h = 60 * ((rn - gn) / d + 4);
-        break;
-    }
-  }
-  if (h < 0) h += 360;
-  return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-}
-function toHslTriplet(color) {
-  const c = color.trim();
-  if (TRIPLET_RE.test(c)) return c;
-  const rgb = parseRgb(c);
-  if (!rgb) return c;
-  return rgbToHslTriplet(rgb.r, rgb.g, rgb.b);
-}
-function renderTripletBlock(colors) {
-  return Object.entries(colors).map(([key, value]) => `  --${key}: ${toHslTriplet(value)};`).join("\n");
-}
-function emitCssVars(theme, dark) {
-  if (typeof document === "undefined") return;
-  const meta = [
-    `  --font-display: ${theme.fonts.display};`,
-    `  --font-sans: ${theme.fonts.sans};`,
-    `  --radius: ${theme.radius}rem;`
-  ].join("\n");
-  let css = `:root {
-${renderTripletBlock(theme.colors)}
-${meta}
-}`;
-  if (dark) {
-    css += `
-:root.dark {
-${renderTripletBlock(dark)}
-}`;
-  }
-  let style = document.getElementById(THEME_STYLE_ID);
-  if (!style) {
-    style = document.createElement("style");
-    style.id = THEME_STYLE_ID;
-    document.head.appendChild(style);
-  }
-  style.textContent = css;
-}
-function removeCssVars() {
-  if (typeof document === "undefined") return;
-  document.getElementById(THEME_STYLE_ID)?.remove();
-}
-function normalizeOptions(optionsOrRoot) {
-  if (typeof HTMLElement !== "undefined" && optionsOrRoot instanceof HTMLElement) {
-    return { root: optionsOrRoot };
-  }
-  return optionsOrRoot;
-}
-function applyThemeVars(theme, optionsOrRoot = {}) {
-  const { mode = "flat", dark, root = document.documentElement } = normalizeOptions(optionsOrRoot);
-  if (mode === "cssVars") {
-    emitCssVars(theme, dark);
-    return;
-  }
-  for (const [key, value] of Object.entries(theme.colors)) {
-    root.style.setProperty(`--color-${key}`, value);
-  }
-  root.style.setProperty("--font-display", theme.fonts.display);
-  root.style.setProperty("--font-sans", theme.fonts.sans);
-  root.style.setProperty("--radius", `${theme.radius}rem`);
-}
-function applyFontVars(fonts, root = document.documentElement) {
-  root.style.setProperty("--font-display", fonts.display);
-  root.style.setProperty("--font-sans", fonts.sans);
-}
-function clearFontVars(root = document.documentElement) {
-  root.style.removeProperty("--font-display");
-  root.style.removeProperty("--font-sans");
-}
-function clearThemeVars(theme, optionsOrRoot = {}) {
-  const { mode = "flat", root = document.documentElement } = normalizeOptions(optionsOrRoot);
-  if (mode === "cssVars") {
-    removeCssVars();
-    return;
-  }
-  for (const key of Object.keys(theme.colors)) {
-    root.style.removeProperty(`--color-${key}`);
-  }
-  root.style.removeProperty("--font-display");
-  root.style.removeProperty("--font-sans");
-  root.style.removeProperty("--radius");
-}
 function createThemeStore(config) {
   const { defaultTheme, presets, storageKey } = config;
   const useStore = create()(
@@ -184,294 +57,6 @@ function applyStoredTheme(bundle) {
   const { colors, fonts, radius } = bundle.useStore.getState();
   applyThemeVars({ colors, fonts, radius }, { mode: bundle.mode, dark: bundle.darkColors });
 }
-function ThemeEditor({
-  bundle,
-  variant = "panel",
-  preview,
-  onSave,
-  testIdPrefix = "theme",
-  defaultOpen = false
-}) {
-  const { useStore, tokens, presets, groupLabels, mode, darkColors } = bundle;
-  const colors = useStore((s) => s.colors);
-  const fonts = useStore((s) => s.fonts);
-  const radius = useStore((s) => s.radius);
-  const activePresetId = useStore((s) => s.activePresetId);
-  const setColor = useStore((s) => s.setColor);
-  const setFont = useStore((s) => s.setFont);
-  const setFontPairing = useStore((s) => s.setFontPairing);
-  const setRadius = useStore((s) => s.setRadius);
-  const applyPreset = useStore((s) => s.applyPreset);
-  const reset = useStore((s) => s.reset);
-  const [open, setOpen] = useState(defaultOpen);
-  const [saving, setSaving] = useState(false);
-  const [savedVia, setSavedVia] = useState(null);
-  useEffect(() => {
-    applyThemeVars({ colors, fonts, radius }, { mode, dark: darkColors });
-  }, [colors, fonts, radius, mode, darkColors]);
-  const tid = (suffix) => `${testIdPrefix}-${suffix}`;
-  const groups = [...new Set(tokens.map((t) => t.group))];
-  const save = async () => {
-    if (!onSave) return;
-    setSaving(true);
-    try {
-      const via = await onSave();
-      setSavedVia(typeof via === "string" ? via : "saved");
-    } catch {
-      setSavedVia(null);
-    } finally {
-      setSaving(false);
-    }
-  };
-  const Presets = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-    presets.map((p) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => applyPreset(p.id),
-        className: `rounded-full border px-3 py-1 text-xs font-medium transition-colors ${activePresetId === p.id ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary"}`,
-        "data-testid": tid(`preset-${p.id}`),
-        children: p.label
-      },
-      p.id
-    )),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: reset,
-        className: "ml-auto inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground",
-        "data-testid": tid("reset"),
-        children: [
-          /* @__PURE__ */ jsx(RotateCcw, { className: "size-3" }),
-          " Reset"
-        ]
-      }
-    )
-  ] });
-  const colorRow = (k, label) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "color",
-        value: colors[k] ?? "#000000",
-        onChange: (e) => setColor(k, e.target.value),
-        className: "size-9 shrink-0 cursor-pointer rounded-md border border-border bg-transparent",
-        "aria-label": label,
-        "data-testid": tid(`color-${k}`)
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: label }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: colors[k] ?? "",
-          onChange: (e) => setColor(k, e.target.value),
-          "aria-label": `${label} hex value`,
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring h-7 font-mono text-xs",
-          "data-testid": tid(`hex-${k}`)
-        }
-      )
-    ] })
-  ] }, k);
-  const activePairing = matchFontPairing(fonts);
-  const Typography = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: "Typeface" }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: activePairing?.id ?? "",
-          onChange: (e) => setFontPairing(e.target.value),
-          "aria-label": "Typeface",
-          className: "mt-1 h-8 w-full rounded-md border border-border bg-card px-2 text-xs text-foreground focus-visible:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "data-testid": tid("font-pairing"),
-          children: [
-            !activePairing && /* @__PURE__ */ jsx("option", { value: "", children: "Custom" }),
-            FONT_PAIRINGS.map((pairing) => /* @__PURE__ */ jsx("option", { value: pairing.id, children: pairing.label }, pairing.id))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: activePairing?.description ?? "Hand-edited font stacks." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: "Display font stack" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: fonts.display,
-          onChange: (e) => setFont("display", e.target.value),
-          "aria-label": "Display font stack",
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs",
-          "data-testid": tid("font-display")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: "Body font stack" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: fonts.sans,
-          onChange: (e) => setFont("sans", e.target.value),
-          "aria-label": "Body font stack",
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs",
-          "data-testid": tid("font-sans")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("span", { className: "block text-xs text-muted-foreground", children: [
-        "Base radius \u2014 ",
-        radius,
-        "rem"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: 0,
-          max: 1.5,
-          step: 0.125,
-          value: radius,
-          onChange: (e) => setRadius(Number(e.target.value)),
-          "aria-label": "Base radius",
-          className: "mt-2 w-full accent-[color:var(--color-primary)]",
-          "data-testid": tid("radius")
-        }
-      )
-    ] })
-  ] });
-  const Preview = /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-lg", "data-testid": tid("preview"), children: [
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Live preview" }) }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rounded-[var(--radius)] bg-primary p-4 text-primary-foreground", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-display text-lg font-semibold", children: preview?.title ?? "Preview" }),
-        preview?.subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80", children: preview.subtitle })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-1.5", children: tokens.map((t) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          title: t.label,
-          className: "aspect-square rounded-md border border-border",
-          style: { background: `var(--color-${t.key})` }
-        },
-        t.key
-      )) }),
-      /* @__PURE__ */ jsxs("div", { className: "rounded-[var(--radius)] border border-border bg-[color:var(--color-ai-accent-soft,var(--color-accent))] p-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--color-ai-accent,var(--color-primary))]", children: "AI action surface" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Themed by the AI-kit accent tokens." })
-      ] })
-    ] })
-  ] });
-  const SaveBar = onSave && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-3", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => void save(),
-        disabled: saving,
-        className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60",
-        "data-testid": tid("save"),
-        children: [
-          savedVia ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Save, { className: "size-4" }),
-          saving ? "Saving\u2026" : savedVia ? "Saved" : "Save theme"
-        ]
-      }
-    ),
-    savedVia && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", "data-testid": tid("via"), children: [
-      "stored via ",
-      savedVia
-    ] })
-  ] });
-  if (variant === "collapsed") {
-    const controlsId = `${testIdPrefix}-controls`;
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-testid": testIdPrefix, children: [
-      Presets,
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 gap-1.5 @xl:grid-cols-12", "aria-hidden": "true", children: tokens.slice(0, 12).map((t) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          title: t.label,
-          className: "aspect-square rounded-md border border-border",
-          style: { background: `var(--color-${t.key})` }
-        },
-        t.key
-      )) }),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen((o) => !o),
-          "aria-expanded": open,
-          "aria-controls": controlsId,
-          className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground hover:text-primary",
-          "data-testid": tid("customize"),
-          children: [
-            /* @__PURE__ */ jsx(ChevronDown, { className: `size-4 transition-transform ${open ? "rotate-180" : ""}` }),
-            "Customize colours and type"
-          ]
-        }
-      ),
-      open && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          id: controlsId,
-          className: "max-h-[28rem] overflow-y-auto rounded-md border border-border bg-card p-4",
-          "data-testid": tid("controls"),
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Colours" }),
-            /* @__PURE__ */ jsx("div", { className: "grid gap-3 @xl:grid-cols-2", children: tokens.map((t) => colorRow(t.key, t.label)) }),
-            /* @__PURE__ */ jsx("p", { className: "mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Typography & shape" }),
-            Typography
-          ]
-        }
-      ),
-      SaveBar
-    ] });
-  }
-  if (variant === "drawer") {
-    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-y-auto bg-card p-5", "data-testid": testIdPrefix, children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "font-display text-lg font-semibold text-foreground", children: "Theme" }) }),
-      Presets,
-      /* @__PURE__ */ jsx("p", { className: "mt-5 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Colours" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: tokens.map((t) => colorRow(t.key, t.label)) }),
-      /* @__PURE__ */ jsx("p", { className: "mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Typography & shape" }),
-      Typography,
-      SaveBar
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_320px]", "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-lg", children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(Palette, { className: "size-4 text-[color:var(--color-primary)]" }),
-          " Presets"
-        ] }) }),
-        /* @__PURE__ */ jsx(CardContent, { children: Presets })
-      ] }),
-      groups.map((group) => /* @__PURE__ */ jsxs(
-        Card,
-        {
-          variant: "elevated",
-          className: "rounded-lg",
-          "data-testid": tid(`group-${group}`),
-          children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: groupLabels[group] ?? group }) }),
-            /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3 @xl:grid-cols-2", children: tokens.filter((t) => t.group === group).map((t) => colorRow(t.key, t.label)) })
-          ]
-        },
-        group
-      )),
-      /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-lg", children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Typography & shape" }) }),
-        /* @__PURE__ */ jsx(CardContent, { children: Typography })
-      ] }),
-      SaveBar
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-4 lg:self-start", children: Preview })
-  ] });
-}
 function SectionHeading({
   eyebrow,
   title,
@@ -1605,6 +1190,6 @@ function TestimonialGrid({ items, columns = "3", testId }) {
   )) });
 }
 
-export { ASSET_REF_PREFIX, Accordion, AssetResolverProvider, AvatarBlock, Banner, BlockImage, BlockLink, CTABanner, Columns, ContactForm, Container, EditorialProfileCard, EditorialToneContext, FAQ, FeatureGrid, Footer, Gallery, Hero, ListBlock, LogoCloud, MediaText, Navbar, PricingTable, RichTextBlock, SectionHeading, Spacer, Steps, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, VideoEmbed, applyFontVars, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearFontVars, clearThemeVars, createThemeStore, formatIndex, isAssetRef, toEmbedUrl, toHslTriplet, useAssetRenderer, useAssetResolverActive, useEditorialTone };
-//# sourceMappingURL=chunk-SKVVOEMX.js.map
-//# sourceMappingURL=chunk-SKVVOEMX.js.map
+export { ASSET_REF_PREFIX, Accordion, AssetResolverProvider, AvatarBlock, Banner, BlockImage, BlockLink, CTABanner, Columns, ContactForm, Container, EditorialProfileCard, EditorialToneContext, FAQ, FeatureGrid, Footer, Gallery, Hero, ListBlock, LogoCloud, MediaText, Navbar, PricingTable, RichTextBlock, SectionHeading, Spacer, Steps, Tabs, TeamGrid, Testimonial, TestimonialGrid, VideoEmbed, applyStoredTheme, asAssetRef, assetRefId, createThemeStore, formatIndex, isAssetRef, toEmbedUrl, useAssetRenderer, useAssetResolverActive, useEditorialTone };
+//# sourceMappingURL=chunk-XXUPUXBF.js.map
+//# sourceMappingURL=chunk-XXUPUXBF.js.map