@expofp/debug 0.0.0-experimental.d269d30

package/README.md

@@ -0,0 +1,17 @@
+# @expofp/debug
+
+Internal debug panel for the ExpoFP SDK. Bundled with `@expofp/floorplan` — no separate install.
+
+## Open the panel
+
+Type `dbg123` anywhere on the page (the 6 letters, in order, no modifiers). A Debug button appears on the right edge — click it to open the panel.
+
+## Settings
+
+- **Show Debug Button Overlay** — keeps the button visible across reloads.
+- **Debug namespaces** — pattern for the [`debug`](https://www.npmjs.com/package/debug) npm library (e.g. `efp:*`). Applies immediately, no reload.
+- Other
+
+## Log
+
+Captures `console.log` / `debug` / `info` / `warn` / `error` from page load — including styled output from the `debug` library — and renders it with `%c` colors preserved. Capped at 5000 entries.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import './lib/init-debug.js';
+export * from './lib/settings/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,2 @@
+import './lib/init-debug.js';
+export * from './lib/settings/index.js';

package/dist/lib/format-console-args.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+export type FormattedSegment = {
+    text: string;
+    style: CSSProperties;
+};
+export type FormattedArgs = {
+    segments: FormattedSegment[];
+    trailing: unknown[];
+};
+/**
+ * Parse a console-style format string with `%c`/`%s`/`%d`/`%i`/`%f`/`%o`/`%O`/`%%`
+ * into styled text segments plus any trailing unconsumed args. Mirrors browser
+ * DevTools formatting so colored `console.log` output can be rendered in the UI.
+ */
+export declare function formatConsoleArgs(args: unknown[]): FormattedArgs;
+//# sourceMappingURL=format-console-args.d.ts.map

package/dist/lib/format-console-args.js

@@ -0,0 +1,95 @@
+/**
+ * Parse a console-style format string with `%c`/`%s`/`%d`/`%i`/`%f`/`%o`/`%O`/`%%`
+ * into styled text segments plus any trailing unconsumed args. Mirrors browser
+ * DevTools formatting so colored `console.log` output can be rendered in the UI.
+ */
+export function formatConsoleArgs(args) {
+    const fmt = args[0];
+    if (typeof fmt !== 'string' || !fmt.includes('%')) {
+        return { segments: [], trailing: args };
+    }
+    const segments = [];
+    let style = {};
+    let buf = '';
+    let argIdx = 1;
+    let i = 0;
+    const flush = () => {
+        if (buf.length > 0) {
+            segments.push({ text: buf, style });
+            buf = '';
+        }
+    };
+    while (i < fmt.length) {
+        const ch = fmt[i];
+        if (ch !== '%' || i === fmt.length - 1) {
+            buf += ch;
+            i++;
+            continue;
+        }
+        const directive = fmt[i + 1];
+        switch (directive) {
+            case 'c': {
+                flush();
+                const css = args[argIdx++];
+                style = typeof css === 'string' ? parseCss(css) : {};
+                i += 2;
+                break;
+            }
+            case 's': {
+                buf += String(args[argIdx++] ?? '');
+                i += 2;
+                break;
+            }
+            case 'd':
+            case 'i': {
+                const n = Number(args[argIdx++]);
+                buf += Number.isNaN(n) ? 'NaN' : String(Math.trunc(n));
+                i += 2;
+                break;
+            }
+            case 'f': {
+                buf += String(Number(args[argIdx++]));
+                i += 2;
+                break;
+            }
+            case 'o':
+            case 'O': {
+                const v = args[argIdx++];
+                try {
+                    buf += JSON.stringify(v);
+                }
+                catch {
+                    buf += String(v);
+                }
+                i += 2;
+                break;
+            }
+            case '%': {
+                buf += '%';
+                i += 2;
+                break;
+            }
+            default: {
+                buf += ch;
+                i++;
+            }
+        }
+    }
+    flush();
+    return { segments, trailing: args.slice(argIdx) };
+}
+function parseCss(css) {
+    const out = {};
+    for (const decl of css.split(';')) {
+        const colonIdx = decl.indexOf(':');
+        if (colonIdx === -1)
+            continue;
+        const prop = decl.slice(0, colonIdx).trim();
+        const val = decl.slice(colonIdx + 1).trim();
+        if (!prop || !val)
+            continue;
+        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        out[camel] = val;
+    }
+    return out;
+}

package/dist/lib/init-debug.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=init-debug.d.ts.map

package/dist/lib/init-debug.js

@@ -0,0 +1,26 @@
+import { appendLog } from './log-store.js';
+if (typeof console !== 'undefined') {
+    const wrap = (level, original) => (...args) => {
+        appendLog({ level, args, ts: Date.now() });
+        original(...args);
+    };
+    const originalLog = console.log.bind(console);
+    const originalDebug = console.debug.bind(console);
+    const originalInfo = console.info.bind(console);
+    const originalWarn = console.warn.bind(console);
+    const originalError = console.error.bind(console);
+    console.log = wrap('log', originalLog);
+    console.debug = wrap('debug', originalDebug);
+    console.info = wrap('info', originalInfo);
+    console.warn = wrap('warn', originalWarn);
+    console.error = wrap('error', originalError);
+}
+if (typeof window !== 'undefined' || typeof document !== 'undefined') {
+    import('./ui/index.js')
+        .then(({ renderDebugUi }) => {
+        renderDebugUi();
+    })
+        .catch(() => {
+        /* debug UI failed to load */
+    });
+}

package/dist/lib/log-store.d.ts

@@ -0,0 +1,11 @@
+export type LogLevel = 'log' | 'debug' | 'info' | 'warn' | 'error';
+export type LogEntry = {
+    level: LogLevel;
+    args: unknown[];
+    ts: number;
+};
+export declare function getLogSnapshot(): readonly LogEntry[];
+export declare function subscribeLogStore(listener: () => void): () => void;
+export declare function appendLog(entry: LogEntry): void;
+export declare function clearLogs(): void;
+//# sourceMappingURL=log-store.d.ts.map

package/dist/lib/log-store.js

@@ -0,0 +1,22 @@
+const MAX = 5000;
+let snapshot = [];
+const listeners = new Set();
+export function getLogSnapshot() {
+    return snapshot;
+}
+export function subscribeLogStore(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function appendLog(entry) {
+    snapshot = snapshot.length >= MAX ? [...snapshot.slice(1), entry] : [...snapshot, entry];
+    listeners.forEach((l) => l());
+}
+export function clearLogs() {
+    if (snapshot.length === 0)
+        return;
+    snapshot = [];
+    listeners.forEach((l) => l());
+}

package/dist/lib/settings/adopt-global-settings.d.ts

@@ -0,0 +1,20 @@
+export type GlobalSettingSchema = {
+    type: 'boolean';
+    default?: boolean;
+} | {
+    type: 'string';
+    default?: string;
+    placeholder?: string;
+} | {
+    type: 'enum';
+    values: readonly string[];
+    default: string;
+};
+export type EfpDebugUi = Record<string, GlobalSettingSchema>;
+declare global {
+    interface Window {
+        efpDebugUi?: EfpDebugUi;
+    }
+}
+export declare function adoptGlobalSettings(): void;
+//# sourceMappingURL=adopt-global-settings.d.ts.map

package/dist/lib/settings/adopt-global-settings.js

@@ -0,0 +1,38 @@
+import { registerBooleanSetting } from './register-boolean-setting.js';
+import { registerEnumSetting } from './register-enum-setting.js';
+import { registerStringSetting } from './register-string-setting.js';
+const adopted = new Set();
+export function adoptGlobalSettings() {
+    if (typeof window === 'undefined')
+        return;
+    const settings = window.efpDebugUi;
+    if (!settings)
+        return;
+    for (const [key, schema] of Object.entries(settings)) {
+        if (adopted.has(key))
+            continue;
+        adopted.add(key);
+        switch (schema.type) {
+            case 'boolean':
+                registerBooleanSetting({
+                    key,
+                    default: schema.default,
+                });
+                break;
+            case 'string':
+                registerStringSetting({
+                    key,
+                    default: schema.default,
+                    placeholder: schema.placeholder,
+                });
+                break;
+            case 'enum':
+                registerEnumSetting({
+                    key,
+                    values: schema.values,
+                    default: schema.default,
+                });
+                break;
+        }
+    }
+}

package/dist/lib/settings/editor-props.d.ts

@@ -0,0 +1,7 @@
+export type EditorProps<T, K = void> = {
+    label: string;
+    value: T;
+    context: K;
+    onChange: (value: T) => void;
+};
+//# sourceMappingURL=editor-props.d.ts.map

package/dist/lib/settings/editor-props.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/settings/index.d.ts

@@ -0,0 +1,7 @@
+export * from './adopt-global-settings.js';
+export * from './register-boolean-setting.js';
+export * from './register-enum-setting.js';
+export * from './register-setting.js';
+export * from './register-string-setting.js';
+export * from './reset-all-settings.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/settings/index.js

@@ -0,0 +1,6 @@
+export * from './adopt-global-settings.js';
+export * from './register-boolean-setting.js';
+export * from './register-enum-setting.js';
+export * from './register-setting.js';
+export * from './register-string-setting.js';
+export * from './reset-all-settings.js';

package/dist/lib/settings/register-boolean-setting.d.ts

@@ -0,0 +1,8 @@
+import { type DebugSetting } from './register-setting.js';
+export interface RegisterBooleanSettingOptions {
+    key: string;
+    default?: boolean;
+    onChange?: (value: boolean) => void;
+}
+export declare function registerBooleanSetting(options: RegisterBooleanSettingOptions): DebugSetting<boolean>;
+//# sourceMappingURL=register-boolean-setting.d.ts.map

package/dist/lib/settings/register-boolean-setting.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { registerSetting } from './register-setting.js';
+export function registerBooleanSetting(options) {
+    const BooleanEditorLazy = React.lazy(() => import('../ui/boolean-editor.js').then((mod) => ({
+        default: mod.BooleanEditor,
+    })));
+    return registerSetting({
+        key: options.key,
+        default: options.default ?? false,
+        Editor: BooleanEditorLazy,
+        onChange: options.onChange,
+    });
+}

package/dist/lib/settings/register-enum-setting.d.ts

@@ -0,0 +1,9 @@
+import { type DebugSetting } from './register-setting.js';
+export interface RegisterEnumSettingOptions<T> {
+    key: string;
+    values: readonly T[];
+    default: T;
+    onChange?: (value: T) => void;
+}
+export declare function registerEnumSetting<T>(options: RegisterEnumSettingOptions<T>): DebugSetting<T>;
+//# sourceMappingURL=register-enum-setting.d.ts.map

package/dist/lib/settings/register-enum-setting.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { registerSetting } from './register-setting.js';
+export function registerEnumSetting(options) {
+    const EnumEditorLazy = React.lazy(() => import('../ui/enum-editor.js').then((mod) => ({
+        default: mod.EnumEditor,
+    })));
+    return registerSetting({
+        key: options.key,
+        default: options.default,
+        Editor: EnumEditorLazy,
+        context: { values: options.values },
+        onChange: options.onChange,
+    });
+}

package/dist/lib/settings/register-setting.d.ts

@@ -0,0 +1,18 @@
+import type { EditorProps } from './editor-props.js';
+export interface DebugSetting<T> {
+    get: () => T;
+    set: (value: T) => void;
+    reset: () => void;
+    useState: () => [T, (value: T) => void];
+}
+export interface RegisterSettingOptions<T, K = void> {
+    key: string;
+    default: T;
+    Editor: React.FC<EditorProps<T, K>>;
+    context?: K;
+    onChange?: (value: T) => void;
+    serialize?: (value: T) => string;
+    deserialize?: (raw: string) => T;
+}
+export declare function registerSetting<T, K = void>(options: RegisterSettingOptions<T, K>): DebugSetting<T>;
+//# sourceMappingURL=register-setting.d.ts.map

package/dist/lib/settings/register-setting.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { editors, resets } from './setting-registry.js';
+const LOCAL_STORAGE_EVENT = 'efp-local-storage';
+export function registerSetting(options) {
+    const { key, default: defaultValue, Editor, context, onChange, serialize = JSON.stringify, deserialize = (raw) => JSON.parse(raw), } = options;
+    const get = () => {
+        const raw = localStorage.getItem(key);
+        if (raw === null)
+            return defaultValue;
+        try {
+            return deserialize(raw);
+        }
+        catch {
+            return defaultValue;
+        }
+    };
+    const set = (value) => {
+        localStorage.setItem(key, serialize(value));
+        onChange?.(value);
+        emitLocalStorageChange(key);
+    };
+    const reset = () => {
+        localStorage.removeItem(key);
+        onChange?.(defaultValue);
+        emitLocalStorageChange(key);
+    };
+    resets.push(reset);
+    function useLocalStorageState() {
+        const [state, setState] = useState(get());
+        useEffect(() => {
+            const update = () => setState(get());
+            const onStorage = (e) => {
+                if (e.key === key)
+                    update();
+            };
+            const onLocal = (e) => {
+                const { detail } = e;
+                if (detail?.key === key)
+                    update();
+            };
+            window.addEventListener('storage', onStorage);
+            window.addEventListener(LOCAL_STORAGE_EVENT, onLocal);
+            return () => {
+                window.removeEventListener('storage', onStorage);
+                window.removeEventListener(LOCAL_STORAGE_EVENT, onLocal);
+            };
+        }, []);
+        return [state, set];
+    }
+    const EditorImpl = () => {
+        const [state, setState] = useLocalStorageState();
+        return _jsx(Editor, { label: key, value: state, context: context, onChange: setState });
+    };
+    EditorImpl.displayName = `DebugSetting(${key})`;
+    editors.push(EditorImpl);
+    return {
+        get,
+        set,
+        reset,
+        useState: useLocalStorageState,
+    };
+}
+function emitLocalStorageChange(key) {
+    window.dispatchEvent(new CustomEvent(LOCAL_STORAGE_EVENT, { detail: { key } }));
+}

package/dist/lib/settings/register-string-setting.d.ts

@@ -0,0 +1,9 @@
+import { type DebugSetting } from './register-setting.js';
+export interface RegisterStringSettingOptions {
+    key: string;
+    default?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+}
+export declare function registerStringSetting(options: RegisterStringSettingOptions): DebugSetting<string>;
+//# sourceMappingURL=register-string-setting.d.ts.map

package/dist/lib/settings/register-string-setting.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { registerSetting } from './register-setting.js';
+export function registerStringSetting(options) {
+    const StringEditorLazy = React.lazy(() => import('../ui/string-editor.js').then((mod) => ({
+        default: mod.StringEditor,
+    })));
+    return registerSetting({
+        key: options.key,
+        default: options.default ?? '',
+        Editor: StringEditorLazy,
+        context: { placeholder: options.placeholder },
+        onChange: options.onChange,
+        serialize: (v) => v,
+        deserialize: (v) => v,
+    });
+}

package/dist/lib/settings/reset-all-settings.d.ts

@@ -0,0 +1,2 @@
+export declare function resetAllSettings(): void;
+//# sourceMappingURL=reset-all-settings.d.ts.map

package/dist/lib/settings/reset-all-settings.js

@@ -0,0 +1,4 @@
+import { resets } from './setting-registry.js';
+export function resetAllSettings() {
+    resets.forEach((reset) => reset());
+}

package/dist/lib/settings/setting-registry.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+export declare const editors: FC[];
+export declare const resets: (() => void)[];
+//# sourceMappingURL=setting-registry.d.ts.map

package/dist/lib/settings/setting-registry.js

@@ -0,0 +1,2 @@
+export const editors = [];
+export const resets = [];

package/dist/lib/ui/boolean-editor.d.ts

@@ -0,0 +1,3 @@
+import type { EditorProps } from '../settings/editor-props.js';
+export declare const BooleanEditor: React.FC<EditorProps<boolean>>;
+//# sourceMappingURL=boolean-editor.d.ts.map

package/dist/lib/ui/boolean-editor.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex, Switch } from '@radix-ui/themes';
+import { SettingsItem } from './settings-item.js';
+export const BooleanEditor = (props) => {
+    return (_jsx(SettingsItem, { label: props.label, children: _jsx(Flex, { children: _jsx(Switch, { checked: props.value, onCheckedChange: (checked) => props.onChange(checked) }) }) }));
+};

package/dist/lib/ui/debug-overlay.d.ts

@@ -0,0 +1,7 @@
+import '@radix-ui/themes/styles.css';
+interface DebugPanelProps {
+    onClose?: () => void;
+}
+export declare const DebugOverlay: ({ onClose }: DebugPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=debug-overlay.d.ts.map

package/dist/lib/ui/debug-overlay.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@radix-ui/themes/styles.css';
+import { Box, Container, Theme } from '@radix-ui/themes';
+import { DebugTabs } from './debug-tabs.js';
+export const DebugOverlay = ({ onClose }) => {
+    return (_jsx(Theme, { appearance: "dark", children: _jsx(Box, { position: "fixed", top: "0", right: "0", width: "100vw", height: "100dvh", overflowY: "auto", style: { backgroundColor: 'black' }, children: _jsx(Container, { size: "4", px: "2", children: _jsx(DebugTabs, { onClose: onClose }) }) }) }));
+};

package/dist/lib/ui/debug-tabs.d.ts

@@ -0,0 +1,6 @@
+interface DebugTabsProps {
+    onClose?: () => void;
+}
+export declare const DebugTabs: ({ onClose }: DebugTabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=debug-tabs.d.ts.map

package/dist/lib/ui/debug-tabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { Button, Tabs } from '@radix-ui/themes';
+import { LogTab } from './log-tab.js';
+import { SettingsTab } from './settings-tab.js';
+export const DebugTabs = ({ onClose }) => (_jsxs(Tabs.Root, { defaultValue: "settingsTab", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "settingsTab", children: "Settings" }), _jsx(Tabs.Trigger, { value: "logTab", children: "Log" }), _jsxs(Button, { ml: "auto", variant: "soft", mt: "3px", color: "gray", onClick: onClose, children: [_jsx(Cross1Icon, { width: "16", height: "16" }), " Close"] })] }), _jsx(Tabs.Content, { value: "settingsTab", children: _jsx(SettingsTab, {}) }), _jsx(Tabs.Content, { value: "logTab", children: _jsx(LogTab, {}) })] }));

