Files
hyperframes/packages/studio/package.json
Miguel Ángel 01aa446edf feat(studio): shared Button, IconButton, Tooltip and Tabs primitives (#3622)
* feat(studio): shared Button, IconButton, Tooltip and Tabs primitives

Four primitives that consume design tokens only, plus the configured class
merger they all share.

- ui/cn.ts: one `cn` instance whose config knows the two class families
  theme.css invents, the `text-step-*` type scale and the `ctl` control
  heights, so a caller's class replaces a primitive's instead of stacking
  with it and letting stylesheet order decide.
- Button and IconButton: native buttons on the three control heights, the
  radius scale, the semantic palette and the motion tokens. Four classes
  that resolved to nothing (rounded-button, shadow-btn-primary,
  bg-accent-red, ease-standard) are gone, which is why the Renders Export
  now has a radius.
- Tooltip: Base UI's tooltip, so the portal, the viewport flip and the
  collision shift stop being hand-rolled. role="tooltip", the id wiring and
  aria-describedby stay explicit here because the library does not add them.
- Tabs: Base UI's tabs, with roving tabindex, arrow keys, Home and End, and
  a data-tab-id the sidebar's focus restore looks up.

Every interactive look is also reachable through a data-preview-state
attribute that CSS alone reads, so a gallery can show hover, active and
focus without a pointer. A test pairs the two lists in both directions.

The class-resolution test compiles Studio's real stylesheet with every class
the primitives emit and fails on any that produces no selector. Tailwind
treats an undefined class as silence; that silence is what let four dead
classes sit in this file.

* feat(studio): export Button, IconButton, Tabs and Tooltip from the package root

* docs(studio): trim comment blocks to pass the no-essay-comments gate

* refactor(studio): use native CSS.escape in the button class-resolution test

* refactor(studio): share the ui test mount helper and flatten the Button leading slot

* fix(studio): keep the tooltip open on a disabled control

* fix(studio): give the tooltip trigger no layout box and anchor to the child

* fix(studio): anchor the tooltip through a ref so it adds no render

* fix(studio): button children lay out with the consumer gap

* test(studio): keep the no-icon label and shortcut layout assertion from the standalone fix

* docs(studio): shorten the Tooltip header comment to fit the comment gate

* test(studio): the Button vacuity guard names tokens that stay undefined
2026-09-19 13:59:30 -04:00

109 lines
3.2 KiB
JSON

{
"name": "@hyperframes/studio",
"version": "0.8.51",
"description": "",
"repository": {
"type": "git",
"url": "https://github.com/heygen-com/hyperframes",
"directory": "packages/studio"
},
"files": [
"src",
"dist"
],
"type": "module",
"main": "./src/index.ts",
"types": "./src/index.ts",
"exports": {
".": {
"browser": "./src/index.ts",
"bun": "./src/index.ts",
"import": "./src/index.ts",
"types": "./src/index.ts"
},
"./tailwind-preset": {
"bun": "./src/styles/tailwind-preset.ts",
"import": "./src/styles/tailwind-preset.ts",
"types": "./src/styles/tailwind-preset.ts"
},
"./theme.css": "./src/styles/theme.css",
"./package.json": "./package.json"
},
"publishConfig": {
"access": "public",
"exports": {
".": {
"import": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"./tailwind-preset": {
"import": "./dist/styles/tailwind-preset.js",
"types": "./dist/styles/tailwind-preset.d.ts"
},
"./theme.css": "./src/styles/theme.css",
"./package.json": "./package.json"
},
"main": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"scripts": {
"dev": "bun --bun ./node_modules/.bin/vite --host 127.0.0.1",
"build": "vite build && tsup",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"test:webmcp-edit-loop": "node tests/e2e/webmcp-edit-loop.mjs",
"test:timeline-virtualization": "TIMELINE_ROW_VIRTUALIZATION=on TIMELINE_ELEMENT_COUNT=50000 node tests/e2e/timeline-virtualization.mjs",
"test:watch": "vitest",
"report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts",
"test:timeline-default": "bun run test:timeline-virtualization"
},
"dependencies": {
"@base-ui/react": "1.7.0",
"@codemirror/autocomplete": "^6.20.1",
"@codemirror/commands": "^6.10.3",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.9",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/lang-markdown": "^6.3.4",
"@codemirror/language": "^6.12.2",
"@codemirror/search": "^6.6.0",
"@codemirror/state": "^6.6.0",
"@codemirror/theme-one-dark": "^6.1.2",
"@codemirror/view": "6.40.0",
"@hyperframes/core": "workspace:*",
"@hyperframes/parsers": "workspace:*",
"@hyperframes/player": "workspace:*",
"@hyperframes/sdk": "workspace:*",
"@hyperframes/studio-server": "workspace:*",
"@mcp-b/global": "^5.0.1",
"@phosphor-icons/react": "^2.1.10",
"@tanstack/react-virtual": "^3.14.6",
"bpm-detective": "^2.0.5",
"cn": "0.2.4",
"dockview-react": "8.3.1",
"gsap": "^3.13.0",
"mediabunny": "^1.45.3"
},
"devDependencies": {
"@hyperframes/producer": "workspace:*",
"@tailwindcss/vite": "^4.3.3",
"@types/react": "19",
"@types/react-dom": "19",
"@vitejs/plugin-react": "^4.0.0",
"chokidar": "^4.0.3",
"fake-indexeddb": "^6.2.5",
"puppeteer-core": "^25.2.1",
"tailwindcss": "^4.3.3",
"tsup": "^8.0.0",
"typescript": "^5.0.0",
"vite": "^6.4.2",
"vitest": "^4.1.11",
"zustand": "^5.0.0"
},
"peerDependencies": {
"react": "19",
"react-dom": "19",
"zustand": "^4.0.0 || ^5.0.0"
}
}