@mastra/playground-ui 48.0.0-alpha.8 → 48.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { 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` (page colour), `--chat-gutter` (room above and below\n * the composer), `--chat-veil` (what the dock paints with), `--chat-inset-end`\n * (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 bg-(--chat-surface)',\n          '[--chat-column:48rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-surface2)]',\n          '[--chat-veil:color-mix(in_oklab,var(--chat-surface)_70%,transparent)]',\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.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\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=\"flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. Its bottom padding is the unveiled air above the composer. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1 pb-(--chat-gutter)', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentPropsWithoutRef<'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-5', className)}\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 * The veil is a background, not an overlay, so it passes behind the composer card\n * and dims the transcript in its rounded corners too.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-dock\"\n      className={cn('sticky bottom-0 z-10 shrink-0 bg-(--chat-veil) pb-(--chat-gutter)', className)}\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  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps } 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  Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":"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"}
+{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { 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` (page colour), `--chat-fade` (the band the veil ramps\n * in across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--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 bg-(--chat-surface)',\n          '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-surface2)] [--chat-veil:70%]',\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.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\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=\"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 }: ComponentPropsWithoutRef<'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-5', className)}\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 and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\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))_calc(var(--chat-fade)*3))]',\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  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps } 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  Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":";;;;;;;;AAgCO,SAAS,cAAc,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAmB;AAC/E,EAAA,uBACEA,cAAA,CAACC,uCAAA,EAAA,EAAyB,GAAG,QAAA,EAC3B,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAWE,WAAA;AAAA,QACT,+EAAA;AAAA,QACA,2FAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAMO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACrF,EAAA,uBAAOF,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,SAAA,EAAWE,YAAG,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClG;AAGO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACvF,EAAA,uBAAOF,cAAA,CAACG,mCAAgB,SAAA,EAAWD,WAAA,CAAG,yBAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxF;AAMO,SAAS,kBAAkB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAiC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAACI,uCAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWF,WAAA;AAAA,QACT,6CAAA;AAAA,QACA,iFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAIJ,yCAAC,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,oCACzC,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAGO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACrF,EAAA,uBAAOF,cAAA,CAACK,0CAAuB,SAAA,EAAWH,WAAA,CAAG,UAAU,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAChF;AAGO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACxF,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWE,WAAA,CAAG,yEAAA,EAA2E,SAAS,CAAA;AAAA,MACjG,GAAG;AAAA;AAAA,GACN;AAEJ;AAYO,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACtF,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWE,WAAA;AAAA,QACT,mEAAA;AAAA,QACA,oHAAA;AAAA,QACA,4IAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAOO,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,0BAAA;AAAA,MACV,SAAA,EAAU,wEAAA;AAAA,MAEV,QAAA,kBAAAA,cAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,yBAAA,EACzB,QAAA,kBAAAA,cAAA;AAAA,QAACM,qCAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAWJ,WAAA,CAAG,4DAAA,EAA8D,SAAS,CAAA;AAAA,UACpF,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;ACpIO,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACpD,GAAA,EAAK,YAAA;AAAA,EACL,MAAA,EAAQ,eAAA;AAAA,EACR,OAAA,EAAS,gBAAA;AAAA,EACT,IAAA,EAAM,aAAA;AAAA,EACN,YAAA,EAAc,qBAAA;AAAA,EACd,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAC;;;;"}

