@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/theme/index.d.ts

@@ -0,0 +1,11 @@
+import { initializeTheme as initialize } from "./initialize";
+import { ThemeProvider as Provider, useTheme as useThemeHook } from "./theme-provider";
+import { ThemeScript as Script } from "./theme-script";
+import { isThemePreference as isPref } from "./types";
+export type { ThemeInitializationOptions } from "./initialize";
+export type { ResolvedTheme, ThemeContextValue, ThemePreference, ThemeProviderProps, ThemeScriptProps, ThemeStorage, } from "./types";
+export declare const isThemePreference: typeof isPref;
+export declare const ThemeProvider: typeof Provider;
+export declare const useTheme: typeof useThemeHook;
+export declare const ThemeScript: typeof Script;
+export declare const initializeTheme: typeof initialize;

package/dist/theme/index.js

@@ -0,0 +1 @@
+import{initializeTheme as initialize}from"./initialize";import{ThemeProvider as Provider,useTheme as useThemeHook}from"./theme-provider";import{ThemeScript as Script}from"./theme-script";import{isThemePreference as isPref}from"./types";export const isThemePreference=isPref;export const ThemeProvider=Provider;export const useTheme=useThemeHook;export const ThemeScript=Script;export const initializeTheme=initialize;

package/dist/theme/initialize.d.ts

@@ -0,0 +1,4 @@
+import { type ResolvedTheme, type ThemeProviderProps } from "./types";
+export type ThemeInitializationOptions = Omit<ThemeProviderProps, "children">;
+/** Apply the initial client theme before createRoot renders. ThemeProvider owns later updates. */
+export declare function initializeTheme({ storageKey, defaultTheme, storage, }?: ThemeInitializationOptions): ResolvedTheme | null;

package/dist/theme/initialize.js

