@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/chunk-3WYREXW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/anchored-surface/anchored-surface.tsx"],"names":[],"mappings":"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","file":"chunk-3WYREXW4.js","sourcesContent":["import type { OverlayContent, OverlayHandle } from 'kerfjs/overlay';\nimport { popover, type PopoverOptions } from 'kerfjs/overlay';\n\n/** App-facing options for a non-modal, arbitrary-content help surface. */\nexport interface AnchoredSurfaceOptions extends Pick<\n  PopoverOptions,\n  | 'placement'\n  | 'align'\n  | 'gap'\n  | 'dismiss'\n  | 'initialFocus'\n  | 'onDismiss'\n  | 'outsideIgnore'\n  | 'container'\n> {\n  /** Accessible name for the non-modal dialog. */\n  label: string;\n  /**\n   * Gutter in px kept between the surface and the viewport edges when it is\n   * clamped horizontally and fitted vertically. Default `8`, the same gutter as\n   * the surface's maximum size.\n   */\n  viewportMargin?: number;\n  /**\n   * Where to append the surface. Default: inside the anchor's open modal\n   * dialog — a native `<dialog>`'s host slot, or a slot kerf creates in a\n   * `wa-dialog` / `wa-drawer` — so the surface stays interactive there;\n   * otherwise `document.body`. Pass an element only for a modal context kerf\n   * cannot resolve; an element inside an open modal closes the surface with it.\n   */\n  container?: Element;\n  /**\n   * Surface tone. `'default'` follows the anchor's color scheme. `'dark'` is\n   * the loud, inverse tone of a `ToolbarControlGroup` / `ToolbarText`\n   * `tone=\"dark\"`, for a popup anchored to dark media chrome (a volume popup\n   * over a video preview): dark beside a light page and light beside a dark\n   * one, so the popup matches the control group that opened it. The surface\n   * takes the opposite of the anchor's color scheme, so it and every Kerf UI\n   * or Web Awesome component inside it resolve the same semantic\n   * `light-dark()` tokens to the other side: no new colors, no child\n   * overrides. While open it follows a live switch of that scheme (the OS\n   * preference, or an app theme class or attribute on an ancestor). Default\n   * `'default'`.\n   */\n  tone?: AnchoredSurfaceTone;\n}\n\n/** {@link AnchoredSurfaceOptions.tone}: follow the anchor's scheme, or invert it. */\nexport type AnchoredSurfaceTone = 'default' | 'dark';\n\n// The color scheme `light-dark()` resolves to at `element`: an explicit single\n// scheme wins; `light dark` follows the user's preference, like the browser.\nfunction usedColorScheme(element: Element): 'light' | 'dark' {\n  const keywords = window.getComputedStyle(element).colorScheme.split(/\\s+/);\n  const light = keywords.includes('light');\n  const dark = keywords.includes('dark');\n  if (light && dark)\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  return dark ? 'dark' : 'light';\n}\n\n/** The dark tone's surface scheme: the opposite of `element`'s used scheme. */\nfunction inverseScheme(element: Element): 'light' | 'dark' {\n  return usedColorScheme(element) === 'dark' ? 'light' : 'dark';\n}\n\n/** The flat-tree parent: the parent element, or a shadow root's host. */\nfunction composedParent(node: Element): Element | null {\n  const root = node.getRootNode();\n  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n}\n\n/**\n * Keep an open dark-tone surface's scheme class the inverse of `source`'s\n * used scheme while the scheme switches live: the OS preference changes, or\n * an app theme class, attribute, or inline `color-scheme` changes on\n * `source` or one of its ancestors (the only places an inherited\n * `color-scheme` comes from). Stops when `closed` settles.\n */\nfunction followScheme(\n  surface: HTMLElement,\n  source: Element,\n  initial: 'light' | 'dark',\n  closed: Promise<unknown>,\n): void {\n  let current = initial;\n  const sync = () => {\n    if (!source.isConnected) return;\n    const next = inverseScheme(source);\n    if (next === current) return;\n    surface.classList.replace(\n      `kui-anchored-surface--scheme-${current}`,\n      `kui-anchored-surface--scheme-${next}`,\n    );\n    current = next;\n  };\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener?.('change', sync);\n  const observer = new MutationObserver(sync);\n  for (let node: Element | null = source; node; node = composedParent(node))\n    observer.observe(node, { attributes: true });\n  void closed.then(() => {\n    media.removeEventListener?.('change', sync);\n    observer.disconnect();\n  });\n}\n\n/** A viewport pointer location; `context` is the element under the pointer. */\nexport interface AnchoredSurfacePoint {\n  x: number;\n  y: number;\n  /**\n   * Pass the event target when opening from inside a modal dialog, native or\n   * Web Awesome (`wa-dialog`, `wa-drawer`). The dark tone also reads its\n   * color scheme from `context`, so a region with its own `color-scheme` is\n   * honored; without it the scheme is the modal scope's (or the page's).\n   */\n  context?: Element;\n}\n\n// The element a temporary pointer anchor joins so the overlay core resolves\n// the same modal context as `context`: the nearest `<dialog>`, or a shadow host\n// (`wa-dialog`, `wa-drawer`) whose slot renders `context` inside a `<dialog>`\n// in its shadow root. Light-DOM children of that host are slotted inside it.\nfunction modalScope(context: Element | undefined): Element {\n  let child: Element | undefined;\n  for (let node = context ?? null; node !== null;) {\n    if (node.localName === 'dialog') return node;\n    if (child?.assignedSlot?.closest('dialog')) return node;\n    child = node;\n    const root = node.getRootNode();\n    node =\n      node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n  }\n  return document.body;\n}\n\n/**\n * Open app-owned content beside an element. The surface owns its Kerf UI chrome;\n * kerfjs/overlay owns positioning, top-layer/modal hosting, focus, and dismissal.\n * The surface stays `viewportMargin` inside the viewport edges and fits its\n * height to the room beside the anchor (the roomier side when neither holds it),\n * scrolling its content; `--kui-anchored-surface-available-height` exposes that\n * room to the content, updated as the page scrolls or resizes.\n * The caller owns content, action policy, and calling `close()` when an action\n * completes. `initialFocus` defaults to the first focusable descendant; set it\n * to `false` for read-only help that should leave focus on its trigger.\n */\nexport function openAnchoredSurface(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  return openWithSchemeSource(anchor, content, options, anchor);\n}\n\n/** `openAnchoredSurface`, with the element the dark tone reads its scheme from. */\nfunction openWithSchemeSource(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n  schemeSource: Element,\n): OverlayHandle {\n  const {\n    label,\n    initialFocus = true,\n    dismiss = ['escape', 'outside'],\n    viewportMargin = 8,\n    tone = 'default',\n    ...rest\n  } = options;\n  if (!label.trim())\n    throw new TypeError('openAnchoredSurface() requires a nonempty label');\n  // Safari does not focus buttons on pointer press. Make a focusable trigger\n  // the overlay's restore target consistently, including that engine.\n  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();\n  // The dark tone's scheme is a class from creation, so the surface's first\n  // style resolution already has it: flipping it after the content mounts\n  // would run the content's own color transitions on open.\n  const scheme = tone === 'dark' ? inverseScheme(schemeSource) : undefined;\n  const handle = popover(anchor, content, {\n    ...rest,\n    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ''}`,\n    native: true,\n    initialFocus,\n    dismiss,\n    viewportMargin,\n    // The surface scrolls: fit it to the room beside the anchor, on the\n    // roomier side when neither fits, refreshed on every reposition.\n    fitHeight: true,\n  });\n  handle.el.setAttribute('role', 'dialog');\n  handle.el.setAttribute('aria-label', label);\n  handle.el.dataset.component = 'anchored-surface';\n  if (scheme) {\n    handle.el.dataset.tone = 'dark';\n    followScheme(handle.el, schemeSource, scheme, handle.result);\n  }\n  const dialog = anchor.closest('dialog');\n  if (dialog?.open) {\n    const onClose = () => handle.close();\n    dialog.addEventListener('close', onClose);\n    void handle.result.then(() => dialog.removeEventListener('close', onClose));\n  }\n  return handle;\n}\n\n/**\n * Open the same surface at pointer coordinates. The temporary anchor has no\n * layout or hit target. `context` keeps a surface opened inside a modal dialog\n * in that dialog's interactive host slot; it is removed on close or failure.\n */\nexport function openAnchoredSurfaceAt(\n  point: AnchoredSurfacePoint,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  const { x, y, context } = point;\n  if (!Number.isFinite(x) || !Number.isFinite(y))\n    throw new TypeError('openAnchoredSurfaceAt() requires finite coordinates');\n  const anchor = document.createElement('span');\n  anchor.setAttribute('aria-hidden', 'true');\n  anchor.style.cssText =\n    'position:fixed;width:0;height:0;pointer-events:none;visibility:hidden';\n  // The positioning core reads the anchor's viewport rect. A virtual rect\n  // avoids coordinate conversion when `context` sits in a transformed dialog.\n  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);\n  // Only modal membership matters for host selection. Keep the temporary node\n  // out of the event target itself (which may be an input or a custom element).\n  modalScope(context).append(anchor);\n  try {\n    const handle = openWithSchemeSource(\n      anchor,\n      content,\n      options,\n      context?.isConnected ? context : anchor,\n    );\n    void handle.result.then(() => anchor.remove());\n    return handle;\n  } catch (error) {\n    anchor.remove();\n    throw error;\n  }\n}\n"]}

