@bettercms-ai/kit 1.0.0 → 2.0.0-next.1

package/{controls → dist/controls}/scale.js

@@ -5,7 +5,7 @@ import { UNIT_NAMES, customPx, customRules, defaultUnit, fieldScale, formatNumbe
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
-//#region src/kit/controls/scale.tsx
+//#region src/controls/scale.tsx
 /**
 * SCALE — one control, two modes (CPO D41), in the designer's CAPSULE: a muted 32px capsule, a soft fill to the value,
 * a 3px bar thumb at the fill's end (always right of the label), the label inside on the left (panels) and the value
@@ -297,7 +297,7 @@ function ScaleSlider({ scale, value, onChange, label, id, disabled, readOnly, in
 				onPointerUp: () => setDragging(false),
 				onPointerCancel: () => setDragging(false),
 				onDoubleClick: () => beginEdit(),
-				className: cn("group/cap relative flex h-8 w-full touch-none select-none items-center overflow-hidden rounded-kit-md bg-kit-muted transition-[background-color,box-shadow]", inert ? "cursor-not-allowed" : "cursor-ew-resize hover:bg-kit-hover", disabled && "opacity-50", kbFocus && !editing && !error && "shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]", editing && !error && "shadow-[inset_0_0_0_1px_var(--kit-line-strong)]", error && "shadow-[inset_0_0_0_1px_var(--kit-danger)]"),
+				className: cn("group/cap relative flex h-8 w-full touch-none select-none items-center overflow-hidden rounded-kit-md bg-kit-muted transition-[background-color,box-shadow]", inert ? "cursor-not-allowed" : "cursor-ew-resize hover:bg-kit-hover", disabled && "opacity-50", kbFocus && !editing && !error && "shadow-[var(--kit-ring-focus,0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring))]", editing && !error && "shadow-[inset_0_0_0_1px_var(--kit-line-strong)]", error && "shadow-[inset_0_0_0_1px_var(--kit-danger)]"),
 				children: [
 					pos >= 0 ? /* @__PURE__ */ jsx("div", {
 						"aria-hidden": true,
@@ -327,7 +327,7 @@ function ScaleSlider({ scale, value, onChange, label, id, disabled, readOnly, in
 							setKbFocus(false);
 							onBlur?.();
 						},
-						className: cn("absolute top-1/2 z-[1] h-4 w-[3px] -translate-x-full -translate-y-1/2 rounded-full bg-kit-fg-3 opacity-0 outline-none focus-visible:!shadow-none focus-visible:!outline-none", !inert && "group-hover/cap:opacity-100", "focus-visible:opacity-100", dragging && "opacity-100", (pos < 0 || editing) && "!opacity-0", !dragging && "motion-safe:transition-[left,opacity] motion-safe:duration-75"),
+						className: cn("absolute top-1/2 z-[1] h-4 w-[3px] -translate-x-full -translate-y-1/2 cursor-[inherit] rounded-full bg-kit-fg-3 opacity-0 outline-none focus-visible:!shadow-none focus-visible:!outline-none", !inert && "group-hover/cap:opacity-100", "focus-visible:opacity-100", dragging && "opacity-100", (pos < 0 || editing) && "!opacity-0", !dragging && "motion-safe:transition-[left,opacity] motion-safe:duration-75"),
 						style: { left: `min(calc(${fillW} - 4px), calc(100% - ${valueW}px - 2px))` }
 					}),
 					inlineLabel ? /* @__PURE__ */ jsxs("span", {
@@ -417,7 +417,7 @@ function ScaleSlider({ scale, value, onChange, label, id, disabled, readOnly, in
 											stepTokens(e.key === "ArrowUp" ? 1 : -1, e);
 										}
 									},
-									className: cn("h-6 min-w-0 bg-transparent p-0 text-right text-kit-xs tabular-nums text-kit-fg outline-none placeholder:text-kit-fg-4 focus:shadow-none focus-visible:shadow-none focus-visible:outline-none selection:bg-kit-selected", isCustom || editing ? "font-normal" : "font-medium", !editing && "pointer-events-none")
+									className: cn("tabular-nums h-6 min-w-0 bg-transparent p-0 text-right text-kit-xs text-kit-fg outline-none placeholder:text-kit-fg-4 focus:shadow-none focus-visible:shadow-none selection:bg-kit-selected", isCustom || editing ? "font-normal" : "font-medium", !editing && "pointer-events-none")
 								}),
 								!tokenOnly || editing ? unitsList.length > 1 ? /* @__PURE__ */ jsx(Tooltip$1, {
 									content: `Units: ${unitsList.join(", ")} — click to switch, or type one (24%)`,
@@ -558,6 +558,6 @@ function ScaleControl({ field, value, onChange, readOnly, id, invalid, onBlur })
 	});
 }
 //#endregion
-export { ScaleControl };
+export { ScaleControl, ScaleSlider };
 
 //# sourceMappingURL=scale.js.map

package/dist/controls/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","names":[],"sources":["../../src/controls/scale.tsx"],"sourcesContent":["/**\n * SCALE — one control, two modes (CPO D41), in the designer's CAPSULE: a muted 32px capsule, a soft fill to the value,\n * a 3px bar thumb at the fill's end (always right of the label), the label inside on the left (panels) and the value\n * inside on the right. Drag anywhere to slide (always snaps to the steps), ←→ / Home / End / PageUp / PageDown.\n *  · Fixed only (default): steps snap; the readout shows the token (\"Large\"), its tooltip the size (88px); scrub it sideways.\n *  · Fixed + custom (`allowCustom`): DIRECT edit, no mode switch — one click on the value puts the caret there with the\n *    value selected; double-click anywhere or just start typing on the focused capsule does the same. \"24\", \"24px\", \"5%\",\n *    \"xl\" apply live; Enter / Tab / blur commit, Esc reverts. The unit is plain suffix text (parsed from what you type;\n *    with several units, clicking it cycles them). While typing, token chips under the capsule pick a step in one click;\n *    ↑↓ step the tokens. A custom value shows a small accent dot and sits proportionally between its tokens.\n * Used by the Block Kit number control (`field.scale`, or the legacy `layout: \"slider\"`) and by the Visuals panels.\n *\n * Port of V2 HEAD 9829bf1 kit/controls/scale.tsx. V2 tokens map to the kit's (bg-muted → bg-kit-muted, --ring-focus →\n * the kit focus ring). V2's native `title=` hints become kit tooltips (the dashboard bans native title tooltips); the\n * custom value keeps ONE tooltip mounted and closes it while typing, so the input never remounts mid-edit.\n * Values are stored as they are (adapters/values.ts scaleToProd): a number, a token step's string, or { value, unit }.\n */\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Tooltip } from \"../ui/overlay\";\nimport { TooltipLayer, TooltipRoot } from \"../ui/tooltip-root\";\nimport { cn } from \"../lib/cn\";\nimport {\n  customPx, customRules, defaultUnit, formatNumber, isCustomValue, isTokenScale, nearestTokenIndex, parseScaleInput, rangeOf, resolveScale, roundTo,\n  scaleHint, UNIT_NAMES, validateCustom, fieldScale,\n} from \"../schema/scale\";\nimport type { ScaleCustomValue, ScaleSchema, ScaleUnit, ScaleValue } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\n\nexport interface ScaleSliderProps {\n  scale: ScaleSchema;\n  value: unknown;\n  onChange: (v: ScaleValue) => void;\n  /** Accessible name (the field title). */\n  label: string;\n  /** id for the primary control: the input when custom is allowed, otherwise the slider thumb. */\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  /** an error from outside (schema validation, a design-system demo); a parse error from typing wins */\n  error?: string;\n  /** \"form\" (Block Kit: label above, tick labels under the track) · \"panel\" (inspector row: inline scrub label). */\n  density?: \"form\" | \"panel\";\n  /** panel: show the label inline on the left (it scrubs). */\n  inlineLabel?: boolean;\n  icon?: React.ReactNode;\n  /** panel: extra classes for the inline label. */\n  labelClassName?: string;\n  /** a unit word that isn't a CSS unit (\"items\", \"s\") — shown after numbers */\n  suffix?: string;\n  /** readout for range values (legacy `format`) */\n  format?: (n: number) => string;\n  onBlur?: () => void;\n  /** Enter committed a typed value (custom fields) or was pressed on a fixed capsule — hosts like the canvas popover close on it */\n  onEnter?: () => void;\n  /** start in edit mode with the value selected (the canvas badge → in-place edit) */\n  autoEdit?: boolean;\n  /** Tab / Shift+Tab while typing: commit, then the host moves to the next / previous size (canvas popover sides) */\n  onTab?: (dir: 1 | -1) => void;\n  className?: string;\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));\n\n/** Horizontal scrubbing (Figma-style) on any element: drag → whole steps; click without moving → onClick. */\nfunction useScrub(onSteps: (delta: number, e: PointerEvent | React.PointerEvent) => void, pxPerStep: number, onClick?: () => void) {\n  const st = React.useRef<{ x: number; moved: boolean; last: number } | null>(null);\n  return {\n    onPointerDown(e: React.PointerEvent) {\n      if (e.button !== 0) return;\n      e.preventDefault();\n      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n      st.current = { x: e.clientX, moved: false, last: 0 };\n    },\n    onPointerMove(e: React.PointerEvent) {\n      const s = st.current;\n      if (!s) return;\n      const dx = e.clientX - s.x;\n      if (!s.moved && Math.abs(dx) < 3) return;\n      s.moved = true;\n      const steps = Math.trunc(dx / pxPerStep);\n      if (steps !== s.last) {\n        onSteps(steps - s.last, e);\n        s.last = steps;\n      }\n    },\n    onPointerUp() {\n      const s = st.current;\n      st.current = null;\n      if (s && !s.moved) onClick?.();\n    },\n    onPointerCancel() {\n      st.current = null;\n    },\n  };\n}\n\nexport function ScaleSlider({\n  scale,\n  value,\n  onChange,\n  label,\n  id,\n  disabled,\n  readOnly,\n  invalid,\n  error: externalError,\n  inlineLabel,\n  icon,\n  labelClassName,\n  suffix,\n  format,\n  onBlur,\n  onEnter,\n  autoEdit,\n  onTab,\n  className,\n}: ScaleSliderProps) {\n  const uid = React.useId();\n  const errId = `scale-err-${uid}`; // must NOT start with the field id: FieldShell strips its own `${id}-…` ids\n  const tokens = isTokenScale(scale) ? scale.steps : null;\n  const range = rangeOf(scale);\n  const custom = customRules(scale);\n  const r = resolveScale(scale, value, suffix);\n  const isCustom = isCustomValue(value);\n  const inert = disabled || readOnly;\n\n  /* ── position on the track (0..1); -1 = can't place (custom % on a px scale) ── */\n  const count = tokens ? tokens.length : 0;\n  const nearest = isCustom ? (tokens ? nearestTokenIndex(scale, value as ScaleCustomValue) : -1) : -1;\n  let pos: number;\n  if (tokens) {\n    const i = isCustom ? nearest : r.index ?? 0;\n    pos = i < 0 ? -1 : count > 1 ? i / (count - 1) : 0;\n  } else {\n    const lo = range!.min;\n    const hi = range!.max;\n    const n = isCustom\n      ? (value as ScaleCustomValue).unit === defaultUnit(scale)\n        ? (value as ScaleCustomValue).value\n        : NaN\n      : typeof value === \"number\"\n        ? value\n        : lo;\n    pos = Number.isNaN(n) ? -1 : (clamp(n, lo, hi) - lo) / (hi - lo || 1);\n  }\n  const step = range?.step ?? 1;\n\n  /* ── value moves ── */\n  const tokenAt = (i: number) => tokens![clamp(i, 0, count - 1)].value;\n  const currentIndex = () => (isCustom ? Math.max(0, nearest) : r.index ?? 0);\n  const numAt = (n: number) => roundTo(clamp(n, range!.min, range!.max), step);\n  const currentNum = () => (typeof value === \"number\" ? value : isCustom && pos >= 0 ? (value as ScaleCustomValue).value : range!.min);\n  const fromFraction = (f: number): ScaleValue => (tokens ? tokenAt(Math.round(f * (count - 1))) : numAt(range!.min + f * (range!.max - range!.min)));\n  const nudgeScale = (d: number): ScaleValue => (tokens ? tokenAt(currentIndex() + d) : numAt(currentNum() + d * step));\n  const backToScale = (): ScaleValue => (tokens ? tokenAt(nearest >= 0 ? nearest : Math.floor((count - 1) / 2)) : numAt(currentNum()));\n  const commit = (v: ScaleValue) => {\n    if (inert) return;\n    if (JSON.stringify(v) !== JSON.stringify(value)) onChange(v);\n  };\n\n  /* ── custom values sit proportionally between the tokens they fall between (px interpolation) ── */\n  let between: [number, number] | null = null;\n  if (tokens && isCustom) {\n    const px = customPx(value as ScaleCustomValue);\n    const pts = tokens.map((t, i) => ({ i, px: t.px })).filter((t): t is { i: number; px: number } => t.px != null);\n    if (px != null && pts.length >= 2) {\n      let f = -1;\n      if (px <= pts[0].px) f = pts[0].i;\n      else if (px >= pts[pts.length - 1].px) f = pts[pts.length - 1].i;\n      else\n        for (let k = 0; k < pts.length - 1; k++) {\n          const a = pts[k];\n          const b = pts[k + 1];\n          if (px >= a.px && px <= b.px) {\n            f = a.i + ((px - a.px) / Math.max(1, b.px - a.px)) * (b.i - a.i);\n            between = [a.i, b.i];\n            break;\n          }\n        }\n      pos = f < 0 ? -1 : count > 1 ? f / (count - 1) : 0;\n    }\n  }\n\n  /* ── geometry: the fill starts AFTER the inline label, so the thumb never sits on the label ── */\n  const trackRef = React.useRef<HTMLDivElement>(null);\n  const thumbRef = React.useRef<HTMLDivElement>(null);\n  const labelRef = React.useRef<HTMLSpanElement>(null);\n  const [labelW, setLabelW] = React.useState(28);\n  const valueRef = React.useRef<HTMLSpanElement>(null);\n  const [valueW, setValueW] = React.useState(40);\n  React.useLayoutEffect(() => {\n    const el = valueRef.current;\n    if (!el) return;\n    const measure = () => setValueW(Math.ceil(el.getBoundingClientRect().width));\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [custom]);\n  React.useLayoutEffect(() => {\n    const el = labelRef.current;\n    if (!el) return setLabelW(28);\n    const measure = () => setLabelW(Math.max(28, Math.ceil(el.getBoundingClientRect().width) + 4));\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [inlineLabel, label]);\n  const [dragging, setDragging] = React.useState(false);\n  /* keyboard-only ring: follows the app's data-input-modality (D29), never after a click */\n  const [kbFocus, setKbFocus] = React.useState(false);\n  const fracFromX = (x: number) => {\n    const rect = trackRef.current!.getBoundingClientRect();\n    return clamp((x - rect.left - labelW) / Math.max(1, rect.width - labelW), 0, 1);\n  };\n\n  /* ── direct edit (custom fields): click the value, double-click anywhere, or just type ── */\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [draft, setDraft] = React.useState<string | null>(null);\n  const [typedError, setError] = React.useState<string | null>(null);\n  const error = typedError ?? externalError ?? null;\n  const [unitHint, setUnitHint] = React.useState<ScaleUnit | undefined>(undefined);\n  const [editing, setEditing] = React.useState(false);\n  const editStart = React.useRef<unknown>(value);\n  const justBegan = React.useRef(false); // the click that opened editing must not drop a caret over the selection\n  const shownUnit: ScaleUnit | undefined = unitHint ?? (isCustom ? (value as ScaleCustomValue).unit : defaultUnit(scale) ?? custom?.units[0]);\n  const fixedText = r.kind === \"number\" && format && typeof value === \"number\" ? format(value) : r.label;\n  const valueText = isCustom ? formatNumber((value as ScaleCustomValue).value) : r.kind === \"token\" ? r.label : r.kind === \"number\" ? formatNumber(value as number) : \"\";\n  const inputText = draft ?? valueText;\n  const tokenOnly = !isCustom && r.kind === \"token\"; // unit suffix is meaningless next to \"Medium\"\n\n  const beginEdit = (seed?: string) => {\n    if (inert || !custom) return;\n    if (!editing) editStart.current = value;\n    setEditing(true);\n    setError(null);\n    const el = inputRef.current;\n    if (!el) return;\n    el.focus({ preventScroll: true }); // synchronous: the next keystrokes land in the input\n    if (seed != null) {\n      setDraft(seed);\n      applyText(seed);\n      requestAnimationFrame(() => inputRef.current?.setSelectionRange(seed.length, seed.length));\n    } else {\n      el.select();\n      justBegan.current = true;\n    }\n  };\n  const endEdit = (how: \"commit\" | \"revert\", focusThumb: boolean) => {\n    if (how === \"revert\") commit(editStart.current as ScaleValue);\n    setDraft(null);\n    setError(null);\n    setUnitHint(undefined);\n    setEditing(false);\n    if (focusThumb) thumbRef.current?.focus({ preventScroll: true });\n  };\n  /** Applies what's typed LIVE when it parses; otherwise shows the reason and keeps the last good value. */\n  function applyText(text: string, showError = false) {\n    if (!text.trim()) return setError(null);\n    const res = parseScaleInput(scale, text, unitHint);\n    if (res.ok) {\n      setError(null);\n      commit(res.value);\n      return true;\n    }\n    // half-typed (\"x\" on the way to \"xl\") stays quiet; the reason shows when you try to commit\n    setError(showError ? res.error : null);\n    return false;\n  }\n  /** ↑↓ while editing: step the tokens (from a custom value, the next token in that direction). */\n  const stepTokens = (dir: 1 | -1, e: { shiftKey: boolean }) => {\n    if (tokens && isCustom) {\n      const lo = between ? between[0] : nearest;\n      const hi = between ? between[1] : nearest;\n      commit(tokenAt(dir > 0 ? (between ? hi : nearest + 1) : between ? lo : nearest - 1));\n    } else commit(nudgeScale(dir * (!tokens && e.shiftKey ? 10 : 1)));\n    setDraft(null);\n    setError(null);\n  };\n  /* keep the field's text in sync with outside changes (drag, undo) while not typing: adjusted during render when the\n     value changes (V2 did this in an effect keyed on `value`) */\n  const valueKey = JSON.stringify(value ?? null);\n  const [seenValue, setSeenValue] = React.useState(valueKey);\n  if (seenValue !== valueKey) {\n    setSeenValue(valueKey);\n    if (draft == null && !externalError && typedError !== null) setError(null);\n  }\n\n  const unitsList = custom?.units ?? [];\n  const cycleUnit = () => {\n    if (inert || unitsList.length < 2) return;\n    const cur = shownUnit && unitsList.includes(shownUnit) ? shownUnit : unitsList[0];\n    const next = unitsList[(unitsList.indexOf(cur) + 1) % unitsList.length];\n    setUnitHint(next);\n    if (isCustom) {\n      const cv: ScaleCustomValue = { value: (value as ScaleCustomValue).value, unit: next };\n      // 720px → % would be out of range: keep the value, select the number and let the next keystrokes be in the new unit\n      if (validateCustom(scale, cv)) beginEdit();\n      else {\n        setError(null);\n        commit(cv);\n      }\n    } else beginEdit();\n  };\n\n  const onTrackKey = (e: React.KeyboardEvent) => {\n    if (inert) return;\n    /* just start typing: a digit, a dot or a letter opens the value with that character */\n    if (custom && !e.metaKey && !e.ctrlKey && !e.altKey && e.key.length === 1 && /[0-9.a-z%]/i.test(e.key)) {\n      e.preventDefault();\n      beginEdit(e.key);\n      return;\n    }\n    if (e.key === \"Enter\" && onEnter) {\n      e.preventDefault();\n      onEnter();\n      return;\n    }\n    const big = tokens ? 2 : Math.max(1, Math.round((range!.max - range!.min) / step / 10));\n    const mult = e.shiftKey && !tokens ? 10 : 1;\n    let next: ScaleValue | null = null;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") next = isCustom ? (tokens ? tokenAt(between ? between[1] : nearest + 1) : backToScale()) : nudgeScale(mult);\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") next = isCustom ? (tokens ? tokenAt(between ? between[0] : nearest - 1) : backToScale()) : nudgeScale(-mult);\n    else if (e.key === \"PageUp\") next = nudgeScale(big);\n    else if (e.key === \"PageDown\") next = nudgeScale(-big);\n    else if (e.key === \"Home\") next = tokens ? tokenAt(0) : range!.min;\n    else if (e.key === \"End\") next = tokens ? tokenAt(count - 1) : range!.max;\n    if (next == null) return;\n    e.preventDefault();\n    commit(next);\n  };\n\n  /* aria-describedby: add/remove our error id without clobbering the ids FieldShell wires (help, ⓘ, issue). */\n  React.useEffect(() => {\n    for (const el of [inputRef.current, thumbRef.current]) {\n      if (!el) continue;\n      const own = (el.getAttribute(\"aria-describedby\") ?? \"\").split(\" \").filter((t) => t && t !== errId);\n      const next = error ? [...own, errId] : own;\n      if (next.length) el.setAttribute(\"aria-describedby\", next.join(\" \"));\n      else el.removeAttribute(\"aria-describedby\");\n    }\n  }, [error, errId, editing]);\n\n  React.useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- autoEdit focuses the input on mount (a DOM sync), once\n    if (autoEdit) beginEdit();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  /* fixed fields: scrub the readout sideways (Figma-style) */\n  const scrubPx = tokens ? 16 : Math.max(3, Math.min(12, 160 / ((range!.max - range!.min) / step)));\n  const readoutScrub = useScrub((delta, e) => !inert && commit(nudgeScale(delta * (!tokens && e.shiftKey ? 10 : 1))), scrubPx);\n\n  const betweenText = isCustom\n    ? tokens && between\n      ? `Custom value · between ${tokens[between[0]].label} and ${tokens[between[1]].label}`\n      : tokens && nearest >= 0\n        ? `Custom value · near ${tokens[nearest].label}`\n        : \"Custom value\"\n    : undefined;\n  const pct = Math.max(0, pos);\n  const fillW = `calc(${labelW}px + (100% - ${labelW}px) * ${pct})`;\n  const tooltip = r.kind === \"token\" && r.css ? scaleHint(r) : betweenText;\n  const presets = custom ? scale.presets ?? [] : [];\n  const showChips = editing && ((!!tokens && count <= 9) || presets.length > 0);\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-scale-mode={custom ? \"custom\" : \"fixed\"}>\n      <div\n        ref={trackRef}\n        onPointerDown={(e) => {\n          if (inert || e.button !== 0) return;\n          if ((e.target as HTMLElement).closest(\"[data-scale-value]\")) return; // the value area edits, it doesn't scrub\n          e.preventDefault();\n          (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n          setDragging(true);\n          setKbFocus(false);\n          if (editing) endEdit(\"commit\", false);\n          commit(fromFraction(fracFromX(e.clientX)));\n          thumbRef.current?.focus({ preventScroll: true });\n        }}\n        onPointerMove={(e) => dragging && commit(fromFraction(fracFromX(e.clientX)))}\n        onPointerUp={() => setDragging(false)}\n        onPointerCancel={() => setDragging(false)}\n        onDoubleClick={() => beginEdit()}\n        className={cn(\n          \"group/cap relative flex h-8 w-full touch-none select-none items-center overflow-hidden rounded-kit-md bg-kit-muted transition-[background-color,box-shadow]\",\n          inert ? \"cursor-not-allowed\" : \"cursor-ew-resize hover:bg-kit-hover\",\n          disabled && \"opacity-50\",\n          /* neutral, keyboard-only ring (never after a click); a quiet 1px inner line while typing; red only for an error */\n          kbFocus && !editing && !error && \"shadow-[var(--kit-ring-focus,0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring))]\",\n          editing && !error && \"shadow-[inset_0_0_0_1px_var(--kit-line-strong)]\",\n          error && \"shadow-[inset_0_0_0_1px_var(--kit-danger)]\",\n        )}\n      >\n        {pos >= 0 ? (\n          <div\n            aria-hidden\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-l-kit-md bg-[color-mix(in_oklab,var(--kit-fg)_9%,transparent)]\",\n              !dragging && \"motion-safe:transition-[width] motion-safe:duration-75\",\n            )}\n            style={{ width: fillW }}\n          />\n        ) : null}\n        {/* thumb = the designer's 3px bar at the fill's end — always right of the label; it is the focusable slider */}\n        <div\n          ref={thumbRef}\n          id={custom ? undefined : id}\n          role=\"slider\"\n          tabIndex={disabled ? -1 : 0}\n          aria-label={label}\n          aria-valuemin={tokens ? 0 : range!.min}\n          aria-valuemax={tokens ? count - 1 : range!.max}\n          aria-valuenow={tokens ? currentIndex() : clamp(currentNum(), range!.min, range!.max)}\n          aria-valuetext={r.spoken}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          aria-invalid={(!custom && invalid) || undefined}\n          aria-orientation=\"horizontal\"\n          onKeyDown={(e) => {\n            setKbFocus(true);\n            onTrackKey(e);\n          }}\n          onFocus={() => setKbFocus(document.documentElement.dataset.inputModality === \"keyboard\")}\n          onBlur={() => {\n            setKbFocus(false);\n            onBlur?.();\n          }}\n          className={cn(\n            // cursor-[inherit]: V2's thumb takes the capsule's ew-resize; the dash cursor contract would give [role=slider] a pointer\n            \"absolute top-1/2 z-[1] h-4 w-[3px] -translate-x-full -translate-y-1/2 cursor-[inherit] rounded-full bg-kit-fg-3 opacity-0 outline-none focus-visible:!shadow-none focus-visible:!outline-none\",\n            !inert && \"group-hover/cap:opacity-100\",\n            \"focus-visible:opacity-100\",\n            dragging && \"opacity-100\",\n            (pos < 0 || editing) && \"!opacity-0\",\n            !dragging && \"motion-safe:transition-[left,opacity] motion-safe:duration-75\",\n          )}\n          style={{ left: `min(calc(${fillW} - 4px), calc(100% - ${valueW}px - 2px))` /* never on the label, never on the value */ }}\n        />\n        {inlineLabel ? (\n          <span ref={labelRef} className={cn(\"pointer-events-none relative z-[2] flex min-w-0 shrink items-center gap-1.5 pl-3 pr-1 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5\", labelClassName)}>\n            {icon}\n            <span className=\"truncate\">{label}</span>\n          </span>\n        ) : null}\n        <span className=\"flex-1\" />\n\n        {/* value — inside the capsule on the right */}\n        {custom ? (\n          /* one tooltip stays mounted and closes while typing, so the input never remounts mid-edit */\n          <StableTip content={tooltip} off={editing}>\n            <span\n              ref={valueRef}\n              data-scale-value\n              onPointerDown={(e) => {\n                if (inert || e.button !== 0) return;\n                e.stopPropagation();\n                if (!editing) {\n                  e.preventDefault();\n                  beginEdit(); // one click: caret in place, the value selected\n                }\n              }}\n              onMouseUp={(e) => {\n                if (!justBegan.current) return;\n                justBegan.current = false;\n                e.preventDefault();\n                inputRef.current?.select();\n              }}\n              onMouseDown={(e) => {\n                // the browser's own mousedown focus would pull focus back off the input we just focused\n                if (!editing || e.target !== inputRef.current) e.preventDefault();\n              }}\n              className={cn(\"relative z-[2] flex h-full shrink-0 items-center gap-1 pl-2 pr-3\", !inert && \"cursor-text\")}\n            >\n              {isCustom && !editing ? <span aria-hidden className=\"size-1.5 shrink-0 rounded-full bg-kit-accent\" /> : null}\n              <input\n                ref={inputRef}\n                id={id}\n                inputMode=\"text\"\n                autoComplete=\"off\"\n                spellCheck={false}\n                aria-label={`${label} value`}\n                aria-description={betweenText}\n                aria-invalid={!!error || invalid || undefined}\n                readOnly={readOnly}\n                disabled={disabled}\n                tabIndex={-1}\n                value={inputText}\n                size={1}\n                style={{ width: `${Math.max(1, inputText.length) + 0.5}ch` }}\n                onFocus={() => {\n                  if (!editing) beginEdit();\n                }}\n                onBlur={() => {\n                  if (!editing) return;\n                  if (draft != null && draft.trim() && !parseScaleInput(scale, draft, unitHint).ok) endEdit(\"revert\", false);\n                  else endEdit(\"commit\", false);\n                  onBlur?.();\n                }}\n                onChange={(e) => {\n                  setDraft(e.target.value);\n                  applyText(e.target.value);\n                }}\n                onWheel={(e) => e.currentTarget.blur()}\n                onKeyDown={(e) => {\n                  e.stopPropagation();\n                  if (e.key === \"Tab\" && onTab) {\n                    e.preventDefault();\n                    if (draft != null && !applyText(draft, true)) return; // stay and fix it\n                    endEdit(\"commit\", false);\n                    onTab(e.shiftKey ? -1 : 1);\n                  } else if (e.key === \"Enter\") {\n                    e.preventDefault();\n                    if (draft != null && !applyText(draft, true)) return; // stay and fix it\n                    endEdit(\"commit\", true);\n                    onEnter?.();\n                  } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    endEdit(\"revert\", true);\n                  } else if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    stepTokens(e.key === \"ArrowUp\" ? 1 : -1, e);\n                  }\n                }}\n                className={cn(\n                  \"tabular-nums h-6 min-w-0 bg-transparent p-0 text-right text-kit-xs text-kit-fg outline-none placeholder:text-kit-fg-4 focus:shadow-none focus-visible:shadow-none selection:bg-kit-selected\",\n                  isCustom || editing ? \"font-normal\" : \"font-medium\",\n                  !editing && \"pointer-events-none\",\n                )}\n              />\n              {!tokenOnly || editing ? (\n                unitsList.length > 1 ? (\n                  <Tooltip content={`Units: ${unitsList.join(\", \")} — click to switch, or type one (24%)`}>\n                    <button\n                      type=\"button\"\n                      tabIndex={-1}\n                      disabled={inert}\n                      onPointerDown={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault(); // keep the caret in the value\n                      }}\n                      onClick={cycleUnit}\n                      aria-label={`Unit: ${shownUnit ? UNIT_NAMES[shownUnit] : \"none\"}. Switch unit`}\n                      className=\"rounded-kit-xs text-kit-xs text-kit-fg-3 transition-colors hover:text-kit-fg\"\n                    >\n                      {shownUnit}\n                    </button>\n                  </Tooltip>\n                ) : (\n                  <span aria-hidden className=\"text-kit-xs text-kit-fg-3\">{shownUnit}</span>\n                )\n              ) : null}\n            </span>\n          </StableTip>\n        ) : (\n          <Tooltip content={tooltip}>\n            <span\n              ref={valueRef}\n              aria-hidden\n              {...(inert ? {} : readoutScrub)}\n              className={cn(\"relative z-[2] whitespace-nowrap pl-2 pr-3 text-kit-xs font-medium tabular-nums text-kit-fg\", !inert && \"cursor-ew-resize\")}\n            >\n              {fixedText}\n            </span>\n          </Tooltip>\n        )}\n      </div>\n\n      {/* quick tokens while typing — one click picks a step and leaves edit mode */}\n      {showChips ? (\n        <div role=\"group\" aria-label={`${label} steps`} className=\"mt-1 flex flex-wrap items-center gap-0.5\">\n          {(tokens && count <= 9 ? tokens : []).map((t, i) => {\n            const on = !isCustom && r.index === i;\n            return (\n              <Tooltip key={t.value} content={t.px != null ? `${t.title ?? t.label} · ${t.px}px` : t.css ? `${t.title ?? t.label} · ${t.css}` : t.title}>\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-pressed={on}\n                onPointerDown={(e) => e.preventDefault() /* keep the caret until the click lands */}\n                onClick={() => {\n                  commit(t.value);\n                  endEdit(\"commit\", true);\n                }}\n                className={cn(\n                  \"h-5 rounded-kit-sm px-1.5 text-kit-2xs transition-colors\",\n                  on ? \"bg-kit-selected font-medium text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\",\n                )}\n              >\n                {shortToken(t.label)}\n              </button>\n              </Tooltip>\n            );\n          })}\n          {/* developer presets: extra quick picks after the steps, behind a hairline */}\n          {presets.length ? (\n            <>\n              {tokens && count <= 9 ? <span aria-hidden className=\"mx-1 h-3 w-px bg-kit-line-strong\" /> : null}\n              {presets.map((p, i) => {\n                const pr = resolveScale(scale, p.value, suffix);\n                const on = JSON.stringify(p.value) === JSON.stringify(value);\n                return (\n                  <Tooltip key={`preset-${i}`} content={p.label ? `${p.label} · ${pr.label}` : pr.label}>\n                  <button\n                    type=\"button\"\n                    tabIndex={-1}\n                    aria-pressed={on}\n                    onPointerDown={(e) => e.preventDefault()}\n                    onClick={() => {\n                      commit(p.value);\n                      endEdit(\"commit\", true);\n                    }}\n                    className={cn(\"h-5 rounded-kit-sm px-1.5 text-kit-2xs tabular-nums transition-colors\", on ? \"bg-kit-selected font-medium text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\")}\n                  >\n                    {pr.label}\n                  </button>\n                  </Tooltip>\n                );\n              })}\n            </>\n          ) : null}\n        </div>\n      ) : null}\n      {error ? (\n        <p id={errId} role=\"status\" aria-live=\"polite\" className=\"mt-1 text-kit-xs text-kit-danger-fg\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A tooltip whose trigger never changes tree shape: `off` (typing) or no content keeps it closed instead of unwrapping\n * the child, which would remount the input inside it and drop the caret.\n */\nfunction StableTip({ content, off, children }: { content?: string; off?: boolean; children: React.ReactElement }) {\n  const closed = off || !content;\n  return (\n    <TooltipRoot open={closed ? false : undefined}>\n      <TooltipPrimitive.Trigger delay={350} render={children} />\n      <TooltipLayer>\n        <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n      </TooltipLayer>\n    </TooltipRoot>\n  );\n}\n\n/** \"Medium\" → \"M\", \"Extra large\"/\"XL\" → \"XL\", \"Full bleed\" stays readable. */\nfunction shortToken(label: string) {\n  const map: Record<string, string> = { None: \"0\", Small: \"S\", Medium: \"M\", Large: \"L\" };\n  return map[label] ?? label;\n}\n\n/** Block Kit adapter: `field.scale` (or legacy `layout: \"slider\"` + numeric). */\nexport function ScaleControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  const scale = fieldScale(field)!;\n  const unit = field.numeric?.unit;\n  const suffix = unit && ![\"px\", \"%\", \"rem\", \"em\", \"vw\", \"vh\"].includes(unit) ? unit : undefined;\n  return (\n    <ScaleSlider\n      scale={scale}\n      value={value ?? field.initialValue}\n      onChange={(v) => onChange(v)}\n      label={field.title}\n      id={id}\n      readOnly={readOnly}\n      invalid={invalid}\n      suffix={suffix}\n      onBlur={onBlur}\n      density=\"form\"\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/controls/slot-register.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lane L3: a component slot (a json field the host marks `componentSlot`) draws the slot control; every other json
+ * field keeps the json editor. It wraps the registered json control, so it imports json-register itself (a bundler may
+ * reorder the barrel's bare imports).
+ */
+import "./json-register";

package/{controls → dist/controls}/slot-register.js

@@ -1,12 +1,9 @@
 import { JsonControl } from "./json.js";
 import { CONTROLS } from "../engine/kit-field.js";
+import "./json-register.js";
 import { ComponentSlotControl } from "./slot.js";
 import { createElement } from "react";
-//#region src/kit/controls/slot-register.ts
-/**
-* Lane L3: a component slot (a json field the host marks `componentSlot`) draws the slot control; every other json
-* field keeps the json editor. Imported after json-register (kit barrel), so it wraps the registered json control.
-*/
+//#region src/controls/slot-register.ts
 var Json = CONTROLS.json ?? JsonControl;
 CONTROLS.json = function JsonOrSlotControl(props) {
 	return createElement(props.field.componentSlot ? ComponentSlotControl : Json, props);

package/dist/controls/slot-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-register.js","names":[],"sources":["../../src/controls/slot-register.ts"],"sourcesContent":["/**\n * Lane L3: a component slot (a json field the host marks `componentSlot`) draws the slot control; every other json\n * field keeps the json editor. It wraps the registered json control, so it imports json-register itself (a bundler may\n * reorder the barrel's bare imports).\n */\nimport \"./json-register\";\nimport { createElement } from \"react\";\nimport type { ControlProps } from \"../types\";\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { JsonControl } from \"./json\";\nimport { ComponentSlotControl } from \"./slot\";\n\nconst Json = CONTROLS.json ?? JsonControl;\nCONTROLS.json = function JsonOrSlotControl(props: ControlProps) {\n  return createElement(props.field.componentSlot ? ComponentSlotControl : Json, props);\n};\n"],"mappings":";;;;;;AAYA,IAAM,OAAO,SAAS,QAAQ;AAC9B,SAAS,OAAO,SAAS,kBAAkB,OAAqB;CAC9D,OAAO,cAAc,MAAM,MAAM,gBAAgB,uBAAuB,MAAM,KAAK;AACrF"}

