diff --git a/src/lib/elements/element_ae_obj_field_editor_new.svelte b/src/lib/elements/element_ae_obj_field_editor_new.svelte
index 45a042c0..3bffc4ac 100644
--- a/src/lib/elements/element_ae_obj_field_editor_new.svelte
+++ b/src/lib/elements/element_ae_obj_field_editor_new.svelte
@@ -1,5 +1,5 @@
 <!--
-    ELEMENT: AE Obj Field Editor — NEW VERSION (scaffold, not yet wired up)
+    ELEMENT: AE Obj Field Editor — NEW VERSION
     ========================================================================
     Full plan / rationale: documentation/PROJECT__AE_Obj_Field_Editor_New.md
     Original (still the live, working version — do not touch it yet):
@@ -10,71 +10,8 @@
     already hardened in production (see commit c3ec0f88e) — copy it forward
     as-is. Do not redesign it unless you find an actual bug; it is NOT part
     of this rewrite's scope.
-
-    MINI HOW-TO — work the TODOs below top to bottom. Each one maps to the
-    matching numbered item in the project doc's "New Component" section,
-    which has the full "why". Check them off here as you go so the next
-    person picking this up can see progress at a glance.
-
-    [ ] 1. Generics — `current_value`/`draft_value` are typed `T` already
-           below via the `generics="T"` script attribute. Confirm nothing
-           inside the script still needs an `any` cast once you fill in #4/#5.
-    [ ] 2. field_type — 'email' | 'url' | 'tel' are added to the union below.
-           Edit-mode branches for them are stubbed in the markup — they're
-           currently copy-pasted from the 'text' branch with the right
-           `type=` attribute, which is all they strictly need. Confirm that's
-           still true once you've picked real input styling (#6).
-    [ ] 3. object_reload — already removed from Props. If you copy any more
-           logic over from the original, double check it doesn't reference
-           object_reload anywhere (it was dead code — on_success is and
-           remains the real cache-refresh hook for every caller).
-    [ ] 4. Datetime conversion — THE BIG ONE. The original makes every caller
-           pre-convert current_value with a `to_datetime_local()` helper
-           before passing it in, and never converts anything back on save.
-           This component should own both directions instead. Fill in
-           `to_input_value()` / `from_input_value()` below — they're called
-           at the two right spots already (computing draft_value, and right
-           before the PATCH body is built in handle_patch). Once this works,
-           the `to_datetime_local(...)` call at each date/datetime call site
-           goes away during migration (see project doc migration plan).
-    [ ] 5. Select value coercion — fill in `coerce_select_value()` below and
-           wire it into the <select> onchange. Today `Object.entries()`
-           always produces string option values, so a select bound to a
-           non-string field (number/boolean enum) would get draft_value
-           stuck out of sync with current_value forever (strict `===` in the
-           optimistic-clear $effect never resolves). No real-world field hits
-           this today (current select usages are all string IDs), but fix it
-           here since it's a one-line landmine waiting for the next one.
-    [ ] 6. Styling — replace every Skeleton UI class in this file (search for
-           "btn-icon", "variant-", ".input"/".select"/".textarea"/".checkbox",
-           "badge") with Tailwind v4 + Flowbite equivalents. Check a recently
-           styled form (e.g. the Pres Mgmt Config page,
-           src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/config/+page.svelte)
-           for the current house style before inventing new classes.
-    [ ] 7. Accessibility polish:
-           - aria-label on the icon-only edit-trigger / Save / Cancel buttons
-           - tabindex="-1" on the edit-trigger button when it's invisible
-             (mirrors the existing class:invisible logic)
-           - visible inline error text when patch_status === 'error', not
-             just the title="" tooltip it has today
-           - Escape key cancels edit mode (mirrors the existing Enter-to-save
-             on text/number/email/url/tel)
-           - autofocus the input element when entering edit mode
-
-    When every box above is checked:
-    1. Add this component to the test playground
-       (src/routes/testing/ae_obj_field_editor/+page.svelte) alongside the
-       old one and exercise every field_type, including the 3 new ones.
-    2. Start the migration plan in the project doc — call sites, in order,
-       one at a time, verifying with `npx svelte-check` + a visual check
-       after each one.
-    3. Once everything is migrated: delete the old file (to
-       ~/tmp/agents_trash, never rm), rename this file to drop "_new", fix
-       any leftover import paths, run `npx svelte-check` one last time, mark
-       the project doc complete.
 -->
 <script lang="ts" generics="T">
