@design-intelligence/ghost 0.20.0 → 0.21.0

package/dist/init-payloads/vessel-light/grammar.surfaces.md

@@ -0,0 +1,35 @@
+---
+description: "Surface roles and the closed elevation set — gather for any card, popover, modal, dialog, scrim, or bordered container; flat is the default, borders are structural, exactly three elevation tiers."
+materials:
+  - materials/primitives.css
+  - materials/ref/composition.overlay.html
+  - "**/*.html"
+  - "**/*.css"
+---
+
+Surface is the only way an element gets a background, border, radius, or
+shadow. If a container needs visual treatment, it first needs a surface role.
+
+The vocabulary is closed: role, padding, radius, border, and elevation. These
+axes create enough range for page flow, cards, popovers, muted blocks,
+accents, and dark moments without inventing one-off boxes.
+
+The default surface is flat: no border, no shadow. We do not outline
+everything to prove layout exists.
+
+The elevation tiers are exactly three: card, popover, modal. Elevation
+implies hierarchy — a card sits in the document flow, a popover floats above
+the flow, a modal interrupts the task. Pick the tier that matches the
+interaction; never write a custom shadow because the composition feels flat,
+and never pair a low tier with an interrupting role or give a routine card
+modal gravity. Component shadows belong to the primitives that own them;
+never borrow them for layout.
+
+Borders are structural, especially for inputs and overlays. They are not
+decorative frames around ordinary text — reject borders as decoration,
+especially around assistant text, and use space, tone, and type hierarchy
+instead.
+
+The overlay reference shows the interrupting end of the system: background
+scrim, modal radius, modal shadow, compact header, clear footer. Copy its
+hierarchy when a user must stop and decide.

package/dist/init-payloads/vessel-light/index.md

@@ -0,0 +1,37 @@
+---
+description: "Always read first: Vessel's design language as a raw HTML/CSS steering packet for agents."
+materials:
+  - materials/tokens.css
+---
+
+vessel-light is Vessel without the React package: the design language as a
+repo-local steering packet for agents writing raw HTML and CSS.
+
+The contract is narrow. Style only with the tokens. Compose only with the
+closed sets the grammar enumerates. Imitate the refs when the task matches
+them — they are worked examples to copy from, not a framework to import.
+
+The corpus carries three trust tiers. Grammar and the median floor are law:
+safe to consume verbatim, unchanged by any adaptation. Signature nodes are
+dials awaiting your values: each states Vessel's current answer and stands
+until you replace it. Registers are conditions: editorial, email, and
+data-density each name the situation where parts of the default contract
+invert. Gather against the actual task and pull only the nodes whose
+conditions apply, because truths from the wrong register are poison, not
+context.
+
+The reset raises the floor; only the fingerprint escapes the median.
+
+Monochrome comes first. Status color is functional language for danger,
+success, warning, and information — never atmosphere. Atmosphere exists, but
+it is catered: a five-hue expression palette whose volume rises with the
+register, from charts-only in product to two hues in editorial, and never on
+controls.
+
+The fingerprint protects the taste that disappears when an agent freehands:
+quiet surfaces, deliberate spacing, one obvious action, and restrained
+motion.
+
+When a requested UI is not covered by a ref, compose from the grammar. Do
+not invent a new styling system. If the result needs a new pattern, the new
+pattern should come from observed drift, not anticipation.

package/dist/init-payloads/vessel-light/manifest.yml

@@ -0,0 +1,2 @@
+schema: ghost.fingerprint-package/v1
+id: vessel-light

package/dist/init-payloads/vessel-light/materials/primitives.css

