@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/components/Breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs.js","names":["cn","Skeleton","React","_Fragment","controlSizeClasses","controlStateColorTransition","quietTextHoverInGroup","quietTextHover","Icon","PopupAnchorProvider","SlashIcon"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size'>;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAWA,cAAAA,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA0BA,IAAa,iBAAiB,UAAsC,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAWC,MAAAA,QAAM,OAAsB,IAAI;CAEjD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,KAAK;EACL,WAAWH,cAAAA,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAWA,cAAAA,GAGT,iFACAI,gCAAAA,mBAAmB,IACnBC,+BAAAA,6BAEA,YACI,4CACA,sBACEL,cAAAA,GAAGM,8BAAAA,uBAAuB,UAAU,IACpCN,cAAAA,GAAGO,8BAAAA,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,MAAD;KACE,WAAWR,cAAAA,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,IAKhB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,WAAWA,cAAAA,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACS,gCAAAA,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,mBAAAA,MAAD;GAAM,WAAU;GACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC3IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;AACR"}
+{"version":3,"file":"Breadcrumb.cjs.js","names":["cn","Skeleton","React","_Fragment","controlSizeClasses","controlStateColorTransition","quietTextHoverInGroup","quietTextHover","Icon","PopupAnchorProvider","SlashIcon"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  /** For a crumb that navigates in place (`as=\"button\"`) rather than through a route. */\n  onClick?: React.MouseEventHandler;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAWA,cAAAA,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA4BA,IAAa,iBAAiB,UAAsC,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAWC,MAAAA,QAAM,OAAsB,IAAI;CAEjD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,KAAK;EACL,WAAWH,cAAAA,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAWA,cAAAA,GAGT,iFACAI,gCAAAA,mBAAmB,IACnBC,+BAAAA,6BAEA,YACI,4CACA,sBACEL,cAAAA,GAAGM,8BAAAA,uBAAuB,UAAU,IACpCN,cAAAA,GAAGO,8BAAAA,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,MAAD;KACE,WAAWR,cAAAA,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,IAKhB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,WAAWA,cAAAA,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACS,gCAAAA,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACD,mBAAAA,MAAD;GAAM,WAAU;GACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC7IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}

package/dist/components/Breadcrumb.es.js

@@ -1,11 +1,11 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { Icon } from "../icons/Icon.es.js";
-import { controlSizeClasses } from "../primitives/control-size.es.js";
-import { controlStateColorTransition } from "../primitives/transitions.es.js";
-import { quietTextHover, quietTextHoverInGroup } from "../primitives/typography.es.js";
 import { SlashIcon } from "../icons/SlashIcon.es.js";
 import { Skeleton } from "./Skeleton.es.js";
+import { controlSizeClasses } from "../primitives/control-size.es.js";
 import { PopupAnchorProvider } from "../primitives/popup-anchor.es.js";
+import { controlStateColorTransition } from "../primitives/transitions.es.js";
+import { quietTextHover, quietTextHoverInGroup } from "../primitives/typography.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/Breadcrumb/Breadcrumb.tsx
@@ -69,7 +69,8 @@ var Crumb = ({ className, as, to, isCurrent, action, switcher, icon, isLoading,
 // src/ds/components/Breadcrumb/crumb-switcher.ts
 var crumbSwitcherTriggerProps = {
 	variant: "ghost",
-	size: "icon-sm"
+	size: "icon-sm",
+	popupWidth: "md"
 };
 export { Breadcrumb, Crumb, CrumbSkeleton, crumbSwitcherTriggerProps };
 

package/dist/components/Breadcrumb.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.es.js","names":["_Fragment"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size'>;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,oBAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,oBAAC,MAAD;GAAI,WAAW,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA0BA,IAAa,iBAAiB,UAAsC,oBAAC,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAW,MAAM,OAAsB,IAAI;CAEjD,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EACE,KAAK;EACL,WAAW,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,qBAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAW,GAGT,iFACA,mBAAmB,IACnB,6BAEA,YACI,4CACA,sBACE,GAAG,uBAAuB,UAAU,IACpC,GAAG,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,oBAAC,MAAD;KACE,WAAW,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,oBAAC,eAAD,CAAgB,CAAA,IAKhB,oBAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,oBAAC,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,oBAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,oBAAC,MAAD;GAAM,WAAU;GACd,UAAA,oBAAC,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC3IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;AACR"}
+{"version":3,"file":"Breadcrumb.es.js","names":["_Fragment"],"sources":["../../src/ds/components/Breadcrumb/Breadcrumb.tsx","../../src/ds/components/Breadcrumb/crumb-switcher.ts"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { PopupAnchorProvider } from '@/ds/primitives/popup-anchor';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover, quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('flex items-center gap-0.5', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children?: React.ReactNode;\n  /** Prefix icon (bare SVG). The crumb wraps it in `<Icon>` and aligns it like a Button adornment. */\n  icon?: React.ReactNode;\n  /** Renders `CrumbSkeleton` in place of the label. */\n  isLoading?: boolean;\n  /**\n   * Sibling control rendered next to the label (never inside it). Expected to be a\n   * `size=\"icon-sm\"` ghost control, e.g. a CopyButton. Entity switchers go in `switcher`.\n   */\n  action?: React.ReactNode;\n  /**\n   * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.\n   * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.\n   */\n  switcher?: React.ReactNode;\n  /** For a crumb that navigates in place (`as=\"button\"`) rather than through a route. */\n  onClick?: React.MouseEventHandler;\n  'data-testid'?: string;\n}\n\nexport const CrumbSkeleton = (props: { 'data-testid'?: string }) => <Skeleton className=\"h-3 w-24\" {...props} />;\n\nexport const Crumb = ({\n  className,\n  as,\n  to,\n  isCurrent,\n  action,\n  switcher,\n  icon,\n  isLoading,\n  children,\n  ...props\n}: CrumbProps) => {\n  const Root = as || 'span';\n  const switcherCoversCrumb = Boolean(switcher && (isCurrent || !to));\n  const crumbRef = React.useRef<HTMLLIElement>(null);\n\n  return (\n    <>\n      <li\n        ref={crumbRef}\n        className={cn(\n          'group flex h-control-sm min-w-0 items-center',\n          isCurrent ? 'shrink' : 'shrink-0',\n          switcherCoversCrumb &&\n            'relative rounded-full has-[[data-slot=crumb-switcher]_[data-popup-open]]:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:hover:bg-fill-subtle has-[[data-slot=crumb-switcher]_button:enabled]:active:bg-fill',\n        )}\n      >\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            // Same box as `buttonVariants({ variant: 'ghost', size: 'sm' })` so a label and an\n            // icon-sm control sitting next to it share height, radius, padding and colors.\n            'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n            controlSizeClasses.sm,\n            controlStateColorTransition,\n            // Long labels truncate: the current crumb gets more room than nav crumbs.\n            isCurrent\n              ? 'max-w-xs cursor-default text-foreground'\n              : switcherCoversCrumb\n                ? cn(quietTextHoverInGroup, 'max-w-48')\n                : cn(quietTextHover, 'max-w-48 cursor-pointer hover:bg-fill-subtle active:bg-fill'),\n            className,\n          )}\n          to={to}\n          {...props}\n        >\n          {icon && (\n            <Icon\n              className={cn(\n                'ml-[-.3em] shrink-0 opacity-50 group-hover:opacity-100',\n                'transition-opacity duration-normal ease-out-custom',\n              )}\n            >\n              {icon}\n            </Icon>\n          )}\n          {isLoading ? (\n            <CrumbSkeleton />\n          ) : (\n            // `text-overflow` needs a block container, so the label truncates in its\n            // own box rather than on the flex Root. Works for plain strings and for\n            // components that resolve to a string (route-header `Component` crumbs).\n            <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n          )}\n        </Root>\n        {switcher && (\n          <span\n            data-slot=\"crumb-switcher\"\n            className={cn(\n              '-ml-1 flex h-control-sm shrink-0 items-center',\n              switcherCoversCrumb &&\n                '[&_button]:bg-transparent! [&_button:enabled]:after:absolute [&_button:enabled]:after:inset-0 [&_button:enabled]:after:rounded-full',\n            )}\n          >\n            {/* The switcher's popup opens from the crumb's start, like a menu on the whole crumb. */}\n            <PopupAnchorProvider value={crumbRef}>{switcher}</PopupAnchorProvider>\n          </span>\n        )}\n        {action && <span className=\"-ml-1 flex h-control-sm shrink-0 items-center\">{action}</span>}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className=\"text-placeholder\">\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n","import type { ComboboxProps } from '../Combobox';\n\nexport const crumbSwitcherTriggerProps = {\n  variant: 'ghost',\n  size: 'icon-sm',\n  // The trigger is just a chevron, so give the popup room for entity names.\n  popupWidth: 'md',\n} as const satisfies Pick<ComboboxProps, 'variant' | 'size' | 'popupWidth'>;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,oBAAqC;CAC5F,OACE,oBAAC,OAAD;EAAK,cAAY;EAAkB;EACjC,UAAA,oBAAC,MAAD;GAAI,WAAW,GAAG,6BAA6B,aAAa;GAAI;EAAa,CAAA;CAC1E,CAAA;AAET;AA4BA,IAAa,iBAAiB,UAAsC,oBAAC,UAAD;CAAU,WAAU;CAAW,GAAI;AAAQ,CAAA;AAE/G,IAAa,SAAS,EACpB,WACA,IACA,IACA,WACA,QACA,UACA,MACA,WACA,UACA,GAAG,YACa;CAChB,MAAM,OAAO,MAAM;CACnB,MAAM,sBAAsB,QAAQ,aAAa,aAAa,CAAC,GAAG;CAClE,MAAM,WAAW,MAAM,OAAsB,IAAI;CAEjD,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EACE,KAAK;EACL,WAAW,GACT,gDACA,YAAY,WAAW,YACvB,uBACE,6NACJ;EAPF,UAAA;GASE,qBAAC,MAAD;IACE,gBAAc,YAAY,SAAS,KAAA;IACnC,WAAW,GAGT,iFACA,mBAAmB,IACnB,6BAEA,YACI,4CACA,sBACE,GAAG,uBAAuB,UAAU,IACpC,GAAG,gBAAgB,6DAA6D,GACtF,SACF;IACI;IACJ,GAAI;IAjBN,UAAA,CAmBG,QACC,oBAAC,MAAD;KACE,WAAW,GACT,0DACA,oDACF;KAEC,UAAA;IACG,CAAA,GAEP,YACC,oBAAC,eAAD,CAAgB,CAAA,IAKhB,oBAAC,QAAD;KAAM,WAAU;KAA2B;IAAe,CAAA,CAExD;;GACL,YACC,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,iDACA,uBACE,qIACJ;IAGA,UAAA,oBAAC,qBAAD;KAAqB,OAAO;KAAW,UAAA;IAA8B,CAAA;GACjE,CAAA;GAEP,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAiD,UAAA;GAAa,CAAA;EACvF;CACH,CAAA,GAAA,CAAC,aACA,oBAAC,MAAD;EAAI,MAAK;EAAY,WAAU;EAC7B,UAAA,oBAAC,MAAD;GAAM,WAAU;GACd,UAAA,oBAAC,WAAD,CAAY,CAAA;EACR,CAAA;CACJ,CAAA,CAEN,EAAA,CAAA;AAEN;;AC7IA,IAAa,4BAA4B;CACvC,SAAS;CACT,MAAM;CAEN,YAAY;AACd"}

package/dist/components/Button.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_Button = require("../Button-DLcMcuUL.cjs");
-const require_merge_refs = require("../merge-refs-C0BDbPAW.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
 const require_components_Kbd = require("./Kbd.cjs.js");
 const require_keyboard_use_keydown = require("../keyboard/use-keydown.cjs.js");
+const require_merge_refs = require("../merge-refs-C0BDbPAW.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Button.es.js

@@ -1,7 +1,7 @@
-import { a as TriggerChevron, i as ButtonLabel, n as ButtonChevron, o as buttonVariants, r as ButtonIcon, s as isIconButtonSize, t as Button } from "../Button-CLXTbAY8.js";
-import { t as mergeRefs } from "../merge-refs-BXb4SnRx.js";
+import { a as TriggerChevron, i as ButtonLabel, n as ButtonChevron, o as buttonVariants, r as ButtonIcon, s as isIconButtonSize, t as Button } from "../Button-Bi7aXd_G.js";
 import { Kbd } from "./Kbd.es.js";
 import { useKeydown } from "../keyboard/use-keydown.es.js";
+import { t as mergeRefs } from "../merge-refs-BXb4SnRx.js";
 import React, { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus } from "lucide-react";

package/dist/components/ButtonsGroup.cjs.js

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_buttons_group = require("../buttons-group-Dc6R7YSs.cjs");
+const require_buttons_group = require("../buttons-group-DM6_Kohs.cjs");
 exports.ButtonsGroup = require_buttons_group.ButtonsGroup;
 exports.ButtonsGroupText = require_buttons_group.ButtonsGroupText;

package/dist/components/ButtonsGroup.es.js

@@ -1 +1 @@
-export { t as ButtonsGroup, n as ButtonsGroupText } from "../buttons-group-DkFlnMiL.js";
+export { t as ButtonsGroup, n as ButtonsGroupText } from "../buttons-group-DA_wORqQ.js";

package/dist/components/Card.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Card = require("../Card-C6iEBgVq.cjs");
+const require_Card = require("../Card-C9oCXvxU.cjs");
 exports.Card = require_Card.Card;
 exports.CardContent = require_Card.CardContent;
 exports.CardDescription = require_Card.CardDescription;

package/dist/components/Card.es.js

@@ -1 +1 @@
-export { t as Card, n as CardContent, r as CardDescription, i as CardFooter, a as CardHeader, o as CardLink, s as CardTitle } from "../Card-LU1aWO7U.js";
+export { t as Card, n as CardContent, r as CardDescription, i as CardFooter, a as CardHeader, o as CardLink, s as CardTitle } from "../Card-ClDoUQNb.js";

package/dist/components/ChartSkeleton.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_primitives_shimmer = require("../primitives/shimmer.cjs.js");
 const require_primitives_chart_layout = require("../primitives/chart-layout.cjs.js");
+const require_primitives_shimmer = require("../primitives/shimmer.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/ChartSkeleton/chart-skeleton.tsx

package/dist/components/ChartSkeleton.es.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { useShimmerDelay } from "../primitives/shimmer.es.js";
 import { CHART_MARGIN } from "../primitives/chart-layout.es.js";
+import { useShimmerDelay } from "../primitives/shimmer.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/ChartSkeleton/chart-skeleton.tsx

package/dist/components/ChartTooltip.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/ChartTooltip/chart-tooltip.tsx
 /**

package/dist/components/ChartTooltip.es.js

@@ -1,5 +1,5 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { overlaySurfaceStyle } from "../primitives/raised-surface.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx } from "react/jsx-runtime";
 // src/ds/components/ChartTooltip/chart-tooltip.tsx
 /**

package/dist/components/ChatShell.cjs.js

@@ -1,6 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MessageScroller = require("../MessageScroller-D-mK1uuu.cjs");
+const require_chat_shell_context = require("../chat-shell-context-ONCslAGn.cjs");
+const require_merge_refs = require("../merge-refs-C0BDbPAW.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_MessageScroller = require("../MessageScroller-CGsfTd1Z.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/ChatShell/chat-shell.tsx
 /**
@@ -17,12 +20,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).
 */
 function ChatShellRoot({ className, scroller, ...props }) {
+	const [regions] = (0, react.useState)(require_chat_shell_context.createChatShellRegions);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageScroller.MessageScrollerProvider, {
 		...scroller,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-slot": "chat-shell",
-			className: require_utils.cn("@container relative isolate flex min-h-0 min-w-0 flex-col", "[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]", "[--chat-surface:var(--color-background)] [--chat-veil:100%]", className),
-			...props
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chat_shell_context.ChatShellRegionsContext.Provider, {
+			value: regions,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "chat-shell",
+				className: require_utils.cn("@container relative isolate flex min-h-0 min-w-0 flex-col", "[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]", "[--chat-surface:var(--color-background)] [--chat-veil:100%]", className),
+				...props
+			})
 		})
 	});
 }
@@ -80,6 +87,15 @@ function ChatShellColumn({ className, ...props }) {
 		...props
 	});
 }
