Memphis Command Objects

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #FBF7EE;
  --foreground: #050505;
  --card: #FFFFFF;
  --card-foreground: #050505;
  --popover: #FFFFFF;
  --popover-foreground: #050505;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #F5F1E8;
  --secondary-foreground: #111111;
  --muted: #77736B;
  --muted-foreground: #050505;
  --accent: #00D7FF;
  --accent-foreground: #111111;
  --destructive: #FF2E88;
  --border: #050505;
  --input: #050505;
  --ring: #00D7FF;
  --chart-1: #050505;
  --chart-2: #F5F1E8;
  --chart-3: #00D7FF;
  --chart-4: #9CFF00;
  --chart-5: #FFB000;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #050505;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00D7FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #050505;
  --sidebar-ring: #00D7FF;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00D7FF;
  --accent-foreground: #111111;
  --destructive: #FF2E88;
  --border: #303642;
  --input: #303642;
  --ring: #00D7FF;
  --chart-1: #050505;
  --chart-2: #F5F1E8;
  --chart-3: #00D7FF;
  --chart-4: #9CFF00;
  --chart-5: #FFB000;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00D7FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #00D7FF;
  --radius: 2px;
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function MemphisCommandObjectsShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Memphis Command Objects</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "cssVars": {
    "dark": {
      "accent": "#00C2FF",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#050505",
      "chart-2": "#F7F4EA",
      "chart-3": "#00C2FF",
      "chart-4": "#A7FF1A",
      "chart-5": "#FFB000",
      "destructive": "#FF3B7A",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00C2FF",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00C2FF"
    },
    "light": {
      "accent": "#00C2FF",
      "accent-foreground": "#ffffff",
      "background": "#F4F1E8",
      "border": "#080808",
      "card": "#FFFFFF",
      "card-foreground": "#080808",
      "chart-1": "#050505",
      "chart-2": "#F7F4EA",
      "chart-3": "#00C2FF",
      "chart-4": "#A7FF1A",
      "chart-5": "#FFB000",
      "destructive": "#FF3B7A",
      "foreground": "#080808",
      "input": "#080808",
      "muted": "#6E6A61",
      "muted-foreground": "#080808",
      "popover": "#FFFFFF",
      "popover-foreground": "#080808",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00C2FF",
      "secondary": "#F7F4EA",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#080808",
      "sidebar-foreground": "#080808",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00C2FF"
    },
    "theme": {}
  },
  "meta": {
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "languageId": "en-019e8a06-d615-7993-bd65-2e36bdf212aa",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    },
    "slug": "memphis-command-objects",
    "source": "katagami"
  },
  "name": "memphis-command-objects",
  "title": "Memphis Command Objects shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Memphis Command Objects

Author: `katagami-agent`

## ShadSync visual profile
- Family: postmodern command-object product UI
- Material: matte off-white drafting paper, white ink panels, black manga contours, saturated Memphis state chips
- Contour: orthogonal command blocks for containers and controls; rare full-radius only for compact badges
- Border: 3px hard black outlines, double-rule dividers, cyan focus rings
- Underlay: sparse drafting grid, clipped terrazzo headers, halftone wells, hard stamped shadows
- Grain: subtle paper grain and registration marks, never noisy wallpaper
- Sticker badges: cyan observation circles, magenta intervention triangles, acid-green execution bars, amber warning tabs
- Motion: step-snap stamp transitions around 140ms; hover shifts one grid unit
- Density: medium-high, aligned to an 8px baseline with visible gutters
- Accents: #00D7FF cyan, #FF2E88 magenta, #9CFF00 acid green, #FFB000 amber on #FBF7EE/#FFFFFF/#050505

## Signature component recipes

### button
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Stamp-like command blocks. Primary is black with white Space Grotesk label and cyan corner chip; secondary is off-white with black border; destructive uses magenta strip. Hover translates one grid unit and preserves a visible focus ring.

### card
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Command-object panels with black title strip, clipped terrazzo or halftone header zone, 8px-grid internal rhythm, saturated corner state chip, and 6px/10px hard offset shadow. Avoid soft SaaS rounding.

### input
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. White command field with mono label, 3px black outline, cyan focus outline, square affordance cap, helper text in mono, and magenta/amber validation chips attached to the frame.

### textarea
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Large drafted note field with faint grid-line underlay, black frame, mono row marker, visible resize affordance styled as a black corner block, and validation chip in the title strip.

### select
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Command cartridge trigger with boxed chevron cell, mono selected value, cyan active marker, and dropdown items separated by hard black registration rules.

### dialog
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Centered command board with black header strip, off-white body, registration marks in corners, large shadow slab, decisive action row, and no translucent glass.

### sheet
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Side panel as framed operations rail with black vertical spine label, stacked command-object rows, square close tab, and clipped patterned header.

### tabs
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Squared ticket tabs. Active tab is black with white label and colored corner; inactive tabs are off-white plates with 3px border and hard separators.