package/dist/lib/ui/debug-ui.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export declare const DebugUi: FC<{
+    open: boolean;
+    hostSelector?: string;
+    useDebugButtonState: () => [boolean, (n: boolean) => void];
+}>;
+//# sourceMappingURL=debug-ui.d.ts.map

package/dist/lib/ui/debug-ui.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { addDebugSecretListener } from '../utils/add-debug-secret-listener.js';
+import { SideButton } from './side-button.js';
+const LazyDebugOverlay = lazy(async () => ({
+    default: (await import('./debug-overlay.js')).DebugOverlay,
+}));
+const DEFAULT_HOST_SELECTOR = '.expofp-floorplan-default';
+export const DebugUi = (props) => {
+    const [isOpen, setIsOpen] = useState(props.open);
+    const [debugButtonEnabled, setDebugButtonEnabled] = props.useDebugButtonState();
+    const selector = props.hostSelector ?? DEFAULT_HOST_SELECTOR;
+    useEffect(() => {
+        return addDebugSecretListener(() => {
+            setDebugButtonEnabled(true);
+            setIsOpen(true);
+        });
+    }, []);
+    // set visibility of efp floorplan to none when debug ui is open
+    // otherwise, z-index issues occur
+    useEffect(() => {
+        const efpFloorplan = document.querySelector(selector);
+        if (efpFloorplan) {
+            efpFloorplan.style.visibility = isOpen ? 'hidden' : 'visible';
+        }
+    }, [isOpen, selector]);
+    if (isOpen) {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(LazyDebugOverlay, { onClose: () => {
+                    setIsOpen(false);
+                } }) }));
+    }
+    return debugButtonEnabled ? _jsx(SideButton, { onClick: () => setIsOpen(true) }) : null;
+};
+DebugUi.displayName = 'DebugUi';

