@q9labsai/chalk-ui 4.1.0 → 4.1.1

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   Input: () => Input,
   Menu: () => Menu,
   MenuContent: () => MenuContent,
+  MenuGroup: () => MenuGroup,
   MenuGroupLabel: () => MenuGroupLabel,
   MenuItem: () => MenuItem,
   MenuRadioGroup: () => MenuRadioGroup,
@@ -286,6 +287,9 @@ function Input({ className, type, label, error, icon, iconPosition = "left", siz
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { cva as cva3 } from "class-variance-authority";
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -325,6 +329,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/menu.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Menu(props) {
@@ -343,7 +369,7 @@ var menuContentVariants = cva3("z-50 min-w-(--anchor-width) origin-(--transform-
   defaultVariants: { tone: "default" }
 });
 function MenuContent({ className, tone, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx5(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx5(MenuPrimitive.Positioner, { className: "z-50", side, sideOffset, align, alignOffset, children: /* @__PURE__ */ jsx5(MenuPrimitive.Popup, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "menu-content", className: cn("chalk-root", menuContentVariants({ tone }), className), ...props, children }) }) });
 }
 var menuItemClassName = "data-highlighted:bg-current/8 relative flex w-full cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
@@ -359,6 +385,9 @@ function MenuRadioItem({ className, children, ...props }) {
     /* @__PURE__ */ jsx5(MenuPrimitive.RadioItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) }) })
   ] });
 }
+function MenuGroup(props) {
+  return /* @__PURE__ */ jsx5(MenuPrimitive.Group, { "data-slot": "menu-group", ...props });
+}
 function MenuGroupLabel({ className, ...props }) {
   return /* @__PURE__ */ jsx5(MenuPrimitive.GroupLabel, { "data-slot": "menu-group-label", className: cn("px-2 pt-1.5 pb-1 font-mono text-[10px] tracking-[0.08em] uppercase opacity-60", className), ...props });
 }