package/{controls → dist/controls}/slot-services.d.ts

@@ -95,3 +95,28 @@ export interface SlotReading {
 export declare function readSlot(value: unknown): SlotReading;
 /** Write a multiple slot: the items as they are (no `_key` the engine's list helpers add, which prod never stores). */
 export declare function slotList(items: unknown[]): KitSlotItem[];
+export declare function slotItemsFromStored(value: unknown): unknown;
+export declare function slotItemsToStored(value: unknown): unknown;
+type Values = Record<string, unknown>;
+/** A legacy `{ componentId, overrides }` item has no `_key`: its row is keyed by position, stable while the list is. */
+export declare const legacyChildKey: (i: number) => string;
+/**
+ * A stored slot value as SlotField's V2 children `{ _key, _type, _settings?, ...values }` (`_type` the component id),
+ * each child's own values read by `read` (the host converts them per the CHILD's definition):
+ *   a V2 child           → itself, values read
+ *   `{ componentId, … }` → a child keyed `legacy-<i>`, its overrides as the values; `style` / `window` (and any other
+ *                          key) ride in `_legacy` so a write keeps them
+ *   a single object      → a list of one; a detached `{ componentId: "" }` → none
+ *   a component's own child blocks (no instance, no child) → none: the inherited content, shown until a block is added
+ * An entry that is none of these is named through `lose` (a write would drop it).
+ */
+export declare function slotChildrenFromStored(value: unknown, read: (type: string, values: Values, at: string) => Values, lose?: (at: string, reason: string) => void): unknown;
+/**
+ * SlotField's children back as the slot stores them, each child's values written by `write` (per its definition). A
+ * multiple slot stores V2 children `{ _key, _type, _settings?, ...values }`; a child read from a legacy item that
+ * carried placement keys (`_legacy`) is written back as that item, keys and all. A single slot stores
+ * `{ componentId, overrides? }` (none: `{ componentId: "" }`). A child `_variant` is named through `lose`: the backend
+ * refuses one on a prop slot (a component variant is its own component, named in `_type`).
+ */
+export declare function slotChildrenToStored(value: unknown, multiple: boolean, write: (type: string, values: Values, at: string) => Values, lose: (at: string) => void): unknown;
+export {};

package/dist/controls/slot-services.js

@@ -0,0 +1,155 @@
+//#region src/controls/slot-services.ts
+/** SLOT_MAX_ITEMS / SLOT_ITEMS_CAP (@bettercms-ai/types): the default and the hard cap of a multiple slot. */
+var SLOT_MAX_ITEMS = 12;
+var SLOT_ITEMS_CAP = 50;
+/** The renderers' nesting cap: past it a tree renders as nothing, so the editor refuses to nest further. */
+var SLOT_DEPTH_MAX = 10;
+var isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isItem = (v) => isObj(v) && typeof v.componentId === "string" && v.componentId !== "";
+/**
+* A stored slot value as its instances (`slotItems`, the one reading of a slot value): a list is its items, a single
+* `{ componentId }` is a list of one, a detached `{ componentId: "" }` is none. A non-empty list with no instance and no
+* V2 child is the component's own child blocks (the inherited value), not something to drop.
+*/
+function readSlot(value) {
+	if (Array.isArray(value)) {
+		const items = value.filter(isItem);
+		const rest = value.filter((v) => !isItem(v));
+		const v2 = rest.filter((v) => isObj(v) && v.componentId === void 0 && ("_type" in v || "_key" in v));
+		const inherited = items.length === 0 && v2.length === 0 && rest.length > 0;
+		return {
+			items,
+			inherited,
+			unreadable: inherited ? 0 : rest.length
+		};
+	}
+	return {
+		items: isItem(value) ? [value] : [],
+		inherited: false,
+		unreadable: 0
+	};
+}
+/** Write a multiple slot: the items as they are (no `_key` the engine's list helpers add, which prod never stores). */
+function slotList(items) {
+	return items.filter(isItem).map((it) => {
+		if (!("_key" in it)) return it;
+		const { _key, ...rest } = it;
+		return rest;
+	});
+}
+/**
+* A stored V2 slot child (`{ _key, _type, _settings?, ...props }`, `_type` the component id: BE slot-values.ts isV2Child)
+* as the item this control edits, and back. The child's props are its overrides; its `_key` rides along as `_v2Key` (the
+* engine's own `_key` is stripped on write, slotList) and its `_settings` as they are, so an edit writes the child in
+* the shape it was read. Items stored as `{ componentId, overrides? }` (and a component's own child blocks) pass as
+* they are.
+*/
+var isV2Child = (v) => isObj(v) && v.componentId === void 0 && ("_type" in v || "_key" in v);
+function slotItemsFromStored(value) {
+	if (!Array.isArray(value)) return value;
+	return value.map((child) => {
+		if (!isV2Child(child)) return child;
+		const { _key, _type, _settings, ...overrides } = child;
+		return {
+			componentId: typeof _type === "string" ? _type : "",
+			overrides,
+			...typeof _key === "string" ? { _v2Key: _key } : {},
+			..._settings !== void 0 ? { _settings } : {}
+		};
+	});
+}
+function slotItemsToStored(value) {
+	if (!Array.isArray(value)) return value;
+	return value.map((item) => {
+		if (!isObj(item) || typeof item._v2Key !== "string") return item;
+		const { _v2Key, componentId, overrides, _settings, ...rest } = item;
+		return {
+			_key: _v2Key,
+			_type: componentId,
+			..._settings !== void 0 ? { _settings } : {},
+			...rest,
+			...isObj(overrides) ? overrides : {}
+		};
+	});
+}
+/** The child's reserved keys (BE slot-child.ts SLOT_CHILD_KEYS) plus `_legacy`, where a legacy item's placement keys ride. */
+var RESERVED = /* @__PURE__ */ new Set([
+	"_key",
+	"_type",
+	"_variant",
+	"_settings",
+	"_legacy"
+]);
+var ownValues = (child) => Object.fromEntries(Object.entries(child).filter(([k]) => !RESERVED.has(k)));
+/** A legacy `{ componentId, overrides }` item has no `_key`: its row is keyed by position, stable while the list is. */
+var legacyChildKey = (i) => `legacy-${i}`;
+/**
+* A stored slot value as SlotField's V2 children `{ _key, _type, _settings?, ...values }` (`_type` the component id),
+* each child's own values read by `read` (the host converts them per the CHILD's definition):
+*   a V2 child           → itself, values read
+*   `{ componentId, … }` → a child keyed `legacy-<i>`, its overrides as the values; `style` / `window` (and any other
+*                          key) ride in `_legacy` so a write keeps them
+*   a single object      → a list of one; a detached `{ componentId: "" }` → none
+*   a component's own child blocks (no instance, no child) → none: the inherited content, shown until a block is added
+* An entry that is none of these is named through `lose` (a write would drop it).
+*/
+function slotChildrenFromStored(value, read, lose) {
+	const one = (v, i) => {
+		if (isItem(v)) {
+			const { componentId, overrides, ...extras } = v;
+			return [{
+				_key: legacyChildKey(i),
+				_type: componentId,
+				...Object.keys(extras).length ? { _legacy: extras } : {},
+				...read(componentId, isObj(overrides) ? overrides : {}, `${i}`)
+			}];
+		}
+		if (isV2Child(v)) {
+			const type = typeof v._type === "string" ? v._type : "";
+			return [{
+				...Object.fromEntries(Object.entries(v).filter(([k]) => RESERVED.has(k) && k !== "_legacy")),
+				...read(type, ownValues(v), `${i}`)
+			}];
+		}
+		lose?.(`${i}`, "This slot entry is neither a block instance nor a slot child, so a write would drop it.");
+		return [];
+	};
+	if (!Array.isArray(value)) {
+		if (isObj(value) && value.componentId === "") return [];
+		return isItem(value) || isV2Child(value) ? one(value, 0) : value;
+	}
+	if (value.length && !value.some((v) => isItem(v) || isV2Child(v))) return [];
+	return value.flatMap(one);
+}
+/**
+* SlotField's children back as the slot stores them, each child's values written by `write` (per its definition). A
+* multiple slot stores V2 children `{ _key, _type, _settings?, ...values }`; a child read from a legacy item that
+* carried placement keys (`_legacy`) is written back as that item, keys and all. A single slot stores
+* `{ componentId, overrides? }` (none: `{ componentId: "" }`). A child `_variant` is named through `lose`: the backend
+* refuses one on a prop slot (a component variant is its own component, named in `_type`).
+*/
+function slotChildrenToStored(value, multiple, write, lose) {
+	if (!Array.isArray(value)) return value;
+	const out = value.map((c, i) => {
+		if (!isObj(c)) return c;
+		const type = typeof c._type === "string" ? c._type : "";
+		if (c._variant !== void 0) lose(`${i}/_variant`);
+		const own = write(type, ownValues(c), `${i}`);
+		if (!multiple || isObj(c._legacy)) return {
+			componentId: type,
+			...Object.keys(own).length ? { overrides: own } : {},
+			...isObj(c._legacy) ? c._legacy : {}
+		};
+		return {
+			_key: c._key,
+			_type: type,
+			...c._settings !== void 0 ? { _settings: c._settings } : {},
+			...own
+		};
+	});
+	return multiple ? out : out[0] ?? { componentId: "" };
+}
+//#endregion
+export { SLOT_DEPTH_MAX, SLOT_ITEMS_CAP, SLOT_MAX_ITEMS, legacyChildKey, readSlot, slotChildrenFromStored, slotChildrenToStored, slotItemsFromStored, slotItemsToStored, slotList };
+
+//# sourceMappingURL=slot-services.js.map

package/dist/controls/slot-services.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-services.js","names":[],"sources":["../../src/controls/slot-services.ts"],"sourcesContent":["/**\n * Component slots (lane L3): the services the slot control reads and the reading of a stored slot value, declared as\n * augmentations so context.tsx and schema/types.ts stay untouched by this lane.\n *\n * A prod `slot` prop holds component instances, not V2 blocks:\n *   single   `{ componentId, overrides? }` (a detached slot is `{ componentId: \"\" }`)\n *   multiple `[{ componentId, overrides?, style?, window? }, …]`; a single object reads as a list of one\n * The host marks such a field with `componentSlot` (the dock reads it off the prop's config) and the slot control draws\n * it; the value is written back in exactly that shape, each item spread with the keys this control does not show.\n *\n *   useSlotCatalog → a React HOOK: the components this slot may take, with the SERVER's insertability verdicts\n *                    (GET /components/section-catalog) already turned into words, and the name of any component id\n *   SlotChild      → the host's editor for one child's own props (its overrides), drawn under the child's row\n */\nimport type { ComponentType } from \"react\";\n\n/** One component the slot picker lists. `insertable: false` always carries `reason`, a sentence the picker shows. */\nexport interface KitSlotEntry {\n  id: string;\n  title: string;\n  /** the section family (\"Hero\"), shown as the picker's group */\n  category?: string | null;\n  description?: string | null;\n  icon?: string;\n  insertable: boolean;\n  reason?: string;\n}\n\nexport interface KitSlotCatalog {\n  entries: KitSlotEntry[];\n  loading?: boolean;\n  /** a whole sentence naming what failed (\"Sections couldn't be loaded: …\") */\n  error?: string;\n  /** a sentence under the picker's list naming what can never fill a slot and why (built-in sections) */\n  note?: string;\n  /** a component id's name; `missing` when the project has no such component (deleted, or another project's) */\n  nameOf: (componentId: string) => { title: string; missing?: boolean } | undefined;\n}\n\nexport interface KitSlotChildProps {\n  componentId: string;\n  title: string;\n  overrides: Record<string, unknown>;\n  onChange: (next: Record<string, unknown>) => void;\n  readOnly?: boolean;\n  /** how many slots deep this child sits (1 for a top-level slot's child) */\n  depth: number;\n}\n\n/** The slot's own rules, mirrored from the prop's config so a save is not refused (BE slot-values.ts). */\nexport interface KitComponentSlot {\n  multiple: boolean;\n  /** config.componentIds: the only components it takes (empty or absent: any) */\n  componentIds?: string[];\n  /** config.minItems (multiple only) */\n  min: number;\n  /** config.maxItems, defaulted to 12 and capped at 50 (multiple only; a single slot holds one) */\n  max: number;\n}\n\ndeclare module \"../context\" {\n  interface KitServices {\n    useSlotCatalog?: (req: { componentIds?: string[] }) => KitSlotCatalog;\n    SlotChild?: ComponentType<KitSlotChildProps>;\n  }\n}\n\ndeclare module \"../schema/types\" {\n  interface FieldSchema {\n    /** a component slot (prod `slot` prop): drawn by the slot control instead of the json editor */\n    componentSlot?: KitComponentSlot;\n  }\n}\n\n/** SLOT_MAX_ITEMS / SLOT_ITEMS_CAP (@bettercms-ai/types): the default and the hard cap of a multiple slot. */\nexport const SLOT_MAX_ITEMS = 12;\nexport const SLOT_ITEMS_CAP = 50;\n/** The renderers' nesting cap: past it a tree renders as nothing, so the editor refuses to nest further. */\nexport const SLOT_DEPTH_MAX = 10;\n\nexport interface KitSlotItem {\n  componentId: string;\n  overrides?: Record<string, unknown>;\n  [key: string]: unknown;\n}\n\nexport interface SlotReading {\n  items: KitSlotItem[];\n  /** the value is the component's own content (its child blocks), shown until an item is added */\n  inherited: boolean;\n  /** entries this control can't read and would drop on a write (V2 block children, malformed rows) */\n  unreadable: number;\n}\n\nconst isObj = (v: unknown): v is Record<string, unknown> => !!v && typeof v === \"object\" && !Array.isArray(v);\nconst isItem = (v: unknown): v is KitSlotItem => isObj(v) && typeof v.componentId === \"string\" && v.componentId !== \"\";\n\n/**\n * A stored slot value as its instances (`slotItems`, the one reading of a slot value): a list is its items, a single\n * `{ componentId }` is a list of one, a detached `{ componentId: \"\" }` is none. A non-empty list with no instance and no\n * V2 child is the component's own child blocks (the inherited value), not something to drop.\n */\nexport function readSlot(value: unknown): SlotReading {\n  if (Array.isArray(value)) {\n    const items = value.filter(isItem);\n    const rest = value.filter((v) => !isItem(v));\n    const v2 = rest.filter((v) => isObj(v) && v.componentId === undefined && (\"_type\" in v || \"_key\" in v));\n    const inherited = items.length === 0 && v2.length === 0 && rest.length > 0;\n    return { items, inherited, unreadable: inherited ? 0 : rest.length };\n  }\n  return { items: isItem(value) ? [value] : [], inherited: false, unreadable: 0 };\n}\n\n/** Write a multiple slot: the items as they are (no `_key` the engine's list helpers add, which prod never stores). */\nexport function slotList(items: unknown[]): KitSlotItem[] {\n  return items.filter(isItem).map((it) => {\n    if (!(\"_key\" in it)) return it;\n    const { _key, ...rest } = it;\n    void _key;\n    return rest as KitSlotItem;\n  });\n}\n\n/**\n * A stored V2 slot child (`{ _key, _type, _settings?, ...props }`, `_type` the component id: BE slot-values.ts isV2Child)\n * as the item this control edits, and back. The child's props are its overrides; its `_key` rides along as `_v2Key` (the\n * engine's own `_key` is stripped on write, slotList) and its `_settings` as they are, so an edit writes the child in\n * the shape it was read. Items stored as `{ componentId, overrides? }` (and a component's own child blocks) pass as\n * they are.\n */\nconst isV2Child = (v: unknown): v is Record<string, unknown> => isObj(v) && v.componentId === undefined && (\"_type\" in v || \"_key\" in v);\n\nexport function slotItemsFromStored(value: unknown): unknown {\n  if (!Array.isArray(value)) return value;\n  return value.map((child) => {\n    if (!isV2Child(child)) return child;\n    const { _key, _type, _settings, ...overrides } = child;\n    return {\n      componentId: typeof _type === \"string\" ? _type : \"\",\n      overrides,\n      ...(typeof _key === \"string\" ? { _v2Key: _key } : {}),\n      ...(_settings !== undefined ? { _settings } : {}),\n    };\n  });\n}\n\nexport function slotItemsToStored(value: unknown): unknown {\n  if (!Array.isArray(value)) return value;\n  return value.map((item) => {\n    if (!isObj(item) || typeof item._v2Key !== \"string\") return item;\n    const { _v2Key, componentId, overrides, _settings, ...rest } = item;\n    return { _key: _v2Key, _type: componentId, ...(_settings !== undefined ? { _settings } : {}), ...rest, ...(isObj(overrides) ? overrides : {}) };\n  });\n}\n\n/* ── V2 slot children (SlotField) ───────────────────────────────────────── */\ntype Values = Record<string, unknown>;\n/** The child's reserved keys (BE slot-child.ts SLOT_CHILD_KEYS) plus `_legacy`, where a legacy item's placement keys ride. */\nconst RESERVED = new Set([\"_key\", \"_type\", \"_variant\", \"_settings\", \"_legacy\"]);\nconst ownValues = (child: Values): Values => Object.fromEntries(Object.entries(child).filter(([k]) => !RESERVED.has(k)));\n/** A legacy `{ componentId, overrides }` item has no `_key`: its row is keyed by position, stable while the list is. */\nexport const legacyChildKey = (i: number) => `legacy-${i}`;\n\n/**\n * A stored slot value as SlotField's V2 children `{ _key, _type, _settings?, ...values }` (`_type` the component id),\n * each child's own values read by `read` (the host converts them per the CHILD's definition):\n *   a V2 child           → itself, values read\n *   `{ componentId, … }` → a child keyed `legacy-<i>`, its overrides as the values; `style` / `window` (and any other\n *                          key) ride in `_legacy` so a write keeps them\n *   a single object      → a list of one; a detached `{ componentId: \"\" }` → none\n *   a component's own child blocks (no instance, no child) → none: the inherited content, shown until a block is added\n * An entry that is none of these is named through `lose` (a write would drop it).\n */\nexport function slotChildrenFromStored(value: unknown, read: (type: string, values: Values, at: string) => Values, lose?: (at: string, reason: string) => void): unknown {\n  const one = (v: unknown, i: number): Values[] => {\n    if (isItem(v)) {\n      const { componentId, overrides, ...extras } = v;\n      return [{ _key: legacyChildKey(i), _type: componentId, ...(Object.keys(extras).length ? { _legacy: extras } : {}), ...read(componentId, isObj(overrides) ? overrides : {}, `${i}`) }];\n    }\n    if (isV2Child(v)) {\n      const type = typeof v._type === \"string\" ? v._type : \"\";\n      const kept = Object.fromEntries(Object.entries(v).filter(([k]) => RESERVED.has(k) && k !== \"_legacy\"));\n      return [{ ...kept, ...read(type, ownValues(v), `${i}`) }];\n    }\n    lose?.(`${i}`, \"This slot entry is neither a block instance nor a slot child, so a write would drop it.\");\n    return [];\n  };\n  if (!Array.isArray(value)) {\n    if (isObj(value) && value.componentId === \"\") return [];\n    return isItem(value) || isV2Child(value) ? one(value, 0) : value;\n  }\n  if (value.length && !value.some((v) => isItem(v) || isV2Child(v))) return [];\n  return value.flatMap(one);\n}\n\n/**\n * SlotField's children back as the slot stores them, each child's values written by `write` (per its definition). A\n * multiple slot stores V2 children `{ _key, _type, _settings?, ...values }`; a child read from a legacy item that\n * carried placement keys (`_legacy`) is written back as that item, keys and all. A single slot stores\n * `{ componentId, overrides? }` (none: `{ componentId: \"\" }`). A child `_variant` is named through `lose`: the backend\n * refuses one on a prop slot (a component variant is its own component, named in `_type`).\n */\nexport function slotChildrenToStored(value: unknown, multiple: boolean, write: (type: string, values: Values, at: string) => Values, lose: (at: string) => void): unknown {\n  if (!Array.isArray(value)) return value;\n  const out = value.map((c, i) => {\n    if (!isObj(c)) return c;\n    const type = typeof c._type === \"string\" ? c._type : \"\";\n    if (c._variant !== undefined) lose(`${i}/_variant`);\n    const own = write(type, ownValues(c), `${i}`);\n    if (!multiple || isObj(c._legacy)) return { componentId: type, ...(Object.keys(own).length ? { overrides: own } : {}), ...(isObj(c._legacy) ? c._legacy : {}) };\n    return { _key: c._key, _type: type, ...(c._settings !== undefined ? { _settings: c._settings } : {}), ...own };\n  });\n  return multiple ? out : (out[0] ?? { componentId: \"\" });\n}\n"],"mappings":"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"}