package/dist/lib/ui/enum-editor.d.ts

@@ -0,0 +1,5 @@
+import type { EditorProps } from '../settings/editor-props.js';
+export declare function EnumEditor<T>(props: EditorProps<T, {
+    values: readonly T[];
+}>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enum-editor.d.ts.map

package/dist/lib/ui/enum-editor.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from '@radix-ui/themes';
+import { SettingsItem } from './settings-item.js';
+export function EnumEditor(props) {
+    const stringMode = props.context.values.every((v) => typeof v === 'string');
+    const stringify = stringMode ? (v) => v : (v) => JSON.stringify(v);
+    const parse = stringMode ? (v) => v : (v) => JSON.parse(v);
+    const value = stringify(props.value);
+    const values = props.context.values.map((v) => ({
+        value: stringify(v),
+        label: stringify(v),
+    }));
+    return (_jsx(SettingsItem, { label: props.label, children: _jsxs(Select.Root, { value: value, onValueChange: (value) => {
+                props.onChange(parse(value));
+            }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: values.map((v) => (_jsx(Select.Item, { value: v.value, children: v.label }, v.value))) })] }) }));
+}

package/dist/lib/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDebugUi } from './render-debug-ui.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/ui/index.js

@@ -0,0 +1 @@
+export { renderDebugUi } from './render-debug-ui.js';

