@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/dist/toast/toast.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+import styles from "./toast.module.css";
+
+//#region src/toast/toast.d.ts
+type ToastType = "default" | "success" | "warning" | "error" | "info";
+declare const useToastManager: typeof Toast.useToastManager;
+interface ToastViewportProps {
+  /**
+   * "stacked" — toasts fan out behind each other like Sonner.
+   *   Collapsed: only the front toast is fully visible; others peek as
+   *   scaled-down cards behind it. Hover/focus expands the full stack.
+   *
+   * "list" — toasts stack vertically, each fully visible (default behaviour).
+   */
+  variant?: "stacked" | "list";
+  /**
+   * Maximum number of toasts shown at once.
+   * Defaults to 5 for "stacked", 3 for "list".
+   * Oldest toasts are removed when the limit is exceeded.
+   */
+  limit?: number;
+}
+interface ToastProviderProps {
+  children: ReactNode;
+  variant?: ToastViewportProps["variant"];
+  limit?: number;
+  timeout?: number;
+}
+declare function ToastProvider({
+  children,
+  variant,
+  limit,
+  timeout
+}: ToastProviderProps): react_jsx_runtime0.JSX.Element;
+declare function ToastViewport({
+  variant,
+  limit: _limit
+}: ToastViewportProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToastProvider, ToastProviderProps, ToastType, ToastViewport, ToastViewportProps, styles, useToastManager };
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;;KAIY,SAAA;AAAA,cAGC,eAAA,SAAe,KAAA,CAAA,eAAA;AAAA,UAgDX,kBAAA;EAnDL;;;;;AAGZ;;EAwDE,OAAA;EAxD0B;;AAgD5B;;;EAcE,KAAA;AAAA;AAAA,UAQe,kBAAA;EACf,QAAA,EAAU,SAAA;EACV,OAAA,GAAU,kBAAA;EACV,KAAA;EACA,OAAA;AAAA;AAAA,iBAYc,aAAA,CAAA;EAAgB,QAAA;EAAU,OAAA;EAAkB,KAAA;EAAO;AAAA,GAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAShF,aAAA,CAAA;EAAgB,OAAA;EAAkB,KAAA,EAAO;AAAA,GAAU,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/toast/toast.js