@@ -0,0 +1 @@
+import{applyRootTheme}from"./theme-root";import{DEFAULT_STORAGE_KEY,DEFAULT_THEME_PREFERENCE,defaultBrowserStorage,getSystemSnapshot,readStorage}from"./theme-storage";import{isThemePreference}from"./types";/** Apply the initial client theme before createRoot renders. ThemeProvider owns later updates. */export function initializeTheme({storageKey=DEFAULT_STORAGE_KEY,defaultTheme=DEFAULT_THEME_PREFERENCE,storage=defaultBrowserStorage}={}){if(typeof window==="undefined"||typeof document==="undefined"){return null;}const saved=readStorage(storage,storageKey);const preference=isThemePreference(saved)?saved:defaultTheme;const resolved=preference==="system"?getSystemSnapshot():preference;applyRootTheme(resolved);return resolved;}

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeContextValue, ThemeProviderProps } from "./types";
+export declare function ThemeProvider({ children, defaultTheme, storageKey, storage, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;

package/dist/theme/theme-provider.js

@@ -0,0 +1,4 @@
+"use client";import{createContext,useCallback,useContext,useMemo,useState,useSyncExternalStore}from"react";import{applyRootTheme}from"./theme-root";import{createPreferenceStore,DEFAULT_STORAGE_KEY,DEFAULT_THEME_PREFERENCE,defaultBrowserStorage,getServerSystemSnapshot,getSystemSnapshot,subscribeSystem}from"./theme-storage";import{getDarkThemeTokens}from"./theme-tokens";import{cleanThemeTransitionGuard}from"./theme-transition-guard";import{jsx as _jsx}from"react/jsx-runtime";let activeProviders=[];let rootSnapshot=null;function captureRootSnapshot(){const root=document.documentElement;const darkTokens=getDarkThemeTokens();const initialDarkTokens=new Set();for(const token of darkTokens){if(root.classList.contains(token)){initialDarkTokens.add(token);}}return{colorScheme:root.style.colorScheme,dataTheme:root.getAttribute("data-theme"),initialDarkTokens};}function restoreRootSnapshot(snapshot){const root=document.documentElement;if(snapshot.dataTheme===null){root.removeAttribute("data-theme");}else{root.setAttribute("data-theme",snapshot.dataTheme);}root.style.colorScheme=snapshot.colorScheme;const darkTokens=getDarkThemeTokens();for(const token of darkTokens){if(snapshot.initialDarkTokens.has(token)){root.classList.add(token);}else{root.classList.remove(token);}}}function registerOrUpdateProvider(id,theme){if(activeProviders.length===0){rootSnapshot=captureRootSnapshot();}activeProviders=activeProviders.filter(entry=>entry.id!==id);activeProviders.push({id,theme});applyRootTheme(theme);}function unregisterProvider(id){activeProviders=activeProviders.filter(entry=>entry.id!==id);if(activeProviders.length===0){if(rootSnapshot!==null){restoreRootSnapshot(rootSnapshot);rootSnapshot=null;}cleanThemeTransitionGuard();return;}const latest=activeProviders.at(-1);if(latest){applyRootTheme(latest.theme);}}const ThemeContext=createContext(null);export function ThemeProvider({children,defaultTheme=DEFAULT_THEME_PREFERENCE,storageKey=DEFAULT_STORAGE_KEY,storage}){const effectiveStorage=storage??defaultBrowserStorage;const[providerId]=useState(()=>Symbol("ThemeProvider"));const store=useMemo(()=>createPreferenceStore(effectiveStorage,storageKey,defaultTheme),[effectiveStorage,storageKey,defaultTheme]);// <html> follows the store and the system query inside their own
+// subscriptions, so a change lands before React re-renders. Unsubscribing
+// hands the root back to the next provider, or restores it.
+const subscribeRoot=useCallback(onStoreChange=>{const apply=()=>{const preference=store.getSnapshot();registerOrUpdateProvider(providerId,preference==="system"?getSystemSnapshot():preference);};const onChange=()=>{apply();onStoreChange();};apply();const stopStore=store.subscribe(onChange);const stopSystem=subscribeSystem(onChange);return()=>{stopStore();stopSystem();unregisterProvider(providerId);};},[providerId,store]);const theme=useSyncExternalStore(subscribeRoot,store.getSnapshot,store.getServerSnapshot);const systemTheme=useSyncExternalStore(subscribeSystem,getSystemSnapshot,getServerSystemSnapshot);const resolvedTheme=theme==="system"?systemTheme:theme;const setTheme=useCallback(next=>{store.setPreference(next);},[store]);const value=useMemo(()=>({resolvedTheme,setTheme,systemTheme,theme}),[resolvedTheme,setTheme,systemTheme,theme]);return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:value,children:children});}export function useTheme(){const context=useContext(ThemeContext);if(context===null){throw new Error("useTheme must be used within a ThemeProvider");}return context;}

package/dist/theme/theme-root.js

@@ -0,0 +1 @@
+import{getDarkThemeTokens}from"./theme-tokens";import{applyThemeTransitionGuard,finishThemeTransitionGuard}from"./theme-transition-guard";export function applyRootTheme(theme){const root=document.documentElement;const currentTheme=root.getAttribute("data-theme");const isThemeChange=currentTheme==="light"&&theme==="dark"||currentTheme==="dark"&&theme==="light";if(isThemeChange){applyThemeTransitionGuard();}if(root.getAttribute("data-theme")!==theme){root.setAttribute("data-theme",theme);}if(root.style.colorScheme!==theme){root.style.colorScheme=theme;}const darkTokens=getDarkThemeTokens();if(darkTokens.length>0){if(theme==="dark"){root.classList.add(...darkTokens);}else{root.classList.remove(...darkTokens);}}if(isThemeChange){finishThemeTransitionGuard();}}

package/dist/theme/theme-script.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "react";
+import type { ThemeScriptProps } from "./types";
+export declare function ThemeScript({ defaultTheme, nonce, storageKey, }: ThemeScriptProps): JSX.Element;

package/dist/theme/theme-script.js

