@vendure-io/ui 1.2.0 → 2.0.0-beta.0

package/src/components/molecules/illustrations/empty-collection.tsx

@@ -0,0 +1,66 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * An open, hollow box with its flaps folded back and a dashed "what goes
+ * here" outline floating above. The default for "nothing exists yet" —
+ * first-run lists, collections, catalogs. Not for a filtered/searched miss
+ * (use `NoResultsIllustration`).
+ */
+function EmptyCollectionIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* open flaps, behind the box front */}
+      <polygon points="45,58 30,34 62,34 65,58" className="fill-muted stroke-muted-foreground" />
+      <polygon points="115,58 130,34 98,34 95,58" className="fill-muted stroke-muted-foreground" />
+
+      {/* hollow interior */}
+      <ellipse
+        cx="80"
+        cy="64"
+        rx="27"
+        ry="5"
+        className="fill-background stroke-border"
+        strokeDasharray="3 3"
+      />
+
+      {/* box body */}
+      <path
+        d="M45,58 L115,58 L115,86 C115,88 113.5,89 112,89 L48,89 C46.5,89 45,88 45,86 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* floating "what belongs here" outline */}
+      <rect
+        x="64"
+        y="12"
+        width="32"
+        height="24"
+        rx="3"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+
+      {/* sparkle — the one brand accent */}
+      <polygon
+        points="104,10 105.5,14.5 110,16 105.5,17.5 104,22 102.5,17.5 98,16 102.5,14.5"
+        className="fill-brand"
+      />
+    </svg>
+  );
+}
+
+export { EmptyCollectionIllustration };

package/src/components/molecules/illustrations/empty-database.tsx

@@ -0,0 +1,44 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A database cylinder with a solid rim but dashed walls and dividing bands —
+ * a shell with nothing provisioned inside. For no database provisioned yet,
+ * or no backups exist. Not for a generic empty list (use
+ * `EmptyCollectionIllustration`).
+ */
+function EmptyDatabaseIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* rim — the only solid, present surface */}
+      <ellipse cx="80" cy="34" rx="24" ry="8" className="fill-surface stroke-muted-foreground" />
+
+      {/* walls, empty */}
+      <line x1="56" y1="34" x2="56" y2="82" className="stroke-border" strokeDasharray="3 4" />
+      <line x1="104" y1="34" x2="104" y2="82" className="stroke-border" strokeDasharray="3 4" />
+
+      {/* dividing bands, nothing stacked between them */}
+      <path d="M56,50 A24,8 0 0,0 104,50" className="stroke-border" strokeDasharray="3 4" />
+      <path d="M56,66 A24,8 0 0,0 104,66" className="stroke-border" strokeDasharray="3 4" />
+      <path d="M56,82 A24,8 0 0,0 104,82" className="stroke-border" strokeDasharray="3 4" />
+
+      {/* status dot — the one brand accent */}
+      <circle cx="100" cy="28" r="4" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { EmptyDatabaseIllustration };

package/src/components/molecules/illustrations/empty-media.tsx

@@ -0,0 +1,68 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A photo tile with a sun-over-mountains glyph, floated in front of one or
+ * two dashed placeholder tiles. For an empty asset/media library or an
+ * empty folder in an asset browser. Not for a generic empty list (use
+ * `EmptyCollectionIllustration`) or a drag-to-upload target (use
+ * `UploadDropzoneIllustration`).
+ */
+function EmptyMediaIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* empty slots, behind the tile in front */}
+      <rect
+        x="36"
+        y="28"
+        width="40"
+        height="30"
+        rx="3"
+        className="stroke-border"
+        strokeDasharray="3 4"
+        transform="rotate(-6 56 43)"
+      />
+      <rect
+        x="94"
+        y="30"
+        width="34"
+        height="26"
+        rx="3"
+        className="stroke-border"
+        strokeDasharray="3 4"
+        transform="rotate(5 111 43)"
+      />
+
+      {/* photo tile */}
+      <rect
+        x="48"
+        y="34"
+        width="64"
+        height="46"
+        rx="3"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* sun — the one brand accent */}
+      <circle cx="64" cy="48" r="4" className="fill-brand" />
+
+      {/* mountains */}
+      <path d="M52,74 L66,58 L76,68 L86,52 L104,74" className="stroke-muted-foreground" />
+    </svg>
+  );
+}
+
+export { EmptyMediaIllustration };