@@ -0,0 +1,156 @@
+import toast_module_default from "./toast.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/toast/toast.tsx
+const useToastManager = Toast.useToastManager;
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 1L9 9M9 1L1 9",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+function StatusIcon({ type }) {
+	if (type === "success") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-success"]}`,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M4.5 8L6.5 10.5L11 5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+	if (type === "error") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-error"]}`,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+	if (type === "warning") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-warning"]}`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 2L14.5 13H1.5L8 2Z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 6.5V9",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "11",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	});
+	if (type === "info") return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		className: `${toast_module_default.icon} ${toast_module_default["icon-info"]}`,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 7V11",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	});
+	return null;
+}
+const DEFAULT_LIMIT = {
+	stacked: 5,
+	list: 3
+};
+/**
+* Drop-in provider that wires limit defaults to the chosen variant.
+* Use this instead of base-ui's Toast.Provider when using ToastViewport.
+*/
+const MAX_LIMIT = {
+	stacked: 10,
+	list: 5
+};
+function ToastProvider({ children, variant = "list", limit, timeout }) {
+	const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		limit: resolvedLimit,
+		timeout,
+		children
+	});
+}
+function ToastViewport({ variant = "list", limit: _limit }) {
+	const manager = useToastManager();
+	const isStacked = variant === "stacked";
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		className: `${toast_module_default.viewport} ${isStacked ? toast_module_default["viewport-stacked"] : toast_module_default["viewport-list"]}`,
+		children: manager.toasts.map((toast) => /* @__PURE__ */ jsxs(Toast.Root, {
+			toast,
+			className: `${toast_module_default.toast} ${isStacked ? toast_module_default["toast-stacked"] : ""} ${toast_module_default[`toast-${toast.type ?? "default"}`]}`,
+			swipeDirection: isStacked ? ["right", "down"] : ["right", "down"],
+			children: [
+				toast.type && toast.type !== "default" && /* @__PURE__ */ jsx(StatusIcon, { type: toast.type }),
+				/* @__PURE__ */ jsxs("div", {
+					className: toast_module_default.content,
+					children: [toast.title && /* @__PURE__ */ jsx(Toast.Title, { className: toast_module_default.title }), toast.description && /* @__PURE__ */ jsx(Toast.Description, { className: toast_module_default.description })]
+				}),
+				/* @__PURE__ */ jsx(Toast.Close, {
+					className: toast_module_default.close,
+					"aria-label": "Dismiss",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			]
+		}, toast.id))
+	});
+}
+//#endregion
+export { ToastProvider, ToastViewport, useToastManager };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":["BaseToast","styles"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport styles from \"./toast.module.css\";\n\nexport type ToastType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n// Re-export for consumer convenience\nexport const useToastManager = BaseToast.useToastManager;\n\nfunction XIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n      <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction StatusIcon({ type }: { type: string }) {\n  if (type === \"success\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-success\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M4.5 8L6.5 10.5L11 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"error\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-error\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"warning\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-warning\"]}`}>\n        <path d=\"M8 2L14.5 13H1.5L8 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n        <path d=\"M8 6.5V9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  if (type === \"info\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-info\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M8 7V11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport interface ToastViewportProps {\n  /**\n   * \"stacked\" — toasts fan out behind each other like Sonner.\n   *   Collapsed: only the front toast is fully visible; others peek as\n   *   scaled-down cards behind it. Hover/focus expands the full stack.\n   *\n   * \"list\" — toasts stack vertically, each fully visible (default behaviour).\n   */\n  variant?: \"stacked\" | \"list\";\n  /**\n   * Maximum number of toasts shown at once.\n   * Defaults to 5 for \"stacked\", 3 for \"list\".\n   * Oldest toasts are removed when the limit is exceeded.\n   */\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 5,\n  list: 3,\n};\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  variant?: ToastViewportProps[\"variant\"];\n  limit?: number;\n  timeout?: number;\n}\n\n/**\n * Drop-in provider that wires limit defaults to the chosen variant.\n * Use this instead of base-ui's Toast.Provider when using ToastViewport.\n */\nconst MAX_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 10,\n  list: 5,\n};\n\nexport function ToastProvider({ children, variant = \"list\", limit, timeout }: ToastProviderProps) {\n  const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);\n  return (\n    <BaseToast.Provider limit={resolvedLimit} timeout={timeout}>\n      {children}\n    </BaseToast.Provider>\n  );\n}\n\nexport function ToastViewport({ variant = \"list\", limit: _limit }: ToastViewportProps) {\n  const manager = useToastManager();\n  const isStacked = variant === \"stacked\";\n\n  return (\n    <BaseToast.Viewport className={`${styles.viewport} ${isStacked ? styles[\"viewport-stacked\"] : styles[\"viewport-list\"]}`}>\n      {manager.toasts.map((toast) => (\n        <BaseToast.Root\n          key={toast.id}\n          toast={toast}\n          className={`${styles.toast} ${isStacked ? styles[\"toast-stacked\"] : \"\"} ${styles[`toast-${toast.type ?? \"default\"}`]}`}\n          swipeDirection={isStacked ? [\"right\", \"down\"] : [\"right\", \"down\"]}\n        >\n          {toast.type && toast.type !== \"default\" && <StatusIcon type={toast.type} />}\n          <div className={styles.content}>\n            {toast.title && <BaseToast.Title className={styles.title} />}\n            {toast.description && <BaseToast.Description className={styles.description} />}\n          </div>\n          <BaseToast.Close className={styles.close} aria-label=\"Dismiss\">\n            <XIcon />\n          </BaseToast.Close>\n        </BaseToast.Root>\n      ))}\n    </BaseToast.Viewport>\n  );\n}\nexport { styles as ToastStyles };\n"],"mappings":"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"}

