@flanksource/clicky-ui 0.2.15 → 0.2.16

package/dist/components/loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"loading.cjs","sources":["../../src/components/loading.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LoadingSize = \"sm\" | \"md\" | \"lg\" | \"responsive\";\nexport type LoadingVariant = \"inline\" | \"centered\";\n\nexport interface LoadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size, or `responsive` (default) to scale with the container. */\n  size?: LoadingSize;\n  /** `inline` for a small in-flow loader, `centered` for a section/page loader. */\n  variant?: LoadingVariant;\n  /** Optional caption rendered beside (inline) or beneath (centered) the dots. */\n  label?: ReactNode;\n}\n\nconst FIXED_DOT_SIZE: Record<Exclude<LoadingSize, \"responsive\">, string> = {\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\n// Scales with the nearest `container-type` ancestor's inline size: floors at\n// 1.5rem (24px) in tight panels, climbs to 4.5rem (72px) on full-page loads,\n// interpolating smoothly between. Pure CSS — no ResizeObserver, SSR-safe.\nconst RESPONSIVE_DOT_SIZE = \"size-[clamp(1.5rem,12cqi,4.5rem)]\";\nconst RESPONSIVE_LABEL_SIZE = \"text-[clamp(0.7rem,4cqi,0.95rem)]\";\n\n/**\n * Three bouncing dots. `fill=\"currentColor\"` so the dots inherit the surrounding\n * theme text color (works in light and dark). Size is driven entirely by the\n * className (width + height); the viewBox keeps the 1:1 aspect.\n */\nexport const LoadingDots = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"clickyLoadDotA\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;clickyLoadDotC.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" opacity=\"0.3\">\n        <animate\n          id=\"clickyLoadDotC\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  ),\n);\nLoadingDots.displayName = \"LoadingDots\";\n\n/**\n * Loading indicator built on the shared 3-dot animation.\n *\n * `centered` establishes a size container (`container-type: inline-size`) so the\n * default `responsive` size scales the dots to the space the loader is given —\n * small inside a narrow panel, large on a full-page route shell. The `inline`\n * variant is not a container, so a `responsive` request there renders at `sm`.\n */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n  ({ size = \"responsive\", variant = \"inline\", label, className, ...props }, ref) => {\n    const effectiveSize =\n      variant === \"inline\" && size === \"responsive\" ? \"sm\" : size;\n    const isResponsive = effectiveSize === \"responsive\";\n    const dotClass = isResponsive\n      ? RESPONSIVE_DOT_SIZE\n      : FIXED_DOT_SIZE[effectiveSize];\n\n    if (variant === \"centered\") {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-label=\"Loading\"\n          className={cn(\n            \"flex min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground\",\n            \"[container-type:inline-size]\",\n            className,\n          )}\n          {...props}\n        >\n          <LoadingDots className={dotClass} />\n          {label != null && (\n            <span className={cn(isResponsive ? RESPONSIVE_LABEL_SIZE : \"text-sm\")}>\n              {label}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-flex items-center gap-2 text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <LoadingDots className={dotClass} />\n        {label != null && <span className=\"text-sm\">{label}</span>}\n      </div>\n    );\n  },\n);\nLoading.displayName = \"Loading\";\n"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;AAoBA,MAAM,iBAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAOvB,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,MAAAA,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KACvB,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACAA,2BAAAA,IAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACAA,2BAAAA,IAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,YAAY,cAAc;AAUnB,MAAM,UAAUH,MAAAA;AAAAA,EACrB,CAAC,EAAE,OAAO,cAAc,UAAU,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,UAAM,gBACJ,YAAY,YAAY,SAAS,eAAe,OAAO;AACzD,UAAM,eAAe,kBAAkB;AACvC,UAAM,WAAW,eACb,sBACA,eAAe,aAAa;AAEhC,QAAI,YAAY,YAAY;AAC1B,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAAC,2BAAAA,IAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,YACjC,SAAS,QACRA,+BAAC,QAAA,EAAK,WAAWD,SAAG,eAAe,wBAAwB,SAAS,GACjE,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,UACjC,SAAS,QAAQA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AACA,QAAQ,cAAc;;;"}
+{"version":3,"file":"loading.cjs","sources":["../../src/components/loading.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LoadingSize = \"sm\" | \"md\" | \"lg\" | \"responsive\";\nexport type LoadingVariant = \"inline\" | \"centered\";\n\nexport interface LoadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size, or `responsive` (default) to scale with the container. */\n  size?: LoadingSize;\n  /** `inline` for a small in-flow loader, `centered` for a section/page loader. */\n  variant?: LoadingVariant;\n  /** Optional caption rendered beside (inline) or beneath (centered) the dots. */\n  label?: ReactNode;\n}\n\nconst FIXED_DOT_SIZE: Record<Exclude<LoadingSize, \"responsive\">, string> = {\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\n// Scales with the SMALLER of the container's two dimensions (`cqmin`, enabled by\n// `container-type: size` on the centered wrapper). Using `cqmin` rather than the\n// width alone means a wide-but-short panel reads as small — only a genuinely\n// large area (a full-page load) grows the dots. Floors at 1.25rem (20px) in\n// tight panels, climbs to 2.5rem (40px) on big loads. Pure CSS — no\n// ResizeObserver, SSR-safe.\nconst RESPONSIVE_DOT_SIZE = \"size-[clamp(1.25rem,18cqmin,2.5rem)]\";\nconst RESPONSIVE_LABEL_SIZE = \"text-[clamp(0.72rem,4.5cqmin,0.9rem)]\";\n\n/**\n * Three bouncing dots. `fill=\"currentColor\"` so the dots inherit the surrounding\n * theme text color (works in light and dark). Size is driven entirely by the\n * className (width + height); the viewBox keeps the 1:1 aspect.\n */\nexport const LoadingDots = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"clickyLoadDotA\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;clickyLoadDotC.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" opacity=\"0.3\">\n        <animate\n          id=\"clickyLoadDotC\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  ),\n);\nLoadingDots.displayName = \"LoadingDots\";\n\n/**\n * Loading indicator built on the shared 3-dot animation.\n *\n * `centered` fills the space it is given (`h-full` within a `min-h-32` floor) and\n * establishes a size container (`container-type: size`) so the default\n * `responsive` size scales the dots to that space via `cqmin` — small inside a\n * narrow/short panel, large on a full-page route shell that stretches it tall.\n * The `inline` variant is not a container, so a `responsive` request there\n * renders at `sm`.\n */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n  ({ size = \"responsive\", variant = \"inline\", label, className, ...props }, ref) => {\n    const effectiveSize =\n      variant === \"inline\" && size === \"responsive\" ? \"sm\" : size;\n    const isResponsive = effectiveSize === \"responsive\";\n    const dotClass = isResponsive\n      ? RESPONSIVE_DOT_SIZE\n      : FIXED_DOT_SIZE[effectiveSize];\n\n    if (variant === \"centered\") {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-label=\"Loading\"\n          className={cn(\n            \"flex h-full min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground\",\n            \"[container-type:size]\",\n            className,\n          )}\n          {...props}\n        >\n          <LoadingDots className={dotClass} />\n          {label != null && (\n            <span className={cn(isResponsive ? RESPONSIVE_LABEL_SIZE : \"text-sm\")}>\n              {label}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-flex items-center gap-2 text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <LoadingDots className={dotClass} />\n        {label != null && <span className=\"text-sm\">{label}</span>}\n      </div>\n    );\n  },\n);\nLoading.displayName = \"Loading\";\n"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;AAoBA,MAAM,iBAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQA,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAOvB,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,MAAAA,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KACvB,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACAA,2BAAAA,IAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACAA,2BAAAA,IAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,YAAY,cAAc;AAYnB,MAAM,UAAUH,MAAAA;AAAAA,EACrB,CAAC,EAAE,OAAO,cAAc,UAAU,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,UAAM,gBACJ,YAAY,YAAY,SAAS,eAAe,OAAO;AACzD,UAAM,eAAe,kBAAkB;AACvC,UAAM,WAAW,eACb,sBACA,eAAe,aAAa;AAEhC,QAAI,YAAY,YAAY;AAC1B,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAAC,2BAAAA,IAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,YACjC,SAAS,QACRA,+BAAC,QAAA,EAAK,WAAWD,SAAG,eAAe,wBAAwB,SAAS,GACjE,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,UACjC,SAAS,QAAQA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AACA,QAAQ,cAAc;;;"}

package/dist/components/loading.d.ts

@@ -18,10 +18,12 @@ export declare const LoadingDots: import('react').ForwardRefExoticComponent<Omit
 /**
  * Loading indicator built on the shared 3-dot animation.
  *
- * `centered` establishes a size container (`container-type: inline-size`) so the
- * default `responsive` size scales the dots to the space the loader is given —
- * small inside a narrow panel, large on a full-page route shell. The `inline`
- * variant is not a container, so a `responsive` request there renders at `sm`.
+ * `centered` fills the space it is given (`h-full` within a `min-h-32` floor) and
+ * establishes a size container (`container-type: size`) so the default
+ * `responsive` size scales the dots to that space via `cqmin` — small inside a
+ * narrow/short panel, large on a full-page route shell that stretches it tall.
+ * The `inline` variant is not a container, so a `responsive` request there
+ * renders at `sm`.
  */
 export declare const Loading: import('react').ForwardRefExoticComponent<LoadingProps & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=loading.d.ts.map

package/dist/components/loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../src/components/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;AAC5D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,yEAAyE;IACzE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD;;;;GAIG;AACH,eAAO,MAAM,WAAW,gIA0CvB,CAAC;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,yGAgDnB,CAAC"}
+{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../src/components/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;AAC5D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,yEAAyE;IACzE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAiBD;;;;GAIG;AACH,eAAO,MAAM,WAAW,gIA0CvB,CAAC;AAGF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,yGAgDnB,CAAC"}

package/dist/components/loading.js

@@ -6,8 +6,8 @@ const FIXED_DOT_SIZE = {
   md: "size-6",
   lg: "size-10"
 };
-const RESPONSIVE_DOT_SIZE = "size-[clamp(1.5rem,12cqi,4.5rem)]";
-const RESPONSIVE_LABEL_SIZE = "text-[clamp(0.7rem,4cqi,0.95rem)]";
+const RESPONSIVE_DOT_SIZE = "size-[clamp(1.25rem,18cqmin,2.5rem)]";
+const RESPONSIVE_LABEL_SIZE = "text-[clamp(0.72rem,4.5cqmin,0.9rem)]";
 const LoadingDots = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "svg",
@@ -70,8 +70,8 @@ const Loading = forwardRef(
           role: "status",
           "aria-label": "Loading",
           className: cn(
-            "flex min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground",
-            "[container-type:inline-size]",
+            "flex h-full min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground",
+            "[container-type:size]",
             className
           ),
           ...props,

package/dist/components/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../src/components/loading.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LoadingSize = \"sm\" | \"md\" | \"lg\" | \"responsive\";\nexport type LoadingVariant = \"inline\" | \"centered\";\n\nexport interface LoadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size, or `responsive` (default) to scale with the container. */\n  size?: LoadingSize;\n  /** `inline` for a small in-flow loader, `centered` for a section/page loader. */\n  variant?: LoadingVariant;\n  /** Optional caption rendered beside (inline) or beneath (centered) the dots. */\n  label?: ReactNode;\n}\n\nconst FIXED_DOT_SIZE: Record<Exclude<LoadingSize, \"responsive\">, string> = {\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\n// Scales with the nearest `container-type` ancestor's inline size: floors at\n// 1.5rem (24px) in tight panels, climbs to 4.5rem (72px) on full-page loads,\n// interpolating smoothly between. Pure CSS — no ResizeObserver, SSR-safe.\nconst RESPONSIVE_DOT_SIZE = \"size-[clamp(1.5rem,12cqi,4.5rem)]\";\nconst RESPONSIVE_LABEL_SIZE = \"text-[clamp(0.7rem,4cqi,0.95rem)]\";\n\n/**\n * Three bouncing dots. `fill=\"currentColor\"` so the dots inherit the surrounding\n * theme text color (works in light and dark). Size is driven entirely by the\n * className (width + height); the viewBox keeps the 1:1 aspect.\n */\nexport const LoadingDots = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"clickyLoadDotA\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;clickyLoadDotC.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" opacity=\"0.3\">\n        <animate\n          id=\"clickyLoadDotC\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  ),\n);\nLoadingDots.displayName = \"LoadingDots\";\n\n/**\n * Loading indicator built on the shared 3-dot animation.\n *\n * `centered` establishes a size container (`container-type: inline-size`) so the\n * default `responsive` size scales the dots to the space the loader is given —\n * small inside a narrow panel, large on a full-page route shell. The `inline`\n * variant is not a container, so a `responsive` request there renders at `sm`.\n */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n  ({ size = \"responsive\", variant = \"inline\", label, className, ...props }, ref) => {\n    const effectiveSize =\n      variant === \"inline\" && size === \"responsive\" ? \"sm\" : size;\n    const isResponsive = effectiveSize === \"responsive\";\n    const dotClass = isResponsive\n      ? RESPONSIVE_DOT_SIZE\n      : FIXED_DOT_SIZE[effectiveSize];\n\n    if (variant === \"centered\") {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-label=\"Loading\"\n          className={cn(\n            \"flex min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground\",\n            \"[container-type:inline-size]\",\n            className,\n          )}\n          {...props}\n        >\n          <LoadingDots className={dotClass} />\n          {label != null && (\n            <span className={cn(isResponsive ? RESPONSIVE_LABEL_SIZE : \"text-sm\")}>\n              {label}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-flex items-center gap-2 text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <LoadingDots className={dotClass} />\n        {label != null && <span className=\"text-sm\">{label}</span>}\n      </div>\n    );\n  },\n);\nLoading.displayName = \"Loading\";\n"],"names":[],"mappings":";;;AAoBA,MAAM,iBAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAOvB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,YAAY,cAAc;AAUnB,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,OAAO,cAAc,UAAU,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,UAAM,gBACJ,YAAY,YAAY,SAAS,eAAe,OAAO;AACzD,UAAM,eAAe,kBAAkB;AACvC,UAAM,WAAW,eACb,sBACA,eAAe,aAAa;AAEhC,QAAI,YAAY,YAAY;AAC1B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,YACjC,SAAS,QACR,oBAAC,QAAA,EAAK,WAAW,GAAG,eAAe,wBAAwB,SAAS,GACjE,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,UACjC,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AACA,QAAQ,cAAc;"}
+{"version":3,"file":"loading.js","sources":["../../src/components/loading.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LoadingSize = \"sm\" | \"md\" | \"lg\" | \"responsive\";\nexport type LoadingVariant = \"inline\" | \"centered\";\n\nexport interface LoadingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed size, or `responsive` (default) to scale with the container. */\n  size?: LoadingSize;\n  /** `inline` for a small in-flow loader, `centered` for a section/page loader. */\n  variant?: LoadingVariant;\n  /** Optional caption rendered beside (inline) or beneath (centered) the dots. */\n  label?: ReactNode;\n}\n\nconst FIXED_DOT_SIZE: Record<Exclude<LoadingSize, \"responsive\">, string> = {\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\n// Scales with the SMALLER of the container's two dimensions (`cqmin`, enabled by\n// `container-type: size` on the centered wrapper). Using `cqmin` rather than the\n// width alone means a wide-but-short panel reads as small — only a genuinely\n// large area (a full-page load) grows the dots. Floors at 1.25rem (20px) in\n// tight panels, climbs to 2.5rem (40px) on big loads. Pure CSS — no\n// ResizeObserver, SSR-safe.\nconst RESPONSIVE_DOT_SIZE = \"size-[clamp(1.25rem,18cqmin,2.5rem)]\";\nconst RESPONSIVE_LABEL_SIZE = \"text-[clamp(0.72rem,4.5cqmin,0.9rem)]\";\n\n/**\n * Three bouncing dots. `fill=\"currentColor\"` so the dots inherit the surrounding\n * theme text color (works in light and dark). Size is driven entirely by the\n * className (width + height); the viewBox keeps the 1:1 aspect.\n */\nexport const LoadingDots = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"clickyLoadDotA\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;clickyLoadDotC.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" opacity=\"0.3\">\n        <animate\n          id=\"clickyLoadDotC\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"clickyLoadDotA.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  ),\n);\nLoadingDots.displayName = \"LoadingDots\";\n\n/**\n * Loading indicator built on the shared 3-dot animation.\n *\n * `centered` fills the space it is given (`h-full` within a `min-h-32` floor) and\n * establishes a size container (`container-type: size`) so the default\n * `responsive` size scales the dots to that space via `cqmin` — small inside a\n * narrow/short panel, large on a full-page route shell that stretches it tall.\n * The `inline` variant is not a container, so a `responsive` request there\n * renders at `sm`.\n */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n  ({ size = \"responsive\", variant = \"inline\", label, className, ...props }, ref) => {\n    const effectiveSize =\n      variant === \"inline\" && size === \"responsive\" ? \"sm\" : size;\n    const isResponsive = effectiveSize === \"responsive\";\n    const dotClass = isResponsive\n      ? RESPONSIVE_DOT_SIZE\n      : FIXED_DOT_SIZE[effectiveSize];\n\n    if (variant === \"centered\") {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-label=\"Loading\"\n          className={cn(\n            \"flex h-full min-h-32 w-full flex-col items-center justify-center gap-3 text-muted-foreground\",\n            \"[container-type:size]\",\n            className,\n          )}\n          {...props}\n        >\n          <LoadingDots className={dotClass} />\n          {label != null && (\n            <span className={cn(isResponsive ? RESPONSIVE_LABEL_SIZE : \"text-sm\")}>\n              {label}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-flex items-center gap-2 text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <LoadingDots className={dotClass} />\n        {label != null && <span className=\"text-sm\">{label}</span>}\n      </div>\n    );\n  },\n);\nLoading.displayName = \"Loading\";\n"],"names":[],"mappings":";;;AAoBA,MAAM,iBAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQA,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAOvB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,SAAQ,OACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,YAAY,cAAc;AAYnB,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,OAAO,cAAc,UAAU,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChF,UAAM,gBACJ,YAAY,YAAY,SAAS,eAAe,OAAO;AACzD,UAAM,eAAe,kBAAkB;AACvC,UAAM,WAAW,eACb,sBACA,eAAe,aAAa;AAEhC,QAAI,YAAY,YAAY;AAC1B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,YACjC,SAAS,QACR,oBAAC,QAAA,EAAK,WAAW,GAAG,eAAe,wBAAwB,SAAS,GACjE,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,WAAW,SAAA,CAAU;AAAA,UACjC,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AACA,QAAQ,cAAc;"}

package/dist/components/use-form.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useForm({ values, validate, onSubmit }) {
+  const [touched, setTouched] = react.useState({});
+  const [submitted, setSubmitted] = react.useState(false);
+  const errors = react.useMemo(() => validate(values), [validate, values]);
+  const isValid = react.useMemo(() => !Object.values(errors).some(Boolean), [errors]);
+  const fieldError = react.useCallback(
+    (key) => submitted || touched[key] ? errors[key] : void 0,
+    [submitted, touched, errors]
+  );
+  const markTouched = react.useCallback((key) => {
+    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
+  }, []);
+  const submit = react.useCallback(() => {
+    setSubmitted(true);
+    if (isValid) onSubmit == null ? void 0 : onSubmit(values);
+  }, [isValid, onSubmit, values]);
+  const reset = react.useCallback(() => {
+    setTouched({});
+    setSubmitted(false);
+  }, []);
+  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };
+}
+exports.useForm = useForm;
+//# sourceMappingURL=use-form.cjs.map