package/dist/components/ChatShell.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-D5O7sUS5.js';
+import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-DlVS0FW7.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 function ChatShellRoot({ className, scroller, ...props }) {
@@ -9,9 +9,8 @@ function ChatShellRoot({ className, scroller, ...props }) {
       "data-slot": "chat-shell",
       className: cn(
         "@container relative isolate flex min-h-0 min-w-0 flex-col bg-(--chat-surface)",
-        "[--chat-column:48rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]",
-        "[--chat-surface:var(--color-surface2)]",
-        "[--chat-veil:color-mix(in_oklab,var(--chat-surface)_70%,transparent)]",
+        "[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]",
+        "[--chat-surface:var(--color-surface2)] [--chat-veil:70%]",
         className
       ),
       ...props
@@ -39,7 +38,7 @@ function ChatShellViewport({ className, children, ...props }) {
   );
 }
 function ChatShellContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(MessageScrollerContent, { className: cn("flex-1 pb-(--chat-gutter)", className), ...props });
+  return /* @__PURE__ */ jsx(MessageScrollerContent, { className: cn("flex-1", className), ...props });
 }
 function ChatShellColumn({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -56,7 +55,12 @@ function ChatShellDock({ className, ...props }) {
     "div",
     {
       "data-slot": "chat-shell-dock",
-      className: cn("sticky bottom-0 z-10 shrink-0 bg-(--chat-veil) pb-(--chat-gutter)", className),
+      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))_calc(var(--chat-fade)*3))]",
+        className
+      ),
       ...props
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"ChatShell.es.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { 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` (page colour), `--chat-gutter` (room above and below\n * the composer), `--chat-veil` (what the dock paints with), `--chat-inset-end`\n * (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 bg-(--chat-surface)',\n          '[--chat-column:48rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-surface2)]',\n          '[--chat-veil:color-mix(in_oklab,var(--chat-surface)_70%,transparent)]',\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.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\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=\"flex min-h-full min-w-0 flex-col\">\n        {children}\n      </div>\n    </MessageScrollerViewport>\n  );\n}\n\n/** Scrolling content. Its bottom padding is the unveiled air above the composer. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n  return <MessageScrollerContent className={cn('flex-1 pb-(--chat-gutter)', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentPropsWithoutRef<'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-5', className)}\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 * The veil is a background, not an overlay, so it passes behind the composer card\n * and dims the transcript in its rounded corners too.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      data-slot=\"chat-shell-dock\"\n      className={cn('sticky bottom-0 z-10 shrink-0 bg-(--chat-veil) pb-(--chat-gutter)', className)}\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  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps } 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  Viewport: ChatShellViewport,\n});\n"],"names":[],"mappings":";;;;AA+BO,SAAS,cAAc,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAmB;AAC/E,EAAA,uBACE,GAAA,CAAC,uBAAA,EAAA,EAAyB,GAAG,QAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,+EAAA;AAAA,QACA,sEAAA;AAAA,QACA,wCAAA;AAAA,QACA,uEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAMO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACrF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,SAAA,EAAW,GAAG,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClG;AAGO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACvF,EAAA,uBAAO,GAAA,CAAC,mBAAgB,SAAA,EAAW,EAAA,CAAG,yBAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxF;AAMO,SAAS,kBAAkB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAiC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6CAAA;AAAA,QACA,iFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAIJ,8BAAC,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,oCACzC,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAGO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACrF,EAAA,uBAAO,GAAA,CAAC,0BAAuB,SAAA,EAAW,EAAA,CAAG,6BAA6B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACnG;AAGO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACxF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yEAAA,EAA2E,SAAS,CAAA;AAAA,MACjG,GAAG;AAAA;AAAA,GACN;AAEJ;AAUO,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACtF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mEAAA,EAAqE,SAAS,CAAA;AAAA,MAC3F,GAAG;AAAA;AAAA,GACN;AAEJ;AAOO,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,0BAAA;AAAA,MACV,SAAA,EAAU,wEAAA;AAAA,MAEV,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,yBAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,4DAAA,EAA8D,SAAS,CAAA;AAAA,UACpF,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;AC7HO,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACpD,GAAA,EAAK,YAAA;AAAA,EACL,MAAA,EAAQ,eAAA;AAAA,EACR,OAAA,EAAS,gBAAA;AAAA,EACT,IAAA,EAAM,aAAA;AAAA,EACN,YAAA,EAAc,qBAAA;AAAA,EACd,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAC;;;;"}
+{"version":3,"file":"ChatShell.es.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { 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` (page colour), `--chat-fade` (the band the veil ramps\n * in across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--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 bg-(--chat-surface)',\n          '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n          '[--chat-surface:var(--color-surface2)] [--chat-veil:70%]',\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.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n  return (\n    <MessageScrollerViewport\n      className={cn(\n        'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\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=\"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 }: ComponentPropsWithoutRef<'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-5', className)}\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 and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\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))_calc(var(--chat-fade)*3))]',\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  ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps } 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  Viewport: ChatShellViewport,\n});\n"],"names":[],"mappings":";;;;AAgCO,SAAS,cAAc,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAmB;AAC/E,EAAA,uBACE,GAAA,CAAC,uBAAA,EAAA,EAAyB,GAAG,QAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,+EAAA;AAAA,QACA,2FAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAMO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACrF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,SAAA,EAAW,GAAG,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClG;AAGO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACvF,EAAA,uBAAO,GAAA,CAAC,mBAAgB,SAAA,EAAW,EAAA,CAAG,yBAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxF;AAMO,SAAS,kBAAkB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAiC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6CAAA;AAAA,QACA,iFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAIJ,8BAAC,KAAA,EAAA,EAAI,WAAA,EAAU,kBAAA,EAAmB,SAAA,EAAU,oCACzC,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAGO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACrF,EAAA,uBAAO,GAAA,CAAC,0BAAuB,SAAA,EAAW,EAAA,CAAG,UAAU,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAChF;AAGO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACxF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yEAAA,EAA2E,SAAS,CAAA;AAAA,MACjG,GAAG;AAAA;AAAA,GACN;AAEJ;AAYO,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoC;AACtF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mEAAA;AAAA,QACA,oHAAA;AAAA,QACA,4IAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAOO,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,0BAAA;AAAA,MACV,SAAA,EAAU,wEAAA;AAAA,MAEV,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,yBAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,4DAAA,EAA8D,SAAS,CAAA;AAAA,UACpF,GAAG;AAAA;AAAA,OACN,EACF;AAAA;AAAA,GACF;AAEJ;;ACpIO,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACpD,GAAA,EAAK,YAAA;AAAA,EACL,MAAA,EAAQ,eAAA;AAAA,EACR,OAAA,EAAS,gBAAA;AAAA,EACT,IAAA,EAAM,aAAA;AAAA,EACN,YAAA,EAAc,qBAAA;AAAA,EACd,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAC;;;;"}

