@you-agent-factory/components 0.0.0

package/src/styles/color-role-tokens.css

@@ -0,0 +1,163 @@
+/*
+ * Material-inspired color role tokens (Factory Dark baseline).
+ *
+ * Long-term theme API for dashboard UI. Product --color-af-* keys that map to
+ * roles are defined in this file; foundation/chart keys remain in styles.css.
+ *
+ * Accent intent:
+ * - primary: yellow brand accent (most prominent)
+ * - secondary: cool cyan supporting accent (af-foundation-secondary-accent)
+ * - tertiary: violet supporting accent (af-foundation-tertiary-accent)
+ *
+ * Semantic families are status-only; do not substitute for accent emphasis.
+ */
+
+@theme {
+  /* --- Neutral roles --- */
+  --color-background: var(--color-af-foundation-background);
+  --color-surface: var(--color-af-foundation-surface);
+  --color-surface-container-low: rgb(
+    from var(--color-af-foundation-overlay) r g b /
+    0.04
+  );
+  --color-surface-container: rgb(
+    from var(--color-af-foundation-overlay) r g b /
+    0.06
+  );
+  --color-surface-container-high: rgb(
+    from var(--color-af-foundation-surface) r g b /
+    0.94
+  );
+  --color-surface-container-highest: rgb(
+    from var(--color-af-foundation-overlay) r g b /
+    0.1
+  );
+  /* on-surface text roles: text-color-role-tokens.css */
+  --color-outline: rgb(from var(--color-af-foundation-overlay) r g b / 0.1);
+  --color-outline-variant: rgb(
+    from var(--color-af-foundation-overlay) r g b /
+    0.18
+  );
+
+  /* --- Primary accent (yellow brand) --- */
+  --color-primary: var(--color-af-foundation-accent);
+  --color-on-primary: var(--color-af-foundation-accent-ink);
+  --color-primary-container: rgb(
+    from var(--color-af-foundation-accent) r g b /
+    0.18
+  );
+  --color-on-primary-container: var(--color-af-foundation-accent-strong);
+
+  /* --- Secondary accent (cyan; calmer than semantic info and primary) --- */
+  --color-secondary: var(--color-af-foundation-secondary-accent);
+  --color-on-secondary: var(--color-af-foundation-canvas);
+  --color-secondary-container: rgb(
+    from var(--color-af-foundation-secondary-accent) r g b /
+    0.12
+  );
+  --color-on-secondary-container: var(
+    --color-af-foundation-secondary-accent-ink
+  );
+
+  /* --- Tertiary accent (violet; calmer than legacy worker chrome) --- */
+  --color-tertiary: var(--color-af-foundation-tertiary-accent);
+  --color-on-tertiary: var(--color-af-foundation-canvas);
+  --color-tertiary-container: rgb(
+    from var(--color-af-foundation-tertiary-accent) r g b /
+    0.13
+  );
+  --color-on-tertiary-container: var(--color-af-foundation-tertiary-accent-ink);
+
+  /* --- Semantic: success --- */
+  --color-success: var(--color-af-foundation-success);
+  --color-on-success: var(--color-af-foundation-canvas);
+  --color-success-container: rgb(
+    from var(--color-af-foundation-success) r g b /
+    0.12
+  );
+  --color-on-success-container: var(--color-af-foundation-success-ink);
+
+  /* --- Semantic: warning --- */
+  --color-warning: var(--color-af-foundation-warning);
+  --color-on-warning: var(--color-af-foundation-canvas);
+  --color-warning-container: rgb(
+    from var(--color-af-foundation-warning) r g b /
+    0.14
+  );
+  --color-on-warning-container: var(--color-af-foundation-warning-ink);
+
+  /* --- Semantic: error --- */
+  --color-error: var(--color-af-foundation-danger);
+  --color-on-error: var(--color-af-foundation-canvas);
+  --color-error-container: rgb(
+    from var(--color-af-foundation-danger) r g b /
+    0.18
+  );
+  --color-on-error-container: var(--color-af-foundation-danger-ink);
+
+  /* --- Semantic: info --- */
+  --color-info: var(--color-af-foundation-info);
+  --color-on-info: var(--color-af-foundation-canvas);
+  --color-info-container: rgb(
+    from var(--color-af-foundation-info) r g b /
+    0.12
+  );
+  --color-on-info-container: var(--color-af-foundation-info-ink);
+
+  /* --- Product af-* keys (role-backed; formerly color-role-aliases.css) --- */
+  --color-af-background: var(--color-background);
+  --color-af-surface: var(--color-surface);
+  --color-af-surface-subtle: var(--color-surface-container-low);
+  --color-af-surface-raised: var(--color-surface-container-high);
+  --color-af-border: var(--color-outline);
+  --color-af-border-strong: var(--color-outline-variant);
+  --color-af-text: var(--color-on-surface);
+  --color-af-text-muted: var(--color-on-surface-variant);
+  --color-af-text-subtle: var(--color-on-surface-subtle);
+  --color-af-text-disabled: var(--color-on-surface-disabled);
+  --color-af-text-inverse: var(--color-on-inverse);
+  --color-af-code-ink: var(--color-code);
+  --color-af-accent: var(--color-primary);
+  --color-af-accent-hover: var(--color-on-primary-container);
+  --color-af-accent-surface: var(--color-primary-container);
+  --color-af-accent-border: var(--color-primary);
+  --color-af-on-accent: var(--color-on-primary);
+  --color-af-success: var(--color-success);
+  --color-af-success-surface: var(--color-success-container);
+  --color-af-success-text: var(--color-on-success-container);
+  --color-af-on-success: var(--color-on-success);
+  --color-af-warning: var(--color-warning);
+  --color-af-warning-surface: var(--color-warning-container);
+  --color-af-warning-text: var(--color-on-warning-container);
+  --color-af-on-warning: var(--color-on-warning);
+  --color-af-danger: var(--color-error);
+  --color-af-danger-surface: var(--color-error-container);
+  --color-af-danger-text: var(--color-on-error-container);
+  --color-af-on-danger: var(--color-on-error);
+  --color-af-info: var(--color-info);
+  --color-af-info-surface: var(--color-info-container);
+  --color-af-info-text: var(--color-on-info-container);
+  --color-af-on-info: var(--color-on-info);
+  --color-af-worker: var(--color-tertiary);
+  --color-af-worker-surface: var(--color-tertiary-container);
+  --color-af-worker-text: var(--color-on-tertiary-container);
+
+  /* Semantic border and overlay tokens for feedback and loading surfaces */
+  --color-af-overlay: rgb(from var(--color-af-foundation-overlay) r g b / 0.08);
+  --color-af-success-border: rgb(
+    from var(--color-af-foundation-success) r g b /
+    0.28
+  );
+  --color-af-warning-border: rgb(
+    from var(--color-af-foundation-warning) r g b /
+    0.3
+  );
+  --color-af-danger-border: rgb(
+    from var(--color-af-foundation-danger) r g b /
+    0.3
+  );
+  --color-af-info-border: rgb(
+    from var(--color-af-foundation-info) r g b /
+    0.28
+  );
+}

