1 files changed, 74 insertions, 0 deletions
diff --git a/src/ts/editor-standalone.ts b/src/ts/editor-standalone.ts
new file mode 100644
index 0000000..2c8ec81
--- /dev/null
+++ b/src/ts/editor-standalone.ts
@@ -0,0 +1,74 @@
+import { createEditor, setEditorTheme } from './editor';
+
+// Global API
+const adelieEditor = {
+    /**
+     * Initialize an editor in the given element
+     * @param element - The container element or selector
+     * @param options - Editor configuration
+     */
+    init(
+        element: HTMLElement | string,
+        options?: {
+            language?: 'javascript' | 'css' | 'html';
+            initialCode?: string;
+            theme?: 'light' | 'dark';
+        }
+    ) {
+        const container =
+            typeof element === 'string' ? document.querySelector<HTMLElement>(element) : element;
+
+        if (!container) {
+            throw new Error('Editor container not found');
+        }
+
+        // Auto-detect theme if not specified
+        const theme =
+            options?.theme ||
+            (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');
+
+        const view = createEditor({
+            parent: container,
+            language: options?.language || 'javascript',
+            initialCode: options?.initialCode || '',
+            theme,
+        });
+
+        // Listen for theme changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'data-theme') {
+                    const newTheme =
+                        document.documentElement.getAttribute('data-theme') === 'dark'
+                            ? 'dark'
+                            : 'light';
+                    setEditorTheme(view, newTheme);
+                }
+            });
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+
+        return view;
+    },
+
+    /**
+     * Create an editor with full control
+     */
+    create: createEditor,
+
+    /**
+     * Change editor theme
+     */
+    setTheme: setEditorTheme,
+};
+
+// Export to window
+if (typeof window !== 'undefined') {
+    (window as any).adelieEditor = adelieEditor;
+}
+
+export default adelieEditor;