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

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;

package/dist/components/PageHeader/PageHeader2.js

@@ -1,43 +1,59 @@
+import { Button as e } from "../Button/Button2.js";
 /* empty css           */
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/PageHeader/PageHeader.tsx
-function n({ title: n, description: r, actions: i, error: a, onErrorDismiss: o, className: s = "", dismissErrorLabel: c = "Dismiss error" }) {
-	let l = ["page-header", s].filter(Boolean).join(" ");
-	return /* @__PURE__ */ t("header", {
-		className: l,
-		children: [/* @__PURE__ */ t("div", {
+function r({ title: r, description: i, actions: a, error: o, onErrorDismiss: s, className: c = "", errorDetail: l, onRetry: u, retryLabel: d = "Retry", dismissErrorLabel: f = "Dismiss error" }) {
+	let p = ["page-header", c].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("header", {
+		className: p,
+		children: [/* @__PURE__ */ n("div", {
 			className: "page-header__content",
-			children: [/* @__PURE__ */ t("div", {
+			children: [/* @__PURE__ */ n("div", {
 				className: "page-header__text",
-				children: [/* @__PURE__ */ e("h1", {
+				children: [/* @__PURE__ */ t("h1", {
 					className: "page-header__title",
-					children: n
-				}), r && /* @__PURE__ */ e("p", {
-					className: "page-header__description",
 					children: r
+				}), i && /* @__PURE__ */ t("p", {
+					className: "page-header__description",
+					children: i
 				})]
-			}), i && /* @__PURE__ */ e("div", {
+			}), a && /* @__PURE__ */ t("div", {
 				className: "page-header__actions",
-				children: i
+				children: a
 			})]
-		}), a && /* @__PURE__ */ t("div", {
+		}), o && /* @__PURE__ */ n("div", {
 			className: "page-header__error",
 			role: "alert",
-			children: [/* @__PURE__ */ e("span", {
-				className: "page-header__error-text",
-				children: a
-			}), o && /* @__PURE__ */ e("button", {
-				type: "button",
-				className: "page-header__error-dismiss",
-				onClick: o,
-				"aria-label": c,
-				children: "×"
+			children: [/* @__PURE__ */ n("div", {
+				className: "page-header__error-body",
+				children: [/* @__PURE__ */ t("span", {
+					className: "page-header__error-text",
+					children: o
+				}), l && /* @__PURE__ */ t("span", {
+					className: "page-header__error-detail",
+					children: l
+				})]
+			}), (u || s) && /* @__PURE__ */ n("div", {
+				className: "page-header__error-actions",
+				children: [u && /* @__PURE__ */ t(e, {
+					variant: "secondary",
+					size: "small",
+					className: "page-header__error-retry",
+					onClick: u,
+					children: d
+				}), s && /* @__PURE__ */ t("button", {
+					type: "button",
+					className: "page-header__error-dismiss",
+					onClick: s,
+					"aria-label": f,
+					children: "×"
+				})]
 			})]
 		})]
 	});
 }
 //#endregion
-export { n as PageHeader };
+export { r as PageHeader };
 
 //# sourceMappingURL=PageHeader2.js.map
 import "../../assets/components/PageHeader/PageHeader.css";

package/dist/components/PageHeader/PageHeader2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader2.js","names":[],"sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader Component\n *\n * Standardized page header with title, description, and optional action buttons.\n * Provides consistent styling and layout across all pages.\n *\n * @example\n * // Basic usage\n * <PageHeader\n *   title=\"Models\"\n *   description=\"Manage and browse your local models\"\n * />\n *\n * @example\n * // With action buttons\n * <PageHeader\n *   title=\"Settings\"\n *   description=\"Configure application settings\"\n *   actions={\n *     <>\n *       <Button variant=\"secondary\">Import</Button>\n *       <Button variant=\"primary\">Save</Button>\n *     </>\n *   }\n * />\n *\n * @example\n * // With error display\n * <PageHeader\n *   title=\"Engines\"\n *   description=\"Manage runtime engines\"\n *   error={error}\n *   onErrorDismiss={() => clearError()}\n * />\n */\n\nimport type { ReactNode } from \"react\";\nimport \"./PageHeader.css\";\n\nexport interface PageHeaderProps {\n  /** Page title - displayed as h1 */\n  title: string;\n  /** Page description - displayed below title */\n  description?: string;\n  /** Optional action buttons or elements on the right side */\n  actions?: ReactNode;\n  /** Error message to display below the header */\n  error?: string | null;\n  /** Callback when error is dismissed */\n  onErrorDismiss?: () => void;\n  /** Additional CSS class names */\n  className?: string;\n  /** Accessible label for the error-dismiss button. Default: \"Dismiss error\" */\n  dismissErrorLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  error,\n  onErrorDismiss,\n  className = \"\",\n  dismissErrorLabel = \"Dismiss error\",\n}: PageHeaderProps) {\n  const classes = [\"page-header\", className].filter(Boolean).join(\" \");\n\n  return (\n    <header className={classes}>\n      <div className=\"page-header__content\">\n        <div className=\"page-header__text\">\n          <h1 className=\"page-header__title\">{title}</h1>\n          {description && <p className=\"page-header__description\">{description}</p>}\n        </div>\n        {actions && <div className=\"page-header__actions\">{actions}</div>}\n      </div>\n      {error && (\n        <div className=\"page-header__error\" role=\"alert\">\n          <span className=\"page-header__error-text\">{error}</span>\n          {onErrorDismiss && (\n            <button\n              type=\"button\"\n              className=\"page-header__error-dismiss\"\n              onClick={onErrorDismiss}\n              aria-label={dismissErrorLabel}\n            >\n              ×\n            </button>\n          )}\n        </div>\n      )}\n    </header>\n  );\n}\n"],"mappings":";;;AAwDA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,UACA,mBACA,eAAY,IACZ,uBAAoB,mBACF;CAClB,IAAM,IAAU,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;KAAsB,UAAA;IAAU,CAAA,GAC7C,KAAe,kBAAC,KAAD;KAAG,WAAU;KAA4B,UAAA;IAAe,CAAA,CACrE;GACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA;GAAa,CAAA,CAC7D;EACJ,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAqB,MAAK;GAAzC,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA2B,UAAA;GAAY,CAAA,GACtD,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAY;IACb,UAAA;GAEO,CAAA,CAEP;EAED,CAAA,CAAA;;AAEZ"}
+{"version":3,"file":"PageHeader2.js","names":[],"sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader Component\n *\n * Standardized page header with title, description, and optional action buttons.\n * Provides consistent styling and layout across all pages.\n *\n * @example\n * // Basic usage\n * <PageHeader\n *   title=\"Models\"\n *   description=\"Manage and browse your local models\"\n * />\n *\n * @example\n * // With action buttons\n * <PageHeader\n *   title=\"Settings\"\n *   description=\"Configure application settings\"\n *   actions={\n *     <>\n *       <Button variant=\"secondary\">Import</Button>\n *       <Button variant=\"primary\">Save</Button>\n *     </>\n *   }\n * />\n *\n * @example\n * // With error display\n * <PageHeader\n *   title=\"Engines\"\n *   description=\"Manage runtime engines\"\n *   error={error}\n *   onErrorDismiss={() => clearError()}\n * />\n */\n\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./PageHeader.css\";\n\nexport interface PageHeaderProps {\n  /** Page title - displayed as h1 */\n  title: string;\n  /** Page description - displayed below title */\n  description?: string;\n  /** Optional action buttons or elements on the right side */\n  actions?: ReactNode;\n  /** Error message to display below the header */\n  error?: string | null;\n  /**\n   * Secondary line under the message, for the raw detail a server returned.\n   * Kept separate so the message stays readable when the detail is long.\n   */\n  errorDetail?: string | null;\n  /**\n   * Callback for the Retry button, rendered before the dismiss control when\n   * set. Dismissal is a pure dismissal and must not retry, which is why these\n   * are two props rather than one.\n   */\n  onRetry?: () => void;\n  /** Label for the Retry button. Default: \"Retry\" */\n  retryLabel?: string;\n  /** Callback when error is dismissed */\n  onErrorDismiss?: () => void;\n  /** Additional CSS class names */\n  className?: string;\n  /** Accessible label for the error-dismiss button. Default: \"Dismiss error\" */\n  dismissErrorLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  error,\n  onErrorDismiss,\n  className = \"\",\n  errorDetail,\n  onRetry,\n  retryLabel = \"Retry\",\n  dismissErrorLabel = \"Dismiss error\",\n}: PageHeaderProps) {\n  const classes = [\"page-header\", className].filter(Boolean).join(\" \");\n\n  return (\n    <header className={classes}>\n      <div className=\"page-header__content\">\n        <div className=\"page-header__text\">\n          <h1 className=\"page-header__title\">{title}</h1>\n          {description && <p className=\"page-header__description\">{description}</p>}\n        </div>\n        {actions && <div className=\"page-header__actions\">{actions}</div>}\n      </div>\n      {error && (\n        <div className=\"page-header__error\" role=\"alert\">\n          <div className=\"page-header__error-body\">\n            <span className=\"page-header__error-text\">{error}</span>\n            {errorDetail && (\n              <span className=\"page-header__error-detail\">{errorDetail}</span>\n            )}\n          </div>\n          {(onRetry || onErrorDismiss) && (\n            <div className=\"page-header__error-actions\">\n              {onRetry && (\n                <Button\n                  variant=\"secondary\"\n                  size=\"small\"\n                  className=\"page-header__error-retry\"\n                  onClick={onRetry}\n                >\n                  {retryLabel}\n                </Button>\n              )}\n              {onErrorDismiss && (\n                <button\n                  type=\"button\"\n                  className=\"page-header__error-dismiss\"\n                  onClick={onErrorDismiss}\n                  aria-label={dismissErrorLabel}\n                >\n                  ×\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n    </header>\n  );\n}\n"],"mappings":";;;;AAsEA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,UACA,mBACA,eAAY,IACZ,gBACA,YACA,gBAAa,SACb,uBAAoB,mBACF;CAClB,IAAM,IAAU,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;KAAsB,UAAA;IAAU,CAAA,GAC7C,KAAe,kBAAC,KAAD;KAAG,WAAU;KAA4B,UAAA;IAAe,CAAA,CACrE;GACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA;GAAa,CAAA,CAC7D;EACJ,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAqB,MAAK;GAAzC,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAY,CAAA,GACtD,KACC,kBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAkB,CAAA,CAE9D;GACH,CAAA,IAAA,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,WAAU;KACV,SAAS;KAER,UAAA;IACK,CAAA,GAET,KACC,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,SAAS;KACT,cAAY;KACb,UAAA;IAEO,CAAA,CAEP;GAEJ,CAAA,CAAA;EAED,CAAA,CAAA;;AAEZ"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface SelectOption<T extends string = string> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    /** Keep an unavailable choice visible while preventing its selection. */
+    disabled?: boolean;
+}
+export interface SelectProps<T extends string = string> {
+    value: T;
+    onChange: (value: T) => void;
+    onBlur?: () => void;
+    options: SelectOption<T>[];
+    /**
+     * Field label rendered above the trigger, the way `TextInput` renders its
+     * own. Names the trigger and the listbox through `aria-labelledby`, so a
+     * caller that supplies it does not also need `aria-label`.
+     */
+    label?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "default" | "medium" | "large";
+    fullWidth?: boolean;
+    className?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    invalid?: boolean;
+    /**
+     * Shown in place of the list when a search matches nothing. English default,
+     * because this package cannot resolve a consumer's locale key: a product that
+     * localises passes its own words.
+     */
+    noOptionsLabel?: string;
+}
+export declare function Select<T extends string = string>({ value, onChange, onBlur, options, label, placeholder, disabled, size, fullWidth, className, searchable, searchPlaceholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, invalid, noOptionsLabel, }: SelectProps<T>): import("react").JSX.Element;

package/dist/components/Select/Select2.js

@@ -0,0 +1,313 @@
+/* empty css       */
+import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+//#region src/components/Select/Select.tsx
+function l({ value: l, onChange: u, onBlur: d, options: f, label: p, placeholder: ee = "Select...", disabled: m = !1, size: h = "default", fullWidth: g = !1, className: _ = "", searchable: v = !1, searchPlaceholder: y, "aria-label": b, "aria-describedby": x, invalid: S = !1, noOptionsLabel: C = "No options" }) {
+	let [w, T] = a(!1), [E, D] = a(-1), [O, k] = a(""), [A, te] = a({
+		top: 0,
+		left: 0,
+		width: 0
+	}), j = i(null), M = i(null), N = i(null), P = i(null), F = i([]), I = n(), L = n(), R = n(), z = p != null && p !== !1, B = f.find((e) => e.value === l), V = r(() => {
+		let e = O.trim().toLowerCase();
+		return !v || e.length === 0 ? f : f.filter((t) => [
+			t.label,
+			t.value,
+			t.description ?? ""
+		].some((t) => t.toLowerCase().includes(e)));
+	}, [
+		f,
+		O,
+		v
+	]), H = e((e, t) => {
+		for (let n = e; n >= 0 && n < V.length; n += t) {
+			let e = V[n];
+			if (e && !e.disabled) return n;
+		}
+		return -1;
+	}, [V]), U = (e) => `${L}-option-${String(e)}`, W = E >= 0 ? U(E) : void 0, G = e(() => {
+		if (!M.current) return;
+		let e = M.current.getBoundingClientRect();
+		te({
+			top: e.bottom + 4,
+			left: e.left,
+			width: e.width
+		});
+	}, []), K = e(() => {
+		if (m) return;
+		G(), T(!0);
+		let e = V.findIndex((e) => e.value === l && !e.disabled);
+		D(e === -1 ? H(0, 1) : e);
+	}, [
+		m,
+		V,
+		l,
+		G,
+		H
+	]), q = e(() => {
+		T(!1), D(-1), k(""), M.current?.focus();
+	}, []), J = e((e, t) => {
+		t && (t.stopPropagation(), t.preventDefault()), !e.disabled && (u(e.value), q());
+	}, [u, q]);
+	t(() => {
+		let e = (e) => {
+			if (!w) return;
+			let t = e.target, n = j.current && !j.current.contains(t), r = N.current && !N.current.contains(t);
+			n && r && q();
+		}, t = (e) => {
+			e.key === "Escape" && w && q();
+		};
+		return w && (document.addEventListener("mousedown", e), document.addEventListener("keydown", t)), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [w, q]), t(() => {
+		if (!w) return;
+		let e = () => {
+			G();
+		};
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [w, G]), t(() => {
+		w && v && P.current?.focus();
+	}, [w, v]), t(() => {
+		if (!w || !v) return;
+		F.current = [];
+		let e = V.findIndex((e) => e.value === l && !e.disabled);
+		D(e >= 0 ? e : H(0, 1));
+	}, [
+		w,
+		O,
+		v,
+		l,
+		V,
+		H
+	]);
+	let Y = e((e) => {
+		if (!m) switch (e.key) {
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), w) {
+					let e = V[E];
+					e && J(e);
+				} else K();
+				break;
+			case "Escape":
+				e.preventDefault(), w && q();
+				break;
+			case "ArrowDown":
+				if (e.preventDefault(), !w) K();
+				else {
+					let e = H(E + 1, 1);
+					e >= 0 && D(e);
+				}
+				break;
+			case "ArrowUp":
+				if (e.preventDefault(), w) {
+					let e = H(E - 1, -1);
+					e >= 0 && D(e);
+				}
+				break;
+			case "Tab": w && q();
+		}
+	}, [
+		m,
+		w,
+		E,
+		V,
+		H,
+		K,
+		q,
+		J
+	]), X = e((e) => {
+		switch (e.key) {
+			case "Enter": {
+				e.preventDefault();
+				let t = V[E];
+				t && J(t);
+				break;
+			}
+			case "Escape":
+				e.preventDefault(), e.stopPropagation(), q();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), D((e) => {
+					let t = H(e + 1, 1);
+					return t >= 0 ? t : e;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault(), D((e) => {
+					let t = H(e - 1, -1);
+					return t >= 0 ? t : e;
+				});
+				break;
+			case "Tab": q();
+		}
+	}, [
+		q,
+		E,
+		J,
+		V,
+		H
+	]);
+	t(() => {
+		let e = F.current[E];
+		w && E >= 0 && e && e.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [w, E]);
+	let Z = h === "default" ? "" : `select--${h}`, ne = g ? "select--full-width" : "", re = z ? "select--labelled" : "", Q = z ? R : void 0, $ = y ?? b;
+	return /* @__PURE__ */ s("div", {
+		ref: j,
+		className: `select ${Z} ${ne} ${re} ${w ? "select--open" : ""} ${m ? "select--disabled" : ""} ${_}`,
+		children: [
+			z && /* @__PURE__ */ o("span", {
+				className: "select__label",
+				id: R,
+				children: p
+			}),
+			/* @__PURE__ */ s("button", {
+				ref: M,
+				type: "button",
+				className: "select__trigger",
+				onClick: () => {
+					w ? q() : K();
+				},
+				onKeyDown: Y,
+				onBlur: d,
+				disabled: m,
+				"aria-haspopup": "listbox",
+				"aria-expanded": w,
+				"aria-controls": w ? I : void 0,
+				"aria-activedescendant": w ? W : void 0,
+				"aria-label": b,
+				"aria-labelledby": Q,
+				"aria-describedby": x,
+				"aria-invalid": S || void 0,
+				children: [B ? /* @__PURE__ */ s("span", {
+					className: "select__value",
+					children: [B.icon && /* @__PURE__ */ o("span", {
+						className: "select__value-icon",
+						children: B.icon
+					}), /* @__PURE__ */ o("span", {
+						className: "select__value-label",
+						children: B.label
+					})]
+				}) : /* @__PURE__ */ o("span", {
+					className: "select__placeholder",
+					children: ee
+				}), /* @__PURE__ */ o("span", {
+					className: `select__chevron ${w ? "select__chevron--open" : ""}`,
+					children: /* @__PURE__ */ o("svg", {
+						width: "10",
+						height: "6",
+						viewBox: "0 0 10 6",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ o("path", {
+							d: "M1 1L5 5L9 1",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})]
+			}),
+			w && c(/* @__PURE__ */ s("div", {
+				ref: N,
+				className: "select__dropdown select__dropdown--portal",
+				style: {
+					position: "fixed",
+					top: `${String(A.top)}px`,
+					left: `${String(A.left)}px`,
+					width: `${String(A.width)}px`
+				},
+				children: [v && /* @__PURE__ */ o("div", {
+					className: "select__search",
+					children: /* @__PURE__ */ o("input", {
+						ref: P,
+						className: "select__search-input",
+						type: "search",
+						value: O,
+						onChange: (e) => k(e.currentTarget.value),
+						onKeyDown: X,
+						placeholder: y,
+						"aria-label": $,
+						"aria-labelledby": $ ? void 0 : Q,
+						"aria-controls": I,
+						"aria-activedescendant": W,
+						autoComplete: "off",
+						spellCheck: !1
+					})
+				}), /* @__PURE__ */ o("div", {
+					className: "select__options",
+					role: "listbox",
+					id: I,
+					"aria-label": b,
+					"aria-labelledby": Q,
+					children: V.length === 0 ? /* @__PURE__ */ o("div", {
+						className: "select__empty",
+						children: C
+					}) : V.map((e, t) => /* @__PURE__ */ s("div", {
+						id: U(t),
+						ref: (e) => {
+							F.current[t] = e;
+						},
+						className: `select__option ${e.value === l ? "select__option--selected" : ""} ${t === E ? "select__option--focused" : ""} ${e.disabled ? "select__option--disabled" : ""}`,
+						role: "option",
+						"aria-selected": e.value === l,
+						"aria-disabled": e.disabled || void 0,
+						"aria-label": e.description ? e.label + ". " + e.description : void 0,
+						onClick: (t) => {
+							J(e, t);
+						},
+						onMouseEnter: () => {
+							e.disabled || D(t);
+						},
+						children: [
+							e.icon && /* @__PURE__ */ o("span", {
+								className: "select__option-icon",
+								children: e.icon
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "select__option-content",
+								children: [/* @__PURE__ */ o("span", {
+									className: "select__option-label",
+									children: e.label
+								}), e.description && /* @__PURE__ */ o("span", {
+									className: "select__option-description",
+									children: e.description
+								})]
+							}),
+							e.value === l && /* @__PURE__ */ o("span", {
+								className: "select__option-check",
+								children: /* @__PURE__ */ o("svg", {
+									width: "14",
+									height: "10",
+									viewBox: "0 0 14 10",
+									fill: "none",
+									xmlns: "http://www.w3.org/2000/svg",
+									children: /* @__PURE__ */ o("path", {
+										d: "M1 5L5 9L13 1",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round"
+									})
+								})
+							})
+						]
+					}, e.value))
+				})]
+			}), document.body)
+		]
+	});
+}
+//#endregion
+export { l as Select };
+
+//# sourceMappingURL=Select2.js.map
+import "../../assets/components/Select/Select.css";