@spunto/design-system 0.9.3 → 0.11.0

package/src/components/projects/advanced-sections.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { ChevronDownIcon, Settings2Icon } from "lucide-react"
+
+import { cn } from "../../utils"
+import type { ProjectFormSectionId, ProjectFormValue } from "./types"
+
+export interface AdvancedDisclosureProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  label?: string
+  hint?: string
+  /**
+   * What's configured inside, shown while it's closed. Empty → a "nothing set"
+   * line. This is what makes folding the sections away safe rather than sneaky.
+   */
+  summary?: string[]
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * The fold that hides the sections most people never touch.
+ *
+ * Two rules make it honest. It **says what's inside while it's closed** — a
+ * summary of the configured items, not just a chevron — and the parent form
+ * **opens it on its own** when any of those sections already holds a value.
+ * Between them, no setting can ever be hidden behind a shut drawer: a fold that
+ * conceals configuration you didn't set yourself is how people end up debugging
+ * a worker for twenty minutes over a post-create command they can't see.
+ */
+export function AdvancedDisclosure({
+  open,
+  onOpenChange,
+  label = "Advanced options",
+  hint = "Features, extensions, lifecycle commands, secrets — the environment beyond the base image.",
+  summary = [],
+  children,
+  className,
+}: AdvancedDisclosureProps) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      <button
+        type="button"
+        onClick={() => onOpenChange(!open)}
+        aria-expanded={open}
+        data-slot="advanced-disclosure"
+        className={cn(
+          // `items-start`: on a phone the hint wraps to three or four lines, and
+          // a vertically-centred icon then floats halfway down a paragraph it's
+          // supposed to label. Padding follows the form's width, like the sections.
+          "flex w-full cursor-pointer items-start gap-3 rounded-xl border border-dashed px-4 py-4 text-left transition-colors @min-[30rem]/form:px-5",
+          open ? "border-border bg-muted/30" : "border-border hover:border-muted-foreground/40 hover:bg-muted/30"
+        )}
+      >
+        <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+          <Settings2Icon className="h-4 w-4" />
+        </span>
+
+        <span className="min-w-0 flex-1">
+          <span className="block font-display text-base font-bold tracking-tight">{label}</span>
+          {/* While it's open the hint is redundant — the sections are right
+              there. While it's closed, the summary is the only trace of what
+              they hold, so it takes the line. */}
+          {open ? (
+            <span className="block text-xs text-muted-foreground">{hint}</span>
+          ) : summary.length > 0 ? (
+            <span className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1">
+              {summary.map((item) => (
+                <span
+                  key={item}
+                  className="inline-flex items-center rounded border border-primary/25 bg-primary/5 px-1.5 py-0.5 font-mono text-[10px] leading-none text-primary"
+                >
+                  {item}
+                </span>
+              ))}
+            </span>
+          ) : (
+            // Clamped: closed and empty, this is a caption, and four lines of it
+            // on a phone is longer than the control it describes.
+            <span className="line-clamp-2 block text-xs text-muted-foreground">{hint}</span>
+          )}
+        </span>
+
+        <ChevronDownIcon
+          className={cn("mt-2 h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")}
+          aria-hidden
+        />
+      </button>
+
+      {/* Unmounted rather than hidden: these sections carry inputs, and a
+          `display:none` fieldset still tab-focuses and still validates. */}
+      {open && children}
+    </div>
+  )
+}
+
+/**
+ * One short label per advanced section that holds something — `2 features`,
+ * `lifecycle`, `3 secrets`. Pure, and exported, because a caller rendering its
+ * own fold needs the same sentence.
+ */
+export function advancedSummary(value: ProjectFormValue, sections: ProjectFormSectionId[]): string[] {
+  const out: string[] = []
+  for (const id of sections) {
+    switch (id) {
+      case "features":
+        if (value.features.length) out.push(`${value.features.length} feature${value.features.length > 1 ? "s" : ""}`)
+        break
+      case "extensions":
+        if (value.vscodeExtensions.length)
+          out.push(`${value.vscodeExtensions.length} extension${value.vscodeExtensions.length > 1 ? "s" : ""}`)
+        break
+      case "lifecycle":
+        if (value.postCreateCommand || value.postStartCommand) out.push("lifecycle")
+        break
+      case "ports":
+        if (value.forwardPorts.length) out.push(`ports ${value.forwardPorts.join(", ")}`)
+        break
+      case "prewarm":
+        if (value.prewarmImages.length) out.push(`${value.prewarmImages.length} prewarm`)
+        break
+      case "docker":
+        if (value.dockerInDocker) out.push("docker-in-docker")
+        break
+      case "secrets":
+        if (value.secrets.length) out.push(`${value.secrets.length} secret${value.secrets.length > 1 ? "s" : ""}`)
+        break
+      // Identity, image and repositories are never advanced — they're the form.
+      default:
+        break
+    }
+  }
+  return out
+}

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>
+  )
+}