From 363d94a36bd60f1b324a18c0fac2449bb2e4010f Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 29 Jan 2026 14:16:35 -0500
Subject: [PATCH] refactor: consolidate CodeMirror editors into unified
 AE_Comp_Editor_CodeMirror component

---
 src/lib/ae_elements/AE_AITools.svelte         |   9 +-
 ...ectFlags.svelte => AE_Object_Flags.svelte} |  66 ++---
 .../app_components/e_app_codemirror_v5.svelte |   2 +
 .../elements/AE_Comp_Editor_CodeMirror.svelte | 241 ++++++++++++++++++
 .../element_codemirror_editor_wrapper.svelte  |   6 +-
 .../events/[event_id]/settings/+page.svelte   |  32 +--
 .../ae_comp__journal_entry_editor.svelte      |  11 +-
 .../ae_comp__journal_obj_id_edit.svelte       |   7 +-
 .../ae_comp__modal_journal_config.svelte      |  12 +-
 ...ae_comp__modal_journal_entry_config.svelte |  29 +--
 10 files changed, 323 insertions(+), 92 deletions(-)
 rename src/lib/ae_elements/{AE_ObjectFlags.svelte => AE_Object_Flags.svelte} (75%)
 create mode 100644 src/lib/elements/AE_Comp_Editor_CodeMirror.svelte

