refactor(resizable): DLT-3335 align size props on --dt-layout-* instead of --dt-size-*

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Refactor

📖 Jira Ticket

DLT-3335

📖 Description

Swap the token family DtResizablePanel size props resolve against from --dt-size-* to --dt-layout-*. Same numeric label now produces the same pixel size across DtResizable, DtBox, and the d-w-* / d-h-* utilities.

Accepted value set mirrors DT_BOX_LAYOUT_VALUES: off-scale (1px, 2px, 8px, 25, 20px, 24px, 50, 75) plus 100-multiples (100–1600). Percentage tokens ({n}p) unchanged.

💡 Context

Before: initial-size="100" rendered ~1.6px on DtResizable but 64px on DtBox. Same label, wildly different result.

Root cause: DtResizable was contributed against staging and never rescaled when the rest of the system moved to --dt-layout-* in next.

⚠️ Breaking

Old scale values (e.g. initial-size="925") now fail validation at mount (console error, parses to 0). Pre-Beacon, no known external consumers. Clean break, no dual-scale bridge.

❌ Out of scope

• The --dt-size-* token family (still exists for other consumers)
• Percentage tokens ({n}p) — already aligned
• No ESLint rule added; runtime validator covers it

📦 Cross-Package Impact

• dialtone-vue: token resolver, panel JSDoc, tests, stories
• dialtone-documentation: component page prose + 4 example components

No changes to dialtone-tokens, dialtone-css, or the MCP server.

📄 Documentation Artifacts

Artifact	Status
Vue source	Updated
Tests	Updated (156 resizable tests passing)
Storybook stories	Updated
Component docs JSON	Regenerates from JSDoc
VuePress page	Updated
MCP server data	Pulls from regenerated component-documentation.json

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

🔮 Next Steps

Unblocks DtResizable adoption in Beacon.

🔗 Sources

• Parent epic: DLT-2097
• Blocked by: DLT-3330 (off-scale layout tokens — done)

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[coderabbitai]

Refactors DtResizable to resolve numeric tokens against --dt-layout-* (aligning pixel values with DtBox and d-w-/d-h-), tightens allowlist, updates token resolver, Vue components, docs, stories, and tests; invalid tokens now fail validation and parse to 0. Tests updated and passing.

Overall Judgement: ⚠️ Needs minor changes — Draft status and the breaking runtime behavior (no dual-scale bridge) require explicit migration notes and final accessibility/QA checks before merging.

Walkthrough

This pull request updates the Dialtone resizable panel system to prefer layout tokens over size tokens when resolving pixel values. It changes example usages and documentation (e.g., user-min-size values from 825 to 300), updates token-to-CSS-variable lookups from --dt-size-{token} to --dt-layout-{token} with an allowlist (FALLBACK_LAYOUT_TOKENS), tightens token acceptance, adjusts related tests and fixtures to new token/pixel expectations, and expands JSDoc for resizable props to clarify accepted sizing formats. No runtime APIs, prop types, or external signatures were altered.

Sequence Diagram(s)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

no-visual-test

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dlt-3335-update-resizable-size-values

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

packages/dialtone-vue/components/resizable/composables/computeLayout.test.js (1)

322-332: Split the two fixed-width assertions into separate cases.

This changed it now checks two container sizes at once, so failures will be less local. it.each would keep the coverage and stay within the repo’s one-assertion-per-test rule.