package/dist/components/use-form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.cjs","sources":["../../src/components/use-form.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\n\n// FieldErrors maps a field key to its current validation message (or undefined\n// when the field is valid). validate() returns the full map every call so a form\n// can show every problem at once, not just the first.\nexport type FieldErrors = Record<string, string | undefined>;\n\nexport interface UseFormOptions<V> {\n  /** The current form values (owned by the caller). */\n  values: V;\n  /** Pure validator returning all field errors for the given values. */\n  validate: (values: V) => FieldErrors;\n  /** Called by submit() only when the form is valid. */\n  onSubmit?: (values: V) => void;\n}\n\nexport interface UseFormResult {\n  /** Every field's error (independent of touched/submitted). */\n  errors: FieldErrors;\n  /** True when no field has an error. */\n  isValid: boolean;\n  /** True once submit() has been called (reveals all errors). */\n  submitted: boolean;\n  /**\n   * The error to display for a field: present only once the field has been\n   * touched (blurred) or submit() has run, so a pristine form isn't all red.\n   */\n  fieldError: (key: string) => string | undefined;\n  /** Mark a field touched — wire to a field's onBlur. */\n  markTouched: (key: string) => void;\n  /** Reveal all errors; run onSubmit only when valid. */\n  submit: () => void;\n  /** Clear touched + submitted state (e.g. when a dialog reopens). */\n  reset: () => void;\n}\n\n// useForm centralizes the touched/submitted/error bookkeeping a hand-built form\n// needs: it computes per-field errors from the caller's validate(), and gates\n// their display so each error surfaces on blur or on submit. The form values\n// stay owned by the caller (this hook does not store them), so it composes with\n// conditional fields and bespoke layouts.\nexport function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult {\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n  const [submitted, setSubmitted] = useState(false);\n\n  const errors = useMemo(() => validate(values), [validate, values]);\n  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);\n\n  const fieldError = useCallback(\n    (key: string) => (submitted || touched[key] ? errors[key] : undefined),\n    [submitted, touched, errors],\n  );\n\n  const markTouched = useCallback((key: string) => {\n    setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true }));\n  }, []);\n\n  const submit = useCallback(() => {\n    setSubmitted(true);\n    if (isValid) onSubmit?.(values);\n  }, [isValid, onSubmit, values]);\n\n  const reset = useCallback(() => {\n    setTouched({});\n    setSubmitted(false);\n  }, []);\n\n  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };\n}\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;AAyCO,SAAS,QAAW,EAAE,QAAQ,UAAU,YAA8C;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAkC,CAAA,CAAE;AAClE,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,KAAK;AAEhD,QAAM,SAASC,MAAAA,QAAQ,MAAM,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;AACjE,QAAM,UAAUA,MAAAA,QAAQ,MAAM,CAAC,OAAO,OAAO,MAAM,EAAE,KAAK,OAAO,GAAG,CAAC,MAAM,CAAC;AAE5E,QAAM,aAAaC,MAAAA;AAAAA,IACjB,CAAC,QAAiB,aAAa,QAAQ,GAAG,IAAI,OAAO,GAAG,IAAI;AAAA,IAC5D,CAAC,WAAW,SAAS,MAAM;AAAA,EAAA;AAG7B,QAAM,cAAcA,kBAAY,CAAC,QAAgB;AAC/C,eAAW,CAAC,SAAU,KAAK,GAAG,IAAI,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAO;AAAA,EACpE,GAAG,CAAA,CAAE;AAEL,QAAM,SAASA,MAAAA,YAAY,MAAM;AAC/B,iBAAa,IAAI;AACjB,QAAI,8CAAoB;AAAA,EAC1B,GAAG,CAAC,SAAS,UAAU,MAAM,CAAC;AAE9B,QAAM,QAAQA,MAAAA,YAAY,MAAM;AAC9B,eAAW,CAAA,CAAE;AACb,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,QAAQ,SAAS,WAAW,YAAY,aAAa,QAAQ,MAAA;AACxE;;"}