package/dist/chunk-3Z7N2NAZ.js

@@ -0,0 +1,385 @@
+import { grayLevel, hsvToRgb, rgbToHsl, rgbToHsv, formatHex, parseColor, hslToRgb } from './chunk-TNJLNLVE.js';
+import { ColorSwatches } from './chunk-IO27YTL3.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { ChevronsUpDown, Pipette, Plus } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/color-picker/model/color-channels.ts
+function colorChannelValues(mode, hsv) {
+  switch (mode) {
+    case "rgb": {
+      const { r, g, b } = hsvToRgb(hsv);
+      return [r, g, b].map(Math.round);
+    }
+    case "hsl": {
+      const hsl = rgbToHsl(hsvToRgb(hsv));
+      return [hsv.h, hsl.s * 100, hsl.l * 100];
+    }
+    case "hsb":
+      return [hsv.h, hsv.s * 100, hsv.v * 100];
+    case "gray":
+      return [grayLevel(hsvToRgb(hsv)) * 100];
+  }
+}
+function rgbOf(mode, values) {
+  const [first = 0, second = 0, third = 0] = values;
+  switch (mode) {
+    case "rgb":
+      return { r: first, g: second, b: third, a: 1 };
+    case "hsl":
+      return hslToRgb({ h: first, s: second / 100, l: third / 100, a: 1 });
+    case "hsb":
+      return hsvToRgb({ h: first, s: second / 100, v: third / 100, a: 1 });
+    case "gray": {
+      const level = first / 100 * 255;
+      return { r: level, g: level, b: level, a: 1 };
+    }
+  }
+}
+function hsvFromChannels(mode, values, current) {
+  const { a } = current;
+  switch (mode) {
+    case "hsb":
+      return { h: values[0], s: values[1] / 100, v: values[2] / 100, a };
+    case "gray":
+      return { h: current.h, s: 0, v: values[0] / 100, a };
+    case "rgb":
+    case "hsl": {
+      const hsv = { ...rgbToHsv(rgbOf(mode, values)), a };
+      if (mode === "hsl") hsv.h = values[0];
+      else if (hsv.s === 0) hsv.h = current.h;
+      if (hsv.v === 0) hsv.s = current.s;
+      return hsv;
+    }
+  }
+}
+function trackStops(mode, index) {
+  switch (mode) {
+    case "rgb":
+      return [0, 255];
+    case "gray":
+      return [0, 100];
+    case "hsl":
+    case "hsb":
+      if (index === 0) return [0, 60, 120, 180, 240, 300, 360];
+      return mode === "hsl" && index === 2 ? [0, 50, 100] : [0, 100];
+  }
+}
+function colorChannelColor(mode, values) {
+  return formatHex(rgbOf(mode, values));
+}
+function colorChannelTrack(mode, index, values) {
+  const hue = index === 0 && (mode === "hsl" || mode === "hsb");
+  const stops = trackStops(mode, index).map((stop) => {
+    if (hue) return formatHex(rgbOf("hsb", [stop, 100, 100]));
+    const next = [...values];
+    next[index] = stop;
+    return formatHex(rgbOf(mode, next));
+  });
+  return `linear-gradient(var(--_kui-color-picker-track-direction,to right),${stops.join(",")})`;
+}
+var COLOR_PICKER_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-value",
+  "data-mode",
+  "data-alpha",
+  "data-color-picker-id"
+]);
+var COLOR_PICKER_SWATCH_ACTION = "kui-color-picker-swatch";
+var MODE_LABELS = {
+  rgb: ["RGB", "RGBA"],
+  hsl: ["HSL", "HSLA"],
+  hsb: ["HSB", "HSBA"],
+  gray: ["Grayscale", "Grayscale"]
+};
+var COLOR_PICKER_CHANNELS = {
+  rgb: [
+    { short: "R", name: "Red", max: 255, unit: "" },
+    { short: "G", name: "Green", max: 255, unit: "" },
+    { short: "B", name: "Blue", max: 255, unit: "" }
+  ],
+  hsl: [
+    { short: "H", name: "Hue", max: 360, unit: "\xB0" },
+    { short: "S", name: "Saturation", max: 100, unit: "%" },
+    { short: "L", name: "Lightness", max: 100, unit: "%" }
+  ],
+  hsb: [
+    { short: "H", name: "Hue", max: 360, unit: "\xB0" },
+    { short: "S", name: "Saturation", max: 100, unit: "%" },
+    { short: "B", name: "Brightness", max: 100, unit: "%" }
+  ],
+  gray: [{ short: "W", name: "Gray Level", max: 100, unit: "%" }]
+};
+function colorPickerChannels(mode, hsv) {
+  return colorChannelValues(mode, hsv).map(Math.round);
+}
+function colorPickerSlider(mode, index, values) {
+  const channel = COLOR_PICKER_CHANNELS[mode][index];
+  if (channel === void 0) return void 0;
+  const value = String(Math.round(values[index]));
+  return {
+    max: channel.max,
+    value,
+    label: channel.name,
+    valueText: `${value}${channel.unit}`,
+    style: [
+      `--_kui-color-picker-track:${colorChannelTrack(mode, index, values)}`,
+      `--_kui-color-picker-thumb-color:${colorChannelColor(mode, values)}`
+    ].join(";")
+  };
+}
+function colorPickerAreaText(hsv) {
+  return `Saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`;
+}
+function colorPickerStyle(hsv) {
+  const opaque = formatHex({ ...hsvToRgb(hsv), a: 1 });
+  return [
+    `--_kui-color-picker-h:${hsv.h.toFixed(2)}`,
+    `--_kui-color-picker-s:${(hsv.s * 100).toFixed(2)}%`,
+    `--_kui-color-picker-v:${(hsv.v * 100).toFixed(2)}%`,
+    `--_kui-color-picker-a:${(hsv.a * 100).toFixed(2)}%`,
+    `--_kui-color-picker-color:${opaque}`
+  ].join(";");
+}
+function ColorPicker({
+  id,
+  label,
+  value,
+  mode = "rgb",
+  alpha = true,
+  name,
+  form,
+  eyedropper = true,
+  presets,
+  samples,
+  addSampleAction,
+  disabled = false,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };
+  const rgba = alpha ? parsed : { ...parsed, a: 1 };
+  const hsv = rgbToHsv(rgba);
+  const hex = formatHex(rgba);
+  const channels = COLOR_PICKER_CHANNELS[mode];
+  const exact = colorChannelValues(mode, hsv);
+  const channelValues = exact.map(Math.round);
+  const opacity = `${Math.round(hsv.a * 100)}%`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COLOR_PICKER_PROTECTED),
+      id,
+      class: `kui-color-picker ${className}`.trim(),
+      role: "group",
+      "aria-label": label,
+      "data-component": "color-picker",
+      "data-color-picker-id": id,
+      "data-value": hex,
+      "data-mode": mode,
+      "data-alpha": alpha ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: "kui-color-picker__surface",
+            "data-morph-skip": true,
+            style: colorPickerStyle(hsv),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  class: "kui-color-picker__area",
+                  role: "slider",
+                  tabindex: disabled ? -1 : 0,
+                  "aria-label": "Saturation and Brightness",
+                  "aria-valuemin": "0",
+                  "aria-valuemax": "100",
+                  "aria-valuenow": String(Math.round(hsv.s * 100)),
+                  "aria-valuetext": colorPickerAreaText(hsv),
+                  "aria-disabled": disabled ? "true" : void 0,
+                  children: /* @__PURE__ */ jsx("span", { class: "kui-color-picker__area-thumb" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { class: "kui-color-picker__sliders", children: [
+                [0, 1, 2].map((index) => {
+                  const slider = colorPickerSlider(mode, index, exact);
+                  return /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      class: "kui-color-picker__slider",
+                      type: "range",
+                      "data-slider": String(index),
+                      min: "0",
+                      max: String(slider?.max ?? 100),
+                      step: "1",
+                      value: slider?.value ?? "0",
+                      "aria-label": slider?.label,
+                      "aria-valuetext": slider?.valueText,
+                      style: slider?.style,
+                      hidden: slider === void 0,
+                      disabled
+                    }
+                  );
+                }),
+                alpha ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    class: "kui-color-picker__opacity",
+                    type: "range",
+                    min: "0",
+                    max: "100",
+                    step: "1",
+                    value: String(Math.round(hsv.a * 100)),
+                    "aria-label": "Opacity",
+                    "aria-valuetext": opacity,
+                    disabled
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { class: "kui-color-picker__controls", children: [
+                /* @__PURE__ */ jsxs("span", { class: "kui-color-picker__mode-wrap", children: [
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      class: "kui-color-picker__mode",
+                      "aria-label": "Color Model",
+                      disabled,
+                      children: Object.keys(MODE_LABELS).map((option) => /* @__PURE__ */ jsx("option", { value: option, selected: option === mode, children: MODE_LABELS[option][alpha ? 1 : 0] }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { class: "kui-color-picker__mode-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                    LucideIcon,
+                    {
+                      icon: ChevronsUpDown,
+                      name: "chevrons-up-down",
+                      size: "s"
+                    }
+                  ) })
+                ] }),
+                eyedropper ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    class: "kui-color-picker__tool kui-color-picker__eyedropper",
+                    "aria-label": "Pick a Color from the Screen",
+                    title: "Pick a Color from the Screen",
+                    hidden: true,
+                    disabled,
+                    children: /* @__PURE__ */ jsx(LucideIcon, { icon: Pipette, name: "pipette", size: "m" })
+                  }
+                ) : null,
+                addSampleAction === void 0 ? null : /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    class: "kui-color-picker__tool",
+                    "data-action": addSampleAction,
+                    "aria-label": "Add to Samples",
+                    title: "Add to Samples",
+                    disabled,
+                    children: /* @__PURE__ */ jsx(LucideIcon, { icon: Plus, name: "plus", size: "m" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  class: "kui-color-picker__channels",
+                  "data-count": String(channels.length),
+                  children: [0, 1, 2].map((index) => {
+                    const channel = channels[index];
+                    return /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        class: "kui-color-picker__field",
+                        hidden: channel === void 0,
+                        children: [
+                          /* @__PURE__ */ jsx("span", { class: "kui-color-picker__field-label", "aria-hidden": "true", children: channel?.short ?? "" }),
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              class: "kui-color-picker__channel",
+                              "data-channel": String(index),
+                              inputMode: "numeric",
+                              value: channel ? String(channelValues[index]) : "",
+                              "aria-label": channel?.name,
+                              disabled
+                            }
+                          )
+                        ]
+                      }
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { class: "kui-color-picker__hex-row", children: [
+                /* @__PURE__ */ jsxs("label", { class: "kui-color-picker__field kui-color-picker__field--hex", children: [
+                  /* @__PURE__ */ jsx("span", { class: "kui-color-picker__field-label", "aria-hidden": "true", children: "#" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      class: "kui-color-picker__hex",
+                      value: hex.slice(1).toUpperCase(),
+                      maxLength: 8,
+                      spellcheck: "false",
+                      autocomplete: "off",
+                      "aria-label": "Hex Color",
+                      disabled
+                    }
+                  )
+                ] }),
+                alpha ? /* @__PURE__ */ jsxs("label", { class: "kui-color-picker__field", children: [
+                  /* @__PURE__ */ jsx("span", { class: "kui-color-picker__field-label", "aria-hidden": "true", children: "A" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      class: "kui-color-picker__opacity-field",
+                      inputMode: "numeric",
+                      value: opacity,
+                      "aria-label": "Opacity",
+                      disabled
+                    }
+                  )
+                ] }) : null
+              ] }),
+              name === void 0 ? null : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hex, form })
+            ]
+          }
+        ),
+        presets === void 0 ? null : /* @__PURE__ */ jsx(
+          ColorSwatches,
+          {
+            name: `${id}-presets`,
+            ariaLabel: "Presets",
+            swatches: presets,
+            value: presets.find((swatch) => swatch.value === hex)?.value,
+            size: "compact",
+            disabled,
+            action: COLOR_PICKER_SWATCH_ACTION
+          }
+        ),
+        (samples ?? []).map((group, index) => /* @__PURE__ */ jsx(
+          ColorSwatches,
+          {
+            name: `${id}-samples-${index}`,
+            label: group.title,
+            swatches: group.swatches,
+            value: group.swatches.find((swatch) => swatch.value === hex)?.value,
+            size: "compact",
+            disabled,
+            action: COLOR_PICKER_SWATCH_ACTION
+          }
+        ))
+      ]
+    }
+  );
+}
+
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorChannelValues, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle, hsvFromChannels };
+
+//# sourceMappingURL=chunk-3Z7N2NAZ.js.map

