@patterninc/pattern-ui 0.0.0-main.20260929.db2f8e8fde0d

package/src/components/FileCard/FileDrawings.tsx

@@ -0,0 +1,708 @@
+import type { ComponentType } from 'react'
+
+import type { FileType } from '../../types/types'
+
+/**
+ * Per-type drawings for `FileIllustration`, traced one-to-one from the Figma `Drawing` frame of
+ * each File Illustration variant. Every drawing shares the frame's 44×54 canvas regardless of what
+ * it draws, so the illustration's layout never shifts between types.
+ *
+ * Figma exports these fills as `#1C1C1C` at 8%/16% opacity. They are re-pointed at the depth tokens
+ * here because those invert to white alpha in dark mode — a baked-in black would leave the drawing
+ * invisible on the dark `base-inverse` surface the card sits on.
+ */
+const DEPTH_8 = 'var(--color-depth-black-8)'
+const DEPTH_16 = 'var(--color-depth-black-16)'
+const DEPTH_48 = 'var(--color-depth-black-48)'
+const DEPTH_4 = 'var(--color-depth-black-4)'
+/** ZIP's inner card is an opaque sheet, not a tint — it must track the card surface, not a black. */
+const SURFACE = 'var(--color-base-inverse)'
+
+type DrawingProps = { className?: string }
+
+/**
+ * Shared 44-wide canvas. `height` defaults to the 54px Drawing frame, but a few drawings whose
+ * glyphs overshoot it (JSON's braces, HTML's angle brackets) declare their exported height so the
+ * artwork stays at 1:1 rather than being scaled down to fit. The illustration positions the canvas
+ * absolutely, so the overshoot costs no layout — and it falls under the badge regardless.
+ *
+ * Decorative: the file type is conveyed by the badge, not by the artwork.
+ */
+function DrawingCanvas({
+  className,
+  height = 54,
+  children,
+}: DrawingProps & { height?: number; children: React.ReactNode }) {
+  return (
+    <svg
+      aria-hidden
+      className={className}
+      fill='none'
+      height={height}
+      viewBox={`0 0 44 ${height}`}
+      width='44'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {children}
+    </svg>
+  )
+}
+
+/** Title rule, figure block, then four ragged prose rows. */
+function PdfDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 1C0 0.447715 0.447715 0 1 0H25C25.5523 0 26 0.447715 26 1C26 1.55228 25.5523 2 25 2H1C0.447716 2 0 1.55228 0 1Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M0 9.2C0 8.0799 0 7.51984 0.217987 7.09202C0.409734 6.71569 0.715695 6.40973 1.09202 6.21799C1.51984 6 2.0799 6 3.2 6H40.8C41.9201 6 42.4802 6 42.908 6.21799C43.2843 6.40973 43.5903 6.71569 43.782 7.09202C44 7.51984 44 8.0799 44 9.2V16.8C44 17.9201 44 18.4802 43.782 18.908C43.5903 19.2843 43.2843 19.5903 42.908 19.782C42.4802 20 41.9201 20 40.8 20H3.2C2.07989 20 1.51984 20 1.09202 19.782C0.715695 19.5903 0.409734 19.2843 0.217987 18.908C0 18.4802 0 17.9201 0 16.8V9.2Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 25C0 24.4477 0.447715 24 1 24H13C13.5523 24 14 24.4477 14 25C14 25.5523 13.5523 26 13 26H1C0.447716 26 0 25.5523 0 25Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M16 25C16 24.4477 16.4477 24 17 24H28C28.5523 24 29 24.4477 29 25C29 25.5523 28.5523 26 28 26H17C16.4477 26 16 25.5523 16 25Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M31 25C31 24.4477 31.4477 24 32 24H43C43.5523 24 44 24.4477 44 25C44 25.5523 43.5523 26 43 26H32C31.4477 26 31 25.5523 31 25Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 29C0 28.4477 0.447715 28 1 28H20C20.5523 28 21 28.4477 21 29C21 29.5523 20.5523 30 20 30H1C0.447715 30 0 29.5523 0 29Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M23 29C23 28.4477 23.4477 28 24 28H43C43.5523 28 44 28.4477 44 29C44 29.5523 43.5523 30 43 30H24C23.4477 30 23 29.5523 23 29Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 33C0 32.4477 0.447715 32 1 32H13C13.5523 32 14 32.4477 14 33C14 33.5523 13.5523 34 13 34H1C0.447716 34 0 33.5523 0 33Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M16 33C16 32.4477 16.4477 32 17 32H28C28.5523 32 29 32.4477 29 33C29 33.5523 28.5523 34 28 34H17C16.4477 34 16 33.5523 16 33Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M31 33C31 32.4477 31.4477 32 32 32H43C43.5523 32 44 32.4477 44 33C44 33.5523 43.5523 34 43 34H32C31.4477 34 31 33.5523 31 33Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 37C0 36.4477 0.447715 36 1 36H11C11.5523 36 12 36.4477 12 37C12 37.5523 11.5523 38 11 38H1C0.447715 38 0 37.5523 0 37Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M14 37C14 36.4477 14.4477 36 15 36H37C37.5523 36 38 36.4477 38 37C38 37.5523 37.5523 38 37 38H15C14.4477 38 14 37.5523 14 37Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** Heading rule, three-line paragraph, then a three-item bulleted list. */
+function DocDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 1C0 0.447715 0.447715 0 1 0H25C25.5523 0 26 0.447715 26 1C26 1.55228 25.5523 2 25 2H1C0.447716 2 0 1.55228 0 1Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M0 7C0 6.44772 0.447715 6 1 6H41C41.5523 6 42 6.44772 42 7C42 7.55228 41.5523 8 41 8H1C0.447716 8 0 7.55228 0 7Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 11C0 10.4477 0.447715 10 1 10H43C43.5523 10 44 10.4477 44 11C44 11.5523 43.5523 12 43 12H0.999999C0.447714 12 0 11.5523 0 11Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 15C0 14.4477 0.447715 14 1 14H29C29.5523 14 30 14.4477 30 15C30 15.5523 29.5523 16 29 16H1C0.447716 16 0 15.5523 0 15Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 21C0 20.4477 0.447715 20 1 20C1.55228 20 2 20.4477 2 21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M5 21C5 20.4477 5.44772 20 6 20H32C32.5523 20 33 20.4477 33 21C33 21.5523 32.5523 22 32 22H6C5.44771 22 5 21.5523 5 21Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 25C0 24.4477 0.447715 24 1 24C1.55228 24 2 24.4477 2 25C2 25.5523 1.55228 26 1 26C0.447715 26 0 25.5523 0 25Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M5 25C5 24.4477 5.44772 24 6 24H28C28.5523 24 29 24.4477 29 25C29 25.5523 28.5523 26 28 26H6C5.44772 26 5 25.5523 5 25Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 29C0 28.4477 0.447715 28 1 28C1.55228 28 2 28.4477 2 29C2 29.5523 1.55228 30 1 30C0.447715 30 0 29.5523 0 29Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M5 29C5 28.4477 5.44772 28 6 28H36C36.5523 28 37 28.4477 37 29C37 29.5523 36.5523 30 36 30H6C5.44772 30 5 29.5523 5 29Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** Emphasised header row over seven ragged data rows of pill cells. */
+function CsvDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 2.5C0 2.03534 0 1.80302 0.0384294 1.60982C0.196243 0.816438 0.816438 0.196243 1.60982 0.0384294C1.80302 0 2.03534 0 2.5 0H10.5C10.9647 0 11.197 0 11.3902 0.0384294C12.1836 0.196243 12.8038 0.816438 12.9616 1.60982C13 1.80302 13 2.03534 13 2.5C13 2.96466 13 3.19698 12.9616 3.39018C12.8038 4.18356 12.1836 4.80376 11.3902 4.96157C11.197 5 10.9647 5 10.5 5H2.5C2.03534 5 1.80302 5 1.60982 4.96157C0.816438 4.80376 0.196243 4.18356 0.0384294 3.39018C0 3.19698 0 2.96466 0 2.5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M15 2.5C15 2.03534 15 1.80302 15.0384 1.60982C15.1962 0.816438 15.8164 0.196243 16.6098 0.0384294C16.803 0 17.0353 0 17.5 0H24.5C24.9647 0 25.197 0 25.3902 0.0384294C26.1836 0.196243 26.8038 0.816438 26.9616 1.60982C27 1.80302 27 2.03534 27 2.5C27 2.96466 27 3.19698 26.9616 3.39018C26.8038 4.18356 26.1836 4.80376 25.3902 4.96157C25.197 5 24.9647 5 24.5 5H17.5C17.0353 5 16.803 5 16.6098 4.96157C15.8164 4.80376 15.1962 4.18356 15.0384 3.39018C15 3.19698 15 2.96466 15 2.5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M29 2.5C29 2.03534 29 1.80302 29.0384 1.60982C29.1962 0.816438 29.8164 0.196243 30.6098 0.0384294C30.803 0 31.0353 0 31.5 0H39.5C39.9647 0 40.197 0 40.3902 0.0384294C41.1836 0.196243 41.8038 0.816438 41.9616 1.60982C42 1.80302 42 2.03534 42 2.5C42 2.96466 42 3.19698 41.9616 3.39018C41.8038 4.18356 41.1836 4.80376 40.3902 4.96157C40.197 5 39.9647 5 39.5 5H31.5C31.0353 5 30.803 5 30.6098 4.96157C29.8164 4.80376 29.1962 4.18356 29.0384 3.39018C29 3.19698 29 2.96466 29 2.5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M0 9.5C0 9.03534 0 8.80302 0.0384294 8.60982C0.196243 7.81644 0.816438 7.19624 1.60982 7.03843C1.80302 7 2.03534 7 2.5 7H9.5C9.96465 7 10.197 7 10.3902 7.03843C11.1836 7.19624 11.8038 7.81644 11.9616 8.60982C12 8.80302 12 9.03534 12 9.5C12 9.96466 12 10.197 11.9616 10.3902C11.8038 11.1836 11.1836 11.8038 10.3902 11.9616C10.197 12 9.96465 12 9.5 12H2.5C2.03534 12 1.80302 12 1.60982 11.9616C0.816438 11.8038 0.196243 11.1836 0.0384294 10.3902C0 10.197 0 9.96466 0 9.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M14 9.5C14 9.03534 14 8.80302 14.0384 8.60982C14.1962 7.81644 14.8164 7.19624 15.6098 7.03843C15.803 7 16.0353 7 16.5 7H21.5C21.9647 7 22.197 7 22.3902 7.03843C23.1836 7.19624 23.8038 7.81644 23.9616 8.60982C24 8.80302 24 9.03534 24 9.5C24 9.96466 24 10.197 23.9616 10.3902C23.8038 11.1836 23.1836 11.8038 22.3902 11.9616C22.197 12 21.9647 12 21.5 12H16.5C16.0353 12 15.803 12 15.6098 11.9616C14.8164 11.8038 14.1962 11.1836 14.0384 10.3902C14 10.197 14 9.96466 14 9.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 16.5C0 16.0353 0 15.803 0.0384294 15.6098C0.196243 14.8164 0.816438 14.1962 1.60982 14.0384C1.80302 14 2.03534 14 2.5 14H7.5C7.96466 14 8.19698 14 8.39018 14.0384C9.18356 14.1962 9.80376 14.8164 9.96157 15.6098C10 15.803 10 16.0353 10 16.5C10 16.9647 10 17.197 9.96157 17.3902C9.80376 18.1836 9.18356 18.8038 8.39018 18.9616C8.19698 19 7.96466 19 7.5 19H2.5C2.03534 19 1.80302 19 1.60982 18.9616C0.816438 18.8038 0.196243 18.1836 0.0384294 17.3902C0 17.197 0 16.9647 0 16.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M12 16.5C12 16.0353 12 15.803 12.0384 15.6098C12.1962 14.8164 12.8164 14.1962 13.6098 14.0384C13.803 14 14.0353 14 14.5 14H22.5C22.9647 14 23.197 14 23.3902 14.0384C24.1836 14.1962 24.8038 14.8164 24.9616 15.6098C25 15.803 25 16.0353 25 16.5C25 16.9647 25 17.197 24.9616 17.3902C24.8038 18.1836 24.1836 18.8038 23.3902 18.9616C23.197 19 22.9647 19 22.5 19H14.5C14.0353 19 13.803 19 13.6098 18.9616C12.8164 18.8038 12.1962 18.1836 12.0384 17.3902C12 17.197 12 16.9647 12 16.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M27 16.5C27 16.0353 27 15.803 27.0384 15.6098C27.1962 14.8164 27.8164 14.1962 28.6098 14.0384C28.803 14 29.0353 14 29.5 14H33.5C33.9647 14 34.197 14 34.3902 14.0384C35.1836 14.1962 35.8038 14.8164 35.9616 15.6098C36 15.803 36 16.0353 36 16.5C36 16.9647 36 17.197 35.9616 17.3902C35.8038 18.1836 35.1836 18.8038 34.3902 18.9616C34.197 19 33.9647 19 33.5 19H29.5C29.0353 19 28.803 19 28.6098 18.9616C27.8164 18.8038 27.1962 18.1836 27.0384 17.3902C27 17.197 27 16.9647 27 16.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 23.5C0 23.0353 0 22.803 0.0384294 22.6098C0.196243 21.8164 0.816438 21.1962 1.60982 21.0384C1.80302 21 2.03534 21 2.5 21H11.5C11.9647 21 12.197 21 12.3902 21.0384C13.1836 21.1962 13.8038 21.8164 13.9616 22.6098C14 22.803 14 23.0353 14 23.5C14 23.9647 14 24.197 13.9616 24.3902C13.8038 25.1836 13.1836 25.8038 12.3902 25.9616C12.197 26 11.9647 26 11.5 26H2.5C2.03534 26 1.80302 26 1.60982 25.9616C0.816438 25.8038 0.196243 25.1836 0.0384294 24.3902C0 24.197 0 23.9647 0 23.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M16 23.5C16 23.0353 16 22.803 16.0384 22.6098C16.1962 21.8164 16.8164 21.1962 17.6098 21.0384C17.803 21 18.0353 21 18.5 21H24.5C24.9647 21 25.197 21 25.3902 21.0384C26.1836 21.1962 26.8038 21.8164 26.9616 22.6098C27 22.803 27 23.0353 27 23.5C27 23.9647 27 24.197 26.9616 24.3902C26.8038 25.1836 26.1836 25.8038 25.3902 25.9616C25.197 26 24.9647 26 24.5 26H18.5C18.0353 26 17.803 26 17.6098 25.9616C16.8164 25.8038 16.1962 25.1836 16.0384 24.3902C16 24.197 16 23.9647 16 23.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M29 23.5C29 23.0353 29 22.803 29.0384 22.6098C29.1962 21.8164 29.8164 21.1962 30.6098 21.0384C30.803 21 31.0353 21 31.5 21H38.5C38.9647 21 39.197 21 39.3902 21.0384C40.1836 21.1962 40.8038 21.8164 40.9616 22.6098C41 22.803 41 23.0353 41 23.5C41 23.9647 41 24.197 40.9616 24.3902C40.8038 25.1836 40.1836 25.8038 39.3902 25.9616C39.197 26 38.9647 26 38.5 26H31.5C31.0353 26 30.803 26 30.6098 25.9616C29.8164 25.8038 29.1962 25.1836 29.0384 24.3902C29 24.197 29 23.9647 29 23.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 30.5C0 30.0353 0 29.803 0.0384294 29.6098C0.196243 28.8164 0.816438 28.1962 1.60982 28.0384C1.80302 28 2.03534 28 2.5 28H6.5C6.96466 28 7.19698 28 7.39018 28.0384C8.18356 28.1962 8.80376 28.8164 8.96157 29.6098C9 29.803 9 30.0353 9 30.5C9 30.9647 9 31.197 8.96157 31.3902C8.80376 32.1836 8.18356 32.8038 7.39018 32.9616C7.19698 33 6.96466 33 6.5 33H2.5C2.03534 33 1.80302 33 1.60982 32.9616C0.816438 32.8038 0.196243 32.1836 0.0384294 31.3902C0 31.197 0 30.9647 0 30.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M11 30.5C11 30.0353 11 29.803 11.0384 29.6098C11.1962 28.8164 11.8164 28.1962 12.6098 28.0384C12.803 28 13.0353 28 13.5 28H20.5C20.9647 28 21.197 28 21.3902 28.0384C22.1836 28.1962 22.8038 28.8164 22.9616 29.6098C23 29.803 23 30.0353 23 30.5C23 30.9647 23 31.197 22.9616 31.3902C22.8038 32.1836 22.1836 32.8038 21.3902 32.9616C21.197 33 20.9647 33 20.5 33H13.5C13.0353 33 12.803 33 12.6098 32.9616C11.8164 32.8038 11.1962 32.1836 11.0384 31.3902C11 31.197 11 30.9647 11 30.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M25 30.5C25 30.0353 25 29.803 25.0384 29.6098C25.1962 28.8164 25.8164 28.1962 26.6098 28.0384C26.803 28 27.0353 28 27.5 28H30.5C30.9647 28 31.197 28 31.3902 28.0384C32.1836 28.1962 32.8038 28.8164 32.9616 29.6098C33 29.803 33 30.0353 33 30.5C33 30.9647 33 31.197 32.9616 31.3902C32.8038 32.1836 32.1836 32.8038 31.3902 32.9616C31.197 33 30.9647 33 30.5 33H27.5C27.0353 33 26.803 33 26.6098 32.9616C25.8164 32.8038 25.1962 32.1836 25.0384 31.3902C25 31.197 25 30.9647 25 30.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 37.5C0 37.0353 0 36.803 0.0384294 36.6098C0.196243 35.8164 0.816438 35.1962 1.60982 35.0384C1.80302 35 2.03534 35 2.5 35H10.5C10.9647 35 11.197 35 11.3902 35.0384C12.1836 35.1962 12.8038 35.8164 12.9616 36.6098C13 36.803 13 37.0353 13 37.5C13 37.9647 13 38.197 12.9616 38.3902C12.8038 39.1836 12.1836 39.8038 11.3902 39.9616C11.197 40 10.9647 40 10.5 40H2.5C2.03534 40 1.80302 40 1.60982 39.9616C0.816438 39.8038 0.196243 39.1836 0.0384294 38.3902C0 38.197 0 37.9647 0 37.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M15 37.5C15 37.0353 15 36.803 15.0384 36.6098C15.1962 35.8164 15.8164 35.1962 16.6098 35.0384C16.803 35 17.0353 35 17.5 35H22.5C22.9647 35 23.197 35 23.3902 35.0384C24.1836 35.1962 24.8038 35.8164 24.9616 36.6098C25 36.803 25 37.0353 25 37.5C25 37.9647 25 38.197 24.9616 38.3902C24.8038 39.1836 24.1836 39.8038 23.3902 39.9616C23.197 40 22.9647 40 22.5 40H17.5C17.0353 40 16.803 40 16.6098 39.9616C15.8164 39.8038 15.1962 39.1836 15.0384 38.3902C15 38.197 15 37.9647 15 37.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M27 37.5C27 37.0353 27 36.803 27.0384 36.6098C27.1962 35.8164 27.8164 35.1962 28.6098 35.0384C28.803 35 29.0353 35 29.5 35H37.5C37.9647 35 38.197 35 38.3902 35.0384C39.1836 35.1962 39.8038 35.8164 39.9616 36.6098C40 36.803 40 37.0353 40 37.5C40 37.9647 40 38.197 39.9616 38.3902C39.8038 39.1836 39.1836 39.8038 38.3902 39.9616C38.197 40 37.9647 40 37.5 40H29.5C29.0353 40 28.803 40 28.6098 39.9616C27.8164 39.8038 27.1962 39.1836 27.0384 38.3902C27 38.197 27 37.9647 27 37.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 44.5C0 44.0353 0 43.803 0.0384294 43.6098C0.196243 42.8164 0.816438 42.1962 1.60982 42.0384C1.80302 42 2.03534 42 2.5 42H8.5C8.96465 42 9.19698 42 9.39018 42.0384C10.1836 42.1962 10.8038 42.8164 10.9616 43.6098C11 43.803 11 44.0353 11 44.5C11 44.9647 11 45.197 10.9616 45.3902C10.8038 46.1836 10.1836 46.8038 9.39018 46.9616C9.19698 47 8.96465 47 8.5 47H2.5C2.03534 47 1.80302 47 1.60982 46.9616C0.816438 46.8038 0.196243 46.1836 0.0384294 45.3902C0 45.197 0 44.9647 0 44.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M13 44.5C13 44.0353 13 43.803 13.0384 43.6098C13.1962 42.8164 13.8164 42.1962 14.6098 42.0384C14.803 42 15.0353 42 15.5 42H24.5C24.9647 42 25.197 42 25.3902 42.0384C26.1836 42.1962 26.8038 42.8164 26.9616 43.6098C27 43.803 27 44.0353 27 44.5C27 44.9647 27 45.197 26.9616 45.3902C26.8038 46.1836 26.1836 46.8038 25.3902 46.9616C25.197 47 24.9647 47 24.5 47H15.5C15.0353 47 14.803 47 14.6098 46.9616C13.8164 46.8038 13.1962 46.1836 13.0384 45.3902C13 45.197 13 44.9647 13 44.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M29 44.5C29 44.0353 29 43.803 29.0384 43.6098C29.1962 42.8164 29.8164 42.1962 30.6098 42.0384C30.803 42 31.0353 42 31.5 42H35.5C35.9647 42 36.197 42 36.3902 42.0384C37.1836 42.1962 37.8038 42.8164 37.9616 43.6098C38 43.803 38 44.0353 38 44.5C38 44.9647 38 45.197 37.9616 45.3902C37.8038 46.1836 37.1836 46.8038 36.3902 46.9616C36.197 47 35.9647 47 35.5 47H31.5C31.0353 47 30.803 47 30.6098 46.9616C29.8164 46.8038 29.1962 46.1836 29.0384 45.3902C29 45.197 29 44.9647 29 44.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 51.5C0 51.0353 0 50.803 0.0384294 50.6098C0.196243 49.8164 0.816438 49.1962 1.60982 49.0384C1.80302 49 2.03534 49 2.5 49H7.5C7.96466 49 8.19698 49 8.39018 49.0384C9.18356 49.1962 9.80376 49.8164 9.96157 50.6098C10 50.803 10 51.0353 10 51.5C10 51.9647 10 52.197 9.96157 52.3902C9.80376 53.1836 9.18356 53.8038 8.39018 53.9616C8.19698 54 7.96466 54 7.5 54H2.5C2.03534 54 1.80302 54 1.60982 53.9616C0.816438 53.8038 0.196243 53.1836 0.0384294 52.3902C0 52.197 0 51.9647 0 51.5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M12 51.5C12 51.0353 12 50.803 12.0384 50.6098C12.1962 49.8164 12.8164 49.1962 13.6098 49.0384C13.803 49 14.0353 49 14.5 49H17.5C17.9647 49 18.197 49 18.3902 49.0384C19.1836 49.1962 19.8038 49.8164 19.9616 50.6098C20 50.803 20 51.0353 20 51.5C20 51.9647 20 52.197 19.9616 52.3902C19.8038 53.1836 19.1836 53.8038 18.3902 53.9616C18.197 54 17.9647 54 17.5 54H14.5C14.0353 54 13.803 54 13.6098 53.9616C12.8164 53.8038 12.1962 53.1836 12.0384 52.3902C12 52.197 12 51.9647 12 51.5Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/**
+ * Uniform 4×8 cell grid — the spreadsheet counterpart to CSV's ragged rows. Generated rather than
+ * traced: the Figma frame is a true grid (9.5×5 cells on a 2px gutter), so a loop is the exact
+ * description of it, not an approximation.
+ */
+const SHEET_COLUMNS = [0, 11.5, 23, 34.5]
+const SHEET_ROWS = [0, 7, 14, 21, 28, 35, 42, 49]
+
+function SheetDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      {SHEET_ROWS.map((y) =>
+        SHEET_COLUMNS.map((x) => (
+          <rect
+            key={`${x}-${y}`}
+            fill={y === 0 ? DEPTH_16 : DEPTH_8}
+            height={5}
+            rx={2}
+            width={9.5}
+            x={x}
+            y={y}
+          />
+        )),
+      )}
+    </DrawingCanvas>
+  )
+}
+
+/** Hash-marked headings, prose lines, and an indented code block. */
+function MdDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M1.285 3.55L1.885 0H2.44L1.84 3.55H1.285ZM0 2.68L0.08 2.14H2.485L2.41 2.68H0ZM0.24 3.55L0.845 0H1.385L0.8 3.55H0.24ZM0.195 1.435L0.27 0.89H2.68L2.6 1.435H0.195Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M4.67999 1.77502C4.67999 1.22274 5.12771 0.775024 5.67999 0.775024H27.68C28.2323 0.775024 28.68 1.22274 28.68 1.77502C28.68 2.32731 28.2323 2.77502 27.68 2.77502H5.67999C5.12771 2.77502 4.67999 2.32731 4.67999 1.77502Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M0 8.55005C0 7.99776 0.447715 7.55005 1 7.55005H43C43.5523 7.55005 44 7.99776 44 8.55005C44 9.10233 43.5523 9.55005 43 9.55005H0.999999C0.447714 9.55005 0 9.10233 0 8.55005Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 12.55C0 11.9978 0.447715 11.55 1 11.55H33C33.5523 11.55 34 11.9978 34 12.55C34 13.1023 33.5523 13.55 33 13.55H1C0.447716 13.55 0 13.1023 0 12.55Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 20.75C0 19.6299 0 19.0699 0.217987 18.6421C0.409734 18.2657 0.715695 17.9598 1.09202 17.768C1.51984 17.55 2.0799 17.55 3.2 17.55H40.8C41.9201 17.55 42.4802 17.55 42.908 17.768C43.2843 17.9598 43.5903 18.2657 43.782 18.6421C44 19.0699 44 19.6299 44 20.75V24.35C44 25.4702 44 26.0302 43.782 26.458C43.5903 26.8344 43.2843 27.1403 42.908 27.3321C42.4802 27.55 41.9201 27.55 40.8 27.55H3.2C2.07989 27.55 1.51984 27.55 1.09202 27.3321C0.715695 27.1403 0.409734 26.8344 0.217987 26.458C0 26.0302 0 25.4702 0 24.35V20.75Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M4 22.55C4 21.9978 4.44772 21.55 5 21.55H25C25.5523 21.55 26 21.9978 26 22.55C26 23.1023 25.5523 23.55 25 23.55H5C4.44772 23.55 4 23.1023 4 22.55Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M4.28305 35.1L4.88305 31.55H5.43805L4.83805 35.1H4.28305ZM2.99805 34.23L3.07805 33.69H5.48305L5.40805 34.23H2.99805ZM3.23805 35.1L3.84305 31.55H4.38305L3.79805 35.1H3.23805ZM3.19305 32.985L3.26805 32.44H5.67805L5.59805 32.985H3.19305Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M1.285 35.1L1.885 31.55H2.44L1.84 35.1H1.285ZM0 34.23L0.08 33.69H2.485L2.41 34.23H0ZM0.24 35.1L0.845 31.55H1.385L0.8 35.1H0.24ZM0.195 32.985L0.27 32.44H2.68L2.6 32.985H0.195Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M7.67804 33.3251C7.67804 32.7728 8.12575 32.3251 8.67804 32.3251H24.678C25.2303 32.3251 25.678 32.7728 25.678 33.3251C25.678 33.8774 25.2303 34.3251 24.678 34.3251H8.67804C8.12576 34.3251 7.67804 33.8774 7.67804 33.3251Z'
+        fill={DEPTH_16}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** Ten unformatted, ragged full-width lines — plain text with no structure to show. */
+function TxtDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 1C0 0.447715 0.447715 0 1 0H39C39.5523 0 40 0.447715 40 1C40 1.55228 39.5523 2 39 2H0.999999C0.447714 2 0 1.55228 0 1Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 5C0 4.44772 0.447715 4 1 4H43C43.5523 4 44 4.44772 44 5C44 5.55228 43.5523 6 43 6H0.999999C0.447714 6 0 5.55228 0 5Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 9C0 8.44772 0.447715 8 1 8H27C27.5523 8 28 8.44772 28 9C28 9.55228 27.5523 10 27 10H1C0.447715 10 0 9.55228 0 9Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 13C0 12.4477 0.447715 12 1 12H43C43.5523 12 44 12.4477 44 13C44 13.5523 43.5523 14 43 14H0.999999C0.447714 14 0 13.5523 0 13Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 17C0 16.4477 0.447715 16 1 16H35C35.5523 16 36 16.4477 36 17C36 17.5523 35.5523 18 35 18H1C0.447716 18 0 17.5523 0 17Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 21C0 20.4477 0.447715 20 1 20H43C43.5523 20 44 20.4477 44 21C44 21.5523 43.5523 22 43 22H0.999999C0.447714 22 0 21.5523 0 21Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 25C0 24.4477 0.447715 24 1 24H31C31.5523 24 32 24.4477 32 25C32 25.5523 31.5523 26 31 26H1C0.447715 26 0 25.5523 0 25Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 29C0 28.4477 0.447715 28 1 28H43C43.5523 28 44 28.4477 44 29C44 29.5523 43.5523 30 43 30H0.999999C0.447714 30 0 29.5523 0 29Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 33C0 32.4477 0.447715 32 1 32H35C35.5523 32 36 32.4477 36 33C36 33.5523 35.5523 34 35 34H1C0.447716 34 0 33.5523 0 33Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0 37C0 36.4477 0.447715 36 1 36H19C19.5523 36 20 36.4477 20 37C20 37.5523 19.5523 38 19 38H1C0.447715 38 0 37.5523 0 37Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** Brace-wrapped key/value pairs — keys emphasised, punctuation lightest, values quietest. */
+function JsonDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className} height={55}>
+      <path
+        d='M2.07 5.625C1.75333 5.625 1.50667 5.53667 1.33 5.36C1.15667 5.18333 1.07 4.95667 1.07 4.68V4.265C1.07 4.125 1.05333 4.015 1.02 3.935C0.99 3.855 0.941667 3.79833 0.875 3.765C0.808333 3.72833 0.721667 3.71 0.615 3.71V3.12C0.721667 3.12 0.808333 3.10333 0.875 3.07C0.941667 3.03667 0.99 2.98 1.02 2.9C1.05333 2.81667 1.07 2.705 1.07 2.565V2.15C1.07 1.87333 1.15667 1.64833 1.33 1.475C1.50667 1.29833 1.75333 1.21 2.07 1.21H2.385V1.855C2.175 1.845 2.02167 1.87333 1.925 1.94C1.83167 2.00667 1.785 2.11667 1.785 2.27V2.615C1.785 2.85167 1.72667 3.03667 1.61 3.17C1.49667 3.30333 1.36167 3.38 1.205 3.4V3.43C1.36167 3.44667 1.49667 3.52333 1.61 3.66C1.72667 3.79333 1.785 3.97833 1.785 4.215V4.565C1.785 4.71833 1.83167 4.83167 1.925 4.905C2.02167 4.975 2.175 5.00667 2.385 5V5.625H2.07Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M6 10C6 9.44772 6.44772 9 7 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H7C6.44772 11 6 10.5523 6 10Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M19.2528 11V10.512H19.7488V11H19.2528ZM19.2528 9.456V8.968H19.7488V9.456H19.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M23 10C23 9.44772 23.4477 9 24 9H36C36.5523 9 37 9.44772 37 10C37 10.5523 36.5523 11 36 11H24C23.4477 11 23 10.5523 23 10Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 14C6 13.4477 6.44772 13 7 13H13C13.5523 13 14 13.4477 14 14C14 14.5523 13.5523 15 13 15H7C6.44772 15 6 14.5523 6 14Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M17.2528 15V14.512H17.7488V15H17.2528ZM17.2528 13.456V12.968H17.7488V13.456H17.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M21 14C21 13.4477 21.4477 13 22 13H31C31.5523 13 32 13.4477 32 14C32 14.5523 31.5523 15 31 15H22C21.4477 15 21 14.5523 21 14Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 18C6 17.4477 6.44772 17 7 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19H7C6.44772 19 6 18.5523 6 18Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M21.2528 19V18.512H21.7488V19H21.2528ZM21.2528 17.456V16.968H21.7488V17.456H21.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M25 18C25 17.4477 25.4477 17 26 17H33C33.5523 17 34 17.4477 34 18C34 18.5523 33.5523 19 33 19H26C25.4477 19 25 18.5523 25 18Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 22C6 21.4477 6.44772 21 7 21H14C14.5523 21 15 21.4477 15 22C15 22.5523 14.5523 23 14 23H7C6.44772 23 6 22.5523 6 22Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M18.2528 23V22.512H18.7488V23H18.2528ZM18.2528 21.456V20.968H18.7488V21.456H18.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M22 22C22 21.4477 22.4477 21 23 21H36C36.5523 21 37 21.4477 37 22C37 22.5523 36.5523 23 36 23H23C22.4477 23 22 22.5523 22 22Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 26C6 25.4477 6.44772 25 7 25H16C16.5523 25 17 25.4477 17 26C17 26.5523 16.5523 27 16 27H7C6.44771 27 6 26.5523 6 26Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M20.2528 27V26.512H20.7488V27H20.2528ZM20.2528 25.456V24.968H20.7488V25.456H20.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M24 26C24 25.4477 24.4477 25 25 25H33C33.5523 25 34 25.4477 34 26C34 26.5523 33.5523 27 33 27H25C24.4477 27 24 26.5523 24 26Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 30C6 29.4477 6.44772 29 7 29H13C13.5523 29 14 29.4477 14 30C14 30.5523 13.5523 31 13 31H7C6.44772 31 6 30.5523 6 30Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M17.2528 31V30.512H17.7488V31H17.2528ZM17.2528 29.456V28.968H17.7488V29.456H17.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M21 30C21 29.4477 21.4477 29 22 29H33C33.5523 29 34 29.4477 34 30C34 30.5523 33.5523 31 33 31H22C21.4477 31 21 30.5523 21 30Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 34C6 33.4477 6.44772 33 7 33H15C15.5523 33 16 33.4477 16 34C16 34.5523 15.5523 35 15 35H7C6.44772 35 6 34.5523 6 34Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M19.2528 35V34.512H19.7488V35H19.2528ZM19.2528 33.456V32.968H19.7488V33.456H19.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M23 34C23 33.4477 23.4477 33 24 33H36C36.5523 33 37 33.4477 37 34C37 34.5523 36.5523 35 36 35H24C23.4477 35 23 34.5523 23 34Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 38C6 37.4477 6.44772 37 7 37H13C13.5523 37 14 37.4477 14 38C14 38.5523 13.5523 39 13 39H7C6.44772 39 6 38.5523 6 38Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M17.2528 39V38.512H17.7488V39H17.2528ZM17.2528 37.456V36.968H17.7488V37.456H17.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M21 38C21 37.4477 21.4477 37 22 37H31C31.5523 37 32 37.4477 32 38C32 38.5523 31.5523 39 31 39H22C21.4477 39 21 38.5523 21 38Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 42C6 41.4477 6.44772 41 7 41H17C17.5523 41 18 41.4477 18 42C18 42.5523 17.5523 43 17 43H7C6.44772 43 6 42.5523 6 42Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M21.2528 43V42.512H21.7488V43H21.2528ZM21.2528 41.456V40.968H21.7488V41.456H21.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M25 42C25 41.4477 25.4477 41 26 41H33C33.5523 41 34 41.4477 34 42C34 42.5523 33.5523 43 33 43H26C25.4477 43 25 42.5523 25 42Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M6 46C6 45.4477 6.44772 45 7 45H14C14.5523 45 15 45.4477 15 46C15 46.5523 14.5523 47 14 47H7C6.44772 47 6 46.5523 6 46Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M18.2528 47V46.512H18.7488V47H18.2528ZM18.2528 45.456V44.968H18.7488V45.456H18.2528Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M22 46C22 45.4477 22.4477 45 23 45H36C36.5523 45 37 45.4477 37 46C37 46.5523 36.5523 47 36 47H23C22.4477 47 22 46.5523 22 46Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M0.93 54.625H0.615V54C0.825 54.0067 0.976667 53.975 1.07 53.905C1.16667 53.8317 1.215 53.7183 1.215 53.565V53.215C1.215 52.9783 1.27167 52.7933 1.385 52.66C1.50167 52.5233 1.63833 52.4467 1.795 52.43V52.4C1.64167 52.38 1.50667 52.3033 1.39 52.17C1.27333 52.0367 1.215 51.8517 1.215 51.615V51.27C1.215 51.1167 1.16667 51.0067 1.07 50.94C0.976667 50.8733 0.825 50.845 0.615 50.855V50.21H0.93C1.25 50.21 1.49667 50.2983 1.67 50.475C1.84333 50.6483 1.93 50.8733 1.93 51.15V51.565C1.93 51.705 1.945 51.8167 1.975 51.9C2.00833 51.98 2.05833 52.0367 2.125 52.07C2.19167 52.1033 2.27833 52.12 2.385 52.12V52.71C2.27833 52.71 2.19167 52.7283 2.125 52.765C2.05833 52.7983 2.00833 52.855 1.975 52.935C1.945 53.015 1.93 53.125 1.93 53.265V53.68C1.93 53.9567 1.84333 54.1833 1.67 54.36C1.49667 54.5367 1.25 54.625 0.93 54.625Z'
+        fill={DEPTH_48}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** Nested angle-bracket tags with indented text content. */
+function HtmlDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className} height={56}>
+      <path
+        d='M2.65 4.905L0.35 3.92V3.165L2.65 2.18V2.805L0.66 3.655V3.43L2.65 4.28V4.905Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M4 3.5C4 2.94772 4.44772 2.5 5 2.5H15C15.5523 2.5 16 2.94772 16 3.5C16 4.05228 15.5523 4.5 15 4.5H5C4.44772 4.5 4 4.05228 4 3.5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M17.35 4.905V4.28L19.34 3.43V3.655L17.35 2.805V2.18L19.65 3.165V3.92L17.35 4.905Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M7.65 10.405L5.35 9.42V8.665L7.65 7.68V8.305L5.66 9.155V8.93L7.65 9.78V10.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M9 9C9 8.44772 9.44772 8 10 8H17C17.5523 8 18 8.44772 18 9C18 9.55228 17.5523 10 17 10H10C9.44772 10 9 9.55228 9 9Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M19.35 10.405V9.78L21.34 8.93V9.155L19.35 8.305V7.68L21.65 8.665V9.42L19.35 10.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M11 15C11 14.4477 11.4477 14 12 14H30C30.5523 14 31 14.4477 31 15C31 15.5523 30.5523 16 30 16H12C11.4477 16 11 15.5523 11 15Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M11 19C11 18.4477 11.4477 18 12 18H30C30.5523 18 31 18.4477 31 19C31 19.5523 30.5523 20 30 20H12C11.4477 20 11 19.5523 11 19Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M7.65 26.405L5.35 25.42V24.665L7.65 23.68V24.305L5.66 25.155V24.93L7.65 25.78V26.405ZM8.42805 27.05L9.92805 22.75H10.568L9.06805 27.05H8.42805Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M12 25C12 24.4477 12.4477 24 13 24H20C20.5523 24 21 24.4477 21 25C21 25.5523 20.5523 26 20 26H13C12.4477 26 12 25.5523 12 25Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M22.35 26.405V25.78L24.34 24.93V25.155L22.35 24.305V23.68L24.65 24.665V25.42L22.35 26.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M7.65 34.405L5.35 33.42V32.665L7.65 31.68V32.305L5.66 33.155V32.93L7.65 33.78V34.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M9 33C9 32.4477 9.44772 32 10 32H16C16.5523 32 17 32.4477 17 33C17 33.5523 16.5523 34 16 34H10C9.44772 34 9 33.5523 9 33Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M18.35 34.405V33.78L20.34 32.93V33.155L18.35 32.305V31.68L20.65 32.665V33.42L18.35 34.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M11 39C11 38.4477 11.4477 38 12 38H28C28.5523 38 29 38.4477 29 39C29 39.5523 28.5523 40 28 40H12C11.4477 40 11 39.5523 11 39Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M7.65 47.405L5.35 46.42V45.665L7.65 44.68V45.305L5.66 46.155V45.93L7.65 46.78V47.405ZM8.42805 48.05L9.92805 43.75H10.568L9.06805 48.05H8.42805Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M12 46C12 45.4477 12.4477 45 13 45H19C19.5523 45 20 45.4477 20 46C20 46.5523 19.5523 47 19 47H13C12.4477 47 12 46.5523 12 46Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M21.35 47.405V46.78L23.34 45.93V46.155L21.35 45.305V44.68L23.65 45.665V46.42L21.35 47.405Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M2.65 53.905L0.35 52.92V52.165L2.65 51.18V51.805L0.66 52.655V52.43L2.65 53.28V53.905ZM3.42805 54.55L4.92805 50.25H5.56805L4.06805 54.55H3.42805Z'
+        fill={DEPTH_48}
+      />
+      <path
+        d='M7 52.5C7 51.9477 7.44772 51.5 8 51.5H18C18.5523 51.5 19 51.9477 19 52.5C19 53.0523 18.5523 53.5 18 53.5H8C7.44772 53.5 7 53.0523 7 52.5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M20.35 53.905V53.28L22.34 52.43V52.655L20.35 51.805V51.18L22.65 52.165V52.92L20.35 53.905Z'
+        fill={DEPTH_48}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** An opaque inner sheet peeking out of the archive, carrying a heading and file rows. */
+function ZipDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 9.6C0 6.23969 0 4.55953 0.653961 3.27606C1.2292 2.14708 2.14708 1.2292 3.27606 0.653961C4.55953 0 6.23969 0 9.6 0H34.4C37.7603 0 39.4405 0 40.7239 0.653961C41.8529 1.2292 42.7708 2.14708 43.346 3.27606C44 4.55953 44 6.23969 44 9.6V28.4C44 31.7603 44 33.4405 43.346 34.7239C42.7708 35.8529 41.8529 36.7708 40.7239 37.346C39.4405 38 37.7603 38 34.4 38H9.6C6.23968 38 4.55953 38 3.27606 37.346C2.14708 36.7708 1.2292 35.8529 0.653961 34.7239C0 33.4405 0 31.7603 0 28.4V9.6Z'
+        fill={SURFACE}
+      />
+      <path
+        d='M9.59961 0.5H34.4004C36.0884 0.5 37.3245 0.50041 38.2998 0.580078C39.2694 0.659297 39.9376 0.814529 40.4971 1.09961C41.5318 1.62689 42.3731 2.46816 42.9004 3.50293C43.1855 4.06243 43.3407 4.7306 43.4199 5.7002C43.4996 6.67551 43.5 7.91156 43.5 9.59961V28.4004C43.5 30.0884 43.4996 31.3245 43.4199 32.2998C43.3407 33.2694 43.1855 33.9376 42.9004 34.4971C42.3731 35.5318 41.5318 36.3731 40.4971 36.9004C39.9376 37.1855 39.2694 37.3407 38.2998 37.4199C37.3245 37.4996 36.0884 37.5 34.4004 37.5H9.59961C7.91156 37.5 6.67551 37.4996 5.7002 37.4199C4.7306 37.3407 4.06243 37.1855 3.50293 36.9004C2.46816 36.3731 1.62689 35.5318 1.09961 34.4971C0.814529 33.9376 0.659297 33.2694 0.580078 32.2998C0.50041 31.3245 0.5 30.0884 0.5 28.4004V9.59961C0.5 7.91155 0.50041 6.67551 0.580078 5.7002C0.659297 4.7306 0.814529 4.06243 1.09961 3.50293C1.62689 2.46816 2.46816 1.62689 3.50293 1.09961C4.06243 0.814529 4.7306 0.659297 5.7002 0.580078C6.67551 0.50041 7.91156 0.5 9.59961 0.5Z'
+        stroke={DEPTH_4}
+      />
+      <path
+        d='M10 11C10 10.4477 10.4477 10 11 10H33C33.5523 10 34 10.4477 34 11C34 11.5523 33.5523 12 33 12H11C10.4477 12 10 11.5523 10 11Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M15 15C15 14.4477 15.4477 14 16 14H28C28.5523 14 29 14.4477 29 15C29 15.5523 28.5523 16 28 16H16C15.4477 16 15 15.5523 15 15Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M11 19C11 18.4477 11.4477 18 12 18H32C32.5523 18 33 18.4477 33 19C33 19.5523 32.5523 20 32 20H12C11.4477 20 11 19.5523 11 19Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M9 23C9 22.4477 9.44772 22 10 22H34C34.5523 22 35 22.4477 35 23C35 23.5523 34.5523 24 34 24H10C9.44772 24 9 23.5523 9 23Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M13 27C13 26.4477 13.4477 26 14 26H30C30.5523 26 31 26.4477 31 27C31 27.5523 30.5523 28 30 28H14C13.4477 28 13 27.5523 13 27Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** A framed photo plate with a faceted solid, over a single caption rule. */
+function ImgDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className}>
+      <path
+        d='M0 9.6C0 6.23968 0 4.55953 0.653961 3.27606C1.2292 2.14708 2.14708 1.2292 3.27606 0.653961C4.55953 0 6.23969 0 9.6 0H34.4C37.7603 0 39.4405 0 40.7239 0.653961C41.8529 1.2292 42.7708 2.14708 43.346 3.27606C44 4.55953 44 6.23969 44 9.6V34.4C44 37.7603 44 39.4405 43.346 40.7239C42.7708 41.8529 41.8529 42.7708 40.7239 43.346C39.4405 44 37.7603 44 34.4 44H9.6C6.23968 44 4.55953 44 3.27606 43.346C2.14708 42.7708 1.2292 41.8529 0.653961 40.7239C0 39.4405 0 37.7603 0 34.4V9.6Z'
+        fill={DEPTH_4}
+      />
+      <path d='M22 10L34 16L22 22L10 16L22 10Z' fill={DEPTH_4} />
+      <path d='M10 16L22 22V34L10 28V16Z' fill={DEPTH_8} />
+      <path d='M34 16V28L22 34V22L34 16Z' fill={DEPTH_16} />
+      <path
+        d='M0 51C0 50.4477 0.447715 50 1 50H25C25.5523 50 26 50.4477 26 51C26 51.5523 25.5523 52 25 52H1C0.447716 52 0 51.5523 0 51Z'
+        fill={DEPTH_8}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/** A titled slide with a media block, and the next slide starting below it. */
+function PptDrawing({ className }: DrawingProps) {
+  return (
+    <DrawingCanvas className={className} height={60}>
+      <path
+        d='M9.59961 0.5H34.4004C36.0884 0.5 37.3245 0.50041 38.2998 0.580078C39.2694 0.659297 39.9376 0.814529 40.4971 1.09961C41.5318 1.62689 42.3731 2.46816 42.9004 3.50293C43.1855 4.06243 43.3407 4.7306 43.4199 5.7002C43.4996 6.67551 43.5 7.91156 43.5 9.59961V14.4004C43.5 16.0884 43.4996 17.3245 43.4199 18.2998C43.3407 19.2694 43.1855 19.9376 42.9004 20.4971C42.3731 21.5318 41.5318 22.3731 40.4971 22.9004C39.9376 23.1855 39.2694 23.3407 38.2998 23.4199C37.3245 23.4996 36.0884 23.5 34.4004 23.5H9.59961C7.91156 23.5 6.67551 23.4996 5.7002 23.4199C4.7306 23.3407 4.06243 23.1855 3.50293 22.9004C2.46816 22.3731 1.62689 21.5318 1.09961 20.4971C0.814529 19.9376 0.659297 19.2694 0.580078 18.2998C0.50041 17.3245 0.5 16.0884 0.5 14.4004V9.59961C0.5 7.91156 0.50041 6.67551 0.580078 5.7002C0.659297 4.7306 0.814529 4.06243 1.09961 3.50293C1.62689 2.46816 2.46816 1.62689 3.50293 1.09961C4.06243 0.814529 4.7306 0.659297 5.7002 0.580078C6.67551 0.50041 7.91156 0.5 9.59961 0.5Z'
+        stroke={DEPTH_4}
+      />
+      <path
+        d='M4 5C4 4.44772 4.44772 4 5 4H23C23.5523 4 24 4.44772 24 5C24 5.55228 23.5523 6 23 6H5C4.44772 6 4 5.55228 4 5Z'
+        fill={DEPTH_16}
+      />
+      <path
+        d='M4 9C4 8.44772 4.44772 8 5 8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H5C4.44772 10 4 9.55228 4 9Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13C20 13.5523 19.5523 14 19 14H5C4.44772 14 4 13.5523 4 13Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M26 7.2C26 6.0799 26 5.51984 26.218 5.09202C26.4097 4.71569 26.7157 4.40973 27.092 4.21799C27.5198 4 28.0799 4 29.2 4H36.8C37.9201 4 38.4802 4 38.908 4.21799C39.2843 4.40973 39.5903 4.71569 39.782 5.09202C40 5.51984 40 6.0799 40 7.2V16.8C40 17.9201 40 18.4802 39.782 18.908C39.5903 19.2843 39.2843 19.5903 38.908 19.782C38.4802 20 37.9201 20 36.8 20H29.2C28.0799 20 27.5198 20 27.092 19.782C26.7157 19.5903 26.4097 19.2843 26.218 18.908C26 18.4802 26 17.9201 26 16.8V7.2Z'
+        fill={DEPTH_8}
+      />
+      <path
+        d='M9.59961 28.5H34.4004C36.0884 28.5 37.3245 28.5004 38.2998 28.5801C39.2694 28.6593 39.9376 28.8145 40.4971 29.0996C41.5318 29.6269 42.3731 30.4682 42.9004 31.5029C43.1855 32.0624 43.3407 32.7306 43.4199 33.7002C43.4996 34.6755 43.5 35.9116 43.5 37.5996V54.4004C43.5 56.0884 43.4996 57.3245 43.4199 58.2998C43.3407 59.2694 43.1855 59.9376 42.9004 60.4971C42.3731 61.5318 41.5318 62.3731 40.4971 62.9004C39.9376 63.1855 39.2694 63.3407 38.2998 63.4199C37.3245 63.4996 36.0884 63.5 34.4004 63.5H9.59961C7.91156 63.5 6.67551 63.4996 5.7002 63.4199C4.7306 63.3407 4.06243 63.1855 3.50293 62.9004C2.46816 62.3731 1.62689 61.5318 1.09961 60.4971C0.814529 59.9376 0.659297 59.2694 0.580078 58.2998C0.50041 57.3245 0.5 56.0884 0.5 54.4004V37.5996C0.5 35.9116 0.50041 34.6755 0.580078 33.7002C0.659297 32.7306 0.814529 32.0624 1.09961 31.5029C1.62689 30.4682 2.46816 29.6269 3.50293 29.0996C4.06243 28.8145 4.7306 28.6593 5.7002 28.5801C6.67551 28.5004 7.91156 28.5 9.59961 28.5Z'
+        stroke={DEPTH_4}
+      />
+    </DrawingCanvas>
+  )
+}
+
+/**
+ * Drawing per file type. Total by design — the `Record<FileType, …>` annotation makes adding a
+ * `FileType` without giving it a drawing a type error rather than a silently blank card.
+ *
+ * WEBP reuses IMG's: the Figma set has no WEBP variant, and the two are the same kind of picture.
+ */
+export const FILE_DRAWINGS: Record<FileType, ComponentType<DrawingProps>> = {
+  PDF: PdfDrawing,
+  DOC: DocDrawing,
+  DOCX: DocDrawing,
+  CSV: CsvDrawing,
+  XLSX: SheetDrawing,
+  XLS: SheetDrawing,
+  MD: MdDrawing,
+  TXT: TxtDrawing,
+  JSON: JsonDrawing,
+  HTML: HtmlDrawing,
+  ZIP: ZipDrawing,
+  IMG: ImgDrawing,
+  WEBP: ImgDrawing,
+  PPT: PptDrawing,
+  PPTX: PptDrawing,
+}