@brijbyte/agentic-ui 0.0.1 → 0.0.2

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);
   }
 }

package/src/dialog/dialog.tsx

@@ -11,7 +11,14 @@ export interface DialogProps {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
+  /** Buttons aligned to the right (cancel, confirm). */
   footer?: ReactNode;
+  /**
+   * Content anchored to the left of the footer — intended for a destructive
+   * action (e.g. Delete). When present the footer switches to space-between
+   * layout, matching the macOS dialog pattern.
+   */
+  footerStart?: ReactNode;
   className?: string;
   dismissible?: boolean;
 }
@@ -30,6 +37,7 @@ export function Dialog({
   description,
   children,
   footer,
+  footerStart,
   className,
   dismissible = true,
   onOpenChange,
@@ -50,7 +58,12 @@ export function Dialog({
               </BaseDialog.Close>
             )}
             {children && <div className={styles.body}>{children}</div>}
-            {footer && <div className={styles.footer}>{footer}</div>}
+            {(footer || footerStart) && (
+              <div className={`${styles.footer} ${footerStart ? styles["footer-split"] : ""}`}>
+                {footerStart && <div>{footerStart}</div>}
+                {footer && <div className={styles["footer-end"]}>{footer}</div>}
+              </div>
+            )}
           </BaseDialog.Popup>
         </BaseDialog.Viewport>
       </BaseDialog.Portal>