[OpenSpec] authoring-own-markup-preview

[github-actions]

⚠️ OpenSpec-managed issue — this content is automatically synced
from the openspec/ directory. Manual edits will be overwritten on next sync.

Artifacts

• ✅ Metadata
• ✅ Proposal
• ✅ Specs
• ✅ Design
• ✅ Tasks
• 🔲 Plan
• 🔲 Review

Specs

• 📄 own-component-preview

Tasks

• 1.1 On a running instance, add a throwaway <iframe sandbox="allow-same-origin" srcdoc="...">
• 2.1 Add js/lib/markupSanitizer.js, dual-mode like js/lib/layerSwap.js, with the allowlist
• 2.2 Build the frame in js/playground.js: fixed sandbox="allow-same-origin", the srcdoc
• 2.3 The token bridge: scan var(-- names, copy values from the preview container with
• 3.1 The "Your component" chip in every tab, the stage with HTML and CSS fields, the removal
• 3.2 Filter the token list to the scanned names, with the read-only note for names the editor
• 3.3 The light and dark switch, and playgroundDarkTokens in
• 3.4 Keep the playground working when the stage throws. Verify: vitest
• 4.1 Add lib/Service/OwnComponentService.php (IAppData folder playground-components, 20
• 4.2 Add lib/Controller/OwnComponentController.php with list, save and delete, all
• 4.3 The chip menu of saved names and the #preview={tab}/own-{slug} hash in parseHash().
• 4.4 Newman: 200, 400, 401 and 403 for the three routes, credentials from environment
• 5.1 Localisation: the chip, field labels, switch, notes, removal report and every error text
• 5.2 Documentation: a "Preview your own component" section in docs/features/token-editor.md
• 5.3 WCAG AA contrast: the stage shows the contrast of the scanned text and background pairs it
• 5.4 Dark mode: covered by task 3.3.
• 5.5 Incomplete token sets: a scanned name the set does not declare shows the default from
• 5.6 Accessibility: the fields have visible labels, the frame has a title naming the
• 5.7 Security review: the three locks, the size limits, no audit entry, admin-only routes.
• 6.1 Run COMPOSER_PROCESS_TIMEOUT=0 composer check:strict once, then npm run lint,
• 6.2 On a running instance, paste a real component from a municipal design system, edit two

Design

See design.md for technical design details.

---

Synced from openspec/changes/authoring-own-markup-preview by OpenSpec workflow
App: thematiq