@deadragdoll/reactnu 0.1.76 → 0.1.78

package/dist/index.cjs

@@ -3177,6 +3177,7 @@ function writeStoredWindowSnapshot(windowStoreKey, snapshot) {
   } catch {
   }
 }
+var WINDOW_STORE_WRITE_DEBOUNCE_MS = 250;
 function resolveSavedWindowStyle(definition, mode, ownerCenteredStyle, index) {
   const snapshot = definition.onOpen?.() ?? readStoredWindowSnapshot(definition.windowStoreKey);
   const savedStyle = {};
@@ -3315,6 +3316,7 @@ function NuWindowProvider({
   const creationOrderRef = (0, import_react19.useRef)(0);
   const idRef = (0, import_react19.useRef)(0);
   const windowBoundsByIdRef = (0, import_react19.useRef)({});
+  const pendingWindowStoreWritesRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
   const [windows, setWindows] = (0, import_react19.useState)([]);
   const [windowBoundsById, setWindowBoundsById] = (0, import_react19.useState)({});
   const appHostMenuContext = (0, import_react19.useContext)(AppHostMenuContext);
@@ -3737,16 +3739,52 @@ function NuWindowProvider({
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
   (0, import_react19.useEffect)(() => {
+    const pendingWindowStoreWrites = pendingWindowStoreWritesRef.current;
+    const windowStoreKeyById = new Map(
+      windows.map((windowEntry) => [windowEntry.id, windowEntry.windowStoreKey])
+    );
+    for (const [id, pending] of pendingWindowStoreWrites) {
+      if (windowStoreKeyById.get(id) === pending.windowStoreKey) {
+        continue;
+      }
+      clearTimeout(pending.timeoutId);
+      pendingWindowStoreWrites.delete(id);
+      writeStoredWindowSnapshot(pending.windowStoreKey, pending.snapshot);
+    }
     for (const windowEntry of windows) {
       if (!windowEntry.windowStoreKey) {
         continue;
       }
-      writeStoredWindowSnapshot(
-        windowEntry.windowStoreKey,
-        resolveManagedWindowSnapshot(windowEntry, windowBoundsById)
+      const existing = pendingWindowStoreWrites.get(windowEntry.id);
+      if (existing) {
+        clearTimeout(existing.timeoutId);
+      }
+      const windowStoreKey = windowEntry.windowStoreKey;
+      const snapshot = resolveManagedWindowSnapshot(
+        windowEntry,
+        windowBoundsById
       );
+      const timeoutId = setTimeout(() => {
+        writeStoredWindowSnapshot(windowStoreKey, snapshot);
+        pendingWindowStoreWrites.delete(windowEntry.id);
+      }, WINDOW_STORE_WRITE_DEBOUNCE_MS);
+      pendingWindowStoreWrites.set(windowEntry.id, {
+        timeoutId,
+        windowStoreKey,
+        snapshot
+      });
     }
   }, [windowBoundsById, windows]);
+  (0, import_react19.useEffect)(() => {
+    const pendingWindowStoreWrites = pendingWindowStoreWritesRef.current;
+    return () => {
+      for (const entry of pendingWindowStoreWrites.values()) {
+        clearTimeout(entry.timeoutId);
+        writeStoredWindowSnapshot(entry.windowStoreKey, entry.snapshot);
+      }
+      pendingWindowStoreWrites.clear();
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
@@ -5046,7 +5084,7 @@ function NuIconGridItem({
     icon.contextMenuItems,
     icon
   );
-  const dragSource = useNuDragSource({
+  const { dragRef, isDragging } = useNuDragSource({
     disabled: icon.disabled,
     getItem: () => ({ data: icon, id: icon.id, type: "icon" }),
     onDropAccepted: (result) => {
@@ -5089,14 +5127,14 @@ function NuIconGridItem({
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
         className: "nu-icon-grid__icon",
-        "data-dragging": dragSource.isDragging || void 0,
+        "data-dragging": isDragging || void 0,
         "data-selected": manager.selectedIconId === icon.id || void 0,
         disabled: icon.disabled,
         onClick: handleClick,
         onContextMenu: handleContextMenu,
         onDoubleClick: icon.onDoubleClick,
         onKeyDown: handleKeyDown,
-        ref: dragSource.dragRef,
+        ref: (node) => dragRef(node),
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
@@ -10539,6 +10577,9 @@ var phosphorTheme = {
 var midnightTheme = {
   name: "midnight",
   label: "Midnight Slate",
+  desktopPatternMode: "coarse-dots",
+  fontFamily: '"Courier New", Courier, monospace',
+  fontSize: 16,
   tokens: {
     desktopBackground: "#1b2430",
     desktopPattern: "rgb(156 177 201 / 0.24)",
@@ -10548,10 +10589,10 @@ var midnightTheme = {
     chromeBackground: "#36547d",
     panelBackground: "#192c43",
     panelInsetBackground: "#111e2e",
-    titleBackground: "#0b2432",
-    menuBackground: "#1c2945",
-    titleText: "#c2d0e5",
-    textPrimary: "#6b9adb",
+    titleBackground: "#1b3550",
+    menuBackground: "#1a2337",
+    titleText: "#a8cbff",
+    textPrimary: "#b3d2ff",
     textMuted: "#65a8ec",
     textInverse: "#b7caf0",
     mainMenuText: "#b7caf0",
@@ -10560,7 +10601,7 @@ var midnightTheme = {
     buttonFace: "#5074af",
     buttonFaceAlt: "#3c5372",
     buttonDanger: "#4e0e15",
-    buttonSuccess: "#3c936d",
+    buttonSuccess: "#275214",
     buttonText: "#ffffff",
     fieldBackground: "#09111c",
     fieldText: "#627b9d",
@@ -10572,6 +10613,66 @@ var midnightTheme = {
     focusColor: "#af532c",
     windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  },
+  visualTokens: {
+    "--nu-glyph-cell-size": "1em",
+    "--nu-content-inset": "1em 1ch",
+    "--nu-control-height": "1.2em",
+    "--nu-space-xs": "0.25rem",
+    "--nu-space-sm": "0.5rem",
+    "--nu-space-md": "0.75rem",
+    "--nu-space-lg": "1rem",
+    "--nu-space-xl": "1.5rem",
+    "--nu-radius-none": "0",
+    "--nu-window-title-height": "calc(1em + 10px)",
+    "--nu-window-status-height": "1.35rem",
+    "--nu-window-title-controls-width": "7.8ch",
+    "--nu-window-title-icon-width": "1em",
+    "--nu-frame-thickness": "1px",
+    "--nu-rule-thickness": "1px",
+    "--nu-window-shadow-offset-x": "1ch",
+    "--nu-window-shadow-offset-y": "1em",
+    "--nu-button-shadow-x": "1ch",
+    "--nu-button-shadow-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-shadow-offset-x": "var(--nu-button-shadow-x)",
+    "--nu-button-shadow-offset-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-press-depth-x": "0.18em",
+    "--nu-button-press-depth-y": "0.1em",
+    "--nu-app-bar-height": "2.1rem",
+    "--nu-app-bar-padding": "0.2rem 0.35rem",
+    "--nu-toolbar-background": "#1b3550",
+    "--nu-toolbar-inset": "1ch",
+    "--nu-toolbar-border-color": "var(--nu-border-dark)",
+    "--nu-toolbar-border-style": "none",
+    "--nu-toolbar-border-width": "var(--nu-rule-thickness)",
+    "--nu-toolbar-separator-color": "#6184bd",
+    "--nu-toolbar-separator-style": "solid",
+    "--nu-toolbar-separator-width": "var(--nu-rule-thickness)",
+    "--nu-menu-divider-color": "#3d5a8a",
+    "--nu-menu-divider-style": "solid",
+    "--nu-menu-divider-width": "var(--nu-rule-thickness)",
+    "--nu-window-shadow-bg": "rgb(0 0 0 / 0.38)",
+    "--nu-window-inactive-border": "color-mix(in srgb, var(--nu-border-light) 78%, var(--nu-border-dark))",
+    "--nu-scrollbar-track": "transparent",
+    "--nu-scrollbar-thumb": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-bg": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-size": "0.875rem",
+    "--nu-icon-grid-icon-background": "transparent",
+    "--nu-icon-grid-icon-border-color": "transparent",
+    "--nu-icon-grid-icon-border-style": "solid",
+    "--nu-icon-grid-icon-opacity": "1",
+    "--nu-icon-grid-icon-selected-background": "var(--nu-color-title-bg)",
+    "--nu-icon-grid-icon-inactive-selected-background": "color-mix(in srgb, var(--nu-icon-grid-icon-selected-background) 65%, var(--nu-color-app-bg-alt))",
+    "--nu-icon-grid-icon-selected-border-color": "transparent",
+    "--nu-icon-grid-icon-selected-border-style": "none",
+    "--nu-icon-grid-icon-selected-opacity": "1",
+    "--nu-icon-grid-icon-focus-background": "#153051",
+    "--nu-icon-grid-icon-focus-border-color": "#5672bd",
+    "--nu-icon-grid-icon-focus-border-style": "solid",
+    "--nu-icon-grid-icon-focus-opacity": "1",
+    "--nu-icon-grid-icon-disabled-opacity": "0.6",
+    "--nu-icon-grid-icon-drag-opacity": "0.35",
+    "--nu-icon-grid-icon-drag-preview-opacity": "0.85"
   }
 };
 var grayscaleTheme = {
@@ -10660,7 +10761,8 @@ function getNuThemeStyle(theme) {
     "--nu-panel-shadow-color": theme.tokens.panelShadowColor,
     "--nu-focus-color": theme.tokens.focusColor ?? theme.tokens.borderAccent,
     "--nu-window-inactive-overlay": theme.tokens.windowInactiveOverlay,
-    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop
+    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop,
+    ...theme.visualTokens
   };
 }
 function getNuDesktopPatternStyle(mode) {
@@ -10716,9 +10818,9 @@ function NuThemeProvider({
   children,
   className,
   crtGlitch = false,
-  defaultDesktopPatternMode = "dot-grid",
-  defaultFontFamily = '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace',
-  defaultFontSize = 16,
+  defaultDesktopPatternMode,
+  defaultFontFamily,
+  defaultFontSize,
   defaultTheme = "classic",
   desktopPatternMode,
   fontFamily,
@@ -10731,10 +10833,17 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = (0, import_react49.useId)();
+  const defaultThemeDefinition = resolveNuTheme(theme ?? defaultTheme);
   const [internalTheme, setInternalTheme] = (0, import_react49.useState)(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react49.useState)(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = (0, import_react49.useState)(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = (0, import_react49.useState)(defaultFontSize);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react49.useState)(
+    () => defaultDesktopPatternMode ?? defaultThemeDefinition.desktopPatternMode ?? "dot-grid"
+  );
+  const [internalFontFamily, setInternalFontFamily] = (0, import_react49.useState)(
+    () => defaultFontFamily ?? defaultThemeDefinition.fontFamily ?? '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace'
+  );
+  const [internalFontSize, setInternalFontSize] = (0, import_react49.useState)(
+    () => defaultFontSize ?? defaultThemeDefinition.fontSize ?? 16
+  );
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;

package/dist/index.js

@@ -3125,6 +3125,7 @@ function writeStoredWindowSnapshot(windowStoreKey, snapshot) {
   } catch {
   }
 }
+var WINDOW_STORE_WRITE_DEBOUNCE_MS = 250;
 function resolveSavedWindowStyle(definition, mode, ownerCenteredStyle, index) {
   const snapshot = definition.onOpen?.() ?? readStoredWindowSnapshot(definition.windowStoreKey);
   const savedStyle = {};
@@ -3263,6 +3264,7 @@ function NuWindowProvider({
   const creationOrderRef = useRef8(0);
   const idRef = useRef8(0);
   const windowBoundsByIdRef = useRef8({});
+  const pendingWindowStoreWritesRef = useRef8(/* @__PURE__ */ new Map());
   const [windows, setWindows] = useState10([]);
   const [windowBoundsById, setWindowBoundsById] = useState10({});
   const appHostMenuContext = useContext7(AppHostMenuContext);
@@ -3685,16 +3687,52 @@ function NuWindowProvider({
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
   useEffect6(() => {
+    const pendingWindowStoreWrites = pendingWindowStoreWritesRef.current;
+    const windowStoreKeyById = new Map(
+      windows.map((windowEntry) => [windowEntry.id, windowEntry.windowStoreKey])
+    );
+    for (const [id, pending] of pendingWindowStoreWrites) {
+      if (windowStoreKeyById.get(id) === pending.windowStoreKey) {
+        continue;
+      }
+      clearTimeout(pending.timeoutId);
+      pendingWindowStoreWrites.delete(id);
+      writeStoredWindowSnapshot(pending.windowStoreKey, pending.snapshot);
+    }
     for (const windowEntry of windows) {
       if (!windowEntry.windowStoreKey) {
         continue;
       }
-      writeStoredWindowSnapshot(
-        windowEntry.windowStoreKey,
-        resolveManagedWindowSnapshot(windowEntry, windowBoundsById)
+      const existing = pendingWindowStoreWrites.get(windowEntry.id);
+      if (existing) {
+        clearTimeout(existing.timeoutId);
+      }
+      const windowStoreKey = windowEntry.windowStoreKey;
+      const snapshot = resolveManagedWindowSnapshot(
+        windowEntry,
+        windowBoundsById
       );
+      const timeoutId = setTimeout(() => {
+        writeStoredWindowSnapshot(windowStoreKey, snapshot);
+        pendingWindowStoreWrites.delete(windowEntry.id);
+      }, WINDOW_STORE_WRITE_DEBOUNCE_MS);
+      pendingWindowStoreWrites.set(windowEntry.id, {
+        timeoutId,
+        windowStoreKey,
+        snapshot
+      });
     }
   }, [windowBoundsById, windows]);
+  useEffect6(() => {
+    const pendingWindowStoreWrites = pendingWindowStoreWritesRef.current;
+    return () => {
+      for (const entry of pendingWindowStoreWrites.values()) {
+        clearTimeout(entry.timeoutId);
+        writeStoredWindowSnapshot(entry.windowStoreKey, entry.snapshot);
+      }
+      pendingWindowStoreWrites.clear();
+    };
+  }, []);
   return /* @__PURE__ */ jsx29(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
     /* @__PURE__ */ jsx29("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
@@ -5011,7 +5049,7 @@ function NuIconGridItem({
     icon.contextMenuItems,
     icon
   );
-  const dragSource = useNuDragSource({
+  const { dragRef, isDragging } = useNuDragSource({
     disabled: icon.disabled,
     getItem: () => ({ data: icon, id: icon.id, type: "icon" }),
     onDropAccepted: (result) => {
@@ -5054,14 +5092,14 @@ function NuIconGridItem({
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
         className: "nu-icon-grid__icon",
-        "data-dragging": dragSource.isDragging || void 0,
+        "data-dragging": isDragging || void 0,
         "data-selected": manager.selectedIconId === icon.id || void 0,
         disabled: icon.disabled,
         onClick: handleClick,
         onContextMenu: handleContextMenu,
         onDoubleClick: icon.onDoubleClick,
         onKeyDown: handleKeyDown,
-        ref: dragSource.dragRef,
+        ref: (node) => dragRef(node),
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
@@ -10588,6 +10626,9 @@ var phosphorTheme = {
 var midnightTheme = {
   name: "midnight",
   label: "Midnight Slate",
+  desktopPatternMode: "coarse-dots",
+  fontFamily: '"Courier New", Courier, monospace',
+  fontSize: 16,
   tokens: {
     desktopBackground: "#1b2430",
     desktopPattern: "rgb(156 177 201 / 0.24)",
@@ -10597,10 +10638,10 @@ var midnightTheme = {
     chromeBackground: "#36547d",
     panelBackground: "#192c43",
     panelInsetBackground: "#111e2e",
-    titleBackground: "#0b2432",
-    menuBackground: "#1c2945",
-    titleText: "#c2d0e5",
-    textPrimary: "#6b9adb",
+    titleBackground: "#1b3550",
+    menuBackground: "#1a2337",
+    titleText: "#a8cbff",
+    textPrimary: "#b3d2ff",
     textMuted: "#65a8ec",
     textInverse: "#b7caf0",
     mainMenuText: "#b7caf0",
@@ -10609,7 +10650,7 @@ var midnightTheme = {
     buttonFace: "#5074af",
     buttonFaceAlt: "#3c5372",
     buttonDanger: "#4e0e15",
-    buttonSuccess: "#3c936d",
+    buttonSuccess: "#275214",
     buttonText: "#ffffff",
     fieldBackground: "#09111c",
     fieldText: "#627b9d",
@@ -10621,6 +10662,66 @@ var midnightTheme = {
     focusColor: "#af532c",
     windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  },
+  visualTokens: {
+    "--nu-glyph-cell-size": "1em",
+    "--nu-content-inset": "1em 1ch",
+    "--nu-control-height": "1.2em",
+    "--nu-space-xs": "0.25rem",
+    "--nu-space-sm": "0.5rem",
+    "--nu-space-md": "0.75rem",
+    "--nu-space-lg": "1rem",
+    "--nu-space-xl": "1.5rem",
+    "--nu-radius-none": "0",
+    "--nu-window-title-height": "calc(1em + 10px)",
+    "--nu-window-status-height": "1.35rem",
+    "--nu-window-title-controls-width": "7.8ch",
+    "--nu-window-title-icon-width": "1em",
+    "--nu-frame-thickness": "1px",
+    "--nu-rule-thickness": "1px",
+    "--nu-window-shadow-offset-x": "1ch",
+    "--nu-window-shadow-offset-y": "1em",
+    "--nu-button-shadow-x": "1ch",
+    "--nu-button-shadow-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-shadow-offset-x": "var(--nu-button-shadow-x)",
+    "--nu-button-shadow-offset-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-press-depth-x": "0.18em",
+    "--nu-button-press-depth-y": "0.1em",
+    "--nu-app-bar-height": "2.1rem",
+    "--nu-app-bar-padding": "0.2rem 0.35rem",
+    "--nu-toolbar-background": "#1b3550",
+    "--nu-toolbar-inset": "1ch",
+    "--nu-toolbar-border-color": "var(--nu-border-dark)",
+    "--nu-toolbar-border-style": "none",
+    "--nu-toolbar-border-width": "var(--nu-rule-thickness)",
+    "--nu-toolbar-separator-color": "#6184bd",
+    "--nu-toolbar-separator-style": "solid",
+    "--nu-toolbar-separator-width": "var(--nu-rule-thickness)",
+    "--nu-menu-divider-color": "#3d5a8a",
+    "--nu-menu-divider-style": "solid",
+    "--nu-menu-divider-width": "var(--nu-rule-thickness)",
+    "--nu-window-shadow-bg": "rgb(0 0 0 / 0.38)",
+    "--nu-window-inactive-border": "color-mix(in srgb, var(--nu-border-light) 78%, var(--nu-border-dark))",
+    "--nu-scrollbar-track": "transparent",
+    "--nu-scrollbar-thumb": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-bg": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-size": "0.875rem",
+    "--nu-icon-grid-icon-background": "transparent",
+    "--nu-icon-grid-icon-border-color": "transparent",
+    "--nu-icon-grid-icon-border-style": "solid",
+    "--nu-icon-grid-icon-opacity": "1",
+    "--nu-icon-grid-icon-selected-background": "var(--nu-color-title-bg)",
+    "--nu-icon-grid-icon-inactive-selected-background": "color-mix(in srgb, var(--nu-icon-grid-icon-selected-background) 65%, var(--nu-color-app-bg-alt))",
+    "--nu-icon-grid-icon-selected-border-color": "transparent",
+    "--nu-icon-grid-icon-selected-border-style": "none",
+    "--nu-icon-grid-icon-selected-opacity": "1",
+    "--nu-icon-grid-icon-focus-background": "#153051",
+    "--nu-icon-grid-icon-focus-border-color": "#5672bd",
+    "--nu-icon-grid-icon-focus-border-style": "solid",
+    "--nu-icon-grid-icon-focus-opacity": "1",
+    "--nu-icon-grid-icon-disabled-opacity": "0.6",
+    "--nu-icon-grid-icon-drag-opacity": "0.35",
+    "--nu-icon-grid-icon-drag-preview-opacity": "0.85"
   }
 };
 var grayscaleTheme = {
@@ -10709,7 +10810,8 @@ function getNuThemeStyle(theme) {
     "--nu-panel-shadow-color": theme.tokens.panelShadowColor,
     "--nu-focus-color": theme.tokens.focusColor ?? theme.tokens.borderAccent,
     "--nu-window-inactive-overlay": theme.tokens.windowInactiveOverlay,
-    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop
+    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop,
+    ...theme.visualTokens
   };
 }
 function getNuDesktopPatternStyle(mode) {
@@ -10765,9 +10867,9 @@ function NuThemeProvider({
   children,
   className,
   crtGlitch = false,
-  defaultDesktopPatternMode = "dot-grid",
-  defaultFontFamily = '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace',
-  defaultFontSize = 16,
+  defaultDesktopPatternMode,
+  defaultFontFamily,
+  defaultFontSize,
   defaultTheme = "classic",
   desktopPatternMode,
   fontFamily,
@@ -10780,10 +10882,17 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = useId18();
+  const defaultThemeDefinition = resolveNuTheme(theme ?? defaultTheme);
   const [internalTheme, setInternalTheme] = useState32(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState32(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = useState32(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = useState32(defaultFontSize);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState32(
+    () => defaultDesktopPatternMode ?? defaultThemeDefinition.desktopPatternMode ?? "dot-grid"
+  );
+  const [internalFontFamily, setInternalFontFamily] = useState32(
+    () => defaultFontFamily ?? defaultThemeDefinition.fontFamily ?? '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace'
+  );
+  const [internalFontSize, setInternalFontSize] = useState32(
+    () => defaultFontSize ?? defaultThemeDefinition.fontSize ?? 16
+  );
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;

package/dist/theme/themes.d.ts

@@ -34,10 +34,15 @@ export type NuThemeTokens = {
     windowInactiveOverlay: string;
     windowModalBackdrop: string;
 };
+export type NuThemeVisualTokens = Record<`--nu-${string}`, string>;
 export type NuThemeDefinition = {
+    desktopPatternMode?: NuDesktopPatternMode;
+    fontFamily?: string;
+    fontSize?: number;
     name: string;
     label: string;
     tokens: NuThemeTokens;
+    visualTokens?: NuThemeVisualTokens;
 };
 export declare const nuThemes: {
     readonly classic: NuThemeDefinition;

package/docs/NuThemeProvider.md

@@ -63,7 +63,11 @@ Supported props:
 
 - Built-in themes are `classic` (default), `amber`, `phosphor`, `midnight`, and
   `grayscale`.
-- `midnight` is a dark slate-blue palette with blue chrome and a burnt-orange focus accent.
+- Built-in themes may also define default desktop pattern, typography, and
+  visual CSS-token overrides. Explicit provider props still take precedence.
+- `midnight` is a dark slate-blue palette with blue chrome, a burnt-orange
+  focus accent, coarse dots, and dedicated window, toolbar, menu, and icon-grid
+  chrome tokens.
 - `grayscale` is a high-contrast monochrome monitor palette. Semantic button variants use brightness rather than hue.
 - Theme tokens drive desktop, windowing, controls, selection, and inactive overlays.
 - Provider typography affects preview content, managed windows, dialogs, menus, and popup portals rendered inside the theme scope.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deadragdoll/reactnu",
-  "version": "0.1.76",
+  "version": "0.1.78",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",