@alfadocs/ui-kit-debug 1.61.0 → 1.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit-debug",
-  "version": "1.61.0",
+  "version": "1.63.0",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe. (debug build — identical runtime to @alfadocs/ui-kit, ships source maps for symbolication).",
   "license": "BUSL-1.1",

package/dist/_chunks/app-frame-CqmDh2v5.js

@@ -1,134 +0,0 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as S, useRef as k, useState as _, useEffect as A } from "react";
-import { c as a } from "./index-D2ZczOXr.js";
-import { useTranslation as y } from "react-i18next";
-import { S as E } from "./scroll-area-CY5SLYNw.js";
-const L = a(
-  [
-    "ds:h-dvh ds:w-full",
-    "ds:flex ds:flex-col",
-    "ds:overflow-hidden",
-    "ds:bg-[var(--background)] ds:text-[color:var(--foreground)]",
-    // Elevation cascade driven by main's scrollTop (data-app-scrolled).
-    // Mirrors the Header's native scroll-linked recipe (see `Brand/Shadows`
-    // — one tier up from rest, never two) so the banner looks identical
-    // whether it's in a viewport-scroll context (sticky) or slotted into
-    // AppFrame where <main> owns the scroll.
-    "ds:data-[app-scrolled=true]:[&_[role=banner]]:shadow-[var(--shadow-md)]",
-    "ds:data-[app-scrolled=true]:[&_[role=banner]]:[border-block-end-color:var(--border)]",
-    // Forced-colors: UA strips box-shadow, so the border is the only
-    // separation cue. Always render it.
-    "ds:forced-colors:[&_[role=banner]]:[border-block-end-color:CanvasText]",
-    // Print: strip shadow, keep border so the banner still reads on paper.
-    "ds:print:[&_[role=banner]]:shadow-none",
-    "ds:print:[&_[role=banner]]:[border-block-end-color:var(--border)]"
-  ].join(" ")
-), R = a(
-  ["ds:flex ds:flex-1 ds:items-stretch ds:min-h-0"].join(" ")
-), T = a(
-  [
-    // Hidden in the inline flow on mobile — consumers should flip their
-    // Sidebar into overlay mode at narrow viewports, where it portals via
-    // Radix Dialog and therefore renders outside AppFrame entirely.
-    "ds:hidden ds:md:flex",
-    "ds:shrink-0",
-    // The rail fills the row's full height because the row is `flex
-    // items-stretch`. No sticky needed — the row itself never scrolls.
-    "ds:h-full"
-  ].join(" ")
-), C = a(
-  ["ds:hidden ds:md:flex", "ds:shrink-0", "ds:h-full"].join(" ")
-), F = a(
-  [
-    "ds:flex-1 ds:min-w-0",
-    "ds:flex ds:flex-col ds:min-h-0",
-    // Focusable via the header's SkipLink — tabIndex={-1} is on the
-    // element itself so keyboard users land inside the main region.
-    "ds:focus:outline-none"
-  ].join(" ")
-), M = a("", {
-  variants: {
-    padded: {
-      true: [
-        "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
-        "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
-      ].join(" "),
-      false: ""
-    }
-  },
-  defaultVariants: { padded: !0 }
-}), q = a("ds:shrink-0"), z = S(
-  ({
-    header: m,
-    sidebar: p,
-    children: f,
-    endSidebar: n,
-    footer: d,
-    mainId: o = "main-content",
-    mainAriaLabel: u,
-    padded: v = !0,
-    className: b,
-    mainClassName: h,
-    ...x
-  }, w) => {
-    const { t: N } = y("ui"), g = u ?? N("navigation.main.label", "Main content"), l = k(null), [V, j] = _(!1);
-    return A(() => {
-      const s = l.current;
-      if (!s) return;
-      const r = () => {
-        const t = s.scrollTop > 0;
-        j((i) => i === t ? i : t);
-      };
-      return r(), s.addEventListener("scroll", r, { passive: !0 }), () => s.removeEventListener("scroll", r);
-    }, []), /* @__PURE__ */ c(
-      "div",
-      {
-        ref: w,
-        "data-app-scrolled": V ? "true" : void 0,
-        "data-component": "app-frame",
-        className: L({ className: b }),
-        ...x,
-        children: [
-          m,
-          /* @__PURE__ */ c("div", { className: R(), "data-app-frame-slot": "row", children: [
-            /* @__PURE__ */ e("div", { className: T(), "data-app-frame-slot": "sidebar", children: p }),
-            /* @__PURE__ */ e(
-              "main",
-              {
-                id: o,
-                tabIndex: -1,
-                "aria-label": g,
-                className: F({ className: h }),
-                children: /* @__PURE__ */ e(
-                  E,
-                  {
-                    ref: l,
-                    orientation: "vertical",
-                    role: "group",
-                    "aria-labelledby": o,
-                    className: "ds:flex-1 ds:min-h-0",
-                    children: /* @__PURE__ */ e("div", { className: M({ padded: v }), children: f })
-                  }
-                )
-              }
-            ),
-            n ? /* @__PURE__ */ e(
-              "div",
-              {
-                className: C(),
-                "data-app-frame-slot": "end-sidebar",
-                children: n
-              }
-            ) : null
-          ] }),
-          d ? /* @__PURE__ */ e("div", { className: q(), "data-app-frame-slot": "footer", children: d }) : null
-        ]
-      }
-    );
-  }
-);
-z.displayName = "AppFrame";
-export {
-  z as A
-};
-//# sourceMappingURL=app-frame-CqmDh2v5.js.map

