@ethlete/cli 2.1.0-next.8 → 2.1.0-next.9

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ethlete/cli
 
+## 2.1.0-next.9
+
+### Minor Changes
+
+- `et update` now writes the new range into every `package.json` in the repo, not only the root one, and refuses a dist tag that points at an older version than the repo is on.
+- `et design [checkout]` serves the design page of any repository that keeps a `.ethlete/design`
+  folder, and `et design check` says why a call does not render.
+
+### Patch Changes
+
+- `et release` now works with Changesets 3 and aborts when there are no pending changesets.
+- `et design` now rules a drawing with its own Tailwind 4 pipeline, so a repository on Tailwind 3, or none at all, can hold design calls.
+- `et design check --call` now reports `NO BROWSER` when neither the checkout nor the package
+  resolves `playwright`, instead of throwing the module loader's own error.
+
 ## 2.1.0-next.8
 
 ### Minor Changes

package/design/define-call.ts

@@ -0,0 +1,92 @@
+/**
+ * A value inside a template. An array joins with nothing between, and `null`, `undefined` and
+ * `false` write nothing, so `${rows.map(row)}` and `${isOn && html`…`}` both read as they look.
+ */
+const flatten = (value: unknown): string => {
+  if (Array.isArray(value)) return value.map(flatten).join('');
+  if (value === null || value === undefined || value === false) return '';
+
+  return String(value);
+};
+
+const join = (strings: TemplateStringsArray, values: unknown[]) =>
+  strings.reduce((out, part, index) => out + flatten(values[index - 1]) + part);
+
+/**
+ * Marks a template literal as HTML, so Prettier formats it and an editor highlights it. It escapes
+ * nothing: a drawing writes its own markup, and nothing a call draws comes from outside the
+ * repository.
+ */
+export const html = (strings: TemplateStringsArray, ...values: unknown[]) => join(strings, values);
+
+/** Marks a template literal as CSS, for the same reason `html` does it for markup. */
+export const css = (strings: TemplateStringsArray, ...values: unknown[]) => join(strings, values);
+
+/**
+ * One drawn answer, as the frame renders it: the markup that goes in the frame root, and the CSS
+ * that styles it. A drawing runs no logic, so it is a value the module builds when the frame
+ * imports it, not a component the frame has to instantiate.
+ */
+export type Drawing = {
+  body: string;
+  styles: string;
+};
+
+/** Types a drawing where it is written, so a mistake reads in its own file and not in `call.ts`. */
+export const drawing = (drawn: Drawing): Drawing => drawn;
+
+/**
+ * One drawn answer to a call. `load` resolves the module whose default export is the
+ * drawing that answers it, so a broken option breaks its own frame only.
+ */
+export type CallOption = {
+  key: string;
+  name: string;
+  /** Left out by a view: a single drawing answers no question, so it argues nothing. */
+  claim?: string;
+  cost?: string;
+  /** Left out while the call is open. The user sets it, never the drawing. */
+  verdict?: 'chosen' | 'rejected';
+  /** The `key` of the round that drew it. Left out by a call that runs no rounds. */
+  round?: string;
+  load: () => Promise<{ default: Drawing }>;
+};
+
+/**
+ * One pass over a call: the options drawn together, and what came out of them. A round
+ * whose options all carry a verdict is settled, and the page folds it down to its winner.
+ */
+export type CallRound = {
+  key: string;
+  /** What this pass asked, in a few words. */
+  title: string;
+  /** What it answered. Write it once the user has ruled, so the next round reads as a reply. */
+  note: string;
+};
+
+/**
+ * How a call is drawn. A wireframe shows the bare workflow with mocked values, and draws no
+ * logic and no interaction state. A design call draws the real thing.
+ */
+export type CallMode = 'wireframe' | 'design';
+
+/**
+ * One open question of an exploration, with every option drawn at the same geometry.
+ * A call with one option and no claim is a view: one reference picture, drawn full width.
+ */
+export type Call = {
+  /** The feature this call belongs to, for example 'the hour strip'. Left out by a loose call. */
+  feature?: string;
+  eyebrow: string;
+  headline: string;
+  intro: string;
+  /** The width every option frame gets, in px. The geometry the thing ships in. */
+  frameWidth: number;
+  /** Left out by a call that draws the real thing, which is what `design` means. */
+  mode?: CallMode;
+  /** Left out by a short call. With rounds, the intro says only what the call is about. */
+  rounds?: CallRound[];
+  options: CallOption[];
+};
+
+export const defineCall = (call: Call): Call => call;