package/dist/toast/toast.module.css.d.ts

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

package/dist/toast/toast.module.js

@@ -0,0 +1,25 @@
+//#region src/toast/toast.module.css
+var toast_module_default = {
+	"close": "close_QXnIWW",
+	"content": "content_QXnIWW",
+	"description": "description_QXnIWW",
+	"icon": "icon_QXnIWW",
+	"icon-error": "icon-error_QXnIWW",
+	"icon-info": "icon-info_QXnIWW",
+	"icon-success": "icon-success_QXnIWW",
+	"icon-warning": "icon-warning_QXnIWW",
+	"title": "title_QXnIWW",
+	"toast": "toast_QXnIWW",
+	"toast-error": "toast-error_QXnIWW",
+	"toast-info": "toast-info_QXnIWW",
+	"toast-stacked": "toast-stacked_QXnIWW",
+	"toast-success": "toast-success_QXnIWW",
+	"toast-warning": "toast-warning_QXnIWW",
+	"viewport": "viewport_QXnIWW",
+	"viewport-list": "viewport-list_QXnIWW",
+	"viewport-stacked": "viewport-stacked_QXnIWW"
+};
+//#endregion
+export { toast_module_default as default };
+
+//# sourceMappingURL=toast.module.js.map

package/dist/toast/toast.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-bg-overlay);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n\n  /* ─── List mode animations ───────────────────────────────────────── */\n\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    z-index: calc(50 - var(--toast-index));\n\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));\n  }\n\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n\n  /* ─── Content ────────────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  /* ─── Close button ───────────────────────────────────────────────── */\n\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAe;CAAA,SAAO;CAAe,WAAQ;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}

package/dist/tokens.css

