@spunto/design-system 0.10.0 → 0.11.1

package/src/components/projects/build-manifest.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { CheckIcon, TerminalIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Button } from "../button"
+
+export interface ManifestRow {
+  label: string
+  value: string
+  /** Drawn as ticked. "Filled in", not "valid" — the form doesn't grade you. */
+  done?: boolean
+}
+
+export interface BuildManifestProps {
+  rows: ManifestRow[]
+  /** Rendered as the panel's primary action. Its `type="submit"` reaches the enclosing form. */
+  submitLabel?: ReactNode
+  submittingLabel?: ReactNode
+  submitting?: boolean
+  disabled?: boolean
+  /** Error banner above the button — a failed mutation, typically. */
+  error?: string | null
+  /** Small print under the button. */
+  caption?: ReactNode
+  /** Anything after the caption (an "or start from a template" link). */
+  footer?: ReactNode
+  title?: string
+  className?: string
+}
+
+/**
+ * The live recap of a long form, as a terminal-ish panel: one line per section,
+ * ticked as you fill it, then the submit button.
+ *
+ * It's a **mirror, not a source** — it reads values the form already owns and
+ * never writes any. That's what lets it be sticky next to a seven-section form
+ * without becoming a second copy of the state, and what lets an app drop it
+ * entirely (`manifest={false}`) and put its own footer instead.
+ */
+export function BuildManifest({
+  rows,
+  submitLabel = "Save",
+  submittingLabel = "Saving…",
+  submitting = false,
+  disabled = false,
+  error,
+  caption,
+  footer,
+  title = "build manifest",
+  className,
+}: BuildManifestProps) {
+  return (
+    <div
+      data-slot="build-manifest"
+      className={cn("overflow-hidden rounded-xl border border-border bg-card", className)}
+    >
+      {/* Window chrome in the three pillar colours — the same "this is a machine
+          artefact" cue as TerminalPanel, so the recap reads as the manifest a
+          worker will be built from rather than as a form sidebar. */}
+      <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2.5">
+        <div className="flex gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-full bg-run/70" />
+          <span className="h-2.5 w-2.5 rounded-full bg-build/70" />
+          <span className="h-2.5 w-2.5 rounded-full bg-ship/70" />
+        </div>
+        <div className="ml-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+          <TerminalIcon className="h-3.5 w-3.5" />
+          {title}
+        </div>
+      </div>
+
+      <div className="space-y-4 p-5">
+        <dl className="space-y-2.5">
+          {rows.map((row) => (
+            <div key={row.label} className="flex items-center gap-3 text-sm">
+              <span
+                className={cn(
+                  "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border transition-colors",
+                  row.done ? "border-primary bg-primary text-background" : "border-border text-transparent"
+                )}
+              >
+                <CheckIcon className="h-2.5 w-2.5" strokeWidth={3} />
+              </span>
+              <dt className="w-16 shrink-0 font-mono text-[11px] tracking-wide text-muted-foreground uppercase">
+                {row.label}
+              </dt>
+              <dd className="min-w-0 flex-1 truncate text-right font-medium">{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+
+        {error && (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {error}
+          </p>
+        )}
+
+        <Button type="submit" size="lg" disabled={submitting || disabled} className="group w-full">
+          {submitting ? (
+            <span className="flex items-center gap-2">
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-background/40 border-t-background" />
+              {submittingLabel}
+            </span>
+          ) : (
+            submitLabel
+          )}
+        </Button>
+
+        {caption && <p className="text-center text-[11px] text-muted-foreground">{caption}</p>}
+        {footer}
+      </div>
+    </div>
+  )
+}

package/src/components/projects/extension-picker.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Loader2Icon, SearchIcon, XIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { ExtensionCard, ExtensionCardSkeleton } from "../devcontainer/extension-card"
+import { extensionId } from "../devcontainer/registry"
+import type { VscodeExtensionEntry } from "../devcontainer/types"
+import { Input } from "../input"
+
+export interface ExtensionPickerProps {
+  /** The ids a project stores — `publisher.name`. */
+  value: string[]
+  onChange: (value: string[]) => void
+  /**
+   * Searches a marketplace. A callback, not a fetch: the package never talks to
+   * open-vsx.org itself, and an app without one still gets a working picker
+   * where ids are typed by hand.
+   */
+  onSearch?: (query: string) => Promise<VscodeExtensionEntry[]>
+  /** Debounce before firing `onSearch`, ms. */
+  debounceMs?: number
+  className?: string
+}
+
+/**
+ * Pick the VS Code extensions installed into code-server: a marketplace search
+ * rendering `ExtensionCard`s, plus the picked list.
+ *
+ * The payloads of everything picked this session are kept around, so a selected
+ * extension keeps its icon and publisher in the list below instead of collapsing
+ * back to a bare id the moment the results are cleared — the project only ever
+ * stores the id, but the screen doesn't have to look like it.
+ */
+export function ExtensionPicker({ value, onChange, onSearch, debounceMs = 300, className }: ExtensionPickerProps) {
+  const [query, setQuery] = useState("")
+  const [results, setResults] = useState<VscodeExtensionEntry[]>([])
+  const [known, setKnown] = useState<Record<string, VscodeExtensionEntry>>({})
+  const [loading, setLoading] = useState(false)
+  const [open, setOpen] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Guards against an earlier, slower search landing after a later one and
+  // overwriting its results — the classic out-of-order autocomplete bug.
+  const runId = useRef(0)
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current) }, [])
+
+  function handleQuery(next: string) {
+    setQuery(next)
+    if (timer.current) clearTimeout(timer.current)
+    if (!next.trim() || !onSearch) {
+      setResults([])
+      setOpen(false)
+      return
+    }
+    setLoading(true)
+    setOpen(true)
+    const run = ++runId.current
+    timer.current = setTimeout(async () => {
+      let found: VscodeExtensionEntry[] = []
+      try {
+        found = await onSearch(next)
+      } catch {
+        found = []
+      }
+      if (run !== runId.current) return
+      setResults(found)
+      setLoading(false)
+    }, debounceMs)
+  }
+
+  function add(extension: VscodeExtensionEntry) {
+    const id = extensionId(extension)
+    if (!id) return
+    setKnown((prev) => ({ ...prev, [id]: extension }))
+    if (!value.includes(id)) onChange([...value, id])
+    reset()
+  }
+
+  function addTyped() {
+    const id = query.trim()
+    if (!id || value.includes(id)) return
+    onChange([...value, id])
+    reset()
+  }
+
+  function reset() {
+    setQuery("")
+    setResults([])
+    setOpen(false)
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div>
+        <div className="flex items-center gap-2 rounded-md border border-border bg-transparent px-3 py-1.5">
+          <SearchIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => handleQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") { e.preventDefault(); addTyped() }
+              if (e.key === "Escape") setOpen(false)
+            }}
+            onFocus={() => results.length > 0 && setOpen(true)}
+            placeholder={onSearch ? "Search extensions or type an ID…" : "Type an extension ID…"}
+            aria-label="Extension search"
+            className="flex-1 bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none"
+          />
+          {loading && <Loader2Icon className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />}
+        </div>
+
+        {/* Results in the flow rather than in a popover: this sits inside a
+            section card that clips its overflow, and a floating list gets cut
+            at the card's bottom edge. Pushing the form down costs nothing. */}
+        {open && (results.length > 0 || loading) && (
+          <div className="mt-1 space-y-1 rounded-md border border-border bg-muted/20 p-1">
+            {loading && results.length === 0
+              ? [0, 1, 2].map((i) => <ExtensionCardSkeleton key={i} />)
+              : results.map((extension) => {
+                  const id = extensionId(extension)
+                  const already = value.includes(id)
+                  return (
+                    <ExtensionCard
+                      key={id}
+                      extension={extension}
+                      selected={already}
+                      disabled={already}
+                      onSelect={() => add(extension)}
+                      className="border-transparent bg-card"
+                    />
+                  )
+                })}
+          </div>
+        )}
+      </div>
+
+      {value.length > 0 && (
+        <div className="space-y-1.5">
+          {value.map((id) => (
+            <ExtensionCard
+              key={id}
+              extension={known[id] ?? { id }}
+              custom={!known[id] && !id.includes(".")}
+              action={
+                <button
+                  type="button"
+                  aria-label={`Remove ${id}`}
+                  onClick={() => onChange(value.filter((e) => e !== id))}
+                  className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <XIcon className="h-3.5 w-3.5" />
+                </button>
+              }
+            />
+          ))}
+        </div>
+      )}
+
+      {value.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          {value.length} extension{value.length > 1 ? "s" : ""} — installed at worker startup via code-server
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/projects/feature-picker.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { useState } from "react"
+import { PlusIcon, XIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { FeatureCard } from "../devcontainer/feature-card"
+import { FeatureTile } from "../devcontainer/feature-tile"
+import { parseRegistryRef } from "../devcontainer/registry"
+import type { DevcontainerFeatureEntry } from "../devcontainer/types"
+import { Button } from "../button"
+import { Input } from "../input"
+import type { ProjectFeatureSelection } from "./types"
+
+export interface FeaturePickerProps {
+  features?: DevcontainerFeatureEntry[]
+  value: ProjectFeatureSelection[]
+  onChange: (value: ProjectFeatureSelection[]) => void
+  /**
+   * `chips` (default) — the catalog as tag-sized entries that flow and wrap,
+   * with the cards of what you picked beside them. `cards` — every entry as a
+   * full card, which only stays readable while the catalog is short.
+   */
+  layout?: "chips" | "cards"
+  /** Where the picked cards go. `auto` splits above ~52rem. */
+  detail?: "auto" | "side" | "below"
+  className?: string
+}
+
+/**
+ * Pick the devcontainer features: the catalog on one side, what you've composed
+ * on the other.
+ *
+ * Same treatment as `ImagePicker`, with one structural difference — features are
+ * **multi-select**, so the panel can't be "the card of the selected one". It's
+ * the list of everything picked, in install order, each with its option chips,
+ * its author and its OCI reference, and a cross to drop it. Hand-typed refs land
+ * in that same list rather than in a second one underneath, because from the
+ * user's side they're the same thing: a feature that will be installed.
+ *
+ * Selection order is preserved — features install in the order they're listed,
+ * so a `Set` would quietly lose information here.
+ */
+export function FeaturePicker({
+  features = [],
+  value,
+  onChange,
+  layout = "chips",
+  detail: detailPosition = "auto",
+  className,
+}: FeaturePickerProps) {
+  const [customInput, setCustomInput] = useState("")
+
+  const isSelected = (id?: string) => !!id && value.some((f) => f.id === id)
+  const catalogById = new Map(features.filter((f) => f.id).map((f) => [f.id!, f]))
+
+  function toggle(feature: DevcontainerFeatureEntry) {
+    const id = feature.id
+    if (!id) return
+    onChange(isSelected(id) ? value.filter((f) => f.id !== id) : [...value, { id }])
+  }
+
+  function addCustom() {
+    const ociRef = customInput.trim()
+    if (!ociRef || value.some((f) => f.ociRef === ociRef)) return
+    // Same id shape the dashboard has always written, so an existing project
+    // round-trips unchanged: "ghcr.io/foo/features/mytool:1" → "custom-mytool".
+    const id = `custom-${parseRegistryRef(ociRef).name ?? ociRef}`
+    onChange([...value, { id, ociRef }])
+    setCustomInput("")
+  }
+
+  const customField = (
+    <div className="flex gap-2">
+      <Input
+        value={customInput}
+        aria-label="Custom OCI reference"
+        placeholder="Custom OCI ref, e.g. ghcr.io/foo/features/mytool:1"
+        className="flex-1"
+        onChange={(e) => setCustomInput(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addCustom())}
+      />
+      <Button type="button" variant="outline" onClick={addCustom}>
+        <PlusIcon className="mr-1 h-3.5 w-3.5" />
+        Add
+      </Button>
+    </div>
+  )
+
+  /** One picked feature — catalog entry or hand-typed ref — with its remove cross. */
+  const picked = value.map((selection) => {
+    const entry = catalogById.get(selection.id)
+    return (
+      <FeatureCard
+        key={selection.id}
+        feature={entry ?? { id: selection.id, ociRef: selection.ociRef }}
+        custom={!entry}
+        copyable
+        options={selection.options}
+        action={
+          <button
+            type="button"
+            aria-label={`Remove ${entry?.label ?? selection.ociRef ?? selection.id}`}
+            onClick={() => onChange(value.filter((f) => f.id !== selection.id))}
+            className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <XIcon className="h-3.5 w-3.5" />
+          </button>
+        }
+      />
+    )
+  })
+
+  if (layout === "cards") {
+    return (
+      <div className={cn("@container/picker space-y-2", className)}>
+        <div className="grid grid-cols-1 gap-2 @min-[34rem]/picker:grid-cols-2">
+          {features.map((feature) => (
+            <FeatureCard
+              key={feature.id ?? feature.ociRef}
+              feature={feature}
+              copyable
+              options={value.find((f) => f.id === feature.id)?.options}
+              selected={isSelected(feature.id)}
+              onSelect={() => toggle(feature)}
+            />
+          ))}
+        </div>
+        {customField}
+        {value.length > 0 && <Count n={value.length} />}
+      </div>
+    )
+  }
+
+  // A CONTAINER query, so the split depends on the picker's own width and never
+  // on the window's. Stacked is the same reading order, just vertical.
+  const split = {
+    auto: "@min-[52rem]/picker:grid-cols-[1fr_minmax(18rem,22rem)] @min-[52rem]/picker:items-start",
+    // Even "forced" has a floor: below ~34rem two columns simply don't fit, and
+    // the panel would push the page into horizontal scrolling. `side` means "as
+    // soon as it fits", not "always".
+    side: "@min-[34rem]/picker:grid-cols-[1fr_minmax(15rem,22rem)] @min-[34rem]/picker:items-start",
+    below: "",
+  }[detailPosition]
+
+  return (
+    <div className={cn("@container/picker", className)}>
+      <div className={cn("grid gap-3", split)}>
+        <div className="space-y-3">
+          <div className="flex flex-wrap content-start gap-1.5">
+            {features.map((feature) => (
+              <FeatureTile
+                key={feature.id ?? feature.ociRef}
+                feature={feature}
+                selected={isSelected(feature.id)}
+                onSelect={() => toggle(feature)}
+              />
+            ))}
+          </div>
+          {customField}
+        </div>
+
+        <div className="space-y-1.5">
+          {picked.length > 0 ? (
+            <>
+              {picked}
+              <Count n={value.length} />
+            </>
+          ) : (
+            // A placeholder rather than nothing: without it the whole section
+            // reflows on the first pick and jumps under the cursor.
+            <div
+              className={cn(
+                "min-h-[7.5rem] items-center justify-center rounded-lg border border-dashed border-border p-4 text-center text-xs text-muted-foreground",
+                detailPosition === "side" ? "hidden @min-[34rem]/picker:flex" : "hidden @min-[52rem]/picker:flex"
+              )}
+            >
+              Nothing selected — the base image ships as-is.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Count({ n }: { n: number }) {
+  return (
+    <p className="text-xs text-muted-foreground">
+      {n} feature{n > 1 ? "s" : ""} selected — installed at worker startup
+    </p>
+  )
+}

package/src/components/projects/form-section.tsx

@@ -0,0 +1,97 @@
+import type { ComponentType, ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { Label } from "../label"
+
+/** The four warm accents; a section rotates through them down the form. */
+export type SectionAccent = "build" | "ship" | "run" | "flame"
+
+export interface FormSectionProps {
+  /** Step number in the badge. Omitted → no badge. */
+  n?: number
+  icon?: ComponentType<{ className?: string }>
+  accent?: SectionAccent
+  title: string
+  hint?: string
+  children: ReactNode
+  /** Mostly for the entrance `animationDelay` a stack of sections staggers with. */
+  style?: React.CSSProperties
+  className?: string
+}
+
+/**
+ * One numbered step of a long form: an accent bar, a number, a title, a hint.
+ *
+ * Exported on its own because a form this long is really a *stack of sections*,
+ * and an app that adds one of its own (a deploy key, a billing block) should get
+ * the same object rather than approximate it.
+ *
+ * The entrance animation the dashboard used to do with framer-motion is a plain
+ * CSS keyframe here — the package can't take a motion library as a dependency
+ * for one fade-in, and `motion-reduce:animate-none` covers the accessibility
+ * side that `useReducedMotion` covered before.
+ */
+export function FormSection({ n, icon: Icon, accent = "build", title, hint, children, style, className }: FormSectionProps) {
+  return (
+    <section
+      data-slot="form-section"
+      // `--a` set once here, then read by the bar, the badge and the icon: the
+      // accent is one custom property, not four Tailwind variants to keep in sync.
+      style={{ "--a": `var(--${accent})`, ...style } as React.CSSProperties}
+      className={cn(
+        // `p-4` on a phone: 20px of padding each side eats a tenth of a 390px
+        // screen twice over. The container is the form, so this follows the
+        // form's width and not the window's.
+        "relative overflow-hidden rounded-xl border border-border bg-card p-4 @min-[30rem]/form:p-5",
+        "motion-safe:animate-[form-section-in_0.5s_cubic-bezier(0.22,1,0.36,1)_both]",
+        className
+      )}
+    >
+      <span aria-hidden className="absolute inset-y-0 left-0 w-0.5 bg-[var(--a)]/40" />
+      <div className="mb-4 flex items-center gap-3">
+        {n != null && (
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--a)]/[0.12] font-display text-sm font-bold text-[var(--a)]">
+            {n}
+          </span>
+        )}
+        <div className="min-w-0">
+          <h3 className="flex items-center gap-2 font-display text-base font-bold tracking-tight">
+            {Icon && <Icon className="h-4 w-4 shrink-0 text-[var(--a)]" />}
+            {title}
+          </h3>
+          {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+        </div>
+      </div>
+      {children}
+    </section>
+  )
+}
+
+/** Label + control + help line — the unit every section is built out of. */
+export function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  children,
+  className,
+}: {
+  label?: ReactNode
+  htmlFor?: string
+  hint?: ReactNode
+  error?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      {label && <Label htmlFor={htmlFor}>{label}</Label>}
+      {children}
+      {error ? (
+        <p className="text-xs text-destructive">{error}</p>
+      ) : hint ? (
+        <p className="text-xs text-muted-foreground">{hint}</p>
+      ) : null}
+    </div>
+  )
+}