@zendir/ui 0.1.0

package/dist/react/chatgpt/index.js

@@ -0,0 +1,166 @@
+import { useState, useCallback, useEffect, useSyncExternalStore } from "react";
+const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+function useOpenAiGlobal(key) {
+  const getSnapshot = useCallback(() => {
+    var _a;
+    return (_a = window.openai) == null ? void 0 : _a[key];
+  }, [key]);
+  const subscribe = useCallback((onChange) => {
+    const handleSetGlobal = (event) => {
+      var _a, _b;
+      const customEvent = event;
+      if (((_b = (_a = customEvent.detail) == null ? void 0 : _a.globals) == null ? void 0 : _b[key]) !== void 0) {
+        onChange();
+      }
+    };
+    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, { passive: true });
+    return () => window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+  }, [key]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useWidgetState(defaultState) {
+  const widgetStateFromWindow = useOpenAiGlobal("widgetState");
+  const [widgetState, _setWidgetState] = useState(() => {
+    if (widgetStateFromWindow != null) {
+      return widgetStateFromWindow;
+    }
+    return typeof defaultState === "function" ? defaultState() : defaultState;
+  });
+  useEffect(() => {
+    if (widgetStateFromWindow != null) {
+      _setWidgetState(widgetStateFromWindow);
+    }
+  }, [widgetStateFromWindow]);
+  const setWidgetState = useCallback((state) => {
+    _setWidgetState((prevState) => {
+      var _a, _b;
+      const newState = typeof state === "function" ? state(prevState) : state;
+      (_b = (_a = window.openai) == null ? void 0 : _a.setWidgetState) == null ? void 0 : _b.call(_a, newState);
+      return newState;
+    });
+  }, []);
+  return [widgetState, setWidgetState];
+}
+function useToolOutput() {
+  return useOpenAiGlobal("toolOutput");
+}
+function useToolInput() {
+  return useOpenAiGlobal("toolInput");
+}
+function useChatGPTTheme() {
+  const theme = useOpenAiGlobal("theme") ?? "dark";
+  const isDark = theme === "dark";
+  return {
+    theme,
+    isDark,
+    colors: isDark ? {
+      background: "#09090b",
+      surface: "#18181b",
+      surfaceHover: "#27272a",
+      border: "#3f3f46",
+      text: "#fafafa",
+      textMuted: "#a1a1aa",
+      accent: "#22d3ee"
+    } : {
+      background: "#ffffff",
+      surface: "#f4f4f5",
+      surfaceHover: "#e4e4e7",
+      border: "#d4d4d8",
+      text: "#18181b",
+      textMuted: "#636370",
+      // WCAG AA: 5.90:1 on #fff, 5.39:1 on #f4f4f5, 4.66:1 on #e4e4e7 (was #71717a → 4.49:1 FAIL on surface)
+      accent: "#0ea5e9"
+    }
+  };
+}
+function useLocale() {
+  return useOpenAiGlobal("locale") ?? "en-US";
+}
+function useDisplayMode() {
+  const mode = useOpenAiGlobal("displayMode") ?? "inline";
+  const maxHeight = useOpenAiGlobal("maxHeight");
+  const requestMode = useCallback(async (newMode) => {
+    var _a, _b;
+    await ((_b = (_a = window.openai) == null ? void 0 : _a.requestDisplayMode) == null ? void 0 : _b.call(_a, { mode: newMode }));
+  }, []);
+  const close = useCallback(() => {
+    var _a, _b;
+    (_b = (_a = window.openai) == null ? void 0 : _a.requestClose) == null ? void 0 : _b.call(_a);
+  }, []);
+  return { mode, maxHeight, requestMode, close };
+}
+function useCallTool() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const callTool = useCallback(async (name, args) => {
+    var _a;
+    if (!((_a = window.openai) == null ? void 0 : _a.callTool)) {
+      throw new Error("window.openai.callTool not available");
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await window.openai.callTool(name, args);
+      return result;
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  return { callTool, isLoading, error };
+}
+function useSendMessage() {
+  return useCallback(async (prompt) => {
+    var _a, _b;
+    await ((_b = (_a = window.openai) == null ? void 0 : _a.sendFollowUpMessage) == null ? void 0 : _b.call(_a, { prompt }));
+  }, []);
+}
+function useIntrinsicHeight(_ref) {
+}
+function useMaxHeight() {
+  const [maxHeight, setMaxHeight] = useState(
+    () => {
+      var _a;
+      return (_a = window.openai) == null ? void 0 : _a.maxHeight;
+    }
+  );
+  useEffect(() => {
+    const handler = (event) => {
+      var _a;
+      if (((_a = event.detail) == null ? void 0 : _a.globals) && "maxHeight" in event.detail.globals) {
+        setMaxHeight(event.detail.globals.maxHeight);
+      }
+    };
+    window.addEventListener("openai:set_globals", handler);
+    return () => window.removeEventListener("openai:set_globals", handler);
+  }, []);
+  return maxHeight;
+}
+function useOpenExternal() {
+  return useCallback((href) => {
+    var _a, _b;
+    (_b = (_a = window.openai) == null ? void 0 : _a.openExternal) == null ? void 0 : _b.call(_a, { href });
+  }, []);
+}
+function isInChatGPT() {
+  return typeof window !== "undefined" && window.openai !== void 0;
+}
+export {
+  isInChatGPT,
+  useCallTool,
+  useChatGPTTheme,
+  useDisplayMode,
+  useIntrinsicHeight,
+  useLocale,
+  useMaxHeight,
+  useOpenAiGlobal,
+  useOpenExternal,
+  useSendMessage,
+  useToolInput,
+  useToolOutput,
+  useWidgetState
+};
+//# sourceMappingURL=index.js.map

package/dist/react/chatgpt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/chatgpt/index.ts"],"sourcesContent":["/**\n * ChatGPT Apps SDK Integration\n * \n * Hooks and utilities for integrating Zendir UI components with ChatGPT's\n * window.openai API. Based on: https://developers.openai.com/apps-sdk/build/chatgpt-ui/\n * \n * Key capabilities:\n * - window.openai.toolInput / toolOutput - Tool data from MCP server\n * - window.openai.widgetState / setWidgetState - Persistent UI state\n * - window.openai.callTool - Invoke other MCP tools from widget\n * - window.openai.sendFollowUpMessage - Insert user messages\n * - window.openai.theme - Light/dark theme detection\n * - window.openai.locale - Localization\n * - window.openai.requestDisplayMode - Fullscreen/PiP modes\n * - window.openai.notifyIntrinsicHeight - Dynamic height reporting\n */\n\nimport { useState, useEffect, useCallback, useSyncExternalStore } from 'react';\n\n// ============================================================================\n// Type Definitions\n// ============================================================================\n\nexport interface OpenAiGlobals {\n  /** Arguments supplied when the tool was invoked */\n  toolInput?: Record<string, unknown>;\n  /** Your structuredContent - the model reads this */\n  toolOutput?: Record<string, unknown>;\n  /** Metadata payload - only widget sees it */\n  toolResponseMetadata?: Record<string, unknown>;\n  /** Snapshot of UI state persisted between renders */\n  widgetState?: Record<string, unknown>;\n  /** Current theme */\n  theme?: 'light' | 'dark';\n  /** Current locale (e.g., 'en-US') */\n  locale?: string;\n  /** Display mode */\n  displayMode?: 'inline' | 'pip' | 'fullscreen';\n  /** Maximum allowed height */\n  maxHeight?: number;\n  /** View type */\n  view?: 'conversation' | 'modal';\n  /** User agent info */\n  userAgent?: string;\n  /** Safe area insets */\n  safeArea?: { top: number; bottom: number; left: number; right: number };\n  \n  // API Methods\n  setWidgetState?: (state: Record<string, unknown>) => void;\n  callTool?: (name: string, args: Record<string, unknown>) => Promise<unknown>;\n  sendFollowUpMessage?: (options: { prompt: string }) => Promise<void>;\n  uploadFile?: (file: File) => Promise<{ fileId: string }>;\n  getFileDownloadUrl?: (options: { fileId: string }) => Promise<{ downloadUrl: string }>;\n  requestDisplayMode?: (options: { mode: 'inline' | 'pip' | 'fullscreen' }) => Promise<void>;\n  requestModal?: (options: unknown) => Promise<void>;\n  notifyIntrinsicHeight?: (height: number) => void;\n  openExternal?: (options: { href: string }) => void;\n  requestClose?: () => void;\n}\n\ndeclare global {\n  interface Window {\n    openai?: OpenAiGlobals;\n  }\n}\n\n// ============================================================================\n// Core Hook: useOpenAiGlobal\n// ============================================================================\n\nconst SET_GLOBALS_EVENT_TYPE = 'openai:set_globals';\n\ninterface SetGlobalsEvent extends CustomEvent {\n  detail: { globals: Partial<OpenAiGlobals> };\n}\n\n/**\n * Subscribe to a specific window.openai global value\n */\nexport function useOpenAiGlobal<K extends keyof OpenAiGlobals>(key: K): OpenAiGlobals[K] {\n  const getSnapshot = useCallback(() => {\n    return window.openai?.[key];\n  }, [key]);\n\n  const subscribe = useCallback((onChange: () => void) => {\n    const handleSetGlobal = (event: Event) => {\n      const customEvent = event as SetGlobalsEvent;\n      if (customEvent.detail?.globals?.[key] !== undefined) {\n        onChange();\n      }\n    };\n\n    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, { passive: true });\n    return () => window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);\n  }, [key]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n// ============================================================================\n// Widget State Hook\n// ============================================================================\n\ntype SetStateAction<T> = T | ((prevState: T) => T);\n\n/**\n * Manage widget state that persists across renders via window.openai.setWidgetState\n */\nexport function useWidgetState<T extends Record<string, unknown>>(\n  defaultState: T | (() => T)\n): readonly [T, (state: SetStateAction<T>) => void] {\n  const widgetStateFromWindow = useOpenAiGlobal('widgetState') as T | undefined;\n\n  const [widgetState, _setWidgetState] = useState<T>(() => {\n    if (widgetStateFromWindow != null) {\n      return widgetStateFromWindow;\n    }\n    return typeof defaultState === 'function' ? (defaultState as () => T)() : defaultState;\n  });\n\n  useEffect(() => {\n    if (widgetStateFromWindow != null) {\n      _setWidgetState(widgetStateFromWindow);\n    }\n  }, [widgetStateFromWindow]);\n\n  const setWidgetState = useCallback((state: SetStateAction<T>) => {\n    _setWidgetState((prevState: T) => {\n      const newState = typeof state === 'function' ? (state as (p: T) => T)(prevState) : state;\n      window.openai?.setWidgetState?.(newState);\n      return newState;\n    });\n  }, []);\n\n  return [widgetState, setWidgetState] as const;\n}\n\n// ============================================================================\n// Tool Output Hook\n// ============================================================================\n\n/**\n * Read the tool output (structuredContent) from the MCP server response\n */\nexport function useToolOutput<T = Record<string, unknown>>(): T | undefined {\n  return useOpenAiGlobal('toolOutput') as T | undefined;\n}\n\n/**\n * Read the tool input (arguments) from the tool invocation\n */\nexport function useToolInput<T = Record<string, unknown>>(): T | undefined {\n  return useOpenAiGlobal('toolInput') as T | undefined;\n}\n\n// ============================================================================\n// Theme Hook\n// ============================================================================\n\nexport type ThemeMode = 'light' | 'dark';\n\n/**\n * Get current ChatGPT theme and provide CSS-friendly values\n * Named useChatGPTTheme to avoid conflict with the core useTheme from ThemeProvider\n */\nexport function useChatGPTTheme(): {\n  theme: ThemeMode;\n  isDark: boolean;\n  colors: {\n    background: string;\n    surface: string;\n    surfaceHover: string;\n    border: string;\n    text: string;\n    textMuted: string;\n    accent: string;\n  };\n} {\n  const theme = useOpenAiGlobal('theme') ?? 'dark';\n  const isDark = theme === 'dark';\n\n  return {\n    theme,\n    isDark,\n    colors: isDark ? {\n      background: '#09090b',\n      surface: '#18181b',\n      surfaceHover: '#27272a',\n      border: '#3f3f46',\n      text: '#fafafa',\n      textMuted: '#a1a1aa',\n      accent: '#22d3ee',\n    } : {\n      background: '#ffffff',\n      surface: '#f4f4f5',\n      surfaceHover: '#e4e4e7',\n      border: '#d4d4d8',\n      text: '#18181b',\n      textMuted: '#636370',  // WCAG AA: 5.90:1 on #fff, 5.39:1 on #f4f4f5, 4.66:1 on #e4e4e7 (was #71717a → 4.49:1 FAIL on surface)\n      accent: '#0ea5e9',\n    },\n  };\n}\n\n// ============================================================================\n// Locale Hook\n// ============================================================================\n\n/**\n * Get current locale for internationalization\n */\nexport function useLocale(): string {\n  return useOpenAiGlobal('locale') ?? 'en-US';\n}\n\n// ============================================================================\n// Display Mode Hook\n// ============================================================================\n\n/**\n * Manage widget display mode (inline, PiP, fullscreen)\n */\nexport function useDisplayMode(): {\n  mode: 'inline' | 'pip' | 'fullscreen';\n  maxHeight?: number;\n  requestMode: (mode: 'inline' | 'pip' | 'fullscreen') => Promise<void>;\n  close: () => void;\n} {\n  const mode = useOpenAiGlobal('displayMode') ?? 'inline';\n  const maxHeight = useOpenAiGlobal('maxHeight');\n\n  const requestMode = useCallback(async (newMode: 'inline' | 'pip' | 'fullscreen') => {\n    await window.openai?.requestDisplayMode?.({ mode: newMode });\n  }, []);\n\n  const close = useCallback(() => {\n    window.openai?.requestClose?.();\n  }, []);\n\n  return { mode, maxHeight, requestMode, close };\n}\n\n// ============================================================================\n// Tool Calling Hook\n// ============================================================================\n\n/**\n * Call another MCP tool from within a widget\n */\nexport function useCallTool(): {\n  callTool: <T = unknown>(name: string, args: Record<string, unknown>) => Promise<T>;\n  isLoading: boolean;\n  error: Error | null;\n} {\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const callTool = useCallback(async <T = unknown>(\n    name: string,\n    args: Record<string, unknown>\n  ): Promise<T> => {\n    if (!window.openai?.callTool) {\n      throw new Error('window.openai.callTool not available');\n    }\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const result = await window.openai.callTool(name, args);\n      return result as T;\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error(String(err));\n      setError(error);\n      throw error;\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  return { callTool, isLoading, error };\n}\n\n// ============================================================================\n// Follow-up Message Hook\n// ============================================================================\n\n/**\n * Send a follow-up message as if the user asked it\n */\nexport function useSendMessage(): (prompt: string) => Promise<void> {\n  return useCallback(async (prompt: string) => {\n    await window.openai?.sendFollowUpMessage?.({ prompt });\n  }, []);\n}\n\n// ============================================================================\n// Dynamic Height Hook\n// ============================================================================\n\n/**\n * DEPRECATED: Do not use notifyIntrinsicHeight!\n * \n * According to OpenAI Apps SDK examples (via DeepWiki), the correct pattern is:\n * - The HOST provides maxHeight via window.openai.maxHeight\n * - Widgets READ this and constrain themselves\n * - Widgets NEVER report height back to the host\n * \n * Calling notifyIntrinsicHeight causes infinite resize loops in MCPJam sandbox\n * because the sandbox responds by resizing the container, which triggers another\n * resize event.\n * \n * Use useMaxHeight() instead to get the host's height constraint.\n * \n * @deprecated Use useMaxHeight() instead\n */\nexport function useIntrinsicHeight(_ref: { current: HTMLElement | null }): void {\n  // NO-OP: Do not call notifyIntrinsicHeight - it causes infinite loops\n  // The host provides maxHeight, widgets should not report height back\n}\n\n/**\n * Get the maximum height available for the widget from the host environment.\n * This is the CORRECT pattern per OpenAI Apps SDK examples.\n * \n * The host (ChatGPT/MCPJam) provides maxHeight, and widgets should constrain\n * themselves to this height. Widgets should NOT report their height back.\n * \n * @returns The maximum height in pixels, or undefined if not available\n */\nexport function useMaxHeight(): number | undefined {\n  const [maxHeight, setMaxHeight] = useState<number | undefined>(\n    () => window.openai?.maxHeight\n  );\n  \n  useEffect(() => {\n    const handler = (event: CustomEvent) => {\n      if (event.detail?.globals && 'maxHeight' in event.detail.globals) {\n        setMaxHeight(event.detail.globals.maxHeight);\n      }\n    };\n    \n    window.addEventListener('openai:set_globals', handler as EventListener);\n    return () => window.removeEventListener('openai:set_globals', handler as EventListener);\n  }, []);\n  \n  return maxHeight;\n}\n\n// ============================================================================\n// External Link Hook\n// ============================================================================\n\n/**\n * Open vetted external links in the user's browser\n */\nexport function useOpenExternal(): (href: string) => void {\n  return useCallback((href: string) => {\n    window.openai?.openExternal?.({ href });\n  }, []);\n}\n\n// ============================================================================\n// Utility: Check if running in ChatGPT\n// ============================================================================\n\nexport function isInChatGPT(): boolean {\n  return typeof window !== 'undefined' && window.openai !== undefined;\n}\n\n// ============================================================================\n// Re-exports (types are already exported above)\n// ============================================================================\n\n"],"names":["error"],"mappings":"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"}

package/dist/react/context/DisplaySettingsContext.d.ts

@@ -0,0 +1,107 @@
+import { default as React, ReactNode } from 'react';
+
+export type ColorTarget = 'both' | 'accent' | 'glass';
+export interface DisplaySettings {
+    /** Global compact mode - affects all cards */
+    compactMode: boolean;
+    /** Accent color for cards and UI elements */
+    accentColor: string;
+    /** Glass tint color for transparent themes */
+    glassTint: string;
+    /** Which color setting to apply: both, accent-only, or glass-only */
+    colorTarget: ColorTarget;
+    /** Enable accent-colored borders on cards (for transparent themes) */
+    accentBorders: boolean;
+}
+export interface DisplaySettingsContextValue extends DisplaySettings {
+    /** Set compact mode on/off */
+    setCompactMode: (value: boolean) => void;
+    /** Toggle compact mode */
+    toggleCompactMode: () => void;
+    /** Set accent color */
+    setAccentColor: (color: string) => void;
+    /** Set glass tint color */
+    setGlassTint: (color: string) => void;
+    /** Set which color setting to apply */
+    setColorTarget: (target: ColorTarget) => void;
+    /** Set a color that applies based on current target */
+    setColor: (color: string) => void;
+    /** Set accent borders on/off */
+    setAccentBorders: (value: boolean) => void;
+    /** Toggle accent borders */
+    toggleAccentBorders: () => void;
+    /** Reset all settings to defaults */
+    resetSettings: () => void;
+}
+export declare const PRESET_COLORS: {
+    readonly purple: "#8b5cf6";
+    readonly blue: "#3b82f6";
+    readonly cyan: "#06b6d4";
+    readonly teal: "#14b8a6";
+    readonly green: "#10b981";
+    readonly lime: "#84cc16";
+    readonly amber: "#f59e0b";
+    readonly orange: "#f97316";
+    readonly pink: "#ec4899";
+    readonly red: "#ef4444";
+    readonly slate: "#64748b";
+};
+export declare const GLASS_TINTS: {
+    readonly clear: "rgba(255,255,255,0.05)";
+    readonly dark: "rgba(0,0,0,0.3)";
+    readonly purple: "#8b5cf6";
+    readonly blue: "#3b82f6";
+    readonly cyan: "#06b6d4";
+    readonly teal: "#14b8a6";
+    readonly green: "#10b981";
+    readonly lime: "#84cc16";
+    readonly amber: "#f59e0b";
+    readonly orange: "#f97316";
+    readonly pink: "#ec4899";
+    readonly red: "#ef4444";
+    readonly slate: "#64748b";
+};
+export type PresetColorKey = keyof typeof PRESET_COLORS;
+export type GlassTintKey = keyof typeof GLASS_TINTS;
+export interface DisplaySettingsProviderProps {
+    children: ReactNode;
+    /** Initial compact mode state */
+    defaultCompactMode?: boolean;
+    /** Initial accent color */
+    defaultAccentColor?: string;
+    /** Initial glass tint color */
+    defaultGlassTint?: string;
+    /** Initial color target */
+    defaultColorTarget?: ColorTarget;
+    /** Initial accent borders state */
+    defaultAccentBorders?: boolean;
+    /** Enable localStorage persistence (default: true) */
+    persist?: boolean;
+}
+export declare function DisplaySettingsProvider({ children, defaultCompactMode, defaultAccentColor, defaultGlassTint, defaultColorTarget, defaultAccentBorders, persist, }: DisplaySettingsProviderProps): React.ReactElement;
+/**
+ * Access display settings context
+ * Must be used within a DisplaySettingsProvider
+ */
+export declare function useDisplaySettings(): DisplaySettingsContextValue;
+/**
+ * Optional hook that returns null if not within provider
+ * Useful for components that should work with or without the provider
+ */
+export declare function useDisplaySettingsOptional(): DisplaySettingsContextValue | null;
+/**
+ * Get effective compact mode value
+ * Priority: explicit prop > context value > default (false)
+ */
+export declare function getEffectiveCompactMode(propValue: boolean | undefined, contextValue: boolean | undefined): boolean;
+/**
+ * Get effective accent borders value
+ * Priority: explicit prop > context value > default (true)
+ */
+export declare function getEffectiveAccentBorders(propValue: boolean | undefined, contextValue: boolean | undefined): boolean;
+/**
+ * Hook to get card border style based on accentBorders setting
+ * Returns the appropriate border style for transparent themes
+ */
+export declare function useCardBorderStyle(tokens: any, isTransparentTheme: boolean): React.CSSProperties;
+export default DisplaySettingsProvider;

package/dist/react/context/DisplaySettingsContext.js

@@ -0,0 +1,169 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useContext, createContext } from "react";
+const PRESET_COLORS = {
+  purple: "#8b5cf6",
+  blue: "#3b82f6",
+  cyan: "#06b6d4",
+  teal: "#14b8a6",
+  green: "#10b981",
+  lime: "#84cc16",
+  amber: "#f59e0b",
+  orange: "#f97316",
+  pink: "#ec4899",
+  red: "#ef4444",
+  slate: "#64748b"
+};
+const GLASS_TINTS = {
+  ...PRESET_COLORS,
+  clear: "rgba(255,255,255,0.05)",
+  dark: "rgba(0,0,0,0.3)"
+};
+const DEFAULT_SETTINGS = {
+  compactMode: false,
+  accentColor: PRESET_COLORS.purple,
+  glassTint: PRESET_COLORS.purple,
+  colorTarget: "both",
+  accentBorders: true
+};
+const STORAGE_KEY = "zendir-display-settings";
+const DisplaySettingsContext = createContext(null);
+function DisplaySettingsProvider({
+  children,
+  defaultCompactMode,
+  defaultAccentColor,
+  defaultGlassTint,
+  defaultColorTarget,
+  defaultAccentBorders,
+  persist = true
+}) {
+  const [settings, setSettings] = useState(() => {
+    if (persist && typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          return {
+            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
+            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
+            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
+            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
+            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
+          };
+        }
+      } catch {
+      }
+    }
+    return {
+      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
+      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
+      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
+      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
+      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
+    };
+  });
+  useEffect(() => {
+    if (persist && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+      } catch {
+      }
+    }
+  }, [settings, persist]);
+  const setCompactMode = useCallback((value2) => {
+    setSettings((prev) => ({ ...prev, compactMode: value2 }));
+  }, []);
+  const toggleCompactMode = useCallback(() => {
+    setSettings((prev) => ({ ...prev, compactMode: !prev.compactMode }));
+  }, []);
+  const setAccentColor = useCallback((color) => {
+    setSettings((prev) => ({ ...prev, accentColor: color }));
+  }, []);
+  const setGlassTint = useCallback((color) => {
+    setSettings((prev) => ({ ...prev, glassTint: color }));
+  }, []);
+  const setColorTarget = useCallback((target) => {
+    setSettings((prev) => ({ ...prev, colorTarget: target }));
+  }, []);
+  const setColor = useCallback((color) => {
+    setSettings((prev) => {
+      switch (prev.colorTarget) {
+        case "accent":
+          return { ...prev, accentColor: color };
+        case "glass":
+          return { ...prev, glassTint: color };
+        case "both":
+        default:
+          return { ...prev, accentColor: color, glassTint: color };
+      }
+    });
+  }, []);
+  const setAccentBorders = useCallback((value2) => {
+    setSettings((prev) => ({ ...prev, accentBorders: value2 }));
+  }, []);
+  const toggleAccentBorders = useCallback(() => {
+    setSettings((prev) => ({ ...prev, accentBorders: !prev.accentBorders }));
+  }, []);
+  const resetSettings = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, []);
+  const value = useMemo(() => ({
+    ...settings,
+    setCompactMode,
+    toggleCompactMode,
+    setAccentColor,
+    setGlassTint,
+    setColorTarget,
+    setColor,
+    setAccentBorders,
+    toggleAccentBorders,
+    resetSettings
+  }), [
+    settings,
+    setCompactMode,
+    toggleCompactMode,
+    setAccentColor,
+    setGlassTint,
+    setColorTarget,
+    setColor,
+    setAccentBorders,
+    toggleAccentBorders,
+    resetSettings
+  ]);
+  return /* @__PURE__ */ jsx(DisplaySettingsContext.Provider, { value, children });
+}
+function useDisplaySettings() {
+  const context = useContext(DisplaySettingsContext);
+  if (!context) {
+    throw new Error("useDisplaySettings must be used within a DisplaySettingsProvider");
+  }
+  return context;
+}
+function useDisplaySettingsOptional() {
+  return useContext(DisplaySettingsContext);
+}
+function getEffectiveCompactMode(propValue, contextValue) {
+  if (propValue !== void 0) return propValue;
+  if (contextValue !== void 0) return contextValue;
+  return false;
+}
+function useCardBorderStyle(tokens, isTransparentTheme) {
+  const displaySettings = useDisplaySettingsOptional();
+  const accentBorders = (displaySettings == null ? void 0 : displaySettings.accentBorders) ?? true;
+  if (!isTransparentTheme) {
+    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };
+  }
+  if (accentBorders) {
+    return tokens.colors.border.cardStyle ?? {};
+  }
+  return { border: "1px solid rgba(255, 255, 255, 0.08)" };
+}
+export {
+  DisplaySettingsProvider,
+  GLASS_TINTS,
+  PRESET_COLORS,
+  getEffectiveCompactMode,
+  useCardBorderStyle,
+  useDisplaySettings,
+  useDisplaySettingsOptional
+};
+//# sourceMappingURL=DisplaySettingsContext.js.map

