components

Summary

One component at a time, drawn as a set: every variant and every state at once.

Raw wireframes

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

Why it is drawn this way

• The same shell as pages: the list on the left (31 components in six groups, a dot on the ones with a state not made), the canvas, and the inspector with Design · AI · Code · History.
• The set puts states down the side and variants across, in one dashed frame. A not-made state is a dashed cell; a not-needed state folds to one thin row with Needed again.
• A not-made cell opens Make it, Make it with AI or Not needed. Each goes to the draft, and Analysis › Gaps stops counting a state marked not needed. The inspector's States list does the same.
• In View, Design shows where the component is used, its properties and its states. In Edit, it shows the selected layer. A value changed in one variant is that variant's own.
• Layers sits at the bottom of the Design tab. A layer bound to a property shows ◇ and the property's name.
• New component starts blank, from an element on a page, or as a copy, and asks which states it needs.
• Preview is the component on its own, with one control per property and the state.
• Values follow example-northwind and match Analysis › Gaps for ProductCard.