framepexls-ui-lib 2.2.0 → 2.2.2

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/QuickActionsDock.d.mts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type QuickActionsDockDisplay = "icon" | "label" | "description";
+type QuickActionItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
+    accent?: string;
+    disabled?: boolean;
+    display?: QuickActionsDockDisplay;
+    onSelect: () => void;
+};
+type QuickActionsDockProps = {
+    items: QuickActionItem[];
+    loading?: boolean;
+    display?: QuickActionsDockDisplay;
+    sticky?: boolean;
+    stickyClassName?: string;
+    stickyReserveClassName?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+declare function QuickActionsDock({ items, loading, display, sticky, stickyClassName, stickyReserveClassName, ariaLabel, className, }: QuickActionsDockProps): React__default.JSX.Element | null;
+
+export { type QuickActionItem, type QuickActionsDockDisplay, type QuickActionsDockProps, QuickActionsDock as default };

package/dist/QuickActionsDock.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type QuickActionsDockDisplay = "icon" | "label" | "description";
+type QuickActionItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
+    accent?: string;
+    disabled?: boolean;
+    display?: QuickActionsDockDisplay;
+    onSelect: () => void;
+};
+type QuickActionsDockProps = {
+    items: QuickActionItem[];
+    loading?: boolean;
+    display?: QuickActionsDockDisplay;
+    sticky?: boolean;
+    stickyClassName?: string;
+    stickyReserveClassName?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+declare function QuickActionsDock({ items, loading, display, sticky, stickyClassName, stickyReserveClassName, ariaLabel, className, }: QuickActionsDockProps): React__default.JSX.Element | null;
+
+export { type QuickActionItem, type QuickActionsDockDisplay, type QuickActionsDockProps, QuickActionsDock as default };

package/dist/QuickActionsDock.js

@@ -0,0 +1,99 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var QuickActionsDock_exports = {};
+__export(QuickActionsDock_exports, {
+  default: () => QuickActionsDock
+});
+module.exports = __toCommonJS(QuickActionsDock_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function itemSize(display) {
+  if (display === "icon") return "h-14 w-14 justify-center p-0";
+  if (display === "label") return "min-h-[72px] w-[11.5rem] p-3";
+  return "min-h-[96px] w-[17rem] p-3";
+}
+function QuickActionsDock({
+  items,
+  loading = false,
+  display = "description",
+  sticky = false,
+  stickyClassName = "lg:sticky lg:top-4",
+  stickyReserveClassName = "",
+  ariaLabel = "Acciones r\xE1pidas",
+  className
+}) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      "aria-label": ariaLabel,
+      className: cx("relative z-20", sticky && stickyClassName, sticky && stickyReserveClassName, className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] p-2 shadow-[0_20px_54px_rgba(15,23,42,0.10)] backdrop-blur-xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto overscroll-x-contain [scrollbar-width:thin]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex w-max min-w-full gap-2", children: items.map((item) => {
+        var _a, _b;
+        const Icon = item.icon;
+        const accent = (_a = item.accent) != null ? _a : "var(--primary)";
+        const resolvedDisplay = (_b = item.display) != null ? _b : display;
+        const showLabel = resolvedDisplay !== "icon";
+        const showDescription = resolvedDisplay === "description" && Boolean(item.description);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            title: resolvedDisplay === "icon" ? item.label : void 0,
+            "aria-label": item.label,
+            disabled: loading || item.disabled,
+            onClick: item.onSelect,
+            className: cx(
+              "group relative shrink-0 overflow-hidden rounded-[1.35rem] border border-[color-mix(in_oklab,var(--border)_76%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--surface)_92%,white),color-mix(in_oklab,var(--card)_98%,transparent))] text-left shadow-sm transition hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--ring)_34%,var(--border))] hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--ring)_38%,transparent)] disabled:pointer-events-none disabled:opacity-55",
+              itemSize(resolvedDisplay)
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute -right-8 -top-10 h-24 w-24 rounded-full opacity-15 blur-2xl transition group-hover:opacity-25",
+                  style: { background: accent }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("relative flex items-start gap-3", resolvedDisplay === "icon" && "items-center justify-center"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "grid h-11 w-11 shrink-0 place-items-center rounded-2xl text-white shadow-sm",
+                    style: { background: accent },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5", "aria-hidden": true })
+                  }
+                ),
+                showLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block text-sm font-semibold tracking-tight text-[var(--foreground)]", children: item.label }),
+                  showDescription ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1 block max-h-10 overflow-hidden text-xs leading-5 text-[var(--muted)]", children: item.description }) : null
+                ] }) : null
+              ] })
+            ]
+          },
+          item.id
+        );
+      }) }) }) })
+    }
+  );
+}