-// import { browser } from '$app/environment';
 import { untrack } from 'svelte';
 import type { Snippet } from 'svelte';
 import {
@@ -83,12 +20,12 @@ import {
     LoaderCircle,
     Save,
     SquarePen,
-    Trash2,
     X
 } from '@lucide/svelte';
 import type { key_val } from '$lib/stores/ae_stores';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { api } from '$lib/api/api';
+import { ae_util } from '$lib/ae_utils/ae_utils';
 import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
 
 interface Props {
@@ -109,9 +46,9 @@ interface Props {
         | 'date'
         | 'datetime'
         | 'number'
-        | 'email' // TODO #2 — new
-        | 'url' // TODO #2 — new
-        | 'tel'; // TODO #2 — new
+        | 'email'
+        | 'url'
+        | 'tel';
     allow_null?: boolean;
 
     // Select Options
@@ -125,11 +62,6 @@ interface Props {
     class_li?: string;
     textarea_rows?: number;
 
-    // NOTE: object_reload was intentionally removed (TODO #3) — it was
-    // declared in the original component but never read anywhere. Every
-    // caller already does its own cache refresh via on_success; that stays
-    // the real mechanism here too.
-
     // Behavior
     log_lvl?: number;
 
@@ -162,41 +94,52 @@ let {
     children
 }: Props = $props();
 
-// ---------------------------------------------------------------------
-// TODO #4 — Datetime conversion (and any other future format-mismatch
-// field types). Both directions live here so the component owns the
-// contract instead of every call site re-implementing it.
-// ---------------------------------------------------------------------
-// to_input_value: stored value (T, e.g. whatever ae_obj.start_datetime
-// looks like coming back from the API) -> what the native <input> wants
-// (e.g. "YYYY-MM-DDTHH:mm" for type="datetime-local", "YYYY-MM-DD" for
-// type="date"). Called wherever draft_value is set from current_value.
+/**
+ * to_input_value: stored value -> what the native <input> wants.
+ */
 function to_input_value(value: T, type: typeof field_type): any {
-    // PLACEHOLDER — passes through unchanged. This is the same gap the
-    // original component has today (callers currently do this conversion
-    // themselves before passing current_value in — see
-    // session_view.svelte's to_datetime_local() calls). Implement real
-    // date/datetime conversion here; leave everything else passed through.
+    if (value === null || value === undefined) return '';
+
+    if (type === 'datetime') {
+        return ae_util.iso_datetime_formatter(value as any, 'datetime_iso_no_seconds').replace(' ', 'T');
+    }
+
+    if (type === 'date') {
+        return ae_util.iso_datetime_formatter(value as any, 'date_iso');
+    }
+
     return value;
 }
 
-// from_input_value: reverse of the above — native <input> value -> the
-// format the backend expects in the PATCH body. Called in handle_patch()
-// right before building the `fields` payload.
+/**
+ * from_input_value: native <input> value -> format backend expects.
+ */
 function from_input_value(value: any, type: typeof field_type): any {
-    // PLACEHOLDER — see to_input_value() above.
+    if (value === null || value === undefined || value === '') {
+        return allow_null ? null : value;
+    }
+
+    if (type === 'datetime') {
+        return value.replace('T', ' ') + ':00';
+    }
+
+    if (type === 'date') {
+        return value;
+    }
+
+    if (type === 'number') {
+        return Number(value);
+    }
+
     return value;
 }
 
-// ---------------------------------------------------------------------
-// TODO #5 — Select value coercion. Native <select> values are always
-// strings. Coerce back to the real type (based on the shape of
-// current_value) so equality checks against current_value still work
-// once liveQuery/Dexie returns the saved (typed) value.
-// ---------------------------------------------------------------------
+/**
+ * coerce_select_value: Native <select> values are always strings.
+ * Coerce back to the real type based on the shape of current_value.
+ */
 function coerce_select_value(raw: string, reference: T): any {
-    // PLACEHOLDER — naive starting point, refine against real field types
-    // as they come up:
+    if (raw === 'null' || raw === '') return null;
     if (typeof reference === 'number') return Number(raw);
     if (typeof reference === 'boolean') return raw === 'true';
     return raw;
@@ -206,23 +149,14 @@ function coerce_select_value(raw: string, reference: T): any {
 let is_editing = $state(false);
 let patch_status = $state<'idle' | 'processing' | 'success' | 'error'>('idle');
 let error_message = $state('');
-// svelte-check warns "state_referenced_locally" here because field_type is
-// only captured at mount time — that's intentional (field_type isn't meant
-// to change on a live instance; the $effect below re-derives draft_value
-// from current_value on every relevant change anyway). Benign, not a TODO.
 let draft_value = $state(to_input_value(current_value, field_type));
+let input_ref = $state<HTMLElement | null>(null);
 
-// WHY: Optimistic display. After a successful PATCH, liveQuery may not fire
-// immediately (or at all if on_success doesn't trigger a Dexie refresh). We
-// show draft_value as the display until current_value catches up from
-// liveQuery.
-// KEEP — hardened in production (commit c3ec0f88e). Don't modify casually.
+// Optimistic display state machine
 let has_optimistic = $state(false);
 let display_value = $derived(has_optimistic ? draft_value : current_value);
 
-// Sync draft with display_value when not editing.
-// Suppress reset if optimistic is active — we already have the right value.
-// KEEP — same note as above.
+// Sync draft with current_value when not editing
 $effect(() => {
     if (!is_editing) {
         untrack(() => {
@@ -233,53 +167,49 @@ $effect(() => {
     }
 });
 
-// Clear optimistic once liveQuery catches up (current_value matches what we
-// saved). NOTE: with TODO #4 done, current_value and draft_value may be in
-// different formats (stored vs. input format) for date/datetime — this
-// comparison will need to go through from_input_value(draft_value) or
-// to_input_value(current_value) to compare like-for-like. Revisit once #4
-// is implemented; this is currently a straight copy of the original logic.
+// Clear optimistic once current_value catches up
 $effect(() => {
-    if (has_optimistic && current_value === draft_value) {
+    const formatted_current = to_input_value(current_value, field_type);
+    if (has_optimistic && formatted_current === draft_value) {
         has_optimistic = false;
     }
 });
 
+// Autofocus when entering edit mode
+$effect(() => {
+    if (is_editing && input_ref) {
+        untrack(() => input_ref?.focus());
+    }
+});
+
 async function handle_patch() {
-    if (log_lvl)
-        console.log(
-            `AE Field Editor (new): Patching ${object_type}.${field_name}...`
-        );
+    if (log_lvl) console.log(`AE Field Editor (new): Patching ${object_type}.${field_name}...`);
 
     patch_status = 'processing';
     error_message = '';
 
     try {
+        const final_value = from_input_value(draft_value, field_type);
+
         const result = await api.update_ae_obj({
             api_cfg: $ae_api,
             obj_type: object_type,
             obj_id: object_id,
-            fields: {
-                // TODO #4 — should be from_input_value(draft_value, field_type)
-                // once that's implemented, so date/datetime values get
-                // converted back to the backend's expected format.
-                [field_name]: draft_value
-            },
+            fields: { [field_name]: final_value },
             log_lvl
         });
 
         if (result) {
             patch_status = 'success';
-            has_optimistic = true; // show draft_value immediately; cleared when liveQuery catches up
+            has_optimistic = true;
             if (on_success) on_success(result);
 
-            // Close edit mode after a brief success indicator
             setTimeout(() => {
                 if (patch_status === 'success') {
                     patch_status = 'idle';
                     is_editing = false;
                 }
-            }, 1000);
+            }, 800);
         } else {
             throw new Error('No data returned from update.');
         }
@@ -302,47 +232,37 @@ function cancel_edit() {
 function toggle_edit() {
     if (is_editing) cancel_edit();
     else {
-        has_optimistic = false; // clear optimistic so draft syncs from current prop
+        has_optimistic = false;
         draft_value = to_input_value(current_value, field_type);
         is_editing = true;
-        // TODO #7 — autofocus the input once it's mounted. Easiest path is
-        // probably a small `use:` action or an `$effect` that calls
-        // .focus() on a bound element reference once is_editing flips true.
     }
 }
 
-// TODO #7 — Escape-to-cancel. Add an onkeydown handler (probably on the
-// edit_wrapper div, capturing) that calls cancel_edit() on `Escape`,
-// alongside the existing per-input Enter-to-save handlers below.
+function handle_keydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') cancel_edit();
+}
 </script>
 
-<!--
-    TODO #6 — every Skeleton UI class below (btn-icon, variant-*, badge,
-    .input/.select/.textarea/.checkbox) needs replacing with Tailwind v4 +
-    Flowbite equivalents. Markup structure/logic otherwise carried forward
-    from the original as-is.
--->
 <div
     class="ae_field_editor group relative {class_li}"
     class:block={display_block}
-    class:inline-block={!display_block}>
+    class:inline-block={!display_block}
+    role="none"
+    onkeydown={handle_keydown}>
+    
     <!-- VIEW MODE -->
     <div class="view_wrapper flex items-center gap-2" class:hidden={is_editing}>
         <div class="content_render grow">
             {#if children}
                 {@render children()}
             {:else if field_type === 'checkbox'}
-                <span
-                    class="badge {display_value
-                        ? 'variant-filled-success'
-                        : 'variant-soft-surface'}">
+                <span class="badge {display_value ? 'preset-tonal-success' : 'preset-tonal-surface'}">
                     {display_value ? 'True' : 'False'}
                 </span>
             {:else if field_type === 'tiptap'}
                 <div class="prose dark:prose-invert max-w-none">
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    {@html display_value ||
-                        '<span class="opacity-50 italic">Empty</span>'}
+                    {@html display_value || '<span class="opacity-50 italic">Empty</span>'}
                 </div>
             {:else}
                 <span class:opacity-50={!display_value}>
@@ -351,16 +271,14 @@ function toggle_edit() {
             {/if}
         </div>
 
-        <!-- Edit Trigger (Visible on Hover or Edit Mode) -->
-        <!-- WHY: Always render to avoid layout shift when edit_mode toggles.
-             Use invisible (visibility:hidden, preserves space) when edit_mode is off. -->
-        <!-- TODO #7 — add aria-label, and tabindex="-1" when invisible. -->
         <button
             type="button"
-            class="btn-icon btn-icon-sm variant-soft-warning opacity-20 transition-opacity hover:opacity-100"
+            class="btn-icon btn-icon-sm preset-tonal-warning opacity-20 transition-opacity hover:opacity-100"
             class:invisible={!$ae_loc.edit_mode}
             class:pointer-events-none={!$ae_loc.edit_mode}
+            tabindex={$ae_loc.edit_mode ? 0 : -1}
             onclick={toggle_edit}
+            aria-label="Edit {field_name}"
             title="Edit {field_name}">
             <SquarePen size="14" />
         </button>
@@ -374,16 +292,17 @@ function toggle_edit() {
             class:top-0={display_absolute_edit}
             class:left-0={display_absolute_edit}
             class:w-full={display_absolute_edit}>
+            
             <header class="mb-2 flex items-center justify-between">
-                <span
-                    class="text-xs font-bold tracking-wider uppercase opacity-60"
-                    >{edit_label || field_name}</span>
+                <span class="text-xs font-bold tracking-wider uppercase opacity-60">
+                    {edit_label || field_name}
+                </span>
                 <div class="flex gap-1">
-                    <!-- TODO #7 — aria-label="Cancel" -->
                     <button
                         type="button"
-                        class="btn-icon btn-icon-sm variant-soft-surface"
+                        class="btn-icon btn-icon-sm preset-tonal-surface"
                         onclick={cancel_edit}
+                        aria-label="Cancel"
                         disabled={patch_status === 'processing'}>
                         <X size="14" />
                     </button>
@@ -393,14 +312,19 @@ function toggle_edit() {
             <div class="input_container mb-3">
                 {#if field_type === 'textarea'}
                     <textarea
+                        {id}
+                        bind:this={input_ref}
                         bind:value={draft_value}
                         rows={textarea_rows}
                         class="textarea"
                         {placeholder}></textarea>
                 {:else if field_type === 'select'}
-                    <!-- TODO #5 — wire coerce_select_value() into an onchange
-                         handler here instead of relying on bind:value alone. -->
-                    <select bind:value={draft_value} class="select">
+                    <select 
+                        {id}
+                        bind:this={input_ref}
+                        value={draft_value}
+                        onchange={(e) => draft_value = coerce_select_value(e.currentTarget.value, current_value)}
+                        class="select">
                         {#if allow_null}
                             <option value={null}>-- None --</option>
                         {/if}
@@ -411,7 +335,9 @@ function toggle_edit() {
                 {:else if field_type === 'checkbox'}
                     <label class="flex items-center space-x-2">
                         <input
+                            {id}
                             type="checkbox"
+                            bind:this={input_ref}
                             bind:checked={draft_value}
                             class="checkbox" />
                         <span>{draft_value ? 'True' : 'False'}</span>
@@ -421,61 +347,32 @@ function toggle_edit() {
                         bind:content={draft_value}
                         {placeholder} />
                 {:else if field_type === 'date'}
-                    <!-- TODO #4 — value here should already be in
-                         "YYYY-MM-DD" form via to_input_value(). -->
-                    <input type="date" bind:value={draft_value} class="input" />
+                    <input 
+                        {id}
+                        type="date" 
+                        bind:this={input_ref}
+                        bind:value={draft_value} 
+                        class="input" />
                 {:else if field_type === 'datetime'}
-                    <!-- TODO #4 — value here should already be in
-                         "YYYY-MM-DDTHH:mm" form via to_input_value(). -->
                     <input
+                        {id}
                         type="datetime-local"
+                        bind:this={input_ref}
                         bind:value={draft_value}
                         class="input" />
-                {:else if field_type === 'number'}
-                    <input
-                        type="number"
-                        bind:value={draft_value}
-                        class="input"
-                        {placeholder}
-                        onkeydown={(e) =>
-                            e.key === 'Enter' && handle_patch()} />
-                {:else if field_type === 'email'}
-                    <!-- TODO #2 — confirm this needs nothing more than the
-                         type= swap once styling (#6) is done. -->
-                    <input
-                        type="email"
-                        bind:value={draft_value}
-                        class="input"
-                        {placeholder}
-                        onkeydown={(e) =>
-                            e.key === 'Enter' && handle_patch()} />
-                {:else if field_type === 'url'}
-                    <input
-                        type="url"
-                        bind:value={draft_value}
-                        class="input"
-                        {placeholder}
-                        onkeydown={(e) =>
-                            e.key === 'Enter' && handle_patch()} />
-                {:else if field_type === 'tel'}
-                    <input
-                        type="tel"
-                        bind:value={draft_value}
-                        class="input"
-                        {placeholder}
-                        onkeydown={(e) =>
-                            e.key === 'Enter' && handle_patch()} />
                 {:else}
                     <input
-                        type="text"
+                        {id}
+                        type={field_type === 'number' ? 'number' : field_type === 'email' ? 'email' : field_type === 'url' ? 'url' : field_type === 'tel' ? 'tel' : 'text'}
+                        bind:this={input_ref}
                         bind:value={draft_value}
                         class="input"
                         {placeholder}
-                        onkeydown={(e) =>
-                            e.key === 'Enter' && handle_patch()} />
+                        onkeydown={(e) => e.key === 'Enter' && handle_patch()} />
                 {/if}
             </div>
 
+
             <footer class="flex items-center justify-between">
                 <div class="status_indicator text-xs">
                     {#if patch_status === 'processing'}
@@ -487,13 +384,12 @@ function toggle_edit() {
                             <Check size="12" /> Saved
                         </span>
                     {:else if patch_status === 'error'}
-                        <!-- TODO #7 — show error_message visibly here too,
-                             not just via the title="" tooltip below. -->
-                        <span
-                            class="text-error-500 flex items-center gap-1"
-                            title={error_message}>
-                            <CircleAlert size="12" /> Error
-                        </span>
+                        <div class="text-error-500 flex flex-col gap-0.5">
+                            <span class="flex items-center gap-1 font-bold">
+                                <CircleAlert size="12" /> Error
+                            </span>
+                            <span class="opacity-80">{error_message}</span>
+                        </div>
                     {/if}
                 </div>
 
@@ -501,17 +397,17 @@ function toggle_edit() {
                     {#if allow_null && draft_value !== null}
                         <button
                             type="button"
-                            class="btn btn-sm variant-soft-error"
+                            class="btn btn-sm preset-tonal-error"
                             onclick={() => (draft_value = null)}>
                             Set Null
                         </button>
                     {/if}
                     <button
                         type="button"
-                        class="btn btn-sm variant-filled-primary"
+                        class="btn btn-sm preset-filled-primary-500"
                         onclick={handle_patch}
-                        disabled={patch_status === 'processing' ||
-                            draft_value === display_value}>
+                        aria-label="Save"
+                        disabled={patch_status === 'processing' || draft_value === to_input_value(current_value, field_type)}>
                         {#if patch_status === 'processing'}
                             <LoaderCircle size="14" class="mr-1 animate-spin" />
                         {:else}
@@ -526,9 +422,12 @@ function toggle_edit() {
 </div>
 
 <style>
-/* Add any specialized transitions if needed */
 .ae_field_editor :global(.btn-icon-sm) {
     width: 24px;
     height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
 }
 </style>
diff --git a/src/routes/core/person_view.svelte b/src/routes/core/person_view.svelte
index 284f1e29..e1678c73 100644
--- a/src/routes/core/person_view.svelte
+++ b/src/routes/core/person_view.svelte
@@ -13,7 +13,7 @@ import { liveQuery } from 'dexie';
 
 import type { key_val } from '$lib/stores/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import { core_func } from '$lib/ae_core/ae_core_functions';
 import {
     ae_snip,
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
index 8ff4b938..c820cfa2 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
@@ -10,7 +10,7 @@ import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { events_sess } from '$lib/stores/ae_events_stores';
 import { leads_loc } from '$lib/stores/ae_events_stores__leads.svelte';
 import { events_func } from '$lib/ae_events/ae_events_functions';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import Comp_exhibit_license_list from './ae_comp__exhibit_license_list.svelte';
 import Comp_exhibit_custom_questions from './ae_comp__exhibit_custom_questions.svelte';
 import Comp_exhibit_payment from './ae_comp__exhibit_payment.svelte';
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/device/device/ae_comp__event_device_obj_li.svelte b/src/routes/events/[event_id]/(pres_mgmt)/device/device/ae_comp__event_device_obj_li.svelte
index 90d9075a..c8c557b8 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/device/device/ae_comp__event_device_obj_li.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/device/device/ae_comp__event_device_obj_li.svelte
@@ -40,7 +40,7 @@ import {
 import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
 import { events_func } from '$lib/ae_events/ae_events_functions';
 
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import {
     Barcode,
     Camera,
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_view.svelte
index 143e4aa1..7c04b1e8 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_view.svelte
@@ -19,7 +19,7 @@ import { liveQuery } from 'dexie';
 
 import type { key_val } from '$lib/stores/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import Element_data_store from '$lib/elements/element_data_store.svelte';
 
 let ae_promises: key_val = $state({});
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/locations/ae_comp__event_location_obj_li.svelte b/src/routes/events/[event_id]/(pres_mgmt)/locations/ae_comp__event_location_obj_li.svelte
index 30e11f93..64850df6 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/locations/ae_comp__event_location_obj_li.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/locations/ae_comp__event_location_obj_li.svelte
@@ -36,7 +36,7 @@ import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
 import { events_func } from '$lib/ae_events/ae_events_functions';
 
 import Comp_event_session_obj_li from '../../../ae_comp__event_session_obj_li_wrapper.svelte';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import Comp_event_device_obj_li from '../device/device/ae_comp__event_device_obj_li_wrapper.svelte';
 import {
     Barcode,
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
index 008cd661..1bb23474 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
@@ -20,7 +20,7 @@ import { browser } from '$app/environment';
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api/api';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
 
 import { core_func } from '$lib/ae_core/ae_core_functions';
@@ -185,8 +185,8 @@ $effect(() => {
             <Element_ae_obj_field_editor
                 object_type={'event_presentation'}
                 object_id={$lq__event_presenter_obj?.event_presentation_id}
-                field_name={'name'}
-                field_type={'text'}
+                field_name={'email'}
+                field_type={'email'}
                 current_value={$lq__event_presenter_obj?.event_presentation_name}
                 on_success={() =>
                     events_func.load_ae_obj_id__event_presentation({
@@ -257,8 +257,8 @@ $effect(() => {
                 <Element_ae_obj_field_editor
                     object_type={'event_presenter'}
                     object_id={$lq__event_presenter_obj?.event_presenter_id}
-                    field_name={'external_id'}
-                    field_type={'text'}
+                    field_name={'email'}
+                    field_type={'email'}
                     current_value={$lq__event_presenter_obj.external_id}
                     allow_null={true}
                     on_success={() =>
@@ -350,8 +350,8 @@ $effect(() => {
                 <Element_ae_obj_field_editor
                     object_type={'event_presenter'}
                     object_id={$lq__event_presenter_obj?.event_presenter_id}
-                    field_name={'given_name'}
-                    field_type={'text'}
+                    field_name={'email'}
+                    field_type={'email'}
                     current_value={$lq__event_presenter_obj.given_name}
                     on_success={() =>
                         events_func.load_ae_obj_id__event_presenter({
@@ -536,7 +536,7 @@ $effect(() => {
                     object_type={'event_presenter'}
                     object_id={$lq__event_presenter_obj?.event_presenter_id}
                     field_name={'email'}
-                    field_type={'text'}
+                    field_type={'email'}
                     current_value={$lq__event_presenter_obj.email}
                     allow_null={true}
                     on_success={() =>
@@ -1079,8 +1079,8 @@ $effect(() => {
                 <Element_ae_obj_field_editor
                     object_type={'person'}
                     object_id={$lq__event_presenter_obj.person_id}
-                    field_name={'passcode'}
-                    field_type={'text'}
+                    field_name={'email'}
+                    field_type={'email'}
                     current_value={$lq__event_presenter_obj.person_passcode}
                     allow_null={true}
                     on_success={() =>
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
index cb498da5..f3e8a1c6 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
@@ -20,7 +20,7 @@ import { Modal } from 'flowbite-svelte';
 import { liveQuery } from 'dexie';
 import type { key_val } from '$lib/stores/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
 import { core_func } from '$lib/ae_core/ae_core_functions';
 import { ae_snip, ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
@@ -371,7 +371,7 @@ async function send_poc_email_link() {
                                     field_name="start_datetime"
                                     field_type="datetime"
                                     edit_label="Start Date & Time"
-                                    current_value={to_datetime_local($lq__event_session_obj.start_datetime) || default_start_datetime}
+                                    current_value={$lq__event_session_obj.start_datetime || default_start_datetime}
                                     on_success={() =>
                                         events_func.load_ae_obj_id__event_session({
                                             api_cfg: $ae_api,
@@ -390,7 +390,7 @@ async function send_poc_email_link() {
                                     field_name="end_datetime"
                                     field_type="datetime"
                                     edit_label="End Date & Time"
-                                    current_value={to_datetime_local($lq__event_session_obj.end_datetime) || default_end_datetime}
+                                    current_value={$lq__event_session_obj.start_datetime || default_start_datetime}
                                     on_success={() =>
                                         events_func.load_ae_obj_id__event_session({
                                             api_cfg: $ae_api,
diff --git a/src/routes/events/ae_comp__event_presentation_obj_li.svelte b/src/routes/events/ae_comp__event_presentation_obj_li.svelte
index 7e1744d4..26b50988 100644
--- a/src/routes/events/ae_comp__event_presentation_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_presentation_obj_li.svelte
@@ -35,7 +35,7 @@ import {
 } from '$lib/stores/ae_events_stores';
 import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
 import { events_auth_loc } from '$lib/stores/ae_events_stores__auth.svelte';
-import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
+import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import Comp_event_presenter_obj_li from '../events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
 import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_all.svelte';
 import {
diff --git a/src/routes/testing/ae_obj_field_editor/+page.svelte b/src/routes/testing/ae_obj_field_editor/+page.svelte
index 03e0f236..b7ee6591 100644
--- a/src/routes/testing/ae_obj_field_editor/+page.svelte
+++ b/src/routes/testing/ae_obj_field_editor/+page.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
 import AE_Obj_Field_Editor_V3 from '$lib/elements/element_ae_obj_field_editor.svelte';
+import AE_Obj_Field_Editor_New from '$lib/elements/element_ae_obj_field_editor_new.svelte';
 import { ae_loc, ae_api } from '$lib/stores/ae_stores';
 import { liveQuery } from 'dexie';
 import { db_journals } from '$lib/ae_journals/db_journals';
 import { load_ae_obj_id__journal } from '$lib/ae_journals/ae_journals__journal';
 import { load_ae_obj_id__journal_entry } from '$lib/ae_journals/ae_journals__journal_entry';
-import { Database, FileText, LoaderCircle, RefreshCw } from '@lucide/svelte';
+import { Database, FileText, LoaderCircle, RefreshCw, Zap } from '@lucide/svelte';
 import { onMount } from 'svelte';
 
 let log_lvl = $state(1);
 
 // Provided Test IDs
-let test_journal_id = $state('SWFK-48-89-90'); // 'BVYE-94-46-29'
+let test_journal_id = $state('SWFK-48-89-90'); 
 let test_journal_entry_id = $state('xRx-Y4-h3-fU');
 
 // Fetch objects from API on mount to ensure local DB is populated
@@ -57,9 +58,9 @@ function handle_success(data: any) {
     <header
         class="border-surface-500/30 flex items-center justify-between border-b pb-4">
         <div>
-            <h1 class="h1">AE Obj Field Editor V3 Test</h1>
+            <h1 class="text-3xl font-bold">Field Editor Comparison</h1>
             <p class="font-mono text-xs opacity-70">
-                IDs: Journal={test_journal_id} | Entry={test_journal_entry_id}
+                Left: Legacy (Skeleton) | Right: NEW (Tailwind v4)
             </p>
         </div>
         <div class="flex items-center gap-4">
@@ -73,30 +74,88 @@ function handle_success(data: any) {
                     class="checkbox" />
             </label>
             <button
-                class="btn variant-filled-primary"
+                class="btn preset-filled-primary-500"
                 onclick={() => window.location.reload()}>
                 <RefreshCw size="1em" class="mr-2" /> Reload Page
             </button>
         </div>
     </header>
 
-    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <!-- COLUMN 1: JOURNAL TEST -->
-        <div class="space-y-8">
-            <h2 class="h2 flex items-center gap-2">
-                <Database /> Journal Properties
+    <div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
+        
+        <!-- ================================================================== -->
+        <!-- LEGACY VERSION (Skeleton UI) -->
+        <!-- ================================================================== -->
+        <div class="space-y-8 opacity-60 grayscale-[0.5]">
+            <h2 class="text-xl font-bold flex items-center gap-2 text-surface-500">
+                <Database /> Legacy V3 Editor
             </h2>
 
-            {#if $lq__test_journal}
-                <section
-                    class="card variant-soft-primary border-primary-500/20 space-y-6 border p-6 shadow-lg">
+            {#if $lq__test_journal && $lq__test_journal_entry}
+                <section class="card variant-soft-surface space-y-6 p-6">
                     <div class="field_group">
-                        <label
-                            for="j_name"
-                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                            >Journal Name</label>
+                        <label class="label mb-1 text-xs font-bold uppercase opacity-50">Name (Text)</label>
                         <AE_Obj_Field_Editor_V3
-                            id="j_name"
+                            object_type="journal"
+                            object_id={test_journal_id}
+                            field_name="name"
+                            bind:current_value={$lq__test_journal.name}
+                            field_type="text"
+                            {log_lvl} />
+                    </div>
+
+                    <div class="field_group">
+                        <label class="label mb-1 text-xs font-bold uppercase opacity-50">Type (Select)</label>
+                        <AE_Obj_Field_Editor_V3
+                            object_type="journal"
+                            object_id={test_journal_id}
+                            field_name="type_code"
+                            bind:current_value={$lq__test_journal.type_code}
+                            field_type="select"
+                            select_options={{ personal: 'Personal', work: 'Work' }}
+                            {log_lvl} />
+                    </div>
+
+                    <div class="field_group">
+                        <label class="label mb-1 text-xs font-bold uppercase opacity-50">Summary (Textarea)</label>
+                        <AE_Obj_Field_Editor_V3
+                            object_type="journal"
+                            object_id={test_journal_id}
+                            field_name="summary"
+                            bind:current_value={$lq__test_journal.summary}
+                            field_type="textarea"
+                            display_block={true}
+                            {log_lvl} />
+                    </div>
+
+                    <div class="field_group">
+                        <label class="label mb-1 text-xs font-bold uppercase opacity-50">Priority (Checkbox)</label>
+                        <AE_Obj_Field_Editor_V3
+                            object_type="journal_entry"
+                            object_id={test_journal_entry_id}
+                            field_name="priority"
+                            bind:current_value={$lq__test_journal_entry.priority}
+                            field_type="checkbox"
+                            {log_lvl} />
+                    </div>
+                </section>
+            {/if}
+        </div>
+
+        <!-- ================================================================== -->
+        <!-- NEW VERSION (Tailwind v4 + Flowbite) -->
+        <!-- ================================================================== -->
+        <div class="space-y-8">
+            <h2 class="text-xl font-bold flex items-center gap-2 text-primary-500">
+                <Zap /> NEW Field Editor
+            </h2>
+
+            {#if $lq__test_journal && $lq__test_journal_entry}
+                <section class="border-surface-200-800 bg-surface-50-950 space-y-6 rounded-xl border p-6 shadow-xl">
+                    <div class="field_group">
+                        <label for="j_name_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Name (Text + Generic T)</label>
+                        <AE_Obj_Field_Editor_New
+                            id="j_name_new"
                             object_type="journal"
                             object_id={test_journal_id}
                             field_name="name"
@@ -107,158 +166,93 @@ function handle_success(data: any) {
                     </div>
 
                     <div class="field_group">
-                        <label
-                            for="j_type"
-                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                            >Type Code</label>
-                        <AE_Obj_Field_Editor_V3
-                            id="j_type"
+                        <label for="j_type_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Type (Select + Coercion)</label>
+                        <AE_Obj_Field_Editor_New
+                            id="j_type_new"
                             object_type="journal"
                             object_id={test_journal_id}
                             field_name="type_code"
                             bind:current_value={$lq__test_journal.type_code}
                             field_type="select"
-                            select_options={{
-                                personal: 'Personal Journal',
-                                work: 'Work Log',
-                                shared: 'Shared Notes',
-                                ai_brain: 'AI Context'
-                            }}
+                            select_options={{ personal: 'Personal', work: 'Work' }}
                             {log_lvl} />
                     </div>
 
                     <div class="field_group">
-                        <label
-                            for="j_summary"
-                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                            >Summary</label>
-                        <AE_Obj_Field_Editor_V3
-                            id="j_summary"
-                            object_type="journal"
-                            object_id={test_journal_id}
-                            field_name="summary"
-                            bind:current_value={$lq__test_journal.summary}
-                            field_type="textarea"
-                            display_block={true}
-                            {log_lvl} />
-                    </div>
-                </section>
-            {:else}
-                <div
-                    class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
-                    <LoaderCircle size="32" class="animate-spin" />
-                    <p class="text-sm font-bold">
-                        Loading Journal {test_journal_id}...
-                    </p>
-                </div>
-            {/if}
-        </div>
-
-        <!-- COLUMN 2: JOURNAL ENTRY TEST -->
-        <div class="space-y-8">
-            <h2 class="h2 flex items-center gap-2">
-                <FileText /> Journal Entry Properties
-            </h2>
-
-            {#if $lq__test_journal_entry}
-                <section
-                    class="card variant-soft-secondary border-secondary-500/20 space-y-6 border p-6 shadow-lg">
-                    <div class="field_group">
-                        <label
-                            for="e_name"
-                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                            >Entry Title</label>
-                        <AE_Obj_Field_Editor_V3
-                            id="e_name"
+                        <label for="e_start_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Start (Datetime + Conversion)</label>
+                        <AE_Obj_Field_Editor_New
+                            id="e_start_new"
                             object_type="journal_entry"
                             object_id={test_journal_entry_id}
-                            field_name="name"
-                            bind:current_value={$lq__test_journal_entry.name}
-                            field_type="text"
+                            field_name="start_datetime"
+                            bind:current_value={$lq__test_journal_entry.start_datetime}
+                            field_type="datetime"
+                            edit_label="Event Start"
+                            {log_lvl} />
+                    </div>
+
+                    <div class="field_group">
+                        <label for="j_code_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Code (New: Email/URL/Tel)</label>
+                        <AE_Obj_Field_Editor_New
+                            id="j_code_new"
+                            object_type="journal"
+                            object_id={test_journal_id}
+                            field_name="code"
+                            bind:current_value={$lq__test_journal.code}
+                            field_type="email"
+                            placeholder="test@example.com"
                             {log_lvl} />
                     </div>
 
                     <div class="grid grid-cols-2 gap-4">
                         <div class="field_group">
-                            <label
-                                for="e_enabled"
-                                class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                                >Status</label>
-                            <AE_Obj_Field_Editor_V3
-                                id="e_enabled"
+                            <label for="e_priority_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Priority</label>
+                            <AE_Obj_Field_Editor_New
+                                id="e_priority_new"
                                 object_type="journal_entry"
                                 object_id={test_journal_entry_id}
-                                field_name="enable"
-                                bind:current_value={
-                                    $lq__test_journal_entry.enable
-                                }
+                                field_name="priority"
+                                bind:current_value={$lq__test_journal_entry.priority}
                                 field_type="checkbox"
                                 {log_lvl} />
                         </div>
                         <div class="field_group">
-                            <label
-                                for="e_priority"
-                                class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
-                                >Priority</label>
-                            <AE_Obj_Field_Editor_V3
-                                id="e_priority"
+                            <label for="e_enable_new" class="text-surface-500 mb-1 block text-xs font-bold uppercase">Enable</label>
+                            <AE_Obj_Field_Editor_New
+                                id="e_enable_new"
                                 object_type="journal_entry"
                                 object_id={test_journal_entry_id}
-                                field_name="priority"
-                                bind:current_value={
-                                    $lq__test_journal_entry.priority
-                                }
+                                field_name="enable"
+                                bind:current_value={$lq__test_journal_entry.enable}
                                 field_type="checkbox"
                                 {log_lvl} />
                         </div>
                     </div>
-
-                    <div class="field_group">
-                        <p
-                            class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50">
-                            Content (TipTap)
-                        </p>
-                        <AE_Obj_Field_Editor_V3
-                            object_type="journal_entry"
-                            object_id={test_journal_entry_id}
-                            field_name="content"
-                            bind:current_value={$lq__test_journal_entry.content}
-                            field_type="tiptap"
-                            display_block={true}
-                            {log_lvl} />
-                    </div>
                 </section>
             {:else}
-                <div
-                    class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
+                <div class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
                     <LoaderCircle size="32" class="animate-spin" />
-                    <p class="text-sm font-bold">
-                        Loading Entry {test_journal_entry_id}...
-                    </p>
+                    <p class="text-sm font-bold">Loading Test Objects...</p>
                 </div>
             {/if}
         </div>
     </div>
 
     <!-- DEBUG FOOTER -->
-    <section class="card space-y-4 p-4">
-        <h2 class="h3">Debug Context</h2>
+    <section class="border-surface-200-800 bg-surface-100-900 rounded-lg border p-4">
+        <h2 class="mb-3 font-bold">Debug Context</h2>
         <div class="grid grid-cols-2 gap-4 font-mono text-xs lg:grid-cols-4">
-            <div class="bg-surface-900 text-success-500 rounded p-2">
-                <strong>Edit Mode:</strong>
-                {$ae_loc.edit_mode}
+            <div class="bg-surface-950 text-success-500 rounded p-2">
+                <strong>Edit Mode:</strong> {$ae_loc.edit_mode}
             </div>
-            <div class="bg-surface-900 text-success-500 rounded p-2">
-                <strong>Account ID:</strong>
-                {$ae_loc.account_id}
+            <div class="bg-surface-950 text-success-500 rounded p-2">
+                <strong>Journal:</strong> {$lq__test_journal ? 'OK' : '...'}
             </div>
-            <div class="bg-surface-900 text-success-500 rounded p-2">
-                <strong>Journal Status:</strong>
-                {$lq__test_journal ? 'Cached' : 'Pending'}
+            <div class="bg-surface-950 text-success-500 rounded p-2">
+                <strong>Entry:</strong> {$lq__test_journal_entry ? 'OK' : '...'}
             </div>
-            <div class="bg-surface-900 text-success-500 rounded p-2">
-                <strong>Entry Status:</strong>
-                {$lq__test_journal_entry ? 'Cached' : 'Pending'}
+            <div class="bg-surface-950 text-primary-500 rounded p-2">
+                <strong>JS:</strong> Svelte 5 Runes
             </div>
         </div>
     </section>