Skip to content

Conversation

@lunelson
Copy link
Contributor

@lunelson lunelson commented Dec 17, 2025

🌟 What is the purpose of this PR?

This PR implements a new variable import and transform logic and workflow, for synchronizing design tokens from Figma to the HASH design system, and also restructures the packages of the design system into a 3-package architecture with optimized compilation setups for each.

Background

Besides the Figma variable importation logic, the original plan with these changes was to emulate Park UI, as a reference integration of Ark UI / Panda CSS, since they are all the same maintainers. However, from a packaging, dependency and consumption point of view, Park UI does not correspond to our current use-case, since it implements a shadcn-style registry approach —where consumers copy component code into their projects rather than importing from a dependency.

Therefore Park UI's component/style integration patterns will remain a reference, but for compilation and publishing we're following the "panda css as external package" pattern recommendation:

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   ds-theme      │────▶│   ds-helpers    │────▶│  ds-components  │
│  (Panda Preset) │     │ (Styled System) │     │ (React + Ark UI)│
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
   Design tokens          css(), cva(),           Button, Checkbox,
   from Figma             tokens, jsx             Avatar, etc.

Deployments

In addition to the existing deployment of Storybook for the ds-components, this PR adds a Ladle deployment (similar principle to Storybook but simpler and faster) which demonstrates the tokens in ds-theme and which is built from within ds-helpers (see Demo section below)

🔍 What does this change?

Package Architecture

@hashintel/ds-theme — The Panda Preset

A pure PandaCSS preset that defines design tokens sourced from Figma variable exports:

  • New codegen scripts: generate-colors.ts and generate-tokens.ts transform Figma JSON into Panda token definitions
  • Dual exports:
    • Main export (.) — The preset for use in panda.config.ts
    • Theme export (./theme) — Raw color/token definitions for stories and helpers
  • Token structure following Panda/Tailwind conventions:
    • Colors: gray.10, blue.50, accent.60 (core palette) + semantic tokens like bg.accent.bold, text.primary, border.neutral
    • Spacing: "3" = 4px, "5" = 8px, etc. (DEFAULT scale is implicit)
    • Radii: md.4 = 8px, md.full = 9999px, plus sm/lg/full scales
    • Typography: text-sm, text-base, font weights as strings ("medium", "semibold")

@hashintel/ds-helpers — The Styled System Package