package/dist/QuickActionsDock.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function itemSize(display) {
+  if (display === "icon") return "h-14 w-14 justify-center p-0";
+  if (display === "label") return "min-h-[72px] w-[11.5rem] p-3";
+  return "min-h-[96px] w-[17rem] p-3";
+}
+function QuickActionsDock({
+  items,
+  loading = false,
+  display = "description",
+  sticky = false,
+  stickyClassName = "lg:sticky lg:top-4",
+  stickyReserveClassName = "",
+  ariaLabel = "Acciones r\xE1pidas",
+  className
+}) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": ariaLabel,
+      className: cx("relative z-20", sticky && stickyClassName, sticky && stickyReserveClassName, className),
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] p-2 shadow-[0_20px_54px_rgba(15,23,42,0.10)] backdrop-blur-xl", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto overscroll-x-contain [scrollbar-width:thin]", children: /* @__PURE__ */ jsx("div", { className: "flex w-max min-w-full gap-2", children: items.map((item) => {
+        var _a, _b;
+        const Icon = item.icon;
+        const accent = (_a = item.accent) != null ? _a : "var(--primary)";
+        const resolvedDisplay = (_b = item.display) != null ? _b : display;
+        const showLabel = resolvedDisplay !== "icon";
+        const showDescription = resolvedDisplay === "description" && Boolean(item.description);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            title: resolvedDisplay === "icon" ? item.label : void 0,
+            "aria-label": item.label,
+            disabled: loading || item.disabled,
+            onClick: item.onSelect,
+            className: cx(
+              "group relative shrink-0 overflow-hidden rounded-[1.35rem] border border-[color-mix(in_oklab,var(--border)_76%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--surface)_92%,white),color-mix(in_oklab,var(--card)_98%,transparent))] text-left shadow-sm transition hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--ring)_34%,var(--border))] hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--ring)_38%,transparent)] disabled:pointer-events-none disabled:opacity-55",
+              itemSize(resolvedDisplay)
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute -right-8 -top-10 h-24 w-24 rounded-full opacity-15 blur-2xl transition group-hover:opacity-25",
+                  style: { background: accent }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: cx("relative flex items-start gap-3", resolvedDisplay === "icon" && "items-center justify-center"), children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "grid h-11 w-11 shrink-0 place-items-center rounded-2xl text-white shadow-sm",
+                    style: { background: accent },
+                    children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5", "aria-hidden": true })
+                  }
+                ),
+                showLabel ? /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold tracking-tight text-[var(--foreground)]", children: item.label }),
+                  showDescription ? /* @__PURE__ */ jsx("span", { className: "mt-1 block max-h-10 overflow-hidden text-xs leading-5 text-[var(--muted)]", children: item.description }) : null
+                ] }) : null
+              ] })
+            ]
+          },
+          item.id
+        );
+      }) }) }) })
+    }
+  );
+}
+export {
+  QuickActionsDock as default
+};

package/dist/Sidebar.d.mts