package/dist/_chunks/app-frame-CqmDh2v5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-frame-CqmDh2v5.js","sources":["../../src/components/app-frame/app-frame.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* AppFrame — the always-present application shell.                      */\n/*                                                                       */\n/* Layout                                                                */\n/* ------                                                                */\n/*                                                                       */\n/*   ┌───────────────────────────────────────────────────────────┐       */\n/*   │  Header (100% inline-size, block-start)                    │       */\n/*   ├──────────┬──────────────────────────────────┬──────────────┤       */\n/*   │ Sidebar  │  Main (<main>)                    │ endSidebar   │       */\n/*   │          │                                   │ (optional)   │       */\n/*   │          │                                   │              │       */\n/*   ├──────────┴──────────────────────────────────┴──────────────┤       */\n/*   │  Footer (optional)                                         │       */\n/*   └───────────────────────────────────────────────────────────┘       */\n/*                                                                       */\n/* Header spans the full inline-size of the shell. Sidebar sits beneath */\n/* the header on the inline-start edge and shares the row with <main>.  */\n/* `endSidebar`, when provided, sits on the inline-end edge of the same */\n/* row — used for co-pilot / assistant panels (e.g. AliaSidebar) that    */\n/* should dock opposite the nav rail. Footer, when provided, spans the  */\n/* full inline-size at the block-end.                                   */\n/*                                                                       */\n/* Responsive behaviour                                                  */\n/* ---------------------                                                 */\n/* ≥ md viewports: the sidebar slot renders inline-start of the row      */\n/*   below the header, sticky to the header's block-end, full remaining */\n/*   viewport height.                                                   */\n/* < md viewports: the sidebar slot is hidden from the inline flow.     */\n/*   Consumers should control their sidebar's `state` to `'overlay'`    */\n/*   on small viewports (the Sidebar portals via Radix Dialog so it     */\n/*   renders outside AppFrame's subtree in that mode) and wire the       */\n/*   `<HeaderMenuButton>` to toggle it.                                 */\n/* -------------------------------------------------------------------- */\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { ScrollArea } from '../scroll-area/scroll-area';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\n// Canonical app-shell layout: the root is a VIEWPORT-SIZED flex-col with\n// its own overflow clamp. Header and the row fill it together. The only\n// thing that scrolls is the content region — a kit ScrollArea nested inside\n// <main> — so the header never leaves the top and the sidebar never needs\n// position: sticky. (Using a ScrollArea rather than letting <main> scroll\n// natively gives the main content the same 8px branded overlay scrollbar as\n// the Sidebar and ToolRail, instead of the wider OS-native bar.) This matches\n// the way Gmail / Linear / Notion frame their app surfaces and avoids the\n// flex-item-sticky edge cases that position: sticky has inside a\n// column-flex container.\n//\n// Because the viewport itself never scrolls in this model, the Header's\n// built-in IntersectionObserver (which watches a sentinel against the\n// viewport) cannot detect scroll. AppFrame instead tracks the main\n// ScrollArea viewport's scrollTop, reflects it onto the root via\n// `data-app-scrolled`, and the descendant selectors below drive the\n// `<header role=\"banner\">` border and shadow — producing the same elevation\n// the Header would show in a viewport-scroll context.\nconst rootVariants = cva(\n  [\n    'ds:h-dvh ds:w-full',\n    'ds:flex ds:flex-col',\n    'ds:overflow-hidden',\n    'ds:bg-[var(--background)] ds:text-[color:var(--foreground)]',\n    // Elevation cascade driven by main's scrollTop (data-app-scrolled).\n    // Mirrors the Header's native scroll-linked recipe (see `Brand/Shadows`\n    // — one tier up from rest, never two) so the banner looks identical\n    // whether it's in a viewport-scroll context (sticky) or slotted into\n    // AppFrame where <main> owns the scroll.\n    'ds:data-[app-scrolled=true]:[&_[role=banner]]:shadow-[var(--shadow-md)]',\n    'ds:data-[app-scrolled=true]:[&_[role=banner]]:[border-block-end-color:var(--border)]',\n    // Forced-colors: UA strips box-shadow, so the border is the only\n    // separation cue. Always render it.\n    'ds:forced-colors:[&_[role=banner]]:[border-block-end-color:CanvasText]',\n    // Print: strip shadow, keep border so the banner still reads on paper.\n    'ds:print:[&_[role=banner]]:shadow-none',\n    'ds:print:[&_[role=banner]]:[border-block-end-color:var(--border)]',\n  ].join(' '),\n);\n\nconst rowVariants = cva(\n  ['ds:flex ds:flex-1 ds:items-stretch ds:min-h-0'].join(' '),\n);\n\nconst sidebarSlotVariants = cva(\n  [\n    // Hidden in the inline flow on mobile — consumers should flip their\n    // Sidebar into overlay mode at narrow viewports, where it portals via\n    // Radix Dialog and therefore renders outside AppFrame entirely.\n    'ds:hidden ds:md:flex',\n    'ds:shrink-0',\n    // The rail fills the row's full height because the row is `flex\n    // items-stretch`. No sticky needed — the row itself never scrolls.\n    'ds:h-full',\n  ].join(' '),\n);\n\n// Inline-end slot — same hide-on-mobile behaviour as the nav rail because\n// a 22rem co-pilot panel can't share a phone viewport. Consuming apps\n// should flip Alia (or any inline-end panel) to its overlay/popout mode\n// at narrow viewports.\nconst endSidebarSlotVariants = cva(\n  ['ds:hidden ds:md:flex', 'ds:shrink-0', 'ds:h-full'].join(' '),\n);\n\n// <main> is the landmark + skip-link target, but it NO LONGER owns the scroll.\n// A kit `ScrollArea` inside it owns the scroll instead, so the main content's\n// scrollbar is the same 8px branded overlay as the Sidebar and ToolRail\n// (both ScrollArea) rather than the wider OS-native bar that made \"the general\n// scroll area look bigger\". <main> is a flex-col so the ScrollArea (flex-1\n// min-h-0) fills its height; the body still never scrolls — only the viewport.\nconst mainVariants = cva(\n  [\n    'ds:flex-1 ds:min-w-0',\n    'ds:flex ds:flex-col ds:min-h-0',\n    // Focusable via the header's SkipLink — tabIndex={-1} is on the\n    // element itself so keyboard users land inside the main region.\n    'ds:focus:outline-none',\n  ].join(' '),\n);\n\n// Inner content wrapper INSIDE the ScrollArea viewport. It owns the `padded`\n// inset so the scrollbar sits at the viewport's true edge (matching the\n// ScrollArea convention used by the rail/sidebar) and the padding scrolls\n// with the content.\nconst mainContentVariants = cva('', {\n  variants: {\n    padded: {\n      true: [\n        'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n        'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n      ].join(' '),\n      false: '',\n    },\n  },\n  defaultVariants: { padded: true },\n});\n\nconst footerSlotVariants = cva('ds:shrink-0');\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface AppFrameProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof mainContentVariants> {\n  /** `<Header>` instance rendered full-width at the block-start of the shell. */\n  header: ReactNode;\n  /** `<Sidebar>` instance rendered inline-start of the row beneath the header on ≥ md viewports. */\n  sidebar: ReactNode;\n  /** Main content — rendered inside a `<main>` landmark. */\n  children: ReactNode;\n  /** Optional inline-end docked panel (typically `<AliaSidebar />`) sharing the same row as the main region on ≥ md viewports. Hidden on narrow viewports — consumers should flip to an overlay/popout mode there. */\n  endSidebar?: ReactNode;\n  /** Optional block-end footer — renders full-width below the sidebar + main row. */\n  footer?: ReactNode;\n  /**\n   * Id applied to the `<main>` element so `<HeaderSkipLink href=\"#{mainId}\" />`\n   * can target it. Must be a valid HTML id (letters, digits, `-`, `_`, no\n   * spaces). Defaults to `'main-content'`.\n   */\n  mainId?: string;\n  /**\n   * Override the landmark's accessible name. Defaults to the i18n'd\n   * `ui.navigation.main.label` (\"Main content\").\n   */\n  mainAriaLabel?: string;\n  /** Extra classes applied to the `<main>` landmark. */\n  mainClassName?: string;\n}\n\nexport const AppFrame = forwardRef<HTMLDivElement, AppFrameProps>(\n  (\n    {\n      header,\n      sidebar,\n      children,\n      endSidebar,\n      footer,\n      mainId = 'main-content',\n      mainAriaLabel,\n      padded = true,\n      className,\n      mainClassName,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const mainLabel =\n      mainAriaLabel ?? t('navigation.main.label', 'Main content');\n\n    // The ScrollArea inside <main> owns the scroll, so the header-elevation\n    // cascade (data-app-scrolled) is driven off the ScrollArea's viewport\n    // rather than <main>. ScrollArea forwards its ref to that viewport.\n    const mainViewportRef = useRef<HTMLDivElement>(null);\n    const [mainScrolled, setMainScrolled] = useState(false);\n    useEffect(() => {\n      const viewport = mainViewportRef.current;\n      if (!viewport) return;\n      const sync = () => {\n        const next = viewport.scrollTop > 0;\n        setMainScrolled((prev) => (prev === next ? prev : next));\n      };\n      sync();\n      viewport.addEventListener('scroll', sync, { passive: true });\n      return () => viewport.removeEventListener('scroll', sync);\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        data-app-scrolled={mainScrolled ? 'true' : undefined}\n        data-component=\"app-frame\"\n        className={rootVariants({ className })}\n        {...rest}\n      >\n        {/* Header is rendered as a direct flex child — NOT wrapped in a slot\n            div — so it sits at the block-start of the shell. The root's\n            `overflow-hidden` keeps it pinned; no `position: sticky` needed. */}\n        {header}\n        <div className={rowVariants()} data-app-frame-slot=\"row\">\n          <div className={sidebarSlotVariants()} data-app-frame-slot=\"sidebar\">\n            {sidebar}\n          </div>\n          <main\n            id={mainId}\n            tabIndex={-1}\n            aria-label={mainLabel}\n            className={mainVariants({ className: mainClassName })}\n          >\n            {/* A tab stop for keyboard scrolling, named by the landmark. A group,\n                not a region: an <aside> in the content must sit directly under\n                <main> (axe landmark-complementary-is-top-level). */}\n            <ScrollArea\n              ref={mainViewportRef}\n              orientation=\"vertical\"\n              role=\"group\"\n              aria-labelledby={mainId}\n              className=\"ds:flex-1 ds:min-h-0\"\n            >\n              <div className={mainContentVariants({ padded })}>{children}</div>\n            </ScrollArea>\n          </main>\n          {endSidebar ? (\n            <div\n              className={endSidebarSlotVariants()}\n              data-app-frame-slot=\"end-sidebar\"\n            >\n              {endSidebar}\n            </div>\n          ) : null}\n        </div>\n        {footer ? (\n          <div className={footerSlotVariants()} data-app-frame-slot=\"footer\">\n            {footer}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nAppFrame.displayName = 'AppFrame';\n"],"names":["rootVariants","cva","rowVariants","sidebarSlotVariants","endSidebarSlotVariants","mainVariants","mainContentVariants","footerSlotVariants","AppFrame","forwardRef","header","sidebar","children","endSidebar","footer","mainId","mainAriaLabel","padded","className","mainClassName","rest","ref","t","useTranslation","mainLabel","mainViewportRef","useRef","mainScrolled","setMainScrolled","useState","useEffect","viewport","sync","next","prev","jsxs","jsx","ScrollArea"],"mappings":"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"}