package/dist/lib/ui/log-tab.d.ts

@@ -0,0 +1,2 @@
+export declare const LogTab: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=log-tab.d.ts.map

package/dist/lib/ui/log-tab.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Box, Button, Callout, Code, Flex } from '@radix-ui/themes';
+import { formatConsoleArgs } from '../format-console-args.js';
+import { clearLogs } from '../log-store.js';
+import { useLogBuffer } from '../use-log-buffer.js';
+export const LogTab = () => {
+    const logs = useLogBuffer();
+    return (_jsxs(Box, { pt: "20px", children: [_jsxs(Flex, { justify: "between", align: "center", mb: "3", children: [_jsxs(Box, { children: [logs.length, " ", logs.length === 1 ? 'entry' : 'entries'] }), _jsx(Button, { size: "1", variant: "soft", onClick: clearLogs, disabled: logs.length === 0, children: "Clear" })] }), logs.length === 0 ? (_jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "No logs yet \u2014 console.log / info / warn / error calls will appear here." })] })) : (logs.map((entry, i) => _jsx(LogRow, { entry: entry }, i)))] }));
+};
+const levelColor = {
+    log: undefined,
+    debug: 'gray',
+    info: 'blue',
+    warn: 'amber',
+    error: 'red',
+};
+const LogRow = ({ entry }) => {
+    const { segments, trailing } = formatConsoleArgs(entry.args);
+    return (_jsxs(Box, { mb: "1", style: {
+            fontFamily: 'monospace',
+            fontSize: 12,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        }, children: [_jsx(Code, { size: "1", variant: "ghost", children: formatTime(entry.ts) }), ' ', _jsxs(Code, { size: "1", variant: "ghost", color: levelColor[entry.level], children: ["[", entry.level, "]"] }), ' ', segments.length > 0
+                ? renderFormatted(segments, trailing)
+                : entry.args.map((a, i) => (_jsxs("span", { children: [i > 0 ? ' ' : '', formatArg(a)] }, i)))] }));
+};
+function renderFormatted(segments, trailing) {
+    return (_jsxs(_Fragment, { children: [segments.map((s, i) => (_jsx("span", { style: s.style, children: s.text }, i))), trailing.map((a, i) => (_jsxs("span", { children: [" ", formatArg(a)] }, `t-${i}`)))] }));
+}
+function formatTime(ts) {
+    return new Date(ts).toISOString().slice(11, 23);
+}
+function formatArg(a) {
+    if (typeof a === 'string')
+        return a;
+    if (a instanceof Error)
+        return `${a.name}: ${a.message}`;
+    try {
+        return JSON.stringify(a);
+    }
+    catch {
+        return String(a);
+    }
+}

