bubble-toolbar 0.1.0 → 1.1.0

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,37 +15,69 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   BubbleArea: () => BubbleArea,
+  BubbleBreadcrumbSearch: () => BubbleBreadcrumbSearch,
   BubbleGroup: () => BubbleGroup,
   BubbleIconButton: () => BubbleIconButton,
+  BubbleSearch: () => BubbleSearch,
   BubbleToolbar: () => BubbleToolbar,
   BubbleToolbarContext: () => BubbleToolbarContext,
   formatPx: () => formatPx,
   getGlassStyles: () => getGlassStyles,
   getValidChildren: () => getValidChildren,
   resolveSize: () => resolveSize,
-  useBubbleToolbar: () => useBubbleToolbar
+  useBubbleActivity: () => useBubbleActivity,
+  useBubbleLiveActivity: () => useBubbleLiveActivity,
+  useBubbleToolbar: () => useBubbleToolbar,
+  useBubbleToolbarLiveActivity: () => useBubbleToolbarLiveActivity
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/BubbleToolbar.tsx
+// src/activity.ts
+var import_react = require("react");
+var BubbleActivityContext = (0, import_react.createContext)(null);
+var useBubbleActivity = () => {
+  const activity = (0, import_react.useContext)(BubbleActivityContext);
+  if (!activity) {
+    throw new Error("useBubbleActivity must be used inside a BubbleGroup or BubbleToolbar.Group.");
+  }
+  return activity;
+};
+var useGroupActivity = (externalBusy) => {
+  const [pending, setPending] = (0, import_react.useState)(0);
+  const mounted = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = (0, import_react.useCallback)(async (task) => {
+    if (mounted.current) {
+      setPending((count) => count + 1);
+    }
+    try {
+      return await task();
+    } finally {
+      if (mounted.current) {
+        setPending((count) => count - 1);
+      }
+    }
+  }, []);
+  const isBusy = externalBusy || pending > 0;
+  return (0, import_react.useMemo)(() => ({ isBusy, run }), [isBusy, run]);
+};
+
+// src/BubbleGroup.tsx
 var import_react4 = require("react");
 
 // src/context.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var defaultContextValue = {
   size: "md",
   theme: "glass",
@@ -57,26 +87,21 @@ var defaultContextValue = {
   bordered: true,
   shadow: true
 };
-var BubbleToolbarContext = (0, import_react.createContext)(defaultContextValue);
+var BubbleToolbarContext = (0, import_react2.createContext)(defaultContextValue);
 var useBubbleToolbar = () => {
-  return (0, import_react.useContext)(BubbleToolbarContext);
+  return (0, import_react2.useContext)(BubbleToolbarContext);
 };
 
-// src/BubbleGroup.tsx
-var import_react3 = require("react");
-
 // src/utils/children.ts
