Metadata, subject editing, and variable catalogue UI

[patoperpetua]

Parent: #5
Depends on: #40

Goal

Add the metadata editing panel, subject-line editing, and the variable catalogue UI to @singleton-sd/post-kit-editor. An admin user editing a template must be able to change its name, key, and description, edit the subject template, and see every available variable with an affordance to copy or insert it — without memorising variable names.

Scope

Metadata panel

• src/metadata/MetadataPanel.tsx — controlled fields bound to TemplateSourceMetadata:
  • key — template identifier. Editable, but constrained (see Constraints).
  • name — free text display name.
  • description — optional free text.
  • subject — subject template, may contain {{variable}} placeholders.
• Each field emits changes upward; EmailTemplateEditor merges them into the working TemplateSourceFiles state.
• schemaVersion is displayed read-only; it is not user-editable.

Subject editing

• Single-line input with the same variable-insert affordance as the body (insert at cursor position).
• Show a live, non-authoritative hint of the subject rendered with the current preview data values, so the user can see the shape of the final subject. Substitution here is display-only — actual rendering correctness is the preview issue's concern.

Variable catalogue

• src/variables/VariableCatalogue.tsx renders the declared catalogue:

Available variables
- First name      {{firstName}}
- Reset URL       {{resetUrl}}
- Company name    {{branding.companyName}}

• Source of entries: the availableVariables prop when the consumer supplies one, otherwise derived from metadata.variables.
• Variable descriptor type (add to src/types.ts):

export interface TemplateVariable {
  /** Placeholder name as used in `{{name}}`, e.g. `branding.companyName`. */
  name: string;
  /** Human-readable label shown in the catalogue. */
  label?: string;
  /** Optional explanation of what the value contains. */
  description?: string;
}

• Affordances per entry:
  • Copy — writes {{name}} to the clipboard, with a visible confirmation.
  • Insert — inserts {{name}} into the currently focused editable target (subject field, or the canvas when it exposes an insertion point). When no insertion target is focused, the insert affordance is disabled with an explanatory title/aria-label rather than silently doing nothing.

Editing the declared variable list

• Allow adding and removing entries in metadata.variables from the catalogue panel, since the declared list is what validation and the compiler use.
• Removing a variable that still appears in the subject or document is permitted here but must be surfaced by the validation issue — do not silently rewrite the document.

Layout

Compose metadata panel, variable catalogue, and canvas into the editor's root layout using the styling approach documented in the scaffold README. Keep the layout a simple, overridable arrangement — no grid framework.

Constraints

• Do not implement validation UI, error banners, or save/test buttons — separate issues own those.
• Do not implement the preview-data editor or the rendered preview pane — separate issue.
• key edits must be constrained to the character set the publisher accepts for blob paths (alphanumerics, dots, hyphens); reject other characters at input time with an inline message.
• Never mutate the EmailBuilder document to "fix" variables. The document is the user's source of truth.
• Clipboard access must degrade gracefully when unavailable (no unhandled rejection, no crash) — fall back to selecting the placeholder text.
• No network calls, no filesystem access, no persistence.
• Do not introduce a form library or component library.

Acceptance criteria

• name, key, description, and subject are editable and update the working TemplateSourceFiles state.
• schemaVersion is shown but not editable.
• Invalid characters in key are rejected at input time with an inline explanation.
• The variable catalogue lists entries from availableVariables, falling back to metadata.variables.
• Each catalogue entry offers copy and insert affordances; copy places {{name}} on the clipboard and confirms visibly.
• Insert places {{name}} at the cursor in the subject field; when no target is focused the affordance is disabled with an explanation.
• Clipboard failure or unavailability does not throw or break the UI.
• Variables can be added to and removed from metadata.variables, and removals do not modify the EmailBuilder document.
• TemplateVariable is exported from the package root.
• Component tests cover: metadata edits propagating to state, key character rejection, catalogue fallback to metadata.variables, and insert-at-cursor in the subject field.
• pnpm -r --if-present run test passes.

Agent implementation notes

Read the working-state model and TemplateSourceFiles type delivered by #40 before adding fields — extend that state, do not introduce a second store. Read packages/post-kit-types/src/template.ts for the authoritative TemplateSourceMetadata shape, and packages/post-kit-publisher for the template key character rules. Branch: feat/<issue-number>-editor-metadata-variables.

[patoperpetua]

Grounding note from #36: TemplateVariable does not exist in @singleton-sd/post-kit-types, so #36 declared it locally in packages/post-kit-editor/src/types.ts and exports it from the package root. Use that type rather than defining a second one, and if the variable catalogue work needs it outside the editor, promote it into the shared types package as part of this issue instead of duplicating it.