@@ -0,0 +1 @@
+import{DEFAULT_STORAGE_KEY,DEFAULT_THEME_PREFERENCE}from"./theme-storage";import{getDarkThemeTokens}from"./theme-tokens";import{jsx as _jsx}from"react/jsx-runtime";function safeJson(value){return JSON.stringify(value).replace(/</gu,"\\u003c");}function buildThemeScript(storageKey,defaultTheme,darkClasses){const k=safeJson(storageKey);const d=safeJson(defaultTheme);const c=safeJson(darkClasses);return`(function(){try{var k=${k};var d=${d};var c=${c};var p=null;try{p=localStorage.getItem(k)}catch(e){}var t=(p==="light"||p==="dark"||p==="system")?p:d;var m=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;var isDark=t==="dark"||(t==="system"&&m);var r=isDark?"dark":"light";var el=document.documentElement;el.setAttribute("data-theme",r);el.style.colorScheme=r;if(isDark){for(var i=0;i<c.length;i++){if(c[i])el.classList.add(c[i])}}else{for(var i=0;i<c.length;i++){if(c[i])el.classList.remove(c[i])}}}catch(e){}})()`;}export function ThemeScript({defaultTheme=DEFAULT_THEME_PREFERENCE,nonce,storageKey=DEFAULT_STORAGE_KEY}){const darkClasses=getDarkThemeTokens();const scriptCode=buildThemeScript(storageKey,defaultTheme,darkClasses);return/*#__PURE__*/_jsx("script",{nonce:nonce,suppressHydrationWarning:true,children:scriptCode});}

package/dist/theme/theme-storage.js

@@ -0,0 +1 @@
+import{isThemePreference}from"./types";export const DEFAULT_THEME_PREFERENCE="system";export const DEFAULT_STORAGE_KEY="mizen-theme";const DARK_MEDIA_QUERY="(prefers-color-scheme: dark)";export function readStorage(storage,key){try{return storage.getItem(key);}catch(error){if(error instanceof DOMException){return null;}throw error;}}function writeStorage(storage,key,value){try{storage.setItem(key,value);}catch(error){if(error instanceof DOMException){return;}throw error;}}export const defaultBrowserStorage={getItem(key){if(typeof window==="undefined"){return null;}try{return window.localStorage.getItem(key);}catch(error){if(error instanceof DOMException){return null;}throw error;}},setItem(key,value){if(typeof window==="undefined"){return;}try{window.localStorage.setItem(key,value);}catch(error){if(error instanceof DOMException){return;}throw error;}}};const sharedPreferenceStore=new WeakMap();function getSharedPreference(storage,key){if(typeof window==="undefined"){return undefined;}return sharedPreferenceStore.get(storage)?.get(key);}function setSharedPreference(storage,key,preference){if(typeof window==="undefined"){return;}let keyMap=sharedPreferenceStore.get(storage);if(!keyMap){keyMap=new Map();sharedPreferenceStore.set(storage,keyMap);}keyMap.set(key,preference);}function isCustomPayload(value){if(typeof value!=="object"||value===null){return false;}const preference=Reflect.get(value,"preference");const sourceId=Reflect.get(value,"sourceId");return isThemePreference(preference)&&typeof sourceId==="symbol"&&Reflect.has(value,"storage");}function resolveCurrentPreference(storage,storageKey,defaultTheme){const shared=getSharedPreference(storage,storageKey);if(shared!==undefined){return shared;}const raw=readStorage(storage,storageKey);if(isThemePreference(raw)){return raw;}return defaultTheme;}export function createPreferenceStore(storage,storageKey,defaultTheme){const listeners=new Set();const eventName=`mizen-theme:${storageKey}`;const storeId=Symbol("storeId");let memoryPreference=resolveCurrentPreference(storage,storageKey,defaultTheme);const notify=()=>{for(const listener of listeners){listener();}};const subscribe=onStoreChange=>{listeners.add(onStoreChange);const handleStorage=event=>{if(storage!==defaultBrowserStorage||event.storageArea!==null&&event.storageArea!==window.localStorage||event.key!==storageKey&&event.key!==null){return;}const next=isThemePreference(event.newValue)?event.newValue:defaultTheme;setSharedPreference(storage,storageKey,next);memoryPreference=next;onStoreChange();};const handleCustomEvent=event=>{const{detail}=event;if(isCustomPayload(detail)&&detail.sourceId!==storeId&&detail.storage===storage){setSharedPreference(storage,storageKey,detail.preference);memoryPreference=detail.preference;onStoreChange();}};if(typeof window!=="undefined"){window.addEventListener("storage",handleStorage);window.addEventListener(eventName,handleCustomEvent);}const latest=resolveCurrentPreference(storage,storageKey,defaultTheme);if(memoryPreference!==latest){memoryPreference=latest;onStoreChange();}return()=>{listeners.delete(onStoreChange);if(typeof window!=="undefined"){window.removeEventListener("storage",handleStorage);window.removeEventListener(eventName,handleCustomEvent);}};};const getSnapshot=()=>memoryPreference;const getServerSnapshot=()=>defaultTheme;const setPreference=next=>{memoryPreference=next;setSharedPreference(storage,storageKey,next);writeStorage(storage,storageKey,next);notify();if(typeof window!=="undefined"){window.dispatchEvent(new CustomEvent(eventName,{detail:{preference:next,sourceId:storeId,storage}}));}};return{getServerSnapshot,getSnapshot,setPreference,subscribe};}export function subscribeSystem(callback){if(typeof window==="undefined"||typeof window.matchMedia==="undefined"){return()=>undefined;}const media=window.matchMedia(DARK_MEDIA_QUERY);media.addEventListener("change",callback);return()=>media.removeEventListener("change",callback);}export function getSystemSnapshot(){if(typeof window==="undefined"||typeof window.matchMedia==="undefined"){return"light";}return window.matchMedia(DARK_MEDIA_QUERY).matches?"dark":"light";}export function getServerSystemSnapshot(){return"light";}

