@weasel-js/ui 1.6.1 → 1.7.0

package/dist/chunks/DataGrid-D-dZj1BD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataGrid-D-dZj1BD.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.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, #2a2018);\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, #e6e7e9); }\n.sortButton:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent, #7fb069));\n  outline-offset: -2px;\n}\n.sortActive { color: var(--wzl-fg, #e6e7e9); }\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, #7fb069); }\n.dropAfter > td { box-shadow: inset 0 -2px 0 0 var(--wzl-accent, #7fb069); }\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}\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, active ? s.sortActive : ''].filter(Boolean).join(' ')}\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}>\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-BMER1LUZ.js

@@ -1,43 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useId as n } from "react";
-var r = {
-	list: "_list_1jpmp_1",
-	row: "_row_1jpmp_14",
-	label: "_label_1jpmp_22",
-	value: "_value_1jpmp_36",
-	title: "_title_1jpmp_49"
-};
-//#endregion
-//#region src/components/DetailList/DetailList.tsx
-function i({ children: i, title: a, layout: o = "inline", className: s }) {
-	let c = n(), l = /* @__PURE__ */ e("dl", {
-		className: s && a == null ? `${r.list} ${s}` : r.list,
-		"data-layout": o,
-		"aria-labelledby": a == null ? void 0 : c,
-		children: i
-	});
-	return a == null ? l : /* @__PURE__ */ t("section", {
-		className: s,
-		children: [/* @__PURE__ */ e("h3", {
-			id: c,
-			className: r.title,
-			children: a
-		}), l]
-	});
-}
-function a({ label: n, children: i, className: a }) {
-	return /* @__PURE__ */ t("div", {
-		className: a ? `${r.row} ${a}` : r.row,
-		children: [/* @__PURE__ */ e("dt", {
-			className: r.label,
-			children: n
-		}), /* @__PURE__ */ e("dd", {
-			className: r.value,
-			children: i
-		})]
-	});
-}
-//#endregion
-export { a as n, i as t };
-
-//# sourceMappingURL=DetailList-BMER1LUZ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DetailList-BMER1LUZ.js","names":["s","DetailList_module_default","DetailList","titleId","useId","list","className","title","layout","DetailRow","label"],"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.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 { type ReactNode, 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/** 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  /** 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. */\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * A read-only list of labelled 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', 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      aria-labelledby={title != null ? titleId : undefined}\n    >\n      {children}\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, className }: DetailRowProps) {\n  return (\n    <div className={className ? `${s.row} ${className}` : s.row}>\n      <dt className={s.label}>{label}</dt>\n      <dd className={s.value}>{children}</dd>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACqCA,SAAgBE,EAAW,EAAE,aAAU,UAAO,YAAS,UAAU,gBAA8B;CAC7F,IAAMC,IAAUC,EAAM,GAChBC,IACJ,kBAAC,MAAD;EACE,WAAWC,KAAaC,KAAS,OAAO,GAAGP,EAAE,KAAK,GAAGM,MAAcN,EAAE;EACrE,eAAaQ;EACb,mBAAiBD,KAAS,OAAiB,KAAA,IAAVJ;EAEhC;CACC,CAAA;CAGN,OADII,KAAS,OAAaF,IAExB,kBAAC,WAAD;EAAoB;EAApB,UAAA,CACE,kBAAC,MAAD;GAAI,IAAIF;GAAS,WAAWH,EAAE;GAAQ,UAAAO;EAAU,CAAA,GAC/CF,CACM;;AAEb;AAGA,SAAgBI,EAAU,EAAE,UAAO,aAAU,gBAA6B;CACxE,OACE,kBAAC,OAAD;EAAK,WAAWH,IAAY,GAAGN,EAAE,IAAI,GAAGM,MAAcN,EAAE;EAAxD,UAAA,CACE,kBAAC,MAAD;GAAI,WAAWA,EAAE;GAAQ,UAAAU;EAAU,CAAA,GACnC,kBAAC,MAAD;GAAI,WAAWV,EAAE;GAAQ;EAAa,CAAA,CACnC;;AAET"}

package/dist/chunks/Dialog-BWyNMgpf.js