package/dist/components/ClampedText.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
 const Txt = require('../Txt-I5lK8zy7.cjs');
 const icons_ChevronIcon = require('../icons/ChevronIcon.cjs.js');
 const hooks_useIsClamped = require('../hooks/use-is-clamped.cjs.js');

package/dist/components/ClampedText.es.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
 import { T as Txt } from '../Txt-Df42XG5p.js';
 import { ChevronIcon } from '../icons/ChevronIcon.es.js';
 import { useIsClamped } from '../hooks/use-is-clamped.es.js';

package/dist/components/CodeBlock.cjs.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const code = require('../code-B3WONxnA.cjs');
-const copyButton = require('../copy-button-BKFcsNE1.cjs');
-const select = require('../select-B6ce20XX.cjs');
-const tabsTab = require('../tabs-tab-BkUCE-4E.cjs');
+const copyButton = require('../copy-button-DwZ3c7D4.cjs');
+const select = require('../select-OAXqZLkC.cjs');
+const tabsRoot = require('../tabs-root-VtBc6K2q.cjs');
+const tabsTab = require('../tabs-tab-Cq4YR31P.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
@@ -37,9 +38,9 @@ function CodeBlock({
         className
       ),
       children: [
-        useTabs && firstOption && /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
+        useTabs && firstOption && /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
         }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsTab.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
         ] }) }),
         useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.cjs.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":";;;;;;;;;;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,QACxBA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAA,GAAa,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,KAAa,MAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,cAAc,QAAA,KAAa,QAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,UAAU,CAAC,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,EAAa,KAAA;AAE1C,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,sGAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,WAAA,oBACVC,cAAA,CAACC,aAAA,EAAA,EAAK,UAAA,EAAY,WAAA,CAAY,OAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAAe,aAAA,KAAkB,MAAM;AAAA,QAAC,CAAA,CAAA,EAC/F,QAAA,kBAAAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACb,yCAACE,gBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,qBACXF,cAAA,CAACG,eAAoB,KAAA,EAAO,GAAA,CAAI,OAC7B,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADG,IAAI,KAEd,CACD,GACH,CAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAgE,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrG,CAAA,EACF,CAAA;AAAA,QAGD,SAAA,IAAa,OAAA,oBACZF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAACM,aAAA,EAAA,EAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,wBAAc,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAC/B,QAAA,kBAAAL,cAAA,CAACM,sBAAY,CAAA,EACf,CAAA;AAAA,4BACAN,cAAA,CAACO,oBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,yBACXP,cAAA,CAACQ,iBAAA,EAAA,EAA2B,KAAA,EAAO,GAAA,CAAI,OACpC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADU,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWR,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,UAAA,IAAc,QAAA,oBACdF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,YAAA,EAAA,EAAW,SAAA,EAAU,oCAAA,EAAsC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACpE,OAAA,oBAAWA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,cAAc,CAAC,QAAA,IAAY,2BAC3BA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAGjGF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA;AAAA,YAACS,SAAA;AAAA,YAAA;AAAA,oBACCZ,MAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAA,EAAWE,WAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,QAAA,KAAa,WAAW,gCAAA,GAAmC;AAAA;AAC7D;AAAA,WACF;AAAA,0BACAC,cAAA;AAAA,YAACU,qBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAASb,MAAA;AAAA,cACT,WAAA;AAAA,cACA,OAAA,EAAS,WAAA;AAAA,cACT,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAWE,WAAA;AAAA,gBACT,kHAAA;AAAA,gBACAY,kCAAA,CAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/CodeBlock.es.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Code } from '../code-C5KVVzOZ.js';