@@ -22,6 +22,8 @@ type SidebarWorkspaceLabels = {
     secondary?: string;
     manage?: string;
     manageHint?: string;
+    searchPlaceholder?: string;
+    empty?: string;
 };
 type SidebarItem = {
     key: string;

package/dist/Sidebar.d.ts

@@ -22,6 +22,8 @@ type SidebarWorkspaceLabels = {
     secondary?: string;
     manage?: string;
     manageHint?: string;
+    searchPlaceholder?: string;
+    empty?: string;
 };
 type SidebarItem = {
     key: string;

package/dist/Sidebar.js

@@ -1495,13 +1495,20 @@ function WorkspaceSwitcher({
   variant = "standalone",
   color = "accent"
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const [open, setOpen] = (0, import_react.useState)(false);
+  const [workspaceQuery, setWorkspaceQuery] = (0, import_react.useState)("");
   const triggerRef = (0, import_react.useRef)(null);
+  const searchRef = (0, import_react.useRef)(null);
   const popoverRef = (0, import_react.useRef)(null);
   const [mounted, setMounted] = (0, import_react.useState)(false);
   const portalRoot = typeof document !== "undefined" ? document.body : null;
-  const [menuPos, setMenuPos] = (0, import_react.useState)({ top: 0, left: 0, width: 0 });
+  const [menuPos, setMenuPos] = (0, import_react.useState)({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 420
+  });
   const current = (0, import_react.useMemo)(() => {
     var _a2, _b2;
     const list = (workspaces != null ? workspaces : []).filter((w) => !w.disabled);
@@ -1517,6 +1524,17 @@ function WorkspaceSwitcher({
     }
     return { primary: p, secondary: s };
   }, [workspaces]);
+  const normalizedWorkspaceQuery = workspaceQuery.trim().toLocaleLowerCase();
+  const matchesWorkspaceQuery = import_react.default.useCallback(
+    (workspace) => {
+      if (!normalizedWorkspaceQuery) return true;
+      return [workspace.name, workspace.subtitle, workspace.badge, workspace.initials].filter(Boolean).some((value) => String(value).toLocaleLowerCase().includes(normalizedWorkspaceQuery));
+    },
+    [normalizedWorkspaceQuery]
+  );
+  const filteredPrimary = (0, import_react.useMemo)(() => primary.filter(matchesWorkspaceQuery), [matchesWorkspaceQuery, primary]);
+  const filteredSecondary = (0, import_react.useMemo)(() => secondary.filter(matchesWorkspaceQuery), [matchesWorkspaceQuery, secondary]);
+  const hasFilteredWorkspaces = filteredPrimary.length > 0 || filteredSecondary.length > 0;
   (0, import_react.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -1539,6 +1557,17 @@ function WorkspaceSwitcher({
   (0, import_react.useEffect)(() => {
     if (collapsed) setOpen(false);
   }, [collapsed]);
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      setWorkspaceQuery("");
+      return;
+    }
+    const id = window.setTimeout(() => {
+      var _a2;
+      return (_a2 = searchRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+    }, 40);
+    return () => window.clearTimeout(id);
+  }, [open]);
   (0, import_react.useEffect)(() => {
     setMounted(true);
   }, []);
@@ -1547,21 +1576,29 @@ function WorkspaceSwitcher({
     if (!el) return;
     const r = el.getBoundingClientRect();
     const viewportPad = 12;
-    const w = Math.max(240, Math.min(340, window.innerWidth - viewportPad * 2));
+    const w = Math.min(380, Math.max(180, window.innerWidth - viewportPad * 2));
+    const maxPreferredHeight = Math.min(520, Math.max(120, window.innerHeight - viewportPad * 2));
     if (collapsed) {
       let left2 = r.right + 12;
       if (left2 + w > window.innerWidth - viewportPad) left2 = Math.max(viewportPad, window.innerWidth - viewportPad - w);
-      let top2 = r.top;
-      const maxTop = Math.max(viewportPad, window.innerHeight - viewportPad - 420);
-      if (top2 > maxTop) top2 = maxTop;
-      if (top2 < viewportPad) top2 = viewportPad;
-      setMenuPos({ left: left2, top: top2, width: w });
+      let top = r.top;
+      const maxTop = Math.max(viewportPad, window.innerHeight - viewportPad - maxPreferredHeight);
+      if (top > maxTop) top = maxTop;
+      if (top < viewportPad) top = viewportPad;
+      setMenuPos({ left: left2, top, width: w, maxHeight: maxPreferredHeight });
       return;
     }
     let left = r.left;
     if (left + w > window.innerWidth - viewportPad) left = Math.max(viewportPad, window.innerWidth - viewportPad - w);
-    const top = r.bottom + 8;
-    setMenuPos({ left, top, width: w });
+    const belowTop = r.bottom + 8;
+    const belowSpace = Math.max(80, window.innerHeight - belowTop - viewportPad);
+    const aboveSpace = Math.max(80, r.top - viewportPad - 8);
+    if (belowSpace < 260 && aboveSpace > belowSpace) {
+      const maxHeight = Math.min(maxPreferredHeight, aboveSpace);
+      setMenuPos({ left, top: Math.max(viewportPad, r.top - 8 - maxHeight), width: w, maxHeight });
+      return;
+    }
+    setMenuPos({ left, top: belowTop, width: w, maxHeight: Math.min(maxPreferredHeight, belowSpace) });
   }, [collapsed]);
   (0, import_react.useLayoutEffect)(() => {
     if (!open) return;
@@ -1584,9 +1621,11 @@ function WorkspaceSwitcher({
   const labelSecondary = (_c = labels == null ? void 0 : labels.secondary) != null ? _c : "Secundarios";
   const labelManage = (_d = labels == null ? void 0 : labels.manage) != null ? _d : "Administrar espacios";
   const labelManageHint = (_e = labels == null ? void 0 : labels.manageHint) != null ? _e : "Agrega slots para sub-empresas.";
+  const labelSearchPlaceholder = (_f = labels == null ? void 0 : labels.searchPlaceholder) != null ? _f : "Buscar empresa o workspace...";
+  const labelEmpty = (_g = labels == null ? void 0 : labels.empty) != null ? _g : "No hay espacios que coincidan.";
   const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-[0.75rem] font-semibold", children: current.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 truncate text-[0.6875rem] text-white/70", children: (_f = current.subtitle) != null ? _f : labelTitle })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 truncate text-[0.6875rem] text-white/70", children: (_h = current.subtitle) != null ? _h : labelTitle })
   ] });
   const renderRow = (w) => {
     var _a2, _b2, _c2;
@@ -1602,7 +1641,7 @@ function WorkspaceSwitcher({
         },
         disabled: w.disabled,
         className: [
-          "flex w-full items-center gap-3 rounded-2xl px-2.5 py-2 text-left",
+          "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-2xl px-2.5 py-2 text-left",
           w.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
           active ? "bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] ring-1 ring-inset ring-[color-mix(in_oklab,var(--ring)_22%,transparent)]" : ""
         ].join(" "),
@@ -1615,13 +1654,14 @@ function WorkspaceSwitcher({
               alt: w.name,
               initials: (_b2 = w.initials) != null ? _b2 : computeInitials(w.name),
               radiusClass: "rounded-2xl",
-              color: (_c2 = w.color) != null ? _c2 : color
+              color: (_c2 = w.color) != null ? _c2 : color,
+              className: "shrink-0"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 truncate text-sm font-semibold text-[var(--foreground)]", children: w.name }),
-              w.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 rounded-full border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] px-2 py-0.5 text-[0.6875rem] font-semibold text-[var(--muted)]", children: w.badge }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block min-w-0 max-w-full flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[var(--foreground)]", children: w.name }),
+              w.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "max-w-[5.75rem] shrink-0 truncate rounded-full border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] px-2 py-0.5 text-[0.6875rem] font-semibold text-[var(--muted)]", children: w.badge }) : null
             ] }),
             w.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-[var(--muted)] text-left", children: w.subtitle }) : null
           ] }),