-var import_react2 = __toESM(require("react"));
+var import_react3 = require("react");
 function getValidChildren(children) {
   const result = [];
-  import_react2.default.Children.forEach(children, (child) => {
+  import_react3.Children.forEach(children, (child) => {
     if (child === null || child === void 0 || typeof child === "boolean") {
       return;
     }
-    if (import_react2.default.isValidElement(child) && child.type === import_react2.default.Fragment) {
-      const fragmentChildren = getValidChildren(
-        child.props.children
-      );
+    if ((0, import_react3.isValidElement)(child) && child.type === import_react3.Fragment) {
+      const fragmentChildren = getValidChildren(child.props.children);
       result.push(...fragmentChildren);
     } else {
       result.push(child);
@@ -87,13 +112,14 @@ function getValidChildren(children) {
 
 // src/utils/styles.ts
 function resolveSize(size) {
-  if (typeof size === "number") return size;
+  if (typeof size === "number") {
+    return size;
+  }
   switch (size) {
     case "sm":
       return 40;
     case "lg":
       return 56;
-    case "md":
     default:
       return 48;
   }
@@ -108,28 +134,27 @@ function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
   let color;
   switch (theme) {
     case "dark":
-      background = blurred ? "rgba(24, 24, 27, 0.72)" : "rgba(24, 24, 27, 0.95)";
-      borderColor = "rgba(255, 255, 255, 0.12)";
-      color = "#f4f4f5";
+      background = blurred ? "var(--bubble-dark-bg, rgba(24, 24, 27, 0.72))" : "var(--bubble-dark-bg-solid, rgba(24, 24, 27, 0.95))";
+      borderColor = "var(--bubble-dark-border, rgba(255, 255, 255, 0.12))";
+      color = "var(--bubble-dark-fg, #f4f4f5)";
       break;
     case "light":
-      background = blurred ? "rgba(255, 255, 255, 0.75)" : "rgba(255, 255, 255, 0.95)";
-      borderColor = "rgba(0, 0, 0, 0.08)";
-      color = "#18181b";
+      background = blurred ? "var(--bubble-light-bg, rgba(255, 255, 255, 0.75))" : "var(--bubble-light-bg-solid, rgba(255, 255, 255, 0.95))";
+      borderColor = "var(--bubble-light-border, rgba(0, 0, 0, 0.08))";
+      color = "var(--bubble-light-fg, #18181b)";
       break;
     case "auto":
-      background = "var(--bubble-bg, rgba(255, 255, 255, 0.75))";
-      borderColor = "var(--bubble-border, rgba(0, 0, 0, 0.08))";
-      color = "var(--bubble-fg, #18181b)";
+      background = "var(--bubble-bg, var(--bubble-light-bg, rgba(255, 255, 255, 0.75)))";
+      borderColor = "var(--bubble-border, var(--bubble-light-border, rgba(0, 0, 0, 0.08)))";
+      color = "var(--bubble-fg, var(--bubble-light-fg, #18181b))";
       break;
-    case "glass":
     default:
-      background = blurred ? "rgba(255, 255, 255, 0.65)" : "rgba(255, 255, 255, 0.92)";
-      borderColor = "rgba(255, 255, 255, 0.4)";
-      color = "#09090b";
+      background = blurred ? "var(--bubble-glass-bg, rgba(255, 255, 255, 0.65))" : "var(--bubble-glass-bg-solid, rgba(255, 255, 255, 0.92))";
+      borderColor = "var(--bubble-glass-border, rgba(255, 255, 255, 0.4))";
+      color = "var(--bubble-glass-fg, #09090b)";
       break;
   }
-  const boxShadow = typeof shadow === "string" ? shadow : shadow ? "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06)" : "none";
+  const boxShadow = typeof shadow === "string" ? shadow : shadow ? "var(--bubble-glass-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06))" : "none";
   return {
     backgroundColor: background,
     backdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : void 0,
@@ -143,17 +168,23 @@ function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
 
 // src/BubbleGroup.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var BubbleGroup = (0, import_react3.forwardRef)(
+var BubbleGroup = (0, import_react4.forwardRef)(
   ({
     children,
     shape: explicitShape,
     size: explicitSize,
     itemGap: explicitItemGap,
+    busy = false,
+    activityColors,
+    activityDuration,
     className = "",
     style,
     ...rest
   }, ref) => {
     const context = useBubbleToolbar();
+    const activity = useGroupActivity(Boolean(context.busy || busy));
+    const colors = activityColors ?? context.activityColors ?? ["#22d3ee", "#8b5cf6", "#ec4899"];
+    const duration = activityDuration ?? context.activityDuration ?? 2.4;
     const validChildren = getValidChildren(children);
     const count = validChildren.length;
     const computedShape = explicitShape || (count <= 1 ? "circle" : "pill");
@@ -168,6 +199,10 @@ var BubbleGroup = (0, import_react3.forwardRef)(
     );
     const isCircle = computedShape === "circle";
     const groupStyles = {
+      "--bubble-activity-color-1": colors[0],
+      "--bubble-activity-color-2": colors[1],
+      "--bubble-activity-color-3": colors[2],
+      "--bubble-activity-duration": `${Number.isFinite(duration) && duration > 0 ? duration : 2.4}s`,
       ...glassStyles,
       height: `${effectiveSize}px`,
       boxSizing: "border-box",
@@ -196,9 +231,10 @@ var BubbleGroup = (0, import_react3.forwardRef)(
     const combinedClassName = [
       "bubble-group",
       `bubble-group--${computedShape}`,
+      activity.isBusy && "bubble-group--busy",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleActivityContext.Provider, { value: activity, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
@@ -208,149 +244,143 @@ var BubbleGroup = (0, import_react3.forwardRef)(
         "data-shape": computedShape,
         "data-items-count": count,
         ...rest,
+        "aria-busy": activity.isBusy,
         children: validChildren
       }
-    );
+    ) });
   }
 );
 BubbleGroup.displayName = "BubbleGroup";
 
 // src/BubbleToolbar.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var BubbleToolbar = (0, import_react4.forwardRef)(
-  ({
-    groups,
-    children,
-    position = "bottom",
-    theme = "glass",
-    size = "md",
-    blurred = true,
-    blurAmount = 16,
-    groupGap = 8,
-    itemGap = 8,
-    bordered = true,
-    shadow = true,
-    className = "",
-    style,
-    ariaLabel = "Toolbar",
-    ...rest
-  }, ref) => {
-    const contextValue = (0, import_react4.useMemo)(
-      () => ({
-        size,
-        theme,
-        blurred,
-        blurAmount,
-        itemGap,
-        bordered,
-        shadow
-      }),
-      [size, theme, blurred, blurAmount, itemGap, bordered, shadow]
-    );
-    const getPositionStyles = () => {
-      switch (position) {
-        case "bottom":
-          return {
-            position: "fixed",
-            bottom: "24px",
-            left: "50%",
-            transform: "translateX(-50%)",
-            zIndex: 1e3
-          };
-        case "top":
-          return {
-            position: "fixed",
-            top: "24px",
-            left: "50%",
-            transform: "translateX(-50%)",
-            zIndex: 1e3
-          };
-        case "static":
-          return {
-            position: "relative"
-          };
-        case "custom":
-        default:
-          return {};
-      }
-    };
-    const containerStyles = {
-      ...getPositionStyles(),
-      display: "inline-flex",
-      alignItems: "center",
-      gap: formatPx(groupGap),
-      maxWidth: "calc(100vw - 32px)",
-      overflowX: "auto",
-      overflowY: "hidden",
-      padding: "4px",
-      boxSizing: "border-box",
-      scrollbarWidth: "none",
-      // Firefox
-      msOverflowStyle: "none",
-      // IE/Edge
-      WebkitOverflowScrolling: "touch",
-      pointerEvents: "auto",
-      ...style
-    };
-    const combinedClassName = [
-      "bubble-toolbar",
-      `bubble-toolbar--${position}`,
-      `bubble-toolbar--${theme}`,
-      className
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BubbleToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "div",
-      {
-        ref,
-        role: "toolbar",
-        "aria-label": ariaLabel,
-        className: combinedClassName,
-        style: containerStyles,
-        ...rest,
-        children: [
-          groups && groups.length > 0 ? groups.map((groupItems, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BubbleGroup, { children: groupItems }, index)) : null,
-          children
-        ]
-      }
-    ) });
-  }
-);
-BubbleToolbar.displayName = "BubbleToolbar";
-BubbleToolbar.Group = BubbleGroup;
+var import_react13 = require("react");
+
+// src/live/BubbleLiveActivity.tsx
+var import_react7 = require("react");
 
 // src/components/BubbleIconButton.tsx
 var import_react5 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ICONS = {
-  search: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
-  ] }),
-  theme: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
-  ] }),
-  chat: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
-  notifications: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
-  ] }),
-  logo: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "2 17 12 22 22 17" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "2 12 12 17 22 12" })
-  ] }),
-  close: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-  ] })
+  search: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  ),
+  theme: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+      ]
+    }
+  ),
+  chat: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  ),
+  notifications: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+      ]
+    }
+  ),
+  logo: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "2 17 12 22 22 17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "2 12 12 17 22 12" })
+      ]
+    }
+  ),
+  close: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  )
 };
 var BubbleIconButton = (0, import_react5.forwardRef)(
   ({
@@ -379,12 +409,11 @@ var BubbleIconButton = (0, import_react5.forwardRef)(
       height: "36px",
       borderRadius: "50%",
       border: "none",
-      background: active ? "rgba(0, 0, 0, 0.08)" : isHovered ? "rgba(0, 0, 0, 0.05)" : "transparent",
+      background: active ? "var(--bubble-button-active-bg, rgba(0, 0, 0, 0.08))" : isHovered ? "var(--bubble-button-hover-bg, rgba(0, 0, 0, 0.05))" : "transparent",
       color: "inherit",
       cursor: "pointer",
       padding: 0,
       margin: 0,
-      outline: "none",
       transition: "background-color 0.15s ease, transform 0.15s ease",
       transform: isHovered ? "scale(1.06)" : "scale(1)",
       flexShrink: 0,
@@ -408,7 +437,7 @@ var BubbleIconButton = (0, import_react5.forwardRef)(
       justifyContent: "center",
       boxShadow: "0 0 0 1.5px rgba(255, 255, 255, 0.9)"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
         ref,
@@ -428,7 +457,7 @@ var BubbleIconButton = (0, import_react5.forwardRef)(
         ...rest,
         children: [
           iconContent,
-          badge ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "bubble-icon-button__badge", style: badgeStyles, children: typeof badge !== "boolean" ? badge : null }) : null
+          badge ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "bubble-icon-button__badge", style: badgeStyles, children: typeof badge !== "boolean" ? badge : null }) : null
         ]
       }
     );
