@epicbagel/saas-kit 1.33.0 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.33.0",
+  "version": "1.35.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -230,6 +230,16 @@
         "default": "./dist/primitives/brand-mark.cjs"
       }
     },
+    "./primitives/branded-page": {
+      "import": {
+        "types": "./dist/primitives/branded-page.d.ts",
+        "default": "./dist/primitives/branded-page.js"
+      },
+      "require": {
+        "types": "./dist/primitives/branded-page.d.cts",
+        "default": "./dist/primitives/branded-page.cjs"
+      }
+    },
     "./primitives/browser-preview": {
       "import": {
         "types": "./dist/primitives/browser-preview.d.ts",
@@ -480,6 +490,16 @@
         "default": "./dist/primitives/count-badge.cjs"
       }
     },
+    "./primitives/cover-banner": {
+      "import": {
+        "types": "./dist/primitives/cover-banner.d.ts",
+        "default": "./dist/primitives/cover-banner.js"
+      },
+      "require": {
+        "types": "./dist/primitives/cover-banner.d.cts",
+        "default": "./dist/primitives/cover-banner.cjs"
+      }
+    },
     "./primitives/cycling-prompt": {
       "import": {
         "types": "./dist/primitives/cycling-prompt.d.ts",

package/src/styles/components/cover-banner.css

@@ -0,0 +1,201 @@
+/* Cover banner — the presentation of primitives/cover-banner.tsx: a stock
+ * cover for anything with no cover image of its own. Every selector lands on
+ * the banner's data-slot, and each design on its data-variant.
+ *
+ * Every colour is mixed from the palette's tokens: the primary colour into
+ * the muted surface for the tints, and into the foreground for a pattern's
+ * ink. So a banner follows the palette, light and dark, and an AccentTheme
+ * around it, and nothing here names a mode, a palette or a colour. In the
+ * components layer, so a consumer's utility classes still win. Part of
+ * utilities.css. */
+@layer components {
+  [data-slot="cover-banner"] {
+    /* The palette's colours, whole (the bare tokens are H S% L% triplets):
+     * the surface a banner is made of, the brand's colour that tints it, and
+     * a neighbour of that colour, which is the brand's own until the block
+     * below turns its hue. */
+    --color-cover-banner-surface: var(--color-muted);
+    --color-cover-banner-brand: var(--color-primary);
+    --color-cover-banner-near: var(--color-primary);
+    /* How far round the hue wheel the neighbour sits, in degrees at most.
+     * Each design sets its own, so two banners side by side differ in more
+     * than their shapes. */
+    --cover-banner-turn: 20;
+
+    /* The surface with the brand's colour in it, at four depths, and with
+     * its neighbour at two. The deepest is still four parts surface: a
+     * banner sits behind a face and a name. The surface is named first, so
+     * the fallback Tailwind writes for a browser without color-mix() is the
+     * plain surface. */
+    --color-cover-banner-1: color-mix(in oklab, var(--color-cover-banner-surface) 95%, var(--color-cover-banner-brand));
+    --color-cover-banner-2: color-mix(in oklab, var(--color-cover-banner-surface) 90%, var(--color-cover-banner-brand));
+    --color-cover-banner-3: color-mix(in oklab, var(--color-cover-banner-surface) 84%, var(--color-cover-banner-brand));
+    --color-cover-banner-4: color-mix(in oklab, var(--color-cover-banner-surface) 78%, var(--color-cover-banner-brand));
+    --color-cover-banner-near-2: color-mix(in oklab, var(--color-cover-banner-surface) 90%, var(--color-cover-banner-near));
+    --color-cover-banner-near-4: color-mix(in oklab, var(--color-cover-banner-surface) 78%, var(--color-cover-banner-near));
+    /* A pattern's ink: the text's colour and the brand's in equal parts,
+     * then mostly see-through. A rule covers more of the banner than a ring,
+     * and a ring more than a dot, so each is fainter than the next. */
+    --color-cover-banner-ink: color-mix(in oklab, var(--color-foreground) 50%, var(--color-cover-banner-brand));
+    --color-cover-banner-rule: color-mix(in oklab, transparent 91%, var(--color-cover-banner-ink));
+    --color-cover-banner-ring: color-mix(in oklab, transparent 86%, var(--color-cover-banner-ink));
+    --color-cover-banner-dot: color-mix(in oklab, transparent 78%, var(--color-cover-banner-ink));
+
+    position: relative;
+    display: block;
+    overflow: hidden;
+    /* Fills the frame it is put in. Where the frame gives no height, a
+     * percentage height is auto, and the ratio holds 4:1 instead. */
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 4 / 1;
+    background-color: var(--color-cover-banner-1);
+  }
+
+  /* Where the browser can read a colour's channels, two refinements.
+   *
+   * A little more chroma, so a coloured brand tints the surface as clearly
+   * as a black one darkens it.
+   *
+   * And the neighbour's hue turned, by up to --cover-banner-turn degrees,
+   * always away from yellow-green (hue 110), where a tint goes muddy: a warm
+   * colour leans towards red, a cool one towards blue and on to pink, and a
+   * colour at 110 stays put. The sine is what sets the direction and eases
+   * the amount.
+   *
+   * A grey has no chroma to raise or turn, so a black-and-white palette
+   * stays black and white. Elsewhere a banner is the plain mixes above, in
+   * one hue. */
+  @supports (color: oklch(from red l calc(c * 1.3) calc(h + 20 * sin((h - 110) * 0.5deg)))) {
+    [data-slot="cover-banner"] {
+      --color-cover-banner-brand: oklch(from var(--color-primary) l calc(c * 1.3) h);
+      --color-cover-banner-near: oklch(
+        from var(--color-primary) l calc(c * 1.3) calc(h + var(--cover-banner-turn) * sin((h - 110) * 0.5deg))
+      );
+    }
+  }
+
+  /* A pattern is its own layer, so it can fade out across the banner. */
+  [data-slot="cover-banner"]::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  /* Each design keeps its deeper colour and its pattern on the far side, and
+   * its calmest part low on the near side, where an avatar overlaps it. */
+
+  /* One soft diagonal gradient, from the brand's colour to its neighbour. */
+  [data-slot="cover-banner"][data-variant="wash"] {
+    --cover-banner-turn: 20;
+    background-image: linear-gradient(
+      112deg,
+      var(--color-cover-banner-1) 0%,
+      var(--color-cover-banner-2) 42%,
+      var(--color-cover-banner-near-4) 100%
+    );
+  }
+
+  /* Two soft lights: the brand's low on the near side, its neighbour's high
+   * on the far side. */
+  [data-slot="cover-banner"][data-variant="glow"] {
+    --cover-banner-turn: 34;
+    background-image:
+      radial-gradient(ellipse 62% 150% at 4% 122%, var(--color-cover-banner-4), transparent 72%),
+      radial-gradient(ellipse 58% 150% at 99% -26%, var(--color-cover-banner-near-4), transparent 72%);
+  }
+
+  /* A wash under a ruled grid, which fades out towards the near side. */
+  [data-slot="cover-banner"][data-variant="grid"] {
+    --cover-banner-turn: 18;
+    background-image: linear-gradient(
+      100deg,
+      var(--color-cover-banner-1) 0%,
+      var(--color-cover-banner-2) 55%,
+      var(--color-cover-banner-near-4) 100%
+    );
+  }
+
+  [data-slot="cover-banner"][data-variant="grid"]::after {
+    content: "";
+    background-image:
+      linear-gradient(to right, var(--color-cover-banner-rule) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--color-cover-banner-rule) 1px, transparent 1px);
+    background-size: 24px 24px;
+    background-position: center;
+    -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 100%);
+    mask-image: linear-gradient(100deg, transparent 8%, #000 100%);
+  }
+
+  /* A wash under a dot matrix, which fades out from the far upper corner. */
+  [data-slot="cover-banner"][data-variant="dots"] {
+    --cover-banner-turn: 28;
+    background-image: linear-gradient(
+      200deg,
+      var(--color-cover-banner-near-4) 0%,
+      var(--color-cover-banner-2) 46%,
+      var(--color-cover-banner-1) 100%
+    );
+  }
+
+  [data-slot="cover-banner"][data-variant="dots"]::after {
+    content: "";
+    background-image: radial-gradient(circle, var(--color-cover-banner-dot) 1.1px, transparent 1.7px);
+    background-size: 14px 14px;
+    background-position: center;
+    -webkit-mask-image: radial-gradient(ellipse 86% 160% at 100% 0%, #000 8%, transparent 80%);
+    mask-image: radial-gradient(ellipse 86% 160% at 100% 0%, #000 8%, transparent 80%);
+  }
+
+  /* Contour lines spreading from under the far lower corner. */
+  [data-slot="cover-banner"][data-variant="rings"] {
+    --cover-banner-turn: 24;
+    background-image: linear-gradient(
+      250deg,
+      var(--color-cover-banner-3) 0%,
+      var(--color-cover-banner-near-2) 40%,
+      var(--color-cover-banner-1) 100%
+    );
+  }
+
+  /* Each line eases in and out over three pixels, so it stays smooth where
+   * the browser draws a hard stop jagged. */
+  [data-slot="cover-banner"][data-variant="rings"]::after {
+    content: "";
+    background-image: repeating-radial-gradient(
+      circle at 84% 140%,
+      transparent 0,
+      transparent 18.5px,
+      var(--color-cover-banner-ring) 20px,
+      transparent 21.5px
+    );
+    -webkit-mask-image: radial-gradient(ellipse 84% 200% at 84% 140%, #000 10%, transparent 76%);
+    mask-image: radial-gradient(ellipse 84% 200% at 84% 140%, #000 10%, transparent 76%);
+  }
+
+  /* Broad tonal bands curving round the far lower corner, deepest inside. */
+  [data-slot="cover-banner"][data-variant="arcs"] {
+    --cover-banner-turn: 16;
+    background-image: radial-gradient(
+      circle at 100% 150%,
+      var(--color-cover-banner-near-4) 0%,
+      var(--color-cover-banner-near-4) 24%,
+      var(--color-cover-banner-3) 24.2%,
+      var(--color-cover-banner-3) 43%,
+      var(--color-cover-banner-2) 43.2%,
+      var(--color-cover-banner-2) 64%,
+      var(--color-cover-banner-1) 64.2%
+    );
+  }
+
+  /* Someone who asked for their own colours gets them, without a pattern. */
+  @media (forced-colors: active) {
+    [data-slot="cover-banner"] {
+      background: Canvas;
+    }
+
+    [data-slot="cover-banner"]::after {
+      content: none;
+    }
+  }
+}

package/src/styles/components.css

@@ -6,3 +6,4 @@
 @import "./components/message-scroller.css";
 @import "./components/frosted-surface.css";
 @import "./components/poster.css";
+@import "./components/cover-banner.css";

package/src/styles/utilities.css

@@ -1,10 +1,12 @@
 /* Palette-free utilities and component classes: shadcn's data-* variants,
  * no-scrollbar, scroll-fade and shimmer; the cn-attachment, cn-bubble,
  * cn-marker, cn-message and cn-message-scroller classes; the poster
- * family's data-slot rules; and the kit's keyframes. Defines no palette and no @source.
+ * family's and the cover banner's data-slot rules; and the kit's keyframes.
+ * Defines no palette and no @source.
  * The component classes @apply the semantic colours (bg-muted,
- * text-muted-foreground, ring-ring, …), so the host's @theme must define
- * them — tokens.css does. */
+ * text-muted-foreground, ring-ring, …), and the cover banner mixes its
+ * colours from them, so the host's @theme must define them — tokens.css
+ * does. */
 @import "./shadcn.css";
 @import "./components.css";
 @import "./keyframes.css";

package/dist/{chunk-2FVFPGP5.js → chunk-5GFMSK27.js}

@@ -8,9 +8,6 @@ import {
   SheetDescription,
   SheetTitle
 } from "./chunk-G76JANB4.js";
-import {
-  useIsMobile
-} from "./chunk-PIU5SSUV.js";
 import {
   Tooltip,
   TooltipContent,
@@ -26,6 +23,9 @@ import {
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
 
 // src/primitives/app-sidebar.tsx
 import { Slot } from "@radix-ui/react-slot";

package/dist/{chunk-4TJBXXUE.js → chunk-5OF6D3GH.js}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  useAgentAudioVisualizerBarAnimator
-} from "./chunk-GJ7S3L6R.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useAgentAudioVisualizerBarAnimator
+} from "./chunk-GJ7S3L6R.js";
 
 // src/primitives/agent-audio-visualizer-bar.tsx
 import React, {

package/dist/{chunk-ULZB4A2I.js → chunk-62UTAG2C.js}

@@ -9,12 +9,12 @@ import {
   SelectTrigger,
   SelectValue
 } from "./chunk-J6NXDZR5.js";
-import {
-  Skeleton
-} from "./chunk-YEW65ASC.js";
 import {
   CountBadge
 } from "./chunk-H7TETFLB.js";
+import {
+  Skeleton
+} from "./chunk-YEW65ASC.js";
 
 // src/primitives/board-view-internals.tsx
 import { ChevronRight } from "lucide-react";

package/dist/{chunk-SW4T3O7M.js → chunk-6LB37JWO.js}

@@ -10,6 +10,9 @@ import {
 import {
   Checkbox
 } from "./chunk-OICAYRVH.js";
+import {
+  Calendar
+} from "./chunk-H2CCBRVG.js";
 import {
   Select,
   SelectContent,
@@ -17,18 +20,12 @@ import {
   SelectTrigger,
   SelectValue
 } from "./chunk-J6NXDZR5.js";
-import {
-  Calendar
-} from "./chunk-H2CCBRVG.js";
 import {
   Sheet,
   SheetContent,
   SheetTitle,
   SheetTrigger
 } from "./chunk-G76JANB4.js";
-import {
-  useIsMobile
-} from "./chunk-PIU5SSUV.js";
 import {
   Input
 } from "./chunk-QMA3WVB7.js";
@@ -41,6 +38,9 @@ import {
 import {
   Button
 } from "./chunk-W326GKML.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
 
 // src/primitives/filter-bar.tsx
 import { ArrowDown, ArrowUp, CalendarIcon, Filter, X } from "lucide-react";

package/dist/{chunk-AO56ET4F.cjs → chunk-BTHYGHOH.cjs}

@@ -8,7 +8,7 @@
 
 
 
-var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
+var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
 
 
 
@@ -18,7 +18,7 @@ var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
 
 
 
-var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
+var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');

package/dist/{chunk-7ZRFXJVN.js → chunk-DILYV4FI.js}

@@ -1,13 +1,13 @@
 "use client";
-import {
-  useCopyToClipboard
-} from "./chunk-ZWZAAGQF.js";
 import {
   Button
 } from "./chunk-W326GKML.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useCopyToClipboard
+} from "./chunk-ZWZAAGQF.js";
 
 // src/primitives/copy-button.tsx
 import { forwardRef } from "react";

package/dist/{chunk-HHF5DEKM.cjs → chunk-FARCLWLU.cjs}

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunk4LXN6GLZcjs = require('./chunk-4LXN6GLZ.cjs');
-
-
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
+
+var _chunk4LXN6GLZcjs = require('./chunk-4LXN6GLZ.cjs');
+
 // src/primitives/copy-button.tsx
 var _react = require('react');
 var _lucidereact = require('lucide-react');

package/dist/{chunk-CRZ4INEJ.js → chunk-JTI4244T.js}

@@ -1,14 +1,4 @@
 "use client";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from "./chunk-3QT5VYZ3.js";
 import {
   Drawer,
   DrawerClose,
@@ -19,6 +9,16 @@ import {
   DrawerTitle,
   DrawerTrigger
 } from "./chunk-4HWCNRK4.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./chunk-3QT5VYZ3.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";

package/dist/{chunk-FB3VY2PL.cjs → chunk-NKWHDI4C.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
 
 
-var _chunk2BSFYU22cjs = require('./chunk-2BSFYU22.cjs');
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
 
-var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+var _chunk2BSFYU22cjs = require('./chunk-2BSFYU22.cjs');
 
 // src/primitives/agent-audio-visualizer-bar.tsx
 

package/dist/{chunk-GUVQAWUW.cjs → chunk-S2IMM37Q.cjs}

@@ -12,14 +12,14 @@ var _chunkIQZLUT2Ycjs = require('./chunk-IQZLUT2Y.cjs');
 var _chunkJH4GAGOQcjs = require('./chunk-JH4GAGOQ.cjs');
 
 
+var _chunkVOTCYG3Fcjs = require('./chunk-VOTCYG3F.cjs');
 
 
 
 
-var _chunkV5SPFLKWcjs = require('./chunk-V5SPFLKW.cjs');
 
 
-var _chunkVOTCYG3Fcjs = require('./chunk-VOTCYG3F.cjs');
+var _chunkV5SPFLKWcjs = require('./chunk-V5SPFLKW.cjs');
 
 
 
@@ -28,9 +28,6 @@ var _chunkVOTCYG3Fcjs = require('./chunk-VOTCYG3F.cjs');
 var _chunkPPX2VPGIcjs = require('./chunk-PPX2VPGI.cjs');
 
 
-var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
-
-
 var _chunkPQUSJEXLcjs = require('./chunk-PQUSJEXL.cjs');
 
 
@@ -42,6 +39,9 @@ var _chunkI6GUOEBOcjs = require('./chunk-I6GUOEBO.cjs');
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
+
+var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
+
 // src/primitives/filter-bar.tsx
 var _lucidereact = require('lucide-react');
 var _datefns = require('date-fns');

package/dist/{chunk-G3SF4RRA.cjs → chunk-UKYUWSF2.cjs}

@@ -10,9 +10,6 @@ var _chunkNQK5ZWC7cjs = require('./chunk-NQK5ZWC7.cjs');
 var _chunkPPX2VPGIcjs = require('./chunk-PPX2VPGI.cjs');
 
 
-var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
-
-
 
 
 
@@ -27,6 +24,9 @@ var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
+
+var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
+
 // src/primitives/app-sidebar.tsx
 var _reactslot = require('@radix-ui/react-slot');
 var _lucidereact = require('lucide-react');

package/dist/{chunk-D46FNEZ5.cjs → chunk-YYFVG5A6.cjs}

@@ -11,10 +11,10 @@ var _chunkXLIAY56Vcjs = require('./chunk-XLIAY56V.cjs');
 var _chunkV5SPFLKWcjs = require('./chunk-V5SPFLKW.cjs');
 
 
-var _chunkVBPPFC7Xcjs = require('./chunk-VBPPFC7X.cjs');
+var _chunkVGTINL5Qcjs = require('./chunk-VGTINL5Q.cjs');
 
 
-var _chunkVGTINL5Qcjs = require('./chunk-VGTINL5Q.cjs');
+var _chunkVBPPFC7Xcjs = require('./chunk-VBPPFC7X.cjs');
 
 // src/primitives/board-view-internals.tsx
 var _lucidereact = require('lucide-react');