package/src/styles/layout-role-tokens.css

@@ -0,0 +1,27 @@
+/*
+ * Dashboard layout spacing scale (4px grid, Material-aligned rhythm).
+ *
+ * Semantic layout spacing roles map to Tailwind gap/padding utilities:
+ * gap-layout-tight, p-layout-inset-dialog, etc.
+ *
+ * Prefer layout primitives and dashboard-layout.ts constants in TSX;
+ * use raw Tailwind spacing utilities only for one-off composition (US-007).
+ */
+
+@theme {
+  /* Vertical / horizontal gaps between related elements */
+  --spacing-layout-tight: 0.5rem;
+  --spacing-layout-element: 0.75rem;
+  --spacing-layout-group: 1rem;
+  --spacing-layout-block: 1.25rem;
+  --spacing-layout-section: 1.5rem;
+  --spacing-layout-page: 2rem;
+
+  /* Insets for recurring shells */
+  --spacing-layout-inset-card: 1rem;
+  --spacing-layout-inset-card-relaxed: 1.25rem;
+  --spacing-layout-inset-dialog: 1.5rem;
+
+  /* Card elevation for framed widget shells */
+  --shadow-af-card: 0 12px 28px rgb(from var(--color-af-shadow) r g b / 0.2);
+}

package/src/styles/text-color-role-tokens.css