package/src/components/molecules/illustrations/error.tsx

@@ -0,0 +1,64 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * Two cable connectors that don't meet, with a dashed gap and a spark where
+ * the connection failed. The `ErrorState` default — deliberately neutral, not
+ * destructive-tinted; the "this failed" weight comes from the state view's
+ * `role="alert"` and copy, not the illustration.
+ */
+function ErrorIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* left plug + trailing cable */}
+      <path d="M20,60 Q6,60 6,44" className="stroke-muted-foreground" />
+      <rect
+        x="20"
+        y="50"
+        width="36"
+        height="20"
+        rx="4"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <rect x="54" y="56" width="10" height="3" rx="1.5" className="fill-muted-foreground" />
+      <rect x="54" y="63" width="10" height="3" rx="1.5" className="fill-muted-foreground" />
+
+      {/* right socket + trailing cable */}
+      <path d="M140,60 Q154,60 154,44" className="stroke-muted-foreground" />
+      <rect
+        x="104"
+        y="50"
+        width="36"
+        height="20"
+        rx="4"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <rect x="98" y="56" width="8" height="3" rx="1.5" className="fill-background stroke-border" />
+      <rect x="98" y="63" width="8" height="3" rx="1.5" className="fill-background stroke-border" />
+
+      {/* the gap */}
+      <line x1="66" y1="60" x2="94" y2="60" className="stroke-border" strokeDasharray="2 5" />
+
+      {/* spark — the one brand accent */}
+      <polygon
+        points="80,52 81.5,58.5 88,60 81.5,61.5 80,68 78.5,61.5 72,60 78.5,58.5"
+        className="fill-brand"
+      />
+    </svg>
+  );
+}
+
+export { ErrorIllustration };

package/src/components/molecules/illustrations/first-run.tsx

@@ -0,0 +1,55 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A rocket lifting off on a dashed motion trail, with a lit porthole and two
+ * drifting sparkles. For genuine first-run/onboarding moments — a feature
+ * with nothing set up yet, not a filtered or failed view.
+ */
+function FirstRunIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="26" ry="5" className="fill-muted" />
+
+      {/* motion trail */}
+      <path d="M70,100 Q66,80 74,60" className="stroke-border" strokeDasharray="3 4" />
+      <path d="M90,100 Q94,80 86,60" className="stroke-border" strokeDasharray="3 4" />
+
+      {/* body */}
+      <path
+        d="M80,26 C90,36 92,50 90,66 L70,66 C68,50 70,36 80,26 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <polygon points="70,66 60,78 70,72" className="fill-muted-foreground" />
+      <polygon points="90,66 100,78 90,72" className="fill-muted-foreground" />
+      <path d="M74,66 L80,80 L86,66" className="stroke-border" strokeDasharray="2 3" />
+
+      {/* porthole — the one brand accent */}
+      <circle cx="80" cy="44" r="7" className="fill-brand" />
+      <circle cx="77.5" cy="42" r="1.6" className="fill-surface" />
+
+      {/* drifting sparkles, neutral */}
+      <polygon
+        points="46,28 47.5,32.5 52,34 47.5,35.5 46,40 44.5,35.5 40,34 44.5,32.5"
+        className="fill-muted-foreground"
+      />
+      <polygon
+        points="118,48 119,51 122,52 119,53 118,56 117,53 114,52 117,51"
+        className="fill-muted-foreground"
+      />
+    </svg>
+  );
+}
+
+export { FirstRunIllustration };

package/src/components/molecules/illustrations/illustration-types.tsx

@@ -0,0 +1,9 @@
+// Pure type module for the illustrations set. Kept runtime-free so every
+// illustration file can import it without pulling in unrelated JSX.
+
+export interface IllustrationProps {
+  /** Extra classes applied to the root `<svg>` (e.g. to resize or reposition). */
+  className?: string;
+  /** Width in px. Height follows the fixed 160×120 (4:3) aspect ratio. Defaults to 160. */
+  size?: number;
+}

package/src/components/molecules/illustrations/no-activity.tsx