package/dist/lib/ui/render-debug-ui.d.ts

@@ -0,0 +1,2 @@
+export declare function renderDebugUi(): void;
+//# sourceMappingURL=render-debug-ui.d.ts.map

package/dist/lib/ui/render-debug-ui.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import debug from 'debug';
+import { registerBooleanSetting, registerStringSetting } from '../settings/index.js';
+import { addDebugSecretListener } from '../utils/add-debug-secret-listener.js';
+let rendered = false;
+export function renderDebugUi() {
+    if (rendered) {
+        return;
+    }
+    rendered = true;
+    const showDebugButtonSetting = registerBooleanSetting({
+        key: 'efp:show-debug-button',
+    });
+    registerStringSetting({
+        key: 'debug',
+        placeholder: 'e.g. efp:*',
+        onChange: (value) => {
+            if (value)
+                debug.enable(value);
+            else
+                debug.disable();
+        },
+    });
+    const render = async (open) => {
+        const { DebugUi } = await import('./debug-ui.js');
+        const { createRoot } = await import('react-dom/client');
+        const rootElement = document.createElement('div');
+        document.body.appendChild(rootElement);
+        const root = createRoot(rootElement);
+        root.render(_jsx(DebugUi, { useDebugButtonState: showDebugButtonSetting.useState, open: open }));
+    };
+    if (showDebugButtonSetting.get()) {
+        render(false);
+    }
+    else {
+        const unsubscribe = addDebugSecretListener(() => {
+            unsubscribe();
+            showDebugButtonSetting.set(true);
+            render(true);
+        });
+    }
+}