package/dist/components/use-form.d.ts

@@ -0,0 +1,30 @@
+export type FieldErrors = Record<string, string | undefined>;
+export interface UseFormOptions<V> {
+    /** The current form values (owned by the caller). */
+    values: V;
+    /** Pure validator returning all field errors for the given values. */
+    validate: (values: V) => FieldErrors;
+    /** Called by submit() only when the form is valid. */
+    onSubmit?: (values: V) => void;
+}
+export interface UseFormResult {
+    /** Every field's error (independent of touched/submitted). */
+    errors: FieldErrors;
+    /** True when no field has an error. */
+    isValid: boolean;
+    /** True once submit() has been called (reveals all errors). */
+    submitted: boolean;
+    /**
+     * The error to display for a field: present only once the field has been
+     * touched (blurred) or submit() has run, so a pristine form isn't all red.
+     */
+    fieldError: (key: string) => string | undefined;
+    /** Mark a field touched — wire to a field's onBlur. */
+    markTouched: (key: string) => void;
+    /** Reveal all errors; run onSubmit only when valid. */
+    submit: () => void;
+    /** Clear touched + submitted state (e.g. when a dialog reopens). */
+    reset: () => void;
+}
+export declare function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult;
+//# sourceMappingURL=use-form.d.ts.map

