@you-agent-factory/components 0.0.0 → 0.0.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-2026 Andreas Abdi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,6 +4,10 @@ Presentation components, shared design tokens, and small utilities for building
 factory-style UIs outside the dashboard. The package is domain-free: it does not
 ship data fetching, durable state, business workflows, or product copy.
 
+See the [public package family guide](https://github.com/portpowered/you-agent-factory/blob/main/ui/packages/README.md)
+for this presentation layer's position beneath the controlled Factory
+visualizers and for the full execution/host ownership boundary.
+
 ## Install and workspace setup
 
 Add the package to your application dependencies. In this monorepo the dashboard
@@ -25,9 +29,9 @@ Peer dependencies:
 - `react` ^19.0.0
 - `react-dom` ^19.0.0
 
-Some category entrypoints (for example charts and graphs) also require the
-package's direct dependencies (`recharts`, `@xyflow/react`). Install those in
-the host app when you import those categories.
+Runtime libraries used by category entrypoints (for example `recharts`,
+`@xyflow/react`, and Radix UI) are installed as direct package dependencies.
+Hosts only need to provide compatible React and React DOM peers.
 
 ## Import package styles
 
@@ -66,7 +70,8 @@ import { cn } from "@you-agent-factory/components/utilities";
 `COMPONENTS_PACKAGE_NAME` is the stable package identifier
 (`"@you-agent-factory/components"`). Category paths include `primitives`, `forms`,
 `layout`, `feedback`, `data-display`, `navigation`, `overlays`, `charts`,
-`graphs`, `recipes`, `icons`, `utilities`, `testing`, and `tokens`.
+`factory-emulator`, `graphs`, `recipes`, `icons`, `utilities`, `testing`, and
+`tokens`.
 
 Use `cn` from `@you-agent-factory/components/utilities` for class name composition
 in component code instead of dashboard-local helpers.
@@ -163,6 +168,8 @@ route, generated registry, or additional build-time documentation tooling.
 
 - [Charts](./docs/charts.md) — config, presentation, tooltip and legend,
   state panels, and caller-owned series state
+- [Factory emulator controls](./docs/factory-emulator.md) — controlled playback,
+  speed, and host-owned runtime status
 
 ## Development
 
@@ -171,6 +178,9 @@ From `ui/packages/components`:
 ```bash
 bun run typecheck
 bun run test
+bun run test:build
+bun run check:pack
+bun run check:installed-consumer
 bun run check:package-boundary
 bun run check:package-dependency-direction
 bun run build-storybook
@@ -182,6 +192,22 @@ for DOM cleanup, accessible assertions, and user interactions. They do not
 require dashboard routes, providers, generated clients, API mocks, React
 Query, Zustand, Monaco, or Sonner.
 
+`check:pack` performs a clean production build, creates the registry-format
+tarball in a temporary directory, and validates npm's reported file inventory.
+It checks every manifest export and transitive local stylesheet or asset
+reference, rejects development-only files, and removes the temporary artifact
+after verification. `test:build` covers both the compiled output and this real
+pack flow, including actionable failure diagnostics.
+
+`check:installed-consumer` installs that registry-format tarball and compatible
+React peers into a new temporary npm application, then typechecks and creates a
+Vite production bundle without workspace links, source aliases, or package
+source files. Chromium loads only the built consumer output at mobile and
+desktop viewports and verifies package styles, representative primitive,
+feedback, chart, and graph rendering, keyboard activation and focus, accessible
+state semantics, the shared React runtime, and page-level overflow. The check
+removes its temporary install and closes its verification server on exit.
+
 Package Storybook lives in `.storybook/` and discovers `src/**/*.stories.tsx`
 files. Preview decorators import the package token fixture stylesheet and
 apply `data-color-palette` locally; they do not mount dashboard session,
@@ -206,14 +232,19 @@ make ui-components-test
 make ui-components-storybook
 make ui-components-boundary
 make ui-components-dependency-direction
+make ui-components-build
+make ui-components-pack
+make ui-components-installed-consumer
 make ui-components-verify
 make ui-lint
 ```
 
 `make ui-components-verify` runs the full component package harness with labeled
-failure output for typecheck, tests, Storybook build, boundary checks, and
-dependency-direction checks. CI runs the same harness in the Build, Lint, and API
-workflow after dashboard lint.
+failure output. It creates the production build first so package self-imports
+resolve on a clean checkout, then runs typecheck, tests, Storybook build,
+boundary checks, dependency-direction checks, registry-pack inventory, and the
+clean installed-consumer smoke. CI installs Chromium and runs the same harness
+in the Lint workflow after dashboard lint.
 
 From the `ui` workspace root:
 

package/dist/category-paths.d.ts

@@ -0,0 +1,3 @@
+/** Planned deep import paths for `@you-agent-factory/components` category entrypoints. */
+export declare const COMPONENT_CATEGORY_EXPORT_PATHS: readonly ["primitives", "forms", "layout", "feedback", "data-display", "navigation", "overlays", "charts", "factory-emulator", "graphs", "recipes", "icons", "utilities", "testing", "tokens"];
+export type ComponentCategoryExportPath = (typeof COMPONENT_CATEGORY_EXPORT_PATHS)[number];

package/dist/charts/chart-state-panel.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChartPresentation } from "./chart";
+export type ChartStateStatus = "empty" | "error" | "loading" | "success";
+export interface ChartStatePanelProps extends HTMLAttributes<HTMLDivElement> {
+    action?: ReactNode;
+    description: string;
+    presentation?: ChartPresentation;
+    status: ChartStateStatus;
+    title: string;
+}
+export declare function ChartStatePanel({ action, className, description, presentation, status, title, ...props }: ChartStatePanelProps): import("react").JSX.Element;

