@epicbagel/saas-kit 1.33.0 → 1.35.0

package/README.md

@@ -514,6 +514,137 @@ 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
+another company's people: a shared profile, a list sent for review, an
+invitation, a client's portal. It puts the kit's page chrome together
+(`MarketingHeader`, `BrandMark`, `AccentTheme`, `PageShell`,
+`FixedActionBar` and `EmptyState`), so a host passes a brand and its content.
+
+```tsx
+import { BrandedPage } from "@epicbagel/saas-kit/primitives/branded-page";
+
+<BrandedPage
+  brand={{ name: "Example Agency", logoUrl: brand.logoUrl, href: brand.website }}
+  accent={{ light: "#0f766e", dark: "#5eead4" }}
+  headerTrailing={<ThemeSwitch />} // your own control
+  credit="Shared by Example Agency"
+  actionBar={{
+    title: "Three people ready",
+    description: "Book a call to meet them.",
+    actions: <Button size="lg">Book a call</Button>,
+  }}
+  loading={loading}
+  unavailable={gone ? { reason: "expired" } : false}
+>
+  <Profile />
+</BrandedPage>
+```
+
+- **Brand.** The logo (`logoUrl`), else the `name` as text, and a link when
+  it has an `href`; nothing for a brand with neither. Or pass an element of
+  your own: your wordmark, or your router's link around one. The name is
+  text, not a heading, so the page's headings start in its content. A logo's
+  text alternative is `logoAlt`, else the brand's `name`, else "Logo".
+- **Accent and palette.** `accent` is the brand's light and dark colours as
+  six-digit hex, which `AccentTheme` applies inside the page only. `palette`
+  pins the page to one palette (its `data-theme` value) and paints the
+  canvas in it, so the page looks the same to every visitor whatever palette
+  their own browser has stored. Left out, the page follows the document.
+- **Header.** `headerTrailing` holds your own controls, such as a theme
+  switch or Sign in. The header is the page's banner; with neither a brand
+  nor controls there is none.
+- **Content.** `children`, in the page's one `main`: `width` (`narrow` by
+  default, `wide` or `full`), `padding` (`base` by default, which lines up
+  with the header) and `surface` (`muted` by default, or `default`).
+- **Credit.** `credit` is a closing line under the content. It prints;
+  `creditPrintVisibility="hidden"` keeps it off paper.
+- **Action bar.** `actionBar` is a `FixedActionBar` as wide as the content:
+  `title`, `description`, `actions` and `actionsWidth`. The content keeps
+  clear of it.
+- **States.** `loading` and `unavailable` stand in for the content, the
+  credit and the action bar, under the same header and both starting at the
+  same height: pass `true`, or the state's props. `loading` wins while both
+  are set. `unavailable` takes a `reason` (`not-found` by default, worded
+  for a link whose fate you can't tell; `expired`, `archived` or `revoked`),
+  each with its own icon and words, and your `icon`, `title`, `description`
+  and `action` in their place. Its title is a heading, and it is announced
+  when it appears (`role="alert"`). Loading is a polite `role="status"`
+  under a `label` ("Loading…").
+- **Alone.** `BrandedPageUnavailable` and `BrandedPageLoading` are the same
+  two states as blocks, for a frame you draw yourself. With no brand to
+  show, `<BrandedPage unavailable />` is the whole page, without a header.
+- **Paper.** Printed, the canvas is plain and the spacing compact, and the
+  header's controls and the action bar are left off.
+- **Presentation only.** No router, fetch or storage: the host decides which
+  state shows, and every word can be replaced. The action bar's accessible
+  name ("Page action") is `FixedActionBar`'s own.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/dist/chunk-2BNEE3U6.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/anchor.tsx
+var _reactslot = require('@radix-ui/react-slot');
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var Anchor = _react.forwardRef.call(void 0, function Anchor2({ variant = "unstyled", size = "inherit", display = "inline", underline = false, asChild = false, border = "none", weight = "normal", className, ...props }, ref) {
+  const Component = asChild ? _reactslot.Slot : "a";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        variant === "text" && "font-medium text-primary underline-offset-4 hover:underline",
+        variant === "muted" && "text-muted-foreground underline underline-offset-2 hover:text-foreground",
+        variant === "foreground" && "text-foreground underline-offset-2 hover:underline",
+        size === "xs" && "text-xs",
+        size === "sm" && "text-sm",
+        display === "inline-flex" && "inline-flex items-center gap-1",
+        display === "block" && "block",
+        border === "bottom" && "border-b last:border-b-0",
+        weight === "medium" && "font-medium",
+        underline && "underline",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+
+
+exports.Anchor = Anchor;

package/dist/{chunk-KOR2QR7I.cjs → chunk-2YW5VA2V.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } 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 _chunk7Q4EFCUIcjs = require('./chunk-7Q4EFCUI.cjs');
+var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 
-var _chunkFB3VY2PLcjs = require('./chunk-FB3VY2PL.cjs');
+var _chunkNKWHDI4Ccjs = require('./chunk-NKWHDI4C.cjs');
 
 
-var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
 
-var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+var _chunk7Q4EFCUIcjs = require('./chunk-7Q4EFCUI.cjs');
 
 // src/primitives/voice-dictation-button.tsx
 
@@ -269,7 +269,7 @@ var silence = () => SILENCE;
 function DictationWaveform({ source, state }) {
   const bands = _react.useSyncExternalStore.call(void 0, source.subscribe, source.getSnapshot, silence);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkFB3VY2PLcjs.AgentAudioVisualizerBar,
+    _chunkNKWHDI4Ccjs.AgentAudioVisualizerBar,
     {
       "aria-hidden": "true",
       "data-slot": "dictation-waveform",

package/dist/chunk-5PHOKJCT.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/marketing-header.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function MarketingHeader({
+  brand,
+  links = [],
+  trailing,
+  renderLink,
+  variant = "default",
+  className
+}) {
+  const link = (l) => {
+    const cls = variant === "mono" ? "font-mono text-xs uppercase tracking-[0.18em] text-muted-foreground transition-colors hover:text-foreground" : "text-sm text-muted-foreground transition-colors hover:text-foreground";
+    if (renderLink)
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: renderLink({ href: l.href, children: l.label, className: cls }) }, l.href);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: l.href, className: cls, children: l.label }, l.href);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "header",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/70",
+        className
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex w-full max-w-5xl items-center justify-between px-4 py-4 md:px-6", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center", children: brand }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "flex items-center gap-3 md:gap-5", children: [
+          links.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden items-center gap-5 sm:flex", children: links.map(link) }),
+          trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-2 md:gap-3", children: trailing })
+        ] })
+      ] })
+    }
+  );
+}
+
+
+
+exports.MarketingHeader = MarketingHeader;

