EditableBlock
Canvas brand block — a card tile with an uppercase label header, value body, hover-revealed edit icon, and editing state with inline input, save button, and AI action slot.
npx visor add editable-blockDefault
View state — label + value body; the edit icon is revealed on hover.
Done state
When done={true} a green check icon appears next to the label. The block is still editable.
Editing state
Pass defaultEditing to open the block in its editing state on mount (useful for demos and controlled pre-open). In normal usage, the user clicks the card or the edit icon to enter this state.
Canvas grid
The board grid is a plain Grid composition — EditableBlock is only the tile. Six blocks here mirror the Canvas stage in the Brand Workbench prototype.
Keyboard interaction
| Key | Action |
|---|---|
Enter | Saves the current draft |
Escape | Cancels editing; restores the previous value |
AI action slot
The aiActionLabel prop (default "Ask AI to pressure-test") controls the label on the AI affordance button shown during editing. Pass null to suppress the button entirely.
// Custom AI label
<EditableBlock
label="Voice"
value="plainspoken · candid · warm"
onSave={setValue}
aiActionLabel="Generate voice alternatives"
onAiAction={triggerVoiceAlternatives}
/>
// No AI button
<EditableBlock
label="Lexicon"
value="theme not skin · token not variable"
onSave={setValue}
aiActionLabel={null}
/>Installation
npx visor add editable-blockThis copies two files into your project:
components/ui/editable-block/editable-block.tsx— the componentcomponents/ui/editable-block/editable-block.module.css— the styles
API Reference
EditableBlockProps
No props data available for “editable-block”.
EditableBlock also accepts all standard <div> HTML attributes.
Button
A versatile button component with multiple variants and sizes. Built with CVA and CSS Modules — copy it into your project and own it completely.
Section Intro
Marketing section opener with a mono uppercase eyebrow, display-font heading, and optional lede paragraph. Eyebrow color tracks a live-rewritten CSS custom property for runtime brand-accent binding.