@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

package/lib/features/canvas/canvasTheme.js

@@ -0,0 +1,265 @@
+import {jsx,Fragment}from'react/jsx-runtime';import {MaterialCommunityIcons}from'@expo/vector-icons';import {createContext,useContext,useState,useEffect,useMemo,useCallback}from'react';import {StyleSheet,useColorScheme,Pressable}from'react-native';var _a;
+const CANVAS_THEME_STORAGE_KEY = "canvas.theme";
+const rgba = (rgb) => (alpha) => `rgba(${rgb},${alpha})`;
+const CANVAS_LIGHT = {
+  mode: "light",
+  isDark: false,
+  background: "#ffffff",
+  foreground: "#141414",
+  card: "#f4f4f5",
+  cardForeground: "#141414",
+  popover: "#ffffff",
+  popoverForeground: "#141414",
+  primary: "#e1ff00",
+  primaryForeground: "#000000",
+  secondary: "#27272a",
+  secondaryForeground: "#ffffff",
+  muted: "#f1f1f1",
+  mutedForeground: "#71717a",
+  accent: "#e1ff00",
+  accentForeground: "#000000",
+  destructive: "#ef4444",
+  destructiveForeground: "#ffffff",
+  border: "#e4e4e7",
+  input: "#e4e4e7",
+  ring: "#d4e100",
+  surface: "#ffffff",
+  inkSoft: "#3f3f46",
+  borderStrong: "#d4d4d8",
+  primaryText: "#4d7c0f",
+  destructiveText: "#b91c1c",
+  destructiveSoft: "#fef2f2",
+  destructiveBorder: "#fecaca",
+  successText: "#15803d",
+  successSoft: "#f0fdf4",
+  warningText: "#92400e",
+  info: "#2563eb",
+  infoSoft: "#dbeafe",
+  backgroundAlpha: rgba("255,255,255"),
+  tint: rgba("20,20,20"),
+  edWell: "#e4e4e7",
+  edBg: "#f5f5f3",
+  edPanel: "#ffffff",
+  edRaised: "#f4f4f5",
+  edRaisedHi: "#e9e9eb",
+  edLine: "#e4e4e7",
+  edLineHi: "#d4d4d8",
+  edInk: "#18181b",
+  edInk2: "#52525b",
+  edInk3: "#6b6b76",
+  edOnInk: "#ffffff",
+  edAccent: "#6c5ce7",
+  edAccentSoft: "#ece9ff",
+  edDanger: "#b91c1c",
+  edDangerSoft: "#fef2f2",
+  edOk: "#15803d",
+  edWarn: "#92400e",
+  edTint: rgba("0,0,0")
+};
+const CANVAS_DARK = {
+  mode: "dark",
+  isDark: true,
+  background: "#0d0d0d",
+  foreground: "#f2f2f2",
+  card: "#141414",
+  cardForeground: "#f2f2f2",
+  popover: "#0d0d0d",
+  popoverForeground: "#f2f2f2",
+  primary: "#d4ff00",
+  primaryForeground: "#000000",
+  secondary: "#262626",
+  secondaryForeground: "#f2f2f2",
+  muted: "#1a1a1a",
+  mutedForeground: "#a1a1aa",
+  accent: "#262626",
+  accentForeground: "#d4ff00",
+  destructive: "#7f1d1d",
+  destructiveForeground: "#f2f2f2",
+  border: "#262626",
+  input: "#262626",
+  ring: "#d4ff00",
+  surface: "#141414",
+  inkSoft: "#d4d4d8",
+  borderStrong: "#3f3f46",
+  primaryText: "#d4ff00",
+  destructiveText: "#f87171",
+  destructiveSoft: "#421f23",
+  destructiveBorder: "#7f3336",
+  successText: "#4ade80",
+  successSoft: "#12261a",
+  warningText: "#fbbf24",
+  info: "#6ea8fe",
+  infoSoft: "#243a5e",
+  backgroundAlpha: rgba("13,13,13"),
+  tint: rgba("242,242,242"),
+  // Native editors' existing dark chassis.
+  edWell: "#08080a",
+  edBg: "#0a0a0c",
+  edPanel: "#16161a",
+  edRaised: "#1f1f24",
+  edRaisedHi: "#2a2a32",
+  edLine: "#26262c",
+  edLineHi: "#32323a",
+  edInk: "#f7f7fa",
+  edInk2: "#9a9aa5",
+  edInk3: "#7a7a88",
+  edOnInk: "#0a0a0c",
+  edAccent: "#8b7cff",
+  edAccentSoft: "rgba(139,124,255,0.2)",
+  edDanger: "#f87171",
+  edDangerSoft: "rgba(248,113,113,0.14)",
+  edOk: "#4ade80",
+  edWarn: "#fbbf24",
+  edTint: rgba("255,255,255")
+};
+function canvasPalette(mode) {
+  return mode === "dark" ? CANVAS_DARK : CANVAS_LIGHT;
+}
+function themedStyles(factory) {
+  const cache = /* @__PURE__ */ new Map();
+  return (theme) => {
+    let sheet = cache.get(theme);
+    if (!sheet) {
+      sheet = factory(theme);
+      cache.set(theme, sheet);
+    }
+    return sheet;
+  };
+}
+let storage = null;
+try {
+  storage = (_a = require("@react-native-async-storage/async-storage").default) != null ? _a : null;
+} catch (e) {
+  storage = null;
+}
+function isPreference(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+let currentPreference = "system";
+let loaded = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((fn) => fn(currentPreference));
+}
+function loadPreference() {
+  if (loaded || !storage) return;
+  loaded = true;
+  try {
+    void storage.getItem(CANVAS_THEME_STORAGE_KEY).then((raw) => {
+      if (isPreference(raw) && raw !== currentPreference) {
+        currentPreference = raw;
+        notify();
+      }
+    }).catch(() => void 0);
+  } catch (e) {
+  }
+}
+function setCanvasThemePreference(next) {
+  if (!isPreference(next)) return;
+  loaded = true;
+  currentPreference = next;
+  notify();
+  try {
+    void (storage == null ? void 0 : storage.setItem(CANVAS_THEME_STORAGE_KEY, next).catch(() => void 0));
+  } catch (e) {
+  }
+}
+const CanvasThemeContext = createContext(null);
+function useOsScheme() {
+  return typeof useColorScheme === "function" ? useColorScheme() : null;
+}
+function osMode(scheme) {
+  return scheme === "dark" ? "dark" : "light";
+}
+function CanvasThemeProvider({
+  mode,
+  children
+}) {
+  const parent = useContext(CanvasThemeContext);
+  const scheme = useOsScheme();
+  const [preference, setPreferenceState] = useState(currentPreference);
+  useEffect(() => {
+    const listener = (pref) => setPreferenceState(pref);
+    listeners.add(listener);
+    setPreferenceState(currentPreference);
+    loadPreference();
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  const resolved = preference !== "system" ? preference : mode != null ? mode : osMode(scheme);
+  const value = useMemo(() => ({
+    palette: canvasPalette(resolved),
+    preference,
+    setPreference: setCanvasThemePreference
+  }), [resolved, preference]);
+  if (parent && mode == null) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(CanvasThemeContext.Provider, { value, children });
+}
+function useCanvasTheme() {
+  const ctx = useContext(CanvasThemeContext);
+  const scheme = useOsScheme();
+  return ctx ? ctx.palette : canvasPalette(osMode(scheme));
+}
+function useCanvasThemeControls() {
+  const ctx = useContext(CanvasThemeContext);
+  const palette = useCanvasTheme();
+  return ctx != null ? ctx : {
+    palette,
+    preference: currentPreference,
+    setPreference: setCanvasThemePreference
+  };
+}
+const NEXT_PREFERENCE = {
+  system: "light",
+  light: "dark",
+  dark: "system"
+};
+const PREFERENCE_ICON = {
+  system: "theme-light-dark",
+  light: "weather-sunny",
+  dark: "weather-night"
+};
+const PREFERENCE_LABEL = {
+  system: "Theme: follows system",
+  light: "Theme: light",
+  dark: "Theme: dark"
+};
+function CanvasThemeToggle({
+  style,
+  size = 18
+}) {
+  const {
+    palette,
+    preference,
+    setPreference
+  } = useCanvasThemeControls();
+  const onPress = useCallback(() => setPreference(NEXT_PREFERENCE[preference]), [preference, setPreference]);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: `${PREFERENCE_LABEL[preference]}. Tap to change.`,
+      style: StyleSheet.flatten([toggleStyles.button, {
+        backgroundColor: palette.surface,
+        borderColor: palette.border
+      }, style]),
+      children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: PREFERENCE_ICON[preference], size, color: palette.foreground })
+    }
+  );
+}
+const toggleStyles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pressed: {
+    opacity: 0.7
+  }
+});export{CANVAS_DARK,CANVAS_LIGHT,CANVAS_THEME_STORAGE_KEY,CanvasThemeProvider,CanvasThemeToggle,canvasPalette,setCanvasThemePreference,themedStyles,useCanvasTheme,useCanvasThemeControls};//# sourceMappingURL=canvasTheme.js.map

