hazo_ui 6.14.0 → 6.16.0

package/CHANGE_LOG.md

@@ -5,6 +5,52 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.16.0 (2026-10-15)
+
+### Added — Tailwind v3 preset + responsive AppHeader
+
+- **`hazo_ui/tailwind-preset`** — Tailwind CSS v3 preset that maps all
+  hazo_theme Tier-2 semantic tokens (background, primary, sidebar, etc.)
+  and Tier-3 chrome tokens (navbar, footer, footer-public, footer-app,
+  toolbar) to `hsl(var(--token) / <alpha-value>)` color utilities. Also
+  provides `borderRadius` mappings for `--radius`. Consumers add
+  `presets: [require('hazo_ui/tailwind-preset')]` to their
+  `tailwind.config` instead of hand-rolling 100+ color entries.
+
+- **Responsive `AppHeader`** — below the `md:` breakpoint the navItems
+  slot collapses behind a hamburger button that opens a slide-up drawer
+  (vaul). Actions (profile menu, etc.) remain visible at all widths. No
+  API change; existing consumers get mobile support for free.
+
+## v6.15.0 (2026-10-13)
+
+### Added — `useHazoEvent` hook
+
+- `useHazoEvent(pkg, event, handler)` subscribes to the `hazo:<pkg>:<event>`
+  `CustomEvent` dispatched via hazo_core's `dispatchHazoEvent` (requires
+  `hazo_core ^2.5.0`). Stable-ref `useEffect` listener (re-subscribing a new
+  `handler` on every render never adds a duplicate listener), cleans up on
+  unmount. The subscribe-side counterpart of the `hazo:<pkg>:<event>`
+  convention — lets a host app react to a hazo_* package's internal state
+  change with zero coupling. First consumer: Kinstripe's admin feedback
+  badges reacting to hazo_feedback's `status-changed` event.
+
+## v6.14.1 (2026-10-13)
+
+### Fixed — `useFullscreen` silently did nothing when the native API rejected the request
+
+- `enter()` only fell back to CSS-driven pseudo-fullscreen when
+  `requestFullscreen` was entirely absent (iOS Safari). When the API exists
+  but the browser *rejects* the call — most commonly a cross-origin iframe
+  embed missing `allow="fullscreen"` (`SecurityError`) — the rejection was
+  silently swallowed with no fallback, so the fullscreen button appeared to
+  do nothing.
+- `exit()` and `toggle()` had matching bugs once pseudo-fullscreen could be
+  reached this way: both branched on `document.fullscreenElement` (always
+  `null` in pseudo-fullscreen), so `exit()` could never clear the state and
+  `toggle()` would call `enter()` again instead of exiting. Both now branch
+  on the hook's own tracked `isFullscreen` state instead.
+
 ## v6.14.0 (2026-10-04)
 
 ### Added — German (`de`) catalog and LocalePicker demo

package/dist/index.cjs

@@ -877,6 +877,8 @@ var en_default = {
   "locale_picker.change_language": "Change language",
   "app_logo.alt_fallback": "Logo",
   "app_header.aria_label": "Application header",
+  "app_header.menu_label": "Menu",
+  "app_header.nav_title": "Navigation",
   "skeleton.loading_content": "Loading content",
   "spinner.loading": "Loading",
   "spinner.loading_text": "Loading...",
@@ -9371,32 +9373,27 @@ function useFullscreen(elementRef) {
     try {
       await get_target().requestFullscreen();
     } catch {
+      set_is_fullscreen(true);
     }
   }, [supported, get_target]);
   const exit = React27.useCallback(async () => {
     if (typeof document === "undefined") return;
-    if (!supported) {
-      set_is_fullscreen(false);
+    if (document.fullscreenElement) {
+      try {
+        await document.exitFullscreen();
+      } catch {
+      }
       return;
     }
-    if (!document.fullscreenElement) return;
-    try {
-      await document.exitFullscreen();
-    } catch {
-    }
-  }, [supported]);
+    set_is_fullscreen(false);
+  }, []);
   const toggle = React27.useCallback(async () => {
-    if (!supported) {
-      if (is_fullscreen) await exit();
-      else await enter();
-      return;
-    }
-    if (document.fullscreenElement) {
+    if (is_fullscreen) {
       await exit();
     } else {
       await enter();
     }
-  }, [supported, is_fullscreen, enter, exit]);
+  }, [is_fullscreen, enter, exit]);
   return { isFullscreen: is_fullscreen, enter, exit, toggle };
 }
 function use_wake_lock(active) {
@@ -12532,6 +12529,7 @@ function Logo({
 }
 function AppHeader({ identity, homeHref, navItems, actions, className }) {
   const t = useHazoUiT();
+  const [drawerOpen, setDrawerOpen] = React27__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
@@ -12551,9 +12549,34 @@ function AppHeader({ identity, homeHref, navItems, actions, className }) {
               href: homeHref
             }
           ),
-          navItems
+          navItems && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center", children: navItems })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: actions })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          navItems && /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "md:hidden rounded-md p-1.5 hover:bg-navbar-active/10",
+                "aria-label": t("app_header.menu_label"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: t("app_header.nav_title") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "p-4 [&_nav]:flex-col [&_nav]:gap-2 [&_nav]:items-stretch",
+                  onClick: (e) => {
+                    if (e.target.closest("a")) setDrawerOpen(false);
+                  },
+                  children: navItems
+                }
+              )
+            ] })
+          ] })
+        ] })
       ]
     }
   );
@@ -13189,6 +13212,18 @@ function LocalePicker({
   ] });
 }
 LocalePicker.displayName = "LocalePicker";
+function useHazoEvent(pkg, event, handler) {
+  const handler_ref = React27.useRef(handler);
+  handler_ref.current = handler;
+  React27.useEffect(() => {
+    const event_name = `hazo:${pkg}:${event}`;
+    const listener = (e) => {
+      handler_ref.current(e.detail);
+    };
+    window.addEventListener(event_name, listener);
+    return () => window.removeEventListener(event_name, listener);
+  }, [pkg, event]);
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -13427,6 +13462,7 @@ exports.useDebounce = useDebounce;
 exports.useErrorDisplay = useErrorDisplay;
 exports.useEtaProgress = useEtaProgress;
 exports.useFullscreen = useFullscreen;
+exports.useHazoEvent = useHazoEvent;
 exports.useHazoUiT = useHazoUiT;
 exports.useIsMobile = useIsMobile;
 exports.useLoadingState = useLoadingState;