@@ -0,0 +1,388 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+/* surface — defaults: background/foreground, radius-md, no padding, no border, no elevation. */
+.surface {
+  background: var(--background);
+  color: var(--foreground);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: none;
+}
+.surface--card {
+  background: var(--card);
+  color: var(--card-foreground);
+}
+.surface--popover {
+  background: var(--popover);
+  color: var(--popover-foreground);
+}
+.surface--muted {
+  background: var(--muted);
+  color: var(--foreground);
+}
+.surface--accent {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+.surface--dark {
+  background: var(--surface-dark);
+  color: var(--surface-dark-text);
+  border-color: var(--surface-dark-border);
+}
+.surface--pad-xs {
+  padding: 8px;
+}
+.surface--pad-sm {
+  padding: 12px;
+}
+.surface--pad-md {
+  padding: 16px;
+}
+.surface--pad-lg {
+  padding: 24px;
+}
+.surface--radius-sm {
+  border-radius: var(--radius-sm);
+}
+.surface--radius-md {
+  border-radius: var(--radius-md);
+}
+.surface--radius-lg {
+  border-radius: var(--radius-lg);
+}
+.surface--radius-surface {
+  border-radius: var(--radius-surface);
+}
+.surface--radius-control {
+  border-radius: var(--radius-control);
+}
+.surface--border {
+  border: 1px solid var(--border);
+}
+.surface--border-input {
+  border: 1px solid var(--input);
+}
+.surface--elevation-card {
+  box-shadow: var(--shadow-card);
+}
+.surface--elevation-popover {
+  box-shadow: var(--shadow-popover);
+}
+.surface--elevation-modal {
+  box-shadow: var(--shadow-modal);
+}
+
+/* stack — defaults: column, gap-md(16px), stretch. Write class="stack" and you get vessel rhythm. */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+.stack--row {
+  flex-direction: row;
+}
+.stack--gap-none {
+  gap: 0;
+}
+.stack--gap-xs {
+  gap: var(--gap-xs);
+}
+.stack--gap-sm {
+  gap: var(--gap-sm);
+}
+.stack--gap-md {
+  gap: var(--gap-md);
+}
+.stack--gap-lg {
+  gap: var(--gap-lg);
+}
+.stack--gap-xl {
+  gap: var(--gap-xl);
+}
+.stack--align-start {
+  align-items: flex-start;
+}
+.stack--align-center {
+  align-items: center;
+}
+.stack--align-end {
+  align-items: flex-end;
+}
+.stack--align-baseline {
+  align-items: baseline;
+}
+.stack--justify-center {
+  justify-content: center;
+}
+.stack--justify-end {
+  justify-content: flex-end;
+}
+.stack--justify-between {
+  justify-content: space-between;
+}
+.stack--wrap {
+  flex-wrap: wrap;
+}
+
+/* text — defaults: body, 14px, relaxed, foreground. */
+.text {
+  margin: 0;
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: var(--text-body-size);
+  line-height: 1.625;
+}
+.text--display {
+  font-size: var(--heading-display-font-size);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: var(--heading-display-letter-spacing);
+}
+.text--headline {
+  font-size: var(--text-headline-size);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: -0.025em;
+}
+.text--title {
+  font-size: var(--text-title-size);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+.text--label {
+  font-size: var(--label-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: var(--label-line-height);
+  letter-spacing: var(--label-letter-spacing);
+}
+.text--mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-body-size);
+  line-height: 1.5;
+}
+.text--muted {
+  color: var(--muted-foreground);
+}
+.text--inverse {
+  color: var(--primary-foreground);
+}
+.text--success {
+  color: var(--success);
+}
+.text--warning {
+  color: var(--warning);
+}
+.text--info {
+  color: var(--info);
+}
+.text--destructive {
+  color: var(--destructive);
+}
+
+/* button — defaults: primary pill, 36px high, centered, fast focusable action. */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+  min-width: 0;
+  height: var(--control-height);
+  padding: 8px 24px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: none;
+  font: inherit;
+  font-size: var(--text-body-size);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-spring),
+    border-color var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-fast) var(--ease-spring),
+    opacity var(--duration-fast) var(--ease-spring);
+}
+.button:hover {
+  box-shadow: var(--shadow-btn);
+}
+.button:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.button:disabled,
+.button[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.button--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.button--secondary {
+  background: var(--muted);
+  color: var(--foreground);
+}
+.button--ghost {
+  background: transparent;
+  color: var(--foreground);
+}
+.button--ghost:hover,
+.button--secondary:hover,
+.button--outline:hover {
+  background: var(--muted);
+}
+.button--destructive {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+}
+.button--outline {
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--input);
+}
+.button--link {
+  padding-inline: 4px;
+  background: transparent;
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color var(--duration-fast) var(--ease-spring);
+}
+.button--link:hover {
+  background: transparent;
+  color: var(--muted-foreground);
+  box-shadow: none;
+}
+.button--size-xs {
+  height: 24px;
+  padding: 4px 8px;
+  gap: var(--gap-xs);
+  font-size: 12px;
+}
+.button--size-sm {
+  height: 32px;
+  padding: 6px 16px;
+  gap: 6px;
+}
+.button--size-lg {
+  height: 40px;
+  padding: 8px 32px;
+}
+.button--icon,
+.button--icon-sm,
+.button--icon-xs,
+.button--icon-lg {
+  padding: 0;
+}
+.button--icon {
+  width: var(--control-height);
+  height: var(--control-height);
+}
+.button--icon-xs {
+  width: 24px;
+  height: 24px;
+}
+.button--icon-sm {
+  width: 32px;
+  height: 32px;
+}
+.button--icon-lg {
+  width: 40px;
+  height: 40px;
+}
+
+/* field — defaults: label plus pill input with input border, muted placeholder, ring focus, compact error. */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+.label {
+  display: flex;
+  gap: var(--gap-sm);
+  color: var(--foreground);
+  font-size: var(--text-body-size);
+  line-height: 1;
+  user-select: none;
+}
+.input {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--control-height);
+  padding: 4px 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-input);
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 16px;
+  outline: none;
+  transition:
+    border-color var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-fast) var(--ease-spring);
+}
+.input::placeholder {
+  color: var(--muted-foreground);
+}
+.input:hover {
+  border-color: var(--border);
+}
+.input:focus,
+.input:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.input[aria-invalid="true"] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 1px var(--destructive);
+}
+.input--textarea {
+  min-height: 64px;
+  height: auto;
+  padding: 12px;
+  resize: vertical;
+  border-radius: var(--radius-md);
+  line-height: 1.5;
+}
+.input--select {
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+}
+.input--checkbox {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  flex: 0 0 16px;
+  border-radius: var(--radius-sm);
+  accent-color: var(--primary);
+}
+.field-error {
+  color: var(--destructive);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* scrim — default overlay wash uses the tokenized alpha surface. */
+.scrim {
+  background: var(--dark-40);
+}

package/dist/init-payloads/vessel-light/materials/ref/composition.conversation.html

@@ -0,0 +1,63 @@
+<!-- ghost ref annotations
+  normative-for: grammar.conversation — the whole grammar: assistant turns as plain text on the page surface (no bubble, border, or fill), user turns as compact muted surfaces aligned right, tool calls collapsed to a one-line labeled summary with status (mono detail only after expansion), one bordered prompt surface with an empty writing region and a single control row below, exactly one primary send. grammar.surfaces — no borders as decoration around assistant text. signature.shape — surface radius on the prompt surface and user turns.
+  incidental: all copy; the 720px thread width and turn max-widths; the specific attach/mention controls; the billing subject matter.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Conversation</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
+      main { width: min(100%, 720px); height: min(760px, calc(100vh - 48px)); }
+      section[aria-label="Conversation thread"] { overflow: auto; flex: 1; }
+      article[data-turn="user"] { max-width: 80%; margin-left: auto; }
+      article[data-turn="assistant"] { max-width: 92%; }
+      textarea[aria-label="Prompt"] { min-height: 96px; }
+    </style>
+  </head>
+  <body>
+    <main class="stack stack--gap-md">
+      <section class="stack stack--gap-lg" aria-label="Conversation thread">
+        <article class="surface surface--muted surface--pad-md surface--radius-surface" data-turn="user">
+          <p class="text">Can you make the billing page feel calmer without losing the upgrade prompt?</p>
+        </article>
+
+        <article class="stack stack--gap-sm" data-turn="assistant">
+          <p class="text">Yes. I would reduce the number of competing panels, keep the plan state explicit, and move the upgrade prompt into a single bordered decision area.</p>
+          <p class="text">The page should feel like account infrastructure first, promotion second.</p>
+        </article>
+
+        <details class="surface surface--muted surface--pad-sm surface--radius-surface surface--border stack stack--gap-sm" aria-label="Collapsed tool call">
+          <summary class="stack stack--row stack--justify-between stack--align-center stack--gap-sm">
+            <span class="text text--label">Inspecting tokens</span>
+            <span class="text text--label text--success">Completed</span>
+          </summary>
+          <pre class="text text--mono text--muted">read packages/vessel/src/components/billing-card.tsx</pre>
+        </details>
+
+        <article class="stack stack--gap-sm" data-turn="assistant">
+          <p class="text">Use one card surface for the current plan, muted rows for secondary facts, and a primary action only where the user can commit. Keep helper copy short and concrete.</p>
+        </article>
+
+        <article class="surface surface--muted surface--pad-md surface--radius-surface" data-turn="user">
+          <p class="text">Show me the smallest set of changes.</p>
+        </article>
+      </section>
+
+      <form class="surface surface--border-input surface--pad-sm surface--radius-surface stack stack--gap-sm" aria-label="Prompt input">
+        <textarea class="input input--textarea" aria-label="Prompt" placeholder="Ask Vessel to revise the interface"></textarea>
+        <div class="stack stack--row stack--justify-between stack--align-center stack--gap-sm">
+          <div class="stack stack--row stack--gap-xs stack--align-center">
+            <button class="button button--ghost button--icon-sm" type="button" aria-label="Attach">＋</button>
+            <button class="button button--ghost button--icon-sm" type="button" aria-label="Mention">@</button>
+          </div>
+          <button class="button button--primary button--icon-sm" type="submit" aria-label="Send">↵</button>
+        </div>
+      </form>
+    </main>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/ref/composition.editorial.html

@@ -0,0 +1,69 @@
+<!-- ghost ref annotations
+  normative-for: register.editorial — display-scale hero with the single sanctioned kicker (one per page — repeating it on every section is the median tell), --section-padding-vertical rhythm, the sanctioned full-bleed dark band via --surface-dark-*, the pull quote as visual punctuation, one primary action per page. signature.type — the editorial heading scale (--heading-display-*, --heading-section-*) used where the words are the composition, product text variants (title, label, body) inside the features. grammar.hierarchy — the inverse tone on the dark surface. signature.palette — the editorial volume: exactly two expression hues per page (periwinkle tinting the dark band, amber accenting the pull quote), controls monochrome.
+  incidental: all copy; the specific hue assignments (any two of the five expression hues satisfy the budget); the three-feature grid count; content max-widths.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Editorial Landing</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; }
+      .page { width: min(calc(100% - (var(--page-container-side-gutter) * 2)), var(--page-container-max-width)); margin-inline: auto; }
+      .section { padding-block: var(--section-padding-vertical); }
+      .hero { min-height: calc(var(--section-padding-vertical) * 5); justify-content: center; }
+      .label-kicker { text-transform: uppercase; }
+      .display-heading { max-width: calc(var(--page-container-side-gutter) * 48); font-size: var(--heading-display-font-size); font-weight: var(--heading-display-font-weight); line-height: var(--heading-display-line-height); letter-spacing: var(--heading-display-letter-spacing); }
+      .reading-line { max-width: calc(var(--page-container-side-gutter) * 32); font-size: var(--body-reading-size); line-height: var(--body-reading-line-height); letter-spacing: var(--body-reading-letter-spacing); }
+      .section-heading { max-width: calc(var(--page-container-side-gutter) * 36); margin-bottom: var(--section-heading-margin-bottom); font-size: var(--heading-section-font-size); font-weight: var(--heading-section-font-weight); line-height: var(--heading-section-line-height); letter-spacing: var(--heading-section-letter-spacing); }
+      /* expression budget: two hues per page — periwinkle tints the dark band, amber accents the pull quote */
+      .dark-band { width: 100vw; margin-left: calc(50% - 50vw); background: color-mix(in srgb, var(--expression-2) 12%, var(--surface-dark)); color: var(--surface-dark-text); }
+      .dark-inner { width: min(calc(100% - (var(--page-container-side-gutter) * 2)), var(--page-container-max-width)); margin-inline: auto; padding-block: var(--section-padding-vertical); }
+      .dark-muted { color: var(--surface-dark-muted); }
+      .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--page-container-side-gutter) * 12), 1fr)); gap: var(--section-heading-margin-bottom); }
+      .feature { border-top: 1px solid var(--surface-dark-border); padding-top: var(--page-container-side-gutter); }
+      .pullquote { max-width: calc(var(--page-container-side-gutter) * 48); margin: 0; font-size: var(--pullquote-size); font-weight: var(--pullquote-weight); line-height: var(--pullquote-line-height); letter-spacing: var(--pullquote-letter-spacing); padding-left: var(--page-container-side-gutter); position: relative; }
+      .pullquote::before { content: "\201C"; position: absolute; left: 0; top: 0; color: var(--expression-1); font-size: var(--pullquote-size); line-height: 1; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="page section hero stack stack--gap-lg stack--align-start" aria-labelledby="hero-title">
+        <p class="text text--label text--muted label-kicker">Independent review layer</p>
+        <h1 class="text display-heading" id="hero-title">Make every generated screen answer to the same brand memory.</h1>
+        <p class="text reading-line text--muted">Vessel keeps interface materials plain, inspectable, and close to the repo so agents can preserve the feel behind the product, not just the surface.</p>
+        <a class="button button--primary" href="#material-system">Review materials</a>
+      </section>
+
+      <section class="dark-band" id="material-system" aria-labelledby="system-title">
+        <div class="dark-inner">
+          <h2 class="text text--inverse section-heading" id="system-title">A small set of primitives carries the whole system.</h2>
+          <div class="feature-grid">
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Density</p>
+              <h3 class="text text--title">Compact by default</h3>
+              <p class="text dark-muted">Controls stay close to their labels. Surfaces reserve padding for decisions, not decoration.</p>
+            </article>
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Restraint</p>
+              <h3 class="text text--title">Monochrome first</h3>
+              <p class="text dark-muted">Contrast, rhythm, and type scale do the work before color is asked to explain status.</p>
+            </article>
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Trust</p>
+              <h3 class="text text--title">Every action is explicit</h3>
+              <p class="text dark-muted">Buttons name the commitment. Secondary copy clarifies consequence without trying to persuade.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="page section" aria-label="Editorial note">
+        <blockquote class="pullquote">The interface should feel authored even when an agent produced the first pass.</blockquote>
+      </section>
+    </main>
+  </body>
+</html>