package/design/web/env.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:design-explore' {
+  import type { Call } from '@design-explore';
+
+  export const calls: Record<string, () => Promise<{ default: Call }>>;
+  export const defaultCall: string | null;
+}
+
+declare module 'virtual:design-explore/env' {
+  /** Loads the stylesheet the project draws under. A project the config names not draws bare. */
+  export const loadEnv: (project: string) => Promise<unknown>;
+}

package/design/web/frame.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!--head-->
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frame.ts"></script>
+  </body>
+</html>

package/design/web/frame.ts

@@ -0,0 +1,38 @@
+import { calls } from 'virtual:design-explore';
+import { loadEnv } from 'virtual:design-explore/env';
+
+const params = new URLSearchParams(location.search);
+const slug = params.get('call') ?? '';
+const key = params.get('option') ?? '';
+
+await loadEnv(slug.split('/')[0] ?? '');
+
+const root = document.querySelector('#root') as HTMLElement;
+
+const fail = (message: string) => {
+  root.textContent = message;
+  root.setAttribute('style', 'padding:16px;font:14px monospace;color:#f0a0a0;background:#1a1414');
+};
+
+const call = calls[slug];
+if (!call) fail(`design-explore: no call "${slug}"`);
+else {
+  const option = (await call()).default.options.find((o) => o.key === key);
+  if (!option) fail(`design-explore: call "${slug}" has no option "${key}"`);
+  else {
+    const loaded = (await option.load()).default;
+    const style = document.createElement('style');
+
+    style.textContent = loaded.styles;
+    document.head.append(style);
+    root.innerHTML = loaded.body;
+  }
+}
+
+const report = () => {
+  const height = Math.ceil(document.documentElement.getBoundingClientRect().height);
+  parent.postMessage({ type: 'design-explore:height', option: key, height }, '*');
+};
+
+new ResizeObserver(report).observe(document.documentElement);
+report();

package/design/web/host.css