+/** The conversation's reading column. Positioned, so overlays such as `TranscriptAnnotations` travel with the text. */
+function ChatShellTranscript({ className, ref, ...props }) {
+	const { transcriptRef } = require_chat_shell_context.useChatShellRegions();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatShellColumn, {
+		ref: require_merge_refs.mergeRefs(transcriptRef, ref),
+		className: require_utils.cn("relative", className),
+		...props
+	});
+}
 /**
 * One user turn and the reply under it. The room is the answer's share of the
 * screen: the scroller parks the sent message exactly one room above the end of
@@ -105,12 +121,19 @@ function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props })
 * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching
 * `--chat-veil` at the dock's top edge. The transcript fades out above the
 * composer and nothing shows through around or under the card.
+*
+* Its `ComposerInput` is the conversation's composer, the one
+* `TranscriptAnnotations` focuses.
 */
 function ChatShellDock({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "chat-shell-dock",
-		className: require_utils.cn("sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)", "before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10", "before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]", className),
-		...props
+	const { composerInputRef } = require_chat_shell_context.useChatShellRegions();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chat_shell_context.ChatShellComposerInputContext.Provider, {
+		value: composerInputRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "chat-shell-dock",
+			className: require_utils.cn("sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)", "before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10", "before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]", className),
+			...props
+		})
 	});
 }
 /**
@@ -139,6 +162,7 @@ var ChatShell = Object.assign(ChatShellRoot, {
 	Dock: ChatShellDock,
 	ScrollButton: ChatShellScrollButton,
 	Stage: ChatShellStage,
+	Transcript: ChatShellTranscript,
 	Turn: ChatShellTurn,
 	Viewport: ChatShellViewport
 });

package/dist/components/ChatShell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatShell.cjs.js","names":["MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n  MessageScrollerButtonProps,\n  MessageScrollerContentProps,\n  MessageScrollerProviderProps,\n  MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n  scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n  return (\n    <MessageScrollerProvider {...scroller}>\n      <div\n        data-slot=\"chat-shell\"\n        className={cn(\n          '@container relative isolate flex min-h-0 min-w-0 flex-col',\n          '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n          className,\n        )}\n        {...props}\n      />\n    </MessageScrollerProvider>\n  );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce vertically: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript. Horizontal\n * overscroll stays native so trackpad swipes can navigate browser history.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 overscroll-y-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n        '[scrollbar-gutter:stable_both-edges]',\n        'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* Sticky against the scroller itself is clamped to its box, not the\n          scrolled height, and strands the dock mid-transcript. */}\n      <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-column\"\n      className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n  /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n  opensTurn?: boolean;\n  /** Holds the reply's share of the screen open under the live turn while the run answers. */\n  holdsRoom?: boolean;\n  /** Restored mid-run: the room is already due, so it opens with no transition. */\n  restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-turn\"\n      data-opens-turn={opensTurn ? 'true' : undefined}\n      data-holds-room={holdsRoom ? 'true' : undefined}\n      className={cn(\n        'flex flex-col',\n        opensTurn &&\n          'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n        holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n        holdsRoom && restored && 'transition-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-dock\"\n      className={cn(\n        'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n        'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n        'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-scroll-button\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n    >\n      <ChatShellColumn className=\"flex-row justify-center\">\n        <MessageScrollerButton\n          className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n          {...props}\n        />\n      </ChatShellColumn>\n    </div>\n  );\n}\n","import {\n  ChatShellBar,\n  ChatShellColumn,\n  ChatShellContent,\n  ChatShellDock,\n  ChatShellRoot,\n  ChatShellScrollButton,\n  ChatShellStage,\n  ChatShellTurn,\n  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n  Bar: ChatShellBar,\n  Column: ChatShellColumn,\n  Content: ChatShellContent,\n  Dock: ChatShellDock,\n  ScrollButton: ChatShellScrollButton,\n  Stage: ChatShellStage,\n  Turn: ChatShellTurn,\n  Viewport: ChatShellViewport,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,SAAgB,cAAc,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC/E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,yBAAD;EAAyB,GAAI;EAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,aAAU;GACV,WAAWC,cAAAA,GACT,6DACA,gHACA,+DACA,SACF;GACA,GAAI;EACL,CAAA;CACsB,CAAA;AAE7B;;;;;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA0C;CACrF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAiB,WAAWA,cAAAA,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA0C;CACvF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD;EAAiB,WAAWD,cAAAA,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF;;;;;;;;;;;AAYA,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,SAAuC;CACjG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,yBAAD;EACE,WAAWF,cAAAA,GACT,8GACA,wCACA,mFACA,SACF;EACA,GAAI;EAIJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,aAAU;GAAmB,WAAU;GACzC;EACE,CAAA;CACkB,CAAA;AAE7B;;AAGA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CACrF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACG,wBAAAA,wBAAD;EAAwB,WAAWH,cAAAA,GAAG,UAAU,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjF;;AAGA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAAgC;CAC9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,2EAA2E,SAAS;EAClG,GAAI;CACL,CAAA;AAEL;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,WAAW,WAAW,UAAU,WAAW,GAAG,SAA6B;CACzG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,mBAAiB,YAAY,SAAS,KAAA;EACtC,mBAAiB,YAAY,SAAS,KAAA;EACtC,WAAWA,cAAAA,GACT,iBACA,aACE,oHACF,aAAa,oFACb,aAAa,YAAY,mBACzB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;;;AAWA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA0C;CACtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GACT,qEACA,sHACA,sIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAqC;CACzF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAU;EAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;GAAiB,WAAU;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACI,wBAAAA,uBAAD;IACE,WAAWJ,cAAAA,GAAG,8DAA8D,SAAS;IACrF,GAAI;GACL,CAAA;EACc,CAAA;CACd,CAAA;AAET;;AChLA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,KAAK;CACL,QAAQ;CACR,SAAS;CACT,MAAM;CACN,cAAc;CACd,OAAO;CACP,MAAM;CACN,UAAU;AACZ,CAAC"}
+{"version":3,"file":"ChatShell.cjs.js","names":["useState","createChatShellRegions","MessageScrollerProvider","ChatShellRegionsContext","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","useChatShellRegions","mergeRefs","ChatShellComposerInputContext","MessageScrollerButton"],"sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { useState } from 'react';\n\nimport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n  MessageScrollerButtonProps,\n  MessageScrollerContentProps,\n  MessageScrollerProviderProps,\n  MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport {\n  ChatShellComposerInputContext,\n  ChatShellRegionsContext,\n  createChatShellRegions,\n  useChatShellRegions,\n} from './chat-shell-context';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n  scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n  const [regions] = useState(createChatShellRegions);\n\n  return (\n    <MessageScrollerProvider {...scroller}>\n      <ChatShellRegionsContext.Provider value={regions}>\n        <div\n          data-slot=\"chat-shell\"\n          className={cn(\n            '@container relative isolate flex min-h-0 min-w-0 flex-col',\n            '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n            '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n            className,\n          )}\n          {...props}\n        />\n      </ChatShellRegionsContext.Provider>\n    </MessageScrollerProvider>\n  );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce vertically: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript. Horizontal\n * overscroll stays native so trackpad swipes can navigate browser history.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 overscroll-y-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n        '[scrollbar-gutter:stable_both-edges]',\n        'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* Sticky against the scroller itself is clamped to its box, not the\n          scrolled height, and strands the dock mid-transcript. */}\n      <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-column\"\n      className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** The conversation's reading column. Positioned, so overlays such as `TranscriptAnnotations` travel with the text. */\nexport function ChatShellTranscript({ className, ref, ...props }: ComponentProps<'div'>) {\n  const { transcriptRef } = useChatShellRegions();\n  return <ChatShellColumn ref={mergeRefs(transcriptRef, ref)} className={cn('relative', className)} {...props} />;\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n  /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n  opensTurn?: boolean;\n  /** Holds the reply's share of the screen open under the live turn while the run answers. */\n  holdsRoom?: boolean;\n  /** Restored mid-run: the room is already due, so it opens with no transition. */\n  restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-turn\"\n      data-opens-turn={opensTurn ? 'true' : undefined}\n      data-holds-room={holdsRoom ? 'true' : undefined}\n      className={cn(\n        'flex flex-col',\n        opensTurn &&\n          'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n        holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n        holdsRoom && restored && 'transition-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n *\n * Its `ComposerInput` is the conversation's composer, the one\n * `TranscriptAnnotations` focuses.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  const { composerInputRef } = useChatShellRegions();\n\n  return (\n    <ChatShellComposerInputContext.Provider value={composerInputRef}>\n      <div\n        data-slot=\"chat-shell-dock\"\n        className={cn(\n          'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n          'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n          'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n          className,\n        )}\n        {...props}\n      />\n    </ChatShellComposerInputContext.Provider>\n  );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-scroll-button\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n    >\n      <ChatShellColumn className=\"flex-row justify-center\">\n        <MessageScrollerButton\n          className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n          {...props}\n        />\n      </ChatShellColumn>\n    </div>\n  );\n}\n","import {\n  ChatShellBar,\n  ChatShellColumn,\n  ChatShellContent,\n  ChatShellDock,\n  ChatShellRoot,\n  ChatShellScrollButton,\n  ChatShellStage,\n  ChatShellTranscript,\n  ChatShellTurn,\n  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n  Bar: ChatShellBar,\n  Column: ChatShellColumn,\n  Content: ChatShellContent,\n  Dock: ChatShellDock,\n  ScrollButton: ChatShellScrollButton,\n  Stage: ChatShellStage,\n  Transcript: ChatShellTranscript,\n  Turn: ChatShellTurn,\n  Viewport: ChatShellViewport,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,cAAc,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC/E,MAAM,CAAC,YAAA,GAAWA,MAAAA,SAAAA,CAASC,2BAAAA,sBAAsB;CAEjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,yBAAD;EAAyB,GAAI;EAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,wBAAwB,UAAzB;GAAkC,OAAO;GACvC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,aAAU;IACV,WAAWC,cAAAA,GACT,6DACA,gHACA,+DACA,SACF;IACA,GAAI;GACL,CAAA;EAC+B,CAAA;CACX,CAAA;AAE7B;;;;;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA0C;CACrF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAiB,WAAWA,cAAAA,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA0C;CACvF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD;EAAiB,WAAWD,cAAAA,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF;;;;;;;;;;;AAYA,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,SAAuC;CACjG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,wBAAAA,yBAAD;EACE,WAAWF,cAAAA,GACT,8GACA,wCACA,mFACA,SACF;EACA,GAAI;EAIJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,aAAU;GAAmB,WAAU;GACzC;EACE,CAAA;CACkB,CAAA;AAE7B;;AAGA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CACrF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACG,wBAAAA,wBAAD;EAAwB,WAAWH,cAAAA,GAAG,UAAU,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjF;;AAGA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAAgC;CAC9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,2EAA2E,SAAS;EAClG,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,oBAAoB,EAAE,WAAW,KAAK,GAAG,SAAgC;CACvF,MAAM,EAAE,kBAAkBI,2BAAAA,oBAAoB;CAC9C,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;EAAiB,KAAKC,mBAAAA,UAAU,eAAe,GAAG;EAAG,WAAWL,cAAAA,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,WAAW,WAAW,UAAU,WAAW,GAAG,SAA6B;CACzG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,mBAAiB,YAAY,SAAS,KAAA;EACtC,mBAAiB,YAAY,SAAS,KAAA;EACtC,WAAWA,cAAAA,GACT,iBACA,aACE,oHACF,aAAa,oFACb,aAAa,YAAY,mBACzB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;;;;;;AAcA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA0C;CACtF,MAAM,EAAE,qBAAqBI,2BAAAA,oBAAoB;CAEjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,2BAAAA,8BAA8B,UAA/B;EAAwC,OAAO;EAC7C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,aAAU;GACV,WAAWN,cAAAA,GACT,qEACA,sHACA,sIACA,SACF;GACA,GAAI;EACL,CAAA;CACqC,CAAA;AAE5C;;;;;;AAOA,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAqC;CACzF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAU;EAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;GAAiB,WAAU;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACO,wBAAAA,uBAAD;IACE,WAAWP,cAAAA,GAAG,8DAA8D,SAAS;IACrF,GAAI;GACL,CAAA;EACc,CAAA;CACd,CAAA;AAET;;ACxMA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,KAAK;CACL,QAAQ;CACR,SAAS;CACT,MAAM;CACN,cAAc;CACd,OAAO;CACP,YAAY;CACZ,MAAM;CACN,UAAU;AACZ,CAAC"}