package/dist/theme/theme-tokens.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{darkTheme}from"../styles/themes";const WHITESPACE_REGEX=/\s+/u;export function getDarkThemeTokens(){const result=props(darkTheme);const className=typeof result.className==="string"?result.className:"";return className.split(WHITESPACE_REGEX).filter(Boolean);}

package/dist/theme/theme-transition-guard.js

@@ -0,0 +1 @@
+export const THEME_GUARD_STYLE_ID="mizen-theme-transition-guard";export const THEME_GUARD_CSS=":root, *, *::before, *::after { transition-property: opacity, transform, translate, scale, rotate !important; }";let cleanupFrameId=null;let currentGuardElement=null;function cancelPendingCleanup(){if(cleanupFrameId!==null&&typeof cancelAnimationFrame==="function"){cancelAnimationFrame(cleanupFrameId);cleanupFrameId=null;}}function removeGuardElement(){if(currentGuardElement!==null){currentGuardElement.remove();currentGuardElement=null;return;}if(typeof document!=="undefined"){const existing=document.querySelector(`#${THEME_GUARD_STYLE_ID}`);if(existing!==null){existing.remove();}}}function getExistingNonce(){if(typeof document==="undefined"){return null;}const script=document.querySelector("script[nonce]");if(script===null){return null;}return script.nonce||script.getAttribute("nonce");}function forceStyleCalculation(){if(typeof document==="undefined"||!document.documentElement){return;}const _forced=document.documentElement.offsetHeight;}export function applyThemeTransitionGuard(){if(typeof document==="undefined"||!document.head){return;}cancelPendingCleanup();let style=currentGuardElement;if(style===null){const existing=document.querySelector(`#${THEME_GUARD_STYLE_ID}`);if(existing instanceof HTMLStyleElement){style=existing;}}if(style===null){style=document.createElement("style");style.id=THEME_GUARD_STYLE_ID;const nonce=getExistingNonce();if(nonce!==null&&nonce.length>0){style.setAttribute("nonce",nonce);}style.textContent=THEME_GUARD_CSS;document.head.appendChild(style);}currentGuardElement=style;forceStyleCalculation();}export function finishThemeTransitionGuard(){forceStyleCalculation();cancelPendingCleanup();if(typeof window==="undefined"||typeof requestAnimationFrame!=="function"){removeGuardElement();return;}cleanupFrameId=requestAnimationFrame(()=>{cleanupFrameId=requestAnimationFrame(()=>{removeGuardElement();cleanupFrameId=null;});});}export function cleanThemeTransitionGuard(){cancelPendingCleanup();removeGuardElement();}