@@ -436,18 +465,534 @@ var BubbleIconButton = (0, import_react5.forwardRef)(
 );
 BubbleIconButton.displayName = "BubbleIconButton";
 
-// src/components/BubbleArea.tsx
+// src/utils/tokens.ts
+var createTokenStyle = (map) => (tokens) => {
+  const style = {};
+  if (!tokens) {
+    return style;
+  }
+  for (const [key, value] of Object.entries(tokens)) {
+    if (!Object.hasOwn(map, key) || value === void 0 || value === null) {
+      continue;
+    }
+    const [name, unit] = map[key];
+    style[name] = typeof value === "number" && unit ? `${value}${unit}` : String(value);
+  }
+  return style;
+};
+
+// src/live/useBubbleLiveActivity.ts
 var import_react6 = require("react");
+
+// src/live/controller.ts
+var IDLE = {
+  state: "idle",
+  id: 0,
+  outcome: "neutral",
+  duration: 0,
+  paused: false,
+  queued: 0
+};
+var isDevelopment = () => globalThis.process?.env?.NODE_ENV !== "production";
+var createLiveController = (initialOptions = {}) => {
+  const listeners = /* @__PURE__ */ new Set();
+  const queue = [];
+  let snapshot = IDLE;
+  let current = null;
+  let connections = 0;
+  let warned = false;
+  let compactSince = 0;
+  let expandTimer;
+  let closeTimer;
+  let remaining = 0;
+  let closeStartedAt = 0;
+  const update = (next2) => {
+    snapshot = { ...snapshot, ...next2, queued: queue.length };
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const clearTimers = () => {
+    clearTimeout(expandTimer);
+    clearTimeout(closeTimer);
+    expandTimer = void 0;
+    closeTimer = void 0;
+  };
+  const startCloseTimer = (ms) => {
+    remaining = ms;
+    closeStartedAt = Date.now();
+    closeTimer = setTimeout(controller.dismiss, ms);
+  };
+  const expand = (job) => {
+    const { settled, options } = job;
+    let { content } = job;
+    let outcome = "neutral";
+    if (settled?.ok && !job.content) {
+      outcome = "success";
+      content = options.success?.(settled.value);
+    } else if (settled && !settled.ok) {
+      outcome = "error";
+      content = options.error?.(settled.error);
+    }
+    const duration = Math.max(0, options.duration ?? controller.options.duration ?? 4e3);
+    update({ state: "expanded", content, outcome, duration, paused: false });
+    if (duration > 0) {
+      startCloseTimer(duration);
+    }
+  };
+  const next = () => {
+    clearTimers();
+    current = queue.shift() ?? null;
+    if (!current) {
+      update({ ...IDLE, id: snapshot.id });
+      return;
+    }
+    if (current.settled) {
+      update({ id: snapshot.id + 1 });
+      expand(current);
+      return;
+    }
+    compactSince = Date.now();
+    update({
+      state: "compact",
+      id: snapshot.id + 1,
+      content: current.options.pending,
+      outcome: "pending",
+      duration: 0,
+      paused: false
+    });
+  };
+  const enqueue = (job) => {
+    queue.push(job);
+    if (!current) {
+      next();
+    } else {
+      update({});
+    }
+  };
+  const onSettled = (job) => {
+    if (job !== current || snapshot.state !== "compact") {
+      return;
+    }
+    const minPending = controller.options.minPendingMs ?? 600;
+    const wait = Math.max(0, minPending - (Date.now() - compactSince));
+    expandTimer = setTimeout(() => expand(job), wait);
+  };
+  const controller = {
+    options: initialOptions,
+    run(task, options = {}) {
+      if (connections === 0 && !warned && isDevelopment()) {
+        warned = true;
+        console.warn(
+          "useBubbleLiveActivity: the controller is not passed to any <BubbleToolbar liveActivity>; activities will not be shown."
+        );
+      }
+      let promise;
+      try {
+        promise = Promise.resolve(task());
+      } catch (error) {
+        promise = Promise.reject(error);
+      }
+      const job = { options, settled: null };
+      void (async () => {
+        try {
+          job.settled = { ok: true, value: await promise };
+        } catch (error) {
+          job.settled = { ok: false, error };
+        }
+        onSettled(job);
+      })();
+      enqueue(job);
+      return promise;
+    },
+    show(content, options = {}) {
+      enqueue({ options, settled: { ok: true, value: void 0 }, content });
+    },
+    dismiss() {
+      if (current) {
+        next();
+      }
+    },
+    get state() {
+      return snapshot.state;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => snapshot,
+    connect() {
+      connections += 1;
+      return () => {
+        connections -= 1;
+      };
+    },
+    pause() {
+      if (snapshot.state !== "expanded" || snapshot.paused || !closeTimer) {
+        return;
+      }
+      clearTimeout(closeTimer);
+      closeTimer = void 0;
+      remaining = Math.max(0, remaining - (Date.now() - closeStartedAt));
+      update({ paused: true });
+    },
+    resume() {
+      if (snapshot.state !== "expanded" || !snapshot.paused) {
+        return;
+      }
+      update({ paused: false });
+      startCloseTimer(remaining);
+    }
+  };
+  return controller;
+};
+
+// src/live/useBubbleLiveActivity.ts
+var useBubbleLiveActivity = (options = {}) => {
+  const [controller] = (0, import_react6.useState)(() => createLiveController(options));
+  controller.options = options;
+  return controller;
+};
+var useBubbleToolbarLiveActivity = () => {
+  const controller = (0, import_react6.useContext)(BubbleToolbarContext).liveActivity;
+  if (!controller) {
+    throw new Error(
+      "useBubbleToolbarLiveActivity must be used inside a <BubbleToolbar liveActivity={\u2026}>."
+    );
+  }
+  return controller;
+};
+var asInternals = (controller) => controller;
+
+// src/live/BubbleLiveActivity.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LIVE_TOKENS = {
+  compactWidth: ["--bubble-live-compact-width", "px"],
+  width: ["--bubble-live-width", "px"],
+  radius: ["--bubble-live-radius", "px"],
+  progressColor: ["--bubble-live-progress-color", ""],
+  successColor: ["--bubble-live-success-color", ""],
+  errorColor: ["--bubble-live-error-color", ""],
+  titleSize: ["--bubble-live-title-size", "px"],
+  metaSize: ["--bubble-live-meta-size", "px"],
+  duration: ["--bubble-live-duration", "ms"]
+};
+var liveTokensToStyle = createTokenStyle(LIVE_TOKENS);
+var defaultLiveLabels = {
+  pending: "Working\u2026",
+  success: "Done",
+  error: "Something went wrong",
+  close: "Dismiss",
+  group: "Live activity"
+};
+var LEAVE_FALLBACK_MS = 650;
+var MORPH = "clamp(0ms, var(--bubble-live-duration, 320ms), 600ms) cubic-bezier(0.16, 1, 0.3, 1)";
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var svg = (children, className) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    focusable: "false",
+    className,
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children
+  }
+);
+var ICONS2 = {
+  pending: svg(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }), "bubble-live__spinner"),
+  success: svg(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "20 6 9 17 4 12" })),
+  error: svg(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+    ] })
+  ),
+  neutral: null
+};
+var prefersReducedMotion = () => typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+var LiveSlot = ({ controller, toolbarRef, children }) => {
+  const live = asInternals(controller);
+  const context = useBubbleToolbar();
+  const snapshot = (0, import_react7.useSyncExternalStore)(live.subscribe, live.getSnapshot, live.getSnapshot);
+  const [visual, setVisual] = (0, import_react7.useState)("idle");
+  const fromWidth = (0, import_react7.useRef)(0);
+  const savedFocus = (0, import_react7.useRef)(null);
+  const groupsRef = (0, import_react7.useRef)(null);
+  const liveRef = (0, import_react7.useRef)(null);
+  const interaction = (0, import_react7.useRef)({ hover: false, focus: false });
+  const active = snapshot.state !== "idle";
+  const labels = { ...defaultLiveLabels, ...live.options.labels };
+  (0, import_react7.useEffect)(() => live.connect(), [live]);
+  (0, import_react7.useLayoutEffect)(() => {
+    if (active && (visual === "idle" || visual === "leave")) {
+      if (visual === "idle") {
+        const toolbar = toolbarRef.current;
+        fromWidth.current = toolbar ? Math.max(0, toolbar.getBoundingClientRect().width - 8) : 0;
+        const focused = document.activeElement;
+        savedFocus.current = focused instanceof HTMLElement && groupsRef.current?.contains(focused) ? focused : null;
+      }
+      setVisual(prefersReducedMotion() || !fromWidth.current ? "live" : "enter");
+    } else if (!active && (visual === "enter" || visual === "live")) {
+      setVisual(prefersReducedMotion() || !fromWidth.current ? "idle" : "leave");
+    }
+  }, [active, visual, toolbarRef]);
+  (0, import_react7.useLayoutEffect)(() => {
+    if (groupsRef.current) {
+      groupsRef.current.inert = visual !== "idle";
+    }
+  }, [visual]);
+  (0, import_react7.useEffect)(() => {
+    if (visual !== "enter") {
+      return;
+    }
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setVisual("live"));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [visual]);
+  (0, import_react7.useEffect)(() => {
+    if (visual !== "leave") {
+      return;
+    }
+    const timer = setTimeout(() => setVisual("idle"), LEAVE_FALLBACK_MS);
+    return () => clearTimeout(timer);
+  }, [visual]);
+  (0, import_react7.useEffect)(() => {
+    if (visual === "idle") {
+      interaction.current = { hover: false, focus: false };
+      if (savedFocus.current?.isConnected) {
+        savedFocus.current.focus();
+      }
+      savedFocus.current = null;
+    } else if (savedFocus.current && !liveRef.current?.contains(document.activeElement)) {
+      liveRef.current?.focus();
+    }
+  }, [visual]);
+  const syncPause = () => {
+    const { hover, focus } = interaction.current;
+    if (hover || focus) {
+      live.pause();
+    } else {
+      live.resume();
+    }
+  };
+  const size = resolveSize(context.size);
+  const expanded = snapshot.state === "expanded" && visual === "live";
+  const { outcome } = snapshot;
+  const tone = snapshot.content?.tone ?? (outcome === "pending" ? "neutral" : outcome);
+  const title = snapshot.content?.title ?? (outcome === "pending" ? labels.pending : outcome === "error" ? labels.error : outcome === "success" ? labels.success : "");
+  const description = snapshot.content?.description;
+  const icon = snapshot.content?.icon ?? ICONS2[outcome === "pending" ? "pending" : tone];
+  const announcement = active ? [title, expanded ? description : ""].filter(Boolean).join(". ") : "";
+  const width = visual === "enter" || visual === "leave" ? `${fromWidth.current}px` : snapshot.state === "expanded" ? "min(var(--bubble-live-width, 360px), calc(100vw - 32px))" : "min(var(--bubble-live-compact-width, 200px), calc(100vw - 32px))";
+  const groupStyle = {
+    ...liveTokensToStyle(live.options.tokens),
+    width,
+    minWidth: `${size}px`,
+    height: snapshot.state === "expanded" ? "auto" : `${size}px`,
+    minHeight: `${size}px`,
+    padding: 0,
+    gap: 0,
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: snapshot.state === "expanded" ? "var(--bubble-live-radius, 24px)" : "9999px",
+    transition: `width ${MORPH}, border-radius ${MORPH}`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: groupsRef, style: { display: visual === "idle" ? "contents" : "none" }, children }),
+    visual === "idle" ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      BubbleGroup,
+      {
+        ref: liveRef,
+        className: "bubble-live",
+        shape: "pill",
+        busy: snapshot.state === "compact",
+        "aria-label": labels.group,
+        "data-state": visual === "leave" ? "leaving" : snapshot.state,
+        "data-tone": tone,
+        tabIndex: -1,
+        style: groupStyle,
+        onTransitionEnd: (event) => {
+          if (visual === "leave" && event.target === liveRef.current && event.propertyName === "width") {
+            setVisual("idle");
+          }
+        },
+        onMouseEnter: () => {
+          interaction.current.hover = true;
+          syncPause();
+        },
+        onMouseLeave: () => {
+          interaction.current.hover = false;
+          syncPause();
+        },
+        onFocus: () => {
+          interaction.current.focus = true;
+          syncPause();
+        },
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            interaction.current.focus = false;
+            syncPause();
+          }
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape" && snapshot.state === "expanded") {
+            event.preventDefault();
+            live.dismiss();
+          }
+        },
+        children: [
+          active ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: "bubble-live__body",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                minWidth: 0,
+                minHeight: `${size - (context.bordered ? 2 : 0)}px`,
+                padding: expanded ? "10px 6px 10px 14px" : "0 14px",
+                boxSizing: "border-box"
+              },
+              children: [
+                icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    className: "bubble-live__icon",
+                    "aria-hidden": "true",
+                    style: {
+                      display: "inline-flex",
+                      flexShrink: 0,
+                      color: tone === "success" ? "var(--bubble-live-success-color, #22c55e)" : tone === "error" ? "var(--bubble-live-error-color, #ef4444)" : "inherit"
+                    },
+                    children: icon
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "span",
+                  {
+                    className: "bubble-live__text",
+                    style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minWidth: 0 },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          className: "bubble-live__title",
+                          style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            fontSize: "clamp(11px, var(--bubble-live-title-size, 13px), 18px)",
+                            fontWeight: 600
+                          },
+                          children: title
+                        }
+                      ),
+                      expanded && description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          className: "bubble-live__description",
+                          style: {
+                            fontSize: "clamp(9px, var(--bubble-live-meta-size, 11px), 14px)",
+                            lineHeight: 1.4,
+                            opacity: 0.75,
+                            overflowWrap: "anywhere"
+                          },
+                          children: description
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                snapshot.state === "compact" && snapshot.queued > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "span",
+                  {
+                    className: "bubble-live__queued",
+                    style: { flexShrink: 0, fontSize: 11, opacity: 0.7 },
+                    children: [
+                      "+",
+                      snapshot.queued
+                    ]
+                  }
+                ) : null,
+                expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BubbleIconButton, { name: "close", ariaLabel: labels.close, onClick: live.dismiss }) : null
+              ]
+            },
+            snapshot.id
+          ) : null,
+          expanded && snapshot.duration > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: "bubble-live__progress",
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: 2,
+                animationDuration: `${snapshot.duration}ms`,
+                animationPlayState: snapshot.paused ? "paused" : "running"
+              }
+            },
+            `progress-${snapshot.id}`
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        role: "status",
+        "aria-live": "polite",
+        className: "bubble-live__announcer",
+        style: VISUALLY_HIDDEN,
+        children: tone === "error" ? "" : announcement
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "alert", className: "bubble-live__announcer", style: VISUALLY_HIDDEN, children: tone === "error" ? announcement : "" })
+  ] });
+};
+
+// src/search/BubbleBreadcrumbSearch.tsx
+var import_react11 = require("react");
+
+// src/search/SearchBase.tsx
+var import_react10 = require("react");
+
+// src/components/BubbleArea.tsx
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var BubbleArea = (0, import_react6.forwardRef)(
-  ({
-    children,
-    minWidth = 120,
-    maxWidth,
-    className = "",
-    style,
-    ...rest
-  }, ref) => {
+var BubbleArea = (0, import_react8.forwardRef)(
+  ({ children, minWidth = 120, maxWidth, className = "", style, ...rest }, ref) => {
     const areaStyles = {
       display: "inline-flex",
       alignItems: "center",
@@ -458,30 +1003,636 @@ var BubbleArea = (0, import_react6.forwardRef)(
       color: "inherit",
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: `bubble-area ${className}`.trim(), style: areaStyles, ...rest, children });
+  }
+);
+BubbleArea.displayName = "BubbleArea";
+
+// src/search/tokens.ts
+var TOKENS = {
+  width: ["--bubble-search-width", "px"],
+  radius: ["--bubble-search-radius", "px"],
+  divider: ["--bubble-search-divider", ""],
+  focusRing: ["--bubble-search-focus-ring", ""],
+  optionActiveBg: ["--bubble-search-option-active-bg", ""],
+  optionRadius: ["--bubble-search-option-radius", "px"],
+  titleSize: ["--bubble-search-title-size", "px"],
+  titleWeight: ["--bubble-search-title-weight", ""],
+  metaSize: ["--bubble-search-meta-size", "px"],
+  mutedOpacity: ["--bubble-search-muted-opacity", ""],
+  resultsMaxHeight: ["--bubble-search-results-max-height", "px"],
+  panelPadding: ["--bubble-search-panel-padding", "px"],
+  duration: ["--bubble-search-duration", "ms"],
+  easing: ["--bubble-search-easing", ""],
+  breadcrumbSize: ["--bubble-breadcrumb-size", "px"],
+  breadcrumbSeparatorColor: ["--bubble-breadcrumb-separator-color", ""],
+  breadcrumbCurrentWeight: ["--bubble-breadcrumb-current-weight", ""],
+  breadcrumbMutedOpacity: ["--bubble-breadcrumb-muted-opacity", ""]
+};
+var tokensToStyle = createTokenStyle(TOKENS);
+
+// src/search/useBubbleSearch.ts
+var import_react9 = require("react");
+var normalizeQuery = (query) => query.trim().toLowerCase();
+var useLatest = (value) => {
+  const ref = (0, import_react9.useRef)(value);
+  ref.current = value;
+  return ref;
+};
+function useBubbleSearch({
+  open,
+  setOpen,
+  groupRef,
+  onSearch,
+  onSelect,
+  onError,
+  suggestions = [],
+  debounceMs
+}) {
+  const { run } = useBubbleActivity();
+  const [query, setQuery] = (0, import_react9.useState)("");
+  const [result, setResult] = (0, import_react9.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(-1);
+  const inputRef = (0, import_react9.useRef)(null);
+  const buttonRef = (0, import_react9.useRef)(null);
+  const listId = (0, import_react9.useId)();
+  const hintId = (0, import_react9.useId)();
+  const onSearchRef = useLatest(onSearch);
+  const onSelectRef = useLatest(onSelect);
+  const onErrorRef = useLatest(onError);
+  const normalizedQuery = normalizeQuery(query);
+  const pending = Boolean(normalizedQuery && result?.query !== normalizedQuery);
+  const noResults = Boolean(normalizedQuery && !pending && result?.items.length === 0);
+  const options = pending ? [] : normalizedQuery && !noResults ? result?.items ?? [] : suggestions;
+  const optionId = (index) => `${listId}-option-${index}`;
+  const close = (0, import_react9.useCallback)(
+    (restoreFocus = false) => {
+      setOpen(false);
+      if (restoreFocus) {
+        buttonRef.current?.focus();
+      }
+    },
+    [setOpen]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (open) {
+      inputRef.current?.focus();
+    } else {
+      setQuery("");
+      setResult(null);
+      setActiveIndex(-1);
+    }
+  }, [open]);
+  (0, import_react9.useEffect)(() => {
+    if (!open) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      if (event.target instanceof Node && !groupRef.current?.contains(event.target)) {
+        close();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open, close, groupRef]);
+  (0, import_react9.useEffect)(() => {
+    if (!open || !normalizedQuery) {
+      return;
+    }
+    const controller = new AbortController();
+    const search = async () => {
+      try {
+        const items = await run(() => onSearchRef.current(normalizedQuery, controller.signal));
+        if (!controller.signal.aborted) {
+          setResult({ query: normalizedQuery, items });
+        }
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          onErrorRef.current?.(error);
+          setResult({ query: normalizedQuery, items: [] });
+        }
+      }
+    };
+    if (debounceMs > 0) {
+      const timer = setTimeout(() => void search(), debounceMs);
+      return () => {
+        clearTimeout(timer);
+        controller.abort();
+      };
+    }
+    void search();
+    return () => controller.abort();
+  }, [open, normalizedQuery, run, debounceMs, onSearchRef, onErrorRef]);
+  (0, import_react9.useEffect)(() => {
+    if (activeIndex >= 0) {
+      document.getElementById(listId)?.children[activeIndex]?.scrollIntoView?.({ block: "nearest" });
+    }
+  }, [activeIndex, listId]);
+  const select = (item) => {
+    onSelectRef.current(item);
+    close(true);
+  };
+  const changeQuery = (value) => {
+    setQuery(value);
+    if (normalizeQuery(value) !== normalizedQuery) {
+      setResult(null);
+    }
+    setActiveIndex(-1);
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && options.length) {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex(
+        (index) => index < 0 ? direction === 1 ? 0 : options.length - 1 : (index + direction + options.length) % options.length
+      );
+    } else if (event.key === "Enter" && options[activeIndex]) {
+      event.preventDefault();
+      select(options[activeIndex]);
+    }
+  };
+  return {
+    query,
+    changeQuery,
+    normalizedQuery,
+    pending,
+    noResults,
+    options,
+    activeIndex,
+    setActiveIndex,
+    activeDescendant: activeIndex >= 0 && options[activeIndex] ? optionId(activeIndex) : void 0,
+    optionId,
+    listId,
+    hintId,
+    inputRef,
+    buttonRef,
+    close,
+    select,
+    handleInputKeyDown
+  };
+}
+
+// src/search/SearchBase.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultSearchLabels = {
+  group: "Search",
+  button: "Search",
+  input: "Search",
+  listbox: "Results",
+  placeholder: "Search\u2026",
+  searching: "Searching\u2026",
+  noResults: "No results. Try another term or explore a suggestion.",
+  suggestions: "Suggestions",
+  results: (count) => `${count} ${count === 1 ? "result" : "results"}`,
+  hint: "\u2191 \u2193 to explore \xB7 Enter to select \xB7 Esc to close"
+};
+var mergeRefs = (...refs) => (value) => {
+  for (const ref of refs) {
+    if (typeof ref === "function") {
+      ref(value);
+    } else if (ref) {
+      ref.current = value;
+    }
+  }
+};
+var SearchBody = ({
+  open,
+  setOpen,
+  groupRef,
+  headerHeight,
+  upward,
+  labels,
+  idleContent,
+  onSearch,
+  onSelect,
+  onError,
+  suggestions,
+  debounceMs = 0
+}) => {
+  const search = useBubbleSearch({
+    open,
+    setOpen,
+    groupRef,
+    onSearch,
+    onSelect,
+    onError,
+    suggestions,
+    debounceMs
+  });
+  const { options, activeIndex, listId, hintId } = search;
+  const compact = !open && idleContent === void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: "bubble-search__body",
+      "data-placement": upward ? "top" : "bottom",
+      style: { display: "flex", flexDirection: upward ? "column-reverse" : "column", minWidth: 0 },
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          search.close();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: "bubble-search__header",
+            "data-compact": compact,
+            style: { height: `${headerHeight}px` },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                BubbleIconButton,
+                {
+                  ref: search.buttonRef,
+                  name: "search",
+                  ariaLabel: labels.button,
+                  "aria-expanded": open,
+                  "aria-controls": open ? listId : void 0,
+                  active: open,
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape" && open) {
+                      event.preventDefault();
+                      search.close(true);
+                    }
+                  },
+                  onClick: () => {
+                    if (!open) {
+                      setOpen(true);
+                    } else {
+                      search.inputRef.current?.focus();
+                    }
+                  }
+                }
+              ),
+              compact ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BubbleArea, { minWidth: 0, className: "bubble-search__area", children: open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  ref: search.inputRef,
+                  className: "bubble-search__input",
+                  type: "text",
+                  role: "combobox",
+                  "aria-label": labels.input,
+                  "aria-autocomplete": "list",
+                  "aria-expanded": open,
+                  "aria-controls": listId,
+                  "aria-describedby": hintId,
+                  "aria-activedescendant": search.activeDescendant,
+                  autoComplete: "off",
+                  placeholder: labels.placeholder,
+                  value: search.query,
+                  onChange: (event) => search.changeQuery(event.target.value),
+                  onKeyDown: search.handleInputKeyDown
+                }
+              ) : idleContent })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: "bubble-search__expansion",
+            "data-open": open,
+            "aria-hidden": !open,
+            style: {
+              display: "grid",
+              gridTemplateRows: open ? "1fr" : "0fr",
+              visibility: open ? "visible" : "hidden",
+              opacity: open ? 1 : 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: "bubble-search__expansion-inner",
+                style: { minHeight: 0, overflow: "hidden" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bubble-search__panel", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bubble-search__status", role: "status", "aria-live": "polite", children: search.pending ? labels.searching : search.noResults ? labels.noResults : search.normalizedQuery ? labels.results(options.length) : labels.suggestions }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "div",
+                    {
+                      id: listId,
+                      role: "listbox",
+                      "aria-label": labels.listbox,
+                      className: "bubble-search__results",
+                      children: options.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                        "div",
+                        {
+                          id: search.optionId(index),
+                          role: "option",
+                          tabIndex: -1,
+                          "aria-selected": activeIndex === index,
+                          className: "bubble-search__option",
+                          onPointerDown: (event) => event.preventDefault(),
+                          onMouseMove: () => search.setActiveIndex(index),
+                          onClick: () => search.select(item),
+                          onKeyDown: (event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              search.select(item);
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "bubble-search__option-title", children: item.title }),
+                            item.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "bubble-search__option-description", children: item.description }) : null
+                          ]
+                        },
+                        item.id
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: hintId, className: "bubble-search__hint", children: labels.hint })
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var SearchBase = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  tokens,
+  className = "",
+  forwardedRef,
+  ...bodyProps
+}) => {
+  const context = useBubbleToolbar();
+  const groupRef = (0, import_react10.useRef)(null);
+  const [innerOpen, setInnerOpen] = (0, import_react10.useState)(defaultOpen);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : innerOpen;
+  const onOpenChangeRef = (0, import_react10.useRef)(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const setOpen = (0, import_react10.useCallback)(
+    (next) => {
+      if (!controlled) {
+        setInnerOpen(next);
+      }
+      onOpenChangeRef.current?.(next);
+    },
+    [controlled]
+  );
+  const ref = (0, import_react10.useMemo)(() => mergeRefs(groupRef, forwardedRef), [forwardedRef]);
+  const size = resolveSize(context.size);
+  const compact = !open && bodyProps.idleContent === void 0;
+  const style = {
+    ...tokensToStyle(tokens),
+    height: "auto",
+    width: compact ? `${size}px` : "min(var(--bubble-search-width, 360px), calc(100vw - 96px))",
+    minWidth: 0,
+    padding: 0,
+    gap: 0,
+    flexDirection: "column",
+    alignItems: "stretch",
+    borderRadius: "var(--bubble-search-radius, 24px)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    BubbleGroup,
+    {
+      ref,
+      "aria-label": bodyProps.labels.group,
+      shape: "pill",
+      className: `bubble-search ${className}`.trim(),
+      "data-expanded": open,
+      "data-compact": compact,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SearchBody,
+        {
+          ...bodyProps,
+          open,
+          setOpen,
+          groupRef,
+          headerHeight: size - (context.bordered ? 2 : 0),
+          upward: context.position === "bottom"
+        }
+      )
+    }
+  );
+};
+
+// src/search/BubbleBreadcrumbSearch.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BreadcrumbLevel = ({ item, current }) => item.href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: item.href, "aria-current": current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-current": current ? "page" : void 0, children: item.label });
+var Breadcrumb = ({
+  items,
+  separator,
+  label
+}) => {
+  const parents = items.slice(0, -1);
+  const current = items[items.length - 1];
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "bubble-breadcrumb__separator", "aria-hidden": "true", children: ` ${separator} ` });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "nav",
+    {
+      "aria-label": label,
+      className: "bubble-breadcrumb",
+      title: items.map((item) => item.label).join(` ${separator} `),
+      children: [
+        parents.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "bubble-breadcrumb__parents", children: parents.map((item, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: Breadcrumb levels are identified by position.
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BreadcrumbLevel, { item, current: false }),
+              index < parents.length - 1 ? divider : null
+            ] }, index)
+          )) }),
+          divider
+        ] }) : null,
+        current ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "bubble-breadcrumb__current", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BreadcrumbLevel, { item: current, current: true }) }) : null
+      ]
+    }
+  );
+};
+var BubbleBreadcrumbSearchInner = (0, import_react11.forwardRef)(
+  ({ items, separator = "/", labels, ...props }, ref) => {
+    const { location = "Breadcrumb", ...searchLabels } = labels ?? {};
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      SearchBase,
+      {
+        ...props,
+        labels: { ...defaultSearchLabels, ...searchLabels },
+        idleContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Breadcrumb, { items, separator, label: location }),
+        forwardedRef: ref
+      }
+    );
+  }
+);
+BubbleBreadcrumbSearchInner.displayName = "BubbleBreadcrumbSearch";
+var BubbleBreadcrumbSearch = BubbleBreadcrumbSearchInner;
+
+// src/search/BubbleSearch.tsx
+var import_react12 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BubbleSearchInner = (0, import_react12.forwardRef)(
+  ({ labels, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBase, { ...props, labels: { ...defaultSearchLabels, ...labels }, forwardedRef: ref })
+);
+BubbleSearchInner.displayName = "BubbleSearch";
+var BubbleSearch = BubbleSearchInner;
+
+// src/BubbleToolbar.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BubbleToolbar = (0, import_react13.forwardRef)(
+  ({
+    groups,
+    children,
+    position = "bottom",
+    theme = "glass",
+    size = "md",
+    blurred = true,
+    blurAmount = 16,
+    groupGap = 8,
+    itemGap = 8,
+    bordered = true,
+    shadow = true,
+    busy = false,
+    activityColors,
+    activityDuration,
+    className = "",
+    style,
+    ariaLabel = "Toolbar",
+    liveActivity,
+    ...rest
+  }, ref) => {
+    const contextValue = (0, import_react13.useMemo)(
+      () => ({
+        size,
+        theme,
+        blurred,
+        blurAmount,
+        itemGap,
+        bordered,
+        shadow,
+        position,
+        liveActivity,
+        busy,
+        activityColors,
+        activityDuration
+      }),
+      [
+        size,
+        theme,
+        blurred,
+        blurAmount,
+        itemGap,
+        bordered,
+        shadow,
+        position,
+        liveActivity,
+        busy,
+        activityColors,
+        activityDuration
+      ]
+    );
+    const toolbarRef = (0, import_react13.useRef)(null);
+    const setRef = (0, import_react13.useCallback)(
+      (node) => {
+        toolbarRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const getPositionStyles = () => {
+      switch (position) {
+        case "bottom":
+          return {
+            position: "fixed",
+            bottom: "24px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 1e3
+          };
+        case "top":
+          return {
+            position: "fixed",
+            top: "24px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 1e3
+          };
+        case "static":
+          return {
+            position: "relative"
+          };
+        default:
+          return {};
+      }
+    };
+    const containerStyles = {
+      ...getPositionStyles(),
+      display: "inline-flex",
+      alignItems: "center",
+      gap: formatPx(groupGap),
+      maxWidth: "calc(100vw - 32px)",
+      overflowX: "auto",
+      overflowY: "hidden",
+      padding: "4px",
+      boxSizing: "border-box",
+      scrollbarWidth: "none",
+      // Firefox
+      msOverflowStyle: "none",
+      // IE/Edge
+      WebkitOverflowScrolling: "touch",
+      pointerEvents: "auto",
+      ...style
+    };
+    const combinedClassName = [
+      "bubble-toolbar",
+      `bubble-toolbar--${position}`,
+      `bubble-toolbar--${theme}`,
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      groups && groups.length > 0 ? groups.map((groupItems, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: The groups array API identifies groups by position; use compound children for keyed groups.
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BubbleGroup, { children: groupItems }, index)
+      )) : null,
+      children
+    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BubbleToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
-        ref,
-        className: `bubble-area ${className}`.trim(),
-        style: areaStyles,
+        ref: setRef,
+        role: "toolbar",
+        "aria-label": ariaLabel,
+        className: combinedClassName,
+        style: containerStyles,
         ...rest,
-        children
+        children: liveActivity ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveSlot, { controller: liveActivity, toolbarRef, children: content }) : content
       }
-    );
+    ) });
   }
 );
-BubbleArea.displayName = "BubbleArea";
+BubbleToolbar.displayName = "BubbleToolbar";
+BubbleToolbar.Group = BubbleGroup;
+BubbleToolbar.Search = BubbleSearch;
+BubbleToolbar.BreadcrumbSearch = BubbleBreadcrumbSearch;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BubbleArea,
+  BubbleBreadcrumbSearch,
   BubbleGroup,
   BubbleIconButton,
+  BubbleSearch,
   BubbleToolbar,
   BubbleToolbarContext,
   formatPx,
   getGlassStyles,
   getValidChildren,
   resolveSize,
-  useBubbleToolbar
+  useBubbleActivity,
+  useBubbleLiveActivity,
+  useBubbleToolbar,
+  useBubbleToolbarLiveActivity
 });
 //# sourceMappingURL=index.js.map