package/dist/components/ChatShell.es.js

@@ -1,5 +1,8 @@
+import { c as MessageScrollerButton, d as MessageScrollerProvider, f as MessageScrollerViewport, l as MessageScrollerContent, s as MessageScroller } from "../MessageScroller-nV_zBF3H.js";
+import { i as useChatShellRegions, n as ChatShellRegionsContext, r as createChatShellRegions, t as ChatShellComposerInputContext } from "../chat-shell-context-0m1GVhS7.js";
+import { t as mergeRefs } from "../merge-refs-BXb4SnRx.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
-import { c as MessageScrollerButton, d as MessageScrollerProvider, f as MessageScrollerViewport, l as MessageScrollerContent, s as MessageScroller } from "../MessageScroller-DvaKlm4O.js";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/ds/components/ChatShell/chat-shell.tsx
 /**
@@ -16,12 +19,16 @@ import { jsx } from "react/jsx-runtime";
 * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).
 */
 function ChatShellRoot({ className, scroller, ...props }) {
+	const [regions] = useState(createChatShellRegions);
 	return /* @__PURE__ */ jsx(MessageScrollerProvider, {
 		...scroller,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-slot": "chat-shell",
-			className: cn("@container relative isolate flex min-h-0 min-w-0 flex-col", "[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]", "[--chat-surface:var(--color-background)] [--chat-veil:100%]", className),
-			...props
+		children: /* @__PURE__ */ jsx(ChatShellRegionsContext.Provider, {
+			value: regions,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "chat-shell",
+				className: cn("@container relative isolate flex min-h-0 min-w-0 flex-col", "[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]", "[--chat-surface:var(--color-background)] [--chat-veil:100%]", className),
+				...props
+			})
 		})
 	});
 }