package/dist/components/use-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/components/use-form.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAE7D,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,qDAAqD;IACrD,MAAM,EAAE,CAAC,CAAC;IACV,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,WAAW,CAAC;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,8DAA8D;IAC9D,MAAM,EAAE,WAAW,CAAC;IACpB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAChD,uDAAuD;IACvD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,oEAAoE;IACpE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAOD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,aAAa,CA2B3F"}

package/dist/components/use-form.js

@@ -0,0 +1,27 @@
+import { useState, useMemo, useCallback } from "react";
+function useForm({ values, validate, onSubmit }) {
+  const [touched, setTouched] = useState({});
+  const [submitted, setSubmitted] = useState(false);
+  const errors = useMemo(() => validate(values), [validate, values]);
+  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);
+  const fieldError = useCallback(
+    (key) => submitted || touched[key] ? errors[key] : void 0,
+    [submitted, touched, errors]
+  );
+  const markTouched = useCallback((key) => {
+    setTouched((prev) => prev[key] ? prev : { ...prev, [key]: true });
+  }, []);
+  const submit = useCallback(() => {
+    setSubmitted(true);
+    if (isValid) onSubmit == null ? void 0 : onSubmit(values);
+  }, [isValid, onSubmit, values]);
+  const reset = useCallback(() => {
+    setTouched({});
+    setSubmitted(false);
+  }, []);
+  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };
+}
+export {
+  useForm
+};
+//# sourceMappingURL=use-form.js.map