@@ -1646,7 +1686,8 @@ function WorkspaceSwitcher({
         "aria-expanded": open,
         title: void 0,
         className: [
-          "group flex w-full items-center gap-3 rounded-2xl",
+          "group w-full min-w-0 items-center gap-3 rounded-2xl",
+          collapsed ? "flex" : "grid grid-cols-[auto_minmax(0,1fr)_auto]",
           variant === "panel" ? "border-0 bg-transparent shadow-none hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]" : "border border-[var(--border)] bg-[var(--card)] shadow-sm hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
           collapsed ? "justify-center p-2" : "px-2.5 py-2",
           "active:scale-[0.99]"
@@ -1656,20 +1697,21 @@ function WorkspaceSwitcher({
             import_AvatarSquare.default,
             {
               size: collapsed ? 44 : 34,
-              src: (_g = current.avatarUrl) != null ? _g : void 0,
+              src: (_i = current.avatarUrl) != null ? _i : void 0,
               alt: current.name,
-              initials: (_h = current.initials) != null ? _h : computeInitials(current.name),
+              initials: (_j = current.initials) != null ? _j : computeInitials(current.name),
               radiusClass: collapsed ? "rounded-2xl" : "rounded-2xl",
-              color: (_i = current.color) != null ? _i : color
+              color: (_k = current.color) != null ? _k : color,
+              className: "shrink-0"
             }
           ),
           !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 truncate text-sm font-semibold", children: current.name }),
-                current.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 rounded-full border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] px-2 py-0.5 text-[0.6875rem] font-semibold text-[var(--muted)]", children: current.badge }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block min-w-0 max-w-full flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left text-sm font-semibold", children: current.name }),
+                current.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "max-w-[5.75rem] shrink-0 truncate rounded-full border border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] px-2 py-0.5 text-[0.6875rem] font-semibold text-[var(--muted)]", children: current.badge }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-[var(--muted)] text-left", children: (_j = current.subtitle) != null ? _j : labelTitle })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-[var(--muted)] text-left", children: (_l = current.subtitle) != null ? _l : labelTitle })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 text-[var(--muted)] group-hover:text-[var(--foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronDownIcon, { className: `transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": true }) })
           ] })
@@ -1687,23 +1729,37 @@ function WorkspaceSwitcher({
           exit: { opacity: 0, y: 6, scale: 0.985 },
           transition: { duration: 0.14, ease: "easeOut" },
           className: [
-            "fixed z-50 overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)] shadow-2xl",
+            "fixed z-50 flex flex-col overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)] shadow-2xl",
             mobile ? "max-w-[18rem]" : ""
           ].join(" "),
-          style: { top: menuPos.top, left: menuPos.left, width: menuPos.width },
+          style: { top: menuPos.top, left: menuPos.left, width: menuPos.width, maxHeight: menuPos.maxHeight },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-wider text-[var(--muted)]", children: labelTitle }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-2 pb-2", children: [
-              primary.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-wider text-[var(--muted)]", children: labelTitle }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 px-3 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Input.default,
+              {
+                ref: searchRef,
+                type: "search",
+                value: workspaceQuery,
+                onChange: (event) => setWorkspaceQuery(event.currentTarget.value),
+                placeholder: labelSearchPlaceholder,
+                leftSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.MagnifyingGlassIcon, { className: "size-4", "aria-hidden": true }),
+                clearable: true,
+                onClear: () => setWorkspaceQuery(""),
+                className: "h-9 rounded-2xl py-2 text-xs shadow-none"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-2 pb-2 [scrollbar-width:thin]", children: hasFilteredWorkspaces ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              filteredPrimary.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-2 pb-1 pt-1 text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400", children: labelPrimary }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-1", children: primary.map(renderRow) })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-1", children: filteredPrimary.map(renderRow) })
               ] }) : null,
-              secondary.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              filteredSecondary.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 px-2 pb-1 pt-1 text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400", children: labelSecondary }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-1", children: secondary.map(renderRow) })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-1", children: filteredSecondary.map(renderRow) })
               ] }) : null
-            ] }),
-            onManageWorkspaces ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-[var(--border)] px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-8 text-center text-sm text-[var(--muted)]", children: labelEmpty }) }),
+            onManageWorkspaces ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 border-t border-[var(--border)] px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_Button.default,
               {
                 unstyled: true,
@@ -1712,13 +1768,13 @@ function WorkspaceSwitcher({
                   setOpen(false);
                   onManageWorkspaces();
                 },
-                className: "flex w-full items-center justify-between gap-3 rounded-2xl px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
+                className: "flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)]",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: labelManage }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: labelManageHint })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold text-[var(--foreground)]", children: labelManage }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-[var(--muted)]", children: labelManageHint })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PlusIcon, { className: "text-[var(--muted)]", "aria-hidden": true })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PlusIcon, { className: "shrink-0 text-[var(--muted)]", "aria-hidden": true })
                 ]
               }
             ) }) : null
@@ -2291,7 +2347,7 @@ function SidebarInner({
       ] }) : null,
       sidebarSlotCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center", children: sidebarSlotCollapsed }) : null
     ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: topPanelClass, children: [
-      showWorkspaceInTopPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-3 py-3", children: [
+      showWorkspaceInTopPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 overflow-hidden px-3 py-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           WorkspaceSwitcher,
           {