As per coding guidelines, "packages/dialtone-vue/**/*.test.js: Tests use Vitest + @vue/test-utils. One assertion per test. Use beforeAll/beforeEach to reduce repetition. Use it.each for similar tests with different values."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/resizable/composables/computeLayout.test.js`
around lines 322 - 332, The test "fixed panel (resizable: false) does NOT scale
with container" combines two assertions for different container sizes; split it
into separate tests or parameterize with it.each so each assertion is isolated.
Update the test block that calls computeLayout (and uses panel(), getPanel(),
containerSize 1000 and 2000) to either create two distinct it() cases (one for
containerSize: 1000 and one for 2000) or replace the single it with an it.each
over [1000,2000] that computes computeLayout and asserts getPanel(...).width ===
320; reuse beforeEach if necessary to reduce duplication.

packages/dialtone-vue/components/resizable/composables/constraintResolver.test.js (1)

36-40: Break these updated multi-assertion cases into isolated tests.

Both changed cases bundle several expectations, which makes failures noisier and less specific. Splitting them — or using it.each for the token-to-pixel pairs — will keep each constraint contract independent.

As per coding guidelines, "packages/dialtone-vue/**/*.test.js: Tests use Vitest + @vue/test-utils. One assertion per test. Use beforeAll/beforeEach to reduce repetition. Use it.each for similar tests with different values."

Also applies to: 124-140

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/dialtone-vue/components/resizable/composables/constraintResolver.test.js`
around lines 36 - 40, The test currently asserting both userMinSizePixels and
userMaxSizePixels in one case should be split into isolated assertions: create
separate tests (or an it.each table) that call resolveUserConstraints for each
expectation so each test has a single assertion; reuse a beforeEach to create
the result object when helpful. Specifically, for resolveUserConstraints({ id:
'a', userMinSize: '200', userMaxSize: '500' }, 1000) assert userMinSizePixels in
one test and userMaxSizePixels in another (or use it.each to map input tokens to
expected pixel outputs), and apply the same split-refactor for the other
combined case around lines 124-140 so every test contains only one expect.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dialtone-vue/components/resizable/resizable_constants.ts`:
- Around line 14-20: This change alters the public size token surface for
DtResizable (resizable_constants.ts) and must be marked as a breaking change in
the PR changeset; update the changeset entry for `@dialpad/dialtone-vue` to
include a "BREAKING CHANGE:" footer that succinctly states the new accepted size
token surface (numeric layout tokens and 'p' percentage suffix) and call out
that prior tokens like `initial-size="925"` will now fail validation so
consumers must migrate; ensure the package name (`@dialpad/dialtone-vue`) is
included and the message is clear for release tooling to publish this as a
major/breaking release.

In `@packages/dialtone-vue/components/resizable/resizable_panel.vue`:
- Around line 38-73: The JSDoc `@values` lists for the props initialSize,
userMinSize, userMaxSize, systemMinSize, systemMaxSize and the collapse
threshold are too restrictive for percentage inputs; update each `@values` entry
to accurately reflect the runtime (e.g. allow the full finite percentage range
instead of enumerating a few values) by replacing the specific percentage
enumerations with a concise range like "0p–100p" or "0p, 1p–100p" (or equivalent
wording) so the docs match parsePercentage()'s accepted values while keeping the
existing layout token examples.

In `@packages/dialtone-vue/components/resizable/resizable_utils.ts`:
- Around line 36-38: The allowlist check in resolveTokenPixels uses the `in`
operator which traverses the prototype chain; change that check to use
Object.hasOwn(FALLBACK_LAYOUT_TOKENS, token) to ensure only own properties are
allowed (keep the rest of the logic the same). Update the branch that returns
tokenCache.get(token) to respect the function's number | undefined return by
returning the cached value directly (tokenCache.get(token)) — this preserves
existing behavior while preventing inherited keys from bypassing validation;
references: resolveTokenPixels, FALLBACK_LAYOUT_TOKENS, tokenCache.

---

Nitpick comments:
In
`@packages/dialtone-vue/components/resizable/composables/computeLayout.test.js`:
- Around line 322-332: The test "fixed panel (resizable: false) does NOT scale
with container" combines two assertions for different container sizes; split it
into separate tests or parameterize with it.each so each assertion is isolated.
Update the test block that calls computeLayout (and uses panel(), getPanel(),
containerSize 1000 and 2000) to either create two distinct it() cases (one for
containerSize: 1000 and one for 2000) or replace the single it with an it.each
over [1000,2000] that computes computeLayout and asserts getPanel(...).width ===
320; reuse beforeEach if necessary to reduce duplication.

In
`@packages/dialtone-vue/components/resizable/composables/constraintResolver.test.js`:
- Around line 36-40: The test currently asserting both userMinSizePixels and
userMaxSizePixels in one case should be split into isolated assertions: create
separate tests (or an it.each table) that call resolveUserConstraints for each
expectation so each test has a single assertion; reuse a beforeEach to create
the result object when helpful. Specifically, for resolveUserConstraints({ id:
'a', userMinSize: '200', userMaxSize: '500' }, 1000) assert userMinSizePixels in
one test and userMaxSizePixels in another (or use it.each to map input tokens to
expected pixel outputs), and apply the same split-refactor for the other
combined case around lines 124-140 so every test contains only one expect.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 292c900f-a42d-4c6f-877d-bc368df5a58b

📥 Commits

Reviewing files that changed from the base of the PR and between 5f6528e and b1751d2.

📒 Files selected for processing (13)

• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizable.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableCollapsible.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableNested.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableThreePanel.vue
• apps/dialtone-documentation/docs/components/resizable.md
• packages/dialtone-vue/components/resizable/composables/computeLayout.test.js
• packages/dialtone-vue/components/resizable/composables/constraintResolver.test.js
• packages/dialtone-vue/components/resizable/resizable.stories.js
• packages/dialtone-vue/components/resizable/resizable_collapsible.story.vue
• packages/dialtone-vue/components/resizable/resizable_constants.ts
• packages/dialtone-vue/components/resizable/resizable_constraints.story.vue
• packages/dialtone-vue/components/resizable/resizable_panel.vue
• packages/dialtone-vue/components/resizable/resizable_utils.ts

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dialtone-vue/components/resizable/resizable_utils.ts`:
- Around line 31-33: This change tightens the allowlist and changes
numeric-token resolution in resizable_utils.ts (specifically the
FALLBACK_LAYOUT_TOKENS allowlist and the function that resolves numeric tokens
which now returns 0 for invalid values), so add explicit BREAKING CHANGE
metadata to the release notes/commit message (or CHANGELOG) describing that
FALLBACK_LAYOUT_TOKENS was narrowed and numeric-token resolution now defaults
invalid values to 0; ensure the BREAKING CHANGE footer includes the affected
symbols (FALLBACK_LAYOUT_TOKENS and the numeric-token resolution function in
resizable_utils.ts) and a short migration note for consumers.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: a06213db-d021-4557-b143-21275456b370

📥 Commits

Reviewing files that changed from the base of the PR and between 8cec41a and 061987a.

📒 Files selected for processing (1)

• packages/dialtone-vue/components/resizable/resizable_utils.ts

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1215/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1215/