package/dist/chunk-3Z7N2NAZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-picker/model/color-channels.ts","../src/components/forms/color-picker/color-picker.tsx"],"names":[],"mappings":"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","file":"chunk-3Z7N2NAZ.js","sourcesContent":["/**\n * Channel math for the ColorPicker's color models: the unrounded channel\n * values a model shows for the picker's HSV state, the HSV a set of channel\n * values produces, and the gradient each channel's slider track paints. The\n * model's sliders and fields both edit through these, so a channel change\n * replaces only that channel and every other one keeps its exact value.\n */\nimport type { ColorPickerMode } from '../color-picker.js';\nimport {\n  formatHex,\n  grayLevel,\n  hslToRgb,\n  type Hsva,\n  hsvToRgb,\n  type Rgba,\n  rgbToHsl,\n  rgbToHsv,\n} from './color-model.js';\n\n/**\n * The channel values a model shows for an HSV color, before rounding: RGB\n * 0–255 (rounded, since hex and the fields carry whole bytes), hue 0–360,\n * and every other channel 0–100.\n */\nexport function colorChannelValues(mode: ColorPickerMode, hsv: Hsva): number[] {\n  switch (mode) {\n    case 'rgb': {\n      const { r, g, b } = hsvToRgb(hsv);\n      return [r, g, b].map(Math.round);\n    }\n    case 'hsl': {\n      const hsl = rgbToHsl(hsvToRgb(hsv));\n      return [hsv.h, hsl.s * 100, hsl.l * 100];\n    }\n    case 'hsb':\n      return [hsv.h, hsv.s * 100, hsv.v * 100];\n    case 'gray':\n      return [grayLevel(hsvToRgb(hsv)) * 100];\n  }\n}\n\n/** The opaque color a model's channel values describe. */\nfunction rgbOf(mode: ColorPickerMode, values: readonly number[]): Rgba {\n  const [first = 0, second = 0, third = 0] = values;\n  switch (mode) {\n    case 'rgb':\n      return { r: first, g: second, b: third, a: 1 };\n    case 'hsl':\n      return hslToRgb({ h: first, s: second / 100, l: third / 100, a: 1 });\n    case 'hsb':\n      return hsvToRgb({ h: first, s: second / 100, v: third / 100, a: 1 });\n    case 'gray': {\n      const level = (first / 100) * 255;\n      return { r: level, g: level, b: level, a: 1 };\n    }\n  }\n}\n\n/**\n * The HSV a model's channel values produce, keeping `current`'s alpha. Where\n * the result cannot carry a hue (a gray) or a saturation (black), `current`'s\n * is kept, so the area and the other models do not jump.\n */\nexport function hsvFromChannels(\n  mode: ColorPickerMode,\n  values: readonly number[],\n  current: Hsva,\n): Hsva {\n  const { a } = current;\n  switch (mode) {\n    case 'hsb':\n      return { h: values[0]!, s: values[1]! / 100, v: values[2]! / 100, a };\n    case 'gray':\n      return { h: current.h, s: 0, v: values[0]! / 100, a };\n    case 'rgb':\n    case 'hsl': {\n      const hsv = { ...rgbToHsv(rgbOf(mode, values)), a };\n      if (mode === 'hsl') hsv.h = values[0]!;\n      else if (hsv.s === 0) hsv.h = current.h;\n      if (hsv.v === 0) hsv.s = current.s;\n      return hsv;\n    }\n  }\n}\n\n/**\n * The evenly spaced stop values a channel's track needs to be exact: the\n * models are piecewise linear in RGB, so hue breaks every 60° and HSL\n * lightness at 50%.\n */\nfunction trackStops(mode: ColorPickerMode, index: number): number[] {\n  switch (mode) {\n    case 'rgb':\n      return [0, 255];\n    case 'gray':\n      return [0, 100];\n    case 'hsl':\n    case 'hsb':\n      if (index === 0) return [0, 60, 120, 180, 240, 300, 360];\n      return mode === 'hsl' && index === 2 ? [0, 50, 100] : [0, 100];\n  }\n}\n\n/**\n * The opaque `#rrggbb` a model's channel values describe: the color under\n * every channel slider's thumb (a gray level for the grayscale model, which\n * shows the gray its slider would set rather than the current color).\n */\nexport function colorChannelColor(\n  mode: ColorPickerMode,\n  values: readonly number[],\n): string {\n  return formatHex(rgbOf(mode, values));\n}\n\n/**\n * The gradient a channel's slider track paints: the colors that channel\n * produces from its minimum to its maximum while every other channel keeps\n * its value. The HSL and HSB hue track is the exception: it is always the\n * full-saturation, full-brightness rainbow, so a dark or gray color still\n * shows which hue each position picks. The gradient runs in the slider's writing direction (its\n * `--_kui-color-picker-track-direction`, `to left` in right-to-left text),\n * so the minimum always sits where the native range puts it.\n */\nexport function colorChannelTrack(\n  mode: ColorPickerMode,\n  index: number,\n  values: readonly number[],\n): string {\n  const hue = index === 0 && (mode === 'hsl' || mode === 'hsb');\n  const stops = trackStops(mode, index).map((stop) => {\n    if (hue) return formatHex(rgbOf('hsb', [stop, 100, 100]));\n    const next = [...values];\n    next[index] = stop;\n    return formatHex(rgbOf(mode, next));\n  });\n  return `linear-gradient(var(--_kui-color-picker-track-direction,to right),${stops.join(',')})`;\n}\n","import { ChevronsUpDown, Pipette, Plus } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  type ColorSwatch,\n  ColorSwatches,\n} from '../color-swatches/color-swatches.js';\nimport {\n  colorChannelColor,\n  colorChannelTrack,\n  colorChannelValues,\n} from './model/color-channels.js';\nimport {\n  formatHex,\n  type Hsva,\n  hsvToRgb,\n  parseColor,\n  rgbToHsv,\n} from './model/color-model.js';\n\n/** The channel fields the picker shows: RGB, HSL, HSB (HSV), or one gray level. */\nexport type ColorPickerMode = 'rgb' | 'hsl' | 'hsb' | 'gray';\n\n/** A titled group of app-owned colors, such as \"Document Colors\". */\nexport interface ColorPickerSamples {\n  title: string;\n  swatches: readonly ColorSwatch[];\n}\n\n/** Application `data-*` metadata; the picker's own markers stay protected. */\nexport type ColorPickerRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst COLOR_PICKER_PROTECTED = new Set([\n  'data-component',\n  'data-value',\n  'data-mode',\n  'data-alpha',\n  'data-color-picker-id',\n]);\n\n/** The delegated action every preset and sample swatch carries. */\nexport const COLOR_PICKER_SWATCH_ACTION = 'kui-color-picker-swatch';\n\nexport interface ColorPickerProps {\n  /** The picker's id; it also prefixes its inner ids. */\n  id: string;\n  /** The picker's accessible name. */\n  label: string;\n  /**\n   * The color, as CSS color text (`#rrggbb[aa]`, `rgb()`, `hsl()`); invalid\n   * text shows black. The picker reports `#rrggbb`, or `#rrggbbaa` below\n   * full opacity.\n   */\n  value: string;\n  /** The channel fields shown (default `rgb`). */\n  mode?: ColorPickerMode;\n  /** Offer opacity: an alpha slider and field (default true). */\n  alpha?: boolean;\n  /** A form field name the hex value submits under. */\n  name?: string;\n  /** Associate the hidden input with a form outside its ancestor chain. */\n  form?: string;\n  /**\n   * Offer a button that samples a color from the screen, where the browser\n   * provides the EyeDropper API (default true; hidden elsewhere).\n   */\n  eyedropper?: boolean;\n  /** A preset row of swatches under the controls. */\n  presets?: readonly ColorSwatch[];\n  /** Titled groups of app-owned colors under the presets. */\n  samples?: readonly ColorPickerSamples[];\n  /**\n   * A `data-action` for an \"Add to Samples\" button in the controls row; the\n   * app reads the picker's current value and adds it to its samples.\n   */\n  addSampleAction?: string;\n  disabled?: boolean;\n  className?: string;\n  rootAttributes?: ColorPickerRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst MODE_LABELS: Record<ColorPickerMode, [string, string]> = {\n  rgb: ['RGB', 'RGBA'],\n  hsl: ['HSL', 'HSLA'],\n  hsb: ['HSB', 'HSBA'],\n  gray: ['Grayscale', 'Grayscale'],\n};\n\n/**\n * The labels, accessible names, maximum, and spoken unit of each channel per\n * mode; the mode's sliders and fields both follow it.\n */\nexport const COLOR_PICKER_CHANNELS: Record<\n  ColorPickerMode,\n  readonly { short: string; name: string; max: number; unit: '' | '%' | '°' }[]\n> = {\n  rgb: [\n    { short: 'R', name: 'Red', max: 255, unit: '' },\n    { short: 'G', name: 'Green', max: 255, unit: '' },\n    { short: 'B', name: 'Blue', max: 255, unit: '' },\n  ],\n  hsl: [\n    { short: 'H', name: 'Hue', max: 360, unit: '°' },\n    { short: 'S', name: 'Saturation', max: 100, unit: '%' },\n    { short: 'L', name: 'Lightness', max: 100, unit: '%' },\n  ],\n  hsb: [\n    { short: 'H', name: 'Hue', max: 360, unit: '°' },\n    { short: 'S', name: 'Saturation', max: 100, unit: '%' },\n    { short: 'B', name: 'Brightness', max: 100, unit: '%' },\n  ],\n  gray: [{ short: 'W', name: 'Gray Level', max: 100, unit: '%' }],\n};\n\n/** The rounded channel values a mode shows for an HSV color. */\nexport function colorPickerChannels(\n  mode: ColorPickerMode,\n  hsv: Hsva,\n): number[] {\n  return colorChannelValues(mode, hsv).map(Math.round);\n}\n\n/** One channel slider's attributes; see {@link colorPickerSlider}. */\nexport interface ColorPickerSliderState {\n  max: number;\n  value: string;\n  label: string;\n  valueText: string;\n  style: string;\n}\n\n/**\n * The attributes of one channel slider for a mode's exact channel values:\n * its range, value, accessible name and spoken value, and an inline style\n * with the track gradient of the colors that channel produces while the\n * others hold (the full rainbow for the HSL and HSB hue) and the color under\n * the thumb.\n * `undefined` for a slot the mode does not use.\n */\nexport function colorPickerSlider(\n  mode: ColorPickerMode,\n  index: number,\n  values: readonly number[],\n): ColorPickerSliderState | undefined {\n  const channel = COLOR_PICKER_CHANNELS[mode][index];\n  if (channel === undefined) return undefined;\n  const value = String(Math.round(values[index]!));\n  return {\n    max: channel.max,\n    value,\n    label: channel.name,\n    valueText: `${value}${channel.unit}`,\n    style: [\n      `--_kui-color-picker-track:${colorChannelTrack(mode, index, values)}`,\n      `--_kui-color-picker-thumb-color:${colorChannelColor(mode, values)}`,\n    ].join(';'),\n  };\n}\n\n/** The area's spoken value. */\nexport function colorPickerAreaText(hsv: Hsva): string {\n  return `Saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`;\n}\n\n/** The CSS custom properties that place the thumbs and paint the tracks. */\nexport function colorPickerStyle(hsv: Hsva): string {\n  const opaque = formatHex({ ...hsvToRgb(hsv), a: 1 });\n  return [\n    `--_kui-color-picker-h:${hsv.h.toFixed(2)}`,\n    `--_kui-color-picker-s:${(hsv.s * 100).toFixed(2)}%`,\n    `--_kui-color-picker-v:${(hsv.v * 100).toFixed(2)}%`,\n    `--_kui-color-picker-a:${(hsv.a * 100).toFixed(2)}%`,\n    `--_kui-color-picker-color:${opaque}`,\n  ].join(';');\n}\n\n/**\n * A full color picker panel: a saturation and brightness area; a slider for\n * each channel of the color model (red, green, and blue; hue, saturation, and\n * lightness or brightness; or one gray level), each track painting the colors\n * that channel produces while the others hold (the hue track the full\n * rainbow); an optional opacity slider on\n * a checkerboard; a color-model menu (RGB, HSL, HSB, Grayscale) with its\n * channel fields, a hex field (8 digits below full\n * opacity) and an opacity field, an optional screen sampler (EyeDropper), and\n * optional preset and sample swatches. The controlled `value` renders it;\n * wire `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` to make it\n * interactive. The interactive surface belongs to that wiring after the first\n * render, so a drag never fights a re-render; a new `value` from the app\n * resynchronizes it.\n */\nexport function ColorPicker({\n  id,\n  label,\n  value,\n  mode = 'rgb',\n  alpha = true,\n  name,\n  form,\n  eyedropper = true,\n  presets,\n  samples,\n  addSampleAction,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColorPickerProps) {\n  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };\n  const rgba = alpha ? parsed : { ...parsed, a: 1 };\n  const hsv = rgbToHsv(rgba);\n  const hex = formatHex(rgba);\n  const channels = COLOR_PICKER_CHANNELS[mode];\n  const exact = colorChannelValues(mode, hsv);\n  const channelValues = exact.map(Math.round);\n  const opacity = `${Math.round(hsv.a * 100)}%`;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COLOR_PICKER_PROTECTED)}\n      id={id}\n      class={`kui-color-picker ${className}`.trim()}\n      role=\"group\"\n      aria-label={label}\n      data-component=\"color-picker\"\n      data-color-picker-id={id}\n      data-value={hex}\n      data-mode={mode}\n      data-alpha={alpha ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      slot={slot}\n    >\n      <div\n        class=\"kui-color-picker__surface\"\n        data-morph-skip\n        style={colorPickerStyle(hsv)}\n      >\n        <div\n          class=\"kui-color-picker__area\"\n          role=\"slider\"\n          tabindex={disabled ? -1 : 0}\n          aria-label=\"Saturation and Brightness\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={String(Math.round(hsv.s * 100))}\n          aria-valuetext={colorPickerAreaText(hsv)}\n          aria-disabled={disabled ? 'true' : undefined}\n        >\n          <span class=\"kui-color-picker__area-thumb\" />\n        </div>\n        <div class=\"kui-color-picker__sliders\">\n          {[0, 1, 2].map((index) => {\n            const slider = colorPickerSlider(mode, index, exact);\n            return (\n              <input\n                class=\"kui-color-picker__slider\"\n                type=\"range\"\n                data-slider={String(index)}\n                min=\"0\"\n                max={String(slider?.max ?? 100)}\n                step=\"1\"\n                value={slider?.value ?? '0'}\n                aria-label={slider?.label}\n                aria-valuetext={slider?.valueText}\n                style={slider?.style}\n                hidden={slider === undefined}\n                disabled={disabled}\n              />\n            );\n          })}\n          {alpha ? (\n            <input\n              class=\"kui-color-picker__opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              step=\"1\"\n              value={String(Math.round(hsv.a * 100))}\n              aria-label=\"Opacity\"\n              aria-valuetext={opacity}\n              disabled={disabled}\n            />\n          ) : null}\n        </div>\n        <div class=\"kui-color-picker__controls\">\n          <span class=\"kui-color-picker__mode-wrap\">\n            <select\n              class=\"kui-color-picker__mode\"\n              aria-label=\"Color Model\"\n              disabled={disabled}\n            >\n              {(Object.keys(MODE_LABELS) as ColorPickerMode[]).map((option) => (\n                <option value={option} selected={option === mode}>\n                  {MODE_LABELS[option][alpha ? 1 : 0]}\n                </option>\n              ))}\n            </select>\n            <span class=\"kui-color-picker__mode-icon\" aria-hidden=\"true\">\n              <LucideIcon\n                icon={ChevronsUpDown}\n                name=\"chevrons-up-down\"\n                size=\"s\"\n              />\n            </span>\n          </span>\n          {eyedropper ? (\n            <button\n              type=\"button\"\n              class=\"kui-color-picker__tool kui-color-picker__eyedropper\"\n              aria-label=\"Pick a Color from the Screen\"\n              title=\"Pick a Color from the Screen\"\n              hidden\n              disabled={disabled}\n            >\n              <LucideIcon icon={Pipette} name=\"pipette\" size=\"m\" />\n            </button>\n          ) : null}\n          {addSampleAction === undefined ? null : (\n            <button\n              type=\"button\"\n              class=\"kui-color-picker__tool\"\n              data-action={addSampleAction}\n              aria-label=\"Add to Samples\"\n              title=\"Add to Samples\"\n              disabled={disabled}\n            >\n              <LucideIcon icon={Plus} name=\"plus\" size=\"m\" />\n            </button>\n          )}\n        </div>\n        <div\n          class=\"kui-color-picker__channels\"\n          data-count={String(channels.length)}\n        >\n          {[0, 1, 2].map((index) => {\n            const channel = channels[index];\n            return (\n              <label\n                class=\"kui-color-picker__field\"\n                hidden={channel === undefined}\n              >\n                <span class=\"kui-color-picker__field-label\" aria-hidden=\"true\">\n                  {channel?.short ?? ''}\n                </span>\n                <input\n                  class=\"kui-color-picker__channel\"\n                  data-channel={String(index)}\n                  inputMode=\"numeric\"\n                  value={channel ? String(channelValues[index]) : ''}\n                  aria-label={channel?.name}\n                  disabled={disabled}\n                />\n              </label>\n            );\n          })}\n        </div>\n        <div class=\"kui-color-picker__hex-row\">\n          <label class=\"kui-color-picker__field kui-color-picker__field--hex\">\n            <span class=\"kui-color-picker__field-label\" aria-hidden=\"true\">\n              #\n            </span>\n            <input\n              class=\"kui-color-picker__hex\"\n              value={hex.slice(1).toUpperCase()}\n              maxLength={8}\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              aria-label=\"Hex Color\"\n              disabled={disabled}\n            />\n          </label>\n          {alpha ? (\n            <label class=\"kui-color-picker__field\">\n              <span class=\"kui-color-picker__field-label\" aria-hidden=\"true\">\n                A\n              </span>\n              <input\n                class=\"kui-color-picker__opacity-field\"\n                inputMode=\"numeric\"\n                value={opacity}\n                aria-label=\"Opacity\"\n                disabled={disabled}\n              />\n            </label>\n          ) : null}\n        </div>\n        {name === undefined ? null : (\n          <input type=\"hidden\" name={name} value={hex} form={form} />\n        )}\n      </div>\n      {presets === undefined ? null : (\n        <ColorSwatches\n          name={`${id}-presets`}\n          ariaLabel=\"Presets\"\n          swatches={presets}\n          value={presets.find((swatch) => swatch.value === hex)?.value}\n          size=\"compact\"\n          disabled={disabled}\n          action={COLOR_PICKER_SWATCH_ACTION}\n        />\n      )}\n      {(samples ?? []).map((group, index) => (\n        <ColorSwatches\n          name={`${id}-samples-${index}`}\n          label={group.title}\n          swatches={group.swatches}\n          value={group.swatches.find((swatch) => swatch.value === hex)?.value}\n          size=\"compact\"\n          disabled={disabled}\n          action={COLOR_PICKER_SWATCH_ACTION}\n        />\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/chunk-4OV272LF.js

