@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/src/checkbox/checkbox.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
@@ -8,18 +6,16 @@
     cursor: pointer;
     user-select: none;
   }
-
   .root[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .indicator {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     border-radius: var(--radius-sm);
-    border: var(--border-width-base) solid var(--color-border-strong);
+    border: var(--border-width-base) solid var(--color-line-strong);
     background-color: var(--color-surface-1);
     display: flex;
     align-items: center;
@@ -31,50 +27,43 @@
     outline: none;
     position: relative;
   }
-
   .indicator:focus-visible {
     box-shadow: var(--shadow-focus);
     border-color: var(--color-accent);
   }
-
   .indicator:hover:not([data-disabled]) {
     border-color: var(--color-accent);
   }
-
   .indicator[data-checked],
   .indicator[data-indeterminate] {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
   }
-
   .indicator[data-checked]:hover,
   .indicator[data-indeterminate]:hover {
     background-color: var(--color-accent-hover);
     border-color: var(--color-accent-hover);
   }
-
   /* Checkmark SVG */
   .icon {
     width: 10px;
     height: 10px;
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
     opacity: 0;
     transform: scale(0.9);
     transition:
       opacity var(--duration-fast) var(--easing-standard),
       transform var(--duration-fast) var(--easing-spring);
   }
-
   .indicator[data-checked] .icon,
   .indicator[data-indeterminate] .icon {
     opacity: 1;
     transform: scale(1);
   }
-
   .label {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
   }
 }

package/src/collapsible/collapsible.module.css

@@ -1,12 +1,9 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
-
   .trigger {
     display: flex;
     align-items: center;
@@ -15,9 +12,9 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     background: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-md);
     cursor: pointer;
     outline: none;
@@ -29,7 +26,6 @@
       border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
       border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
   }
-
   .trigger[data-panel-open] {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -40,55 +36,46 @@
       border-bottom-right-radius var(--duration-normal) var(--easing-standard),
       border-bottom-color var(--duration-normal) var(--easing-standard);
   }
-
   .trigger:hover {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
   }
-
   .trigger:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   .trigger[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .trigger-icon {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
     transition: transform var(--duration-normal) var(--easing-standard);
   }
-
   .trigger[data-panel-open] .trigger-icon {
     transform: rotate(90deg);
   }
-
   .panel {
     height: var(--collapsible-panel-height);
     overflow: hidden;
     transition: height var(--duration-normal) var(--easing-standard);
   }
-
   /* hide when not using hidden="until-found" */
   .panel[hidden]:not([hidden="until-found"]) {
     display: none;
   }
-
   .panel[data-starting-style],
   .panel[data-ending-style] {
     height: 0;
   }
-
   .panel-content {
     padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-top: none;
     border-radius: 0 0 var(--radius-md) var(--radius-md);
-    background: var(--color-bg-elevated);
+    background: var(--color-elevated);
   }
 }

package/src/context-menu/context-menu.module.css