The single source of truth for Panda CSS utilities across all consuming packages:

  • Runs panda codegen using ds-theme preset
  • Exports styled-system/* modules: css, cva, tokens, jsx, patterns, types
  • Includes Ladle stories for visual documentation
  • New: Playwright snapshot testing for visual regression

@hashintel/ds-components — The Component Library

React components built with Ark UI (headless) + Panda CSS (styling):

  • Token references updated in existing components: Avatar, Badge, Button, Checkbox, RadioGroup, SegmentedControl, Slider, Switch
  • Storybook for documentation and development

Token Name Migrations

All components updated to use new token naming conventions:

Old Token New Token
"default.3" "3"
"spacing.1" "2"
"border.neutral.default" "border.neutral"
"bg.accent.bold.default" "bg.accent.bold"
"surface.default" "surface"
"radius.4" "md.4"
"core.gray.20" "gray.20"
fontWeight: 500 fontWeight: "medium"

Build System Changes

  • Migrated ds-theme and ds-components to tsdown for faster builds
  • Updated ESLint config for styled-system import resolution
  • Added .gitignore / biome.jsonc entries for generated styled-system directories

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • affected the execution graph, and the turbo.json's have been updated to reflect this

🛡 What tests cover this?

  • unit tests for the token transformations, in ds-theme
  • playwright snapshot tests on Ladle routes, in ds-helpers — Visual regression testing for color/token stories
  • type check via yarn lint:tsc in each package validates token name correctness
  • storybook build success (as before) in ds-components

❓ How to test this?

  1. Checkout the branch
  2. Run yarn install at repo root
  3. Build the design system packages:
    cd libs/@hashintel/ds-theme && yarn build
    cd libs/@hashintel/ds-helpers && yarn build
    cd libs/@hashintel/ds-components && yarn codegen && yarn build
  4. Run type checking:
    cd libs/@hashintel/ds-components && yarn lint:tsc
  5. Launch Storybook to verify components:
    cd libs/@hashintel/ds-components && yarn storybook
  6. Run snapshot tests:
    cd libs/@hashintel/ds-helpers && yarn test

📹 Demo

light dark

@github-actions github-actions bot added area/deps Relates to third-party dependencies (area) area/apps > hash* Affects HASH (a `hash-*` app) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps area/apps > hash.design Affects the `hash.design` design site (app) labels Dec 17, 2025
@codecov
Copy link

codecov bot commented Dec 17, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.96%. Comparing base (94ee310) to head (fb8fe2b).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8191      +/-   ##
==========================================
+ Coverage   59.71%   60.96%   +1.25%     
==========================================
  Files        1214     1090     -124     
  Lines      115203   110581    -4622     
  Branches     5062     4570     -492     
==========================================
- Hits        68793    67416    -1377     
+ Misses      45608    42395    -3213     
+ Partials      802      770      -32     
Flag Coverage Δ
apps.hash-ai-worker-py ?
apps.hash-ai-worker-ts 1.41% <ø> (ø)
apps.hash-api 0.00% <ø> (ø)
backend-integration-tests ?
blockprotocol.type-system 40.84% <ø> (ø)
deer ?
error-stack ?
local.claude-hooks 0.00% <ø> (ø)
local.harpc-client 51.24% <ø> (ø)
local.hash-backend-utils ?
local.hash-graph-sdk 10.88% <ø> (ø)
local.hash-isomorphic-utils 0.00% <ø> (ø)
local.hash-subgraph ?
rust.antsi 0.00% <ø> (ø)
rust.deer ?
rust.error-stack 90.88% <ø> (ø)
rust.harpc-codec 84.70% <ø> (ø)
rust.harpc-net 96.14% <ø> (ø)
rust.harpc-tower 66.80% <ø> (ø)
rust.harpc-types 0.00% <ø> (ø)
rust.harpc-wire-protocol 92.23% <ø> (ø)
rust.hash-codec 72.76% <ø> (ø)
rust.hash-graph-api 2.89% <ø> (ø)
rust.hash-graph-authorization 62.47% <ø> (ø)
rust.hash-graph-store 30.54% <ø> (ø)
rust.hash-graph-temporal-versioning 47.95% <ø> (ø)
rust.hash-graph-types 0.00% <ø> (ø)
rust.hash-graph-validation 83.45% <ø> (ø)
rust.hashql-ast 87.25% <ø> (ø)
rust.hashql-compiletest 46.65% <ø> (ø)
rust.hashql-core 81.77% <ø> (+<0.01%) ⬆️
rust.hashql-diagnostics 72.43% <ø> (ø)
rust.hashql-eval 68.54% <ø> (ø)
rust.hashql-hir 89.10% <ø> (ø)
rust.hashql-mir 88.00% <ø> (-1.66%) ⬇️
rust.sarif ?
sarif ?
tests.hash-backend-integration ?
unit-tests ?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@lunelson lunelson force-pushed the ln/h-5721-figma-vars-to-parkui-style-preset branch from cb07de7 to 929324c Compare December 19, 2025 13:17
@github-actions github-actions bot removed area/apps > hash* Affects HASH (a `hash-*` app) area/infra Relates to version control, CI, CD or IaC (area) area/apps labels Dec 19, 2025
@lunelson lunelson force-pushed the ln/h-5721-figma-vars-to-parkui-style-preset branch from 929324c to 877fefb Compare January 12, 2026 13:03
@github-actions github-actions bot added the area/infra Relates to version control, CI, CD or IaC (area) label Jan 12, 2026
@lunelson lunelson force-pushed the ln/h-5721-figma-vars-to-parkui-style-preset branch from c4f07cc to 67f000c Compare January 12, 2026 15:09
@lunelson lunelson force-pushed the ln/h-5721-figma-vars-to-parkui-style-preset branch from e195523 to fb8fe2b Compare January 20, 2026 14:36
cursor[bot]

This comment was marked as outdated.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

This package aims to follow patterns from **Park UI** (https://park-ui.com), the official Ark UI + Panda CSS integration:

- Park UI preset: `/Users/lunelson/Code/chakra-ui/park-ui/packages/preset`
- Park UI React components: `/Users/lunelson/Code/chakra-ui/park-ui/components/react`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hardcoded local machine paths in documentation file

Medium Severity

The AGENTS.md documentation contains hardcoded absolute paths to a developer's local machine: /Users/lunelson/Code/chakra-ui/park-ui/packages/preset and /Users/lunelson/Code/chakra-ui/park-ui/components/react. These paths reference the Park UI project but use developer-specific local filesystem locations that are meaningless to other developers or AI agents reading this documentation. The "Reference Implementation" section likely intended to link to the Park UI GitHub repository or provide relative/generic path descriptions instead.

Fix in Cursor Fix in Web

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will remove in a follow-up

@github-actions
Copy link
Contributor

Benchmark results

@rust/hash-graph-benches – Integrations

policy_resolution_large

Function Value Mean Flame graphs
resolve_policies_for_actor user: empty, selectivity: high, policies: 2002 $$25.4 \mathrm{ms} \pm 188 \mathrm{μs}\left({\color{gray}-1.921 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: low, policies: 1 $$3.21 \mathrm{ms} \pm 14.9 \mathrm{μs}\left({\color{gray}-0.736 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: medium, policies: 1001 $$11.7 \mathrm{ms} \pm 64.0 \mathrm{μs}\left({\color{gray}0.131 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: high, policies: 3314 $$41.5 \mathrm{ms} \pm 276 \mathrm{μs}\left({\color{gray}-0.954 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: low, policies: 1 $$13.6 \mathrm{ms} \pm 75.9 \mathrm{μs}\left({\color{gray}-0.599 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: medium, policies: 1526 $$22.9 \mathrm{ms} \pm 132 \mathrm{μs}\left({\color{gray}0.696 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: high, policies: 2078 $$25.7 \mathrm{ms} \pm 169 \mathrm{μs}\left({\color{lightgreen}-38.762 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: low, policies: 1 $$3.58 \mathrm{ms} \pm 19.1 \mathrm{μs}\left({\color{lightgreen}-81.715 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: medium, policies: 1033 $$11.0 \mathrm{ms} \pm 93.2 \mathrm{μs}\left({\color{lightgreen}-59.659 \mathrm{\%}}\right) $$ Flame Graph

policy_resolution_medium

Function Value Mean Flame graphs
resolve_policies_for_actor user: empty, selectivity: high, policies: 102 $$3.61 \mathrm{ms} \pm 19.3 \mathrm{μs}\left({\color{gray}0.272 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: low, policies: 1 $$2.82 \mathrm{ms} \pm 12.4 \mathrm{μs}\left({\color{gray}-2.401 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: medium, policies: 51 $$3.22 \mathrm{ms} \pm 17.9 \mathrm{μs}\left({\color{gray}1.12 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: high, policies: 269 $$4.96 \mathrm{ms} \pm 25.5 \mathrm{μs}\left({\color{gray}-0.368 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: low, policies: 1 $$3.36 \mathrm{ms} \pm 15.8 \mathrm{μs}\left({\color{gray}-1.731 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: medium, policies: 107 $$3.92 \mathrm{ms} \pm 16.9 \mathrm{μs}\left({\color{gray}-0.635 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: high, policies: 133 $$4.18 \mathrm{ms} \pm 18.1 \mathrm{μs}\left({\color{gray}0.881 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: low, policies: 1 $$3.25 \mathrm{ms} \pm 12.8 \mathrm{μs}\left({\color{gray}-1.322 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: medium, policies: 63 $$3.83 \mathrm{ms} \pm 20.4 \mathrm{μs}\left({\color{gray}-0.432 \mathrm{\%}}\right) $$ Flame Graph

policy_resolution_none

Function Value Mean Flame graphs
resolve_policies_for_actor user: empty, selectivity: high, policies: 2 $$2.52 \mathrm{ms} \pm 9.54 \mathrm{μs}\left({\color{red}7.27 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: low, policies: 1 $$2.45 \mathrm{ms} \pm 11.5 \mathrm{μs}\left({\color{red}6.35 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: medium, policies: 1 $$2.50 \mathrm{ms} \pm 9.61 \mathrm{μs}\left({\color{gray}4.88 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: high, policies: 8 $$2.81 \mathrm{ms} \pm 11.6 \mathrm{μs}\left({\color{red}9.06 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: low, policies: 1 $$2.63 \mathrm{ms} \pm 12.3 \mathrm{μs}\left({\color{red}6.63 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: medium, policies: 3 $$2.84 \mathrm{ms} \pm 17.9 \mathrm{μs}\left({\color{red}7.49 \mathrm{\%}}\right) $$ Flame Graph

policy_resolution_small

Function Value Mean Flame graphs
resolve_policies_for_actor user: empty, selectivity: high, policies: 52 $$2.94 \mathrm{ms} \pm 13.3 \mathrm{μs}\left({\color{red}7.84 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: low, policies: 1 $$2.60 \mathrm{ms} \pm 9.94 \mathrm{μs}\left({\color{red}9.12 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: empty, selectivity: medium, policies: 25 $$2.78 \mathrm{ms} \pm 13.9 \mathrm{μs}\left({\color{red}7.90 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: high, policies: 94 $$3.28 \mathrm{ms} \pm 14.1 \mathrm{μs}\left({\color{red}6.82 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: low, policies: 1 $$2.84 \mathrm{ms} \pm 12.9 \mathrm{μs}\left({\color{red}7.99 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: seeded, selectivity: medium, policies: 26 $$3.04 \mathrm{ms} \pm 9.85 \mathrm{μs}\left({\color{red}7.41 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: high, policies: 66 $$3.22 \mathrm{ms} \pm 17.1 \mathrm{μs}\left({\color{red}7.79 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: low, policies: 1 $$2.80 \mathrm{ms} \pm 10.9 \mathrm{μs}\left({\color{red}7.72 \mathrm{\%}}\right) $$ Flame Graph
resolve_policies_for_actor user: system, selectivity: medium, policies: 29 $$3.09 \mathrm{ms} \pm 15.6 \mathrm{μs}\left({\color{red}9.70 \mathrm{\%}}\right) $$ Flame Graph

read_scaling_complete

Function Value Mean Flame graphs
entity_by_id;one_depth 1 entities $$38.0 \mathrm{ms} \pm 173 \mathrm{μs}\left({\color{gray}0.816 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;one_depth 10 entities $$77.0 \mathrm{ms} \pm 391 \mathrm{μs}\left({\color{gray}2.97 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;one_depth 25 entities $$42.9 \mathrm{ms} \pm 183 \mathrm{μs}\left({\color{gray}2.97 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;one_depth 5 entities $$44.6 \mathrm{ms} \pm 160 \mathrm{μs}\left({\color{gray}0.352 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;one_depth 50 entities $$53.0 \mathrm{ms} \pm 335 \mathrm{μs}\left({\color{gray}2.27 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;two_depth 1 entities $$39.1 \mathrm{ms} \pm 140 \mathrm{μs}\left({\color{gray}-0.726 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;two_depth 10 entities $$426 \mathrm{ms} \pm 774 \mathrm{μs}\left({\color{gray}1.94 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;two_depth 25 entities $$94.7 \mathrm{ms} \pm 389 \mathrm{μs}\left({\color{gray}1.76 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;two_depth 5 entities $$84.0 \mathrm{ms} \pm 317 \mathrm{μs}\left({\color{gray}0.540 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;two_depth 50 entities $$264 \mathrm{ms} \pm 778 \mathrm{μs}\left({\color{lightgreen}-12.565 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;zero_depth 1 entities $$14.7 \mathrm{ms} \pm 70.8 \mathrm{μs}\left({\color{gray}2.37 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;zero_depth 10 entities $$15.4 \mathrm{ms} \pm 82.9 \mathrm{μs}\left({\color{red}6.43 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;zero_depth 25 entities $$15.4 \mathrm{ms} \pm 83.0 \mathrm{μs}\left({\color{gray}4.75 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;zero_depth 5 entities $$15.2 \mathrm{ms} \pm 57.4 \mathrm{μs}\left({\color{red}5.74 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id;zero_depth 50 entities $$18.5 \mathrm{ms} \pm 108 \mathrm{μs}\left({\color{red}6.52 \mathrm{\%}}\right) $$ Flame Graph

read_scaling_linkless

Function Value Mean Flame graphs
entity_by_id 1 entities $$14.9 \mathrm{ms} \pm 77.0 \mathrm{μs}\left({\color{red}5.51 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10 entities $$15.0 \mathrm{ms} \pm 84.8 \mathrm{μs}\left({\color{red}6.02 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 100 entities $$15.0 \mathrm{ms} \pm 74.4 \mathrm{μs}\left({\color{red}5.17 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 1000 entities $$15.6 \mathrm{ms} \pm 69.3 \mathrm{μs}\left({\color{red}5.12 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10000 entities $$22.9 \mathrm{ms} \pm 158 \mathrm{μs}\left({\color{gray}4.65 \mathrm{\%}}\right) $$ Flame Graph

representative_read_entity

Function Value Mean Flame graphs
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/block/v/1 $$29.3 \mathrm{ms} \pm 275 \mathrm{μs}\left({\color{gray}1.26 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1 $$29.4 \mathrm{ms} \pm 237 \mathrm{μs}\left({\color{gray}2.39 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1 $$31.6 \mathrm{ms} \pm 355 \mathrm{μs}\left({\color{red}9.49 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1 $$29.1 \mathrm{ms} \pm 281 \mathrm{μs}\left({\color{gray}-1.097 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2 $$28.9 \mathrm{ms} \pm 269 \mathrm{μs}\left({\color{gray}-0.905 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1 $$29.0 \mathrm{ms} \pm 250 \mathrm{μs}\left({\color{gray}-0.953 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1 $$29.7 \mathrm{ms} \pm 296 \mathrm{μs}\left({\color{gray}1.65 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1 $$30.7 \mathrm{ms} \pm 316 \mathrm{μs}\left({\color{red}7.98 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1 $$30.2 \mathrm{ms} \pm 269 \mathrm{μs}\left({\color{gray}1.23 \mathrm{\%}}\right) $$ Flame Graph

representative_read_entity_type

Function Value Mean Flame graphs
get_entity_type_by_id Account ID: bf5a9ef5-dc3b-43cf-a291-6210c0321eba $$7.90 \mathrm{ms} \pm 30.9 \mathrm{μs}\left({\color{gray}0.444 \mathrm{\%}}\right) $$ Flame Graph

representative_read_multiple_entities

Function Value Mean Flame graphs
entity_by_property traversal_paths=0 0 $$44.7 \mathrm{ms} \pm 214 \mathrm{μs}\left({\color{gray}-0.765 \mathrm{\%}}\right) $$
entity_by_property traversal_paths=255 1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true $$91.8 \mathrm{ms} \pm 374 \mathrm{μs}\left({\color{gray}-0.020 \mathrm{\%}}\right) $$
entity_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false $$50.5 \mathrm{ms} \pm 343 \mathrm{μs}\left({\color{gray}-1.094 \mathrm{\%}}\right) $$
entity_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true $$58.5 \mathrm{ms} \pm 328 \mathrm{μs}\left({\color{gray}0.111 \mathrm{\%}}\right) $$
entity_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true $$66.5 \mathrm{ms} \pm 315 \mathrm{μs}\left({\color{gray}0.423 \mathrm{\%}}\right) $$
entity_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true $$72.6 \mathrm{ms} \pm 326 \mathrm{μs}\left({\color{gray}-0.407 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=0 0 $$48.0 \mathrm{ms} \pm 215 \mathrm{μs}\left({\color{gray}-2.274 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=255 1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true $$75.2 \mathrm{ms} \pm 339 \mathrm{μs}\left({\color{gray}0.025 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false $$55.9 \mathrm{ms} \pm 308 \mathrm{μs}\left({\color{gray}1.11 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true $$62.8 \mathrm{ms} \pm 338 \mathrm{μs}\left({\color{gray}-0.296 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true $$65.2 \mathrm{ms} \pm 380 \mathrm{μs}\left({\color{gray}0.925 \mathrm{\%}}\right) $$
link_by_source_by_property traversal_paths=2 1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true $$64.6 \mathrm{ms} \pm 295 \mathrm{μs}\left({\color{gray}-0.365 \mathrm{\%}}\right) $$

scenarios

Function Value Mean Flame graphs
full_test query-limited $$136 \mathrm{ms} \pm 423 \mathrm{μs}\left({\color{gray}-2.382 \mathrm{\%}}\right) $$ Flame Graph
full_test query-unlimited $$134 \mathrm{ms} \pm 400 \mathrm{μs}\left({\color{gray}-1.621 \mathrm{\%}}\right) $$ Flame Graph
linked_queries query-limited $$39.5 \mathrm{ms} \pm 178 \mathrm{μs}\left({\color{lightgreen}-47.037 \mathrm{\%}}\right) $$ Flame Graph
linked_queries query-unlimited $$577 \mathrm{ms} \pm 992 \mathrm{μs}\left({\color{red}6.79 \mathrm{\%}}\right) $$ Flame Graph

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can deal with this in follow-up. I'm maybe 70% confident I'm right above but it can easily be verified by building the library and looking at the generated CSS file

@lunelson lunelson added this pull request to the merge queue Jan 21, 2026
Merged via the queue into main with commit 27b1626 Jan 21, 2026
173 checks passed
@lunelson lunelson deleted the ln/h-5721-figma-vars-to-parkui-style-preset branch January 21, 2026 08:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/deps Relates to third-party dependencies (area) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) area/tests New or updated tests type/eng > backend Owned by the @backend team type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

3 participants