package/dist/components/use-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.js","sources":["../../src/components/use-form.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\n\n// FieldErrors maps a field key to its current validation message (or undefined\n// when the field is valid). validate() returns the full map every call so a form\n// can show every problem at once, not just the first.\nexport type FieldErrors = Record<string, string | undefined>;\n\nexport interface UseFormOptions<V> {\n  /** The current form values (owned by the caller). */\n  values: V;\n  /** Pure validator returning all field errors for the given values. */\n  validate: (values: V) => FieldErrors;\n  /** Called by submit() only when the form is valid. */\n  onSubmit?: (values: V) => void;\n}\n\nexport interface UseFormResult {\n  /** Every field's error (independent of touched/submitted). */\n  errors: FieldErrors;\n  /** True when no field has an error. */\n  isValid: boolean;\n  /** True once submit() has been called (reveals all errors). */\n  submitted: boolean;\n  /**\n   * The error to display for a field: present only once the field has been\n   * touched (blurred) or submit() has run, so a pristine form isn't all red.\n   */\n  fieldError: (key: string) => string | undefined;\n  /** Mark a field touched — wire to a field's onBlur. */\n  markTouched: (key: string) => void;\n  /** Reveal all errors; run onSubmit only when valid. */\n  submit: () => void;\n  /** Clear touched + submitted state (e.g. when a dialog reopens). */\n  reset: () => void;\n}\n\n// useForm centralizes the touched/submitted/error bookkeeping a hand-built form\n// needs: it computes per-field errors from the caller's validate(), and gates\n// their display so each error surfaces on blur or on submit. The form values\n// stay owned by the caller (this hook does not store them), so it composes with\n// conditional fields and bespoke layouts.\nexport function useForm<V>({ values, validate, onSubmit }: UseFormOptions<V>): UseFormResult {\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n  const [submitted, setSubmitted] = useState(false);\n\n  const errors = useMemo(() => validate(values), [validate, values]);\n  const isValid = useMemo(() => !Object.values(errors).some(Boolean), [errors]);\n\n  const fieldError = useCallback(\n    (key: string) => (submitted || touched[key] ? errors[key] : undefined),\n    [submitted, touched, errors],\n  );\n\n  const markTouched = useCallback((key: string) => {\n    setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true }));\n  }, []);\n\n  const submit = useCallback(() => {\n    setSubmitted(true);\n    if (isValid) onSubmit?.(values);\n  }, [isValid, onSubmit, values]);\n\n  const reset = useCallback(() => {\n    setTouched({});\n    setSubmitted(false);\n  }, []);\n\n  return { errors, isValid, submitted, fieldError, markTouched, submit, reset };\n}\n"],"names":[],"mappings":";AAyCO,SAAS,QAAW,EAAE,QAAQ,UAAU,YAA8C;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkC,CAAA,CAAE;AAClE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;AACjE,QAAM,UAAU,QAAQ,MAAM,CAAC,OAAO,OAAO,MAAM,EAAE,KAAK,OAAO,GAAG,CAAC,MAAM,CAAC;AAE5E,QAAM,aAAa;AAAA,IACjB,CAAC,QAAiB,aAAa,QAAQ,GAAG,IAAI,OAAO,GAAG,IAAI;AAAA,IAC5D,CAAC,WAAW,SAAS,MAAM;AAAA,EAAA;AAG7B,QAAM,cAAc,YAAY,CAAC,QAAgB;AAC/C,eAAW,CAAC,SAAU,KAAK,GAAG,IAAI,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAO;AAAA,EACpE,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,iBAAa,IAAI;AACjB,QAAI,8CAAoB;AAAA,EAC1B,GAAG,CAAC,SAAS,UAAU,MAAM,CAAC;AAE9B,QAAM,QAAQ,YAAY,MAAM;AAC9B,eAAW,CAAA,CAAE;AACb,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,QAAQ,SAAS,WAAW,YAAY,aAAa,QAAQ,MAAA;AACxE;"}