diff --git a/src/lib/ae_elements/AE_AITools.svelte b/src/lib/ae_elements/AE_AITools.svelte
index 419284dc..6685c57a 100644
--- a/src/lib/ae_elements/AE_AITools.svelte
+++ b/src/lib/ae_elements/AE_AITools.svelte
@@ -12,7 +12,7 @@
         RefreshCcw, Globe, Copy
     } from '@lucide/svelte';
     import { ae_loc, ae_api } from '$lib/stores/ae_stores';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
 
     interface Props {
         // Core Props
@@ -190,13 +190,12 @@
                             </button>
                         </div>
 
-                        <E_app_codemirror_v5
-                            editable={true}
+                        <AE_Comp_Editor_CodeMirror
                             content={tmp_summary}
                             bind:new_content={tmp_summary}
-                            bind:theme_mode={$ae_loc.theme_mode}
+                            theme_mode={$ae_loc.theme_mode}
                             placeholder="AI Result will appear here..."
-                            class="p-2 border rounded-lg h-96 shadow-inner bg-surface-500/5"
+                            class_li="p-2 border rounded-lg h-96 shadow-inner bg-surface-500/5"
                         />
                     </div>
                 {:else}
diff --git a/src/lib/ae_elements/AE_ObjectFlags.svelte b/src/lib/ae_elements/AE_Object_Flags.svelte
similarity index 75%
rename from src/lib/ae_elements/AE_ObjectFlags.svelte
rename to src/lib/ae_elements/AE_Object_Flags.svelte
index 660139e3..1fe8007f 100644
--- a/src/lib/ae_elements/AE_ObjectFlags.svelte
+++ b/src/lib/ae_elements/AE_Object_Flags.svelte
@@ -4,8 +4,8 @@
      * GENERIC Aether Object Flags & Visibility Toggles
      * Manages: alert, private, public, personal, professional, template
      */
-    import { 
-        Siren, MessageSquareWarning, Fingerprint, 
+    import {
+        Siren, MessageSquareWarning, Fingerprint,
         Globe, BookHeart, BriefcaseBusiness, NotepadTextDashed,
         Settings
     } from '@lucide/svelte';
@@ -13,35 +13,35 @@
 
     interface Props {
         // The object containing the flags (bindable)
-        obj: any; 
-        
+        obj: any;
+
         // Visibility configuration (optional overrides)
-        showLabels?: boolean;
-        hideAlert?: boolean;
-        hidePrivate?: boolean;
-        hidePublic?: boolean;
-        hidePersonal?: boolean;
-        hideProfessional?: boolean;
-        hideTemplate?: boolean;
-        
+        show_labels?: boolean;
+        hide_alert?: boolean;
+        hide_private?: boolean;
+        hide_public?: boolean;
+        hide_personal?: boolean;
+        hide_professional?: boolean;
+        hide_template?: boolean;
+
         // Callbacks
-        onToggle?: (prop: string, newValue: boolean) => void;
-        
+        on_toggle?: (prop: string, newValue: boolean) => void;
+
         // Styling
-        containerClass?: string;
+        container_class?: string;
     }
 
-    let { 
+    let {
         obj = $bindable(),
-        showLabels = true,
-        hideAlert = false,
-        hidePrivate = false,
-        hidePublic = false,
-        hidePersonal = false,
-        hideProfessional = false,
-        hideTemplate = false,
-        onToggle,
-        containerClass = "flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10"
+        show_labels = true,
+        hide_alert: hide_alert = false,
+        hide_private: hide_private = false,
+        hide_public: hide_public = false,
+        hide_personal: hide_personal = false,
+        hide_professional: hide_professional = false,
+        hide_template: hide_template = false,
+        on_toggle: onToggle,
+        container_class = "flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10"
     }: Props = $props();
 
     function handle_toggle(prop: string) {
@@ -50,15 +50,15 @@
     }
 </script>
 
-<div class={containerClass}>
-    {#if showLabels}
+<div class={container_class}>
+    {#if show_labels}
         <span class="text-xs text-surface-500 flex items-center gap-1 uppercase font-bold tracking-wider mr-2">
             <Settings size="1.1em" /> Flags:
         </span>
     {/if}
 
     <!-- Alert Status -->
-    {#if !hideAlert}
+    {#if !hide_alert}
         <button
             type="button"
             onclick={() => handle_toggle('alert')}
@@ -70,7 +70,7 @@
     {/if}
 
     <!-- Private / E2EE -->
-    {#if !hidePrivate}
+    {#if !hide_private}
         <button
             type="button"
             onclick={() => handle_toggle('private')}
@@ -82,7 +82,7 @@
     {/if}
 
     <!-- Public Visibility -->
-    {#if !hidePublic}
+    {#if !hide_public}
         <button
             type="button"
             onclick={() => handle_toggle('public')}
@@ -94,7 +94,7 @@
     {/if}
 
     <!-- Personal Scope -->
-    {#if !hidePersonal}
+    {#if !hide_personal}
         <button
             type="button"
             onclick={() => handle_toggle('personal')}
@@ -106,7 +106,7 @@
     {/if}
 
     <!-- Professional Scope -->
-    {#if !hideProfessional}
+    {#if !hide_professional}
         <button
             type="button"
             onclick={() => handle_toggle('professional')}
@@ -118,7 +118,7 @@
     {/if}
 
     <!-- Template Status -->
-    {#if !hideTemplate && $ae_loc.edit_mode}
+    {#if !hide_template && $ae_loc.edit_mode}
         <button
             type="button"
             onclick={() => handle_toggle('template')}
diff --git a/src/lib/app_components/e_app_codemirror_v5.svelte b/src/lib/app_components/e_app_codemirror_v5.svelte
index cafd9278..c8c74e9f 100644
--- a/src/lib/app_components/e_app_codemirror_v5.svelte
+++ b/src/lib/app_components/e_app_codemirror_v5.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    // WARNING: This is deprecated. Do not use!
+
     import { run } from 'svelte/legacy';
 
     // This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
diff --git a/src/lib/elements/AE_Comp_Editor_CodeMirror.svelte b/src/lib/elements/AE_Comp_Editor_CodeMirror.svelte
new file mode 100644
index 00000000..b81f3aad
--- /dev/null
+++ b/src/lib/elements/AE_Comp_Editor_CodeMirror.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+    /**
+     * AE_Comp_Editor_CodeMirror.svelte
+     * Consolidated CodeMirror 6 Editor for Aether Platform.
+     * Combines technical power with a user-friendly Markdown toolbar.
+     * Uses strictly snake_case and Svelte 5 Runes.
+     */
+    import { onMount, onDestroy, untrack } from 'svelte';
+    import { browser } from '$app/environment';
+    import { ensureCodeMirrorModules } from './codemirror_modules';
+    import type { key_val } from '$lib/stores/ae_stores';
+
+    // Icons (Standardized to Lucide where possible, or FontAwesome placeholders)
+    import { Bold, Italic, List, Code, Maximize2 } from 'lucide-svelte';
+
+    interface Props {
+        content?: string;
+        new_content?: string;
+        placeholder?: string;
+        theme_mode?: 'light' | 'dark';
+        language?: 'markdown' | 'json' | 'html' | 'javascript';
+        readonly?: boolean;
+        show_line_numbers?: boolean;
+        wrap_lines?: boolean;
+        show_toolbar?: boolean;
+        editor_view?: any; // $bindable for external control
+        class_li?: string;
+    }
+
+    let {
+        content = $bindable(''),
+        new_content = $bindable(''),
+        placeholder = 'Start typing...',
+        theme_mode = 'light',
+        language = 'markdown',
+        readonly = false,
+        show_line_numbers = false,
+        wrap_lines = true,
+        show_toolbar = true,
+        editor_view = $bindable(),
+        class_li = ''
+    }: Props = $props();
+
+    let editor_container: HTMLDivElement | undefined = $state();
+    let cm: any = $state(); // CodeMirror modules cache
+
+    async function create_editor() {
+        if (!browser) return;
+        
+        cm = await ensureCodeMirrorModules();
+        if (!cm) return;
+
+        // Cleanup existing instance if HMR or remount occurs
+        if (editor_view) {
+            editor_view.destroy();
+            editor_view = null;
+        }
+
+        const extensions = [
+            cm.highlightSpecialChars(),
+            cm.history(),
+            cm.drawSelection(),
+            cm.dropCursor(),
+            cm.EditorState_allowMultipleSelections.of(true),
+            cm.indentOnInput(),
+            cm.bracketMatching(),
+            cm.closeBrackets(),
+            cm.autocompletion(),
+            cm.rectangularSelection(),
+            cm.crosshairCursor(),
+            cm.highlightActiveLine(),
+            cm.highlightActiveLineGutter(),
+            
+            // Keymaps
+            cm.keymap.of([
+                ...cm.defaultKeymap,
+                ...cm.searchKeymap,
+                ...cm.historyKeymap,
+                ...cm.foldKeymap,
+                ...cm.completionKeymap,
+                ...cm.lintKeymap
+            ]),
+
+            // Language Support
+            language === 'markdown' ? cm.markdown({ base: cm.markdownLanguage }) : null,
+            language === 'json' ? cm.languages.find((l: any) => l.name === 'json')?.load() : null,
+
+            // Theme & Behavior
+            theme_mode === 'dark' ? cm.oneDark : cm.EditorView.baseTheme(),
+            cm.EditorView.contentAttributes.of({ spellcheck: 'true' }),
+            readonly ? cm.EditorState.readOnly.of(true) : cm.EditorView.editable.of(true),
+            show_line_numbers ? cm.lineNumbers() : null,
+            wrap_lines ? cm.EditorView_lineWrapping : null,
+            placeholder ? cm.placeholderExt(placeholder) : null,
+
+            // Sync back to Svelte
+            cm.EditorView.updateListener.of((update: any) => {
+                if (update.docChanged) {
+                    const doc_str = update.state.doc.toString();
+                    content = doc_str;
+                    new_content = doc_str;
+                }
+            })
+        ].filter(Boolean);
+
+        if (!editor_container) return;
+
+        editor_view = new cm.EditorView({
+            state: cm.EditorState.create({
+                doc: content ?? '',
+                extensions
+            }),
+            parent: editor_container as HTMLElement
+        });
+    }
+
+    // Initialize on mount
+    onMount(async () => {
+        await create_editor();
+    });
+
+    // Cleanup on destroy
+    onDestroy(() => {
+        if (editor_view) editor_view.destroy();
+    });
+
+    // Reactive update if content is changed from outside (e.g. API load)
+    $effect(() => {
+        if (editor_view && content !== editor_view.state.doc.toString()) {
+            untrack(() => {
+                editor_view.dispatch({
+                    changes: { from: 0, to: editor_view.state.doc.length, insert: content || '' }
+                });
+            });
+        }
+    });
+
+    // *** Toolbar Helpers
+    const wrap_selection = (before: string, after: string = before) => {
+        if (!editor_view) return;
+        const state = editor_view.state;
+        const changes = state.changeByRange((range: any) => {
+            const is_wrapped =
+                state.sliceDoc(range.from - before.length, range.from) === before &&
+                state.sliceDoc(range.to, range.to + after.length) === after;
+
+            if (is_wrapped) {
+                return {
+                    changes: [
+                        { from: range.from - before.length, to: range.from, insert: '' },
+                        { from: range.to, to: range.to + after.length, insert: '' }
+                    ],
+                    range: cm.EditorSelection.range(
+                        range.from - before.length,
+                        range.to - before.length
+                    )
+                };
+            }
+
+            return {
+                changes: [
+                    { from: range.from, insert: before },
+                    { from: range.to, insert: after }
+                ],
+                range: cm.EditorSelection.range(
+                    range.from + before.length,
+                    range.to + before.length
+                )
+            };
+        });
+        editor_view.dispatch(changes);
+        editor_view.focus();
+    };
+
+    const toggle_list = () => {
+        if (!editor_view) return;
+        const state = editor_view.state;
+        const changes = state.changeByRange((range: any) => {
+            const line = state.doc.lineAt(range.from);
+            const has_list = line.text.startsWith('- ');
+            
+            if (has_list) {
+                return {
+                    changes: [{ from: line.from, to: line.from + 2, insert: '' }],
+                    range: cm.EditorSelection.range(range.from - 2, range.to - 2)
+                };
+            }
+            
+            return {
+                changes: [{ from: line.from, insert: '- ' }],
+                range: cm.EditorSelection.range(range.from + 2, range.to + 2)
+            };
+        });
+        editor_view.dispatch(changes);
+        editor_view.focus();
+    };
+</script>
+
+<div class="ae__comp__codemirror_editor flex flex-col border border-surface-500/20 rounded-container overflow-hidden h-full {class_li}">
+    {#if show_toolbar && !readonly}
+        <div class="toolbar flex flex-wrap gap-1 p-1 bg-surface-50 dark:bg-surface-900 border-b border-surface-500/20">
+            <button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('**')} title="Bold">
+                <Bold size="14" />
+            </button>
+            <button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('*')} title="Italic">
+                <Italic size="14" />
+            </button>
+            <button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={toggle_list} title="Bullet List">
+                <List size="14" />
+            </button>
+            <button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('`')} title="Inline Code">
+                <Code size="14" />
+            </button>
+            
+            <div class="ml-auto flex gap-1">
+                <span class="text-[10px] opacity-50 self-center uppercase font-bold mr-2">{language}</span>
+            </div>
+        </div>
+    {/if}
+
+    <div 
+        bind:this={editor_container} 
+        class="grow overflow-auto bg-white dark:bg-black/20"
+        style="min-height: 100px;"
+    ></div>
+</div>
+
+<style lang="postcss">
+    .ae__comp__codemirror_editor :global(.cm-editor) {
+        height: 100%;
+        outline: none !important;
+    }
+    .ae__comp__codemirror_editor :global(.cm-scroller) {
+        font-family: theme('fontFamily.mono');
+        font-size: 0.875rem;
+    }
+    /* Hide the focus outline from CM6 default theme */
+    .ae__comp__codemirror_editor :global(.cm-focused) {
+        outline: none !important;
+    }
+</style>
diff --git a/src/lib/elements/element_codemirror_editor_wrapper.svelte b/src/lib/elements/element_codemirror_editor_wrapper.svelte
index aa8ddc93..e06440ef 100644
--- a/src/lib/elements/element_codemirror_editor_wrapper.svelte
+++ b/src/lib/elements/element_codemirror_editor_wrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
+    import AE_Comp_Editor_CodeMirror from './AE_Comp_Editor_CodeMirror.svelte';
     import { browser } from '$app/environment';
 
     interface Props {
@@ -17,10 +17,10 @@
 
 <div class="block w-full h-full {classes}">
     {#if browser}
-        <ElementCodemirrorEditor
-            class="p-1 transition-all duration-1000"
+        <AE_Comp_Editor_CodeMirror
             bind:content={html_text}
             {placeholder}
+            class_li="p-1 transition-all duration-1000"
         />
     {:else}
         <!-- server / prerender placeholder to avoid SSR loading CM -->
diff --git a/src/routes/events/[event_id]/settings/+page.svelte b/src/routes/events/[event_id]/settings/+page.svelte
index 07c4af7a..d79ec621 100644
--- a/src/routes/events/[event_id]/settings/+page.svelte
+++ b/src/routes/events/[event_id]/settings/+page.svelte
@@ -5,7 +5,7 @@
     import { onMount } from 'svelte';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
     import Ae_comp_event_settings_form from './ae_comp__event_settings_form.svelte';
     import Ae_comp_event_settings_pres_mgmt_form from './ae_comp__event_settings_pres_mgmt_form.svelte';
     import Ae_comp_event_settings_basic_form from './ae_comp__event_settings_basic_form.svelte';
@@ -84,14 +84,13 @@
                         onsave={(data: any) => handle_save('cfg_json', data)}
                     />
                 {:else}
-                    <E_app_codemirror_v5
-                        editable={true}
+                    <AE_Comp_Editor_CodeMirror
                         readonly={false}
                         content={JSON.stringify(event_obj.cfg_json, null, 4)}
                         bind:new_content={event_obj.cfg_json}
                         show_line_numbers={true}
                         placeholder="JSON config"
-                        class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                        class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                     />
                     <button
                         class="btn preset-tonal-primary"
@@ -120,14 +119,13 @@
                         onsave={(data: any) => handle_save('mod_pres_mgmt_json', data)}
                     />
                 {:else}
-                    <E_app_codemirror_v5
-                        editable={true}
+                    <AE_Comp_Editor_CodeMirror
                         readonly={false}
                         content={JSON.stringify(event_obj.mod_pres_mgmt_json, null, 4)}
                         bind:new_content={event_obj.mod_pres_mgmt_json}
                         show_line_numbers={true}
                         placeholder="JSON config"
-                        class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                        class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                     />
                     <button
                         class="btn preset-tonal-primary"
@@ -157,14 +155,13 @@
                         onsave={(data: any) => handle_save('mod_badges_json', data)}
                     />
                 {:else}
-                    <E_app_codemirror_v5
-                        editable={true}
+                    <AE_Comp_Editor_CodeMirror
                         readonly={false}
                         content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
                         bind:new_content={event_obj.mod_badges_json}
                         show_line_numbers={true}
                         placeholder="JSON config"
-                        class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                        class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                     />
                     <button
                         class="btn preset-tonal-primary"
@@ -193,14 +190,13 @@
                         onsave={(data: any) => handle_save('mod_abstracts_json', data)}
                     />
                 {:else}
-                    <E_app_codemirror_v5
-                        editable={true}
+                    <AE_Comp_Editor_CodeMirror
                         readonly={false}
                         content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
                         bind:new_content={event_obj.mod_abstracts_json}
                         show_line_numbers={true}
                         placeholder="JSON config"
-                        class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                        class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                     />
                     <button
                         class="btn preset-tonal-primary"
@@ -216,14 +212,13 @@
         <details class="details">
             <summary class="summary">Exhibits (mod_exhibits_json)</summary>
             <div class="p-4">
-                <E_app_codemirror_v5
-                    editable={true}
+                <AE_Comp_Editor_CodeMirror
                     readonly={false}
                     content={JSON.stringify(event_obj.mod_exhibits_json, null, 4)}
                     bind:new_content={event_obj.mod_exhibits_json}
                     show_line_numbers={true}
                     placeholder="JSON config"
-                    class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                    class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                 />
                 <button
                     class="btn preset-tonal-primary"
@@ -237,14 +232,13 @@
         <details class="details">
             <summary class="summary">Meetings (mod_meetings_json)</summary>
             <div class="p-4">
-                <E_app_codemirror_v5
-                    editable={true}
+                <AE_Comp_Editor_CodeMirror
                     readonly={false}
                     content={JSON.stringify(event_obj.mod_meetings_json, null, 4)}
                     bind:new_content={event_obj.mod_meetings_json}
                     show_line_numbers={true}
                     placeholder="JSON config"
-                    class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
+                    class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
                 />
                 <button
                     class="btn preset-tonal-primary"
diff --git a/src/routes/journals/ae_comp__journal_entry_editor.svelte b/src/routes/journals/ae_comp__journal_entry_editor.svelte
index 6a8eaaef..8a22ed57 100644
--- a/src/routes/journals/ae_comp__journal_entry_editor.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_editor.svelte
@@ -7,7 +7,7 @@
     import { LockKeyhole, Save, RefreshCcw } from 'lucide-svelte';
     import { ae_loc } from '$lib/stores/ae_stores';
     import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
     import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
 
     interface Props {
@@ -73,13 +73,12 @@
         {:else}
             <!-- Actual Editor -->
             {#if journal?.cfg_json?.pref_editor == 'codemirror'}
-                <E_app_codemirror_v5
-                    content={tmp_entry_obj?.content ?? ''}
-                    bind:new_content={tmp_entry_obj.content}
-                    bind:editorView={editor_view}
+                <AE_Comp_Editor_CodeMirror
+                    bind:content={tmp_entry_obj.content}
+                    bind:editor_view={editor_view}
                     theme_mode={$ae_loc.theme_mode}
                     placeholder="Write using Markdown..."
-                    class="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
+                    class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
                 />
             {:else}
                 <textarea
diff --git a/src/routes/journals/ae_comp__journal_obj_id_edit.svelte b/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
index b160ed69..e17255ba 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
@@ -54,7 +54,7 @@
         journals_slct
     } from '$lib/ae_journals/ae_journals_stores';
     import { journals_func } from '$lib/ae_journals/ae_journals_functions';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
 
     interface Props {
         log_lvl?: number;
@@ -493,12 +493,11 @@
 
         {:else if tab === 'json'}
             <div class="h-full min-h-[400px]">
-                <E_app_codemirror_v5
-                    editable={false}
+                <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify(tmp__journal_obj, null, 2)}
                     theme_mode={$ae_loc.theme_mode}
-                    class="rounded-lg border border-surface-500/30"
+                    class_li="rounded-lg border border-surface-500/30"
                 />
             </div>
         {/if}
diff --git a/src/routes/journals/ae_comp__modal_journal_config.svelte b/src/routes/journals/ae_comp__modal_journal_config.svelte
index 47d41cd5..7c36faf9 100644
--- a/src/routes/journals/ae_comp__modal_journal_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_config.svelte
@@ -30,7 +30,7 @@
         journals_loc,
         journals_sess
     } from '$lib/ae_journals/ae_journals_stores';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
 
     interface Props {
         log_lvl?: number;
@@ -256,22 +256,20 @@
             </div>
         {:else if tab === 'local_json'}
             <div class="h-full min-h-[400px]">
-                <E_app_codemirror_v5
-                    editable={false}
+                <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify(tmp_config, null, 2)}
                     theme_mode={$ae_loc.theme_mode}
-                    class="rounded-lg border border-surface-500/30"
+                    class_li="rounded-lg border border-surface-500/30"
                 />
             </div>
         {:else if tab === 'session_json'}
             <div class="h-full min-h-[400px]">
-                <E_app_codemirror_v5
-                    editable={false}
+                <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify($journals_sess, null, 2)}
                     theme_mode={$ae_loc.theme_mode}
-                    class="rounded-lg border border-surface-500/30"
+                    class_li="rounded-lg border border-surface-500/30"
                 />
             </div>
         {/if}
diff --git a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
index e3f4112e..4169d639 100644
--- a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
@@ -28,8 +28,8 @@
     import { ae_loc, ae_api } from '$lib/stores/ae_stores';
     import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
     import { journals_func } from '$lib/ae_journals/ae_journals_functions';
-    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
-    import AE_ObjectFlags from '$lib/ae_elements/AE_ObjectFlags.svelte';
+    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
+    import AE_Object_Flags from '$lib/ae_elements/AE_Object_Flags.svelte';
 
     interface Props {
         log_lvl?: number;
@@ -156,7 +156,7 @@
                     <h4 class="text-xs font-bold uppercase opacity-50">Quick Category</h4>
                     <div class="flex flex-wrap gap-2">
                         {#each journal?.cfg_json?.category_li ?? [] as cat}
-                            <button 
+                            <button
                                 class="btn btn-sm {tmp_entry_obj.category_code === cat.code ? 'variant-filled-primary' : 'variant-soft-primary'}"
                                 onclick={() => { tmp_entry_obj.category_code = cat.code; handle_update_entry(); on_save(); }}
                             >
@@ -248,15 +248,15 @@
 
                 <section class="space-y-4">
                     <h4 class="text-xs font-bold uppercase opacity-50">Privacy Flags</h4>
-                    <AE_ObjectFlags 
-                        bind:obj={tmp_entry_obj} 
-                        onToggle={() => { handle_update_entry(); on_save(); }}
-                        hideAlert={journal?.cfg_json?.hide_btn_alert}
-                        hidePrivate={journal?.cfg_json?.hide_btn_private}
-                        hidePublic={journal?.cfg_json?.hide_btn_public}
-                        hidePersonal={journal?.cfg_json?.hide_btn_personal}
-                        hideProfessional={journal?.cfg_json?.hide_btn_professional}
-                        hideTemplate={journal?.cfg_json?.hide_btn_template}
+                    <AE_Object_Flags
+                        bind:obj={tmp_entry_obj}
+                        on_toggle={() => { handle_update_entry(); on_save(); }}
+                        hide_alert={journal?.cfg_json?.hide_btn_alert}
+                        hide_private={journal?.cfg_json?.hide_btn_private}
+                        hide_public={journal?.cfg_json?.hide_btn_public}
+                        hide_personal={journal?.cfg_json?.hide_btn_personal}
+                        hide_professional={journal?.cfg_json?.hide_btn_professional}
+                        hide_template={journal?.cfg_json?.hide_btn_template}
                     />
                 </section>
 
@@ -283,12 +283,11 @@
 
         {:else if tab === 'json'}
             <div class="h-full min-h-[400px]">
-                <E_app_codemirror_v5
-                    editable={false}
+                <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify(tmp_entry_obj, null, 2)}
                     theme_mode={$ae_loc.theme_mode}
-                    class="rounded-lg border border-surface-500/30"
+                    class_li="rounded-lg border border-surface-500/30"
                 />
             </div>
         {/if}