-import { C as CopyButton } from '../copy-button-H2iaKMng.js';
-import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-Beo8qQ0e.js';
-import { b as Tabs, a as TabList, T as Tab } from '../tabs-tab-DDGltcUc.js';
+import { C as CopyButton } from '../copy-button-B1GWIQ-x.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-B_E0ADD5.js';
+import { a as Tabs, T as TabList } from '../tabs-root-BBPou4QC.js';
+import { T as Tab } from '../tabs-tab-D5JTAehi.js';
 import { transitions } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.es.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAA,GAAa,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,KAAa,MAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,cAAc,QAAA,KAAa,QAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,UAAU,CAAC,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,EAAa,KAAA;AAE1C,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,sGAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,WAAA,oBACV,GAAA,CAAC,IAAA,EAAA,EAAK,UAAA,EAAY,WAAA,CAAY,OAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAAe,aAAA,KAAkB,MAAM;AAAA,QAAC,CAAA,CAAA,EAC/F,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACb,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,qBACX,GAAA,CAAC,OAAoB,KAAA,EAAO,GAAA,CAAI,OAC7B,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADG,IAAI,KAEd,CACD,GACH,CAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAgE,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrG,CAAA,EACF,CAAA;AAAA,QAGD,SAAA,IAAa,OAAA,oBACZ,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,iBAAc,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,4BACA,GAAA,CAAC,aAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,yBACX,GAAA,CAAC,UAAA,EAAA,EAA2B,KAAA,EAAO,GAAA,CAAI,OACpC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADU,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,UAAA,IAAc,QAAA,oBACd,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAW,SAAA,EAAU,oCAAA,EAAsC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACpE,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,cAAc,CAAC,QAAA,IAAY,2BAC3B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAGjG,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,QAAA,KAAa,WAAW,gCAAA,GAAmC;AAAA;AAC7D;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,IAAA;AAAA,cACT,WAAA;AAAA,cACA,OAAA,EAAS,WAAA;AAAA,cACT,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAW,EAAA;AAAA,gBACT,kHAAA;AAAA,gBACA,WAAA,CAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"CodeBlock.es.js","sources":["../../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/CodeEditor.cjs.js

@@ -14,7 +14,7 @@ const ReactCodeMirror = require('@uiw/react-codemirror');
 const index = require('../index-C-Lt4Bx_.cjs');
 const React = require('react');
 const autocomplete = require('@codemirror/autocomplete');
-const copyButton = require('../copy-button-BKFcsNE1.cjs');
+const copyButton = require('../copy-button-DwZ3c7D4.cjs');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const highlight = require('../highlight-C2uRVhiA.cjs');

package/dist/components/CodeEditor.es.js

@@ -10,7 +10,7 @@ import ReactCodeMirror from '@uiw/react-codemirror';
 import { c as cva } from '../index-CSm06eOE.js';
 import { forwardRef, useMemo } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
-import { C as CopyButton } from '../copy-button-H2iaKMng.js';
+import { C as CopyButton } from '../copy-button-B1GWIQ-x.js';
 import { u as useTheme } from '../theme-provider-C9ih9jSS.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 export { h as highlight } from '../highlight-Dis62bkj.js';

package/dist/components/Columns.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
 
 function ColumnContent({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(`grid content-start gap-8 overflow-y-auto`, className), children });

package/dist/components/Columns.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useState, useCallback, useEffect } from 'react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
 
 function ColumnContent({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn(`grid content-start gap-8 overflow-y-auto`, className), children });