package/dist/charts/chart.d.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { Tooltip as RechartsTooltip, type TooltipContentProps } from "recharts";
+import type { Props as RechartsLegendContentProps } from "recharts/types/component/DefaultLegendContent";
+import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+export interface ChartConfigEntry {
+    color: string;
+    label: string;
+}
+export type ChartConfig = Record<string, ChartConfigEntry>;
+export type ChartPresentation = "embedded" | "standalone";
+export declare function ChartContainer({ children, className, config, footer, interactionAttributes, overlay, presentation, rootAttributes, style, title, }: {
+    children: ReactNode;
+    className?: string;
+    config: ChartConfig;
+    footer?: ReactNode;
+    interactionAttributes?: HTMLAttributes<HTMLDivElement>;
+    overlay?: ReactNode;
+    presentation?: ChartPresentation;
+    rootAttributes?: Record<string, string>;
+    style?: CSSProperties;
+    title: string;
+}): import("react").JSX.Element;
+export declare const ChartTooltip: typeof RechartsTooltip;
+export declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+export declare function ChartTooltipContent({ active, className, label, payload, }: TooltipContentProps<ValueType, NameType> & {
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function ChartLegendContent({ className, getToggleLabel, hiddenSeries, itemClassName, onToggleSeries, payload, swatchClassName, }: RechartsLegendContentProps & {
+    className?: string;
+    getToggleLabel?: (label: string, hidden: boolean) => string;
+    hiddenSeries?: ReadonlySet<string>;
+    itemClassName?: string;
+    onToggleSeries?: (key: string) => void;
+    swatchClassName?: string;
+}): import("react").JSX.Element | null;

package/dist/charts/index.d.ts

@@ -0,0 +1,5 @@
+/** Stable category path for `@you-agent-factory/components/charts`. */
+export declare const COMPONENTS_CATEGORY: "charts";
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig, type ChartConfigEntry, type ChartPresentation, } from "./chart";
+export { ChartStatePanel, type ChartStatePanelProps, type ChartStateStatus, } from "./chart-state-panel";

package/dist/charts/index.js

@@ -0,0 +1,287 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Legend, Tooltip, ResponsiveContainer } from "recharts";
+import { c as cn } from "../chunks/cn.js";
+const ChartContext = createContext(null);
+const CHART_CONTAINER_STANDALONE_CLASS = "relative h-[18rem] rounded-2xl border border-outline bg-surface-container-low p-4 text-on-surface";
+const CHART_CONTAINER_EMBEDDED_CLASS = "relative flex h-full min-h-0 min-w-0 w-full flex-1 flex-col text-on-surface";
+const DEFAULT_CHART_INITIAL_DIMENSION = { height: 288, width: 640 };
+const CHART_LEGEND_BUTTON_CLASS = "inline-flex min-h-0 items-center justify-center rounded-md border border-transparent bg-transparent px-0 py-1 text-left text-xs font-normal text-on-surface-variant focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-af-focus";
+function chartContainerClassName(presentation, className) {
+  return cn(
+    presentation === "embedded" ? CHART_CONTAINER_EMBEDDED_CLASS : CHART_CONTAINER_STANDALONE_CLASS,
+    className
+  );
+}
+function useChartConfig() {
+  const context = useContext(ChartContext);
+  if (context === null) {
+    throw new Error("Chart components must be rendered inside ChartContainer.");
+  }
+  return context;
+}
+function ChartContainer({
+  children,
+  className,
+  config,
+  footer,
+  interactionAttributes,
+  overlay,
+  presentation = "standalone",
+  rootAttributes,
+  style,
+  title
+}) {
+  const chartSurface = /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      height: "100%",
+      initialDimension: DEFAULT_CHART_INITIAL_DIMENSION,
+      minHeight: 0,
+      minWidth: 0,
+      width: "100%",
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: config, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": title,
+      className: chartContainerClassName(presentation, className),
+      "data-chart-container": "",
+      "data-chart-presentation": presentation,
+      role: "img",
+      ...interactionAttributes,
+      ...rootAttributes,
+      style: {
+        ...Object.fromEntries(
+          Object.entries(config).map(([key, value]) => [
+            `--color-${key}`,
+            value.color
+          ])
+        ),
+        ...style
+      },
+      children: [
+        overlay ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0", children: overlay }) : null,
+        footer ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 basis-0 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 flex-1 basis-0", children: chartSurface }),
+          footer
+        ] }) : chartSurface
+      ]
+    }
+  ) });
+}
+const ChartTooltip = Tooltip;
+const ChartLegend = Legend;
+function ChartTooltipContent({
+  active,
+  className,
+  label,
+  payload
+}) {
+  const config = useChartConfig();
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid min-w-40 gap-2 rounded-xl border border-outline bg-surface-container-high px-3 py-2 text-sm shadow-af-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold text-on-surface", children: String(label) }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: payload.map((entry) => {
+          const key = entry.dataKey?.toString() ?? "";
+          const item = config[key];
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between gap-3 text-on-surface-variant",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-2.5 w-2.5 rounded-full",
+                      style: {
+                        backgroundColor: item?.color ?? entry.color ?? "currentColor"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: item?.label ?? key })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-on-surface", children: entry.value })
+              ]
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+function ChartLegendContent({
+  className,
+  getToggleLabel,
+  hiddenSeries = /* @__PURE__ */ new Set(),
+  itemClassName,
+  onToggleSeries,
+  payload,
+  swatchClassName
+}) {
+  const config = useChartConfig();
+  if (!payload?.length) {
+    return null;
+  }
+  const stopChartInteraction = (event) => {
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-4 pt-3 text-xs text-on-surface-variant",
+        className
+      ),
+      children: payload.map((entry) => {
+        const key = entry.dataKey?.toString() ?? "";
+        const item = config[key];
+        const label = item?.label ?? key;
+        const hidden = hiddenSeries.has(key);
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "rounded-full",
+                swatchClassName ?? "h-2.5 w-2.5",
+                hidden ? "border border-outline bg-surface-container-low" : ""
+              ),
+              style: {
+                backgroundColor: hidden ? void 0 : item?.color ?? entry.color ?? "currentColor"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ] });
+        if (!onToggleSeries) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex items-center gap-2", itemClassName),
+              children: content
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": getToggleLabel?.(label, hidden) ?? label,
+            "aria-pressed": !hidden,
+            className: cn(
+              CHART_LEGEND_BUTTON_CLASS,
+              hidden ? "text-on-surface-disabled" : "",
+              itemClassName
+            ),
+            "data-chart-legend-series": key,
+            "data-chart-legend-series-hidden": hidden ? "true" : "false",
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleSeries(key);
+            },
+            onMouseDown: stopChartInteraction,
+            type: "button",
+            children: content
+          },
+          key
+        );
+      })
+    }
+  );
+}
+const CHART_STATE_PANEL_CLASS = "flex h-full min-h-[14rem] min-w-0 w-full flex-1 flex-col justify-center";
+const CHART_STATE_PANEL_EMBEDDED_CLASS = "grid min-h-[14rem] min-w-0 w-full flex-1 flex-col items-start justify-center gap-1.5 p-0 [&_h3]:m-0";
+const CHART_STATE_PANEL_STANDALONE_SHELL_CLASS = "grid min-h-60 items-start gap-1.5 rounded-2xl border border-dashed border-outline-variant bg-surface-container-low p-5 [&_h3]:m-0";
+const CHART_STATE_PANEL_TITLE_CLASS = "m-0 text-title-medium font-semibold text-on-surface";
+const CHART_STATE_PANEL_DESCRIPTION_CLASS = "m-0 text-body-medium text-on-surface-variant";
+const CHART_STATE_PANEL_SKELETON_CLASS = "animate-pulse rounded-xl bg-af-overlay";
+function chartStateRole(status) {
+  return status === "error" ? "alert" : "status";
+}
+function chartStateLive(status) {
+  return status === "error" ? "assertive" : "polite";
+}
+function ChartStatePanel({
+  action,
+  className,
+  description,
+  presentation = "standalone",
+  status,
+  title,
+  ...props
+}) {
+  const embedded = presentation === "embedded";
+  const role = chartStateRole(status);
+  const ariaLive = chartStateLive(status);
+  const loading = status === "loading";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "grid w-full gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: cn(CHART_STATE_PANEL_SKELETON_CLASS, "h-4 w-32") }),
+      /* @__PURE__ */ jsx("div", { className: cn(CHART_STATE_PANEL_SKELETON_CLASS, "h-28 w-full") })
+    ] }) : null,
+    /* @__PURE__ */ jsx("h3", { className: CHART_STATE_PANEL_TITLE_CLASS, children: title }),
+    /* @__PURE__ */ jsx("p", { className: CHART_STATE_PANEL_DESCRIPTION_CLASS, children: description }),
+    action ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: action }) : null
+  ] });
+  if (!embedded) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-busy": loading || void 0,
+        "aria-live": ariaLive,
+        className: cn(
+          CHART_STATE_PANEL_STANDALONE_SHELL_CLASS,
+          CHART_STATE_PANEL_CLASS,
+          className
+        ),
+        "data-chart-presentation": presentation,
+        "data-chart-state": status,
+        role,
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": loading || void 0,
+      "aria-live": ariaLive,
+      className: cn(
+        CHART_STATE_PANEL_EMBEDDED_CLASS,
+        CHART_STATE_PANEL_CLASS,
+        className
+      ),
+      "data-chart-presentation": presentation,
+      "data-chart-state": status,
+      role,
+      ...props,
+      children: content
+    }
+  );
+}
+const COMPONENTS_CATEGORY = "charts";
+export {
+  COMPONENTS_CATEGORY,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStatePanel,
+  ChartTooltip,
+  ChartTooltipContent
+};