@@ -0,0 +1,29 @@
+/*
+ * Text color roles (Factory Dark baseline).
+ *
+ * Complements surface/accent/semantic fill roles in color-role-tokens.css.
+ * Use utilities such as text-on-surface, text-on-inverse, text-on-primary-container.
+ */
+
+@theme {
+  /* High- and medium-emphasis text on neutral surfaces */
+  --color-on-surface: var(--color-af-foundation-ink);
+  --color-on-surface-variant: rgb(
+    from var(--color-af-foundation-ink) r g b /
+    0.78
+  );
+  --color-on-surface-subtle: rgb(
+    from var(--color-af-foundation-ink) r g b /
+    0.58
+  );
+  --color-on-surface-disabled: rgb(
+    from var(--color-af-foundation-ink) r g b /
+    0.42
+  );
+
+  /* Inverse / on-dark fills (accent chips, inverted tooltips) */
+  --color-on-inverse: var(--color-af-foundation-canvas);
+
+  /* Product extension: monospace and code blocks beside Material body roles */
+  --color-code: var(--color-af-foundation-code-ink);
+}

package/src/styles/typography-role-tokens.css

@@ -0,0 +1,72 @@
+/*
+ * Material 3 typography scale (Factory Dark baseline).
+ *
+ * Role families: display, headline, title, body, label (+ product code extension).
+ * Tailwind utilities: text-display-medium, text-body-small, type-title-large, etc.
+ *
+ * Intent follows Material applying-type guidance; sizes are tuned for dashboard density.
+ */
+
+@theme {
+  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
+  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
+  --font-mono: "IBM Plex Mono", "Consolas", monospace;
+
+  /* --- Display (hero / high-emphasis numeric) --- */
+  --text-display-large: clamp(2.25rem, 5vw, 3.75rem);
+  --text-display-large--line-height: 1;
+  --text-display-large--letter-spacing: 0;
+  --text-display-medium: clamp(1.85rem, 4vw, 3rem);
+  --text-display-medium--line-height: 1;
+  --text-display-medium--letter-spacing: 0;
+  --text-display-small: 2rem;
+  --text-display-small--line-height: 1.1;
+  --text-display-small--letter-spacing: 0;
+
+  /* --- Headline (prominent short headings) --- */
+  --text-headline-large: 1.5rem;
+  --text-headline-large--line-height: 1.2;
+  --text-headline-large--letter-spacing: 0;
+  --text-headline-medium: 1.25rem;
+  --text-headline-medium--line-height: 1.25;
+  --text-headline-small: 1.125rem;
+  --text-headline-small--line-height: 1.3;
+
+  /* --- Title (page / section / subsection wayfinding) --- */
+  --text-title-large: 1.02rem;
+  --text-title-large--line-height: 1.25;
+  --text-title-large--font-weight: 600;
+  --text-title-medium: 0.95rem;
+  --text-title-medium--line-height: 1.3;
+  --text-title-medium--font-weight: 600;
+  --text-title-small: 0.875rem;
+  --text-title-small--line-height: 1.35;
+  --text-title-small--font-weight: 600;
+
+  /* --- Body (long-form reading) --- */
+  --text-body-large: 1rem;
+  --text-body-large--line-height: 1.55;
+  --text-body-medium: 0.9rem;
+  --text-body-medium--line-height: 1.55;
+  --text-body-small: 0.8rem;
+  --text-body-small--line-height: 1.45;
+
+  /* --- Label (controls, compact annotations) --- */
+  --text-label-large: 0.875rem;
+  --text-label-large--line-height: 1.35;
+  --text-label-large--font-weight: 600;
+  --text-label-medium: 0.8rem;
+  --text-label-medium--line-height: 1.35;
+  --text-label-medium--font-weight: 700;
+  --text-label-medium--letter-spacing: 0.08em;
+  --text-label-small: 0.75rem;
+  --text-label-small--line-height: 1.3;
+  --text-label-small--font-weight: 700;
+  --text-label-small--letter-spacing: 0.1em;
+
+  /* --- Code (product extension, monospace) --- */
+  --text-code-medium: 0.9rem;
+  --text-code-medium--line-height: 1.55;
+  --text-code-small: 0.8rem;
+  --text-code-small--line-height: 1.45;
+}

