@warmio/ui 1.1.0 → 1.2.0

package/README.md

@@ -19,10 +19,11 @@ deployment permission to publish packages.
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The `1.1.0` public surface contains the Warm badge, logo, Button, Text and `StackedDisplay`,
-DropdownMenu, Sheet, and complete responsive Sidebar family including `SidebarBrand` and
-`SidebarAccountTrigger`. Styling is sealed: use documented semantic presentations and layout
-wrappers, never `className` or `style` overrides. DropdownMenu interaction feedback requires the
-exact public peer `cuelume@0.1.0`.
+The `1.2.0` public surface contains the Warm badge, logo, Button, Text and `StackedDisplay`,
+DropdownMenu, Sheet, the complete responsive Sidebar family, and the `ProductHeader` composition.
+`ProductHeader` owns the responsive frame, breadcrumb/title semantics, leading slot, action slot,
+and optional portal targets used by Warm product shells. Styling is sealed: use documented semantic
+properties and layout wrappers, never `className` or `style` overrides. DropdownMenu interaction
+feedback requires the exact public peer `cuelume@0.1.0`.
 
 The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/chunks/chunk-4UZNCKKG.js

@@ -0,0 +1,81 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/product-header.tsx
+import { Fragment, memo } from "react";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function getTitleSegments(pageTitle, productName) {
+  return pageTitle?.split(">").reduce((segments, rawSegment) => {
+    const segment = rawSegment.trim();
+    if (!segment || segments.length === 0 && segment === productName) return segments;
+    segments.push(segment);
+    return segments;
+  }, []);
+}
+function ProductHeaderBreadcrumb({
+  pageTitle,
+  productName = "Warm"
+}) {
+  const titleSegments = getTitleSegments(pageTitle, productName);
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: productName }),
+    titleSegments?.map((segment, index) => {
+      const isLast = index === titleSegments.length - 1;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground" }),
+        isLast ? /* @__PURE__ */ jsx("h1", { "aria-current": "page", children: segment }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: segment })
+      ] }, `${segment}-${index}`);
+    })
+  ] });
+}
+var ProductHeader = memo(function ProductHeader2({
+  actions,
+  actionsTargetRef,
+  desktopShell = false,
+  leading,
+  pageTitle,
+  productName,
+  titleTargetRef,
+  visibility = "desktop"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-20 h-[var(--header-height)] shrink-0 items-center border-b border-border bg-sidebar",
+        visibility === "always" ? "flex" : visibility === "container" ? "hidden @3xl/main:flex" : "hidden md:flex",
+        desktopShell && "select-none bg-sidebar/95 supports-[backdrop-filter]:bg-sidebar/85 supports-[backdrop-filter]:backdrop-blur"
+      ),
+      "data-tauri-drag-region": desktopShell ? "deep" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: titleTargetRef,
+            className: "flex min-w-0 items-center gap-2 px-4 [&_h1]:text-sm [&_h1]:text-foreground [&:has(>[data-page-chrome-content])>[data-page-chrome-fallback]]:hidden",
+            children: [
+              leading,
+              /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, className: "contents", children: /* @__PURE__ */ jsx(ProductHeaderBreadcrumb, { pageTitle, productName }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: actionsTargetRef,
+            className: "ml-auto flex items-center gap-2 px-4 [&:has(>[data-page-chrome-content])>[data-page-chrome-fallback]]:hidden",
+            children: actions ? /* @__PURE__ */ jsx("div", { "data-page-chrome-fallback": true, className: "contents", children: actions }) : null
+          }
+        )
+      ]
+    }
+  );
+});
+ProductHeader.displayName = "ProductHeader";
+
+export {
+  ProductHeaderBreadcrumb,
+  ProductHeader
+};

package/dist/chunks/{chunk-PBTUB66J.js → chunk-UB25BRXT.js}

