create-cartbase 0.1.5 → 0.1.7

package/template/app/src/app/gallery/design-system/page.tsx

@@ -1,353 +0,0 @@
-/**
- * The design system on one screen.
- *
- * Every token the library owns, rendered as the thing it controls rather than
- * listed as text: a colour is a swatch, a type style is set in that style, a
- * shadow is a raised card, a radius is a corner. You review the system by
- * looking at it, not by reading a table of values.
- *
- * These are NOT components. They are the layer underneath every component, and
- * they come first in the nav for that reason: change one value here and all
- * hundred and seventeen components repaint at once.
- */
-export const dynamic = "force-dynamic"
-
-export default function DesignSystemPage() {
-  return (
-    <div className="space-y-16">
-      <header>
-        <h1 className="text-h1">Design system</h1>
-        <p className="text-body text-muted-foreground mt-3 max-w-prose">
-          The values every component reads. Nothing here is a Cartbase
-          invention: the namespaces are Tailwind&rsquo;s and the colour names
-          are shadcn&rsquo;s, so a developer or a coding agent recognises them
-          without documentation. A theme replaces these values and never these
-          names.
-        </p>
-      </header>
-
-      <Colour />
-      <Typography />
-      <Weight />
-      <Spacing />
-      <Radius />
-      <Elevation />
-      <Motion />
-      <Layout />
-    </div>
-  )
-}
-
-/* ── Colour ─────────────────────────────────────────────────────────────── */
-
-const SURFACES = [
-  { name: "background", fg: "foreground", use: "The page itself." },
-  { name: "card", fg: "card-foreground", use: "Anything raised off the page." },
-  { name: "popover", fg: "popover-foreground", use: "Menus, dropdowns, tooltips." },
-  { name: "muted", fg: "muted-foreground", use: "Recessed areas and secondary text." },
-]
-
-const ROLES = [
-  { name: "primary", fg: "primary-foreground", use: "The main action. Add to cart is this." },
-  { name: "secondary", fg: "secondary-foreground", use: "The action beside the main one." },
-  { name: "accent", fg: "accent-foreground", use: "Highlights and hover grounds." },
-  { name: "destructive", fg: "destructive-foreground", use: "Remove, cancel, delete." },
-  { name: "success", fg: "success-foreground", use: "Paid, delivered, in stock." },
-  { name: "warning", fg: "warning-foreground", use: "Low stock, pending, attention." },
-]
-
-const LINES = [
-  { name: "border", use: "Every dividing line." },
-  { name: "input", use: "Form field outlines." },
-  { name: "ring", use: "Keyboard focus." },
-]
-
-function Colour() {
-  return (
-    <Section
-      title="Colour"
-      blurb="Named by role, never by hue. Every surface carries a paired foreground so text on it is never a guess."
-    >
-      <SubTitle>Surfaces</SubTitle>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-10">
-        {SURFACES.map((s) => (
-          <Swatch key={s.name} name={s.name} fg={s.fg} use={s.use} />
-        ))}
-      </div>
-
-      <SubTitle>Roles</SubTitle>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
-        {ROLES.map((s) => (
-          <Swatch key={s.name} name={s.name} fg={s.fg} use={s.use} />
-        ))}
-      </div>
-
-      <SubTitle>Lines and focus</SubTitle>
-      <div className="grid gap-4 sm:grid-cols-3">
-        {LINES.map((l) => (
-          <div key={l.name} className="rounded-lg border border-border p-4">
-            <div
-              className="h-10 rounded-md mb-3"
-              style={{ backgroundColor: `var(--${l.name})` }}
-            />
-            <code className="text-caption font-mono">{l.name}</code>
-            <p className="text-caption text-muted-foreground mt-1">{l.use}</p>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Swatch({ name, fg, use }: { name: string; fg: string; use: string }) {
-  return (
-    <div className="rounded-lg border border-border overflow-hidden">
-      <div
-        className="p-5"
-        style={{ backgroundColor: `var(--${name})`, color: `var(--${fg})` }}
-      >
-        <span className="text-label">Aa</span>
-      </div>
-      <div className="p-3">
-        <code className="text-caption font-mono">{name}</code>
-        <p className="text-caption text-muted-foreground mt-1">{use}</p>
-      </div>
-    </div>
-  )
-}
-
-/* ── Typography ─────────────────────────────────────────────────────────── */
-
-const TYPE = [
-  { cls: "text-h1", label: "h1", sample: "Everyday Essentials" },
-  { cls: "text-h2", label: "h2", sample: "New this season" },
-  { cls: "text-h3", label: "h3", sample: "Merino Crew Neck" },
-  { cls: "text-h4", label: "h4", sample: "Materials and care" },
-  { cls: "text-h5", label: "h5", sample: "Shipping" },
-  { cls: "text-h6", label: "h6", sample: "Returns within 30 days" },
-  {
-    cls: "text-body-large",
-    label: "body-large",
-    sample: "Knitted from extra-fine merino at a gauge light enough to layer.",
-  },
-  {
-    cls: "text-body",
-    label: "body",
-    sample: "Knitted from extra-fine merino at a gauge light enough to layer.",
-  },
-  {
-    cls: "text-body-small",
-    label: "body-small",
-    sample: "Knitted from extra-fine merino at a gauge light enough to layer.",
-  },
-  { cls: "text-label", label: "label", sample: "Add to cart" },
-  { cls: "text-caption", label: "caption", sample: "Free delivery over 100 EUR" },
-]
-
-function Typography() {
-  return (
-    <Section
-      title="Type"
-      blurb="Eleven styles on a 1.2 ratio from a 16px base. The name is a style, never a tag: put text-h2 on an h1 when the page needs a smaller heading, and the document outline stays correct for search engines and screen readers."
-    >
-      <div className="space-y-6">
-        {TYPE.map((t) => (
-          <div key={t.cls} className="flex items-baseline gap-6 border-b border-border pb-5">
-            <code className="text-caption font-mono text-muted-foreground w-28 shrink-0">
-              {t.label}
-            </code>
-            <p className={`${t.cls} min-w-0`}>{t.sample}</p>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Weight() {
-  return (
-    <Section
-      title="Weight"
-      blurb="Three, not four. Bold and semibold were doing the same job in different places, which is how a scale rots."
-    >
-      <div className="space-y-4">
-        {[
-          ["regular", "font-regular"],
-          ["medium", "font-medium"],
-          ["semibold", "font-semibold"],
-        ].map(([label, cls]) => (
-          <div key={label} className="flex items-baseline gap-6">
-            <code className="text-caption font-mono text-muted-foreground w-28 shrink-0">
-              {label}
-            </code>
-            <p className={`text-h5 ${cls}`}>Merino Crew Neck</p>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-/* ── Spacing, radius, elevation, motion, layout ─────────────────────────── */
-
-const SPACE_STEPS = [1, 2, 3, 4, 6, 8, 12, 16, 24]
-
-function Spacing() {
-  return (
-    <Section
-      title="Spacing"
-      blurb="One 4px step, multiplied. Every gap, padding and margin in the library is a multiple of it, so widening the whole rhythm is a single number."
-    >
-      <div className="space-y-2">
-        {SPACE_STEPS.map((n) => (
-          <div key={n} className="flex items-center gap-4">
-            <code className="text-caption font-mono text-muted-foreground w-14 shrink-0">
-              {n}
-            </code>
-            <div
-              className="h-4 bg-primary rounded-sm"
-              style={{ width: `calc(var(--spacing) * ${n})` }}
-            />
-            <span className="text-caption text-muted-foreground">{n * 4}px</span>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Radius() {
-  return (
-    <Section
-      title="Radius"
-      blurb="Derived from one base value, so a theme turns the whole library sharp or soft with one number."
-    >
-      {/* Class names are written out, never built from a variable: Tailwind
-          scans source text, so `rounded-${r}` would generate nothing. */}
-      <div className="flex flex-wrap gap-6">
-        {[
-          ["sm", "rounded-sm"],
-          ["md", "rounded-md"],
-          ["lg", "rounded-lg"],
-          ["xl", "rounded-xl"],
-          ["2xl", "rounded-2xl"],
-        ].map(([label, cls]) => (
-          <div key={label} className="text-center">
-            <div className={`w-24 h-24 bg-muted border border-border ${cls}`} />
-            <code className="text-caption font-mono text-muted-foreground mt-2 block">
-              {label}
-            </code>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Elevation() {
-  return (
-    <Section
-      title="Elevation"
-      blurb="Named for what is raised, not for how big the blur is. shadow-card says what it is for; shadow-md says nothing and cannot be retuned per theme."
-    >
-      <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-        {[
-          ["card", "shadow-card"],
-          ["card-hover", "shadow-card-hover"],
-          ["popover", "shadow-popover"],
-          ["drawer", "shadow-drawer"],
-        ].map(([label, cls]) => (
-          <div key={label}>
-            <div className={`h-24 bg-card rounded-lg ${cls}`} />
-            <code className="text-caption font-mono text-muted-foreground mt-3 block">
-              {label}
-            </code>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Motion() {
-  return (
-    <Section
-      title="Motion"
-      blurb="Three curves. Standard for things that move within the page, entrance for things arriving, exit for things leaving. Hover a bar to see it."
-    >
-      <div className="space-y-4">
-        {[
-          ["standard", "ease-standard"],
-          ["entrance", "ease-entrance"],
-          ["exit", "ease-exit"],
-        ].map(([label, cls]) => (
-          <div key={label} className="flex items-center gap-6 group">
-            <code className="text-caption font-mono text-muted-foreground w-28 shrink-0">
-              {label}
-            </code>
-            <div className="flex-1 h-8 bg-muted rounded-md relative overflow-hidden">
-              <div
-                className={`absolute inset-y-1 left-1 w-8 bg-primary rounded-sm transition-all duration-500 ${cls} group-hover:left-[calc(100%-2.25rem)]`}
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-function Layout() {
-  return (
-    <Section
-      title="Layout"
-      blurb="Two widths. The page holds the whole store, prose holds anything meant to be read as a paragraph."
-    >
-      <div className="space-y-4">
-        {[
-          ["page", "var(--layout-page-width)", "The store's outer bound."],
-          ["prose", "var(--layout-prose-width)", "Reading measure for descriptions and policies."],
-        ].map(([name, val, use]) => (
-          <div key={name}>
-            <div className="flex items-baseline gap-3">
-              <code className="text-caption font-mono">{name}</code>
-              <span className="text-caption text-muted-foreground">{use}</span>
-            </div>
-            <div
-              className="h-3 bg-primary/20 border border-primary/40 rounded-sm mt-2 max-w-full"
-              style={{ width: val }}
-            />
-          </div>
-        ))}
-      </div>
-    </Section>
-  )
-}
-
-/* ── Frame ──────────────────────────────────────────────────────────────── */
-
-function Section({
-  title,
-  blurb,
-  children,
-}: {
-  title: string
-  blurb: string
-  children: React.ReactNode
-}) {
-  return (
-    <section>
-      <h2 className="text-h3">{title}</h2>
-      <p className="text-body-small text-muted-foreground mt-2 mb-8 max-w-prose">{blurb}</p>
-      {children}
-    </section>
-  )
-}
-
-function SubTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <h3 className="text-caption uppercase tracking-wide text-muted-foreground mb-3">
-      {children}
-    </h3>
-  )
-}

package/template/app/src/app/gallery/layout.tsx

@@ -1,83 +0,0 @@
-/**
- * The workbench.
- *
- * Everything in the library has an address here, grouped the way a merchant
- * thinks about a storefront rather than the way our folders are arranged.
- * The nav is always present, so you can move between any two components
- * without going back to an index, and every component has a permanent URL so
- * it can be named in conversation and opened directly.
- */
-import Link from "next/link"
-import { GROUPS } from "./_lib/registry"
-import { StatusDot } from "./_components/status"
-
-export default function GalleryLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen">
-      <aside className="w-64 shrink-0 border-r border-border bg-muted/20">
-        <div className="sticky top-0 max-h-screen overflow-y-auto px-4 py-6">
-          <Link href="/gallery" className="block mb-6">
-            <p className="text-[11px] uppercase tracking-widest text-muted-foreground">
-              Cartbase
-            </p>
-            <p className="font-semibold">Storefront library</p>
-          </Link>
-
-          <nav className="space-y-6">
-            {/*
-              The design system sits above every group because it is a
-              different kind of thing: not a component, but the values all
-              117 of them read. Change one here and everything below repaints.
-            */}
-            <div>
-              <p className="text-[11px] uppercase tracking-widest text-muted-foreground mb-2 px-2">
-                Foundation
-              </p>
-              <Link
-                href="/gallery/design-system"
-                className="flex items-center gap-2 px-2 py-1 rounded text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
-              >
-                <span className="inline-block w-1.5 h-1.5 rounded-full shrink-0 bg-primary" />
-                <span className="truncate">Design system</span>
-              </Link>
-            </div>
-
-            {GROUPS.map((group) => (
-              <div key={group.slug}>
-                <p className="text-[11px] uppercase tracking-widest text-muted-foreground mb-2 px-2">
-                  {group.name}
-                </p>
-                <ul className="space-y-0.5">
-                  {group.entries.map((entry) => (
-                    <li key={entry.slug}>
-                      <Link
-                        href={`/gallery/${entry.slug}`}
-                        className="flex items-center gap-2 px-2 py-1 rounded text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
-                      >
-                        <StatusDot status={entry.status} />
-                        <span className="truncate">{entry.name}</span>
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </nav>
-
-          <div className="mt-8 pt-6 border-t border-border">
-            <Link
-              href="/"
-              className="block px-2 py-1 rounded text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
-            >
-              Open the shop
-            </Link>
-          </div>
-        </div>
-      </aside>
-
-      <div className="min-w-0 flex-1">
-        <div className="max-w-5xl px-10 py-10">{children}</div>
-      </div>
-    </div>
-  )
-}

package/template/app/src/app/gallery/page.tsx

@@ -1,81 +0,0 @@
-/**
- * The board. Everything the library has and everything it owes, at a glance,
- * so the size of the job is never a surprise.
- */
-import Link from "next/link"
-import { GROUPS, counts } from "./_lib/registry"
-import { StatusDot } from "./_components/status"
-
-export const dynamic = "force-dynamic"
-
-export default function GalleryIndex() {
-  const c = counts()
-
-  return (
-    <div>
-      <header className="mb-10">
-        <h1 className="text-3xl font-semibold">The library</h1>
-        <p className="text-muted-foreground mt-3 max-w-2xl">
-          Every part of a storefront we ship, or still owe. Open one and we
-          shape it together; when it is agreed it turns green and stops being
-          negotiable.
-        </p>
-      </header>
-
-      <div className="grid grid-cols-3 gap-4 mb-12">
-        <Tally label="Agreed" value={c.done} tone="done" />
-        <Tally label="Built, not reviewed" value={c.built} tone="built" />
-        <Tally label="Not built" value={c.missing} tone="missing" />
-      </div>
-
-      <div className="space-y-10">
-        {GROUPS.map((group) => (
-          <section key={group.slug}>
-            <h2 className="text-lg font-semibold">{group.name}</h2>
-            <p className="text-sm text-muted-foreground mt-1 mb-4 max-w-2xl">{group.blurb}</p>
-            <ul className="grid gap-2 sm:grid-cols-2">
-              {group.entries.map((entry) => (
-                <li key={entry.slug}>
-                  <Link
-                    href={`/gallery/${entry.slug}`}
-                    className="flex items-start gap-3 rounded-lg border border-border p-3 hover:bg-muted/50"
-                  >
-                    <span className="mt-1.5">
-                      <StatusDot status={entry.status} />
-                    </span>
-                    <span className="min-w-0">
-                      <span className="block font-medium text-sm">{entry.name}</span>
-                      <span className="block text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                        {entry.summary}
-                      </span>
-                    </span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </section>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function Tally({
-  label,
-  value,
-  tone,
-}: {
-  label: string
-  value: number
-  tone: "done" | "built" | "missing"
-}) {
-  return (
-    <div className="rounded-lg border border-border p-4">
-      <div className="flex items-center gap-2">
-        <StatusDot status={tone} />
-        <span className="text-xs uppercase tracking-wide text-muted-foreground">{label}</span>
-      </div>
-      <p className="text-2xl font-semibold mt-1">{value}</p>
-    </div>
-  )
-}