@you-agent-factory/components 0.0.0 → 0.0.2

package/dist/graphs/index.js

@@ -0,0 +1,614 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { c as cn } from "../chunks/cn.js";
+import { Position, Handle, getBezierPath, BaseEdge } from "@xyflow/react";
+const GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS = "min-h-12";
+const GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS = "min-h-5";
+function graphNodeShellStateClassName(state) {
+  switch (state) {
+    case "selected":
+      return cn(
+        "border-2 border-primary bg-primary-container",
+        "shadow-[0_0_0_1px_rgb(from_var(--color-primary)_r_g_b_/_0.28),0_0_0_4px_rgb(from_var(--color-primary)_r_g_b_/_0.08)]"
+      );
+    case "error":
+      return cn(
+        "border-2 border-dashed border-error bg-error-container",
+        "shadow-[0_0_0_3px_var(--color-error-container)]"
+      );
+    case "disabled":
+      return "border-outline-variant bg-surface-container text-on-surface";
+    case "loading":
+      return "border-outline bg-surface";
+    default:
+      return "";
+  }
+}
+function graphNodeButtonStateClassName(state) {
+  switch (state) {
+    case "selected":
+      return "ring-2 ring-primary/30";
+    case "error":
+      return "ring-2 ring-error/40";
+    case "disabled":
+    case "loading":
+      return "cursor-not-allowed";
+    default:
+      return "";
+  }
+}
+function graphNodeShellStateAttributes(state, stateLabel) {
+  return {
+    "aria-busy": state === "loading" ? true : void 0,
+    "aria-disabled": state === "disabled" ? true : void 0,
+    "aria-invalid": state === "error" ? true : void 0,
+    "aria-label": stateLabel,
+    "aria-selected": state === "selected" ? true : void 0,
+    "data-graph-node-state": state === "default" ? void 0 : state
+  };
+}
+function graphNodeButtonStateAttributes(state, stateLabel) {
+  return {
+    "aria-busy": state === "loading" ? true : void 0,
+    "aria-disabled": state === "disabled" ? true : void 0,
+    "aria-invalid": state === "error" ? true : void 0,
+    "aria-label": stateLabel,
+    "aria-pressed": state === "selected" ? true : void 0,
+    "data-graph-node-state": state === "default" ? void 0 : state
+  };
+}
+function graphNodeButtonIsDisabled(state, disabled) {
+  return disabled === true || state === "disabled" || state === "loading";
+}
+function defaultGraphNodeStateLabel(state) {
+  switch (state) {
+    case "selected":
+      return "Selected node";
+    case "disabled":
+      return "Disabled node";
+    case "loading":
+      return "Loading node";
+    case "error":
+      return "Error node";
+    default:
+      return void 0;
+  }
+}
+const GRAPH_NODE_BUTTON_BASE_CLASS = "nodrag nopan cursor-pointer border-0 bg-transparent p-0 text-left text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-af-focus-ring disabled:cursor-not-allowed disabled:opacity-100";
+const GraphNodeButton = forwardRef(function GraphNodeButton2({
+  className,
+  disabled,
+  graphState = "default",
+  onClick,
+  stateLabel,
+  type = "button",
+  ...props
+}, ref) {
+  const isDisabled = graphNodeButtonIsDisabled(graphState, disabled);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        GRAPH_NODE_BUTTON_BASE_CLASS,
+        graphNodeButtonStateClassName(graphState),
+        className
+      ),
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      ref,
+      type,
+      ...graphNodeButtonStateAttributes(graphState, stateLabel),
+      ...props
+    }
+  );
+});
+const GraphViewportSurface = forwardRef(function GraphViewportSurface2({ children, className, role, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "relative min-h-0 overflow-hidden rounded-3xl border shadow-none transition-colors",
+        className
+      ),
+      "data-graph-viewport-surface": "true",
+      ref,
+      role: role ?? "region",
+      ...props,
+      children
+    }
+  );
+});
+function GraphNodeHandleBadge({ handle }) {
+  const position = handle.side === "left" ? Position.Left : Position.Right;
+  const overlayHandleStyle = anchoredHandleStyle(handle.side);
+  const isButton = handle.onButtonClick !== void 0;
+  if (handle.hidden) {
+    return /* @__PURE__ */ jsx(
+      Handle,
+      {
+        className: "pointer-events-none !top-1/2 opacity-0",
+        id: handle.id,
+        isConnectable: handle.connectable ?? false,
+        position,
+        style: overlayHandleStyle,
+        type: handle.type
+      }
+    );
+  }
+  const tone = handle.tone ?? "default";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "pointer-events-none relative flex h-5 w-5 items-center justify-center",
+      "data-node-handle-badge": handle.id,
+      "data-node-handle-invalid": handle.validationError ? "true" : void 0,
+      "data-node-handle-tone": tone,
+      children: /* @__PURE__ */ jsx(
+        Handle,
+        {
+          "aria-disabled": isButton && handle.buttonDisabled ? true : void 0,
+          "aria-invalid": handle.validationError ? true : void 0,
+          "aria-label": handle.buttonAriaLabel ?? handle.label,
+          "aria-pressed": isButton ? handle.buttonPressed : void 0,
+          className: cn(
+            "pointer-events-auto absolute !top-1/2 !h-5 !w-5 !border-0 !bg-transparent",
+            "before:pointer-events-none before:absolute before:top-1/2 before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-surface before:bg-[var(--node-handle-background)] before:shadow-sm before:transition before:content-['']",
+            handle.side === "left" ? "before:left-0" : "before:left-full",
+            handle.buttonPressed && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-primary-container)]",
+            handle.variant === "valid-target" && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-success-container)]",
+            handle.variant === "error" && "before:border-af-danger-border before:shadow-[0_0_0_3px_var(--color-error-container)] motion-safe:before:animate-pulse",
+            handle.validationError && "before:ring-2 before:ring-af-danger-border motion-safe:before:animate-pulse"
+          ),
+          id: handle.id,
+          isConnectable: handle.connectable ?? true,
+          onClick: handle.buttonDisabled ? void 0 : handle.onButtonClick,
+          onKeyDown: isButton && !handle.buttonDisabled ? (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            handle.onButtonClick?.();
+          } : void 0,
+          position,
+          role: isButton ? "button" : "img",
+          style: {
+            ...overlayHandleStyle,
+            "--node-handle-background": handleDotColor(tone),
+            opacity: handle.buttonDisabled ? 0.45 : void 0
+          },
+          title: handle.buttonTitle ?? handle.validationMessage,
+          tabIndex: isButton && !handle.buttonDisabled ? 0 : void 0,
+          type: handle.type
+        }
+      )
+    }
+  );
+}
+function handleDotColor(tone) {
+  switch (tone) {
+    case "assignment":
+      return "var(--color-success)";
+    case "continue":
+      return "var(--color-secondary)";
+    case "failure":
+      return "var(--color-error)";
+    case "input":
+      return "var(--color-success)";
+    case "output":
+      return "var(--color-success)";
+    case "rejection":
+      return "var(--color-warning)";
+    case "resource":
+      return "var(--color-black)";
+    case "worker":
+      return "var(--color-purple-500)";
+    default:
+      return "var(--color-success)";
+  }
+}
+function anchoredHandleStyle(side) {
+  return side === "left" ? {
+    left: "50%",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } : {
+    left: "50%",
+    top: "50%",
+    transform: "translate(-100%, -50%)"
+  };
+}
+function GraphNodeStateIndicator({
+  state,
+  stateLabel
+}) {
+  const label = stateLabel ?? defaultGraphNodeStateLabel(state);
+  const showIndicator = state === "loading" || state === "error";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": showIndicator ? void 0 : true,
+      className: cn(
+        GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
+        "flex items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.08em]",
+        state === "error" ? "text-on-error-container" : "text-on-surface-variant",
+        !showIndicator && "invisible"
+      ),
+      "data-graph-node-state-indicator": showIndicator ? state : void 0,
+      children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-block h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-outline border-t-primary",
+            "data-graph-node-loading-spinner": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label ?? "Loading" })
+      ] }) : state === "error" ? /* @__PURE__ */ jsx("span", { role: "alert", children: label ?? "Error" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " " })
+    }
+  );
+}
+function GraphNodeShell({
+  children,
+  className = "",
+  handles,
+  nodeKind,
+  showStateIndicator = true,
+  state = "default",
+  stateLabel,
+  ...articleProps
+}) {
+  const leftHandles = handles.filter((handle) => handle.side === "left");
+  const rightHandles = handles.filter((handle) => handle.side === "right");
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "relative flex h-full min-w-0 w-full overflow-visible rounded-lg border border-outline bg-surface text-on-surface",
+        graphNodeShellStateClassName(state),
+        className
+      ),
+      "data-graph-node-kind": nodeKind,
+      ...graphNodeShellStateAttributes(state, stateLabel),
+      ...articleProps,
+      children: [
+        /* @__PURE__ */ jsx(NodeHandleRail, { handles: leftHandles, side: "left" }),
+        /* @__PURE__ */ jsx(NodeHandleRail, { handles: rightHandles, side: "right" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-full min-w-0 w-full flex-col gap-1 py-3",
+              showStateIndicator && GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
+              leftHandles.length > 0 ? "pl-6 pr-3" : "px-3",
+              rightHandles.length > 0 && leftHandles.length > 0 ? "pr-6" : rightHandles.length > 0 ? "pl-3 pr-6" : null
+            ),
+            children: [
+              showStateIndicator ? /* @__PURE__ */ jsx(GraphNodeStateIndicator, { state, stateLabel }) : null,
+              children
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NodeHandleRail({
+  handles,
+  side
+}) {
+  if (handles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-y-0 z-20 w-6",
+        side === "left" ? "left-0" : "right-0"
+      ),
+      "data-node-handle-rail": side,
+      children: handles.map((handle, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute top-0 flex -translate-y-1/2",
+            side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"
+          ),
+          style: { top: handlePosition(index, handles.length) },
+          children: /* @__PURE__ */ jsx(GraphNodeHandleBadge, { handle })
+        },
+        handle.id
+      ))
+    }
+  );
+}
+function handlePosition(index, count) {
+  return `${(index + 1) * 100 / (count + 1)}%`;
+}
+const CATMULL_ROM_ALPHA = 0.5;
+const MIN_PARAMETER_DISTANCE = 1e-4;
+const VIRTUAL_ENDPOINT_DISTANCE = 96;
+function positionVector(position) {
+  switch (position) {
+    case Position.Left:
+      return { x: -1, y: 0 };
+    case Position.Right:
+      return { x: 1, y: 0 };
+    case Position.Top:
+      return { x: 0, y: -1 };
+    case Position.Bottom:
+      return { x: 0, y: 1 };
+  }
+}
+function pointDistance(first, second) {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+function catmullRomParameterDistance(first, second) {
+  return Math.max(
+    MIN_PARAMETER_DISTANCE,
+    pointDistance(first, second) ** CATMULL_ROM_ALPHA
+  );
+}
+function formatPathNumber(value) {
+  if (Object.is(value, -0)) {
+    return "0";
+  }
+  return Number.isInteger(value) ? `${value}` : value.toFixed(3);
+}
+function compactConsecutiveRoutePoints(routePoints) {
+  const compacted = [];
+  for (const point of routePoints) {
+    const previous = compacted.at(-1);
+    if (previous && previous.x === point.x && previous.y === point.y) {
+      continue;
+    }
+    compacted.push(point);
+  }
+  return compacted;
+}
+function virtualEndpoint(input) {
+  const distance = Math.max(
+    VIRTUAL_ENDPOINT_DISTANCE,
+    pointDistance(input.from, input.neighbor)
+  );
+  const scalar = input.mode === "before" ? -distance : distance;
+  return {
+    x: input.from.x + input.direction.x * scalar,
+    y: input.from.y + input.direction.y * scalar
+  };
+}
+function catmullRomTangent(input) {
+  const previousSpan = input.tCurrent - input.tPrevious;
+  const nextSpan = input.tNext - input.tCurrent;
+  const totalSpan = input.tNext - input.tPrevious;
+  return {
+    x: nextSpan * ((input.current.x - input.previous.x) / previousSpan - (input.next.x - input.previous.x) / totalSpan + (input.next.x - input.current.x) / nextSpan),
+    y: nextSpan * ((input.current.y - input.previous.y) / previousSpan - (input.next.y - input.previous.y) / totalSpan + (input.next.y - input.current.y) / nextSpan)
+  };
+}
+function buildWaypointCatmullRomPath(input) {
+  const routePoints = compactConsecutiveRoutePoints(input.routePoints);
+  if (routePoints.length <= 1) {
+    const [point] = routePoints;
+    return point ? `M ${formatPathNumber(point.x)} ${formatPathNumber(point.y)}` : "";
+  }
+  const lastPointIndex = routePoints.length - 1;
+  const [source] = routePoints;
+  const points = [
+    virtualEndpoint({
+      direction: positionVector(input.sourcePosition),
+      from: source,
+      mode: "before",
+      neighbor: routePoints[1]
+    }),
+    ...routePoints,
+    virtualEndpoint({
+      direction: {
+        x: -positionVector(input.targetPosition).x,
+        y: -positionVector(input.targetPosition).y
+      },
+      from: routePoints[lastPointIndex],
+      mode: "after",
+      neighbor: routePoints[lastPointIndex - 1]
+    })
+  ];
+  const segments = [
+    `M ${formatPathNumber(source.x)} ${formatPathNumber(source.y)}`
+  ];
+  for (let index = 1; index <= lastPointIndex; index += 1) {
+    const previous = points[index - 1];
+    const start = points[index];
+    const end = points[index + 1];
+    const next = points[index + 2];
+    const tPrevious = 0;
+    const tStart = tPrevious + catmullRomParameterDistance(previous, start);
+    const tEnd = tStart + catmullRomParameterDistance(start, end);
+    const tNext = tEnd + catmullRomParameterDistance(end, next);
+    const startTangent = catmullRomTangent({
+      current: start,
+      next: end,
+      previous,
+      tCurrent: tStart,
+      tNext: tEnd,
+      tPrevious
+    });
+    const endTangent = catmullRomTangent({
+      current: end,
+      next,
+      previous: start,
+      tCurrent: tEnd,
+      tNext,
+      tPrevious: tStart
+    });
+    const firstControl = {
+      x: start.x + startTangent.x / 3,
+      y: start.y + startTangent.y / 3
+    };
+    const secondControl = {
+      x: end.x - endTangent.x / 3,
+      y: end.y - endTangent.y / 3
+    };
+    segments.push(
+      [
+        "C",
+        formatPathNumber(firstControl.x),
+        formatPathNumber(firstControl.y),
+        `${formatPathNumber(secondControl.x)},`,
+        formatPathNumber(secondControl.y),
+        `${formatPathNumber(end.x)},`,
+        formatPathNumber(end.y)
+      ].join(" ")
+    );
+  }
+  return segments.join(" ");
+}
+function buildGraphEdgePathThroughWaypoints(input) {
+  const routePoints = [
+    { x: input.sourceX, y: input.sourceY },
+    ...input.waypoints ?? [],
+    { x: input.targetX, y: input.targetY }
+  ];
+  if (routePoints.length <= 2) {
+    const [path2, labelX, labelY] = getBezierPath({
+      sourcePosition: input.sourcePosition,
+      sourceX: input.sourceX,
+      sourceY: input.sourceY,
+      targetPosition: input.targetPosition,
+      targetX: input.targetX,
+      targetY: input.targetY
+    });
+    return { labelX, labelY, path: path2 };
+  }
+  const path = buildWaypointCatmullRomPath({
+    routePoints,
+    sourcePosition: input.sourcePosition,
+    targetPosition: input.targetPosition
+  });
+  const midpointIndex = Math.floor((routePoints.length - 1) / 2);
+  const labelPoint = routePoints[midpointIndex];
+  return {
+    labelX: labelPoint.x,
+    labelY: labelPoint.y,
+    path
+  };
+}
+const GRAPH_EDGE_TYPES = {
+  graphEdge: GraphEdge
+};
+function GraphEdge({
+  data,
+  edgeClassName = "graph-edge",
+  id,
+  interactionWidth,
+  labelClassName = "graph-edge-label pointer-events-none fill-on-surface-subtle text-[11px] font-semibold",
+  markerEnd,
+  selected,
+  sourcePosition,
+  sourceX,
+  sourceY,
+  style,
+  targetPosition,
+  targetX,
+  targetY
+}) {
+  const edgeRef = useRef(null);
+  const [inspected, setInspected] = useState(false);
+  const edgeData = data ?? {};
+  const routedPath = buildGraphEdgePathThroughWaypoints({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY,
+    waypoints: edgeData.waypoints
+  });
+  const [fallbackPath, fallbackLabelX, fallbackLabelY] = getBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  const edgePath = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.path : fallbackPath;
+  const labelX = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelX : fallbackLabelX;
+  const labelY = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelY : fallbackLabelY;
+  useEffect(() => {
+    const edgeElement = edgeRef.current?.parentElement;
+    if (!edgeElement) {
+      return;
+    }
+    const show = () => setInspected(true);
+    const hide = () => setInspected(false);
+    edgeElement.addEventListener("mouseenter", show);
+    edgeElement.addEventListener("mouseleave", hide);
+    edgeElement.addEventListener("focusin", show);
+    edgeElement.addEventListener("focusout", hide);
+    return () => {
+      edgeElement.removeEventListener("mouseenter", show);
+      edgeElement.removeEventListener("mouseleave", hide);
+      edgeElement.removeEventListener("focusin", show);
+      edgeElement.removeEventListener("focusout", hide);
+    };
+  }, []);
+  const revealLabel = Boolean(
+    edgeData.label && (edgeData.alwaysShowLabel || inspected || selected)
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: edgeClassName,
+      "data-edge-id": id,
+      "data-label-visible": revealLabel ? "true" : "false",
+      ref: edgeRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseEdge,
+          {
+            interactionWidth,
+            markerEnd,
+            path: edgePath,
+            style
+          }
+        ),
+        edgeData.label ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: labelClassName,
+            style: {
+              paintOrder: "stroke",
+              stroke: "var(--color-surface)",
+              strokeLinejoin: "round",
+              strokeWidth: 8
+            },
+            textAnchor: "middle",
+            x: labelX,
+            y: labelY,
+            children: edgeData.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const COMPONENTS_CATEGORY = "graphs";
+export {
+  COMPONENTS_CATEGORY,
+  GRAPH_EDGE_TYPES,
+  GRAPH_NODE_BUTTON_BASE_CLASS,
+  GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
+  GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
+  GraphEdge,
+  GraphNodeButton,
+  GraphNodeHandleBadge,
+  GraphNodeShell,
+  GraphNodeStateIndicator,
+  GraphViewportSurface,
+  buildGraphEdgePathThroughWaypoints,
+  defaultGraphNodeStateLabel,
+  graphNodeButtonIsDisabled,
+  graphNodeButtonStateAttributes,
+  graphNodeButtonStateClassName,
+  graphNodeShellStateAttributes,
+  graphNodeShellStateClassName
+};

package/{src/icons/index.ts → dist/icons/index.d.ts}

@@ -1,4 +1,3 @@
 /** Stable category path for `@you-agent-factory/components/icons`. */
-export const COMPONENTS_CATEGORY = "icons" as const;
-
+export declare const COMPONENTS_CATEGORY: "icons";
 export type ComponentsCategory = typeof COMPONENTS_CATEGORY;

package/dist/icons/index.js

@@ -0,0 +1,4 @@
+const COMPONENTS_CATEGORY = "icons";
+export {
+  COMPONENTS_CATEGORY
+};

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+/** Stable package identifier for `@you-agent-factory/components` consumers. */
+export declare const COMPONENTS_PACKAGE_NAME: "@you-agent-factory/components";
+export type ComponentsPackageName = typeof COMPONENTS_PACKAGE_NAME;
+export { COMPONENT_CATEGORY_EXPORT_PATHS, type ComponentCategoryExportPath, } from "./category-paths";
+export { Button, ButtonLink, buttonVariants, IconButtonShell } from "./primitives";
+export type { ButtonLinkProps, ButtonProps, IconButtonShellProps, } from "./primitives";
+export { DescriptionList } from "./data-display/description-list";
+export type { DescriptionListProps } from "./data-display/description-list";
+export { AlertPanel, AlertPanelStatusLabel, AlertPanelText, AlertPanelTitle, Skeleton, } from "./feedback";
+export type { AlertPanelProps, AlertPanelSemanticVariant, AlertPanelStatusLabelProps, AlertPanelTextProps, AlertPanelTitleProps, AlertPanelTone, AlertPanelVariant, } from "./feedback";
+export { CodePanel, DataTable, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, codePanelVariants, tableCellTruncateClassName, tableCellWrapClassName, tableMinWidthWideClassName, tableNarrowContainerClassName, } from "./data-display";
+export type { CodePanelProps, DataTableColumn, DataTableProps, DataTableState, TableProps, TableSize, } from "./data-display";
+export { WidgetDetailCopy, WidgetEmptyState, WidgetEmptyStateText, WidgetEmptyStateTitle, WidgetErrorState, WidgetFrame, WidgetFrameDisclosure, WidgetFrameDisclosureIcon, WidgetFrameDisclosurePanel, WidgetFrameDisclosureTrigger, WidgetFrameSkeleton, WidgetLoadingState, WidgetSubtitle, WidgetSuccessState, WIDGET_FRAME_BODY_TEXT_CLASS, WIDGET_FRAME_MIN_WIDTH_CLASS, WIDGET_FRAME_OVERFLOW_TOLERANCE_PX, WIDGET_FRAME_RESPONSIVE_SHELL_CLASS, WIDGET_FRAME_SECTION_HEADING_CLASS, WIDGET_FRAME_STORY_SHELL_DATA_ATTR, WIDGET_FRAME_SUBTITLE_CLASS, WIDGET_FRAME_SUPPORTING_LABEL_CLASS, WIDGET_FRAME_SUPPORTING_LABELS_CLASS, WIDGET_FRAME_WIDE_BODY_CLASS, widgetFrameDetailCardClass, widgetFrameHasNoHorizontalOverflow, widgetFrameStoryShellStyle, } from "./recipes";
+export type { WidgetDetailCopyProps, WidgetEmptyStateProps, WidgetEmptyStateTextProps, WidgetEmptyStateTitleProps, WidgetErrorStateProps, WidgetFrameDisclosureIconProps, WidgetFrameDisclosurePanelProps, WidgetFrameDisclosureProps, WidgetFrameDisclosureTriggerProps, WidgetFrameProps, WidgetLoadingStateProps, WidgetSubtitleProps, WidgetSuccessStateProps, } from "./recipes";
+export { buildFormFieldAriaDescribedBy, EnumSelect, ENUM_SELECT_EMPTY_VALUE, FormDescription, FormError, FormField, FormFieldGroup, FormFieldGroupLabel, FormHelperText, FormLabel, FormSuccess, FormWarning, NativeSelect, OptionalEnumSelect, PackageCheckbox, PackageFileInput, PackageInput, PackageTextarea, ResetEnumSelect, Select, SELECT_EMPTY_STATE_VALUE, SelectContent, SelectEmpty, SelectField, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, inputVariants, textareaVariants, } from "./forms";
+export { FactoryEmulatorControls } from "./factory-emulator";
+export type { FactoryEmulatorAction, FactoryEmulatorControlsProps, FactoryEmulatorRuntimeStatus, FactoryEmulatorSpeed, } from "./factory-emulator";
+export type { EnumSelectOption, EnumSelectProps, FormDescriptionProps, FormErrorProps, FormFieldGroupLabelProps, FormFieldGroupProps, FormFieldMessageIds, FormFieldProps, FormHelperTextProps, FormLabelProps, FormSuccessProps, FormWarningProps, NativeSelectProps, OptionalEnumSelectProps, PackageCheckboxProps, PackageFileInputProps, PackageInputProps, PackageTextareaProps, ResetEnumSelectProps, SelectContentProps, SelectEmptyProps, SelectFieldProps, SelectItemProps, SelectLabelProps, SelectSeparatorProps, SelectTriggerProps, } from "./forms";
+export { ActionRow } from "./layout/action-row";
+export type { ActionRowProps } from "./layout/action-row";
+export { SurfacePanel, surfacePanelVariants } from "./layout/surface-panel";
+export type { SurfacePanelProps } from "./layout/surface-panel";
+export { Code, Heading, Label, Text } from "./primitives/typography";
+export type { CodeProps, HeadingProps, LabelProps, TextProps, TextVariant, } from "./primitives/typography";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, OVERLAY_DIALOG_BODY_CLASS, OVERLAY_DIALOG_CONTENT_SHELL_CLASS, OVERLAY_FORM_GROUP_CLASS, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, } from "./overlays";
+export type { DialogContentProps, ScrollAreaProps, ScrollBarProps, } from "./overlays";