@keboola/design 11.0.0 → 11.0.1

package/dist/Navbar-t16usFZQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar-t16usFZQ.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-50',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-accent',\n          'tw:aria-expanded:bg-sidebar-accent',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Pairs with `bg-sidebar` — required, not cosmetic.\n    // - Without it `currentColor` inside the bar resolves to the UA's black, invisible\n    //   on the dark scheme's sidebar surface.\n    // - Content inheriting it: plain text, and a `BrandLogo` whose SVG fills with\n    //   `currentColor`.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:before:data-[accent=blue]:bg-sidebar-primary',\n          'tw:before:data-[accent=purple]:bg-purple-500',\n          'tw:before:data-[accent=green]:bg-primary-500',\n          'tw:before:data-[accent=orange]:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a\n * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,\n * and account/actions area.\n *\n * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —\n * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally\n * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).\n * `bordered` renders a top accent hairline whose color follows `accent`. Renders a\n * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /\n * `aria-labelledby` when a page has more than one nav.\n *\n * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // A `<nav>` (not `<header>`): it's hosted inside `AppShell.Header`, which is\n  // already the `<header>` landmark — nesting a second `<header>` is invalid and\n  // muddies landmark navigation. `aria-label` comes first so a caller-supplied\n  // label in `...rest` overrides the default.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,0BACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;;AC7HA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAMA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;;;;;;AAqBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAKxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}

package/dist/OtpInput-CbbymqYs.js

