Repository navigation
Add mobile realisations and resolve structures by canvas type - #238
Merged
Merged
Conversation
2 tasks
3 tasks
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
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.
Phase 30 slice E. Slice D gave framesmith the mobile primitives, but an agent asked for a phone screen still had nothing to start from: every structure was a desktop shape, and stamping
dashboardonto a 390px canvas produced a sidebar and a 1192px main column. This PR gives each structure an anatomy and a canvas type, adds six mobile realisations built from the primitives, and extends the pattern gate to them.Anatomy and realisation
A structure now realises an anatomy (a screen kind) for one canvas type. It gains
anatomy(default: its own name) andsurface(web,mobile, oranyfor a component that stamps on every type; defaultweb). A mobile realisation is named<anatomy>-mobile, so structure names stay unique. The registry refuses, at load and on registration, two structures that realise the same anatomy on the same type, and a name that shadows another structure's anatomy.Resolution by canvas type
apply_structureresolves the name by the canvas's declared type:dashboardon a mobile canvas stampsdashboard-mobile, and the result names theanatomyandsurfaceit stamped. A realisation name is used as is. A name with no realisation for the type is refused with the anatomies of the same kind that have one; for example,pricingon a phone lists the six mobile page anatomies. The newrealisationparameter stamps the other type's realisation anyway.list_structurestakescanvasIdortypeand lists what stamps on that canvas. With neither it returns the web listing, and passing both is an error. Each entry carriesanatomy,surfaceandsurfaces(the types its anatomy is realised on).Six mobile realisations
dashboard-mobilesettings-mobileauth-mobileonboarding-mobilefeed-mobiledetail-mobileEach starts with a
status-bar, ends with ahome-indicatoror a pinnedtab-bar, and builds every tap target from a primitive. None writessafeArea, because the pinned chrome makes the renderer reserve the insets. So a realisation is also correct on a canvas made mobile withcanvas_set_type. Eight components are marked to stamp on every type:form-field,stat-card,empty-state,skeleton-card,skeleton-stat-card,kpi-card,status-chipandinitials-avatar. The others are web-only, either because they hold hand-built tap targets below 44px (data-table,toolbar,toggle-row) or because they are not phone idioms.What the stamp now does for primitives
settings-mobiledrew near-black row titles on the dark default background. A canvas that already resolves$primary,$surfaceor$errorkeeps them, because the primitives fall back to those.placeholders, withpropset to the field's path (title,subtitle,trailing.text,items[0].label, …). The docs and the stamp'sinstructionsay that a nested field is set by writing its whole object or array.Changes to existing behaviour
buttonnow honoursmaxWidth. The renderer had dropped it, so a long label could push its row past the column.empty-state's action is now abuttonprimitive instead of a hand-built 37px frame, on web too. Its hint moved from$captionto$text-sm(12px to 14px by default), because nine words at 12px fail the phone prose floor.form-field's placeholder truncates to one line, so a long placeholder no longer wraps and clips inside the 44px input at phone width.Pattern gate
test-patterns.ts) holds every realisation to the web bar: a score above 95 and zero cliché tells. It also requires zero findings from the mobile ruleset, at any severity. This runs under the default theme and the four presets, plus every personality's generated phone design system. On a phone the presets lend their colours, spacing, radius and depth, but not their type scale. Thedark,lightandmaterialpresets set a 14–15px body, which the type-floor rule correctly flags on any phone screen that sets text in$body. The spec records this change to FR-E4.test-patterns-mobile.ts) runs detailed mode as stamped and with every list tripled, so the screen scrolls past its pinned bar. It also runs a full five-perturbation stress pass, unthemed and under each personality. Components marked for every type are checked on a phone in detailed mode and under stress.test-scaffold-system.tsnow stamps each structure on a canvas of its own type.Known limits, recorded in the spec
$title(28px) therefore renders at 17px, the same size as body text. The nav bar's 34px large title is fixed and unaffected. This predates the slice and applies to every narrow artboard, so it is left for a separate change. Slice G's Ridgeline rebuild will show it.$accentor$bg-surfaceitself still seeds it over a canvas that defines only$primary/$surface, as every scaffold always has. The presets andgenerate_design_systemdefine both tokens, and the docs tell a hand-themed canvas to do the same.heroTreatment: none. Five of the six have no hero, so this is accurate, but on a phone it can only be satisfied by forcing a web structure. The hint is advisory.Docs
The changes are covered in the
list_structures,apply_structureandcanvas_createdocstrings,INSTRUCTIONS,GOTCHAS, the README structures section, and a new "Starting a phone screen" section indocs/GUIDELINES.md. Thelist_structuresdocstring had also been missing the four state scaffolds; they are added.test-discoverability.tsnow checks that every mobile realisation is named inINSTRUCTIONS, every mobile anatomy in GUIDELINES andGOTCHAS, and the new parameters in the docstrings.Testing
test-structures.tscovers the registry invariant, the listing, every resolution branch, the seeding and the placeholders. The newtest-structures-mcp.tsdrives the reallist_structuresandapply_structurehandlers over MCP stdio.onboarding-mobile's heading under the editorial personality, andform-fieldon a phone.empty-state's action was too small on a phone and invisible to the rules.npm run test:fullpasses (113/113), andtscis clean.