### badge
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Compact uppercase mono chips in cyan, magenta, acid green, or amber with black border. Use full radius only here; all containers remain square.

### separator
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Hard 3px black rules, double dividers, or dashed registration marks aligned to the 8px grid; never pale hairlines.

### checkbox
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Square ink box with 3px outline. Checked fills acid green with black tick or hatch; focus adds cyan outer ring.

### switch
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Chunky track cartridge with square stepped thumb, black outline, ON chip in acid green/cyan, OFF in off-white with black hatch.

### slider
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Black rail with square thumb, visible tick labels in mono, colored progress segment, and numeric readout chip attached to the rail.

### tooltip
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Tiny black annotation placard with white mono copy, colored pointer chip, and square corners; behaves like manga margin notation.

### dropdown-menu
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Framed command list with black top label, off-white rows, hover row stamped cyan, separators as black rules, and shortcut aliases in mono.

### table
Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur. Dense operations grid with black header strip, bordered rows, mono metrics, colored status badges, and selected row side chip; maintain legibility over novelty.

## Preview shots

### application-shell
A desktop operations workspace with black left command rail, summary command-object cards, filter inputs, squared tabs, badges, and a dense table. Signature pattern: clipped terrazzo card headers and registration marks used as navigation landmarks.

### detail-editor
A focused record editor with labels, inputs, textarea, validation, dialog confirmation, sheet inspector, switches, checkbox, slider, tooltip annotations, and destructive magenta action. Signature pattern: decorated-shed labels printed on object surfaces without obscuring fields.