package/src/styles/typography-role-utilities.css

@@ -0,0 +1,73 @@
+/*
+ * Composed typography utilities pairing Material scale roles with text color roles.
+ */
+
+@layer components {
+  .type-display-large {
+    @apply font-display text-display-large;
+  }
+
+  .type-display-medium {
+    @apply font-display text-display-medium;
+  }
+
+  .type-display-small {
+    @apply font-display text-display-small;
+  }
+
+  .type-headline-large {
+    @apply font-sans text-headline-large font-semibold;
+  }
+
+  .type-headline-medium {
+    @apply font-sans text-headline-medium font-semibold;
+  }
+
+  .type-headline-small {
+    @apply font-sans text-headline-small font-semibold;
+  }
+
+  .type-title-large {
+    @apply font-sans text-title-large;
+  }
+
+  .type-title-medium {
+    @apply font-sans text-title-medium;
+  }
+
+  .type-title-small {
+    @apply font-sans text-title-small;
+  }
+
+  .type-body-large {
+    @apply font-sans text-body-large;
+  }
+
+  .type-body-medium {
+    @apply font-sans text-body-medium;
+  }
+
+  .type-body-small {
+    @apply font-sans text-body-small;
+  }
+
+  .type-label-large {
+    @apply font-sans text-label-large uppercase;
+  }
+
+  .type-label-medium {
+    @apply font-sans text-label-medium uppercase;
+  }
+
+  .type-label-small {
+    @apply font-sans text-label-small uppercase;
+  }
+
+  .type-code-medium {
+    @apply font-mono text-code-medium;
+  }
+
+  .type-code-small {
+    @apply font-mono text-code-small;
+  }
+}

package/src/styles/typography-roles.css

@@ -0,0 +1,53 @@
+/*
+ * Domain-free typography role classes for package consumers.
+ */
+
+@layer components {
+  .af-page-heading {
+    @apply font-display text-display-medium text-on-surface;
+  }
+
+  .af-section-heading {
+    @apply text-title-large uppercase text-on-surface;
+  }
+
+  .af-body-text {
+    @apply text-body-medium text-on-surface-variant;
+  }
+
+  .af-supporting-text {
+    @apply text-body-small text-on-surface-variant;
+  }
+
+  .af-supporting-label {
+    @apply text-label-medium uppercase text-on-surface-subtle;
+  }
+
+  .af-body-code {
+    @apply font-mono text-code-medium text-code;
+  }
+
+  .af-supporting-code {
+    @apply font-mono text-code-small text-code;
+  }
+
+  .af-muted-text {
+    @apply text-body-medium text-on-surface-subtle;
+  }
+
+  .af-caption-text {
+    @apply text-label-small text-on-surface-subtle;
+  }
+
+  .af-dense-body-text {
+    @apply text-body-small leading-tight text-on-surface-variant;
+  }
+
+  .af-text-truncate {
+    @apply block min-w-0 max-w-full truncate whitespace-nowrap;
+  }
+
+  .af-text-wrap {
+    @apply min-w-0 break-words [overflow-wrap:anywhere];
+  }
+}

package/src/styles.css

@@ -0,0 +1,32 @@
+/*
+ * @you-agent-factory/components package styles entrypoint.
+ * Shared role, palette, typography, and layout tokens for component consumers.
+ */
+
+@import "./styles/color-palette-presets.css";
+@import "./styles/color-role-tokens.css";
+@import "./styles/text-color-role-tokens.css";
+@import "./styles/typography-role-tokens.css";
+@import "./styles/typography-role-utilities.css";
+@import "./styles/typography-roles.css";
+@import "./styles/layout-role-tokens.css";
+
+@keyframes overlay-collapsible-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes overlay-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}

package/src/testing/index.ts

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

package/src/testing/render.tsx

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

package/src/tokens/index.ts

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

package/src/utilities/cn.ts

@@ -0,0 +1,5 @@
+export function cn(
+  ...classes: Array<false | null | string | undefined>
+): string {
+  return classes.filter(Boolean).join(" ");
+}

package/src/utilities/index.ts

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