@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/collapsible/parts.js

@@ -0,0 +1,44 @@
+import collapsible_module_default from "./collapsible.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/collapsible/parts.tsx
+/**
+* Styled primitives for Collapsible.
+*
+* @example
+* ```tsx
+* import { Collapsible } from '@base-ui/react/collapsible';
+* import { CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
+*
+* <Collapsible.Root>
+*   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+*   <CollapsiblePanel>Content</CollapsiblePanel>
+* </Collapsible.Root>
+* ```
+*/
+const CollapsibleRoot = forwardRef(function CollapsibleRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		ref,
+		className: `${collapsible_module_default.root} ${className ?? ""}`,
+		...props
+	});
+});
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		ref,
+		className: `${collapsible_module_default.trigger} ${className ?? ""}`,
+		...props
+	});
+});
+const CollapsiblePanel = forwardRef(function CollapsiblePanel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		ref,
+		className: `${collapsible_module_default.panel} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };
+
+//# sourceMappingURL=parts.js.map

package/dist/collapsible/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseCollapsible","styles"],"sources":["../../src/collapsible/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Collapsible.\n *\n * @example\n * ```tsx\n * import { Collapsible } from '@base-ui/react/collapsible';\n * import { CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';\n *\n * <Collapsible.Root>\n *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n *   <CollapsiblePanel>Content</CollapsiblePanel>\n * </Collapsible.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport styles from \"./collapsible.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;\ntype BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;\ntype BasePanelProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;\n\nexport interface CollapsibleRootProps extends Omit<BaseRootProps, \"className\"> {\n  className?: string;\n}\nexport interface CollapsibleTriggerProps extends Omit<BaseTriggerProps, \"className\"> {\n  className?: string;\n}\nexport interface CollapsiblePanelProps extends Omit<BasePanelProps, \"className\"> {\n  className?: string;\n}\n\nexport const CollapsibleRoot = forwardRef<ComponentRef<typeof BaseCollapsible.Root>, CollapsibleRootProps>(function CollapsibleRoot(\n  { className, ...props },\n  ref,\n) {\n  return <BaseCollapsible.Root ref={ref} className={`${styles.root} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const CollapsibleTrigger = forwardRef<ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTriggerProps>(\n  function CollapsibleTrigger({ className, ...props }, ref) {\n    return <BaseCollapsible.Trigger ref={ref} className={`${styles.trigger} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const CollapsiblePanel = forwardRef<ComponentRef<typeof BaseCollapsible.Panel>, CollapsiblePanelProps>(function CollapsiblePanel(\n  { className, ...props },\n  ref,\n) {\n  return <BaseCollapsible.Panel ref={ref} className={`${styles.panel} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,YAAgB,MAAjB;EAA2B;EAAK,WAAW,GAAGC,2BAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpG;AAEF,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;AACxD,QAAO,oBAACD,YAAgB,SAAjB;EAA8B;EAAK,WAAW,GAAGC,2BAAO,QAAQ,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAE7G;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,2BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG"}

package/dist/context-menu/context-menu.css

@@ -0,0 +1,151 @@
+@layer components {
+  .positioner_U19WMG {
+    z-index: var(--z-dropdown);
+    outline: none;
+  }
+
+  .popup_U19WMG {
+    box-sizing: border-box;
+    padding: var(--space-1) 0;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-popover);
+    color: var(--color-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    min-width: 220px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .15s var(--easing-ease-out);
+    outline: none;
+  }
+
+  @supports (backdrop-filter: blur(20px)) {
+    .popup_U19WMG {
+      -webkit-backdrop-filter: blur(20px) saturate(1.8);
+    }
+  }
+
+  .popup_U19WMG[data-starting-style] {
+    opacity: 0;
+    transform: scale(.97);
+  }
+
+  .popup_U19WMG[data-ending-style] {
+    opacity: 0;
+    transition: opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+    transform: scale(.99);
+  }
+
+  .trigger_U19WMG {
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    outline: none;
+    display: block;
+  }
+
+  .item_U19WMG {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: none;
+    display: flex;
+    position: relative;
+  }
+
+  .item_U19WMG[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .item_U19WMG[data-disabled] {
+    opacity: .36;
+    cursor: not-allowed;
+  }
+
+  .item-icon_U19WMG {
+    width: 16px;
+    height: 16px;
+    color: inherit;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .item-label_U19WMG {
+    flex: 1;
+  }
+
+  .item-shortcut_U19WMG {
+    margin-left: var(--space-8);
+    font-size: var(--font-size-sm);
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+
+  .item_U19WMG[data-highlighted] .item-shortcut_U19WMG {
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
+  }
+
+  .submenu-icon_U19WMG {
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .item_U19WMG[data-highlighted] .submenu-icon_U19WMG, .submenu-trigger_U19WMG[data-highlighted] .submenu-icon_U19WMG {
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
+  }
+
+  .submenu-trigger_U19WMG {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: none;
+    display: flex;
+  }
+
+  .submenu-trigger_U19WMG[data-highlighted], .submenu-trigger_U19WMG[data-popup-open] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .submenu-trigger_U19WMG[data-disabled] {
+    opacity: .36;
+    cursor: not-allowed;
+  }
+
+  .group-label_U19WMG {
+    padding: var(--space-1) var(--space-4) var(--space-0-5);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
+    cursor: default;
+    user-select: none;
+  }
+
+  .separator_U19WMG {
+    margin: var(--space-1) var(--space-4);
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+  }
+}

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,36 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./context-menu.module.css";
+
+//#region src/context-menu/context-menu.d.ts
+interface ContextMenuItemDef {
+  type?: "item";
+  label: ReactNode;
+  icon?: ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+interface ContextMenuSeparatorDef {
+  type: "separator";
+}
+interface ContextMenuGroupDef {
+  type: "group";
+  label?: ReactNode;
+  items: ContextMenuItemDef[];
+}
+type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;
+interface ContextMenuProps {
+  /** The element that can be right-clicked / long-pressed to open the menu. */
+  children: ReactElement;
+  items: ContextMenuEntry[];
+  className?: string;
+}
+declare function ContextMenu({
+  children,
+  items,
+  className
+}: ContextMenuProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuEntry, ContextMenuGroupDef, ContextMenuItemDef, ContextMenuProps, ContextMenuSeparatorDef, styles };
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../src/context-menu/context-menu.tsx"],"mappings":";;;;;UAIiB,kBAAA;EACf,IAAA;EACA,KAAA,EAAO,SAAA;EACP,IAAA,GAAO,SAAA;EACP,QAAA;EACA,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,uBAAA;EACf,IAAA;AAAA;AAAA,UAGe,mBAAA;EACf,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,KAAA,EAAO,kBAAA;AAAA;AAAA,KAGG,gBAAA,GAAmB,kBAAA,GAAqB,uBAAA,GAA0B,mBAAA;AAAA,UAE7D,gBAAA;EAZuB;EActC,QAAA,EAAU,YAAA;EACV,KAAA,EAAO,gBAAA;EACP,SAAA;AAAA;AAAA,iBAac,WAAA,CAAA;EAAc,QAAA;EAAU,KAAA;EAAO;AAAA,GAAa,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/context-menu/context-menu.js

@@ -0,0 +1,54 @@
+import context_menu_module_default from "./context-menu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/context-menu/context-menu.tsx
+function RenderItem({ item, i }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.Item, {
+		className: context_menu_module_default.item,
+		disabled: item.disabled,
+		onClick: item.onSelect,
+		children: [
+			item.icon && /* @__PURE__ */ jsx("span", {
+				className: context_menu_module_default["item-icon"],
+				children: item.icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: context_menu_module_default["item-label"],
+				children: item.label
+			}),
+			item.shortcut && /* @__PURE__ */ jsx("span", {
+				className: context_menu_module_default["item-shortcut"],
+				children: item.shortcut
+			})
+		]
+	}, i);
+}
+function ContextMenu$1({ children, items, className }) {
+	return /* @__PURE__ */ jsxs(ContextMenu.Root, { children: [/* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		className: `${context_menu_module_default.trigger} ${className ?? ""}`,
+		render: children
+	}), /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		className: context_menu_module_default.positioner,
+		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+			className: context_menu_module_default.popup,
+			children: items.map((entry, i) => {
+				if (entry.type === "separator") return /* @__PURE__ */ jsx(ContextMenu.Separator, { className: context_menu_module_default.separator }, i);
+				if (entry.type === "group") return /* @__PURE__ */ jsxs(ContextMenu.Group, { children: [entry.label && /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+					className: context_menu_module_default["group-label"],
+					children: entry.label
+				}), entry.items.map((item, j) => /* @__PURE__ */ jsx(RenderItem, {
+					item,
+					i: j
+				}, j))] }, i);
+				return /* @__PURE__ */ jsx(RenderItem, {
+					item: entry,
+					i
+				}, i);
+			})
+		})
+	}) })] });
+}
+//#endregion
+export { ContextMenu$1 as ContextMenu };
+
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":["BaseContextMenu","styles","ContextMenu"],"sources":["../../src/context-menu/context-menu.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport styles from \"./context-menu.module.css\";\n\nexport interface ContextMenuItemDef {\n  type?: \"item\";\n  label: ReactNode;\n  icon?: ReactNode;\n  shortcut?: string;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuSeparatorDef {\n  type: \"separator\";\n}\n\nexport interface ContextMenuGroupDef {\n  type: \"group\";\n  label?: ReactNode;\n  items: ContextMenuItemDef[];\n}\n\nexport type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;\n\nexport interface ContextMenuProps {\n  /** The element that can be right-clicked / long-pressed to open the menu. */\n  children: ReactElement;\n  items: ContextMenuEntry[];\n  className?: string;\n}\n\nfunction RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {\n  return (\n    <BaseContextMenu.Item key={i} className={styles.item} disabled={item.disabled} onClick={item.onSelect}>\n      {item.icon && <span className={styles[\"item-icon\"]}>{item.icon}</span>}\n      <span className={styles[\"item-label\"]}>{item.label}</span>\n      {item.shortcut && <span className={styles[\"item-shortcut\"]}>{item.shortcut}</span>}\n    </BaseContextMenu.Item>\n  );\n}\n\nexport function ContextMenu({ children, items, className }: ContextMenuProps) {\n  return (\n    <BaseContextMenu.Root>\n      <BaseContextMenu.Trigger className={`${styles.trigger} ${className ?? \"\"}`} render={children} />\n      <BaseContextMenu.Portal>\n        <BaseContextMenu.Positioner className={styles.positioner}>\n          <BaseContextMenu.Popup className={styles.popup}>\n            {items.map((entry, i) => {\n              if (entry.type === \"separator\") {\n                return <BaseContextMenu.Separator key={i} className={styles.separator} />;\n              }\n              if (entry.type === \"group\") {\n                return (\n                  <BaseContextMenu.Group key={i}>\n                    {entry.label && (\n                      <BaseContextMenu.GroupLabel className={styles[\"group-label\"]}>{entry.label}</BaseContextMenu.GroupLabel>\n                    )}\n                    {entry.items.map((item, j) => (\n                      <RenderItem key={j} item={item} i={j} />\n                    ))}\n                  </BaseContextMenu.Group>\n                );\n              }\n              return <RenderItem key={i} item={entry} i={i} />;\n            })}\n          </BaseContextMenu.Popup>\n        </BaseContextMenu.Positioner>\n      </BaseContextMenu.Portal>\n    </BaseContextMenu.Root>\n  );\n}\n\nexport { styles as ContextMenuStyles };\n"],"mappings":";;;;AAgCA,SAAS,WAAW,EAAE,MAAM,KAA8C;AACxE,QACE,qBAACA,YAAgB,MAAjB;EAA8B,WAAWC,4BAAO;EAAM,UAAU,KAAK;EAAU,SAAS,KAAK;YAA7F;GACG,KAAK,QAAQ,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAe,KAAK;IAAY,CAAA;GACtE,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAgB,KAAK;IAAa,CAAA;GACzD,KAAK,YAAY,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAmB,KAAK;IAAgB,CAAA;GAC7D;IAJI,EAIJ;;AAI3B,SAAgBC,cAAY,EAAE,UAAU,OAAO,aAA+B;AAC5E,QACE,qBAACF,YAAgB,MAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,SAAjB;EAAyB,WAAW,GAAGC,4BAAO,QAAQ,GAAG,aAAa;EAAM,QAAQ;EAAY,CAAA,EAChG,oBAACD,YAAgB,QAAjB,EAAA,UACE,oBAACA,YAAgB,YAAjB;EAA4B,WAAWC,4BAAO;YAC5C,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,4BAAO;aACtC,MAAM,KAAK,OAAO,MAAM;AACvB,QAAI,MAAM,SAAS,YACjB,QAAO,oBAACD,YAAgB,WAAjB,EAAmC,WAAWC,4BAAO,WAAa,EAAlC,EAAkC;AAE3E,QAAI,MAAM,SAAS,QACjB,QACE,qBAACD,YAAgB,OAAjB,EAAA,UAAA,CACG,MAAM,SACL,oBAACA,YAAgB,YAAjB;KAA4B,WAAWC,4BAAO;eAAiB,MAAM;KAAmC,CAAA,EAEzG,MAAM,MAAM,KAAK,MAAM,MACtB,oBAAC,YAAD;KAA0B;KAAM,GAAG;KAAK,EAAvB,EAAuB,CACxC,CACoB,EAAA,EAPI,EAOJ;AAG5B,WAAO,oBAAC,YAAD;KAAoB,MAAM;KAAU;KAAK,EAAxB,EAAwB;KAChD;GACoB,CAAA;EACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA"}

