@snksergio/design-system 0.1.0

package/dist-lib/chunks/app-shell-BNTvOETJ.mjs

@@ -0,0 +1,2681 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const chipGroup = require("./chip-group-CsKBBHW2.mjs");
+const lucideReact = require("lucide-react");
+const cmdk = require("cmdk");
+const SheetPrimitive = require("@radix-ui/react-dialog");
+const classVarianceAuthority = require("class-variance-authority");
+const DropdownMenuPrimitive = require("@radix-ui/react-dropdown-menu");
+const AvatarPrimitive = require("@radix-ui/react-avatar");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SheetPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SheetPrimitive);
+const DropdownMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenuPrimitive);
+const AvatarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AvatarPrimitive);
+const headerRoot = chipGroup.tv({
+  base: [
+    "flex items-center justify-between gap-gp-lg",
+    "h-[60px] flex-none px-pad-2xl",
+    "bg-bg-canvas border-b border-border-subtle",
+    "text-fg-default font-sans"
+  ]
+});
+const headerLeft = chipGroup.tv({
+  base: "flex items-center gap-gp-md min-w-0 flex-1"
+});
+const headerRight = chipGroup.tv({
+  base: "flex items-center gap-gp-sm shrink-0"
+});
+const headerDivider = chipGroup.tv({
+  base: "h-[24px] w-px bg-border-default shrink-0 mx-pad-xs"
+});
+const headerIconBtn = chipGroup.tv({
+  base: [
+    "relative inline-flex items-center justify-center",
+    "w-form-md h-form-md rounded-radius-md",
+    "cursor-pointer text-fg-default",
+    "transition-colors duration-150",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ],
+  variants: {
+    variant: {
+      ghost: "bg-transparent border-0 hover:bg-bg-muted"
+    }
+  },
+  defaultVariants: { variant: "ghost" }
+});
+const headerIconBtnBadge = chipGroup.tv({
+  base: "absolute top-[4px] right-[4px] w-[8px] h-[8px] rounded-full ring-2 ring-bg-canvas",
+  variants: {
+    kind: {
+      brand: "bg-bg-brand",
+      danger: "bg-bg-danger"
+    }
+  },
+  defaultVariants: { kind: "brand" }
+});
+const breadcrumbRoot = chipGroup.tv({
+  base: "flex items-center gap-gp-sm min-w-0"
+});
+const breadcrumbItem = chipGroup.tv({
+  base: "font-medium truncate transition-colors leading-none",
+  variants: {
+    current: {
+      true: "text-fg-default font-semibold",
+      false: "text-fg-muted hover:text-fg-default cursor-pointer"
+    },
+    /** Quando único item no breadcrumb (= título da página), font-size sobe pra 15px */
+    standalone: {
+      true: "text-[15px]",
+      false: "text-[13px]"
+    }
+  },
+  defaultVariants: { current: false, standalone: false }
+});
+const breadcrumbSeparator = chipGroup.tv({
+  base: "text-fg-subtle shrink-0"
+});
+const searchFakeInput = chipGroup.tv({
+  base: [
+    "inline-flex items-center gap-gp-md h-form-md w-[180px]",
+    "px-pad-xl rounded-radius-md",
+    "bg-bg-subtle border border-border-subtle cursor-pointer",
+    "text-fg-subtle text-[13px]",
+    "transition-colors duration-150",
+    "hover:bg-bg-muted hover:border-border-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ]
+});
+const searchFakeInputIcon = chipGroup.tv({
+  base: "size-[14px] text-fg-subtle shrink-0"
+});
+const searchFakeInputText = chipGroup.tv({
+  base: "flex-1 text-left truncate"
+});
+const searchFakeInputKbd = chipGroup.tv({
+  base: [
+    "ml-auto inline-flex items-center justify-center",
+    "h-[20px] px-pad-xs rounded-radius-xs",
+    "bg-bg-canvas border border-border-subtle dark:bg-bg-muted",
+    "text-[10px] font-semibold text-fg-muted tabular-nums shrink-0"
+  ]
+});
+const hdWrap = chipGroup.tv({
+  base: "relative inline-flex"
+});
+const hdDropdown = chipGroup.tv({
+  base: [
+    "absolute top-[calc(100%+8px)] right-0 z-50",
+    "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] flex flex-col",
+    "rounded-[12px] bg-bg-dropdown",
+    "border border-border-default shadow-sh-lg outline-float",
+    "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+    "overflow-hidden",
+    // Animation
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+  ]
+});
+const hdTop = chipGroup.tv({
+  base: "flex flex-col gap-gp-md p-pad-xl border-b border-border-subtle bg-bg-canvas/40"
+});
+const hdHeader = chipGroup.tv({
+  base: "flex items-center justify-between"
+});
+const hdTitle = chipGroup.tv({
+  base: "flex items-center gap-gp-sm text-[15px] font-semibold text-fg-default"
+});
+const hdTitleCount = chipGroup.tv({
+  base: [
+    "inline-flex items-center justify-center min-w-[20px] h-[20px] px-pad-xs",
+    "rounded-radius-xs bg-bg-brand text-fg-on-brand",
+    "text-[11px] font-bold tabular-nums"
+  ]
+});
+const hdHeaderActions = chipGroup.tv({
+  base: "flex items-center gap-gp-xs"
+});
+chipGroup.tv({
+  base: [
+    "inline-flex items-center gap-gp-sm h-form-sm w-full",
+    "px-pad-lg rounded-radius-md",
+    "bg-bg-input border border-border-input",
+    "transition-colors duration-150",
+    "focus-within:border-border-brand focus-within:ring-4 focus-within:ring-ring-brand"
+  ]
+});
+chipGroup.tv({
+  base: "size-[14px] text-fg-muted shrink-0"
+});
+chipGroup.tv({
+  base: "flex-1 min-w-0 bg-transparent border-0 outline-none text-[13px] text-fg-default placeholder:text-fg-subtle"
+});
+chipGroup.tv({
+  base: "flex items-center gap-gp-2xs p-[3px] rounded-radius-lg bg-bg-muted"
+});
+chipGroup.tv({
+  base: [
+    "inline-flex items-center justify-center gap-gp-xs",
+    "h-[28px] px-[10px] rounded-radius-sm",
+    "text-[12px] font-medium text-fg-muted cursor-pointer",
+    "bg-transparent border-0",
+    "transition-colors duration-150",
+    "hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
+  ],
+  variants: {
+    active: {
+      true: "bg-bg-accent text-fg-default font-semibold shadow-sh-sm dark:shadow-sh-none"
+    }
+  }
+});
+chipGroup.tv({
+  base: "text-[10px] font-bold tabular-nums opacity-70"
+});
+const hdBody = chipGroup.tv({
+  base: "flex-1 overflow-y-auto p-pad-sm flex flex-col gap-px"
+});
+const hdEmpty = chipGroup.tv({
+  base: "flex flex-col items-center justify-center gap-gp-md py-pad-7xl text-fg-subtle"
+});
+const hdEmptyText = chipGroup.tv({
+  base: "text-paragraph-sm"
+});
+const hdNotif = chipGroup.tv({
+  base: [
+    "relative flex items-start gap-gp-lg p-pad-lg rounded-radius-md text-left w-full",
+    "bg-transparent border-0 cursor-pointer",
+    "transition-colors duration-150",
+    "hover:bg-bg-muted",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
+  ]
+});
+const hdNotifIcon = chipGroup.tv({
+  base: "flex-none w-[28px] h-[28px] rounded-radius-md grid place-items-center"
+});
+const hdNotifBody = chipGroup.tv({
+  base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
+});
+const hdNotifTitle = chipGroup.tv({
+  base: "text-[13px] font-semibold text-fg-default leading-tight"
+});
+const hdNotifText = chipGroup.tv({
+  base: "text-[12px] text-fg-muted leading-snug line-clamp-2"
+});
+const hdNotifTime = chipGroup.tv({
+  base: "text-[11px] text-fg-subtle"
+});
+const hdNotifDot = chipGroup.tv({
+  base: "shrink-0 mt-pad-xs w-[8px] h-[8px] rounded-full bg-bg-brand"
+});
+const hdMsg = chipGroup.tv({
+  base: [
+    "relative flex items-center gap-gp-lg p-pad-lg rounded-radius-md text-left w-full",
+    "bg-transparent border-0 cursor-pointer",
+    "transition-colors duration-150",
+    "hover:bg-bg-muted",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
+  ]
+});
+const hdMsgAvatar = chipGroup.tv({
+  base: [
+    "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
+    "text-white text-[11px] font-bold uppercase tracking-[0.02em] leading-none"
+  ]
+});
+const hdMsgBody = chipGroup.tv({
+  base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
+});
+const hdMsgRow = chipGroup.tv({
+  base: "flex items-center justify-between gap-gp-sm"
+});
+const hdMsgName = chipGroup.tv({
+  base: "text-[13px] font-semibold text-fg-default truncate"
+});
+const hdMsgTime = chipGroup.tv({
+  base: "text-[11px] text-fg-subtle shrink-0"
+});
+const hdMsgPreviewRow = chipGroup.tv({
+  base: "flex items-center gap-gp-sm"
+});
+const hdMsgPreview = chipGroup.tv({
+  base: "flex-1 min-w-0 text-[12px] text-fg-muted truncate"
+});
+const hdMsgDot = chipGroup.tv({
+  base: "shrink-0 w-[8px] h-[8px] rounded-full bg-bg-brand"
+});
+const hdFooter = chipGroup.tv({
+  base: "flex-none p-pad-md border-t border-border-subtle text-center"
+});
+const hdFooterLink = chipGroup.tv({
+  base: [
+    "inline-flex items-center justify-center gap-gp-sm",
+    "h-form-sm px-pad-lg rounded-radius-md w-full",
+    "text-[13px] font-medium text-fg-brand no-underline",
+    "transition-colors duration-150",
+    "hover:bg-bg-brand-subtle",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-brand"
+  ]
+});
+function HeaderBreadcrumb({
+  items,
+  mobileShowLastOnly,
+  className
+}) {
+  if (items.length === 0) return null;
+  const isStandalone = items.length === 1;
+  const lastItem = items[items.length - 1];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        className: chipGroup.cn(
+          breadcrumbRoot(),
+          mobileShowLastOnly && "hidden md:flex",
+          className
+        ),
+        "aria-label": "Breadcrumb",
+        children: items.map((item, idx) => {
+          const isLast = idx === items.length - 1;
+          const isClickable = !isLast && (item.href !== void 0 || item.onClick !== void 0);
+          return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+            idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronRight,
+              {
+                size: 14,
+                strokeWidth: 1.7,
+                className: breadcrumbSeparator(),
+                "aria-hidden": "true"
+              }
+            ),
+            isClickable ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: item.href ?? "#",
+                className: breadcrumbItem({
+                  current: false,
+                  standalone: isStandalone
+                }),
+                onClick: (e) => {
+                  if (!item.href) e.preventDefault();
+                  item.onClick?.(e);
+                },
+                children: item.label
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: breadcrumbItem({
+                  current: isLast,
+                  standalone: isStandalone
+                }),
+                "aria-current": isLast ? "page" : void 0,
+                children: item.label
+              }
+            )
+          ] }, `${item.label}-${idx}`);
+        })
+      }
+    ),
+    mobileShowLastOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        className: chipGroup.cn(breadcrumbRoot(), "md:hidden", className),
+        "aria-label": "Seção atual",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: breadcrumbItem({ current: true, standalone: true }),
+            "aria-current": "page",
+            children: lastItem.label
+          }
+        )
+      }
+    )
+  ] });
+}
+const Dialog = SheetPrimitive__namespace.Root;
+const DialogTrigger = SheetPrimitive__namespace.Trigger;
+const DialogPortal = SheetPrimitive__namespace.Portal;
+const DialogClose = SheetPrimitive__namespace.Close;
+const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SheetPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: chipGroup.cn(
+      "fixed inset-0 z-50 bg-black/30 supports-[backdrop-filter]:backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = SheetPrimitive__namespace.Overlay.displayName;
+const DialogContent = React__namespace.forwardRef(({ className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    SheetPrimitive__namespace.Content,
+    {
+      ref,
+      className: chipGroup.cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-gp-4xl rounded-radius-base bg-bg-surface p-pad-4xl text-paragraph-sm text-fg-default shadow-sh-xl outline-float duration-200 sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideClose && /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-radius-sm opacity-70 transition-opacity hover:opacity-100 outline-none ring-0 ring-ring-brand focus-visible:ring-4 disabled:pointer-events-none data-[state=open]:bg-bg-muted data-[state=open]:text-fg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = SheetPrimitive__namespace.Content.displayName;
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SheetPrimitive__namespace.Title,
+  {
+    ref,
+    className: chipGroup.cn(
+      "text-title-md font-medium text-fg-default leading-none",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = SheetPrimitive__namespace.Title.displayName;
+const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SheetPrimitive__namespace.Description,
+  {
+    ref,
+    className: chipGroup.cn("text-paragraph-sm text-fg-muted", className),
+    ...props
+  }
+));
+DialogDescription.displayName = SheetPrimitive__namespace.Description.displayName;
+const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command,
+  {
+    ref,
+    className: chipGroup.cn(
+      "flex h-full w-full flex-col overflow-hidden p-pad-xl bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = cmdk.Command.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DialogContent,
+    {
+      hideClose: true,
+      className: chipGroup.cn(
+        "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
+        "rounded-[12px] border border-border-default",
+        // Outline padrão de elementos flutuantes
+        "outline-float"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children })
+    }
+  ) });
+};
+const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    "cmdk-input-wrapper": "",
+    className: chipGroup.cn(
+      "flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg",
+      "bg-bg-input border border-border-subtle shadow-sh-sm",
+      "transition-[border-color,box-shadow,background-color] duration-150",
+      "focus-within:border-border-brand focus-within:shadow-sh-ring",
+      "dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none"
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-[14px] text-fg-muted shrink-0", strokeWidth: 1.8 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.Command.Input,
+        {
+          ref,
+          className: chipGroup.cn(
+            "flex-1 min-w-0 bg-transparent border-0 outline-none",
+            "text-[13px] text-fg-default placeholder:text-fg-muted",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandInput.displayName = cmdk.Command.Input.displayName;
+const CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command.List,
+  {
+    ref,
+    className: chipGroup.cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin",
+      className
+    ),
+    ...props
+  }
+));
+CommandList.displayName = cmdk.Command.List.displayName;
+const CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command.Empty,
+  {
+    ref,
+    className: "py-pad-5xl text-center text-paragraph-sm text-fg-muted",
+    ...props
+  }
+));
+CommandEmpty.displayName = cmdk.Command.Empty.displayName;
+const CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command.Group,
+  {
+    ref,
+    className: chipGroup.cn(
+      "overflow-hidden text-fg-default",
+      "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
+      "[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl",
+      "[&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-bold",
+      "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider",
+      "[&_[cmdk-group-heading]]:text-fg-subtle",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = cmdk.Command.Group.displayName;
+const CommandSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command.Separator,
+  {
+    ref,
+    className: chipGroup.cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = cmdk.Command.Separator.displayName;
+const CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  cmdk.Command.Item,
+  {
+    ref,
+    className: chipGroup.cn(
+      "relative flex cursor-default select-none items-center gap-gp-md",
+      "rounded-radius-lg px-pad-xl py-pad-md",
+      "text-[13px] font-medium text-fg-muted",
+      "outline-none transition-colors",
+      "data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default",
+      "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = cmdk.Command.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chipGroup.cn(
+        "ml-auto text-[11px] tracking-wider text-fg-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+function HeaderSearch({
+  placeholder = "Buscar...",
+  shortcut = "⌘K",
+  commandGroups = [],
+  commandPlaceholder = "Digite um comando ou busque...",
+  commandEmptyMessage = "Nenhum resultado encontrado.",
+  hotkey = { key: "k", meta: true, ctrl: true },
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    const handler = (e) => {
+      if (e.key.toLowerCase() !== hotkey.key.toLowerCase()) return;
+      const meta = hotkey.meta && e.metaKey;
+      const ctrl = hotkey.ctrl && e.ctrlKey;
+      if (meta || ctrl) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hotkey.key, hotkey.meta, hotkey.ctrl]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: chipGroup.cn(searchFakeInput(), "hidden md:inline-flex", className),
+        onClick: () => setOpen(true),
+        "aria-label": "Abrir busca",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: searchFakeInputIcon(), strokeWidth: 1.8 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: searchFakeInputText(), children: placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: searchFakeInputKbd(), children: shortcut })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-sm",
+        className: "md:hidden rounded-radius-md",
+        onClick: () => setOpen(true),
+        "aria-label": "Abrir busca",
+        title: `Buscar (${shortcut})`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(CommandDialog, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: commandPlaceholder }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: commandEmptyMessage }),
+        commandGroups.map((group, gIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+          CommandGroupBlock,
+          {
+            group,
+            isLast: gIdx === commandGroups.length - 1,
+            onSelect: () => setOpen(false)
+          },
+          group.heading
+        ))
+      ] })
+    ] })
+  ] });
+}
+function CommandGroupBlock({
+  group,
+  isLast,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => {
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        CommandItem,
+        {
+          value: item.id ?? item.label,
+          keywords: item.keywords,
+          onSelect: () => {
+            item.onSelect();
+            onSelect();
+          },
+          className: item.destructive ? "text-fg-danger [&_svg]:text-fg-danger" : void 0,
+          children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
+            item.shortcut && /* @__PURE__ */ jsxRuntime.jsx(CommandShortcut, { children: item.shortcut })
+          ]
+        },
+        item.id ?? item.label
+      );
+    }) }),
+    !isLast && /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator, {})
+  ] });
+}
+const DEFAULT_FILTERS$1 = [
+  { id: "all", label: "Todas", predicate: () => true },
+  { id: "unread", label: "Não lidas", predicate: (n) => !!n.unread },
+  { id: "mentions", label: "Menções", predicate: (n) => n.kind === "mention" }
+];
+function HeaderNotifications({ config, className }) {
+  const {
+    items,
+    filters = DEFAULT_FILTERS$1,
+    emptyMessage = "Nenhuma notificação por aqui.",
+    onMarkAllRead,
+    onMoreActions,
+    onViewAll,
+    viewAllLabel = "Ver todas as notificações"
+  } = config;
+  const [open, setOpen] = React.useState(false);
+  const [activeFilter, setActiveFilter] = React.useState(filters[0]?.id ?? "all");
+  const wrapRef = React.useRef(null);
+  const unreadCount = items.filter((n) => n.unread).length;
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  const filtered = items.filter(
+    filters.find((f) => f.id === activeFilter)?.predicate ?? (() => true)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapRef, className: chipGroup.cn(hdWrap(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-sm",
+        className: "rounded-radius-md relative",
+        "aria-label": "Notificações",
+        title: "Notificações",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, {}),
+          unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: headerIconBtnBadge({ kind: "danger" }), "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdDropdown(), role: "dialog", "aria-label": "Notificações", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdTop(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeader(), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdTitle(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Notificações" }),
+            unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdTitleCount(), children: unreadCount })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeaderActions(), children: [
+            onMarkAllRead && /* @__PURE__ */ jsxRuntime.jsx(
+              chipGroup.Button,
+              {
+                color: "secondary",
+                variant: "ghost",
+                size: "icon-2xs",
+                className: "rounded-radius-sm",
+                title: "Marcar todas como lidas",
+                onClick: onMarkAllRead,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, {})
+              }
+            ),
+            onMoreActions && /* @__PURE__ */ jsxRuntime.jsx(
+              chipGroup.Button,
+              {
+                color: "secondary",
+                variant: "ghost",
+                size: "icon-2xs",
+                className: "rounded-radius-sm",
+                title: "Mais ações",
+                onClick: onMoreActions,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
+              }
+            )
+          ] })
+        ] }),
+        filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.ChipGroup,
+          {
+            type: "single",
+            value: activeFilter,
+            onValueChange: (v) => v && setActiveFilter(v),
+            size: "lg",
+            ariaLabel: "Filtrar notificações",
+            children: filters.map((f) => {
+              const count = items.filter(f.predicate ?? (() => true)).length;
+              return /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: f.id, children: [
+                f.label,
+                count > 0 && ` (${count})`
+              ] }, f.id);
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdEmpty(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { size: 28, strokeWidth: 1.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: hdEmptyText(), children: emptyMessage })
+      ] }) : filtered.map((n) => /* @__PURE__ */ jsxRuntime.jsx(NotificationRow, { item: n }, n.id)) }),
+      onViewAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "#",
+          className: hdFooterLink(),
+          onClick: (e) => {
+            e.preventDefault();
+            onViewAll();
+            setOpen(false);
+          },
+          children: viewAllLabel
+        }
+      ) })
+    ] })
+  ] });
+}
+function NotificationRow({ item }) {
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: hdNotif(),
+      onClick: item.onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: hdNotifIcon(),
+            style: { color: item.color, background: `${item.color}1f` },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 15, strokeWidth: 1.8 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: hdNotifBody(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdNotifTitle(), children: item.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdNotifText(), children: item.body }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdNotifTime(), children: item.time })
+        ] }),
+        item.unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdNotifDot(), "aria-label": "não lida" })
+      ]
+    }
+  );
+}
+const inputGroupVariants = classVarianceAuthority.cva(
+  [
+    "group/input-group relative flex w-full items-center",
+    "bg-bg-input dark:bg-bg-muted",
+    "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
+    "border border-border-input rounded-radius-lg",
+    "transition-[border-color,box-shadow,background-color] outline-none",
+    "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input:disabled]:hover:bg-bg-input dark:has-[input:disabled]:hover:bg-bg-muted"
+  ],
+  {
+    variants: {
+      size: {
+        xxs: "min-h-form-xs px-pad-md gap-gp-xs rounded-radius-md text-[13px]",
+        xs: "min-h-form-sm px-pad-xl gap-gp-md rounded-radius-md text-[13px]",
+        sm: "min-h-form-md px-pad-xl gap-gp-md rounded-radius-lg text-[13px]",
+        md: "min-h-form-lg px-pad-xl gap-gp-md rounded-radius-lg text-[13px]"
+      },
+      state: {
+        default: "focus-within:border-border-brand          focus-within:shadow-sh-ring",
+        error: "border-border-danger-muted  focus-within:border-border-danger-muted  focus-within:shadow-sh-ring-danger",
+        warning: "border-border-warning-muted focus-within:border-border-warning-muted focus-within:shadow-sh-ring-warning",
+        success: "border-border-success-muted focus-within:border-border-success-muted focus-within:shadow-sh-ring-success"
+      }
+    },
+    defaultVariants: { size: "md", state: "default" }
+  }
+);
+const InputGroup = React__namespace.forwardRef(
+  ({ className, size, state, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-slot": "input-group",
+      className: chipGroup.cn(inputGroupVariants({ size, state }), className),
+      ...props
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+const inputGroupInputVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent border-0 outline-none",
+  "text-[13px] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "disabled:cursor-not-allowed",
+  "file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg-default"
+]);
+const InputGroupInput = React__namespace.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "input",
+  {
+    ref,
+    type,
+    "data-slot": "input-group-input",
+    className: chipGroup.cn(inputGroupInputVariants(), className),
+    ...props
+  }
+));
+InputGroupInput.displayName = "InputGroupInput";
+const inputGroupTextareaVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent border-0 outline-none resize-y",
+  "py-pad-md",
+  "text-[13px] leading-[1.5] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "disabled:cursor-not-allowed"
+]);
+const InputGroupTextarea = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "textarea",
+  {
+    ref,
+    "data-slot": "input-group-textarea",
+    className: chipGroup.cn(inputGroupTextareaVariants(), className),
+    ...props
+  }
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+const inputGroupAddonVariants = classVarianceAuthority.cva(
+  "flex items-center text-fg-muted shrink-0 select-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      align: {
+        // Inline = horizontal (start/end do eixo do texto)
+        "inline-start": "",
+        "inline-end": "",
+        // Block = vertical (top/bottom — multi-linha em textarea)
+        "block-start": "",
+        "block-end": ""
+      }
+    },
+    defaultVariants: { align: "inline-start" }
+  }
+);
+const InputGroupAddon = React__namespace.forwardRef(({ className, align = "inline-start", onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": align,
+    className: chipGroup.cn(inputGroupAddonVariants({ align }), className),
+    onClick: (e) => {
+      if (e.target.closest("button")) {
+        onClick?.(e);
+        return;
+      }
+      e.currentTarget.parentElement?.querySelector(
+        "input, textarea"
+      )?.focus();
+      onClick?.(e);
+    },
+    ...props
+  }
+));
+InputGroupAddon.displayName = "InputGroupAddon";
+const InputGroupText = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    ref,
+    "data-slot": "input-group-text",
+    className: chipGroup.cn(
+      "text-[12.5px] font-medium text-fg-muted whitespace-nowrap",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupText.displayName = "InputGroupText";
+const inputGroupButtonVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "rounded-radius-md transition-colors outline-none cursor-pointer",
+    "focus-visible:ring-4 focus-visible:ring-ring-brand",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-form-xs px-pad-md gap-gp-xs text-[12px]",
+        "icon-xs": "size-form-xs",
+        sm: "h-form-sm px-pad-lg gap-gp-md text-[12.5px]",
+        "icon-sm": "size-form-sm"
+      },
+      variant: {
+        default: "bg-bg-muted text-fg-default hover:bg-bg-muted-hover",
+        destructive: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hover",
+        outline: "border border-border-input bg-transparent text-fg-default hover:bg-bg-muted",
+        secondary: "bg-bg-emphasis text-fg-default hover:bg-bg-muted-hover",
+        ghost: "bg-transparent text-fg-muted hover:bg-bg-muted hover:text-fg-default",
+        link: "bg-transparent text-fg-brand underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: { size: "xs", variant: "ghost" }
+  }
+);
+const InputGroupButton = React__namespace.forwardRef(({ className, size, variant, type = "button", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    ref,
+    type,
+    "data-slot": "input-group-button",
+    className: chipGroup.cn(inputGroupButtonVariants({ size, variant }), className),
+    ...props
+  }
+));
+InputGroupButton.displayName = "InputGroupButton";
+const DEFAULT_FILTERS = [
+  { id: "all", label: "Tudo", predicate: () => true },
+  { id: "unread", label: "Não lidas", predicate: (m) => !!m.unread },
+  { id: "groups", label: "Grupos", predicate: (m) => !!m.group }
+];
+function HeaderMessages({ config, className }) {
+  const {
+    items,
+    filters = DEFAULT_FILTERS,
+    showSearch = true,
+    searchPlaceholder = "Pesquisar conversas...",
+    emptyMessage = "Nenhuma conversa encontrada.",
+    onNewMessage,
+    onExpand,
+    onViewAll,
+    viewAllLabel = "Ver todas no Chat Interno"
+  } = config;
+  const [open, setOpen] = React.useState(false);
+  const [activeFilter, setActiveFilter] = React.useState(filters[0]?.id ?? "all");
+  const [search, setSearch] = React.useState("");
+  const wrapRef = React.useRef(null);
+  const unreadCount = items.filter((m) => m.unread).length;
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  const filtered = items.filter(filters.find((f) => f.id === activeFilter)?.predicate ?? (() => true)).filter(
+    (m) => search ? m.name.toLowerCase().includes(search.toLowerCase()) : true
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapRef, className: chipGroup.cn(hdWrap(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-sm",
+        className: "rounded-radius-md relative",
+        "aria-label": "Mensagens",
+        title: "Mensagens",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, {}),
+          unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: headerIconBtnBadge({ kind: "brand" }), "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdDropdown(), role: "dialog", "aria-label": "Mensagens", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdTop(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeader(), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdTitle(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Conversas" }),
+            unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdTitleCount(), children: unreadCount })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdHeaderActions(), children: [
+            onNewMessage && /* @__PURE__ */ jsxRuntime.jsx(
+              chipGroup.Button,
+              {
+                color: "secondary",
+                variant: "ghost",
+                size: "icon-2xs",
+                className: "rounded-radius-sm",
+                title: "Nova mensagem",
+                onClick: onNewMessage,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PenLine, {})
+              }
+            ),
+            onExpand && /* @__PURE__ */ jsxRuntime.jsx(
+              chipGroup.Button,
+              {
+                color: "secondary",
+                variant: "ghost",
+                size: "icon-2xs",
+                className: "rounded-radius-sm",
+                title: "Expandir",
+                onClick: onExpand,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, {})
+              }
+            )
+          ] })
+        ] }),
+        showSearch && /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { size: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { strokeWidth: 1.8 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputGroupInput,
+            {
+              type: "text",
+              placeholder: searchPlaceholder,
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          )
+        ] }),
+        filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          chipGroup.ChipGroup,
+          {
+            type: "single",
+            value: activeFilter,
+            onValueChange: (v) => v && setActiveFilter(v),
+            size: "lg",
+            ariaLabel: "Filtrar mensagens",
+            children: filters.map((f) => {
+              const count = items.filter(f.predicate ?? (() => true)).length;
+              return /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: f.id, children: [
+                f.label,
+                count > 0 && ` (${count})`
+              ] }, f.id);
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hdEmpty(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { size: 28, strokeWidth: 1.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: hdEmptyText(), children: emptyMessage })
+      ] }) : filtered.map((m) => /* @__PURE__ */ jsxRuntime.jsx(MessageRow, { item: m }, m.id)) }),
+      onViewAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "#",
+          className: hdFooterLink(),
+          onClick: (e) => {
+            e.preventDefault();
+            onViewAll();
+            setOpen(false);
+          },
+          children: viewAllLabel
+        }
+      ) })
+    ] })
+  ] });
+}
+function MessageRow({ item }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: hdMsg(),
+      onClick: item.onClick,
+      title: `Conversar com ${item.name}`,
+      children: [
+        item.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: item.avatarUrl,
+            alt: item.name,
+            className: "flex-none w-icon-lg h-icon-lg rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdMsgAvatar(), style: { backgroundColor: item.color }, children: item.initials }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: hdMsgBody(), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: hdMsgRow(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdMsgName(), children: item.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdMsgTime(), children: item.time })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: hdMsgPreviewRow(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdMsgPreview(), children: item.preview }),
+            item.unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: hdMsgDot(), "aria-label": "não lida" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+const CONTAINER_CLASSES = [
+  "relative z-50 min-w-[180px] overflow-hidden",
+  "flex flex-col gap-px",
+  "rounded-[12px] bg-bg-dropdown p-pad-sm",
+  "border border-border-default shadow-sh-lg",
+  // Outline padrão de elementos flutuantes
+  "outline-float",
+  "text-fg-muted",
+  // Frosted-glass blur (necessário pra fazer o bg-dropdown semi-transparent render correto no dark)
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+  // Animações Radix
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "origin-[--radix-dropdown-menu-content-transform-origin]"
+].join(" ");
+const ITEM_BASE = [
+  "relative flex cursor-default select-none items-center",
+  "gap-pad-lg px-pad-lg py-pad-md rounded-radius-sm",
+  "text-[13px] font-medium",
+  "outline-none transition-colors",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+].join(" ");
+const ITEM_VARIANT_DEFAULT = [
+  "text-fg-muted [&_svg]:text-fg-muted",
+  "focus:bg-bg-muted focus:text-fg-default focus:[&_svg]:text-fg-default"
+].join(" ");
+const ITEM_VARIANT_DESTRUCTIVE = [
+  "text-fg-danger [&_svg]:text-fg-danger",
+  "focus:bg-bg-danger-muted focus:text-fg-danger focus:[&_svg]:text-fg-danger"
+].join(" ");
+const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  DropdownMenuPrimitive__namespace.SubTrigger,
+  {
+    ref,
+    className: chipGroup.cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
+const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.SubContent,
+  {
+    ref,
+    className: chipGroup.cn(CONTAINER_CLASSES, className),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
+const DropdownMenuContent = React__namespace.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: chipGroup.cn(
+      CONTAINER_CLASSES,
+      "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
+const DropdownMenuItem = React__namespace.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Item,
+  {
+    ref,
+    className: chipGroup.cn(
+      ITEM_BASE,
+      variant === "destructive" ? ITEM_VARIANT_DESTRUCTIVE : ITEM_VARIANT_DEFAULT,
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
+const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  DropdownMenuPrimitive__namespace.CheckboxItem,
+  {
+    ref,
+    className: chipGroup.cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "pl-8 pr-pad-lg",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-pad-md flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  DropdownMenuPrimitive__namespace.RadioItem,
+  {
+    ref,
+    className: chipGroup.cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "pl-8 pr-pad-lg",
+      // Selected state — brand tint (mantém no focus pra não voltar pra muted)
+      "data-[state=checked]:bg-bg-brand-subtle data-[state=checked]:text-fg-brand",
+      "data-[state=checked]:[&_svg]:text-fg-brand",
+      "data-[state=checked]:focus:bg-bg-brand-subtle data-[state=checked]:focus:text-fg-brand",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-pad-md flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
+const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Label,
+  {
+    ref,
+    className: chipGroup.cn(
+      "px-pad-lg py-pad-sm text-caption-sm font-semibold uppercase tracking-wider text-fg-subtle",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
+const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: chipGroup.cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+const DEFAULT_OPTIONS = [
+  { id: "light", label: "Claro", icon: lucideReact.Sun },
+  { id: "dark", label: "Escuro", icon: lucideReact.Moon }
+];
+function HeaderThemeSwitcher({
+  theme,
+  onThemeChange,
+  options = DEFAULT_OPTIONS,
+  className
+}) {
+  const current = options.find((o) => o.id === theme) ?? options[0];
+  const CurrentIcon = current?.icon ?? lucideReact.Sun;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-sm",
+        className: chipGroup.cn("rounded-radius-md", className),
+        "aria-label": "Trocar tema",
+        title: `Tema: ${current?.label ?? ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CurrentIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", sideOffset: 8, className: "min-w-[160px]", children: options.map((opt) => {
+      const Icon = opt.icon;
+      const isActive = opt.id === theme;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
+        {
+          onSelect: () => onThemeChange(opt.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: opt.label }),
+            isActive && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "text-fg-brand" })
+          ]
+        },
+        opt.id
+      );
+    }) })
+  ] });
+}
+function Header({
+  breadcrumb,
+  onCollapseMenu,
+  menuCollapsed,
+  showSearch = true,
+  searchPlaceholder = "Buscar...",
+  searchShortcut = "⌘K",
+  commandGroups,
+  commandPlaceholder,
+  commandEmptyMessage,
+  notifications,
+  messages,
+  theme,
+  onThemeChange,
+  themeOptions,
+  rightSlot,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: chipGroup.cn(headerRoot(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerLeft(), children: [
+      onCollapseMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: chipGroup.cn(
+              headerIconBtn({ variant: "ghost" }),
+              "hidden md:inline-flex text-fg-muted hover:text-fg-default"
+            ),
+            onClick: onCollapseMenu,
+            "aria-label": menuCollapsed ? "Expandir menu" : "Colapsar menu",
+            title: menuCollapsed ? "Expandir menu" : "Colapsar menu",
+            children: menuCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { size: 20, strokeWidth: 1.7 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 20, strokeWidth: 1.7 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: chipGroup.cn(
+              headerIconBtn({ variant: "ghost" }),
+              "md:hidden text-fg-muted hover:text-fg-default"
+            ),
+            onClick: onCollapseMenu,
+            "aria-label": "Abrir menu",
+            title: "Menu",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { size: 20, strokeWidth: 1.8 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: chipGroup.cn(headerDivider(), "hidden md:block"),
+            "aria-hidden": "true"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HeaderBreadcrumb,
+        {
+          items: breadcrumb,
+          mobileShowLastOnly: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerRight(), children: [
+      rightSlot,
+      showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+        HeaderSearch,
+        {
+          placeholder: searchPlaceholder,
+          shortcut: searchShortcut,
+          commandGroups,
+          commandPlaceholder,
+          commandEmptyMessage
+        }
+      ),
+      theme !== void 0 && onThemeChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsxRuntime.jsx(
+        HeaderThemeSwitcher,
+        {
+          theme,
+          onThemeChange,
+          options: themeOptions
+        }
+      ) }),
+      messages && /* @__PURE__ */ jsxRuntime.jsx(HeaderMessages, { config: messages }),
+      notifications && /* @__PURE__ */ jsxRuntime.jsx(HeaderNotifications, { config: notifications })
+    ] })
+  ] });
+}
+const sidebarRoot = chipGroup.tv({
+  base: "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans",
+  variants: {
+    mobile: {
+      true: "fixed inset-y-0 left-0 z-50 h-screen w-auto transition-transform duration-200 ease-out",
+      false: ""
+    },
+    mobileOpen: {
+      true: "translate-x-0",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Mobile + fechado: empurra pra fora da tela
+    { mobile: true, mobileOpen: false, class: "-translate-x-full" }
+  ]
+});
+chipGroup.tv({
+  base: "relative flex h-full w-fit bg-bg-sidebar text-fg-default font-sans"
+});
+const sidebarMobileBackdrop = chipGroup.tv({
+  base: "fixed inset-0 z-40 bg-overlay-scrim transition-opacity duration-200"
+});
+const sidebarMobileCloseBtn = chipGroup.tv({
+  base: [
+    "absolute top-[14px] right-[14px] z-10",
+    "w-form-sm h-form-sm rounded-radius-md grid place-items-center",
+    "bg-transparent border-0 cursor-pointer",
+    "text-fg-muted",
+    "transition-colors duration-150",
+    "hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ]
+});
+const sidebarRail = chipGroup.tv({
+  base: [
+    "flex flex-col items-center w-[64px] flex-none",
+    "h-full sticky top-0 z-30",
+    "gap-gp-sm py-pad-md",
+    "bg-bg-sidebar border-r border-border-sidebar"
+  ]
+});
+const sidebarRailBrand = chipGroup.tv({
+  base: [
+    "w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
+    "bg-bg-brand text-fg-on-brand mb-pad-sm",
+    "transition-opacity hover:opacity-90"
+  ]
+});
+const sidebarRailList = chipGroup.tv({
+  base: "flex flex-col items-center gap-gp-sm flex-1"
+});
+const sidebarRailItem = chipGroup.tv({
+  base: [
+    "group/rail-item relative w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
+    "bg-transparent border-0 cursor-pointer",
+    "text-fg-muted",
+    "transition-colors duration-150",
+    "hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ],
+  variants: {
+    active: {
+      // Light: bg sidebar-accent (= branco via token), ícone mantém cor padrão (sem brand).
+      // Dark: bg sidebar-accent (alpha-8), ícone ganha fg-brand.
+      true: "bg-bg-sidebar-accent dark:text-fg-brand"
+    }
+  }
+});
+const sidebarRailActiveBar = chipGroup.tv({
+  base: [
+    "absolute -left-pad-2xl top-pad-md bottom-pad-md w-[3px]",
+    "rounded-r-radius-sm bg-bg-brand"
+  ]
+});
+const sidebarRailTooltip = chipGroup.tv({
+  base: [
+    "pointer-events-none absolute left-full ml-[14px] top-1/2 -translate-y-1/2",
+    "px-pad-md py-[5px] rounded-radius-sm",
+    "bg-fg-default text-bg-sidebar",
+    "text-[11.5px] font-semibold tracking-[0.01em] whitespace-nowrap",
+    "opacity-0 group-hover/rail-item:opacity-100",
+    "transition-opacity duration-150 z-50",
+    "shadow-sh-md"
+  ]
+});
+const sidebarRailAdd = chipGroup.tv({
+  base: [
+    "w-form-lg h-form-lg rounded-radius-xl grid place-items-center",
+    "text-fg-muted bg-transparent border-0 cursor-pointer mt-pad-xs opacity-70",
+    "transition-[opacity,background-color,color] duration-150",
+    "hover:opacity-100 hover:bg-bg-sidebar-accent-hover hover:text-fg-brand",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ]
+});
+const sidebarRailUser = chipGroup.tv({
+  base: "mt-auto"
+});
+const sidebarRailUserDefault = chipGroup.tv({
+  base: [
+    "grid place-items-center w-9 h-9 rounded-full",
+    // tracking-[0.02em] preserva tracking original (preset usa +0.06em)
+    "bg-bg-brand text-fg-on-brand font-bold text-[11px] uppercase tracking-[0.02em]"
+  ]
+});
+const sidebarPanel = chipGroup.tv({
+  base: [
+    "w-[264px] flex-none h-full sticky top-0 flex flex-col overflow-hidden",
+    "bg-bg-sidebar border-r border-border-sidebar",
+    "transition-[width,opacity,border-color] duration-200 ease-out"
+  ],
+  variants: {
+    collapsed: {
+      true: "w-0 border-r-0 opacity-0 pointer-events-none"
+    },
+    /** Quando true: overlay absoluto sobre o conteúdo (hover-to-expand). */
+    floating: {
+      true: "absolute left-[64px] top-0 h-full z-40"
+    }
+  }
+});
+const sidebarPanelHeader = chipGroup.tv({
+  base: "flex items-center h-[60px] flex-none px-[14px] border-b border-border-sidebar"
+});
+const sidebarPanelTitle = chipGroup.tv({
+  base: [
+    "flex-1 min-w-0 inline-flex items-center gap-gp-sm",
+    "py-pad-sm px-pad-md rounded-radius-md",
+    "bg-transparent border-0 cursor-pointer text-left",
+    "font-bold text-fg-default text-[14.5px]",
+    "transition-colors hover:bg-bg-sidebar-accent-hover",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ]
+});
+const sidebarPanelBody = chipGroup.tv({
+  base: "flex-1 overflow-y-auto p-[14px] scrollbar-thin"
+});
+const sidebarPanelGroup = chipGroup.tv({
+  base: "flex flex-col gap-px"
+});
+const sidebarItem = chipGroup.tv({
+  base: [
+    "flex items-center gap-[11px] h-form-lg w-full px-pad-xl rounded-radius-md",
+    "text-fg-default text-[13px] font-medium text-left no-underline cursor-pointer",
+    "bg-transparent border-0",
+    "transition-colors duration-150",
+    // Hover usa sidebar-accent-hover (mineral subtle no light, alpha-12 no dark) —
+    // assim fica distinto do active (sidebar-accent = white no light).
+    "hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ],
+  variants: {
+    active: {
+      // Light: sidebar-accent (= white via token) + brand text + shadow.
+      // Dark: sidebar-accent (alpha-8) + brand text + sem shadow.
+      true: [
+        "bg-bg-sidebar-accent text-fg-brand font-semibold shadow-sh-sm",
+        "dark:shadow-sh-none"
+      ]
+    },
+    subitem: {
+      true: "h-form-sm px-pad-lg text-[12.5px] text-fg-muted hover:text-fg-default"
+    }
+  },
+  compoundVariants: [
+    {
+      subitem: true,
+      active: true,
+      class: "bg-bg-sidebar-accent text-fg-default shadow-sh-none"
+    }
+  ]
+});
+const sidebarItemIcon = chipGroup.tv({
+  base: "flex-none w-[17px] h-[17px] text-fg-muted transition-colors",
+  variants: {
+    active: {
+      true: "text-fg-brand"
+    },
+    parentActive: {
+      true: "text-fg-brand"
+    }
+  }
+});
+const sidebarItemText = chipGroup.tv({
+  base: "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"
+});
+const sidebarPill = chipGroup.tv({
+  base: [
+    "inline-flex items-center justify-center flex-none",
+    "min-w-[22px] h-[22px] px-[7px] rounded-radius-sm",
+    // tracking-[0.02em] e leading-none preservam visual original (preset usa +0.06em e lineHeight 14px)
+    "text-[11px] font-bold leading-none tracking-[0.02em] tabular-nums"
+  ],
+  variants: {
+    kind: {
+      // Light: consome border-sidebar (mineral-200, warm) — combina com sidebar mineral-100.
+      // Dark: bg-muted (alpha-white subtle).
+      default: "bg-border-sidebar text-fg-muted dark:bg-bg-muted",
+      counter: "bg-border-sidebar text-fg-muted dark:bg-bg-brand dark:text-fg-on-brand",
+      success: "bg-bg-success-muted text-fg-success dark:bg-bg-brand dark:text-fg-on-brand"
+    },
+    active: {
+      true: "bg-bg-muted-hover text-fg-default dark:bg-bg-muted-hover dark:text-fg-default"
+    }
+  },
+  defaultVariants: { kind: "default" }
+});
+const sidebarSubgroupRoot = chipGroup.tv({
+  base: "flex flex-col gap-px"
+});
+const sidebarSubgroupChev = chipGroup.tv({
+  base: "flex-none w-[13px] h-[13px] text-fg-muted ml-auto transition-transform duration-200",
+  variants: {
+    collapsed: {
+      true: "-rotate-90"
+    }
+  }
+});
+const sidebarSubgroupList = chipGroup.tv({
+  base: [
+    "flex flex-col gap-px overflow-hidden",
+    "ml-pad-xl pl-[14px] py-pad-2xs",
+    "border-l border-border-sidebar",
+    "transition-[max-height,opacity,padding] duration-200 ease-out"
+  ],
+  variants: {
+    collapsed: {
+      true: "max-h-0 opacity-0 py-0",
+      false: "max-h-[400px] opacity-100"
+    }
+  },
+  defaultVariants: { collapsed: false }
+});
+const sidebarSection = chipGroup.tv({
+  base: "flex flex-col gap-px pt-[18px] mt-pad-xl border-t border-border-sidebar"
+});
+const sidebarSectionHeader = chipGroup.tv({
+  base: [
+    "flex items-center gap-gp-sm px-pad-lg pt-pad-sm pb-pad-md",
+    "bg-transparent border-0 text-left cursor-pointer select-none w-full",
+    "text-[10px] font-bold uppercase tracking-[0.06em] text-fg-default",
+    "transition-colors hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary rounded-radius-sm",
+    // Dark: enfraquecer (mais sutil)
+    "dark:text-fg-muted dark:font-medium dark:opacity-70"
+  ]
+});
+const sidebarSectionChev = chipGroup.tv({
+  base: "flex-none w-[12px] h-[12px] transition-transform duration-200",
+  variants: {
+    collapsed: {
+      true: "-rotate-90"
+    }
+  }
+});
+const sidebarSectionAdd = chipGroup.tv({
+  base: [
+    "ml-auto w-[18px] h-[18px] grid place-items-center rounded-radius-xs",
+    "text-fg-muted bg-transparent border-0 cursor-pointer text-[14px] leading-none",
+    "transition-colors hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
+  ]
+});
+const sidebarSectionList = chipGroup.tv({
+  base: "flex flex-col gap-px overflow-hidden transition-[max-height,opacity] duration-200 ease-out",
+  variants: {
+    collapsed: {
+      true: "max-h-0 opacity-0",
+      false: "max-h-[600px] opacity-100"
+    },
+    variant: {
+      bookmark: "",
+      chat: "gap-gp-sm"
+    }
+  },
+  defaultVariants: { collapsed: false, variant: "bookmark" }
+});
+const sidebarSectionItem = chipGroup.tv({
+  base: [
+    "flex items-center gap-[11px] h-form-sm w-full px-pad-lg rounded-radius-md",
+    "text-[12.5px] font-medium text-fg-muted no-underline cursor-pointer",
+    "bg-transparent border-0 text-left",
+    "transition-colors duration-150",
+    "hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
+  ]
+});
+const sidebarBookmarkDot = chipGroup.tv({
+  base: "flex-none w-[10px] h-[10px] rounded-full"
+});
+const sidebarChatAvatar = chipGroup.tv({
+  base: [
+    "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
+    // tracking-[0.02em] preserva o tracking original (preset usa +0.06em); leading-none mantém centralização vertical
+    "text-white text-[10px] font-bold uppercase tracking-[0.02em] leading-none"
+  ]
+});
+const sidebarChatStatus = chipGroup.tv({
+  base: "flex-none w-[7px] h-[7px] rounded-full ml-auto",
+  variants: {
+    status: {
+      online: "bg-fg-success",
+      offline: "bg-fg-subtle"
+    }
+  },
+  defaultVariants: { status: "online" }
+});
+function SidebarBrandIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size * (25 / 18),
+      viewBox: "0 0 46 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-label": "iGreen",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M23.164 30.3908C18.9426 33.9472 15.488 37.9995 14.4032 43.8429H14.4073C14.5406 43.8429 14.6469 43.8482 14.7351 43.8526C14.8818 43.86 14.9789 43.8649 15.068 43.8386C15.8605 43.5936 16.6564 43.3583 17.4522 43.123C19.3184 42.5713 21.1848 42.0195 23.009 41.3416C32.3202 37.8861 35.2732 29.344 32.2837 19.9864C32.2369 19.9956 32.1889 20.0014 32.1404 20.0072C32.0324 20.0204 31.9238 20.0336 31.8309 20.083C30.7722 20.6536 29.7117 21.2208 28.6512 21.7879C25.7732 23.3269 22.8951 24.8663 20.0519 26.4727C17.0665 28.1586 14.8314 30.5925 13.7466 34.006C13.7044 34.1395 13.5982 34.2516 13.5398 34.3134C13.5245 34.3293 13.5127 34.342 13.5059 34.3507C13.1946 34.0579 12.9032 33.742 12.6157 33.4305C11.9956 32.7583 11.395 32.1074 10.6591 31.7569C8.30519 30.6325 5.89307 29.6329 3.45529 28.6228C2.48425 28.2202 1.50909 27.8162 0.532006 27.4018C-0.683422 31.5972 0.20163 35.225 3.0036 38.3864C5.54867 41.2617 8.72989 42.485 12.6372 42.279C11.9072 38.8362 10.1329 36.2047 7.93458 33.8001C9.89561 34.8394 10.9816 36.6237 12.1043 38.469C12.6255 39.3256 13.1549 40.1952 13.7832 41.0095C15.5819 36.0574 18.5797 32.4674 23.164 30.3908ZM18.3593 48.1644C17.3457 48.1644 16.524 49.0113 16.524 50.0562C16.524 51.1009 17.3457 51.9478 18.3593 51.9478H33.6948C34.7084 51.9478 35.5301 51.1009 35.5301 50.0562C35.5301 49.0113 34.7084 48.1644 33.6948 48.1644H18.3593ZM18.2779 54.7121C18.2779 53.6673 19.0996 52.8204 20.1132 52.8204H31.8593C32.8731 52.8204 33.6948 53.6673 33.6948 54.7121C33.6948 55.7568 32.8731 56.6039 31.8593 56.6039H20.1132C19.0996 56.6039 18.2779 55.7568 18.2779 54.7121ZM21.4161 57.3921C20.5164 57.3921 19.7869 58.144 19.7869 59.0716C19.7869 59.8346 20.2376 60.5206 20.9249 60.8039L22.4227 61.4216C22.7004 61.536 22.946 61.72 23.1376 61.9567C24.5776 63.7379 27.2319 63.7379 28.6719 61.9567C28.8634 61.72 29.109 61.536 29.3867 61.4216L30.8846 60.8039C31.5719 60.5206 32.0226 59.8346 32.0226 59.0716C32.0226 58.144 31.2931 57.3921 30.3933 57.3921H21.4161Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M44.6078 8.96738C45.0034 8.58801 45.3999 8.20795 45.7978 7.82772H45.7937C45.7145 7.72076 45.6474 7.62532 45.5867 7.53882C45.4751 7.38013 45.3846 7.25152 45.2788 7.13705C45.2014 7.05134 45.1245 6.96498 45.0476 6.87858C44.7386 6.53188 44.4293 6.18462 44.0858 5.87783C39.8486 2.08758 34.8311 0.289299 29.3028 0.0366203C23.2801 -0.237139 17.5271 0.992601 12.6525 4.78709C5.81257 10.1145 3.26295 17.4129 4.20688 26.101C4.313 27.0907 4.86457 27.5708 5.73095 27.8193C8.29274 28.5562 10.7771 29.4659 12.9181 31.2853C12.9839 31.2072 13.0497 31.1297 13.1153 31.0521C14.3138 29.6385 15.4412 28.3083 14.7323 26.2401C14.6277 25.9331 14.5969 25.6008 14.5662 25.268C14.5502 25.0939 14.5342 24.9198 14.5076 24.7493C13.2041 16.499 18.8019 9.38173 26.9165 8.92689C31.4397 8.67 35.3295 10.144 38.6923 13.2268C38.9498 13.4626 39.6035 13.6774 39.7588 13.5342C41.3958 12.0464 42.9959 10.5126 44.6078 8.96738ZM19.2274 44.0715C19.0668 44.13 18.88 44.1982 18.6507 44.2775C18.8702 44.3799 19.0457 44.4679 19.1938 44.5423C19.454 44.6729 19.6304 44.7615 19.8153 44.8124C28.404 47.1833 36.4696 45.8736 43.9797 41.0264C44.4986 40.6935 44.9806 39.8177 44.9889 39.1901C45.0334 35.5838 45.021 31.9754 45.0085 28.3664C45.0029 26.6821 44.997 24.9976 44.997 23.313C44.997 22.5592 44.7111 22.294 43.9674 22.3066C41.6833 22.3488 39.3952 22.3697 37.1111 22.2982C36.0651 22.2644 35.7872 22.6435 35.8036 23.6711C35.8302 25.2672 35.826 26.8634 35.8221 28.4595C35.8179 30.0556 35.8138 31.6517 35.8404 33.2478C35.8607 34.5828 35.4726 35.4294 34.1855 35.9642C33.0701 36.4274 31.9097 37.0424 31.0721 37.9014C27.9422 41.1064 24.1136 42.8162 19.9173 43.8438C19.7115 43.8947 19.5103 43.9682 19.2274 44.0715Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarRail({
+  contexts,
+  activeContextId,
+  onContextChange,
+  brand,
+  user,
+  showAdd = false,
+  onAddClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: chipGroup.cn(sidebarRail(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", className: sidebarRailBrand(), "aria-label": "Home", children: brand ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarBrandIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sidebarRailList(), children: [
+      contexts.map((ctx) => {
+        const Icon = ctx.icon;
+        const isActive = activeContextId === ctx.id;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: sidebarRailItem({ active: isActive }),
+            onClick: () => onContextChange(ctx.id),
+            "aria-label": ctx.label,
+            "aria-current": isActive ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, strokeWidth: 1.7 }),
+              isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarRailActiveBar(), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarRailTooltip(), children: ctx.label })
+            ]
+          },
+          ctx.id
+        );
+      }),
+      showAdd && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: sidebarRailAdd(),
+          onClick: onAddClick,
+          "aria-label": "Adicionar contexto",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16, strokeWidth: 2 })
+        }
+      )
+    ] }),
+    user !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarRailUser(), children: user ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarRailUserDefault(), children: "SV" }) })
+  ] });
+}
+const SidebarItem = React.forwardRef(
+  ({ item, active, subitem, iconBrand, onClick, className }, ref) => {
+    const Icon = item.icon;
+    const classes = chipGroup.cn(sidebarItem({ active, subitem }), className);
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      Icon && /* @__PURE__ */ jsxRuntime.jsx(
+        Icon,
+        {
+          size: subitem ? 15 : 17,
+          strokeWidth: 1.7,
+          className: sidebarItemIcon({ active, parentActive: iconBrand })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name }),
+      item.badge && /* @__PURE__ */ jsxRuntime.jsx(SidebarPill, { kind: item.badgeKind, active, children: item.badge })
+    ] });
+    const handleClick = (e) => {
+      if (item.onClick) item.onClick(e);
+      onClick?.(e);
+    };
+    if (item.href) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          href: item.href,
+          className: classes,
+          onClick: handleClick,
+          "aria-current": active ? "page" : void 0,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        onClick: handleClick,
+        "aria-current": active ? "page" : void 0,
+        children: content
+      }
+    );
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+function SidebarPill({
+  kind,
+  active,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: chipGroup.cn(sidebarPill({ kind, active }), className), children });
+}
+function SidebarSubgroup({
+  item,
+  activeItemHref,
+  onItemClick,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className
+}) {
+  const hasActiveChild = item.subitems?.some(
+    (s) => s.href !== void 0 && s.href === activeItemHref
+  );
+  const [internalOpen, setInternalOpen] = React.useState(
+    defaultOpen ?? item.defaultOpen ?? hasActiveChild ?? false
+  );
+  const isOpen = open ?? internalOpen;
+  const collapsed = !isOpen;
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(sidebarSubgroupRoot(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: chipGroup.cn(sidebarItem(), "select-none"),
+        onClick: () => setOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-controls": `subgroup-${item.name}`,
+        children: [
+          Icon && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon,
+            {
+              size: 17,
+              strokeWidth: 1.7,
+              className: sidebarItemIcon({ parentActive: hasActiveChild })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              size: 13,
+              strokeWidth: 2,
+              className: sidebarSubgroupChev({ collapsed })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: `subgroup-${item.name}`, className: sidebarSubgroupList({ collapsed }), children: item.subitems?.map((sub) => /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItem,
+      {
+        item: sub,
+        subitem: true,
+        active: sub.href !== void 0 && sub.href === activeItemHref,
+        onClick: () => onItemClick?.(sub)
+      },
+      sub.href ?? sub.name
+    )) })
+  ] });
+}
+function SidebarSection({
+  section,
+  open,
+  onOpenChange,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(section.defaultOpen ?? true);
+  const isOpen = open ?? internalOpen;
+  const collapsed = !isOpen;
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(sidebarSection(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: sidebarSectionHeader(),
+        onClick: () => setOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-controls": `section-${section.id}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              size: 12,
+              strokeWidth: 2,
+              className: sidebarSectionChev({ collapsed })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: section.label }),
+          section.onAdd && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              className: sidebarSectionAdd(),
+              onClick: (e) => {
+                e.stopPropagation();
+                section.onAdd?.();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  section.onAdd?.();
+                }
+              },
+              "aria-label": `Adicionar em ${section.label}`,
+              children: "+"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        id: `section-${section.id}`,
+        className: sidebarSectionList({ collapsed, variant: section.variant }),
+        children: [
+          section.variant === "bookmark" && section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            SidebarSectionLink,
+            {
+              href: item.href,
+              onClick: item.onClick,
+              title: item.name,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: sidebarBookmarkDot(),
+                    style: { backgroundColor: item.color },
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name })
+              ]
+            },
+            item.name
+          )),
+          section.variant === "chat" && section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            SidebarSectionLink,
+            {
+              href: item.href,
+              onClick: item.onClick,
+              title: `Conversar com ${item.name}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: sidebarChatAvatar(),
+                    style: { backgroundColor: item.color },
+                    children: item.initials
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: sidebarItemText(), children: item.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: sidebarChatStatus({ status: item.status }),
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            item.name
+          ))
+        ]
+      }
+    )
+  ] });
+}
+function SidebarSectionLink({
+  href,
+  onClick,
+  title,
+  children
+}) {
+  const handleClick = (e) => {
+    if (!href || href === "#") e.preventDefault();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: href ?? "#",
+      className: sidebarSectionItem(),
+      onClick: handleClick,
+      title,
+      children
+    }
+  );
+}
+function SidebarPanel({
+  context,
+  collapsed,
+  floating,
+  activeItemHref,
+  onItemClick,
+  contexts,
+  onContextChange,
+  onTitleClick,
+  children,
+  className
+}) {
+  const hasSwitcher = contexts && contexts.length > 1 && onContextChange;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: chipGroup.cn(sidebarPanel({ collapsed, floating }), className),
+      "aria-hidden": collapsed,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarPanelHeader(), children: hasSwitcher ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: sidebarPanelTitle(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis", children: context.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronDown,
+              {
+                size: 14,
+                strokeWidth: 2,
+                className: "flex-none w-[14px] h-[14px] text-fg-muted"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", sideOffset: 6, className: "min-w-[220px]", children: contexts.map((ctx) => {
+            const Icon = ctx.icon;
+            const isActive = ctx.id === context.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onContextChange?.(ctx.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 text-fg-muted", strokeWidth: 1.7 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: ctx.label }),
+                  isActive && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4 text-fg-brand", strokeWidth: 2 })
+                ]
+              },
+              ctx.id
+            );
+          }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: sidebarPanelTitle(), onClick: onTitleClick, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis", children: context.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              size: 14,
+              strokeWidth: 2,
+              className: "flex-none w-[14px] h-[14px] text-fg-muted"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarPanelBody(), children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarPanelGroup(), children: context.items.map((item) => {
+            if (item.subitems && item.subitems.length > 0) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarSubgroup,
+                {
+                  item,
+                  activeItemHref,
+                  onItemClick
+                },
+                item.name
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarItem,
+              {
+                item,
+                active: item.href !== void 0 && item.href === activeItemHref,
+                onClick: () => onItemClick?.(item)
+              },
+              item.href ?? item.name
+            );
+          }) }),
+          context.sections?.map((section) => /* @__PURE__ */ jsxRuntime.jsx(SidebarSection, { section }, section.id))
+        ] }) })
+      ]
+    }
+  );
+}
+function useControllable(controlledValue, defaultValue, onChange) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    const handler = (e) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function MenuSidebar({
+  contexts,
+  brand,
+  user,
+  showRailAdd,
+  onRailAddClick,
+  activeContextId,
+  defaultActiveContextId,
+  onContextChange,
+  activeItemHref,
+  defaultActiveItemHref,
+  onItemClick,
+  panelCollapsed,
+  defaultPanelCollapsed,
+  onPanelCollapseChange,
+  expandOnHover = true,
+  onPanelTitleClick,
+  mobileOpen,
+  defaultMobileOpen,
+  onMobileOpenChange,
+  mobileBreakpoint = "(max-width: 767px)",
+  className
+}) {
+  const isMobile = useMediaQuery(mobileBreakpoint);
+  const [ctxId, setCtxId] = useControllable(
+    activeContextId,
+    defaultActiveContextId ?? contexts[0]?.id ?? "",
+    onContextChange
+  );
+  const [itemHref, setItemHref] = useControllable(
+    activeItemHref,
+    defaultActiveItemHref ?? "",
+    () => {
+    }
+  );
+  const [collapsed] = useControllable(
+    panelCollapsed,
+    defaultPanelCollapsed ?? false,
+    onPanelCollapseChange
+  );
+  const [openMobile, setOpenMobile] = useControllable(
+    mobileOpen,
+    defaultMobileOpen ?? false,
+    onMobileOpenChange
+  );
+  const [hoverExpanded, setHoverExpanded] = React.useState(false);
+  const [hoverExiting, setHoverExiting] = React.useState(false);
+  const exitTimerRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+    };
+  }, []);
+  const shouldFloat = !isMobile && !!expandOnHover && collapsed && (hoverExpanded || hoverExiting);
+  const activeContext = contexts.find((c) => c.id === ctxId) ?? contexts[0];
+  const handleItemClick = (item) => {
+    if (item.href && activeItemHref === void 0) {
+      setItemHref(item.href);
+    }
+    onItemClick?.(item);
+    if (isMobile && item.href) setOpenMobile(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isMobile && openMobile && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: sidebarMobileBackdrop(),
+        onClick: () => setOpenMobile(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chipGroup.cn(
+          sidebarRoot({ mobile: isMobile, mobileOpen: isMobile && openMobile }),
+          className
+        ),
+        onMouseEnter: () => {
+          if (!isMobile && expandOnHover && collapsed) {
+            if (exitTimerRef.current) {
+              clearTimeout(exitTimerRef.current);
+              exitTimerRef.current = null;
+            }
+            setHoverExiting(false);
+            setHoverExpanded(true);
+          }
+        },
+        onMouseLeave: () => {
+          setHoverExpanded(false);
+          if (!isMobile && expandOnHover && collapsed) {
+            setHoverExiting(true);
+            if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+            exitTimerRef.current = setTimeout(() => {
+              setHoverExiting(false);
+              exitTimerRef.current = null;
+            }, 200);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarRail,
+            {
+              contexts,
+              activeContextId: ctxId,
+              onContextChange: setCtxId,
+              brand,
+              user,
+              showAdd: showRailAdd,
+              onAddClick: onRailAddClick
+            }
+          ),
+          activeContext && /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarPanel,
+            {
+              context: activeContext,
+              collapsed: isMobile ? false : hoverExpanded ? false : collapsed,
+              floating: shouldFloat,
+              activeItemHref: itemHref,
+              onItemClick: handleItemClick,
+              contexts,
+              onContextChange: setCtxId,
+              onTitleClick: onPanelTitleClick
+            }
+          ),
+          isMobile && openMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: sidebarMobileCloseBtn(),
+              onClick: () => setOpenMobile(false),
+              "aria-label": "Fechar menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, strokeWidth: 1.7 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const Avatar = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Root,
+  {
+    ref,
+    className: chipGroup.cn(
+      "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
+const AvatarImage = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Image,
+  {
+    ref,
+    className: chipGroup.cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
+const AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Fallback,
+  {
+    ref,
+    className: chipGroup.cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-bg-muted text-fg-muted text-caption-md",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
+function deriveInitials(name) {
+  return name.split(" ").filter(Boolean).map((p) => p[0]).join("").slice(0, 2).toUpperCase();
+}
+function UserMenu({
+  user,
+  layout,
+  onLayoutChange,
+  layoutOptions,
+  theme,
+  onThemeChange,
+  themeOptions,
+  onSettings,
+  onLogout
+}) {
+  const initials = user.initials ?? deriveInitials(user.name);
+  const hasLayout = !!(layoutOptions && layoutOptions.length > 0);
+  const hasTheme = !!(themeOptions && themeOptions.length > 0);
+  const hasGroups = hasLayout || hasTheme || !!onSettings;
+  const currentLayoutLabel = hasLayout && layout ? layoutOptions.find((o) => o.id === layout)?.label : void 0;
+  const currentThemeLabel = hasTheme && theme ? themeOptions.find((o) => o.id === theme)?.label : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Menu do usuário (${user.name})`,
+        className: [
+          "grid place-items-center w-9 h-9 rounded-full shrink-0",
+          "bg-bg-brand text-fg-on-brand text-[11px] font-bold uppercase tracking-[0.02em]",
+          "cursor-pointer transition-opacity duration-150",
+          "hover:opacity-90",
+          "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
+          "data-[state=open]:ring-4 data-[state=open]:ring-ring-secondary"
+        ].join(" "),
+        style: user.avatarColor ? { background: user.avatarColor } : void 0,
+        children: user.avatarSrc ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-9", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-transparent text-fg-on-brand", children: initials })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: initials })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuContent,
+      {
+        side: "right",
+        align: "end",
+        sideOffset: 12,
+        className: "min-w-[240px]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md px-pad-lg py-pad-md", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Avatar,
+              {
+                className: "size-9 shrink-0",
+                style: user.avatarColor ? { background: user.avatarColor } : void 0,
+                children: [
+                  user.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
+                  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-bg-brand text-fg-on-brand text-[12px] font-bold uppercase", children: initials })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-fg-default truncate", children: user.name }),
+              user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-muted truncate", children: user.email })
+            ] })
+          ] }),
+          hasGroups && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+          hasLayout && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Layout" }),
+              currentLayoutLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-[11px] text-fg-subtle", children: currentLayoutLabel })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuRadioGroup,
+              {
+                value: layout,
+                onValueChange: onLayoutChange,
+                children: layoutOptions.map((opt) => {
+                  const Icon = opt.icon;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.label })
+                  ] }, opt.id);
+                })
+              }
+            ) })
+          ] }),
+          hasTheme && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema" }),
+              currentThemeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-[11px] text-fg-subtle", children: currentThemeLabel })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuRadioGroup,
+              {
+                value: theme,
+                onValueChange: onThemeChange,
+                children: themeOptions.map((opt) => {
+                  const Icon = opt.icon;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.label })
+                  ] }, opt.id);
+                })
+              }
+            ) })
+          ] }),
+          onSettings && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: onSettings, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Configurações" })
+          ] }),
+          onLogout && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: onLogout, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sair" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const root = chipGroup.tv({
+  base: [
+    "flex h-screen w-full bg-bg-canvas",
+    "overflow-hidden"
+    // garante que sidebar + main não vazem viewport
+  ]
+});
+const main = chipGroup.tv({
+  base: [
+    "flex flex-col flex-1 min-w-0",
+    "overflow-hidden"
+  ]
+});
+const body = chipGroup.tv({
+  base: [
+    "flex flex-col flex-1 min-h-0",
+    "overflow-auto scrollbar-thin"
+  ]
+});
+const bodyInner = chipGroup.tv({
+  base: [
+    "flex flex-col flex-1 min-h-0 w-full mx-auto",
+    "gap-gp-4xl p-pad-6xl"
+  ],
+  variants: {
+    layout: {
+      fluid: "max-w-full",
+      compact: "max-w-[var(--container-main-content-max)]"
+    },
+    /**
+     * Em mobile (<md):
+     *   - `false` (default): padding reduzido pra 18px (telas pequenas
+     *     precisam respiro mínimo).
+     *   - `true`: padding zero — útil pra patterns "app feel" (chat,
+     *     navegação por overlays fullscreen) onde a page controla o
+     *     próprio padding interno.
+     */
+    mobileEdgeToEdge: {
+      true: "max-md:p-0",
+      false: "max-md:p-[18px]"
+    }
+  },
+  defaultVariants: {
+    layout: "fluid",
+    mobileEdgeToEdge: false
+  }
+});
+function AppShell({
+  // Sidebar
+  contexts,
+  defaultActiveContextId,
+  activeContextId,
+  onContextChange,
+  defaultActiveItemHref,
+  activeItemHref,
+  onItemClick,
+  // Header
+  breadcrumb,
+  commandGroups,
+  commandPlaceholder,
+  commandEmptyMessage,
+  searchPlaceholder,
+  notifications,
+  messages,
+  theme,
+  onThemeChange,
+  themeOptions,
+  headerRightSlot,
+  // User menu
+  user,
+  layout,
+  onLayoutChange,
+  layoutOptions,
+  onSettings,
+  onLogout,
+  // Menu collapse (controlled/uncontrolled)
+  menuCollapsed: controlledCollapsed,
+  defaultMenuCollapsed = false,
+  onMenuCollapseChange,
+  // Body
+  children,
+  bodyClassName,
+  mobileEdgeToEdge,
+  className
+}) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultMenuCollapsed);
+  const menuCollapsed = controlledCollapsed ?? internalCollapsed;
+  const toggleMenuCollapsed = React.useCallback(() => {
+    const next = !menuCollapsed;
+    if (controlledCollapsed === void 0) setInternalCollapsed(next);
+    onMenuCollapseChange?.(next);
+  }, [menuCollapsed, controlledCollapsed, onMenuCollapseChange]);
+  const userNode = user ? /* @__PURE__ */ jsxRuntime.jsx(
+    UserMenu,
+    {
+      user,
+      layout,
+      onLayoutChange,
+      layoutOptions,
+      theme,
+      onThemeChange,
+      themeOptions,
+      onSettings,
+      onLogout
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chipGroup.cn(root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MenuSidebar,
+      {
+        contexts,
+        activeContextId,
+        defaultActiveContextId,
+        onContextChange,
+        activeItemHref,
+        defaultActiveItemHref,
+        onItemClick,
+        user: userNode,
+        panelCollapsed: menuCollapsed,
+        onPanelCollapseChange: (next) => {
+          if (controlledCollapsed === void 0) setInternalCollapsed(next);
+          onMenuCollapseChange?.(next);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: main(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Header,
+        {
+          breadcrumb,
+          onCollapseMenu: toggleMenuCollapsed,
+          menuCollapsed,
+          commandGroups,
+          commandPlaceholder,
+          commandEmptyMessage,
+          searchPlaceholder,
+          notifications,
+          messages,
+          theme,
+          onThemeChange,
+          themeOptions,
+          rightSlot: headerRightSlot
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: chipGroup.cn(body(), bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: bodyInner({
+            layout: layout === "compact" ? "compact" : "fluid",
+            mobileEdgeToEdge: mobileEdgeToEdge ?? false
+          }),
+          children
+        }
+      ) })
+    ] })
+  ] });
+}
+AppShell.displayName = "AppShell";
+exports.AppShell = AppShell;
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Header = Header;
+exports.HeaderBreadcrumb = HeaderBreadcrumb;
+exports.HeaderMessages = HeaderMessages;
+exports.HeaderNotifications = HeaderNotifications;
+exports.HeaderSearch = HeaderSearch;
+exports.HeaderThemeSwitcher = HeaderThemeSwitcher;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
+exports.MenuSidebar = MenuSidebar;
+exports.SidebarBrandIcon = SidebarBrandIcon;
+exports.SidebarItem = SidebarItem;
+exports.SidebarPanel = SidebarPanel;
+exports.SidebarPill = SidebarPill;
+exports.SidebarRail = SidebarRail;
+exports.SidebarSection = SidebarSection;
+exports.SidebarSubgroup = SidebarSubgroup;
+exports.UserMenu = UserMenu;
+exports.useControllable = useControllable;
+exports.useMediaQuery = useMediaQuery;
+//# sourceMappingURL=app-shell-BNTvOETJ.mjs.map