@@ -0,0 +1,93 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Minus } from "./icons-Cek151jC.js";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS as REGEXP_ONLY_DIGITS$1, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+//#region src/blocks/OtpInput/OtpInputGroup.tsx
+const OtpInputGroup = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:items-center tw:gap-2", className),
+	...props
+});
+//#endregion
+//#region src/blocks/OtpInput/OtpInputSeparator.tsx
+const OtpInputSeparator = ({ ref, children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "separator",
+	"aria-orientation": "vertical",
+	className: cn("tw:flex tw:items-center tw:text-muted-foreground", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(Minus, { className: "tw:size-4" })
+});
+//#endregion
+//#region src/blocks/OtpInput/OtpInputSlot.tsx
+const slotClassName = [
+	"tw:relative",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:font-medium",
+	"tw:tabular-nums",
+	"tw:outline-hidden",
+	"tw:transition",
+	"tw:border",
+	"tw:border-solid",
+	"tw:border-input",
+	"tw:bg-muted",
+	"tw:text-foreground",
+	"tw:rounded-[var(--radius-lg,0.25rem)]",
+	"tw:data-[active=true]:z-10",
+	"tw:data-[active=true]:border-primary",
+	"tw:data-[active=true]:ring-4",
+	"tw:data-[active=true]:ring-ring/50",
+	"tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm",
+	"tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base",
+	"tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg",
+	"tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive",
+	"tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive",
+	"tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20"
+];
+const OtpInputSlot = ({ ref, index, className, ...props }) => {
+	const { slots } = use(OTPInputContext);
+	if (!slots) throw new Error("<OtpInput.Slot> must be rendered inside <OtpInput>.");
+	const slot = slots[index];
+	const char = slot?.char ?? null;
+	const isActive = slot?.isActive ?? false;
+	const hasFakeCaret = slot?.hasFakeCaret ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-active": isActive || void 0,
+		"data-slot-index": index,
+		className: cn(slotClassName, className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground" })
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/OtpInput/OtpInput.tsx
+const Root = ({ ref, sizing = "md", pattern = REGEXP_ONLY_DIGITS, containerClassName, className, children, "aria-invalid": ariaInvalid, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: "tw:group/otp tw:w-fit",
+	"data-size": sizing,
+	children: /* @__PURE__ */ jsx(OTPInput, {
+		...rest,
+		ref,
+		pattern,
+		"aria-invalid": ariaInvalid,
+		containerClassName: cn("tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50", containerClassName),
+		className: cn("tw:disabled:cursor-not-allowed", className),
+		children
+	})
+});
+const OtpInput = Object.assign(Root, {
+	Group: OtpInputGroup,
+	Slot: OtpInputSlot,
+	Separator: OtpInputSeparator
+});
+//#endregion
+export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS$1 as REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
+
+//# sourceMappingURL=OtpInput-CbbymqYs.js.map

package/dist/OtpInput-CbbymqYs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput-CbbymqYs.js","names":[],"sources":["../src/blocks/OtpInput/OtpInputGroup.tsx","../src/blocks/OtpInput/OtpInputSeparator.tsx","../src/blocks/OtpInput/OtpInputSlot.tsx","../src/blocks/OtpInput/OtpInput.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype GroupProps = ComponentProps<'div'>;\n\nexport const OtpInputGroup = ({\n  ref,\n  className,\n  ...props\n}: GroupProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props} />\n);\n","import type { ComponentProps, Ref } from 'react';\n\nimport { Minus } from '../../icons';\nimport { cn } from '../../utils';\n\ntype SeparatorProps = ComponentProps<'div'>;\n\nexport const OtpInputSeparator = ({\n  ref,\n  children,\n  className,\n  ...props\n}: SeparatorProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    className={cn('tw:flex tw:items-center tw:text-muted-foreground', className)}\n    {...props}\n  >\n    {children ?? <Minus className=\"tw:size-4\" />}\n  </div>\n);\n","import { type ComponentProps, type Ref, use } from 'react';\nimport { OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nconst slotClassName = [\n  // layout\n  'tw:relative',\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:font-medium',\n  'tw:tabular-nums',\n  'tw:outline-hidden',\n  'tw:transition',\n  // resting chrome — always-visible input border on a muted fill (matches InputGroup)\n  'tw:border',\n  'tw:border-solid',\n  'tw:border-input',\n  'tw:bg-muted',\n  'tw:text-foreground',\n  'tw:rounded-[var(--radius-lg,0.25rem)]',\n  // focus — the active slot mirrors InputGroup's argo focus ring; z-10 so the ring isn't clipped\n  'tw:data-[active=true]:z-10',\n  'tw:data-[active=true]:border-primary',\n  'tw:data-[active=true]:ring-4',\n  'tw:data-[active=true]:ring-ring/50',\n  // size — from `data-size` on the group/otp container\n  'tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm',\n  'tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base',\n  'tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg',\n  // error — from `aria-invalid` on the OTP input (mirrors InputGroup argo error chrome). `!` beats\n  // the base/active border once tailwind-merge dedupes.\n  'tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20',\n];\n\ntype SlotProps = Omit<ComponentProps<'div'>, 'children'> & {\n  index: number;\n};\n\nexport const OtpInputSlot = ({\n  ref,\n  index,\n  className,\n  ...props\n}: SlotProps & { ref?: Ref<HTMLDivElement> }) => {\n  // `input-otp` exposes per-slot char / active / caret state through its render context.\n  const { slots } = use(OTPInputContext);\n  // The context default has no `slots` — a slot rendered outside `<OtpInput>` would otherwise throw\n  // a cryptic \"cannot read properties of undefined\". Fail with an actionable message instead.\n  if (!slots) throw new Error('<OtpInput.Slot> must be rendered inside <OtpInput>.');\n  const slot = slots[index];\n  const char = slot?.char ?? null;\n  const isActive = slot?.isActive ?? false;\n  const hasFakeCaret = slot?.hasFakeCaret ?? false;\n\n  return (\n    <div\n      ref={ref}\n      data-active={isActive || undefined}\n      data-slot-index={index}\n      className={cn(slotClassName, className)}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div\n          aria-hidden=\"true\"\n          className=\"tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center\"\n        >\n          <div className=\"tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n};\n","import type { ComponentProps, ReactNode, Ref } from 'react';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nimport { OtpInputGroup } from './OtpInputGroup';\nimport { OtpInputSeparator } from './OtpInputSeparator';\nimport { OtpInputSlot } from './OtpInputSlot';\n\ntype OtpInputSizing = 'sm' | 'md' | 'lg';\n\ntype OtpElementProps = ComponentProps<typeof OTPInput>;\ntype OtpElementChildrenProps = Omit<\n  Extract<OtpElementProps, { children: ReactNode }>,\n  'containerClassName'\n>;\n\ntype RootOwnProps = {\n  sizing?: OtpInputSizing;\n  containerClassName?: string;\n};\n\ntype RootProps = OtpElementChildrenProps & RootOwnProps;\n\nconst Root = ({\n  ref,\n  sizing = 'md',\n  pattern = REGEXP_ONLY_DIGITS,\n  containerClassName,\n  className,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: RootProps & { ref?: Ref<HTMLInputElement> }) => (\n  <div className=\"tw:group/otp tw:w-fit\" data-size={sizing}>\n    <OTPInput\n      {...rest}\n      ref={ref}\n      pattern={pattern}\n      aria-invalid={ariaInvalid}\n      containerClassName={cn(\n        'tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50',\n        containerClassName,\n      )}\n      className={cn('tw:disabled:cursor-not-allowed', className)}\n    >\n      {children}\n    </OTPInput>\n  </div>\n);\n\nexport const OtpInput = Object.assign(Root, {\n  Group: OtpInputGroup,\n  Slot: OtpInputSlot,\n  Separator: OtpInputSeparator,\n});\nexport type { RootProps as OtpInputProps };\n"],"mappings":";;;;;;AAMA,MAAa,iBAAiB,EAC5B,KACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACJ3F,MAAa,qBAAqB,EAChC,KACA,UACA,WACA,GAAG,YAEH,oBAAC,OAAD;CACO;CACL,MAAK;CACL,oBAAiB;CACjB,WAAW,GAAG,oDAAoD,SAAS;CAC3E,GAAI;CAEH,UAAA,YAAY,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA;AACxC,CAAA;;;AChBP,MAAM,gBAAgB;CAEpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAGA;CACA;CACA;AACF;AAMA,MAAa,gBAAgB,EAC3B,KACA,OACA,WACA,GAAG,YAC4C;CAE/C,MAAM,EAAE,UAAU,IAAI,eAAe;CAGrC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,qDAAqD;CACjF,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,eAAe,MAAM,gBAAgB;CAE3C,OACE,qBAAC,OAAD;EACO;EACL,eAAa,YAAY,KAAA;EACzB,mBAAiB;EACjB,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;EALN,UAAA,CAOG,MACA,gBACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GAEV,UAAA,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;EACxE,CAAA,CAEJ;;AAET;;;ACrDA,MAAM,QAAQ,EACZ,KACA,SAAS,MACT,UAAU,oBACV,oBACA,WACA,UACA,gBAAgB,aAChB,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAU;CAAwB,aAAW;CAChD,UAAA,oBAAC,UAAD;EACE,GAAI;EACC;EACI;EACT,gBAAc;EACd,oBAAoB,GAClB,kEACA,kBACF;EACA,WAAW,GAAG,kCAAkC,SAAS;EAExD;CACO,CAAA;AACP,CAAA;AAGP,MAAa,WAAW,OAAO,OAAO,MAAM;CAC1C,OAAO;CACP,MAAM;CACN,WAAW;AACb,CAAC"}

package/dist/PageHeader-Q3IpCnQd.js

@@ -0,0 +1,177 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/PageHeader/styles.ts
+const titleRowClass = "tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2";
+const titleClass = "tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words";
+const titleCompactClass = "tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words";
+//#endregion
+//#region src/blocks/PageHeader/PageHeaderDetail.tsx
+/**
+* Page header for single-entity pages.
+*
+* **When to use:** the page shows one entity (a bucket, flow, data app) with a parent hierarchy worth
+* breadcrumbing. Primary action is typically "edit / deploy / run on this entity".
+* **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent
+* hierarchy use `PageHeader.Index` even if they show one entity.
+* **Composition:** nest inside `PageLayout.Header`. Pass `Button`s for actions. Anything beyond the
+* 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.
+*
+* @see RECIPES.md#list-detail — for the list-page → detail-page navigation pattern
+*/
+const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact = false, primaryAction, secondaryAction, headerNav, fullWidthDescription = false, ...props }) => {
+	const titleRow = /* @__PURE__ */ jsxs("div", {
+		className: cn(titleRowClass, "tw:min-w-64 tw:flex-1 tw:pr-2"),
+		children: [
+			titleIcon && /* @__PURE__ */ jsx("span", {
+				className: "tw:flex tw:shrink-0 tw:items-center",
+				children: titleIcon
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: compact ? titleCompactClass : titleClass,
+				children: title
+			}),
+			badges && /* @__PURE__ */ jsx("div", {
+				className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0",
+				children: badges
+			})
+		]
+	});
+	const actions = (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", {
+		className: "tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2",
+		children: [secondaryAction, primaryAction]
+	});
+	const descriptionNode = description && /* @__PURE__ */ jsx("p", {
+		className: "tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground",
+		children: description
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cn("tw:flex tw:w-full tw:flex-col tw:gap-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "tw:min-w-0 tw:flex-1",
+					children: breadcrumbs
+				}), overflowActions && /* @__PURE__ */ jsx("div", {
+					className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2",
+					children: overflowActions
+				})]
+			}),
+			fullWidthDescription ? /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:w-full tw:flex-col tw:gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3",
+					children: [titleRow, actions]
+				}), descriptionNode]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: titleRowClass,
+						children: [
+							titleIcon && /* @__PURE__ */ jsx("span", {
+								className: "tw:flex tw:shrink-0 tw:items-center",
+								children: titleIcon
+							}),
+							/* @__PURE__ */ jsx("h1", {
+								className: compact ? titleCompactClass : titleClass,
+								children: title
+							}),
+							badges && /* @__PURE__ */ jsx("div", {
+								className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0",
+								children: badges
+							})
+						]
+					}), descriptionNode]
+				}), actions]
+			}),
+			headerNav
+		]
+	});
+};
+//#endregion
+//#region src/blocks/PageHeader/PageHeaderIndex.tsx
+/**
+* Page header for top-level list / collection pages.
+*
+* **When to use:** the page is a list (Flows, Storage, Jobs, …) with no parent in the same section.
+* Primary action is typically "create / add a new X".
+* **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit
+* either pattern host custom JSX in `PageLayout.Header` directly.
+* **Composition:** nest inside `PageLayout.Header`. Pass `Button`s into `action` and
+* `documentation`. Search and filter chips belong in `PageToolbar`, not here.
+*/
+const PageHeaderIndex = ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription = false, ...props }) => {
+	const subtitle = metadata ?? description;
+	const hasActions = Boolean(documentation || action);
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cn("tw:flex tw:w-full tw:flex-col tw:gap-4", className),
+		...props,
+		children: [fullWidthDescription ? /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:w-full tw:flex-col tw:gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(titleRowClass, "tw:min-w-64 tw:flex-1 tw:pr-2"),
+					children: /* @__PURE__ */ jsx("h1", {
+						className: titleClass,
+						children: title
+					})
+				}), hasActions && /* @__PURE__ */ jsxs("div", {
+					className: "tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2",
+					children: [documentation, action]
+				})]
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				className: "tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground",
+				children: subtitle
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: titleRowClass,
+					children: /* @__PURE__ */ jsx("h1", {
+						className: titleClass,
+						children: title
+					})
+				}), subtitle && /* @__PURE__ */ jsx("p", {
+					className: "tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground",
+					children: subtitle
+				})]
+			}), hasActions && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2",
+				children: [documentation, action]
+			})]
+		}), headerNav]
+	});
+};
+//#endregion
+//#region src/blocks/PageHeader/PageHeader.tsx
+/**
+* Structured page-header block that encodes the evviku page-header patterns 1:1 at the type level.
+*
+* **When to use:** every kbc-ui page with a structured header (title + actions + optional badges /
+* description / tabs). Choose `PageHeader.Index` for list / collection pages, `PageHeader.Detail` for
+* single-entity pages with breadcrumbs.
+* **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
+* `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
+* **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
+* (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
+*
+* @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
+*/
+const PageHeader = {
+	/** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
+	Index: PageHeaderIndex,
+	/** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
+	Detail: PageHeaderDetail
+};
+//#endregion
+export { PageHeader };
+
+//# sourceMappingURL=PageHeader-Q3IpCnQd.js.map

package/dist/PageHeader-Q3IpCnQd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader-Q3IpCnQd.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["export const titleRowClass = 'tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2';\nexport const titleClass =\n  'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words';\nexport const titleCompactClass =\n  'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words';\n// Header badges always read as pills: force pill shape/case/tracking on any\n// Badge inside the slot via its `data-slot=\"badge\"` root (higher specificity\n// than the Badge's own variant classes, so it wins regardless of variant).\n// `tw:py-0` neutralises consumer-forced vertical padding (e.g. StatusLabel's\n// `tw:py-1.5`) so every header pill keeps the standard badge height.\nexport const badgesClass =\n  'tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0';\nexport const descriptionClass =\n  'tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground';\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n  badgesClass,\n  descriptionClass,\n  titleClass,\n  titleCompactClass,\n  titleRowClass,\n} from './styles';\n\n// Detail page header — single entity pages (bucket, flow, data app, …).\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\n//   - Breadcrumbs are required; overflow menu sits on the breadcrumbs row.\n//   - Max two visible actions: `primaryAction` + optional `secondaryAction`.\n//   - All other actions belong in the breadcrumbs-row overflow menu.\n/**\n * Props for `PageHeader.Detail`. Detail pages enforce mandatory breadcrumbs, ≤ 2 visible actions, and an\n * overflow-menu slot on the breadcrumbs row.\n */\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n  /** `Breadcrumb` chain ending in the entity name (last item is not a link). Required. */\n  breadcrumbs: ReactNode;\n  /** `DropdownMenu` for tertiary actions. Sits on the breadcrumbs row, not the title row. */\n  overflowActions?: ReactNode;\n  title: ReactNode;\n  /** Optional icon rendered immediately left of the title (entity / component / type icon). */\n  titleIcon?: ReactNode;\n  /** Inline `Badge`s rendered next to the title (status, environment, version). Always rendered as pills. */\n  badges?: ReactNode;\n  description?: ReactNode;\n  /** Compact title mode: renders a smaller title since the breadcrumb already shows the entity name. Default `false`. */\n  compact?: boolean;\n  /** Primary action (`Button`). Use the verb appropriate to the entity (Deploy / Run / Save). */\n  primaryAction?: ReactNode;\n  /** Optional second action (`Button variant=\"secondary\"`). Everything beyond goes in `overflowActions`. */\n  secondaryAction?: ReactNode;\n  /** Optional `Tabs` row below the title block. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title/actions row\n   * instead of sharing the title column. Defaults to `false` (description sits inside the title column).\n   * Enabled per the `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers\n   * byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for single-entity pages.\n *\n * **When to use:** the page shows one entity (a bucket, flow, data app) with a parent hierarchy worth\n * breadcrumbing. Primary action is typically \"edit / deploy / run on this entity\".\n * **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent\n * hierarchy use `PageHeader.Index` even if they show one entity.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s for actions. Anything beyond the\n * 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.\n *\n * @see RECIPES.md#list-detail — for the list-page → detail-page navigation pattern\n */\nexport const PageHeaderDetail = ({\n  ref,\n  className,\n  breadcrumbs,\n  overflowActions,\n  title,\n  titleIcon,\n  badges,\n  description,\n  compact = false,\n  primaryAction,\n  secondaryAction,\n  headerNav,\n  fullWidthDescription = false,\n  ...props\n}: PageHeaderDetailProps) => {\n  const titleRow = (\n    <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n      {titleIcon && <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>}\n      <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n      {badges && <div className={badgesClass}>{badges}</div>}\n    </div>\n  );\n  const actions = (primaryAction || secondaryAction) && (\n    <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n      {secondaryAction}\n      {primaryAction}\n    </div>\n  );\n  const descriptionNode = description && <p className={descriptionClass}>{description}</p>;\n  return (\n    <header\n      ref={ref}\n      className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n      {...props}\n    >\n      <div className=\"tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-4\">\n        <div className=\"tw:min-w-0 tw:flex-1\">{breadcrumbs}</div>\n        {overflowActions && (\n          <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">{overflowActions}</div>\n        )}\n      </div>\n\n      {fullWidthDescription ? (\n        <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n          <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n            {titleRow}\n            {actions}\n          </div>\n          {descriptionNode}\n        </div>\n      ) : (\n        <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n          <div className=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n            <div className={titleRowClass}>\n              {titleIcon && (\n                <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>\n              )}\n              <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n              {badges && <div className={badgesClass}>{badges}</div>}\n            </div>\n            {descriptionNode}\n          </div>\n          {actions}\n        </div>\n      )}\n\n      {headerNav}\n    </header>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClass, titleClass, titleRowClass } from './styles';\n\n// Index page header — list / collection pages (Flows, Storage, Jobs, …).\n// Pattern: docs/patterns/page-header/index/index-page-header.md\n//   - No breadcrumbs (top-level pages).\n//   - `metadata` wins over `description` (mutually exclusive in pattern).\n//   - At most one primary `action`; pair with the `documentation` icon button.\n/**\n * Props for `PageHeader.Index`. Index pages have no breadcrumbs and no overflow menu — search and filters\n * belong in `PageToolbar`, not here.\n */\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n  title: ReactNode;\n  /** Prose description shown below the title. Mutually exclusive with `metadata` in the pattern; `metadata` wins when both are passed. */\n  description?: ReactNode;\n  /** Count / system summary shown below the title (e.g. \"3 buckets and 39 tables\"). Wins over `description`. */\n  metadata?: ReactNode;\n  /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). Sits next to `action`. */\n  documentation?: ReactNode;\n  /** Primary \"create / add new X\" `Button`. */\n  action?: ReactNode;\n  /** Optional `Tabs` row rendered below the title block. Use only when >1 dataset / section is worth navigating to. */\n  headerNav?: ReactNode;\n  /**\n   * Opt into the responsive layout: the description spans its own full-width row below the title, and the\n   * action group wraps beneath the title (right-aligned) on narrow widths instead of shrinking. Defaults to\n   * `false` (the description shares the title column and actions stay `shrink-0`). Enabled per the\n   * `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers byte-identical.\n   */\n  fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * **When to use:** the page is a list (Flows, Storage, Jobs, …) with no parent in the same section.\n * Primary action is typically \"create / add a new X\".\n * **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit\n * either pattern host custom JSX in `PageLayout.Header` directly.\n * **Composition:** nest inside `PageLayout.Header`. Pass `Button`s into `action` and\n * `documentation`. Search and filter chips belong in `PageToolbar`, not here.\n */\nexport const PageHeaderIndex = ({\n  ref,\n  className,\n  title,\n  description,\n  metadata,\n  documentation,\n  action,\n  headerNav,\n  fullWidthDescription = false,\n  ...props\n}: PageHeaderIndexProps) => {\n  const subtitle = metadata ?? description;\n  const hasActions = Boolean(documentation || action);\n  return (\n    <header\n      ref={ref}\n      className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n      {...props}\n    >\n      {fullWidthDescription ? (\n        <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n          <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n            <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n              <h1 className={titleClass}>{title}</h1>\n            </div>\n            {hasActions && (\n              <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n                {documentation}\n                {action}\n              </div>\n            )}\n          </div>\n          {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n        </div>\n      ) : (\n        <div className=\"tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-4\">\n          <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n            <div className={titleRowClass}>\n              <h1 className={titleClass}>{title}</h1>\n            </div>\n            {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n          </div>\n          {hasActions && (\n            <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n              {documentation}\n              {action}\n            </div>\n          )}\n        </div>\n      )}\n      {headerNav}\n    </header>\n  );\n};\n","import { PageHeaderDetail } from './PageHeaderDetail';\nimport { PageHeaderIndex } from './PageHeaderIndex';\n\n/**\n * Structured page-header block that encodes the evviku page-header patterns 1:1 at the type level.\n *\n * **When to use:** every kbc-ui page with a structured header (title + actions + optional badges /\n * description / tabs). Choose `PageHeader.Index` for list / collection pages, `PageHeader.Detail` for\n * single-entity pages with breadcrumbs.\n * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside\n * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.\n * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots\n * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).\n *\n * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition\n */\nexport const PageHeader = {\n  /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n  Index: PageHeaderIndex,\n  /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */\n  Detail: PageHeaderDetail,\n};\n"],"mappings":"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"}

