@utopia-studio-design/design-system-cli 0.4.1 → 0.6.0

package/data/templates/interaction-lab/interaction-workbench.css

@@ -0,0 +1,226 @@
+.interaction-workbench {
+  display: grid;
+  gap: var(--interaction-density-comfortable);
+  min-inline-size: 0;
+  padding: var(--space-4);
+  color: var(--foreground);
+}
+
+.interaction-workbench > header,
+.interaction-panel-heading,
+.interaction-resize {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.interaction-workbench h2,
+.interaction-workbench h3,
+.interaction-workbench p {
+  margin: 0;
+}
+
+.interaction-supporting,
+.interaction-instruction {
+  color: var(--muted-foreground);
+}
+
+.interaction-supporting {
+  margin-block-start: var(--space-1);
+}
+
+.interaction-instruction {
+  max-inline-size: 62ch;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-body);
+}
+
+.interaction-step {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.interaction-eyebrow {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-eyebrow);
+}
+
+.interaction-history,
+.interaction-current-actions > div {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.interaction-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, .75fr);
+  gap: var(--space-4);
+  min-inline-size: 0;
+}
+
+.interaction-panel {
+  display: grid;
+  align-content: start;
+  gap: var(--interaction-density-default);
+  min-inline-size: 0;
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--border);
+  border-radius: var(--radius-surface);
+  background: var(--surface);
+}
+
+.interaction-panel > div:first-child h3 {
+  margin-block-start: var(--space-1);
+}
+
+.interaction-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--interaction-density-compact);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.interaction-item-shell {
+  min-inline-size: 0;
+}
+
+.interaction-item {
+  border: var(--border-width-hairline) solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--background);
+  color: var(--foreground);
+  font: inherit;
+}
+
+.interaction-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-block-size: var(--button-height);
+  min-inline-size: 0;
+  padding-inline: var(--space-3);
+  text-align: start;
+  cursor: grab;
+}
+
+.interaction-item[aria-pressed='true'] {
+  border-color: var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+}
+
+.interaction-item[draggable='true']:active {
+  border-color: var(--interaction-drag-border);
+  background: var(--interaction-drag-surface);
+}
+
+.interaction-item:focus-visible,
+.interaction-virtual-scroll:focus-visible,
+.interaction-resize input:focus-visible {
+  outline: var(--focus-ring-width) solid var(--interaction-focus);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.interaction-current-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.interaction-current-actions > span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.interaction-current-actions button {
+  min-block-size: var(--interaction-target-min);
+}
+
+.interaction-resize {
+  flex-wrap: wrap;
+}
+
+.interaction-resize input {
+  inline-size: 100%;
+}
+
+.interaction-virtual-shell {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.interaction-virtual-scroll {
+  block-size: 180px;
+  max-inline-size: 100%;
+  overflow: auto;
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--background);
+}
+
+.interaction-virtual-row {
+  position: absolute;
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  block-size: 36px;
+  padding-inline: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.interaction-announcement {
+  min-block-size: var(--button-height);
+  padding: var(--space-3);
+  border-inline-start: var(--border-width-strong) solid var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+  color: var(--foreground);
+  font-size: var(--font-size-small);
+}
+
+@media (max-width: 44rem) {
+  .interaction-workbench > header,
+  .interaction-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .interaction-workbench > header {
+    display: grid;
+  }
+
+  .interaction-history {
+    inline-size: 100%;
+  }
+
+  .interaction-current-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .interaction-current-actions > div {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .interaction-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .interaction-workbench *,
+  .interaction-workbench *::before,
+  .interaction-workbench *::after {
+    scroll-behavior: auto;
+    transition-duration: 0ms;
+    animation-duration: 0ms;
+  }
+}

package/data/templates/interaction-lab/main.tsx

@@ -0,0 +1,104 @@
+import { StrictMode, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import { useControllableState } from '@utopia-studio-design/design-system/Interaction'
+import { InteractionWorkbench } from './InteractionWorkbench'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import './styles.css'
+
+const activeTheme = 'utopia-default'
+
+function StateContractProbe() {
+  const [ownedValue, setOwnedValue] = useState('idle')
+  const [events, setEvents] = useState<string[]>([])
+  const [value, setValue] = useControllableState({
+    value: ownedValue,
+    defaultValue: 'default',
+    onChange: (next) => {
+      setEvents((current) => [...current, `change:${next}`])
+      setOwnedValue(next)
+    },
+  })
+
+  return (
+    <div className="state-contract-probe">
+      <div>
+        <p>Automatic contract check</p>
+        <h3>Controlled state ordering</h3>
+      </div>
+      <output aria-label="Current controlled value">{value}</output>
+      <div>
+        <Button size="sm" variant="outline" onClick={() => setValue('idle')}>Set same value</Button>
+        <Button size="sm" onClick={() => setValue('ready')}>Set next value</Button>
+      </div>
+      <output aria-label="Controlled change events">{events.join(',') || 'none'}</output>
+    </div>
+  )
+}
+
+function App() {
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr')
+  const [dark, setDark] = useState(false)
+
+  return (
+    <main
+      id="main-content"
+      className="interaction-lab"
+      data-theme={activeTheme}
+      data-color-mode={dark ? 'dark' : 'light'}
+      dir={direction}
+    >
+      <header className="interaction-lab-header">
+        <div>
+          <p>Step 1 · Shared foundation</p>
+          <h1>Review the interaction foundation</h1>
+          <span>This is the behavior underneath future Charts, Database, and Calendar components—not a finished product component.</span>
+        </div>
+        <div className="interaction-lab-controls" aria-label="Preview controls">
+          <Button variant="outline" onClick={() => setDirection((value) => value === 'ltr' ? 'rtl' : 'ltr')}>
+            {direction === 'ltr' ? 'Test RTL' : 'Test LTR'}
+          </Button>
+          <Button variant="outline" onClick={() => setDark((value) => !value)}>
+            {dark ? 'Use light mode' : 'Use dark mode'}
+          </Button>
+        </div>
+      </header>
+
+      <section className="review-guide" aria-labelledby="review-guide-title">
+        <div className="review-guide-intro">
+          <p>What am I reviewing?</p>
+          <h2 id="review-guide-title">Four interactions in about one minute</h2>
+          <span>If each task feels predictable and the page never overflows, the shared foundation is ready for the next component family.</span>
+        </div>
+        <ol className="review-checklist">
+          <li><strong>Select</strong><span>Click a stage, or focus it and press Space.</span></li>
+          <li><strong>Move and undo</strong><span>Drag a stage or use − / +, then choose Undo.</span></li>
+          <li><strong>Stress the list</strong><span>Resize and scroll the 1,000-record preview.</span></li>
+          <li><strong>Check direction</strong><span>Switch to RTL and use the arrow keys again.</span></li>
+        </ol>
+      </section>
+
+      <nav className="foundation-roadmap" aria-label="Complex component delivery order">
+        <span data-current="true">1. Interaction foundation</span>
+        <span>2. Charts</span>
+        <span>3. Database</span>
+        <span>4. Calendar</span>
+      </nav>
+
+      <InteractionWorkbench direction={direction} />
+
+      <details className="developer-evidence">
+        <summary>Developer evidence: controlled state event ordering</summary>
+        <p>This automated fixture verifies that setting the same value emits no change and the next value emits exactly once.</p>
+        <StateContractProbe />
+      </details>
+    </main>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/data/templates/interaction-lab/styles.css

@@ -0,0 +1,224 @@
+@import './interaction-workbench.css';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-block-size: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+.skip-link {
+  position: fixed;
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  z-index: var(--z-modal);
+  translate: 0 -200%;
+}
+
+.skip-link:focus {
+  translate: 0;
+}
+
+.interaction-lab {
+  min-block-size: 100vh;
+  padding: var(--page-gutter);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.interaction-lab-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--space-6);
+  max-inline-size: var(--container-standard);
+  margin-inline: auto;
+  padding-block: var(--space-8);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.interaction-lab-header > div:first-child {
+  display: grid;
+  gap: var(--space-2);
+  max-inline-size: 48rem;
+}
+
+.interaction-lab-header h1,
+.interaction-lab-header p {
+  margin: 0;
+}
+
+.interaction-lab-header p,
+.interaction-lab-header span {
+  color: var(--muted-foreground);
+}
+
+.review-guide {
+  display: grid;
+  grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
+  gap: var(--space-6);
+  max-inline-size: var(--container-standard);
+  margin: var(--space-6) auto 0;
+  padding: var(--space-6);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.review-guide-intro {
+  display: grid;
+  align-content: start;
+  gap: var(--space-2);
+}
+
+.review-guide-intro h2,
+.review-guide-intro p {
+  margin: 0;
+}
+
+.review-guide-intro p {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.review-guide-intro span,
+.review-checklist span,
+.developer-evidence > p {
+  color: var(--muted-foreground);
+  line-height: var(--line-height-body);
+}
+
+.review-checklist {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: review-task;
+}
+
+.review-checklist li {
+  display: grid;
+  align-content: start;
+  gap: var(--space-1);
+  min-block-size: 7rem;
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--background);
+  counter-increment: review-task;
+}
+
+.review-checklist strong::before {
+  content: counter(review-task) ". ";
+  color: var(--muted-foreground);
+}
+
+.foundation-roadmap {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  max-inline-size: var(--container-standard);
+  margin: var(--space-4) auto 0;
+  border-block: var(--border-width-hairline) solid var(--border);
+}
+
+.foundation-roadmap span {
+  padding: var(--space-3);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+  text-align: center;
+}
+
+.foundation-roadmap span[data-current='true'] {
+  background: var(--interaction-selection-surface);
+  color: var(--foreground);
+  font-weight: var(--font-weight-semibold);
+}
+
+.interaction-lab-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.interaction-workbench {
+  max-inline-size: var(--container-standard);
+  margin-inline: auto;
+}
+
+.developer-evidence {
+  max-inline-size: var(--container-standard);
+  margin: var(--space-4) auto;
+  padding: var(--space-4);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.developer-evidence summary {
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+}
+
+.state-contract-probe {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto minmax(8rem, auto);
+  align-items: center;
+  gap: var(--space-3);
+  margin-block-start: var(--space-3);
+  padding-block-start: var(--space-3);
+  border-block-start: var(--border-width-hairline) solid var(--border);
+}
+
+.state-contract-probe h3,
+.state-contract-probe p {
+  margin: 0;
+}
+
+.state-contract-probe p {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.state-contract-probe > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+@media (max-width: 44rem) {
+  .interaction-lab-header {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .review-guide,
+  .review-checklist,
+  .foundation-roadmap,
+  .state-contract-probe {
+    grid-template-columns: 1fr;
+  }
+
+  .review-guide {
+    padding: var(--space-4);
+  }
+
+  .review-checklist li {
+    min-block-size: auto;
+  }
+
+  .foundation-roadmap span {
+    text-align: start;
+  }
+}

package/data/templates/interaction-lab/template.manifest.json

@@ -0,0 +1,36 @@
+{
+  "id": "template-interaction-lab",
+  "name": "Interaction Lab",
+  "category": "development-tool",
+  "status": "available",
+  "purpose": "A runnable contract lab for developing and verifying Ceramic complex components.",
+  "packageImport": "@utopia-studio-design/design-system",
+  "sourcePath": "templates/interaction-lab/main.tsx",
+  "entryPath": "templates/interaction-lab/index.html",
+  "requiredTokens": [
+    "interaction-density-*",
+    "interaction-focus",
+    "interaction-selection-*",
+    "interaction-drag-*",
+    "visualization-*",
+    "temporal-*"
+  ],
+  "features": {
+    "selection": true,
+    "keyboardNavigation": true,
+    "pointerDrag": true,
+    "touchAlternatives": true,
+    "resize": true,
+    "virtualization": true,
+    "undoRedo": true,
+    "rtl": true,
+    "reducedMotion": true,
+    "responsiveMinimum": "320px"
+  },
+  "translations": {
+    "ar": {
+      "name": "مختبر التفاعل",
+      "purpose": "مختبر قابل للتشغيل للتحقق من عقود التفاعل المشتركة في Ceramic."
+    }
+  }
+}