package/dist/context-menu/context-menu.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/context-menu/context-menu.module.js

@@ -0,0 +1,18 @@
+//#region src/context-menu/context-menu.module.css
+var context_menu_module_default = {
+	"group-label": "group-label_U19WMG",
+	"item": "item_U19WMG",
+	"item-icon": "item-icon_U19WMG",
+	"item-label": "item-label_U19WMG",
+	"item-shortcut": "item-shortcut_U19WMG",
+	"popup": "popup_U19WMG",
+	"positioner": "positioner_U19WMG",
+	"separator": "separator_U19WMG",
+	"submenu-icon": "submenu-icon_U19WMG",
+	"submenu-trigger": "submenu-trigger_U19WMG",
+	"trigger": "trigger_U19WMG"
+};
+//#endregion
+export { context_menu_module_default as default };
+
+//# sourceMappingURL=context-menu.module.js.map

package/dist/context-menu/context-menu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.module.js","names":[],"sources":["../../src/context-menu/context-menu.module.css"],"sourcesContent":["@layer components {\n  .positioner {\n    outline: none;\n    z-index: var(--z-dropdown);\n  }\n\n  .popup {\n    box-sizing: border-box;\n    padding: var(--space-1) 0;\n    border-radius: var(--radius-lg);\n    background-color: var(--color-overlay);\n    border: var(--border-width-base) solid var(--color-line);\n    box-shadow: var(--shadow-popover);\n    color: var(--color-primary);\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    min-width: 220px;\n    transform-origin: var(--transform-origin);\n    outline: none;\n    transition:\n      opacity 150ms var(--easing-ease-out),\n      transform 150ms var(--easing-ease-out);\n  }\n\n  @supports (backdrop-filter: blur(20px)) {\n    .popup {\n      backdrop-filter: blur(20px) saturate(1.8);\n      -webkit-backdrop-filter: blur(20px) saturate(1.8);\n    }\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.97);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.99);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n\n  /* ─── Trigger area ───────────────────────────────────────────── */\n\n  .trigger {\n    display: block;\n    outline: none;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: default;\n  }\n\n  /* ─── Item ───────────────────────────────────────────────────── */\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    /* Full-width — no inset margin */\n    padding: var(--space-1) var(--space-4);\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-primary);\n    cursor: default;\n    outline: none;\n    user-select: none;\n    position: relative;\n    transition: none;\n  }\n\n  .item[data-highlighted] {\n    background-color: var(--color-accent);\n    color: var(--color-on-accent);\n  }\n\n  .item[data-disabled] {\n    opacity: 0.36;\n    cursor: not-allowed;\n  }\n\n  /* ─── Item internals ─────────────────────────────────────────── */\n\n  .item-icon {\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n  }\n\n  .item-label {\n    flex: 1;\n  }\n\n  .item-shortcut {\n    margin-left: var(--space-8);\n    font-size: var(--font-size-sm);\n    color: var(--color-tertiary);\n    flex-shrink: 0;\n  }\n\n  .item[data-highlighted] .item-shortcut {\n    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);\n  }\n\n  .submenu-icon {\n    margin-left: auto;\n    color: var(--color-tertiary);\n    flex-shrink: 0;\n  }\n\n  .item[data-highlighted] .submenu-icon,\n  .submenu-trigger[data-highlighted] .submenu-icon {\n    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);\n  }\n\n  /* ─── Submenu trigger ────────────────────────────────────────── */\n\n  .submenu-trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-1) var(--space-4);\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-primary);\n    cursor: default;\n    outline: none;\n    user-select: none;\n    transition: none;\n  }\n\n  .submenu-trigger[data-highlighted],\n  .submenu-trigger[data-popup-open] {\n    background-color: var(--color-accent);\n    color: var(--color-on-accent);\n  }\n\n  .submenu-trigger[data-disabled] {\n    opacity: 0.36;\n    cursor: not-allowed;\n  }\n\n  /* ─── Group label ────────────────────────────────────────────── */\n\n  .group-label {\n    padding: var(--space-1) var(--space-4) var(--space-0-5);\n    font-family: var(--font-sans);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-tertiary);\n    text-transform: uppercase;\n    letter-spacing: var(--letter-spacing-wide);\n    cursor: default;\n    user-select: none;\n  }\n\n  /* ─── Separator ──────────────────────────────────────────────── */\n  .separator {\n    margin: var(--space-1) var(--space-4);\n    height: var(--border-width-base);\n    background-color: var(--color-line-subtle);\n  }\n}\n"],"mappings":";AAsBA,IAAA,8BAAE;CAAA,eAAA;CAAA,QAAA;CAAA,aAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,SAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,mBAAA;CAAA,WAAA;CAAA"}

