qstd 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.2] - 2025-11-24
+
+### Added
+
+- Added `useTheme` hook for managing light/dark theme
+  - Syncs with localStorage and across components using events
+  - Provides `theme`, `isManual` state and `toggleTheme`, `update` functions
+  - Available in `qstd/react`
+
+## [0.2.1] - 2025-11-24
+
+### Added
+
+- Added `Log` utility module with logging functions
+  - `log()` - Pretty print values with JSON.stringify
+  - `info()` - Log with [info] prefix
+  - `warn()` - Log with [warn] prefix
+  - `error()` - Log with [error] prefix
+  - Available in both `qstd/client` and `qstd/server`
+
 ## [0.2.0] - 2025-11-22
 
 ### Added

package/dist/client/index.cjs

@@ -516,6 +516,28 @@ var hexColor = () => {
   return hex;
 };
 
+// src/shared/log.ts
+var log_exports = {};
+__export(log_exports, {
+  error: () => error,
+  info: () => info,
+  log: () => log,
+  warn: () => warn
+});
+var stringify = (value) => JSON.stringify(value, null, 2);
+var log = (...values) => {
+  console.log(...values.map(stringify));
+};
+var info = (...values) => {
+  console.log("[info]", ...values.map(stringify));
+};
+var warn = (...values) => {
+  console.log("[warn]", ...values.map(stringify));
+};
+var error = (...values) => {
+  console.log("[error]", ...values.map(stringify));
+};
+
 // src/client/dom.ts
 var dom_exports = {};
 __export(dom_exports, {
@@ -560,7 +582,7 @@ var scrollIntoView = (el, options) => {
 var copy = async (text) => {
   try {
     await navigator.clipboard.writeText(text);
-  } catch (error) {
+  } catch (error2) {
     const textArea = document.createElement("textarea");
     textArea.value = text;
     textArea.style.position = "fixed";
@@ -581,6 +603,7 @@ exports.Dom = dom_exports;
 exports.Flow = flow_exports;
 exports.Int = int_exports;
 exports.List = list_exports;
+exports.Log = log_exports;
 exports.Money = money_exports;
 exports.Random = random_exports;
 exports.Str = str_exports;

package/dist/client/index.d.cts

@@ -1,4 +1,4 @@
-export { d as Dict, f as Flow, i as Int, l as List, m as Money, r as Random, s as Str, t as Time } from '../random-DMErOOdk.cjs';
+export { d as Dict, f as Flow, i as Int, l as List, a as Log, m as Money, r as Random, s as Str, t as Time } from '../log-DPBPow2d.cjs';
 import 'date-fns';
 
 /**

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-export { d as Dict, f as Flow, i as Int, l as List, m as Money, r as Random, s as Str, t as Time } from '../random-DMErOOdk.js';
+export { d as Dict, f as Flow, i as Int, l as List, a as Log, m as Money, r as Random, s as Str, t as Time } from '../log-DPBPow2d.js';
 import 'date-fns';
 
 /**

package/dist/client/index.js

@@ -514,6 +514,28 @@ var hexColor = () => {
   return hex;
 };
 
+// src/shared/log.ts
+var log_exports = {};
+__export(log_exports, {
+  error: () => error,
+  info: () => info,
+  log: () => log,
+  warn: () => warn
+});
+var stringify = (value) => JSON.stringify(value, null, 2);
+var log = (...values) => {
+  console.log(...values.map(stringify));
+};
+var info = (...values) => {
+  console.log("[info]", ...values.map(stringify));
+};
+var warn = (...values) => {
+  console.log("[warn]", ...values.map(stringify));
+};
+var error = (...values) => {
+  console.log("[error]", ...values.map(stringify));
+};
+
 // src/client/dom.ts
 var dom_exports = {};
 __export(dom_exports, {
@@ -558,7 +580,7 @@ var scrollIntoView = (el, options) => {
 var copy = async (text) => {
   try {
     await navigator.clipboard.writeText(text);
-  } catch (error) {
+  } catch (error2) {
     const textArea = document.createElement("textarea");
     textArea.value = text;
     textArea.style.position = "fixed";
@@ -574,4 +596,4 @@ var copy = async (text) => {
   }
 };
 
-export { dict_exports as Dict, dom_exports as Dom, flow_exports as Flow, int_exports as Int, list_exports as List, money_exports as Money, random_exports as Random, str_exports as Str, time_exports as Time };
+export { dict_exports as Dict, dom_exports as Dom, flow_exports as Flow, int_exports as Int, list_exports as List, log_exports as Log, money_exports as Money, random_exports as Random, str_exports as Str, time_exports as Time };

package/dist/{random-DMErOOdk.d.cts → log-DPBPow2d.d.cts}

@@ -444,4 +444,17 @@ declare namespace random {
   export { random_coinFlip as coinFlip, random_date as date, random_hexColor as hexColor, random_item as item, random_num as num, random_shuffle as shuffle };
 }
 
-export { dict as d, flow as f, int as i, list as l, money as m, random as r, str as s, time as t };
+declare const log: (...values: unknown[]) => void;
+declare const info: (...values: unknown[]) => void;
+declare const warn: (...values: unknown[]) => void;
+declare const error: (...values: unknown[]) => void;
+
+declare const log$1_error: typeof error;
+declare const log$1_info: typeof info;
+declare const log$1_log: typeof log;
+declare const log$1_warn: typeof warn;
+declare namespace log$1 {
+  export { log$1_error as error, log$1_info as info, log$1_log as log, log$1_warn as warn };
+}
+
+export { log$1 as a, dict as d, flow as f, int as i, list as l, money as m, random as r, str as s, time as t };

package/dist/{random-DMErOOdk.d.ts → log-DPBPow2d.d.ts}

@@ -444,4 +444,17 @@ declare namespace random {
   export { random_coinFlip as coinFlip, random_date as date, random_hexColor as hexColor, random_item as item, random_num as num, random_shuffle as shuffle };
 }
 
-export { dict as d, flow as f, int as i, list as l, money as m, random as r, str as s, time as t };
+declare const log: (...values: unknown[]) => void;
+declare const info: (...values: unknown[]) => void;
+declare const warn: (...values: unknown[]) => void;
+declare const error: (...values: unknown[]) => void;
+
+declare const log$1_error: typeof error;
+declare const log$1_info: typeof info;
+declare const log$1_log: typeof log;
+declare const log$1_warn: typeof warn;
+declare namespace log$1 {
+  export { log$1_error as error, log$1_info as info, log$1_log as log, log$1_warn as warn };
+}
+
+export { log$1 as a, dict as d, flow as f, int as i, list as l, money as m, random as r, str as s, time as t };

package/dist/react/index.cjs

@@ -3547,6 +3547,92 @@ var CompoundBlock = Object.assign(Block, {
 });
 var block_default = CompoundBlock;
 
+// src/react/use-theme/literals.ts
+var THEME_STORAGE_KEY = "theme";
+var THEME_STORE_STORAGE_KEY = "themeStore";
+var THEME_CHANGE_EVENT = "qstd:theme-change";
+
+// src/react/use-theme/fns.ts
+var getInitialTheme = () => {
+  if (typeof window === "undefined") return "light";
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === "light" || stored === "dark" ? stored : "light";
+};
+var getInitialStore = () => {
+  if (typeof window === "undefined") {
+    return { theme: "light", isManual: false };
+  }
+  try {
+    const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        theme: parsed.theme ?? getInitialTheme(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    theme: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    localStorage.setItem(THEME_STORE_STORAGE_KEY, JSON.stringify(store));
+    window.dispatchEvent(
+      new CustomEvent(THEME_CHANGE_EVENT, { detail: store })
+    );
+  } catch {
+  }
+};
+
+// src/react/use-theme/index.ts
+function useTheme() {
+  const [store, setStore] = React11__namespace.default.useState(getInitialStore);
+  React11__namespace.default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleStorageChange = (e) => {
+      if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
+        setStore(getInitialStore());
+      }
+    };
+    const handleThemeChange = (e) => {
+      const customEvent = e;
+      if (customEvent.detail) {
+        setStore(customEvent.detail);
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    };
+  }, []);
+  const update = (updates) => {
+    setStore((prev) => {
+      const next = { ...prev, ...updates };
+      saveStore(next);
+      return next;
+    });
+  };
+  const toggleTheme = (theme) => {
+    setStore((prev) => {
+      const next = {
+        theme: theme ?? (prev.theme === "light" ? "dark" : "light"),
+        isManual: true
+      };
+      saveStore(next);
+      return next;
+    });
+  };
+  return { ...store, update, toggleTheme };
+}
+
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
   const [debouncedValue, setDebouncedValue] = React11__namespace.default.useState(value);
@@ -3607,4 +3693,5 @@ function useMatchMedia2(queries, defaultValues = []) {
 exports.default = block_default;
 exports.useDebounce = useDebounce;
 exports.useMatchMedia = useMatchMedia2;
+exports.useTheme = useTheme;
 exports.useThrottle = useThrottle;

package/dist/react/index.d.cts

@@ -20991,6 +20991,23 @@ type BlockComponent = typeof Block & {
 };
 declare const CompoundBlock: BlockComponent;
 
+type Theme = "light" | "dark";
+type ThemeStore = {
+    theme: Theme;
+    isManual: boolean;
+};
+
+/**
+ * Hook to manage light/dark theme
+ * Syncs with localStorage and across components using events
+ */
+declare function useTheme(): {
+    update: (updates: Partial<ThemeStore>) => void;
+    toggleTheme: (theme?: "light" | "dark") => void;
+    theme: Theme;
+    isManual: boolean;
+};
+
 /**
  * React module - Block component, hooks, and types
  *
@@ -21033,4 +21050,4 @@ declare function useThrottle(value: string, interval?: number): string;
  */
 declare function useMatchMedia(queries: MediaQuery, defaultValues?: MatchedMedia): MatchedMedia;
 
-export { type MatchedMedia, type MediaQuery, type RadioOption, CompoundBlock as default, useDebounce, useMatchMedia, useThrottle };
+export { type MatchedMedia, type MediaQuery, type RadioOption, type Theme, type ThemeStore, CompoundBlock as default, useDebounce, useMatchMedia, useTheme, useThrottle };

package/dist/react/index.d.ts

@@ -20991,6 +20991,23 @@ type BlockComponent = typeof Block & {
 };
 declare const CompoundBlock: BlockComponent;
 
+type Theme = "light" | "dark";
+type ThemeStore = {
+    theme: Theme;
+    isManual: boolean;
+};
+
+/**
+ * Hook to manage light/dark theme
+ * Syncs with localStorage and across components using events
+ */
+declare function useTheme(): {
+    update: (updates: Partial<ThemeStore>) => void;
+    toggleTheme: (theme?: "light" | "dark") => void;
+    theme: Theme;
+    isManual: boolean;
+};
+
 /**
  * React module - Block component, hooks, and types
  *
@@ -21033,4 +21050,4 @@ declare function useThrottle(value: string, interval?: number): string;
  */
 declare function useMatchMedia(queries: MediaQuery, defaultValues?: MatchedMedia): MatchedMedia;
 
-export { type MatchedMedia, type MediaQuery, type RadioOption, CompoundBlock as default, useDebounce, useMatchMedia, useThrottle };
+export { type MatchedMedia, type MediaQuery, type RadioOption, type Theme, type ThemeStore, CompoundBlock as default, useDebounce, useMatchMedia, useTheme, useThrottle };

package/dist/react/index.js

@@ -3524,6 +3524,92 @@ var CompoundBlock = Object.assign(Block, {
 });
 var block_default = CompoundBlock;
 
+// src/react/use-theme/literals.ts
+var THEME_STORAGE_KEY = "theme";
+var THEME_STORE_STORAGE_KEY = "themeStore";
+var THEME_CHANGE_EVENT = "qstd:theme-change";
+
+// src/react/use-theme/fns.ts
+var getInitialTheme = () => {
+  if (typeof window === "undefined") return "light";
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === "light" || stored === "dark" ? stored : "light";
+};
+var getInitialStore = () => {
+  if (typeof window === "undefined") {
+    return { theme: "light", isManual: false };
+  }
+  try {
+    const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        theme: parsed.theme ?? getInitialTheme(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    theme: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    localStorage.setItem(THEME_STORE_STORAGE_KEY, JSON.stringify(store));
+    window.dispatchEvent(
+      new CustomEvent(THEME_CHANGE_EVENT, { detail: store })
+    );
+  } catch {
+  }
+};
+
+// src/react/use-theme/index.ts
+function useTheme() {
+  const [store, setStore] = React11__default.useState(getInitialStore);
+  React11__default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleStorageChange = (e) => {
+      if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
+        setStore(getInitialStore());
+      }
+    };
+    const handleThemeChange = (e) => {
+      const customEvent = e;
+      if (customEvent.detail) {
+        setStore(customEvent.detail);
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    };
+  }, []);
+  const update = (updates) => {
+    setStore((prev) => {
+      const next = { ...prev, ...updates };
+      saveStore(next);
+      return next;
+    });
+  };
+  const toggleTheme = (theme) => {
+    setStore((prev) => {
+      const next = {
+        theme: theme ?? (prev.theme === "light" ? "dark" : "light"),
+        isManual: true
+      };
+      saveStore(next);
+      return next;
+    });
+  };
+  return { ...store, update, toggleTheme };
+}
+
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
   const [debouncedValue, setDebouncedValue] = React11__default.useState(value);
@@ -3581,4 +3667,4 @@ function useMatchMedia2(queries, defaultValues = []) {
   return value;
 }
 
-export { block_default as default, useDebounce, useMatchMedia2 as useMatchMedia, useThrottle };
+export { block_default as default, useDebounce, useMatchMedia2 as useMatchMedia, useTheme, useThrottle };

package/dist/server/index.cjs

@@ -521,6 +521,28 @@ var hexColor = () => {
   return hex;
 };
 
+// src/shared/log.ts
+var log_exports = {};
+__export(log_exports, {
+  error: () => error,
+  info: () => info,
+  log: () => log,
+  warn: () => warn
+});
+var stringify = (value) => JSON.stringify(value, null, 2);
+var log = (...values) => {
+  console.log(...values.map(stringify));
+};
+var info = (...values) => {
+  console.log("[info]", ...values.map(stringify));
+};
+var warn = (...values) => {
+  console.log("[warn]", ...values.map(stringify));
+};
+var error = (...values) => {
+  console.log("[error]", ...values.map(stringify));
+};
+
 // src/server/file.ts
 var file_exports = {};
 __export(file_exports, {
@@ -535,6 +557,7 @@ exports.File = file_exports;
 exports.Flow = flow_exports;
 exports.Int = int_exports;
 exports.List = list_exports;
+exports.Log = log_exports;
 exports.Money = money_exports;
 exports.Random = random_exports;
 exports.Str = str_exports;

package/dist/server/index.d.cts

@@ -1,4 +1,4 @@
-export { d as Dict, f as Flow, i as Int, l as List, m as Money, r as Random, s as Str, t as Time } from '../random-DMErOOdk.cjs';
+export { d as Dict, f as Flow, i as Int, l as List, a as Log, m as Money, r as Random, s as Str, t as Time } from '../log-DPBPow2d.cjs';
 import 'date-fns';
 
 /**

package/dist/server/index.d.ts

@@ -1,4 +1,4 @@
-export { d as Dict, f as Flow, i as Int, l as List, m as Money, r as Random, s as Str, t as Time } from '../random-DMErOOdk.js';
+export { d as Dict, f as Flow, i as Int, l as List, a as Log, m as Money, r as Random, s as Str, t as Time } from '../log-DPBPow2d.js';
 import 'date-fns';
 
 /**

package/dist/server/index.js

@@ -515,6 +515,28 @@ var hexColor = () => {
   return hex;
 };
 
+// src/shared/log.ts
+var log_exports = {};
+__export(log_exports, {
+  error: () => error,
+  info: () => info,
+  log: () => log,
+  warn: () => warn
+});
+var stringify = (value) => JSON.stringify(value, null, 2);
+var log = (...values) => {
+  console.log(...values.map(stringify));
+};
+var info = (...values) => {
+  console.log("[info]", ...values.map(stringify));
+};
+var warn = (...values) => {
+  console.log("[warn]", ...values.map(stringify));
+};
+var error = (...values) => {
+  console.log("[error]", ...values.map(stringify));
+};
+
 // src/server/file.ts
 var file_exports = {};
 __export(file_exports, {
@@ -524,4 +546,4 @@ var readFile = (filePath, encoding = "utf-8") => {
   return fs.readFileSync(filePath, encoding);
 };
 
-export { dict_exports as Dict, file_exports as File, flow_exports as Flow, int_exports as Int, list_exports as List, money_exports as Money, random_exports as Random, str_exports as Str, time_exports as Time };
+export { dict_exports as Dict, file_exports as File, flow_exports as Flow, int_exports as Int, list_exports as List, log_exports as Log, money_exports as Money, random_exports as Random, str_exports as Str, time_exports as Time };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",
@@ -41,6 +41,22 @@
   "sideEffects": [
     "dist/react/index.css"
   ],
+  "scripts": {
+    "build": "panda codegen && panda cssgen && tsup && node scripts/inject-css-import.js",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build",
+    "prepare:local": "pnpm build && cd playground && pnpm prepare",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:all": "pnpx tsx tests/test-all.ts",
+    "test:block": "node tests/test-block.tsx",
+    "test:playground": "node tests/playground-e2e.mjs",
+    "typecheck": "tsc --noEmit",
+    "typecheck:perf": "tsc --noEmit --extendedDiagnostics",
+    "typecheck:trace": "tsc --noEmit --generateTrace ./performance/ts-trace",
+    "analyze:tsserver": "bash performance/analyze-tsserver.sh",
+    "lint": "eslint src --ext ts,tsx"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -93,20 +109,5 @@
   "bugs": {
     "url": "https://github.com/55cancri/qstd/issues"
   },
-  "homepage": "https://github.com/55cancri/qstd#readme",
-  "scripts": {
-    "build": "panda codegen && panda cssgen && tsup && node scripts/inject-css-import.js",
-    "dev": "tsup --watch",
-    "prepare:local": "pnpm build && cd playground && pnpm prepare",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:all": "pnpx tsx tests/test-all.ts",
-    "test:block": "node tests/test-block.tsx",
-    "test:playground": "node tests/playground-e2e.mjs",
-    "typecheck": "tsc --noEmit",
-    "typecheck:perf": "tsc --noEmit --extendedDiagnostics",
-    "typecheck:trace": "tsc --noEmit --generateTrace ./performance/ts-trace",
-    "analyze:tsserver": "bash performance/analyze-tsserver.sh",
-    "lint": "eslint src --ext ts,tsx"
-  }
-}
+  "homepage": "https://github.com/55cancri/qstd#readme"
+}