@boyernick/standard-ui-react 0.2.1 → 0.2.2-canary.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.2.1",
+  "version": "0.2.2-canary.38",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/attachment.tsx

@@ -102,7 +102,11 @@ export const AttachmentPreview = ({
 }: AttachmentPreviewProps) => (
   <div
     className={cn(
-      "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-background-tertiary text-fg-secondary [&_img]:size-full [&_img]:object-cover [&_svg]:size-5",
+      // `>svg` rather than a descendant match: an icon handed straight to this
+      // slot should be sized to 20, but a composed child that draws its own SVG
+      // — a file illustration, say — already knows how big it wants to be, and
+      // resizing its inner element letterboxes the drawing off-centre.
+      "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-background-tertiary text-fg-secondary [&_img]:size-full [&_img]:object-cover [&>svg]:size-5",
       className,
     )}
     {...props}

package/src/illustrations.tsx

@@ -2,13 +2,28 @@ import type { ComponentProps, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
 /**
- * Small, composition-based illustrations for empty states.
+ * Small illustrations for empty states.
  *
- * Built from divs and theme tokens rather than SVG paths, so they follow the
- * palette into dark mode instead of carrying baked-in colours. They are
- * deliberately abstract and monochrome — a miniature of the thing that is
+ * Drawn as SVG on one grid so the whole family shares a stroke weight, a corner
+ * radius and an optical bounding box — a row of them lines up without ad-hoc
+ * sizing. Colour still comes from theme tokens (`fill-*`/`stroke-*` utilities
+ * resolve the same variables the rest of the library uses), so they follow the
+ * palette into dark mode with nothing baked in.
+ *
+ * Deliberately abstract and monochrome — a miniature of the thing that is
  * missing, not a picture about it. Nothing here uses a brand colour: an empty
  * state is a quiet moment, and an accent turns it into an announcement.
+ *
+ * Three levels of ink, and no others:
+ *   structure  `border-secondary`     the edge of a sheet or a folder
+ *   content    `fg-quaternary/60`     marks standing in for what is on it
+ *   subject    `fg-tertiary/70`       the one thing the illustration is about
+ *
+ * The opacity modifiers are the whole point of those last two: the foreground
+ * tokens at full strength are text ink, and text ink inside a 32px sheet reads
+ * as a document someone is expected to be able to *read*. Stepped back, the
+ * marks stay legible but sit behind the silhouette, which is what carries the
+ * meaning. They are still tokens, so both levels flip with the theme.
  */
 
 export type IllustrationProps = ComponentProps<"div">
@@ -27,89 +42,241 @@ const Frame = ({ className, children, ...props }: IllustrationProps) => (
   </div>
 )
 
-/** A sheet. The hairline and radius are sub-pixel on purpose — at this size a
- *  1px border reads as a heavy outline rather than an edge. */
-const Card = ({
-  className,
-  children,
-}: {
-  className?: string
-  children?: ReactNode
-}) => (
-  <div
-    className={cn(
-      "relative flex shrink-0 flex-col overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
-      className,
-    )}
+/**
+ * The grid every illustration is drawn on: 64×48 user units rendered at 64×48
+ * CSS pixels, so one unit is one pixel. Geometry sits on half-unit coordinates
+ * for that reason — a 1-wide stroke centred on x.5 covers exactly one pixel
+ * instead of straddling two and rendering soft.
+ */
+const Stage = ({ children }: { children: ReactNode }) => (
+  <svg
+    viewBox="0 0 64 48"
+    fill="none"
+    strokeWidth={1}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={cn("size-full", SHADOW)}
   >
     {children}
-  </div>
+  </svg>
 )
 
-/** A line of content. */
-const Bar = ({ width }: { width: string }) => (
-  <div
-    className="h-[3px] shrink-0 rounded-[1px] bg-background-tertiary"
-    style={{ width }}
-  />
+/**
+ * Lift off the page. `drop-shadow` rather than `shadow-*`: a box-shadow needs a
+ * box, and these are paths — it would draw a rectangle behind a transparent
+ * stage. This follows the silhouette instead, so the fold and the torn edge
+ * cast a shadow of their own shape.
+ *
+ * Built from the same variables as the shadow scale, so the alpha steps up in
+ * dark mode the way every other shadow in the library does. `overflow-visible`
+ * on the stage keeps the blur from being clipped at the viewBox edge, which
+ * the 24×30 sheet would otherwise do — it sits half a unit from the bottom.
+ */
+const SHADOW =
+  "overflow-visible [filter:drop-shadow(0_1px_2px_rgb(var(--shadow-color)/var(--shadow-alpha-200)))]"
+
+const SHEET = "fill-surface stroke-border-secondary"
+const MARK = "fill-fg-quaternary/60"
+const SUBJECT = "stroke-fg-tertiary/70"
+
+/** Filled *and* stroked in the same ink. The stage sets `stroke-linejoin:
+ *  round`, so the outline rounds the points of a triangle — a plain fill
+ *  leaves them needle-sharp, which is the one thing in here that never looks
+ *  drawn. The path is inset by half the stroke to keep the size honest. */
+const MARK_SOLID = "fill-fg-quaternary/60 stroke-fg-quaternary/60"
+
+/** The sheet, and the line that closes its folded corner.
+ *
+ *  The fold is what makes a rounded rectangle read as paper. Without it every
+ *  illustration in the family opens on the same anonymous box. */
+const SHEET_PATH =
+  "M22.5 8.5h12l9 9v22a2 2 0 0 1-2 2h-19a2 2 0 0 1-2-2v-29a2 2 0 0 1 2-2z"
+const FOLD_PATH = "M34.5 8.5v7a2 2 0 0 0 2 2h7"
+
+const Sheet = () => (
+  <>
+    <path d={SHEET_PATH} className={SHEET} />
+    <path d={FOLD_PATH} className="stroke-border-secondary" />
+  </>
+)
+
+/** A line of content on a sheet, on its inner measure of x 25 → 39. */
+const Mark = ({ x = 25, y, w }: { x?: number; y: number; w: number }) => (
+  <rect x={x} y={y} width={w} height={1.5} rx={0.75} className={MARK} />
 )
 
 /** Nothing here yet — a sheet with no content on it. */
 export const IllustrationEmpty = ({ className, ...props }: IllustrationProps) => (
   <Frame className={className} {...props}>
-    <Card className="h-10 w-8" />
+    <Stage>
+      <Sheet />
+    </Stage>
   </Frame>
 )
 
-/** Something to look through — a sheet behind a lens. */
+/** Something to look through — a lens over the corner of a sheet.
+ *
+ *  The lens breaks the corner rather than the side. Sitting against the side it
+ *  reads as the handle of a mug, which is what the previous drawing did. */
 export const IllustrationSearch = ({
   className,
   ...props
 }: IllustrationProps) => (
   <Frame className={className} {...props}>
-    <Card className="h-10 w-8 gap-[3px]">
-      <Bar width="80%" />
-      <Bar width="55%" />
-      <Bar width="35%" />
-    </Card>
-    <div className="-ml-2.5 mt-4 size-4 rounded-full border-[1.5px] border-border-secondary bg-surface" />
+    <Stage>
+      <Sheet />
+      <Mark y={25} w={10} />
+      <Mark y={28.5} w={7.5} />
+      <Mark y={32} w={5} />
+      <circle
+        cx={42.5}
+        cy={34.5}
+        r={5.5}
+        className={cn("fill-surface", SUBJECT)}
+        strokeWidth={1.25}
+      />
+      <path
+        d="M46.5 38.5 49.5 41.5"
+        className={SUBJECT}
+        strokeWidth={1.25}
+      />
+    </Stage>
+  </Frame>
+)
+
+/** Searched, and there was nothing to find — the same lens over a blank sheet.
+ *
+ *  The pair is the point: `IllustrationSearch` has content under the lens and
+ *  means "there is something here to look through"; this one has none, and
+ *  means the looking is already done. */
+export const IllustrationNoResults = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Stage>
+      <Sheet />
+      <circle
+        cx={42.5}
+        cy={34.5}
+        r={5.5}
+        className={cn("fill-surface", SUBJECT)}
+        strokeWidth={1.25}
+      />
+      <path d="M46.5 38.5 49.5 41.5" className={SUBJECT} strokeWidth={1.25} />
+    </Stage>
+  </Frame>
+)
+
+/** Not yours to open — a sheet under a closed clasp.
+ *
+ *  The sheet is blank on purpose: the reader cannot see what is on it, so
+ *  drawing content would promise something the state does not deliver. */
+export const IllustrationLocked = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Stage>
+      <Sheet />
+      <path
+        d="M29.5 25.5v-2.5a2.5 2.5 0 0 1 5 0v2.5"
+        className={SUBJECT}
+        strokeWidth={1.25}
+      />
+      <rect
+        x={27}
+        y={25.5}
+        width={10}
+        height={8}
+        rx={1.5}
+        className={cn("fill-surface", SUBJECT)}
+        strokeWidth={1.25}
+      />
+      <circle cx={32} cy={29.5} r={1} className={MARK} />
+    </Stage>
   </Frame>
 )
 
-/** Something went wrong — the stack knocked out of true. */
+/** Nothing plotted yet — a sheet carrying an axis and no series.
+ *
+ *  Stubs on the baseline rather than a bare axis: an empty pair of lines reads
+ *  as a drawing that failed to finish, while columns flattened to nothing read
+ *  as a chart that ran and found no values. */
+export const IllustrationNoData = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Stage>
+      <Sheet />
+      <path d="M25.5 19.5v14h13" className="stroke-fg-quaternary/60" />
+      <rect x={27.5} y={31.5} width={3} height={2} rx={0.75} className={MARK} />
+      <rect x={31.5} y={31.5} width={3} height={2} rx={0.75} className={MARK} />
+      <rect x={35.5} y={31.5} width={3} height={2} rx={0.75} className={MARK} />
+    </Stage>
+  </Frame>
+)
+
+/** Something went wrong — the sheet torn across, the lower half slipped.
+ *
+ *  Two tilted sheets read as "some documents"; a tear reads as damage without
+ *  stamping a symbol on anything. */
 export const IllustrationError = ({ className, ...props }: IllustrationProps) => (
   <Frame className={className} {...props}>
-    <Card className="h-9 w-7 -rotate-6" />
-    <Card className="-ml-3 h-10 w-8 rotate-[7deg] gap-[3px]">
-      <Bar width="70%" />
-      <Bar width="45%" />
-    </Card>
+    <Stage>
+      <path
+        d="M20.5 10.5a2 2 0 0 1 2-2h12l9 9v11.5L39.5 31 35.5 28.5 31.5 31.5 27.5 28.5 23.5 31 20.5 28.5z"
+        className={SHEET}
+      />
+      <path d={FOLD_PATH} className="stroke-border-secondary" />
+      <Mark y={21} w={10} />
+      <Mark y={24.5} w={6.5} />
+      <path
+        d="M23 30 26 32.5 30 29.5 34 32.5 38 30 42 32.5 46 30v9.5a2 2 0 0 1-2 2H25a2 2 0 0 1-2-2z"
+        className={SHEET}
+      />
+    </Stage>
   </Frame>
 )
 
 /** Somewhere to put a file — a sheet going into a folder.
  *
- *  Two earlier attempts failed for the same reason: an arrow stamped on a
- *  sheet, then a sheet on a plain grey slab, both read as a document with
- *  something next to it. A folder is its own silhouette — tab, body, a sheet
- *  tucked behind the front — so the arrangement carries the meaning and no
- *  symbol has to. It is also the one shape here that is not another sheet,
- *  which keeps it from reading as the error stack. */
+ *  The folder is the one shape here that is not another sheet, which keeps it
+ *  from reading as the torn stack. Its tab and body are a single outline, so
+ *  they meet as one silhouette instead of two rectangles that nearly touch. */
 export const IllustrationUpload = ({
   className,
   ...props
 }: IllustrationProps) => (
   <Frame className={className} {...props}>
-    <div className="relative h-11 w-12">
-      {/* Tucked deep enough that the folder front cuts across it. */}
-      <Card className="absolute inset-x-[13px] top-0 h-8 -rotate-6 gap-[3px]">
-        <Bar width="70%" />
-        <Bar width="45%" />
-      </Card>
-      {/* Laps 1px into the body so their borders read as one outline. */}
-      <div className="absolute bottom-[21px] left-1 h-1.5 w-4 rounded-t-[2px] border-x-[0.5px] border-t-[0.5px] border-border-secondary bg-background-tertiary" />
-      <div className="absolute inset-x-1 bottom-0 h-[22px] rounded-[3px] border-[0.5px] border-border-secondary bg-background-tertiary" />
-    </div>
+    <Stage>
+      {/* One closed silhouette carries every outer edge of the folder — both
+          sides, the tab, the bottom. Drawing the back and the front as two
+          overlapping outlines painted `border-secondary` over itself wherever
+          they shared an edge, and the token is an alpha, so a doubled edge
+          composites to roughly twice the strength and reads as a darker line. */}
+      <path
+        d="M18.5 39.5V22.5a2 2 0 0 1 2-2H26l2.5 3h15a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-23a2 2 0 0 1-2-2z"
+        className={SHEET}
+      />
+      {/* Open at the bottom: the front covers it, and a closed path would put a
+          second stroke across the sheet where the two meet. */}
+      <path d="M27.5 27V7.5a2 2 0 0 1 2-2h8l4 4V27" className={SHEET} />
+      <path
+        d="M37.5 5.5v2a2 2 0 0 0 2 2h2"
+        className="stroke-border-secondary"
+      />
+      <Mark x={31} y={14.5} w={6} />
+      <Mark x={31} y={18} w={4} />
+      {/* The front of the folder: a fill inset to sit *inside* the silhouette's
+          stroke, plus the one edge that is genuinely its own. */}
+      <path
+        d="M19 27h26v12.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 19 39.5z"
+        className="fill-background-tertiary"
+      />
+      <path d="M18.5 26.5h27" className="stroke-border-secondary" />
+    </Stage>
   </Frame>
 )
 
@@ -119,20 +286,24 @@ export const IllustrationSuccess = ({
   ...props
 }: IllustrationProps) => (
   <Frame className={className} {...props}>
-    <Card className="h-10 w-8 items-center justify-center">
-      {/* A check is cheaper as two borders on a rotated box than as a path. */}
-      <span className="mb-0.5 h-3 w-1.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-fg-tertiary" />
-    </Card>
+    <Stage>
+      <Sheet />
+      <path
+        d="M28 29 31.5 32.5 37.5 25.5"
+        className={SUBJECT}
+        strokeWidth={1.75}
+      />
+    </Stage>
   </Frame>
 )
 
 /* -------------------------------------------------------------------------
  * File types
  *
- * A second, smaller family. These sit inline — in an attachment row, a list,
- * a preview slot — so they are a bare sheet at 24×30 rather than a hero on a
- * 64×48 stage. Same grammar: a sheet, and marks on it standing in for whatever
- * the file holds.
+ * A second family on the same grammar, drawn on its own 24×30 grid: these sit
+ * inline — in an attachment row, a list, a preview slot — so they are a bare
+ * sheet rather than a hero on a stage. Same sheet, same fold, same three
+ * levels of ink; only the mark on the sheet changes.
  *
  * Presentational, like Kbd: they render the type you name. Mapping an
  * extension to a type is the consumer's job, since only the consumer knows
@@ -154,74 +325,138 @@ export type IllustrationFileProps = IllustrationProps & {
   type?: FileIllustrationType
 }
 
-/** A block of colour standing in for content rather than a line of it. */
-const Block = ({ className }: { className?: string }) => (
-  <div className={cn("rounded-[1px] bg-background-tertiary", className)} />
+/** 24×30 user units at 24×30 CSS pixels, so a unit is a pixel here too. */
+const FileStage = ({ children }: { children: ReactNode }) => (
+  <svg
+    viewBox="0 0 24 30"
+    fill="none"
+    strokeWidth={1}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={cn("size-full", SHADOW)}
+  >
+    {children}
+  </svg>
 )
 
+const FILE_SHEET_PATH =
+  "M3.5 .5h12l7 7v20a2 2 0 0 1-2 2h-17a2 2 0 0 1-2-2V2.5a2 2 0 0 1 2-2z"
+const FILE_FOLD_PATH = "M15.5 .5v5a2 2 0 0 0 2 2h5"
+
+/** A line of content, on the sheet's inner measure of x 5 → 19. */
+const FileMark = ({
+  x = 6.5,
+  y,
+  w,
+  h = 1.5,
+}: {
+  x?: number
+  y: number
+  w: number
+  h?: number
+}) => <rect x={x} y={y} width={w} height={h} rx={h / 2} className={MARK} />
+
+/** Marks are centred in the space below the fold, y 9 → 27. */
 const marks: Record<FileIllustrationType, ReactNode> = {
   document: (
     <>
-      <Bar width="100%" />
-      <Bar width="100%" />
-      <Bar width="60%" />
+      <FileMark y={14} w={10} />
+      <FileMark y={17.5} w={10} />
+      <FileMark y={21} w={6.5} />
     </>
   ),
   // A horizon and a sun — the smallest arrangement that reads as a picture.
   image: (
-    <div className="relative mt-auto h-3.5 w-full">
-      <Block className="absolute top-0 right-1 size-1.5 rounded-full" />
-      <Block className="absolute inset-x-0 bottom-0 h-2 [clip-path:polygon(0_100%,38%_28%,62%_100%)]" />
-      <Block className="absolute right-0 bottom-0 h-1.5 w-1/2 [clip-path:polygon(0_100%,50%_20%,100%_100%)]" />
-    </div>
+    <>
+      <circle cx={15.5} cy={14} r={1.2} className={MARK} />
+      <path
+        d="M7 20.5l3-3.75 2 2.75 1.75-2L17 20.5z"
+        className={MARK_SOLID}
+      />
+    </>
   ),
   spreadsheet: (
-    <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-[1.5px]">
-      {Array.from({ length: 9 }, (_, i) => (
-        <Block key={i} />
-      ))}
-    </div>
+    <>
+      {[14, 17.5, 21].map((y) =>
+        [6.5, 10.5, 14.5].map((x) => (
+          <rect
+            key={`${x}-${y}`}
+            x={x}
+            y={y}
+            width={3}
+            height={2.5}
+            rx={0.5}
+            className={MARK}
+          />
+        )),
+      )}
+    </>
   ),
   presentation: (
     <>
-      <Block className="h-2.5 w-full" />
-      <Bar width="70%" />
+      <rect x={7} y={13.5} width={10} height={6} rx={1} className={MARK} />
+      <FileMark x={7} y={21.5} w={6} />
     </>
   ),
-  // A play triangle, cut from a block so it keeps the same fill as everything else.
-  video: (
-    <div className="m-auto size-3">
-      <Block className="size-full [clip-path:polygon(22%_10%,90%_50%,22%_90%)]" />
-    </div>
-  ),
+  video: <path d="M10 14.75 15.25 18 10 21.25z" className={MARK_SOLID} />,
   audio: (
-    <div className="m-auto flex h-3.5 items-center gap-[2px]">
-      <Block className="h-1.5 w-[2px]" />
-      <Block className="h-3.5 w-[2px]" />
-      <Block className="h-2.5 w-[2px]" />
-      <Block className="h-3.5 w-[2px]" />
-      <Block className="h-1.5 w-[2px]" />
-    </div>
+    <>
+      {[
+        [6.875, 16.5, 3],
+        [9.125, 15.25, 5.5],
+        [11.375, 14, 8],
+        [13.625, 15.25, 5.5],
+        [15.875, 16.5, 3],
+      ].map(([x, y, h]) => (
+        <rect
+          key={x}
+          x={x}
+          y={y}
+          width={1.25}
+          height={h}
+          rx={0.625}
+          className={MARK}
+        />
+      ))}
+    </>
   ),
+  // Chevrons rather than indented lines: at 24px the indents read as ragged
+  // text, while the brackets say "code" on their own.
   code: (
     <>
-      <Bar width="55%" />
-      <div className="flex w-full pl-1.5">
-        <Bar width="70%" />
-      </div>
-      <div className="flex w-full pl-1.5">
-        <Bar width="50%" />
-      </div>
-      <Bar width="40%" />
+      <path
+        d="M10 14.5 7.5 18 10 21.5"
+        className="stroke-fg-quaternary/60"
+        strokeWidth={1.25}
+      />
+      <path
+        d="M14 14.5 16.5 18 14 21.5"
+        className="stroke-fg-quaternary/60"
+        strokeWidth={1.25}
+      />
     </>
   ),
-  // A stack, since an archive is other files in a coat.
+  // Sheets inside a sheet, since an archive is other files in a coat. Bars in
+  // any arrangement just read as a heavier `document`.
   archive: (
-    <div className="m-auto flex flex-col gap-[2px]">
-      <Block className="h-1.5 w-2.5" />
-      <Block className="h-1.5 w-2.5" />
-      <Block className="h-1.5 w-2.5" />
-    </div>
+    <>
+      <rect
+        x={6.5}
+        y={13.5}
+        width={6}
+        height={7.5}
+        rx={1}
+        className="fill-surface stroke-fg-quaternary/60"
+      />
+      <rect
+        x={10.5}
+        y={16}
+        width={6}
+        height={7.5}
+        rx={1}
+        className="fill-surface stroke-fg-quaternary/60"
+      />
+    </>
   ),
   generic: null,
 }
@@ -233,13 +468,14 @@ export const IllustrationFile = ({
   ...props
 }: IllustrationFileProps) => (
   <div
-    className={cn(
-      "relative flex h-[30px] w-6 shrink-0 flex-col gap-[3px] overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
-      className,
-    )}
+    className={cn("inline-flex h-[30px] w-6 shrink-0", className)}
     aria-hidden
     {...props}
   >
-    {marks[type]}
+    <FileStage>
+      <path d={FILE_SHEET_PATH} className={SHEET} />
+      <path d={FILE_FOLD_PATH} className="stroke-border-secondary" />
+      {marks[type]}
+    </FileStage>
   </div>
 )

package/src/index.ts

@@ -1016,6 +1016,9 @@ export {
 export {
   IllustrationEmpty,
   IllustrationError,
+  IllustrationLocked,
+  IllustrationNoData,
+  IllustrationNoResults,
   IllustrationSuccess,
   IllustrationSearch,
   IllustrationUpload,