package/dist/context-menu/index.d.ts

@@ -0,0 +1,3 @@
+import { ContextMenu, ContextMenuEntry, ContextMenuGroupDef, ContextMenuItemDef, ContextMenuProps, ContextMenuSeparatorDef, styles } from "./context-menu.js";
+import { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps } from "./parts.js";
+export { ContextMenu, type ContextMenuEntry, ContextMenuGroup, type ContextMenuGroupDef, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemDef, type ContextMenuItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuSeparator, type ContextMenuSeparatorDef, type ContextMenuSeparatorProps, styles as ContextMenuStyles, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps };

package/dist/context-menu/index.js

@@ -0,0 +1,4 @@
+import context_menu_module_default from "./context-menu.module.js";
+import { ContextMenu } from "./context-menu.js";
+import { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPopup, ContextMenuSeparator, ContextMenuSubmenuTrigger } from "./parts.js";
+export { ContextMenu, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPopup, ContextMenuSeparator, context_menu_module_default as ContextMenuStyles, ContextMenuSubmenuTrigger };

package/dist/context-menu/parts.d.ts

@@ -0,0 +1,38 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+
+//#region src/context-menu/parts.d.ts
+type BasePopupProps = ComponentPropsWithoutRef<typeof ContextMenu.Popup>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof ContextMenu.Item>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof ContextMenu.Separator>;
+type BaseGroupProps = ComponentPropsWithoutRef<typeof ContextMenu.Group>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof ContextMenu.GroupLabel>;
+type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof ContextMenu.SubmenuTrigger>;
+interface ContextMenuPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+interface ContextMenuItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  className?: string;
+}
+interface ContextMenuGroupProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+  className?: string;
+}
+interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, "className"> {
+  className?: string;
+}
+declare const ContextMenuPopup: react.ForwardRefExoticComponent<ContextMenuPopupProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: react.ForwardRefExoticComponent<ContextMenuItemProps & react.RefAttributes<HTMLElement>>;
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroupLabel: react.ForwardRefExoticComponent<ContextMenuGroupLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubmenuTrigger: react.ForwardRefExoticComponent<ContextMenuSubmenuTriggerProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/context-menu/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/context-menu/parts.tsx"],"mappings":";;;;;KA4BK,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,aAAA,GAAgB,wBAAA,QAAgC,WAAA,CAAgB,IAAA;AAAA,KAChE,kBAAA,GAAqB,wBAAA,QAAgC,WAAA,CAAgB,SAAA;AAAA,KACrE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,mBAAA,GAAsB,wBAAA,QAAgC,WAAA,CAAgB,UAAA;AAAA,KACtE,uBAAA,GAA0B,wBAAA,QAAgC,WAAA,CAAgB,cAAA;AAAA,UAE9D,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,oBAAA,SAA6B,IAAA,CAAK,aAAA;EACjD,SAAA;AAAA;AAAA,UAEe,yBAAA,SAAkC,IAAA,CAAK,kBAAA;EACtD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,0BAAA,SAAmC,IAAA,CAAK,mBAAA;EACvD,SAAA;AAAA;AAAA,UAEe,8BAAA,SAAuC,IAAA,CAAK,uBAAA;EAC3D,SAAA;AAAA;AAAA,cAGW,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOf,oBAAA,EAAoB,KAAA,CAAA,yBAAA,CAAA,yBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMpB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,qBAAA,EAAqB,KAAA,CAAA,yBAAA,CAAA,0BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMrB,yBAAA,EAAyB,KAAA,CAAA,yBAAA,CAAA,8BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA"}

