feat(webkit): add the resizable-panel layout primitive - #902
Open
gabriel-lisboa-azion wants to merge 3 commits into
Open
feat(webkit): add the resizable-panel layout primitive#902gabriel-lisboa-azion wants to merge 3 commits into
gabriel-lisboa-azion wants to merge 3 commits into
Conversation
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
gabriel-lisboa-azion
marked this pull request as draft
August 17, 2026 10:01
gabriel-lisboa-azion
added a commit
that referenced
this pull request
Aug 17, 2026
Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.
gabriel-lisboa-azion
marked this pull request as ready for review
August 18, 2026 11:15
Collaborator
Author
|
All eight review findings were one pattern in The suite composed its fixtures through the root's statics — The fix follows the house pattern rather than adding guards at each of the eight call sites:
Verified: 9/9 tests pass, |
A group of adjacent regions whose shared edges the reader can drag — the layout behind a workspace, where an editor, a terminal under it and a preview beside it are all content and the split between them is the reader's to set. It exists because `Sidebar` was being used for both jobs. `Sidebar` is the app's NAVIGATION rail: it collapses to icons, it hides, it is the thing you leave to go somewhere. A terminal, a preview and a code editor are not places you navigate to — they are the work — and dressing two of them as navigation rails produced a screen with three "sidebars" and one document, on an axis `Sidebar` does not even have: it has no horizontal edge, so a terminal under an editor had to hand-roll its own splitter. This component owns the EDGE; `Sidebar` goes back to owning navigation. Composition: `ResizablePanel` with `Pane` and `Handle`, attached for dot-notation and exported standalone. The compound is built by naming the static surface and casting once rather than with `Object.assign`, whose inferred type walks each part's local `interface Props` into the declaration and trips TS4082. Ships the spec, a browser-mode test suite, the story, the `-root` and per-sub-component exports, and a size budget.
Adds the 24 snapshots for the four new ResizablePanel stories across the 6-mode matrix. Generated by the Storybook Regenerate Baseline workflow on this branch's HEAD — baselines are ubuntu-only, so a local run would not match the folder the visual gate compares against. No existing snapshot is modified or deleted; the component is additive.
… exports Every other composition suite in the package renders through the named exports (`AccordionItem`, `DropdownTrigger`, …) and checks dot-notation once, as an identity assertion against those same exports. This file was the only one that rendered through the root's statics — `h(ResizablePanel.Pane, …)` — which made static analysis flag eight unguarded member accesses: a `.vue` default export is generated by the SFC compiler, so the analyzer sees no `export default`, reads the imported binding as undefined, and reports every `.Pane` / `.Handle` read on it. Compose through `ResizablePanelPane` / `ResizablePanelHandle` instead, and keep the compound contract in the one place it is the subject rather than the vehicle, asserting identity against those exports through a guarded read. Same nine tests, same behaviour covered — the dot-notation contract is now verified more tightly than `toBeTruthy` did.
gabriel-lisboa-azion
force-pushed
the
feat/resizable-panel
branch
from
August 18, 2026 11:18
c3953a7 to
d2a2451
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
layout/resizable-panelcomposition component: adjacent regions whose shared edges the reader drags.ResizablePanel+Pane+Handle, with both the compound and the tree-shakeable-root/ per-sub-component exports.Sidebarwas doing two jobs.Sidebaris the navigation rail — it collapses to icons, it is the thing you leave to go somewhere. An editor, a terminal and a preview are the work, not destinations, and dressing them as rails produced a screen with three "sidebars" and one document — on an axisSidebardoes not have (no horizontal edge, so a terminal under an editor hand-rolled its own splitter).How to test
cd packages/webkit && npx vitest run src/components/layout/resizable-panel→ 9 passed.pnpm --filter @aziontech/webkit run catalog:check→ clean.pnpm --filter @aziontech/webkit run size→resizable-panel-rootunder its 3 KB budget.pnpm storybook:dev→ Components/Layout/ResizablePanel. Drag a handle: both panes resize and stay clamped. Keyboard: focus a separator, arrow keys move it. Checkorientation="vertical"stacks and drags on the horizontal edge.Notes
index.tsnames its static surface and casts once instead of usingObject.assign, whose inferred type walks each part's localinterface Propsinto the emitted declaration and trips TS4082.