@weasel-js/ui 1.7.1 → 1.7.3

package/dist/chunks/{DataGrid-BklgBqS0.js → DataGrid-CmHJe57v.js}

@@ -3,20 +3,21 @@ import { t } from "./Disclosure-Ch2KxYuB.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Fragment as a, useId as o, useMemo as s, useState as c } from "react";
 var l = {
-	grid: "_grid_18g0w_1",
-	table: "_table_18g0w_6",
-	sortButton: "_sortButton_18g0w_32",
-	sortActive: "_sortActive_18g0w_44",
-	empty: "_empty_18g0w_46",
-	handleCol: "_handleCol_18g0w_54",
-	handleCell: "_handleCell_18g0w_55",
-	dragging: "_dragging_18g0w_64",
-	dropBefore: "_dropBefore_18g0w_66",
-	dropAfter: "_dropAfter_18g0w_67",
-	clickable: "_clickable_18g0w_70",
-	detailCol: "_detailCol_18g0w_78",
-	detailCell: "_detailCell_18g0w_79",
-	detailRow: "_detailRow_18g0w_85"
+	grid: "_grid_10x6p_1",
+	table: "_table_10x6p_6",
+	numeric: "_numeric_10x6p_18 _numeric_zns9n_4",
+	sortButton: "_sortButton_10x6p_38",
+	sortActive: "_sortActive_10x6p_50",
+	empty: "_empty_10x6p_52",
+	handleCol: "_handleCol_10x6p_60",
+	handleCell: "_handleCell_10x6p_61",
+	dragging: "_dragging_10x6p_70",
+	dropBefore: "_dropBefore_10x6p_72",
+	dropAfter: "_dropAfter_10x6p_73",
+	clickable: "_clickable_10x6p_76",
+	detailCol: "_detailCol_10x6p_84",
+	detailCell: "_detailCell_10x6p_85",
+	detailRow: "_detailRow_10x6p_91"
 }, u = "a[href], button, input, select, textarea, label, summary, [role=\"button\"], [contenteditable=\"true\"]";
 function d(e) {
 	let t = e.target?.closest?.(u);
@@ -72,7 +73,11 @@ function f(u) {
 				p.map((e) => {
 					let t = e.sortable !== !1, a = T?.columnId === e.id, o = a ? T.direction === "asc" ? " ↑" : " ↓" : "";
 					return /* @__PURE__ */ r("th", {
-						className: [e.className, a ? l.sortActive : ""].filter(Boolean).join(" "),
+						className: [
+							e.className,
+							e.numeric && l.numeric,
+							a && l.sortActive
+						].filter(Boolean).join(" ") || void 0,
 						"aria-sort": t ? a ? T.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
 						children: t ? /* @__PURE__ */ i("button", {
 							type: "button",
@@ -127,7 +132,7 @@ function f(u) {
 							p.map((t) => {
 								let n = t.accessor ?? ((e) => e[t.id]), i = t.render ? t.render(e) : String(n(e) ?? "");
 								return /* @__PURE__ */ r("td", {
-									className: t.className,
+									className: [t.className, t.numeric && l.numeric].filter(Boolean).join(" ") || void 0,
 									children: i
 								}, t.id);
 							})
@@ -149,4 +154,4 @@ function f(u) {
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=DataGrid-BklgBqS0.js.map
+//# sourceMappingURL=DataGrid-CmHJe57v.js.map

package/dist/chunks/DataGrid-CmHJe57v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid-CmHJe57v.js","names":["s","_Fragment","Fragment","useReorderDragList","Fragment$1","DataGrid_module_default","INTERACTIVE","fromControl","hit","DataGrid","props","sort","setSort","useState","defaultSort","ownExpanded","setOwnExpanded","defaultExpandedIds","expanded","expandedIds","detailIdBase","useId","toggleExpanded","next","id","onExpandedChange","sortedRows","useMemo","rows","col","columns","c","get","row","dir","av","a","bv","b","cycleSort","cur","columnId","drag","r","onReorder","dragEnabled","detailEnabled","renderDetail","colCount","cls","className","sortable","active","indicator","Fragment","empty","isDragging","target","expandable","rowExpandable","isExpanded","detail","detailId","rowCls","onRowClick","i","rowClassName","e","Disclosure","content"],"sources":["../../src/components/DataGrid/DataGrid.module.css","../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":[".grid {\n  position: relative;\n  width: 100%;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.table th,\n.table td {\n  text-align: left;\n  padding: 3px var(--wzl-space-3);\n  vertical-align: middle;\n}\n.numeric {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n}\n.table .numeric {\n  text-align: end;\n}\n.table tbody tr {\n  border-bottom: 1px solid var(--wzl-line-subtle);\n}\n\n.table th {\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-muted);\n  position: sticky;\n  top: 0;\n  background: var(--wzl-surface);\n  z-index: 1;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.sortButton {\n  all: unset;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n  width: 100%;\n}\n.sortButton:hover { color: var(--wzl-fg); }\n.sortButton:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n.sortActive { color: var(--wzl-fg); }\n\n.empty {\n  color: var(--wzl-fg-muted);\n  font-style: italic;\n  padding: var(--wzl-space-4) 0;\n  text-align: center;\n}\n\n/* Drag-handle column. */\n.handleCol { width: 14px; }\n.handleCell {\n  width: 14px;\n  cursor: grab;\n  color: var(--wzl-fg-muted);\n  user-select: none;\n  text-align: center;\n}\n.handleCell:active { cursor: grabbing; }\n\n.dragging { opacity: 0.4; }\n\n.dropBefore > td { box-shadow: inset 0 2px 0 0 var(--wzl-accent); }\n.dropAfter > td { box-shadow: inset 0 -2px 0 0 var(--wzl-accent); }\n\n/* Row activation (`onRowClick`). */\n.clickable { cursor: pointer; }\n.clickable:hover > td { background: var(--wzl-surface-hover); }\n.clickable:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* Disclosure column and the detail row it opens. */\n.detailCol,\n.detailCell {\n  width: var(--wzl-control-h-sm);\n  padding-inline: 0;\n  text-align: center;\n}\n.table .detailCell { padding-block: 0; }\n.detailRow > td {\n  padding: var(--wzl-space-2) var(--wzl-space-3) var(--wzl-space-3);\n  background: var(--wzl-surface-sunken);\n}\n","/**\n * Lightweight sortable data grid. Use for inspector tables — action\n * registries, route maps, telemetry rows. Intentionally narrow:\n *\n * - Sortable columns (click header to cycle asc → desc → none)\n * - Custom cell render via per-column `render`\n * - Optional drag handles for row reordering (when `onReorder` is set)\n * - Per-row class, row activation, and expandable full-width detail rows\n *\n * Not: virtual scrolling, column resizing, multi-column sort, filtering,\n * inline editing. Reach for a real grid library when you need those.\n */\nimport { Fragment, useId, useMemo, useState } from 'react';\nimport type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport { Disclosure } from '../Disclosure';\nimport s from './DataGrid.module.css';\n\n/**\n * One column of a {@link DataGrid}. `id` doubles as the default property name\n * read off each row when no `accessor` is given.\n */\nexport interface DataGridColumn<Row> {\n  id: string;\n  header: ReactNode;\n  /** Pull a sortable value from the row. Defaults to `(row as any)[column.id]`. */\n  accessor?: (row: Row) => string | number | null | undefined;\n  /** Render the cell. Defaults to `String(accessor(row) ?? '')`. */\n  render?: (row: Row) => ReactNode;\n  /** Default true. Set false to suppress the sort affordance on this column. */\n  sortable?: boolean;\n  /** Optional CSS class on every <td> in this column. */\n  className?: string;\n  /** A column of figures: equal-width digits, aligned to the end so the column\n   *  reads down. Header included, so its label sits over the numbers. */\n  numeric?: boolean;\n}\n\n/** Props for {@link DataGrid}. */\nexport interface DataGridProps<Row extends { id: string }> {\n  rows: readonly Row[];\n  columns: readonly DataGridColumn<Row>[];\n  /** Initial sort. Omit for unsorted (rows render in input order). */\n  defaultSort?: { columnId: string; direction: 'asc' | 'desc' };\n  /** Enable drag handles in a leading column. Receives the reorder spec\n   *  (the existing `useReorderDragList` semantics — see weasel-ui). */\n  onReorder?: (ids: string[], targetIndex: number) => void;\n  /** Empty-state row text. Default `'—'`. */\n  empty?: ReactNode;\n  className?: string;\n  /** Extra class on a row's `<tr>`, for row-level state such as a verdict. */\n  rowClassName?: (row: Row) => string | undefined;\n  /**\n   * Activate a row. Makes each row focusable: a click anywhere in it, or\n   * Enter/Space while it has focus, calls this. Clicks and keys landing on a\n   * control inside a cell (button, link, input, …) are left to that control.\n   */\n  onRowClick?: (row: Row) => void;\n  /**\n   * Content for a full-width detail row under `row`, shown while the row is\n   * expanded. Setting it adds a leading disclosure column. Return `null` for\n   * no detail row.\n   */\n  renderDetail?: (row: Row) => ReactNode;\n  /** Which rows offer the disclosure. Default: every row. */\n  rowExpandable?: (row: Row) => boolean;\n  /** Expanded row ids, controlled. Pair with `onExpandedChange`. */\n  expandedIds?: ReadonlySet<string>;\n  /** Initially expanded row ids when uncontrolled. */\n  defaultExpandedIds?: Iterable<string>;\n  /** Called with the next expanded set when a disclosure toggles. */\n  onExpandedChange?: (ids: ReadonlySet<string>) => void;\n}\n\ntype SortState = { columnId: string; direction: 'asc' | 'desc' } | null;\n\nconst INTERACTIVE = 'a[href], button, input, select, textarea, label, summary, [role=\"button\"], [contenteditable=\"true\"]';\n\n/** Did this event start on a control inside the row rather than on the row itself? */\nfunction fromControl(e: MouseEvent | KeyboardEvent): boolean {\n  const target = e.target as Element | null;\n  const hit = target?.closest?.(INTERACTIVE);\n  return !!hit && e.currentTarget.contains(hit);\n}\n\n/**\n * Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a\n * sortable header cycles ascending, descending, unsorted; nullish values sort\n * last regardless of direction. Passing `onReorder` adds a leading drag-handle\n * column — note that the drag indices it reports are into the *sorted* row\n * order, not the input order.\n */\nexport function DataGrid<Row extends { id: string }>(props: DataGridProps<Row>) {\n  const {\n    rows, columns, defaultSort, onReorder, empty = '—', className,\n    rowClassName, onRowClick, renderDetail, rowExpandable, expandedIds, defaultExpandedIds, onExpandedChange,\n  } = props;\n  const [sort, setSort] = useState<SortState>(defaultSort ?? null);\n  const [ownExpanded, setOwnExpanded] = useState<ReadonlySet<string>>(() => new Set(defaultExpandedIds));\n  const expanded = expandedIds ?? ownExpanded;\n  const detailIdBase = useId();\n\n  const toggleExpanded = (id: string) => {\n    const next = new Set(expanded);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    if (!expandedIds) setOwnExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return [...rows];\n    const col = columns.find((c) => c.id === sort.columnId);\n    if (!col) return [...rows];\n    const get = col.accessor ?? ((row: Row) => (row as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n    const dir = sort.direction === 'asc' ? 1 : -1;\n    return [...rows].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      if (av < bv) return -1 * dir;\n      if (av > bv) return 1 * dir;\n      return 0;\n    });\n  }, [rows, columns, sort]);\n\n  const cycleSort = (columnId: string) => {\n    setSort((cur) => {\n      if (!cur || cur.columnId !== columnId) return { columnId, direction: 'asc' };\n      if (cur.direction === 'asc') return { columnId, direction: 'desc' };\n      return null;\n    });\n  };\n\n  // Drag handles via useReorderDragList. Adapter: the hook expects\n  // `{ id, label }`-shaped items; we map our rows to that shape (label\n  // unused — the hook only uses id and locked).\n  const drag = useReorderDragList({\n    items: sortedRows.map((r) => ({ id: r.id, label: '' })),\n    selectedIds: [],\n    onReorder: onReorder ?? (() => {}),\n    rowSelector: ':not([data-detail-of])',\n  });\n  const dragEnabled = !!onReorder;\n  const detailEnabled = !!renderDetail;\n  const colCount = columns.length + (dragEnabled ? 1 : 0) + (detailEnabled ? 1 : 0);\n\n  const cls = [s.grid, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n    >\n      <table className={s.table}>\n        <thead>\n          <tr>\n            {dragEnabled && <th className={s.handleCol} aria-label=\"drag\" />}\n            {detailEnabled && <th className={s.detailCol} aria-label=\"details\" />}\n            {columns.map((col) => {\n              const sortable = col.sortable !== false;\n              const active = sort?.columnId === col.id;\n              const indicator = active ? (sort.direction === 'asc' ? ' ↑' : ' ↓') : '';\n              return (\n                <th\n                  key={col.id}\n                  className={[col.className, col.numeric && s.numeric, active && s.sortActive].filter(Boolean).join(' ') || undefined}\n                  aria-sort={sortable ? (active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none') : undefined}\n                >\n                  {sortable ? (\n                    <button type=\"button\" className={s.sortButton} onClick={() => cycleSort(col.id)}>\n                      {col.header}{indicator}\n                    </button>\n                  ) : (\n                    <>{col.header}{indicator}</>\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody ref={dragEnabled ? (drag.containerProps.ref as React.RefCallback<HTMLTableSectionElement>) : undefined}>\n          {sortedRows.length === 0 && (\n            <tr>\n              <td colSpan={colCount} className={s.empty}>\n                {empty}\n              </td>\n            </tr>\n          )}\n          {sortedRows.map((row, i) => {\n            const isDragging = drag.state.draggedIds?.includes(row.id) ?? false;\n            const target = drag.state.targetIndex;\n            const expandable = detailEnabled && (rowExpandable?.(row) ?? true);\n            const isExpanded = expandable && expanded.has(row.id);\n            const detail = isExpanded ? renderDetail!(row) : null;\n            const detailId = `${detailIdBase}-detail-${row.id}`;\n            const rowCls = [\n              onRowClick && s.clickable,\n              isDragging && s.dragging,\n              target === i && s.dropBefore,\n              target === sortedRows.length && i === sortedRows.length - 1 && s.dropAfter,\n              rowClassName?.(row),\n            ].filter(Boolean).join(' ');\n            return (\n              <Fragment key={row.id}>\n                <tr\n                  className={rowCls || undefined}\n                  data-expanded={isExpanded || undefined}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onClick={onRowClick ? (e) => { if (!fromControl(e)) onRowClick(row); } : undefined}\n                  onKeyDown={onRowClick ? (e) => {\n                    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return;\n                    e.preventDefault();\n                    onRowClick(row);\n                  } : undefined}\n                >\n                  {dragEnabled && (\n                    <td\n                      className={s.handleCell}\n                      onPointerDown={(e) => drag.rowProps(row.id, i).onPointerDown(e)}\n                    >\n                      <span aria-hidden=\"true\">⋮⋮</span>\n                    </td>\n                  )}\n                  {detailEnabled && (\n                    <td className={s.detailCell}>\n                      {expandable && (\n                        <Disclosure\n                          open={isExpanded}\n                          onToggle={() => toggleExpanded(row.id)}\n                          label={isExpanded ? 'Hide details' : 'Show details'}\n                          controls={detail != null ? detailId : undefined}\n                        />\n                      )}\n                    </td>\n                  )}\n                  {columns.map((col) => {\n                    const get = col.accessor ?? ((r: Row) => (r as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n                    const content = col.render ? col.render(row) : String(get(row) ?? '');\n                    return (\n                      <td key={col.id} className={[col.className, col.numeric && s.numeric].filter(Boolean).join(' ') || undefined}>\n                        {content}\n                      </td>\n                    );\n                  })}\n                </tr>\n                {detail != null && (\n                  <tr id={detailId} className={s.detailRow} data-detail-of={row.id}>\n                    <td colSpan={colCount}>{detail}</td>\n                  </tr>\n                )}\n              </Fragment>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/DetailList-BpU50XVe.js

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { createContext as n, useContext as r, useId as i } from "react";
+var a = {
+	list: "_list_bna9x_1",
+	row: "_row_bna9x_14",
+	label: "_label_bna9x_22",
+	value: "_value_bna9x_36",
+	figures: "_figures_bna9x_59 _numeric_zns9n_4",
+	dot: "_dot_bna9x_69",
+	title: "_title_bna9x_81"
+}, o = n("text");
+function s({ children: n, title: r, layout: s = "inline", values: c = "text", className: l }) {
+	let u = i(), d = /* @__PURE__ */ e("dl", {
+		className: l && r == null ? `${a.list} ${l}` : a.list,
+		"data-layout": s,
+		"data-values": c,
+		"aria-labelledby": r == null ? void 0 : u,
+		children: /* @__PURE__ */ e(o.Provider, {
+			value: c,
+			children: n
+		})
+	});
+	return r == null ? d : /* @__PURE__ */ t("section", {
+		className: l,
+		children: [/* @__PURE__ */ e("h3", {
+			id: u,
+			className: a.title,
+			children: r
+		}), d]
+	});
+}
+function c({ label: n, children: i, placeholder: s = "–", status: c, values: l, className: u }) {
+	let d = i == null, f = r(o), p = (l ?? f) === "figures";
+	return /* @__PURE__ */ t("div", {
+		className: u ? `${a.row} ${u}` : a.row,
+		"data-status": c,
+		"data-values": l,
+		children: [/* @__PURE__ */ e("dt", {
+			className: a.label,
+			children: n
+		}), /* @__PURE__ */ t("dd", {
+			className: p ? `${a.value} ${a.figures}` : a.value,
+			"data-empty": d || void 0,
+			children: [c && /* @__PURE__ */ e("span", {
+				className: a.dot,
+				"aria-hidden": "true"
+			}), d ? s : i]
+		})]
+	});
+}
+//#endregion
+export { c as n, s as t };
+
+//# sourceMappingURL=DetailList-BpU50XVe.js.map

package/dist/chunks/DetailList-BpU50XVe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailList-BpU50XVe.js","names":["s","DetailList_module_default","ListValues","createContext","DetailList","titleId","useId","list","className","title","layout","values","DetailRow","empty","children","listValues","useContext","figures","status","label","placeholder"],"sources":["../../src/components/DetailList/DetailList.module.css","../../src/components/DetailList/DetailList.tsx"],"sourcesContent":[".list {\n  display: grid;\n  grid-template-columns: var(--wzl-params-label-width, auto) minmax(0, 1fr);\n  column-gap: var(--wzl-space-6);\n  row-gap: var(--wzl-space-1);\n  margin: 0;\n  font-size: var(--wzl-font-size-md);\n}\n\n.list[data-layout='block'] {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n.row {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n  /* A label meets the first line of its value, however many lines that runs to. */\n  align-items: baseline;\n}\n\n.label {\n  display: flex;\n  align-items: baseline;\n  justify-content: var(--wzl-params-label-align, start);\n  gap: var(--wzl-space-2);\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-snug);\n  color: var(--wzl-fg-muted);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n}\n\n.value {\n  margin: 0;\n  min-width: 0;\n  /* The floor a property row stands on, so the two share a rhythm side by side. */\n  min-height: var(--wzl-prop-row-h, var(--wzl-field-h, var(--wzl-control-h)));\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  overflow-wrap: anywhere;\n  color: var(--wzl-fg);\n}\n\n.value[data-empty] {\n  color: var(--wzl-fg-muted);\n}\n\n.list[data-values='figures'] {\n  grid-template-columns: var(--wzl-params-label-width, auto) minmax(min-content, 1fr);\n}\n\n/* Set by the row from its own `values` or its list's. Declared after `.value`,\n   which it overrides at equal specificity. */\n.figures {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  justify-content: flex-end;\n  text-align: end;\n  /* On the cell, not the track, so ch measures the figures' own face. */\n  min-width: var(--wzl-detail-figure-min-width, 8ch);\n  white-space: pre;\n  overflow-wrap: normal;\n}\n\n.dot {\n  flex: none;\n  width: 0.5em;\n  height: 0.5em;\n  border-radius: 50%;\n  background: currentColor;\n}\n\n.row[data-status='success'] .dot { background: var(--wzl-success); }\n.row[data-status='warn'] .dot { background: var(--wzl-warning); }\n.row[data-status='danger'] .dot { background: var(--wzl-danger); }\n\n.title {\n  margin: 0 0 var(--wzl-space-3);\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n}\n","import { createContext, type ReactNode, useContext, useId } from 'react';\nimport s from './DetailList.module.css';\n\n/** Whether a row's label sits beside its value or above it. */\nexport type DetailListLayout = 'inline' | 'block';\n\n/**\n * How a list sets its values. `text` starts each value at the column's edge\n * and wraps it; `figures` right-aligns it in a column at least\n * `--wzl-detail-figure-min-width` (default `8ch`) wide, in equal-width digits,\n * with spaces kept, so figure-space padding lines a column up on its decimal\n * point.\n */\nexport type DetailListValues = 'text' | 'figures';\n\nconst ListValues = createContext<DetailListValues>('text');\n\n/** The state a row's status dot reports, painted from `--wzl-success`,\n *  `--wzl-warning` or `--wzl-danger`. */\nexport type DetailRowStatus = 'success' | 'warn' | 'danger';\n\n/** Props for {@link DetailList}. */\nexport interface DetailListProps {\n  /** {@link DetailRow}s. */\n  children: ReactNode;\n  /** Heading drawn above the list, which also names it. */\n  title?: ReactNode;\n  /**\n   * `inline` puts every label in one rail beside the values; `block` stacks\n   * each label over its value, for a column too narrow to hold both.\n   */\n  layout?: DetailListLayout;\n  /** `text` by default. See {@link DetailListValues}. */\n  values?: DetailListValues;\n  /** Class on the outermost element: the `<dl>`, or the `<section>` holding\n   *  the heading and the list when there is a `title`. */\n  className?: string;\n}\n\n/** Props for {@link DetailRow}. */\nexport interface DetailRowProps {\n  label: ReactNode;\n  /** The value: text, or any run of elements — code chips, badges, keycaps,\n   *  links. Several children wrap as a line of items. `null` or `undefined`\n   *  keeps the row in place showing `placeholder`, so a list whose values\n   *  come and go holds its height. */\n  children?: ReactNode;\n  /** Shown while there is no value. An en dash by default. */\n  placeholder?: ReactNode;\n  /**\n   * Draws a dot in the status color before the value. The dot is hidden from\n   * assistive technology and color is never the only signal, so the value\n   * itself has to say the same thing — \"locked\", not just a green dot.\n   */\n  status?: DetailRowStatus;\n  /** Sets this row's value as `text` or `figures`, whatever the list's\n   *  `values` says — a sentence among figures, or one figure among text. */\n  values?: DetailListValues;\n  className?: string;\n}\n\n/**\n * A read-only list of labeled values — the `<dl>` a property panel would be\n * if its rows held facts instead of controls. Labels take the params label\n * recipe and rail: `--wzl-params-label-width` sets the rail, so a detail list\n * and a property panel beside it line their labels up from one declaration.\n */\nexport function DetailList({ children, title, layout = 'inline', values = 'text', className }: DetailListProps) {\n  const titleId = useId();\n  const list = (\n    <dl\n      className={className && title == null ? `${s.list} ${className}` : s.list}\n      data-layout={layout}\n      data-values={values}\n      aria-labelledby={title != null ? titleId : undefined}\n    >\n      <ListValues.Provider value={values}>{children}</ListValues.Provider>\n    </dl>\n  );\n  if (title == null) return list;\n  return (\n    <section className={className}>\n      <h3 id={titleId} className={s.title}>{title}</h3>\n      {list}\n    </section>\n  );\n}\n\n/** One label and its value in a {@link DetailList}. */\nexport function DetailRow({ label, children, placeholder = '–', status, values, className }: DetailRowProps) {\n  const empty = children == null;\n  const listValues = useContext(ListValues);\n  const figures = (values ?? listValues) === 'figures';\n  return (\n    <div className={className ? `${s.row} ${className}` : s.row} data-status={status} data-values={values}>\n      <dt className={s.label}>{label}</dt>\n      <dd className={figures ? `${s.value} ${s.figures}` : s.value} data-empty={empty || undefined}>\n        {status && <span className={s.dot} aria-hidden=\"true\" />}\n        {empty ? placeholder : children}\n      </dd>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;GCeME,IAAaC,EAAgC,MAAM;AAoDzD,SAAgBC,EAAW,EAAE,aAAU,UAAO,YAAS,UAAU,YAAS,QAAQ,gBAA8B;CAC9G,IAAMC,IAAUC,EAAM,GAChBC,IACJ,kBAAC,MAAD;EACE,WAAWC,KAAaC,KAAS,OAAO,GAAGT,EAAE,KAAK,GAAGQ,MAAcR,EAAE;EACrE,eAAaU;EACb,eAAaC;EACb,mBAAiBF,KAAS,OAAiB,KAAA,IAAVJ;EAEjC,UAAA,kBAACH,EAAW,UAAZ;GAAqB,OAAOS;GAAS;EAA8B,CAAA;CACjE,CAAA;CAGN,OADIF,KAAS,OAAaF,IAExB,kBAAC,WAAD;EAAoB;EAApB,UAAA,CACE,kBAAC,MAAD;GAAI,IAAIF;GAAS,WAAWL,EAAE;GAAQ,UAAAS;EAAU,CAAA,GAC/CF,CACM;;AAEb;AAGA,SAAgBK,EAAU,EAAE,UAAO,aAAU,iBAAc,KAAK,WAAQ,WAAQ,gBAA6B;CAC3G,IAAMC,IAAQC,KAAY,MACpBC,IAAaC,EAAWd,CAAU,GAClCe,KAAWN,KAAUI,OAAgB;CAC3C,OACE,kBAAC,OAAD;EAAK,WAAWP,IAAY,GAAGR,EAAE,IAAI,GAAGQ,MAAcR,EAAE;EAAK,eAAakB;EAAQ,eAAaP;EAA/F,UAAA,CACE,kBAAC,MAAD;GAAI,WAAWX,EAAE;GAAQ,UAAAmB;EAAU,CAAA,GACnC,kBAAC,MAAD;GAAI,WAAWF,IAAU,GAAGjB,EAAE,MAAM,GAAGA,EAAE,YAAYA,EAAE;GAAO,cAAYa,KAAS,KAAA;GAAnF,UAAA,CACGK,KAAU,kBAAC,QAAD;IAAM,WAAWlB,EAAE;IAAK,eAAY;GAAQ,CAAA,GACtDa,IAAQO,IAAcN,CACrB;EACD,CAAA,CAAA;;AAET"}

package/dist/chunks/{DetentSlider-Bh7EpMqT.js → DetentSlider-DNTAk8xP.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Slider-Cl5RCeZ7.js";
+import { t as e } from "./Slider-DSrlMEq8.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useEffect as n, useRef as r } from "react";
 var i = {
@@ -69,4 +69,4 @@ function c(c) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=DetentSlider-Bh7EpMqT.js.map
+//# sourceMappingURL=DetentSlider-DNTAk8xP.js.map

package/dist/chunks/{DetentSlider-Bh7EpMqT.js.map → DetentSlider-DNTAk8xP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DetentSlider-Bh7EpMqT.js","names":["s","Slider","DetentSlider_module_default","normalize","items","it","resolveIndex","exact","value","best","bestGap","i","v","gap","plainText","label","fallback","DetentSlider","props","index","lastIndex","labelOf","item","formatLabel","liveRef","useRef","changedRef","handleInput","next","onChange","handleCommit","current","className","thumbs","stops"],"sources":["../../src/components/DetentSlider/DetentSlider.module.css","../../src/components/DetentSlider/DetentSlider.tsx"],"sourcesContent":[".root {\n  position: relative;\n  /* Read by Slider's track and stop marks. Detents run the full height of the\n   * track so they read as notches rather than as tally marks beside it. */\n  --rp-tick-inset: 0;\n  --rp-tick-width: 1px;\n  --rp-tick-color: var(--wzl-border-strong);\n  --rp-track-cursor: pointer;\n  font-family: var(--wzl-font-ui);\n}\n\n.slider {\n  width: 100%;\n}\n\n","import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';\nimport { Slider, type SliderStop, type Thumb } from '../Slider/Slider';\nimport s from './DetentSlider.module.css';\n\n/** What a detent can carry. Narrowed so identity comparison and React keys\n *  both work without a keying callback. */\nexport type DetentValue = string | number;\n\n/** One detent on a {@link DetentSlider}. */\nexport type DetentItem<V extends DetentValue = number> = {\n  value: V;\n  /** Drawn under the detent. Defaults to `formatLabel(value)`, then `value`. */\n  label?: ReactNode;\n  /** Spoken form, when the drawn label is not the right thing to say. */\n  ariaLabel?: string;\n};\n\n/**\n * Props for {@link DetentSlider}.\n *\n * `items` takes bare values or `DetentItem`s interchangeably — a bare value is\n * a detent with no label of its own.\n *\n * `onChange` fires on every detent the control passes through, including\n * mid-drag: each one is a complete, legal choice, so there is no in-flight\n * value to withhold. `onCommit` fires once the gesture that changed things\n * ends, and is the one to write to history.\n */\nexport type DetentSliderProps<V extends DetentValue = number> = {\n  items: readonly (V | DetentItem<V>)[];\n  value: V;\n  onChange: (value: V, index: number) => void;\n  onCommit?: (value: V, index: number) => void;\n  formatLabel?: (value: V, index: number) => ReactNode;\n  labels?: 'all' | 'ends' | 'none';\n  trackHeight?: number;\n  ariaLabel?: string;\n  className?: string;\n};\n\nfunction normalize<V extends DetentValue>(items: readonly (V | DetentItem<V>)[]): DetentItem<V>[] {\n  return items.map(it => (typeof it === 'object' && it !== null ? it : ({ value: it } as DetentItem<V>)));\n}\n\n/**\n * The detent `value` selects. An exact match wins; a number that matches none\n * lands on the nearest one, so a value arriving from a numeric field or an\n * older save renders where it belongs rather than silently reading as the\n * first detent.\n */\nfunction resolveIndex<V extends DetentValue>(items: readonly DetentItem<V>[], value: V): number {\n  const exact = items.findIndex(it => it.value === value);\n  if (exact !== -1) return exact;\n  if (typeof value !== 'number') return 0;\n  let best = 0;\n  let bestGap = Infinity;\n  for (let i = 0; i < items.length; i++) {\n    const v = items[i].value;\n    if (typeof v !== 'number') continue;\n    const gap = Math.abs(v - value);\n    if (gap < bestGap) {\n      bestGap = gap;\n      best = i;\n    }\n  }\n  return best;\n}\n\nfunction plainText(label: ReactNode, fallback: DetentValue): string {\n  return typeof label === 'string' || typeof label === 'number' ? String(label) : String(fallback);\n}\n\n/**\n * Slider over a fixed list of values: one detent per value, evenly spaced, the\n * thumb resting on one of them.\n *\n * This is the shape to reach for when an option has a small set of allowed\n * values along a line — playback rate, zoom step, quality — in place of a\n * dropdown, which hides the ordering and the extent of the range behind a\n * click. The values need only be ordered, not numeric.\n *\n * It is a strict {@link Slider} over the *index* of `items`, which keeps the\n * detents evenly spaced however the values are distributed. Since the index is\n * meaningless to a screen reader, the value is published as `aria-valuetext`.\n * For numbers that may also rest between the detents, use `Slider` directly\n * with `spacing=\"even\"` and magnetic stops.\n */\nexport function DetentSlider<V extends DetentValue = number>(props: DetentSliderProps<V>): ReactElement {\n  const { value, onChange, onCommit, formatLabel, ariaLabel, className } = props;\n  const items = normalize(props.items);\n  const index = resolveIndex(items, value);\n  const lastIndex = Math.max(0, items.length - 1);\n\n  const labelOf = (item: DetentItem<V>, i: number): ReactNode =>\n    item.label ?? formatLabel?.(item.value, i) ?? String(item.value);\n\n  // Deduped separately: `live` suppresses the repeat reports a drag produces\n  // while the pointer crosses one detent, `changed` keeps a press that chose\n  // nothing from landing a no-op entry in the consumer's history.\n  const liveRef = useRef(index);\n  const changedRef = useRef(false);\n  useEffect(() => {\n    liveRef.current = index;\n  }, [index]);\n\n  const handleInput = (next: Thumb[]) => {\n    const i = next[0].value;\n    if (i === liveRef.current) return;\n    liveRef.current = i;\n    changedRef.current = true;\n    onChange(items[i].value, i);\n  };\n\n  const handleCommit = (next: Thumb[]) => {\n    if (!changedRef.current) return;\n    changedRef.current = false;\n    const i = next[0].value;\n    onCommit?.(items[i].value, i);\n  };\n\n  const current = items[index];\n  if (!current) return <div className={className ? `${s.root} ${className}` : s.root} />;\n\n  const thumbs: Thumb[] = [\n    { value: index, valueText: current.ariaLabel ?? plainText(labelOf(current, index), current.value) },\n  ];\n\n  const stops: SliderStop[] = items.map((item, i) => ({ value: i, label: labelOf(item, i) }));\n\n  return (\n    <div className={className ? `${s.root} ${className}` : s.root}>\n      <Slider\n        className={s.slider}\n        min={0}\n        max={lastIndex}\n        stops={stops}\n        snap=\"strict\"\n        stopLabels={props.labels ?? 'all'}\n        trackClick=\"move-nearest\"\n        trackHeight={props.trackHeight ?? 8}\n        ariaLabel={ariaLabel}\n        thumbs={thumbs}\n        onInput={handleInput}\n        onChange={handleCommit}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;ACwCA,SAASG,EAAiC,GAAwD;CAChG,OAAOC,EAAM,KAAI,MAAO,OAAOC,KAAO,YAAYA,IAAcA,IAAM,EAAE,OAAOA,EAAG,CAAoB;AACxG;AAQA,SAASC,EAAoC,GAAiC,GAAkB;CAC9F,IAAMC,IAAQH,EAAM,WAAU,MAAMC,EAAG,UAAUG,CAAK;CACtD,IAAID,MAAU,IAAI,OAAOA;CACzB,IAAI,OAAOC,KAAU,UAAU,OAAO;CACtC,IAAIC,IAAO,GACPC,IAAU;CACd,KAAK,IAAIC,IAAI,GAAGA,IAAIP,EAAM,QAAQ,KAAK;EACrC,IAAMQ,IAAIR,EAAMO,EAAE,CAAC;EACnB,IAAI,OAAOC,KAAM,UAAU;EAC3B,IAAMC,IAAM,KAAK,IAAID,IAAIJ,CAAK;EAC9B,AAAIK,IAAMH,MACR,IAAUG,GACV,IAAOF;CAEX;CACA,OAAOF;AACT;AAEA,SAASK,EAAU,GAAkB,GAA+B;CAClE,OAAgE,OAAzD,OAAOC,KAAU,YAAY,OAAOA,KAAU,WAAkBA,IAAgBC,CAAQ;AACjG;AAiBA,SAAgBC,EAA6C,GAA2C;CACtG,IAAM,EAAE,UAAO,aAAU,aAAU,gBAAa,cAAW,iBAAcC,GACnEd,IAAQD,EAAUe,EAAM,KAAK,GAC7BC,IAAQb,EAAaF,GAAOI,CAAK,GACjCY,IAAY,KAAK,IAAI,GAAGhB,EAAM,SAAS,CAAC,GAExCiB,KAAW,GAAqB,MACpCC,EAAK,SAASC,IAAcD,EAAK,OAAOX,CAAC,KAAK,OAAOW,EAAK,KAAK,GAK3DE,IAAUC,EAAON,CAAK,GACtBO,IAAaD,EAAO,EAAK;CAC/B,QAAgB;EACd,EAAQ,UAAUN;CACpB,GAAG,CAACA,CAAK,CAAC;CAEV,IAAMQ,KAAe,MAAkB;EACrC,IAAMhB,IAAIiB,EAAK,EAAE,CAAC;EAClB,AAAIjB,MAAMa,EAAQ,YAClB,EAAQ,UAAUb,GAClB,EAAW,UAAU,IACrBkB,EAASzB,EAAMO,EAAE,CAAC,OAAOA,CAAC;CAC5B,GAEMmB,KAAgB,MAAkB;EACtC,IAAI,CAACJ,EAAW,SAAS;EACzB,EAAW,UAAU;EACrB,IAAMf,IAAIiB,EAAK,EAAE,CAAC;EAClB,IAAWxB,EAAMO,EAAE,CAAC,OAAOA,CAAC;CAC9B,GAEMoB,IAAU3B,EAAMe;CACtB,IAAI,CAACY,GAAS,OAAO,kBAAC,OAAD,EAAK,WAAWC,IAAY,GAAGhC,EAAE,KAAK,GAAGgC,MAAchC,EAAE,KAAO,CAAA;CAErF,IAAMiC,IAAkB,CACtB;EAAE,OAAOd;EAAO,WAAWY,EAAQ,aAAajB,EAAUO,EAAQU,GAASZ,CAAK,GAAGY,EAAQ,KAAK;CAAE,CACpG,GAEMG,IAAsB9B,EAAM,KAAK,GAAM,OAAO;EAAE,OAAOO;EAAG,OAAOU,EAAQC,GAAMX,CAAC;CAAE,EAAE;CAE1F,OACE,kBAAC,OAAD;EAAK,WAAWqB,IAAY,GAAGhC,EAAE,KAAK,GAAGgC,MAAchC,EAAE;EACvD,UAAA,kBAACC,GAAD;GACE,WAAWD,EAAE;GACb,KAAK;GACL,KAAKoB;GACE;GACP,MAAK;GACL,YAAYF,EAAM,UAAU;GAC5B,YAAW;GACX,aAAaA,EAAM,eAAe;GACvB;GACH;GACR,SAASS;GACT,UAAUG;EACX,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"DetentSlider-DNTAk8xP.js","names":["s","Slider","DetentSlider_module_default","normalize","items","it","resolveIndex","exact","value","best","bestGap","i","v","gap","plainText","label","fallback","DetentSlider","props","index","lastIndex","labelOf","item","formatLabel","liveRef","useRef","changedRef","handleInput","next","onChange","handleCommit","current","className","thumbs","stops"],"sources":["../../src/components/DetentSlider/DetentSlider.module.css","../../src/components/DetentSlider/DetentSlider.tsx"],"sourcesContent":[".root {\n  position: relative;\n  /* Read by Slider's track and stop marks. Detents run the full height of the\n   * track so they read as notches rather than as tally marks beside it. */\n  --rp-tick-inset: 0;\n  --rp-tick-width: 1px;\n  --rp-tick-color: var(--wzl-border-strong);\n  --rp-track-cursor: pointer;\n  font-family: var(--wzl-font-ui);\n}\n\n.slider {\n  width: 100%;\n}\n\n","import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';\nimport { Slider, type SliderStop, type Thumb } from '../Slider/Slider';\nimport s from './DetentSlider.module.css';\n\n/** What a detent can carry. Narrowed so identity comparison and React keys\n *  both work without a keying callback. */\nexport type DetentValue = string | number;\n\n/** One detent on a {@link DetentSlider}. */\nexport type DetentItem<V extends DetentValue = number> = {\n  value: V;\n  /** Drawn under the detent. Defaults to `formatLabel(value)`, then `value`. */\n  label?: ReactNode;\n  /** Spoken form, when the drawn label is not the right thing to say. */\n  ariaLabel?: string;\n};\n\n/**\n * Props for {@link DetentSlider}.\n *\n * `items` takes bare values or `DetentItem`s interchangeably — a bare value is\n * a detent with no label of its own.\n *\n * `onChange` fires on every detent the control passes through, including\n * mid-drag: each one is a complete, legal choice, so there is no in-flight\n * value to withhold. `onCommit` fires once the gesture that changed things\n * ends, and is the one to write to history.\n */\nexport type DetentSliderProps<V extends DetentValue = number> = {\n  items: readonly (V | DetentItem<V>)[];\n  value: V;\n  onChange: (value: V, index: number) => void;\n  onCommit?: (value: V, index: number) => void;\n  formatLabel?: (value: V, index: number) => ReactNode;\n  labels?: 'all' | 'ends' | 'none';\n  trackHeight?: number;\n  ariaLabel?: string;\n  className?: string;\n};\n\nfunction normalize<V extends DetentValue>(items: readonly (V | DetentItem<V>)[]): DetentItem<V>[] {\n  return items.map(it => (typeof it === 'object' && it !== null ? it : ({ value: it } as DetentItem<V>)));\n}\n\n/**\n * The detent `value` selects. An exact match wins; a number that matches none\n * lands on the nearest one, so a value arriving from a numeric field or an\n * older save renders where it belongs rather than silently reading as the\n * first detent.\n */\nfunction resolveIndex<V extends DetentValue>(items: readonly DetentItem<V>[], value: V): number {\n  const exact = items.findIndex(it => it.value === value);\n  if (exact !== -1) return exact;\n  if (typeof value !== 'number') return 0;\n  let best = 0;\n  let bestGap = Infinity;\n  for (let i = 0; i < items.length; i++) {\n    const v = items[i].value;\n    if (typeof v !== 'number') continue;\n    const gap = Math.abs(v - value);\n    if (gap < bestGap) {\n      bestGap = gap;\n      best = i;\n    }\n  }\n  return best;\n}\n\nfunction plainText(label: ReactNode, fallback: DetentValue): string {\n  return typeof label === 'string' || typeof label === 'number' ? String(label) : String(fallback);\n}\n\n/**\n * Slider over a fixed list of values: one detent per value, evenly spaced, the\n * thumb resting on one of them.\n *\n * This is the shape to reach for when an option has a small set of allowed\n * values along a line — playback rate, zoom step, quality — in place of a\n * dropdown, which hides the ordering and the extent of the range behind a\n * click. The values need only be ordered, not numeric.\n *\n * It is a strict {@link Slider} over the *index* of `items`, which keeps the\n * detents evenly spaced however the values are distributed. Since the index is\n * meaningless to a screen reader, the value is published as `aria-valuetext`.\n * For numbers that may also rest between the detents, use `Slider` directly\n * with `spacing=\"even\"` and magnetic stops.\n */\nexport function DetentSlider<V extends DetentValue = number>(props: DetentSliderProps<V>): ReactElement {\n  const { value, onChange, onCommit, formatLabel, ariaLabel, className } = props;\n  const items = normalize(props.items);\n  const index = resolveIndex(items, value);\n  const lastIndex = Math.max(0, items.length - 1);\n\n  const labelOf = (item: DetentItem<V>, i: number): ReactNode =>\n    item.label ?? formatLabel?.(item.value, i) ?? String(item.value);\n\n  // Deduped separately: `live` suppresses the repeat reports a drag produces\n  // while the pointer crosses one detent, `changed` keeps a press that chose\n  // nothing from landing a no-op entry in the consumer's history.\n  const liveRef = useRef(index);\n  const changedRef = useRef(false);\n  useEffect(() => {\n    liveRef.current = index;\n  }, [index]);\n\n  const handleInput = (next: Thumb[]) => {\n    const i = next[0].value;\n    if (i === liveRef.current) return;\n    liveRef.current = i;\n    changedRef.current = true;\n    onChange(items[i].value, i);\n  };\n\n  const handleCommit = (next: Thumb[]) => {\n    if (!changedRef.current) return;\n    changedRef.current = false;\n    const i = next[0].value;\n    onCommit?.(items[i].value, i);\n  };\n\n  const current = items[index];\n  if (!current) return <div className={className ? `${s.root} ${className}` : s.root} />;\n\n  const thumbs: Thumb[] = [\n    { value: index, valueText: current.ariaLabel ?? plainText(labelOf(current, index), current.value) },\n  ];\n\n  const stops: SliderStop[] = items.map((item, i) => ({ value: i, label: labelOf(item, i) }));\n\n  return (\n    <div className={className ? `${s.root} ${className}` : s.root}>\n      <Slider\n        className={s.slider}\n        min={0}\n        max={lastIndex}\n        stops={stops}\n        snap=\"strict\"\n        stopLabels={props.labels ?? 'all'}\n        trackClick=\"move-nearest\"\n        trackHeight={props.trackHeight ?? 8}\n        ariaLabel={ariaLabel}\n        thumbs={thumbs}\n        onInput={handleInput}\n        onChange={handleCommit}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;ACwCA,SAASG,EAAiC,GAAwD;CAChG,OAAOC,EAAM,KAAI,MAAO,OAAOC,KAAO,YAAYA,IAAcA,IAAM,EAAE,OAAOA,EAAG,CAAoB;AACxG;AAQA,SAASC,EAAoC,GAAiC,GAAkB;CAC9F,IAAMC,IAAQH,EAAM,WAAU,MAAMC,EAAG,UAAUG,CAAK;CACtD,IAAID,MAAU,IAAI,OAAOA;CACzB,IAAI,OAAOC,KAAU,UAAU,OAAO;CACtC,IAAIC,IAAO,GACPC,IAAU;CACd,KAAK,IAAIC,IAAI,GAAGA,IAAIP,EAAM,QAAQ,KAAK;EACrC,IAAMQ,IAAIR,EAAMO,EAAE,CAAC;EACnB,IAAI,OAAOC,KAAM,UAAU;EAC3B,IAAMC,IAAM,KAAK,IAAID,IAAIJ,CAAK;EAC9B,AAAIK,IAAMH,MACR,IAAUG,GACV,IAAOF;CAEX;CACA,OAAOF;AACT;AAEA,SAASK,EAAU,GAAkB,GAA+B;CAClE,OAAgE,OAAzD,OAAOC,KAAU,YAAY,OAAOA,KAAU,WAAkBA,IAAgBC,CAAQ;AACjG;AAiBA,SAAgBC,EAA6C,GAA2C;CACtG,IAAM,EAAE,UAAO,aAAU,aAAU,gBAAa,cAAW,iBAAcC,GACnEd,IAAQD,EAAUe,EAAM,KAAK,GAC7BC,IAAQb,EAAaF,GAAOI,CAAK,GACjCY,IAAY,KAAK,IAAI,GAAGhB,EAAM,SAAS,CAAC,GAExCiB,KAAW,GAAqB,MACpCC,EAAK,SAASC,IAAcD,EAAK,OAAOX,CAAC,KAAK,OAAOW,EAAK,KAAK,GAK3DE,IAAUC,EAAON,CAAK,GACtBO,IAAaD,EAAO,EAAK;CAC/B,QAAgB;EACd,EAAQ,UAAUN;CACpB,GAAG,CAACA,CAAK,CAAC;CAEV,IAAMQ,KAAe,MAAkB;EACrC,IAAMhB,IAAIiB,EAAK,EAAE,CAAC;EAClB,AAAIjB,MAAMa,EAAQ,YAClB,EAAQ,UAAUb,GAClB,EAAW,UAAU,IACrBkB,EAASzB,EAAMO,EAAE,CAAC,OAAOA,CAAC;CAC5B,GAEMmB,KAAgB,MAAkB;EACtC,IAAI,CAACJ,EAAW,SAAS;EACzB,EAAW,UAAU;EACrB,IAAMf,IAAIiB,EAAK,EAAE,CAAC;EAClB,IAAWxB,EAAMO,EAAE,CAAC,OAAOA,CAAC;CAC9B,GAEMoB,IAAU3B,EAAMe;CACtB,IAAI,CAACY,GAAS,OAAO,kBAAC,OAAD,EAAK,WAAWC,IAAY,GAAGhC,EAAE,KAAK,GAAGgC,MAAchC,EAAE,KAAO,CAAA;CAErF,IAAMiC,IAAkB,CACtB;EAAE,OAAOd;EAAO,WAAWY,EAAQ,aAAajB,EAAUO,EAAQU,GAASZ,CAAK,GAAGY,EAAQ,KAAK;CAAE,CACpG,GAEMG,IAAsB9B,EAAM,KAAK,GAAM,OAAO;EAAE,OAAOO;EAAG,OAAOU,EAAQC,GAAMX,CAAC;CAAE,EAAE;CAE1F,OACE,kBAAC,OAAD;EAAK,WAAWqB,IAAY,GAAGhC,EAAE,KAAK,GAAGgC,MAAchC,EAAE;EACvD,UAAA,kBAACC,GAAD;GACE,WAAWD,EAAE;GACb,KAAK;GACL,KAAKoB;GACE;GACP,MAAK;GACL,YAAYF,EAAM,UAAU;GAC5B,YAAW;GACX,aAAaA,EAAM,eAAe;GACvB;GACH;GACR,SAASS;GACT,UAAUG;EACX,CAAA;CACE,CAAA;AAET"}

package/dist/chunks/{FallthroughDiagram-C7BUe8eU.js → FallthroughDiagram-CS1IhQaU.js}

@@ -5,19 +5,19 @@ import { t as o } from "./GestureRoute-BXESrHI0.js";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useId as u } from "react";
 var d = {
-	diagram: "_diagram_1uz8k_1",
-	input: "_input_1uz8k_9",
-	field: "_field_1uz8k_17",
-	stage: "_stage_1uz8k_25",
-	stageTitle: "_stageTitle_1uz8k_35",
-	table: "_table_1uz8k_44",
-	note: "_note_1uz8k_45",
-	routes: "_routes_1uz8k_64",
-	num: "_num_1uz8k_66",
-	muted: "_muted_1uz8k_73",
-	walk: "_walk_1uz8k_75",
-	winner: "_winner_1uz8k_83",
-	nothing: "_nothing_1uz8k_86"
+	diagram: "_diagram_t9pwh_1",
+	input: "_input_t9pwh_9",
+	field: "_field_t9pwh_17",
+	stage: "_stage_t9pwh_25",
+	stageTitle: "_stageTitle_t9pwh_35",
+	table: "_table_t9pwh_44",
+	note: "_note_t9pwh_45",
+	routes: "_routes_t9pwh_64",
+	num: "_num_t9pwh_66 _numeric_zns9n_4",
+	muted: "_muted_t9pwh_72",
+	walk: "_walk_t9pwh_74",
+	winner: "_winner_t9pwh_82",
+	nothing: "_nothing_t9pwh_85"
 };
 //#endregion
 //#region src/components/FallthroughDiagram/FallthroughDiagram.tsx
@@ -281,4 +281,4 @@ function C({ record: e, className: t }) {
 //#endregion
 export { C as t };
 
-//# sourceMappingURL=FallthroughDiagram-C7BUe8eU.js.map
+//# sourceMappingURL=FallthroughDiagram-CS1IhQaU.js.map

package/dist/chunks/FallthroughDiagram-CS1IhQaU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallthroughDiagram-CS1IhQaU.js","names":["_Fragment","s","Badge","keySpecFromKey","KeyCap","keySpecsFromMods","GestureRoute","FallthroughDiagram_module_default","placedByLabel","p","walkLabel","w","Fragment","isWinner","MOD_ORDER","InputLine","mods","input","m","KeySequence","predicted","Routes","candidate","r","Stage","id","useId","filter","title","note","children","MatchedStage","matched","Code","c","i","dropReason","d","FilterBand","mine","dropped","RankedStage","ranked","winner","FallthroughDiagram","cls","className","record"],"sources":["../../src/components/FallthroughDiagram/FallthroughDiagram.module.css","../../src/components/FallthroughDiagram/FallthroughDiagram.tsx"],"sourcesContent":[".diagram {\n  display: grid;\n  gap: var(--wzl-space-3);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n}\n\n.input {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--wzl-space-2) var(--wzl-space-4);\n  margin: 0;\n  color: var(--wzl-fg-muted);\n}\n.field { display: flex; align-items: baseline; gap: var(--wzl-space-1); }\n.field dt { margin: 0; }\n.field dd {\n  margin: 0;\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.stage {\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface);\n  padding: var(--wzl-space-2) var(--wzl-space-3);\n  /* Ids and rules do not wrap mid-word; a narrow host scrolls the stage instead. */\n  overflow-x: auto;\n}\n.stage[data-filter] { background: var(--wzl-surface-sunken); }\n\n.stageTitle {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n}\n.stageTitle + .table { margin-top: var(--wzl-space-2); }\n.note { color: var(--wzl-fg-muted); font-weight: var(--wzl-font-weight-medium); }\n\n.table { width: 100%; border-collapse: collapse; }\n.table th {\n  text-align: start;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n}\n.table td {\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  border-top: 1px solid var(--wzl-border);\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n.table code { white-space: nowrap; overflow-wrap: normal; }\n\n.routes { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--wzl-space-1); }\n\n.num {\n  composes: numeric from '@weasel-js/theme/numeric.module.css';\n  text-align: end;\n  white-space: nowrap;\n}\n\n.muted { color: var(--wzl-fg-muted); }\n\n.walk { color: var(--wzl-fg-muted); }\n.walk[data-walk='fired'],\n.walk[data-walk='would-fire'] { color: var(--wzl-success); font-weight: var(--wzl-font-weight-bold); }\n.walk[data-walk='declined'],\n.walk[data-walk='empty-handle'],\n.walk[data-walk='misbound'],\n.walk[data-walk='no-such-action'] { color: var(--wzl-fg); }\n\n.winner td { background: color-mix(in srgb, var(--wzl-success) 12%, transparent); }\n.winner td:first-child { box-shadow: inset 3px 0 var(--wzl-success); }\n\n.nothing { margin: 0; color: var(--wzl-fg-muted); }\n","import { useId, type ReactNode } from 'react';\nimport type {\n  DispatchRecord,\n  DispatchRecordInput,\n  DroppedCandidate,\n  PlacedBy,\n  RankedCandidate,\n  RecordCandidate,\n  WalkStep,\n} from '@weasel-js/core/routing';\nimport { Badge } from '../Badge';\nimport { Code } from '../Code';\nimport { GestureRoute } from '../GestureRoute';\nimport { KeyCap, KeySequence, keySpecFromKey, keySpecsFromMods, type LogicalModSpec } from '../Keycaps';\nimport s from './FallthroughDiagram.module.css';\n\nfunction placedByLabel(p: PlacedBy): string {\n  return p.step === 'specificity' ? `specificity · ${p.part}` : p.step;\n}\n\nfunction walkLabel(w: WalkStep): ReactNode {\n  switch (w.kind) {\n    case 'fired': return 'fired';\n    case 'would-fire': return 'would fire';\n    case 'declined': return <>declined: {w.reason}</>;\n    case 'empty-handle': return 'empty handle';\n    case 'misbound': return 'misbound';\n    case 'duplicate': return 'duplicate';\n    case 'no-such-action': return 'no such action';\n    case 'not-asked': return 'not asked';\n    case 'outranked': return 'outranked';\n  }\n}\n\nconst isWinner = (w: WalkStep) => w.kind === 'fired' || w.kind === 'would-fire';\n\nconst MOD_ORDER = ['shift', 'alt', 'ctrl', 'meta'] as const;\n\nfunction InputLine({ input, predicted }: { input: DispatchRecordInput; predicted: boolean }) {\n  const mods: LogicalModSpec[] = MOD_ORDER.filter((m) => input.modifiers[m]).map((name) => ({ name }));\n  return (\n    <dl className={s.input} aria-label=\"Input\">\n      <div className={s.field}>\n        <dt>Event</dt>\n        <dd>{input.eventKind}</dd>\n      </div>\n      {input.key !== undefined && (\n        <div className={s.field}>\n          <dt>Key</dt>\n          <dd data-key={input.key}>\n            <KeyCap label={keySpecFromKey(input.key, { legend: 'text' }).label} variant=\"minimal\" />\n          </dd>\n        </div>\n      )}\n      <div className={s.field}>\n        <dt>Modifiers</dt>\n        <dd>{mods.length > 0 ? <KeySequence keys={keySpecsFromMods(mods)} variant=\"minimal\" /> : 'none'}</dd>\n      </div>\n      {input.viewId !== null && (\n        <div className={s.field}>\n          <dt>View</dt>\n          <dd>{input.viewId}</dd>\n        </div>\n      )}\n      {input.mode !== undefined && (\n        <div className={s.field}>\n          <dt>Mode</dt>\n          <dd>{input.mode}</dd>\n        </div>\n      )}\n      {predicted && (\n        <div className={s.field}>\n          <dd><Badge size=\"xs\" status=\"accent\" variant=\"subtle\">predicted</Badge></dd>\n        </div>\n      )}\n    </dl>\n  );\n}\n\nfunction Routes({ candidate }: { candidate: RecordCandidate }) {\n  return (\n    <span className={s.routes}>\n      {candidate.routes.map((r) => <GestureRoute key={r} route={r} size=\"sm\" />)}\n    </span>\n  );\n}\n\nfunction Stage({ title, note, filter, children }: {\n  title: string;\n  note?: ReactNode;\n  filter?: DroppedCandidate['filter'];\n  children?: ReactNode;\n}) {\n  const id = useId();\n  return (\n    <section className={s.stage} aria-labelledby={id} data-filter={filter}>\n      <h3 className={s.stageTitle}>\n        <span id={id}>{title}</span>\n        {note && <span className={s.note}>{note}</span>}\n      </h3>\n      {children}\n    </section>\n  );\n}\n\nfunction MatchedStage({ matched }: { matched: readonly RecordCandidate[] }) {\n  return (\n    <Stage title=\"Matched\" note=\"every binding that fits the input\">\n      <table className={s.table}>\n        <thead>\n          <tr><th>Action</th><th>Route</th><th>Owner</th><th>Tier</th></tr>\n        </thead>\n        <tbody>\n          {matched.map((c, i) => (\n            <tr key={i}>\n              <td><Code size=\"sm\">{c.actionId}</Code></td>\n              <td><Routes candidate={c} /></td>\n              <td className={c.ownerId === null ? s.muted : undefined}>{c.ownerId ?? 'action'}</td>\n              <td>{c.scope}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\nfunction dropReason(d: DroppedCandidate): ReactNode {\n  if (d.filter === 'ineligible') return <><Code size=\"sm\" variant=\"plain\">{d.rule}</Code> does not hold</>;\n  return d.owner !== undefined\n    ? <>barred by the exclusive claim of <Code size=\"sm\" variant=\"plain\">{d.owner}</Code></>\n    : 'barred by an exclusive claim';\n}\n\nfunction FilterBand({ title, filter, dropped }: {\n  title: string;\n  filter: DroppedCandidate['filter'];\n  dropped: readonly DroppedCandidate[];\n}) {\n  const mine = dropped.filter((d) => d.filter === filter);\n  if (mine.length === 0) return <Stage title={title} filter={filter} note=\"dropped nothing\" />;\n  return (\n    <Stage title={title} filter={filter} note=\"dropped\">\n      <table className={s.table}>\n        <thead>\n          <tr><th>Action</th><th>Route</th><th>Why</th></tr>\n        </thead>\n        <tbody>\n          {mine.map((d, i) => (\n            <tr key={i}>\n              <td><Code size=\"sm\">{d.candidate.actionId}</Code></td>\n              <td><Routes candidate={d.candidate} /></td>\n              <td>{dropReason(d)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\nfunction RankedStage({ ranked }: { ranked: readonly RankedCandidate[] }) {\n  if (ranked.length === 0) return <Stage title=\"Ranked\" note=\"nothing survived the filters\" />;\n  return (\n    <Stage title=\"Ranked\" note=\"highest first, with what the walk did at each\">\n      <table className={s.table}>\n        <thead>\n          <tr>\n            <th className={s.num}>#</th><th>Action</th><th>Placed by</th><th>Walk</th>\n            <th>Tier</th><th>Specificity</th><th>Rule</th><th>Route</th>\n          </tr>\n        </thead>\n        <tbody>\n          {ranked.map((r, i) => {\n            const c = r.candidate;\n            const winner = isWinner(r.walk);\n            return (\n              <tr\n                key={i}\n                className={winner ? s.winner : undefined}\n                data-walk={r.walk.kind}\n                data-winner={winner || undefined}\n                aria-current={winner || undefined}\n              >\n                <td className={s.num}>{i + 1}</td>\n                <td><Code size=\"sm\">{c.actionId}</Code></td>\n                <td>\n                  <Badge size=\"xs\" variant=\"outline\" status={r.placedBy.step === 'first' ? 'muted' : 'warn'}>\n                    {placedByLabel(r.placedBy)}\n                  </Badge>\n                </td>\n                <td className={s.walk} data-walk={r.walk.kind}>{walkLabel(r.walk)}</td>\n                <td>{c.scope}</td>\n                <td className={s.num} aria-label=\"target, modifiers, phase, exact\">{c.specificity.join(' ')}</td>\n                <td>{c.eligible ? <Code size=\"sm\" variant=\"plain\">{c.eligible}</Code> : <span className={s.muted}>none</span>}</td>\n                <td><Routes candidate={c} /></td>\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\n/** Props for {@link FallthroughDiagram}. */\nexport interface FallthroughDiagramProps {\n  record: DispatchRecord;\n  className?: string;\n}\n\n/**\n * One dispatch drawn top to bottom: the input, every binding it matched, what\n * the claim and eligibility filters dropped, and the ranked survivors with the\n * step that placed each one and what the walk did with it. The winner's row\n * carries `data-winner`.\n */\nexport function FallthroughDiagram({ record, className }: FallthroughDiagramProps) {\n  const cls = className ? `${s.diagram} ${className}` : s.diagram;\n  return (\n    <div className={cls} data-outcome={record.outcome} data-predicted={record.predicted || undefined}>\n      <InputLine input={record.input} predicted={record.predicted} />\n      {record.matched.length === 0 ? (\n        <p className={s.nothing}>Nothing matched this input.</p>\n      ) : (\n        <>\n          <MatchedStage matched={record.matched} />\n          <FilterBand title=\"Claim\" filter=\"claim\" dropped={record.dropped} />\n          <FilterBand title=\"Eligibility\" filter=\"ineligible\" dropped={record.dropped} />\n          <RankedStage ranked={record.ranked} />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Field-DsBlnFKf.js → Field-DiX_WByH.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./field.module-Bh7BTKMh.js";
+import { t as e } from "./field.module-B27pWv0i.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Field/Field.tsx
 function n({ orientation: n = "stacked", className: r, children: i }) {
@@ -22,4 +22,4 @@ var r = {
 //#endregion
 export { r as n, n as t };
 
-//# sourceMappingURL=Field-DsBlnFKf.js.map
+//# sourceMappingURL=Field-DiX_WByH.js.map

package/dist/chunks/{Field-DsBlnFKf.js.map → Field-DiX_WByH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Field-DsBlnFKf.js","names":["s","field_module_default","Field","cls","orientation","className","fieldClasses"],"sources":["../../src/components/Field/Field.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport s from '../field.module.css';\n\n/**\n * Whether a {@link Field} stacks its label above the control or sits them\n * side by side.\n */\nexport type FieldOrientation = 'stacked' | 'row';\n\n/** Props for {@link Field}. */\nexport type FieldProps = {\n  orientation?: FieldOrientation;\n  className?: string;\n  children?: ReactNode;\n};\n\n/**\n * Layout primitive that arranges a label, control, hint, and error in the\n * canonical weasel-ui form-row shape. The control itself owns its semantics\n * (RAC `TextField`, `Checkbox`, etc.); this just paints the layout.\n *\n * Most users will instead reach for `Input` / `Checkbox` / `Switch`, which\n * compose Field internally. Use Field directly when you need a custom\n * control to sit in the same visual rhythm.\n */\nexport function Field({ orientation = 'stacked', className, children }: FieldProps) {\n  const cls = [s.field, orientation === 'row' && s.row, className].filter(Boolean).join(' ');\n  return <div className={cls}>{children}</div>;\n}\n\n/**\n * The class names {@link Field} paints its slots with, so a control composing\n * its own layout can match the same form-row rhythm.\n */\nexport const fieldClasses = {\n  root: s.field,\n  row: s.row,\n  label: s.label,\n  hint: s.hint,\n  error: s.error,\n};\n"],"mappings":";;;AAyBA,SAAgBE,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;CAClF,IAAMC,IAAM;EAACH,EAAE;EAAOI,MAAgB,SAASJ,EAAE;EAAKK;CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACzF,OAAO,kBAAC,OAAD;EAAK,WAAWF;EAAM;CAAc,CAAA;AAC7C;AAMA,IAAaG,IAAe;CAC1B,MAAMN,EAAE;CACR,KAAKA,EAAE;CACP,OAAOA,EAAE;CACT,MAAMA,EAAE;CACR,OAAOA,EAAE;AACX"}
+{"version":3,"file":"Field-DiX_WByH.js","names":["s","field_module_default","Field","cls","orientation","className","fieldClasses"],"sources":["../../src/components/Field/Field.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport s from '../field.module.css';\n\n/**\n * Whether a {@link Field} stacks its label above the control or sits them\n * side by side.\n */\nexport type FieldOrientation = 'stacked' | 'row';\n\n/** Props for {@link Field}. */\nexport type FieldProps = {\n  orientation?: FieldOrientation;\n  className?: string;\n  children?: ReactNode;\n};\n\n/**\n * Layout primitive that arranges a label, control, hint, and error in the\n * canonical weasel-ui form-row shape. The control itself owns its semantics\n * (RAC `TextField`, `Checkbox`, etc.); this just paints the layout.\n *\n * Most users will instead reach for `Input` / `Checkbox` / `Switch`, which\n * compose Field internally. Use Field directly when you need a custom\n * control to sit in the same visual rhythm.\n */\nexport function Field({ orientation = 'stacked', className, children }: FieldProps) {\n  const cls = [s.field, orientation === 'row' && s.row, className].filter(Boolean).join(' ');\n  return <div className={cls}>{children}</div>;\n}\n\n/**\n * The class names {@link Field} paints its slots with, so a control composing\n * its own layout can match the same form-row rhythm.\n */\nexport const fieldClasses = {\n  root: s.field,\n  row: s.row,\n  label: s.label,\n  hint: s.hint,\n  error: s.error,\n};\n"],"mappings":";;;AAyBA,SAAgBE,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;CAClF,IAAMC,IAAM;EAACH,EAAE;EAAOI,MAAgB,SAASJ,EAAE;EAAKK;CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACzF,OAAO,kBAAC,OAAD;EAAK,WAAWF;EAAM;CAAc,CAAA;AAC7C;AAMA,IAAaG,IAAe;CAC1B,MAAMN,EAAE;CACR,KAAKA,EAAE;CACP,OAAOA,EAAE;CACT,MAAMA,EAAE;CACR,OAAOA,EAAE;AACX"}

package/dist/chunks/{FillStrokeSwatch-CgsYQgew.js → FillStrokeSwatch-C4h3rUFM.js}

@@ -48,7 +48,7 @@ function u(t) {
 				m(n), t.onInput?.(u, n);
 			},
 			onBlur: () => {
-				p !== null && (m(null), t.onChange(u, p), h(p));
+				p !== null && (m(null), h(t.onChange(u, p) ?? p));
 			}
 		})]
 	});
@@ -109,4 +109,4 @@ function d(e) {
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=FillStrokeSwatch-CgsYQgew.js.map
+//# sourceMappingURL=FillStrokeSwatch-C4h3rUFM.js.map

package/dist/chunks/FillStrokeSwatch-C4h3rUFM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillStrokeSwatch-C4h3rUFM.js","names":["s","solidColorOf","useRecordRecentColor","paintPreviewCss","FillStrokeSwatch_module_default","SLOT_LABEL","PICKER_FALLBACK","Chip","props","draft","setDraft","useState","record","none","paint","preview","pickerValue","slot","focused","color","FillStrokeSwatch","focusedPaint","fill","stroke","chip","anyButton","onToggleNone","onSwap","onReset","className","Button","shortcuts"],"sources":["../../src/components/FillStrokeSwatch/FillStrokeSwatch.module.css","../../src/components/FillStrokeSwatch/FillStrokeSwatch.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n/* The two chips overlap on a diagonal: fill up-left, behind; stroke\n   down-right, in front, so the fill shows through the stroke's hole. */\n.pair {\n  --chip: 32px;\n  --offset: 12px;\n  --ring: 8px;\n  position: relative;\n  inline-size: calc(var(--chip) + var(--offset));\n  block-size: calc(var(--chip) + var(--offset));\n}\n\n.chip {\n  position: absolute;\n  inline-size: var(--chip);\n  block-size: var(--chip);\n  box-sizing: border-box;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.chip[data-slot='fill'] {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.chip[data-slot='stroke'] {\n  inset-block-end: 0;\n  inset-inline-end: 0;\n}\n\n.chip[data-focused] {\n  border-color: var(--wzl-fg);\n  box-shadow: 0 0 0 1px var(--wzl-fg);\n}\n\n.chip:has(.input:focus-visible) {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The paint sits over the checker, so a translucent one reads as such. */\n.well {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n/* The stroke well is a ring: the mask subtracts the content box from the\n   padding box, so whatever is behind the chip shows through its hole. */\n.chip[data-slot='stroke'] .well {\n  box-sizing: border-box;\n  padding: var(--ring);\n  mask:\n    linear-gradient(#000, #000) padding-box,\n    linear-gradient(#000, #000) content-box;\n  mask-composite: exclude;\n}\n\n/* The hole's edge, so a focused stroke reads as focused on both sides. */\n.chip[data-slot='stroke'][data-focused]::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--ring) - var(--wzl-border-w));\n  border: 1px solid var(--wzl-fg);\n  border-radius: 0;\n  pointer-events: none;\n}\n\n.paint {\n  position: absolute;\n  inset: 0;\n}\n\n/* No paint: the surface crossed by the danger diagonal. */\n.chip[data-none] .well {\n  background:\n    linear-gradient(\n      45deg,\n      transparent calc(50% - 1px),\n      var(--wzl-danger) calc(50% - 1px),\n      var(--wzl-danger) calc(50% + 1px),\n      transparent calc(50% + 1px)\n    ),\n    var(--wzl-surface);\n}\n\n/* The native picker covers its chip, invisible: it takes the click and the\n   keyboard focus, and the well draws the paint. */\n.input {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--wzl-space-1);\n}\n","import { useState, type ReactElement } from 'react';\nimport type { FillStyle } from '@weasel-js/core';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { solidColorOf } from '../paintValue';\nimport { Button } from '../Button';\nimport { useRecordRecentColor } from '../RecentColors/RecentColorsProvider';\nimport type { PaintSlot } from '../GradientEditor';\nimport s from './FillStrokeSwatch.module.css';\n\n/** Props for {@link FillStrokeSwatch}. */\nexport interface FillStrokeSwatchProps {\n  /** `null` is an explicit \"no paint\". */\n  fill: FillStyle | null | undefined;\n  stroke: FillStyle | null | undefined;\n  /** The slot that edits aimed at \"the current paint\" land on — the None\n   *  button, a palette click, a keyboard shortcut the app binds. */\n  focused: PaintSlot;\n  onFocusChange: (slot: PaintSlot) => void;\n  /** Every tick of the color picker, as `#rrggbb`. */\n  onInput?: (slot: PaintSlot, color: string) => void;\n  /** Once when the picker closes, with its last color, if it moved. Return\n   *  the color actually applied when it differs from the picker's — the picker\n   *  is opaque, so an app keeping the paint's own alpha returns that — and the\n   *  recent colors record it instead. */\n  onChange: (slot: PaintSlot, color: string) => string | void;\n  /** Toggle a slot between no paint and a paint. Given, it adds the None\n   *  button (acting on `focused`) and shift-click on a chip. */\n  onToggleNone?: (slot: PaintSlot) => void;\n  /** Given, adds a Swap button that exchanges the two paints. */\n  onSwap?: () => void;\n  /** Given, adds a Default button that restores the app's default pair. */\n  onReset?: () => void;\n  /** Key hints for the buttons' tooltips. The app binds the keys itself. */\n  shortcuts?: { none?: string; swap?: string; reset?: string };\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst SLOT_LABEL: Record<PaintSlot, string> = { fill: 'Fill', stroke: 'Stroke' };\nconst PICKER_FALLBACK: Record<PaintSlot, string> = { fill: '#ffffff', stroke: '#000000' };\n\nfunction Chip(props: {\n  slot: PaintSlot;\n  paint: FillStyle | null | undefined;\n  focused: boolean;\n  onFocusChange: (slot: PaintSlot) => void;\n  onInput?: (slot: PaintSlot, color: string) => void;\n  onChange: (slot: PaintSlot, color: string) => string | void;\n  onToggleNone?: (slot: PaintSlot) => void;\n}): ReactElement {\n  const { slot, paint, focused } = props;\n  // Tracks the picker through a pick; the prop only catches up on commit.\n  const [draft, setDraft] = useState<string | null>(null);\n  const record = useRecordRecentColor();\n  const none = paint === null;\n  const preview = paintPreviewCss(paint);\n  const pickerValue = (solidColorOf(paint) ?? PICKER_FALLBACK[slot]).slice(0, 7);\n\n  return (\n    <span\n      className={s.chip}\n      data-slot={slot}\n      {...(focused ? { 'data-focused': '' } : {})}\n      {...(none ? { 'data-none': '' } : {})}\n    >\n      <span className={s.well} aria-hidden=\"true\">\n        {preview && <span className={s.paint} style={{ background: preview }} />}\n      </span>\n      <input\n        type=\"color\"\n        className={s.input}\n        value={draft ?? pickerValue}\n        aria-label={SLOT_LABEL[slot]}\n        aria-current={focused ? 'true' : undefined}\n        onFocus={() => props.onFocusChange(slot)}\n        onClick={(e) => {\n          props.onFocusChange(slot);\n          // Shift-click is the none toggle; preventing it keeps the OS picker shut.\n          if (e.shiftKey && props.onToggleNone) {\n            e.preventDefault();\n            props.onToggleNone(slot);\n          }\n        }}\n        onInput={(e) => {\n          const color = (e.target as HTMLInputElement).value;\n          setDraft(color);\n          props.onInput?.(slot, color);\n        }}\n        onBlur={() => {\n          if (draft === null) return;\n          setDraft(null);\n          record(props.onChange(slot, draft) ?? draft);\n        }}\n      />\n    </span>\n  );\n}\n\n/**\n * The active fill and stroke as one overlapping pair, the way drawing apps\n * show the paint the next shape gets: fill a solid square behind, stroke a\n * frame in front of it. Each chip is a native color picker; the focused one\n * is what the None button — and whatever the app binds — acts on.\n *\n * Holds no state of its own: the paints and the focused slot are props, and\n * the chips report picks through `onInput`/`onChange` for the app to route —\n * into its own active-paint state, into the selection through\n * `useOngoingAction`, or both.\n */\nexport function FillStrokeSwatch(props: FillStrokeSwatchProps): ReactElement {\n  const {\n    fill, stroke, focused, onFocusChange, onInput, onChange,\n    onToggleNone, onSwap, onReset, shortcuts, className,\n  } = props;\n  const focusedPaint = focused === 'fill' ? fill : stroke;\n  const chip = { onFocusChange, onInput, onChange, onToggleNone };\n  const anyButton = onToggleNone || onSwap || onReset;\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={props['aria-label'] ?? 'Fill and stroke'}\n    >\n      <div className={s.pair}>\n        <Chip slot=\"fill\" paint={fill} focused={focused === 'fill'} {...chip} />\n        <Chip slot=\"stroke\" paint={stroke} focused={focused === 'stroke'} {...chip} />\n      </div>\n      {anyButton && (\n        <div className={s.buttons}>\n          {onToggleNone && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              pressed={focusedPaint === null}\n              onClick={() => onToggleNone(focused)}\n              shortcut={shortcuts?.none}\n            >\n              None\n            </Button>\n          )}\n          {onSwap && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onSwap} shortcut={shortcuts?.swap}>\n              Swap\n            </Button>\n          )}\n          {onReset && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onReset} shortcut={shortcuts?.reset}>\n              Default\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;GCsCMK,IAAwC;CAAE,MAAM;CAAQ,QAAQ;AAAS,GACzEC,IAA6C;CAAE,MAAM;CAAW,QAAQ;AAAU;AAExF,SAASC,EAAK,GAQG;CACf,IAAM,EAAE,SAAM,UAAO,eAAYC,GAE3B,CAACC,GAAOC,KAAYC,EAAwB,IAAI,GAChDC,IAASV,EAAqB,GAC9BW,IAAOC,MAAU,MACjBC,IAAUZ,EAAgBW,CAAK,GAC/BE,KAAef,EAAaa,CAAK,KAAKR,EAAgBW,GAAA,CAAO,MAAM,GAAG,CAAC;CAE7E,OACE,kBAAC,QAAD;EACE,WAAWjB,EAAE;EACb,aAAWiB;EACX,GAAKC,IAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;EACzC,GAAKL,IAAO,EAAE,aAAa,GAAG,IAAI,CAAC;EAJrC,UAAA,CAME,kBAAC,QAAD;GAAM,WAAWb,EAAE;GAAM,eAAY;GAClC,UAAAe,KAAW,kBAAC,QAAD;IAAM,WAAWf,EAAE;IAAO,OAAO,EAAE,YAAYe,EAAQ;GAAI,CAAA;EACnE,CAAA,GACN,kBAAC,SAAD;GACE,MAAK;GACL,WAAWf,EAAE;GACb,OAAOS,KAASO;GAChB,cAAYX,EAAWY;GACvB,gBAAcC,IAAU,SAAS,KAAA;GACjC,eAAeV,EAAM,cAAcS,CAAI;GACvC,UAAU,MAAM;IAGd,AAFAT,EAAM,cAAcS,CAAI,GAEpB,EAAE,YAAYT,EAAM,iBACtB,EAAE,eAAe,GACjBA,EAAM,aAAaS,CAAI;GAE3B;GACA,UAAU,MAAM;IACd,IAAME,IAAS,EAAE,OAA4B;IAE7C,AADAT,EAASS,CAAK,GACdX,EAAM,UAAUS,GAAME,CAAK;GAC7B;GACA,cAAc;IACZ,AAAIV,MAAU,SACdC,EAAS,IAAI,GACbE,EAAOJ,EAAM,SAASS,GAAMR,CAAK,KAAKA,CAAK;GAC7C;EACD,CAAA,CACG;;AAEV;AAaA,SAAgBW,EAAiB,GAA4C;CAC3E,IAAM,EACJ,SAAM,WAAQ,YAAS,kBAAe,YAAS,aAC/C,iBAAc,WAAQ,YAAS,cAAW,iBACxCZ,GACEa,IAAeH,MAAY,SAASI,IAAOC,GAC3CC,IAAO;EAAE;EAAe;EAAS;EAAU;CAAa,GACxDC,IAAYC,KAAgBC,KAAUC;CAE5C,OACE,kBAAC,OAAD;EACE,WAAW,CAAC5B,EAAE,MAAM6B,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvD,MAAK;EACL,cAAYrB,EAAM,iBAAiB;EAHrC,UAAA,CAKE,kBAAC,OAAD;GAAK,WAAWR,EAAE;GAAlB,UAAA,CACE,kBAACO,GAAD;IAAM,MAAK;IAAO,OAAOe;IAAM,SAASJ,MAAY;IAAQ,GAAIM;GAAO,CAAA,GACvE,kBAACjB,GAAD;IAAM,MAAK;IAAS,OAAOgB;IAAQ,SAASL,MAAY;IAAU,GAAIM;GAAO,CAAA,CAC1E;EACJ,CAAA,GAAAC,KACC,kBAAC,OAAD;GAAK,WAAWzB,EAAE;GAAlB,UAAA;IACG0B,KACC,kBAACI,GAAD;KACE,SAAQ;KACR,MAAK;KACL,SAAST,MAAiB;KAC1B,eAAeK,EAAaR,CAAO;KACnC,UAAUa,GAAW;KACtB,UAAA;IAEO,CAAA;IAETJ,KACC,kBAACG,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,SAASH;KAAQ,UAAUI,GAAW;KAAM,UAAA;IAEtE,CAAA;IAETH,KACC,kBAACE,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,SAASF;KAAS,UAAUG,GAAW;KAAO,UAAA;IAExE,CAAA;GAEP;EAEJ,CAAA,CAAA;;AAET"}

package/dist/chunks/{FontFamilySelect-CGJ5OIOy.js → FontFamilySelect-DEvMXyZd.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Select-BppLsJTz.js";
+import { t as e } from "./Select-ouV8O6cp.js";
 import { jsx as t } from "react/jsx-runtime";
 import { listCanvasFonts as n, listFonts as r, resolveFontVariant as i } from "@weasel-js/font";
 //#region src/components/FontFamilySelect/FontFamilySelect.tsx
@@ -26,4 +26,4 @@ function o(i) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=FontFamilySelect-CGJ5OIOy.js.map
+//# sourceMappingURL=FontFamilySelect-DEvMXyZd.js.map

package/dist/chunks/{FontFamilySelect-CGJ5OIOy.js.map → FontFamilySelect-DEvMXyZd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FontFamilySelect-CGJ5OIOy.js","names":["Select","unregisteredLabel","resolveFontVariant","family","weight","style","substituted","FontFamilySelect","props","baked","listFonts","canvas","listCanvasFonts","f","c","available","options","value","fontStyle","mixed","onChange"],"sources":["../../src/components/FontFamilySelect/FontFamilySelect.tsx"],"sourcesContent":["import { listCanvasFonts, listFonts, resolveFontVariant } from '@weasel-js/font';\nimport { Select } from '../Select';\n\n/** Props for {@link FontFamilySelect}. */\nexport interface FontFamilySelectProps {\n  /** Current family, or `undefined` when the sources disagree (`mixed`). */\n  value?: string;\n  /** Indeterminate presentation — the aggregated sources name different families. */\n  mixed?: boolean;\n  onChange: (family: string) => void;\n  /** The weight / style the text actually renders at, so the substitution\n   *  probe reports the variant that paints rather than a nominal 400/normal. */\n  weight?: number;\n  fontStyle?: 'normal' | 'italic';\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** Label for a value that isn't in the registry: name the substitute when the\n *  fallback chain found one, otherwise say only what is known. */\nfunction unregisteredLabel(family: string, weight: number, style: 'normal' | 'italic'): string {\n  const { substituted } = resolveFontVariant(family, weight, style);\n  return substituted\n    ? `${family} — not loaded, showing ${substituted.resolved}`\n    : `${family} — not loaded`;\n}\n\n/**\n * Font-family picker driven by the live font registry.\n *\n * **What it offers.** Both tiers that can actually paint: `listFonts()` for\n * families with a baked atlas, and `listCanvasFonts()` for families the\n * dynamic canvas-SDF tier will serve. Offer what will render, invent\n * nothing — and `listCanvasFonts` reports service rather than membership,\n * so a family auto-enrolled under a policy that is no longer in force\n * doesn't appear.\n *\n * **What it does with a value it can't offer.** Nothing about the model\n * stops a node from naming a family that was never registered — a pasted\n * node, an imported SVG, a document from a session that loaded more fonts.\n * The control keeps that value visible as its own entry and names what is\n * actually painting instead, read structurally off\n * `resolveFontVariant().substituted`. Dropping the value would silently\n * rewrite the document on the next edit; showing it bare would claim a font\n * is in use that isn't.\n */\nexport function FontFamilySelect(props: FontFamilySelectProps) {\n  const { value, mixed = false, onChange, weight = 400, fontStyle = 'normal', className } = props;\n  // Both tiers that actually render: families with a baked atlas, and\n  // families the dynamic canvas-SDF tier will serve. Neither list is a guess\n  // — `listCanvasFonts` reports what the registry will really route, so a\n  // family reaches this menu only if it can paint.\n  const baked = listFonts();\n  const canvas = listCanvasFonts().filter((c) => !baked.some((f) => f.family === c.family));\n  const available = [...baked.map((f) => f.family), ...canvas.map((c) => c.family)];\n  const options = available.map((family) => ({ value: family, label: family }));\n  if (value !== undefined && !available.includes(value)) {\n    options.push({ value, label: unregisteredLabel(value, weight, fontStyle) });\n  }\n  return (\n    <Select<string>\n      className={className}\n      options={options}\n      selectedKey={mixed ? null : (value ?? null)}\n      placeholder={mixed ? 'Mixed' : undefined}\n      onSelectionChange={onChange}\n      aria-label={props['aria-label'] ?? 'Font'}\n    />\n  );\n}\n"],"mappings":";;;;AAoBA,SAASC,EAAkB,GAAgB,GAAgB,GAAoC;CAC7F,IAAM,EAAE,mBAAgBC,EAAmBC,GAAQC,GAAQC,CAAK;CAChE,OAAOC,IACH,GAAGH,EAAO,yBAAyBG,EAAY,aAC/C,GAAGH,EAAO;AAChB;AAqBA,SAAgBI,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,aAAU,YAAS,KAAK,eAAY,UAAU,iBAAcC,GAKpFC,IAAQC,EAAU,GAClBC,IAASC,EAAgB,CAAC,CAAC,QAAQ,MAAM,CAACH,EAAM,MAAM,MAAMI,EAAE,WAAWC,EAAE,MAAM,CAAC,GAClFC,IAAY,CAAC,GAAGN,EAAM,KAAK,MAAMI,EAAE,MAAM,GAAG,GAAGF,EAAO,KAAK,MAAMG,EAAE,MAAM,CAAC,GAC1EE,IAAUD,EAAU,KAAK,OAAY;EAAE,OAAOZ;EAAQ,OAAOA;CAAO,EAAE;CAI5E,OAHIc,MAAU,KAAA,KAAa,CAACF,EAAU,SAASE,CAAK,KAClDD,EAAQ,KAAK;EAAE;EAAO,OAAOf,EAAkBgB,GAAOb,GAAQc,CAAS;CAAE,CAAC,GAG1E,kBAAClB,GAAD;EACa;EACF;EACT,aAAamB,IAAQ,OAAQF,KAAS;EACtC,aAAaE,IAAQ,UAAU,KAAA;EAC/B,mBAAmBC;EACnB,cAAYZ,EAAM,iBAAiB;CACpC,CAAA;AAEL"}
+{"version":3,"file":"FontFamilySelect-DEvMXyZd.js","names":["Select","unregisteredLabel","resolveFontVariant","family","weight","style","substituted","FontFamilySelect","props","baked","listFonts","canvas","listCanvasFonts","f","c","available","options","value","fontStyle","mixed","onChange"],"sources":["../../src/components/FontFamilySelect/FontFamilySelect.tsx"],"sourcesContent":["import { listCanvasFonts, listFonts, resolveFontVariant } from '@weasel-js/font';\nimport { Select } from '../Select';\n\n/** Props for {@link FontFamilySelect}. */\nexport interface FontFamilySelectProps {\n  /** Current family, or `undefined` when the sources disagree (`mixed`). */\n  value?: string;\n  /** Indeterminate presentation — the aggregated sources name different families. */\n  mixed?: boolean;\n  onChange: (family: string) => void;\n  /** The weight / style the text actually renders at, so the substitution\n   *  probe reports the variant that paints rather than a nominal 400/normal. */\n  weight?: number;\n  fontStyle?: 'normal' | 'italic';\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** Label for a value that isn't in the registry: name the substitute when the\n *  fallback chain found one, otherwise say only what is known. */\nfunction unregisteredLabel(family: string, weight: number, style: 'normal' | 'italic'): string {\n  const { substituted } = resolveFontVariant(family, weight, style);\n  return substituted\n    ? `${family} — not loaded, showing ${substituted.resolved}`\n    : `${family} — not loaded`;\n}\n\n/**\n * Font-family picker driven by the live font registry.\n *\n * **What it offers.** Both tiers that can actually paint: `listFonts()` for\n * families with a baked atlas, and `listCanvasFonts()` for families the\n * dynamic canvas-SDF tier will serve. Offer what will render, invent\n * nothing — and `listCanvasFonts` reports service rather than membership,\n * so a family auto-enrolled under a policy that is no longer in force\n * doesn't appear.\n *\n * **What it does with a value it can't offer.** Nothing about the model\n * stops a node from naming a family that was never registered — a pasted\n * node, an imported SVG, a document from a session that loaded more fonts.\n * The control keeps that value visible as its own entry and names what is\n * actually painting instead, read structurally off\n * `resolveFontVariant().substituted`. Dropping the value would silently\n * rewrite the document on the next edit; showing it bare would claim a font\n * is in use that isn't.\n */\nexport function FontFamilySelect(props: FontFamilySelectProps) {\n  const { value, mixed = false, onChange, weight = 400, fontStyle = 'normal', className } = props;\n  // Both tiers that actually render: families with a baked atlas, and\n  // families the dynamic canvas-SDF tier will serve. Neither list is a guess\n  // — `listCanvasFonts` reports what the registry will really route, so a\n  // family reaches this menu only if it can paint.\n  const baked = listFonts();\n  const canvas = listCanvasFonts().filter((c) => !baked.some((f) => f.family === c.family));\n  const available = [...baked.map((f) => f.family), ...canvas.map((c) => c.family)];\n  const options = available.map((family) => ({ value: family, label: family }));\n  if (value !== undefined && !available.includes(value)) {\n    options.push({ value, label: unregisteredLabel(value, weight, fontStyle) });\n  }\n  return (\n    <Select<string>\n      className={className}\n      options={options}\n      selectedKey={mixed ? null : (value ?? null)}\n      placeholder={mixed ? 'Mixed' : undefined}\n      onSelectionChange={onChange}\n      aria-label={props['aria-label'] ?? 'Font'}\n    />\n  );\n}\n"],"mappings":";;;;AAoBA,SAASC,EAAkB,GAAgB,GAAgB,GAAoC;CAC7F,IAAM,EAAE,mBAAgBC,EAAmBC,GAAQC,GAAQC,CAAK;CAChE,OAAOC,IACH,GAAGH,EAAO,yBAAyBG,EAAY,aAC/C,GAAGH,EAAO;AAChB;AAqBA,SAAgBI,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,aAAU,YAAS,KAAK,eAAY,UAAU,iBAAcC,GAKpFC,IAAQC,EAAU,GAClBC,IAASC,EAAgB,CAAC,CAAC,QAAQ,MAAM,CAACH,EAAM,MAAM,MAAMI,EAAE,WAAWC,EAAE,MAAM,CAAC,GAClFC,IAAY,CAAC,GAAGN,EAAM,KAAK,MAAMI,EAAE,MAAM,GAAG,GAAGF,EAAO,KAAK,MAAMG,EAAE,MAAM,CAAC,GAC1EE,IAAUD,EAAU,KAAK,OAAY;EAAE,OAAOZ;EAAQ,OAAOA;CAAO,EAAE;CAI5E,OAHIc,MAAU,KAAA,KAAa,CAACF,EAAU,SAASE,CAAK,KAClDD,EAAQ,KAAK;EAAE;EAAO,OAAOf,EAAkBgB,GAAOb,GAAQc,CAAS;CAAE,CAAC,GAG1E,kBAAClB,GAAD;EACa;EACF;EACT,aAAamB,IAAQ,OAAQF,KAAS;EACtC,aAAaE,IAAQ,UAAU,KAAA;EAC/B,mBAAmBC;EACnB,cAAYZ,EAAM,iBAAiB;CACpC,CAAA;AAEL"}

package/dist/chunks/{FontWeightSelect-RbcXYJPS.js → FontWeightSelect-BLQ_LMJF.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Select-BppLsJTz.js";
+import { t as e } from "./Select-ouV8O6cp.js";
 import { jsx as t } from "react/jsx-runtime";
 import { listFontWeights as n } from "@weasel-js/font";
 //#region src/components/FontWeightSelect/FontWeightSelect.tsx
@@ -46,4 +46,4 @@ function o(i) {
 //#endregion
 export { a as n, o as t };
 
-//# sourceMappingURL=FontWeightSelect-RbcXYJPS.js.map
+//# sourceMappingURL=FontWeightSelect-BLQ_LMJF.js.map

package/dist/chunks/{FontWeightSelect-RbcXYJPS.js.map → FontWeightSelect-BLQ_LMJF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FontWeightSelect-RbcXYJPS.js","names":["Select","CSS_WEIGHTS","NAMES","fontWeightLabel","name","weight","FontWeightSelect","props","registered","family","listFontWeights","weights","value","mixed","options","a","b","w","onChange","key"],"sources":["../../src/components/FontWeightSelect/FontWeightSelect.tsx"],"sourcesContent":["import { listFontWeights } from '@weasel-js/font';\nimport { Select } from '../Select';\n\n/** Props for {@link FontWeightSelect}. */\nexport interface FontWeightSelectProps {\n  /** Current weight, or `undefined` when the sources disagree (`mixed`). */\n  value?: number;\n  /** Indeterminate presentation — the aggregated sources differ in weight. */\n  mixed?: boolean;\n  /** The family whose weights to offer. Absent offers the CSS weights. */\n  family?: string;\n  onChange: (weight: number) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst CSS_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n\nconst NAMES: Readonly<Record<number, string>> = {\n  100: 'Thin',\n  200: 'Extra Light',\n  300: 'Light',\n  400: 'Regular',\n  500: 'Medium',\n  600: 'Semibold',\n  700: 'Bold',\n  800: 'Extra Bold',\n  900: 'Black',\n};\n\n/** A weight as the picker lists it: the number, then its common name. */\nexport function fontWeightLabel(weight: number): string {\n  const name = NAMES[weight];\n  return name ? `${weight} ${name}` : String(weight);\n}\n\n/**\n * Font-weight picker for one family, driven by the live font registry.\n *\n * It offers the weights `listFontWeights` reports for `family` — the faces\n * that will actually paint rather than be faked. A family with none on file\n * (the canvas tier, which rasterizes any weight it is asked for, or no family\n * at all because the selection spans several) gets the nine CSS weights. A\n * value outside the list is kept as its own entry, as `FontFamilySelect` keeps\n * an unregistered family: dropping it would rewrite the text on the next edit.\n */\nexport function FontWeightSelect(props: FontWeightSelectProps) {\n  const { value, mixed = false, family, onChange, className } = props;\n  const registered = family === undefined ? [] : listFontWeights(family);\n  const weights = new Set<number>(registered.length > 0 ? registered : CSS_WEIGHTS);\n  if (value !== undefined && !mixed) weights.add(value);\n  const options = [...weights]\n    .sort((a, b) => a - b)\n    .map((w) => ({ value: String(w), label: fontWeightLabel(w) }));\n  return (\n    <Select<string>\n      className={className}\n      options={options}\n      selectedKey={mixed || value === undefined ? null : String(value)}\n      placeholder={mixed ? 'Mixed' : undefined}\n      onSelectionChange={(key) => onChange(Number(key))}\n      aria-label={props['aria-label'] ?? 'Weight'}\n    />\n  );\n}\n"],"mappings":";;;;AAgBA,IAAMC,IAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAE1DC,IAA0C;CAC9C,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;AACP;AAGA,SAAgBC,EAAgB,GAAwB;CACtD,IAAMC,IAAOF,EAAMG;CACnB,OAAOD,IAAO,GAAGC,EAAO,GAAGD,MAAS,OAAOC,CAAM;AACnD;AAYA,SAAgBC,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,aAAU,iBAAcC,GACxDC,IAAaC,MAAW,KAAA,IAAY,CAAC,IAAIC,EAAgBD,CAAM,GAC/DE,IAAU,IAAI,IAAYH,EAAW,SAAS,IAAIA,IAAaP,CAAW;CAChF,AAAIW,MAAU,KAAA,KAAa,CAACC,KAAOF,EAAQ,IAAIC,CAAK;CACpD,IAAME,IAAU,CAAC,GAAGH,CAAO,CAAC,CACzB,MAAM,GAAG,MAAMI,IAAIC,CAAC,CAAC,CACrB,KAAK,OAAO;EAAE,OAAO,OAAOC,CAAC;EAAG,OAAOd,EAAgBc,CAAC;CAAE,EAAE;CAC/D,OACE,kBAACjB,GAAD;EACa;EACF;EACT,aAAaa,KAASD,MAAU,KAAA,IAAY,OAAO,OAAOA,CAAK;EAC/D,aAAaC,IAAQ,UAAU,KAAA;EAC/B,oBAAoB,MAAQK,EAAS,OAAOC,CAAG,CAAC;EAChD,cAAYZ,EAAM,iBAAiB;CACpC,CAAA;AAEL"}
+{"version":3,"file":"FontWeightSelect-BLQ_LMJF.js","names":["Select","CSS_WEIGHTS","NAMES","fontWeightLabel","name","weight","FontWeightSelect","props","registered","family","listFontWeights","weights","value","mixed","options","a","b","w","onChange","key"],"sources":["../../src/components/FontWeightSelect/FontWeightSelect.tsx"],"sourcesContent":["import { listFontWeights } from '@weasel-js/font';\nimport { Select } from '../Select';\n\n/** Props for {@link FontWeightSelect}. */\nexport interface FontWeightSelectProps {\n  /** Current weight, or `undefined` when the sources disagree (`mixed`). */\n  value?: number;\n  /** Indeterminate presentation — the aggregated sources differ in weight. */\n  mixed?: boolean;\n  /** The family whose weights to offer. Absent offers the CSS weights. */\n  family?: string;\n  onChange: (weight: number) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst CSS_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n\nconst NAMES: Readonly<Record<number, string>> = {\n  100: 'Thin',\n  200: 'Extra Light',\n  300: 'Light',\n  400: 'Regular',\n  500: 'Medium',\n  600: 'Semibold',\n  700: 'Bold',\n  800: 'Extra Bold',\n  900: 'Black',\n};\n\n/** A weight as the picker lists it: the number, then its common name. */\nexport function fontWeightLabel(weight: number): string {\n  const name = NAMES[weight];\n  return name ? `${weight} ${name}` : String(weight);\n}\n\n/**\n * Font-weight picker for one family, driven by the live font registry.\n *\n * It offers the weights `listFontWeights` reports for `family` — the faces\n * that will actually paint rather than be faked. A family with none on file\n * (the canvas tier, which rasterizes any weight it is asked for, or no family\n * at all because the selection spans several) gets the nine CSS weights. A\n * value outside the list is kept as its own entry, as `FontFamilySelect` keeps\n * an unregistered family: dropping it would rewrite the text on the next edit.\n */\nexport function FontWeightSelect(props: FontWeightSelectProps) {\n  const { value, mixed = false, family, onChange, className } = props;\n  const registered = family === undefined ? [] : listFontWeights(family);\n  const weights = new Set<number>(registered.length > 0 ? registered : CSS_WEIGHTS);\n  if (value !== undefined && !mixed) weights.add(value);\n  const options = [...weights]\n    .sort((a, b) => a - b)\n    .map((w) => ({ value: String(w), label: fontWeightLabel(w) }));\n  return (\n    <Select<string>\n      className={className}\n      options={options}\n      selectedKey={mixed || value === undefined ? null : String(value)}\n      placeholder={mixed ? 'Mixed' : undefined}\n      onSelectionChange={(key) => onChange(Number(key))}\n      aria-label={props['aria-label'] ?? 'Weight'}\n    />\n  );\n}\n"],"mappings":";;;;AAgBA,IAAMC,IAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAE1DC,IAA0C;CAC9C,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;AACP;AAGA,SAAgBC,EAAgB,GAAwB;CACtD,IAAMC,IAAOF,EAAMG;CACnB,OAAOD,IAAO,GAAGC,EAAO,GAAGD,MAAS,OAAOC,CAAM;AACnD;AAYA,SAAgBC,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,aAAU,iBAAcC,GACxDC,IAAaC,MAAW,KAAA,IAAY,CAAC,IAAIC,EAAgBD,CAAM,GAC/DE,IAAU,IAAI,IAAYH,EAAW,SAAS,IAAIA,IAAaP,CAAW;CAChF,AAAIW,MAAU,KAAA,KAAa,CAACC,KAAOF,EAAQ,IAAIC,CAAK;CACpD,IAAME,IAAU,CAAC,GAAGH,CAAO,CAAC,CACzB,MAAM,GAAG,MAAMI,IAAIC,CAAC,CAAC,CACrB,KAAK,OAAO;EAAE,OAAO,OAAOC,CAAC;EAAG,OAAOd,EAAgBc,CAAC;CAAE,EAAE;CAC/D,OACE,kBAACjB,GAAD;EACa;EACF;EACT,aAAaa,KAASD,MAAU,KAAA,IAAY,OAAO,OAAOA,CAAK;EAC/D,aAAaC,IAAQ,UAAU,KAAA;EAC/B,oBAAoB,MAAQK,EAAS,OAAOC,CAAG,CAAC;EAChD,cAAYZ,EAAM,iBAAiB;CACpC,CAAA;AAEL"}

package/dist/chunks/{GradientEditor-DypXzMc-.js → GradientEditor-DD2OjQtn.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./ColorField-BLs9fbeq.js";
-import { t } from "./Slider-Cl5RCeZ7.js";
+import { t as e } from "./ColorField-BwlelY26.js";
+import { t } from "./Slider-DSrlMEq8.js";
 import { t as n } from "./ToggleBar-Z2jZiguF.js";
-import { a as r, i, n as a, o, r as s, s as c, t as l } from "./MeshEditor-GbqqiPk8.js";
+import { a as r, i, n as a, o, r as s, s as c, t as l } from "./MeshEditor-DWpvg8H6.js";
 import { fillInPoseFrame as u, fillToBoundsFrame as d, gradientGeometry as f, isGradientFill as p, sampleGradientStops as m, switchGradientKind as h, useGradientKinds as g, useNodeOverlayFrame as _, useOngoingAction as v, usePaintKind as y } from "@weasel-js/core";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import "react";
@@ -322,4 +322,4 @@ function R(e, t, n) {
 //#endregion
 export { D as i, N as n, j as r, L as t };
 
-//# sourceMappingURL=GradientEditor-DypXzMc-.js.map
+//# sourceMappingURL=GradientEditor-DD2OjQtn.js.map