@@ -79,6 +86,15 @@ function ChatShellColumn({ className, ...props }) {
 		...props
 	});
 }
+/** The conversation's reading column. Positioned, so overlays such as `TranscriptAnnotations` travel with the text. */
+function ChatShellTranscript({ className, ref, ...props }) {
+	const { transcriptRef } = useChatShellRegions();
+	return /* @__PURE__ */ jsx(ChatShellColumn, {
+		ref: mergeRefs(transcriptRef, ref),
+		className: cn("relative", className),
+		...props
+	});
+}
 /**
 * One user turn and the reply under it. The room is the answer's share of the
 * screen: the scroller parks the sent message exactly one room above the end of
@@ -104,12 +120,19 @@ function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props })
 * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching
 * `--chat-veil` at the dock's top edge. The transcript fades out above the
 * composer and nothing shows through around or under the card.
+*
+* Its `ComposerInput` is the conversation's composer, the one
+* `TranscriptAnnotations` focuses.
 */
 function ChatShellDock({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "chat-shell-dock",
-		className: cn("sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)", "before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10", "before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]", className),
-		...props
+	const { composerInputRef } = useChatShellRegions();
+	return /* @__PURE__ */ jsx(ChatShellComposerInputContext.Provider, {
+		value: composerInputRef,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "chat-shell-dock",
+			className: cn("sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)", "before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10", "before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]", className),
+			...props
+		})
 	});
 }
 /**
@@ -138,6 +161,7 @@ var ChatShell = Object.assign(ChatShellRoot, {
 	Dock: ChatShellDock,
 	ScrollButton: ChatShellScrollButton,
 	Stage: ChatShellStage,
+	Transcript: ChatShellTranscript,
 	Turn: ChatShellTurn,
 	Viewport: ChatShellViewport
 });

package/dist/components/ChatShell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatShell.es.js","names":[],"sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n  MessageScrollerButtonProps,\n  MessageScrollerContentProps,\n  MessageScrollerProviderProps,\n  MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n  scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n  return (\n    <MessageScrollerProvider {...scroller}>\n      <div\n        data-slot=\"chat-shell\"\n        className={cn(\n          '@container relative isolate flex min-h-0 min-w-0 flex-col',\n          '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n          className,\n        )}\n        {...props}\n      />\n    </MessageScrollerProvider>\n  );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce vertically: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript. Horizontal\n * overscroll stays native so trackpad swipes can navigate browser history.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 overscroll-y-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n        '[scrollbar-gutter:stable_both-edges]',\n        'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* Sticky against the scroller itself is clamped to its box, not the\n          scrolled height, and strands the dock mid-transcript. */}\n      <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-column\"\n      className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n  /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n  opensTurn?: boolean;\n  /** Holds the reply's share of the screen open under the live turn while the run answers. */\n  holdsRoom?: boolean;\n  /** Restored mid-run: the room is already due, so it opens with no transition. */\n  restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-turn\"\n      data-opens-turn={opensTurn ? 'true' : undefined}\n      data-holds-room={holdsRoom ? 'true' : undefined}\n      className={cn(\n        'flex flex-col',\n        opensTurn &&\n          'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n        holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n        holdsRoom && restored && 'transition-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-dock\"\n      className={cn(\n        'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n        'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n        'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-scroll-button\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n    >\n      <ChatShellColumn className=\"flex-row justify-center\">\n        <MessageScrollerButton\n          className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n          {...props}\n        />\n      </ChatShellColumn>\n    </div>\n  );\n}\n","import {\n  ChatShellBar,\n  ChatShellColumn,\n  ChatShellContent,\n  ChatShellDock,\n  ChatShellRoot,\n  ChatShellScrollButton,\n  ChatShellStage,\n  ChatShellTurn,\n  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n  Bar: ChatShellBar,\n  Column: ChatShellColumn,\n  Content: ChatShellContent,\n  Dock: ChatShellDock,\n  ScrollButton: ChatShellScrollButton,\n  Stage: ChatShellStage,\n  Turn: ChatShellTurn,\n  Viewport: ChatShellViewport,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,SAAgB,cAAc,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC/E,OACE,oBAAC,yBAAD;EAAyB,GAAI;EAC3B,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,6DACA,gHACA,+DACA,SACF;GACA,GAAI;EACL,CAAA;CACsB,CAAA;AAE7B;;;;;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA0C;CACrF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA0C;CACvF,OAAO,oBAAC,iBAAD;EAAiB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF;;;;;;;;;;;AAYA,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,SAAuC;CACjG,OACE,oBAAC,yBAAD;EACE,WAAW,GACT,8GACA,wCACA,mFACA,SACF;EACA,GAAI;EAIJ,UAAA,oBAAC,OAAD;GAAK,aAAU;GAAmB,WAAU;GACzC;EACE,CAAA;CACkB,CAAA;AAE7B;;AAGA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CACrF,OAAO,oBAAC,wBAAD;EAAwB,WAAW,GAAG,UAAU,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjF;;AAGA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAAgC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2EAA2E,SAAS;EAClG,GAAI;CACL,CAAA;AAEL;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,WAAW,WAAW,UAAU,WAAW,GAAG,SAA6B;CACzG,OACE,oBAAC,OAAD;EACE,aAAU;EACV,mBAAiB,YAAY,SAAS,KAAA;EACtC,mBAAiB,YAAY,SAAS,KAAA;EACtC,WAAW,GACT,iBACA,aACE,oHACF,aAAa,oFACb,aAAa,YAAY,mBACzB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;;;AAWA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA0C;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,sHACA,sIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;AAOA,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAqC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAEV,UAAA,oBAAC,iBAAD;GAAiB,WAAU;GACzB,UAAA,oBAAC,uBAAD;IACE,WAAW,GAAG,8DAA8D,SAAS;IACrF,GAAI;GACL,CAAA;EACc,CAAA;CACd,CAAA;AAET;;AChLA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,KAAK;CACL,QAAQ;CACR,SAAS;CACT,MAAM;CACN,cAAc;CACd,OAAO;CACP,MAAM;CACN,UAAU;AACZ,CAAC"}
+{"version":3,"file":"ChatShell.es.js","names":[],"sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { useState } from 'react';\n\nimport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n  MessageScrollerButtonProps,\n  MessageScrollerContentProps,\n  MessageScrollerProviderProps,\n  MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport {\n  ChatShellComposerInputContext,\n  ChatShellRegionsContext,\n  createChatShellRegions,\n  useChatShellRegions,\n} from './chat-shell-context';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n  scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n  const [regions] = useState(createChatShellRegions);\n\n  return (\n    <MessageScrollerProvider {...scroller}>\n      <ChatShellRegionsContext.Provider value={regions}>\n        <div\n          data-slot=\"chat-shell\"\n          className={cn(\n            '@container relative isolate flex min-h-0 min-w-0 flex-col',\n            '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n            '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n            className,\n          )}\n          {...props}\n        />\n      </ChatShellRegionsContext.Provider>\n    </MessageScrollerProvider>\n  );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce vertically: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript. Horizontal\n * overscroll stays native so trackpad swipes can navigate browser history.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 overscroll-y-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n        '[scrollbar-gutter:stable_both-edges]',\n        'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* Sticky against the scroller itself is clamped to its box, not the\n          scrolled height, and strands the dock mid-transcript. */}\n      <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-column\"\n      className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** The conversation's reading column. Positioned, so overlays such as `TranscriptAnnotations` travel with the text. */\nexport function ChatShellTranscript({ className, ref, ...props }: ComponentProps<'div'>) {\n  const { transcriptRef } = useChatShellRegions();\n  return <ChatShellColumn ref={mergeRefs(transcriptRef, ref)} className={cn('relative', className)} {...props} />;\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n  /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n  opensTurn?: boolean;\n  /** Holds the reply's share of the screen open under the live turn while the run answers. */\n  holdsRoom?: boolean;\n  /** Restored mid-run: the room is already due, so it opens with no transition. */\n  restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-turn\"\n      data-opens-turn={opensTurn ? 'true' : undefined}\n      data-holds-room={holdsRoom ? 'true' : undefined}\n      className={cn(\n        'flex flex-col',\n        opensTurn &&\n          'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n        holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n        holdsRoom && restored && 'transition-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n *\n * Its `ComposerInput` is the conversation's composer, the one\n * `TranscriptAnnotations` focuses.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  const { composerInputRef } = useChatShellRegions();\n\n  return (\n    <ChatShellComposerInputContext.Provider value={composerInputRef}>\n      <div\n        data-slot=\"chat-shell-dock\"\n        className={cn(\n          'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n          'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n          'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n          className,\n        )}\n        {...props}\n      />\n    </ChatShellComposerInputContext.Provider>\n  );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n  return (\n    <div\n      data-slot=\"chat-shell-scroll-button\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n    >\n      <ChatShellColumn className=\"flex-row justify-center\">\n        <MessageScrollerButton\n          className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n          {...props}\n        />\n      </ChatShellColumn>\n    </div>\n  );\n}\n","import {\n  ChatShellBar,\n  ChatShellColumn,\n  ChatShellContent,\n  ChatShellDock,\n  ChatShellRoot,\n  ChatShellScrollButton,\n  ChatShellStage,\n  ChatShellTranscript,\n  ChatShellTurn,\n  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n  Bar: ChatShellBar,\n  Column: ChatShellColumn,\n  Content: ChatShellContent,\n  Dock: ChatShellDock,\n  ScrollButton: ChatShellScrollButton,\n  Stage: ChatShellStage,\n  Transcript: ChatShellTranscript,\n  Turn: ChatShellTurn,\n  Viewport: ChatShellViewport,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,cAAc,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC/E,MAAM,CAAC,WAAW,SAAS,sBAAsB;CAEjD,OACE,oBAAC,yBAAD;EAAyB,GAAI;EAC3B,UAAA,oBAAC,wBAAwB,UAAzB;GAAkC,OAAO;GACvC,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT,6DACA,gHACA,+DACA,SACF;IACA,GAAI;GACL,CAAA;EAC+B,CAAA;CACX,CAAA;AAE7B;;;;;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA0C;CACrF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA0C;CACvF,OAAO,oBAAC,iBAAD;EAAiB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF;;;;;;;;;;;AAYA,SAAgB,kBAAkB,EAAE,WAAW,UAAU,GAAG,SAAuC;CACjG,OACE,oBAAC,yBAAD;EACE,WAAW,GACT,8GACA,wCACA,mFACA,SACF;EACA,GAAI;EAIJ,UAAA,oBAAC,OAAD;GAAK,aAAU;GAAmB,WAAU;GACzC;EACE,CAAA;CACkB,CAAA;AAE7B;;AAGA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CACrF,OAAO,oBAAC,wBAAD;EAAwB,WAAW,GAAG,UAAU,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjF;;AAGA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAAgC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2EAA2E,SAAS;EAClG,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,oBAAoB,EAAE,WAAW,KAAK,GAAG,SAAgC;CACvF,MAAM,EAAE,kBAAkB,oBAAoB;CAC9C,OAAO,oBAAC,iBAAD;EAAiB,KAAK,UAAU,eAAe,GAAG;EAAG,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;;;;;;;;;AAmBA,SAAgB,cAAc,EAAE,WAAW,WAAW,UAAU,WAAW,GAAG,SAA6B;CACzG,OACE,oBAAC,OAAD;EACE,aAAU;EACV,mBAAiB,YAAY,SAAS,KAAA;EACtC,mBAAiB,YAAY,SAAS,KAAA;EACtC,WAAW,GACT,iBACA,aACE,oHACF,aAAa,oFACb,aAAa,YAAY,mBACzB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;;;;;;AAcA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA0C;CACtF,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,OACE,oBAAC,8BAA8B,UAA/B;EAAwC,OAAO;EAC7C,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,qEACA,sHACA,sIACA,SACF;GACA,GAAI;EACL,CAAA;CACqC,CAAA;AAE5C;;;;;;AAOA,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAqC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAEV,UAAA,oBAAC,iBAAD;GAAiB,WAAU;GACzB,UAAA,oBAAC,uBAAD;IACE,WAAW,GAAG,8DAA8D,SAAS;IACrF,GAAI;GACL,CAAA;EACc,CAAA;CACd,CAAA;AAET;;ACxMA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,KAAK;CACL,QAAQ;CACR,SAAS;CACT,MAAM;CACN,cAAc;CACd,OAAO;CACP,YAAY;CACZ,MAAM;CACN,UAAU;AACZ,CAAC"}