@@ -0,0 +1,400 @@
+/**
+ * @brijbyte/agentic-ui — Design Tokens
+ *
+ * macOS/iOS-inspired developer-focused design system.
+ * Monospace-first, semantic color tokens, supports light & dark modes.
+ */
+@layer base {
+  :root {
+    /* ─── Typography ──────────────────────────────────────────────── */
+    /*
+     * Display / headline font — Apple "New York" serif (macOS Catalina+).
+     * Falls back to classic readable serifs. Used for page titles and headings.
+     */
+    --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
+
+    /*
+     * Mono / UI font — developer-focused monospace stack.
+     * Used for all UI chrome: buttons, inputs, labels, badges, code.
+     */
+    --font-mono:
+      "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
+
+    /*
+     * Sans — system sans-serif for body prose and long descriptions.
+     */
+    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+
+    --font-size-2xs: 0.625rem; /* 10px */
+    --font-size-xs: 0.6875rem; /* 11px */
+    --font-size-sm: 0.75rem; /* 12px */
+    --font-size-md: 0.8125rem; /* 13px — macOS default */
+    --font-size-lg: 0.875rem; /* 14px */
+    --font-size-xl: 1rem; /* 16px */
+    --font-size-2xl: 1.125rem; /* 18px */
+    --font-size-3xl: 1.25rem; /* 20px */
+    --font-size-4xl: 1.5rem; /* 24px */
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.4;
+    --line-height-relaxed: 1.6;
+
+    --letter-spacing-tight: -0.02em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: 0.04em;
+    --letter-spacing-wider: 0.08em;
+
+    /* ─── Spacing (4px grid) ──────────────────────────────────────── */
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 2px;
+    --space-1: 4px;
+    --space-1-5: 6px;
+    --space-2: 8px;
+    --space-2-5: 10px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+
+    /* ─── Border Radius ───────────────────────────────────────────── */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-2xl: 12px;
+    --radius-full: 9999px;
+
+    /* ─── Border Width ────────────────────────────────────────────── */
+    --border-width-base: 1px;
+    --border-width-medium: 1.5px;
+    --border-width-thick: 2px;
+
+    /* ─── Animation ───────────────────────────────────────────────── */
+    --duration-instant: 0ms;
+    --duration-fast: 100ms;
+    --duration-normal: 150ms;
+    --duration-slow: 200ms;
+    --duration-slower: 300ms;
+
+    /*
+     * Easing curves — use the right one for the job:
+     *   ease-out   → entering elements (starts fast, feels responsive)
+     *   ease-in    → exiting elements (builds speed, disappears cleanly)
+     *   standard   → on-screen movement / morphing between states (ease-in-out)
+     *   spring     → playful or physics-based interactions
+     *   linear     → constant motion (spinners, progress bars, marquees)
+     */
+    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --easing-linear: linear;
+
+    /* ─── Z-index Scale ───────────────────────────────────────────── */
+    --z-below: -1;
+    --z-base: 0;
+    --z-raised: 10;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-overlay: 300;
+    --z-modal: 400;
+    --z-popover: 500;
+    --z-toast: 600;
+    --z-tooltip: 700;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     LIGHT MODE — semantic tokens
+  ═══════════════════════════════════════════════════════════════════ */
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+
+    /* Background layers (macOS vibrancy-inspired) */
+    --color-bg-base: #f5f5f5;
+    --color-bg-elevated: #ffffff;
+    --color-bg-sunken: #ebebeb;
+    --color-bg-overlay: rgba(255, 255, 255, 0.92);
+    --color-bg-sidebar: rgba(246, 246, 246, 0.95);
+
+    /* Surface (card/panel backgrounds) */
+    --color-surface-1: #ffffff;
+    --color-surface-2: #f9f9f9;
+    --color-surface-3: #f4f4f4;
+    --color-surface-hover: rgba(0, 0, 0, 0.04);
+    --color-surface-active: rgba(0, 0, 0, 0.07);
+    --color-surface-selected: rgba(0, 120, 212, 0.1);
+
+    /* Text */
+    --color-text-primary: rgba(0, 0, 0, 0.88);
+    --color-text-secondary: rgba(0, 0, 0, 0.55);
+    --color-text-tertiary: rgba(0, 0, 0, 0.36);
+    --color-text-disabled: rgba(0, 0, 0, 0.24);
+    --color-text-inverse: rgba(255, 255, 255, 0.95);
+    --color-text-on-accent: #ffffff;
+    --color-text-code: #0f766e;
+
+    /* Borders */
+    --color-border-base: rgba(0, 0, 0, 0.12);
+    --color-border-strong: rgba(0, 0, 0, 0.22);
+    --color-border-subtle: rgba(0, 0, 0, 0.06);
+    --color-border-focus: var(--color-focus-ring);
+
+    /* Accent — macOS blue
+     * Semantic names instead of opaque Radix-style numbers:
+     *   tint        → subtle background fill (badges, chips)
+     *   tint-hover  → tint on hover
+     *   (base)      → solid interactive color (buttons, links)
+     *   hover       → solid on hover
+     *   pressed     → solid on press
+     */
+    --color-accent: #0078d4;
+    --color-accent-hover: #006bbf;
+    --color-accent-pressed: #005ea8;
+    --color-accent-tint: rgba(0, 120, 212, 0.1);
+    --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
+
+    /* Focus ring */
+    --color-focus-ring: rgba(0, 120, 212, 0.8);
+
+    /* Elevation / Shadows — light (subtle black shadows) */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
+    --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1);
+    --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.12);
+    --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.08);
+    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+
+    /* Status — Success */
+    --color-success-bg: #f0fdf4;
+    --color-success-border: #bbf7d0;
+    --color-success-text: #15803d;
+    --color-success-solid: #16a34a;
+
+    /* Status — Warning */
+    --color-warning-bg: #fffbeb;
+    --color-warning-border: #fde68a;
+    --color-warning-text: #92400e;
+    --color-warning-solid: #d97706;
+
+    /* Status — Error */
+    --color-error-bg: #fef2f2;
+    --color-error-border: #fecaca;
+    --color-error-text: #991b1b;
+    --color-error-solid: #dc2626;
+
+    /* Status — Info */
+    --color-info-bg: #eff6ff;
+    --color-info-border: #bfdbfe;
+    --color-info-text: #1d4ed8;
+    --color-info-solid: #2563eb;
+
+    /* Code / terminal palette */
+    --color-code-bg: #f6f8fa;
+    --color-code-border: #d0d7de;
+    --color-code-comment: #6e7781;
+    --color-code-keyword: #cf222e;
+    --color-code-string: #0a3069;
+    --color-code-number: #0550ae;
+    --color-code-function: #8250df;
+
+    /* Scrollbar */
+    --color-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+    --color-scrollbar-track: transparent;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     DARK MODE — single source of truth via :where()
+     Both the media query and [data-theme="dark"] point to the same
+     selector block — no duplication, no drift.
+  ═══════════════════════════════════════════════════════════════════ */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]),
+    :root:not([data-theme="light"]) [data-theme="dark"] {
+      color-scheme: dark;
+
+      /* Background */
+      --color-bg-base: #1c1c1e;
+      --color-bg-elevated: #2c2c2e;
+      --color-bg-sunken: #141416;
+      --color-bg-overlay: rgba(30, 30, 32, 0.92);
+      --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+
+      /* Surface */
+      --color-surface-1: #2c2c2e;
+      --color-surface-2: #3a3a3c;
+      --color-surface-3: #48484a;
+      --color-surface-hover: rgba(255, 255, 255, 0.06);
+      --color-surface-active: rgba(255, 255, 255, 0.1);
+      --color-surface-selected: rgba(10, 132, 255, 0.16);
+
+      /* Text */
+      --color-text-primary: rgba(255, 255, 255, 0.92);
+      --color-text-secondary: rgba(255, 255, 255, 0.55);
+      --color-text-tertiary: rgba(255, 255, 255, 0.36);
+      --color-text-disabled: rgba(255, 255, 255, 0.24);
+      --color-text-inverse: rgba(0, 0, 0, 0.88);
+      --color-text-on-accent: #ffffff;
+      --color-text-code: #2dd4bf;
+
+      /* Borders */
+      --color-border-base: rgba(255, 255, 255, 0.12);
+      --color-border-strong: rgba(255, 255, 255, 0.22);
+      --color-border-subtle: rgba(255, 255, 255, 0.06);
+
+      /* Accent — macOS blue dark */
+      --color-accent: #0a84ff;
+      --color-accent-hover: #0071e3;
+      --color-accent-pressed: #005bb5;
+      --color-accent-tint: rgba(10, 132, 255, 0.12);
+      --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+      /* Focus ring */
+      --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+      /* Elevation / Shadows — dark (higher opacity so they read on dark surfaces) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+      --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
+      --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
+      --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
+      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+
+      /* Status — Success */
+      --color-success-bg: rgba(22, 163, 74, 0.12);
+      --color-success-border: rgba(22, 163, 74, 0.3);
+      --color-success-text: #4ade80;
+      --color-success-solid: #22c55e;
+
+      /* Status — Warning */
+      --color-warning-bg: rgba(217, 119, 6, 0.12);
+      --color-warning-border: rgba(217, 119, 6, 0.3);
+      --color-warning-text: #fbbf24;
+      --color-warning-solid: #f59e0b;
+
+      /* Status — Error */
+      --color-error-bg: rgba(220, 38, 38, 0.12);
+      --color-error-border: rgba(220, 38, 38, 0.3);
+      --color-error-text: #f87171;
+      --color-error-solid: #ef4444;
+
+      /* Status — Info */
+      --color-info-bg: rgba(37, 99, 235, 0.12);
+      --color-info-border: rgba(37, 99, 235, 0.3);
+      --color-info-text: #60a5fa;
+      --color-info-solid: #3b82f6;
+
+      /* Code / terminal palette */
+      --color-code-bg: #161b22;
+      --color-code-border: rgba(255, 255, 255, 0.1);
+      --color-code-comment: #8b949e;
+      --color-code-keyword: #ff7b72;
+      --color-code-string: #a5d6ff;
+      --color-code-number: #79c0ff;
+      --color-code-function: #d2a8ff;
+
+      /* Scrollbar */
+      --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+      --color-scrollbar-track: transparent;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    --color-bg-base: #1c1c1e;
+    --color-bg-elevated: #2c2c2e;
+    --color-bg-sunken: #141416;
+    --color-bg-overlay: rgba(30, 30, 32, 0.92);
+    --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+
+    --color-surface-1: #2c2c2e;
+    --color-surface-2: #3a3a3c;
+    --color-surface-3: #48484a;
+    --color-surface-hover: rgba(255, 255, 255, 0.06);
+    --color-surface-active: rgba(255, 255, 255, 0.1);
+    --color-surface-selected: rgba(10, 132, 255, 0.16);
+
+    --color-text-primary: rgba(255, 255, 255, 0.92);
+    --color-text-secondary: rgba(255, 255, 255, 0.55);
+    --color-text-tertiary: rgba(255, 255, 255, 0.36);
+    --color-text-disabled: rgba(255, 255, 255, 0.24);
+    --color-text-inverse: rgba(0, 0, 0, 0.88);
+    --color-text-on-accent: #ffffff;
+    --color-text-code: #2dd4bf;
+
+    --color-border-base: rgba(255, 255, 255, 0.12);
+    --color-border-strong: rgba(255, 255, 255, 0.22);
+    --color-border-subtle: rgba(255, 255, 255, 0.06);
+
+    --color-accent: #0a84ff;
+    --color-accent-hover: #0071e3;
+    --color-accent-pressed: #005bb5;
+    --color-accent-tint: rgba(10, 132, 255, 0.12);
+    --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+    --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+    --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
+    --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
+    --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+
+    --color-success-bg: rgba(22, 163, 74, 0.12);
+    --color-success-border: rgba(22, 163, 74, 0.3);
+    --color-success-text: #4ade80;
+    --color-success-solid: #22c55e;
+
+    --color-warning-bg: rgba(217, 119, 6, 0.12);
+    --color-warning-border: rgba(217, 119, 6, 0.3);
+    --color-warning-text: #fbbf24;
+    --color-warning-solid: #f59e0b;
+
+    --color-error-bg: rgba(220, 38, 38, 0.12);
+    --color-error-border: rgba(220, 38, 38, 0.3);
+    --color-error-text: #f87171;
+    --color-error-solid: #ef4444;
+
+    --color-info-bg: rgba(37, 99, 235, 0.12);
+    --color-info-border: rgba(37, 99, 235, 0.3);
+    --color-info-text: #60a5fa;
+    --color-info-solid: #3b82f6;
+
+    --color-code-bg: #161b22;
+    --color-code-border: rgba(255, 255, 255, 0.1);
+    --color-code-comment: #8b949e;
+    --color-code-keyword: #ff7b72;
+    --color-code-string: #a5d6ff;
+    --color-code-number: #79c0ff;
+    --color-code-function: #d2a8ff;
+
+    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+    --color-scrollbar-track: transparent;
+  }
+}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import { Tooltip, TooltipProps, styles } from "./tooltip.js";
+import { TooltipArrow, TooltipArrowProps, TooltipPopup, TooltipPopupProps, TooltipPositioner, TooltipPositionerProps } from "./parts.js";
+export { Tooltip, TooltipArrow, type TooltipArrowProps, TooltipPopup, type TooltipPopupProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, styles as TooltipStyles };