@@ -0,0 +1,93 @@
+import { Text } from './chunk-7K6U6FCN.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var COMPOSER_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-disabled",
+  "data-submit-on-enter"
+]);
+function rowCount(value, name) {
+  if (!Number.isInteger(value) || value < 1)
+    throw new RangeError(`MessageComposer ${name} must be a positive integer.`);
+  return value;
+}
+function MessageComposer({
+  label,
+  name,
+  id,
+  value = "",
+  placeholder,
+  minRows = 1,
+  maxRows = 8,
+  hint,
+  leading,
+  trailing,
+  disabled = false,
+  submitOnEnter = false,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  const min = rowCount(minRows, "minRows");
+  const max = rowCount(maxRows, "maxRows");
+  if (max < min)
+    throw new RangeError("MessageComposer maxRows must be at least minRows.");
+  const hintId = hint !== void 0 && id !== void 0 ? `${id}-hint` : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED),
+      class: `kui-message-composer ${className}`.trim(),
+      "data-component": "message-composer",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-submit-on-enter": submitOnEnter ? "true" : void 0,
+      style: `--_kui-message-composer-min-rows:${min};--_kui-message-composer-max-rows:${max}`,
+      slot,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            class: "kui-message-composer__field",
+            id,
+            name,
+            rows: min,
+            "aria-label": label,
+            "aria-describedby": hintId || void 0,
+            "aria-keyshortcuts": submitOnEnter ? "Enter" : void 0,
+            placeholder,
+            disabled,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            position: "footer",
+            density: "compact",
+            label: `${label} Actions`,
+            leading: leading === void 0 && hint === void 0 ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+              leading,
+              hint === void 0 ? null : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "span",
+                  tone: "quiet",
+                  size: "compact",
+                  id: hintId || void 0,
+                  children: hint
+                }
+              )
+            ] }),
+            trailing
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { MessageComposer };
+
+//# sourceMappingURL=chunk-4OV272LF.js.map

