@epicbagel/saas-kit 1.34.0 → 1.36.0

package/README.md

@@ -514,6 +514,70 @@ export function Appearance() {
   `paletteDescription`. Each palette's card is named by its `label` and
   described by its `description`.
 
+## Cover banner (1.35.0)
+
+`primitives/cover-banner` is a stock cover: the banner the kit draws for
+anything that has no cover image of its own, so a card without one is as tall
+as its neighbours and doesn't look bare. It is the default banner a profile
+shows before anyone uploads one, in whichever palette the app is in.
+
+```tsx
+import { AspectRatio } from "@epicbagel/saas-kit/primitives/aspect-ratio";
+import { CoverBanner } from "@epicbagel/saas-kit/primitives/cover-banner";
+
+<AspectRatio ratio={4}>
+  {person.coverUrl ? (
+    <img src={person.coverUrl} alt="" className="size-full object-cover" />
+  ) : (
+    <CoverBanner seed={person.id} />
+  )}
+</AspectRatio>
+```
+
+- **Paired with the theme.** Every colour is mixed in CSS from the palette's
+  tokens: `primary` into `muted` for the tints, and into `foreground` for a
+  faint pattern. So a banner follows the palette, light and dark, and an
+  `AccentTheme` around it, with no image, no request and no canvas.
+  A black-and-white palette gets a black-and-white banner. Where the browser
+  can read a colour's channels, a neighbouring hue is mixed in beside the
+  primary's, turned away from yellow-green, where a tint goes muddy; elsewhere
+  a banner is one hue.
+- **Six designs** (`COVER_BANNER_VARIANTS`): `wash`, one soft diagonal
+  gradient; `glow`, two soft lights; `grid`, a wash under a faint ruled grid;
+  `dots`, a wash under a faint dot matrix; `rings`, faint contour lines from
+  one corner; `arcs`, broad tonal bands round one corner. Each keeps its
+  deeper colour and its pattern on the far side, and its calmest part low on
+  the near side, where an avatar usually overlaps it.
+- **A seed picks one.** `seed` is a string or a number, such as a person's id
+  or name, and picks the same design every time, on the server and in the
+  browser, with no randomness: one person keeps one banner, and a list of
+  people isn't a wall of the same one. It is read exactly as given, so pass
+  something that stays put, an id before a name. `coverBannerVariant(seed)`
+  is the same pick as a function. With no seed it is the first design.
+- **Or name one.** `variant` names the design outright, and wins over `seed`.
+- **It fills its frame.** Put it where the cover image would go, in a frame
+  you own, at any size: it is 100% of the frame's width and height. With no
+  frame, or one that gives no height, it holds 4:1. `className` and the other
+  `div` attributes go to the element, and a utility class wins over its rules.
+- **Quiet.** The deepest tint is still four parts surface, so a face and a
+  name stay the loudest things on the card. Give an avatar that overlaps its
+  edge a ring in the card's colour (`ring-4 ring-card`), as you would over a
+  photograph.
+- **Decoration only.** It is hidden from screen readers and takes no
+  children. It is not a placeholder while a real cover loads (that is
+  `Skeleton`), not a stand-in for a photo or a logo, and not a surface to set
+  text on: its colours promise no contrast to anything laid over it.
+- **Why a banner, when `PersonAvatar` draws no generated tile.** A coloured
+  tile masks a missing photo by pretending to be one, so a person with no
+  photo gets plain initials. A cover is decoration and carries no identity, so
+  a stock one misleads nobody: it stands in for no particular picture, and the
+  seed only keeps a list from repeating itself.
+- **Styles.** Its rules are in `styles/utilities.css`
+  (`components/cover-banner.css`), on `data-slot="cover-banner"` and each
+  design's `data-variant`, so an app that already imports the kit's styles
+  needs nothing more. In forced colours it is the plain canvas, with no
+  pattern. On paper browsers leave backgrounds out, so it prints blank.
+
 ## Branded page (1.34.0)
 
 `primitives/branded-page` is the whole of a public page one company shows to

package/dist/{chunk-DILYV4FI.js → chunk-AL3FBR36.js}

@@ -2,9 +2,6 @@
 import {
   Button
 } from "./chunk-W326GKML.js";
-import {
-  cn
-} from "./chunk-G6SRSWXB.js";
 import {
   useCopyToClipboard
 } from "./chunk-ZWZAAGQF.js";
@@ -13,6 +10,15 @@ import {
 import { forwardRef } from "react";
 import { Check, Copy } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_SIZES = /* @__PURE__ */ new Set([
+  "icon",
+  "icon-lg",
+  "icon-sm",
+  "icon-md",
+  "icon-xs",
+  "icon-compact",
+  "icon-micro"
+]);
 var CopyButton = forwardRef(
   function CopyButton2({
     text,
@@ -27,7 +33,7 @@ var CopyButton = forwardRef(
   }, ref) {
     const { copied, copy } = useCopyToClipboard({ resetAfter });
     const iconOnly = label == null;
-    const resolvedSize = size ?? (iconOnly ? "icon" : "sm");
+    const resolvedSize = iconOnly ? size != null && ICON_SIZES.has(size) ? size : "icon-compact" : size ?? "sm";
     return /* @__PURE__ */ jsxs(
       Button,
       {
@@ -35,7 +41,7 @@ var CopyButton = forwardRef(
         type: "button",
         variant,
         size: resolvedSize,
-        className: cn(iconOnly ? "h-7 w-7" : void 0, className),
+        className,
         onClick: async (e) => {
           e.stopPropagation();
           const ok = await copy(text);
@@ -44,7 +50,7 @@ var CopyButton = forwardRef(
         "aria-label": iconOnly ? "Copy" : void 0,
         ...rest,
         children: [
-          copied ? /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", !iconOnly && "mr-1.5") }) : /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4", !iconOnly && "mr-1.5") }),
+          copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
           !iconOnly && (copied ? copiedLabel ?? label : label)
         ]
       }

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

@@ -4,15 +4,21 @@
 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');
 var _jsxruntime = require('react/jsx-runtime');
+var ICON_SIZES = /* @__PURE__ */ new Set([
+  "icon",
+  "icon-lg",
+  "icon-sm",
+  "icon-md",
+  "icon-xs",
+  "icon-compact",
+  "icon-micro"
+]);
 var CopyButton = _react.forwardRef.call(void 0, 
   function CopyButton2({
     text,
@@ -27,7 +33,7 @@ var CopyButton = _react.forwardRef.call(void 0,
   }, ref) {
     const { copied, copy } = _chunk4LXN6GLZcjs.useCopyToClipboard.call(void 0, { resetAfter });
     const iconOnly = label == null;
-    const resolvedSize = _nullishCoalesce(size, () => ( (iconOnly ? "icon" : "sm")));
+    const resolvedSize = iconOnly ? size != null && ICON_SIZES.has(size) ? size : "icon-compact" : _nullishCoalesce(size, () => ( "sm"));
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _chunkJDEXZGIYcjs.Button,
       {
@@ -35,7 +41,7 @@ var CopyButton = _react.forwardRef.call(void 0,
         type: "button",
         variant,
         size: resolvedSize,
-        className: _chunkKWLSBTB2cjs.cn.call(void 0, iconOnly ? "h-7 w-7" : void 0, className),
+        className,
         onClick: async (e) => {
           e.stopPropagation();
           const ok = await copy(text);
@@ -44,7 +50,7 @@ var CopyButton = _react.forwardRef.call(void 0,
         "aria-label": iconOnly ? "Copy" : void 0,
         ...rest,
         children: [
-          copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "h-4 w-4", !iconOnly && "mr-1.5") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "h-4 w-4", !iconOnly && "mr-1.5") }),
+          copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {}),
           !iconOnly && (copied ? _nullishCoalesce(copiedLabel, () => ( label)) : label)
         ]
       }

package/dist/{chunk-HTPPNW74.js → chunk-DMX7LQ6D.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   CopyButton
-} from "./chunk-DILYV4FI.js";
+} from "./chunk-AL3FBR36.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";

package/dist/{chunk-BGCNGYPL.cjs → chunk-I6IFBKCL.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkFARCLWLUcjs = require('./chunk-FARCLWLU.cjs');
+var _chunkAYH5TTLDcjs = require('./chunk-AYH5TTLD.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
@@ -38,7 +38,7 @@ function CodeBlock({
       }
     ),
     copy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkFARCLWLUcjs.CopyButton,
+      _chunkAYH5TTLDcjs.CopyButton,
       {
         text: copyText,
         label: copyLabel,

package/dist/primitives/chat.cjs

@@ -35,15 +35,15 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
+var _chunk7LDJAXRXcjs = require('../chunk-7LDJAXRX.cjs');
+require('../chunk-2HV2KKOE.cjs');
 
 
-var _chunkDHXKCMKYcjs = require('../chunk-DHXKCMKY.cjs');
 
 
 
 
-var _chunk7LDJAXRXcjs = require('../chunk-7LDJAXRX.cjs');
-require('../chunk-2HV2KKOE.cjs');
+var _chunkDHXKCMKYcjs = require('../chunk-DHXKCMKY.cjs');
 
 
 

package/dist/primitives/chat.js

@@ -31,6 +31,12 @@ import {
   Marker,
   MarkerContent
 } from "../chunk-IW4ZIXXG.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupTextarea
+} from "../chunk-QTPPNK6F.js";
+import "../chunk-6FC65AZQ.js";
 import {
   Item,
   ItemContent,
@@ -38,12 +44,6 @@ import {
   ItemMedia,
   ItemTitle
 } from "../chunk-SG4ZE2EN.js";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupTextarea
-} from "../chunk-QTPPNK6F.js";
-import "../chunk-6FC65AZQ.js";
 import {
   FileDropArea,
   FileDropzone

package/dist/primitives/code-block.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkBGCNGYPLcjs = require('../chunk-BGCNGYPL.cjs');
-require('../chunk-FARCLWLU.cjs');
+var _chunkI6IFBKCLcjs = require('../chunk-I6IFBKCL.cjs');
+require('../chunk-AYH5TTLD.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 require('../chunk-4LXN6GLZ.cjs');
 
 
-exports.CodeBlock = _chunkBGCNGYPLcjs.CodeBlock;
+exports.CodeBlock = _chunkI6IFBKCLcjs.CodeBlock;

package/dist/primitives/code-block.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   CodeBlock
-} from "../chunk-HTPPNW74.js";
-import "../chunk-DILYV4FI.js";
+} from "../chunk-DMX7LQ6D.js";
+import "../chunk-AL3FBR36.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 import "../chunk-ZWZAAGQF.js";

package/dist/primitives/copy-button.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkFARCLWLUcjs = require('../chunk-FARCLWLU.cjs');
+var _chunkAYH5TTLDcjs = require('../chunk-AYH5TTLD.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 require('../chunk-4LXN6GLZ.cjs');
 
 
-exports.CopyButton = _chunkFARCLWLUcjs.CopyButton;
+exports.CopyButton = _chunkAYH5TTLDcjs.CopyButton;

package/dist/primitives/copy-button.d.cts

@@ -9,6 +9,15 @@ interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
     text: string;
     /** Optional label shown next to the icon. Omit for an icon-only button. */
     label?: ReactNode;
+    /**
+     * The Button size. With a `label` it is a text button, `sm` by default.
+     * With no label it is an icon button: `icon-compact` (28px) by default,
+     * and any of the Button's icon sizes as given, so beside other icon
+     * buttons it takes theirs (`size="icon"`) and shares their centre line. A
+     * text size on a button with no text means nothing, and is read as the
+     * default.
+     */
+    size?: ButtonProps["size"];
     /** Label shown after a successful copy. Defaults to `label`. */
     copiedLabel?: ReactNode;
     /** ms before the success state reverts. Defaults to 2000. */

package/dist/primitives/copy-button.d.ts

@@ -9,6 +9,15 @@ interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
     text: string;
     /** Optional label shown next to the icon. Omit for an icon-only button. */
     label?: ReactNode;
+    /**
+     * The Button size. With a `label` it is a text button, `sm` by default.
+     * With no label it is an icon button: `icon-compact` (28px) by default,
+     * and any of the Button's icon sizes as given, so beside other icon
+     * buttons it takes theirs (`size="icon"`) and shares their centre line. A
+     * text size on a button with no text means nothing, and is read as the
+     * default.
+     */
+    size?: ButtonProps["size"];
     /** Label shown after a successful copy. Defaults to `label`. */
     copiedLabel?: ReactNode;
     /** ms before the success state reverts. Defaults to 2000. */

package/dist/primitives/copy-button.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   CopyButton
-} from "../chunk-DILYV4FI.js";
+} from "../chunk-AL3FBR36.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 import "../chunk-ZWZAAGQF.js";

package/dist/primitives/cover-banner.cjs

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+// src/primitives/cover-banner.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var COVER_BANNER_VARIANTS = ["wash", "glow", "grid", "dots", "rings", "arcs"];
+function hashSeed(seed) {
+  let hash = 2166136261;
+  for (let index = 0; index < seed.length; index++) {
+    hash ^= seed.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  hash ^= hash >>> 16;
+  hash = Math.imul(hash, 2246822507);
+  hash ^= hash >>> 13;
+  hash = Math.imul(hash, 3266489909);
+  hash ^= hash >>> 16;
+  return hash >>> 0;
+}
+function coverBannerVariant(seed) {
+  const text = seed == null ? "" : String(seed);
+  if (text === "") return COVER_BANNER_VARIANTS[0];
+  return COVER_BANNER_VARIANTS[hashSeed(text) % COVER_BANNER_VARIANTS.length];
+}
+var CoverBanner = _react.forwardRef.call(void 0, function CoverBanner2({ seed, variant, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      ...props,
+      "aria-hidden": "true",
+      "data-slot": "cover-banner",
+      "data-variant": _nullishCoalesce(variant, () => ( coverBannerVariant(seed)))
+    }
+  );
+});
+
+
+
+
+exports.COVER_BANNER_VARIANTS = COVER_BANNER_VARIANTS; exports.CoverBanner = CoverBanner; exports.coverBannerVariant = coverBannerVariant;

package/dist/primitives/cover-banner.d.cts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * The stock designs, in the order a seed deals them:
+ *
+ * - `wash`: one soft diagonal gradient.
+ * - `glow`: two soft lights, one low on the near side and one high on the far.
+ * - `grid`: a wash under a faint ruled grid.
+ * - `dots`: a wash under a faint dot matrix.
+ * - `rings`: faint contour lines spreading from the far lower corner.
+ * - `arcs`: broad tonal bands curving round the far lower corner.
+ *
+ * The order and the number are part of the contract: a seed picks by
+ * position, so moving, removing or adding a design would deal everyone a
+ * different banner.
+ */
+declare const COVER_BANNER_VARIANTS: readonly ["wash", "glow", "grid", "dots", "rings", "arcs"];
+/** One of the stock designs, by name. */
+type CoverBannerVariant = (typeof COVER_BANNER_VARIANTS)[number];
+/**
+ * The design a seed picks: the same one every time, on the server and in the
+ * browser, with no randomness. The seed is read exactly as given (case and
+ * spaces count), so pass something that stays put: an id before a name. A
+ * number is read as its digits. No seed (`null`, `undefined` or `""`) is the
+ * first design.
+ */
+declare function coverBannerVariant(seed: string | number | null | undefined): CoverBannerVariant;
+interface CoverBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Picks one of the stock designs, the same one every time for the same
+     * seed: a person's id, or their name. One person keeps one banner, and a
+     * list of people isn't a wall of the same one.
+     */
+    seed?: string | number | null;
+    /** Names the design outright. Wins over `seed`. */
+    variant?: CoverBannerVariant;
+}
+/**
+ * A stock cover: the banner the kit draws for anything that has no cover
+ * image of its own, so a card without one is the same height as its
+ * neighbours and doesn't look bare.
+ *
+ * It is drawn in CSS from the palette's own tokens (the primary colour mixed
+ * into the muted surface, and into the foreground for a faint pattern), so it
+ * follows the palette, light and dark, and an `AccentTheme` around it, with
+ * no image, no request and no canvas. It fills the frame it is put in; with
+ * no frame, or one that gives no height, it holds 4:1. Put it where the
+ * cover image would go and it sits quietly behind an avatar and a name.
+ *
+ * `PersonAvatar` deliberately draws no generated tile, because a coloured
+ * tile masks a missing photo by pretending to be one. A banner is different:
+ * a cover is decoration and carries no identity, so a stock one misleads
+ * nobody. It stands in for no particular picture, and the seed only keeps a
+ * list from repeating itself: it says nothing about the person.
+ *
+ * It is decoration: hidden from screen readers, with no children. It is not
+ * a placeholder while a real cover loads (that is `Skeleton`), not a
+ * stand-in for a photo or a logo, and not a surface to set text on: its
+ * colours promise no contrast to anything laid over it. An avatar that
+ * overlaps its edge wants a ring in the card's colour (`ring-4 ring-card`).
+ *
+ * Its styles are the kit's `styles/utilities.css` (`components/cover-banner.css`).
+ */
+declare const CoverBanner: React.ForwardRefExoticComponent<CoverBannerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { COVER_BANNER_VARIANTS, CoverBanner, type CoverBannerProps, type CoverBannerVariant, coverBannerVariant };

package/dist/primitives/cover-banner.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * The stock designs, in the order a seed deals them:
+ *
+ * - `wash`: one soft diagonal gradient.
+ * - `glow`: two soft lights, one low on the near side and one high on the far.
+ * - `grid`: a wash under a faint ruled grid.
+ * - `dots`: a wash under a faint dot matrix.
+ * - `rings`: faint contour lines spreading from the far lower corner.
+ * - `arcs`: broad tonal bands curving round the far lower corner.
+ *
+ * The order and the number are part of the contract: a seed picks by
+ * position, so moving, removing or adding a design would deal everyone a
+ * different banner.
+ */
+declare const COVER_BANNER_VARIANTS: readonly ["wash", "glow", "grid", "dots", "rings", "arcs"];
+/** One of the stock designs, by name. */
+type CoverBannerVariant = (typeof COVER_BANNER_VARIANTS)[number];
+/**
+ * The design a seed picks: the same one every time, on the server and in the
+ * browser, with no randomness. The seed is read exactly as given (case and
+ * spaces count), so pass something that stays put: an id before a name. A
+ * number is read as its digits. No seed (`null`, `undefined` or `""`) is the
+ * first design.
+ */
+declare function coverBannerVariant(seed: string | number | null | undefined): CoverBannerVariant;
+interface CoverBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Picks one of the stock designs, the same one every time for the same
+     * seed: a person's id, or their name. One person keeps one banner, and a
+     * list of people isn't a wall of the same one.
+     */
+    seed?: string | number | null;
+    /** Names the design outright. Wins over `seed`. */
+    variant?: CoverBannerVariant;
+}
+/**
+ * A stock cover: the banner the kit draws for anything that has no cover
+ * image of its own, so a card without one is the same height as its
+ * neighbours and doesn't look bare.
+ *
+ * It is drawn in CSS from the palette's own tokens (the primary colour mixed
+ * into the muted surface, and into the foreground for a faint pattern), so it
+ * follows the palette, light and dark, and an `AccentTheme` around it, with
+ * no image, no request and no canvas. It fills the frame it is put in; with
+ * no frame, or one that gives no height, it holds 4:1. Put it where the
+ * cover image would go and it sits quietly behind an avatar and a name.
+ *
+ * `PersonAvatar` deliberately draws no generated tile, because a coloured
+ * tile masks a missing photo by pretending to be one. A banner is different:
+ * a cover is decoration and carries no identity, so a stock one misleads
+ * nobody. It stands in for no particular picture, and the seed only keeps a
+ * list from repeating itself: it says nothing about the person.
+ *
+ * It is decoration: hidden from screen readers, with no children. It is not
+ * a placeholder while a real cover loads (that is `Skeleton`), not a
+ * stand-in for a photo or a logo, and not a surface to set text on: its
+ * colours promise no contrast to anything laid over it. An avatar that
+ * overlaps its edge wants a ring in the card's colour (`ring-4 ring-card`).
+ *
+ * Its styles are the kit's `styles/utilities.css` (`components/cover-banner.css`).
+ */
+declare const CoverBanner: React.ForwardRefExoticComponent<CoverBannerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { COVER_BANNER_VARIANTS, CoverBanner, type CoverBannerProps, type CoverBannerVariant, coverBannerVariant };

package/dist/primitives/cover-banner.js

@@ -0,0 +1,41 @@
+"use client";
+
+// src/primitives/cover-banner.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var COVER_BANNER_VARIANTS = ["wash", "glow", "grid", "dots", "rings", "arcs"];
+function hashSeed(seed) {
+  let hash = 2166136261;
+  for (let index = 0; index < seed.length; index++) {
+    hash ^= seed.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  hash ^= hash >>> 16;
+  hash = Math.imul(hash, 2246822507);
+  hash ^= hash >>> 13;
+  hash = Math.imul(hash, 3266489909);
+  hash ^= hash >>> 16;
+  return hash >>> 0;
+}
+function coverBannerVariant(seed) {
+  const text = seed == null ? "" : String(seed);
+  if (text === "") return COVER_BANNER_VARIANTS[0];
+  return COVER_BANNER_VARIANTS[hashSeed(text) % COVER_BANNER_VARIANTS.length];
+}
+var CoverBanner = forwardRef(function CoverBanner2({ seed, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      "aria-hidden": "true",
+      "data-slot": "cover-banner",
+      "data-variant": variant ?? coverBannerVariant(seed)
+    }
+  );
+});
+export {
+  COVER_BANNER_VARIANTS,
+  CoverBanner,
+  coverBannerVariant
+};

package/dist/primitives/file-preview.cjs

@@ -17,8 +17,8 @@ require('../chunk-ELPV44S6.cjs');
 require('../chunk-2BHI5ZWJ.cjs');
 
 
-var _chunkBGCNGYPLcjs = require('../chunk-BGCNGYPL.cjs');
-require('../chunk-FARCLWLU.cjs');
+var _chunkI6IFBKCLcjs = require('../chunk-I6IFBKCL.cjs');
+require('../chunk-AYH5TTLD.cjs');
 require('../chunk-WDXEJDMO.cjs');
 
 
@@ -281,7 +281,7 @@ function FilePreviewBody({
       kind === "markdown" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKENBU3NVcjs.LazyMarkdown, { components: { a: NewTabLink, ...markdownComponents }, children: text.text }) : (
         // The theme's relaxed leading is a fixed 1.8rem, which spaces a
         // file's small monospace lines apart; read it at 20px lines.
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBGCNGYPLcjs.CodeBlock, { wrap: true, className: "[&>pre]:leading-5", children: text.text })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI6IFBKCLcjs.CodeBlock, { wrap: true, className: "[&>pre]:leading-5", children: text.text })
       )
     ] });
   }