package/dist/chunk-BB7PO2BW.js

@@ -0,0 +1,67 @@
+"use client";
+
+// src/primitives/accent-theme.tsx
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PALETTE_ID = /^[A-Za-z0-9_-]+$/;
+function hexToHslTriplet(hex) {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const value = Number.parseInt(match[1], 16);
+  const red = (value >> 16 & 255) / 255;
+  const green = (value >> 8 & 255) / 255;
+  const blue = (value & 255) / 255;
+  const maximum = Math.max(red, green, blue);
+  const minimum = Math.min(red, green, blue);
+  const lightness = (maximum + minimum) / 2;
+  let hue = 0;
+  let saturation = 0;
+  if (maximum !== minimum) {
+    const delta = maximum - minimum;
+    saturation = lightness > 0.5 ? delta / (2 - maximum - minimum) : delta / (maximum + minimum);
+    if (maximum === red) hue = ((green - blue) / delta + (green < blue ? 6 : 0)) / 6;
+    else if (maximum === green) hue = ((blue - red) / delta + 2) / 6;
+    else hue = ((red - green) / delta + 4) / 6;
+  }
+  const round = (number) => Math.round(number * 10) / 10;
+  return `${round(hue * 360)} ${round(saturation * 100)}% ${round(lightness * 100)}%`;
+}
+function foregroundFor(hex) {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return "0 0% 100%";
+  const value = Number.parseInt(match[1], 16);
+  const channel = (number) => {
+    const normalized = number / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance = 0.2126 * channel(value >> 16 & 255) + 0.7152 * channel(value >> 8 & 255) + 0.0722 * channel(value & 255);
+  return luminance > 0.45 ? "0 0% 9%" : "0 0% 100%";
+}
+function AccentTheme({ colours, palette, scope: target = "region", children }) {
+  const scope = `accent-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const light = colours?.light ? hexToHslTriplet(colours.light) : null;
+  const dark = colours?.dark ? hexToHslTriplet(colours.dark) : null;
+  if (!light && !dark) return /* @__PURE__ */ jsx(Fragment, { children });
+  const root = palette === void 0 ? null : PALETTE_ID.test(palette) ? `:root[data-theme="${palette}"]` : ":root:not(*)";
+  const lightSelector = target === "document" ? root ?? ":root" : root ? `${root} .${scope}` : `.${scope}`;
+  const darkSelector = `${root ?? ":root"}.dark${target === "document" ? "" : ` .${scope}`}`;
+  const rules = [];
+  if (light && colours?.light) {
+    rules.push(
+      `${lightSelector}{--primary:${light};--primary-foreground:${foregroundFor(colours.light)};--ring:${light};--color-primary:hsl(var(--primary));--color-primary-foreground:hsl(var(--primary-foreground));--color-ring:hsl(var(--ring));}`
+    );
+  }
+  if (dark && colours?.dark) {
+    rules.push(
+      `${darkSelector}{--primary:${dark};--primary-foreground:${foregroundFor(colours.dark)};--ring:${dark};--color-primary:hsl(var(--primary));--color-primary-foreground:hsl(var(--primary-foreground));--color-ring:hsl(var(--ring));}`
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: rules.join("") } }),
+    target === "document" ? children : /* @__PURE__ */ jsx("div", { className: scope, children })
+  ] });
+}
+
+export {
+  AccentTheme
+};

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

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

package/dist/chunk-BOMVE7QO.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunk373W6VADcjs = require('./chunk-373W6VAD.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/fixed-action-bar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var widthStyles = {
+  compact: "max-w-2xl",
+  narrow: "max-w-3xl",
+  wide: "max-w-5xl",
+  full: "max-w-none"
+};
+function FixedActionBar({
+  title,
+  description,
+  children,
+  width = "narrow",
+  actionsWidth = "auto",
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "aside",
+    {
+      "aria-label": "Page action",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm",
+        "pb-[env(safe-area-inset-bottom)] supports-backdrop-filter:bg-background/80",
+        className
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "mx-auto flex items-center gap-4 px-4 py-3 md:px-6", title ? "justify-between" : "justify-end", widthStyles[width]), children: [
+        title && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { className: "truncate font-medium", children: title }),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "muted", className: "text-sm", children: description })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0", actionsWidth === "full" && "w-full"), children })
+      ] })
+    }
+  );
+}
+
+
+
+exports.FixedActionBar = FixedActionBar;

package/dist/{chunk-FPOJ2NGG.js → chunk-C3VZMTVB.js}

@@ -6,7 +6,7 @@ import {
   ResponsiveDialogDescription,
   ResponsiveDialogHeader,
   ResponsiveDialogTitle
-} from "./chunk-CRZ4INEJ.js";
+} from "./chunk-JTI4244T.js";
 import {
   Icon
 } from "./chunk-KN4RPX35.js";

package/dist/chunk-EXHF3QUY.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/anchor.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Anchor = forwardRef(function Anchor2({ variant = "unstyled", size = "inherit", display = "inline", underline = false, asChild = false, border = "none", weight = "normal", className, ...props }, ref) {
+  const Component = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        variant === "text" && "font-medium text-primary underline-offset-4 hover:underline",
+        variant === "muted" && "text-muted-foreground underline underline-offset-2 hover:text-foreground",
+        variant === "foreground" && "text-foreground underline-offset-2 hover:underline",
+        size === "xs" && "text-xs",
+        size === "sm" && "text-sm",
+        display === "inline-flex" && "inline-flex items-center gap-1",
+        display === "block" && "block",
+        border === "bottom" && "border-b last:border-b-0",
+        weight === "medium" && "font-medium",
+        underline && "underline",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Anchor
+};

package/dist/chunk-FYNHRHVY.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/page-shell.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var widthStyles = {
+  narrow: "max-w-3xl",
+  wide: "max-w-5xl",
+  full: "max-w-none"
+};
+var paddingStyles = {
+  none: "",
+  base: "px-4 md:px-6",
+  relaxed: "px-6 md:px-10",
+  spacious: "px-6 md:px-10 xl:px-16"
+};
+var PageShell = _react.forwardRef.call(void 0, 
+  function PageShell2({ width = "full", padding = "base", spacing = "default", bottomInset = "default", minHeight = "none", align = "start", printMode = "default", mobileTreatment = "page", as = "main", className, ...props }, ref) {
+    const Tag = as;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Tag,
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "mx-auto w-full pt-6 md:pt-8 mb-28",
+          spacing === "default" ? "space-y-6" : "space-y-4",
+          widthStyles[width],
+          paddingStyles[padding],
+          bottomInset === "action" && "pb-32",
+          minHeight === "content" && "min-h-[70vh]",
+          align === "center" && "flex items-center",
+          printMode === "compact" && "print:my-0 print:pt-0",
+          mobileTreatment === "application" && "mb-0 flex min-h-[calc(100svh-4rem)] flex-1 flex-col space-y-0 px-0 pt-0 md:mb-28 md:block md:min-h-0 md:pt-8",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+
+
+exports.PageShell = PageShell;

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

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

package/dist/{chunk-REGA2L5S.js → chunk-HTUYUMAH.js}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  AgentAudioVisualizerBar
-} from "./chunk-4TJBXXUE.js";
 import {
   Button
 } from "./chunk-W326GKML.js";
+import {
+  AgentAudioVisualizerBar
+} from "./chunk-5OF6D3GH.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";

package/dist/chunk-I3GBXIFL.cjs

@@ -0,0 +1,67 @@
+"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";
+
+// src/primitives/accent-theme.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var PALETTE_ID = /^[A-Za-z0-9_-]+$/;
+function hexToHslTriplet(hex) {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const value = Number.parseInt(match[1], 16);
+  const red = (value >> 16 & 255) / 255;
+  const green = (value >> 8 & 255) / 255;
+  const blue = (value & 255) / 255;
+  const maximum = Math.max(red, green, blue);
+  const minimum = Math.min(red, green, blue);
+  const lightness = (maximum + minimum) / 2;
+  let hue = 0;
+  let saturation = 0;
+  if (maximum !== minimum) {
+    const delta = maximum - minimum;
+    saturation = lightness > 0.5 ? delta / (2 - maximum - minimum) : delta / (maximum + minimum);
+    if (maximum === red) hue = ((green - blue) / delta + (green < blue ? 6 : 0)) / 6;
+    else if (maximum === green) hue = ((blue - red) / delta + 2) / 6;
+    else hue = ((red - green) / delta + 4) / 6;
+  }
+  const round = (number) => Math.round(number * 10) / 10;
+  return `${round(hue * 360)} ${round(saturation * 100)}% ${round(lightness * 100)}%`;
+}
+function foregroundFor(hex) {
+  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return "0 0% 100%";
+  const value = Number.parseInt(match[1], 16);
+  const channel = (number) => {
+    const normalized = number / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance = 0.2126 * channel(value >> 16 & 255) + 0.7152 * channel(value >> 8 & 255) + 0.0722 * channel(value & 255);
+  return luminance > 0.45 ? "0 0% 9%" : "0 0% 100%";
+}
+function AccentTheme({ colours, palette, scope: target = "region", children }) {
+  const scope = `accent-${_react.useId.call(void 0, ).replace(/[^a-zA-Z0-9]/g, "")}`;
+  const light = _optionalChain([colours, 'optionalAccess', _ => _.light]) ? hexToHslTriplet(colours.light) : null;
+  const dark = _optionalChain([colours, 'optionalAccess', _2 => _2.dark]) ? hexToHslTriplet(colours.dark) : null;
+  if (!light && !dark) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
+  const root = palette === void 0 ? null : PALETTE_ID.test(palette) ? `:root[data-theme="${palette}"]` : ":root:not(*)";
+  const lightSelector = target === "document" ? _nullishCoalesce(root, () => ( ":root")) : root ? `${root} .${scope}` : `.${scope}`;
+  const darkSelector = `${_nullishCoalesce(root, () => ( ":root"))}.dark${target === "document" ? "" : ` .${scope}`}`;
+  const rules = [];
+  if (light && _optionalChain([colours, 'optionalAccess', _3 => _3.light])) {
+    rules.push(
+      `${lightSelector}{--primary:${light};--primary-foreground:${foregroundFor(colours.light)};--ring:${light};--color-primary:hsl(var(--primary));--color-primary-foreground:hsl(var(--primary-foreground));--color-ring:hsl(var(--ring));}`
+    );
+  }
+  if (dark && _optionalChain([colours, 'optionalAccess', _4 => _4.dark])) {
+    rules.push(
+      `${darkSelector}{--primary:${dark};--primary-foreground:${foregroundFor(colours.dark)};--ring:${dark};--color-primary:hsl(var(--primary));--color-primary-foreground:hsl(var(--primary-foreground));--color-ring:hsl(var(--ring));}`
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { dangerouslySetInnerHTML: { __html: rules.join("") } }),
+    target === "document" ? children : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: scope, children })
+  ] });
+}
+
+
+
+exports.AccentTheme = AccentTheme;

package/dist/{chunk-SL6ECEN6.cjs → chunk-JMNDFISN.cjs}

@@ -1,10 +1,10 @@
 "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 _chunkFB3VY2PLcjs = require('./chunk-FB3VY2PL.cjs');
+var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 
-var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
+var _chunkNKWHDI4Ccjs = require('./chunk-NKWHDI4C.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
@@ -91,7 +91,7 @@ function VoiceSessionControls({
                 muted ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground"
               ), children: muted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MicOff, { className: "size-5" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { className: "size-5" }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkFB3VY2PLcjs.AgentAudioVisualizerBar,
+                _chunkNKWHDI4Ccjs.AgentAudioVisualizerBar,
                 {
                   "aria-hidden": "true",
                   size: "sm",

package/dist/{chunk-TS4MC3B3.js → chunk-NNEV5RHQ.js}

@@ -1,16 +1,16 @@
 "use client";
-import {
-  useDictation
-} from "./chunk-RPSRCB5O.js";
-import {
-  AgentAudioVisualizerBar
-} from "./chunk-4TJBXXUE.js";
 import {
   Button
 } from "./chunk-W326GKML.js";
+import {
+  AgentAudioVisualizerBar
+} from "./chunk-5OF6D3GH.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useDictation
+} from "./chunk-RPSRCB5O.js";
 
 // src/primitives/voice-dictation-button.tsx
 import {

package/dist/chunk-O3G3TVPU.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/brand-mark.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "h-6 max-w-36",
+  md: "h-7 max-w-44",
+  lg: "h-9 max-w-52"
+};
+var BrandMark = forwardRef(function BrandMark2({ size = "md", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn("w-auto object-contain", sizeStyles[size], className),
+      ...props
+    }
+  );
+});
+
+export {
+  BrandMark
+};