package/dist/PageLayout-DSVM-ASz.js

@@ -0,0 +1,176 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { mergeRefs } from "./internal/utils/mergeRefs.js";
+import { createContext, use, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/SectionNav/constants.ts
+/**
+* Names the container query `SectionNav` reads to pick the tree over the dropdown.
+*
+* It has to sit on an **ancestor**: a container query matches descendants only, so the element that
+* names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose
+* width is what the switch changes (256px in a row, full width in a column), which would oscillate.
+* `PageLayout.Content nav={…}` puts it on the right element for you.
+*/
+const SECTION_NAV_CONTAINER = "tw:@container/section-nav";
+//#endregion
+//#region src/blocks/PageLayout/context.ts
+/**
+* The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS
+* custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.
+*
+* A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:
+* `PageLayout.Footer` is already documented as usable on its own.
+*/
+const PageLayoutRootContext = createContext(null);
+const usePageLayoutRoot = () => use(PageLayoutRootContext);
+//#endregion
+//#region src/blocks/PageLayout/PageLayout.tsx
+const maxWidthClass = {
+	narrow: "tw:max-w-[976px]",
+	default: "tw:max-w-[1280px]",
+	wide: "tw:max-w-[1600px]",
+	full: "tw:max-w-full"
+};
+const Root = ({ ref, className, maxWidth = "full", children, ...props }) => {
+	const rootRef = useRef(null);
+	return /* @__PURE__ */ jsx(PageLayoutRootContext, {
+		value: rootRef,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(ref ?? null, rootRef),
+			className: cn("tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto", maxWidthClass[maxWidth], className),
+			...props,
+			children
+		})
+	});
+};
+const Breadcrumbs = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:w-full", className),
+	...props,
+	children
+});
+const STICKY_CHROME_BLEED = "tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background";
+const Header = ({ ref, className, sticky = false, children, ...props }) => {
+	const rootRef = usePageLayoutRoot();
+	const headerRef = useRef(null);
+	useEffect(() => {
+		const header = headerRef.current;
+		const root = rootRef?.current;
+		if (!sticky || !header || !root || typeof ResizeObserver === "undefined") return;
+		const publish = () => {
+			root.style.setProperty("--page-header-height", `${Math.round(header.getBoundingClientRect().height)}px`);
+		};
+		const observer = new ResizeObserver(publish);
+		observer.observe(header);
+		publish();
+		return () => {
+			observer.disconnect();
+			root.style.removeProperty("--page-header-height");
+		};
+	}, [sticky, rootRef]);
+	return /* @__PURE__ */ jsxs("header", {
+		ref: mergeRefs(ref ?? null, headerRef),
+		className: cn("tw:w-full", sticky && ["tw:sticky tw:top-0 tw:z-20 tw:bg-background", STICKY_CHROME_BLEED], className),
+		...props,
+		children: [children, sticky && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]"
+		})]
+	});
+};
+const Tabs = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex tw:w-full tw:items-center tw:border-b tw:border-border", className),
+	...props,
+	children
+});
+const scrollParent = (from) => {
+	for (let el = from.parentElement; el; el = el.parentElement) if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;
+	return null;
+};
+const useAvailableHeight = () => {
+	const rowRef = useRef(null);
+	useEffect(() => {
+		const row = rowRef.current;
+		if (!row || typeof ResizeObserver === "undefined") return;
+		const scroller = scrollParent(row);
+		const publish = () => {
+			const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);
+			const room = scroller ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top) : window.innerHeight - top;
+			row.style.setProperty("--section-nav-available", `${Math.max(0, Math.round(room))}px`);
+		};
+		const observer = new ResizeObserver(publish);
+		observer.observe(row);
+		if (scroller) observer.observe(scroller);
+		publish();
+		return () => observer.disconnect();
+	}, []);
+	return rowRef;
+};
+const Content = ({ ref, className, nav, children, ...props }) => {
+	const rowRef = useAvailableHeight();
+	if (!nav) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("tw:flex tw:w-full tw:flex-1 tw:flex-col", className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col", SECTION_NAV_CONTAINER, className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rowRef,
+			className: "tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "page-layout-nav",
+				className: "tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]",
+				children: nav
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "page-layout-content-body",
+				className: "tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1",
+				children
+			})]
+		})
+	});
+};
+const Footer = ({ ref, className, sticky = false, children, ...props }) => /* @__PURE__ */ jsx("footer", {
+	ref,
+	className: cn("tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4", sticky && ["tw:sticky tw:bottom-0 tw:z-10", STICKY_CHROME_BLEED], className),
+	...props,
+	children
+});
+/**
+* Compound page-chrome block. Provides every kbc-ui page with the same content-column shape:
+* max-width container + vertical rhythm + named slots. The gutter between content and the app
+* frame (sidebar / navbar) is owned by the shell, not by `PageLayout` — so the `Root` adds no
+* outer page padding of its own (`PageLayout.Footer` keeps its own action-bar padding).
+*
+* **When to use:** every new kbc-ui page. Do not roll your own `<div className="tw:flex tw:flex-col">`
+* chrome. Host `PageHeader.Index` / `PageHeader.Detail` inside `PageLayout.Header` for the structured
+* page-header patterns.
+* **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded
+* widgets or modal bodies the layout chrome is the modal / card itself, not `PageLayout`.
+* **Composition:** `PageLayout` is opinionated about chrome only — slots accept any `ReactNode`. Put
+* search / filter pills in `PageToolbar`, never in the header. Form submit bars go in
+* `PageLayout.Footer sticky`.
+*
+* @see RECIPES.md#list-detail — for the index → detail page pattern
+* @see RECIPES.md#section-nav — for the in-page vertical navigation pattern
+*/
+const PageLayout = Object.assign(Root, {
+	/** Detail-pattern breadcrumb row. Usually composed automatically by `PageHeader.Detail` — slot exists for layouts that don't fit either `PageHeader` variant. */
+	Breadcrumbs,
+	/** Host slot for `PageHeader.Index` / `PageHeader.Detail`, or custom header JSX when neither variant fits. Pass `sticky` to pin it — it then also publishes its measured height as `--page-header-height` on the root, which `Content nav` pins the nav to. */
+	Header,
+	/** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */
+	Tabs,
+	/** Main content slot. Lists, cards, tables. Pass `nav` (a `SectionNav`) for the two-column in-page-navigation layout; without it the slot is a plain column, exactly as before. */
+	Content,
+	/** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */
+	Footer
+});
+//#endregion
+export { PageLayout };
+
+//# sourceMappingURL=PageLayout-DSVM-ASz.js.map

