@mastra/playground-ui 66.0.0-alpha.0 → 66.0.0-alpha.1

package/dist/ActionRow-CJeLmb4v.cjs

@@ -0,0 +1,42 @@
+const require_utils = require("./utils-01CRPdxi.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ds/components/ActionRow/action-row.tsx
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+function ActionRowRoot({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row",
+		className: require_utils.cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+function ActionRowStart({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row-start",
+		className: require_utils.cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+function ActionRowEnd({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row-end",
+		className: require_utils.cn("ml-auto flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+//#region src/ds/components/ActionRow/index.ts
+var ActionRow = Object.assign(ActionRowRoot, {
+	Start: ActionRowStart,
+	End: ActionRowEnd
+});
+//#endregion
+Object.defineProperty(exports, "ActionRow", {
+	enumerable: true,
+	get: function() {
+		return ActionRow;
+	}
+});
+
+//# sourceMappingURL=ActionRow-CJeLmb4v.cjs.map

package/dist/{components/ActionRow.cjs.js.map → ActionRow-CJeLmb4v.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.cjs.js","names":["cn"],"sources":["../../src/ds/components/ActionRow/action-row.tsx","../../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAiB,WAAWA,cAAAA,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}
+{"version":3,"file":"ActionRow-CJeLmb4v.cjs","names":["cn"],"sources":["../src/ds/components/ActionRow/action-row.tsx","../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAiB,WAAWA,cAAAA,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}

package/dist/ActionRow-CWCII_ps.js

@@ -0,0 +1,37 @@
+import { t as cn } from "./utils-BiHZnbcQ.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ds/components/ActionRow/action-row.tsx
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+function ActionRowRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row",
+		className: cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+function ActionRowStart({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row-start",
+		className: cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+function ActionRowEnd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row-end",
+		className: cn("ml-auto flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+//#region src/ds/components/ActionRow/index.ts
+var ActionRow = Object.assign(ActionRowRoot, {
+	Start: ActionRowStart,
+	End: ActionRowEnd
+});
+//#endregion
+export { ActionRow as t };
+
+//# sourceMappingURL=ActionRow-CWCII_ps.js.map

package/dist/{components/ActionRow.es.js.map → ActionRow-CWCII_ps.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.es.js","names":[],"sources":["../../src/ds/components/ActionRow/action-row.tsx","../../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}
+{"version":3,"file":"ActionRow-CWCII_ps.js","names":[],"sources":["../src/ds/components/ActionRow/action-row.tsx","../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}

package/dist/{Composer-CvORFb_o.js → Composer-CTjshNue.js}

@@ -130,6 +130,46 @@ function ComposerToneLabel({ tone, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/ds/components/Composer/composer-header.tsx
+/** Optional context above ComposerRing or ComposerBox. Empty rendered content occupies no space. */
+var ComposerHeader = forwardRef(({ className, children, open = true, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
+	ref,
+	open,
+	"data-slot": "composer-header",
+	className: cn("composer-header relative isolate mx-auto w-full max-w-3xl", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className: "composer-header-panel",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "composer-header-surface",
+			className: "flex flex-col gap-3 overflow-hidden rounded-t-[23px] border border-b-0 border-surface-rim bg-card px-3 pt-3 pb-8 text-body-sm text-muted-foreground empty:hidden",
+			children
+		})
+	})
+}));
+ComposerHeader.displayName = "ComposerHeader";
+var ComposerHeaderRow = forwardRef(({ className, tone = "default", ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "composer-header-row",
+	className: cn("flex min-w-0 flex-wrap items-center gap-2 [&>svg]:size-icon-sm [&>svg]:shrink-0", tone === "destructive" && "text-destructive-foreground", tone === "success" && "text-success-indicator", className),
+	...props
+}));
+ComposerHeaderRow.displayName = "ComposerHeaderRow";
+var ComposerHeaderContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "composer-header-content",
+	className: cn("min-w-0 flex-1 wrap-anywhere", className),
+	...props
+}));
+ComposerHeaderContent.displayName = "ComposerHeaderContent";
+var ComposerHeaderActions = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "composer-header-actions",
+	className: cn("ml-auto flex max-w-full shrink-0 flex-wrap items-center gap-2", className),
+	...props
+}));
+ComposerHeaderActions.displayName = "ComposerHeaderActions";
+//#endregion
 //#region src/ds/components/Composer/commands/composer-suggestions.tsx
 function ComposerSuggestions({ id, items, activeIndex, contextLabel, onBack, onSelect }) {
 	const activeOption = useRef(null);
@@ -313,6 +353,6 @@ function useComposerCommands({ commands, value, onValueChange, onSubmit, inputRe
 	};
 }
 //#endregion
-export { Composer as a, ComposerBox as c, ComposerToneLabel as d, ComposerSuggestions as i, ComposerInput as l, matchCommandOptions as n, ComposerActions as o, matchCommands as r, ComposerAttachments as s, useComposerCommands as t, ComposerRing as u };
+export { ComposerHeader as a, ComposerHeaderRow as c, ComposerAttachments as d, ComposerBox as f, ComposerToneLabel as h, ComposerSuggestions as i, Composer as l, ComposerRing as m, matchCommandOptions as n, ComposerHeaderActions as o, ComposerInput as p, matchCommands as r, ComposerHeaderContent as s, useComposerCommands as t, ComposerActions as u };
 
-//# sourceMappingURL=Composer-CvORFb_o.js.map
+//# sourceMappingURL=Composer-CTjshNue.js.map

package/dist/Composer-CTjshNue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer-CTjshNue.js","names":[],"sources":["../src/ds/components/Composer/use-composer-pointer.ts","../src/ds/components/Composer/composer.tsx","../src/ds/components/Composer/composer-header.tsx","../src/ds/components/Composer/commands/composer-suggestions.tsx","../src/ds/components/Composer/commands/command-matches.ts","../src/ds/components/Composer/commands/use-composer-commands.ts"],"sourcesContent":["import { useState } from 'react';\nimport type { PointerEvent } from 'react';\n\nexport function useComposerPointer(enabled: boolean) {\n  const [pointer, setPointer] = useState<{ x: number; y: number; angle: number }>();\n\n  function trackPointer(event: PointerEvent<HTMLDivElement>) {\n    if (!enabled || event.defaultPrevented) return;\n\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - bounds.left;\n    const y = event.clientY - bounds.top;\n    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);\n    // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n    setPointer({ x, y, angle: (radians * 180) / Math.PI + 90 });\n  }\n\n  return {\n    trackPointer,\n    pointerStyle: {\n      '--composer-spotlight-x': pointer && `${pointer.x}px`,\n      '--composer-spotlight-y': pointer && `${pointer.y}px`,\n      '--composer-ring-angle': pointer && `${pointer.angle}deg`,\n    },\n  };\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointer } from './use-composer-pointer';\nimport { textFieldAutofillProps } from '@/ds/primitives/password-manager-autofill';\nimport { cn } from '@/lib/utils';\n\nimport './composer.css';\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  variant?: 'inline' | 'textarea';\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        // The suggestions list and the input scroll flush with the top corners, so their scrollbars\n        // take the inset for this radius.\n        'composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border transition-colors duration-normal scrollbar-inset-[22px] focus-within:border-border-strong',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport type ComposerTone = 'default' | 'green' | 'purple' | 'orange';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n  tone?: ComposerTone;\n}\n\nexport const ComposerRing = ({\n  busy = false,\n  tone = 'green',\n  className,\n  style,\n  onPointerEnter,\n  onPointerMove,\n  ...props\n}: ComposerRingProps) => {\n  const { trackPointer, pointerStyle } = useComposerPointer(!busy);\n\n  return (\n    <div\n      data-slot=\"composer-ring\"\n      data-composer-tone={tone}\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px', className)}\n      style={{ ...pointerStyle, ...style }}\n      onPointerEnter={event => {\n        onPointerEnter?.(event);\n        trackPointer(event);\n      }}\n      onPointerMove={event => {\n        onPointerMove?.(event);\n        trackPointer(event);\n      }}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, variant = 'inline', maxHeight, autoComplete, ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight ?? (variant === 'textarea' ? '16rem' : '13rem')}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          variant === 'textarea' ? 'min-h-28' : 'min-h-10',\n          className,\n        )}\n        {...props}\n        {...textFieldAutofillProps(autoComplete)}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex w-full flex-wrap items-end justify-between gap-2 px-3 pb-3', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"w-full flex-1 bg-brand-green blur-xl\" />\n    <div className=\"w-full flex-1 bg-product-observability blur-xl\" />\n    <div className=\"w-full flex-1 bg-brand-green blur-xl\" />\n    <div className=\"w-full flex-1 bg-product-observability blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n\nexport interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {\n  tone: ComposerTone;\n}\n\nexport function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps) {\n  return <span data-composer-tone={tone} className={cn('composer-tone-label', className)} {...props} />;\n}\n","import { Collapsible } from '@base-ui/react/collapsible';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './composer-header.css';\n\nexport interface ComposerHeaderProps extends ComponentPropsWithoutRef<'div'> {\n  /** Animate visibility while retaining content through the closing transition. */\n  open?: boolean;\n}\n\n/** Optional context above ComposerRing or ComposerBox. Empty rendered content occupies no space. */\nexport const ComposerHeader = forwardRef<HTMLDivElement, ComposerHeaderProps>(\n  ({ className, children, open = true, ...props }, ref) => (\n    <Collapsible.Root\n      ref={ref}\n      open={open}\n      data-slot=\"composer-header\"\n      className={cn('composer-header relative isolate mx-auto w-full max-w-3xl', className)}\n      {...props}\n    >\n      <Collapsible.Panel className=\"composer-header-panel\">\n        <div\n          data-slot=\"composer-header-surface\"\n          className=\"flex flex-col gap-3 overflow-hidden rounded-t-[23px] border border-b-0 border-surface-rim bg-card px-3 pt-3 pb-8 text-body-sm text-muted-foreground empty:hidden\"\n        >\n          {children}\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  ),\n);\nComposerHeader.displayName = 'ComposerHeader';\n\nexport interface ComposerHeaderRowProps extends ComponentPropsWithoutRef<'div'> {\n  tone?: 'default' | 'destructive' | 'success';\n}\n\nexport const ComposerHeaderRow = forwardRef<HTMLDivElement, ComposerHeaderRowProps>(\n  ({ className, tone = 'default', ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-row\"\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2 [&>svg]:size-icon-sm [&>svg]:shrink-0',\n        tone === 'destructive' && 'text-destructive-foreground',\n        tone === 'success' && 'text-success-indicator',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nComposerHeaderRow.displayName = 'ComposerHeaderRow';\n\nexport type ComposerHeaderContentProps = ComponentPropsWithoutRef<'div'>;\n\nexport const ComposerHeaderContent = forwardRef<HTMLDivElement, ComposerHeaderContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-content\"\n      className={cn('min-w-0 flex-1 wrap-anywhere', className)}\n      {...props}\n    />\n  ),\n);\nComposerHeaderContent.displayName = 'ComposerHeaderContent';\n\nexport type ComposerHeaderActionsProps = ComponentPropsWithoutRef<'div'>;\n\nexport const ComposerHeaderActions = forwardRef<HTMLDivElement, ComposerHeaderActionsProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-actions\"\n      className={cn('ml-auto flex max-w-full shrink-0 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerHeaderActions.displayName = 'ComposerHeaderActions';\n","import { Collapsible } from '@base-ui/react/collapsible';\nimport { ArrowLeft, Check } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { ScrollArea, ScrollAreaViewport } from '../../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nexport interface ComposerSuggestionItem {\n  id: string;\n  label: string;\n  description?: string;\n  active?: boolean;\n}\n\nexport interface ComposerSuggestionsProps {\n  id: string;\n  items: readonly ComposerSuggestionItem[];\n  activeIndex: number;\n  contextLabel?: string;\n  onBack?: () => void;\n  onSelect: (index: number) => void;\n}\n\nexport function ComposerSuggestions({\n  id,\n  items,\n  activeIndex,\n  contextLabel,\n  onBack,\n  onSelect,\n}: ComposerSuggestionsProps) {\n  const activeOption = useRef<HTMLButtonElement>(null);\n  const activeItemId = items[activeIndex]?.id;\n  const label = contextLabel ? `${contextLabel} options` : 'Slash commands';\n\n  useEffect(() => {\n    activeOption.current?.scrollIntoView({ block: 'nearest' });\n  }, [activeItemId]);\n\n  return (\n    <Collapsible.Root open={items.length > 0}>\n      <Collapsible.Panel className=\"h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-normal ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none\">\n        <div className=\"border-b border-border\" role=\"region\" aria-label={label}>\n          {contextLabel && onBack && (\n            <div className=\"border-b border-border px-1.5 py-1\">\n              <button\n                type=\"button\"\n                className=\"flex items-center gap-1.5 rounded-xl px-2 py-1.5 text-caption text-muted-foreground transition-colors duration-normal ease-out-custom hover:bg-fill-subtle hover:text-foreground motion-reduce:transition-none\"\n                aria-label=\"Back to slash commands\"\n                onMouseDown={event => event.preventDefault()}\n                onClick={onBack}\n              >\n                <ArrowLeft size={14} aria-hidden />\n                <span>{contextLabel}</span>\n              </button>\n            </div>\n          )}\n          <ScrollArea maxHeight=\"min(22rem, 50dvh)\">\n            <ScrollAreaViewport className=\"overscroll-y-contain\">\n              <div id={id} role=\"listbox\" aria-label={label} className=\"flex flex-col gap-px p-1.5\">\n                {items.map((item, index) => (\n                  <button\n                    ref={index === activeIndex ? activeOption : undefined}\n                    id={item.id}\n                    key={item.id}\n                    type=\"button\"\n                    role=\"option\"\n                    tabIndex={-1}\n                    aria-selected={index === activeIndex}\n                    aria-current={item.active ? 'true' : undefined}\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between gap-4 rounded-2xl px-2 py-1.5 text-left text-caption transition-colors duration-normal ease-out-custom motion-reduce:transition-none',\n                      index === activeIndex\n                        ? 'bg-fill-subtle text-foreground'\n                        : 'text-muted-foreground hover:bg-fill-subtle hover:text-foreground',\n                    )}\n                    onMouseDown={event => event.preventDefault()}\n                    onClick={() => onSelect(index)}\n                  >\n                    <span className=\"max-w-[60%] min-w-0 shrink-0 truncate\" title={item.label}>\n                      {item.label}\n                    </span>\n                    {(item.description || item.active) && (\n                      <span className=\"flex min-w-0 items-center gap-1.5 text-right\">\n                        {item.description && (\n                          <span className=\"truncate\" title={item.description}>\n                            {item.description}\n                          </span>\n                        )}\n                        {item.active && (\n                          <span className=\"flex shrink-0 items-center gap-1\">\n                            <Check size={13} aria-hidden />\n                            Current\n                          </span>\n                        )}\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </ScrollAreaViewport>\n          </ScrollArea>\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n}\n","export interface ComposerCommandOption {\n  value: string;\n  label: string;\n  description?: string;\n  active?: boolean;\n}\n\nexport interface ComposerCommand {\n  name: string;\n  description: string;\n  options?: readonly ComposerCommandOption[];\n}\n\nexport function matchCommands<T extends Pick<ComposerCommand, 'name'>>(commands: readonly T[], draft: string): T[] {\n  if (!draft.startsWith('/')) return [];\n  const query = draft.slice(1).toLowerCase();\n  if (/\\s/.test(query)) return [];\n  return commands.filter(command => command.name.toLowerCase().startsWith(query));\n}\n\nexport function matchCommandOptions<T extends ComposerCommand>(commands: readonly T[], draft: string) {\n  if (!draft.startsWith('/')) return undefined;\n  const firstWhitespace = draft.search(/\\s/);\n  if (firstWhitespace === -1) return undefined;\n  const command = commands.find(candidate => candidate.name === draft.slice(1, firstWhitespace));\n  if (!command?.options) return undefined;\n  const query = draft.slice(firstWhitespace).trim().toLowerCase();\n  if (/\\s/.test(query)) return undefined;\n  const options = command.options.filter(option => option.value.toLowerCase().startsWith(query));\n  return options.length > 0 ? { command, options } : undefined;\n}\n","import type { ChangeEvent, ComponentPropsWithoutRef, RefObject } from 'react';\nimport { useId, useState } from 'react';\nimport type { ComposerCommand, ComposerCommandOption } from './command-matches';\nimport { matchCommandOptions, matchCommands } from './command-matches';\nimport type { ComposerSuggestionItem, ComposerSuggestionsProps } from './composer-suggestions';\nimport { useKeydown } from '@/lib/keyboard/use-keydown';\n\nfunction createSuggestionItems(\n  listId: string,\n  commands: readonly ComposerCommand[],\n  options?: readonly ComposerCommandOption[],\n): ComposerSuggestionItem[] {\n  if (options)\n    return options.map(option => ({ ...option, id: `${listId}-option-${encodeURIComponent(option.value)}` }));\n  return commands.map(command => ({\n    id: `${listId}-command-${encodeURIComponent(command.name)}`,\n    label: `/${command.name}`,\n    description: command.description,\n  }));\n}\n\nexport interface UseComposerCommandsProps {\n  commands: readonly ComposerCommand[];\n  value: string;\n  onValueChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  inputRef: RefObject<HTMLTextAreaElement | null>;\n  enabled?: boolean;\n}\n\nexport function useComposerCommands({\n  commands,\n  value,\n  onValueChange,\n  onSubmit,\n  inputRef,\n  enabled = true,\n}: UseComposerCommandsProps) {\n  const listId = useId();\n  const [navigation, setNavigation] = useState({ value: '', index: 0 });\n  const optionMatch = enabled ? matchCommandOptions(commands, value) : undefined;\n  const matchingCommands = enabled && !optionMatch ? matchCommands(commands, value) : [];\n  const items = createSuggestionItems(listId, matchingCommands, optionMatch?.options);\n  const boundedIndex = Math.min(navigation.index, Math.max(0, items.length - 1));\n  const activeIndex = navigation.value === value ? boundedIndex : 0;\n\n  function updateValue(nextValue: string) {\n    setNavigation({ value: nextValue, index: 0 });\n    onValueChange(nextValue);\n  }\n\n  function returnToCommands() {\n    updateValue(optionMatch ? `/${optionMatch.command.name}` : '');\n    inputRef.current?.focus();\n  }\n\n  function selectSuggestion(index: number) {\n    inputRef.current?.focus();\n    if (optionMatch) {\n      const option = optionMatch.options[index];\n      if (option) onSubmit(`/${optionMatch.command.name} ${option.value}`);\n      return;\n    }\n    const command = matchingCommands[index];\n    if (command) updateValue(`/${command.name} `);\n  }\n\n  function moveSelection(direction: number) {\n    setNavigation({ value, index: (activeIndex + direction + items.length) % items.length });\n  }\n\n  function shouldHandleCommandKey(event: KeyboardEvent) {\n    const command = matchingCommands[activeIndex];\n    const submitExactCommand =\n      matchingCommands.length === 1 && value.toLowerCase() === `/${command?.name}` && !command?.options?.length;\n    return event.key !== 'Enter' || !submitExactCommand;\n  }\n\n  useKeydown(\n    {\n      ArrowDown: () => moveSelection(1),\n      ArrowUp: () => moveSelection(-1),\n      Escape: returnToCommands,\n      Tab: () => selectSuggestion(activeIndex),\n      Enter: () => selectSuggestion(activeIndex),\n    },\n    {\n      target: inputRef,\n      enabled: items.length > 0,\n      shouldHandle: shouldHandleCommandKey,\n    },\n  );\n\n  const inputProps = {\n    value,\n    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => updateValue(event.target.value),\n    'aria-autocomplete': 'list',\n    'aria-controls': items.length > 0 ? listId : undefined,\n    'aria-activedescendant': items[activeIndex]?.id,\n  } satisfies ComponentPropsWithoutRef<'textarea'>;\n\n  const suggestionsProps: ComposerSuggestionsProps = {\n    id: listId,\n    items,\n    activeIndex,\n    contextLabel: optionMatch ? `/${optionMatch.command.name}` : undefined,\n    onBack: optionMatch ? returnToCommands : undefined,\n    onSelect: selectSuggestion,\n  };\n\n  return { inputProps, suggestionsProps };\n}\n"],"mappings":"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"}

package/dist/{Composer-hLplTNPc.cjs → Composer-O0z907Qs.cjs}

@@ -130,6 +130,46 @@ function ComposerToneLabel({ tone, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/ds/components/Composer/composer-header.tsx
+/** Optional context above ComposerRing or ComposerBox. Empty rendered content occupies no space. */
+var ComposerHeader = (0, react.forwardRef)(({ className, children, open = true, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_collapsible.Collapsible.Root, {
+	ref,
+	open,
+	"data-slot": "composer-header",
+	className: require_utils.cn("composer-header relative isolate mx-auto w-full max-w-3xl", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_collapsible.Collapsible.Panel, {
+		className: "composer-header-panel",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "composer-header-surface",
+			className: "flex flex-col gap-3 overflow-hidden rounded-t-[23px] border border-b-0 border-surface-rim bg-card px-3 pt-3 pb-8 text-body-sm text-muted-foreground empty:hidden",
+			children
+		})
+	})
+}));
+ComposerHeader.displayName = "ComposerHeader";
+var ComposerHeaderRow = (0, react.forwardRef)(({ className, tone = "default", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	"data-slot": "composer-header-row",
+	className: require_utils.cn("flex min-w-0 flex-wrap items-center gap-2 [&>svg]:size-icon-sm [&>svg]:shrink-0", tone === "destructive" && "text-destructive-foreground", tone === "success" && "text-success-indicator", className),
+	...props
+}));
+ComposerHeaderRow.displayName = "ComposerHeaderRow";
+var ComposerHeaderContent = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	"data-slot": "composer-header-content",
+	className: require_utils.cn("min-w-0 flex-1 wrap-anywhere", className),
+	...props
+}));
+ComposerHeaderContent.displayName = "ComposerHeaderContent";
+var ComposerHeaderActions = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	"data-slot": "composer-header-actions",
+	className: require_utils.cn("ml-auto flex max-w-full shrink-0 flex-wrap items-center gap-2", className),
+	...props
+}));
+ComposerHeaderActions.displayName = "ComposerHeaderActions";
+//#endregion
 //#region src/ds/components/Composer/commands/composer-suggestions.tsx
 function ComposerSuggestions({ id, items, activeIndex, contextLabel, onBack, onSelect }) {
 	const activeOption = (0, react.useRef)(null);
@@ -337,6 +377,30 @@ Object.defineProperty(exports, "ComposerBox", {
 		return ComposerBox;
 	}
 });
+Object.defineProperty(exports, "ComposerHeader", {
+	enumerable: true,
+	get: function() {
+		return ComposerHeader;
+	}
+});
+Object.defineProperty(exports, "ComposerHeaderActions", {
+	enumerable: true,
+	get: function() {
+		return ComposerHeaderActions;
+	}
+});
+Object.defineProperty(exports, "ComposerHeaderContent", {
+	enumerable: true,
+	get: function() {
+		return ComposerHeaderContent;
+	}
+});
+Object.defineProperty(exports, "ComposerHeaderRow", {
+	enumerable: true,
+	get: function() {
+		return ComposerHeaderRow;
+	}
+});
 Object.defineProperty(exports, "ComposerInput", {
 	enumerable: true,
 	get: function() {
@@ -380,4 +444,4 @@ Object.defineProperty(exports, "useComposerCommands", {
 	}
 });
 
-//# sourceMappingURL=Composer-hLplTNPc.cjs.map
+//# sourceMappingURL=Composer-O0z907Qs.cjs.map

package/dist/Composer-O0z907Qs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer-O0z907Qs.cjs","names":["useState","forwardRef","cn","ScrollArea","textFieldAutofillProps","forwardRef","Collapsible","cn","useRef","Collapsible","ArrowLeft","ScrollArea","ScrollAreaViewport","cn","Check","useId","useState"],"sources":["../src/ds/components/Composer/use-composer-pointer.ts","../src/ds/components/Composer/composer.tsx","../src/ds/components/Composer/composer-header.tsx","../src/ds/components/Composer/commands/composer-suggestions.tsx","../src/ds/components/Composer/commands/command-matches.ts","../src/ds/components/Composer/commands/use-composer-commands.ts"],"sourcesContent":["import { useState } from 'react';\nimport type { PointerEvent } from 'react';\n\nexport function useComposerPointer(enabled: boolean) {\n  const [pointer, setPointer] = useState<{ x: number; y: number; angle: number }>();\n\n  function trackPointer(event: PointerEvent<HTMLDivElement>) {\n    if (!enabled || event.defaultPrevented) return;\n\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - bounds.left;\n    const y = event.clientY - bounds.top;\n    const radians = Math.atan2(y - bounds.height / 2, x - bounds.width / 2);\n    // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n    setPointer({ x, y, angle: (radians * 180) / Math.PI + 90 });\n  }\n\n  return {\n    trackPointer,\n    pointerStyle: {\n      '--composer-spotlight-x': pointer && `${pointer.x}px`,\n      '--composer-spotlight-y': pointer && `${pointer.y}px`,\n      '--composer-ring-angle': pointer && `${pointer.angle}deg`,\n    },\n  };\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointer } from './use-composer-pointer';\nimport { textFieldAutofillProps } from '@/ds/primitives/password-manager-autofill';\nimport { cn } from '@/lib/utils';\n\nimport './composer.css';\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  variant?: 'inline' | 'textarea';\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        // The suggestions list and the input scroll flush with the top corners, so their scrollbars\n        // take the inset for this radius.\n        'composer-box @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border transition-colors duration-normal scrollbar-inset-[22px] focus-within:border-border-strong',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport type ComposerTone = 'default' | 'green' | 'purple' | 'orange';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n  tone?: ComposerTone;\n}\n\nexport const ComposerRing = ({\n  busy = false,\n  tone = 'green',\n  className,\n  style,\n  onPointerEnter,\n  onPointerMove,\n  ...props\n}: ComposerRingProps) => {\n  const { trackPointer, pointerStyle } = useComposerPointer(!busy);\n\n  return (\n    <div\n      data-slot=\"composer-ring\"\n      data-composer-tone={tone}\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring relative mx-auto w-full max-w-3xl rounded-[23px] p-px', className)}\n      style={{ ...pointerStyle, ...style }}\n      onPointerEnter={event => {\n        onPointerEnter?.(event);\n        trackPointer(event);\n      }}\n      onPointerMove={event => {\n        onPointerMove?.(event);\n        trackPointer(event);\n      }}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, variant = 'inline', maxHeight, autoComplete, ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight ?? (variant === 'textarea' ? '16rem' : '13rem')}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-2.5 pb-2 text-body text-muted-foreground outline-hidden placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          variant === 'textarea' ? 'min-h-28' : 'min-h-10',\n          className,\n        )}\n        {...props}\n        {...textFieldAutofillProps(autoComplete)}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex w-full flex-wrap items-end justify-between gap-2 px-3 pb-3', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"w-full flex-1 bg-brand-green blur-xl\" />\n    <div className=\"w-full flex-1 bg-product-observability blur-xl\" />\n    <div className=\"w-full flex-1 bg-brand-green blur-xl\" />\n    <div className=\"w-full flex-1 bg-product-observability blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n\nexport interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {\n  tone: ComposerTone;\n}\n\nexport function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps) {\n  return <span data-composer-tone={tone} className={cn('composer-tone-label', className)} {...props} />;\n}\n","import { Collapsible } from '@base-ui/react/collapsible';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './composer-header.css';\n\nexport interface ComposerHeaderProps extends ComponentPropsWithoutRef<'div'> {\n  /** Animate visibility while retaining content through the closing transition. */\n  open?: boolean;\n}\n\n/** Optional context above ComposerRing or ComposerBox. Empty rendered content occupies no space. */\nexport const ComposerHeader = forwardRef<HTMLDivElement, ComposerHeaderProps>(\n  ({ className, children, open = true, ...props }, ref) => (\n    <Collapsible.Root\n      ref={ref}\n      open={open}\n      data-slot=\"composer-header\"\n      className={cn('composer-header relative isolate mx-auto w-full max-w-3xl', className)}\n      {...props}\n    >\n      <Collapsible.Panel className=\"composer-header-panel\">\n        <div\n          data-slot=\"composer-header-surface\"\n          className=\"flex flex-col gap-3 overflow-hidden rounded-t-[23px] border border-b-0 border-surface-rim bg-card px-3 pt-3 pb-8 text-body-sm text-muted-foreground empty:hidden\"\n        >\n          {children}\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  ),\n);\nComposerHeader.displayName = 'ComposerHeader';\n\nexport interface ComposerHeaderRowProps extends ComponentPropsWithoutRef<'div'> {\n  tone?: 'default' | 'destructive' | 'success';\n}\n\nexport const ComposerHeaderRow = forwardRef<HTMLDivElement, ComposerHeaderRowProps>(\n  ({ className, tone = 'default', ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-row\"\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2 [&>svg]:size-icon-sm [&>svg]:shrink-0',\n        tone === 'destructive' && 'text-destructive-foreground',\n        tone === 'success' && 'text-success-indicator',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nComposerHeaderRow.displayName = 'ComposerHeaderRow';\n\nexport type ComposerHeaderContentProps = ComponentPropsWithoutRef<'div'>;\n\nexport const ComposerHeaderContent = forwardRef<HTMLDivElement, ComposerHeaderContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-content\"\n      className={cn('min-w-0 flex-1 wrap-anywhere', className)}\n      {...props}\n    />\n  ),\n);\nComposerHeaderContent.displayName = 'ComposerHeaderContent';\n\nexport type ComposerHeaderActionsProps = ComponentPropsWithoutRef<'div'>;\n\nexport const ComposerHeaderActions = forwardRef<HTMLDivElement, ComposerHeaderActionsProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-header-actions\"\n      className={cn('ml-auto flex max-w-full shrink-0 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerHeaderActions.displayName = 'ComposerHeaderActions';\n","import { Collapsible } from '@base-ui/react/collapsible';\nimport { ArrowLeft, Check } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { ScrollArea, ScrollAreaViewport } from '../../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nexport interface ComposerSuggestionItem {\n  id: string;\n  label: string;\n  description?: string;\n  active?: boolean;\n}\n\nexport interface ComposerSuggestionsProps {\n  id: string;\n  items: readonly ComposerSuggestionItem[];\n  activeIndex: number;\n  contextLabel?: string;\n  onBack?: () => void;\n  onSelect: (index: number) => void;\n}\n\nexport function ComposerSuggestions({\n  id,\n  items,\n  activeIndex,\n  contextLabel,\n  onBack,\n  onSelect,\n}: ComposerSuggestionsProps) {\n  const activeOption = useRef<HTMLButtonElement>(null);\n  const activeItemId = items[activeIndex]?.id;\n  const label = contextLabel ? `${contextLabel} options` : 'Slash commands';\n\n  useEffect(() => {\n    activeOption.current?.scrollIntoView({ block: 'nearest' });\n  }, [activeItemId]);\n\n  return (\n    <Collapsible.Root open={items.length > 0}>\n      <Collapsible.Panel className=\"h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-normal ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none\">\n        <div className=\"border-b border-border\" role=\"region\" aria-label={label}>\n          {contextLabel && onBack && (\n            <div className=\"border-b border-border px-1.5 py-1\">\n              <button\n                type=\"button\"\n                className=\"flex items-center gap-1.5 rounded-xl px-2 py-1.5 text-caption text-muted-foreground transition-colors duration-normal ease-out-custom hover:bg-fill-subtle hover:text-foreground motion-reduce:transition-none\"\n                aria-label=\"Back to slash commands\"\n                onMouseDown={event => event.preventDefault()}\n                onClick={onBack}\n              >\n                <ArrowLeft size={14} aria-hidden />\n                <span>{contextLabel}</span>\n              </button>\n            </div>\n          )}\n          <ScrollArea maxHeight=\"min(22rem, 50dvh)\">\n            <ScrollAreaViewport className=\"overscroll-y-contain\">\n              <div id={id} role=\"listbox\" aria-label={label} className=\"flex flex-col gap-px p-1.5\">\n                {items.map((item, index) => (\n                  <button\n                    ref={index === activeIndex ? activeOption : undefined}\n                    id={item.id}\n                    key={item.id}\n                    type=\"button\"\n                    role=\"option\"\n                    tabIndex={-1}\n                    aria-selected={index === activeIndex}\n                    aria-current={item.active ? 'true' : undefined}\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between gap-4 rounded-2xl px-2 py-1.5 text-left text-caption transition-colors duration-normal ease-out-custom motion-reduce:transition-none',\n                      index === activeIndex\n                        ? 'bg-fill-subtle text-foreground'\n                        : 'text-muted-foreground hover:bg-fill-subtle hover:text-foreground',\n                    )}\n                    onMouseDown={event => event.preventDefault()}\n                    onClick={() => onSelect(index)}\n                  >\n                    <span className=\"max-w-[60%] min-w-0 shrink-0 truncate\" title={item.label}>\n                      {item.label}\n                    </span>\n                    {(item.description || item.active) && (\n                      <span className=\"flex min-w-0 items-center gap-1.5 text-right\">\n                        {item.description && (\n                          <span className=\"truncate\" title={item.description}>\n                            {item.description}\n                          </span>\n                        )}\n                        {item.active && (\n                          <span className=\"flex shrink-0 items-center gap-1\">\n                            <Check size={13} aria-hidden />\n                            Current\n                          </span>\n                        )}\n                      </span>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </ScrollAreaViewport>\n          </ScrollArea>\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n}\n","export interface ComposerCommandOption {\n  value: string;\n  label: string;\n  description?: string;\n  active?: boolean;\n}\n\nexport interface ComposerCommand {\n  name: string;\n  description: string;\n  options?: readonly ComposerCommandOption[];\n}\n\nexport function matchCommands<T extends Pick<ComposerCommand, 'name'>>(commands: readonly T[], draft: string): T[] {\n  if (!draft.startsWith('/')) return [];\n  const query = draft.slice(1).toLowerCase();\n  if (/\\s/.test(query)) return [];\n  return commands.filter(command => command.name.toLowerCase().startsWith(query));\n}\n\nexport function matchCommandOptions<T extends ComposerCommand>(commands: readonly T[], draft: string) {\n  if (!draft.startsWith('/')) return undefined;\n  const firstWhitespace = draft.search(/\\s/);\n  if (firstWhitespace === -1) return undefined;\n  const command = commands.find(candidate => candidate.name === draft.slice(1, firstWhitespace));\n  if (!command?.options) return undefined;\n  const query = draft.slice(firstWhitespace).trim().toLowerCase();\n  if (/\\s/.test(query)) return undefined;\n  const options = command.options.filter(option => option.value.toLowerCase().startsWith(query));\n  return options.length > 0 ? { command, options } : undefined;\n}\n","import type { ChangeEvent, ComponentPropsWithoutRef, RefObject } from 'react';\nimport { useId, useState } from 'react';\nimport type { ComposerCommand, ComposerCommandOption } from './command-matches';\nimport { matchCommandOptions, matchCommands } from './command-matches';\nimport type { ComposerSuggestionItem, ComposerSuggestionsProps } from './composer-suggestions';\nimport { useKeydown } from '@/lib/keyboard/use-keydown';\n\nfunction createSuggestionItems(\n  listId: string,\n  commands: readonly ComposerCommand[],\n  options?: readonly ComposerCommandOption[],\n): ComposerSuggestionItem[] {\n  if (options)\n    return options.map(option => ({ ...option, id: `${listId}-option-${encodeURIComponent(option.value)}` }));\n  return commands.map(command => ({\n    id: `${listId}-command-${encodeURIComponent(command.name)}`,\n    label: `/${command.name}`,\n    description: command.description,\n  }));\n}\n\nexport interface UseComposerCommandsProps {\n  commands: readonly ComposerCommand[];\n  value: string;\n  onValueChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  inputRef: RefObject<HTMLTextAreaElement | null>;\n  enabled?: boolean;\n}\n\nexport function useComposerCommands({\n  commands,\n  value,\n  onValueChange,\n  onSubmit,\n  inputRef,\n  enabled = true,\n}: UseComposerCommandsProps) {\n  const listId = useId();\n  const [navigation, setNavigation] = useState({ value: '', index: 0 });\n  const optionMatch = enabled ? matchCommandOptions(commands, value) : undefined;\n  const matchingCommands = enabled && !optionMatch ? matchCommands(commands, value) : [];\n  const items = createSuggestionItems(listId, matchingCommands, optionMatch?.options);\n  const boundedIndex = Math.min(navigation.index, Math.max(0, items.length - 1));\n  const activeIndex = navigation.value === value ? boundedIndex : 0;\n\n  function updateValue(nextValue: string) {\n    setNavigation({ value: nextValue, index: 0 });\n    onValueChange(nextValue);\n  }\n\n  function returnToCommands() {\n    updateValue(optionMatch ? `/${optionMatch.command.name}` : '');\n    inputRef.current?.focus();\n  }\n\n  function selectSuggestion(index: number) {\n    inputRef.current?.focus();\n    if (optionMatch) {\n      const option = optionMatch.options[index];\n      if (option) onSubmit(`/${optionMatch.command.name} ${option.value}`);\n      return;\n    }\n    const command = matchingCommands[index];\n    if (command) updateValue(`/${command.name} `);\n  }\n\n  function moveSelection(direction: number) {\n    setNavigation({ value, index: (activeIndex + direction + items.length) % items.length });\n  }\n\n  function shouldHandleCommandKey(event: KeyboardEvent) {\n    const command = matchingCommands[activeIndex];\n    const submitExactCommand =\n      matchingCommands.length === 1 && value.toLowerCase() === `/${command?.name}` && !command?.options?.length;\n    return event.key !== 'Enter' || !submitExactCommand;\n  }\n\n  useKeydown(\n    {\n      ArrowDown: () => moveSelection(1),\n      ArrowUp: () => moveSelection(-1),\n      Escape: returnToCommands,\n      Tab: () => selectSuggestion(activeIndex),\n      Enter: () => selectSuggestion(activeIndex),\n    },\n    {\n      target: inputRef,\n      enabled: items.length > 0,\n      shouldHandle: shouldHandleCommandKey,\n    },\n  );\n\n  const inputProps = {\n    value,\n    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => updateValue(event.target.value),\n    'aria-autocomplete': 'list',\n    'aria-controls': items.length > 0 ? listId : undefined,\n    'aria-activedescendant': items[activeIndex]?.id,\n  } satisfies ComponentPropsWithoutRef<'textarea'>;\n\n  const suggestionsProps: ComposerSuggestionsProps = {\n    id: listId,\n    items,\n    activeIndex,\n    contextLabel: optionMatch ? `/${optionMatch.command.name}` : undefined,\n    onBack: optionMatch ? returnToCommands : undefined,\n    onSelect: selectSuggestion,\n  };\n\n  return { inputProps, suggestionsProps };\n}\n"],"mappings":"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"}

package/dist/Composer.css

@@ -205,3 +205,37 @@ html.light .composer-ring {
   will-change: transform, opacity;
   backface-visibility: hidden;
 }
+/* The composer covers the surface's square lower edge throughout the transition. */
+.composer-header {
+  margin-bottom: 0;
+  transition: margin-bottom var(--duration-normal) var(--ease-out-custom);
+
+  &[data-open] {
+    margin-bottom: -24px;
+  }
+
+  &:has([data-slot='composer-header-surface']:empty) {
+    display: none;
+  }
+}
+
+.composer-header-panel {
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  transition:
+    height var(--duration-normal) var(--ease-out-custom),
+    opacity var(--duration-normal) var(--ease-out-custom);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .composer-header,
+  .composer-header-panel {
+    transition: none;
+  }
+}

package/dist/components/ActionRow.cjs.js

@@ -1,38 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-01CRPdxi.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ds/components/ActionRow/action-row.tsx
-/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
-function ActionRowRoot({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "action-row",
-		className: require_utils.cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
-		...props
-	});
-}
-/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
-function ActionRowStart({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "action-row-start",
-		className: require_utils.cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
-		...props
-	});
-}
-/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
-function ActionRowEnd({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "action-row-end",
-		className: require_utils.cn("ml-auto flex shrink-0 items-center gap-2", className),
-		...props
-	});
-}
-//#endregion
-//#region src/ds/components/ActionRow/index.ts
-var ActionRow = Object.assign(ActionRowRoot, {
-	Start: ActionRowStart,
-	End: ActionRowEnd
-});
-//#endregion
-exports.ActionRow = ActionRow;
-
-//# sourceMappingURL=ActionRow.cjs.js.map
+const require_ActionRow = require("../ActionRow-CJeLmb4v.cjs");
+exports.ActionRow = require_ActionRow.ActionRow;

package/dist/components/ActionRow.es.js

@@ -1,37 +1 @@
-import { t as cn } from "../utils-BiHZnbcQ.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/ds/components/ActionRow/action-row.tsx
-/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
-function ActionRowRoot({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "action-row",
-		className: cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
-		...props
-	});
-}
-/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
-function ActionRowStart({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "action-row-start",
-		className: cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
-		...props
-	});
-}
-/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
-function ActionRowEnd({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "action-row-end",
-		className: cn("ml-auto flex shrink-0 items-center gap-2", className),
-		...props
-	});
-}
-//#endregion
-//#region src/ds/components/ActionRow/index.ts
-var ActionRow = Object.assign(ActionRowRoot, {
-	Start: ActionRowStart,
-	End: ActionRowEnd
-});
-//#endregion
-export { ActionRow };
-
-//# sourceMappingURL=ActionRow.es.js.map
+export { t as ActionRow } from "../ActionRow-CWCII_ps.js";

package/dist/components/Composer.cjs.js

@@ -1,9 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Composer = require("../Composer-hLplTNPc.cjs");
+const require_Composer = require("../Composer-O0z907Qs.cjs");
 exports.Composer = require_Composer.Composer;
 exports.ComposerActions = require_Composer.ComposerActions;
 exports.ComposerAttachments = require_Composer.ComposerAttachments;
 exports.ComposerBox = require_Composer.ComposerBox;
+exports.ComposerHeader = require_Composer.ComposerHeader;
+exports.ComposerHeaderActions = require_Composer.ComposerHeaderActions;
+exports.ComposerHeaderContent = require_Composer.ComposerHeaderContent;
+exports.ComposerHeaderRow = require_Composer.ComposerHeaderRow;
 exports.ComposerInput = require_Composer.ComposerInput;
 exports.ComposerRing = require_Composer.ComposerRing;
 exports.ComposerSuggestions = require_Composer.ComposerSuggestions;

package/dist/components/Composer.es.js

@@ -1 +1 @@
-export { a as Composer, o as ComposerActions, s as ComposerAttachments, c as ComposerBox, l as ComposerInput, u as ComposerRing, i as ComposerSuggestions, d as ComposerToneLabel, n as matchCommandOptions, r as matchCommands, t as useComposerCommands } from "../Composer-CvORFb_o.js";
+export { l as Composer, u as ComposerActions, d as ComposerAttachments, f as ComposerBox, a as ComposerHeader, o as ComposerHeaderActions, s as ComposerHeaderContent, c as ComposerHeaderRow, p as ComposerInput, m as ComposerRing, i as ComposerSuggestions, h as ComposerToneLabel, n as matchCommandOptions, r as matchCommands, t as useComposerCommands } from "../Composer-CTjshNue.js";

package/dist/domains/chat/attachments/composer-attachment-list.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../utils-01CRPdxi.cjs");
 const require_scroll_area = require("../../../scroll-area-DUevnPki.cjs");
-const require_Composer = require("../../../Composer-hLplTNPc.cjs");
+const require_Composer = require("../../../Composer-O0z907Qs.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/domains/chat/attachments/composer-attachment-list.tsx
 function ComposerAttachmentList({ className, ...props }) {

package/dist/domains/chat/attachments/composer-attachment-list.es.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../../utils-BiHZnbcQ.js";
 import { t as ScrollArea } from "../../../scroll-area-ChIk-cxH.js";
-import { s as ComposerAttachments } from "../../../Composer-CvORFb_o.js";
+import { d as ComposerAttachments } from "../../../Composer-CTjshNue.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/domains/chat/attachments/composer-attachment-list.tsx
 function ComposerAttachmentList({ className, ...props }) {

package/dist/domains/observability/components/observability-capability-gate.cjs.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Txt = require("../../../Txt-B8V-pmTx.cjs");
+const require_EmptyState = require("../../../EmptyState-B3pi_K4U.cjs");
+const require_spinner = require("../../../spinner-D2maMv2F.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/domains/observability/components/observability-capability-gate.tsx
+/** Renders its children once the store declares the capability they need. */
+function ObservabilityCapabilityGate({ isLoading, enabled, heading, title, description, children }) {
+	if (enabled) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+		className: "sr-only",
+		children: heading
+	}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex h-full items-center justify-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, { "aria-label": "Loading storage capabilities" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+			as: "span",
+			variant: "caption",
+			tone: "muted",
+			children: "Loading storage capabilities"
+		})]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyState.EmptyState, {
+		variant: "fill",
+		titleSlot: title,
+		descriptionSlot: description
+	})] });
+}
+//#endregion
+exports.ObservabilityCapabilityGate = ObservabilityCapabilityGate;
+
+//# sourceMappingURL=observability-capability-gate.cjs.js.map