package/dist/components/Combobox.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('../combobox-DXwbHjvQ.cjs');
+const combobox = require('../combobox-Z3NehlIY.cjs');
 const combobox$1 = require('@base-ui/react/combobox');
 
 

package/dist/components/Combobox.es.js

@@ -1,3 +1,3 @@
-export { C as Combobox, c as comboboxStyles } from '../combobox-sa_Pxyl4.js';
+export { C as Combobox, c as comboboxStyles } from '../combobox-CH9vBToX.js';
 export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 //# sourceMappingURL=Combobox.es.js.map

package/dist/components/Command.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const command = require('../command-qsEykgml.cjs');
+const command = require('../command-DJwcGKv_.cjs');
 
 
 

package/dist/components/Command.es.js

@@ -1,2 +1,2 @@
-export { C as Command, a as CommandDialog, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandSeparator, h as CommandShortcut } from '../command-Duq1xsiS.js';
+export { C as Command, a as CommandDialog, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandSeparator, h as CommandShortcut } from '../command-BZ7S7MR-.js';
 //# sourceMappingURL=Command.es.js.map

package/dist/components/CommandPalette.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../CommandPalette.css');const jsxRuntime = require('react/jsx-runtime');
-const command = require('../command-qsEykgml.cjs');
+const command = require('../command-DJwcGKv_.cjs');
 const kbd = require('../kbd-Br7kdwaB.cjs');
 const scrollArea = require('../scroll-area-Dv6QagXt.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');

package/dist/components/CommandPalette.es.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { a as CommandDialog, d as CommandInput, e as CommandItem, h as CommandShortcut, f as CommandList } from '../command-Duq1xsiS.js';
+import { a as CommandDialog, d as CommandInput, e as CommandItem, h as CommandShortcut, f as CommandList } from '../command-BZ7S7MR-.js';
 import { K as Kbd } from '../kbd-DE0nj4DL.js';
 import { S as ScrollArea } from '../scroll-area-DZrEuKjC.js';
 import { c as cn } from '../cn-BakJzhuv.js';

package/dist/components/CopyButton.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const copyButton = require('../copy-button-BKFcsNE1.cjs');
+const copyButton = require('../copy-button-DwZ3c7D4.cjs');
 
 
 

package/dist/components/CopyButton.es.js

@@ -1,2 +1,2 @@
-export { C as CopyButton } from '../copy-button-H2iaKMng.js';
+export { C as CopyButton } from '../copy-button-B1GWIQ-x.js';
 //# sourceMappingURL=CopyButton.es.js.map