@@ -0,0 +1,168 @@
+@layer components {
+  .positioner {
+    outline: none;
+    z-index: var(--z-dropdown);
+  }
+
+  .popup {
+    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);
+    outline: none;
+    transition:
+      opacity 150ms var(--easing-ease-out),
+      transform 150ms var(--easing-ease-out);
+  }
+
+  @supports (backdrop-filter: blur(20px)) {
+    .popup {
+      backdrop-filter: blur(20px) saturate(1.8);
+      -webkit-backdrop-filter: blur(20px) saturate(1.8);
+    }
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.99);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+
+  /* ─── Trigger area ───────────────────────────────────────────── */
+
+  .trigger {
+    display: block;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+  }
+
+  /* ─── Item ───────────────────────────────────────────────────── */
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    /* Full-width — no inset margin */
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    outline: none;
+    user-select: none;
+    position: relative;
+    transition: none;
+  }
+
+  .item[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .item[data-disabled] {
+    opacity: 0.36;
+    cursor: not-allowed;
+  }
+
+  /* ─── Item internals ─────────────────────────────────────────── */
+
+  .item-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+  }
+
+  .item-label {
+    flex: 1;
+  }
+
+  .item-shortcut {
+    margin-left: var(--space-8);
+    font-size: var(--font-size-sm);
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+
+  .item[data-highlighted] .item-shortcut {
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
+  }
+
+  .submenu-icon {
+    margin-left: auto;
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+
+  .item[data-highlighted] .submenu-icon,
+  .submenu-trigger[data-highlighted] .submenu-icon {
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
+  }
+
+  /* ─── Submenu trigger ────────────────────────────────────────── */
+
+  .submenu-trigger {
+    display: flex;
+    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;
+    outline: none;
+    user-select: none;
+    transition: none;
+  }
+
+  .submenu-trigger[data-highlighted],
+  .submenu-trigger[data-popup-open] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .submenu-trigger[data-disabled] {
+    opacity: 0.36;
+    cursor: not-allowed;
+  }
+
+  /* ─── Group label ────────────────────────────────────────────── */
+
+  .group-label {
+    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 ──────────────────────────────────────────────── */
+  .separator {
+    margin: var(--space-1) var(--space-4);
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+  }
+}

package/src/context-menu/context-menu.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode, ReactElement } from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import styles from "./context-menu.module.css";
+
+export interface ContextMenuItemDef {
+  type?: "item";
+  label: ReactNode;
+  icon?: ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+
+export interface ContextMenuSeparatorDef {
+  type: "separator";
+}
+
+export interface ContextMenuGroupDef {
+  type: "group";
+  label?: ReactNode;
+  items: ContextMenuItemDef[];
+}
+
+export type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;
+
+export interface ContextMenuProps {
+  /** The element that can be right-clicked / long-pressed to open the menu. */
+  children: ReactElement;
+  items: ContextMenuEntry[];
+  className?: string;
+}
+
+function RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {
+  return (
+    <BaseContextMenu.Item key={i} className={styles.item} disabled={item.disabled} onClick={item.onSelect}>
+      {item.icon && <span className={styles["item-icon"]}>{item.icon}</span>}
+      <span className={styles["item-label"]}>{item.label}</span>
+      {item.shortcut && <span className={styles["item-shortcut"]}>{item.shortcut}</span>}
+    </BaseContextMenu.Item>
+  );
+}
+
+export function ContextMenu({ children, items, className }: ContextMenuProps) {
+  return (
+    <BaseContextMenu.Root>
+      <BaseContextMenu.Trigger className={`${styles.trigger} ${className ?? ""}`} render={children} />
+      <BaseContextMenu.Portal>
+        <BaseContextMenu.Positioner className={styles.positioner}>
+          <BaseContextMenu.Popup className={styles.popup}>
+            {items.map((entry, i) => {
+              if (entry.type === "separator") {
+                return <BaseContextMenu.Separator key={i} className={styles.separator} />;
+              }
+              if (entry.type === "group") {
+                return (
+                  <BaseContextMenu.Group key={i}>
+                    {entry.label && (
+                      <BaseContextMenu.GroupLabel className={styles["group-label"]}>{entry.label}</BaseContextMenu.GroupLabel>
+                    )}
+                    {entry.items.map((item, j) => (
+                      <RenderItem key={j} item={item} i={j} />
+                    ))}
+                  </BaseContextMenu.Group>
+                );
+              }
+              return <RenderItem key={i} item={entry} i={i} />;
+            })}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    </BaseContextMenu.Root>
+  );
+}
+
+export { styles as ContextMenuStyles };

package/src/context-menu/index.ts

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

package/src/context-menu/parts.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import styles from "./context-menu.module.css";
+
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>;
+type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Group>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;
+type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;
+
+export interface ContextMenuPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuGroupProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, "className"> {
+  className?: string;
+}
+
+export const ContextMenuPopup = forwardRef<ComponentRef<typeof BaseContextMenu.Popup>, ContextMenuPopupProps>(function ContextMenuPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const ContextMenuItem = forwardRef<ComponentRef<typeof BaseContextMenu.Item>, ContextMenuItemProps>(function ContextMenuItem(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+});
+
+export const ContextMenuSeparator = forwardRef<ComponentRef<typeof BaseContextMenu.Separator>, ContextMenuSeparatorProps>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return <BaseContextMenu.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const ContextMenuGroup = forwardRef<ComponentRef<typeof BaseContextMenu.Group>, ContextMenuGroupProps>(function ContextMenuGroup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Group ref={ref} className={className} {...props} />;
+});
+
+export const ContextMenuGroupLabel = forwardRef<ComponentRef<typeof BaseContextMenu.GroupLabel>, ContextMenuGroupLabelProps>(
+  function ContextMenuGroupLabel({ className, ...props }, ref) {
+    return <BaseContextMenu.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const ContextMenuSubmenuTrigger = forwardRef<ComponentRef<typeof BaseContextMenu.SubmenuTrigger>, ContextMenuSubmenuTriggerProps>(
+  function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {
+    return (
+      <BaseContextMenu.SubmenuTrigger ref={ref} className={`${styles["submenu-trigger"]} ${className ?? ""}`} {...props}>
+        <span style={{ flex: 1 }}>{children}</span>
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={styles["submenu-icon"]}>
+          <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </BaseContextMenu.SubmenuTrigger>
+    );
+  },
+);

package/src/dialog/dialog.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .backdrop {
     position: fixed;
@@ -8,41 +6,36 @@
     z-index: var(--z-overlay);
     transition: opacity var(--duration-slow) var(--easing-standard);
   }
-
   .backdrop[data-starting-style],
   .backdrop[data-ending-style] {
     opacity: 0;
   }
-
   .popup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: var(--z-modal);
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    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-6);
-    width: min(480px, calc(100vw - var(--space-8)));
+    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)));
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--space-3);
     outline: none;
     overflow: hidden;
-
     transition:
       opacity 200ms var(--easing-ease-out),
       transform 200ms var(--easing-spring);
   }
-
   .popup[data-starting-style] {
     opacity: 0;
     transform: translate(-50%, -48%) scale(0.96);
   }
-
   .popup[data-ending-style] {
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.98);
@@ -50,30 +43,26 @@
       opacity 150ms var(--easing-ease-in),
       transform 150ms var(--easing-ease-in);
   }
-
   .header {
     display: flex;
     flex-direction: column;
-    gap: var(--space-1);
+    gap: var(--space-2);
+    text-align: center;
   }
-
   .title {
-    font-family: var(--font-mono);
+    font-family: var(--font-sans);
     font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    padding-right: var(--space-6);
   }
-
   .description {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
-
   .close {
     position: absolute;
     top: var(--space-4);
@@ -83,7 +72,7 @@
     border-radius: var(--radius-sm);
     border: none;
     background: transparent;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -93,31 +82,35 @@
       background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
   }
-
   .close:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
-
   .close:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   .body {
     flex: 1;
     overflow-y: auto;
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
-
   .footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--space-2);
     padding-top: var(--space-2);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
+  }
+  /* When a footerStart slot is present, space-between pushes it left */
+  .footer-split {
+    justify-content: space-between;
+  }
+  .footer-end {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
   }
 }