@caqophony/ui 0.4.0 → 0.5.0

package/dist/{chunk-Y6LCXEXZ.js → chunk-44GEHNZP.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   Icon
-} from "./chunk-BAW3RIMF.js";
+} from "./chunk-ID7VBGJA.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";

package/dist/{chunk-PKP3ZIRB.js → chunk-I5DQCG6D.js}

@@ -1,7 +1,8 @@
 'use client';
 import {
+  CONTENT_GUTTER,
   Icon
-} from "./chunk-BAW3RIMF.js";
+} from "./chunk-ID7VBGJA.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";
@@ -97,11 +98,6 @@ Button.displayName = "Button";
 
 // src/container.tsx
 import * as React2 from "react";
-
-// src/content-gutter.ts
-var CONTENT_GUTTER = "px-4 sm:px-6 lg:px-8";
-
-// src/container.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   sm: "max-w-content-sm",
@@ -229,7 +225,8 @@ function NavDrawer({
   closedFrom,
   defaultOpen,
   children,
-  triggerClassName
+  triggerClassName,
+  surface
 }) {
   const [open, setOpen] = React4.useState(defaultOpen);
   const id = React4.useId();
@@ -288,6 +285,7 @@ function NavDrawer({
             role: "dialog",
             "aria-modal": "true",
             "aria-label": label,
+            "data-surface": surface,
             className: cn(
               "absolute inset-y-0 flex w-72 max-w-[calc(100%-3rem)] flex-col overflow-y-auto bg-card shadow-lg",
               left ? "left-0 border-r" : "right-0 border-l",
@@ -347,7 +345,8 @@ function NavbarMenu({
   actions,
   defaultOpen = false,
   triggerClassName,
-  folded = false
+  folded = false,
+  surface
 }) {
   return /* @__PURE__ */ jsx5("div", { className: folded ? "ml-auto" : "ml-auto md:hidden", children: /* @__PURE__ */ jsxs4(
     NavDrawer,
@@ -357,6 +356,7 @@ function NavbarMenu({
       closedFrom: folded ? null : "md",
       defaultOpen,
       triggerClassName,
+      surface,
       children: [
         search && /* @__PURE__ */ jsx5("div", { className: "px-4 pb-3", children: search }),
         links && /* @__PURE__ */ jsx5("nav", { className: "flex flex-col px-4 pb-3 [&>a]:whitespace-normal [&>a]:py-2.5 [&>a]:text-base", children: links }),
@@ -373,7 +373,6 @@ export {
   usePanelRef,
   useModalSurface,
   NavDrawer,
-  CONTENT_GUTTER,
   NavbarMenu,
   Container
 };

package/dist/{chunk-BAW3RIMF.js → chunk-ID7VBGJA.js}

@@ -218,6 +218,9 @@ function ScrollHintXMark() {
   );
 }
 
+// src/content-gutter.ts
+var CONTENT_GUTTER = "px-4 sm:px-6 lg:px-8";
+
 export {
   ICONS,
   ICON_SIZES,
@@ -225,5 +228,6 @@ export {
   SCROLL_HINT_X,
   SCROLL_HINT_Y,
   SCROLL_HINT_Y_MARK,
-  ScrollHintXMark
+  ScrollHintXMark,
+  CONTENT_GUTTER
 };

package/dist/index.js

@@ -4,7 +4,6 @@ import {
 } from "./chunk-ODRGJV46.js";
 import {
   Button,
-  CONTENT_GUTTER,
   Container,
   NavDrawer,
   NavbarMenu,
@@ -12,7 +11,7 @@ import {
   buttonVariants,
   useModalSurface,
   usePanelRef
-} from "./chunk-PKP3ZIRB.js";
+} from "./chunk-I5DQCG6D.js";
 import {
   Alert,
   EMPTY_VALUE_GLYPH,
@@ -20,8 +19,9 @@ import {
   INTENT_SUBTLE_STYLES,
   IntentBadge,
   isEmptyValue
-} from "./chunk-Y6LCXEXZ.js";
+} from "./chunk-44GEHNZP.js";
 import {
+  CONTENT_GUTTER,
   ICONS,
   ICON_SIZES,
   Icon,
@@ -29,7 +29,7 @@ import {
   SCROLL_HINT_Y,
   SCROLL_HINT_Y_MARK,
   ScrollHintXMark
-} from "./chunk-BAW3RIMF.js";
+} from "./chunk-ID7VBGJA.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";

package/dist/marketing.d.mts

@@ -22,16 +22,23 @@ interface MarketingHeaderProps {
      * Visual variant:
      *   - "light" (default): white card bg, dark text
      *   - "dark": dark glassmorphic bg, light text (v4 marketing pages)
+     *   - "night": night glass over a night hero, directly before a
+     *     `Band surface="night"`: the hero runs under it, and it reads in both
+     *     schemes. Its actions are `MarketingCta ground="dark"`.
      */
-    variant?: 'light' | 'dark';
+    variant?: 'light' | 'dark' | 'night';
 }
 /**
  * Marketing site header with logo, navigation, and CTA actions.
  * Sticky top navigation bar for product landing pages.
  *
- * Two variants:
+ * Three variants:
  *   light — standard white bg for app pages
  *   dark — glassmorphic dark bg for the v4 marketing landing
+ *   night — night glass over a night hero (#5980), on its own night scope
+ *     (`data-surface="night"`), so plain tokens read and nothing inverts. A
+ *     `Band surface="night"` directly after it runs under it, so the scene shows
+ *     through the bar; its drawer stands on the same scope.
  *
  * #5948: below `md` the links and actions fold into the library's one phone
  * drawer (`NavbarMenu`), in both variants. The drawer stands on the card

package/dist/marketing.js

@@ -3,10 +3,10 @@ import {
   Button,
   Container,
   NavbarMenu
-} from "./chunk-PKP3ZIRB.js";
+} from "./chunk-I5DQCG6D.js";
 import {
   ScrollHintXMark
-} from "./chunk-BAW3RIMF.js";
+} from "./chunk-ID7VBGJA.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";
@@ -15,11 +15,13 @@ import {
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
+var NIGHT_GROUND = "-mb-16 justify-between border-b border-border bg-night-0/80 backdrop-blur-md";
 var ON_DARK_GROUND = "text-background dark:text-foreground";
 var DARK_MENU_BUTTON = cn(
   ON_DARK_GROUND,
   "hover:bg-background/10 hover:text-background dark:hover:bg-foreground/10 dark:hover:text-foreground"
 );
+var NIGHT_MENU_BUTTON = "size-11";
 var FOLDED_AWAY = "md:invisible md:absolute md:w-0 md:overflow-hidden";
 var px = (value) => parseFloat(value) || 0;
 function useFold(refs, actionsHost, hasLinks) {
@@ -69,6 +71,8 @@ function MarketingHeader({
   variant = "light"
 }) {
   const isDark = variant === "dark";
+  const isNight = variant === "night";
+  const isGlass = isDark || isNight;
   const hasLinks = navItems.length > 0;
   const bar = React.useRef(null);
   const brand = React.useRef(null);
@@ -109,9 +113,11 @@ function MarketingHeader({
       ref: bar,
       "data-testid": "marketing-header",
       "data-folded": folded ? "" : void 0,
+      "data-surface": isNight ? "night" : void 0,
+      "data-marketing-header": isNight ? "night" : void 0,
       className: cn(
         "sticky top-0 z-50 flex h-16 items-center px-6 lg:px-12",
-        isDark ? "justify-between border-b border-primary-foreground/[0.06] bg-foreground/85 backdrop-blur-md dark:bg-background/85" : "border-b border-border bg-card dark:border-border dark:bg-card",
+        isNight ? NIGHT_GROUND : isDark ? "justify-between border-b border-primary-foreground/[0.06] bg-foreground/85 backdrop-blur-md dark:bg-background/85" : "border-b border-border bg-card dark:border-border dark:bg-card",
         className
       ),
       children: [
@@ -136,7 +142,7 @@ function MarketingHeader({
             ref: nav,
             className: cn(
               "hidden min-w-0 flex-1 overflow-x-clip md:flex",
-              isDark ? "ml-6" : "ml-6 lg:ml-12",
+              isGlass ? "ml-6" : "ml-6 lg:ml-12",
               folded && FOLDED_AWAY
             ),
             children: /* @__PURE__ */ jsx(
@@ -145,7 +151,7 @@ function MarketingHeader({
                 ref: links,
                 className: cn(
                   "flex w-max items-center gap-4 lg:gap-8",
-                  isDark && "mx-auto"
+                  isGlass && "mx-auto"
                 ),
                 children: navItems.map((item) => /* @__PURE__ */ jsx(
                   "a",
@@ -153,7 +159,10 @@ function MarketingHeader({
                     href: item.href,
                     className: cn(
                       "whitespace-nowrap text-sm font-medium no-underline transition-colors",
-                      isDark ? "flex min-h-[44px] items-center text-background/70 hover:text-background dark:text-foreground/70 dark:hover:text-foreground" : item.active ? "text-primary-text font-semibold" : "text-muted-foreground hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground"
+                      isNight ? cn(
+                        "flex min-h-[44px] items-center hover:text-foreground",
+                        item.active ? "font-semibold text-foreground" : "text-muted-foreground"
+                      ) : isDark ? "flex min-h-[44px] items-center text-background/70 hover:text-background dark:text-foreground/70 dark:hover:text-foreground" : item.active ? "text-primary-text font-semibold" : "text-muted-foreground hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground"
                     ),
                     children: item.label
                   },
@@ -172,14 +181,22 @@ function MarketingHeader({
               hasLinks ? "ml-6" : "ml-auto pl-6",
               folded && FOLDED_AWAY
             ),
-            children: /* @__PURE__ */ jsx("div", { ref: actionsHome, className: "flex w-max items-center gap-3", children: actionsHost ? createPortal(actions, actionsHost) : actions })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: actionsHome,
+                className: "flex w-max items-center gap-3 whitespace-nowrap",
+                children: actionsHost ? createPortal(actions, actionsHost) : actions
+              }
+            )
           }
         ),
         (hasLinks || actions) && /* @__PURE__ */ jsx(
           NavbarMenu,
           {
             folded,
-            triggerClassName: isDark ? DARK_MENU_BUTTON : void 0,
+            triggerClassName: isDark ? DARK_MENU_BUTTON : isNight ? NIGHT_MENU_BUTTON : void 0,
+            surface: isNight ? variant : void 0,
             links: hasLinks ? navItems.map((item) => /* @__PURE__ */ jsx(
               "a",
               {

package/dist/material-art.d.mts

@@ -103,23 +103,35 @@ interface ArtText extends ArtFilled {
     copy: string;
 }
 type ArtNode = ArtGroup | ArtPath | ArtRect | ArtCircle | ArtEllipse | ArtLine | ArtPoly | ArtText;
-/** One SVG: `0 0 width height`, covering its box. */
+/** Where a frame stays when its box has another shape. */
+type ArtAnchor = 'top' | 'center' | 'bottom' | 'right';
+/** `cover` fills the box and may cut the frame; `contain` keeps all of it. */
+type ArtFit = 'cover' | 'contain';
+/** `phone`/`desktop` cut at `md`; `stack`/`side`, a `HeroScene`'s subject, cut at `lg`. */
+type ArtOnly = 'phone' | 'desktop' | 'stack' | 'side';
+/** One SVG: `0 0 width height`, in its box as `fit` says. */
 interface ArtFrame {
     width: number;
     height: number;
     /** Which part stays in view when the box's shape differs. */
-    anchor: 'top' | 'center' | 'bottom' | 'right';
-    /** Show only on a phone or only from `md` up. */
-    only?: 'phone' | 'desktop';
+    anchor: ArtAnchor;
+    /** Absent: `cover`, as all art drew before #5978. */
+    fit?: ArtFit;
+    /** Show on one side of a cut only. */
+    only?: ArtOnly;
     nodes: readonly ArtNode[];
 }
-/** A piece of art: one frame, or a phone frame and a desktop frame. */
+/** A piece of art: one frame, or a `phone` and `desktop` pair, or a `stack` and `side` pair. */
 interface ArtTree {
     frames: readonly ArtFrame[];
 }
+/** The one writer of how a frame sits in its box, for `Art` and `SkyField`. */
+declare const preserveOf: (anchor: ArtAnchor, fit?: ArtFit) => string;
+/** The one writer of where frames are cut, for `Art` and `SkyField`. */
+declare const frameClass: (only: ArtOnly | undefined) => string;
 /** Draws a piece of art, for a `Figure`'s slot or a mark. */
 declare function Art({ tree }: {
     tree: ArtTree;
 }): ReactElement;
 
-export { Art, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFrame, type ArtGroup, type ArtLine, type ArtNode, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree };
+export { Art, type ArtAnchor, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFit, type ArtFrame, type ArtGroup, type ArtLine, type ArtNode, type ArtOnly, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree, frameClass, preserveOf };

package/dist/material-art.js

@@ -43,15 +43,19 @@ var STROKE = {
 // src/material/art.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
 var ANCHOR = {
-  top: "xMidYMin slice",
-  center: "xMidYMid slice",
-  bottom: "xMidYMax slice",
-  right: "xMaxYMid slice"
+  top: "xMidYMin",
+  center: "xMidYMid",
+  bottom: "xMidYMax",
+  right: "xMaxYMid"
 };
+var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${fit === "contain" ? "meet" : "slice"}`;
 var SHOWN = {
   phone: "size-full md:hidden",
-  desktop: "hidden size-full md:block"
+  desktop: "hidden size-full md:block",
+  stack: "size-full lg:hidden",
+  side: "hidden size-full lg:block"
 };
+var frameClass = (only) => only ? SHOWN[only] : "size-full";
 function classOf(table, paint, attribute) {
   if (!Object.prototype.hasOwnProperty.call(table, paint))
     throw new Error(
@@ -191,14 +195,16 @@ function Art({ tree }) {
     "svg",
     {
       viewBox: `0 0 ${frame.width} ${frame.height}`,
-      preserveAspectRatio: ANCHOR[frame.anchor],
+      preserveAspectRatio: preserveOf(frame.anchor, frame.fit),
       "aria-hidden": "true",
-      className: frame.only ? SHOWN[frame.only] : "size-full",
+      className: frameClass(frame.only),
       children: frame.nodes.map(render)
     },
     i
   )) });
 }
 export {
-  Art
+  Art,
+  frameClass,
+  preserveOf
 };