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

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-CANh2eAD.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-BHs639jL.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;

package/dist/components/CodeEditor.es.js

@@ -1,3 +1,3 @@
 import { n as languageForPath, r as syntaxHighlighter, t as highlight } from "../highlight-DF-vd68d.js";
-import { a as createVariableAutocomplete, c as codeLanguages, i as variableHighlight, n as useCodemirrorTheme, o as flattenSchemaToVariables, r as VARIABLE_PATTERN, s as codeFoldGutter, t as CodeEditor } from "../CodeEditor-COnz9c6B.js";
+import { a as createVariableAutocomplete, c as codeLanguages, i as variableHighlight, n as useCodemirrorTheme, o as flattenSchemaToVariables, r as VARIABLE_PATTERN, s as codeFoldGutter, t as CodeEditor } from "../CodeEditor-ZoBu3Gjw.js";
 export { CodeEditor, VARIABLE_PATTERN, codeFoldGutter, codeLanguages, createVariableAutocomplete, flattenSchemaToVariables, highlight, languageForPath, syntaxHighlighter, useCodemirrorTheme, variableHighlight };

package/dist/components/Collapsible.cjs.js

@@ -1,7 +1,7 @@
 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_primitives_transitions = require("../primitives/transitions.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/Collapsible.es.js

@@ -1,5 +1,5 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { focusRing, transitions } from "../primitives/transitions.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";

package/dist/components/CollapsibleBox.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Button = require("../Button-BfICfyxD.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_Button = require("../Button-DLcMcuUL.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/components/CollapsibleBox.es.js

@@ -1,5 +1,5 @@
+import { t as Button } from "../Button-Bi7aXd_G.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
-import { t as Button } from "../Button-CLXTbAY8.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Maximize2 } from "lucide-react";

package/dist/components/Combobox.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_combobox_parts = require("../combobox-parts-C4phOq4t.cjs");
-const require_combobox = require("../combobox-DIT_6xiG.cjs");
+const require_combobox = require("../combobox-i723LxeC.cjs");
+const require_combobox_parts = require("../combobox-parts-BeNqgCbj.cjs");
 let _base_ui_react_combobox = require("@base-ui/react/combobox");
 exports.Combobox = require_combobox.Combobox;
 exports.ComboboxChip = require_combobox_parts.ComboboxChip;

package/dist/components/Combobox.es.js

@@ -1,4 +1,4 @@
-import { S as comboboxStyles, _ as ComboboxRoot, a as ComboboxCollection, b as ComboboxTrigger, c as ComboboxGroup, d as ComboboxItemContent, f as ComboboxItemDescription, g as ComboboxList, h as ComboboxLabel, i as ComboboxClear, l as ComboboxInput, m as ComboboxItemTitle, n as ComboboxChips, o as ComboboxContent, p as ComboboxItemEnd, r as ComboboxChipsInput, s as ComboboxEmpty, t as ComboboxChip, u as ComboboxItem, v as ComboboxSearch, x as ComboboxValue, y as ComboboxSeparator } from "../combobox-parts-D90ir0Py.js";
-import { t as Combobox } from "../combobox-D21no8t5.js";
+import { t as Combobox } from "../combobox-lbSxWRMl.js";
+import { C as comboboxStyles, _ as ComboboxRoot, a as ComboboxCollection, b as ComboboxTrigger, c as ComboboxGroup, d as ComboboxItemContent, f as ComboboxItemDescription, g as ComboboxList, h as ComboboxLabel, i as ComboboxClear, l as ComboboxInput, m as ComboboxItemTitle, n as ComboboxChips, o as ComboboxContent, p as ComboboxItemEnd, r as ComboboxChipsInput, s as ComboboxEmpty, t as ComboboxChip, u as ComboboxItem, v as ComboboxSearch, x as ComboboxValue, y as ComboboxSeparator } from "../combobox-parts-C9o4UfH_.js";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemContent, ComboboxItemDescription, ComboboxItemEnd, ComboboxItemTitle, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxRoot, ComboboxSearch, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxStyles };

package/dist/components/Command.cjs.js

@@ -1,12 +1,12 @@
 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_Dialog = require("../Dialog-Duy3M1ny.cjs");
+const require_scroll_area = require("../scroll-area-BU_TorPW.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_primitives_control_icon = require("../primitives/control-icon.cjs.js");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_scroll_area = require("../scroll-area-BP4gPZ4G.cjs");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
 const require_primitives_password_manager_autofill = require("../primitives/password-manager-autofill.cjs.js");
-const require_Dialog = require("../Dialog-BvWF9HE-.cjs");
+const require_primitives_transitions = require("../primitives/transitions.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/Command.es.js

@@ -1,10 +1,10 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
+import { a as DialogContent, d as DialogTitle, o as DialogDescription, t as Dialog } from "../Dialog-OBPu3rl2.js";
+import { n as ScrollAreaViewport, t as ScrollArea } from "../scroll-area-9-S7wfSs.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { controlIconState } from "../primitives/control-icon.es.js";
-import { transitions } from "../primitives/transitions.es.js";
-import { n as ScrollAreaViewport, t as ScrollArea } from "../scroll-area-C226l0v0.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
 import { passwordManagerOptOutProps } from "../primitives/password-manager-autofill.es.js";
-import { a as DialogContent, d as DialogTitle, o as DialogDescription, t as Dialog } from "../Dialog-DaWtxwd9.js";
+import { transitions } from "../primitives/transitions.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 { Search } from "lucide-react";

package/dist/components/CommandPalette.cjs.js

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require('../CommandPalette.css');const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
+require('../CommandPalette.css');const require_components_Command = require("./Command.cjs.js");
+const require_components_Kbd = require("./Kbd.cjs.js");
+const require_scroll_area = require("../scroll-area-BU_TorPW.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_primitives_form_element = require("../primitives/form-element.cjs.js");
+const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
 const require_primitives_typography = require("../primitives/typography.cjs.js");
-const require_scroll_area = require("../scroll-area-BP4gPZ4G.cjs");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_components_Kbd = require("./Kbd.cjs.js");
-const require_components_Command = require("./Command.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/CommandPalette/command-palette.tsx
 function CommandPaletteDialog({ children, contentClassName, commandClassName, showOverlay = true, overlayClassName, ...props }) {
@@ -124,7 +124,7 @@ function CommandPaletteItem({ icon, title, subtitle, path, badge, shortcut, clas
 					tone: "muted",
 					className: "flex min-w-0 items-center gap-2",
 					children: [subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate",
+						className: "min-w-0 truncate",
 						children: subtitle
 					}), path && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						as: "span",

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.cjs.js","names":["CommandDialog","cn","CommandInput","inputSurfaceAndFocusWithinStyle","overlaySurfaceStyle","ScrollArea","ScrollAreaViewport","quietTextHover","Txt","CommandList","CommandItem","CommandShortcut","Kbd"],"sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      size=\"xl\"\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-sidebar/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn('command-palette-popup overflow-visible bg-transparent shadow-none', contentClassName)}\n      commandClassName={cn(\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn(\n        'command-palette-surface command-palette-surface-input',\n        inputSurfaceAndFocusWithinStyle,\n        'h-11 shrink-0 rounded-xl border-0 px-3 pr-11',\n        wrapperClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none',\n        overlaySurfaceStyle,\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\">\n        <ScrollAreaViewport className=\"pr-1\">\n          <div className=\"flex flex-col gap-1\">{children}</div>\n        </ScrollAreaViewport>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        quietTextHover,\n        'flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground',\n        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n        'transition-[color,transform] duration-fast ease-out-custom active:scale-[0.99] motion-reduce:transition-none',\n      )}\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <Txt\n        as=\"span\"\n        variant=\"meta\"\n        tone=\"muted\"\n        className=\"rounded-md border border-border bg-muted/70 px-1.5 py-0.5 leading-none\"\n      >\n        {count}\n      </Txt>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className={cn(\n        'command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl',\n        overlaySurfaceStyle,\n      )}\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          'mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center text-muted-foreground group-data-[selected=true]:text-foreground [&>svg]:!size-4 [&>svg]:shrink-0',\n        )}\n      >\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          {badge && (\n            <Txt\n              as=\"span\"\n              variant=\"meta\"\n              tone=\"muted\"\n              className=\"shrink-0 rounded-md border border-border bg-muted/60 px-1.5 py-0.5 leading-none uppercase\"\n            >\n              {badge}\n            </Txt>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <Txt\n                as=\"span\"\n                variant=\"meta\"\n                tone=\"muted\"\n                font=\"mono\"\n                className=\"max-w-52 truncate rounded-md border border-border bg-muted/70 px-1.5 py-0.5 leading-none\"\n              >\n                {path}\n              </Txt>\n            )}\n          </Txt>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2 text-meta text-muted-foreground\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"mappings":";;;;;;;;;;;AAeA,SAAS,qBAAqB,EAC5B,UACA,kBACA,kBACA,cAAc,MACd,kBACA,GAAG,SACyB;CAC5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,2BAAAA,eAAD;EACE,MAAK;EACQ;EACb,kBAAkBC,cAAAA,GAAG,oCAAoC,gBAAgB;EACzE,kBAAkBA,cAAAA,GAAG,qEAAqE,gBAAgB;EAC1G,kBAAkBA,cAAAA,GAChB,iIACA,mEACA,wDACA,sHACA,iDACA,gBACF;EACA,GAAI;EAEH;CACY,CAAA;AAEnB;AAIA,SAAS,oBAAoB,EAAE,kBAAkB,GAAG,SAAmC;CACrF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,cAAD;EACE,kBAAkBD,cAAAA,GAChB,yDACAE,gCAAAA,iCACA,gDACA,gBACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAAE,UAAU,WAAW,GAAG,SAAyC;CAC7F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAWF,cAAAA,GACT,iHACA,SACF;GACA,GAAI;GAEH;EACE,CAAA;CACF,CAAA;AAET;AAMA,SAAS,mBAAmB,EAAE,UAAU,WAAW,GAAG,SAAkC;CACtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,WAAWA,cAAAA,GACT,8JACAG,kCAAAA,qBACA,SACF;EACA,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;GAAY,WAAU;GACpB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,oBAAD;IAAoB,WAAU;IAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAAuB;IAAc,CAAA;GAClC,CAAA;EACV,CAAA;CACP,CAAA;AAEX;AAEA,SAAS,oBAAoB,EAC3B,MACA,OACA,OACA,QACA,YAOC;CACD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACE,MAAK;EACL,WAAWL,cAAAA,GACTM,8BAAAA,gBACA,sQAEA,8GACF;EACA,eAAa;EACb,gBAAc;EACd,SAAS;EAVX,UAAA;GAYE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAmE,UAAA;GAAW,CAAA;GAC9F,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA2B,UAAA;GAAY,CAAA;GACvD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IACE,IAAG;IACH,SAAQ;IACR,MAAK;IACL,WAAU;IAET,UAAA;GACE,CAAA;EACC;;AAEZ;AAQA,SAAS,sBAAsB,EAAE,UAAU,QAAQ,GAAG,SAAqC;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,WAAWP,cAAAA,GACT,2JACAG,kCAAAA,mBACF;EACA,GAAI;EANN,UAAA,CAQE,iBAAA,GAAA,kBAAA,IAAA,CAACK,2BAAAA,aAAD;GACE,YAAA;GACA,qBAAoB;GACpB,6BAA4B;GAC5B,WAAU;GAET;EACU,CAAA,GACZ,MACE;;AAET;AAWA,SAAS,mBAAmB,EAC1B,MACA,OACA,UACA,MACA,OACA,UACA,WACA,GAAG,SACuB;CAC1B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,2BAAAA,aAAD;EACE,WAAWT,cAAAA,GACT,sHACA,SACF;EACA,GAAI;EALN,UAAA;GAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAWA,cAAAA,GACT,mLACF;IAEC,UAAA;GACG,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACO,YAAAA,KAAD;MAAK,IAAG;MAAO,SAAQ;MAAQ,MAAK;MAAM,WAAU;MACjD,UAAA;KACE,CAAA,GACJ,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;MACE,IAAG;MACH,SAAQ;MACR,MAAK;MACL,WAAU;MAET,UAAA;KACE,CAAA,CAEH;IACJ,CAAA,IAAA,YAAY,SACZ,iBAAA,GAAA,kBAAA,KAAA,CAACA,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAO,MAAK;KAAQ,WAAU;KAArD,UAAA,CACG,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAY,UAAA;KAAe,CAAA,GACvD,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;MACE,IAAG;MACH,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAU;MAET,UAAA;KACE,CAAA,CAEJ;IAEH,CAAA,CAAA;;GACL,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACG,2BAAAA,iBAAD,EAAA,UAAkB,SAA0B,CAAA;EAC9C;;AAEjB;AAEA,SAAS,qBAAqB,EAAE,SAA4B;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,KAAD;KAAK,MAAK;KAAK,UAAA;IAAM,CAAA;IACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,KAAD;KAAK,MAAK;KAAK,UAAA;IAAM,CAAA;IACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,KAAD;KAAK,MAAK;KAAK,UAAA;IAAM,CAAA;IACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,KAAD;KAAK,MAAK;KAAK,UAAA;IAAQ,CAAA;GACnB;EACH,CAAA,CAAA;;AAET"}
+{"version":3,"file":"CommandPalette.cjs.js","names":["CommandDialog","cn","CommandInput","inputSurfaceAndFocusWithinStyle","overlaySurfaceStyle","ScrollArea","ScrollAreaViewport","quietTextHover","Txt","CommandList","CommandItem","CommandShortcut","Kbd"],"sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { Txt } from '@/ds/components/Txt';\nimport { inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      size=\"xl\"\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-sidebar/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn('command-palette-popup overflow-visible bg-transparent shadow-none', contentClassName)}\n      commandClassName={cn(\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn(\n        'command-palette-surface command-palette-surface-input',\n        inputSurfaceAndFocusWithinStyle,\n        'h-11 shrink-0 rounded-xl border-0 px-3 pr-11',\n        wrapperClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none',\n        overlaySurfaceStyle,\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\">\n        <ScrollAreaViewport className=\"pr-1\">\n          <div className=\"flex flex-col gap-1\">{children}</div>\n        </ScrollAreaViewport>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        quietTextHover,\n        'flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground',\n        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n        'transition-[color,transform] duration-fast ease-out-custom active:scale-[0.99] motion-reduce:transition-none',\n      )}\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <Txt\n        as=\"span\"\n        variant=\"meta\"\n        tone=\"muted\"\n        className=\"rounded-md border border-border bg-muted/70 px-1.5 py-0.5 leading-none\"\n      >\n        {count}\n      </Txt>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className={cn(\n        'command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl',\n        overlaySurfaceStyle,\n      )}\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: ReactNode;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          'mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center text-muted-foreground group-data-[selected=true]:text-foreground [&>svg]:!size-4 [&>svg]:shrink-0',\n        )}\n      >\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <Txt as=\"span\" variant=\"label\" tone=\"ink\" className=\"truncate\">\n            {title}\n          </Txt>\n          {badge && (\n            <Txt\n              as=\"span\"\n              variant=\"meta\"\n              tone=\"muted\"\n              className=\"shrink-0 rounded-md border border-border bg-muted/60 px-1.5 py-0.5 leading-none uppercase\"\n            >\n              {badge}\n            </Txt>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"min-w-0 truncate\">{subtitle}</span>}\n            {path && (\n              <Txt\n                as=\"span\"\n                variant=\"meta\"\n                tone=\"muted\"\n                font=\"mono\"\n                className=\"max-w-52 truncate rounded-md border border-border bg-muted/70 px-1.5 py-0.5 leading-none\"\n              >\n                {path}\n              </Txt>\n            )}\n          </Txt>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2 text-meta text-muted-foreground\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"mappings":"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"}

package/dist/components/CommandPalette.es.js

@@ -1,11 +1,11 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { overlaySurfaceStyle } from "../primitives/raised-surface.es.js";
+import { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from "./Command.es.js";
+import { Kbd } from "./Kbd.es.js";
+import { n as ScrollAreaViewport, t as ScrollArea } from "../scroll-area-9-S7wfSs.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { inputSurfaceAndFocusWithinStyle } from "../primitives/form-element.es.js";
+import { overlaySurfaceStyle } from "../primitives/raised-surface.es.js";
 import { quietTextHover } from "../primitives/typography.es.js";
-import { n as ScrollAreaViewport, t as ScrollArea } from "../scroll-area-C226l0v0.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
-import { Kbd } from "./Kbd.es.js";
-import { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from "./Command.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import '../CommandPalette.css';// src/ds/components/CommandPalette/command-palette.tsx
 function CommandPaletteDialog({ children, contentClassName, commandClassName, showOverlay = true, overlayClassName, ...props }) {
@@ -123,7 +123,7 @@ function CommandPaletteItem({ icon, title, subtitle, path, badge, shortcut, clas
 					tone: "muted",
 					className: "flex min-w-0 items-center gap-2",
 					children: [subtitle && /* @__PURE__ */ jsx("span", {
-						className: "truncate",
+						className: "min-w-0 truncate",
 						children: subtitle
 					}), path && /* @__PURE__ */ jsx(Txt, {
 						as: "span",