package/dist/theme/types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export type ThemePreference = "light" | "dark" | "system";
+export type ResolvedTheme = "light" | "dark";
+export interface ThemeStorage {
+    readonly getItem: (key: string) => string | null;
+    readonly setItem: (key: string, value: string) => void;
+}
+export interface ThemeContextValue {
+    readonly resolvedTheme: ResolvedTheme;
+    readonly setTheme: (theme: ThemePreference) => void;
+    readonly systemTheme: ResolvedTheme;
+    readonly theme: ThemePreference;
+}
+export interface ThemeProviderProps {
+    readonly children?: ReactNode;
+    readonly defaultTheme?: ThemePreference;
+    readonly storage?: ThemeStorage;
+    readonly storageKey?: string;
+}
+export interface ThemeScriptProps {
+    readonly defaultTheme?: ThemePreference;
+    readonly nonce?: string;
+    readonly storageKey?: string;
+}
+export declare function isThemePreference(value: unknown): value is ThemePreference;

package/dist/theme/types.js

@@ -0,0 +1 @@
+export function isThemePreference(value){return value==="light"||value==="dark"||value==="system";}

package/dist/use-copy-to-clipboard.d.ts

@@ -0,0 +1,17 @@
+/** `copied` until the timeout passes; `failed` until the next attempt. */
+export type CopyStatus = "copied" | "failed" | "idle";
+export interface UseCopyToClipboardOptions {
+    /** Called with the text after a copy succeeds. */
+    onCopy?: (text: string) => void;
+    /** Milliseconds before `copied` returns to `idle`. 0 keeps it. */
+    timeout?: number;
+}
+/**
+ * Copies text to the clipboard and reports how it went, so a button can show
+ * a check and a status region can announce the result. Pass a promise to
+ * copy text that is still loading.
+ */
+export declare function useCopyToClipboard({ onCopy, timeout, }?: UseCopyToClipboardOptions): {
+    copy: (value: string | Promise<string>) => Promise<boolean>;
+    status: CopyStatus;
+};

package/dist/use-copy-to-clipboard.js

@@ -0,0 +1,6 @@
+"use client";import{useCallback,useRef,useState}from"react";/** `copied` until the timeout passes; `failed` until the next attempt. *//**
+ * Copies text to the clipboard and reports how it went, so a button can show
+ * a check and a status region can announce the result. Pass a promise to
+ * copy text that is still loading.
+ */export function useCopyToClipboard({onCopy,timeout=2000}={}){const[status,setStatus]=useState("idle");// Only the latest attempt reports, and a new one cancels the reset.
+const latest=useRef(0);const reset=useRef(undefined);const copy=useCallback(async value=>{latest.current+=1;const attempt=latest.current;clearTimeout(reset.current);let text;try{text=await value;await navigator.clipboard.writeText(text);}catch{text=undefined;}if(attempt!==latest.current){return text!==undefined;}if(text===undefined){setStatus("failed");return false;}setStatus("copied");onCopy?.(text);if(timeout>0){reset.current=setTimeout(()=>setStatus("idle"),timeout);}return true;},[onCopy,timeout]);return{copy,status};}

package/dist/use-elapsed.js

@@ -0,0 +1,4 @@
+import{useCallback,useRef,useState}from"react";// Measures how long work took from the DOM, never during render: the element
+// shown while working marks the start when it mounts, and the one shown once
+// settled marks the end when it replaces it.
+export function useElapsed(){const start=useRef(undefined);const[seconds,setSeconds]=useState();const markStart=useCallback(node=>{if(node&&start.current===undefined){start.current=performance.now();}},[]);const markEnd=useCallback(node=>{if(node&&start.current!==undefined){const elapsed=(performance.now()-start.current)/1000;start.current=undefined;setSeconds(elapsed);}},[]);return{markEnd,markStart,seconds};}/** Whole seconds: "7s", or "1m 35s" past a minute. */export function formatSeconds(seconds){const total=Math.max(1,Math.round(seconds));const minutes=Math.floor(total/60);const rest=total%60;if(minutes===0){return`${rest}s`;}return rest===0?`${minutes}m`:`${minutes}m ${rest}s`;}/** Tenths under ten seconds, for quick work such as tool calls: "0.4s". */export function formatShortSeconds(seconds){return seconds<10?`${Math.max(0.1,Math.round(seconds*10)/10)}s`:formatSeconds(seconds);}