@@ -0,0 +1,49 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A vertical timeline rail with dashed, hollow nodes and faint dashed row
+ * lines beside them — the rail exists but no entries have landed on it yet.
+ * For audit logs / history / timeline views with nothing recorded — pass as
+ * `illustration` to `EmptyState`. For a generic empty list with no timeline
+ * shape, use `EmptyCollectionIllustration` instead.
+ */
+function NoActivityIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* the timeline rail itself — present, just nothing on it */}
+      <line x1="50" y1="26" x2="50" y2="88" className="stroke-muted-foreground" />
+
+      {/* nodes, hollow — no entries recorded at any of them */}
+      <circle cx="50" cy="32" r="5" className="stroke-muted-foreground" strokeDasharray="3 4" />
+      <circle cx="50" cy="58" r="5" className="stroke-muted-foreground" strokeDasharray="3 4" />
+      <circle cx="50" cy="84" r="5" className="stroke-muted-foreground" strokeDasharray="3 4" />
+
+      {/* newest node — the one brand accent */}
+      <circle cx="50" cy="32" r="2" className="fill-brand" />
+
+      {/* faint row placeholders beside each node, waiting for content */}
+      <line x1="64" y1="29" x2="106" y2="29" className="stroke-border" strokeDasharray="2 5" />
+      <line x1="64" y1="36" x2="90" y2="36" className="stroke-border" strokeDasharray="2 5" />
+      <line x1="64" y1="55" x2="114" y2="55" className="stroke-border" strokeDasharray="2 5" />
+      <line x1="64" y1="62" x2="96" y2="62" className="stroke-border" strokeDasharray="2 5" />
+      <line x1="64" y1="81" x2="102" y2="81" className="stroke-border" strokeDasharray="2 5" />
+      <line x1="64" y1="88" x2="84" y2="88" className="stroke-border" strokeDasharray="2 5" />
+    </svg>
+  );
+}
+
+export { NoActivityIllustration };

package/src/components/molecules/illustrations/no-deployments.tsx

@@ -0,0 +1,49 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A grounded server box with a dashed arrow trailing upward into empty space
+ * — nothing has shipped yet. For an environment that has never been deployed
+ * or an empty deployment history, not a genuine product onboarding moment
+ * (use `FirstRunIllustration`) or a failed deploy (use `ErrorIllustration`).
+ */
+function NoDeploymentsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* server box */}
+      <rect
+        x="58"
+        y="64"
+        width="44"
+        height="28"
+        rx="4"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* rack lines */}
+      <line x1="64" y1="74" x2="96" y2="74" className="stroke-border" />
+      <line x1="64" y1="84" x2="96" y2="84" className="stroke-border" />
+
+      {/* dashed trail, nothing deployed yet */}
+      <path d="M80,64 Q78,46 80,30" className="stroke-border" strokeDasharray="3 4" />
+
+      {/* arrowhead — the one brand accent */}
+      <polygon points="80,20 74,30 86,30" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { NoDeploymentsIllustration };

package/src/components/molecules/illustrations/no-documents.tsx

@@ -0,0 +1,67 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A single document with a folded corner and a seal, with dashed "ghost"
+ * pages stacked behind it that never got filled in. For licenses, invoices,
+ * or certificates that haven't been issued yet. Not for a generic empty list
+ * (use `EmptyCollectionIllustration`) or a 404 (use `NotFoundIllustration`).
+ */
+function NoDocumentsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="27" ry="5" className="fill-muted" />
+
+      {/* ghost pages, never issued */}
+      <rect
+        x="65"
+        y="20"
+        width="42"
+        height="56"
+        rx="2"
+        className="stroke-border"
+        strokeDasharray="2 5"
+      />
+      <rect
+        x="62"
+        y="23"
+        width="42"
+        height="56"
+        rx="2"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+
+      {/* document, folded corner */}
+      <rect
+        x="59"
+        y="26"
+        width="42"
+        height="56"
+        rx="2"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <polygon points="101,26 101,36 91,26" className="fill-muted stroke-border" />
+
+      {/* seal ribbon, hanging off the bottom edge */}
+      <path d="M75,74 L75,96 L80,90 L85,96 L85,74 Z" className="fill-muted stroke-border" />
+
+      {/* seal — the one brand accent */}
+      <circle cx="80" cy="74" r="8" className="fill-surface stroke-muted-foreground" />
+      <circle cx="80" cy="74" r="2.5" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { NoDocumentsIllustration };

package/src/components/molecules/illustrations/no-keys.tsx

