@weasel-js/ui 0.7.0 → 0.7.2

package/dist/chunks/Button-9QNIYugK.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button-9QNIYugK.js","names":[],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   400;\n  --btn-fontsize:     14px;\n  --btn-height:       24px;\n  --btn-padx:         12px;\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: 20px; --btn-padx: 8px; --btn-fontsize: 13px; }\n.size_md { --btn-height: 24px; --btn-padx: 12px; --btn-fontsize: 14px; }\n\n.iconOnly.size_sm { width: 20px; --btn-padx: 0; }\n.iconOnly.size_md { width: 24px; --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-fg) 10%, transparent);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-fg) 18%, transparent);\n}\n\n/* ---------- Modifiers ---------- */\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n};\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cls}\n      style={style}\n      disabled={disabled}\n      aria-busy={loading ? true : undefined}\n      aria-label={ariaLabel}\n      onClick={onClick}\n    >\n      {showLeading && (\n        <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n      )}\n      {iconOnly ? (\n        loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n      ) : (\n        children !== undefined && <span className={s.label}>{children}</span>\n      )}\n      {!iconOnly && trailingIcon && (\n        <span className={s.iconSlot}>{trailingIcon}</span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACiCA,SAAS,IAAqB;CAC5B,OACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAIX,IAAa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,eACE;CAgBJ,OACE,kBAAC,UAAD;EACO;EACC;EACN,WAlBQ;GACV,EAAE;GACF,EAAE,WAAW;GACb,EAAE,QAAQ;GACV,KAAa,EAAE;GACf,KAAY,EAAE;GACd,KAAW,EAAE;GACb;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAQO;EACJ;EACG;EACV,aAAW,IAAU,KAAO,KAAA;EAC5B,cAAY;EACH;YARX;GAHkB,CAAC,MAAa,KAAW,MAcvC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;IAAmB,CAAA;GAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAW;IAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAQ;IAAgB,CAAA;GAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW;IAAoB,CAAA;GAE7C;;EAEX"}
+{"version":3,"file":"Button-9QNIYugK.js","names":[],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   400;\n  --btn-fontsize:     14px;\n  --btn-height:       24px;\n  --btn-padx:         12px;\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: 20px; --btn-padx: 8px; --btn-fontsize: 13px; }\n.size_md { --btn-height: 24px; --btn-padx: 12px; --btn-fontsize: 14px; }\n\n.iconOnly.size_sm { width: 20px; --btn-padx: 0; }\n.iconOnly.size_md { width: 24px; --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-fg) 10%, transparent);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-fg) 18%, transparent);\n}\n\n/* ---------- Modifiers ---------- */\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n};\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cls}\n      style={style}\n      disabled={disabled}\n      aria-busy={loading ? true : undefined}\n      aria-label={ariaLabel}\n      onClick={onClick}\n    >\n      {showLeading && (\n        <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n      )}\n      {iconOnly ? (\n        loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n      ) : (\n        children !== undefined && <span className={s.label}>{children}</span>\n      )}\n      {!iconOnly && trailingIcon && (\n        <span className={s.iconSlot}>{trailingIcon}</span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACiCA,SAAS,IAAqB;AAC5B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAIX,IAAa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,eACE;AAgBJ,QACE,kBAAC,UAAD;EACO;EACC;EACN,WAlBQ;GACV,EAAE;GACF,EAAE,WAAW;GACb,EAAE,QAAQ;GACV,KAAa,EAAE;GACf,KAAY,EAAE;GACd,KAAW,EAAE;GACb;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAQO;EACJ;EACG;EACV,aAAW,IAAU,KAAO,KAAA;EAC5B,cAAY;EACH;YARX;GAHkB,CAAC,MAAa,KAAW,MAcvC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;IAAmB,CAAA;GAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAW;IAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAQ;IAAgB,CAAA;GAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW;IAAoB,CAAA;GAE7C;;EAEX"}

package/dist/chunks/{Callout-Dt0kBIls.js → Callout-CxxrEcSb.js}

@@ -111,4 +111,4 @@ function h(a) {
 //#endregion
 export { a as n, h as t };
 
-//# sourceMappingURL=Callout-Dt0kBIls.js.map
+//# sourceMappingURL=Callout-CxxrEcSb.js.map

package/dist/chunks/{Callout-Dt0kBIls.js.map → Callout-CxxrEcSb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Callout-Dt0kBIls.js","names":[],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  --callout-accent: var(--wzl-accent-strong);\n  background: var(--wzl-surface);\n  border: 1px solid var(--callout-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n.toneWarning {\n  --callout-accent: var(--wzl-warning, #d99a3f);\n}\n\n.toneDanger {\n  --callout-accent: var(--wzl-danger, #d94a3f);\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--callout-accent);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n\n.body {\n  padding: 8px 12px 10px;\n  font-size: 13px;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 12px 10px;\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport s from './Callout.module.css';\n\nexport type CalloutTone = 'info' | 'warning' | 'danger';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\nexport type CalloutProps = Omit<\n  RACPopoverProps,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /** Accent tone for border + arrow. Default `info`. */\n  tone?: CalloutTone;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the × button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button requires either\n   * controlled open (`isOpen` + `onOpenChange`) or `onDismiss`; with only\n   * `defaultOpen` it has no open-state setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the × button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n  anchorRect?: { x: number; y: number; width: number; height: number };\n};\n\nconst toneClass: Record<CalloutTone, string> = {\n  info: s.toneInfo,\n  warning: s.toneWarning,\n  danger: s.toneDanger,\n};\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    tone = 'info',\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the × is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  useEffect(() => {\n    if (anchorRect === undefined || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, toneClass[tone], className].filter(Boolean).join(' ')}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className={s.close}\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;GCsEM,IAAyC;CAC7C,MAAM,EAAE;CACR,SAAS,EAAE;CACX,QAAQ,EAAE;CACX;AAQD,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EACJ,aACA,cACA,UACA,WACA,UAAO,QACP,WAAQ,IACR,oBACA,cACA,eACA,eACA,eAAY,OACZ,YAAS,IACT,eAAY,KACZ,iBACA,iCACA,cAAc,GACd,mBAAmB,GACnB,GAAG,MACD,GACE,IAAY,EAAwB,KAAK,EACzC,IAAY,KAAmB,CAAC,GAKhC,IAAe,EAAO,EAAU;CACtC,EAAa,UAAU;CACvB,IAAM,IAAiB,GAAQ,MAAqB;EAClD,AAAI,EAAE,QAAQ,YAAU,EAAa,WAAW;GAChD,EACI,IAAc,EAA2B,KAAK,EAC9C,IAAY,GAAa,MAA6B;EAG1D,AAFA,EAAY,SAAS,oBAAoB,WAAW,EAAe,QAAQ,EAC3E,EAAY,UAAU,GACtB,GAAM,iBAAiB,WAAW,EAAe,QAAQ;IACxD,EAAE,CAAC,EACA,IAAU,GAAO;CAOvB,QAAgB;EACV,MAAe,KAAA,KAAa,OAAO,SAAW,OAClD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;IACxC;EAAC,GAAY;EAAG,GAAY;EAAG,GAAY;EAAO,GAAY;EAAO,CAAC;CAGzE,IAAM,IACJ,KAAS,MAAU,KAAA,IAAY,IAAU,GACrC,IAAmB,IAAQ,IAAY,KAAA;CAC7C,OACE,kBAAA,GAAA,EAAA,UAAA,CAEG,MAAe,KAAA,KACd,EACE,kBAAC,QAAD;EACE,KAAK;EACL,uBAAoB;EACpB,WAAW,EAAE;EACb,eAAY;EAEZ,OAAO;GACL,MAAM,EAAW;GACjB,KAAK,EAAW;GAChB,OAAO,EAAW;GAClB,QAAQ,EAAW;GACpB;EACD,CAAA,EACF,SAAS,KACV,EACH,kBAAC,GAAD;EACE,GAAI;EACJ,YAAY,MAAe,KAAA,IAAwB,IAAZ;EACvC,YAAY,CAAC;EACF;EACH;EACG;EACG;EACd,8BACE,MAAiC,UAAc,KAAQ,KAAA;EAEzD,cAAY;EACZ,mBAAiB;EACjB,WAAW;GAAC,EAAE;GAAS,EAAU;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAb9E,CAeE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAAY,eAAY;cAC1D,kBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;IACxB,CAAA;GACO,CAAA,EACf,kBAAC,GAAD;GACE,MAAM,IAAQ,gBAAgB;GAC9B,WAAW,EAAE;GACb,cAAY;GACZ,mBAAiB;GACjB,KAAK;cAEH,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;KACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;MAAS,IAAI;MAAS,MAAK;MAAQ,WAAW,EAAE;gBAC7C;MACO,CAAA,EAEX,KACC,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAE;MACb,eAAe;OAQb,AAFA,GAAO,EACP,IAAe,GAAM,EACrB,KAAa;;MAEf,cAAW;gBACZ;MAEQ,CAAA,CAEJ;;IAEX,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAO;KAAe,CAAA;IACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAAS;KAAgB,CAAA;IACtE,EAAA,CAAA;GAEK,CAAA,CACD;IACZ,EAAA,CAAA"}
+{"version":3,"file":"Callout-CxxrEcSb.js","names":[],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  --callout-accent: var(--wzl-accent-strong);\n  background: var(--wzl-surface);\n  border: 1px solid var(--callout-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n.toneWarning {\n  --callout-accent: var(--wzl-warning, #d99a3f);\n}\n\n.toneDanger {\n  --callout-accent: var(--wzl-danger, #d94a3f);\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--callout-accent);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n\n.body {\n  padding: 8px 12px 10px;\n  font-size: 13px;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 12px 10px;\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport s from './Callout.module.css';\n\nexport type CalloutTone = 'info' | 'warning' | 'danger';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\nexport type CalloutProps = Omit<\n  RACPopoverProps,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /** Accent tone for border + arrow. Default `info`. */\n  tone?: CalloutTone;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the × button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button requires either\n   * controlled open (`isOpen` + `onOpenChange`) or `onDismiss`; with only\n   * `defaultOpen` it has no open-state setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the × button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n  anchorRect?: { x: number; y: number; width: number; height: number };\n};\n\nconst toneClass: Record<CalloutTone, string> = {\n  info: s.toneInfo,\n  warning: s.toneWarning,\n  danger: s.toneDanger,\n};\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    tone = 'info',\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the × is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  useEffect(() => {\n    if (anchorRect === undefined || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, toneClass[tone], className].filter(Boolean).join(' ')}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className={s.close}\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;GCsEM,IAAyC;CAC7C,MAAM,EAAE;CACR,SAAS,EAAE;CACX,QAAQ,EAAE;CACX;AAQD,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EACJ,aACA,cACA,UACA,WACA,UAAO,QACP,WAAQ,IACR,oBACA,cACA,eACA,eACA,eAAY,OACZ,YAAS,IACT,eAAY,KACZ,iBACA,iCACA,cAAc,GACd,mBAAmB,GACnB,GAAG,MACD,GACE,IAAY,EAAwB,KAAK,EACzC,IAAY,KAAmB,CAAC,GAKhC,IAAe,EAAO,EAAU;AACtC,GAAa,UAAU;CACvB,IAAM,IAAiB,GAAQ,MAAqB;AAClD,EAAI,EAAE,QAAQ,YAAU,EAAa,WAAW;GAChD,EACI,IAAc,EAA2B,KAAK,EAC9C,IAAY,GAAa,MAA6B;AAG1D,EAFA,EAAY,SAAS,oBAAoB,WAAW,EAAe,QAAQ,EAC3E,EAAY,UAAU,GACtB,GAAM,iBAAiB,WAAW,EAAe,QAAQ;IACxD,EAAE,CAAC,EACA,IAAU,GAAO;AAOvB,SAAgB;AACV,QAAe,KAAA,KAAa,OAAO,SAAW,OAClD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;IACxC;EAAC,GAAY;EAAG,GAAY;EAAG,GAAY;EAAO,GAAY;EAAO,CAAC;CAGzE,IAAM,IACJ,KAAS,MAAU,KAAA,IAAY,IAAU,GACrC,IAAmB,IAAQ,IAAY,KAAA;AAC7C,QACE,kBAAA,GAAA,EAAA,UAAA,CAEG,MAAe,KAAA,KACd,EACE,kBAAC,QAAD;EACE,KAAK;EACL,uBAAoB;EACpB,WAAW,EAAE;EACb,eAAY;EAEZ,OAAO;GACL,MAAM,EAAW;GACjB,KAAK,EAAW;GAChB,OAAO,EAAW;GAClB,QAAQ,EAAW;GACpB;EACD,CAAA,EACF,SAAS,KACV,EACH,kBAAC,GAAD;EACE,GAAI;EACJ,YAAY,MAAe,KAAA,IAAwB,IAAZ;EACvC,YAAY,CAAC;EACF;EACH;EACG;EACG;EACd,8BACE,MAAiC,UAAc,KAAQ,KAAA;EAEzD,cAAY;EACZ,mBAAiB;EACjB,WAAW;GAAC,EAAE;GAAS,EAAU;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAb9E,CAeE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAAY,eAAY;cAC1D,kBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;IACxB,CAAA;GACO,CAAA,EACf,kBAAC,GAAD;GACE,MAAM,IAAQ,gBAAgB;GAC9B,WAAW,EAAE;GACb,cAAY;GACZ,mBAAiB;GACjB,KAAK;cAEH,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;KACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;MAAS,IAAI;MAAS,MAAK;MAAQ,WAAW,EAAE;gBAC7C;MACO,CAAA,EAEX,KACC,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAE;MACb,eAAe;AAQb,OAFA,GAAO,EACP,IAAe,GAAM,EACrB,KAAa;;MAEf,cAAW;gBACZ;MAEQ,CAAA,CAEJ;;IAEX,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAO;KAAe,CAAA;IACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAAS;KAAgB,CAAA;IACtE,EAAA,CAAA;GAEK,CAAA,CACD;IACZ,EAAA,CAAA"}

package/dist/chunks/Checkbox-CtK8H_OQ.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-CtK8H_OQ.js","names":[],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-input-bg);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n  border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.checkmark {\n  position: absolute;\n  inset: 0;\n  color: var(--wzl-fg-on-accent);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n  opacity: 1;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Checkbox as RACCheckbox,\n  type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={[s.checkbox, className].filter(Boolean).join(' ')}\n    >\n      {({ isIndeterminate }) => (\n        <>\n          <span className={s.box}>\n            <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n              ) : (\n                <polyline\n                  points=\"3,7.5 6,10.5 11,4.5\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n            </svg>\n          </span>\n          {children !== undefined && <span className={s.label}>{children}</span>}\n        </>\n      )}\n    </RACCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;GCgBa,IAAW,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;CACzC,OACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAE1D,EAAE,yBACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAW,SAAQ;IAAY,eAAY;cAC1D,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;KAAU,CAAA,GAEjG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,CAAA;IAEA,CAAA;GACD,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CACrE,EAAA,CAAA;EAEO,CAAA;EAEhB"}
+{"version":3,"file":"Checkbox-CtK8H_OQ.js","names":[],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-input-bg);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n  border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.checkmark {\n  position: absolute;\n  inset: 0;\n  color: var(--wzl-fg-on-accent);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n  opacity: 1;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Checkbox as RACCheckbox,\n  type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={[s.checkbox, className].filter(Boolean).join(' ')}\n    >\n      {({ isIndeterminate }) => (\n        <>\n          <span className={s.box}>\n            <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n              ) : (\n                <polyline\n                  points=\"3,7.5 6,10.5 11,4.5\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n            </svg>\n          </span>\n          {children !== undefined && <span className={s.label}>{children}</span>}\n        </>\n      )}\n    </RACCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;GCgBa,IAAW,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;AACzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAE1D,EAAE,yBACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAW,SAAQ;IAAY,eAAY;cAC1D,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;KAAU,CAAA,GAEjG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,CAAA;IAEA,CAAA;GACD,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CACrE,EAAA,CAAA;EAEO,CAAA;EAEhB"}

package/dist/chunks/ColorField-sGLnThpB.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField-sGLnThpB.js","names":[],"sources":["../../src/components/ColorField/ColorField.module.css","../../src/components/ColorField/ColorField.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chip {\n  position: relative;\n  display: inline-flex;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.color {\n  inline-size: 28px;\n  block-size: 20px;\n  padding: 0;\n  border: 1px solid var(--wzl-border, #444);\n  border-radius: 4px;\n  background: none;\n  cursor: pointer;\n}\n\n/* Indeterminate (mixed) presentation: checkerboard overlay atop the\n * swatch. pointer-events: none so the input stays clickable. */\n.root[data-mixed] .chip::after {\n  content: '';\n  position: absolute;\n  inset: 1px;\n  border-radius: 3px;\n  pointer-events: none;\n  background: repeating-conic-gradient(\n      var(--wzl-border, #666) 0% 25%,\n      var(--wzl-surface, #2e2f36) 0% 50%\n    )\n    50% / 8px 8px;\n}\n\n.alphaRange {\n  flex: 1;\n  min-inline-size: 48px;\n  accent-color: var(--wzl-accent, #7ab8d4);\n}\n\n.alphaRange:disabled {\n  opacity: 0.45;\n}\n\n.alphaReadout {\n  min-inline-size: 3ch;\n  text-align: end;\n  font-size: 11px;\n  opacity: 0.7;\n}\n","import { useState } from 'react';\nimport { toHex8, getAlpha01, withAlpha01 } from '@weasel-js/core';\nimport s from './ColorField.module.css';\n\nexport interface ColorFieldProps {\n  /** Current color, `#rrggbb` or `#rrggbbaa`. Omit when `mixed`. */\n  value?: string;\n  /** Indeterminate presentation (multi-selection with differing colors):\n   *  checkered chip, empty value. The first color edit produces a real\n   *  value; the opacity slider stays disabled until then (an alpha-only\n   *  edit would otherwise commit a value composed against the\n   *  placeholder black). */\n  mixed?: boolean;\n  /** Show the opacity slider; emitted values are `#rrggbbaa`. */\n  alpha?: boolean;\n  /** Live value during interaction (picker drag, slider drag). Optional —\n   *  wire it for live preview; omit it for commit-only consumers. */\n  onInput?: (hex: string) => void;\n  /** Committed value — picker close (blur) or slider release. One call\n   *  per user gesture; pair with an undoable write. */\n  onChange: (hex: string) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Compact color editor: native color input + optional opacity slider.\n * Commit semantics are gesture-based (see `onChange`) because native\n * color/range inputs fire `change` continuously during interaction —\n * commit-on-change would emit one undo entry per tick.\n */\nexport function ColorField(props: ColorFieldProps) {\n  const { value, mixed = false, alpha = false, onInput, onChange, className } = props;\n  const hex8 = toHex8(value ?? '#000000');\n  const rgb6 = hex8.slice(0, 7);\n  const alpha01 = getAlpha01(hex8);\n  const alphaPct = Math.round(alpha01 * 100);\n\n  // Drafts track the control during a gesture (the committed prop only\n  // updates after onChange), then reset to follow the prop again.\n  const [colorDraft, setColorDraft] = useState<string | null>(null);\n  const [alphaDraft, setAlphaDraft] = useState<number | null>(null);\n  const visibleRgb = colorDraft ?? rgb6;\n  const visibleAlphaPct = alphaDraft ?? alphaPct;\n\n  const compose = (rgb: string, a01: number): string =>\n    alpha ? withAlpha01(rgb, a01) : rgb;\n\n  // Mixed with no color edit yet: the alpha slider has nothing real to\n  // compose against (rgb6 is the placeholder black), so keep it disabled\n  // until the first color edit lands.\n  const alphaLocked = mixed && colorDraft === null;\n\n  // Commit only when a gesture actually changed something — blur with no\n  // preceding input must not emit (it would create a no-op undo entry).\n  const commit = (rgb: string, a01: number): void => {\n    if (colorDraft === null && alphaDraft === null) return;\n    onChange(compose(rgb, a01));\n    setColorDraft(null);\n    setAlphaDraft(null);\n  };\n\n  return (\n    <span\n      className={[s.root, className].filter(Boolean).join(' ')}\n      {...(mixed && colorDraft === null ? { 'data-mixed': '' } : {})}\n    >\n      <span className={s.chip}>\n        <input\n          className={s.color}\n          type=\"color\"\n          value={visibleRgb}\n          aria-label={props['aria-label'] ?? 'Color'}\n          onInput={(e) => {\n            const rgb = (e.target as HTMLInputElement).value;\n            setColorDraft(rgb);\n            onInput?.(compose(rgb, visibleAlphaPct / 100));\n          }}\n          onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n        />\n      </span>\n      {alpha && (\n        <>\n          <input\n            className={s.alphaRange}\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={visibleAlphaPct}\n            disabled={alphaLocked}\n            aria-label={props['aria-label'] ? `${props['aria-label']} opacity` : 'Opacity'}\n            onInput={(e) => {\n              const pct = Number((e.target as HTMLInputElement).value);\n              setAlphaDraft(pct);\n              onInput?.(compose(visibleRgb, pct / 100));\n            }}\n            onPointerUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onPointerCancel={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onKeyUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n          />\n          <span className={s.alphaReadout} aria-hidden=\"true\">{visibleAlphaPct}</span>\n        </>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AC+BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,IAAO,YAAS,aAAU,iBAAc,GACxE,IAAO,EAAO,KAAS,UAAU,EACjC,IAAO,EAAK,MAAM,GAAG,EAAE,EACvB,IAAU,EAAW,EAAK,EAC1B,IAAW,KAAK,MAAM,IAAU,IAAI,EAIpC,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,IAAa,KAAc,GAC3B,IAAkB,KAAc,GAEhC,KAAW,GAAa,MAC5B,IAAQ,EAAY,GAAK,EAAI,GAAG,GAK5B,IAAc,KAAS,MAAe,MAItC,KAAU,GAAa,MAAsB;EAC7C,MAAe,QAAQ,MAAe,SAC1C,EAAS,EAAQ,GAAK,EAAI,CAAC,EAC3B,EAAc,KAAK,EACnB,EAAc,KAAK;;CAGrB,OACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxD,GAAK,KAAS,MAAe,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE;YAF/D,CAIE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,SAAD;IACE,WAAW,EAAE;IACb,MAAK;IACL,OAAO;IACP,cAAY,EAAM,iBAAiB;IACnC,UAAU,MAAM;KACd,IAAM,IAAO,EAAE,OAA4B;KAE3C,AADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAK,IAAkB,IAAI,CAAC;;IAEhD,cAAc,EAAO,GAAY,IAAkB,IAAI;IACvD,CAAA;GACG,CAAA,EACN,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;GACE,WAAW,EAAE;GACb,MAAK;GACL,KAAK;GACL,KAAK;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,cAAY,EAAM,gBAAgB,GAAG,EAAM,cAAc,YAAY;GACrE,UAAU,MAAM;IACd,IAAM,IAAM,OAAQ,EAAE,OAA4B,MAAM;IAExD,AADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAY,IAAM,IAAI,CAAC;;GAE3C,mBAAmB,EAAO,GAAY,IAAkB,IAAI;GAC5D,uBAAuB,EAAO,GAAY,IAAkB,IAAI;GAChE,eAAe,EAAO,GAAY,IAAkB,IAAI;GACxD,cAAc,EAAO,GAAY,IAAkB,IAAI;GACvD,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAc,eAAY;aAAQ;GAAuB,CAAA,CAC3E,EAAA,CAAA,CAEA"}
+{"version":3,"file":"ColorField-sGLnThpB.js","names":[],"sources":["../../src/components/ColorField/ColorField.module.css","../../src/components/ColorField/ColorField.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chip {\n  position: relative;\n  display: inline-flex;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.color {\n  inline-size: 28px;\n  block-size: 20px;\n  padding: 0;\n  border: 1px solid var(--wzl-border, #444);\n  border-radius: 4px;\n  background: none;\n  cursor: pointer;\n}\n\n/* Indeterminate (mixed) presentation: checkerboard overlay atop the\n * swatch. pointer-events: none so the input stays clickable. */\n.root[data-mixed] .chip::after {\n  content: '';\n  position: absolute;\n  inset: 1px;\n  border-radius: 3px;\n  pointer-events: none;\n  background: repeating-conic-gradient(\n      var(--wzl-border, #666) 0% 25%,\n      var(--wzl-surface, #2e2f36) 0% 50%\n    )\n    50% / 8px 8px;\n}\n\n.alphaRange {\n  flex: 1;\n  min-inline-size: 48px;\n  accent-color: var(--wzl-accent, #7ab8d4);\n}\n\n.alphaRange:disabled {\n  opacity: 0.45;\n}\n\n.alphaReadout {\n  min-inline-size: 3ch;\n  text-align: end;\n  font-size: 11px;\n  opacity: 0.7;\n}\n","import { useState } from 'react';\nimport { toHex8, getAlpha01, withAlpha01 } from '@weasel-js/core';\nimport s from './ColorField.module.css';\n\nexport interface ColorFieldProps {\n  /** Current color, `#rrggbb` or `#rrggbbaa`. Omit when `mixed`. */\n  value?: string;\n  /** Indeterminate presentation (multi-selection with differing colors):\n   *  checkered chip, empty value. The first color edit produces a real\n   *  value; the opacity slider stays disabled until then (an alpha-only\n   *  edit would otherwise commit a value composed against the\n   *  placeholder black). */\n  mixed?: boolean;\n  /** Show the opacity slider; emitted values are `#rrggbbaa`. */\n  alpha?: boolean;\n  /** Live value during interaction (picker drag, slider drag). Optional —\n   *  wire it for live preview; omit it for commit-only consumers. */\n  onInput?: (hex: string) => void;\n  /** Committed value — picker close (blur) or slider release. One call\n   *  per user gesture; pair with an undoable write. */\n  onChange: (hex: string) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Compact color editor: native color input + optional opacity slider.\n * Commit semantics are gesture-based (see `onChange`) because native\n * color/range inputs fire `change` continuously during interaction —\n * commit-on-change would emit one undo entry per tick.\n */\nexport function ColorField(props: ColorFieldProps) {\n  const { value, mixed = false, alpha = false, onInput, onChange, className } = props;\n  const hex8 = toHex8(value ?? '#000000');\n  const rgb6 = hex8.slice(0, 7);\n  const alpha01 = getAlpha01(hex8);\n  const alphaPct = Math.round(alpha01 * 100);\n\n  // Drafts track the control during a gesture (the committed prop only\n  // updates after onChange), then reset to follow the prop again.\n  const [colorDraft, setColorDraft] = useState<string | null>(null);\n  const [alphaDraft, setAlphaDraft] = useState<number | null>(null);\n  const visibleRgb = colorDraft ?? rgb6;\n  const visibleAlphaPct = alphaDraft ?? alphaPct;\n\n  const compose = (rgb: string, a01: number): string =>\n    alpha ? withAlpha01(rgb, a01) : rgb;\n\n  // Mixed with no color edit yet: the alpha slider has nothing real to\n  // compose against (rgb6 is the placeholder black), so keep it disabled\n  // until the first color edit lands.\n  const alphaLocked = mixed && colorDraft === null;\n\n  // Commit only when a gesture actually changed something — blur with no\n  // preceding input must not emit (it would create a no-op undo entry).\n  const commit = (rgb: string, a01: number): void => {\n    if (colorDraft === null && alphaDraft === null) return;\n    onChange(compose(rgb, a01));\n    setColorDraft(null);\n    setAlphaDraft(null);\n  };\n\n  return (\n    <span\n      className={[s.root, className].filter(Boolean).join(' ')}\n      {...(mixed && colorDraft === null ? { 'data-mixed': '' } : {})}\n    >\n      <span className={s.chip}>\n        <input\n          className={s.color}\n          type=\"color\"\n          value={visibleRgb}\n          aria-label={props['aria-label'] ?? 'Color'}\n          onInput={(e) => {\n            const rgb = (e.target as HTMLInputElement).value;\n            setColorDraft(rgb);\n            onInput?.(compose(rgb, visibleAlphaPct / 100));\n          }}\n          onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n        />\n      </span>\n      {alpha && (\n        <>\n          <input\n            className={s.alphaRange}\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={visibleAlphaPct}\n            disabled={alphaLocked}\n            aria-label={props['aria-label'] ? `${props['aria-label']} opacity` : 'Opacity'}\n            onInput={(e) => {\n              const pct = Number((e.target as HTMLInputElement).value);\n              setAlphaDraft(pct);\n              onInput?.(compose(visibleRgb, pct / 100));\n            }}\n            onPointerUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onPointerCancel={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onKeyUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n          />\n          <span className={s.alphaReadout} aria-hidden=\"true\">{visibleAlphaPct}</span>\n        </>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AC+BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,IAAO,YAAS,aAAU,iBAAc,GACxE,IAAO,EAAO,KAAS,UAAU,EACjC,IAAO,EAAK,MAAM,GAAG,EAAE,EACvB,IAAU,EAAW,EAAK,EAC1B,IAAW,KAAK,MAAM,IAAU,IAAI,EAIpC,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,IAAa,KAAc,GAC3B,IAAkB,KAAc,GAEhC,KAAW,GAAa,MAC5B,IAAQ,EAAY,GAAK,EAAI,GAAG,GAK5B,IAAc,KAAS,MAAe,MAItC,KAAU,GAAa,MAAsB;AAC7C,QAAe,QAAQ,MAAe,SAC1C,EAAS,EAAQ,GAAK,EAAI,CAAC,EAC3B,EAAc,KAAK,EACnB,EAAc,KAAK;;AAGrB,QACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxD,GAAK,KAAS,MAAe,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE;YAF/D,CAIE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,SAAD;IACE,WAAW,EAAE;IACb,MAAK;IACL,OAAO;IACP,cAAY,EAAM,iBAAiB;IACnC,UAAU,MAAM;KACd,IAAM,IAAO,EAAE,OAA4B;AAE3C,KADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAK,IAAkB,IAAI,CAAC;;IAEhD,cAAc,EAAO,GAAY,IAAkB,IAAI;IACvD,CAAA;GACG,CAAA,EACN,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;GACE,WAAW,EAAE;GACb,MAAK;GACL,KAAK;GACL,KAAK;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,cAAY,EAAM,gBAAgB,GAAG,EAAM,cAAc,YAAY;GACrE,UAAU,MAAM;IACd,IAAM,IAAM,OAAQ,EAAE,OAA4B,MAAM;AAExD,IADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAY,IAAM,IAAI,CAAC;;GAE3C,mBAAmB,EAAO,GAAY,IAAkB,IAAI;GAC5D,uBAAuB,EAAO,GAAY,IAAkB,IAAI;GAChE,eAAe,EAAO,GAAY,IAAkB,IAAI;GACxD,cAAc,EAAO,GAAY,IAAkB,IAAI;GACvD,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAc,eAAY;aAAQ;GAAuB,CAAA,CAC3E,EAAA,CAAA,CAEA"}

package/dist/chunks/{ComboBox-pH8aDEL2.js → ComboBox-CotoRgNi.js}

@@ -85,4 +85,4 @@ function m({ className: e, ...t }) {
 //#endregion
 export { m as n, p as t };
 
-//# sourceMappingURL=ComboBox-pH8aDEL2.js.map
+//# sourceMappingURL=ComboBox-CotoRgNi.js.map

package/dist/chunks/{ComboBox-pH8aDEL2.js.map → ComboBox-CotoRgNi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ComboBox-pH8aDEL2.js","names":[],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: 24px;\n  background: var(--wzl-input-bg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 8px;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 3px;\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: color-mix(in srgb, var(--wzl-fg) 10%, transparent);\n}\n\n.option[data-selected] {\n  font-weight: 500;\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: 6px 8px;\n  color: var(--wzl-fg-subtle);\n  font-size: 12px;\n}\n","import type { ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './ComboBox.module.css';\n\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  className?: string;\n};\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    className,\n    ...rest\n  } = props;\n\n  return (\n    <RACComboBox\n      {...rest}\n      selectedKey={selectedKey ?? undefined}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T | null) : undefined}\n      className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        <RACInput placeholder={placeholder} />\n        <RACButton className={s.openButton} aria-label=\"Show options\">\n          <svg viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </RACButton>\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      <RACPopover className={s.popover}>\n        <RACListBox className={s.listbox} renderEmptyState={() => <div className={s.empty}>{emptyLabel}</div>}>\n          {options !== undefined\n            ? options.map((o) => (\n                <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                  {o.label}\n                </ComboBoxItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AC8CA,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,cACA,GAAG,MACD;CAEJ,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,aAAa,KAAe,KAAA;EACR;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAc,GAAG,KAAA;EACjF,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAL9E;GAOG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB,CACE,kBAAC,GAAD,EAAuB,gBAAe,CAAA,EACtC,kBAAC,GAAD;KAAW,WAAW,EAAE;KAAY,cAAW;eAC7C,kBAAC,OAAD;MAAK,SAAQ;MAAY,eAAY;gBACnC,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI,CAAA,CACR;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACtE,kBAAC,GAAD;IAAY,WAAW,EAAE;cACvB,kBAAC,GAAD;KAAY,WAAW,EAAE;KAAS,wBAAwB,kBAAC,OAAD;MAAK,WAAW,EAAE;gBAAQ;MAAiB,CAAA;eAClG,MAAY,KAAA,IAMT,IALA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAAoC,IAAI,EAAE;MAAO,WAAW,EAAE;MAAW,YAAY,EAAE;gBACpF,EAAE;MACU,EAFI,OAAO,EAAE,MAAM,CAEnB,CACf;KAEK,CAAA;IACF,CAAA;GACD;;;AAQlB,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;CACtE,OAAO,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA"}
+{"version":3,"file":"ComboBox-CotoRgNi.js","names":[],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: 24px;\n  background: var(--wzl-input-bg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger, #ff5b5b);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 8px;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: 13px;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 3px;\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: color-mix(in srgb, var(--wzl-fg) 10%, transparent);\n}\n\n.option[data-selected] {\n  font-weight: 500;\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: 6px 8px;\n  color: var(--wzl-fg-subtle);\n  font-size: 12px;\n}\n","import type { ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './ComboBox.module.css';\n\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  className?: string;\n};\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    className,\n    ...rest\n  } = props;\n\n  return (\n    <RACComboBox\n      {...rest}\n      selectedKey={selectedKey ?? undefined}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T | null) : undefined}\n      className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        <RACInput placeholder={placeholder} />\n        <RACButton className={s.openButton} aria-label=\"Show options\">\n          <svg viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </RACButton>\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      <RACPopover className={s.popover}>\n        <RACListBox className={s.listbox} renderEmptyState={() => <div className={s.empty}>{emptyLabel}</div>}>\n          {options !== undefined\n            ? options.map((o) => (\n                <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                  {o.label}\n                </ComboBoxItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AC8CA,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,aAAa,KAAe,KAAA;EACR;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAc,GAAG,KAAA;EACjF,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAL9E;GAOG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB,CACE,kBAAC,GAAD,EAAuB,gBAAe,CAAA,EACtC,kBAAC,GAAD;KAAW,WAAW,EAAE;KAAY,cAAW;eAC7C,kBAAC,OAAD;MAAK,SAAQ;MAAY,eAAY;gBACnC,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI,CAAA,CACR;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACtE,kBAAC,GAAD;IAAY,WAAW,EAAE;cACvB,kBAAC,GAAD;KAAY,WAAW,EAAE;KAAS,wBAAwB,kBAAC,OAAD;MAAK,WAAW,EAAE;gBAAQ;MAAiB,CAAA;eAClG,MAAY,KAAA,IAMT,IALA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAAoC,IAAI,EAAE;MAAO,WAAW,EAAE;MAAW,YAAY,EAAE;gBACpF,EAAE;MACU,EAFI,OAAO,EAAE,MAAM,CAEnB,CACf;KAEK,CAAA;IACF,CAAA;GACD;;;AAQlB,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;AACtE,QAAO,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA"}

package/dist/chunks/{CurveEditor-DrORWShU.js → CurveEditor-DAb2EMyR.js}

@@ -783,4 +783,4 @@ function L(e, t) {
 //#endregion
 export { M as a, j as i, F as n, y as o, P as r, I as t };
 
-//# sourceMappingURL=CurveEditor-DrORWShU.js.map
+//# sourceMappingURL=CurveEditor-DAb2EMyR.js.map