@@ -0,0 +1,494 @@
+:root {
+  --h-ground: #131313;
+  --h-panel: #1b1b1b;
+  --h-ink: #e6e2da;
+  --h-ink-3: #8b8578;
+  --h-line: #2c2c2c;
+  --h-prose: 21rem;
+}
+
+body {
+  display: grid;
+  margin: 0;
+  grid-template-columns: 18rem 1fr;
+  min-height: 100vh;
+  background: var(--h-ground);
+  color: var(--h-ink);
+  font:
+    300 14px/1.5 system-ui,
+    sans-serif;
+}
+
+/* The tree stands still while the calls scroll, and scrolls on its own when it is longer than the window. */
+nav {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-self: start;
+  gap: 20px;
+  padding: 24px 12px;
+  border-right: 1px solid var(--h-line);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+nav section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+nav > section > h3 {
+  margin: 0 0 4px 12px;
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+nav a {
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+nav a:hover {
+  background: var(--h-panel);
+}
+
+nav a[aria-current] {
+  background: var(--h-panel);
+  color: var(--h-ink);
+}
+
+.nav-rounds {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 6px 12px;
+  border-left: 1px solid var(--h-line);
+}
+
+.nav-rounds a {
+  padding: 5px 10px;
+  border-radius: 0 6px 6px 0;
+  font-size: 11px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+  padding: 48px 56px;
+  overflow-x: auto;
+}
+
+.round {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  scroll-margin-top: 24px;
+}
+
+.round-head {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 24px;
+  border-top: 1px solid var(--h-line);
+}
+
+.round-head h2 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 300;
+}
+
+.round-head p {
+  margin: 0;
+  color: var(--h-ink-3);
+  text-wrap: pretty;
+}
+
+.views {
+  display: flex;
+  margin-top: 4px;
+  gap: 2px;
+}
+
+.views a {
+  padding: 5px 12px;
+  border: 1px solid var(--h-line);
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+
+.views a:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.views a:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.views a[aria-current] {
+  background: var(--h-panel);
+  color: var(--h-ink);
+}
+
+/* The result is the end of the chain, so the chain itself sits under it as a line of keys. */
+.trail {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  gap: 8px;
+}
+
+.trail a {
+  padding: 4px 9px;
+  border: 1px solid var(--h-line);
+  border-radius: 5px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+}
+
+.trail a:hover {
+  color: var(--h-ink);
+}
+
+.trail a[aria-current] {
+  border-color: #7fd4bf;
+  color: #7fd4bf;
+}
+
+.arrow {
+  color: var(--h-line);
+  font-size: 12px;
+}
+
+.result .round-head,
+.tray .round-head {
+  border-top-color: var(--h-ink-3);
+}
+
+.fold {
+  align-self: start;
+  margin-top: 4px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+}
+
+.fold::before {
+  content: '\203A\00a0';
+}
+
+.fold:hover {
+  color: var(--h-ink);
+}
+
+/* A folded option keeps its name on the page, so the thread of the round is still readable. */
+.folded {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.folded li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  opacity: 0.55;
+}
+
+.folded li[data-verdict='chosen'] .tag {
+  color: #7fd4bf;
+}
+
+.folded li:hover {
+  background: var(--h-panel);
+  opacity: 1;
+}
+
+.folded a {
+  color: var(--h-ink);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+header {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.eyebrow {
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+}
+
+header p {
+  margin: 0;
+  color: var(--h-ink-3);
+  text-wrap: pretty;
+}
+
+/*
+ * A track is as wide as the frame it holds, so the options wrap to the next band when the window
+ * runs out of room. Row flow is what lets them wrap: each column takes four rows, so the next one
+ * starts beside it and only a full band pushes to a new line.
+ */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--frame-width, 0px)), 1fr));
+  grid-auto-flow: row;
+  gap: 72px 40px;
+}
+
+.column {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  gap: 12px;
+}
+
+/* A view is one picture, so it gets the whole width and no subgrid. */
+.grid[data-view] .column {
+  grid-row: auto;
+  grid-template-rows: none;
+}
+
+/* A column can be wider than a line of text should be, so the text keeps its own measure. */
+.column h3,
+.claim,
+.cost {
+  max-width: var(--h-prose);
+}
+
+.stage {
+  display: flex;
+  padding: 24px 0;
+  justify-content: flex-start;
+}
+
+.column h3 {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.column h3 a {
+  color: var(--h-ink);
+  text-decoration: none;
+}
+
+/*
+ * Two 1100px frames never fit a screen side by side, and shrinking them hides the pixels the
+ * comparison is about. The picks are stacked in one box at full size instead.
+ */
+.overlay {
+  position: relative;
+  overflow: hidden;
+  cursor: crosshair;
+}
+
+.overlay iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.seam {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #7fd4bf;
+}
+
+.switch {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  gap: 6px;
+}
+
+.switch button {
+  padding: 5px 11px;
+  border: 1px solid var(--h-line);
+  border-radius: 5px;
+  background: none;
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+}
+
+.switch button[aria-current] {
+  border-color: #7fd4bf;
+  color: #7fd4bf;
+}
+
+.hint {
+  margin-left: 8px;
+  color: var(--h-ink-3);
+  font-size: 11px;
+}
+
+.grid.sheet iframe {
+  display: block;
+  transform: scale(var(--de-scale, 1));
+  transform-origin: top left;
+}
+
+/* The contact sheet draws every option at once, so one screen holds the whole call. */
+.grid.sheet {
+  --thumb-width: calc(var(--frame-width) * var(--de-scale));
+
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), max-content));
+  gap: 28px 20px;
+}
+
+.thumb {
+  display: flex;
+  width: var(--thumb-width);
+  flex-direction: column;
+  gap: 8px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.thumb-frame {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--h-line);
+  border-radius: 4px;
+}
+
+/* A thumbnail is read, never driven, and a click on it belongs to the link around it. */
+.thumb-frame iframe {
+  pointer-events: none;
+}
+
+.thumb-name {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.thumb[data-verdict='rejected'] {
+  opacity: 0.45;
+  transition: opacity 0.15s;
+}
+
+.thumb:hover {
+  opacity: 1;
+}
+
+.thumb[data-verdict='chosen'] .thumb-name {
+  color: #7fd4bf;
+}
+
+.thumb[data-picked] .thumb-frame,
+.column[data-picked] .stage {
+  outline: 1px solid #7fd4bf;
+  outline-offset: 4px;
+}
+
+/* A rejected option stays readable, and comes back to full strength under the pointer. */
+.column[data-verdict='rejected'] {
+  opacity: 0.45;
+  transition: opacity 0.15s;
+}
+
+.column[data-verdict='rejected']:hover {
+  opacity: 1;
+}
+
+[data-verdict='chosen'] .tag {
+  color: #7fd4bf;
+}
+
+.tag {
+  color: var(--h-ink-3);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+}
+
+iframe {
+  border: 0;
+  background: transparent;
+}
+
+.claim,
+.cost {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.cost {
+  color: var(--h-ink-3);
+}
+
+.problem {
+  margin: 0;
+  padding: 12px 16px;
+  border-radius: 6px;
+  background: #1a1414;
+  color: #f0a0a0;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+.empty {
+  padding: 40px;
+  color: var(--h-ink-3);
+}