package/dist/lib/ui/settings-item.d.ts

@@ -0,0 +1,6 @@
+interface SettingsItemProps extends React.PropsWithChildren {
+    label: string;
+}
+export declare const SettingsItem: ({ label, children }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=settings-item.d.ts.map

package/dist/lib/ui/settings-item.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Heading, Separator } from '@radix-ui/themes';
+export const SettingsItem = ({ label, children }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Heading, { size: "4", children: label }), _jsx(Box, { mt: "10px", children: children })] }), _jsx(Separator, { size: "4", my: "20px" })] }));
+};

package/dist/lib/ui/settings-list.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+export declare const SettingsList: FC;
+//# sourceMappingURL=settings-list.d.ts.map

package/dist/lib/ui/settings-list.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { adoptGlobalSettings } from '../settings/adopt-global-settings.js';
+import { editors } from '../settings/setting-registry.js';
+export const SettingsList = () => {
+    adoptGlobalSettings();
+    return editors.map((Editor, index) => (_jsx(Suspense, { fallback: _jsx(Skeleton, { height: "60px" }), children: _jsx(Editor, {}) }, index)));
+};

package/dist/lib/ui/settings-tab.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsTab: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=settings-tab.d.ts.map

package/dist/lib/ui/settings-tab.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { AlertDialog, Box, Button, Callout, Flex } from '@radix-ui/themes';
+import { resetAllSettings } from '../settings/reset-all-settings.js';
+import { SettingsList } from './settings-list.js';
+export const SettingsTab = () => {
+    return (_jsxs(Box, { pt: "20px", children: [_jsx(Box, { mb: "20px", children: _jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "These settings will persist across page reloads in your browser." })] }) }), _jsx(SettingsList, {}), _jsxs(Flex, { gap: "3", mt: "40px", justify: "center", children: [_jsx(Button, { onClick: () => {
+                            window.location.reload();
+                        }, children: "Reload with the applied changes" }), _jsxs(AlertDialog.Root, { children: [_jsx(AlertDialog.Trigger, { children: _jsx(Button, { color: "red", children: "Reset all and reload" }) }), _jsxs(AlertDialog.Content, { maxWidth: "450px", children: [_jsx(AlertDialog.Title, { children: "Reset all and reload" }), _jsx(AlertDialog.Description, { size: "2", children: "This will reset all settings, disable debug mode, and reload the page." }), _jsxs(Flex, { gap: "3", mt: "4", justify: "end", children: [_jsx(AlertDialog.Cancel, { children: _jsx(Button, { variant: "soft", color: "gray", children: "Cancel" }) }), _jsx(AlertDialog.Action, { children: _jsx(Button, { variant: "solid", color: "red", onClick: () => {
+                                                        resetAllSettings();
+                                                        window.location.reload();
+                                                    }, children: "Reset all and reload" }) })] })] })] })] })] }));
+};