package/dist/components/DataCodeSection.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataCodeSection = require('../data-code-section-D2zjah_b.cjs');
+const dataCodeSection = require('../data-code-section-BjmFgJpC.cjs');
 
 
 

package/dist/components/DataCodeSection.es.js

@@ -1,2 +1,2 @@
-export { D as DataCodeSection } from '../data-code-section-MHMkC6q9.js';
+export { D as DataCodeSection } from '../data-code-section-PJM5l3aS.js';
 //# sourceMappingURL=DataCodeSection.es.js.map

package/dist/components/DataDetailsPanel.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const lucideReact = require('lucide-react');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
 const langJson = require('@codemirror/lang-json');
 const language = require('@codemirror/language');
 const view = require('@codemirror/view');
@@ -14,7 +14,7 @@ const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const ReactCodeMirror = require('@uiw/react-codemirror');
 const React = require('react');
 const buttonsGroup = require('../buttons-group-Dw8Wu4sj.cjs');
-const copyButton = require('../copy-button-BKFcsNE1.cjs');
+const copyButton = require('../copy-button-DwZ3c7D4.cjs');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
 const spinner = require('../spinner-BBAmiRCS.cjs');
 

package/dist/components/DataDetailsPanel.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { XIcon, AlignLeftIcon, AlignJustifyIcon } from 'lucide-react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
 import { json } from '@codemirror/lang-json';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
@@ -10,7 +10,7 @@ import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import ReactCodeMirror from '@uiw/react-codemirror';
 import { useState, useMemo } from 'react';
 import { B as ButtonsGroup } from '../buttons-group-DJh4wnMs.js';
-import { C as CopyButton } from '../copy-button-H2iaKMng.js';
+import { C as CopyButton } from '../copy-button-B1GWIQ-x.js';
 import { u as useTheme } from '../theme-provider-C9ih9jSS.js';
 import { S as Spinner } from '../spinner-HCsQgpaP.js';
 