@@ -0,0 +1,50 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A single key resting on the ground, its bow-hole the only spark of color,
+ * beneath a dashed keyring loop with nothing hung on it yet. For empty states
+ * before any API key, access token, or registry token has been created —
+ * pair with `EmptyState`. Not for a permission/authorization failure (use
+ * `AccessDeniedIllustration`).
+ */
+function NoKeysIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* keyring, empty — nothing hung on it yet */}
+      <circle cx="80" cy="40" r="18" className="stroke-border" strokeDasharray="3 4" />
+      <path d="M80,58 L80,72" className="stroke-border" strokeDasharray="2 4" />
+
+      {/* key, resting: bow + shaft + teeth */}
+      <circle cx="56" cy="88" r="13" className="fill-surface stroke-muted-foreground" />
+      <rect
+        x="67"
+        y="84"
+        width="50"
+        height="8"
+        rx="1"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <rect x="102" y="92" width="5" height="6" className="fill-surface stroke-muted-foreground" />
+      <rect x="111" y="92" width="5" height="10" className="fill-surface stroke-muted-foreground" />
+
+      {/* bow hole — the one brand accent */}
+      <circle cx="56" cy="88" r="4" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { NoKeysIllustration };

package/src/components/molecules/illustrations/no-logs.tsx

@@ -0,0 +1,53 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A terminal window with a title bar and a few dashed, empty log lines below
+ * a blinking prompt caret waiting for output. For an empty log stream or
+ * console with nothing captured yet — pass as `illustration` to `EmptyState`.
+ * Not for a generic error (use `ErrorIllustration`).
+ */
+function NoLogsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* terminal window */}
+      <rect
+        x="26"
+        y="22"
+        width="108"
+        height="68"
+        rx="4"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* title bar, with window dots */}
+      <line x1="26" y1="36" x2="134" y2="36" className="stroke-border" />
+      <circle cx="34" cy="29" r="2" className="fill-muted-foreground" />
+      <circle cx="42" cy="29" r="2" className="fill-muted-foreground" />
+      <circle cx="50" cy="29" r="2" className="fill-muted-foreground" />
+
+      {/* empty log lines — nothing captured yet */}
+      <line x1="38" y1="50" x2="96" y2="50" className="stroke-border" strokeDasharray="3 4" />
+      <line x1="38" y1="60" x2="112" y2="60" className="stroke-border" strokeDasharray="3 4" />
+      <line x1="38" y1="70" x2="80" y2="70" className="stroke-border" strokeDasharray="3 4" />
+
+      {/* prompt caret, blinking on an empty line — the one brand accent */}
+      <rect x="38" y="78" width="8" height="10" rx="1" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { NoLogsIllustration };

package/src/components/molecules/illustrations/no-members.tsx

@@ -0,0 +1,56 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * Two solid avatar chips (head + shoulders) beside one dashed, empty avatar
+ * slot topped with a "+" badge — an open seat waiting to be filled. For a
+ * team/members list that's empty or awaiting invites — pass as `illustration`
+ * to `EmptyState` alongside an "Invite a teammate" action. Not for a
+ * customer/people search that came up empty (use `NoResultsIllustration`).
+ */
+function NoMembersIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* two team members, already seated */}
+      <circle cx="42" cy="46" r="9" className="fill-surface stroke-muted-foreground" />
+      <path
+        d="M29,82 L29,67 A13,13 0 0,1 55,67 L55,82 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <circle cx="74" cy="46" r="9" className="fill-surface stroke-muted-foreground" />
+      <path
+        d="M61,82 L61,67 A13,13 0 0,1 87,67 L87,82 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* open seat, dashed and empty */}
+      <circle cx="112" cy="46" r="9" className="stroke-muted-foreground" strokeDasharray="3 4" />
+      <path
+        d="M99,82 L99,67 A13,13 0 0,1 125,67 L125,82 Z"
+        className="stroke-muted-foreground"
+        strokeDasharray="3 4"
+      />
+
+      {/* invite badge — the one brand accent */}
+      <polygon
+        points="122,32 126,32 126,36 130,36 130,40 126,40 126,44 122,44 122,40 118,40 118,36 122,36"
+        className="fill-brand"
+      />
+    </svg>
+  );
+}
+
+export { NoMembersIllustration };