package/dist/components.cjs

@@ -16,6 +16,8 @@ const FilterBar = require("./components/FilterBar.cjs");
 const MultiSelect = require("./components/MultiSelect.cjs");
 const select = require("./components/select.cjs");
 const Combobox = require("./components/Combobox.cjs");
+const Field = require("./components/Field.cjs");
+const useForm = require("./components/use-form.cjs");
 const TreePickerField = require("./components/TreePickerField.cjs");
 const WorkloadPicker = require("./components/WorkloadPicker.cjs");
 const workloadPickerUtils = require("./components/workload-picker-utils.cjs");
@@ -32,6 +34,7 @@ const Section = require("./layout/Section.cjs");
 const DropdownMenu = require("./overlay/DropdownMenu.cjs");
 const HoverCard = require("./overlay/HoverCard.cjs");
 const Modal = require("./overlay/Modal.cjs");
+const modalStack = require("./overlay/modalStack.cjs");
 exports.Button = button.Button;
 exports.Loading = loading.Loading;
 exports.LoadingDots = loading.LoadingDots;
@@ -46,9 +49,12 @@ exports.DateTimePicker = DateTimePicker.DateTimePicker;
 exports.TimeRange = TimeRange.TimeRange;
 exports.RangeSlider = RangeSlider.RangeSlider;
 exports.FilterBar = FilterBar.FilterBar;
+exports.applyFilterExtensions = FilterBar.applyFilterExtensions;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Select = select.Select;
 exports.Combobox = Combobox.Combobox;
+exports.Field = Field.Field;
+exports.useForm = useForm.useForm;
 exports.TreePickerField = TreePickerField.TreePickerField;
 exports.WorkloadPicker = WorkloadPicker.WorkloadPicker;
 exports.kindForValue = workloadPickerUtils.kindForValue;
@@ -74,4 +80,5 @@ exports.Section = Section.Section;
 exports.DropdownMenu = DropdownMenu.DropdownMenu;
 exports.HoverCard = HoverCard.HoverCard;
 exports.Modal = Modal.Modal;
+exports.useModalStack = modalStack.useModalStack;
 //# sourceMappingURL=components.cjs.map

package/dist/components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.d.ts

@@ -10,10 +10,12 @@ export { DatePicker, type DatePickerProps } from './components/DatePicker';
 export { DateTimePicker, type DateTimePickerProps } from './components/DateTimePicker';
 export { TimeRange, type TimeRangeKind, type TimeRangePreset, type TimeRangePresetGroup, type TimeRangeProps, } from './components/TimeRange';
 export { RangeSlider, type RangeSliderProps, type RangeSliderValue, } from './components/RangeSlider';