package/lib/features/canvas/canvasTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTheme.js","sources":["../../../src/features/canvas/canvasTheme.tsx"],"sourcesContent":["/**\n * Canvas light/dark theming — the native port of the web canvas theme\n * (yantra-surface packages/canvas/src/styles/theme.css + surface.css).\n *\n * Two sets of tokens:\n * - Surface tokens (background, card, foreground, muted, border, primary,\n *   accent, destructive …) are the tweakcn export's `:root` / `.dark` values,\n *   used by the boards home, the viewer chrome, sheets and panels.\n * - Editor-grade tokens (`ed*`) mirror the web `[data-editor]` design layer:\n *   the dark grade keeps the native editors' existing near-black chassis, the\n *   light grade is the web `[data-editor='light']` set.\n *\n * The mode follows the OS (`useColorScheme`), or a host-provided mode, unless\n * the person picked light/dark with the toggle — that pick is persisted under\n * AsyncStorage key `canvas.theme`.\n *\n * Remote-safe: this module ships OTA inside the federated canvas remote, so\n * AsyncStorage is required in a try/catch (see canvasBoardsSnapshot.ts) and\n * `useCanvasTheme()` never throws without a provider — it falls back to the\n * OS scheme.\n */\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { Pressable, StyleSheet, useColorScheme, type StyleProp, type ViewStyle } from 'react-native';\n\nexport type CanvasThemeMode = 'light' | 'dark';\nexport type CanvasThemePreference = CanvasThemeMode | 'system';\n\nexport const CANVAS_THEME_STORAGE_KEY = 'canvas.theme';\n\nexport type CanvasPalette = {\n    mode: CanvasThemeMode;\n    isDark: boolean;\n\n    // ── Web surface tokens (tweakcn theme.css) ───────────────────────────\n    background: string;\n    foreground: string;\n    card: string;\n    cardForeground: string;\n    popover: string;\n    popoverForeground: string;\n    primary: string;\n    primaryForeground: string;\n    secondary: string;\n    secondaryForeground: string;\n    muted: string;\n    mutedForeground: string;\n    accent: string;\n    accentForeground: string;\n    destructive: string;\n    destructiveForeground: string;\n    border: string;\n    input: string;\n    ring: string;\n\n    // ── Native extras derived from the tokens (accessible on background) ─\n    /** Raised sheets, cards and fields: white in light, the card step in dark. */\n    surface: string;\n    /** Secondary body text, one step softer than foreground. */\n    inkSoft: string;\n    /** A stronger hairline for dashed drop zones and field edges. */\n    borderStrong: string;\n    /** The primary hue as text on the background (lime is unreadable on white). */\n    primaryText: string;\n    destructiveText: string;\n    destructiveSoft: string;\n    destructiveBorder: string;\n    successText: string;\n    successSoft: string;\n    warningText: string;\n    info: string;\n    infoSoft: string;\n    /** Translucent page ground for sticky / frosted bars. */\n    backgroundAlpha: (alpha: number) => string;\n    /** Foreground at `alpha`, for hairlines and tints that must flip with the mode. */\n    tint: (alpha: number) => string;\n\n    // ── Editor grade (web [data-editor] / [data-editor='light']) ─────────\n    edWell: string;\n    edBg: string;\n    edPanel: string;\n    edRaised: string;\n    edRaisedHi: string;\n    edLine: string;\n    edLineHi: string;\n    edInk: string;\n    edInk2: string;\n    edInk3: string;\n    /** Ink on an edInk or edAccent solid. */\n    edOnInk: string;\n    edAccent: string;\n    edAccentSoft: string;\n    edDanger: string;\n    edDangerSoft: string;\n    edOk: string;\n    edWarn: string;\n    /** edInk at `alpha` (white veil on dark, black veil on light). */\n    edTint: (alpha: number) => string;\n};\n\nconst rgba = (rgb: string) => (alpha: number) => `rgba(${rgb},${alpha})`;\n\nexport const CANVAS_LIGHT: CanvasPalette = {\n    mode: 'light',\n    isDark: false,\n\n    background: '#ffffff',\n    foreground: '#141414',\n    card: '#f4f4f5',\n    cardForeground: '#141414',\n    popover: '#ffffff',\n    popoverForeground: '#141414',\n    primary: '#e1ff00',\n    primaryForeground: '#000000',\n    secondary: '#27272a',\n    secondaryForeground: '#ffffff',\n    muted: '#f1f1f1',\n    mutedForeground: '#71717a',\n    accent: '#e1ff00',\n    accentForeground: '#000000',\n    destructive: '#ef4444',\n    destructiveForeground: '#ffffff',\n    border: '#e4e4e7',\n    input: '#e4e4e7',\n    ring: '#d4e100',\n\n    surface: '#ffffff',\n    inkSoft: '#3f3f46',\n    borderStrong: '#d4d4d8',\n    primaryText: '#4d7c0f',\n    destructiveText: '#b91c1c',\n    destructiveSoft: '#fef2f2',\n    destructiveBorder: '#fecaca',\n    successText: '#15803d',\n    successSoft: '#f0fdf4',\n    warningText: '#92400e',\n    info: '#2563eb',\n    infoSoft: '#dbeafe',\n    backgroundAlpha: rgba('255,255,255'),\n    tint: rgba('20,20,20'),\n\n    edWell: '#e4e4e7',\n    edBg: '#f5f5f3',\n    edPanel: '#ffffff',\n    edRaised: '#f4f4f5',\n    edRaisedHi: '#e9e9eb',\n    edLine: '#e4e4e7',\n    edLineHi: '#d4d4d8',\n    edInk: '#18181b',\n    edInk2: '#52525b',\n    edInk3: '#6b6b76',\n    edOnInk: '#ffffff',\n    edAccent: '#6c5ce7',\n    edAccentSoft: '#ece9ff',\n    edDanger: '#b91c1c',\n    edDangerSoft: '#fef2f2',\n    edOk: '#15803d',\n    edWarn: '#92400e',\n    edTint: rgba('0,0,0'),\n};\n\nexport const CANVAS_DARK: CanvasPalette = {\n    mode: 'dark',\n    isDark: true,\n\n    background: '#0d0d0d',\n    foreground: '#f2f2f2',\n    card: '#141414',\n    cardForeground: '#f2f2f2',\n    popover: '#0d0d0d',\n    popoverForeground: '#f2f2f2',\n    primary: '#d4ff00',\n    primaryForeground: '#000000',\n    secondary: '#262626',\n    secondaryForeground: '#f2f2f2',\n    muted: '#1a1a1a',\n    mutedForeground: '#a1a1aa',\n    accent: '#262626',\n    accentForeground: '#d4ff00',\n    destructive: '#7f1d1d',\n    destructiveForeground: '#f2f2f2',\n    border: '#262626',\n    input: '#262626',\n    ring: '#d4ff00',\n\n    surface: '#141414',\n    inkSoft: '#d4d4d8',\n    borderStrong: '#3f3f46',\n    primaryText: '#d4ff00',\n    destructiveText: '#f87171',\n    destructiveSoft: '#421f23',\n    destructiveBorder: '#7f3336',\n    successText: '#4ade80',\n    successSoft: '#12261a',\n    warningText: '#fbbf24',\n    info: '#6ea8fe',\n    infoSoft: '#243a5e',\n    backgroundAlpha: rgba('13,13,13'),\n    tint: rgba('242,242,242'),\n\n    // Native editors' existing dark chassis.\n    edWell: '#08080a',\n    edBg: '#0a0a0c',\n    edPanel: '#16161a',\n    edRaised: '#1f1f24',\n    edRaisedHi: '#2a2a32',\n    edLine: '#26262c',\n    edLineHi: '#32323a',\n    edInk: '#f7f7fa',\n    edInk2: '#9a9aa5',\n    edInk3: '#7a7a88',\n    edOnInk: '#0a0a0c',\n    edAccent: '#8b7cff',\n    edAccentSoft: 'rgba(139,124,255,0.2)',\n    edDanger: '#f87171',\n    edDangerSoft: 'rgba(248,113,113,0.14)',\n    edOk: '#4ade80',\n    edWarn: '#fbbf24',\n    edTint: rgba('255,255,255'),\n};\n\nexport function canvasPalette(mode: CanvasThemeMode): CanvasPalette {\n    return mode === 'dark' ? CANVAS_DARK : CANVAS_LIGHT;\n}\n\n/**\n * Wraps a `(theme) => StyleSheet.create(...)` factory so each palette's sheet\n * is built once per module, not once per mounted component instance.\n */\nexport function themedStyles<T>(factory: (theme: CanvasPalette) => T): (theme: CanvasPalette) => T {\n    const cache = new Map<CanvasPalette, T>();\n    return (theme) => {\n        let sheet = cache.get(theme);\n        if (!sheet) {\n            sheet = factory(theme);\n            cache.set(theme, sheet);\n        }\n        return sheet;\n    };\n}\n\n// ── Persisted preference (shared by every provider in the process) ─────────\n\ntype StorageLike = { getItem(key: string): Promise<string | null>; setItem(key: string, value: string): Promise<void> };\nlet storage: StorageLike | null = null;\ntry {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports, global-require\n    storage = require('@react-native-async-storage/async-storage').default ?? null;\n} catch {\n    storage = null;\n}\n\nfunction isPreference(value: unknown): value is CanvasThemePreference {\n    return value === 'light' || value === 'dark' || value === 'system';\n}\n\nlet currentPreference: CanvasThemePreference = 'system';\nlet loaded = false;\nconst listeners = new Set<(pref: CanvasThemePreference) => void>();\n\nfunction notify() {\n    listeners.forEach((fn) => fn(currentPreference));\n}\n\nfunction loadPreference() {\n    if (loaded || !storage) return;\n    loaded = true;\n    try {\n        void storage\n            .getItem(CANVAS_THEME_STORAGE_KEY)\n            .then((raw) => {\n                if (isPreference(raw) && raw !== currentPreference) {\n                    currentPreference = raw;\n                    notify();\n                }\n            })\n            .catch(() => undefined);\n    } catch {\n        /* storage unavailable: memory only */\n    }\n}\n\nexport function setCanvasThemePreference(next: CanvasThemePreference) {\n    if (!isPreference(next)) return;\n    loaded = true;\n    currentPreference = next;\n    notify();\n    try {\n        void storage?.setItem(CANVAS_THEME_STORAGE_KEY, next).catch(() => undefined);\n    } catch {\n        /* ignore */\n    }\n}\n\n// ── Context ─────────────────────────────────────────────────────────────────\n\ntype CanvasThemeContextValue = {\n    palette: CanvasPalette;\n    preference: CanvasThemePreference;\n    setPreference: (next: CanvasThemePreference) => void;\n};\n\nconst CanvasThemeContext = createContext<CanvasThemeContextValue | null>(null);\n\n/**\n * The OS scheme, or null where the host's react-native exposes no\n * useColorScheme (minimal mocks, exotic hosts). Its presence is constant for\n * the process, so the hook order stays stable.\n */\nfunction useOsScheme(): string | null | undefined {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- process-constant branch\n    return typeof useColorScheme === 'function' ? useColorScheme() : null;\n}\n\nfunction osMode(scheme: string | null | undefined): CanvasThemeMode {\n    return scheme === 'dark' ? 'dark' : 'light';\n}\n\nexport type CanvasThemeProviderProps = {\n    /** Host-provided mode; used while the preference is 'system'. Null/undefined follows the OS. */\n    mode?: CanvasThemeMode | null;\n    children?: React.ReactNode;\n};\n\n/**\n * Mount once at each exposed root. A nested provider without its own `mode`\n * passes through to the outer one, so the viewer inside the experience shares\n * the experience's theme.\n */\nexport function CanvasThemeProvider({ mode, children }: CanvasThemeProviderProps) {\n    const parent = useContext(CanvasThemeContext);\n    const scheme = useOsScheme();\n    const [preference, setPreferenceState] = useState<CanvasThemePreference>(currentPreference);\n\n    useEffect(() => {\n        const listener = (pref: CanvasThemePreference) => setPreferenceState(pref);\n        listeners.add(listener);\n        // Catch a change that landed between render and subscribe.\n        setPreferenceState(currentPreference);\n        loadPreference();\n        return () => {\n            listeners.delete(listener);\n        };\n    }, []);\n\n    const resolved: CanvasThemeMode = preference !== 'system' ? preference : (mode ?? osMode(scheme));\n    const value = useMemo<CanvasThemeContextValue>(\n        () => ({ palette: canvasPalette(resolved), preference, setPreference: setCanvasThemePreference }),\n        [resolved, preference],\n    );\n\n    if (parent && mode == null) return <>{children}</>;\n    return <CanvasThemeContext.Provider value={value}>{children}</CanvasThemeContext.Provider>;\n}\n\n/** The active palette. Never throws: without a provider it follows the OS scheme. */\nexport function useCanvasTheme(): CanvasPalette {\n    const ctx = useContext(CanvasThemeContext);\n    const scheme = useOsScheme();\n    return ctx ? ctx.palette : canvasPalette(osMode(scheme));\n}\n\n/** Preference + setter for the toggle. Without a provider it still writes the shared store. */\nexport function useCanvasThemeControls(): CanvasThemeContextValue {\n    const ctx = useContext(CanvasThemeContext);\n    const palette = useCanvasTheme();\n    return ctx ?? { palette, preference: currentPreference, setPreference: setCanvasThemePreference };\n}\n\n/** Wraps an exposed component in its own CanvasThemeProvider (pass-through when one is already above). */\nexport function withCanvasTheme<P extends object>(Component: React.ComponentType<P>): React.ComponentType<P> {\n    function CanvasThemed(props: P) {\n        return (\n            <CanvasThemeProvider>\n                <Component {...props} />\n            </CanvasThemeProvider>\n        );\n    }\n    CanvasThemed.displayName = `withCanvasTheme(${Component.displayName || Component.name || 'Component'})`;\n    return CanvasThemed;\n}\n\nconst NEXT_PREFERENCE: Record<CanvasThemePreference, CanvasThemePreference> = {\n    system: 'light',\n    light: 'dark',\n    dark: 'system',\n};\n\nconst PREFERENCE_ICON: Record<CanvasThemePreference, React.ComponentProps<typeof MaterialCommunityIcons>['name']> = {\n    system: 'theme-light-dark',\n    light: 'weather-sunny',\n    dark: 'weather-night',\n};\n\nconst PREFERENCE_LABEL: Record<CanvasThemePreference, string> = {\n    system: 'Theme: follows system',\n    light: 'Theme: light',\n    dark: 'Theme: dark',\n};\n\n/** Sun / moon / auto toggle — cycles system → light → dark (web ThemeToggleButton). */\nexport function CanvasThemeToggle({ style, size = 18 }: { style?: StyleProp<ViewStyle>; size?: number }) {\n    const { palette, preference, setPreference } = useCanvasThemeControls();\n    const onPress = useCallback(() => setPreference(NEXT_PREFERENCE[preference]), [preference, setPreference]);\n    return (\n        <Pressable\n            onPress={onPress}\n            hitSlop={8}\n            accessibilityRole=\"button\"\n            accessibilityLabel={`${PREFERENCE_LABEL[preference]}. Tap to change.`}\n            // A plain style, never a function: the host's NativeWind JSX wrapper\n            // drops function styles inside the OTA remote (see canvasUi Pressable).\n            style={StyleSheet.flatten([\n                toggleStyles.button,\n                { backgroundColor: palette.surface, borderColor: palette.border },\n                style,\n            ])}\n        >\n            <MaterialCommunityIcons name={PREFERENCE_ICON[preference]} size={size} color={palette.foreground} />\n        </Pressable>\n    );\n}\n\nconst toggleStyles = StyleSheet.create({\n    button: {\n        width: 36,\n        height: 36,\n        borderRadius: 18,\n        borderWidth: StyleSheet.hairlineWidth,\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    pressed: { opacity: 0.7 },\n});\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/canvasUi.js

@@ -0,0 +1,381 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {MaterialCommunityIcons}from'@expo/vector-icons';import {forwardRef,useState,useCallback,useRef,useEffect}from'react';import {Pressable as Pressable$1,StyleSheet,ScrollView,Text,View,Animated,Easing}from'react-native';import {themedStyles,useCanvasTheme}from'./canvasTheme.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const flattenStyle = (style) => typeof StyleSheet.flatten === "function" && typeof style !== "function" ? StyleSheet.flatten(style) : style;
+const Pressable = forwardRef(function Pressable2(_a, ref) {
+  var _b = _a, {
+    style,
+    children,
+    onPressIn,
+    onPressOut
+  } = _b, rest = __objRest(_b, [
+    "style",
+    "children",
+    "onPressIn",
+    "onPressOut"
+  ]);
+  const [pressed, setPressed] = useState(false);
+  const handleIn = useCallback((event) => {
+    setPressed(true);
+    onPressIn == null ? void 0 : onPressIn(event);
+  }, [onPressIn]);
+  const handleOut = useCallback((event) => {
+    setPressed(false);
+    onPressOut == null ? void 0 : onPressOut(event);
+  }, [onPressOut]);
+  const state = {
+    pressed,
+    hovered: false
+  };
+  const resolvedStyle = typeof style === "function" ? style(state) : style;
+  const resolvedChildren = typeof children === "function" ? children(state) : children;
+  return /* @__PURE__ */ jsx(Pressable$1, __spreadProps(__spreadValues({ ref }, rest), { onPressIn: handleIn, onPressOut: handleOut, style: flattenStyle(resolvedStyle), children: resolvedChildren }));
+});
+const SPACE = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32
+};
+const RADIUS = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  pill: 999
+};
+const TYPE = {
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500"
+  },
+  label: {
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: "600"
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: "400"
+  },
+  title: {
+    fontSize: 17,
+    lineHeight: 22,
+    fontWeight: "600"
+  },
+  heading: {
+    fontSize: 22,
+    lineHeight: 28,
+    fontWeight: "700"
+  },
+  display: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: "700"
+  }
+};
+const HIT = 44;
+function SectionHeader({
+  title,
+  detail,
+  action,
+  onAction,
+  style
+}) {
+  const styles = makeStyles(useCanvasTheme());
+  return /* @__PURE__ */ jsxs(View, { style: [styles.sectionHeader, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.sectionTitleRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.sectionTitle, accessibilityRole: "header", children: title }),
+      detail ? /* @__PURE__ */ jsx(Text, { style: styles.sectionDetail, children: detail }) : null
+    ] }),
+    action && onAction ? /* @__PURE__ */ jsx(Pressable, { onPress: onAction, hitSlop: 10, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.sectionAction, children: action }) }) : null
+  ] });
+}
+function Segmented({
+  options,
+  value,
+  onChange,
+  style
+}) {
+  const styles = makeStyles(useCanvasTheme());
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: [styles.segmentScroll, style],
+      contentContainerStyle: styles.segmentTrack,
+      children: options.map((option) => {
+        const on = option.id === value;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(option.id), style: [styles.segment, on && styles.segmentOn], accessibilityRole: "tab", accessibilityState: {
+          selected: on
+        }, children: /* @__PURE__ */ jsx(Text, { style: [styles.segmentLabel, on && styles.segmentLabelOn], children: option.label }) }, option.id);
+      })
+    }
+  );
+}
+function IconButton({
+  icon,
+  onPress,
+  label,
+  tone = "plain",
+  size = 40
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsx(Pressable, { onPress, hitSlop: Math.max(0, (HIT - size) / 2), style: ({
+    pressed
+  }) => [styles.iconButton, {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  }, tone === "filled" && styles.iconButtonFilled, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: Math.round(size * 0.5), color: theme.foreground }) });
+}
+function ActionButton({
+  label,
+  icon,
+  onPress,
+  variant = "primary",
+  disabled,
+  style
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const primary = variant === "primary";
+  const ink = primary ? theme.primaryForeground : theme.foreground;
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, disabled, style: ({
+    pressed
+  }) => [styles.action, primary ? styles.actionPrimary : styles.actionSecondary, disabled && styles.disabled, pressed && !disabled && styles.pressed, style], accessibilityRole: "button", accessibilityState: {
+    disabled: Boolean(disabled)
+  }, children: [
+    icon ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 18, color: ink }) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, {
+      color: ink
+    }], children: label })
+  ] });
+}
+function Skeleton({
+  style,
+  radius = 0
+}) {
+  const theme = useCanvasTheme();
+  const pulse = useRef(new Animated.Value(0.45)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([Animated.timing(pulse, {
+      toValue: 1,
+      duration: 900,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(pulse, {
+      toValue: 0.45,
+      duration: 900,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+  return /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [style != null ? style : StyleSheet.absoluteFillObject, {
+    borderRadius: radius,
+    backgroundColor: theme.isDark ? "#262626" : "#e7e7ea",
+    opacity: pulse
+  }] });
+}
+const COVER_WASHES = [{
+  light: ["#fde7d9", "#c2410c"],
+  dark: ["#3a2418", "#fdba74"]
+}, {
+  light: ["#e0ecff", "#1d4ed8"],
+  dark: ["#1a2540", "#93c5fd"]
+}, {
+  light: ["#e6f6ec", "#047857"],
+  dark: ["#15291f", "#6ee7b7"]
+}, {
+  light: ["#efe7ff", "#6d28d9"],
+  dark: ["#261d3d", "#c4b5fd"]
+}, {
+  light: ["#fde4ec", "#be185d"],
+  dark: ["#3a1a27", "#f9a8d4"]
+}, {
+  light: ["#fdf3d4", "#a16207"],
+  dark: ["#33290f", "#fcd34d"]
+}];
+function coverWash(seed, isDark) {
+  let h = 0;
+  for (let i = 0; i < seed.length; i += 1) h = h * 31 + seed.charCodeAt(i) | 0;
+  const pick = COVER_WASHES[Math.abs(h) % COVER_WASHES.length];
+  const [wash, ink] = isDark ? pick.dark : pick.light;
+  return {
+    wash,
+    ink
+  };
+}
+function CoverPlaceholder({
+  seed,
+  icon,
+  label
+}) {
+  const theme = useCanvasTheme();
+  const {
+    wash,
+    ink
+  } = coverWash(seed, theme.isDark);
+  return /* @__PURE__ */ jsxs(View, { style: [StyleSheet.absoluteFillObject, placeholderStyles.wrap, {
+    backgroundColor: wash
+  }], children: [
+    /* @__PURE__ */ jsx(View, { style: [placeholderStyles.badge, {
+      backgroundColor: theme.isDark ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)"
+    }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 26, color: ink }) }),
+    label ? /* @__PURE__ */ jsx(Text, { style: [placeholderStyles.label, {
+      color: ink
+    }], children: label }) : null
+  ] });
+}
+const placeholderStyles = StyleSheet.create({
+  wrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.sm
+  },
+  badge: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "600"
+  })
+});
+const pressedStyle = (pressed) => pressed ? {
+  opacity: 0.72,
+  transform: [{
+    scale: 0.98
+  }]
+} : null;
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: SPACE.md,
+    marginBottom: SPACE.md
+  },
+  sectionTitleRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: SPACE.sm,
+    flexShrink: 1
+  },
+  sectionTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground
+  }),
+  sectionDetail: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground
+  }),
+  sectionAction: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground
+  }),
+  segmentScroll: {
+    flexGrow: 0,
+    alignSelf: "flex-start"
+  },
+  segmentTrack: {
+    flexDirection: "row",
+    padding: 3,
+    gap: 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.card
+  },
+  segment: {
+    minHeight: 34,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  segmentOn: {
+    backgroundColor: theme.isDark ? theme.secondary : theme.surface,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0 : 0.08,
+    shadowRadius: 4,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    elevation: theme.isDark ? 0 : 1
+  },
+  segmentLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground
+  }),
+  segmentLabelOn: {
+    color: theme.foreground
+  },
+  iconButton: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconButtonFilled: {
+    backgroundColor: theme.card
+  },
+  action: {
+    minHeight: HIT,
+    paddingHorizontal: SPACE.lg + 2,
+    borderRadius: RADIUS.pill,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.sm
+  },
+  actionPrimary: {
+    backgroundColor: theme.primary
+  },
+  actionSecondary: {
+    backgroundColor: theme.card
+  },
+  actionLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15
+  }),
+  disabled: {
+    opacity: 0.4
+  },
+  pressed: {
+    opacity: 0.72,
+    transform: [{
+      scale: 0.98
+    }]
+  }
+}));export{ActionButton,CoverPlaceholder,HIT,IconButton,Pressable,RADIUS,SPACE,SectionHeader,Segmented,Skeleton,TYPE,coverWash,pressedStyle};//# sourceMappingURL=canvasUi.js.map