package/dist/PageLayout-DSVM-ASz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout-DSVM-ASz.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/**\n * Props for `PageLayout` root. `maxWidth` constrains the content column —\n * `narrow` (976px) for forms, `default` (1280px) for most pages, `wide` (1600px) for dense detail views,\n * `full` for edge-to-edge layouts.\n */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Compound page-chrome block. Provides every kbc-ui page with the same content-column shape:\n * max-width container + vertical rhythm + named slots. The gutter between content and the app\n * frame (sidebar / navbar) is owned by the shell, not by `PageLayout` — so the `Root` adds no\n * outer page padding of its own (`PageLayout.Footer` keeps its own action-bar padding).\n *\n * **When to use:** every new kbc-ui page. Do not roll your own `<div className=\"tw:flex tw:flex-col\">`\n * chrome. Host `PageHeader.Index` / `PageHeader.Detail` inside `PageLayout.Header` for the structured\n * page-header patterns.\n * **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded\n * widgets or modal bodies the layout chrome is the modal / card itself, not `PageLayout`.\n * **Composition:** `PageLayout` is opinionated about chrome only — slots accept any `ReactNode`. Put\n * search / filter pills in `PageToolbar`, never in the header. Form submit bars go in\n * `PageLayout.Footer sticky`.\n *\n * @see RECIPES.md#list-detail — for the index → detail page pattern\n * @see RECIPES.md#section-nav — for the in-page vertical navigation pattern\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Detail-pattern breadcrumb row. Usually composed automatically by `PageHeader.Detail` — slot exists for layouts that don't fit either `PageHeader` variant. */\n  Breadcrumbs,\n  /** Host slot for `PageHeader.Index` / `PageHeader.Detail`, or custom header JSX when neither variant fits. Pass `sticky` to pin it — it then also publishes its measured height as `--page-header-height` on the root, which `Content nav` pins the nav to. */\n  Header,\n  /** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */\n  Tabs,\n  /** Main content slot. Lists, cards, tables. Pass `nav` (a `SectionNav`) for the two-column in-page-navigation layout; without it the slot is a plain column, exactly as before. */\n  Content,\n  /** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */\n  Footer,\n});\n"],"mappings":"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"}