-export { FilterBar, type FilterBarBooleanFilter, type FilterBarEnumFilter, type FilterBarFilter, type FilterBarLookupFilter, type FilterBarLookupInputType, type FilterBarLookupMultiFilter, type FilterBarLookupOption, type FilterBarMultiFilter, type FilterBarMultiFilterMode, type FilterBarNestedMultiFilter, type FilterBarNestedMultiGroup, type FilterBarNumberFilter, type FilterBarNumberValue, type FilterBarProps, type FilterBarRangePreset, type FilterBarRangeProps, type FilterBarSearchProps, type FilterBarSelectMultiFilter, type FilterBarTextFilter, } from './components/FilterBar';
+export { FilterBar, applyFilterExtensions, type FilterExtension, type FilterBarBooleanFilter, type FilterBarEnumFilter, type FilterBarFilter, type FilterBarLookupFilter, type FilterBarLookupInputType, type FilterBarLookupMultiFilter, type FilterBarLookupOption, type FilterBarMultiFilter, type FilterBarMultiFilterMode, type FilterBarNestedMultiFilter, type FilterBarNestedMultiGroup, type FilterBarNumberFilter, type FilterBarNumberValue, type FilterBarProps, type FilterBarRangePreset, type FilterBarRangeProps, type FilterBarSearchProps, type FilterBarSelectMultiFilter, type FilterBarTextFilter, } from './components/FilterBar';
 export { MultiSelect, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect';
 export { Select, type SelectProps, type SelectOption } from './components/select';
 export { Combobox, type ComboboxProps, type ComboboxOption, type ComboboxSingleProps, type ComboboxMultiProps, } from './components/Combobox';
+export { Field, type FieldProps } from './components/Field';
+export { useForm, type UseFormOptions, type UseFormResult, type FieldErrors, } from './components/use-form';
 export { TreePickerField, type TreePickerFieldProps } from './components/TreePickerField';
 export { WorkloadPicker, type WorkloadPickerProps } from './components/WorkloadPicker';
 export { workloadKey, parseWorkloadKey, kindForValue, loadedWorkloads, type WorkloadKind, type WorkloadResource, type ParsedWorkloadKey, } from './components/workload-picker-utils';
@@ -33,4 +35,5 @@ export { Section, DetailEmptyState, type SectionProps, type DetailEmptyStateProp
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuItem, } from './overlay/DropdownMenu';
 export { HoverCard, type HoverCardProps, type HoverCardPlacement } from './overlay/HoverCard';
 export { Modal, type ModalProps, type ModalSize } from './overlay/Modal';
+export { useModalStack, type ModalStackPosition } from './overlay/modalStack';
 //# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}

package/dist/components.js

@@ -10,10 +10,12 @@ import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
 import { TimeRange } from "./components/TimeRange.js";
 import { RangeSlider } from "./components/RangeSlider.js";
-import { FilterBar } from "./components/FilterBar.js";
+import { FilterBar, applyFilterExtensions } from "./components/FilterBar.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { Combobox } from "./components/Combobox.js";
+import { Field } from "./components/Field.js";
+import { useForm } from "./components/use-form.js";
 import { TreePickerField } from "./components/TreePickerField.js";
 import { WorkloadPicker } from "./components/WorkloadPicker.js";
 import { kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/workload-picker-utils.js";
@@ -30,6 +32,7 @@ import { DetailEmptyState, Section } from "./layout/Section.js";
 import { DropdownMenu } from "./overlay/DropdownMenu.js";
 import { HoverCard } from "./overlay/HoverCard.js";
 import { Modal } from "./overlay/Modal.js";
+import { useModalStack } from "./overlay/modalStack.js";
 export {
   Button,
   CLICKY_FORMAT_OPTIONS,
@@ -42,6 +45,7 @@ export {
   DensitySwitcher,
   DetailEmptyState,
   DropdownMenu,
+  Field,
   FilterBar,
   FormatOptionsDropdown,
   HoverCard,
@@ -62,6 +66,7 @@ export {
   TimeRange,
   TreePickerField,
   WorkloadPicker,
+  applyFilterExtensions,
   buttonVariants,
   effectiveProperties,
   isOpenStringMap,
@@ -71,6 +76,8 @@ export {
   parseWorkloadKey,
   readPreferences,
   resolveControl,
+  useForm,
+  useModalStack,
   workloadKey,
   writePreferences
 };

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data/version-info.cjs

@@ -15,9 +15,9 @@ function detectMode() {
 }
 function getVersionInfo() {
   return {
-    commit: read(() => "9003843", ""),
-    tag: read(() => "clicky-ui@0.2.14", ""),
-    date: read(() => "2026-06-11T06:28:27.843Z", ""),
+    commit: read(() => "815fc3b", ""),
+    tag: read(() => "clicky-ui@0.2.15", ""),
+    date: read(() => "2026-06-11T10:01:07.060Z", ""),
     dirty: read(() => true, false),
     mode: detectMode()
   };

package/dist/data/version-info.js

@@ -13,9 +13,9 @@ function detectMode() {
 }
 function getVersionInfo() {
   return {
-    commit: read(() => "9003843", ""),
-    tag: read(() => "clicky-ui@0.2.14", ""),
-    date: read(() => "2026-06-11T06:28:15.522Z", ""),
+    commit: read(() => "815fc3b", ""),
+    tag: read(() => "clicky-ui@0.2.15", ""),
+    date: read(() => "2026-06-11T10:00:55.956Z", ""),
     dirty: read(() => true, false),
     mode: detectMode()
   };

package/dist/index.cjs

@@ -27,6 +27,8 @@ const FilterBar = require("./components/FilterBar.cjs");
 const MultiSelect = require("./components/MultiSelect.cjs");
 const select = require("./components/select.cjs");
 const Combobox = require("./components/Combobox.cjs");
+const Field = require("./components/Field.cjs");
+const useForm = require("./components/use-form.cjs");
 const TreePickerField = require("./components/TreePickerField.cjs");
 const WorkloadPicker = require("./components/WorkloadPicker.cjs");
 const workloadPickerUtils = require("./components/workload-picker-utils.cjs");
@@ -43,6 +45,7 @@ const Section = require("./layout/Section.cjs");
 const DropdownMenu = require("./overlay/DropdownMenu.cjs");
 const HoverCard = require("./overlay/HoverCard.cjs");
 const Modal = require("./overlay/Modal.cjs");
+const modalStack = require("./overlay/modalStack.cjs");
 const AnsiHtml = require("./data/AnsiHtml.cjs");
 const Avatar = require("./data/Avatar.cjs");
 const AvatarBadge = require("./data/AvatarBadge.cjs");
@@ -433,9 +436,12 @@ exports.DateTimePicker = DateTimePicker.DateTimePicker;
 exports.TimeRange = TimeRange.TimeRange;
 exports.RangeSlider = RangeSlider.RangeSlider;
 exports.FilterBar = FilterBar.FilterBar;
+exports.applyFilterExtensions = FilterBar.applyFilterExtensions;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Select = select.Select;
 exports.Combobox = Combobox.Combobox;
+exports.Field = Field.Field;
+exports.useForm = useForm.useForm;
 exports.TreePickerField = TreePickerField.TreePickerField;
 exports.WorkloadPicker = WorkloadPicker.WorkloadPicker;
 exports.kindForValue = workloadPickerUtils.kindForValue;
@@ -461,6 +467,7 @@ exports.Section = Section.Section;
 exports.DropdownMenu = DropdownMenu.DropdownMenu;
 exports.HoverCard = HoverCard.HoverCard;
 exports.Modal = Modal.Modal;
+exports.useModalStack = modalStack.useModalStack;
 exports.AnsiHtml = AnsiHtml.AnsiHtml;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarBadge = AvatarBadge.AvatarBadge;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -21,10 +21,12 @@ import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
 import { TimeRange } from "./components/TimeRange.js";
 import { RangeSlider } from "./components/RangeSlider.js";
-import { FilterBar } from "./components/FilterBar.js";
+import { FilterBar, applyFilterExtensions } from "./components/FilterBar.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { Combobox } from "./components/Combobox.js";
+import { Field } from "./components/Field.js";
+import { useForm } from "./components/use-form.js";
 import { TreePickerField } from "./components/TreePickerField.js";
 import { WorkloadPicker } from "./components/WorkloadPicker.js";
 import { kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/workload-picker-utils.js";
@@ -41,6 +43,7 @@ import { DetailEmptyState, Section } from "./layout/Section.js";
 import { DropdownMenu } from "./overlay/DropdownMenu.js";
 import { HoverCard } from "./overlay/HoverCard.js";
 import { Modal } from "./overlay/Modal.js";
+import { useModalStack } from "./overlay/modalStack.js";
 import { AnsiHtml } from "./data/AnsiHtml.js";
 import { Avatar } from "./data/Avatar.js";
 import { AvatarBadge } from "./data/AvatarBadge.js";
@@ -435,6 +438,7 @@ export {
   EndpointList,
   EntityExplorerApp,
   ErrorDetails,
+  Field,
   FilterBar,
   FilterForm,
   FilterPill,
@@ -1006,6 +1010,7 @@ export {
   Version,
   WorkloadPicker,
   allGroupsTerminal,
+  applyFilterExtensions,
   badgeVariants,
   bucketTasks,
   buttonVariants,
@@ -1108,7 +1113,9 @@ export {
   totalDuration,
   useDensity,
   useDensityValue,
+  useForm,
   useHistoryRoute,
+  useModalStack,
   useOpenAPI,
   useOperationById,
   useOperations,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/overlay/Modal.cjs

@@ -26,6 +26,7 @@ function Modal({
   onClose,
   confirmClose = false,
   title,
+  subtitle,
   size = "md",
   closeOnBackdrop = false,
   closeOnEsc = true,
@@ -100,29 +101,32 @@ function Modal({
           ),
           onClick: (e) => e.stopPropagation(),
           children: [
-            (title || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border", children: [
-              title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold flex-1", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
-              headerSlot,
-              expandable && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setExpanded((v) => !v),
-                  "aria-label": expanded ? "Restore size" : "Expand to fullscreen",
-                  className: "text-muted-foreground hover:text-foreground",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: expanded ? UiFullscreen.UiFullscreenFilled : UiFullscreen.UiFullscreen })
-                }
-              ),
-              !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: requestClose,
-                  "aria-label": "Close",
-                  className: "text-muted-foreground hover:text-foreground",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose })
-                }
-              )
+            (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-density-4 py-density-3 border-b border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
+                title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold flex-1", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+                headerSlot,
+                expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setExpanded((v) => !v),
+                    "aria-label": expanded ? "Restore size" : "Expand to fullscreen",
+                    className: "text-muted-foreground hover:text-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: expanded ? UiFullscreen.UiFullscreenFilled : UiFullscreen.UiFullscreen })
+                  }
+                ),
+                !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: requestClose,
+                    "aria-label": "Close",
+                    className: "text-muted-foreground hover:text-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose })
+                  }
+                )
+              ] }),
+              subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-density-2", children: subtitle }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto px-density-4 py-density-3", children }),
             footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer }),