mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 00:26:41 +03:00
Paul BakausandClaude Opus 4.8
5fb30e03e6
The verbs/labels/icons were copied three ways: live-browser.js (ICONS + ACTIONS), VISUAL_ACTIONS in live-event-validation.mjs, and the marketing demo. Collapse them to one source, skill/scripts/live-vocabulary.mjs (LIVE_COMMANDS + derived VISUAL_ACTIONS). - live-event-validation.mjs imports VISUAL_ACTIONS from it. - live-server.mjs serializes LIVE_COMMANDS into window.__IMPECCABLE_VOCAB__ when it serves /live.js, next to the token/port. live-browser.js (served raw, can't import at runtime) builds its ICONS + ACTIONS from that injected vocab instead of an inline copy — byte-identical icons, zero behaviour change. - site/components/LiveDemoPalette.astro imports the same module at build time, so the demo and the real picker can no longer drift. Adds a /live.js test asserting the injected vocab deep-equals the canonical list. Harness skill dirs refreshed via build. (Pre-existing, unrelated: `bun run build:site` fails on an htmlparser2 import in the CLI detector.) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
27 lines
965 B
Plaintext
27 lines
965 B
Plaintext
---
|
|
// Command-palette switcher for the marketing live-demo loop. Renders the design
|
|
// vocabulary as a 4-column icon grid; the demo loop in live-demo.js opens it and
|
|
// lands on the `pick` verb.
|
|
//
|
|
// Values/labels/icons come from the same canonical source the real picker uses
|
|
// (skill/scripts/live-vocabulary.mjs), imported at build time, so the demo and
|
|
// the product never drift.
|
|
import { LIVE_COMMANDS } from '../../skill/scripts/live-vocabulary.mjs';
|
|
|
|
interface Props {
|
|
pick: string;
|
|
}
|
|
const { pick } = Astro.props;
|
|
---
|
|
|
|
<div class="live-demo-ctx-palette" data-demo-palette data-demo-pick={pick} aria-hidden="true">
|
|
<div class="live-demo-ctx-palette-grid">
|
|
{LIVE_COMMANDS.map((c) => (
|
|
<button type="button" class="live-demo-ctx-palette-chip" data-cmd={c.value}>
|
|
<span class="live-demo-ctx-palette-ico" set:html={c.icon}></span>
|
|
<span class="live-demo-ctx-palette-name">{c.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|