@@ -598,13 +598,8 @@ function SidebarFooter2({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SidebarFooter,
-    {
-      ...props,
-      className: presentation === "product" ? "border-t border-border p-2" : void 0
-    }
-  );
+  const className = presentation === "product" ? "border-t border-border p-2" : presentation === "collapsedUtilities" ? "hidden border-t border-border p-2 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center" : void 0;
+  return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, className });
 }
 function SidebarGroup2({
   className: _className,

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  StackedDisplay,
+  Text
+} from "./chunks/chunk-D25QMXJR.js";
 import {
   Badge
 } from "./chunks/chunk-ICC7GQXS.js";
@@ -22,6 +26,10 @@ import {
   Logo,
   WarmLogoIcon
 } from "./chunks/chunk-VNQVIATP.js";
+import {
+  ProductHeader,
+  ProductHeaderBreadcrumb
+} from "./chunks/chunk-4UZNCKKG.js";
 import {
   SheetClose,
   SheetContent,
@@ -48,15 +56,11 @@ import {
   SidebarMenuItem,
   SidebarProvider,
   useSidebar
-} from "./chunks/chunk-PBTUB66J.js";
+} from "./chunks/chunk-UB25BRXT.js";
 import {
   Sheet
 } from "./chunks/chunk-OWDC2VC6.js";
 import "./chunks/chunk-T2TXMN3G.js";
-import {
-  StackedDisplay,
-  Text
-} from "./chunks/chunk-D25QMXJR.js";
 import "./chunks/chunk-VIB7OX7D.js";
 export {
   Badge,
@@ -74,6 +78,8 @@ export {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Logo,
+  ProductHeader,
+  ProductHeaderBreadcrumb,
   Sheet,
   SheetClose,
   SheetContent,

package/dist/product-header.js

@@ -0,0 +1,9 @@
+import {
+  ProductHeader,
+  ProductHeaderBreadcrumb
+} from "./chunks/chunk-4UZNCKKG.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  ProductHeader,
+  ProductHeaderBreadcrumb
+};

package/dist/product-header.types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode, Ref } from 'react';
+
+export type ProductHeaderVisibility = 'always' | 'container' | 'desktop';
+
+export interface ProductHeaderBreadcrumbProps {
+  pageTitle?: string;
+  productName?: string;
+}
+
+export interface ProductHeaderProps extends ProductHeaderBreadcrumbProps {
+  actions?: ReactNode;
+  actionsTargetRef?: Ref<HTMLDivElement>;
+  desktopShell?: boolean;
+  leading?: ReactNode;
+  titleTargetRef?: Ref<HTMLDivElement>;
+  visibility?: ProductHeaderVisibility;
+}

package/dist/sidebar.js

@@ -15,7 +15,7 @@ import {
   SidebarMenuItem,
   SidebarProvider,
   useSidebar
-} from "./chunks/chunk-PBTUB66J.js";
+} from "./chunks/chunk-UB25BRXT.js";
 import "./chunks/chunk-OWDC2VC6.js";
 import "./chunks/chunk-T2TXMN3G.js";
 import "./chunks/chunk-VIB7OX7D.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warmio/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Portable, sealed React components for Warm products.",
   "license": "MIT",
   "type": "module",
@@ -45,6 +45,11 @@
       "import": "./dist/logo.js",
       "default": "./dist/logo.js"
     },
+    "./product-header": {
+      "types": "./types/product-header.d.ts",
+      "import": "./dist/product-header.js",
+      "default": "./dist/product-header.js"
+    },
     "./sidebar": {
       "types": "./types/sidebar.d.ts",
       "import": "./dist/sidebar.js",

package/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './badge.js';
 export * from './button.js';
 export * from './dropdown-menu.js';
 export * from './logo.js';
+export * from './product-header.js';
 export * from './sheet.js';
 export * from './sidebar.js';
 export * from './text.js';

package/types/product-header.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type {
+  ProductHeaderBreadcrumbProps,
+  ProductHeaderProps,
+} from '../dist/product-header.types.js';
+
+export type {
+  ProductHeaderBreadcrumbProps,
+  ProductHeaderProps,
+  ProductHeaderVisibility,
+} from '../dist/product-header.types.js';
+
+export declare function ProductHeaderBreadcrumb(props: ProductHeaderBreadcrumbProps): ReactNode;
+export declare const ProductHeader: (props: ProductHeaderProps) => ReactNode;