Edit catalog product

The scope model

Version-scoping is per field, not per tab. Two marks carry it:

• shared product-level — one value for every version.
• v1 plus a heavy left rule — belongs to the version selected in the brand strip.

Colour is now spent on version identity, and this is a deliberate reversal. The rule used to be “no colour for scope, keeping colour for status only”. But a sticker that reads v1 in one hue and v2 in another can be traced back to the toggle at a glance, which a uniform black chip could not. The hues are drawn from outside the semantic set — never green, amber or red — so they cannot be mistaken for status, and the status chip stays where it was, inside the toggle button. Each version’s hue is the same on its sticker and on its button, so the pressed button and the stickers it governs read as one object.

A tab now carries two axes, not one. The old rule was “a tab is never mixed”, meaning one scope per tab. That still holds for scope — everything on Specs is version-scoped. What is new is ownership: Physical & packaging and Source formula are shown here but owned by the source formula, so they render read-only with an SF-0007 ▸ mark and are edited in the formula’s own drawer. Filling a blank from here is not allowed either — one owner, one place. Switching version flashes the Specs tab’s groups.

Benefits and gift eligibility sit on Identity because both are product-level. Benefits come from a managed list rather than free text, so the listing builder’s angle picker does not fill with near-duplicates; gift eligibility exists only because a freebie is named in marketing copy and imagery — otherwise it is just another product riding in a combo.

Layout

• Top section is the brand and the version toggle, right-aligned — a second deliberate reversal of “the brand and nothing else”. The toggle governs the whole module (both Specs and Base images are version-scoped), so the module’s own header is where it belongs, and the strip now reads as one statement of context: Memopryl · editing v1. The tab row was the alternative and lost: it already carries three tabs and their scope chips, it wraps, and a toggle dropping to its own line reads as broken.
• Supplement facts is always visible and sits beside the tab module, each taking half the container, so both stack to roughly equal height and channel listings ride higher.
• The sticky page header keeps only what acts on the whole product — save, create listings, attention.
• Field grids fill the container width; an individual field stays around 230–300px, so nothing stretches.
• Notes sits full-width directly under supplement facts, above channel listings.
• Channel listings sit full-width at the bottom, one tab per sales channel.

Notes

The same shared block that source-formula.html carries, lifted markup-and-CSS intact rather than re-drawn: a container with data-notes and an optional data-author holding [data-newnote], [data-addnote], [data-notelist] and an optional [data-ncount]. Every lookup is scoped to that container, so the two screens cannot collide and neither needs initialising.

It is marked product-level on purpose. A note is about these goods — a supplier conversation, a packaging change — and reading it should not depend on which version the toggle happens to be showing. The formula's log answers the same question one level up; this one does not repeat it.

The nav collapses to its icons

A toggle in the brand row drops the rail from 284px to 58px. Labels are hidden rather than removed, so the section order, the current-page rule and the not mocked yet stubs are all still there when it opens again — and the work column gains the width, which is what the collapse is for: the identity grid goes from two fields across to three.

While collapsed each link carries its label as a native title, set by the toggle and removed on expand. A CSS tooltip was the first attempt and it does not survive: .sb has overflow:hidden and its scroller has overflow-y:auto, which clips anything reaching past the 58px rail, and there is no honest way to have overflow visible on one axis only.

Open: the collapsed state is not remembered — no reload survives it, because this screen has no URL state to hang it on. Worth settling before this is copied to the other promoted mockups.

Supplement facts editor

Table and Markdown are two views of the same data. The markdown dialect reads Serving Size:, Servings Per Container: and Other Ingredients: as their own lines; a row prefixed with - nests under the blend above it, which is what the real MemoPryl label needs. Paste a whole panel, hit Save facts, and the table repopulates.

Current batch (MR-072)

The newest received batch on the source formula — COA, expiry, batch number, received date — sits on the Specs tab as a read-only group beside Physical & packaging, under the same rule and wearing the same SF-0007 ▸ owner tag. It is the stock, not the label, so all four products on SF-0007 show the identical batch.

The COA viewer is deliberately not here. The filename links back to the formula, which is where the document lives and where it is replaced. A second document viewer in a second file is the drift MR-071 built the shared image module to stop; if a third screen ever wants one it becomes _doc-viewer.js and joins the copy list in build-mockup-site.sh.

Open — needs Paul