package/dist/components/DataFilter.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../Button-Bm94fEF2.cjs');
-const dropdownMenu = require('../dropdown-menu-ppWztidX.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
+const dropdownMenu = require('../dropdown-menu-BZGlERgf.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 const SUBMENU_SEARCH_THRESHOLD = 6;

package/dist/components/DataFilter.es.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { FilterIcon, SearchIcon, XIcon } from 'lucide-react';
 import { useState, useCallback, useMemo } from 'react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
-import { D as DropdownMenu } from '../dropdown-menu-DEFygDZI.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
+import { D as DropdownMenu } from '../dropdown-menu-DCMh8P4w.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 const SUBMENU_SEARCH_THRESHOLD = 6;

package/dist/components/DataList.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataList = require('../data-list-Cb-piK4z.cjs');
+const dataList = require('../data-list-Cnnnx_vD.cjs');
 const dataListSkeleton = require('../data-list-skeleton--tiF5mjH.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const dataListTopCell = require('../data-list-top-cell-CU8KoWys.cjs');
 const dateFns = require('date-fns');
-const tracesDataList = require('../traces-data-list-vsvvvEiP.cjs');
+const tracesDataList = require('../traces-data-list-pTNo_zbS.cjs');
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/DataList.es.js

@@ -1,9 +1,9 @@
-export { D as DataList } from '../data-list-CnQRIUyN.js';
+export { D as DataList } from '../data-list-CnQWE0QP.js';
 export { D as DataListSkeleton } from '../data-list-skeleton-DeEqsrIz.js';
 import { jsx } from 'react/jsx-runtime';
 import { a as DataListCell, c as DataListNextPageLoading, f as DataListNoMatch, i as DataListRowButton, m as DataListTopCell, n as DataListTop, D as DataListRoot } from '../data-list-top-cell-D9VTy6Sk.js';
 import { format, isToday } from 'date-fns';
-export { T as TracesDataList } from '../traces-data-list-DtuaCDES.js';
+export { T as TracesDataList } from '../traces-data-list-B3wMvCfk.js';
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/DataPanel.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataPanel = require('../data-panel-BumsjXVz.cjs');
+const dataPanel = require('../data-panel-C85h9XvH.cjs');
 
 
 

package/dist/components/DataPanel.es.js

@@ -1,2 +1,2 @@
-export { D as DataPanel } from '../data-panel-BEvHk4wg.js';
+export { D as DataPanel } from '../data-panel-BQqPr6ew.js';
 //# sourceMappingURL=DataPanel.es.js.map

package/dist/components/DateRangeTimeline.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
 const datePicker = require('../date-picker-DrWmUawi.cjs');
 const popover = require('../popover-CO0UtG2f.cjs');
 const Txt = require('../Txt-I5lK8zy7.cjs');

package/dist/components/DateRangeTimeline.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useLayoutEffect, useRef, useEffectEvent, useEffect } from 'react';
 import { format, parseISO, isValid, differenceInCalendarDays, addDays } from 'date-fns';
 import { CalendarDaysIcon } from 'lucide-react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
 import { D as DatePicker } from '../date-picker-BpKciwOX.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-DwDnnrzj.js';
 import { T as Txt } from '../Txt-Df42XG5p.js';

package/dist/components/DateTimePicker.cjs.js

@@ -9,8 +9,8 @@ const React = require('react');
 const useDebounce = require('use-debounce');
 const textFieldBlock = require('../text-field-block-BGlwSFYC.cjs');
 const datePicker = require('../date-picker-DrWmUawi.cjs');
-const timePicker = require('../time-picker-BOQtPoyD.cjs');
-const Button = require('../Button-Bm94fEF2.cjs');
+const timePicker = require('../time-picker-Dy2oyq8P.cjs');
+const Button = require('../Button-B4Ixj2aW.cjs');
 const popover = require('../popover-CO0UtG2f.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 

package/dist/components/DateTimePicker.es.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { T as TextFieldBlock } from '../text-field-block-DOiM0dpY.js';
 import { D as DatePicker } from '../date-picker-BpKciwOX.js';
-import { T as TimePicker } from '../time-picker-mLzcoQMO.js';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { T as TimePicker } from '../time-picker-CkqREdQB.js';
+import { B as Button } from '../Button-C-9Pzy-Z.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-DwDnnrzj.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 

package/dist/components/DateTimeRangePicker.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dateTimeRangePicker = require('../date-time-range-picker-ue0m5G27.cjs');
+const dateTimeRangePicker = require('../date-time-range-picker-sT6pHDmU.cjs');
 
 
 

package/dist/components/DateTimeRangePicker.es.js

@@ -1,2 +1,2 @@
-export { D as DateTimeRangePicker } from '../date-time-range-picker-yJBIm34J.js';
+export { D as DateTimeRangePicker } from '../date-time-range-picker-BQpZVrH7.js';
 //# sourceMappingURL=DateTimeRangePicker.es.js.map

package/dist/components/Dialog.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dialog = require('../dialog-ClItuCFY.cjs');
+const dialog = require('../dialog-5ZYCeKf-.cjs');
 
 
 

package/dist/components/Dialog.es.js

@@ -1,2 +1,2 @@
-export { D as Dialog, a as DialogBody, b as DialogClose, c as DialogContent, d as DialogDescription, e as DialogFooter, f as DialogHeader, g as DialogOverlay, h as DialogPortal, i as DialogTitle, j as DialogTrigger } from '../dialog-bnt6epW2.js';
+export { D as Dialog, a as DialogBody, b as DialogClose, c as DialogContent, d as DialogDescription, e as DialogFooter, f as DialogHeader, g as DialogOverlay, h as DialogPortal, i as DialogTitle, j as DialogTrigger } from '../dialog-DDXW5M21.js';
 //# sourceMappingURL=Dialog.es.js.map

package/dist/components/Drawer.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const drawer = require('../drawer-CdsTitFp.cjs');
+const drawer = require('../drawer-CNnvBMfD.cjs');