package/dist/domains/observability/components/observability-capability-gate.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-capability-gate.cjs.js","names":["_Fragment","Spinner","Txt","EmptyState"],"sources":["../../../../src/domains/observability/components/observability-capability-gate.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { EmptyState } from '@/ds/components/EmptyState';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport type ObservabilityCapabilityGateProps = {\n  isLoading: boolean;\n  enabled: boolean;\n  /** The page's screen-reader heading while its body is not shown (the body brings its own). */\n  heading: string;\n  /** Shown when the store does not support the capability. */\n  title: ReactNode;\n  description: ReactNode;\n  children: ReactNode;\n};\n\n/** Renders its children once the store declares the capability they need. */\nexport function ObservabilityCapabilityGate({\n  isLoading,\n  enabled,\n  heading,\n  title,\n  description,\n  children,\n}: ObservabilityCapabilityGateProps) {\n  if (enabled) return children;\n\n  return (\n    <>\n      <h1 className=\"sr-only\">{heading}</h1>\n      {isLoading ? (\n        <div className=\"flex h-full items-center justify-center gap-2\">\n          <Spinner aria-label=\"Loading storage capabilities\" />\n          <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n            Loading storage capabilities\n          </Txt>\n        </div>\n      ) : (\n        <EmptyState variant=\"fill\" titleSlot={title} descriptionSlot={description} />\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,4BAA4B,EAC1C,WACA,SACA,SACA,OACA,aACA,YACmC;CACnC,IAAI,SAAS,OAAO;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAA,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,WAAU;EAAW,UAAA;CAAY,CAAA,GACpC,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD,EAAS,cAAW,+BAAgC,CAAA,GACpD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GAAK,IAAG;GAAO,SAAQ;GAAU,MAAK;GAAQ,UAAA;EAEzC,CAAA,CACF;CAEL,CAAA,IAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EAAY,SAAQ;EAAO,WAAW;EAAO,iBAAiB;CAAc,CAAA,CAE9E,EAAA,CAAA;AAEN"}

package/dist/domains/observability/components/observability-capability-gate.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/domains/observability/components/observability-capability-gate';

package/dist/domains/observability/components/observability-capability-gate.es.js

@@ -0,0 +1,29 @@
+import { t as Txt } from "../../../Txt-_ZEoM8gB.js";
+import { n as EmptyState } from "../../../EmptyState--HlcBHNn.js";
+import { t as Spinner } from "../../../spinner-i6Rkm2rC.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/domains/observability/components/observability-capability-gate.tsx
+/** Renders its children once the store declares the capability they need. */
+function ObservabilityCapabilityGate({ isLoading, enabled, heading, title, description, children }) {
+	if (enabled) return children;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h1", {
+		className: "sr-only",
+		children: heading
+	}), isLoading ? /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full items-center justify-center gap-2",
+		children: [/* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading storage capabilities" }), /* @__PURE__ */ jsx(Txt, {
+			as: "span",
+			variant: "caption",
+			tone: "muted",
+			children: "Loading storage capabilities"
+		})]
+	}) : /* @__PURE__ */ jsx(EmptyState, {
+		variant: "fill",
+		titleSlot: title,
+		descriptionSlot: description
+	})] });
+}
+//#endregion
+export { ObservabilityCapabilityGate };
+
+//# sourceMappingURL=observability-capability-gate.es.js.map