@godxjp/ui 13.13.0 → 13.14.0

package/dist/components/feedback/sonner.js

@@ -34,9 +34,13 @@ function Toaster({ ...props }) {
         loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })
       },
       style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)",
+        // Color tokens are raw HSL triplets (consumed as hsl(var(--token)));
+        // sonner uses these vars verbatim as CSS colors, so wrap with hsl()
+        // here — unwrapped they are invalid values and the toast renders
+        // transparent.
+        "--normal-bg": "hsl(var(--popover))",
+        "--normal-text": "hsl(var(--popover-foreground))",
+        "--normal-border": "hsl(var(--border))",
         "--border-radius": "var(--radius)"
       },
       position: "bottom-right",

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react/jsx-runtime").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -1,7 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants";
+function scrollParent(el) {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+function useFooterReveal(enabled) {
+  const headerRef = useRef(null);
+  const [revealed, setRevealed] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    const el = headerRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => setRevealed(!entry.isIntersecting),
+      { root: scrollParent(el), threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return { headerRef, revealed: enabled && revealed };
+}
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });
 }
@@ -15,23 +41,28 @@ function PageContainerRoot({
   density = "default",
   variant = "default",
   stickyFooter = false,
+  footerReveal = "always",
   fill = false,
   children,
   className
 }) {
+  const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
+  const { headerRef, revealed } = useFooterReveal(reveal);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
         densityClass[density],
         pageContainerVariantClass[variant],
         stickyFooter && "ui-page-container--sticky-footer",
+        reveal && "ui-page-container--reveal-footer",
         fill && "ui-page-container--fill",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "ui-page-header", children: [
+        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
           breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
             const isLast = i === breadcrumb.length - 1;
             return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [

package/dist/props/components/layout.prop.d.ts

@@ -14,6 +14,16 @@ export type PageContainerProp = {
     variant?: PageContainerVariantProp;
     /** Pin footer to viewport bottom on scroll — pairs well with `variant="narrow"`. */
     stickyFooter?: boolean;
+    /**
+     * When the footer is sticky, control WHEN it shows. `"always"` (default)
+     * keeps it pinned the whole time. `"onScroll"` hides it until the header
+     * (title + `extra` actions) scrolls out of view, then slides it up — the
+     * standard edit/create "save bar" so the primary actions stay reachable as
+     * the form scrolls, without cluttering the top. The footer stays mounted
+     * (no layout reflow → no jitter); observed against the nearest scroll
+     * container.
+     */
+    footerReveal?: "always" | "onScroll";
     /**
      * Grow the body to fill the remaining shell height. Default `false` (top-packed,
      * content-height — short pages leave no stretched void, gh#103). Enable for a

package/dist/styles/layout.css

@@ -308,6 +308,31 @@
     background-color: hsl(var(--background));
   }
 
+  /* footerReveal="onScroll": the sticky footer stays mounted (reserving its
+   * flow space, so toggling never reflows the body → no scroll jitter) but is
+   * slid below the fold until the header leaves the viewport, then slides up.
+   * data-revealed is toggled by an IntersectionObserver on the header. */
+  .ui-page-container--reveal-footer .ui-page-footer {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform 200ms ease-out,
+      opacity 200ms ease-out;
+  }
+
+  .ui-page-container--reveal-footer[data-revealed="true"] .ui-page-footer {
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-page-container--reveal-footer .ui-page-footer {
+      transition: none;
+    }
+  }
+
   .ui-page-header {
     display: flex;
     flex-direction: column;

package/dist/tokens/components/control.css

@@ -62,6 +62,14 @@
   --search-input-end-padding: calc(
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
   );
+
+  --choice-description-font-size: var(--font-size-xs);
+  --color-picker-hex-font-size: var(--font-size-xs);
+  --command-group-heading-font-size: var(--font-size-xs);
+  --search-input-label-font-size: var(--font-size-xs);
+  --tag-input-chip-font-size: var(--font-size-xs);
+  --toggle-sm-font-size: var(--font-size-xs);
+  --button-sm-font-size: var(--font-size-xs);
 }
 
 /* Rule #24 — on touch devices (coarse pointer) interactive controls keep a ≥44px tap target
@@ -72,11 +80,4 @@
     --control-height-compact: 2.75rem;
     --control-height-default: 2.75rem;
   }
-  --choice-description-font-size: var(--font-size-xs);
-  --color-picker-hex-font-size: var(--font-size-xs);
-  --command-group-heading-font-size: var(--font-size-xs);
-  --search-input-label-font-size: var(--font-size-xs);
-  --tag-input-chip-font-size: var(--font-size-xs);
-  --toggle-sm-font-size: var(--font-size-xs);
-  --button-sm-font-size: var(--font-size-xs);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.13.0",
+  "version": "13.14.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,