package/dist/react/context/DisplaySettingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettingsContext.js","sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - DisplaySettingsContext\n * \n * Centralized context for app-wide display preferences.\n * Controls compact mode, accent colors, glass tint, and other display settings.\n * \n * Features:\n * - Compact mode toggle (affects all cards globally)\n * - Accent color selection (for card accents)\n * - Glass tint selection (for transparent themes)\n * - Color target control (both, accent-only, glass-only)\n * - LocalStorage persistence\n * \n * @example\n * ```tsx\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\n * \n * // Wrap your app\n * <DisplaySettingsProvider>\n *   <App />\n * </DisplaySettingsProvider>\n * \n * // Use in components\n * function MyCard() {\n *   const { compactMode, accentColor } = useDisplaySettings();\n *   return <Card compact={compactMode} />;\n * }\n * ```\n */\n\nimport React, { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ColorTarget = 'both' | 'accent' | 'glass';\n\nexport interface DisplaySettings {\n  /** Global compact mode - affects all cards */\n  compactMode: boolean;\n  \n  /** Accent color for cards and UI elements */\n  accentColor: string;\n  \n  /** Glass tint color for transparent themes */\n  glassTint: string;\n  \n  /** Which color setting to apply: both, accent-only, or glass-only */\n  colorTarget: ColorTarget;\n  \n  /** Enable accent-colored borders on cards (for transparent themes) */\n  accentBorders: boolean;\n}\n\nexport interface DisplaySettingsContextValue extends DisplaySettings {\n  /** Set compact mode on/off */\n  setCompactMode: (value: boolean) => void;\n  \n  /** Toggle compact mode */\n  toggleCompactMode: () => void;\n  \n  /** Set accent color */\n  setAccentColor: (color: string) => void;\n  \n  /** Set glass tint color */\n  setGlassTint: (color: string) => void;\n  \n  /** Set which color setting to apply */\n  setColorTarget: (target: ColorTarget) => void;\n  \n  /** Set a color that applies based on current target */\n  setColor: (color: string) => void;\n  \n  /** Set accent borders on/off */\n  setAccentBorders: (value: boolean) => void;\n  \n  /** Toggle accent borders */\n  toggleAccentBorders: () => void;\n  \n  /** Reset all settings to defaults */\n  resetSettings: () => void;\n}\n\n// =============================================================================\n// Preset Colors\n// =============================================================================\n\nexport const PRESET_COLORS = {\n  purple: '#8b5cf6',\n  blue: '#3b82f6',\n  cyan: '#06b6d4',\n  teal: '#14b8a6',\n  green: '#10b981',\n  lime: '#84cc16',\n  amber: '#f59e0b',\n  orange: '#f97316',\n  pink: '#ec4899',\n  red: '#ef4444',\n  slate: '#64748b',\n} as const;\n\nexport const GLASS_TINTS = {\n  ...PRESET_COLORS,\n  clear: 'rgba(255,255,255,0.05)',\n  dark: 'rgba(0,0,0,0.3)',\n} as const;\n\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_SETTINGS: DisplaySettings = {\n  compactMode: false,\n  accentColor: PRESET_COLORS.purple,\n  glassTint: PRESET_COLORS.purple,\n  colorTarget: 'both',\n  accentBorders: true,\n};\n\nconst STORAGE_KEY = 'zendir-display-settings';\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst DisplaySettingsContext = createContext<DisplaySettingsContextValue | null>(null);\n\n// =============================================================================\n// Provider Props\n// =============================================================================\n\nexport interface DisplaySettingsProviderProps {\n  children: ReactNode;\n  \n  /** Initial compact mode state */\n  defaultCompactMode?: boolean;\n  \n  /** Initial accent color */\n  defaultAccentColor?: string;\n  \n  /** Initial glass tint color */\n  defaultGlassTint?: string;\n  \n  /** Initial color target */\n  defaultColorTarget?: ColorTarget;\n  \n  /** Initial accent borders state */\n  defaultAccentBorders?: boolean;\n  \n  /** Enable localStorage persistence (default: true) */\n  persist?: boolean;\n}\n\n// =============================================================================\n// Provider Component\n// =============================================================================\n\nexport function DisplaySettingsProvider({\n  children,\n  defaultCompactMode,\n  defaultAccentColor,\n  defaultGlassTint,\n  defaultColorTarget,\n  defaultAccentBorders,\n  persist = true,\n}: DisplaySettingsProviderProps): React.ReactElement {\n  // Initialize state from localStorage or defaults\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        if (stored) {\n          const parsed = JSON.parse(stored);\n          return {\n            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n          };\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    }\n    \n    return {\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n    };\n  });\n  \n  // Persist to localStorage when settings change\n  useEffect(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n      } catch {\n        // Ignore storage errors\n      }\n    }\n  }, [settings, persist]);\n  \n  // Setters\n  const setCompactMode = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, compactMode: value }));\n  }, []);\n  \n  const toggleCompactMode = useCallback(() => {\n    setSettings(prev => ({ ...prev, compactMode: !prev.compactMode }));\n  }, []);\n  \n  const setAccentColor = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, accentColor: color }));\n  }, []);\n  \n  const setGlassTint = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, glassTint: color }));\n  }, []);\n  \n  const setColorTarget = useCallback((target: ColorTarget) => {\n    setSettings(prev => ({ ...prev, colorTarget: target }));\n  }, []);\n  \n  // Set color based on current target\n  const setColor = useCallback((color: string) => {\n    setSettings(prev => {\n      switch (prev.colorTarget) {\n        case 'accent':\n          return { ...prev, accentColor: color };\n        case 'glass':\n          return { ...prev, glassTint: color };\n        case 'both':\n        default:\n          return { ...prev, accentColor: color, glassTint: color };\n      }\n    });\n  }, []);\n  \n  const setAccentBorders = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, accentBorders: value }));\n  }, []);\n  \n  const toggleAccentBorders = useCallback(() => {\n    setSettings(prev => ({ ...prev, accentBorders: !prev.accentBorders }));\n  }, []);\n  \n  const resetSettings = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n  \n  // Memoized context value\n  const value = useMemo<DisplaySettingsContextValue>(() => ({\n    ...settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  }), [\n    settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  ]);\n  \n  return (\n    <DisplaySettingsContext.Provider value={value}>\n      {children}\n    </DisplaySettingsContext.Provider>\n  );\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Access display settings context\n * Must be used within a DisplaySettingsProvider\n */\nexport function useDisplaySettings(): DisplaySettingsContextValue {\n  const context = useContext(DisplaySettingsContext);\n  \n  if (!context) {\n    throw new Error('useDisplaySettings must be used within a DisplaySettingsProvider');\n  }\n  \n  return context;\n}\n\n/**\n * Optional hook that returns null if not within provider\n * Useful for components that should work with or without the provider\n */\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\n  return useContext(DisplaySettingsContext);\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get effective compact mode value\n * Priority: explicit prop > context value > default (false)\n */\nexport function getEffectiveCompactMode(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return false;\n}\n\n/**\n * Get effective accent borders value\n * Priority: explicit prop > context value > default (true)\n */\nexport function getEffectiveAccentBorders(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return true;\n}\n\n/**\n * Hook to get card border style based on accentBorders setting\n * Returns the appropriate border style for transparent themes\n */\nexport function useCardBorderStyle(\n  tokens: any,\n  isTransparentTheme: boolean\n): React.CSSProperties {\n  const displaySettings = useDisplaySettingsOptional();\n  const accentBorders = displaySettings?.accentBorders ?? true;\n  \n  if (!isTransparentTheme) {\n    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };\n  }\n  \n  if (accentBorders) {\n    return tokens.colors.border.cardStyle ?? {};\n  }\n  \n  // Fallback to subtle neutral border when accent borders disabled\n  return { border: '1px solid rgba(255, 255, 255, 0.08)' };\n}\n\nexport default DisplaySettingsProvider;\n"],"names":["value"],"mappings":"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"}

package/dist/react/context/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @zendir/ui - Context exports
+ */
+export { DisplaySettingsProvider, useDisplaySettings, useDisplaySettingsOptional, getEffectiveCompactMode, PRESET_COLORS, GLASS_TINTS, } from './DisplaySettingsContext';
+export type { DisplaySettings, DisplaySettingsContextValue, DisplaySettingsProviderProps, ColorTarget, PresetColorKey, GlassTintKey, } from './DisplaySettingsContext';

package/dist/react/core/ActivityPlanner.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { CalendarEvent, CalendarTimeline, ActivityType } from './MissionCalendar';
+
+export interface ActivityFormData {
+    title: string;
+    type: ActivityType;
+    start: string;
+    end: string;
+    timeline: string;
+    description: string;
+    command: string;
+    script: string;
+    hazardous: boolean;
+    metadata: Record<string, string>;
+}
+export interface ActivityPlannerProps {
+    /** Activities to display */
+    activities: CalendarEvent[];
+    /** Available timelines */
+    timelines: CalendarTimeline[];
+    /** Currently selected date for scheduling */
+    selectedDate?: Date;
+    /** Height (default: 500) */
+    height?: number | string;
+    /** Title */
+    title?: string;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Show overlap warnings */
+    showOverlapWarning?: boolean;
+    /** Called on create */
+    onActivityCreate?: (activity: Partial<CalendarEvent>) => void;
+    /** Called on update */
+    onActivityUpdate?: (id: string, updates: Partial<CalendarEvent>) => void;
+    /** Called on delete */
+    onActivityDelete?: (id: string) => void;
+    /** Called when requesting to view activity in calendar */
+    onViewInCalendar?: (activity: CalendarEvent) => void;
+    /** Called when requesting to view in timeline */
+    onViewInTimeline?: (activity: CalendarEvent) => void;
+    /** CSS class */
+    className?: string;
+}
+export declare const ActivityPlanner: React.NamedExoticComponent<ActivityPlannerProps>;
+export default ActivityPlanner;