@@ -1,66 +0,0 @@
-import { r as e } from "./portalHost-yTOVuCej.js";
-import { t } from "./stance-BFQpS_fL.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Dialog as a, Heading as o, Modal as s, ModalOverlay as c } from "react-aria-components";
-var l = {
-	overlay: "_overlay_122x3_1",
-	modal: "_modal_122x3_29",
-	dialog: "_dialog_122x3_223",
-	header: "_header_122x3_231",
-	title: "_title_122x3_240",
-	close: "_close_122x3_251",
-	body: "_body_122x3_273",
-	footer: "_footer_122x3_288"
-};
-//#endregion
-//#region src/components/Dialog/Dialog.tsx
-function u(u) {
-	let { title: d, showCloseButton: f, children: p, footer: m, role: h = "dialog", className: g, bodyClassName: _, isOpen: v, onOpenChange: y, portalContainer: b, stance: x, tone: S, ...C } = u, w = t({
-		stance: x,
-		tone: S
-	}), T = f ?? !!y, { anchor: E, portalProps: D } = e(b);
-	return /* @__PURE__ */ i(n, { children: [E, /* @__PURE__ */ r(c, {
-		...C,
-		isOpen: v,
-		onOpenChange: y,
-		className: l.overlay,
-		"data-weasel-overlay": "",
-		...D,
-		children: /* @__PURE__ */ r(s, {
-			className: [l.modal, g].filter(Boolean).join(" "),
-			...w,
-			children: /* @__PURE__ */ r(a, {
-				role: h,
-				className: l.dialog,
-				children: ({ close: e }) => /* @__PURE__ */ i(n, { children: [
-					(d !== void 0 || T) && /* @__PURE__ */ i("header", {
-						className: l.header,
-						children: [d !== void 0 && /* @__PURE__ */ r(o, {
-							slot: "title",
-							className: l.title,
-							children: d
-						}), T && /* @__PURE__ */ r("button", {
-							type: "button",
-							className: l.close,
-							onClick: e,
-							"aria-label": "Close dialog",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ r("div", {
-						className: [l.body, _].filter(Boolean).join(" "),
-						children: p
-					}),
-					m !== void 0 && /* @__PURE__ */ r("footer", {
-						className: l.footer,
-						children: m
-					})
-				] })
-			})
-		})
-	})] });
-}
-//#endregion
-export { u as t };
-
-//# sourceMappingURL=Dialog-BWyNMgpf.js.map

package/dist/chunks/Dialog-BWyNMgpf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-BWyNMgpf.js","names":["Dialog","_Fragment","s","RACModal","RACDialog","useOverlayPortal","Dialog_module_default","Dialog$1","rest","props","stanced","useStance","showClose","showCloseButton","onOpenChange","portalContainer","Fragment","anchor","ModalOverlay","portalProps","Modal","className","Dialog","title","Heading","close","bodyClassName","footer"],"sources":["../../src/components/Dialog/Dialog.module.css","../../src/components/Dialog/Dialog.tsx"],"sourcesContent":[".overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  opacity: 0;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.overlay[data-entering] {\n  opacity: 0;\n}\n\n.overlay[data-entering][data-rac] {\n  opacity: 1;\n}\n\n.overlay[data-exiting] {\n  opacity: 0;\n}\n\n.overlay[data-rac]:not([data-entering]):not([data-exiting]) {\n  opacity: 1;\n}\n\n.modal {\n  background: var(--_s-fill);\n  border: var(--_s-border-width) var(--_s-border-style) var(--_s-border-color);\n  border-radius: var(--_s-radius);\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: min(900px, calc(100vw - 32px));\n  max-height: calc(100vh - 32px);\n  display: flex;\n  flex-direction: column;\n  outline: none;\n}\n\n/* BEGIN GENERATED stance rules: dialog — `npm run gen:stances`, do not edit. */\n\n.modal {\n  --wzl-tone: initial;\n}\n\n.modal {\n  --_s-surface: var(--wzl-surface);\n  --_s-border-color: var(--wzl-border);\n  --_s-border-style: solid;\n  --_s-border-width: 1px;\n  --_s-radius: var(--wzl-radius-md);\n  --_s-tone-mix: var(--wzl-panel-tone-mix);\n  --_s-tone: var(--wzl-tone, var(--_s-surface));\n  --_s-accent: var(--wzl-tone);\n  --_s-title-font: var(--wzl-font-ui);\n  --_s-title-weight: var(--wzl-font-weight-bold);\n  --_s-title-size: var(--wzl-font-size);\n  --_s-title-case: none;\n  --_s-title-tracking: normal;\n  --_s-title-color: var(--wzl-fg);\n}\n\n.modal[data-stance='scope'] {\n  --_s-surface: var(--wzl-stance-scope-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-scope-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-scope-border-style, solid);\n  --_s-border-width: var(--wzl-stance-scope-border-width, 1px);\n  --_s-radius: var(--wzl-stance-scope-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-scope-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-scope-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-scope-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-scope-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-scope-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-scope-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-scope-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-scope-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='aside'] {\n  --_s-surface: var(--wzl-stance-aside-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-aside-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-aside-border-style, solid);\n  --_s-border-width: var(--wzl-stance-aside-border-width, 1px);\n  --_s-radius: var(--wzl-stance-aside-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-aside-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-aside-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-aside-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-aside-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-aside-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-aside-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-aside-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-aside-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='advanced'] {\n  --_s-surface: var(--wzl-stance-advanced-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-advanced-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-advanced-border-style, solid);\n  --_s-border-width: var(--wzl-stance-advanced-border-width, 1px);\n  --_s-radius: var(--wzl-stance-advanced-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-advanced-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-advanced-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-advanced-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-advanced-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-advanced-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-advanced-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-advanced-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-advanced-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='debug'] {\n  --_s-surface: var(--wzl-stance-debug-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-debug-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-debug-border-style, solid);\n  --_s-border-width: var(--wzl-stance-debug-border-width, 1px);\n  --_s-radius: var(--wzl-stance-debug-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-debug-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-debug-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-debug-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-debug-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-debug-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-debug-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-debug-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-debug-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='danger'] {\n  --_s-surface: var(--wzl-stance-danger-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-danger-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-danger-border-style, solid);\n  --_s-border-width: var(--wzl-stance-danger-border-width, 1px);\n  --_s-radius: var(--wzl-stance-danger-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-danger-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-danger-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-danger-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-danger-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-danger-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-danger-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-danger-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-danger-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='notice'] {\n  --_s-surface: var(--wzl-stance-notice-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-notice-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-notice-border-style, solid);\n  --_s-border-width: var(--wzl-stance-notice-border-width, 1px);\n  --_s-radius: var(--wzl-stance-notice-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-notice-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-notice-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-notice-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-notice-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-notice-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-notice-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-notice-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-notice-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='important'] {\n  --_s-surface: var(--wzl-stance-important-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-important-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-important-border-style, solid);\n  --_s-border-width: var(--wzl-stance-important-border-width, 1px);\n  --_s-radius: var(--wzl-stance-important-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-important-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-important-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-important-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-important-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-important-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-important-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-important-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-important-title-color, var(--wzl-fg));\n}\n\n.modal[data-stance='preview'] {\n  --_s-surface: var(--wzl-stance-preview-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-preview-border-color, var(--wzl-border));\n  --_s-border-style: var(--wzl-stance-preview-border-style, solid);\n  --_s-border-width: var(--wzl-stance-preview-border-width, 1px);\n  --_s-radius: var(--wzl-stance-preview-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-preview-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-preview-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-preview-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-preview-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-preview-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-preview-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-preview-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-preview-title-color, var(--wzl-fg));\n}\n\n.modal {\n  --_s-fill: var(--_s-surface);\n}\n\n.modal[data-tone],\n.modal[data-stance] {\n  --_s-fill: color-mix(in oklab, var(--_s-tone) var(--_s-tone-mix), var(--_s-surface));\n}\n\n.modal[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: dialog */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n  outline: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n  padding: var(--wzl-space-7) var(--wzl-space-8);\n  border-bottom: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n\n.title {\n  flex: 1;\n  margin: 0;\n  font-family: var(--_s-title-font);\n  font-size: var(--_s-title-size);\n  font-weight: var(--_s-title-weight);\n  text-transform: var(--_s-title-case);\n  letter-spacing: var(--_s-title-tracking);\n  color: var(--_s-title-color);\n}\n\n.close {\n  flex: 0 0 auto;\n  width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n}\n\n.close:hover {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.body {\n  flex: 1;\n}\n\n/* Defaults, not rules: `bodyClassName` exists to turn these off for content\n   that scrolls itself, and a plain class would tie with it on specificity and\n   be decided by stylesheet order. `min-height` is here for the same reason —\n   left in the rule above it silently beat a consumer class asking the body to\n   hold a height, and the dialog resized itself around every pane. */\n:where(.body) {\n  min-height: 0;\n  overflow: auto;\n  padding: var(--wzl-space-8);\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-6) var(--wzl-space-8);\n  border-top: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Modal as RACModal,\n  ModalOverlay,\n  Dialog as RACDialog,\n  Heading,\n  type ModalOverlayProps,\n  type DialogProps as RACDialogProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Dialog.module.css';\n\n/** Props for {@link Dialog}, on top of React Aria's `ModalOverlay` props. */\nexport type DialogProps = Omit<\n  WithoutPortalTarget<ModalOverlayProps>,\n  'children' | 'className'\n> &\n  OverlayPortalProps &\n  StanceProps & {\n    /** Heading rendered in the dialog's default header. Omit when supplying\n     *  a custom `header` slot via children. */\n    title?: ReactNode;\n    /** Show the built-in close button. Defaults to true when `onOpenChange`\n     *  is wired so the user has an escape hatch. */\n    showCloseButton?: boolean;\n    /** Body content. */\n    children?: ReactNode;\n    /** Footer slot — typically action buttons. */\n    footer?: ReactNode;\n    /** ARIA role. Defaults to `dialog`. Use `alertdialog` for confirms. */\n    role?: RACDialogProps['role'];\n    /** Class applied to the modal box (inside the overlay). */\n    className?: string;\n    /** Class applied to the scrolling body. For content that owns its own\n     *  scrolling — a form with a fixed navigation rail beside a scrolling\n     *  pane — this is where the body's padding and overflow come off. */\n    bodyClassName?: string;\n  };\n\n/**\n * Modal dialog wrapping React Aria. Supplies a default header (title +\n * close), scrollable body, and footer slot. Pass `isOpen` + `onOpenChange`\n * for controlled visibility, or omit both and use a `<DialogTrigger>` from\n * `react-aria-components` upstream of this component.\n *\n * Escape, click-outside, focus trap, and scroll lock all come from the\n * underlying primitives. `stance` and `tone` work as on `<PropertyPanel>` —\n * a destructive confirm is `stance=\"danger\"`.\n */\nexport function Dialog(props: DialogProps) {\n  const {\n    title,\n    showCloseButton,\n    children,\n    footer,\n    role = 'dialog',\n    className,\n    bodyClassName,\n    isOpen,\n    onOpenChange,\n    portalContainer,\n    stance,\n    tone,\n    ...rest\n  } = props;\n  const stanced = useStance({ stance, tone });\n\n  const showClose = showCloseButton ?? Boolean(onOpenChange);\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <>\n      {anchor}\n      <ModalOverlay\n        {...rest}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        className={s.overlay}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <RACModal className={[s.modal, className].filter(Boolean).join(' ')} {...stanced}>\n          <RACDialog role={role} className={s.dialog}>\n            {({ close }) => (\n              <>\n                {(title !== undefined || showClose) && (\n                  <header className={s.header}>\n                    {title !== undefined && (\n                      <Heading slot=\"title\" className={s.title}>{title}</Heading>\n                    )}\n                    {showClose && (\n                      <button\n                        type=\"button\"\n                        className={s.close}\n                        onClick={close}\n                        aria-label=\"Close dialog\"\n                      >\n                        ×\n                      </button>\n                    )}\n                  </header>\n                )}\n                <div className={[s.body, bodyClassName].filter(Boolean).join(' ')}>{children}</div>\n                {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n              </>\n            )}\n          </RACDialog>\n        </RACModal>\n      </ModalOverlay>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;ACkDA,SAAgBA,EAAO,GAAoB;CACzC,IAAM,EACJ,UACA,oBACA,aACA,WACA,UAAO,UACP,cACA,kBACA,WACA,iBACA,oBACA,WACA,SACA,GAAGQ,MACDC,GACEC,IAAUC,EAAU;EAAE;EAAQ;CAAK,CAAC,GAEpCC,IAAYC,KAAmB,EAAQC,GACvC,EAAE,WAAQ,mBAAgBT,EAAiBU,CAAe;CAEhE,OACE,kBAAAd,GAAA,EAAA,UAAA,CACGgB,GACD,kBAACC,GAAD;EACE,GAAIV;EACI;EACM;EACd,WAAWN,EAAE;EACb,uBAAoB;EACpB,GAAIiB;EAEJ,UAAA,kBAAChB,GAAD;GAAU,WAAW,CAACD,EAAE,OAAOmB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAAG,GAAIX;GACvE,UAAA,kBAACN,GAAD;IAAiB;IAAM,WAAWF,EAAE;IAChC,WAAA,EAAE,eACF,kBAAAD,GAAA,EAAA,UAAA;MACIsB,MAAU,KAAA,KAAaX,MACvB,kBAAC,UAAD;MAAQ,WAAWV,EAAE;MAArB,UAAA,CACGqB,MAAU,KAAA,KACT,kBAACC,GAAD;OAAS,MAAK;OAAQ,WAAWtB,EAAE;OAAQ,UAAAqB;MAAe,CAAA,GAE3DX,KACC,kBAAC,UAAD;OACE,MAAK;OACL,WAAWV,EAAE;OACb,SAASuB;OACT,cAAW;OACZ,UAAA;MAEO,CAAA,CAEJ;;KAEV,kBAAC,OAAD;MAAK,WAAW,CAACvB,EAAE,MAAMwB,CAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;MAAI;KAAc,CAAA;KACjFC,MAAW,KAAA,KAAa,kBAAC,UAAD;MAAQ,WAAWzB,EAAE;MAAS,UAAAyB;KAAe,CAAA;IACtE,EAAA,CAAA;GAEK,CAAA;EACH,CAAA;CACE,CAAA,CACd,EAAA,CAAA;AAEN"}

package/dist/chunks/Disclosure-0G0uh2fa.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Disclosure-0G0uh2fa.js","names":["s","Disclosure_module_default","DisclosureMark","className","size","open","Disclosure","controls","label","onToggle","DisclosureRow","twisty"],"sources":["../../src/components/Disclosure/Disclosure.module.css","../../src/components/Disclosure/Disclosure.tsx"],"sourcesContent":["/* Every dimension is stated because a host app's bare-element defaults can be\n   authored at zero specificity — labkit's `:where(.lk-root) :where(button)`\n   sets `height: var(--wzl-control-h)` and horizontal padding, which would\n   otherwise stretch a 12px mark into a full-height control. */\n.twisty {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* A floor, not a size: a control sized to a 12px glyph is a 12px target,\n     which is under every pointer-size guideline there is. Stated as a minimum\n     so a larger mark grows the target with it rather than being shrunk to fit\n     — a flex item's default `flex-shrink: 1` would otherwise crush it. */\n  min-width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n  min-height: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n  padding: 0;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.twisty:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n.twisty:disabled {\n  cursor: not-allowed;\n}\n\n.mark {\n  display: block;\n  flex: none;\n}\n\n.lozenge {\n  fill: var(--wzl-disclosure-fill, var(--wzl-accent-fg));\n  transition: fill var(--wzl-motion-fast, 90ms) var(--wzl-ease-out-cubic);\n}\n\n.twisty:hover:not(:disabled) .lozenge {\n  fill: color-mix(in oklab, var(--wzl-disclosure-fill, var(--wzl-accent-fg)), white 15%);\n}\n\n.twisty:disabled .lozenge {\n  fill: var(--wzl-fg-subtle);\n}\n\n.sign {\n  fill: none;\n  stroke: var(--wzl-fg-on-accent);\n  stroke-width: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lozenge {\n    transition: none;\n  }\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-disclosure-gap, 4px);\n}\n\n/* The row's content takes the rest and is allowed to shrink; the twisty is\n   not, so a long label truncates rather than crushing the control. */\n.rowBody {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n","import type { ReactNode } from 'react';\nimport s from './Disclosure.module.css';\n\n/** Props for `<DisclosureMark>`. */\nexport interface DisclosureMarkProps {\n  /** Whether the section it stands for is open: `−` when open, `+` when shut. */\n  open: boolean;\n  /** Mark size in px, square. Default 13. */\n  size?: number;\n  className?: string;\n}\n\n/**\n * The fold mark alone: a dark violet rounded square holding a `+` while its section is\n * shut and a `−` while it is open. Decorative — it carries no role or label —\n * for a row that is itself the control, such as a tree item or a header\n * button. Anywhere the mark has to be the control, use `<Disclosure>`.\n *\n * Deliberately not part of the icon register, on the same grounds as\n * `DragHandleGlyph`: that register is outline strokes at a fixed weight, and\n * this mark is filled.\n */\nexport function DisclosureMark({ open, size = 13, className }: DisclosureMarkProps) {\n  return (\n    <svg\n      className={className ? `${s.mark} ${className}` : s.mark}\n      viewBox=\"0 0 13 13\"\n      width={size}\n      height={size}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <rect className={s.lozenge} width=\"13\" height=\"13\" rx=\"3\" />\n      {/* One-unit bars centered on 6.5 in an odd box, so at the default size\n          both edges land on the pixel grid rather than blurring across it. */}\n      <path className={s.sign} d={open ? 'M3 6.5 H10' : 'M3 6.5 H10 M6.5 3 V10'} />\n    </svg>\n  );\n}\n\n/** Props for `<Disclosure>`. */\nexport interface DisclosureProps {\n  /** Whether the section it controls is open. The consumer owns this. */\n  open: boolean;\n  onToggle: () => void;\n  /**\n   * Names the section, for a screen reader. The control has no text of its\n   * own, so without this it announces as an unlabeled button.\n   */\n  label: string;\n  /**\n   * `id` of the element this expands. Sets `aria-controls`, which lets a\n   * screen reader move to the revealed content.\n   */\n  controls?: string;\n  /** Mark size in px. The hit target is at least 20px and grows with it.\n   *  Default 13. */\n  size?: number;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * The twisty on a collapsible section: a `<DisclosureMark>` in a button.\n *\n * Presentational — it holds no open/closed state and renders no children.\n * The consumer owns the state and the panel; this is the control that toggles\n * it, and `aria-expanded` is what ties the two together.\n *\n * Three things it settles that a hand-rolled twisty keeps getting wrong. The\n * mark is drawn rather than typed, because `--wzl-font-ui` carries no ▸/▾ and\n * a text glyph falls back to whatever the system offers at whatever size that\n * font renders it. The hit target is larger than the mark. And it is a sibling\n * of the row's label rather than a child, so clicking to expand does not\n * actuate the label's own control.\n */\nexport function Disclosure({ open, onToggle, label, controls, size = 13, disabled, className }: DisclosureProps) {\n  return (\n    <button\n      type=\"button\"\n      className={className ? `${s.twisty} ${className}` : s.twisty}\n      aria-expanded={open}\n      aria-controls={controls}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onToggle}\n    >\n      <DisclosureMark open={open} size={size} />\n    </button>\n  );\n}\n\n/** Props for `<DisclosureRow>`. */\nexport interface DisclosureRowProps extends Omit<DisclosureProps, 'className'> {\n  /** The row's own content — a label, a checkbox, a count. */\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * A `<Disclosure>` and a row of content beside it, laid out so the twisty\n * leads and the content takes the rest.\n *\n * The layout is the point: the twisty sits *outside* whatever the row puts in\n * it, so a row whose content is a `<label>` wrapping a checkbox stays\n * clickable as a label without the twisty actuating it.\n */\nexport function DisclosureRow({ children, className, ...twisty }: DisclosureRowProps) {\n  return (\n    <div className={className ? `${s.row} ${className}` : s.row}>\n      <Disclosure {...twisty} />\n      <div className={s.rowBody}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACsBA,SAAgBE,EAAe,EAAE,SAAM,UAAO,IAAI,gBAAkC;CAClF,OACE,kBAAC,OAAD;EACE,WAAWC,IAAY,GAAGH,EAAE,KAAK,GAAGG,MAAcH,EAAE;EACpD,SAAQ;EACR,OAAOI;EACP,QAAQA;EACR,eAAY;EACZ,WAAU;EANZ,UAAA,CAQE,kBAAC,QAAD;GAAM,WAAWJ,EAAE;GAAS,OAAM;GAAK,QAAO;GAAK,IAAG;EAAK,CAAA,GAG3D,kBAAC,QAAD;GAAM,WAAWA,EAAE;GAAM,GAAGK,IAAO,eAAe;EAA0B,CAAA,CACzE;;AAET;AAsCA,SAAgBC,EAAW,EAAE,SAAM,aAAU,UAAO,aAAU,UAAO,IAAI,aAAU,gBAA8B;CAC/G,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAWH,IAAY,GAAGH,EAAE,OAAO,GAAGG,MAAcH,EAAE;EACtD,iBAAeK;EACf,iBAAeE;EACf,cAAYC;EACF;EACV,SAASC;EAET,UAAA,kBAACP,GAAD;GAAsB;GAAY;EAAO,CAAA;CACnC,CAAA;AAEZ;AAiBA,SAAgBQ,EAAc,EAAE,aAAU,cAAW,GAAGC,KAA8B;CACpF,OACE,kBAAC,OAAD;EAAK,WAAWR,IAAY,GAAGH,EAAE,IAAI,GAAGG,MAAcH,EAAE;EAAxD,UAAA,CACE,kBAACM,GAAD,EAAY,GAAIK,EAAS,CAAA,GACzB,kBAAC,OAAD;GAAK,WAAWX,EAAE;GAAU;EAAc,CAAA,CACvC;;AAET"}

package/dist/chunks/DragHandleGlyph-Dr7Fgo0I.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DragHandleGlyph-Dr7Fgo0I.js","names":["DragHandleGlyph","size"],"sources":["../../src/components/DragHandleGlyph/DragHandleGlyph.tsx"],"sourcesContent":["/** Props for `<DragHandleGlyph>`. */\nexport interface DragHandleGlyphProps {\n  /** Height in px; width scales with it. Default 16. */\n  size?: number;\n}\n\n/** The two-column dot grip used on anything draggable by a handle.\n *\n *  Deliberately not part of the icon register: that register is outline strokes\n *  at a fixed weight, and a grip is filled dots. Forcing it in would either\n *  break the register's rule or produce a worse glyph. */\nexport function DragHandleGlyph({ size = 16 }: DragHandleGlyphProps) {\n  return (\n    <svg\n      width={(size * 8) / 16}\n      height={size}\n      viewBox=\"0 0 8 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n    </svg>\n  );\n}\n"],"mappings":";;AAWA,SAAgBA,EAAgB,EAAE,UAAO,MAA4B;CACnE,OACE,kBAAC,OAAD;EACE,OAAQC,IAAO,IAAK;EACpB,QAAQA;EACR,SAAQ;EACR,MAAK;EACL,eAAY;EALd,UAAA;GAOE,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;GAAO,CAAA;GAC/B,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;GAAO,CAAA;GAC/B,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;GAAO,CAAA;GAC/B,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;GAAO,CAAA;GAC/B,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;GAAO,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;GAAO,CAAA;EAC7B;;AAET"}

package/dist/chunks/GradientEditor-B3a-MsVJ.js

@@ -1,335 +0,0 @@
-import { t as e } from "./ColorField-BcMcW8Sa.js";
-import { t } from "./Slider-CFwQYQ10.js";
-import { t as n } from "./ToggleBar-DTjGeS0Q.js";
-import { fillInPoseFrame as r, fillToBoundsFrame as i, gradientGeometry as a, isGradientFill as o, sampleGradientStops as s, useHandleDrag as c, useNodeOverlayFrame as l, useOngoingAction as u, withGradientKind as d } from "@weasel-js/core";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useCallback as h, useRef as g } from "react";
-//#region src/paintGradientTrack.tsx
-var _ = {
-	angleDeg: 135,
-	stripe: 2,
-	gap: 4,
-	dim: 75
-};
-function v(e) {
-	let { gradient: t, samples: n = 16, activeRange: r, hatch: i } = e;
-	return (e) => {
-		let a = [];
-		for (let e = 0; e <= n; e++) {
-			let r = e / n;
-			a.push(`${t(r)} ${(r * 100).toFixed(1)}%`);
-		}
-		let o = `linear-gradient(to right, ${a.join(", ")})`, s = [];
-		if (r) {
-			let t = e.valueToFraction(r[0]) * 100, n = e.valueToFraction(r[1]) * 100, a = {
-				..._,
-				...i
-			}, o = `repeating-linear-gradient(${a.angleDeg}deg, transparent 0 ${a.stripe}px, var(--wzl-surface) ${a.stripe}px ${a.stripe + a.gap}px)`, c = `color-mix(in srgb, var(--wzl-surface) ${a.dim}%, transparent)`, l = `linear-gradient(${c}, ${c})`;
-			if (t > 0 && (s.push(`${l} left 0 / ${t.toFixed(2)}% 100% no-repeat`), s.push(`${o} left 0 / ${t.toFixed(2)}% 100% no-repeat`)), n < 100) {
-				let e = (100 - n).toFixed(2);
-				s.push(`${l} right 0 / ${e}% 100% no-repeat`), s.push(`${o} right 0 / ${e}% 100% no-repeat`);
-			}
-		}
-		s.push(o);
-		let c = {
-			position: "absolute",
-			inset: 0,
-			background: s.join(", ")
-		};
-		return /* @__PURE__ */ p("div", { style: c });
-	};
-}
-var y = {
-	root: "_root_c0ev4_1",
-	swatches: "_swatches_c0ev4_8",
-	swatch: "_swatch_c0ev4_8"
-}, b = [
-	{
-		value: "linear-gradient",
-		label: "Linear"
-	},
-	{
-		value: "radial-gradient",
-		label: "Radial"
-	},
-	{
-		value: "conic-gradient",
-		label: "Conic"
-	}
-], x = [
-	{
-		value: "rgb",
-		label: "sRGB"
-	},
-	{
-		value: "oklab",
-		label: "OKLab"
-	},
-	{
-		value: "oklch",
-		label: "OKLCh"
-	}
-], S = 2;
-function C(r) {
-	let { value: i, onInput: a, onChange: o, kindSwitch: c = !0, spaceSwitch: l = !0, className: u } = r, f = i.stops, g = i.interpolate ?? "rgb", _ = h((e) => ({
-		...i,
-		stops: e
-	}), [i]), C = f.map((e) => ({
-		value: e.offset,
-		color: e.color
-	})), w = (e) => e.map((e) => ({
-		offset: e.value,
-		color: e.color
-	})), T = (e, t) => f.map((n, r) => r === e ? {
-		...n,
-		color: t
-	} : n), E = f.map((e, t) => ({
-		stop: e,
-		index: t
-	})).sort((e, t) => e.stop.offset - t.stop.offset);
-	return /* @__PURE__ */ m("div", {
-		className: [y.root, u].filter(Boolean).join(" "),
-		children: [
-			c && /* @__PURE__ */ p(n, {
-				items: b,
-				value: i.fill,
-				size: "sm",
-				ariaLabel: "Gradient kind",
-				onChange: (e) => e && o(d(i, e))
-			}),
-			/* @__PURE__ */ p(t, {
-				min: 0,
-				max: 1,
-				step: .005,
-				constraint: "free",
-				thumbs: C,
-				ariaLabel: "Gradient stops",
-				readoutPlacement: "none",
-				onInput: (e) => a?.(_(w(e))),
-				onChange: (e) => o(_(w(e))),
-				onAddThumb: (e) => ({
-					value: e,
-					color: s(f, e, g)
-				}),
-				onRemoveThumb: () => f.length > S,
-				renderTrack: v({
-					gradient: (e) => s(f, e, g),
-					samples: g === "rgb" ? 32 : 64
-				})
-			}),
-			l && /* @__PURE__ */ p(n, {
-				items: x,
-				value: g,
-				size: "sm",
-				ariaLabel: "Blend space",
-				onChange: (e) => e && o({
-					...i,
-					interpolate: e
-				})
-			}),
-			/* @__PURE__ */ p("div", {
-				className: y.swatches,
-				children: E.map(({ stop: t, index: n }) => /* @__PURE__ */ p(e, {
-					value: t.color,
-					alpha: !0,
-					"aria-label": `Stop ${n + 1} at ${Math.round(t.offset * 100)}%`,
-					className: y.swatch,
-					onInput: (e) => a?.(_(T(n, e))),
-					onChange: (e) => o(_(T(n, e)))
-				}, n))
-			})
-		]
-	});
-}
-var w = {
-	overlay: "_overlay_6yu3h_3",
-	guide: "_guide_6yu3h_13",
-	handle: "_handle_6yu3h_21"
-};
-//#endregion
-//#region src/components/GradientEditor/GradientHandles.tsx
-function T(e) {
-	let { value: t, toScreen: n, toLocal: r, onInput: i, onChange: a, width: o, height: s, className: c } = e;
-	return /* @__PURE__ */ p("svg", {
-		className: [w.overlay, c].filter(Boolean).join(" "),
-		width: o,
-		height: s,
-		children: E(t, n, r, i, a)
-	});
-}
-function E(e, t, n, r, i) {
-	let o = (e, t) => {
-		t === "input" ? r?.(e) : i(e);
-	};
-	if (e.fill === "linear-gradient") {
-		let r = t(e.from), i = t(e.to);
-		return /* @__PURE__ */ m(f, { children: [
-			/* @__PURE__ */ p(O, {
-				x1: r.x,
-				y1: r.y,
-				x2: i.x,
-				y2: i.y
-			}),
-			/* @__PURE__ */ p(k, {
-				at: r,
-				label: "Gradient start",
-				onDrag: (t, r) => o({
-					...e,
-					from: n(t)
-				}, r)
-			}),
-			/* @__PURE__ */ p(k, {
-				at: i,
-				label: "Gradient end",
-				onDrag: (t, r) => o({
-					...e,
-					to: n(t)
-				}, r)
-			})
-		] });
-	}
-	if (e.fill === "radial-gradient") {
-		let r = t(e.center), i = t({
-			x: e.center.x + e.radius,
-			y: e.center.y
-		}), a = Math.hypot(i.x - r.x, i.y - r.y);
-		return /* @__PURE__ */ m(f, { children: [
-			/* @__PURE__ */ p("circle", {
-				className: w.guide,
-				cx: r.x,
-				cy: r.y,
-				r: a
-			}),
-			/* @__PURE__ */ p(k, {
-				at: r,
-				label: "Gradient center",
-				onDrag: (t, r) => o({
-					...e,
-					center: n(t)
-				}, r)
-			}),
-			/* @__PURE__ */ p(k, {
-				at: i,
-				label: "Gradient radius",
-				onDrag: (t, r) => {
-					let i = n(t), a = Math.hypot(i.x - e.center.x, i.y - e.center.y);
-					o({
-						...e,
-						radius: Math.max(D, a)
-					}, r);
-				}
-			})
-		] });
-	}
-	let s = t(e.center), { radius: c } = a(e), l = t({
-		x: e.center.x + Math.cos(e.angle) * c,
-		y: e.center.y + Math.sin(e.angle) * c
-	});
-	return /* @__PURE__ */ m(f, { children: [
-		/* @__PURE__ */ p(O, {
-			x1: s.x,
-			y1: s.y,
-			x2: l.x,
-			y2: l.y
-		}),
-		/* @__PURE__ */ p(k, {
-			at: s,
-			label: "Gradient center",
-			onDrag: (t, r) => o({
-				...e,
-				center: n(t)
-			}, r)
-		}),
-		/* @__PURE__ */ p(k, {
-			at: l,
-			label: "Gradient angle",
-			onDrag: (t, r) => {
-				let i = n(t), a = Math.atan2(i.y - e.center.y, i.x - e.center.x);
-				o({
-					...e,
-					angle: a
-				}, r);
-			}
-		})
-	] });
-}
-var D = 1;
-function O(e) {
-	return /* @__PURE__ */ p("line", {
-		className: w.guide,
-		...e
-	});
-}
-function k({ at: e, label: t, onDrag: n }) {
-	let r = g(e), i = c({
-		onStart: () => {
-			r.current = e;
-		},
-		onMove: (e) => {
-			n(e, "input");
-		},
-		onEnd: ({ point: e, moved: t }) => {
-			t && n(e, "commit");
-		},
-		onCancel: () => {
-			n(r.current, "input");
-		}
-	});
-	return /* @__PURE__ */ p("circle", {
-		className: w.handle,
-		cx: e.x,
-		cy: e.y,
-		r: A,
-		role: "button",
-		"aria-label": t,
-		tabIndex: 0,
-		onKeyDown: (t) => {
-			let r = t.shiftKey ? j * 10 : j, i = 0, a = 0;
-			if (t.key === "ArrowLeft") i = -r;
-			else if (t.key === "ArrowRight") i = r;
-			else if (t.key === "ArrowUp") a = -r;
-			else if (t.key === "ArrowDown") a = r;
-			else return;
-			t.preventDefault();
-			let o = {
-				x: e.x + i,
-				y: e.y + a
-			};
-			n(o, "input"), n(o, "commit");
-		},
-		...i
-	});
-}
-var A = 7, j = 1;
-//#endregion
-//#region src/components/GradientEditor/SceneGradientHandles.tsx
-function M(e) {
-	let { scene: t, containerRef: n, nodeId: a, slot: o, view: s, className: c } = e, d = l(t, n, a, { view: s }), f = u(o === "fill" ? "setFill" : "setStroke"), m = d ? P(N(t, a, o)) : null;
-	if (!d || !m) return null;
-	let h = (e, t) => {
-		let n = i(e, d.box);
-		t === "commit" ? f.commit({ paint: n }) : f.input({ paint: n });
-	};
-	return /* @__PURE__ */ p(T, {
-		value: r(m, d.box),
-		toScreen: d.toScreen,
-		toLocal: d.toLocal,
-		width: d.width,
-		height: d.height,
-		className: c,
-		onInput: (e) => h(e, "input"),
-		onChange: (e) => h(e, "commit")
-	});
-}
-function N(e, t, n) {
-	if (t == null) return;
-	let r = e.nodes.get(t)?.data;
-	if (r) return n === "fill" ? r.fill : r.stroke?.paint;
-}
-function P(e) {
-	return o(e) ? e : null;
-}
-//#endregion
-export { v as i, T as n, C as r, M as t };
-
-//# sourceMappingURL=GradientEditor-B3a-MsVJ.js.map

package/dist/chunks/GradientEditor-B3a-MsVJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientEditor-B3a-MsVJ.js","names":["s","s","_Fragment","ColorField","ToggleBar","DEFAULT_HATCH","paintGradientTrack","opts","stops","i","samples","t","gradient","baseGradient","layers","activeRange","lowPct","ctx","highPct","h","hatch","stripe","dimColor","dimOverlay","wR","style","GradientEditor_module_default","KINDS","SPACES","MIN_STOPS","GradientEditor","props","value","space","withStops","useCallback","next","thumbs","stop","applyThumbs","setStopColor","index","ordered","a","b","className","kindSwitch","kind","onChange","withGradientKind","Slider","onInput","at","sampleGradientStops","spaceSwitch","hex","GradientHandles_module_default","GradientHandles","renderForKind","toScreen","toLocal","emit","phase","from","to","Fragment","Guide","DragPoint","p","center","edge","screenRadius","local","radius","MIN_RADIUS","gradientGeometry","tip","angle","start","useRef","drag","useHandleDrag","moved","onDrag","point","HANDLE_RADIUS","label","amount","e","KEY_STEP","dx","dy","SceneGradientHandles","frame","useNodeOverlayFrame","scene","containerRef","nodeId","edit","useOngoingAction","slot","gradientInSlot","paintOf","dispatch","paint","fillToBoundsFrame","fillInPoseFrame","data","isGradientFill"],"sources":["../../src/paintGradientTrack.tsx","../../src/components/GradientEditor/GradientEditor.module.css","../../src/components/GradientEditor/GradientEditor.tsx","../../src/components/GradientEditor/GradientHandles.module.css","../../src/components/GradientEditor/GradientHandles.tsx","../../src/components/GradientEditor/SceneGradientHandles.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\n/**\n * Options for {@link paintGradientTrack}.\n *\n * `gradient` maps a normalized position along the track (0 to 1) to a CSS\n * color; `samples` is how many stops the resulting linear-gradient uses.\n * `activeRange`, given in the slider's own value units, keeps that span at\n * full strength and dims + hatches the rest.\n */\nexport type GradientTrackOpts = {\n  gradient: (t: number) => string;\n  samples?: number;\n  activeRange?: [number, number];\n  hatch?: {\n    angleDeg?: number;\n    stripe?: number;\n    gap?: number;\n    dim?: number;\n  };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\n/**\n * Builds a `Slider` `renderTrack` function that paints the track as a\n * sampled color gradient, optionally dimming and hatching the portions\n * outside an active range.\n */\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n  const { gradient, samples = 16, activeRange, hatch } = opts;\n\n  return (ctx: TrackCtx) => {\n    const stops: string[] = [];\n    for (let i = 0; i <= samples; i++) {\n      const t = i / samples;\n      stops.push(`${gradient(t)} ${(t * 100).toFixed(1)}%`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const lowPct = ctx.valueToFraction(activeRange[0]) * 100;\n      const highPct = ctx.valueToFraction(activeRange[1]) * 100;\n      const h = { ...DEFAULT_HATCH, ...hatch };\n      const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-surface) ${h.stripe}px ${h.stripe + h.gap}px)`;\n      const dimColor = `color-mix(in srgb, var(--wzl-surface) ${h.dim}%, transparent)`;\n      const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n      if (lowPct > 0) {\n        layers.push(`${dimOverlay} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n      }\n      if (highPct < 100) {\n        const wR = (100 - highPct).toFixed(2);\n        layers.push(`${dimOverlay} right 0 / ${wR}% 100% no-repeat`);\n        layers.push(`${stripe} right 0 / ${wR}% 100% no-repeat`);\n      }\n    }\n    layers.push(baseGradient);\n\n    const style: CSSProperties = {\n      position: 'absolute',\n      inset: 0,\n      background: layers.join(', '),\n    };\n    return <div style={style} />;\n  };\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-inline-size: 0;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-3);\n}\n\n/* Each stop's opacity slider would otherwise stretch the row to a width no\n * properties panel has; the chip stays legible, the slider yields. */\n.swatch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n}\n","import { useCallback, type ReactElement } from 'react';\nimport {\n  sampleGradientStops,\n  withGradientKind,\n  type ColorSpace,\n  type GradStop,\n  type GradientFill,\n  type GradientKind,\n} from '@weasel-js/core';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\n\nconst KINDS: readonly ToggleBarItem<GradientKind>[] = [\n  { value: 'linear-gradient', label: 'Linear' },\n  { value: 'radial-gradient', label: 'Radial' },\n  { value: 'conic-gradient', label: 'Conic' },\n];\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Fewer than two stops is not a gradient any renderer can ramp between. */\nconst MIN_STOPS = 2;\n\n/**\n * Props for {@link GradientEditor}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface GradientEditorProps {\n  /** The gradient being edited. */\n  value: GradientFill;\n  /**\n   * Live value during a gesture — a stop drag, a color-picker scrub. Wire\n   * it for preview; it fires many times per gesture and must not be\n   * written to history.\n   */\n  onInput?: (next: GradientFill) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: GradientFill) => void;\n  /** Show the linear / radial / conic switch. Default true; turn it off\n   *  when the surrounding UI already owns the kind. */\n  kindSwitch?: boolean;\n  /** Show the sRGB / OKLab / OKLCh switch, which writes `interpolate`.\n   *  Default true. */\n  spaceSwitch?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and stop list.\n *\n * Geometry (`from`/`to`, `center`, `radius`, `angle`) is deliberately not\n * edited here — on a canvas that belongs on the artwork, via\n * `<GradientHandles>`. This component owns the parts with no spatial\n * meaning, so it composes into a properties panel at any width.\n *\n * Stops are addressed by their position in `value.stops`, which is never\n * reordered — dragging one stop past another leaves both indices alone, so\n * a drag can cross a neighbour without the two swapping under the pointer.\n * Rendering sorts a copy.\n */\nexport function GradientEditor(props: GradientEditorProps): ReactElement {\n  const { value, onInput, onChange, kindSwitch = true, spaceSwitch = true, className } = props;\n  const stops = value.stops;\n  const space = value.interpolate ?? 'rgb';\n\n  const withStops = useCallback(\n    (next: GradStop[]): GradientFill => ({ ...value, stops: next }),\n    [value],\n  );\n\n  const thumbs: StopThumb[] = stops.map((stop) => ({ value: stop.offset, color: stop.color }));\n\n  const applyThumbs = (next: StopThumb[]): GradStop[] =>\n    next.map((t) => ({ offset: t.value, color: t.color }));\n\n  const setStopColor = (index: number, color: string): GradStop[] =>\n    stops.map((stop, i) => (i === index ? { ...stop, color } : stop));\n\n  // Sorted view for the swatch row, carrying each stop's real index so a\n  // recolor writes back to the right entry.\n  const ordered = stops\n    .map((stop, index) => ({ stop, index }))\n    .sort((a, b) => a.stop.offset - b.stop.offset);\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<GradientKind>\n          items={KINDS}\n          value={value.fill}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(kind) => kind && onChange(withGradientKind(value, kind))}\n        />\n      )}\n\n      <Slider<StopThumb>\n        min={0}\n        max={1}\n        step={0.005}\n        constraint=\"free\"\n        thumbs={thumbs}\n        ariaLabel=\"Gradient stops\"\n        readoutPlacement=\"none\"\n        onInput={(next) => onInput?.(withStops(applyThumbs(next)))}\n        onChange={(next) => onChange(withStops(applyThumbs(next)))}\n        onAddThumb={(at) => ({ value: at, color: sampleGradientStops(stops, at, space) })}\n        onRemoveThumb={() => stops.length > MIN_STOPS}\n        renderTrack={paintGradientTrack({\n          gradient: (t) => sampleGradientStops(stops, t, space),\n          // The track lerps between samples in sRGB whatever the gradient does,\n          // so a hue arc needs more of them to not read as a straight line.\n          samples: space === 'rgb' ? 32 : 64,\n        })}\n      />\n\n      {spaceSwitch && (\n        <ToggleBar<ColorSpace>\n          items={SPACES}\n          value={space}\n          size=\"sm\"\n          ariaLabel=\"Blend space\"\n          onChange={(next) => next && onChange({ ...value, interpolate: next })}\n        />\n      )}\n\n      <div className={s.swatches}>\n        {ordered.map(({ stop, index }) => (\n          <ColorField\n            key={index}\n            value={stop.color}\n            alpha\n            aria-label={`Stop ${index + 1} at ${Math.round(stop.offset * 100)}%`}\n            className={s.swatch}\n            onInput={(hex) => onInput?.(withStops(setStopColor(index, hex)))}\n            onChange={(hex) => onChange(withStops(setStopColor(index, hex)))}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n","/* The overlay covers the canvas but must not intercept tool input; only the\n * handles opt back into hit-testing. */\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n/* These sit over artwork of unknown color, not over the app's own surface,\n * so they are deliberately not themed: a themed handle disappears against\n * whatever the user painted underneath. White-on-dark reads on anything,\n * which is why every editor draws handles this way. */\n.guide {\n  fill: none;\n  stroke: #ffffff;\n  stroke-opacity: 0.7;\n  stroke-dasharray: 4 4;\n  paint-order: stroke;\n}\n\n.handle {\n  fill: #ffffff;\n  stroke: #222222;\n  stroke-width: 2;\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-accent, #4a9eff);\n  outline-offset: 2px;\n}\n","import { useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport { useHandleDrag, gradientGeometry, type GradientFill } from '@weasel-js/core';\nimport s from './GradientHandles.module.css';\n\n/** Structural, and deliberately not exported — `Plot2D` and `CurveEditor`\n *  each publish their own `Point`, and a third would only be ambiguous at\n *  the package barrel. Consumers pass any `{ x, y }`. */\ninterface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Props for {@link GradientHandles}. `onInput` fires throughout a drag and\n * `onChange` once at its end.\n */\nexport interface GradientHandlesProps {\n  /**\n   * The gradient whose geometry these handles move, in a **resolved,\n   * isotropic** frame — one where `radius` is a length in the same units as\n   * `center.x` and a right angle is a right angle.\n   *\n   * A `units: 'bounds'` gradient is not such a frame: `x` and `y` are\n   * fractions of two different lengths, so a circle there is an ellipse on\n   * screen and polar math silently mixes scales. Resolve it first with\n   * `fillInPoseFrame(fill, box)` and convert edits back with\n   * `fillToBoundsFrame(next, box)`.\n   */\n  value: GradientFill;\n  /**\n   * Gradient space → overlay pixels. For a `units: 'local'` gradient this\n   * is the node's local-to-screen transform; for `'world'`, the view.\n   */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → gradient space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: GradientFill) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: GradientFill) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\n/**\n * Direct-manipulation handles for a gradient's geometry, drawn as an SVG\n * overlay above a canvas: endpoints for linear, center and radius for\n * radial, center and angle arm for conic.\n *\n * Positioning is entirely the consumer's `toScreen` / `toLocal` — this\n * component never sees a view or a scene node, so the same handles serve a\n * node-local gradient, a world-space one, and a plain unzoomed preview.\n *\n * The overlay ignores pointer events except on the handles themselves, so\n * it can sit over live canvas content without swallowing tool input.\n */\nexport function GradientHandles(props: GradientHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n\n  return (\n    <svg\n      className={[s.overlay, className].filter(Boolean).join(' ')}\n      width={width}\n      height={height}\n    >\n      {renderForKind(value, toScreen, toLocal, onInput, onChange)}\n    </svg>\n  );\n}\n\nfunction renderForKind(\n  value: GradientFill,\n  toScreen: (p: Point) => Point,\n  toLocal: (p: Point) => Point,\n  onInput: ((next: GradientFill) => void) | undefined,\n  onChange: (next: GradientFill) => void,\n): ReactNode {\n  const emit = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  if (value.fill === 'linear-gradient') {\n    const from = toScreen(value.from);\n    const to = toScreen(value.to);\n    return (\n      <>\n        <Guide x1={from.x} y1={from.y} x2={to.x} y2={to.y} />\n        <DragPoint\n          at={from}\n          label=\"Gradient start\"\n          onDrag={(p, phase) => emit({ ...value, from: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={to}\n          label=\"Gradient end\"\n          onDrag={(p, phase) => emit({ ...value, to: toLocal(p) }, phase)}\n        />\n      </>\n    );\n  }\n\n  if (value.fill === 'radial-gradient') {\n    const center = toScreen(value.center);\n    // The radius handle rides the +x axis of gradient space, so it stays on\n    // the drawn circle under a rotated or anisotropic transform.\n    const edge = toScreen({ x: value.center.x + value.radius, y: value.center.y });\n    const screenRadius = Math.hypot(edge.x - center.x, edge.y - center.y);\n    return (\n      <>\n        <circle className={s.guide} cx={center.x} cy={center.y} r={screenRadius} />\n        <DragPoint\n          at={center}\n          label=\"Gradient center\"\n          onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={edge}\n          label=\"Gradient radius\"\n          onDrag={(p, phase) => {\n            const local = toLocal(p);\n            const radius = Math.hypot(local.x - value.center.x, local.y - value.center.y);\n            emit({ ...value, radius: Math.max(MIN_RADIUS, radius) }, phase);\n          }}\n        />\n      </>\n    );\n  }\n\n  const center = toScreen(value.center);\n  const { radius } = gradientGeometry(value);\n  const tip = toScreen({\n    x: value.center.x + Math.cos(value.angle) * radius,\n    y: value.center.y + Math.sin(value.angle) * radius,\n  });\n  return (\n    <>\n      <Guide x1={center.x} y1={center.y} x2={tip.x} y2={tip.y} />\n      <DragPoint\n        at={center}\n        label=\"Gradient center\"\n        onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n      />\n      <DragPoint\n        at={tip}\n        label=\"Gradient angle\"\n        onDrag={(p, phase) => {\n          const local = toLocal(p);\n          const angle = Math.atan2(local.y - value.center.y, local.x - value.center.x);\n          emit({ ...value, angle }, phase);\n        }}\n      />\n    </>\n  );\n}\n\n/** A radius of zero divides by zero in the shader's `t`; keep it off the floor. */\nconst MIN_RADIUS = 1;\n\nfunction Guide(props: { x1: number; y1: number; x2: number; y2: number }): ReactElement {\n  return <line className={s.guide} {...props} />;\n}\n\nfunction DragPoint({\n  at,\n  label,\n  onDrag,\n}: {\n  at: Point;\n  label: string;\n  onDrag: (p: Point, phase: 'input' | 'commit') => void;\n}): ReactElement {\n  const start = useRef<Point>(at);\n  const drag = useHandleDrag<SVGCircleElement>({\n    onStart: () => { start.current = at; },\n    onMove: (p) => { onDrag(p, 'input'); },\n    onEnd: ({ point, moved }) => {\n      // A press that never moved is not an edit and must not write anything.\n      if (moved) onDrag(point, 'commit');\n    },\n    // An abandoned gesture is not an edit either — put the live preview back\n    // where it started rather than committing where it was left.\n    onCancel: () => { onDrag(start.current, 'input'); },\n  });\n  const onKeyDown = (e: ReactKeyboardEvent<SVGCircleElement>): void => {\n    const amount = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n    let dx = 0;\n    let dy = 0;\n    if (e.key === 'ArrowLeft') dx = -amount;\n    else if (e.key === 'ArrowRight') dx = amount;\n    else if (e.key === 'ArrowUp') dy = -amount;\n    else if (e.key === 'ArrowDown') dy = amount;\n    else return;\n    e.preventDefault();\n    const next = { x: at.x + dx, y: at.y + dy };\n    onDrag(next, 'input');\n    onDrag(next, 'commit');\n  };\n  return (\n    <circle\n      className={s.handle}\n      cx={at.x}\n      cy={at.y}\n      r={HANDLE_RADIUS}\n      // Not `slider`: the handle carries a 2-D position, not one value, so\n      // it has no `aria-valuenow` to honor the role's contract with.\n      role=\"button\"\n      aria-label={label}\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n      {...drag}\n    />\n  );\n}\n\nconst HANDLE_RADIUS = 7;\n\n/** One arrow-key step, in overlay pixels. */\nconst KEY_STEP = 1;\n","import { type ReactElement, type RefObject } from 'react';\nimport {\n  fillInPoseFrame,\n  fillToBoundsFrame,\n  isGradientFill,\n  useNodeOverlayFrame,\n  useOngoingAction,\n  type FillStyle,\n  type GradientFill,\n  type RectPose,\n  type Scene,\n  type Stroke,\n  type View,\n} from '@weasel-js/core';\nimport { GradientHandles } from './GradientHandles';\n\n/** The paint slots a node carries. Either may hold a gradient, and each has\n *  its own action, so the overlay is told which one it is editing. */\nexport type PaintSlot = 'fill' | 'stroke';\n\n/** What `SceneGradientHandles` reads off a node. Every field is optional, so\n *  any richer app data shape satisfies it. */\nexport interface PaintedNodeData {\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n}\n\nexport interface SceneGradientHandlesProps<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n> {\n  scene: Scene<TData, TLayer, TPose>;\n  /** The element the overlay is positioned in. Must be the canvas's own box,\n   *  or the handles land somewhere other than the paint. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** The node whose paint is being edited — usually the lone selected id. */\n  nodeId: string | null | undefined;\n  /** Which of the node's two paints these handles move. */\n  slot: PaintSlot;\n  /** Current viewport; a thunk is re-read per projection. See\n   *  `useNodeOverlayFrame`. */\n  view?: View | (() => View);\n  className?: string;\n}\n\n/**\n * Scene-aware `GradientHandles`: on-canvas geometry handles for the gradient\n * in one node's `fill` or `stroke`, committed through the `setFill` /\n * `setStroke` actions as a single undo entry per drag.\n *\n * Renders nothing unless the targeted slot holds a gradient. The node stores\n * its gradient in `units: 'bounds'` — fractions of its own box, so the paint\n * survives pan, zoom and resize — which is not a frame polar math can work\n * in; the handles get it resolved onto the box and every edit is normalized\n * back on the way out.\n *\n * `slot` is a prop rather than state the kit keeps: an app that edits fill\n * and stroke separately already knows which one has focus.\n */\nexport function SceneGradientHandles<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n>(props: SceneGradientHandlesProps<TData, TLayer, TPose>): ReactElement | null {\n  const { scene, containerRef, nodeId, slot, view, className } = props;\n  const frame = useNodeOverlayFrame(scene, containerRef, nodeId, { view });\n  const edit = useOngoingAction(slot === 'fill' ? 'setFill' : 'setStroke');\n\n  const gradient = frame ? gradientInSlot(paintOf(scene, nodeId, slot)) : null;\n  if (!frame || !gradient) return null;\n\n  const dispatch = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    const paint = fillToBoundsFrame(next, frame.box);\n    if (phase === 'commit') edit.commit({ paint });\n    else edit.input({ paint });\n  };\n\n  return (\n    <GradientHandles\n      value={fillInPoseFrame(gradient, frame.box) as GradientFill}\n      toScreen={frame.toScreen}\n      toLocal={frame.toLocal}\n      width={frame.width}\n      height={frame.height}\n      className={className}\n      onInput={(next) => dispatch(next, 'input')}\n      onChange={(next) => dispatch(next, 'commit')}\n    />\n  );\n}\n\nfunction paintOf<TData extends PaintedNodeData, TLayer extends string, TPose extends RectPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  nodeId: string | null | undefined,\n  slot: PaintSlot,\n): FillStyle | null | undefined {\n  if (nodeId == null) return undefined;\n  const data = (scene.nodes as ReadonlyMap<string, { data: TData }>).get(nodeId)?.data;\n  if (!data) return undefined;\n  return slot === 'fill' ? data.fill : data.stroke?.paint;\n}\n\nfunction gradientInSlot(paint: FillStyle | null | undefined): GradientFill | null {\n  return isGradientFill(paint) ? paint : null;\n}\n"],"mappings":"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"}