package/dist/context-menu/parts.js

@@ -0,0 +1,91 @@
+import context_menu_module_default from "./context-menu.module.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/context-menu/parts.tsx
+/**
+* Styled primitives for ContextMenu.
+*
+* @example
+* ```tsx
+* import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+* import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';
+*
+* <BaseContextMenu.Root>
+*   <BaseContextMenu.Trigger render={<div>Right click me</div>} />
+*   <BaseContextMenu.Portal>
+*     <BaseContextMenu.Positioner>
+*       <ContextMenuPopup>
+*         <ContextMenuItem>Cut</ContextMenuItem>
+*         <ContextMenuItem>Copy</ContextMenuItem>
+*         <ContextMenuSeparator />
+*         <ContextMenuItem>Paste</ContextMenuItem>
+*       </ContextMenuPopup>
+*     </BaseContextMenu.Positioner>
+*   </BaseContextMenu.Portal>
+* </BaseContextMenu.Root>
+* ```
+*/
+const ContextMenuPopup = forwardRef(function ContextMenuPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Popup, {
+		ref,
+		className: `${context_menu_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuItem = forwardRef(function ContextMenuItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		ref,
+		className: `${context_menu_module_default.item} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuSeparator = forwardRef(function ContextMenuSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		ref,
+		className: `${context_menu_module_default.separator} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuGroup = forwardRef(function ContextMenuGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		ref,
+		className,
+		...props
+	});
+});
+const ContextMenuGroupLabel = forwardRef(function ContextMenuGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		ref,
+		className: `${context_menu_module_default["group-label"]} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuSubmenuTrigger = forwardRef(function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		ref,
+		className: `${context_menu_module_default["submenu-trigger"]} ${className ?? ""}`,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: { flex: 1 },
+			children
+		}), /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			className: context_menu_module_default["submenu-icon"],
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3.5 9L7.5 5L3.5 1",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+});
+//#endregion
+export { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPopup, ContextMenuSeparator, ContextMenuSubmenuTrigger };
+
+//# sourceMappingURL=parts.js.map

package/dist/context-menu/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseContextMenu","styles"],"sources":["../../src/context-menu/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for ContextMenu.\n *\n * @example\n * ```tsx\n * import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';\n * import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';\n *\n * <BaseContextMenu.Root>\n *   <BaseContextMenu.Trigger render={<div>Right click me</div>} />\n *   <BaseContextMenu.Portal>\n *     <BaseContextMenu.Positioner>\n *       <ContextMenuPopup>\n *         <ContextMenuItem>Cut</ContextMenuItem>\n *         <ContextMenuItem>Copy</ContextMenuItem>\n *         <ContextMenuSeparator />\n *         <ContextMenuItem>Paste</ContextMenuItem>\n *       </ContextMenuPopup>\n *     </BaseContextMenu.Positioner>\n *   </BaseContextMenu.Portal>\n * </BaseContextMenu.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport styles from \"./context-menu.module.css\";\n\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;\ntype BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;\ntype BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>;\ntype BaseGroupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Group>;\ntype BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;\ntype BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;\n\nexport interface ContextMenuPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuItemProps extends Omit<BaseItemProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuGroupProps extends Omit<BaseGroupProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, \"className\"> {\n  className?: string;\n}\n\nexport const ContextMenuPopup = forwardRef<ComponentRef<typeof BaseContextMenu.Popup>, ContextMenuPopupProps>(function ContextMenuPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ContextMenuItem = forwardRef<ComponentRef<typeof BaseContextMenu.Item>, ContextMenuItemProps>(function ContextMenuItem(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Item ref={ref} className={`${styles.item} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ContextMenuSeparator = forwardRef<ComponentRef<typeof BaseContextMenu.Separator>, ContextMenuSeparatorProps>(\n  function ContextMenuSeparator({ className, ...props }, ref) {\n    return <BaseContextMenu.Separator ref={ref} className={`${styles.separator} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const ContextMenuGroup = forwardRef<ComponentRef<typeof BaseContextMenu.Group>, ContextMenuGroupProps>(function ContextMenuGroup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Group ref={ref} className={className} {...props} />;\n});\n\nexport const ContextMenuGroupLabel = forwardRef<ComponentRef<typeof BaseContextMenu.GroupLabel>, ContextMenuGroupLabelProps>(\n  function ContextMenuGroupLabel({ className, ...props }, ref) {\n    return <BaseContextMenu.GroupLabel ref={ref} className={`${styles[\"group-label\"]} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const ContextMenuSubmenuTrigger = forwardRef<ComponentRef<typeof BaseContextMenu.SubmenuTrigger>, ContextMenuSubmenuTriggerProps>(\n  function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {\n    return (\n      <BaseContextMenu.SubmenuTrigger ref={ref} className={`${styles[\"submenu-trigger\"]} ${className ?? \"\"}`} {...props}>\n        <span style={{ flex: 1 }}>{children}</span>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" className={styles[\"submenu-icon\"]}>\n          <path d=\"M3.5 9L7.5 5L3.5 1\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </BaseContextMenu.SubmenuTrigger>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,MAAjB;EAA2B;EAAK,WAAW,GAAGC,4BAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpG;AAEF,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC1D,QAAO,oBAACD,YAAgB,WAAjB;EAAgC;EAAK,WAAW,GAAGC,4BAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAEjH;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAgB;EAAW,GAAI;EAAS,CAAA;EAC3E;AAEF,MAAa,wBAAwB,WACnC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC3D,QAAO,oBAACA,YAAgB,YAAjB;EAAiC;EAAK,WAAW,GAAGC,4BAAO,eAAe,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAEvH;AAED,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;AACzE,QACE,qBAACD,YAAgB,gBAAjB;EAAqC;EAAK,WAAW,GAAGC,4BAAO,mBAAmB,GAAG,aAAa;EAAM,GAAI;YAA5G,CACE,oBAAC,QAAD;GAAM,OAAO,EAAE,MAAM,GAAG;GAAG;GAAgB,CAAA,EAC3C,oBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAWA,4BAAO;aAC5E,oBAAC,QAAD;IAAM,GAAE;IAAqB,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GAChH,CAAA,CACyB;;EAGtC"}

package/dist/dialog/dialog.css

@@ -0,0 +1,125 @@
+@layer components {
+  .backdrop_VsZA5W {
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+    background-color: #0000007a;
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop_VsZA5W[data-starting-style], .backdrop_VsZA5W[data-ending-style] {
+    opacity: 0;
+  }
+
+  .popup_VsZA5W {
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6) var(--space-5);
+    width: min(440px, calc(100vw - var(--space-8)));
+    max-height: min(640px, calc(100vh - var(--space-8)));
+    gap: var(--space-3);
+    transition: opacity .2s var(--easing-ease-out),
+      transform .2s var(--easing-spring);
+    outline: none;
+    flex-direction: column;
+    display: flex;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+  }
+
+  .popup_VsZA5W[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(.96);
+  }
+
+  .popup_VsZA5W[data-ending-style] {
+    opacity: 0;
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
+    transform: translate(-50%, -50%) scale(.98);
+  }
+
+  .header_VsZA5W {
+    gap: var(--space-2);
+    text-align: center;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .title_VsZA5W {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .description_VsZA5W {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .close_VsZA5W {
+    top: var(--space-4);
+    right: var(--space-4);
+    border-radius: var(--radius-sm);
+    width: 24px;
+    height: 24px;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    background: none;
+    border: none;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .close_VsZA5W:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+
+  .close_VsZA5W:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .body_VsZA5W {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .footer_VsZA5W {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+    display: flex;
+  }
+
+  .footer-split_VsZA5W {
+    justify-content: space-between;
+  }
+
+  .footer-end_VsZA5W {
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+}