@you-agent-factory/components 0.0.0 → 0.0.2

package/{src → dist}/styles.css

@@ -11,6 +11,42 @@
 @import "./styles/typography-roles.css";
 @import "./styles/layout-role-tokens.css";
 
+.factory-emulator-playback,
+.factory-emulator-playback__actions,
+.factory-emulator-playback__speed {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.factory-emulator-playback,
+.factory-emulator-playback__actions {
+  flex-wrap: wrap;
+}
+
+.factory-emulator-playback {
+  inline-size: 100%;
+}
+
+.factory-emulator-playback__action,
+.factory-emulator-playback__speed-select,
+.factory-emulator-playback__status {
+  min-block-size: 2.25rem;
+}
+
+.factory-emulator-playback__action {
+  padding: 0.5rem 0.75rem;
+}
+
+.factory-emulator-playback__speed {
+  margin-inline-start: auto;
+}
+
+.factory-emulator-playback__speed-select,
+.factory-emulator-playback__status {
+  padding: 0.5rem;
+}
+
 @keyframes overlay-collapsible-down {
   from {
     height: 0;

package/dist/testing/index.d.ts

@@ -0,0 +1,4 @@
+/** Stable category path for `@you-agent-factory/components/testing`. */
+export declare const COMPONENTS_CATEGORY: "testing";
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+export { render, renderPackageComponent, screen, userEvent, waitFor, within, } from "./render";

package/dist/testing/index.js

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { render as render2, screen, waitFor, within } from "@testing-library/react";
+import { default as default2 } from "@testing-library/user-event";
+function renderPackageComponent(ui, options) {
+  return render(ui, options);
+}
+const COMPONENTS_CATEGORY = "testing";
+export {
+  COMPONENTS_CATEGORY,
+  render2 as render,
+  renderPackageComponent,
+  screen,
+  default2 as userEvent,
+  waitFor,
+  within
+};

package/dist/testing/render.d.ts

@@ -0,0 +1,5 @@
+import { type RenderOptions, type RenderResult } from "@testing-library/react";
+import type { ReactElement } from "react";
+export declare function renderPackageComponent(ui: ReactElement, options?: Omit<RenderOptions, "wrapper">): RenderResult;
+export { fireEvent, render, screen, within, waitFor } from "@testing-library/react";
+export { default as userEvent } from "@testing-library/user-event";

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

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

package/dist/tokens/index.js

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

package/dist/utilities/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: Array<false | null | string | undefined>): string;

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

@@ -1,6 +1,4 @@
 /** Stable category path for `@you-agent-factory/components/utilities`. */
-export const COMPONENTS_CATEGORY = "utilities" as const;
-
+export declare const COMPONENTS_CATEGORY: "utilities";
 export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
 export { cn } from "./cn";

package/dist/utilities/index.js

@@ -0,0 +1,6 @@
+import { c } from "../chunks/cn.js";
+const COMPONENTS_CATEGORY = "utilities";
+export {
+  COMPONENTS_CATEGORY,
+  c as cn
+};

package/package.json

@@ -1,122 +1,123 @@
 {
   "name": "@you-agent-factory/components",
-  "description": "Reusable presentation components, design tokens, and docs for You Agent Factory UIs.",
-  "version": "0.0.0",
+  "version": "0.0.2",
+  "description": "Domain-free React components, design tokens, and utilities for public visualizers.",
   "license": "MIT",
-  "type": "module",
-  "homepage": "https://github.com/portpowered/you-agent-factory#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/portpowered/you-agent-factory.git",
     "directory": "ui/packages/components"
   },
-  "bugs": {
-    "url": "https://github.com/portpowered/you-agent-factory/issues"
-  },
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "README.md",
-    "docs/**/*.md",
-    "src/**/*.css",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.stories.ts",
-    "!src/**/*.stories.tsx",
-    "!src/**/*.harness.test.ts",
-    "!src/**/*.integration.test.tsx",
-    "!src/**/storybook-*.ts",
-    "!src/**/storybook-*.tsx",
-    "!src/**/package-*-story-support.tsx",
-    "!src/**/*story-fixtures.ts",
-    "!src/**/overlay-story*.ts",
-    "!src/**/compile-package-token-styles.ts",
-    "!src/**/package-token-fixture-usage.ts",
-    "!src/**/package-token-styles-fixture.css",
-    "!src/testing/package-browser-shims.ts",
-    "!src/testing/react-flow-test-shims.ts",
-    "!src/testing/vitest.setup.ts",
-    "!src/vite-aliases.ts"
+    "dist",
+    "LICENSE.md",
+    "README.md"
   ],
+  "type": "module",
   "sideEffects": [
     "*.css",
     "**/*.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./styles.css": "./src/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./primitives": {
-      "types": "./src/primitives/index.ts",
-      "default": "./src/primitives/index.ts"
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives/index.js",
+      "default": "./dist/primitives/index.js"
     },
     "./forms": {
-      "types": "./src/forms/index.ts",
-      "default": "./src/forms/index.ts"
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js",
+      "default": "./dist/forms/index.js"
     },
     "./layout": {
-      "types": "./src/layout/index.ts",
-      "default": "./src/layout/index.ts"
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js",
+      "default": "./dist/layout/index.js"
     },
     "./feedback": {
-      "types": "./src/feedback/index.ts",
-      "default": "./src/feedback/index.ts"
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback/index.js",
+      "default": "./dist/feedback/index.js"
     },
     "./data-display": {
-      "types": "./src/data-display/index.ts",
-      "default": "./src/data-display/index.ts"
+      "types": "./dist/data-display/index.d.ts",
+      "import": "./dist/data-display/index.js",
+      "default": "./dist/data-display/index.js"
     },
     "./navigation": {
-      "types": "./src/navigation/index.ts",
-      "default": "./src/navigation/index.ts"
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "default": "./dist/navigation/index.js"
     },
     "./overlays": {
-      "types": "./src/overlays/index.ts",
-      "default": "./src/overlays/index.ts"
+      "types": "./dist/overlays/index.d.ts",
+      "import": "./dist/overlays/index.js",
+      "default": "./dist/overlays/index.js"
     },
     "./charts": {
-      "types": "./src/charts/index.ts",
-      "default": "./src/charts/index.ts"
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js",
+      "default": "./dist/charts/index.js"
+    },
+    "./factory-emulator": {
+      "types": "./dist/factory-emulator/index.d.ts",
+      "import": "./dist/factory-emulator/index.js",
+      "default": "./dist/factory-emulator/index.js"
     },
     "./graphs": {
-      "types": "./src/graphs/index.ts",
-      "default": "./src/graphs/index.ts"
+      "types": "./dist/graphs/index.d.ts",
+      "import": "./dist/graphs/index.js",
+      "default": "./dist/graphs/index.js"
     },
     "./recipes": {
-      "types": "./src/recipes/index.ts",
-      "default": "./src/recipes/index.ts"
+      "types": "./dist/recipes/index.d.ts",
+      "import": "./dist/recipes/index.js",
+      "default": "./dist/recipes/index.js"
     },
     "./icons": {
-      "types": "./src/icons/index.ts",
-      "default": "./src/icons/index.ts"
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js",
+      "default": "./dist/icons/index.js"
     },
     "./utilities": {
-      "types": "./src/utilities/index.ts",
-      "default": "./src/utilities/index.ts"
+      "types": "./dist/utilities/index.d.ts",
+      "import": "./dist/utilities/index.js",
+      "default": "./dist/utilities/index.js"
     },
     "./testing": {
-      "types": "./src/testing/index.ts",
-      "default": "./src/testing/index.ts"
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.js",
+      "default": "./dist/testing/index.js"
     },
     "./tokens": {
-      "types": "./src/tokens/index.ts",
-      "default": "./src/tokens/index.ts"
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js",
+      "default": "./dist/tokens/index.js"
     }
   },
   "scripts": {
+    "build": "node scripts/build-package.mjs",
     "build-storybook": "storybook build --loglevel warn",
+    "check:installed-consumer": "node scripts/verify-installed-consumer.mjs",
+    "check:pack": "node scripts/verify-package-pack.mjs",
     "check:package-boundary": "node scripts/check-package-boundary.mjs",
     "check:package-dependency-direction": "node scripts/check-package-dependency-direction.mjs",
+    "prepack": "bun run build",
     "storybook": "storybook dev -p 6017",
     "test": "bun run test:unit && bun run check:package-boundary && bun run check:package-dependency-direction",
+    "test:build": "bun run build && vitest run --config vitest.build.config.ts",
     "test:unit": "vitest run --config vitest.config.ts",
     "typecheck": "tsc -b --noEmit --pretty false",
-    "verify": "bun run typecheck && bun run test:unit && bun run build-storybook && bun run check:package-boundary && bun run check:package-dependency-direction",
+    "verify": "bun run build && bun run typecheck && bun run test:unit && bun run build-storybook && bun run check:package-boundary && bun run check:package-dependency-direction && bun run check:pack && bun run check:installed-consumer",
     "verify:form-field-storybook-browser": "node scripts/verify-package-form-field-storybook-browser.mjs",
     "verify:graph-storybook-viewport-browser": "node scripts/verify-graph-storybook-viewport-browser.mjs",
     "verify:storybook-browser": "node scripts/verify-package-storybook-browser.mjs",
@@ -131,6 +132,8 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.3.0",
     "@radix-ui/react-slot": "^1.2.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@xyflow/react": "^12.10.2",
     "recharts": "^3.8.1"
   },
@@ -144,8 +147,6 @@
     "@tailwindcss/vite": "^4.2.2",
     "@vitejs/plugin-react-swc": "^4.1.0",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "happy-dom": "^20.9.0",

package/docs/README.md

@@ -1,83 +0,0 @@
-# Component package documentation
-
-Per-component usage notes, props tables, and examples belong in this
-directory. Add one markdown file per component (or small component group) as
-those surfaces are documented.
-
-## What belongs here
-
-- Import paths and category entrypoints for a component
-- Props, variants, and accessibility notes
-- Short usage examples that do not depend on dashboard routes or API clients
-
-## What does not belong here
-
-- Dashboard-only wiring, data fetching, or business workflow guides
-- Generated docs registries, docs-site routes, or build-time documentation
-  tooling
-
-This docs shell is plain markdown kept under version control. Host applications
-read it directly from the package; no docs-site implementation is required.
-
-## Documented components
-
-- [Button primitives](./button.md) — `Button`, `ButtonLink`, `IconButtonShell`,
-  semantic variants, loading behavior, and icon-only accessibility labels.
-- [Typography roles](./typography-roles.md) — `Text`, `Heading`, `Label`,
-  `Code`, dense text, truncation, and wrapping
-- [Layout and display primitives](./layout-display-primitives.md) —
-  `SurfacePanel`, `ActionRow`, `DescriptionList`, and responsive layout guidance
-- [Form select primitives](./forms-select-primitives.md) — `Select`,
-  `NativeSelect`, `EnumSelect`, keyboard behavior, and option contracts
-- [Form field structure and messaging](./forms-form-field.md) — `FormField`,
-  labels, descriptions, helper text, warnings, errors, success messages,
-  grouped-control semantics, and host validation responsibilities
-- [Overlay and disclosure primitives](./overlays.md) — Dialog, Popover,
-  Collapsible, and ScrollArea accessibility, labeling, focus, and overflow
-  guidance.
-
-## Getting started
-
-See the package [README](../README.md) for install, CSS import setup, theming,
-and consumer dependency boundaries. Link new component docs from that README or
-from sibling files in this directory as the library grows.
-
-## Component guides
-
-- [Charts](./charts.md) — `ChartContainer`, tooltip and legend content, state
-  panels, config types, and host-owned data boundaries
-
-## Form input primitives
-
-- [Form input primitives](./forms-input-primitives.md) — import paths, controlled
-  versus uncontrolled usage, host accessibility responsibilities, and
-  presentation-only boundaries for text input, textarea, checkbox, and file input.
-- [Form field structure and messaging](./forms-form-field.md) — `FormField`,
-  labels, descriptions, helper text, warnings, errors, success messages,
-  grouped-control semantics, `buildFormFieldAriaDescribedBy`, and host validation
-  responsibilities.
-
-## Feedback and code display
-
-- [AlertPanel](./feedback-alert-panel.md) — semantic feedback variants, token
-  mapping, accessibility, and Storybook references
-- [Skeleton](./feedback-skeleton.md) — loading placeholders, busy regions, and
-  empty vs loading feedback
-- [CodePanel](./data-display-code-panel.md) — long-line and long-block
-  containment, scrolling, and responsive layout expectations
-
-## Table data display
-
-- [Table primitives and DataTable](./table-data-table.md) — generic row contract,
-  explicit data states, density and responsive layout helpers, accessibility,
-  and Storybook references for domain-free tabular data display.
-
-## Widget layout recipes
-
-- [Graph primitives](./graphs.md) — `@you-agent-factory/components/graphs`
-  contracts, React Flow boundary, host responsibilities, and Storybook example
-  map
-- [Widget frame and layout recipes](./widget-frame-recipes.md) — import paths,
-  state ownership, accessibility, Storybook references, and source-copy guidance
-  for domain-free framed panels.
-

package/docs/button.md

@@ -1,119 +0,0 @@
-# Button primitives
-
-`Button`, `ButtonLink`, and `IconButtonShell` are the reusable action primitives in
-`@you-agent-factory/components`. They provide semantic tones, loading behavior,
-icon-only sizing, and shared focus-visible treatment without dashboard routes,
-providers, API clients, or generated OpenAPI types.
-
-## Import paths
-
-```ts
-import {
-  Button,
-  ButtonLink,
-  IconButtonShell,
-  buttonVariants,
-  type ButtonProps,
-  type ButtonLinkProps,
-  type IconButtonShellProps,
-} from "@you-agent-factory/components";
-
-import {
-  Button as PrimitiveButton,
-  ButtonLink as PrimitiveButtonLink,
-  IconButtonShell as PrimitiveIconButtonShell,
-} from "@you-agent-factory/components/primitives";
-```
-
-Import `@you-agent-factory/components/styles.css` once in the host application
-before rendering buttons. See the package [README](../README.md) for CSS setup.
-
-## Button vs ButtonLink
-
-| Primitive | Renders | Use when |
-| --- | --- | --- |
-| `Button` | `<button>` (or child via `asChild`) | The action stays on the current view: submit forms, open dialogs, trigger async work, or run in-place commands. |
-| `ButtonLink` | `<a>` styled with shared button tokens | Navigation should use a real link: route changes, external URLs, or downloads where anchor semantics and `href` behavior are required. |
-
-`ButtonLink` does not support `loading` because anchor elements do not expose the
-same busy/disabled interaction model as buttons. Show progress elsewhere when a
-navigation target is not yet ready.
-
-`Button` supports `asChild` for composition, but prefer `ButtonLink` when the
-rendered element must be an anchor.
-
-## Semantic button variants
-
-Set `tone` on `Button` and `ButtonLink`, or on `IconButtonShell` for toolbar
-actions. Variants map to semantic roles rather than dashboard feature styling.
-
-| `tone` | Role | When to use |
-| --- | --- | --- |
-| `default` | Primary | The single most important action in a section or dialog footer. |
-| `secondary` | Secondary | Supporting actions that still need button emphasis, such as "Save draft". |
-| `outline` | Outline | Neutral actions on busy surfaces or paired secondary controls in toolbars. |
-| `ghost` | Ghost | Low-emphasis actions on dense panels where borders would add noise. |
-| `destructive` | Destructive | Irreversible or high-risk operations such as delete or remove. Keep the label specific; do not rely on color alone. |
-| `warning` | Warning | Actions that need caution but are not strictly destructive, such as "Review warnings". |
-
-`IconButtonShell` also supports `tone="dangerGhost"` for compact destructive icon
-actions. It keeps icon-button sizing while applying destructive hover treatment.
-
-### Sizes
-
-`Button` and `ButtonLink` accept `size` values such as `default`, `sm`, `lg`,
-`pill`, `icon`, and `iconPill`. `IconButtonShell` fixes toolbar-friendly
-`h-10 w-10` icon sizing and should be used for compact icon-only controls.
-
-## Loading buttons
-
-Pass `loading` to `Button` (including `IconButtonShell`) when an action is in
-progress:
-
-- Sets `aria-busy="true"` and disables the control to prevent duplicate activation.
-- Preserves the accessible name from visible text or `aria-label`.
-- Renders a centered spinner overlay while keeping label content in the accessibility tree.
-
-Do not attach separate click handlers that ignore the disabled state while
-`loading` is true.
-
-## Icon-only accessibility
-
-Icon-only buttons must expose a clear accessible name:
-
-- Prefer visible text when space allows.
-- Otherwise provide `aria-label` with a specific action name such as
-  `"Refresh jobs"` or `"Export dashboard"`.
-- Mark decorative icons with `aria-hidden="true"` so screen readers use the
-  button label only.
-
-`IconButtonShell` inherits the `h-11 w-11` / toolbar touch target from the
-shared button size tokens. Avoid shrinking icon-only controls below the package
-defaults unless the host design system documents an exception.
-
-## Host application responsibilities
-
-The component package owns presentation: markup, semantic tones, focus rings,
-loading overlays, and token-backed styling.
-
-Host applications own:
-
-- **Action copy** — button labels, `aria-label` text, and confirmation messaging.
-- **Click handlers** — business logic, validation, and error handling.
-- **Routing** — `href` values, client-side navigation, and download targets for `ButtonLink`.
-- **Domain workflows** — when an action is enabled, loading, or destructive in product context.
-
-Pass data and callbacks into button primitives as props. Do not expect the
-package to read app stores, routers, or API layers.
-
-## Storybook examples
-
-Package Storybook stories demonstrate expected states with package imports only:
-
-- `Primitives/Button/Semantic variants` — normal, disabled, destructive, warning,
-  and link-like examples.
-- `Primitives/Button/Loading and icon only` — loading, focus-visible, icon-only,
-  and destructive icon shell examples.
-
-Run `bun run storybook` from `ui/packages/components` or inspect the static
-build with `bun run build-storybook`.