package/dist/lib/ui/side-button.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+export declare const SideButton: FC<{
+    onClick?: () => void;
+}>;
+//# sourceMappingURL=side-button.d.ts.map

package/dist/lib/ui/side-button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SideButton = ({ onClick }) => {
+    const size = 64;
+    const width = 20;
+    const radius = 14;
+    return (_jsx("button", { type: "button", style: {
+            position: 'fixed',
+            right: 0,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            padding: 0,
+            border: 'none',
+            background: 'transparent',
+            cursor: 'pointer',
+            zIndex: 9999,
+            boxSizing: 'border-box',
+        }, onClick: onClick, children: _jsx("div", { style: {
+                width,
+                height: size,
+                paddingLeft: 4,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'var(--side-tab-bg, rgba(0,0,0,0.5))',
+                color: 'white',
+                borderRadius: `${radius}px 0 0 ${radius}px`,
+                fontSize: Math.round(size * 0.25),
+                lineHeight: 1,
+                userSelect: 'none',
+                cursor: 'pointer',
+                filter: 'grayscale(0.5)',
+                boxSizing: 'border-box',
+            }, children: _jsx(ChevronLeftSvg, { size: size * 0.7 }) }) }));
+};
+function ChevronLeftSvg({ size = 18, strokeWidth = 3, ...props }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { fill: "none", d: "M14.5 5.5L8.5 12l6 6.5", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/lib/ui/string-editor.d.ts

@@ -0,0 +1,5 @@
+import type { EditorProps } from '../settings/editor-props.js';
+export declare const StringEditor: React.FC<EditorProps<string, {
+    placeholder?: string;
+}>>;
+//# sourceMappingURL=string-editor.d.ts.map

package/dist/lib/ui/string-editor.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@radix-ui/themes';
+import { SettingsItem } from './settings-item.js';
+export const StringEditor = (props) => {
+    return (_jsx(SettingsItem, { label: props.label, children: _jsx(TextField.Root, { placeholder: props.context?.placeholder, value: props.value, onChange: (e) => props.onChange(e.target.value), style: { minWidth: 220 } }) }));
+};
+StringEditor.displayName = 'StringEditor';

package/dist/lib/use-log-buffer.d.ts

@@ -0,0 +1,3 @@
+import { type LogEntry } from './log-store.js';
+export declare function useLogBuffer(): readonly LogEntry[];
+//# sourceMappingURL=use-log-buffer.d.ts.map

package/dist/lib/use-log-buffer.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'react';
+import { getLogSnapshot, subscribeLogStore } from './log-store.js';
+export function useLogBuffer() {
+    return useSyncExternalStore(subscribeLogStore, getLogSnapshot, getLogSnapshot);
+}

package/dist/lib/utils/add-debug-secret-listener.d.ts

@@ -0,0 +1,2 @@
+export declare function addDebugSecretListener(callback: () => void): () => void;
+//# sourceMappingURL=add-debug-secret-listener.d.ts.map

package/dist/lib/utils/add-debug-secret-listener.js

@@ -0,0 +1,38 @@
+const SECRET_PHRASE = 'dbg123';
+const callbacks = [];
+let initialized = false;
+let listenerRef = null;
+export function addDebugSecretListener(callback) {
+    callbacks.push(callback);
+    if (!initialized) {
+        initialized = true;
+        let buffer = '';
+        function onKeyDown(e) {
+            // Ignore modifier keys
+            if (e.ctrlKey || e.metaKey || e.altKey)
+                return;
+            if (e.key.length !== 1)
+                return;
+            buffer += e.key.toLowerCase();
+            // Keep buffer length sane
+            buffer = buffer.slice(-SECRET_PHRASE.length);
+            if (buffer === SECRET_PHRASE) {
+                buffer = '';
+                callbacks.forEach((cb) => cb());
+            }
+        }
+        listenerRef = onKeyDown;
+        document.addEventListener('keydown', onKeyDown);
+    }
+    return () => {
+        const index = callbacks.indexOf(callback);
+        if (index !== -1) {
+            callbacks.splice(index, 1);
+        }
+        if (callbacks.length === 0 && listenerRef) {
+            document.removeEventListener('keydown', listenerRef);
+            listenerRef = null;
+            initialized = false;
+        }
+    };
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@expofp/debug",
+  "version": "0.0.0-experimental.d269d30",
+  "type": "module",
+  "description": "ExpoFP SDK internal: debug utilities",
+  "homepage": "https://developer.expofp.com/",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@expofp/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo",
+    "!**/*.map"
+  ],
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/themes": "^3.2.1",
+    "debug": "^4.4.3",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  }
+}