package/dist/chunks/action-row.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as cn } from "./cn.js";
+const ACTION_ROW_CLASS = "flex min-w-0 flex-wrap items-center gap-2 max-md:justify-start";
+const ACTION_ROW_SECTION_CLASS = "flex min-w-0 flex-wrap items-center gap-2";
+function ActionRow({
+  actions,
+  actionsClassName,
+  className,
+  statuses,
+  statusesClassName,
+  ...props
+}) {
+  const hasStatuses = statuses !== void 0 && statuses !== null;
+  const hasActions = actions !== void 0 && actions !== null;
+  if (!hasStatuses && !hasActions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(ACTION_ROW_CLASS, className), ...props, children: [
+    hasStatuses ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(ACTION_ROW_SECTION_CLASS, statusesClassName),
+        "data-action-row-section": "statuses",
+        children: statuses
+      }
+    ) : null,
+    hasActions ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(ACTION_ROW_SECTION_CLASS, actionsClassName),
+        "data-action-row-section": "actions",
+        children: actions
+      }
+    ) : null
+  ] });
+}
+export {
+  ActionRow as A
+};

package/dist/chunks/alert-panel.js

@@ -0,0 +1,182 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { S as SurfacePanel } from "./surface-panel.js";
+import { c as cn } from "./cn.js";
+const ALERT_PANEL_SEMANTIC_CONFIG = {
+  neutral: {
+    role: "status",
+    tone: "neutral",
+    variant: "default"
+  },
+  info: {
+    role: "status",
+    tone: "info",
+    variant: "default"
+  },
+  success: {
+    role: "status",
+    tone: "success",
+    variant: "default"
+  },
+  warning: {
+    role: "alert",
+    tone: "warning",
+    variant: "default"
+  },
+  danger: {
+    role: "alert",
+    tone: "danger",
+    variant: "default"
+  },
+  error: {
+    role: "alert",
+    statusLabel: "Error",
+    tone: "error",
+    variant: "default"
+  },
+  loading: {
+    busy: true,
+    role: "status",
+    statusLabel: "Loading",
+    tone: "neutral",
+    variant: "loading"
+  },
+  empty: {
+    role: "status",
+    statusLabel: "Empty",
+    tone: "neutral",
+    variant: "empty"
+  }
+};
+function resolveAlertPanelSemantic(semantic) {
+  return ALERT_PANEL_SEMANTIC_CONFIG[semantic];
+}
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("animate-pulse rounded-xl bg-af-overlay", className),
+      ...props
+    }
+  );
+}
+const ALERT_PANEL_TONE_CLASS = {
+  danger: "border-af-danger-border bg-error-container text-on-error-container",
+  error: "border-af-danger-border bg-error-container text-on-error-container",
+  info: "border-af-info-border bg-info-container text-on-info-container",
+  neutral: "border-outline bg-surface-container-low text-on-surface-variant",
+  success: "border-af-success-border bg-success-container text-on-success-container",
+  warning: "border-af-warning-border bg-warning-container text-on-warning-container"
+};
+const ALERT_PANEL_VARIANT_CLASS = {
+  default: "grid gap-2",
+  empty: "grid items-start gap-1.5 rounded-2xl border-dashed p-5 [&_h3]:m-0",
+  loading: "grid gap-2"
+};
+const ALERT_PANEL_COMPACT_CLASS = {
+  default: "",
+  empty: "min-h-0",
+  loading: ""
+};
+const ALERT_PANEL_BODY_TEXT_CLASS = "text-body-medium text-on-surface-variant";
+const ALERT_PANEL_STATUS_LABEL_CLASS = "text-body-small font-medium uppercase tracking-wide text-current";
+const AlertPanel = forwardRef(
+  function AlertPanel2({
+    "aria-busy": ariaBusy,
+    children,
+    className,
+    compact = false,
+    padding = "default",
+    radius = "xl",
+    role,
+    semantic,
+    showStatusLabel,
+    tone: toneProp = "warning",
+    variant: variantProp = "default",
+    ...props
+  }, ref) {
+    const semanticConfig = semantic ? resolveAlertPanelSemantic(semantic) : void 0;
+    const tone = semanticConfig?.tone ?? toneProp;
+    const variant = semanticConfig?.variant ?? variantProp;
+    const resolvedRole = role ?? semanticConfig?.role;
+    const resolvedAriaBusy = ariaBusy ?? semanticConfig?.busy;
+    const shouldShowStatusLabel = showStatusLabel ?? semanticConfig?.statusLabel !== void 0;
+    const statusLabel = semanticConfig?.statusLabel;
+    return /* @__PURE__ */ jsxs(
+      SurfacePanel,
+      {
+        "aria-busy": resolvedAriaBusy === true ? true : void 0,
+        className: cn(
+          ALERT_PANEL_VARIANT_CLASS[variant],
+          compact && ALERT_PANEL_COMPACT_CLASS[variant],
+          ALERT_PANEL_TONE_CLASS[tone],
+          ALERT_PANEL_BODY_TEXT_CLASS,
+          className
+        ),
+        "data-af-feedback-variant": semantic,
+        padding,
+        radius,
+        ref,
+        role: resolvedRole,
+        ...props,
+        children: [
+          shouldShowStatusLabel && statusLabel ? /* @__PURE__ */ jsx(AlertPanelStatusLabel, { children: statusLabel }) : null,
+          variant === "loading" && children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" })
+          ] }) : children
+        ]
+      }
+    );
+  }
+);
+const AlertPanelStatusLabel = forwardRef(function AlertPanelStatusLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(ALERT_PANEL_STATUS_LABEL_CLASS, className),
+      ref,
+      ...props
+    }
+  );
+});
+const AlertPanelTitle = forwardRef(
+  function AlertPanelTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: cn("m-0 text-body-medium !text-current", className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const ALERT_PANEL_SUPPORTING_TEXT_CLASS = "text-body-small text-on-surface-variant";
+const AlertPanelText = forwardRef(
+  function AlertPanelText2({ as: Component = "p", className, variant = "body", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(
+          "m-0 !text-current",
+          variant === "body" ? ALERT_PANEL_BODY_TEXT_CLASS : ALERT_PANEL_SUPPORTING_TEXT_CLASS,
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+export {
+  AlertPanel as A,
+  Skeleton as S,
+  AlertPanelStatusLabel as a,
+  AlertPanelText as b,
+  AlertPanelTitle as c
+};