package/dist/primitives/file-preview.js

@@ -17,8 +17,8 @@ import "../chunk-INNGGLMZ.js";
 import "../chunk-4HWCNRK4.js";
 import {
   CodeBlock
-} from "../chunk-HTPPNW74.js";
-import "../chunk-DILYV4FI.js";
+} from "../chunk-DMX7LQ6D.js";
+import "../chunk-AL3FBR36.js";
 import "../chunk-3QT5VYZ3.js";
 import {
   Text

package/dist/primitives/tabbed-page-header.cjs

@@ -2,11 +2,11 @@
 "use client";
 
 
-var _chunkB54ZEKBGcjs = require('../chunk-B54ZEKBG.cjs');
-require('../chunk-DFB4ILN6.cjs');
+var _chunkY6X6XDHEcjs = require('../chunk-Y6X6XDHE.cjs');
 
 
-var _chunkY6X6XDHEcjs = require('../chunk-Y6X6XDHE.cjs');
+var _chunkB54ZEKBGcjs = require('../chunk-B54ZEKBG.cjs');
+require('../chunk-DFB4ILN6.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');

package/dist/primitives/tabbed-page-header.js

@@ -1,12 +1,12 @@
 "use client";
 "use client";
+import {
+  PageHeader
+} from "../chunk-VWOWPNKT.js";
 import {
   PageTabs
 } from "../chunk-XH2I3YJ6.js";
 import "../chunk-7CRDYV3C.js";
-import {
-  PageHeader
-} from "../chunk-VWOWPNKT.js";
 import {
   cn
 } from "../chunk-G6SRSWXB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -490,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";