package/dist/components/Checkbox.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_field_control_aria = require("../field-control-aria-Dw0_ObOU.cjs");
 const require_primitives_selection_control = require("../primitives/selection-control.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Checkbox.es.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { n as keepOwnAccessibleName } from "../field-control-aria-BaRSUUMR.js";
 import { selectionControlStyle } from "../primitives/selection-control.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, Minus } from "lucide-react";

package/dist/components/ClampedText.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_Button = require("../Button-DLcMcuUL.cjs");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
+const require_Button = require("../Button-BfICfyxD.cjs");
 const require_components_DisclosureChevron = require("./DisclosureChevron.cjs.js");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_hooks_use_is_clamped = require("../hooks/use-is-clamped.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/ClampedText/clamped-text.tsx

package/dist/components/ClampedText.es.js

@@ -1,8 +1,8 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
+import { t as Button } from "../Button-Bi7aXd_G.js";
 import { DisclosureChevron } from "./DisclosureChevron.es.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { useIsClamped } from "../hooks/use-is-clamped.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/ClampedText/clamped-text.tsx

package/dist/components/ClearFiltersButton.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_clear_filters_button = require("../clear-filters-button-Buc973vw.cjs");
+const require_clear_filters_button = require("../clear-filters-button-CCO-y7kt.cjs");
 exports.ClearFiltersButton = require_clear_filters_button.ClearFiltersButton;

package/dist/components/ClearFiltersButton.es.js

@@ -1 +1 @@
-export { t as ClearFiltersButton } from "../clear-filters-button-CNrRuHOY.js";
+export { t as ClearFiltersButton } from "../clear-filters-button-C79dzuzA.js";

package/dist/components/CodeBlock.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_select = require("../select-Dg8L5ROX.cjs");
-const require_copy_button = require("../copy-button-DJAQ6_3o.cjs");
 const require_code = require("../code-CqgfD-cP.cjs");
-const require_tabs_tab = require("../tabs-tab-DGwfHVDr.cjs");
+const require_copy_button = require("../copy-button-DuEUYvS2.cjs");
+const require_select = require("../select-CeukeSn_.cjs");
+const require_tabs_tab = require("../tabs-tab-Dj2huH5T.cjs");
+const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/CodeBlock/code-block.tsx
 function CodeBlock({ code, options, value, onValueChange, selector = "select", fileName, lang, overflow = "wrap", copyMessage, copyTooltip, actions, className }) {

package/dist/components/CodeBlock.es.js

@@ -1,9 +1,9 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { transitions } from "../primitives/transitions.es.js";
-import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../select-BdIZEdcy.js";
-import { t as CopyButton } from "../copy-button-BXrbevLn.js";
 import { t as Code } from "../code-B7cFirk4.js";
-import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-CYTZevdV.js";
+import { t as CopyButton } from "../copy-button-B-_Z6N6y.js";
+import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../select-dNX9If-s.js";
+import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-CJVS0WED.js";
+import { transitions } from "../primitives/transitions.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/CodeBlock/code-block.tsx
 function CodeBlock({ code, options, value, onValueChange, selector = "select", fileName, lang, overflow = "wrap", copyMessage, copyTooltip, actions, className }) {

package/dist/components/CodeDiff.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require('../CodeDiff.css');const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_components_DisclosureChevron = require("./DisclosureChevron.cjs.js");
+require('../CodeDiff.css');const require_components_DisclosureChevron = require("./DisclosureChevron.cjs.js");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_ThemeProvider = require("../ThemeProvider-DViLuk6C.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/CodeDiff.es.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
 import { DisclosureChevron } from "./DisclosureChevron.es.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { n as useTheme } from "../ThemeProvider-CQdX5j9p.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/CodeEditor.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_highlight = require("../highlight-D0VoR2qO.cjs");
-const require_CodeEditor = require("../CodeEditor-CLzs0yVc.cjs");
+const require_CodeEditor = require("../CodeEditor-DHIDfP5g.cjs");
 exports.CodeEditor = require_CodeEditor.CodeEditor;
 exports.VARIABLE_PATTERN = require_CodeEditor.VARIABLE_PATTERN;
 exports.codeFoldGutter = require_CodeEditor.codeFoldGutter;