@milesroxas/design-hub 0.0.0-stage → 0.1.1

package/templates/guide.md

@@ -0,0 +1,38 @@
+---
+type: guide
+feature: {{feature}}
+date: {{created}}
+audience: The people reviewing {{title}}
+---
+
+# {{title}} prototype: a walkthrough
+
+One paragraph on what the prototype is, which design doc it comes from, and where it runs. Say what is real and what is illustrative.
+
+This guide walks every workflow and every state the prototype holds. Follow it top to bottom, or jump to the section you want. Each section says what to click and what to look for.
+
+## Before you start
+
+1. **Open the prototype** in a desktop browser: the password-protected link sent with this guide.
+2. **Find Controls.** The dark round button at the top of the page opens a panel that belongs to the prototype, not the product. It holds the switches a review needs; its last row, **Open the walkthrough**, brings this guide back in a new tab.
+3. **Start clean.** Name the reset control, and say what persists in the browser until it is used.
+
+Screenshots live in `assets/guide/` beside this file and are embedded as `![what the reader should see](assets/guide/01-name.jpg)`. Every path must exist: the build imports each image, so a missing file fails it.
+
+## 1. The first workflow
+
+What to click, in order, and what to look for. One screenshot per state that matters.
+
+## Every state, and how to reach it
+
+| State | How to reach it |
+| --- | --- |
+| | |
+
+## What the prototype does not do
+
+The scope toasts a reviewer will meet, and what each stands in for.
+
+## What we need from you
+
+The decisions the review should settle, with a link to the design doc section that lists them.

package/templates/space/README.md

@@ -0,0 +1,37 @@
+---
+title: {{title}}
+summary: One line on what this explores.
+context: space
+status: exploring
+kind: {{kind}}
+feature: {{feature}}
+created: {{created}}
+---
+
+# {{title}}
+
+## Problem
+
+What is wrong or unknown today, and for whom. Write this before any code.
+
+## Question
+
+The one decision this prototype exists to make.
+
+## Directions
+
+| # | Name | Axis |
+| --- | --- | --- |
+| 1 | Baseline | What ships today |
+| 2 | | |
+| 3 | | |
+
+## States
+
+| State | How to reach it |
+| --- | --- |
+| | |
+
+## Decision
+
+Empty until picked. The direction, its values, and what was rejected and why. Then delete the folder.

package/templates/space/index.tsx

@@ -0,0 +1,43 @@
+import { DialVars } from '@kit/dials';
+import { Space } from '@kit/Space';
+import { Variants } from '@kit/Variants';
+import './styles.css';
+
+function Baseline() {
+  return (
+    <div className="specimen" data-direction="baseline">
+      <button type="button" className="specimen-button">
+        Continue
+      </button>
+    </div>
+  );
+}
+
+function Lift() {
+  return (
+    <div className="specimen" data-direction="lift">
+      <button type="button" className="specimen-button">
+        Continue
+      </button>
+    </div>
+  );
+}
+
+function Sink() {
+  return (
+    <div className="specimen" data-direction="sink">
+      <button type="button" className="specimen-button">
+        Continue
+      </button>
+    </div>
+  );
+}
+
+export default function Prototype() {
+  return (
+    <Space title="{{title}}" lede="Replace with the question from README.md.">
+      <Variants options={{ Baseline, Lift, Sink }} />
+      <DialVars name="{{title}}" config={{ press: [0.97, 0.9, 1, 0.005], duration: [160, 0, 600, 10] }} />
+    </Space>
+  );
+}

package/templates/space/styles.css

@@ -0,0 +1,13 @@
+.specimen { height: 240px; display: grid; place-items: center; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
+
+.specimen-button { height: 40px; padding: 0 16px; border: 1px solid var(--button-secondary-border); border-radius: var(--radius-md); background: var(--button-secondary-bg); color: var(--button-secondary-fg); font-weight: 600; box-shadow: var(--shadow-xs); cursor: pointer; transition: transform calc(var(--duration, 160) * 1ms) var(--ease-press); }
+.specimen-button:active { transform: scale(var(--press, 0.97)); }
+
+[data-direction="lift"] .specimen-button { box-shadow: var(--shadow-md); }
+[data-direction="lift"] .specimen-button:active { transform: translateY(1px) scale(var(--press, 0.97)); box-shadow: var(--shadow-xs); }
+
+[data-direction="sink"] .specimen-button { background: var(--bg-secondary); }
+[data-direction="sink"] .specimen-button:active { transform: scale(calc(var(--press, 0.97) - 0.02)); }
+
+:root[data-motion="reduce"] .specimen-button { transition-duration: 0ms; }
+:root[data-motion="reduce"] .specimen-button:active { transform: none; }