### data-operations
A monitoring/data screen with toolbar dropdown, segmented tabs, metrics cards, table rows, status chips, separators, and batch action buttons. Signature pattern: agent state represented with cyan circles, magenta triangles, and acid-green hatch bars.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export function MemphisCommandPanel() {
  return (
    <Card className="border-[3px] border-black bg-[#FBF7EE] shadow-[8px_8px_0_#050505] rounded-none">
      <CardHeader className="border-b-[3px] border-black bg-black text-white rounded-none">
        <CardTitle className="font-bold uppercase tracking-tight">Command Object 07</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-4">
        <Badge className="w-fit rounded-full border-2 border-black bg-[#00D7FF] text-black font-mono uppercase">observe</Badge>
        <Input className="rounded-none border-[3px] border-black bg-white font-mono focus-visible:ring-[#00D7FF]" placeholder="agent.command" />
        <Button className="rounded-none border-[3px] border-black bg-[#050505] text-white shadow-[4px_4px_0_#00D7FF] uppercase">Stamp action</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Stamp-like command blocks. Primary is black with white Space Grotesk label and cyan corner chip; secondary is off-white with black border; destructive uses magenta strip. Hover translates one grid unit and preserves a visible focus ring.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "card",
      "recipe": "Command-object panels with black title strip, clipped terrazzo or halftone header zone, 8px-grid internal rhythm, saturated corner state chip, and 6px/10px hard offset shadow. Avoid soft SaaS rounding.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "input",
      "recipe": "White command field with mono label, 3px black outline, cyan focus outline, square affordance cap, helper text in mono, and magenta/amber validation chips attached to the frame.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "textarea",
      "recipe": "Large drafted note field with faint grid-line underlay, black frame, mono row marker, visible resize affordance styled as a black corner block, and validation chip in the title strip.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "select",
      "recipe": "Command cartridge trigger with boxed chevron cell, mono selected value, cyan active marker, and dropdown items separated by hard black registration rules.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "dialog",
      "recipe": "Centered command board with black header strip, off-white body, registration marks in corners, large shadow slab, decisive action row, and no translucent glass.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "sheet",
      "recipe": "Side panel as framed operations rail with black vertical spine label, stacked command-object rows, square close tab, and clipped patterned header.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "tabs",
      "recipe": "Squared ticket tabs. Active tab is black with white label and colored corner; inactive tabs are off-white plates with 3px border and hard separators.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "badge",
      "recipe": "Compact uppercase mono chips in cyan, magenta, acid green, or amber with black border. Use full radius only here; all containers remain square.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "separator",
      "recipe": "Hard 3px black rules, double dividers, or dashed registration marks aligned to the 8px grid; never pale hairlines.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "checkbox",
      "recipe": "Square ink box with 3px outline. Checked fills acid green with black tick or hatch; focus adds cyan outer ring.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "switch",
      "recipe": "Chunky track cartridge with square stepped thumb, black outline, ON chip in acid green/cyan, OFF in off-white with black hatch.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "slider",
      "recipe": "Black rail with square thumb, visible tick labels in mono, colored progress segment, and numeric readout chip attached to the rail.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "tooltip",
      "recipe": "Tiny black annotation placard with white mono copy, colored pointer chip, and square corners; behaves like manga margin notation.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Framed command list with black top label, off-white rows, hover row stamped cyan, separators as black rules, and shortcut aliases in mono.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    },
    {
      "primitive": "table",
      "recipe": "Dense operations grid with black header strip, bordered rows, mono metrics, colored status badges, and selected row side chip; maintain legibility over novelty.",
      "visualRules": "Use off-white or white surfaces, 3px hard black object outlines, mostly square corners, mono labels, saturated cyan/magenta/acid-green/amber chips only for semantic state, and hard offset shadows instead of blur."
    }
  ],
  "generatedBy": "katagami-agent",
  "language": {
    "id": "en-019e8a07-36aa-7a20-9658-0866c5907ef6",
    "name": "Memphis Command Objects",
    "slug": "memphis-command-objects"
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "Stamp priority",
          "Open filter sheet"
        ],
        "description": "A 12-column command surface for routing observations, interventions, and execution state without turning Memphis pattern into wallpaper.",
        "eyebrow": "OPS / BOARD 12",
        "fields": [
          {
            "label": "Filter command",
            "value": "risk:amber owner:agent-07"
          },
          {
            "label": "Queue",
            "value": "North cluster"
          }
        ],
        "headline": "Agent command workspace",
        "rows": [
          {
            "name": "Route invoice anomaly",
            "priority": "cyan",
            "status": "observe"
          },
          {
            "name": "Patch supplier record",
            "priority": "magenta",
            "status": "intervene"
          },
          {
            "name": "Reconcile batch",
            "priority": "green",
            "status": "executed"
          }
        ],
        "stats": [
          {
            "label": "Observed",
            "tone": "cyan",
            "value": "128"
          },
          {
            "label": "Interventions",
            "tone": "magenta",
            "value": "17"
          },
          {
            "label": "Executed",
            "tone": "green",
            "value": "94%"
          }
        ]
      },
      "title": "Application shell",
      "viewport": "desktop"
    },
    {
      "components": [
        "button",
        "card",
        "input",
        "textarea",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "tooltip",
        "badge",
        "separator"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Commit packet",
          "Discard draft"
        ],
        "description": "A focused editor with readable labels, validation chips, side inspector, and a confirmation board using hard object framing.",
        "eyebrow": "EDIT / OBJECT 07",
        "fields": [
          {
            "label": "Command alias",
            "value": "PATCH_SUPPLIER_EDGE"
          },
          {
            "label": "Operator note",
            "value": "Keep rotated annotations outside reading path."
          },
          {
            "label": "Risk slider",
            "value": "64"
          }
        ],
        "headline": "Tune intervention packet",
        "rows": [
          {
            "name": "Requires approval",
            "priority": "green",
            "status": "checked"
          },
          {
            "name": "Notify controller",
            "priority": "cyan",
            "status": "on"
          },
          {
            "name": "Validation warning",
            "priority": "amber",
            "status": "missing SLA"
          }
        ],
        "stats": [
          {
            "label": "Confidence",
            "tone": "green",
            "value": "86"
          },
          {
            "label": "Conflicts",
            "tone": "amber",
            "value": "2"
          }
        ]
      },
      "title": "Detail editor",
      "viewport": "tablet"
    },
    {
      "components": [
        "button",
        "card",
        "dropdown-menu",
        "tabs",
        "badge",
        "separator",
        "table",
        "switch",
        "slider",
        "tooltip"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "Run batch",
          "Export audit"
        ],
        "description": "Dense operational data where color chips encode state, rows keep clear borders, and Memphis geometry stays aligned to the product grid.",
        "eyebrow": "DATA / RUN 23",
        "fields": [
          {
            "label": "Dropdown action",
            "value": "Normalize fields"
          },
          {
            "label": "Active tab",
            "value": "Execution"
          }
        ],
        "headline": "Batch execution console",
        "rows": [
          {
            "name": "customer_edges.csv",
            "priority": "cyan",
            "status": "queued"
          },
          {
            "name": "supplier_patch.sql",
            "priority": "magenta",
            "status": "needs intervention"
          },
          {
            "name": "invoice_reconcile.py",
            "priority": "green",
            "status": "complete"
          }
        ],
        "stats": [
          {
            "label": "Rows scanned",
            "tone": "cyan",
            "value": "42K"
          },
          {
            "label": "Failures",
            "tone": "magenta",
            "value": "11"
          },
          {
            "label": "Latency",
            "tone": "amber",
            "value": "142ms"
          }
        ]
      },
      "title": "Data operations",
      "viewport": "desktop"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "cyan observation circles",
      "magenta intervention triangles",
      "acid-green execution hatch bars",
      "amber warning tabs"
    ],
    "border": "3px hard black outlines with double-rule dividers",
    "contour": "orthogonal command blocks with badge-only pills",
    "density": "medium-high 8px-grid",
    "family": "postmodern-command-object",
    "grain": true,
    "material": "matte drafting paper and black ink",
    "motion": "step-snap stamp shift",
    "stickerBadges": true,
    "underlay": true
  }
}