@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/Drawer/Drawer2.js

@@ -1,76 +1,94 @@
 /* empty css       */
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Drawer/Drawer.tsx
-var o = {
+var s = {
 	narrow: "400px",
 	medium: "520px",
 	wide: "900px"
 };
-function s({ isOpen: s, onClose: c, title: l, subtitle: u, width: d = "medium", children: f, footer: p, className: m = "", ariaLabelledBy: h, ariaDescribedBy: g, closeLabel: _ = "Close" }) {
-	let v = n(null), y = n(null), b = n(null), [x, S] = r(!1), C = n(!1);
+function c({ isOpen: c, onClose: l, title: u, subtitle: d, width: f = "medium", children: p, footer: m, className: h = "", ariaLabelledBy: g, ariaDescribedBy: _, closeLabel: v = "Close", preventDismiss: y = !1, onDismissAttempt: b }) {
+	let x = r(null), S = n(), [C, w] = i(!1), T = r(y);
+	T.current = y;
+	let E = r(b);
+	E.current = b;
+	let D = r(l);
+	D.current = l;
+	let O = e(() => {
+		D.current();
+	}, []), k = e(() => T.current ? (w(!0), E.current?.(), !0) : !1, []), A = e((e) => {
+		e.animationName === "drawer-shake" && w(!1);
+	}, []), j = r(null), M = r(null), [N, P] = i(!1), F = r(!1);
 	t(() => {
-		s && !C.current ? (C.current = !0, requestAnimationFrame(() => {
+		c && !F.current ? (F.current = !0, requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				S(!0);
+				P(!0);
 			});
-		})) : S(!!s);
-	}, [s]);
-	let w = s && x, T = d in o ? o[d] : d, E = h || "drawer-title", D = g || (u ? "drawer-subtitle" : void 0);
+		})) : P(!!c);
+	}, [c]);
+	let I = c && N, L = f in s ? s[f] : f, R = g ?? `${S}-title`, z = _ ?? (d ? `${S}-subtitle` : void 0);
 	t(() => {
-		if (!s) return;
-		y.current = document.activeElement;
-		let e = v.current;
+		if (!I) return;
+		j.current = document.activeElement;
+		let e = x.current;
 		if (!e) return;
-		requestAnimationFrame(() => {
-			b.current?.focus();
-		});
+		M.current?.focus();
 		let t = e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"), n = t[0], r = t[t.length - 1], i = (e) => {
 			if (e.key === "Escape") {
-				c();
+				if (k()) return;
+				O();
 				return;
 			}
 			e.key === "Tab" && (e.shiftKey ? document.activeElement === n && (e.preventDefault(), r?.focus()) : document.activeElement === r && (e.preventDefault(), n?.focus()));
 		};
 		return e.addEventListener("keydown", i), () => {
-			e.removeEventListener("keydown", i), y.current && y.current.focus();
+			e.removeEventListener("keydown", i), j.current && j.current.focus();
 		};
-	}, [s, c]);
-	let O = e((e) => {
-		e.target === e.currentTarget && c();
-	}, [c]);
-	return /* @__PURE__ */ i("div", {
-		className: `drawer__backdrop ${w ? "drawer__backdrop--open" : ""}`,
-		onClick: O,
+	}, [
+		I,
+		O,
+		k
+	]);
+	let B = e((e) => {
+		if (e.target === e.currentTarget) {
+			if (k()) return;
+			O();
+		}
+	}, [O, k]);
+	return /* @__PURE__ */ a("div", {
+		className: `drawer__backdrop ${I ? "drawer__backdrop--open" : ""}`,
+		onClick: B,
 		role: "presentation",
-		"aria-hidden": !s,
-		children: /* @__PURE__ */ a("aside", {
-			ref: v,
-			className: `drawer ${w ? "drawer--open" : ""} ${m}`,
+		"aria-hidden": !c,
+		inert: !c,
+		children: /* @__PURE__ */ o("aside", {
+			ref: x,
+			className: `drawer ${I ? "drawer--open" : ""} ${C ? "drawer--shaking" : ""} ${h}`,
 			style: {
-				width: T,
+				width: L,
 				maxWidth: "100vw"
 			},
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": E,
-			"aria-describedby": D,
+			"aria-labelledby": R,
+			"aria-describedby": z,
+			onAnimationEnd: A,
 			children: [
-				/* @__PURE__ */ a("header", {
+				/* @__PURE__ */ o("header", {
 					className: "drawer__header",
-					children: [/* @__PURE__ */ a("div", {
+					children: [/* @__PURE__ */ o("div", {
 						className: "drawer__title-row",
-						children: [/* @__PURE__ */ i("h2", {
-							id: E,
+						children: [/* @__PURE__ */ a("h2", {
+							id: R,
 							className: "drawer__title",
-							children: l
-						}), /* @__PURE__ */ i("button", {
-							ref: b,
+							children: u
+						}), /* @__PURE__ */ a("button", {
+							ref: M,
 							type: "button",
 							className: "drawer__close-btn",
-							onClick: c,
-							"aria-label": _,
-							children: /* @__PURE__ */ a("svg", {
+							onClick: O,
+							"aria-label": v,
+							children: /* @__PURE__ */ o("svg", {
 								width: "20",
 								height: "20",
 								viewBox: "0 0 24 24",
@@ -79,29 +97,29 @@ function s({ isOpen: s, onClose: c, title: l, subtitle: u, width: d = "medium",
 								strokeWidth: "2",
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
-								children: [/* @__PURE__ */ i("path", { d: "M18 6L6 18" }), /* @__PURE__ */ i("path", { d: "M6 6l12 12" })]
+								children: [/* @__PURE__ */ a("path", { d: "M18 6L6 18" }), /* @__PURE__ */ a("path", { d: "M6 6l12 12" })]
 							})
 						})]
-					}), u && /* @__PURE__ */ i("p", {
-						id: D,
+					}), d && /* @__PURE__ */ a("p", {
+						id: z,
 						className: "drawer__subtitle",
-						children: u
+						children: d
 					})]
 				}),
-				/* @__PURE__ */ i("div", {
+				/* @__PURE__ */ a("div", {
 					className: "drawer__content",
-					children: f
+					children: p
 				}),
-				p && /* @__PURE__ */ i("footer", {
+				m && /* @__PURE__ */ a("footer", {
 					className: "drawer__footer",
-					children: p
+					children: m
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { s as Drawer };
+export { c as Drawer };
 
 //# sourceMappingURL=Drawer2.js.map
 import "../../assets/components/Drawer/Drawer.css";

package/dist/components/Drawer/Drawer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer2.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer Component\n *\n * A reusable right-side drawer panel with backdrop, animations, and accessibility features.\n * Consolidates common patterns from all drawer implementations.\n */\n\nimport { useEffect, useRef, useCallback, useState } from \"react\";\nimport \"./Drawer.css\";\n\nexport interface DrawerProps {\n  /** Whether the drawer is open */\n  isOpen: boolean;\n  /** Callback when drawer should close */\n  onClose: () => void;\n  /** Drawer title */\n  title: React.ReactNode;\n  /** Optional subtitle */\n  subtitle?: React.ReactNode;\n  /** Drawer width preset or custom CSS width value */\n  width?: \"narrow\" | \"medium\" | \"wide\" | (string & Record<never, never>);\n  /** Drawer content */\n  children: React.ReactNode;\n  /** Optional footer content */\n  footer?: React.ReactNode;\n  /** Additional CSS class for drawer panel */\n  className?: string;\n  /** ARIA labelledby ID (defaults to internal title ID) */\n  ariaLabelledBy?: string;\n  /** ARIA describedby ID (defaults to internal subtitle ID if subtitle exists) */\n  ariaDescribedBy?: string;\n  /** Accessible label for the close button. Default: \"Close\" */\n  closeLabel?: string;\n}\n\nconst WIDTH_PRESETS = {\n  narrow: \"400px\",\n  medium: \"520px\",\n  wide: \"900px\",\n};\n\nexport function Drawer({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  width = \"medium\",\n  children,\n  footer,\n  className = \"\",\n  ariaLabelledBy,\n  ariaDescribedBy,\n  closeLabel = \"Close\",\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n  // Track if this is the first render to enable animation on initial open\n  // Without this, when the component mounts with isOpen=true, there's no\n  // transition because CSS transitions only apply to state changes, not initial renders.\n  const [shouldAnimate, setShouldAnimate] = useState(false);\n  const hasInitialized = useRef(false);\n\n  useEffect(() => {\n    if (isOpen && !hasInitialized.current) {\n      // First time opening - delay adding open class to trigger animation\n      hasInitialized.current = true;\n      // Use double rAF to ensure the closed state is painted first\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setShouldAnimate(true);\n        });\n      });\n    } else if (isOpen) {\n      setShouldAnimate(true);\n    } else {\n      setShouldAnimate(false);\n    }\n  }, [isOpen]);\n\n  // Compute the actual open state for CSS classes\n  const isVisuallyOpen = isOpen && shouldAnimate;\n\n  // Compute width value\n  const widthValue =\n    width in WIDTH_PRESETS ? WIDTH_PRESETS[width as keyof typeof WIDTH_PRESETS] : width;\n\n  // Internal IDs for ARIA\n  const titleId = ariaLabelledBy || \"drawer-title\";\n  const subtitleId = ariaDescribedBy || (subtitle ? \"drawer-subtitle\" : undefined);\n\n  // Focus management and trap\n  useEffect(() => {\n    if (!isOpen) return;\n\n    // Store previously focused element\n    previousActiveElementRef.current = document.activeElement as HTMLElement;\n\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n\n    // Focus close button when drawer opens\n    requestAnimationFrame(() => {\n      closeButtonRef.current?.focus();\n    });\n\n    // Setup focus trap\n    const focusableElements = drawer.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    const firstFocusable = focusableElements[0];\n    const lastFocusable = focusableElements[focusableElements.length - 1];\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Escape to close\n      if (e.key === \"Escape\") {\n        onClose();\n        return;\n      }\n\n      // Tab key focus trap\n      if (e.key === \"Tab\") {\n        if (e.shiftKey) {\n          // Shift + Tab\n          if (document.activeElement === firstFocusable) {\n            e.preventDefault();\n            lastFocusable?.focus();\n          }\n        } else {\n          // Tab\n          if (document.activeElement === lastFocusable) {\n            e.preventDefault();\n            firstFocusable?.focus();\n          }\n        }\n      }\n    };\n\n    drawer.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      drawer.removeEventListener(\"keydown\", handleKeyDown);\n      // Restore focus when drawer closes\n      if (previousActiveElementRef.current) {\n        previousActiveElementRef.current.focus();\n      }\n    };\n  }, [isOpen, onClose]);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  return (\n    <div\n      className={`drawer__backdrop ${isVisuallyOpen ? \"drawer__backdrop--open\" : \"\"}`}\n      onClick={handleBackdropClick}\n      role=\"presentation\"\n      aria-hidden={!isOpen}\n    >\n      <aside\n        ref={drawerRef}\n        className={`drawer ${isVisuallyOpen ? \"drawer--open\" : \"\"} ${className}`}\n        style={{ width: widthValue, maxWidth: \"100vw\" }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={subtitleId}\n      >\n        {/* Header */}\n        <header className=\"drawer__header\">\n          <div className=\"drawer__title-row\">\n            <h2 id={titleId} className=\"drawer__title\">\n              {title}\n            </h2>\n            <button\n              ref={closeButtonRef}\n              type=\"button\"\n              className=\"drawer__close-btn\"\n              onClick={onClose}\n              aria-label={closeLabel}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M18 6L6 18\" />\n                <path d=\"M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          {subtitle && (\n            <p id={subtitleId} className=\"drawer__subtitle\">\n              {subtitle}\n            </p>\n          )}\n        </header>\n\n        {/* Content */}\n        <div className=\"drawer__content\">{children}</div>\n\n        {/* Footer */}\n        {footer && <footer className=\"drawer__footer\">{footer}</footer>}\n      </aside>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Drawer2.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer Component\n *\n * A reusable right-side drawer panel with backdrop, animations, and accessibility features.\n * Consolidates common patterns from all drawer implementations.\n */\n\nimport { useEffect, useRef, useCallback, useId, useState } from \"react\";\nimport \"./Drawer.css\";\n\nexport interface DrawerProps {\n  /** Whether the drawer is open */\n  isOpen: boolean;\n  /** Callback when drawer should close */\n  onClose: () => void;\n  /** Drawer title */\n  title: React.ReactNode;\n  /** Optional subtitle */\n  subtitle?: React.ReactNode;\n  /** Drawer width preset or custom CSS width value */\n  width?: \"narrow\" | \"medium\" | \"wide\" | (string & Record<never, never>);\n  /** Drawer content */\n  children: React.ReactNode;\n  /** Optional footer content */\n  footer?: React.ReactNode;\n  /** Additional CSS class for drawer panel */\n  className?: string;\n  /** ARIA labelledby ID (defaults to internal title ID) */\n  ariaLabelledBy?: string;\n  /** ARIA describedby ID (defaults to internal subtitle ID if subtitle exists) */\n  ariaDescribedBy?: string;\n  /** Accessible label for the close button. Default: \"Close\" */\n  closeLabel?: string;\n  /**\n   * Refuse dismissal by Escape or a backdrop click, shaking the panel instead.\n   * The close button and any footer control still call `onClose` directly, so\n   * route those through the same guard when they also need confirming.\n   */\n  preventDismiss?: boolean;\n  /**\n   * Called when `preventDismiss` blocked a dismissal, so the consumer can offer\n   * an explicit way out (a discard confirmation, for instance).\n   */\n  onDismissAttempt?: () => void;\n}\n\nconst WIDTH_PRESETS = {\n  narrow: \"400px\",\n  medium: \"520px\",\n  wide: \"900px\",\n};\n\nexport function Drawer({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  width = \"medium\",\n  children,\n  footer,\n  className = \"\",\n  ariaLabelledBy,\n  ariaDescribedBy,\n  closeLabel = \"Close\",\n  preventDismiss = false,\n  onDismissAttempt,\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const generatedId = useId();\n\n  const [isShaking, setIsShaking] = useState(false);\n\n  // Read the guard through refs so `blockDismiss` keeps a stable identity. The\n  // focus-management effect depends on it, and if the identity changed the\n  // moment the consumer marks the drawer dirty, that effect would re-run on the\n  // first keystroke and steal focus from the field being typed into.\n  const preventDismissRef = useRef(preventDismiss);\n  preventDismissRef.current = preventDismiss;\n  const onDismissAttemptRef = useRef(onDismissAttempt);\n  onDismissAttemptRef.current = onDismissAttempt;\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n\n  const requestClose = useCallback(() => {\n    onCloseRef.current();\n  }, []);\n\n  /** Blocks a dismissal when the guard is on. Returns whether it blocked. */\n  const blockDismiss = useCallback(() => {\n    if (!preventDismissRef.current) return false;\n    setIsShaking(true);\n    onDismissAttemptRef.current?.();\n    return true;\n  }, []);\n\n  // Guarded on the animation name so an unrelated animation on the panel does\n  // not clear the flag early.\n  const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {\n    if (e.animationName === \"drawer-shake\") setIsShaking(false);\n  }, []);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n  // Track if this is the first render to enable animation on initial open\n  // Without this, when the component mounts with isOpen=true, there's no\n  // transition because CSS transitions only apply to state changes, not initial renders.\n  const [shouldAnimate, setShouldAnimate] = useState(false);\n  const hasInitialized = useRef(false);\n\n  useEffect(() => {\n    if (isOpen && !hasInitialized.current) {\n      // First time opening - delay adding open class to trigger animation\n      hasInitialized.current = true;\n      // Use double rAF to ensure the closed state is painted first\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setShouldAnimate(true);\n        });\n      });\n    } else if (isOpen) {\n      setShouldAnimate(true);\n    } else {\n      setShouldAnimate(false);\n    }\n  }, [isOpen]);\n\n  // Compute the actual open state for CSS classes\n  const isVisuallyOpen = isOpen && shouldAnimate;\n\n  // Compute width value\n  const widthValue =\n    width in WIDTH_PRESETS ? WIDTH_PRESETS[width as keyof typeof WIDTH_PRESETS] : width;\n\n  // Internal IDs for ARIA\n  const titleId = ariaLabelledBy ?? `${generatedId}-title`;\n  const subtitleId =\n    ariaDescribedBy ?? (subtitle ? `${generatedId}-subtitle` : undefined);\n\n  // Focus management and trap\n  useEffect(() => {\n    // Wait until the open classes have committed so focus never enters a\n    // backdrop that is still hidden and non-interactive.\n    if (!isVisuallyOpen) return;\n\n    // Store previously focused element\n    previousActiveElementRef.current = document.activeElement as HTMLElement;\n\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n\n    // Focus close button when drawer opens\n    closeButtonRef.current?.focus();\n\n    // Setup focus trap\n    const focusableElements = drawer.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    const firstFocusable = focusableElements[0];\n    const lastFocusable = focusableElements[focusableElements.length - 1];\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Escape to close, unless the guard blocks it\n      if (e.key === \"Escape\") {\n        if (blockDismiss()) return;\n        requestClose();\n        return;\n      }\n\n      // Tab key focus trap\n      if (e.key === \"Tab\") {\n        if (e.shiftKey) {\n          // Shift + Tab\n          if (document.activeElement === firstFocusable) {\n            e.preventDefault();\n            lastFocusable?.focus();\n          }\n        } else {\n          // Tab\n          if (document.activeElement === lastFocusable) {\n            e.preventDefault();\n            firstFocusable?.focus();\n          }\n        }\n      }\n    };\n\n    drawer.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      drawer.removeEventListener(\"keydown\", handleKeyDown);\n      // Restore focus when drawer closes\n      if (previousActiveElementRef.current) {\n        previousActiveElementRef.current.focus();\n      }\n    };\n  }, [isVisuallyOpen, requestClose, blockDismiss]);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        if (blockDismiss()) return;\n        requestClose();\n      }\n    },\n    [requestClose, blockDismiss],\n  );\n\n  return (\n    <div\n      className={`drawer__backdrop ${isVisuallyOpen ? \"drawer__backdrop--open\" : \"\"}`}\n      onClick={handleBackdropClick}\n      role=\"presentation\"\n      aria-hidden={!isOpen}\n      // `aria-hidden` takes the closed drawer out of the accessibility tree but\n      // leaves its focusable children in the tab sequence, so a keyboard user\n      // tabs into an invisible form. `inert` removes both.\n      inert={!isOpen}\n    >\n      <aside\n        ref={drawerRef}\n        className={`drawer ${isVisuallyOpen ? \"drawer--open\" : \"\"} ${\n          isShaking ? \"drawer--shaking\" : \"\"\n        } ${className}`}\n        style={{ width: widthValue, maxWidth: \"100vw\" }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={subtitleId}\n        onAnimationEnd={handleAnimationEnd}\n      >\n        {/* Header */}\n        <header className=\"drawer__header\">\n          <div className=\"drawer__title-row\">\n            <h2 id={titleId} className=\"drawer__title\">\n              {title}\n            </h2>\n            <button\n              ref={closeButtonRef}\n              type=\"button\"\n              className=\"drawer__close-btn\"\n              onClick={requestClose}\n              aria-label={closeLabel}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M18 6L6 18\" />\n                <path d=\"M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          {subtitle && (\n            <p id={subtitleId} className=\"drawer__subtitle\">\n              {subtitle}\n            </p>\n          )}\n        </header>\n\n        {/* Content */}\n        <div className=\"drawer__content\">{children}</div>\n\n        {/* Footer */}\n        {footer && <footer className=\"drawer__footer\">{footer}</footer>}\n      </aside>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-export type IllustrationType = "chat" | "models" | "creations" | "text" | "benchmark" | "logs" | "statistics" | "error" | "schedule" | "generic";
 export interface EmptyStateAction {
     label: string;
     onClick: () => void;
@@ -10,8 +9,16 @@ export interface EmptyStateSecondaryAction {
     onClick?: () => void;
 }
 export interface EmptyStateProps {
-    /** Type of illustration to display */
-    illustration: IllustrationType;
+    /**
+     * The drawing shown above the text.
+     *
+     * This used to be one of ten names: chat, models, creations, benchmark,
+     * logs, statistics, schedule and so on, each resolving to an SVG shipped
+     * inside this package. Those names are one product's information
+     * architecture, and no other consumer has a "creations" screen to draw for.
+     * A consumer passes its own artwork and keeps its own vocabulary.
+     */
+    illustration?: ReactNode;
     /** Main heading */
     title: string;
     /** Descriptive text */

package/dist/components/EmptyState/EmptyState2.js

@@ -1,79 +1,62 @@
 import { Button as e } from "../Button/Button2.js";
-import { BenchmarkIllustration as t, ChatIllustration as n, CreationsIllustration as r, ErrorIllustration as i, GenericIllustration as a, LogsIllustration as o, ModelsIllustration as s, ScheduleIllustration as c, StatisticsIllustration as l, TextIllustration as u } from "./illustrations.js";
 /* empty css           */
-import { memo as d, useCallback as f, useMemo as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { memo as t, useCallback as n, useMemo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/EmptyState/EmptyState.tsx
-var _ = {
-	chat: n,
-	models: s,
-	creations: r,
-	text: u,
-	benchmark: t,
-	logs: o,
-	statistics: l,
-	error: i,
-	schedule: c,
-	generic: a
-};
-function v({ illustration: t, title: n, description: r, primaryAction: i, secondaryAction: a, children: o, className: s = "", showIllustration: c = !0 }) {
-	let l = i?.onClick, u = a?.onClick, d = f(() => {
-		l?.();
-	}, [l]), v = f(() => {
-		u?.();
-	}, [u]), y = p(() => _[t], [t]), b = p(() => [
-		"empty-state",
-		`empty-state--${t}`,
-		s
-	].filter(Boolean).join(" "), [t, s]);
-	return /* @__PURE__ */ g("div", {
-		className: b,
+function s({ illustration: t, title: s, description: c, primaryAction: l, secondaryAction: u, children: d, className: f = "", showIllustration: p = !0 }) {
+	let m = l?.onClick, h = u?.onClick, g = n(() => {
+		m?.();
+	}, [m]), _ = n(() => {
+		h?.();
+	}, [h]), v = r(() => ["empty-state", f].filter(Boolean).join(" "), [f]);
+	return /* @__PURE__ */ o("div", {
+		className: v,
 		role: "status",
 		"aria-live": "polite",
 		children: [
-			c && /* @__PURE__ */ h("div", {
+			p && t && /* @__PURE__ */ a("div", {
 				className: "empty-state__illustration",
-				children: /* @__PURE__ */ h(y, { className: "empty-state__icon" })
+				children: t
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ o("div", {
 				className: "empty-state__content",
 				children: [
-					/* @__PURE__ */ h("h3", {
+					/* @__PURE__ */ a("h3", {
 						className: "empty-state__title",
-						children: n
+						children: s
 					}),
-					/* @__PURE__ */ h("p", {
+					/* @__PURE__ */ a("p", {
 						className: "empty-state__description",
-						children: r
+						children: c
 					}),
-					o
+					d
 				]
 			}),
-			(i || a) && /* @__PURE__ */ g("div", {
+			(l || u) && /* @__PURE__ */ o("div", {
 				className: "empty-state__actions",
-				children: [i && /* @__PURE__ */ h(e, {
+				children: [l && /* @__PURE__ */ a(e, {
 					variant: "primary",
-					onClick: d,
+					onClick: g,
 					className: "empty-state__action-btn empty-state__action-btn--primary",
-					children: i.label
-				}), a && /* @__PURE__ */ h(m, { children: a.href ? /* @__PURE__ */ h("a", {
-					href: a.href,
+					children: l.label
+				}), u && /* @__PURE__ */ a(i, { children: u.href ? /* @__PURE__ */ a("a", {
+					href: u.href,
 					className: "empty-state__action-link",
-					onClick: v,
-					children: a.label
-				}) : /* @__PURE__ */ h(e, {
+					onClick: _,
+					children: u.label
+				}) : /* @__PURE__ */ a(e, {
 					variant: "ghost",
-					onClick: v,
+					onClick: _,
 					className: "empty-state__action-btn empty-state__action-btn--secondary",
-					children: a.label
+					children: u.label
 				}) })]
 			})
 		]
 	});
 }
-var y = d(v);
+var c = t(s);
 //#endregion
-export { y as EmptyState };
+export { c as EmptyState };
 
 //# sourceMappingURL=EmptyState2.js.map
 import "../../assets/components/EmptyState/EmptyState.css";

package/dist/components/EmptyState/EmptyState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/**\n * EmptyState Component\n *\n * Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n *\n * Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n *   onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n */\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport {\n  ChatIllustration,\n  ModelsIllustration,\n  CreationsIllustration,\n  TextIllustration,\n  BenchmarkIllustration,\n  LogsIllustration,\n  StatisticsIllustration,\n  ErrorIllustration,\n  ScheduleIllustration,\n  GenericIllustration,\n} from \"./illustrations\";\nimport \"./EmptyState.css\";\n\nexport type IllustrationType =\n  | \"chat\"\n  | \"models\"\n  | \"creations\"\n  | \"text\"\n  | \"benchmark\"\n  | \"logs\"\n  | \"statistics\"\n  | \"error\"\n  | \"schedule\"\n  | \"generic\";\n\nexport interface EmptyStateAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n  /** Type of illustration to display */\n  illustration: IllustrationType;\n  /** Main heading */\n  title: string;\n  /** Descriptive text */\n  description: string;\n  /** Primary action button */\n  primaryAction?: EmptyStateAction;\n  /** Secondary action (link or button) */\n  secondaryAction?: EmptyStateSecondaryAction;\n  /**\n   * Extra content rendered under the description, inside the same text column.\n   *\n   * The two action props cover the common one-or-two-button case. An\n   * onboarding state that has to offer more than that (e.g. the Data Hub's\n   * three ingest paths, issue #3903) renders them here instead of growing a\n   * page-local copy of this component.\n   */\n  children?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show illustration (default: true) */\n  showIllustration?: boolean;\n}\n\n/**\n * Static map of illustration types to components.\n * Defined outside component to avoid recreation on each render.\n */\nconst illustrationMap: Record<\n  IllustrationType,\n  React.ComponentType<{ className?: string }>\n> = {\n  chat: ChatIllustration,\n  models: ModelsIllustration,\n  creations: CreationsIllustration,\n  text: TextIllustration,\n  benchmark: BenchmarkIllustration,\n  logs: LogsIllustration,\n  statistics: StatisticsIllustration,\n  error: ErrorIllustration,\n  schedule: ScheduleIllustration,\n  generic: GenericIllustration,\n};\n\n/**\n * EmptyState Component\n *\n * Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n  illustration,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  children,\n  className = \"\",\n  showIllustration = true,\n}: EmptyStateProps) {\n  // Use stable callback references by extracting onClick functions\n  const primaryOnClick = primaryAction?.onClick;\n  const secondaryOnClick = secondaryAction?.onClick;\n\n  const handlePrimaryAction = useCallback(() => {\n    primaryOnClick?.();\n  }, [primaryOnClick]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryOnClick?.();\n  }, [secondaryOnClick]);\n\n  // Memoize illustration component lookup\n  const Illustration = useMemo(() => illustrationMap[illustration], [illustration]);\n\n  // Memoize class name computation\n  const containerClass = useMemo(\n    () =>\n      [\"empty-state\", `empty-state--${illustration}`, className]\n        .filter(Boolean)\n        .join(\" \"),\n    [illustration, className],\n  );\n\n  return (\n    <div className={containerClass} role=\"status\" aria-live=\"polite\">\n      {showIllustration && (\n        <div className=\"empty-state__illustration\">\n          <Illustration className=\"empty-state__icon\" />\n        </div>\n      )}\n\n      <div className=\"empty-state__content\">\n        <h3 className=\"empty-state__title\">{title}</h3>\n        <p className=\"empty-state__description\">{description}</p>\n        {children}\n      </div>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"empty-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"empty-state__action-btn empty-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <>\n              {secondaryAction.href ? (\n                <a\n                  href={secondaryAction.href}\n                  className=\"empty-state__action-link\"\n                  onClick={handleSecondaryAction}\n                >\n                  {secondaryAction.label}\n                </a>\n              ) : (\n                <Button\n                  variant=\"ghost\"\n                  onClick={handleSecondaryAction}\n                  className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n                >\n                  {secondaryAction.label}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":";;;;;;AAsFA,IAAM,IAGF;CACF,MAAM;CACN,QAAQ;CACR,WAAW;CACX,MAAM;CACN,WAAW;CACX,MAAM;CACN,YAAY;CACZ,OAAO;CACP,UAAU;CACV,SAAS;AACX;AAQA,SAAS,EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,IAAe,QAAc,EAAgB,IAAe,CAAC,CAAY,CAAC,GAG1E,IAAiB,QAEnB;EAAC;EAAe,gBAAgB;EAAgB;CAAS,CAAC,CACvD,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACb,CAAC,GAAc,CAAS,CAC1B;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD,EAAc,WAAU,oBAAqB,CAAA;GAC1C,CAAA;GAGP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}
+{"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/**\n * EmptyState Component\n *\n * Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n *\n * Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n *   onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n */\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./EmptyState.css\";\n\nexport interface EmptyStateAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n  /**\n   * The drawing shown above the text.\n   *\n   * This used to be one of ten names: chat, models, creations, benchmark,\n   * logs, statistics, schedule and so on, each resolving to an SVG shipped\n   * inside this package. Those names are one product's information\n   * architecture, and no other consumer has a \"creations\" screen to draw for.\n   * A consumer passes its own artwork and keeps its own vocabulary.\n   */\n  illustration?: ReactNode;\n  /** Main heading */\n  title: string;\n  /** Descriptive text */\n  description: string;\n  /** Primary action button */\n  primaryAction?: EmptyStateAction;\n  /** Secondary action (link or button) */\n  secondaryAction?: EmptyStateSecondaryAction;\n  /**\n   * Extra content rendered under the description, inside the same text column.\n   *\n   * The two action props cover the common one-or-two-button case. An\n   * onboarding state that has to offer more than that (e.g. the Data Hub's\n   * three ingest paths, issue #3903) renders them here instead of growing a\n   * page-local copy of this component.\n   */\n  children?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show illustration (default: true) */\n  showIllustration?: boolean;\n}\n\n/**\n * EmptyState Component\n *\n * Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n  illustration,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  children,\n  className = \"\",\n  showIllustration = true,\n}: EmptyStateProps) {\n  // Use stable callback references by extracting onClick functions\n  const primaryOnClick = primaryAction?.onClick;\n  const secondaryOnClick = secondaryAction?.onClick;\n\n  const handlePrimaryAction = useCallback(() => {\n    primaryOnClick?.();\n  }, [primaryOnClick]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryOnClick?.();\n  }, [secondaryOnClick]);\n\n  // Memoize class name computation\n  const containerClass = useMemo(\n    () => [\"empty-state\", className].filter(Boolean).join(\" \"),\n    [className],\n  );\n\n  return (\n    <div className={containerClass} role=\"status\" aria-live=\"polite\">\n      {showIllustration && illustration && (\n        <div className=\"empty-state__illustration\">{illustration}</div>\n      )}\n\n      <div className=\"empty-state__content\">\n        <h3 className=\"empty-state__title\">{title}</h3>\n        <p className=\"empty-state__description\">{description}</p>\n        {children}\n      </div>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"empty-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"empty-state__action-btn empty-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <>\n              {secondaryAction.href ? (\n                <a\n                  href={secondaryAction.href}\n                  className=\"empty-state__action-link\"\n                  onClick={handleSecondaryAction}\n                >\n                  {secondaryAction.label}\n                </a>\n              ) : (\n                <Button\n                  variant=\"ghost\"\n                  onClick={handleSecondaryAction}\n                  className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n                >\n                  {secondaryAction.label}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":";;;;;AAwEA,SAAS,EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,IAAiB,QACf,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACzD,CAAC,CAAS,CACZ;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,KAAoB,KACnB,kBAAC,OAAD;IAAK,WAAU;IAA6B,UAAA;GAAkB,CAAA;GAGhE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}

package/dist/components/EmptyState/index.d.ts

@@ -1,5 +1,10 @@
 /**
  * EmptyState Component - Barrel Export
+ *
+ * The ten illustrations that used to ship here were one product's information
+ * architecture: chat, models, creations, benchmark, logs, statistics,
+ * schedule. No other consumer has a "creations" screen to draw for. A consumer
+ * passes its own artwork through `illustration` and keeps its own vocabulary.
  */
 export { EmptyState } from './EmptyState';
-export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, } from './EmptyState';

package/dist/components/ErrorState/ErrorState.d.ts

@@ -1,11 +1,24 @@
-export type ErrorType = "network" | "configuration" | "model" | "permission" | "generic";
+import { ReactNode } from 'react';
+/**
+ * How the error reads, not what it is about.
+ *
+ * This prop used to be a union of five names: network, configuration, model,
+ * permission, generic. Two of those, and "model" in particular, are one
+ * product's categories rather than anything a shared component can reason
+ * about, and all five resolved to three colours anyway: network and permission
+ * were the same amber, model and generic the same red. A consumer decides
+ * which of its own error categories reads as which tone.
+ */
+export type ErrorTone = "danger" | "warning" | "accent";
 export interface ErrorAction {
     label: string;
     onClick: () => void;
 }
 export interface ErrorStateProps {
-    /** Error type determines icon and default styling */
-    type?: ErrorType;
+    /** How the error reads. Defaults to `danger`. */
+    tone?: ErrorTone;
+    /** Replaces the default alert icon. */
+    icon?: ReactNode;
     /** Error title - main heading */
     title: string;
     /** Detailed error message */
@@ -22,4 +35,4 @@ export interface ErrorStateProps {
 /**
  * ErrorState Component
  */
-export declare function ErrorState({ type, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ tone, icon, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;

package/dist/components/ErrorState/ErrorState2.js

@@ -4,56 +4,53 @@ import { AlertCircleIcon as t } from "../../icons/AlertCircleIcon.js";
 import { useCallback as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ErrorState/ErrorState.tsx
-function a(e) {
-	return /* @__PURE__ */ r(t, { size: 48 });
-}
-function o({ type: t = "generic", title: o, message: s, primaryAction: c, secondaryAction: l, className: u = "", showIcon: d = !0 }) {
-	let f = n(() => {
-		c?.onClick();
-	}, [c]), p = n(() => {
+function a({ tone: a = "danger", icon: o, title: s, message: c, primaryAction: l, secondaryAction: u, className: d = "", showIcon: f = !0 }) {
+	let p = n(() => {
 		l?.onClick();
-	}, [l]), m = [
+	}, [l]), m = n(() => {
+		u?.onClick();
+	}, [u]), h = [
 		"error-state",
-		`error-state--${t}`,
-		u
+		`error-state--${a}`,
+		d
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ i("div", {
-		className: m,
+		className: h,
 		role: "alert",
 		"aria-live": "polite",
 		children: [
-			d && /* @__PURE__ */ r("div", {
+			f && /* @__PURE__ */ r("div", {
 				className: "error-state__icon",
 				"aria-hidden": "true",
-				children: a(t)
+				children: o ?? /* @__PURE__ */ r(t, { size: 48 })
 			}),
 			/* @__PURE__ */ r("h2", {
 				className: "error-state__title",
-				children: o
+				children: s
 			}),
 			/* @__PURE__ */ r("p", {
 				className: "error-state__message",
-				children: s
+				children: c
 			}),
-			(c || l) && /* @__PURE__ */ i("div", {
+			(l || u) && /* @__PURE__ */ i("div", {
 				className: "error-state__actions",
-				children: [c && /* @__PURE__ */ r(e, {
+				children: [l && /* @__PURE__ */ r(e, {
 					variant: "primary",
-					onClick: f,
+					onClick: p,
 					className: "error-state__action-btn error-state__action-btn--primary",
-					children: c.label
-				}), l && /* @__PURE__ */ r(e, {
+					children: l.label
+				}), u && /* @__PURE__ */ r(e, {
 					variant: "secondary",
-					onClick: p,
+					onClick: m,
 					className: "error-state__action-btn error-state__action-btn--secondary",
-					children: l.label
+					children: u.label
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { o as ErrorState };
+export { a as ErrorState };
 
 //# sourceMappingURL=ErrorState2.js.map
 import "../../assets/components/ErrorState/ErrorState.css";

package/dist/components/ErrorState/ErrorState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Error type variants (network, configuration, model, permission, generic)\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\nexport type ErrorType =\n  \"network\" | \"configuration\" | \"model\" | \"permission\" | \"generic\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** Error type determines icon and default styling */\n  type?: ErrorType;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * Get icon for error type\n */\nfunction getErrorIcon(_type: ErrorType): React.ReactNode {\n  // All error types use the same AlertCircleIcon for now\n  // Can be extended with different icons per type in the future\n  return <AlertCircleIcon size={48} />;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  type = \"generic\",\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${type}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {getErrorIcon(type)}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA8CA,SAAS,EAAa,GAAmC;CAGvD,OAAO,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;AACrC;AAKA,SAAgB,EAAW,EACzB,UAAO,WACP,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,EAAa,CAAI;GACf,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}
+{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Three visual tones\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport type { ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\n/**\n * How the error reads, not what it is about.\n *\n * This prop used to be a union of five names: network, configuration, model,\n * permission, generic. Two of those, and \"model\" in particular, are one\n * product's categories rather than anything a shared component can reason\n * about, and all five resolved to three colours anyway: network and permission\n * were the same amber, model and generic the same red. A consumer decides\n * which of its own error categories reads as which tone.\n */\nexport type ErrorTone = \"danger\" | \"warning\" | \"accent\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** How the error reads. Defaults to `danger`. */\n  tone?: ErrorTone;\n  /** Replaces the default alert icon. */\n  icon?: ReactNode;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  tone = \"danger\",\n  icon,\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {icon ?? <AlertCircleIcon size={48} />}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA0DA,SAAgB,EAAW,EACzB,UAAO,UACP,SACA,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,KAAQ,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;GAClC,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}

package/dist/components/ErrorState/index.d.ts

@@ -2,4 +2,4 @@
  * ErrorState Component Export
  */
 export { ErrorState } from './ErrorState';
-export type { ErrorStateProps, ErrorType, ErrorAction } from './ErrorState';
+export type { ErrorStateProps, ErrorTone, ErrorAction } from './ErrorState';

package/dist/components/PageHeader/PageHeader.d.ts

@@ -8,6 +8,19 @@ export interface PageHeaderProps {
     actions?: ReactNode;
     /** Error message to display below the header */
     error?: string | null;
+    /**
+     * Secondary line under the message, for the raw detail a server returned.
+     * Kept separate so the message stays readable when the detail is long.
+     */
+    errorDetail?: string | null;
+    /**
+     * Callback for the Retry button, rendered before the dismiss control when
+     * set. Dismissal is a pure dismissal and must not retry, which is why these
+     * are two props rather than one.
+     */
+    onRetry?: () => void;
+    /** Label for the Retry button. Default: "Retry" */
+    retryLabel?: string;
     /** Callback when error is dismissed */
     onErrorDismiss?: () => void;
     /** Additional CSS class names */
@@ -15,4 +28,4 @@ export interface PageHeaderProps {
     /** Accessible label for the error-dismiss button. Default: "Dismiss error" */
     dismissErrorLabel?: string;
 }
-export declare function PageHeader({ title, description, actions, error, onErrorDismiss, className, dismissErrorLabel, }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, description, actions, error, onErrorDismiss, className, errorDetail, onRetry, retryLabel, dismissErrorLabel, }: PageHeaderProps): import("react").JSX.Element;