package/dist/chunk-4OV272LF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/message-composer/message-composer.tsx"],"names":[],"mappings":"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","file":"chunk-4OV272LF.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { Text } from '../../typography/text/text.js';\n\n/**\n * Application `data-*` identity on the MessageComposer root, such as `data-key`;\n * the composer's own configuration attributes stay protected.\n */\nexport type MessageComposerRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface MessageComposerProps {\n  /** The message field's accessible name, in title style (\"Message\"). */\n  label: string;\n  /** Native textarea `name`: the form field the message submits under. */\n  name: string;\n  /**\n   * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes\n   * the field's accessible description.\n   */\n  id?: string;\n  /** The field's text: a draft to restore, or `''` after sending. */\n  value?: string;\n  /** Sentence-style example of what to write (\"Ask about this build\"). */\n  placeholder?: string;\n  /**\n   * Visible lines while the field is empty or short (default 1). The field\n   * grows with its content from here.\n   */\n  minRows?: number;\n  /**\n   * Lines the field grows to before it scrolls (default 8). At least\n   * `minRows`.\n   */\n  maxRows?: number;\n  /**\n   * Quiet, sentence-style supporting copy in the action row's leading zone,\n   * after any `leading` controls.\n   */\n  hint?: string;\n  /**\n   * Controls at the start of the action row, such as an attach button or a\n   * model `Select`, normally in a `ToolbarControlGroup`.\n   */\n  leading?: KerfUiContent;\n  /** Trailing controls in the action row, normally one brand Send button. */\n  trailing: KerfUiContent;\n  /** Disable the field; the app disables its own actions. */\n  disabled?: boolean;\n  /**\n   * Opt in to Enter-to-send: with `wireMessageComposers` running over an ancestor,\n   * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing\n   * action, Shift+Enter inserts a newline, and an Enter that commits an IME\n   * composition or meets an empty message does not send. The field announces\n   * the shortcut with `aria-keyshortcuts`.\n   */\n  submitOnEnter?: boolean;\n  /** Safe `data-*` identity on the root. */\n  rootAttributes?: MessageComposerRootAttributes;\n  className?: string;\n  /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */\n  slot?: string;\n}\n\nconst COMPOSER_PROTECTED = new Set([\n  'data-component',\n  'data-disabled',\n  'data-submit-on-enter',\n]);\n\nfunction rowCount(value: number, name: string): number {\n  if (!Number.isInteger(value) || value < 1)\n    throw new RangeError(`MessageComposer ${name} must be a positive integer.`);\n  return value;\n}\n\n/**\n * A chat or prompt composer: a raised frame whose border turns brand while\n * focus is within, holding a borderless message field that grows with its\n * content between `minRows` and `maxRows` lines, above a compact `Toolbar`\n * action row: optional `leading` controls and `hint`, then `trailing` actions. The app owns the value and sending;\n * `submitOnEnter` with `wireMessageComposers` adds Enter-to-send.\n */\nexport function MessageComposer({\n  label,\n  name,\n  id,\n  value = '',\n  placeholder,\n  minRows = 1,\n  maxRows = 8,\n  hint,\n  leading,\n  trailing,\n  disabled = false,\n  submitOnEnter = false,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: MessageComposerProps) {\n  const min = rowCount(minRows, 'minRows');\n  const max = rowCount(maxRows, 'maxRows');\n  if (max < min)\n    throw new RangeError('MessageComposer maxRows must be at least minRows.');\n  const hintId = hint !== undefined && id !== undefined ? `${id}-hint` : '';\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED)}\n      class={`kui-message-composer ${className}`.trim()}\n      data-component=\"message-composer\"\n      data-disabled={disabled ? 'true' : undefined}\n      data-submit-on-enter={submitOnEnter ? 'true' : undefined}\n      style={`--_kui-message-composer-min-rows:${min};--_kui-message-composer-max-rows:${max}`}\n      slot={slot}\n    >\n      <textarea\n        class=\"kui-message-composer__field\"\n        id={id}\n        name={name}\n        rows={min}\n        aria-label={label}\n        aria-describedby={hintId || undefined}\n        aria-keyshortcuts={submitOnEnter ? 'Enter' : undefined}\n        placeholder={placeholder}\n        disabled={disabled}\n      >\n        {value}\n      </textarea>\n      <Toolbar\n        position=\"footer\"\n        density=\"compact\"\n        label={`${label} Actions`}\n        leading={\n          leading === undefined && hint === undefined ? undefined : (\n            <>\n              {leading}\n              {hint === undefined ? null : (\n                <Text\n                  variant=\"span\"\n                  tone=\"quiet\"\n                  size=\"compact\"\n                  id={hintId || undefined}\n                >\n                  {hint}\n                </Text>\n              )}\n            </>\n          )\n        }\n        trailing={trailing}\n      />\n    </div>\n  );\n}\n"]}