Skip to content

Work / Babul / Wiki / Surfaces

pages

Surfacedraftverified 2026-10-22

SURFACE.WEB.PAGES

Summary

One page of the product at a time: the list by who reaches each page, the page drawn large, and what is true of it.

Raw wireframes

  • .context/designs/web/northwind/northwind-web/main/pages/<view|edit>/<tab or size>.html and preview.html — the page (Page, Code and History tabs), Edit, AI, Mobile, Tablet and Preview

Why it is drawn this way

  • The full editor shell: rail, a panel with search (pages grouped Open · Auth · Customer), the canvas, and the inspector.
  • The inspector's Page tab says where the page lives, who reaches it, its sizes, its links in and out, its states (made, not made, not needed) and the components on it. Code and History are tabs beside it.
  • The island holds View · Edit, the size, the state and Preview. Values follow example-northwind.
  • The left panel lists the pages; Layers is at the bottom of the inspector's Design tab, with the selection marked there and on the canvas.
  • The inspector keeps one width; its tabs are icons with their names as tooltips.
  • A page's states can change at any time from the inspector: View, Edit, Make it, Not needed, Needed again — each change goes to the draft.
  • The inspector has the same four tabs in View and Edit: Design · AI · Code · History. In View, Design shows the page; in Edit, the selection. AI talks about the selection or the whole page, shows each change it made with Keep and Undo, and writes to the draft.
  • Ask AI is also on the island in Edit. Tablet shows that Northwind has no Tablet design, as Journey does.