package/{controls → dist/controls}/slot.js

@@ -1,14 +1,14 @@
+import { readSlot, slotList } from "./slot-services.js";
 import { cn } from "../lib/cn.js";
-import { KitIcon } from "../lib/icons.js";
 import { useKitServices } from "../context.js";
+import { KitIcon } from "../lib/icons.js";
 import { Button } from "../ui/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
 import { RowList, useListOps } from "../engine/array.js";
-import { readSlot, slotList } from "./slot-services.js";
 import * as React from "react";
-import { IconPlus, IconSearch } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/slot.tsx
+import { IconPlus, IconSearch } from "@tabler/icons-react";
+//#region src/controls/slot.tsx
 /**
 * COMPONENT SLOT — a prop that holds component instances (prod `slot`), on the engine's slot surface (engine/slot.tsx,
 * V2 HEAD 9829bf1): the block rows (icon tile, name, ⋯ menu, drag to reorder) and the compact searchable picker.
@@ -24,7 +24,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 /** How many slots deep the control sits: the host's SlotChild editor sits inside a provider one level down. */
 var SlotDepthContext = React.createContext(0);
-var count = (n) => `${n} component${n === 1 ? "" : "s"}`;
+var count = (n) => `${n} block${n === 1 ? "" : "s"}`;
 var NO_CATALOG = {
 	entries: [],
 	nameOf: () => void 0
@@ -46,7 +46,7 @@ function ComponentSlotControl({ field, value, onChange, readOnly, id, path }) {
 		max: 1
 	};
 	const depth = React.useContext(SlotDepthContext);
-	const { useSlotCatalog, SlotChild } = useKitServices();
+	const { useSlotCatalog, SlotChild, toast } = useKitServices();
 	const catalog = useSlotCatalog ? useSlotCatalog({ componentIds: slot.componentIds }) : null;
 	const read = readSlot(value);
 	const items = read.items;
@@ -71,7 +71,7 @@ function ComponentSlotControl({ field, value, onChange, readOnly, id, path }) {
 	const ops = useListOps(opsField, path, items, write);
 	if (depth >= 10) return /* @__PURE__ */ jsx(SlotNote, {
 		id,
-		children: "Nested component limit reached. A slot this deep would render as nothing, so it can’t hold more components here."
+		children: "Nested block limit reached. A slot this deep would render as nothing, so it can’t hold more blocks here."
 	});
 	const pick = (componentId) => {
 		if (!slot.multiple) {
@@ -104,20 +104,38 @@ function ComponentSlotControl({ field, value, onChange, readOnly, id, path }) {
 			item: it,
 			path: [...path, i],
 			preview: {
-				title: name.missing ? "Missing component" : name.title,
+				title: name.missing ? "Missing block" : name.title,
 				icon: entry?.icon ?? "box",
 				empty: false
 			},
-			extra: name.missing ? "Deleted, or not in this project. Replace or remove it." : entry?.category ?? `Component ${i + 1} of ${items.length}`
+			extra: name.missing ? "Deleted, or not in this project. Replace or remove it." : entry?.category ?? `Block ${i + 1} of ${items.length}`
 		};
 	});
-	const picker = catalog ? /* @__PURE__ */ jsx(SlotPicker, {
+	const only = slot.componentIds?.length === 1 ? catalog?.entries.find((e) => e.id === slot.componentIds[0]) : void 0;
+	const quickAdd = only?.insertable && (slot.multiple || items.length === 0) ? only : void 0;
+	const addOnly = (entry) => {
+		const before = value;
+		pick(entry.id);
+		toast?.(`${entry.title} added to ${field.title}`, { action: {
+			label: "Undo",
+			onClick: () => onChange(before)
+		} });
+	};
+	const picker = quickAdd ? /* @__PURE__ */ jsxs(Button, {
+		size: "lg",
+		variant: "ghost",
+		className: "text-kit-fg-2",
+		leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+		disabled: locked || slot.multiple && items.length >= max,
+		onClick: () => addOnly(quickAdd),
+		children: ["Add ", quickAdd.title]
+	}) : catalog ? /* @__PURE__ */ jsx(SlotPicker, {
 		entries: catalog.entries,
 		loading: catalog.loading,
 		error: catalog.error,
 		note: catalog.note,
 		current: slot.multiple ? void 0 : items[0]?.componentId,
-		label: slot.multiple ? "Add component" : items.length ? "Replace component" : "Choose a component",
+		label: slot.multiple ? "Add block" : items.length ? "Replace block" : "Choose a block",
 		disabled: locked || slot.multiple && items.length >= max,
 		onPick: pick
 	}) : null;
@@ -128,13 +146,13 @@ function ComponentSlotControl({ field, value, onChange, readOnly, id, path }) {
 			read.unreadable > 0 ? /* @__PURE__ */ jsxs(SlotNote, {
 				tone: "warning",
 				children: [
-					read.unreadable === 1 ? "One child here isn't a component instance" : `${read.unreadable} children here aren't component instances`,
+					read.unreadable === 1 ? "One child here isn't a block instance" : `${read.unreadable} children here aren't block instances`,
 					" (blocks written by another editor). This editor would drop ",
 					read.unreadable === 1 ? "it" : "them",
 					" on save, so the slot is shown read-only and its value is kept."
 				]
 			}) : null,
-			read.inherited && items.length === 0 ? /* @__PURE__ */ jsx(SlotNote, { children: "Shows the component’s own content until a component is added here." }) : null,
+			read.inherited && items.length === 0 ? /* @__PURE__ */ jsx(SlotNote, { children: "Shows the block’s own content until a block is added here." }) : null,
 			/* @__PURE__ */ jsx("div", {
 				id,
 				tabIndex: -1,
@@ -177,9 +195,9 @@ function ComponentSlotControl({ field, value, onChange, readOnly, id, path }) {
 							className: "size-4"
 						})
 					}),
-					emptyLabel: slot.multiple ? "No components yet. Add one to start composing." : "No component yet. Choose one to fill this slot.",
+					emptyLabel: slot.multiple ? "No blocks yet. Add one to start composing." : "No block yet. Choose one to fill this slot.",
 					addButton: picker ?? /* @__PURE__ */ jsxs(SlotNote, { children: [
-						"No component library is connected to this editor, so ",
+						"No block library is connected to this editor, so ",
 						field.title,
 						" can’t be changed here."
 					] })
@@ -202,8 +220,8 @@ function SlotPicker({ entries, loading, error, note, current, label, disabled, o
 	const [active, setActive] = React.useState(0);
 	const listId = React.useId();
 	const list = entries.filter((b) => !q || `${b.title} ${b.category ?? ""} ${b.description ?? ""}`.toLowerCase().includes(q.toLowerCase()));
-	const cats = Array.from(new Set(list.map((b) => b.category || "Components")));
-	const flat = cats.flatMap((c) => list.filter((b) => (b.category || "Components") === c));
+	const cats = Array.from(new Set(list.map((b) => b.category || "Blocks")));
+	const flat = cats.flatMap((c) => list.filter((b) => (b.category || "Blocks") === c));
 	const choose = (b) => {
 		if (!b || !b.insertable) return;
 		onPick(b.id);
@@ -256,8 +274,8 @@ function SlotPicker({ entries, loading, error, note, current, label, disabled, o
 								choose(flat[active]);
 							}
 						},
-						placeholder: "Search components",
-						"aria-label": "Search components",
+						placeholder: "Search blocks",
+						"aria-label": "Search blocks",
 						role: "combobox",
 						"aria-expanded": true,
 						"aria-controls": listId,
@@ -269,17 +287,17 @@ function SlotPicker({ entries, loading, error, note, current, label, disabled, o
 					id: listId,
 					className: "max-h-80 overflow-y-auto p-1",
 					role: "listbox",
-					"aria-label": "Components",
+					"aria-label": "Blocks",
 					"aria-busy": loading || void 0,
 					children: [
 						loading && entries.length === 0 ? /* @__PURE__ */ jsx("p", {
 							role: "status",
 							className: "px-3 py-6 text-center text-kit-sm text-kit-fg-3",
-							children: "Loading components…"
+							children: "Loading blocks…"
 						}) : null,
 						!loading && !error && flat.length === 0 ? /* @__PURE__ */ jsx("p", {
 							className: "px-3 py-6 text-center text-kit-sm text-kit-fg-3",
-							children: entries.length ? "No components match" : "This project has no components that can go here yet."
+							children: entries.length ? "No blocks match" : "This project has no blocks that can go here yet."
 						}) : null,
 						error ? /* @__PURE__ */ jsx("p", {
 							role: "alert",
@@ -294,7 +312,7 @@ function SlotPicker({ entries, loading, error, note, current, label, disabled, o
 								"aria-hidden": true,
 								className: "px-2 pb-1 pt-1.5 text-kit-2xs font-medium text-kit-fg-3",
 								children: c
-							}), list.filter((b) => (b.category || "Components") === c).map((b) => {
+							}), list.filter((b) => (b.category || "Blocks") === c).map((b) => {
 								const i = flat.indexOf(b);
 								return /* @__PURE__ */ jsxs("div", {
 									id: optionId(i),
@@ -343,6 +361,6 @@ function SlotPicker({ entries, loading, error, note, current, label, disabled, o
 	});
 }
 //#endregion
-export { ComponentSlotControl };
+export { ComponentSlotControl, SlotDepthContext, SlotPicker };
 
 //# sourceMappingURL=slot.js.map