FE-219: port and wire all components from park-ui, as stubs

.changeset/humble-vans-make.md

@@ -0,0 +1,6 @@
+---
+"@hashintel/ds-components": minor
+"@hashintel/ds-helpers": minor
+---
+
+Expose preset-owned `tokens` and `semanticTokens` from `@hashintel/ds-components/tokens` in place of the old `./theme` export, and add generated `@hashintel/ds-helpers/recipes` exports for recipe consumers.

libs/@hashintel/ds-components/.ladle/config.mjs

@@ -6,6 +6,7 @@ export default {
   viteConfig: "./vite.config.ts",
   outDir: ".build/ladle",
   envDir: ".",
+  storyOrder: ["primitives--*", "tokens--*", "legacy--*", "*"],
   addons: {
     rtl: { enabled: false },
     a11y: { enabled: false },

libs/@hashintel/ds-components/AGENTS.md

@@ -9,7 +9,7 @@ It owns:
 - the Panda preset source in `src/preset/**`
 - token/codegen scripts in `scripts/**`
 - the component library in `src/components/**`
-- the token/demo surface in `src/stories/**`, `.ladle/`, and `tests/**`
+- the token/demo surface in `src/tokens/**`, `src/stories/Intro.mdx`, `.ladle/`, and `tests/**`
 
 It still consumes the generated runtime styling utilities from `@hashintel/ds-helpers`.
 
@@ -36,7 +36,8 @@ Boundary rules:
 
 - `ds-components` generates `../ds-helpers/styled-system` via Panda `outdir`.
 - `ds-helpers` must not depend on `ds-components`.
-- `@hashintel/ds-components/preset` and `@hashintel/ds-components/theme` are the canonical public preset/theme entrypoints.
+- `@hashintel/ds-components/preset` is the canonical public styling entrypoint.
+- `@hashintel/ds-components/tokens` is the public package-owned token export for `tokens` and `semanticTokens`.
 
 ## Panda CSS Configuration
 
@@ -242,8 +243,9 @@ libs/@hashintel/ds-components/
 ├── src/
 │   ├── components/
 │   ├── preset/             # Panda preset source of truth
-│   ├── stories/
-│   ├── theme.ts            # Public `./theme` facade
+│   ├── stories/            # Shared docs such as Intro.mdx
+│   ├── tokens/             # Token stories and fixtures
+│   ├── tokens.ts           # Public `./tokens` facade
 ├── scripts/                # Token/codegen scripts
 ├── tests/                  # Snapshot/demo tests
 ├── panda.config.ts

libs/@hashintel/ds-components/CONTRIBUTING.md

@@ -7,9 +7,9 @@ This guide covers the current post-FE-612 package layout for humans and coding a
 - `@hashintel/ds-components` is the source-owning package.
 - `src/preset/**` contains the Panda preset source and theme/token inputs used by the preset.
 - `scripts/**` owns token and color code generation.
-- `src/components/**`, `src/stories/**`, `.ladle/**`, and `tests/**` are owned here as the component, demo, and snapshot surfaces.
+- `src/components/**`, `src/tokens/**`, `src/stories/Intro.mdx`, `.ladle/**`, and `tests/**` are owned here as the component, demo, and snapshot surfaces.
 - `@hashintel/ds-helpers` is the generated Panda `styled-system` artifact only.
-- The old `@hashintel/ds-theme` package has been retired; use `@hashintel/ds-components/preset` and `@hashintel/ds-components/theme` instead.
+- The old `@hashintel/ds-theme` package has been retired; use `@hashintel/ds-components/preset` instead.
 
 For new internal work, treat `ds-components` as the only source of truth.
 
@@ -19,9 +19,10 @@ For new internal work, treat `ds-components` as the only source of truth.
 | --- | --- | --- |
 | Components | `src/components/<Component>/<component>.tsx` and `src/components/*/*.stories.tsx` | Public component entrypoints live at the top of `src/components/` and are built by `tsdown`. |
 | Panda preset source | `src/preset.ts`, `src/preset/**` | This is the live preset consumed by `@hashintel/ds-components/preset`. |
-| Package-owned theme facade | `src/theme.ts` | Re-exports from `src/preset/theme`. |
+| Package-owned token facade | `src/tokens.ts`, `src/preset/tokens.ts` | This is the public `@hashintel/ds-components/tokens` surface and its internal source of truth. |
 | Token and color generators | `scripts/**` | Reads `scripts/figma-variables.json` and writes generated preset files under `src/preset/theme/**`. |
-| Token demo stories | `src/stories/tokens/**` | Token reference and migration/demo stories live here now. |
+| Token demo stories | `src/tokens/**` | Token reference and migration/demo stories live here now. |
+| Intro docs | `src/stories/Intro.mdx` | Shared intro documentation for the Ladle surface. |
 | Local demo config | `panda.local.config.ts` | Shared Panda config for local demo surfaces such as Ladle. |
 | Ladle harness | `.ladle/**` | Used for the token/demo surface and Playwright snapshots. |
 | Snapshot tests | `tests/**` | Snapshot harness for the Ladle surface. |
@@ -41,13 +42,19 @@ When you need token lookup helpers or public token types, use the generated runt
 import { token, type Token } from "@hashintel/ds-helpers/tokens";
 ```
 
+When you need the package-owned Panda token objects that feed the preset, use:
+
+```ts
+import { semanticTokens, tokens } from "@hashintel/ds-components/tokens";
+```
+
 When a consumer needs the Panda preset, use:
 
 ```ts
 import { preset, scopedThemeConfig } from "@hashintel/ds-components/preset";
 ```
 
-Do not resurrect `@hashintel/ds-theme`; `ds-components` now owns the public preset and theme entrypoints directly.
+Do not resurrect `@hashintel/ds-theme`; `ds-components` now owns the public preset entrypoint directly.
 
 ## Component Workflow
 
@@ -171,7 +178,7 @@ Color tokens should come from the semantic palette already defined in the preset
 
 - `yarn dev` is the primary Ladle-based loop and the best default when changing token stories or the demo harness. It uses the shared Vite/PostCSS config for Panda style extraction while Ladle is running.
 - `yarn dev:lib` is the lightest loop when you only need the publishable package build watcher.
-- `src/stories/tokens/**` owns the token reference stories that used to live under `ds-helpers`.
+- `src/tokens/**` owns the token reference stories that used to live under `ds-helpers`.
 - `tests/snapshots.spec.ts` exercises the Ladle surface and stores the images in `tests/__snapshots__/`.
 
 ## Common Pitfalls

libs/@hashintel/ds-components/README.md

@@ -1,24 +1,24 @@
 # @hashintel/ds-components
 
-React components for HASH's refractive design system, built with TypeScript, Ark UI, and PandaCSS.
+React components for HASH's design system, built with TypeScript, Ark UI, and PandaCSS.
 
 ## Ownership Model
 
 As of the FE-612 ownership restructure:
 
 - `@hashintel/ds-components` owns the Panda preset source, token/codegen scripts, and demo surfaces.
 - `@hashintel/ds-helpers` is the generated Panda `styled-system` artifact.
-- The old `@hashintel/ds-theme` surface has been folded into `@hashintel/ds-components/preset` and `@hashintel/ds-components/theme`.
+- The old `@hashintel/ds-theme` surface has been folded into `@hashintel/ds-components/preset`.
 
 For new internal work, treat `ds-components` as the source of truth.
 
 ## Public Entry Points
 
-| Entry point | Purpose |
-| --- | --- |
-| `@hashintel/ds-components` | Published component entrypoints from `src/components/*.tsx` |
+| Entry point                       | Purpose                                                                        |
+| --------------------------------- | ------------------------------------------------------------------------------ |
+| `@hashintel/ds-components`        | Published component entrypoints from `src/components/*.tsx`                    |
 | `@hashintel/ds-components/preset` | Panda preset helpers such as `preset`, `createPreset`, and `scopedThemeConfig` |
-| `@hashintel/ds-components/theme` | Package-owned theme facade re-exporting from `src/preset/theme` |
+| `@hashintel/ds-components/tokens` | Package-owned Panda token objects such as `tokens` and `semanticTokens`        |
 
 Component implementation still uses the generated Panda runtime from `@hashintel/ds-helpers`:
 
@@ -27,20 +27,23 @@ import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import { Box, Flex, Stack } from "@hashintel/ds-helpers/jsx";
 ```
 
-Token lookup helpers and token types should also come from `@hashintel/ds-helpers/tokens`.
+Token lookup helpers and token types should still come from `@hashintel/ds-helpers/tokens`.
+Use `@hashintel/ds-components/tokens` when you need the package-owned Panda token objects themselves.
 
 ## Package Layout
 
-| Area | Location |
-| --- | --- |
-| Components | `src/components/**` |
-| Panda preset source | `src/preset.ts`, `src/preset/**` |
-| Token and color generators | `scripts/**` |
-| Stories | `src/components/*/*.stories.tsx` |
-| Token demo stories | `src/stories/**` |
-| Local demo config | `panda.local.config.ts` |
-| Ladle harness | `.ladle/**` |
-| Snapshot tests | `tests/**` |
+| Area                       | Location                         |
+| -------------------------- | -------------------------------- |
+| Components                 | `src/components/**`              |
+| Panda preset source        | `src/preset.ts`, `src/preset/**` |
+| Package token facade       | `src/tokens.ts`                  |
+| Token and color generators | `scripts/**`                     |
+| Stories                    | `src/components/*/*.stories.tsx` |
+| Token demo stories         | `src/tokens/**`                  |
+| Intro docs                 | `src/stories/Intro.mdx`          |
+| Local demo config          | `panda.local.config.ts`          |
+| Ladle harness              | `.ladle/**`                      |
+| Snapshot tests             | `tests/**`                       |
 
 ## Common Commands
 

libs/@hashintel/ds-components/_docs/research/park-ui-porting-guide.md

@@ -8,7 +8,7 @@ This guide was originally written before the FE-612 ownership restructure. Apply
 
 - preset and token source changes belong in `@hashintel/ds-components/src/preset/**`
 - token and color generation lives in `@hashintel/ds-components/scripts/**`
-- token demo stories live in `@hashintel/ds-components/src/stories/tokens/**`
+- token demo stories live in `@hashintel/ds-components/src/tokens/**`
 - `@hashintel/ds-helpers` is the generated Panda runtime only
 
 ## Reference Repositories
@@ -119,7 +119,7 @@ Established mapping from Radix neutral → HASH gray:
 | 11 | 60 | Low-contrast text |
 | 12 | 90 | High-contrast text |
 
-Visual comparison story: `libs/@hashintel/ds-components/src/stories/tokens/tokens.color-migration.story.tsx`
+Visual comparison story: `libs/@hashintel/ds-components/src/tokens/tokens.color-migration.story.tsx`
 
 ### Alpha → Solid Mapping
 
@@ -301,7 +301,7 @@ bg: 'bg.accent.bold.default'
 
 | File | Purpose |
 |------|---------|
-| `libs/@hashintel/ds-components/src/stories/tokens/tokens.color-migration.story.tsx` | Visual comparison tool for scale mapping |
+| `libs/@hashintel/ds-components/src/tokens/tokens.color-migration.story.tsx` | Visual comparison tool for scale mapping |
 | `libs/@hashintel/ds-components/_ai/park-ui-porting-guide.md` | This document |
 
 ## Next Steps

libs/@hashintel/ds-components/eslint.config.js

@@ -1,8 +1,10 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
 
 import { createBase, disableRules } from "@local/eslint/deprecated";
 
+const disableTypeCheckedRules =
+  typescriptEslint.configs["disable-type-checked"]?.rules ?? {};
+
 export default [
   {
     ignores: [
@@ -16,7 +18,6 @@ export default [
     ],
   },
   ...createBase(import.meta.dirname),
-  ...storybook.configs["flat/recommended"],
   ...disableRules([]),
   {
     rules: {
@@ -44,13 +45,32 @@ export default [
     },
   },
   {
-    files: ["src/**/*.story.ts{x,}", "src/stories/**/*.{ts,tsx,mdx}"],
+    // Story files are intentionally excluded from `tsconfig.json` (they live
+    // in `tsconfig.beta.json`). Running type-aware lint rules on them forces
+    // ESLint's project service into a slow default-project fallback per file
+    // *and* type-instantiates the very heavy generated `styled-system` types
+    // for every single story. Disable type-aware linting entirely for the
+    // story surface — they're demo code, not shipped to consumers.
+    files: [
+      "src/**/*.story.ts{x,}",
+      "src/beta/**/*.stories.ts{x,}",
+      "src/tokens/**/*.{ts,tsx,mdx}",
+    ],
+    languageOptions: {
+      parserOptions: {
+        // Drop the type-aware project lookup for story files. Without this,
+        // every story still costs a full project-service resolve even when
+        // every type-aware rule is off.
+        projectService: false,
+        project: false,
+      },
+    },
     rules: {
-      "@typescript-eslint/no-unnecessary-condition": "off",
+      ...disableTypeCheckedRules,
+      "@typescript-eslint/no-shadow": "off",
       "id-length": "off",
       "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
-      "storybook/default-exports": "off",
-      "storybook/no-redundant-story-name": "off",
+      "react/no-array-index-key": "off",
     },
   },
   {

libs/@hashintel/ds-components/package.json

@@ -26,9 +26,9 @@
       "types": "./dist/preset.d.ts",
       "import": "./dist/preset.js"
     },
-    "./theme": {
-      "types": "./dist/theme.d.ts",
-      "import": "./dist/theme.js"
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
     },
     "./panda.buildinfo.json": "./dist/panda.buildinfo.json",
     "./*": {
@@ -47,27 +47,28 @@
     "build": "npm-run-all build:lib build:buildinfo",
     "build:buildinfo": "panda ship --config panda.config.ts --outfile dist/panda.buildinfo.json",
     "build:ladle": "ladle build",
-    "build:lib": "tsdown",
+    "build:lib": "tsup --config tsup.config.ts",
     "codegen": "yarn run codegen:colors && yarn run codegen:tokens && yarn run codegen:panda",
     "codegen:colors": "tsx scripts/generate-colors-radix.ts",
     "codegen:panda": "panda codegen --clean",
     "codegen:tokens": "tsx scripts/generate-tokens.ts",
     "dev": "yarn dev:ladle",
     "dev:ladle": "ladle serve",
-    "dev:lib": "tsdown --watch",
+    "dev:lib": "tsup --config tsup.config.ts --watch",
     "fix": "npm-run-all --continue-on-error \"fix:*\"",
-    "fix:eslint": "eslint --fix .",
+    "fix:eslint": "eslint --cache --fix .",
     "fix:format": "biome format --write",
     "lint": "npm-run-all --continue-on-error \"lint:*\"",
-    "lint:eslint": "eslint --report-unused-disable-directives .",
+    "lint:eslint": "eslint --cache --report-unused-disable-directives .",
     "lint:tsc": "tsc --noEmit",
+    "lint:tsc:beta": "tsc --noEmit -p tsconfig.beta.json",
     "prepare": "yarn run codegen",
     "prepublishOnly": "turbo run build",
     "preview:ladle": "yarn build:ladle && ladle preview",
     "test:snapshots": "yarn build:ladle && playwright test",
     "test:snapshots:update": "yarn build:ladle && playwright test --update-snapshots",
-    "test:unit": "vitest run --exclude tests/snapshots.spec.ts",
-    "test:unit:watch": "vitest --exclude tests/snapshots.spec.ts"
+    "test:unit": "yarn build:buildinfo && vitest run --exclude tests/snapshots.spec.ts",
+    "test:unit:watch": "yarn build:buildinfo && vitest --exclude tests/snapshots.spec.ts"
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
@@ -90,6 +91,7 @@
     "@playwright/test": "1.58.2",
     "@radix-ui/colors": "3.0.0",
     "@svgr/rollup": "8.1.0",
+    "@tanstack/react-virtual": "3.13.24",
     "@tsconfig/strictest": "^2.0.8",
     "@types/node": "22.18.13",
     "@types/react": "19.2.7",
@@ -100,12 +102,12 @@
     "case-anything": "3.1.0",
     "colorjs.io": "0.6.1",
     "eslint": "9.39.4",
-    "eslint-plugin-storybook": "10.3.1",
+    "lorem-ipsum": "2.0.8",
     "lucide-react": "0.544.0",
     "npm-run-all": "4.1.5",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tsdown": "^0.21.4",
+    "tsup": "^8.5.1",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
     "vite": "7.3.2",

libs/@hashintel/ds-components/panda.config.ts

@@ -5,7 +5,7 @@ import { preset } from "./src/preset";
 export const coreConfig: Config = {
   importMap: "@hashintel/ds-helpers",
   outdir: "../ds-helpers/styled-system",
-  include: ["./src/components/**/*.{ts,tsx}"],
+  include: ["./src/components/**/*.{ts,tsx}", "./src/beta/**/*.{ts,tsx}"],
   jsxFramework: "react",
   outExtension: "mjs",
   preflight: false,

libs/@hashintel/ds-components/panda.local.config.ts

@@ -6,8 +6,8 @@ export default defineConfig({
   ...coreConfig,
   outdir: "../ds-helpers/styled-system",
   include: [
-    "./src/components/**/*.{ts,tsx}",
-    "./src/stories/**/*.{ts,tsx}",
+    ...(coreConfig.include ?? []),
+    "./src/tokens/**/*.{ts,tsx}",
     "./.ladle/**/*.{ts,tsx}",
   ],
   staticCss: {

libs/@hashintel/ds-components/scripts/generate-colors-radix.ts

@@ -12,9 +12,10 @@ import fs from "node:fs";
 import { join } from "node:path";
 import Color from "colorjs.io";
 import * as radixColors from "@radix-ui/colors";
-import { withSemantics, type PaletteKind } from "../src/preset/theme/utils";
+import { withSemantics, type PaletteKind } from "../src/preset/tokens/utils";
 
-const OUTPUT_DIR = "src/preset/theme/colors";
+const OUTPUT_DIR = "src/preset/tokens/gen/colors";
+const BARREL_FILE_PATH = "src/preset/tokens/gen/colors.gen.ts";
 
 /**
  * Colors to include in generation. Add/remove as needed.
@@ -482,7 +483,7 @@ export const staticColors = { black, white };
  * Aliases are composed in main.ts, not generated here.
  */
 function writeBarrelFile(colorNames: string[]): void {
-  const filePath = join(process.cwd(), "src/preset/theme/colors.gen.ts");
+  const filePath = join(process.cwd(), BARREL_FILE_PATH);
 
   const imports = colorNames
     .map((name) => `import { ${name} } from "./colors/${name}.gen";`)