@@ -418,13 +447,13 @@ function matchMobileQuery() {
   return typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_QUERY) : null;
 }
 function useIsMobile() {
-  const subscribe = React4.useCallback((onChange) => {
+  const subscribe2 = React4.useCallback((onChange) => {
     const query = matchMobileQuery();
     query?.addEventListener("change", onChange);
     return () => query?.removeEventListener("change", onChange);
   }, []);
   return React4.useSyncExternalStore(
-    subscribe,
+    subscribe2,
     () => matchMobileQuery()?.matches ?? false,
     () => false
   );
@@ -455,7 +484,7 @@ function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx7(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs5(
     TooltipPrimitive.Popup,
     {
@@ -518,8 +547,8 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, cla
 }
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "icon", title = "Navigation", className, children, ...props }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const portalTheme = usePortalTheme();
   if (isMobile) {
-    const portalTheme = resolvePortalThemeFromDocument();
     return /* @__PURE__ */ jsx8(Drawer.Root, { open: openMobile, onOpenChange: setOpenMobile, swipeDirection: side, children: /* @__PURE__ */ jsxs6(Drawer.Portal, { children: [
       /* @__PURE__ */ jsx8(Drawer.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
       /* @__PURE__ */ jsx8(Drawer.Viewport, { className: cn("fixed inset-y-0 z-50 flex", side === "left" ? "left-0" : "right-0"), children: /* @__PURE__ */ jsxs6(
@@ -1031,7 +1060,7 @@ var ToastAction = React13.forwardRef(function ToastAction2({ className, ...props
 });
 function ToastViewport({ className, children, ...props }) {
   const { toasts } = ToastPrimitive.useToastManager();
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsxs9(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
     children,
     toasts.map((toastObject) => {
@@ -1176,6 +1205,7 @@ export {
   Input,
   Menu,
   MenuContent,
+  MenuGroup,
   MenuGroupLabel,
   MenuItem,
   MenuRadioGroup,

package/dist/lib/use-portal-theme.d.ts

@@ -0,0 +1,3 @@
+import { type ThemeMode } from "./theme";
+export declare function usePortalTheme(defaultTheme?: ThemeMode): ThemeMode;
+//# sourceMappingURL=use-portal-theme.d.ts.map

package/dist/lib/use-portal-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-portal-theme.d.ts","sourceRoot":"","sources":["../../src/lib/use-portal-theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AA4BzE,wBAAgB,cAAc,CAAC,YAAY,GAAE,SAAmB,GAAG,SAAS,CAG3E"}

package/dist/menu.d.ts

@@ -10,7 +10,9 @@ declare function MenuContent({ className, tone, side, sideOffset, align, alignOf
 declare function MenuItem({ className, ...props }: MenuPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
 declare function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
 declare function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react/jsx-runtime").JSX.Element;
+/** Owns the labelled section a `MenuGroupLabel` names; the label throws without it. */
+declare function MenuGroup(props: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
 declare function MenuGroupLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
 declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
-export { Menu, MenuContent, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger };
+export { Menu, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger };
 //# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,iBAAS,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAE5C;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,2CAEtD;AAED,QAAA,MAAM,mBAAmB;;8EAQvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAErL,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAe,EAAE,UAAc,EAAE,KAAe,EAAE,WAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYhJ;AAKD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAElE;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE5D;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAWtF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAE5E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,iBAAS,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAE5C;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,2CAEtD;AAED,QAAA,MAAM,mBAAmB;;8EAQvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAErL,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAe,EAAE,UAAc,EAAE,KAAe,EAAE,WAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYhJ;AAKD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAElE;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE5D;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAWtF;AAED,uFAAuF;AACvF,iBAAS,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,2CAElD;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAE5E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}

package/dist/menu.js

@@ -11,6 +11,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -50,6 +53,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/menu.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Menu(props) {
@@ -68,7 +93,7 @@ var menuContentVariants = cva("z-50 min-w-(--anchor-width) origin-(--transform-o
   defaultVariants: { tone: "default" }
 });
 function MenuContent({ className, tone, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenuPrimitive.Positioner, { className: "z-50", side, sideOffset, align, alignOffset, children: /* @__PURE__ */ jsx(MenuPrimitive.Popup, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "menu-content", className: cn("chalk-root", menuContentVariants({ tone }), className), ...props, children }) }) });
 }
 var menuItemClassName = "data-highlighted:bg-current/8 relative flex w-full cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
@@ -84,6 +109,9 @@ function MenuRadioItem({ className, children, ...props }) {
     /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) }) })
   ] });
 }
+function MenuGroup(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Group, { "data-slot": "menu-group", ...props });
+}
 function MenuGroupLabel({ className, ...props }) {
   return /* @__PURE__ */ jsx(MenuPrimitive.GroupLabel, { "data-slot": "menu-group-label", className: cn("px-2 pt-1.5 pb-1 font-mono text-[10px] tracking-[0.08em] uppercase opacity-60", className), ...props });
 }
@@ -93,6 +121,7 @@ function MenuSeparator({ className, ...props }) {
 export {
   Menu,
   MenuContent,
+  MenuGroup,
   MenuGroupLabel,
   MenuItem,
   MenuRadioGroup,

package/dist/sidebar.js

@@ -21,18 +21,21 @@ function matchMobileQuery() {
   return typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_QUERY) : null;
 }
 function useIsMobile() {
-  const subscribe = React.useCallback((onChange) => {
+  const subscribe2 = React.useCallback((onChange) => {
     const query = matchMobileQuery();
     query?.addEventListener("change", onChange);
     return () => query?.removeEventListener("change", onChange);
   }, []);
   return React.useSyncExternalStore(
-    subscribe,
+    subscribe2,
     () => matchMobileQuery()?.matches ?? false,
     () => false
   );
 }
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -72,6 +75,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore2(subscribe, read, () => defaultTheme);
+}
+
 // src/tooltip.tsx
 import "react";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
@@ -97,7 +122,7 @@ function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Popup,
     {
@@ -160,8 +185,8 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, cla
 }
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "icon", title = "Navigation", className, children, ...props }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const portalTheme = usePortalTheme();
   if (isMobile) {
-    const portalTheme = resolvePortalThemeFromDocument();
     return /* @__PURE__ */ jsx2(Drawer.Root, { open: openMobile, onOpenChange: setOpenMobile, swipeDirection: side, children: /* @__PURE__ */ jsxs2(Drawer.Portal, { children: [
       /* @__PURE__ */ jsx2(Drawer.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
       /* @__PURE__ */ jsx2(Drawer.Viewport, { className: cn("fixed inset-y-0 z-50 flex", side === "left" ? "left-0" : "right-0"), children: /* @__PURE__ */ jsxs2(

package/dist/styles.css

@@ -663,6 +663,36 @@
   --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.7);
 }
 
+[data-chalk][data-chalk-palette="cosmic-chalk"] {
+  --chalk-app-canvas: #080f20;
+  --chalk-app-chrome: #10182b;
+  --chalk-app-stage: #0b1427;
+  --chalk-app-panel: #10182b;
+  --chalk-app-tile-base: #10182b;
+  --chalk-app-tile-color-strength: 18%;
+  --chalk-app-text: #f4ecd7;
+  --chalk-app-text-muted: #aeb8c9;
+  --chalk-app-line: #2c3d59;
+  --chalk-app-line-strong: #415571;
+  --chalk-app-control: #121e34;
+  --chalk-app-control-hover: #192944;
+  --chalk-app-control-group: #0c162a;
+  --chalk-app-control-primary: #1b3953;
+  --chalk-app-control-primary-hover: #244b68;
+  --chalk-app-control-active: #172b45;
+  --chalk-app-control-active-line: #8fdcff;
+  --chalk-app-control-active-text: #f4ecd7;
+  --chalk-app-message-remote: #17243c;
+  --chalk-app-message-local: #1b3953;
+  --chalk-app-message-local-text: #f4ecd7;
+  --chalk-app-input: #0c1629;
+  --chalk-app-danger: #ff9ba8;
+  --chalk-app-danger-hover: #ffb4be;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --chalk-app-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.34);
+  --chalk-app-shadow-control: 0 7px 22px rgba(0, 0, 0, 0.42);
+}
+
 [data-chalk][data-chalk-palette] {
   --background: var(--chalk-app-canvas);
   --foreground: var(--chalk-app-text);
@@ -716,67 +746,111 @@
   background-color: color-mix(in srgb, var(--chalk-participant-color) var(--chalk-app-tile-color-strength), var(--chalk-app-tile-base));
 }
 
-/* =============================================================================
-   Base Styles & Scoped Reset
-   ============================================================================= */
-
-:where([data-chalk], .chalk-root) {
-  font-family: var(--chalk-font-family);
-  color: var(--foreground);
-  background: var(--background);
-  line-height: 1.5;
-  font-size: 16px;
-  text-align: left;
-  text-transform: none;
-  letter-spacing: normal;
-  text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  isolation: isolate;
+[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] :where(button, a, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px dashed var(--chalk-focus, #8fdcff);
+  outline-offset: 2px;
 }
 
-:where([data-chalk], .chalk-root),
-:where([data-chalk], .chalk-root) *,
-:where([data-chalk], .chalk-root) *::before,
-:where([data-chalk], .chalk-root) *::after {
-  box-sizing: border-box;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
 }
 
-:where([data-chalk], .chalk-root) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
-  margin: 0;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before {
+  inset: 0;
+  opacity: 0.28;
+  background: radial-gradient(circle at 12% 18%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 76% 13%, #f5d88c 0 1px, transparent 1.7px), radial-gradient(circle at 88% 72%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 22% 84%, #f4ecd7 0 1px, transparent 1.7px);
 }
 
-:where([data-chalk], .chalk-root) :where(ul, ol) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+  inset: 9% 7%;
+  opacity: 0.14;
+  background: linear-gradient(24deg, transparent 0 49.4%, #8fdcff 49.6% 49.9%, transparent 50.1%), linear-gradient(156deg, transparent 0 49.6%, #f5d88c 49.8% 50%, transparent 50.2%);
 }
 
-:where([data-chalk], .chalk-root) :where(button, input, optgroup, select, textarea) {
-  font: inherit;
-  color: inherit;
-  letter-spacing: inherit;
-  text-transform: none;
-  margin: 0;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > * {
+  position: relative;
+  z-index: 1;
 }
 
-:where([data-chalk], .chalk-root) :where(button, [type="button"], [type="reset"], [type="submit"]) {
-  appearance: none;
-  -webkit-appearance: none;
+@media (prefers-reduced-motion: reduce) {
+  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
+  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+    opacity: 0.18;
+  }
 }
 
-:where([data-chalk], .chalk-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
-  display: block;
-  vertical-align: middle;
-}
+/* =============================================================================
+   Base Styles & Scoped Reset
 
-:where([data-chalk], .chalk-root) :where(img) {
-  max-width: 100%;
-  height: auto;
-}
+   Lives in the `base` layer so that utilities keep beating it. Unlayered, a
+   zero-specificity `:where([data-chalk])` reset still outranks every utility,
+   which silently strips `bg-*` and `text-*` from any element that opens a
+   chalk scope.
+   ============================================================================= */
+
+@layer base {
+  :where([data-chalk], .chalk-root) {
+    font-family: var(--chalk-font-family);
+    color: var(--foreground);
+    background: var(--background);
+    line-height: 1.5;
+    font-size: 16px;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    isolation: isolate;
+  }
 
-:where([data-chalk], .chalk-root) :where(video) {
-  max-width: 100%;
+  :where([data-chalk], .chalk-root),
+  :where([data-chalk], .chalk-root) *,
+  :where([data-chalk], .chalk-root) *::before,
+  :where([data-chalk], .chalk-root) *::after {
+    box-sizing: border-box;
+  }
+
+  :where([data-chalk], .chalk-root) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
+    margin: 0;
+  }
+
+  :where([data-chalk], .chalk-root) :where(ul, ol) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-chalk], .chalk-root) :where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: none;
+    margin: 0;
+  }
+
+  :where([data-chalk], .chalk-root) :where(button, [type="button"], [type="reset"], [type="submit"]) {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  :where([data-chalk], .chalk-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+
+  :where([data-chalk], .chalk-root) :where(img) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :where([data-chalk], .chalk-root) :where(video) {
+    max-width: 100%;
+  }
 }
 
 /* =============================================================================

package/dist/toast.js

@@ -4,6 +4,9 @@
 import * as React from "react";
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -43,6 +46,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -85,7 +110,7 @@ var ToastAction = React.forwardRef(function ToastAction2({ className, ...props }
 });
 function ToastViewport({ className, children, ...props }) {
   const { toasts } = ToastPrimitive.useToastManager();
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsxs(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
     children,
     toasts.map((toastObject) => {

package/dist/tooltip.js

@@ -11,6 +11,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -50,6 +53,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/tooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function TooltipProvider({ delay = 0, ...props }) {
@@ -73,7 +98,7 @@ function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Popup,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-ui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -179,7 +179,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
-    "@q9labsai/chalk-assets": "^4.1.0",
+    "@q9labsai/chalk-assets": "^4.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"