From 35017f979384d001404f46c70f7f64fdd1603fcc Mon Sep 17 00:00:00 2001
From: Chili Palmer <hugoms@me.com>
Date: Mon, 4 May 2026 11:12:17 +0200
Subject: [PATCH] feat: p hase 3 of tailwind migration

---
 assets/css/tokens.css                         |   18 +
 assets/css/utilities.css                      |   47 +
 assets/js/app.js                              |  127 +-
 assets/js/bridges/menu_runtime.js             |   57 +
 assets/js/bridges/titlebar_overlay.js         |   39 +
 assets/js/hooks/index.js                      |    1 +
 assets/js/monaco/services.js                  |    1 +
 .../chat_editor_html/chat_editor.html.heex    |   32 +-
 lib/bds/desktop/shell_live/index.html.heex    |  110 +-
 .../media_editor_html/media_editor.html.heex  |   93 +-
 .../menu_editor_html/menu_editor.html.heex    |   30 +-
 .../misc_editor_html/misc_editor.html.heex    |   10 +-
 lib/bds/desktop/shell_live/panel_renderer.ex  |   16 +-
 .../post_editor_html/post_editor.html.heex    |   96 +-
 .../script_editor.html.heex                   |   38 +-
 .../settings_editor.html.heex                 |   12 +-
 .../desktop/shell_live/sidebar_components.ex  |   14 +-
 .../tags_editor_html/tags_editor.html.heex    |   20 +-
 .../template_editor.html.heex                 |   36 +-
 priv/static/assets/app.css                    | 5325 ++++++++-
 priv/static/assets/app.js                     | 9655 ++++++++++++++++-
 test/bds/desktop/shell_live_test.exs          |  339 +-
 test/bds/desktop_test.exs                     |    8 +-
 test/bds/ui/shell_test.exs                    |   53 +-
 24 files changed, 15752 insertions(+), 425 deletions(-)
 create mode 100644 assets/js/bridges/menu_runtime.js
 create mode 100644 assets/js/bridges/titlebar_overlay.js
 create mode 100644 assets/js/hooks/index.js
 create mode 100644 assets/js/monaco/services.js

diff --git a/assets/css/tokens.css b/assets/css/tokens.css
index 98748ab..7c6846d 100644
--- a/assets/css/tokens.css
+++ b/assets/css/tokens.css
@@ -1,3 +1,21 @@
+@theme {
+  --color-shell-bg: #1e1e1e;
+  --color-sidebar-bg: #252526;
+  --color-activity-bg: #333333;
+  --color-panel-bg: #1e1e1e;
+  --color-tab-active-bg: #1e1e1e;
+  --color-tab-inactive-bg: #2d2d2d;
+  --color-focus-border: #007fd4;
+  --color-input-bg: rgba(255, 255, 255, 0.06);
+  --color-input-border: rgba(255, 255, 255, 0.12);
+  --color-status-bg: #007acc;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --text-shell: 13px;
+  --spacing-titlebar: 34px;
+  --spacing-tabbar: 35px;
+  --spacing-statusbar: 22px;
+}
+
 :root {
   --accent-color: #007acc;
   --accent-color-transparent: rgba(0, 122, 204, 0.25);
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index e69de29..6ebb609 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -0,0 +1,47 @@
+@layer components {
+	.btn-base {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		min-height: 28px;
+		padding: 4px 10px;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		font: inherit;
+		line-height: 1.2;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.btn-theme-primary {
+		color: var(--vscode-button-foreground, #ffffff);
+		background: var(--vscode-button-background, var(--vscode-focusBorder));
+	}
+
+	.btn-theme-primary:hover {
+		background: var(--vscode-button-hoverBackground, #0e639c);
+	}
+
+	.btn-theme-danger {
+		color: var(--vscode-errorForeground, #f48771);
+		background: transparent;
+		border-color: color-mix(in srgb, var(--vscode-errorForeground, #f48771) 45%, transparent);
+	}
+
+	.btn-theme-danger:hover {
+		background: color-mix(in srgb, var(--vscode-errorForeground, #f48771) 14%, transparent);
+	}
+
+	.panel-entry {
+		border: 1px solid var(--vscode-panel-border);
+		border-radius: 4px;
+		background-color: var(--vscode-sideBar-background);
+	}
+
+	.monaco-host {
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+	}
+}
diff --git a/assets/js/app.js b/assets/js/app.js
index 6931b5a..201e82e 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,6 +1,10 @@
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import "phoenix_html";
+import { syncTitlebarOverlayInsets } from "./bridges/titlebar_overlay.js";
+import { createMenuRuntimeCommandRunner } from "./bridges/menu_runtime.js";
+import { createHooks } from "./hooks/index.js";
+import { createMonacoServices } from "./monaco/services.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   const csrfToken = document
@@ -119,46 +123,6 @@ document.addEventListener("DOMContentLoaded", () => {
     window.localStorage.setItem(key, String(width));
   };
 
-  const syncTitlebarOverlayInsets = () => {
-    const rootStyle = document.documentElement.style;
-    const setInsets = (left, right) => {
-      rootStyle.setProperty("--bds-titlebar-overlay-left", `${left}px`);
-      rootStyle.setProperty("--bds-titlebar-overlay-right", `${right}px`);
-    };
-
-    const overlay = navigator.windowControlsOverlay;
-
-    if (!overlay) {
-      setInsets(0, 0);
-      return () => {};
-    }
-
-    const updateInsets = () => {
-      if (!overlay.visible) {
-        setInsets(0, 0);
-        return;
-      }
-
-      const titlebarRect = overlay.getTitlebarAreaRect();
-      const viewportWidth = window.innerWidth || document.documentElement.clientWidth || titlebarRect.right;
-      const leftInset = Math.max(0, Math.round(titlebarRect.left));
-      const rightInset = Math.max(0, Math.round(viewportWidth - titlebarRect.right));
-      setInsets(leftInset, rightInset);
-    };
-
-    const onGeometryChange = () => updateInsets();
-    const onResize = () => updateInsets();
-
-    updateInsets();
-    overlay.addEventListener("geometrychange", onGeometryChange);
-    window.addEventListener("resize", onResize);
-
-    return () => {
-      overlay.removeEventListener("geometrychange", onGeometryChange);
-      window.removeEventListener("resize", onResize);
-    };
-  };
-
   let monacoLoaderPromise;
   let liquidLanguageRegistered = false;
   let markdownWithMacrosRegistered = false;
@@ -213,61 +177,12 @@ document.addEventListener("DOMContentLoaded", () => {
     document.documentElement.style.zoom = String(zoom);
   };
 
-  const runMenuRuntimeCommand = (action) => {
-    const editor = activeMonacoEditor();
-
-    switch (action) {
-      case "undo":
-        return editor ? runMonacoEditorAction(editor, "undo") : runDocumentCommand("undo");
-      case "redo":
-        return editor ? runMonacoEditorAction(editor, "redo") : runDocumentCommand("redo");
-      case "cut":
-        return editor
-          ? runMonacoEditorAction(editor, "editor.action.clipboardCutAction")
-          : runDocumentCommand("cut");
-      case "copy":
-        return editor
-          ? runMonacoEditorAction(editor, "editor.action.clipboardCopyAction")
-          : runDocumentCommand("copy");
-      case "paste":
-        return editor
-          ? runMonacoEditorAction(editor, "editor.action.clipboardPasteAction")
-          : runDocumentCommand("paste");
-      case "delete":
-        return editor ? runMonacoEditorAction(editor, "deleteLeft") : runDocumentCommand("delete");
-      case "select_all":
-        return editor
-          ? runMonacoEditorAction(editor, "editor.action.selectAll")
-          : runDocumentCommand("selectAll");
-      case "find":
-        return editor ? runMonacoEditorAction(editor, "actions.find") : false;
-      case "replace":
-        return editor ? runMonacoEditorAction(editor, "editor.action.startFindReplaceAction") : false;
-      case "reload":
-      case "force_reload":
-        window.location.reload();
-        return true;
-      case "reset_zoom":
-        applyAppZoom(1);
-        return true;
-      case "zoom_in":
-        applyAppZoom((window.__bdsAppZoom || 1) + 0.1);
-        return true;
-      case "zoom_out":
-        applyAppZoom((window.__bdsAppZoom || 1) - 0.1);
-        return true;
-      case "toggle_full_screen":
-        if (document.fullscreenElement) {
-          document.exitFullscreen?.();
-        } else {
-          document.documentElement.requestFullscreen?.();
-        }
-
-        return true;
-      default:
-        return false;
-    }
-  };
+  const menuRuntimeCommandRunner = createMenuRuntimeCommandRunner({
+    activeMonacoEditor,
+    runMonacoEditorAction,
+    runDocumentCommand,
+    applyAppZoom
+  });
 
   const cssVar = (name, fallback) => {
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -588,6 +503,8 @@ document.addEventListener("DOMContentLoaded", () => {
     return monacoLoaderPromise;
   };
 
+  const monacoServices = createMonacoServices({ loadMonaco, ensureMonacoTheme });
+
   const Hooks = {
     AppShell: {
       mounted() {
@@ -738,7 +655,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
         this.handleEvent("menu-runtime-command", ({ action }) => {
           if (action) {
-            runMenuRuntimeCommand(String(action));
+            menuRuntimeCommandRunner(String(action));
           }
         });
 
@@ -1295,7 +1212,7 @@ document.addEventListener("DOMContentLoaded", () => {
           this.editor.focus();
         };
 
-        loadMonaco()
+        monacoServices.loadMonaco()
           .then(async (monaco) => {
             if (!this.host || !this.textarea) {
               return;
@@ -1303,7 +1220,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
             await this.waitForMonacoVisibleSize();
 
-            ensureMonacoTheme(monaco);
+            monacoServices.ensureMonacoTheme(monaco);
 
             this.editor = monaco.editor.create(this.host, {
               value: this.textarea.value || "",
@@ -1360,8 +1277,8 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
 
-        loadMonaco().then((monaco) => {
-          ensureMonacoTheme(monaco);
+        monacoServices.loadMonaco().then((monaco) => {
+          monacoServices.ensureMonacoTheme(monaco);
           monaco.editor.setTheme("bds-theme");
 
           if (this.editor.getModel()?.getLanguageId() !== this.language) {
@@ -1430,13 +1347,13 @@ document.addEventListener("DOMContentLoaded", () => {
           this.lastFilePath = this.filePath;
         };
 
-        loadMonaco()
+        monacoServices.loadMonaco()
           .then((monaco) => {
             if (!this.host) {
               return;
             }
 
-            ensureMonacoTheme(monaco);
+            monacoServices.ensureMonacoTheme(monaco);
 
             this.editor = monaco.editor.createDiffEditor(this.host, {
               theme: "bds-theme",
@@ -1470,8 +1387,8 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
 
-        loadMonaco().then((monaco) => {
-          ensureMonacoTheme(monaco);
+        monacoServices.loadMonaco().then((monaco) => {
+          monacoServices.ensureMonacoTheme(monaco);
           monaco.editor.setTheme("bds-theme");
 
           this.editor.updateOptions({
@@ -1515,7 +1432,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
-    hooks: Hooks,
+    hooks: createHooks(Hooks),
     metadata: {
       keydown: (event) => ({
         key: event.key,
diff --git a/assets/js/bridges/menu_runtime.js b/assets/js/bridges/menu_runtime.js
new file mode 100644
index 0000000..35083d6
--- /dev/null
+++ b/assets/js/bridges/menu_runtime.js
@@ -0,0 +1,57 @@
+export const createMenuRuntimeCommandRunner = ({ activeMonacoEditor, runMonacoEditorAction, runDocumentCommand, applyAppZoom }) => {
+  return (action) => {
+    const editor = activeMonacoEditor();
+
+    switch (action) {
+      case "undo":
+        return editor ? runMonacoEditorAction(editor, "undo") : runDocumentCommand("undo");
+      case "redo":
+        return editor ? runMonacoEditorAction(editor, "redo") : runDocumentCommand("redo");
+      case "cut":
+        return editor
+          ? runMonacoEditorAction(editor, "editor.action.clipboardCutAction")
+          : runDocumentCommand("cut");
+      case "copy":
+        return editor
+          ? runMonacoEditorAction(editor, "editor.action.clipboardCopyAction")
+          : runDocumentCommand("copy");
+      case "paste":
+        return editor
+          ? runMonacoEditorAction(editor, "editor.action.clipboardPasteAction")
+          : runDocumentCommand("paste");
+      case "delete":
+        return editor ? runMonacoEditorAction(editor, "deleteLeft") : runDocumentCommand("delete");
+      case "select_all":
+        return editor
+          ? runMonacoEditorAction(editor, "editor.action.selectAll")
+          : runDocumentCommand("selectAll");
+      case "find":
+        return editor ? runMonacoEditorAction(editor, "actions.find") : false;
+      case "replace":
+        return editor ? runMonacoEditorAction(editor, "editor.action.startFindReplaceAction") : false;
+      case "reload":
+      case "force_reload":
+        window.location.reload();
+        return true;
+      case "reset_zoom":
+        applyAppZoom(1);
+        return true;
+      case "zoom_in":
+        applyAppZoom((window.__bdsAppZoom || 1) + 0.1);
+        return true;
+      case "zoom_out":
+        applyAppZoom((window.__bdsAppZoom || 1) - 0.1);
+        return true;
+      case "toggle_full_screen":
+        if (document.fullscreenElement) {
+          document.exitFullscreen?.();
+        } else {
+          document.documentElement.requestFullscreen?.();
+        }
+
+        return true;
+      default:
+        return false;
+    }
+  };
+};
diff --git a/assets/js/bridges/titlebar_overlay.js b/assets/js/bridges/titlebar_overlay.js
new file mode 100644
index 0000000..db31ab5
--- /dev/null
+++ b/assets/js/bridges/titlebar_overlay.js
@@ -0,0 +1,39 @@
+export const syncTitlebarOverlayInsets = () => {
+  const rootStyle = document.documentElement.style;
+  const setInsets = (left, right) => {
+    rootStyle.setProperty("--bds-titlebar-overlay-left", `${left}px`);
+    rootStyle.setProperty("--bds-titlebar-overlay-right", `${right}px`);
+  };
+
+  const overlay = navigator.windowControlsOverlay;
+
+  if (!overlay) {
+    setInsets(0, 0);
+    return () => {};
+  }
+
+  const updateInsets = () => {
+    if (!overlay.visible) {
+      setInsets(0, 0);
+      return;
+    }
+
+    const titlebarRect = overlay.getTitlebarAreaRect();
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth || titlebarRect.right;
+    const leftInset = Math.max(0, Math.round(titlebarRect.left));
+    const rightInset = Math.max(0, Math.round(viewportWidth - titlebarRect.right));
+    setInsets(leftInset, rightInset);
+  };
+
+  const onGeometryChange = () => updateInsets();
+  const onResize = () => updateInsets();
+
+  updateInsets();
+  overlay.addEventListener("geometrychange", onGeometryChange);
+  window.addEventListener("resize", onResize);
+
+  return () => {
+    overlay.removeEventListener("geometrychange", onGeometryChange);
+    window.removeEventListener("resize", onResize);
+  };
+};
diff --git a/assets/js/hooks/index.js b/assets/js/hooks/index.js
new file mode 100644
index 0000000..2567c71
--- /dev/null
+++ b/assets/js/hooks/index.js
@@ -0,0 +1 @@
+export const createHooks = (hooks) => hooks;
diff --git a/assets/js/monaco/services.js b/assets/js/monaco/services.js
new file mode 100644
index 0000000..e7bdbfa
--- /dev/null
+++ b/assets/js/monaco/services.js
@@ -0,0 +1 @@
+export const createMonacoServices = (services) => services;
diff --git a/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex b/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
index 98e6a06..49efdbb 100644
--- a/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
+++ b/lib/bds/desktop/shell_live/chat_editor_html/chat_editor.html.heex
@@ -1,6 +1,6 @@
-<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel" data-testid="chat-editor" phx-hook="ChatSurface">
-  <div class="chat-panel-header">
-    <div class="chat-panel-title">
+<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel flex h-full min-h-0 flex-col" data-testid="chat-editor" phx-hook="ChatSurface">
+  <div class="chat-panel-header flex shrink-0 items-center justify-between gap-3">
+    <div class="chat-panel-title flex min-w-0 flex-1 items-center justify-between gap-3">
       <span class="chat-panel-title-main">
         <%= if @chat_editor.needs_api_key? do %>
           <%= dgettext("ui", "AI Chat Setup") %>
@@ -10,9 +10,9 @@
       </span>
 
       <%= unless @chat_editor.needs_api_key? do %>
-        <span class="chat-model-selector-wrap">
+        <span class="chat-model-selector-wrap relative shrink-0">
           <button
-            class="chat-model-selector-button chat-model-selector-inline"
+            class="chat-model-selector-button chat-model-selector-inline inline-flex items-center gap-2"
             type="button"
             phx-click="toggle_chat_model_selector"
             phx-target={@myself}
@@ -23,7 +23,7 @@
           </button>
 
           <%= if @chat_editor.model_selector_open? and @chat_editor.available_models != [] do %>
-            <div class="chat-model-selector-menu">
+            <div class="chat-model-selector-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col">
               <%= for group <- @chat_editor.available_model_groups do %>
                 <section class="chat-model-provider-group" data-testid="chat-model-provider-group" data-provider={group.provider}>
                   <%= if length(@chat_editor.available_model_groups) > 1 do %>
@@ -33,7 +33,7 @@
                   <%= for model <- group.models do %>
                     <button
                       class={[
-                        "chat-model-selector-option",
+                        "chat-model-selector-option flex items-center justify-between gap-2 text-left",
                         if(model.id == @chat_editor.effective_model, do: "active")
                       ]}
                       type="button"
@@ -55,9 +55,9 @@
     </div>
   </div>
 
-  <div class="chat-messages chat-surface-scroll">
+  <div class="chat-messages chat-surface-scroll min-h-0 flex-1 overflow-auto">
     <%= if @chat_editor.needs_api_key? do %>
-      <div class="chat-welcome chat-api-key-state" data-testid="chat-api-key-required">
+      <div class="chat-welcome chat-api-key-state flex flex-col items-start gap-3" data-testid="chat-api-key-required">
         <div class="chat-welcome-icon">🔑</div>
         <h2><%= dgettext("ui", "API Key Required") %></h2>
         <p><%= dgettext("ui", "Configure an API key in Settings to enable AI chat.") %></p>
@@ -67,7 +67,7 @@
       </div>
     <% else %>
     <%= if Enum.empty?(@chat_editor.messages) and not @chat_editor.is_streaming do %>
-      <div class="chat-welcome">
+      <div class="chat-welcome flex flex-col items-start gap-3">
         <div class="chat-welcome-icon">🤖</div>
         <h2><%= dgettext("ui", "Welcome to the AI Assistant") %></h2>
         <p><%= dgettext("ui", "I can help you manage your blog with rich visualizations. Try asking me to:") %></p>
@@ -81,7 +81,7 @@
       </div>
     <% else %>
       <%= if @chat_editor.pending_user_message do %>
-        <div class="chat-message user pending" data-testid="chat-pending-user-message">
+        <div class="chat-message user pending flex items-start gap-3" data-testid="chat-pending-user-message">
           <div class="chat-message-avatar">👤</div>
           <div class="chat-message-content">
             <div class="chat-message-header">
@@ -93,7 +93,7 @@
       <% end %>
 
       <%= for message <- @chat_editor.messages do %>
-        <div class={["chat-message", to_string(message.role || "assistant")]}>
+        <div class={["chat-message flex items-start gap-3", to_string(message.role || "assistant")]}> 
           <div class="chat-message-avatar"><%= if message.role == :user, do: "👤", else: "🤖" %></div>
           <div class="chat-message-content">
             <div class="chat-message-header"><span class="chat-message-role"><%= message_role_label(message.role) %></span></div>
@@ -113,7 +113,7 @@
       <% end %>
 
       <%= if @chat_editor.is_streaming and (@chat_editor.streaming_content != "" or @chat_editor.streaming_tool_markers != []) do %>
-        <div class="chat-message assistant streaming" data-testid="chat-streaming-message">
+        <div class="chat-message assistant streaming flex items-start gap-3" data-testid="chat-streaming-message">
           <div class="chat-message-avatar">🤖</div>
           <div class="chat-message-content">
             <div class="chat-message-header">
@@ -133,7 +133,7 @@
       <% end %>
 
       <%= if @chat_editor.is_streaming and @chat_editor.streaming_content == "" and @chat_editor.streaming_tool_markers == [] do %>
-        <div class="chat-message assistant thinking" data-testid="chat-streaming-thinking">
+        <div class="chat-message assistant thinking flex items-start gap-3" data-testid="chat-streaming-thinking">
           <div class="chat-message-avatar">🤖</div>
           <div class="chat-message-content">
             <div class="chat-thinking-indicator">
@@ -147,12 +147,12 @@
   </div>
 
   <%= unless @chat_editor.needs_api_key? do %>
-    <div class="chat-input-container" data-testid="chat-input-container">
+    <div class="chat-input-container flex shrink-0 flex-col gap-3" data-testid="chat-input-container">
       <%= if @chat_editor.is_streaming do %>
         <button class="chat-abort-button" data-testid="chat-abort-button" type="button" phx-click="abort_chat_editor_message" phx-target={@myself}>◼ <%= dgettext("ui", "Stop") %></button>
       <% end %>
 
-      <form class="chat-input-wrapper" phx-change="change_chat_editor_input" phx-submit="send_chat_editor_message" phx-target={@myself}>
+      <form class="chat-input-wrapper flex items-end gap-2" phx-change="change_chat_editor_input" phx-submit="send_chat_editor_message" phx-target={@myself}>
         <textarea class="chat-input chat-surface-input" name="message" rows="1" placeholder={dgettext("ui", "Type a message...")} disabled={@chat_editor.is_streaming}><%= @chat_editor.input %></textarea>
         <button class="chat-send-button" data-testid="chat-send-button" type="button" phx-click="send_chat_editor_message" phx-target={@myself} disabled={@chat_editor.send_disabled?}>↑</button>
       </form>
diff --git a/lib/bds/desktop/shell_live/index.html.heex b/lib/bds/desktop/shell_live/index.html.heex
index 211e374..e8e85d3 100644
--- a/lib/bds/desktop/shell_live/index.html.heex
+++ b/lib/bds/desktop/shell_live/index.html.heex
@@ -1,5 +1,5 @@
 <div
-  class="app"
+  class="app flex h-full w-full flex-col"
   id="bds-shell-app"
   phx-hook="AppShell"
   data-shortcuts={encoded_shortcuts(@client_shortcuts)}
@@ -112,12 +112,12 @@
     </div>
   <% end %>
 
-  <div class="app-main">
-    <aside class="activity-bar" data-region="activity-bar">
-      <div class="activity-bar-top">
+  <div class="app-main flex min-h-0 flex-1 overflow-hidden">
+    <aside class="activity-bar flex h-full shrink-0 flex-col items-center justify-between" data-region="activity-bar">
+      <div class="activity-bar-top flex flex-col items-center gap-1">
         <%= for button <- Enum.filter(@activity_buttons, &(&1.activity_group == :top)) do %>
           <button
-            class={["activity-bar-item", if(button.active, do: "active")]}
+            class={["activity-bar-item inline-flex h-12 w-12 items-center justify-center", if(button.active, do: "active")]}
             data-testid="activity-button"
             data-view={button.id}
             data-active={to_string(button.active)}
@@ -134,10 +134,10 @@
           </button>
         <% end %>
       </div>
-      <div class="activity-bar-bottom">
+      <div class="activity-bar-bottom flex flex-col items-center gap-1">
         <%= for button <- Enum.filter(@activity_buttons, &(&1.activity_group == :bottom)) do %>
           <button
-            class={["activity-bar-item", if(button.active, do: "active")]}
+            class={["activity-bar-item inline-flex h-12 w-12 items-center justify-center", if(button.active, do: "active")]}
             data-testid="activity-button"
             data-view={button.id}
             data-active={to_string(button.active)}
@@ -157,22 +157,22 @@
     </aside>
 
     <section
-      class={["sidebar-shell", if(not @workbench.sidebar_visible, do: "is-hidden")]}
+      class={["sidebar-shell flex min-w-0 shrink-0 overflow-hidden", if(not @workbench.sidebar_visible, do: "is-hidden")]}
       data-testid="sidebar-shell"
       style={"width: #{if(@workbench.sidebar_visible, do: @workbench.sidebar_width, else: 0)}px;"}
     >
-      <div class="sidebar" data-region="sidebar">
-        <div id="sidebar-content" class="sidebar-content sidebar-body" phx-hook="SidebarInteractions">
+      <div class="sidebar flex min-w-0 flex-1 overflow-hidden" data-region="sidebar">
+        <div id="sidebar-content" class="sidebar-content sidebar-body flex min-h-0 flex-1 flex-col overflow-y-auto" phx-hook="SidebarInteractions">
           <div class="sidebar-section">
             <% create_action = sidebar_create_action(@workbench.active_view) %>
-            <div class="sidebar-section-header">
+            <div class="sidebar-section-header flex items-center justify-between gap-2">
               <span><%= String.upcase(sidebar_header_label(@sidebar_header)) %></span>
               <%= if create_action || ShellSidebarComponents.filters_enabled?(@sidebar_data) do %>
-                <div class="sidebar-actions">
+                <div class="sidebar-actions flex items-center gap-1">
                   <%= if ShellSidebarComponents.filters_enabled?(@sidebar_data) do %>
                     <button
                       class={[
-                        "sidebar-action",
+                        "sidebar-action inline-flex h-8 w-8 items-center justify-center",
                         if(ShellSidebarComponents.filters_visible?(@sidebar_data), do: "active")
                       ]}
                       data-testid="sidebar-filter-toggle"
@@ -188,7 +188,7 @@
                   <% end %>
                   <%= if create_action do %>
                     <button
-                      class="sidebar-action"
+                      class="sidebar-action inline-flex h-8 w-8 items-center justify-center"
                       data-testid="sidebar-create-action"
                       data-sidebar-action={create_action.kind}
                       type="button"
@@ -212,16 +212,16 @@
       <div class="resizable-panel-divider sidebar-divider" data-resize="sidebar" data-role="resize-handle"></div>
     </section>
 
-    <main class="app-content" data-region="content">
-      <div class="tab-bar" data-region="tab-bar">
+    <main class="app-content flex min-w-0 flex-1 flex-col overflow-hidden" data-region="content">
+      <div class="tab-bar flex h-[35px] shrink-0 items-center overflow-hidden" data-region="tab-bar">
         <%= if Enum.empty?(@workbench.tabs) do %>
-          <div class="tab-bar-empty"><%= dgettext("ui", "Dashboard") %></div>
+          <div class="tab-bar-empty flex h-full items-center px-3 text-sm"><%= dgettext("ui", "Dashboard") %></div>
         <% else %>
-          <div class="tab-bar-tabs">
+          <div class="tab-bar-tabs flex min-w-0 flex-1 items-stretch overflow-x-auto">
             <%= for tab <- @workbench.tabs do %>
               <div
                 class={[
-                  "tab",
+                  "tab flex min-w-0 max-w-[240px] shrink-0 items-stretch",
                   if(@workbench.active_tab == {tab.type, tab.id}, do: "active"),
                   if(tab.is_transient, do: "transient"),
                   if(Workbench.dirty?(@workbench, tab.type, tab.id), do: "dirty")
@@ -231,21 +231,21 @@
                 tabindex="0"
               >
                 <button
-                  class="tab-select"
+                  class="tab-select flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-3 text-sm"
                   type="button"
                   phx-click="select_tab"
                   phx-value-type={tab.type}
                   phx-value-id={tab.id}
                 >
-                  <span class="tab-icon"><%= raw(ShellData.activity_icon(BDS.Desktop.ShellLive.TabHelpers.tab_icon_id(tab))) %></span>
-                  <span class="tab-title"><%= BDS.Desktop.ShellLive.TabHelpers.tab_title(tab, @tab_meta) %></span>
+                  <span class="tab-icon shrink-0"><%= raw(ShellData.activity_icon(BDS.Desktop.ShellLive.TabHelpers.tab_icon_id(tab))) %></span>
+                  <span class="tab-title truncate"><%= BDS.Desktop.ShellLive.TabHelpers.tab_title(tab, @tab_meta) %></span>
                 </button>
-                <div class="tab-actions">
+                <div class="tab-actions flex items-center gap-1 pr-2">
                   <%= if Workbench.dirty?(@workbench, tab.type, tab.id) do %>
                     <span class="tab-dirty-indicator">●</span>
                   <% end %>
                   <button
-                    class="tab-close"
+                    class="tab-close inline-flex h-6 w-6 items-center justify-center"
                     data-testid="tab-close"
                     data-tab-type={tab.type}
                     data-tab-id={tab.id}
@@ -265,7 +265,7 @@
         <% end %>
       </div>
 
-      <section class="editor-shell" data-region="editor">
+      <section class="editor-shell flex min-h-0 flex-1 flex-col overflow-hidden" data-region="editor">
         <%= if is_nil(@current_tab) do %>
           <div class="editor-empty">
             <div class="dashboard-content">
@@ -452,12 +452,12 @@
         <% end %>
       </section>
 
-      <section class={["panel-shell", if(not @workbench.panel.visible, do: "is-hidden")]} data-region="panel">
-        <div class="panel-header">
-          <div class="panel-tabs">
+      <section class={["panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden", if(not @workbench.panel.visible, do: "is-hidden")]} data-region="panel">
+        <div class="panel-header flex items-center justify-between gap-2">
+          <div class="panel-tabs flex min-w-0 items-center overflow-x-auto">
             <%= for tab <- @panel_tabs do %>
               <button
-                class={["panel-tab", if(@workbench.panel.active_tab == tab, do: "active")]}
+                class={["panel-tab inline-flex h-9 items-center px-3 text-xs uppercase tracking-wide", if(@workbench.panel.active_tab == tab, do: "active")]}
                 type="button"
                 phx-click="select_panel_tab"
                 phx-value-tab={tab}
@@ -467,7 +467,7 @@
             <% end %>
           </div>
           <button
-            class="panel-close"
+            class="panel-close inline-flex h-8 w-8 items-center justify-center"
             data-testid="panel-close"
             type="button"
             phx-click="toggle_panel"
@@ -477,21 +477,21 @@
             ×
           </button>
         </div>
-        <div class="panel-content">
+        <div class="panel-content min-h-0 flex-1 overflow-auto">
           <%= BDS.Desktop.ShellLive.PanelRenderer.render_panel_body(assigns) %>
         </div>
       </section>
     </main>
 
     <section
-      class={["assistant-sidebar-shell", if(not @workbench.assistant_sidebar_visible, do: "is-hidden")]}
+      class={["assistant-sidebar-shell flex min-w-0 shrink-0 overflow-hidden", if(not @workbench.assistant_sidebar_visible, do: "is-hidden")]}
       data-testid="assistant-shell"
       style={"width: #{if(@workbench.assistant_sidebar_visible, do: @workbench.assistant_sidebar_width, else: 0)}px;"}
     >
       <div class="resizable-panel-divider assistant-divider" data-resize="assistant" data-role="resize-handle"></div>
-      <aside class="assistant-sidebar" data-region="assistant-sidebar">
-        <div class="assistant-content">
-          <header class="assistant-sidebar-header">
+      <aside class="assistant-sidebar flex min-w-0 flex-1 overflow-hidden" data-region="assistant-sidebar">
+        <div class="assistant-content flex min-h-0 flex-1 flex-col">
+          <header class="assistant-sidebar-header flex items-start justify-between gap-3">
             <div class="assistant-sidebar-heading">
               <strong><%= dgettext("ui", "AI Assistant") %></strong>
               <span class="assistant-sidebar-description"><%= dgettext("ui", "AI conversations") %></span>
@@ -504,12 +504,12 @@
             </span>
           </header>
 
-          <section class="assistant-sidebar-context" data-testid="assistant-context">
-            <div class="assistant-sidebar-context-row">
+          <section class="assistant-sidebar-context flex shrink-0 flex-col gap-2" data-testid="assistant-context">
+            <div class="assistant-sidebar-context-row flex items-center justify-between gap-2">
               <span class="assistant-sidebar-context-label"><%= dgettext("ui", "Project") %></span>
               <span class="assistant-sidebar-context-value"><%= BDS.Desktop.ShellLive.ChatSurface.assistant_project_name(@current_project) %></span>
             </div>
-            <div class="assistant-sidebar-context-row">
+            <div class="assistant-sidebar-context-row flex items-center justify-between gap-2">
               <span class="assistant-sidebar-context-label"><%= dgettext("ui", "Editor") %></span>
               <span class="assistant-sidebar-context-value"><%= BDS.Desktop.ShellLive.TabHelpers.tab_title(@current_tab, @tab_meta) %></span>
             </div>
@@ -517,13 +517,13 @@
           </section>
 
           <form
-            class="assistant-sidebar-prompt-form"
+            class="assistant-sidebar-prompt-form flex shrink-0 flex-col gap-3"
             data-testid="assistant-prompt-form"
             phx-change="update_assistant_prompt"
             phx-submit="submit_assistant_prompt"
           >
             <textarea
-              class="assistant-sidebar-prompt"
+              class="assistant-sidebar-prompt min-h-[8rem] w-full resize-y"
               data-testid="assistant-prompt-input"
               name="assistant[prompt]"
               rows="6"
@@ -541,19 +541,19 @@
           </form>
 
           <%= if Enum.empty?(@assistant_messages) do %>
-            <div class="assistant-sidebar-welcome">
+            <div class="assistant-sidebar-welcome min-h-0 flex-1 overflow-auto">
               <%= for card <- @assistant_cards do %>
-                <section class="assistant-card">
+                <section class="assistant-card flex flex-col gap-1">
                   <strong><%= card.label %></strong>
                   <span><%= card.text %></span>
                 </section>
               <% end %>
             </div>
           <% else %>
-            <div class="assistant-sidebar-transcript">
+            <div class="assistant-sidebar-transcript min-h-0 flex-1 overflow-auto">
               <%= for message <- @assistant_messages do %>
                 <article
-                  class={["assistant-sidebar-message", message.role]}
+                  class={["assistant-sidebar-message flex flex-col gap-1", message.role]}
                   data-testid={BDS.Desktop.ShellLive.ChatSurface.assistant_message_testid(message.role)}
                 >
                   <span class="assistant-sidebar-message-role"><%= BDS.Desktop.ShellLive.ChatSurface.assistant_message_label(message.role) %></span>
@@ -567,12 +567,12 @@
     </section>
   </div>
 
-  <footer class="status-bar" data-region="status-bar" data-testid="status-bar">
-    <div class="status-bar-left">
+  <footer class="status-bar flex h-[22px] shrink-0 items-center justify-between gap-2" data-region="status-bar" data-testid="status-bar">
+    <div class="status-bar-left flex min-w-0 items-center gap-2 overflow-hidden">
       <%= if @is_mac_ui do %>
-        <div class="status-shell-controls" data-testid="status-shell-controls">
+        <div class="status-shell-controls flex items-center gap-1" data-testid="status-shell-controls">
           <button
-            class="status-shell-toggle-button"
+            class="status-shell-toggle-button inline-flex h-6 w-6 items-center justify-center"
             data-testid="toggle-sidebar"
             type="button"
             phx-click="toggle_sidebar"
@@ -584,7 +584,7 @@
             </span>
           </button>
           <button
-            class="status-shell-toggle-button"
+            class="status-shell-toggle-button inline-flex h-6 w-6 items-center justify-center"
             data-testid="toggle-panel"
             type="button"
             phx-click="toggle_panel"
@@ -596,7 +596,7 @@
             </span>
           </button>
           <button
-            class="status-shell-toggle-button"
+            class="status-shell-toggle-button inline-flex h-6 w-6 items-center justify-center"
             data-testid="toggle-assistant"
             type="button"
             phx-click="toggle_assistant_sidebar"
@@ -609,9 +609,9 @@
           </button>
         </div>
       <% end %>
-      <div class="project-selector">
+      <div class="project-selector relative shrink-0">
         <button
-          class="project-selector-trigger"
+          class="project-selector-trigger inline-flex items-center gap-2"
           data-testid="project-selector-trigger"
           type="button"
           title={dgettext("ui", "Switch project")}
@@ -659,7 +659,7 @@
           </div>
         <% end %>
       </div>
-      <button class="status-bar-item status-bar-task-button" data-testid="status-task-button" type="button" phx-click="open_tasks_panel">
+      <button class="status-bar-item status-bar-task-button inline-flex items-center gap-2" data-testid="status-task-button" type="button" phx-click="open_tasks_panel">
         <%= if @status.left.running_task_message do %>
           <span class="task-spinner"></span>
         <% end %>
@@ -669,12 +669,12 @@
         <% end %>
       </button>
     </div>
-    <div class="status-bar-right">
+    <div class="status-bar-right flex items-center gap-2 overflow-hidden">
       <span class="status-bar-item"><%= @status.right.post_count %></span>
       <span class="status-bar-item"><%= @status.right.media_count %></span>
       <span class="status-bar-item theme-badge"><%= @status.right.theme_badge %></span>
       <button class={["status-bar-item", "offline-badge", if(@status.right.offline_mode, do: "active")]} data-testid="status-offline-button" type="button" phx-click="toggle_offline_mode" title={dgettext("ui", "Toggle offline mode")}>✈</button>
-      <form class="status-bar-item language-badge" data-testid="status-language-form" phx-change="change_ui_language">
+      <form class="status-bar-item language-badge flex items-center gap-1" data-testid="status-language-form" phx-change="change_ui_language">
         <span><%= dgettext("ui", "UI") %></span>
         <select class="status-bar-language-select" name="ui_language" data-testid="status-language-select">
           <%= for language <- @supported_ui_languages do %>
diff --git a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
index f69560a..ea4a0f6 100644
--- a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
+++ b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
@@ -1,26 +1,25 @@
-<div class="media-editor editor" data-testid="media-editor">
-  <div class="editor-header">
-    <div class="editor-tabs">
+<div class="media-editor editor flex h-full min-h-0 flex-col" data-testid="media-editor">
+  <div class="editor-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden">
       <div class={[
-        "editor-tab",
-        "active",
+        "editor-tab active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2",
         if(@media_editor.dirty?, do: "dirty")
       ]}>
-        <span class="editor-tab-title" data-testid="editor-title"><%= @media_editor.display_title %></span>
+        <span class="editor-tab-title truncate" data-testid="editor-title"><%= @media_editor.display_title %></span>
         <%= if @media_editor.dirty? do %>
           <span class="editor-tab-dirty" title={dgettext("ui", "Unsaved")}>●</span>
         <% end %>
       </div>
     </div>
 
-    <div class="editor-actions">
+    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
       <%= if @media_editor.save_state in [:dirty, :saved] do %>
         <span class="auto-save-indicator"><%= media_editor_save_state_label(@media_editor.save_state) %></span>
       <% end %>
 
-      <div class="quick-actions-wrapper">
+      <div class="quick-actions-wrapper relative">
         <button
-          class="secondary quick-actions-btn"
+          class="secondary quick-actions-btn inline-flex items-center gap-2"
           type="button"
           phx-click="toggle_media_editor_quick_actions"
           phx-target={@myself}
@@ -30,16 +29,16 @@
         </button>
 
         <%= if @media_editor.quick_actions_open? do %>
-          <div class="quick-actions-menu">
+          <div class="quick-actions-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
             <%= if @media_editor.is_image do %>
               <button
-                class="quick-action-item"
+                class="quick-action-item flex items-start gap-3 text-left"
                 data-testid="editor-toolbar-overlay-button"
                 type="button"
                 phx-click="open_overlay"
                 phx-value-kind="ai_suggestions"
               >
-                <span class="quick-action-text">
+                <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                   <strong><%= dgettext("ui", "AI Suggestions") %></strong>
                   <small><%= dgettext("ui", "Review title, alt text, and caption suggestions") %></small>
                 </span>
@@ -50,13 +49,13 @@
             <% end %>
 
             <button
-              class="quick-action-item"
+              class="quick-action-item flex items-start gap-3 text-left"
               type="button"
               phx-click="detect_media_editor_language"
               phx-target={@myself}
               disabled={not @media_editor.can_detect_language?}
             >
-              <span class="quick-action-text">
+              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                 <strong><%= dgettext("ui", "Detect Language") %></strong>
                 <small><%= dgettext("ui", "Persist the detected language for this media item") %></small>
               </span>
@@ -66,14 +65,14 @@
             <div class="quick-actions-divider"></div>
 
             <button
-              class="quick-action-item"
+              class="quick-action-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
               phx-value-kind="language_picker"
               disabled={not @media_editor.can_translate?}
             >
-              <span class="quick-action-text">
+              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                 <strong><%= dgettext("ui", "Translate") %></strong>
                 <small><%= dgettext("ui", "Select a target language for this media item") %></small>
               </span>
@@ -101,14 +100,14 @@
     </div>
   </div>
 
-  <div class="editor-content media-editor">
-    <div class="media-preview">
+  <div class="editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]">
+    <div class="media-preview flex min-h-[16rem] items-center justify-center">
       <%= if @media_editor.is_image and @media_editor.preview_url do %>
         <div class="media-preview-image">
           <img src={@media_editor.preview_url} alt={@media_editor.form["alt"] || @media_editor.original_name} />
         </div>
       <% else %>
-        <div class="media-preview-placeholder">
+        <div class="media-preview-placeholder flex h-full w-full flex-col items-center justify-center gap-3">
           <svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" opacity="0.3">
             <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path>
           </svg>
@@ -117,58 +116,58 @@
       <% end %>
     </div>
 
-    <div class="media-details">
-      <form class="media-editor-details-form" data-testid="media-editor-form" phx-change="change_media_editor" phx-target={@myself}>
-        <div class="editor-field">
+    <div class="media-details min-w-0">
+      <form class="media-editor-details-form flex flex-col gap-4" data-testid="media-editor-form" phx-change="change_media_editor" phx-target={@myself}>
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "File Name") %></label>
           <input class="post-editor-input disabled" type="text" value={@media_editor.original_name} disabled />
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "MIME Type") %></label>
           <input class="post-editor-input disabled" type="text" value={@media_editor.mime_type} disabled />
         </div>
 
-        <div class="editor-field-row">
-          <div class="editor-field">
+        <div class="editor-field-row grid gap-4 md:grid-cols-2">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Size") %></label>
             <input class="post-editor-input disabled" type="text" value={@media_editor.file_size} disabled />
           </div>
 
           <%= if @media_editor.dimensions do %>
-            <div class="editor-field">
+            <div class="editor-field flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Dimensions") %></label>
               <input class="post-editor-input disabled" type="text" value={@media_editor.dimensions} disabled />
             </div>
           <% end %>
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Title") %></label>
           <input class="post-editor-input" type="text" name="media_editor[title]" value={@media_editor.form["title"]} />
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Alt Text") %></label>
           <input class="post-editor-input" type="text" name="media_editor[alt]" value={@media_editor.form["alt"]} />
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Caption") %></label>
           <textarea class="post-editor-textarea" name="media_editor[caption]" rows="3"><%= @media_editor.form["caption"] %></textarea>
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Tags") %></label>
           <input class="post-editor-input" type="text" name="media_editor[tags]" value={@media_editor.form["tags"]} />
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Author") %></label>
           <input class="post-editor-input" type="text" name="media_editor[author]" value={@media_editor.form["author"]} />
         </div>
 
-        <div class="editor-field">
+        <div class="editor-field flex flex-col gap-1.5">
           <label><%= dgettext("ui", "Language") %></label>
           <select class="post-editor-input" name="media_editor[language]">
             <option value=""><%= dgettext("ui", "None") %></option>
@@ -180,15 +179,15 @@
       </form>
 
       <%= if @media_editor.form["language"] not in [nil, ""] do %>
-        <div class="editor-field media-translations-section">
+        <div class="editor-field media-translations-section flex flex-col gap-2">
           <label><%= dgettext("ui", "Translations") %></label>
 
           <%= if Enum.empty?(@media_editor.translations) do %>
             <div class="no-linked-posts"><%= dgettext("ui", "No translations") %></div>
           <% else %>
-            <div class="linked-posts-list">
+            <div class="linked-posts-list flex flex-col gap-2">
               <%= for translation <- @media_editor.translations do %>
-                <div class="linked-post-item">
+                <div class="linked-post-item flex items-center justify-between gap-2">
                   <button
                     class="linked-post-title linked-post-link"
                     type="button"
@@ -209,7 +208,7 @@
         </div>
       <% end %>
 
-      <div class="editor-field linked-posts-section">
+      <div class="editor-field linked-posts-section flex flex-col gap-2">
         <label>
           <%= dgettext("ui", "Linked Posts") %>
           <button class="add-link-btn" type="button" phx-click="toggle_media_post_picker" phx-target={@myself}>
@@ -218,7 +217,7 @@
         </label>
 
         <%= if @media_editor.post_picker_open? do %>
-          <div class="post-picker">
+          <div class="post-picker flex flex-col gap-3">
             <div class="post-picker-search">
               <input
                 type="text"
@@ -233,7 +232,7 @@
             <%= if Enum.empty?(@media_editor.post_picker_results) do %>
               <div class="no-posts"><%= dgettext("ui", "No posts to link") %></div>
             <% else %>
-              <div class="post-picker-list">
+              <div class="post-picker-list flex flex-col gap-2">
                 <%= for result <- @media_editor.post_picker_results do %>
                   <button class="post-picker-item" type="button" phx-click="link_media_to_post" phx-target={@myself} phx-value-post-id={result.post_id}>
                     <%= result.title %>
@@ -250,9 +249,9 @@
         <%= if Enum.empty?(@media_editor.linked_posts) do %>
           <div class="no-linked-posts"><%= dgettext("ui", "Not linked to any posts") %></div>
         <% else %>
-          <div class="linked-posts-list">
+          <div class="linked-posts-list flex flex-col gap-2">
             <%= for linked_post <- @media_editor.linked_posts do %>
-              <div class="linked-post-item">
+              <div class="linked-post-item flex items-center justify-between gap-2">
                 <button
                   class="linked-post-title linked-post-link"
                   type="button"
@@ -275,27 +274,27 @@
 
   <%= if @media_editor.editing_translation do %>
     <div class="translation-modal-backdrop">
-      <div class="translation-modal">
-        <div class="translation-modal-header">
+      <div class="translation-modal flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden">
+        <div class="translation-modal-header flex items-center justify-between gap-3">
           <h2><%= dgettext("ui", "Edit Translation") %></h2>
           <button class="translation-modal-close" type="button" phx-click="close_media_translation_editor" phx-target={@myself}>×</button>
         </div>
-        <form class="translation-modal-body" phx-change="change_media_translation" phx-target={@myself}>
+        <form class="translation-modal-body flex flex-col gap-4 overflow-auto" phx-change="change_media_translation" phx-target={@myself}>
           <input type="hidden" name="media_translation[language]" value={@media_editor.editing_translation["language"]} />
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Title") %></label>
             <input class="post-editor-input" type="text" name="media_translation[title]" value={@media_editor.editing_translation["title"]} />
           </div>
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Alt Text") %></label>
             <input class="post-editor-input" type="text" name="media_translation[alt]" value={@media_editor.editing_translation["alt"]} />
           </div>
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Caption") %></label>
             <textarea class="post-editor-textarea" name="media_translation[caption]" rows="3"><%= @media_editor.editing_translation["caption"] %></textarea>
           </div>
         </form>
-        <div class="translation-modal-footer">
+        <div class="translation-modal-footer flex items-center justify-end gap-2">
           <button class="secondary" type="button" phx-click="close_media_translation_editor" phx-target={@myself}><%= dgettext("ui", "Cancel") %></button>
           <button type="button" phx-click="save_media_translation" phx-target={@myself}><%= dgettext("ui", "Save") %></button>
         </div>
diff --git a/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex b/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
index 574d24a..e03b480 100644
--- a/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
+++ b/lib/bds/desktop/shell_live/menu_editor_html/menu_editor.html.heex
@@ -1,51 +1,51 @@
-<div class="menu-editor-view" data-testid="menu-editor" phx-window-keydown={if(@menu_editor.draft, do: "menu_editor_keydown")} phx-target={@myself}>
-  <div class="menu-editor-header">
+<div class="menu-editor-view flex h-full min-h-0 flex-col" data-testid="menu-editor" phx-window-keydown={if(@menu_editor.draft, do: "menu_editor_keydown")} phx-target={@myself}>
+  <div class="menu-editor-header flex shrink-0 items-start justify-between gap-3">
     <div>
       <h2><%= @menu_editor.title %></h2>
       <p><%= @menu_editor.description %></p>
     </div>
   </div>
 
-  <div class="menu-editor-main">
-    <div class="menu-editor-tree-wrap">
-      <div class="menu-editor-toolbar" data-testid="menu-editor-toolbar" role="toolbar" aria-label={@menu_editor.title}>
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="add-entry" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="add-entry" phx-target={@myself} title={dgettext("ui", "menuEditor.addEntry")}>
+  <div class="menu-editor-main min-h-0 flex-1 overflow-hidden">
+    <div class="menu-editor-tree-wrap flex h-full min-h-0 flex-col">
+      <div class="menu-editor-toolbar flex flex-wrap items-center gap-2" data-testid="menu-editor-toolbar" role="toolbar" aria-label={@menu_editor.title}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="add-entry" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="add-entry" phx-target={@myself} title={dgettext("ui", "menuEditor.addEntry")}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M7 2h2v5h5v2H9v5H7V9H2V7h5V2z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="save" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="save" phx-target={@myself} title={dgettext("ui", "menuEditor.save")}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="save" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="save" phx-target={@myself} title={dgettext("ui", "menuEditor.save")}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 2h9l3 3v9H2V2zm2 1v3h6V3H4zm0 9h8V7H4v5z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="add-category-archive" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="add-category-archive" phx-target={@myself} title={dgettext("ui", "menuEditor.addCategoryArchive")}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="add-category-archive" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="add-category-archive" phx-target={@myself} title={dgettext("ui", "menuEditor.addCategoryArchive")}>
           <span aria-hidden="true"><%= dgettext("ui", "menuEditor.addCategoryArchiveShort") %></span>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="move-up" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="move-up" phx-target={@myself} title={dgettext("ui", "menuEditor.moveUp")} disabled={not @menu_editor.can_move_up?}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="move-up" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="move-up" phx-target={@myself} title={dgettext("ui", "menuEditor.moveUp")} disabled={not @menu_editor.can_move_up?}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 3l4 4H9v6H7V7H4l4-4z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="move-down" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="move-down" phx-target={@myself} title={dgettext("ui", "menuEditor.moveDown")} disabled={not @menu_editor.can_move_down?}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="move-down" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="move-down" phx-target={@myself} title={dgettext("ui", "menuEditor.moveDown")} disabled={not @menu_editor.can_move_down?}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M7 3h2v6h3l-4 4-4-4h3V3z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="indent" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="indent" phx-target={@myself} title={dgettext("ui", "menuEditor.indent")} disabled={not @menu_editor.can_indent?}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="indent" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="indent" phx-target={@myself} title={dgettext("ui", "menuEditor.indent")} disabled={not @menu_editor.can_indent?}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 4h8v2H2V4zm0 3h4v2H2V7zm0 3h8v2H2v-2zm6-1 3 2-3 2V9z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="unindent" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="unindent" phx-target={@myself} title={dgettext("ui", "menuEditor.unindent")} disabled={not @menu_editor.can_unindent?}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="unindent" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="unindent" phx-target={@myself} title={dgettext("ui", "menuEditor.unindent")} disabled={not @menu_editor.can_unindent?}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 4h8v2H2V4zm0 3h4v2H2V7zm0 3h8v2H2v-2zm3-1-3 2 3 2V9z" /></svg>
         </button>
 
-        <button class="menu-editor-tool" data-testid="menu-editor-toolbar-button" data-action="delete" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="delete" phx-target={@myself} title={dgettext("ui", "menuEditor.delete")} disabled={not @menu_editor.can_delete?}>
+        <button class="menu-editor-tool inline-flex h-9 min-w-9 items-center justify-center" data-testid="menu-editor-toolbar-button" data-action="delete" type="button" phx-click="menu_editor_toolbar_action" phx-value-action="delete" phx-target={@myself} title={dgettext("ui", "menuEditor.delete")} disabled={not @menu_editor.can_delete?}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M6 2h4l1 1h3v2H2V3h3l1-1zm-1 4h2v6H5V6zm4 0h2v6H9V6z" /></svg>
         </button>
       </div>
 
       <%= if @menu_editor.items == [] do %>
-        <div class="menu-editor-empty"><%= dgettext("ui", "menuEditor.empty") %></div>
+        <div class="menu-editor-empty flex min-h-0 flex-1 items-center justify-center"><%= dgettext("ui", "menuEditor.empty") %></div>
       <% else %>
-        <div id="menu-editor-tree-shell" class="menu-editor-tree-shell" phx-hook="MenuEditorTree">
+        <div id="menu-editor-tree-shell" class="menu-editor-tree-shell min-h-0 flex-1 overflow-auto" phx-hook="MenuEditorTree">
           <ul class="menu-editor-tree-level">
             <.menu_tree_level items={@menu_editor.items} menu_editor={@menu_editor} depth={0} myself={@myself} />
           </ul>
diff --git a/lib/bds/desktop/shell_live/misc_editor_html/misc_editor.html.heex b/lib/bds/desktop/shell_live/misc_editor_html/misc_editor.html.heex
index b6eefa7..593e39d 100644
--- a/lib/bds/desktop/shell_live/misc_editor_html/misc_editor.html.heex
+++ b/lib/bds/desktop/shell_live/misc_editor_html/misc_editor.html.heex
@@ -1,10 +1,10 @@
-<div class={["misc-editor-shell", misc_class(@misc_editor.kind)]} data-testid="misc-editor">
-  <div class="misc-editor-header">
+<div class={["misc-editor-shell flex h-full min-h-0 flex-col overflow-hidden", misc_class(@misc_editor.kind)]} data-testid="misc-editor">
+  <div class="misc-editor-header flex shrink-0 items-start justify-between gap-3">
     <div>
       <h2><%= @misc_editor.title %></h2>
       <p><%= @misc_editor.subtitle %></p>
     </div>
-    <div class="misc-editor-actions">
+    <div class="misc-editor-actions flex flex-wrap items-center justify-end gap-2">
       <%= if refreshable?(@misc_editor.kind) do %>
         <button class="secondary" type="button" phx-click="rerun_misc_editor" phx-target={@myself}><%= dgettext("ui", "Refresh") %></button>
       <% end %>
@@ -17,13 +17,13 @@
     </div>
   </div>
 
-  <div class="misc-editor-summary">
+  <div class="misc-editor-summary flex flex-wrap gap-2">
     <%= for {label, value} <- summary_items(@misc_editor) do %>
       <div class="misc-summary-pill"><span><%= label %></span><strong><%= value %></strong></div>
     <% end %>
   </div>
 
-  <div class="misc-editor-content">
+  <div class="misc-editor-content min-h-0 flex-1 overflow-auto">
     <%= case @misc_editor.kind do %>
       <% :documentation -> %>
         <div class="documentation-view">
diff --git a/lib/bds/desktop/shell_live/panel_renderer.ex b/lib/bds/desktop/shell_live/panel_renderer.ex
index d00d5f2..a137a5f 100644
--- a/lib/bds/desktop/shell_live/panel_renderer.ex
+++ b/lib/bds/desktop/shell_live/panel_renderer.ex
@@ -30,10 +30,10 @@ defmodule BDS.Desktop.ShellLive.PanelRenderer do
 
     ~H"""
     <%= if Enum.any?(@editor_toolbar_buttons) do %>
-      <div class="editor-toolbar">
+      <div class="editor-toolbar flex items-center gap-2">
         <%= for button <- @editor_toolbar_buttons do %>
           <button
-            class={["editor-toolbar-button", if(button.destructive, do: "is-destructive")]}
+            class={["editor-toolbar-button inline-flex items-center justify-center", if(button.destructive, do: "is-destructive")]}
             data-testid="editor-toolbar-overlay-button"
             type="button"
             phx-click="open_overlay"
@@ -55,10 +55,10 @@ defmodule BDS.Desktop.ShellLive.PanelRenderer do
         <span><%= dgettext("ui", "No background tasks running") %></span>
       </div>
     <% else %>
-      <div class="task-list">
+      <div class="task-list flex flex-col gap-2">
         <%= for task <- Map.get(@task_status, :tasks, []) do %>
-          <div class="panel-entry task-entry">
-            <div class="task-entry-header">
+          <div class="panel-entry task-entry flex flex-col gap-2">
+            <div class="task-entry-header flex items-center justify-between gap-2">
               <strong><%= task.name %></strong>
               <span class={"task-status task-status-#{task.status}"}><%= Map.get(task, :status_label, task.status |> to_string() |> String.capitalize()) %></span>
             </div>
@@ -84,7 +84,7 @@ defmodule BDS.Desktop.ShellLive.PanelRenderer do
         <span><%= dgettext("ui", "No shell output yet") %></span>
       </div>
     <% else %>
-      <div class="output-list">
+      <div class="output-list flex flex-col gap-2">
         <%= for entry <- @output_entries do %>
           <div class={[
             "panel-entry",
@@ -118,7 +118,7 @@ defmodule BDS.Desktop.ShellLive.PanelRenderer do
         <span><%= dgettext("ui", "No post links yet") %></span>
       </div>
     <% else %>
-      <div class="git-log-list">
+      <div class="git-log-list flex flex-col gap-2">
         <%= if Enum.any?(@backlinks) do %>
           <div class="panel-entry"><strong><%= dgettext("ui", "Backlinks") %></strong></div>
           <%= for entry <- @backlinks do %>
@@ -165,7 +165,7 @@ defmodule BDS.Desktop.ShellLive.PanelRenderer do
 
     ~H"""
     <%= if Enum.empty?(@git_entries) do %>
-      <div class="git-log-list">
+      <div class="git-log-list flex flex-col gap-2">
         <div class="panel-entry panel-empty-state">
           <strong><%= dgettext("ui", "Git Log") %></strong>
           <span><%= dgettext("ui", "No git history yet") %></span>
diff --git a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
index d07821c..0dc9e86 100644
--- a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
+++ b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex
@@ -1,15 +1,15 @@
-<div class="post-editor editor" data-testid="post-editor">
-  <div class="editor-header">
-    <div class="editor-tabs">
-      <div class={["editor-tab", "active", if(@post_editor.dirty?, do: "dirty")]}> 
-        <span class="editor-tab-title" data-testid="editor-title"><%= @post_editor.display_title %></span>
+<div class="post-editor editor flex h-full min-h-0 flex-col" data-testid="post-editor">
+  <div class="editor-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden">
+      <div class={["editor-tab active inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2", if(@post_editor.dirty?, do: "dirty")]}> 
+        <span class="editor-tab-title truncate" data-testid="editor-title"><%= @post_editor.display_title %></span>
         <%= if @post_editor.dirty? do %>
           <span class="editor-tab-dirty" title={dgettext("ui", "Unsaved")}>●</span>
         <% end %>
       </div>
     </div>
 
-    <div class="editor-actions">
+    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={["status-badge", "status-#{@post_editor.status}"]} data-testid="post-status-badge">
         <%= post_status_label(@post_editor.status) %>
       </span>
@@ -17,9 +17,9 @@
         <span class="auto-save-indicator"><%= post_editor_save_state_label(@post_editor.save_state) %></span>
       <% end %>
 
-      <div class="quick-actions-wrapper">
+      <div class="quick-actions-wrapper relative">
         <button
-          class="secondary quick-actions-btn"
+          class="secondary quick-actions-btn inline-flex items-center gap-2"
           type="button"
           phx-click="toggle_post_editor_quick_actions"
           phx-target={@myself}
@@ -29,9 +29,9 @@
         </button>
 
         <%= if @post_editor.quick_actions_open? do %>
-          <div class="quick-actions-menu">
+          <div class="quick-actions-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
             <button
-              class="quick-action-item"
+              class="quick-action-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
@@ -39,7 +39,7 @@
               disabled={not @post_editor.detect_language_enabled?}
             >
               <span class="quick-action-icon">🤖</span>
-              <span class="quick-action-text">
+              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                 <strong><%= dgettext("ui", "AI Suggestions") %></strong>
                 <small><%= dgettext("ui", "Review title, excerpt, and content suggestions") %></small>
               </span>
@@ -48,7 +48,7 @@
             <div class="quick-actions-divider"></div>
 
             <button
-              class="quick-action-item"
+              class="quick-action-item flex items-start gap-3 text-left"
               data-testid="editor-toolbar-overlay-button"
               type="button"
               phx-click="open_overlay"
@@ -56,7 +56,7 @@
               disabled={not @post_editor.can_translate?}
             >
               <span class="quick-action-icon">🌍</span>
-              <span class="quick-action-text">
+              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                 <strong><%= dgettext("ui", "Translate") %></strong>
                 <small><%= dgettext("ui", "Select a target language for this post") %></small>
               </span>
@@ -83,14 +83,14 @@
     </div>
   </div>
 
-  <form class="post-editor-form editor-content" data-testid="post-editor-form" phx-change="change_post_editor" phx-target={@myself}>
-    <div class="metadata-toggle-header">
+  <form class="post-editor-form editor-content flex min-h-0 flex-1 flex-col gap-4 overflow-auto" data-testid="post-editor-form" phx-change="change_post_editor" phx-target={@myself}>
+    <div class="metadata-toggle-header flex items-center justify-between gap-3">
       <button class={["metadata-toggle", if(@post_editor.metadata_expanded, do: "expanded")]} type="button" phx-click="toggle_post_metadata" phx-target={@myself}>
         <span class="metadata-toggle-chevron"><%= if @post_editor.metadata_expanded, do: "▼", else: "▶" %></span>
         <span><%= dgettext("ui", "Metadata") %></span>
       </button>
 
-      <div class="editor-translations-flags" aria-label={dgettext("ui", "Translations")}>
+      <div class="editor-translations-flags flex flex-wrap items-center gap-2" aria-label={dgettext("ui", "Translations")}>
         <%= for flag <- @post_editor.translation_flags do %>
           <button
             class={[
@@ -111,18 +111,18 @@
       </div>
     </div>
 
-    <div class={["editor-header-row", if(not @post_editor.metadata_expanded, do: "is-collapsed")]}> 
-        <div class="editor-meta">
-          <div class="editor-field">
+    <div class={["editor-header-row grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]", if(not @post_editor.metadata_expanded, do: "is-collapsed")]}> 
+        <div class="editor-meta flex min-w-0 flex-col gap-4">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Title") %></label>
             <input class="post-editor-input" type="text" name="post_editor[title]" value={@post_editor.form["title"]} />
           </div>
 
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Tags") %></label>
-            <div class="tag-input-container"> 
+            <div class="tag-input-container relative"> 
               <input type="hidden" name="post_editor[tags]" value={@post_editor.form["tags"]} />
-              <div class="tag-input-wrapper">
+              <div class="tag-input-wrapper flex flex-wrap items-center gap-2">
                 <%= for tag <- @post_editor.tag_chips do %>
                   <span class={["tag-chip", if(tag.color, do: "has-color")]} style={tag_chip_style(tag.color)}>
                     <span><%= tag.name %></span>
@@ -141,7 +141,7 @@
               </div>
 
               <%= if String.trim(@post_editor.tag_query || "") != "" and (Enum.any?(@post_editor.tag_suggestions) or @post_editor.tag_query_addable?) do %>
-                <div class="tag-suggestions">
+                <div class="tag-suggestions mt-2 flex flex-col">
                   <%= for tag <- @post_editor.tag_suggestions do %>
                     <button class="tag-suggestion" type="button" phx-click="add_post_editor_tag" phx-value-tag={tag.name} phx-target={@myself}>
                       <%= if tag.color do %>
@@ -162,14 +162,14 @@
             </div>
           </div>
 
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Author") %></label>
             <input class="post-editor-input" type="text" name="post_editor[author]" value={@post_editor.form["author"]} />
           </div>
 
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label><%= dgettext("ui", "Language") %></label>
-            <div class="editor-language-row">
+            <div class="editor-language-row flex items-center gap-2">
               <select class="post-editor-input" name="post_editor[language]">
                 <%= for language <- @post_editor.languages do %>
                   <option value={language} selected={language == @post_editor.form["language"]}><%= String.upcase(language) %></option>
@@ -189,7 +189,7 @@
             </div>
           </div>
 
-          <div class="editor-field">
+          <div class="editor-field flex flex-col gap-1.5">
             <label class="editor-checkbox-label">
               <input type="hidden" name="post_editor[do_not_translate]" value="false" />
               <input type="checkbox" name="post_editor[do_not_translate]" value="true" checked={@post_editor.form["do_not_translate"]} />
@@ -197,17 +197,17 @@
             </label>
           </div>
 
-          <div class="editor-field-row">
-            <div class="editor-field">
+          <div class="editor-field-row grid gap-4 md:grid-cols-2">
+            <div class="editor-field flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Slug") %></label>
               <input class="post-editor-input is-readonly" type="text" readonly value={@post_editor.slug} />
             </div>
 
-            <div class="editor-field">
+            <div class="editor-field flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Categories") %></label>
-              <div class="tag-input-container"> 
+              <div class="tag-input-container relative"> 
                 <input type="hidden" name="post_editor[categories]" value={@post_editor.form["categories"]} />
-                <div class="tag-input-wrapper">
+                <div class="tag-input-wrapper flex flex-wrap items-center gap-2">
                   <%= for category <- @post_editor.category_values do %>
                     <span class="tag-chip">
                       <span><%= category %></span>
@@ -226,7 +226,7 @@
                 </div>
 
                 <%= if String.trim(@post_editor.category_query || "") != "" and (Enum.any?(@post_editor.category_suggestions) or @post_editor.category_query_addable?) do %>
-                  <div class="tag-suggestions">
+                  <div class="tag-suggestions mt-2 flex flex-col">
                     <%= for category <- @post_editor.category_suggestions do %>
                       <button class="tag-suggestion" type="button" phx-click="add_post_editor_category" phx-value-category={category} phx-target={@myself}>
                         <span class="tag-suggestion-name"><%= category %></span>
@@ -246,7 +246,7 @@
           </div>
 
           <%= if @post_editor.show_template_selector? do %>
-            <div class="editor-field">
+            <div class="editor-field flex flex-col gap-1.5">
               <label><%= dgettext("ui", "Template") %></label>
               <select class="post-editor-input" name="post_editor[template_slug]">
                 <option value=""><%= dgettext("ui", "Default") %></option>
@@ -257,9 +257,9 @@
             </div>
           <% end %>
 
-          <div class="post-editor-links-panel">
+          <div class="post-editor-links-panel flex flex-col gap-3">
             <strong><%= dgettext("ui", "Post Links") %></strong>
-            <div class="post-editor-links-columns">
+            <div class="post-editor-links-columns grid gap-4 md:grid-cols-2">
               <div>
                 <span class="post-editor-links-label"><%= dgettext("ui", "Backlinks") %></span>
                 <%= if Enum.any?(@post_editor.post_links.backlinks) do %>
@@ -288,15 +288,15 @@
           </div>
         </div>
 
-        <aside class="editor-media-panel post-editor-side-panel">
+        <aside class="editor-media-panel post-editor-side-panel flex flex-col gap-3">
           <div class="post-editor-side-panel-header">
             <strong><%= dgettext("ui", "Linked Media") %></strong>
           </div>
 
           <%= if Enum.any?(@post_editor.linked_media) do %>
-            <ul class="post-editor-media-list">
+            <ul class="post-editor-media-list flex flex-col gap-2">
               <%= for item <- @post_editor.linked_media do %>
-                <li class="post-editor-media-item">
+                <li class="post-editor-media-item flex flex-col gap-1">
                   <span class="post-editor-media-title"><%= item.name %></span>
                   <span class="post-editor-media-meta"><%= dgettext("ui", "Order") %>: <%= item.sort_order %></span>
                 </li>
@@ -314,19 +314,19 @@
     </button>
 
     <div class={["editor-excerpt-panel", if(not @post_editor.excerpt_expanded, do: "is-collapsed")]}> 
-      <div class="editor-field">
+      <div class="editor-field flex flex-col gap-1.5">
         <label><%= dgettext("ui", "Excerpt") %></label>
         <textarea class="post-editor-textarea post-editor-excerpt" name="post_editor[excerpt]" rows="4"><%= @post_editor.form["excerpt"] %></textarea>
       </div>
     </div>
 
-    <div class="editor-body">
-      <div class="editor-toolbar">
-        <div class="editor-toolbar-left">
+    <div class="editor-body flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div class="editor-toolbar flex items-center gap-3">
+        <div class="editor-toolbar-left flex items-center gap-2">
           <label><%= dgettext("ui", "Content") %></label>
         </div>
 
-        <div class="editor-toolbar-center">
+        <div class="editor-toolbar-center flex flex-1 justify-center">
           <div class="editor-mode-toggle">
             <%= for mode <- [:markdown, :preview] do %>
               <button
@@ -342,7 +342,7 @@
           </div>
         </div>
 
-        <div class="editor-toolbar-right">
+        <div class="editor-toolbar-right flex items-center gap-2">
           <%= if @post_editor.mode == :markdown do %>
             <button
               class="insert-post-link-button"
@@ -379,7 +379,7 @@
       </div>
 
       <%= if @post_editor.mode == :preview do %>
-        <div class="editor-preview post-editor-preview" data-testid="post-editor-preview">
+        <div class="editor-preview post-editor-preview flex min-h-0 flex-1" data-testid="post-editor-preview">
           <%= if @post_editor.preview_url do %>
             <iframe class="editor-preview-frame" src={@post_editor.preview_url}></iframe>
           <% else %>
@@ -398,14 +398,14 @@
           data-monaco-word-wrap="on"
           data-monaco-insert-event="post-editor-insert-content"
         >
-          <div id={"post-editor-monaco-#{@post_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
+          <div id={"post-editor-monaco-#{@post_editor.id}"} class="monaco-editor-instance min-h-0 flex-1" phx-update="ignore"></div>
           <textarea id={"post-editor-content-#{@post_editor.id}"} class="monaco-editor-input post-editor-content" data-testid="post-editor-content" data-post-editor-id={@post_editor.id} name="post_editor[content]" rows="18" spellcheck="false"><%= @post_editor.form["content"] %></textarea>
         </div>
       <% end %>
     </div>
   </form>
 
-  <div class="editor-footer">
+  <div class="editor-footer flex shrink-0 flex-wrap gap-4">
     <span><strong><%= dgettext("ui", "Created") %>:</strong> <%= @post_editor.footer.created_at %></span>
     <span><strong><%= dgettext("ui", "Updated") %>:</strong> <%= @post_editor.footer.updated_at %></span>
     <%= if @post_editor.footer.published_at do %>
diff --git a/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex b/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
index caa1869..e33d1e1 100644
--- a/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
+++ b/lib/bds/desktop/shell_live/script_editor_html/script_editor.html.heex
@@ -1,7 +1,7 @@
-<div class="scripts-view-shell editor" data-testid="script-editor">
-  <div class="editor-header scripts-header">
-    <div class="editor-tabs"><div class="editor-tab active"><span class="editor-tab-title"><%= @script_editor.title %></span></div></div>
-    <div class="editor-actions">
+<div class="scripts-view-shell editor flex h-full min-h-0 flex-col" data-testid="script-editor">
+  <div class="editor-header scripts-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @script_editor.title %></span></div></div>
+    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={[
         "status-badge",
         "status-#{@script_editor.status}"
@@ -15,35 +15,35 @@
       <button class="secondary danger" type="button" phx-click="delete_script_editor" phx-target={@myself}><%= dgettext("ui", "Delete") %></button>
     </div>
   </div>
-  <form class="editor-content scripts-view" phx-change="change_script_editor" phx-target={@myself}>
-    <div class="editor-header-row scripts-meta-row">
-      <div class="editor-meta">
-        <div class="editor-field-row">
-          <div class="editor-field"><label><%= dgettext("ui", "Title") %></label><input type="text" name="script_editor[title]" value={@script_editor.title} /></div>
-          <div class="editor-field"><label><%= dgettext("ui", "Slug") %></label><input type="text" name="script_editor[slug]" value={@script_editor.slug} /></div>
+  <form class="editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden" phx-change="change_script_editor" phx-target={@myself}>
+    <div class="editor-header-row scripts-meta-row grid gap-4">
+      <div class="editor-meta flex min-w-0 flex-col gap-4">
+        <div class="editor-field-row grid gap-4 md:grid-cols-2">
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input type="text" name="script_editor[title]" value={@script_editor.title} /></div>
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input type="text" name="script_editor[slug]" value={@script_editor.slug} /></div>
         </div>
-        <div class="editor-field-row">
-          <div class="editor-field"><label><%= dgettext("ui", "Kind") %></label><select name="script_editor[kind]"><option value="utility" selected={@script_editor.kind == "utility"}>utility</option><option value="macro" selected={@script_editor.kind == "macro"}>macro</option><option value="transform" selected={@script_editor.kind == "transform"}>transform</option></select></div>
-          <div class="editor-field"><label><%= dgettext("ui", "Entrypoint") %></label><select name="script_editor[entrypoint]"><%= for entrypoint <- @script_editor.entrypoints do %><option value={entrypoint} selected={entrypoint == @script_editor.entrypoint}><%= entrypoint %></option><% end %></select></div>
-          <div class="editor-field scripts-enabled-field"><label><input type="checkbox" name="script_editor[enabled]" checked={@script_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
+        <div class="editor-field-row grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select name="script_editor[kind]"><option value="utility" selected={@script_editor.kind == "utility"}>utility</option><option value="macro" selected={@script_editor.kind == "macro"}>macro</option><option value="transform" selected={@script_editor.kind == "transform"}>transform</option></select></div>
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Entrypoint") %></label><select name="script_editor[entrypoint]"><%= for entrypoint <- @script_editor.entrypoints do %><option value={entrypoint} selected={entrypoint == @script_editor.entrypoint}><%= entrypoint %></option><% end %></select></div>
+          <div class="editor-field scripts-enabled-field flex flex-col justify-end gap-1.5"><label><input type="checkbox" name="script_editor[enabled]" checked={@script_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
         </div>
       </div>
     </div>
-    <div class="editor-body scripts-editor">
-      <div class="editor-toolbar scripts-toolbar"><div class="editor-toolbar-left"><label><%= dgettext("ui", "Content") %></label></div></div>
+    <div class="editor-body scripts-editor flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div class="editor-toolbar scripts-toolbar flex items-center gap-3"><div class="editor-toolbar-left flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
       <div
         id={"script-editor-monaco-shell-#{@script_editor.id}"}
-        class="scripts-monaco monaco-editor-shell"
+        class="scripts-monaco monaco-editor-shell min-h-0 flex-1 overflow-hidden"
         phx-hook="MonacoEditor"
         data-monaco-editor-id={@script_editor.id}
         data-monaco-input-id={"script-editor-content-#{@script_editor.id}"}
         data-monaco-language="lua"
         data-monaco-word-wrap="on"
       >
-        <div id={"script-editor-monaco-#{@script_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
+        <div id={"script-editor-monaco-#{@script_editor.id}"} class="monaco-editor-instance min-h-0 flex-1" phx-update="ignore"></div>
         <textarea id={"script-editor-content-#{@script_editor.id}"} class="monaco-editor-input code-editor-textarea" name="script_editor[content]" spellcheck="false"><%= @script_editor.content %></textarea>
       </div>
     </div>
-    <div class="editor-footer"><span class="text-muted text-small"><%= dgettext("ui", "Created") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.created_at) %></span><span class="text-muted text-small"><%= dgettext("ui", "Updated") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.updated_at) %></span></div>
+    <div class="editor-footer flex shrink-0 flex-wrap gap-4"><span class="text-muted text-small"><%= dgettext("ui", "Created") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.created_at) %></span><span class="text-muted text-small"><%= dgettext("ui", "Updated") %>: <%= BDS.Persistence.timestamp_to_iso8601(@script_editor.updated_at) %></span></div>
   </form>
 </div>
diff --git a/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex b/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
index 5049cbb..7fdcb4d 100644
--- a/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
+++ b/lib/bds/desktop/shell_live/settings_editor_html/settings_editor.html.heex
@@ -1,22 +1,22 @@
 <div
   id="settings-editor-shell"
-  class="settings-view-shell"
+  class="settings-view-shell flex h-full min-h-0 flex-col overflow-hidden"
   data-testid="settings-editor"
   phx-hook="SettingsSectionScroll"
   data-selected-settings-section={@settings_editor.selected_section}
   data-settings-scroll-target={"settings-section-#{@settings_editor.selected_section}"}
 >
-  <div class="settings-view">
-    <div class="settings-header">
+  <div class="settings-view flex min-h-0 flex-1 flex-col overflow-hidden">
+    <div class="settings-header flex shrink-0 items-center justify-between gap-3">
       <h2 data-testid="editor-title"><%= dgettext("ui", "Settings") %></h2>
-      <form class="settings-search" phx-change="change_settings_search" phx-target={@myself}>
+      <form class="settings-search w-full max-w-xs" phx-change="change_settings_search" phx-target={@myself}>
         <input type="text" name="query" value={@settings_editor.search_query} placeholder={dgettext("ui", "Search settings")} />
       </form>
     </div>
 
-    <div class="settings-content">
+    <div class="settings-content min-h-0 flex-1 overflow-auto">
       <%= if Enum.empty?(@settings_editor.active_sections) do %>
-        <div class="settings-no-results">
+        <div class="settings-no-results flex items-center justify-center py-6">
           <p><%= dgettext("ui", "No settings match the current search") %></p>
         </div>
       <% end %>
diff --git a/lib/bds/desktop/shell_live/sidebar_components.ex b/lib/bds/desktop/shell_live/sidebar_components.ex
index aa7e304..4e7c83e 100644
--- a/lib/bds/desktop/shell_live/sidebar_components.ex
+++ b/lib/bds/desktop/shell_live/sidebar_components.ex
@@ -56,25 +56,25 @@ defmodule BDS.Desktop.ShellLive.SidebarComponents do
 
     if is_map(filters) and Map.get(filters, :enabled) do
       ~H"""
-      <form class="search-box" data-testid="sidebar-search-form" phx-change="update_sidebar_search" phx-submit="update_sidebar_search">
+      <form class="search-box flex items-center gap-2" data-testid="sidebar-search-form" phx-change="update_sidebar_search" phx-submit="update_sidebar_search">
         <input
           type="text"
           name="sidebar_filters[search]"
           value={Map.get(@selected_filters, :search) || ""}
           placeholder={@sidebar_filters_config.search_placeholder}
         />
-        <button type="submit" title={dgettext("ui", "Search")}>
+        <button class="inline-flex h-8 w-8 items-center justify-center" type="submit" title={dgettext("ui", "Search")}>
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
             <path d="M15.7 14.3l-4.2-4.2c-.2-.2-.5-.3-.8-.3.9-1.1 1.5-2.5 1.5-4C12.2 2.6 9.6 0 6.4 0S.6 2.6.6 5.8s2.6 5.8 5.8 5.8c1.5 0 2.9-.5 4-1.4 0 .3.1.6.3.8l4.2 4.2c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4zm-9.3-4c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"/>
           </svg>
         </button>
         <%= if Map.get(@selected_filters, :search) do %>
-          <button class="clear-search" data-testid="sidebar-clear-search" type="button" phx-click="clear_sidebar_search">×</button>
+          <button class="clear-search inline-flex h-8 w-8 items-center justify-center" data-testid="sidebar-clear-search" type="button" phx-click="clear_sidebar_search">×</button>
         <% end %>
       </form>
 
       <%= if Map.get(@sidebar_filters_config, :has_active_filters) do %>
-        <div class="filter-status">
+        <div class="filter-status flex items-center justify-between gap-2">
           <span>
             <%= @sidebar_filters_config.results_label %>: <%= @sidebar_filters_config.loaded_count %>/<%= @sidebar_filters_config.total_count %>
           </span>
@@ -239,7 +239,7 @@ defmodule BDS.Desktop.ShellLive.SidebarComponents do
 
     if Map.get(filters, :has_more) do
       ~H"""
-      <div class="sidebar-load-more">
+      <div class="sidebar-load-more flex justify-center pt-2">
         <button class="load-more-button" data-testid="sidebar-load-more" type="button" phx-click="load_more_sidebar">
           <%= dgettext("ui", "Load more") %>
         </button>
@@ -270,9 +270,9 @@ defmodule BDS.Desktop.ShellLive.SidebarComponents do
           <span data-testid="sidebar-section-title"><%= section.title %></span>
           <span class="sidebar-section-count"><%= Map.get(section, :count, length(Map.get(section, :items, []))) %></span>
         </div>
-        <div class="sidebar-list">
+        <div class="sidebar-list flex flex-col">
           <%= for item <- Map.get(section, :items, []) do %>
-            <div class="sidebar-item-row" data-item-id={item.id}>
+            <div class="sidebar-item-row flex items-center gap-2" data-item-id={item.id}>
               <button
                 class={["sidebar-item", "sidebar-post-item", "post-type-post", if(sidebar_item_selected?(@workbench, item.route, item.id), do: "selected")]}
                 data-testid="sidebar-open-item"
diff --git a/lib/bds/desktop/shell_live/tags_editor_html/tags_editor.html.heex b/lib/bds/desktop/shell_live/tags_editor_html/tags_editor.html.heex
index a3009b8..4f150c1 100644
--- a/lib/bds/desktop/shell_live/tags_editor_html/tags_editor.html.heex
+++ b/lib/bds/desktop/shell_live/tags_editor_html/tags_editor.html.heex
@@ -1,27 +1,27 @@
 <div
   id="tags-editor-shell"
-  class="tags-view-shell"
+  class="tags-view-shell flex h-full min-h-0 flex-col overflow-hidden"
   data-testid="tags-editor"
   phx-hook="TagsSectionScroll"
   data-selected-tags-section={@tags_editor.selected_section}
   data-tags-scroll-target={"tags-section-#{@tags_editor.selected_section}"}
 >
-  <div class="tags-view">
-    <div class="tags-view-header">
+  <div class="tags-view flex min-h-0 flex-1 flex-col overflow-hidden">
+    <div class="tags-view-header flex shrink-0 items-center justify-between gap-3">
       <h2><%= dgettext("ui", "Tags") %></h2>
     </div>
 
-    <div class="tags-view-content">
+    <div class="tags-view-content flex min-h-0 flex-1 flex-col gap-4 overflow-auto">
       <div class="tags-section" id="tags-section-cloud">
         <div class="tags-section-header"><h3><%= dgettext("ui", "Tag Cloud") %></h3></div>
         <div class="tags-section-content">
           <%= if Enum.empty?(@tags_editor.tags) do %>
-            <div class="tags-empty-state">
+            <div class="tags-empty-state flex flex-col gap-3">
               <p><%= dgettext("ui", "No tags found") %></p>
               <button class="secondary" type="button" phx-click="sync_tags_editor" phx-target={@myself}><%= dgettext("ui", "Discover") %></button>
             </div>
           <% else %>
-            <div class="tag-cloud">
+            <div class="tag-cloud flex flex-wrap gap-2">
               <%= for tag <- @tags_editor.tags do %>
                 <button class={["tag-cloud-item", if(tag.name in @tags_editor.selected, do: "selected"), if(tag.color, do: "has-color")]} style={tag_style(tag, @tags_editor.tags)} type="button" phx-click="toggle_tag_selection" phx-value-name={tag.name} phx-target={@myself}>
                   <%= tag.name %><span class="tag-count"><%= tag.count %></span>
@@ -36,7 +36,7 @@
         <div class="tags-section-header"><h3><%= dgettext("ui", "Create / Edit") %></h3></div>
         <div class="tags-section-content">
           <form class="tag-create-form" phx-change="change_new_tag_editor" phx-target={@myself}>
-            <div class="tag-form-row">
+            <div class="tag-form-row flex flex-wrap items-center gap-3">
               <input type="text" name="new_tag[name]" value={@tags_editor.new_tag["name"]} placeholder={dgettext("ui", "Tag name")} />
               <input type="color" name="new_tag[color]" value={if(@tags_editor.new_tag["color"] in [nil, ""], do: "#3b82f6", else: @tags_editor.new_tag["color"])} />
               <button class="primary" type="button" phx-click="create_tag_editor" phx-target={@myself}><%= dgettext("ui", "Create") %></button>
@@ -45,7 +45,7 @@
 
           <%= if @tags_editor.edit_draft != %{} do %>
             <form class="tag-edit-form" phx-change="change_edit_tag_editor" phx-target={@myself}>
-              <div class="tag-form-row">
+              <div class="tag-form-row flex flex-wrap items-center gap-3">
                 <input type="text" name="edit_tag[name]" value={@tags_editor.edit_draft["name"]} />
                 <input type="color" name="edit_tag[color]" value={if(@tags_editor.edit_draft["color"] in [nil, ""], do: "#3b82f6", else: @tags_editor.edit_draft["color"])} />
                 <select name="edit_tag[post_template_slug]">
@@ -65,8 +65,8 @@
       <div class="tags-section" id="tags-section-merge">
         <div class="tags-section-header"><h3><%= dgettext("ui", "Merge Tags") %></h3></div>
         <div class="tags-section-content">
-          <div class="merge-form">
-            <div class="tag-form-row">
+          <div class="merge-form flex flex-col gap-3">
+            <div class="tag-form-row flex flex-wrap items-center gap-3">
               <select phx-change="change_merge_target" name="target" phx-target={@myself}>
                 <%= for tag_name <- @tags_editor.selected do %>
                   <option value={tag_name} selected={tag_name == @tags_editor.merge_target}><%= tag_name %></option>
diff --git a/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex b/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
index 5864085..872b00d 100644
--- a/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
+++ b/lib/bds/desktop/shell_live/template_editor_html/template_editor.html.heex
@@ -1,7 +1,7 @@
-<div class="templates-view-shell editor" data-testid="template-editor">
-  <div class="editor-header templates-header">
-    <div class="editor-tabs"><div class="editor-tab active"><span class="editor-tab-title"><%= @template_editor.title %></span></div></div>
-    <div class="editor-actions">
+<div class="templates-view-shell editor flex h-full min-h-0 flex-col" data-testid="template-editor">
+  <div class="editor-header templates-header flex shrink-0 items-start justify-between gap-3">
+    <div class="editor-tabs flex min-w-0 flex-1 overflow-hidden"><div class="editor-tab active inline-flex max-w-full items-center overflow-hidden px-3 py-2"><span class="editor-tab-title truncate"><%= @template_editor.title %></span></div></div>
+    <div class="editor-actions flex flex-wrap items-center justify-end gap-2">
       <span class={[
         "status-badge",
         "status-#{@template_editor.status}"
@@ -14,34 +14,34 @@
       <button class="secondary danger" type="button" phx-click="delete_template_editor" phx-target={@myself}><%= dgettext("ui", "Delete") %></button>
     </div>
   </div>
-  <form class="editor-content templates-view" phx-change="change_template_editor" phx-target={@myself}>
-    <div class="editor-header-row templates-meta-row">
-      <div class="editor-meta">
-        <div class="editor-field-row">
-          <div class="editor-field"><label><%= dgettext("ui", "Title") %></label><input type="text" name="template_editor[title]" value={@template_editor.title} /></div>
-          <div class="editor-field"><label><%= dgettext("ui", "Slug") %></label><input type="text" name="template_editor[slug]" value={@template_editor.slug} /></div>
+  <form class="editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden" phx-change="change_template_editor" phx-target={@myself}>
+    <div class="editor-header-row templates-meta-row grid gap-4">
+      <div class="editor-meta flex min-w-0 flex-col gap-4">
+        <div class="editor-field-row grid gap-4 md:grid-cols-2">
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Title") %></label><input type="text" name="template_editor[title]" value={@template_editor.title} /></div>
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Slug") %></label><input type="text" name="template_editor[slug]" value={@template_editor.slug} /></div>
         </div>
-        <div class="editor-field-row">
-          <div class="editor-field"><label><%= dgettext("ui", "Kind") %></label><select name="template_editor[kind]"><option value="post" selected={@template_editor.kind == :post or @template_editor.kind == "post"}>post</option><option value="list" selected={@template_editor.kind == :list or @template_editor.kind == "list"}>list</option><option value="not-found" selected={@template_editor.kind == :"not-found" or @template_editor.kind == "not-found"}>not-found</option><option value="partial" selected={@template_editor.kind == :partial or @template_editor.kind == "partial"}>partial</option></select></div>
-          <div class="editor-field templates-enabled-field"><label><input type="checkbox" name="template_editor[enabled]" checked={@template_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
+        <div class="editor-field-row grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
+          <div class="editor-field flex flex-col gap-1.5"><label><%= dgettext("ui", "Kind") %></label><select name="template_editor[kind]"><option value="post" selected={@template_editor.kind == :post or @template_editor.kind == "post"}>post</option><option value="list" selected={@template_editor.kind == :list or @template_editor.kind == "list"}>list</option><option value="not-found" selected={@template_editor.kind == :"not-found" or @template_editor.kind == "not-found"}>not-found</option><option value="partial" selected={@template_editor.kind == :partial or @template_editor.kind == "partial"}>partial</option></select></div>
+          <div class="editor-field templates-enabled-field flex flex-col justify-end gap-1.5"><label><input type="checkbox" name="template_editor[enabled]" checked={@template_editor.enabled} /> <%= dgettext("ui", "Enabled") %></label></div>
         </div>
       </div>
     </div>
-    <div class="editor-body templates-editor">
-      <div class="editor-toolbar templates-toolbar"><div class="editor-toolbar-left"><label><%= dgettext("ui", "Content") %></label></div></div>
+    <div class="editor-body templates-editor flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div class="editor-toolbar templates-toolbar flex items-center gap-3"><div class="editor-toolbar-left flex items-center gap-2"><label><%= dgettext("ui", "Content") %></label></div></div>
       <div
         id={"template-editor-monaco-shell-#{@template_editor.id}"}
-        class="templates-monaco monaco-editor-shell"
+        class="templates-monaco monaco-editor-shell min-h-0 flex-1 overflow-hidden"
         phx-hook="MonacoEditor"
         data-monaco-editor-id={@template_editor.id}
         data-monaco-input-id={"template-editor-content-#{@template_editor.id}"}
         data-monaco-language="liquid"
         data-monaco-word-wrap="on"
       >
-        <div id={"template-editor-monaco-#{@template_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
+        <div id={"template-editor-monaco-#{@template_editor.id}"} class="monaco-editor-instance min-h-0 flex-1" phx-update="ignore"></div>
         <textarea id={"template-editor-content-#{@template_editor.id}"} class="monaco-editor-input code-editor-textarea" name="template_editor[content]" spellcheck="false"><%= @template_editor.content %></textarea>
       </div>
     </div>
-    <div class="editor-footer"><span class="text-muted text-small"><%= dgettext("ui", "Created") %>: <%= BDS.Persistence.timestamp_to_iso8601(@template_editor.created_at) %></span><span class="text-muted text-small"><%= dgettext("ui", "Updated") %>: <%= BDS.Persistence.timestamp_to_iso8601(@template_editor.updated_at) %></span></div>
+    <div class="editor-footer flex shrink-0 flex-wrap gap-4"><span class="text-muted text-small"><%= dgettext("ui", "Created") %>: <%= BDS.Persistence.timestamp_to_iso8601(@template_editor.created_at) %></span><span class="text-muted text-small"><%= dgettext("ui", "Updated") %>: <%= BDS.Persistence.timestamp_to_iso8601(@template_editor.updated_at) %></span></div>
   </form>
 </div>
diff --git a/priv/static/assets/app.css b/priv/static/assets/app.css
index 636c191..d31f3cd 100644
--- a/priv/static/assets/app.css
+++ b/priv/static/assets/app.css
@@ -1,2 +1,5325 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.block{display:block}.hidden{display:none}.inline{display:inline}.table{display:table}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}:root{--accent-color:#007acc;--accent-color-transparent:#007acc40;--vscode-editor-background:#1e1e1e;--vscode-editor-foreground:#ccc;--vscode-sideBar-background:#252526;--vscode-activityBar-background:#333;--vscode-activityBar-foreground:#fff;--vscode-panel-background:#1e1e1e;--vscode-titleBar-activeBackground:#252526;--vscode-titleBar-activeForeground:#ccc;--vscode-statusBar-background:#007acc;--vscode-statusBar-foreground:#fff;--vscode-tab-activeBackground:#1e1e1e;--vscode-tab-inactiveBackground:#2d2d2d;--vscode-tab-activeForeground:#fff;--vscode-tab-inactiveForeground:#969696;--vscode-editorGroupHeader-tabsBackground:#252526;--vscode-editorGroupHeader-tabsBorder:#1e1e1e;--vscode-toolbar-hoverBackground:#5a5d5e4f;--vscode-toolbar-activeBackground:#6366674f;--vscode-foreground:#ccc;--vscode-descriptionForeground:#858585;--vscode-panel-border:#80808059;--vscode-sideBar-border:#80808059;--vscode-tab-border:#252526;--vscode-focusBorder:#007fd4;--vscode-input-background:#ffffff0f;--vscode-input-border:#ffffff1f;--vscode-list-hoverBackground:#2a2d2e;--vscode-list-activeSelectionBackground:#094771;--vscode-list-activeSelectionForeground:#fff;--vscode-activityBarBadge-background:#007acc;--vscode-activityBarBadge-foreground:#fff;--vscode-testing-iconPassed:#73c991;--vscode-editorWarning-foreground:#cca700;--vscode-input-foreground:#ccc;--vscode-input-placeholderForeground:#a6a6a6;--vscode-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--vscode-font-size:13px;--panel-1:var(--vscode-editor-background);--panel-2:var(--vscode-sideBar-background);--panel-3:var(--vscode-input-background);--ink:var(--vscode-foreground);--line:var(--vscode-panel-border);--accent:var(--vscode-focusBorder);--accent-soft:var(--vscode-list-hoverBackground);--success:var(--vscode-testing-iconPassed);--sidebar-width:280px;--assistant-width:360px;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--vscode-editor-background);width:100%;height:100%;color:var(--vscode-foreground);margin:0}body{-webkit-user-select:none;user-select:none;font-family:var(--vscode-font-family);font-size:var(--vscode-font-size);overflow:hidden}body>[data-phx-session],body>[data-phx-main]{width:100%;height:100%;min-height:0}button{font-family:var(--vscode-font-family);font-size:var(--vscode-font-size);color:var(--vscode-button-foreground);background-color:var(--vscode-button-background);cursor:pointer;border:none;border-radius:2px;padding:6px 14px}button:hover{background-color:var(--vscode-button-hoverBackground)}button:focus{outline:1px solid var(--vscode-focusBorder);outline-offset:2px}button.secondary{background-color:var(--vscode-button-secondaryBackground)}button.secondary:hover{background-color:#4a4d51}button.compact{padding:4px 8px;font-size:12px}button.primary{background-color:var(--vscode-button-background);font-weight:500}button.primary:hover{background-color:var(--vscode-button-hoverBackground)}button.success{background-color:#28a745}button.success:hover{background-color:#218838}button.danger{background-color:#dc3545}button.danger:hover{background-color:#c82333}button:disabled{opacity:.5;cursor:not-allowed}button svg,button svg *{pointer-events:none}.app{background-color:var(--vscode-editor-background);flex-direction:column;width:100%;height:100%;display:flex}.app-main{flex:1;min-height:0;display:flex;overflow:hidden}.app-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.window-titlebar{background-color:var(--vscode-editorGroupHeader-tabsBackground);border-bottom:1px solid var(--vscode-editorGroupHeader-tabsBorder);app-region:drag;-webkit-app-region:drag;height:34px;padding-right:calc(10px + var(--bds-titlebar-overlay-right,0px));flex-shrink:0;justify-content:space-between;align-items:center;display:flex;position:relative}.window-titlebar-menu-bar{app-region:no-drag;-webkit-app-region:no-drag;z-index:2;align-items:center;gap:2px;height:100%;margin-left:6px;display:flex}.window-titlebar-menu-group{align-items:center;height:100%;display:flex;position:relative}.window-titlebar-menu-bar.is-hidden{display:none}.window-titlebar.is-mac .window-titlebar-menu-bar{margin-left:max(var(--bds-titlebar-macos-left-inset,78px),calc(6px + var(--bds-titlebar-overlay-left,0px)))}.window-titlebar-menu-button{height:24px;color:var(--vscode-titleBar-activeForeground);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:0 8px;font-size:12px;line-height:1}.window-titlebar-menu-button:hover,.window-titlebar-action-button:hover,.window-titlebar-menu-button.is-active{background-color:var(--vscode-toolbar-hoverBackground)}.window-titlebar-menu-button:focus,.window-titlebar-menu-button:focus-visible,.window-titlebar-action-button:focus,.window-titlebar-action-button:focus-visible{box-shadow:none;outline:none}.window-titlebar-menu-dropdown{background-color:var(--vscode-menu-background,var(--vscode-editorWidget-background));border:1px solid var(--vscode-menu-border,var(--vscode-panel-border));min-width:210px;box-shadow:var(--vscode-widget-shadow,0 8px 24px #0006);app-region:no-drag;-webkit-app-region:no-drag;z-index:10;border-radius:6px;flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;top:30px;left:0}.window-titlebar-menu-item{color:var(--vscode-menu-foreground,var(--vscode-foreground));text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:space-between;align-items:center;gap:16px;padding:6px 8px;font-size:12px;display:flex}.window-titlebar-menu-item:focus,.window-titlebar-menu-item:focus-visible{box-shadow:none;background-color:var(--vscode-toolbar-hoverBackground);outline:none}.window-titlebar-menu-item:hover,.window-titlebar-menu-item.is-keyboard-active{background-color:var(--vscode-menu-selectionBackground,var(--vscode-toolbar-hoverBackground))}.window-titlebar-menu-item-accelerator{opacity:.8}.window-titlebar-menu-separator{background-color:var(--vscode-menu-separatorBackground,#ffffff14);height:1px;margin:4px 2px}.window-titlebar-drag-region{flex:1;height:100%}.window-titlebar-title{max-width:45%;height:100%;color:var(--vscode-titleBar-activeForeground);white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;align-items:center;font-size:12px;font-weight:500;display:flex;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.window-titlebar-actions{app-region:no-drag;-webkit-app-region:no-drag;align-items:center;height:100%;margin-right:6px;display:flex}.window-titlebar-action-button{width:30px;height:30px;color:var(--vscode-foreground);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;line-height:0;display:flex}.window-titlebar-sidebar-icon,.window-titlebar-panel-icon,.window-titlebar-assistant-icon{border:1.5px solid;border-radius:2px;width:14px;height:14px;display:block;position:relative;overflow:hidden}.window-titlebar-sidebar-icon:before{content:"";background-color:currentColor;width:1.5px;position:absolute;top:0;bottom:0;left:33.3333%;transform:translate(-50%)}.window-titlebar-panel-icon:before{content:"";background-color:currentColor;height:1.5px;position:absolute;top:66.6667%;left:0;right:0;transform:translateY(-50%)}.window-titlebar-assistant-icon:before{content:"";background-color:currentColor;width:1.5px;position:absolute;top:0;bottom:0;left:66.6667%;transform:translate(-50%)}.window-titlebar-sidebar-pane,.window-titlebar-panel-pane,.window-titlebar-assistant-pane{background-color:currentColor;transition:opacity .12s;position:absolute}.window-titlebar-sidebar-pane{width:33.3333%;height:100%;top:0;left:0}.window-titlebar-panel-pane{width:100%;height:33.3333%;bottom:0;left:0}.window-titlebar-assistant-pane{width:33.3333%;height:100%;top:0;right:0}.window-titlebar-sidebar-icon.is-inactive .window-titlebar-sidebar-pane,.window-titlebar-panel-icon.is-inactive .window-titlebar-panel-pane,.window-titlebar-assistant-icon.is-inactive .window-titlebar-assistant-pane{opacity:0}.panel-shell{border-top:1px solid var(--vscode-panel-border);background:var(--vscode-panel-background);flex-direction:column;height:200px;display:flex}.editor-toolbar-button.is-destructive{color:#f48771}.shell-overlay-backdrop,.gallery-overlay-backdrop{pointer-events:auto;z-index:10000;background:#000000ad;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shell-overlay-dismiss{background:0 0;border:none;padding:0;position:absolute;inset:0}.gallery-overlay{z-index:1;background:#1e1e1e;border:1px solid #3c3c3c;border-radius:8px;flex-direction:column;width:min(980px,100vw - 48px);max-height:calc(100vh - 48px);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.insert-modal-media-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:16px;display:grid}.insert-modal-media-item{color:inherit;text-align:left;background:#252526;border:1px solid #3c3c3c;border-radius:8px;flex-direction:column;gap:8px;padding:10px;display:flex}.insert-modal-media-thumb{object-fit:cover;background:#ffffff0a;border-radius:6px;width:100%;min-height:112px}.insert-modal-media-title{color:#fff;font-weight:600}.language-picker-options{flex-direction:column;gap:8px;display:flex}.language-picker-option{width:100%;color:inherit;text-align:left;background:0 0;border:none;border-radius:4px;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;padding:12px 16px;display:grid}.language-picker-label,.language-picker-status,.lightbox-counter{color:#9d9d9d;font-size:12px}.lightbox-counter{margin-top:4px}@media (max-width:720px){.insert-modal-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.panel-header{background-color:var(--vscode-sideBar-background);border-bottom:1px solid var(--vscode-panel-border);justify-content:space-between;align-items:center;height:35px;padding:0 8px;display:flex}.panel-tabs{align-items:stretch;height:100%;display:flex}.panel-tab{color:var(--vscode-descriptionForeground);cursor:pointer;background:0 0;border:none;padding:0 12px}.panel-tab.active{color:var(--vscode-tab-activeForeground)}.panel-close{color:var(--vscode-descriptionForeground);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:18px;display:flex}.panel-close:hover{background-color:var(--vscode-list-hoverBackground);color:var(--vscode-editor-foreground)}.panel-content{flex:1;padding:12px 14px;overflow:auto}.panel-entry,.assistant-card{border-bottom:1px solid var(--vscode-panel-border);flex-direction:column;gap:4px;padding:10px 12px;display:flex}.output-list,.git-log-list,.task-list{flex-direction:column;display:flex}.task-entry-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.task-status{text-transform:uppercase;letter-spacing:.04em;color:var(--vscode-descriptionForeground);font-size:11px}.task-status-running{color:var(--vscode-terminal-ansiGreen,var(--vscode-statusBar-foreground))}.task-status-pending{color:var(--vscode-terminal-ansiYellow,var(--vscode-statusBar-foreground))}.panel-empty-state{justify-content:center;min-height:100%}.status-bar{background:var(--vscode-statusBar-background);height:22px;color:var(--vscode-statusBar-foreground);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 8px;font-size:12px;display:flex}.status-bar-left,.status-bar-right{flex-shrink:0;align-items:center;gap:4px;display:flex}.status-bar-left{flex-shrink:1;min-width:0}.status-shell-controls{flex-shrink:0;align-items:stretch;gap:2px;display:flex}.status-shell-toggle-button{width:22px;height:100%;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;padding:0;line-height:0;display:flex}.status-shell-toggle-button:hover{background-color:#ffffff1a}.status-shell-toggle-button:focus,.status-shell-toggle-button:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #ffffff73}.status-shell-toggle-button .window-titlebar-sidebar-icon,.status-shell-toggle-button .window-titlebar-panel-icon,.status-shell-toggle-button .window-titlebar-assistant-icon{width:12px;height:12px}.status-bar-item{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;height:100%;padding:0 8px;display:flex;overflow:hidden}.status-bar-item:hover{background-color:#ffffff1a}.status-bar-task-button{color:inherit;cursor:pointer;background:0 0;border:none}.status-bar-item.theme-badge{border:1px solid #ffffff2e;border-radius:3px}.status-bar-item.language-badge{border:1px solid #ffffff2e;border-radius:3px;gap:4px}.status-bar-item.offline-badge{color:inherit;cursor:pointer;opacity:.4;background:0 0;border:none;padding:0 4px;font-size:13px}.status-bar-item.offline-badge.active{opacity:1;background-color:#ffc40047}.project-selector{flex-shrink:0;position:relative}.project-selector-trigger{height:22px;color:var(--vscode-statusBar-foreground);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:6px;padding:0 8px;font-size:12px;display:flex}.project-selector-trigger:hover{background-color:#ffffff1a}.project-selector-trigger:focus{outline:none}.project-icon,.dropdown-arrow,.project-check-icon{flex-shrink:0}.project-name,.project-item-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.project-name{max-width:180px}.dropdown-arrow{opacity:.6}.project-dropdown{z-index:1000;background-color:#252526;border:1px solid #ffffff29;border-radius:4px;min-width:220px;margin-bottom:4px;position:absolute;bottom:100%;left:0;overflow:hidden;box-shadow:0 -4px 12px #0000004d}.project-dropdown-header{text-transform:uppercase;letter-spacing:.5px;color:var(--vscode-descriptionForeground);border-bottom:1px solid #ffffff1f;padding:8px 12px;font-size:11px;font-weight:600}.project-list{max-height:200px;overflow-y:auto}.project-item{width:100%;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;display:flex}.project-item:hover,.project-item.active{background-color:var(--vscode-list-hoverBackground)}.project-item.active .project-check-icon{color:#89d185}.project-dropdown-footer{border-top:1px solid #ffffff1f;gap:6px;padding:8px;display:grid}.create-project-btn,.existing-project-btn{width:100%;color:inherit;cursor:pointer;background-color:#ffffff1f;border:none;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:12px;display:flex}.create-project-btn:hover,.existing-project-btn:hover{background-color:#ffffff2e}.status-bar-language-select{color:inherit;font:inherit;background:0 0;border:none;padding:0}.status-bar-language-select:focus{outline:none}.status-bar-count{opacity:.85;font-size:11px}.status-bar-item.brand{font-weight:600}@media (max-width:960px){.editor-frame{grid-template-columns:minmax(0,1fr)}.editor-meta{border-left:none;border-top:1px solid var(--vscode-panel-border);padding-top:10px;padding-left:0}}.editor-section ul{margin:12px 0 0;padding-left:18px}.editor-toolbar{gap:10px;display:flex}.editor-toolbar button{border:1px solid var(--line);background:var(--panel-3);color:var(--ink);border-radius:999px;padding:9px 14px}.editor-meta{flex-direction:column;gap:12px;display:flex}.editor-meta-card,.assistant-card,.panel-entry{padding:16px}.sidebar-header,.assistant-header,.panel-header{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:16px 18px;display:flex}.activity-bar{background-color:var(--vscode-activityBar-background);border-right:1px solid var(--vscode-panel-border);flex-direction:column;justify-content:space-between;width:48px;height:100%;display:flex}.activity-bar-top,.activity-bar-bottom{flex-direction:column;align-items:center;padding:4px 0;display:flex}.activity-bar-item{width:48px;height:48px;color:var(--vscode-activityBar-foreground);opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.activity-bar-item:hover{opacity:1;background:0 0}.activity-bar-item.active{opacity:1}.activity-bar-item.active:before{content:"";background-color:var(--vscode-activityBar-foreground);width:2px;position:absolute;top:0;bottom:0;left:0}.activity-bar-badge{background-color:var(--vscode-activityBarBadge-background);min-width:16px;height:16px;color:var(--vscode-activityBarBadge-foreground);border-radius:8px;justify-content:center;align-items:center;padding:0 4px;font-size:10px;font-weight:600;display:flex;position:absolute;top:8px;right:8px}.activity-bar-item svg,.tab-icon svg{display:block}.sidebar-shell,.assistant-sidebar-shell{min-width:0;display:flex}.sidebar-shell{width:var(--sidebar-width)}.assistant-sidebar-shell{width:var(--assistant-width)}.sidebar,.assistant-sidebar{background:var(--vscode-sideBar-background);flex-direction:column;width:100%;min-width:0;height:100%;display:flex}.sidebar{border-right:1px solid var(--vscode-sideBar-border)}.assistant-sidebar{border-left:1px solid var(--vscode-sideBar-border)}.sidebar-shell.is-hidden,.assistant-sidebar-shell.is-hidden{width:0;overflow:hidden}.sidebar-shell.is-hidden .resizable-panel-divider,.assistant-sidebar-shell.is-hidden .resizable-panel-divider{display:none}.resizable-panel-divider{cursor:col-resize;background:0 0;width:4px;position:relative}.resizable-panel-divider:hover:after{background-color:var(--vscode-focusBorder)}.resizable-panel-divider:after{content:"";background-color:var(--vscode-panel-border);width:1px;position:absolute;top:0;bottom:0;left:1px}.assistant-header{border-bottom:1px solid var(--vscode-panel-border);flex-direction:column;gap:2px;padding:10px 12px;display:flex}.assistant-card span,.panel-entry span,.editor-meta-row span,.editor-subtitle,.sidebar-item span{color:var(--vscode-descriptionForeground)}.sidebar-content,.assistant-content{flex:1;padding:8px 0;overflow:auto}.sidebar-section{padding-bottom:10px}.sidebar-section-header{text-transform:uppercase;letter-spacing:.04em;color:var(--vscode-descriptionForeground);padding:0 12px 6px;font-size:11px}.sidebar-item{cursor:pointer;background:var(--vscode-sideBar-background);width:100%;color:var(--vscode-foreground);border:none;border-radius:4px;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 12px;display:flex}.sidebar-item:hover{background:var(--vscode-list-hoverBackground)}.sidebar-item.selected{outline:1px solid var(--vscode-focusBorder);background:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.sidebar-badge{color:var(--vscode-testing-iconPassed);background:#6ecb8b29;border-radius:10px;margin-top:2px;padding:1px 6px}.sidebar-content{padding:0;overflow:hidden auto}.sidebar-section{margin-bottom:4px;padding-bottom:0}.sidebar-section-header{text-transform:uppercase;letter-spacing:.5px;color:var(--vscode-sideBar-foreground);justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;font-weight:600;display:flex}.sidebar-section-title{color:var(--vscode-descriptionForeground);align-items:center;gap:6px;padding:4px 12px;font-size:12px;display:flex}.section-icon{font-size:8px}.section-icon.status-draft{color:var(--vscode-editorWarning-foreground)}.section-icon.status-published{color:var(--vscode-testing-iconPassed)}.section-icon.status-archived{color:var(--vscode-descriptionForeground)}.sidebar-list{flex-direction:column;display:flex}.sidebar-item-row{align-items:stretch;display:flex}.sidebar-item{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;border-radius:0;align-items:flex-start;gap:8px;padding:6px 12px;display:flex}.sidebar-item:hover{background-color:var(--vscode-list-hoverBackground)}.sidebar-item.selected{background-color:var(--vscode-list-activeSelectionBackground);border-left-color:var(--vscode-focusBorder);color:var(--vscode-list-activeSelectionForeground)}.sidebar-post-item{flex-direction:row}.sidebar-item.post-type-picture{background:linear-gradient(90deg,#8b5cf60d 0%,#0000 100%)}.sidebar-item.post-type-aside{background:linear-gradient(90deg,#f59e0b0d 0%,#0000 100%)}.sidebar-item.post-type-quote{background:linear-gradient(90deg,#22c55e0d 0%,#0000 100%)}.sidebar-item.post-type-link{background:linear-gradient(90deg,#3b82f60d 0%,#0000 100%)}.sidebar-item.post-type-video{background:linear-gradient(90deg,#ef44440d 0%,#0000 100%)}.post-type-icon{opacity:.85;flex-shrink:0;font-size:14px;line-height:1.4}.sidebar-item-content{flex-direction:column;flex:1;min-width:0;display:flex}.sidebar-item-title-row{align-items:center;gap:6px;display:flex}.sidebar-item-title{color:var(--vscode-sideBar-foreground);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.sidebar-item-language-badge{background:var(--vscode-badge-background);border-radius:999px;flex-shrink:0;min-width:18px;padding:1px 5px}@supports (color:color-mix(in lab, red, red)){.sidebar-item-language-badge{background:color-mix(in srgb,var(--vscode-badge-background)82%,transparent)}}.sidebar-item-language-badge{color:var(--vscode-badge-foreground);text-align:center;font-size:10px;font-weight:700}.sidebar-item-meta{color:var(--vscode-descriptionForeground);margin-top:2px;font-size:11px}.media-grid{grid-template-columns:1fr;gap:2px;padding:4px;display:grid}.media-item-row{align-items:stretch;gap:4px;display:flex}.media-item{width:100%;color:inherit;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:6px 8px;display:flex}.media-item:hover{background-color:var(--vscode-list-hoverBackground)}.media-item.selected{background-color:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.media-thumbnail{background-color:var(--vscode-input-background);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;overflow:hidden}.media-thumbnail.has-image{position:relative}.media-thumbnail-fallback{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.media-thumbnail-image{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .15s;position:absolute;inset:0}.media-thumbnail.is-loaded .media-thumbnail-image{opacity:1}.media-thumbnail.is-loaded .media-thumbnail-fallback{opacity:0}.media-item-info{flex:1;min-width:0}.media-item-name{color:var(--vscode-sideBar-foreground);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.sidebar-item-row .sidebar-item,.media-item-row .media-item{flex:1;min-width:0}.sidebar-actions{gap:4px;display:flex}.sidebar-action{color:var(--vscode-sideBar-foreground);cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;padding:2px;display:flex}.sidebar-action:hover{opacity:1;background-color:var(--vscode-list-hoverBackground)}.sidebar-action.active{background-color:var(--vscode-list-activeSelectionBackground);opacity:1}.search-box{align-items:center;gap:4px;padding:4px 12px 8px;display:flex;position:relative}.search-box input{background-color:var(--vscode-input-background);border:1px solid var(--vscode-input-border);min-width:0;color:var(--vscode-input-foreground);border-radius:3px;flex:1;padding:6px 28px 6px 8px;font-size:12px}.search-box input::placeholder{color:var(--vscode-input-placeholderForeground)}.search-box input:focus{border-color:var(--vscode-focusBorder);outline:none}.search-box button[type=submit]{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:.7;background:0 0;border:none;padding:4px;position:absolute;right:40px}.search-box button[type=submit]:hover{opacity:1}.search-box .clear-search{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:.7;background:0 0;border:none;padding:4px;font-size:10px;position:absolute;right:16px}.search-box .clear-search:hover{opacity:1}.calendar-view{border-bottom:1px solid var(--vscode-sideBar-border);padding:8px 12px}.calendar-header{text-transform:uppercase;letter-spacing:.5px;color:var(--vscode-descriptionForeground);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;font-weight:600;display:flex}.calendar-header.collapsible-header{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:3px;margin:0 -6px 8px;padding:4px 6px}.calendar-header.collapsible-header:hover{background-color:var(--vscode-list-hoverBackground)}.calendar-header.collapsible-header.collapsed{margin-bottom:0}.calendar-header .collapse-icon{opacity:.7;margin-right:4px;font-size:9px}.calendar-header .clear-filter{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:.7;background:0 0;border:none;padding:2px 4px;font-size:10px}.calendar-header .clear-filter:hover{opacity:1}.calendar-years{flex-direction:column;gap:2px;display:flex}.calendar-year-header{cursor:pointer;color:var(--vscode-sideBar-foreground);text-align:left;background:0 0;border-radius:3px;align-items:center;gap:6px;padding:4px 6px;font-size:12px;display:flex}.calendar-year-header:hover{background-color:var(--vscode-list-hoverBackground)}.calendar-year-header.selected{background-color:var(--vscode-list-activeSelectionBackground)}.calendar-year-header .expand-icon{color:var(--vscode-descriptionForeground);width:10px;font-size:8px}.calendar-year-header .year-label{flex:1}.calendar-year-header .year-count{color:var(--vscode-descriptionForeground);background-color:var(--vscode-badge-background);border-radius:8px;padding:1px 6px;font-size:10px}.calendar-months{flex-direction:column;gap:1px;margin-top:2px;padding-left:16px;display:flex}.calendar-month{cursor:pointer;color:var(--vscode-sideBar-foreground);text-align:left;background:0 0;border-radius:3px;justify-content:space-between;align-items:center;padding:3px 6px;font-size:12px;display:flex}.calendar-month:hover{background-color:var(--vscode-list-hoverBackground)}.calendar-month.selected{background-color:var(--vscode-list-activeSelectionBackground)}.calendar-month .month-count{color:var(--vscode-descriptionForeground);font-size:10px}.calendar-empty{color:var(--vscode-descriptionForeground);text-align:center;padding:8px;font-size:12px}.month-count,.sidebar-section-count{color:var(--vscode-descriptionForeground);font-size:10px}.filter-panel{border-bottom:1px solid var(--vscode-sideBar-border);padding:8px 12px}.filter-section{margin-bottom:12px}.filter-section:last-child{margin-bottom:0}.filter-header{text-transform:uppercase;letter-spacing:.5px;color:var(--vscode-descriptionForeground);align-items:center;margin-bottom:6px;font-size:11px;font-weight:600;display:flex}.filter-header.collapsible-header{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:3px;margin:0 -6px 6px;padding:4px 6px}.filter-header.collapsible-header:hover{background-color:var(--vscode-list-hoverBackground)}.filter-header.collapsible-header.collapsed{margin-bottom:0}.filter-header .collapse-icon{opacity:.7;margin-right:4px;font-size:9px}.filter-header .clear-filter{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:.7;background:0 0;border:none;margin-left:auto;padding:2px 4px;font-size:10px}.filter-header .clear-filter:hover{opacity:1}.filter-chips{flex-wrap:wrap;gap:4px;display:flex}.filter-chip{background-color:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);cursor:pointer;border:none;border-radius:12px;padding:2px 8px;font-size:11px;transition:background-color .15s,opacity .15s}.filter-chip:hover{background-color:var(--vscode-button-secondaryHoverBackground)}.filter-chip.active{background-color:var(--vscode-button-background);color:var(--vscode-button-foreground)}.filter-chip.has-color{border:1px solid #0000}.filter-chip.has-color:hover{opacity:.85}.filter-chip.has-color.active{box-shadow:0 0 0 2px var(--vscode-focusBorder,#007fd4)}.filter-status{color:var(--vscode-descriptionForeground);background-color:var(--vscode-list-hoverBackground);border-bottom:1px solid var(--vscode-sideBar-border);justify-content:space-between;align-items:center;padding:6px 12px;font-size:11px;display:flex}.filter-status button{color:var(--accent-color);cursor:pointer;background:0 0;border:none;padding:0;font-size:11px}.filter-status button:hover{background:0 0;text-decoration:underline}.sidebar-load-more{justify-content:center;padding:12px 16px;display:flex}.load-more-button{background-color:var(--vscode-button-secondaryBackground);width:100%;color:var(--vscode-button-secondaryForeground);cursor:pointer;border:none;border-radius:4px;padding:8px 16px;font-size:12px;transition:background-color .2s}.load-more-button:hover:not(:disabled){background-color:var(--vscode-button-secondaryHoverBackground)}.filter-section{padding-top:4px}.filter-header{width:100%;color:var(--vscode-foreground);text-align:left;background:0 0;padding:6px 0}.filter-chips{flex-flow:wrap}.filter-chip{background:var(--vscode-input-background);color:var(--vscode-foreground);border-radius:999px;padding:5px 10px}.filter-status{color:var(--vscode-descriptionForeground);justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.filter-status button,.load-more-button{background:var(--vscode-input-background);color:var(--vscode-foreground);border-radius:6px;padding:6px 10px}.sidebar-load-more{padding-bottom:12px}.load-more-button{width:100%}.media-item-info{flex-direction:column;gap:2px;display:flex}.media-item-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.media-item-size{color:var(--vscode-descriptionForeground);font-size:12px}.chat-list-item{border:none;border-bottom:1px solid var(--vscode-sideBar-border);width:100%;color:inherit;text-align:left;background:0 0;align-items:center;padding:8px 12px;display:flex}.chat-list-item:hover{background:var(--vscode-list-hoverBackground)}.chat-list-item.active{background:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.chat-item-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.chat-item-open{min-width:0;color:inherit;text-align:left;background:0 0;border:none;flex:1;padding:0;display:flex}.chat-item-open:hover{background:0 0}.chat-item-open:focus-visible{outline:1px solid var(--vscode-focusBorder);outline-offset:2px}.chat-item-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-item-date{color:var(--vscode-descriptionForeground);font-size:12px}.sidebar-delete-button{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:1;background:0 0;border:none;flex-shrink:0;padding:0 6px;font-size:16px;line-height:1;transition:opacity .15s,color .15s}.sidebar-item-row:hover .sidebar-delete-button,.sidebar-item-row .sidebar-item.selected~.sidebar-delete-button,.media-item-row:hover .sidebar-delete-button,.media-item-row .media-item.selected~.sidebar-delete-button,.chat-list-item:hover .sidebar-delete-button,.chat-list-item.active .sidebar-delete-button{opacity:1}.sidebar-delete-button:hover{color:var(--vscode-errorForeground)}.sidebar-item-row .sidebar-item.selected~.sidebar-delete-button,.media-item-row .media-item.selected~.sidebar-delete-button{background-color:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.settings-nav-list{flex-direction:column;gap:6px;padding:0 12px 12px;display:flex}.settings-nav-entry{width:100%;color:inherit;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;display:flex}.settings-nav-entry:hover{background:var(--vscode-list-hoverBackground)}.settings-nav-entry-icon{text-align:center;flex:0 0 18px;width:18px}.sidebar-empty{color:var(--vscode-descriptionForeground);padding:16px 12px}@media (max-width:820px){.dashboard-stats{grid-template-columns:1fr}.recent-post-item{flex-wrap:wrap;align-items:flex-start}.media-grid{grid-template-columns:1fr}}.tab-bar{background-color:var(--vscode-editorGroupHeader-tabsBackground);border-bottom:1px solid var(--vscode-editorGroupHeader-tabsBorder);flex-shrink:0;align-items:center;height:35px;display:flex;position:relative;overflow:hidden}.tab-bar-tabs{flex:1;align-items:center;height:100%;display:flex;overflow:auto hidden}.tab-bar-tabs::-webkit-scrollbar{height:0;display:none}.tab-bar-empty{height:100%;color:var(--vscode-descriptionForeground);align-items:center;padding:0 12px;font-size:12px;display:flex}.tab{cursor:pointer;background-color:var(--vscode-tab-inactiveBackground);border:none;border-right:1px solid var(--vscode-tab-border);min-width:100px;max-width:180px;height:100%;color:var(--vscode-tab-inactiveForeground);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:4px;padding:0 6px 0 10px;font-size:13px;display:flex;position:relative}.tab-select{min-width:0;height:100%;color:inherit;font:inherit;cursor:inherit;background:0 0;border:none;flex:1;align-items:center;gap:4px;padding:0;display:flex}.tab:hover{background-color:var(--vscode-list-hoverBackground)}.tab.active{background-color:var(--vscode-tab-activeBackground);color:var(--vscode-tab-activeForeground)}.tab.active:after{content:"";background-color:var(--vscode-focusBorder);height:1px;position:absolute;top:0;left:0;right:0}.tab.transient .tab-title{font-style:italic}.tab-actions{flex-shrink:0;align-items:center;gap:2px;margin-left:auto;display:flex}.tab-dirty-indicator{color:var(--vscode-editorWarning-foreground,#e2c08d);font-size:10px;line-height:1}.tab-icon{opacity:.85;flex-shrink:0;justify-content:center;align-items:center;display:flex}.tab-title,.status-bar-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tab-close{width:20px;height:20px;color:var(--vscode-icon-foreground,#c5c5c5);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:flex}.tab:hover .tab-close,.tab.active .tab-close{opacity:.7}.tab-close:hover{background-color:var(--vscode-toolbar-hoverBackground);color:var(--vscode-tab-activeForeground);opacity:1!important}.tab-close:active{background-color:var(--vscode-toolbar-activeBackground,#6366674f)}.tab.dirty .tab-dirty-indicator{display:block}.tab.dirty .tab-close{display:none}.tab.dirty:hover .tab-close{opacity:.7;display:flex}.tab.dirty:hover .tab-dirty-indicator{display:none}.tab:focus-visible{outline:1px solid var(--vscode-focusBorder,#007fd4);outline-offset:-1px}.output-item-details{color:inherit;white-space:pre-wrap;-webkit-user-select:text;user-select:text;background:#ffffff08;border-radius:4px;margin:4px 0 0;padding:8px;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.editor-shell{background:var(--vscode-editor-background);flex:1;min-height:0;overflow:auto}.editor-frame{grid-template-columns:minmax(0,1fr) 240px;gap:16px;padding:14px 16px;display:grid}.editor-main,.editor-meta,.panel-shell,.assistant-card{min-width:0}.editor-kicker{text-transform:uppercase;letter-spacing:.04em;color:var(--vscode-descriptionForeground);font-size:11px}.editor-title{margin:10px 0 6px;font-size:24px;font-weight:600}.editor-subtitle{margin:0 0 14px}.editor-toolbar{gap:8px;margin-bottom:14px;display:flex}.editor-toolbar-button{border:1px solid var(--vscode-panel-border);color:var(--vscode-foreground);background:0 0;border-radius:3px;padding:4px 8px}.editor-toolbar-button:hover,.panel-tab:hover{background:var(--vscode-toolbar-hoverBackground)}.editor-section{padding-top:4px}.editor-section h2{margin:0 0 8px;font-size:16px}.editor-list{margin:0;padding-left:18px;line-height:1.5}.editor-list.compact li{margin-bottom:6px}.editor-meta{border-left:1px solid var(--vscode-panel-border);padding-left:16px}.editor-meta-row{border-bottom:1px solid var(--vscode-panel-border);flex-direction:column;gap:3px;padding:10px 0;display:flex}.post-editor .post-editor-markdown-surface,.scripts-monaco.monaco-editor-shell,.templates-monaco.monaco-editor-shell{background:var(--vscode-editor-background);min-height:0;color:var(--vscode-editor-foreground);border-color:var(--vscode-panel-border)}.post-editor .monaco-editor-instance,.scripts-monaco .monaco-editor-instance,.templates-monaco .monaco-editor-instance{background:var(--vscode-editor-background);min-height:0}.monaco-editor-shell .monaco-editor,.monaco-editor-shell .monaco-editor .margin,.monaco-editor-shell .monaco-editor-background,.monaco-editor-shell .monaco-editor .inputarea.ime-input{background-color:var(--vscode-editor-background)!important}.monaco-editor-shell .monaco-editor,.monaco-editor-shell .monaco-editor .view-line{color:var(--vscode-editor-foreground)!important}.monaco-editor-shell .monaco-editor .line-numbers{color:var(--vscode-editorLineNumber-foreground,#858585)!important}.monaco-editor-shell .monaco-editor .current-line,.monaco-editor-shell .monaco-editor .view-overlays .current-line{border-color:var(--vscode-editor-lineHighlightBorder,transparent)!important}.help-doc-view{--doc-bg:var(--panel-1,#1e1e1e);--doc-surface:var(--panel-2,#252526);--doc-border:var(--line,#3c3c3c);--doc-text:var(--vscode-editor-foreground,#d4d4d4);--doc-muted:var(--vscode-descriptionForeground,#9da3ad);--doc-link:var(--vscode-textLink-foreground,#9cdcfe);--doc-code-bg:var(--vscode-textCodeBlock-background,#0003);--doc-hover:var(--vscode-list-hoverBackground,#ffffff0f)}.help-doc-view .misc-editor-content{padding:0;overflow:hidden}.documentation-view,.documentation-scroll{background:var(--doc-bg,var(--vscode-editor-background))}.documentation-view{flex-direction:column;height:100%;min-height:0;display:flex}.documentation-scroll{flex:1;min-height:0;padding:28px 24px 40px;overflow:auto}.documentation-content{max-width:920px;color:var(--doc-text,var(--vscode-editor-foreground));margin:0 auto}.documentation-article,.help-doc-markdown{background:var(--doc-surface);border:1px solid var(--doc-border);border-radius:10px;padding:18px 20px 24px;box-shadow:0 10px 24px #0000002e}.documentation-content.markdown-body>.documentation-article>:first-child{margin-top:0}.documentation-content.markdown-body>.documentation-article>:last-child{margin-bottom:0}.documentation-content.markdown-body h1,.documentation-content.markdown-body h2,.documentation-content.markdown-body h3{color:var(--doc-text);border-bottom:1px solid var(--doc-border);padding-bottom:6px;line-height:1.25}.documentation-content.markdown-body h1{font-size:1.9rem}.documentation-content.markdown-body h2{margin-top:2rem;font-size:1.35rem}.documentation-content.markdown-body h3{margin-top:1.6rem;font-size:1.05rem}.documentation-content.markdown-body p,.documentation-content.markdown-body li,.documentation-content.markdown-body td,.documentation-content.markdown-body th{line-height:1.6}.documentation-content.markdown-body a{color:var(--doc-link);text-underline-offset:.14em;text-decoration-thickness:1px}.documentation-content.markdown-body a:hover{color:var(--doc-text)}.documentation-content.markdown-body hr{border:0;border-top:1px solid var(--doc-border);opacity:.8}.documentation-content.markdown-body code{background:var(--doc-code-bg);border-radius:4px;padding:.12em .4em;font:.92em/1.45 SFMono-Regular,Menlo,Monaco,Consolas,monospace}.documentation-content.markdown-body pre{background:var(--doc-code-bg);border:1px solid var(--doc-border);border-radius:8px;margin:.9rem 0 1.2rem;padding:14px 16px;overflow:auto}.documentation-content.markdown-body pre code{background:0 0;padding:0;font-size:.9em}.documentation-content.markdown-body blockquote{border-left:3px solid var(--doc-border);color:var(--doc-muted);margin:1rem 0;padding:0 0 0 12px}.documentation-content.markdown-body table{border-collapse:collapse;width:100%;margin:1rem 0 1.4rem;display:table}.documentation-content.markdown-body th,.documentation-content.markdown-body td{border:1px solid var(--doc-border);text-align:left;vertical-align:top;padding:8px 10px}.documentation-content.markdown-body th{background:var(--doc-hover);font-weight:700}.documentation-content.markdown-body ul,.documentation-content.markdown-body ol{margin:.85rem 0 1rem;padding-left:1.5rem;display:block}.documentation-content.markdown-body ul{list-style:outside}.documentation-content.markdown-body ol{list-style:decimal}.documentation-content.markdown-body li{margin:.3rem 0}.documentation-content.markdown-body li>ul,.documentation-content.markdown-body li>ol{margin-top:.35rem;margin-bottom:.35rem}.documentation-content.markdown-body strong{color:var(--doc-text)}.documentation-content.markdown-body img{max-width:100%;height:auto}.post-editor.editor,.scripts-view-shell.editor,.templates-view-shell.editor{background-color:var(--vscode-editor-background);flex-direction:column;flex:1;display:flex;overflow:hidden}.post-editor .editor-header,.scripts-view-shell.editor .editor-header,.templates-view-shell.editor .editor-header{background-color:var(--vscode-tab-activeBackground);border-bottom:1px solid var(--vscode-panel-border);justify-content:space-between;align-items:center;gap:12px;min-height:35px;padding:0 12px;display:flex}.post-editor .editor-tabs,.scripts-view-shell.editor .editor-tabs,.templates-view-shell.editor .editor-tabs{align-items:center;gap:2px;min-width:0;display:flex}.post-editor .editor-tab,.scripts-view-shell.editor .editor-tab,.templates-view-shell.editor .editor-tab{background-color:var(--vscode-tab-inactiveBackground);min-width:0;color:var(--vscode-tab-inactiveForeground);border-radius:4px 4px 0 0;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:flex}.post-editor .editor-tab.active,.scripts-view-shell.editor .editor-tab.active,.templates-view-shell.editor .editor-tab.active{background-color:var(--vscode-tab-activeBackground);color:var(--vscode-tab-activeForeground)}.post-editor .editor-tab-title,.scripts-view-shell.editor .editor-tab-title,.templates-view-shell.editor .editor-tab-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.post-editor .editor-tab-dirty{color:var(--vscode-notificationsWarningIcon-foreground,var(--vscode-editorWarning-foreground));font-size:10px}.post-editor .editor-tab-meta{color:var(--vscode-descriptionForeground);white-space:nowrap;font-size:11px}.post-editor .editor-actions,.scripts-view-shell.editor .editor-actions,.templates-view-shell.editor .editor-actions{align-items:center;gap:8px;display:flex}.post-editor .quick-actions-wrapper{display:inline-block;position:relative}.post-editor .quick-actions-btn{white-space:nowrap;align-items:center;gap:4px;display:flex}.post-editor .quick-actions-btn-icon{font-size:12px;line-height:1}.post-editor .quick-actions-menu{background:var(--vscode-dropdown-background,#3c3c3c);border:1px solid var(--vscode-dropdown-border,#454545);z-index:1000;border-radius:6px;min-width:280px;margin-top:4px;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 4px 12px #0000004d}.post-editor .quick-actions-divider{background:var(--vscode-dropdown-border,#454545);height:1px}.post-editor .quick-action-item{width:100%;color:var(--vscode-dropdown-foreground,#ccc);cursor:pointer;text-align:left;background:0 0;border:none;align-items:flex-start;gap:10px;padding:10px 12px;transition:background .1s;display:flex}.post-editor .quick-action-item:hover:not(:disabled){background:var(--vscode-list-hoverBackground,#2a2d2e)}.post-editor .quick-action-item:disabled{opacity:.5;cursor:not-allowed}.post-editor .quick-action-icon{flex-shrink:0;margin-top:2px;font-size:16px}.post-editor .quick-action-text{flex-direction:column;gap:2px;display:flex}.post-editor .quick-action-text strong{font-size:13px;font-weight:500}.post-editor .quick-action-text small{opacity:.7;font-size:11px}.post-editor .status-badge,.scripts-view-shell.editor .status-badge,.templates-view-shell.editor .status-badge{text-transform:uppercase;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:500}.post-editor .status-badge.status-draft,.scripts-view-shell.editor .status-badge.status-draft,.templates-view-shell.editor .status-badge.status-draft{color:var(--vscode-notificationsWarningIcon-foreground,var(--vscode-editorWarning-foreground));background-color:#cca70033}.post-editor .status-badge.status-published,.scripts-view-shell.editor .status-badge.status-published,.templates-view-shell.editor .status-badge.status-published{color:var(--vscode-testing-iconPassed);background-color:#73c99133}.post-editor .status-badge.status-archived,.scripts-view-shell.editor .status-badge.status-archived,.templates-view-shell.editor .status-badge.status-archived{color:var(--vscode-descriptionForeground);background-color:#85858533}.post-editor .auto-save-indicator{color:var(--vscode-descriptionForeground);font-size:11px;font-style:italic}.post-editor .editor-content{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.post-editor .metadata-toggle-header{align-items:center;gap:8px;display:flex}.post-editor .metadata-toggle{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;gap:8px;padding:6px 4px;font-size:11px;font-weight:500;transition:color .15s;display:flex}.post-editor .metadata-toggle:hover{color:var(--vscode-foreground)}.post-editor .metadata-toggle-chevron{font-size:10px}.post-editor .editor-header-row{align-items:flex-start;gap:16px;display:flex}.post-editor .editor-header-row.is-collapsed{display:none}.post-editor .editor-meta{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.post-editor .editor-media-panel{flex-shrink:0;width:200px}.post-editor .editor-field{flex-direction:column;flex:1;gap:4px;min-width:200px;display:flex}.post-editor .editor-field label,.post-editor .editor-body label,.post-editor .post-editor-links-label{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:500}.post-editor .editor-checkbox-label{text-transform:none;letter-spacing:0;color:var(--vscode-foreground);align-items:center;gap:8px;display:inline-flex}.post-editor .post-editor-input,.post-editor .post-editor-textarea{border:1px solid var(--vscode-input-border,var(--vscode-panel-border));background:var(--vscode-input-background,#ffffff0f);width:100%;color:var(--vscode-input-foreground,var(--vscode-foreground));font:inherit;border-radius:4px;padding:8px 10px}.post-editor .post-editor-input.is-readonly{opacity:.7;cursor:not-allowed}.post-editor .post-editor-textarea{resize:vertical;line-height:1.5}.post-editor .post-editor-excerpt{min-height:96px}.post-editor .tag-input-container{width:100%;position:relative}.post-editor .tag-input-container.is-disabled{opacity:.72}.post-editor .tag-input-wrapper{border:1px solid var(--vscode-input-border,#3c3c3c);background:var(--vscode-input-background,#3c3c3c);cursor:text;border-radius:4px;flex-wrap:wrap;align-items:center;gap:6px;min-height:38px;padding:6px 8px;display:flex}.post-editor .tag-input-wrapper:focus-within{border-color:var(--vscode-focusBorder,#007fd4);outline:none}.post-editor .tag-chip{background:var(--vscode-badge-background,#4d4d4d);border:1px solid var(--vscode-widget-border,#454545);color:var(--vscode-badge-foreground,#fff);white-space:nowrap;border-radius:4px;align-items:center;gap:4px;padding:3px 8px;font-size:.85rem;display:inline-flex}.post-editor .tag-chip.has-color{border-radius:12px;padding:3px 10px}.post-editor .tag-chip-remove{width:16px;height:16px;color:inherit;cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:2px;padding:0;font-size:1rem;line-height:1;transition:opacity .15s,background .15s;display:inline-flex}.post-editor .tag-chip-remove:hover{opacity:1;background:#0000001a}.post-editor .tag-chip.has-color .tag-chip-remove:hover{background:#0003}.post-editor .tag-input-field{min-width:120px;color:var(--vscode-input-foreground,#ccc);background:0 0;border:none;outline:none;flex:1;padding:2px 4px;font-family:inherit;font-size:.9rem}.post-editor .tag-input-field::placeholder{color:var(--vscode-input-placeholderForeground,#a6a6a6)}.post-editor .tag-input-field:disabled{cursor:not-allowed}.post-editor .tag-suggestions{background:var(--vscode-dropdown-background,#3c3c3c);border:1px solid var(--vscode-widget-border,#454545);z-index:1000;border-radius:6px;max-height:240px;margin-top:4px;padding:4px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 16px #00000080,0 0 0 1px #0003}.post-editor .tag-suggestion{width:100%;color:var(--vscode-dropdown-foreground,#f0f0f0);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:.9rem;transition:background .1s;display:flex}.post-editor .tag-suggestion:hover,.post-editor .tag-suggestion.selected{background:var(--vscode-list-hoverBackground,#2a2d2e)}.post-editor .tag-suggestion-color{border-radius:50%;flex-shrink:0;width:12px;height:12px}.post-editor .tag-suggestion-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.post-editor .tag-suggestion.create-new{border-top:1px solid var(--vscode-widget-border,#454545);color:var(--vscode-notificationsInfoIcon-foreground,#75beff);margin-top:4px;padding:12px 8px 6px}.post-editor .tag-suggestion.create-new:first-child{border-top:none;margin-top:0;padding-top:8px}.post-editor .tag-suggestion-icon{border:1px dashed;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:.9rem;font-weight:600;display:inline-flex}.post-editor .editor-field-row{gap:12px;width:100%;display:flex}.post-editor .editor-language-row{flex-wrap:nowrap;align-items:center;gap:6px;display:flex}.post-editor .editor-language-row select{flex:1;min-width:0}.post-editor .editor-translations-flags{flex:1;align-items:center;gap:4px;min-width:0;display:flex;overflow-x:auto}.post-editor .editor-translation-flag{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;flex:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:14px;line-height:1;display:inline-flex}.post-editor .editor-translation-flag.status-draft{opacity:.82}.post-editor .editor-translation-flag.status-archived{opacity:.45;filter:grayscale(.35)}.post-editor .editor-translation-flag.active{border-color:var(--vscode-testing-iconQueued,#cca700);background:var(--vscode-testing-iconQueued,#cca700)}@supports (color:color-mix(in lab, red, red)){.post-editor .editor-translation-flag.active{background:color-mix(in srgb,var(--vscode-testing-iconQueued,#cca700)14%,transparent)}}.post-editor .editor-translation-flag:hover{background:var(--vscode-list-hoverBackground)}@supports (color:color-mix(in lab, red, red)){.post-editor .editor-translation-flag:hover{background:color-mix(in srgb,var(--vscode-list-hoverBackground)75%,transparent)}}.post-editor .post-editor-links-panel,.post-editor .post-editor-side-panel{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:8px;padding:12px}@supports (color:color-mix(in lab, red, red)){.post-editor .post-editor-links-panel,.post-editor .post-editor-side-panel{background:color-mix(in srgb,var(--vscode-editor-background)82%,white 3%)}}.post-editor .post-editor-side-panel-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.post-editor .post-editor-links-columns{align-items:flex-start;gap:18px;margin-top:10px;display:flex}.post-editor .post-editor-links-columns>div{flex:1;min-width:0}.post-editor .post-editor-empty,.post-editor .post-editor-media-meta{color:var(--vscode-descriptionForeground);font-size:12px}.post-editor .post-editor-media-list{flex-direction:column;gap:8px;margin:10px 0 0;padding:0;list-style:none;display:flex}.post-editor .post-editor-media-item{background:#ffffff08;border-radius:6px;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.post-editor .editor-body{flex-direction:column;flex:1;gap:4px;min-height:320px;display:flex}.post-editor .editor-toolbar{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:8px;display:grid}.post-editor .editor-toolbar-left{justify-content:flex-start;align-items:center;display:flex}.post-editor .editor-toolbar-center{justify-content:center;align-items:center;display:flex}.post-editor .editor-toolbar-right{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0;display:flex}.post-editor .editor-mode-toggle{gap:4px;display:flex}.post-editor .editor-mode-toggle button,.post-editor .editor-toolbar-button{cursor:pointer;border:none;border-radius:4px;padding:4px 12px;font-size:12px;transition:background-color .15s}.post-editor .editor-mode-toggle button{background-color:var(--vscode-button-secondaryBackground,#ffffff14);color:var(--vscode-button-secondaryForeground,var(--vscode-foreground))}.post-editor .editor-mode-toggle button:hover,.post-editor .editor-toolbar-button:hover{background-color:var(--vscode-button-secondaryHoverBackground,var(--vscode-toolbar-hoverBackground))}.post-editor .editor-mode-toggle button.active{background-color:var(--vscode-button-background,var(--accent-color));color:var(--vscode-button-foreground,#fff)}.post-editor .editor-toolbar-button{background:var(--vscode-button-secondaryBackground,#ffffff14);color:var(--vscode-button-secondaryForeground,var(--vscode-foreground))}.post-editor .editor-excerpt-panel.is-collapsed{display:none}.post-editor .gallery-button{background-color:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);cursor:pointer;border:none;border-radius:4px;padding:4px 12px;font-size:12px;transition:background-color .15s}.post-editor .gallery-button:hover{background-color:var(--vscode-button-secondaryHoverBackground)}.post-editor .insert-post-link-button,.post-editor .insert-media-button{background-color:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);cursor:pointer;border:none;border-radius:4px;padding:4px 8px;font-size:14px;transition:background-color .15s}.post-editor .insert-post-link-button:hover,.post-editor .insert-media-button:hover{background-color:var(--vscode-button-secondaryHoverBackground)}.post-editor .editor-preview{background-color:var(--vscode-input-background);background-color:var(--vscode-input-background);border:none;border:1px solid var(--vscode-panel-border);border-radius:4px;flex:1;min-height:240px;padding:14px;line-height:1.6;position:relative;overflow:auto}.post-editor .editor-preview-frame{background:#fff;border:none;width:100%;min-height:520px}.post-editor .post-editor-markdown-surface{border:1px solid var(--vscode-input-border,var(--vscode-panel-border));background:var(--vscode-input-background);border-radius:4px;flex:1;min-height:380px;position:relative;overflow:hidden}.post-editor .monaco-editor-shell,.scripts-monaco.monaco-editor-shell,.templates-monaco.monaco-editor-shell{position:relative}.monaco-editor-instance{width:100%;height:100%;min-height:100%}.post-editor .monaco-editor-instance{min-height:380px}.scripts-monaco .monaco-editor-instance,.templates-monaco .monaco-editor-instance{min-height:420px}.monaco-editor-input{clip:rect(0,0,0,0);white-space:pre;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.post-editor .editor-footer{border-top:1px solid var(--vscode-panel-border);background-color:var(--vscode-sideBar-background);color:var(--vscode-descriptionForeground);flex-wrap:wrap;align-items:center;gap:16px;padding:8px 16px;font-size:12px;display:flex}@media (max-width:980px){.post-editor .editor-header,.scripts-view-shell.editor .editor-header,.templates-view-shell.editor .editor-header,.post-editor .metadata-toggle-header,.post-editor .editor-toolbar{flex-direction:column;align-items:flex-start;display:flex}.post-editor .editor-header-row,.post-editor .editor-field-row,.post-editor .post-editor-links-columns{flex-direction:column}.post-editor .editor-media-panel{width:100%}.post-editor .editor-toolbar-right,.post-editor .editor-actions,.scripts-view-shell.editor .editor-actions,.templates-view-shell.editor .editor-actions{justify-content:flex-start}}.settings-view,.style-view{flex-direction:column;height:100%;display:flex}.settings-header,.style-view-header{border-bottom:1px solid var(--line,#3c3c3c);justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;display:flex}.settings-search input{width:min(320px,40vw)}.settings-content{flex-direction:column;gap:18px;padding:20px;display:flex;overflow:auto}.setting-section{border:1px solid var(--line,#3c3c3c);background:var(--panel-2,#252526);border-radius:12px}.setting-section-header{border-bottom:1px solid var(--line,#3c3c3c);padding:14px 16px}.setting-section-content{flex-direction:column;gap:14px;padding:16px;display:flex}.setting-row{grid-template-columns:minmax(180px,240px) minmax(0,1fr);align-items:start;gap:16px;display:grid}.setting-label{font-weight:600}.setting-control,.setting-input-group{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.setting-actions{flex-wrap:wrap;gap:10px;padding:0 16px 16px;display:flex}.style-theme-picker{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:20px;display:grid}.style-theme-option{border:1px solid var(--line,#3c3c3c);background:var(--panel-2,#252526);text-align:left;cursor:pointer;border-radius:14px;padding:14px}.style-theme-option.selected{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.style-theme-swatch{flex-direction:column;gap:12px;display:flex}.style-theme-tones{grid-template-columns:2fr 1fr 1fr;gap:8px;display:grid}.style-theme-tone{border:1px solid #ffffff14;border-radius:10px;height:42px}.style-apply-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:0 20px 20px;display:flex}.style-preview-container{flex:1;min-height:0;padding:0 20px 20px}.style-preview-frame{border:1px solid var(--line,#3c3c3c);background:#fff;border-radius:14px;width:100%;height:100%;min-height:420px}@media (max-width:1100px){.setting-row{grid-template-columns:1fr}}.panel-shell{border-top:1px solid var(--line);min-height:160px;max-height:160px}.panel-shell.is-hidden{display:none}.panel-tabs{gap:2px;display:flex}.panel-tab{color:var(--vscode-tab-inactiveForeground);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;padding:6px 12px;font-size:12px}.panel-tab:hover{color:var(--vscode-tab-activeForeground);background:0 0}.panel-tab.active{color:var(--vscode-tab-activeForeground);border-bottom-color:var(--vscode-focusBorder);background:0 0}.assistant-content{flex-direction:column;gap:12px;padding:12px;display:flex}.assistant-sidebar-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.assistant-sidebar-heading{flex-direction:column;gap:4px;display:flex}.assistant-sidebar-description,.assistant-sidebar-context-text,.assistant-sidebar-message-content{color:var(--vscode-descriptionForeground)}.assistant-sidebar-status{border:1px solid var(--vscode-panel-border);border-radius:999px;padding:2px 8px;font-size:11px;line-height:1.4}.assistant-sidebar-status.is-offline{color:var(--vscode-editor-foreground);background:#ffc4002e;border-color:#ffc40059}.assistant-sidebar-context{border:1px solid var(--vscode-panel-border);background:var(--vscode-editorWidget-background,#0003);border-radius:6px;flex-direction:column;gap:10px;padding:8px;display:flex}.assistant-sidebar-context-row{justify-content:space-between;gap:12px;display:flex}.assistant-sidebar-context-label,.assistant-sidebar-message-role{text-transform:uppercase;letter-spacing:.04em;color:var(--vscode-descriptionForeground);font-size:11px}.assistant-sidebar-context-value{text-align:right;color:var(--vscode-editor-foreground)}.assistant-sidebar-context-text,.assistant-sidebar-message-content{white-space:pre-wrap;margin:0}.assistant-sidebar-prompt-form,.assistant-sidebar-welcome,.assistant-sidebar-transcript{flex-direction:column;gap:10px;display:flex}.assistant-sidebar-prompt{resize:vertical;border:1px solid var(--vscode-input-border);background:var(--vscode-input-background);width:100%;min-height:120px;color:var(--vscode-input-foreground);font:inherit;border-radius:6px;padding:10px}.assistant-sidebar-prompt:focus{outline:1px solid var(--vscode-focusBorder);outline-offset:1px}.assistant-sidebar-start-button{border:1px solid var(--vscode-button-border,transparent);background:var(--vscode-button-background);color:var(--vscode-button-foreground);cursor:pointer;border-radius:999px;align-self:flex-start;padding:7px 14px}.assistant-sidebar-start-button:disabled{cursor:default;opacity:.55}.assistant-card,.assistant-sidebar-message{border:1px solid var(--vscode-panel-border);background:var(--vscode-editorWidget-background,#0003);border-bottom-width:1px;border-radius:6px;flex-direction:column;gap:6px;padding:12px;display:flex}.assistant-sidebar-message.user{background:var(--vscode-list-hoverBackground)}.assistant-sidebar-message.assistant{background:var(--vscode-editorWidget-background,#0003)}.status-bar{background-color:var(--vscode-statusBar-background);height:22px;color:var(--vscode-statusBar-foreground);-webkit-user-select:none;user-select:none;border-top:none;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0;padding:0 8px;font-size:12px;display:flex}.status-bar-left,.status-bar-right{flex-shrink:0;align-items:center;gap:4px;min-width:0;display:flex}.status-bar-item{white-space:nowrap;text-overflow:ellipsis;background:0 0;border-radius:0;align-items:center;gap:6px;max-width:none;height:100%;padding:0 8px;font-size:12px;display:flex;overflow:hidden}.status-bar-item .task-message-text{text-overflow:ellipsis;white-space:nowrap;max-width:300px;overflow:hidden}.task-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:10px;height:10px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.panel-content{padding:8px}.task-list{gap:4px}.output-list,.git-log-list{gap:6px}.task-entry{background-color:var(--vscode-sideBar-background);border-bottom:none;border-radius:4px;padding:8px}.output-entry{background-color:var(--vscode-sideBar-background);color:var(--vscode-editor-foreground);border-bottom:none;border-radius:4px;padding:8px;font-size:12px}@media (max-width:1100px){.editor-frame{grid-template-columns:1fr}.assistant-sidebar-shell{display:none}.dashboard-grid{grid-template-columns:1fr}}.text-muted{color:var(--vscode-descriptionForeground)}.editor-empty{background-color:var(--vscode-editor-background);flex:1;justify-content:center;align-items:flex-start;padding:40px 20px;display:flex;overflow-y:auto}.dashboard-content{width:100%;max-width:720px}.dashboard-content h1{color:var(--vscode-editor-foreground);margin:0 0 4px;font-size:24px;font-weight:400}.dashboard-content>.text-muted{margin-bottom:24px;display:block}.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px;display:grid}.stat-card{background-color:var(--vscode-sideBar-background);border-radius:6px;padding:16px}.stat-number{color:var(--vscode-editor-foreground);margin-bottom:4px;font-size:32px;font-weight:600;line-height:1}.stat-label{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:12px}.stat-breakdown{flex-wrap:wrap;gap:6px;display:flex}.stat-tag{background-color:var(--vscode-input-background);color:var(--vscode-descriptionForeground);border-radius:3px;padding:2px 8px;font-size:11px}.stat-published{color:var(--vscode-testing-iconPassed)}.stat-draft{color:var(--vscode-editorWarning-foreground)}.stat-archived{color:var(--vscode-descriptionForeground)}.dashboard-section{background-color:var(--vscode-sideBar-background);border-radius:6px;margin-bottom:12px;padding:16px}.dashboard-section h4{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;font-size:11px;font-weight:600}.timeline-chart{align-items:flex-end;gap:4px;height:100px;display:flex}.timeline-bar-container{flex-direction:column;flex:1;align-items:center;height:100%;display:flex}.timeline-bar{background-color:var(--vscode-activityBarBadge-background);border-radius:3px 3px 0 0;width:100%;max-width:40px;min-height:4px;margin-top:auto;transition:opacity .15s;position:relative}.timeline-bar:hover{opacity:.8}.timeline-bar-count{color:var(--vscode-descriptionForeground);font-size:10px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.timeline-bar-label{color:var(--vscode-descriptionForeground);flex-direction:column;align-items:center;margin-top:4px;font-size:9px;line-height:1.15;display:flex}.timeline-bar-label-month{white-space:nowrap}.timeline-bar-label-year{font-size:8px}.tag-cloud{flex-wrap:wrap;align-items:baseline;gap:6px 10px;line-height:1.6;display:flex}.dashboard-tag{background-color:var(--vscode-input-background);color:var(--vscode-editor-foreground);cursor:default;white-space:nowrap;border-radius:10px;padding:2px 8px;transition:opacity .15s}.dashboard-tag:hover{opacity:.75}.dashboard-tag.has-color{border-radius:12px}.dashboard-tag.has-color:hover{opacity:.85}.tag-cloud-more{font-size:11px}.tag-count{opacity:.5;margin-left:2px;font-size:10px}.dashboard-category{border:1px solid var(--vscode-input-border);font-size:12px}.recent-posts-list{flex-direction:column;display:flex}.recent-post-item{cursor:pointer;text-align:left;width:100%;color:inherit;background:0 0;border:none;border-radius:4px;align-items:center;gap:10px;padding:6px 8px;font-size:12px;display:flex}.recent-post-item:hover{background-color:var(--vscode-list-hoverBackground)}.recent-post-title{color:var(--vscode-editor-foreground);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.recent-post-status{background-color:var(--vscode-input-background);text-transform:uppercase;letter-spacing:.3px;border-radius:3px;padding:1px 6px;font-size:10px}.recent-post-status.status-published{color:var(--vscode-testing-iconPassed)}.recent-post-status.status-draft{color:var(--vscode-editorWarning-foreground)}.recent-post-status.status-archived{color:var(--vscode-descriptionForeground)}.recent-post-date{color:var(--vscode-descriptionForeground);white-space:nowrap}.settings-view-shell,.style-view,.tags-view-shell,.scripts-view-shell,.templates-view-shell,.chat-panel{background:var(--vscode-editor-background);height:100%}.chat-panel{min-height:0;color:var(--vscode-editor-foreground);flex-direction:column;display:flex}.chat-panel-header{border-bottom:1px solid var(--vscode-panel-border);background:var(--vscode-sideBar-background);justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.chat-panel-title{flex:1;align-items:center;gap:10px;min-width:0;font-size:14px;font-weight:600;display:flex;overflow:visible}.chat-panel-title-main{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-panel-header-actions{align-items:center;gap:8px;display:flex}.chat-model-selector-wrap{min-width:0;display:inline-flex;position:relative}.chat-model-selector-button,.chat-model-selector-option{border:1px solid var(--vscode-input-border);background:var(--vscode-input-background);color:var(--vscode-input-foreground)}.chat-model-selector-menu{border:1px solid var(--vscode-dropdown-border,var(--vscode-panel-border));background:var(--vscode-dropdown-background,var(--vscode-sideBar-background));color:var(--vscode-dropdown-foreground,var(--vscode-foreground));z-index:20;position:absolute;top:calc(100% + 4px);left:0;right:auto}.chat-panel .chat-model-selector-button.chat-model-selector-inline{align-items:center;gap:6px;display:inline-flex}.chat-panel .chat-model-selector-caret{font-size:10px;position:static}.chat-messages,.chat-surface-scroll{flex:1;min-height:0;overflow-y:auto}.chat-messages{flex-direction:column;gap:16px;padding:16px;display:flex}.chat-message{max-width:100%;display:flex}.chat-message.user{justify-content:flex-end}.chat-message-content{border:1px solid var(--vscode-panel-border);background:var(--vscode-sideBar-background);max-width:min(760px,100%);color:var(--vscode-editor-foreground);border-radius:6px;padding:12px 14px}.chat-panel .chat-message.user .chat-message-content{color:var(--vscode-list-activeSelectionForeground);background:0 0;border:0;padding:6px 12px;line-height:1.35}.chat-tool-surface-table{border-collapse:collapse;width:100%}.chat-tool-surface-table th,.chat-tool-surface-table td{border-bottom:1px solid var(--vscode-panel-border);text-align:left;padding:6px 8px}.chat-tool-surface-json{border:1px solid var(--vscode-panel-border);background:var(--vscode-textCodeBlock-background);border-radius:4px;padding:10px 12px;overflow:auto}.chat-panel .chat-input-container{--chat-input-line-height:20px;--chat-input-min-height:20px;border-top:1px solid var(--vscode-panel-border);background:var(--vscode-sideBar-background);padding:8px 16px}.chat-panel .chat-input-wrapper{border:1px solid var(--vscode-input-border);background:var(--vscode-input-background);border-radius:6px;align-items:flex-end;gap:8px;min-height:30px;padding:4px 6px;display:flex}.chat-panel .chat-input-wrapper:focus-within{border-color:var(--vscode-focusBorder)}.chat-panel .chat-input{box-sizing:border-box;height:var(--chat-input-min-height);min-height:var(--chat-input-min-height);line-height:var(--chat-input-line-height);resize:vertical;max-height:160px;color:var(--vscode-input-foreground);background:0 0;border:0;flex:1;margin:0;padding:6px 8px;overflow-y:hidden}.chat-panel .chat-input::placeholder{color:var(--vscode-input-placeholderForeground)}.chat-panel .chat-send-button{background:var(--vscode-button-background);width:22px;max-width:22px;height:22px;max-height:22px;color:var(--vscode-button-foreground);flex:none;padding:0}.chat-panel .chat-send-button:hover:not(:disabled){background:var(--vscode-button-hoverBackground)}.chat-panel .chat-send-button:disabled{opacity:.5}.overlay-root{pointer-events:none;z-index:10000;position:fixed;inset:0}.overlay-root:empty{display:none}.editor-shared-actions{margin-bottom:14px;position:relative}.ai-suggestions-modal-backdrop,.insert-modal-backdrop,.language-picker-modal-backdrop,.confirm-delete-modal-backdrop,.confirm-dialog-overlay,.gallery-overlay,.lightbox-overlay{pointer-events:auto;background:#000000ad;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ai-suggestions-modal,.insert-modal,.language-picker-modal,.confirm-delete-modal,.confirm-dialog,.gallery-overlay-content{background:#1e1e1e;border:1px solid #3c3c3c;border-radius:8px;box-shadow:0 8px 32px #0006}.ai-suggestions-modal,.language-picker-modal,.confirm-delete-modal,.confirm-dialog{flex-direction:column;width:min(680px,100vw - 32px);max-height:calc(100vh - 48px);display:flex}.insert-modal{flex-direction:column;width:min(680px,100vw - 32px);max-height:calc(100vh - 48px);display:flex;overflow:hidden}.gallery-overlay-content{flex-direction:column;width:min(980px,100vw - 48px);max-height:calc(100vh - 48px);display:flex;overflow:hidden}.ai-suggestions-modal-header,.language-picker-modal-header,.confirm-delete-modal-header,.insert-modal-header,.gallery-overlay-header{border-bottom:1px solid #3c3c3c;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.insert-modal-header{flex-direction:column;align-items:stretch;gap:12px}.insert-modal-header.media-header-only{flex-direction:row;align-items:center}.ai-suggestions-modal-header h2,.language-picker-modal-header h2,.confirm-delete-modal-header h2,.gallery-overlay-header h2,.insert-modal-title,.confirm-dialog h3{color:#fff;margin:0}.ai-suggestions-modal-close,.confirm-delete-modal-close,.gallery-overlay-close,.shared-popover-close,.lightbox-close{color:#c5c5c5;cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1}.ai-suggestions-modal-body,.language-picker-modal-body,.confirm-delete-modal-body{padding:20px;overflow:auto}.ai-suggestions-list{flex-direction:column;gap:16px;display:flex}.ai-suggestion-item{background:#252526;border:1px solid #3c3c3c;border-radius:6px;gap:12px;padding:16px;display:flex}.ai-suggestion-checkbox{cursor:pointer;align-items:flex-start;display:flex;position:relative}.ai-suggestion-checkbox input{opacity:0;position:absolute}.checkmark{background:#1e1e1e;border:2px solid #555;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}.ai-suggestion-checkbox input:checked+.checkmark,.ai-suggestion-checkbox input:checked~.checkmark{background:#0078d4;border-color:#0078d4}.ai-suggestion-checkbox input:checked+.checkmark:after,.ai-suggestion-checkbox input:checked~.checkmark:after{content:"✓";color:#fff;font-size:12px}.ai-suggestion-content{flex:1;min-width:0}.ai-suggestion-label{align-items:center;gap:8px;margin-bottom:8px;font-weight:600;display:flex}.ai-suggestion-has-value,.language-picker-badge,.insert-modal-similarity-badge{color:#c5c5c5;background:#ffffff14;border-radius:999px;align-items:center;padding:2px 6px;font-size:11px;display:inline-flex}.ai-suggestion-comparison{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;display:grid}.ai-suggestion-column{background:#ffffff08;border-radius:6px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.ai-suggestion-column.muted{color:#9d9d9d}.ai-suggestion-column.highlighted{color:#fff;border:1px solid #007acc66}.ai-suggestion-column-label{text-transform:uppercase;letter-spacing:.04em;font-size:11px}.ai-suggestion-arrow{color:#9d9d9d}.ai-suggestion-value{min-height:1.4em}.ai-suggestion-value.loading{color:var(--accent-color);font-style:italic}.ai-suggestions-error{color:#ff6b6b;background:#dc32321f;border:1px solid #dc323259;border-radius:6px;flex-direction:column;gap:4px;margin-bottom:16px;padding:12px 16px;display:flex}.ai-suggestions-modal-footer,.confirm-delete-modal-footer,.confirm-dialog-actions{border-top:1px solid #3c3c3c;justify-content:flex-end;gap:10px;padding:16px 20px;display:flex}.button-cancel,.button-delete,.button-apply,.confirm-dialog-actions button,.insert-modal-submit,.language-picker-row,.shared-popover-entry,.colour-swatch{cursor:pointer}.button-cancel,.confirm-dialog-actions button,.insert-modal-submit{color:#f0f0f0;background:0 0;border:1px solid #4c4c4c;border-radius:4px;padding:8px 14px}.button-apply,.confirm-dialog-actions .primary,.insert-modal-submit{background:#0e639c;border-color:#0e639c}.button-delete{color:#fff;background:#c73c3c;border:none;border-radius:4px;padding:8px 14px}.insert-modal-tabs{margin:0 -20px;display:flex}.insert-modal-tab{color:#9d9d9d;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:10px 16px}.insert-modal-tab.active{color:#fff;background:#252526;border-bottom-color:#0e639c}.insert-modal-search{border-bottom:1px solid #3c3c3c}.insert-modal-input,.shared-popover-input{color:#f0f0f0;width:100%;font:inherit;background:0 0;border:none;padding:14px 20px}.menu-editor-view{background:var(--vscode-editor-background);flex-direction:column;flex:1;gap:.75rem;height:100%;min-height:0;padding:1rem;display:flex;overflow:hidden}.menu-editor-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.menu-editor-header h2{margin:0}.menu-editor-header p{color:var(--vscode-descriptionForeground);margin:.25rem 0 0}.menu-editor-main{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.menu-editor-tree-wrap{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:6px;flex-direction:column;flex:1;min-height:0;padding:.5rem;display:flex}.menu-editor-toolbar{border-bottom:1px solid var(--vscode-panel-border);align-items:center;gap:.2rem;margin-bottom:.5rem;padding-bottom:.4rem;display:flex}.menu-editor-tool{width:1.8rem;height:1.8rem;color:var(--vscode-foreground);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.menu-editor-tool:hover:not(:disabled){background:var(--vscode-toolbar-hoverBackground);border-color:var(--vscode-panel-border)}.menu-editor-tool:disabled{opacity:.45;cursor:not-allowed}.menu-editor-tree-shell{flex:1;min-height:0;overflow:auto}.menu-editor-tree-level{margin:0;padding:0;list-style:none}.menu-editor-tree-item{margin:0;padding:0}.menu-editor-row{--menu-editor-indent:calc(var(--menu-editor-depth)*1rem);padding:.3rem .45rem .3rem calc(.4rem + var(--menu-editor-indent));cursor:pointer;border-radius:4px;align-items:flex-start;gap:.5rem;display:flex;position:relative}.menu-editor-row.is-selected{background:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.menu-editor-row.is-dragging{opacity:.45}.menu-editor-row.is-drop-before:before,.menu-editor-row.is-drop-after:after{content:"";left:calc(.4rem + var(--menu-editor-indent));background:var(--vscode-focusBorder);height:2px;position:absolute;right:.45rem}.menu-editor-row.is-drop-before:before{top:0}.menu-editor-row.is-drop-after:after{bottom:0}.menu-editor-row.is-drop-inside{box-shadow:inset 0 0 0 1px var(--vscode-focusBorder);background:var(--vscode-list-hoverBackground)}.menu-editor-row-handle{width:1rem;min-width:1rem;color:var(--vscode-descriptionForeground);cursor:grab;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.menu-editor-row-handle:active{cursor:grabbing}.menu-editor-row-kind{opacity:.9;justify-content:center;align-items:center;width:1rem;min-width:1rem;display:inline-flex}.menu-editor-row-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.menu-editor-row-title.is-editing{white-space:normal;text-overflow:clip;overflow:visible}.menu-editor-entry-form{display:block}.menu-editor-inline-input{border:1px solid var(--vscode-focusBorder);background:var(--vscode-input-background);width:100%;color:var(--vscode-input-foreground);border-radius:4px;min-height:1.8rem;padding:.25rem .45rem}.menu-editor-inline-search{border-top:1px solid var(--vscode-panel-border);flex-direction:column;gap:.4rem;max-height:18rem;margin-top:.5rem;padding-top:.5rem;display:flex;overflow:hidden}.menu-editor-inline-search-head{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.menu-editor-inline-search-head strong{font-size:.8rem;display:block}.menu-editor-inline-search-head span{color:var(--vscode-descriptionForeground);font-size:.75rem}.menu-editor-inline-actions{align-items:center;gap:.5rem;display:inline-flex}.menu-editor-inline-action{border:1px solid var(--vscode-button-border,transparent);background:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);cursor:pointer;border-radius:4px;padding:.2rem .5rem}.menu-editor-inline-action:hover{background:var(--vscode-button-secondaryHoverBackground)}.menu-editor-picker-list{flex-direction:column;gap:.35rem;max-height:16rem;display:flex;overflow-y:auto}.menu-editor-picker-item{border:1px solid var(--vscode-panel-border);background:var(--vscode-input-background);width:100%;color:var(--vscode-input-foreground);text-align:left;cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;padding:.45rem .55rem;display:flex}.menu-editor-picker-item:hover{border-color:var(--vscode-focusBorder);background:var(--vscode-list-hoverBackground)}.menu-editor-picker-item small,.menu-editor-picker-state{color:var(--vscode-descriptionForeground)}.menu-editor-empty{color:var(--vscode-descriptionForeground);padding:.5rem .25rem}@media (max-width:720px){.menu-editor-inline-search-head{flex-direction:column;align-items:flex-start}.menu-editor-inline-actions{flex-wrap:wrap;justify-content:flex-start;width:100%}}[data-testid=media-editor]{background-color:var(--vscode-editor-background);flex-direction:column;flex:1;display:flex;overflow:hidden}[data-testid=media-editor] .editor-header{background-color:var(--vscode-tab-activeBackground);border-bottom:1px solid var(--vscode-panel-border);justify-content:space-between;align-items:center;gap:12px;min-height:35px;padding:0 12px;display:flex}[data-testid=media-editor] .editor-tabs{align-items:center;gap:2px;min-width:0;display:flex}[data-testid=media-editor] .editor-tab{background-color:var(--vscode-tab-inactiveBackground);min-width:0;color:var(--vscode-tab-inactiveForeground);border-radius:4px 4px 0 0;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:flex}[data-testid=media-editor] .editor-tab.active{background-color:var(--vscode-tab-activeBackground);color:var(--vscode-tab-activeForeground)}[data-testid=media-editor] .editor-tab-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}[data-testid=media-editor] .editor-tab-dirty{color:var(--vscode-notificationsWarningIcon-foreground,var(--vscode-editorWarning-foreground));font-size:10px}[data-testid=media-editor] .editor-actions{align-items:center;gap:8px;display:flex}[data-testid=media-editor] .editor-actions button{padding:4px 10px;font-size:12px}[data-testid=media-editor] .editor-actions button.danger:hover{background-color:var(--vscode-notificationsErrorIcon-foreground)}[data-testid=media-editor] .auto-save-indicator{color:var(--vscode-descriptionForeground);font-size:11px;font-style:italic}[data-testid=media-editor] .quick-actions-wrapper{position:relative}[data-testid=media-editor] .quick-actions-btn{align-items:center;gap:6px;display:inline-flex}[data-testid=media-editor] .quick-actions-btn-icon{font-size:12px;line-height:1}[data-testid=media-editor] .quick-actions-menu{background:var(--vscode-dropdown-background,#252526);border:1px solid var(--vscode-dropdown-border,#454545);z-index:30;border-radius:6px;width:280px;position:absolute;top:calc(100% + 4px);right:0;overflow:hidden;box-shadow:0 8px 24px #00000059}[data-testid=media-editor] .quick-actions-divider{background:var(--vscode-dropdown-border,#454545);height:1px}[data-testid=media-editor] .quick-action-item{width:100%;color:var(--vscode-dropdown-foreground,#ccc);cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;transition:background .1s;display:flex}[data-testid=media-editor] .quick-action-item:hover:not(:disabled){background:var(--vscode-list-hoverBackground,#2a2d2e)}[data-testid=media-editor] .quick-action-item:disabled{opacity:.5;cursor:not-allowed}[data-testid=media-editor] .quick-action-icon{flex-shrink:0;margin-top:2px;font-size:16px}[data-testid=media-editor] .quick-action-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}[data-testid=media-editor] .quick-action-text strong{font-size:13px;font-weight:500}[data-testid=media-editor] .quick-action-text small{opacity:.7;font-size:11px}[data-testid=media-editor] .editor-content{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}[data-testid=media-editor]>.editor-content.media-editor{flex-direction:row;align-items:stretch;gap:24px}[data-testid=media-editor] .editor-field{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}[data-testid=media-editor] .editor-field label{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:500}[data-testid=media-editor] .editor-field-row{gap:12px;width:100%;margin-bottom:0;display:flex}[data-testid=media-editor] .post-editor-input,[data-testid=media-editor] .post-editor-textarea{border:1px solid var(--vscode-input-border,var(--vscode-panel-border));background:var(--vscode-input-background,#ffffff0f);width:100%;color:var(--vscode-input-foreground,var(--vscode-foreground));font:inherit;border-radius:4px;padding:8px 10px}[data-testid=media-editor] .post-editor-input.disabled,[data-testid=media-editor] .post-editor-input:disabled{opacity:.6;cursor:not-allowed}[data-testid=media-editor] .post-editor-textarea{resize:vertical;line-height:1.5}[data-testid=media-editor] .media-preview{background-color:var(--vscode-input-background);border-radius:8px;flex:1;justify-content:center;align-items:center;min-height:300px;display:flex;overflow:hidden}[data-testid=media-editor] .media-preview-placeholder{color:var(--vscode-descriptionForeground);flex-direction:column;align-items:center;gap:12px;display:flex}[data-testid=media-editor] .media-preview-image{box-sizing:border-box;justify-content:center;align-self:stretch;align-items:center;width:100%;height:100%;min-height:0;padding:16px;display:flex}[data-testid=media-editor] .media-preview-image img{object-fit:contain;border-radius:4px;width:100%;height:100%}[data-testid=media-editor] .media-details{flex-direction:column;flex-shrink:0;gap:12px;width:320px;display:flex}[data-testid=media-editor] .media-editor-details-form{flex-direction:column;gap:12px;display:flex}[data-testid=media-editor] .media-details textarea{resize:vertical}[data-testid=media-editor] .linked-posts-section label{justify-content:space-between;align-items:center;display:flex}[data-testid=media-editor] .add-link-btn{background:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);cursor:pointer;border:none;border-radius:3px;padding:2px 8px;font-size:11px}[data-testid=media-editor] .add-link-btn:hover{background:var(--vscode-button-secondaryHoverBackground)}[data-testid=media-editor] .post-picker{background:var(--vscode-dropdown-background);border:1px solid var(--vscode-dropdown-border);border-radius:4px;max-height:250px;margin-top:8px;overflow-y:auto}[data-testid=media-editor] .post-picker-search{border-bottom:1px solid var(--vscode-dropdown-border);background:var(--vscode-dropdown-background);padding:8px;position:sticky;top:0}[data-testid=media-editor] .post-picker-search input{background:var(--vscode-input-background);border:1px solid var(--vscode-input-border);width:100%;color:var(--vscode-input-foreground);border-radius:3px;padding:6px 10px;font-size:12px}[data-testid=media-editor] .post-picker-search input:focus{border-color:var(--vscode-focusBorder);outline:none}[data-testid=media-editor] .post-picker-list{padding:4px}[data-testid=media-editor] .post-picker-item{cursor:pointer;width:100%;color:inherit;text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:3px;padding:6px 8px;font-size:12px;overflow:hidden}[data-testid=media-editor] .post-picker-item:hover{background:var(--vscode-list-hoverBackground)}[data-testid=media-editor] .post-picker-more{color:var(--vscode-descriptionForeground);padding:6px 8px;font-size:11px;font-style:italic}[data-testid=media-editor] .no-posts,[data-testid=media-editor] .no-linked-posts{color:var(--vscode-descriptionForeground);padding:12px 8px;font-size:12px;font-style:italic}[data-testid=media-editor] .linked-posts-list{flex-direction:column;gap:4px;margin-top:8px;display:flex}[data-testid=media-editor] .linked-post-item{background:var(--vscode-sideBar-background);border-radius:4px;justify-content:space-between;align-items:center;padding:6px 8px;display:flex}[data-testid=media-editor] .linked-post-title,[data-testid=media-editor] .linked-post-link{min-width:0;color:inherit;text-align:left;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;flex:1;padding:0;font-size:12px;overflow:hidden}[data-testid=media-editor] .linked-post-title:hover,[data-testid=media-editor] .linked-post-link:hover{color:var(--vscode-textLink-foreground);text-decoration:underline}[data-testid=media-editor] .linked-post-item .unlink-btn{color:var(--vscode-descriptionForeground);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 4px;font-size:14px;transition:opacity .1s}[data-testid=media-editor] .linked-post-item:hover .unlink-btn{opacity:1}[data-testid=media-editor] .linked-post-item .unlink-btn:hover{color:var(--vscode-errorForeground)}.translation-modal-backdrop{pointer-events:auto;z-index:10001;background:#000000ad;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.translation-modal{background:#1e1e1e;border:1px solid #3c3c3c;border-radius:8px;width:min(640px,100vw - 32px);box-shadow:0 8px 32px #0006}.translation-modal-header,.translation-modal-footer{justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.translation-modal-header{border-bottom:1px solid #3c3c3c}.translation-modal-footer{border-top:1px solid #3c3c3c;justify-content:flex-end;gap:10px}.translation-modal-body{flex-direction:column;gap:14px;padding:20px;display:flex}.translation-modal-close{color:#c5c5c5;cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1}.import-analysis{color:var(--vscode-foreground);flex-direction:column;gap:16px;padding:18px 20px 26px;display:flex}.import-analysis-header{flex-direction:column;gap:8px;display:flex}.import-analysis-header p{color:var(--vscode-descriptionForeground);margin:0;font-size:13px;line-height:1.5}.import-definition-name{border:1px solid var(--vscode-input-border,transparent);background:var(--vscode-input-background);width:min(480px,100%);color:var(--vscode-input-foreground,var(--vscode-foreground));border-radius:6px;padding:10px 12px;font-size:18px;font-weight:600}.import-file-selectors{gap:12px;display:grid}.import-file-row{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:8px;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;display:grid}@supports (color:color-mix(in lab, red, red)){.import-file-row{background:color-mix(in srgb,var(--vscode-editor-background)76%,var(--vscode-input-background))}}.import-file-row label{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:600}.import-file-path{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--vscode-editor-font-family,ui-monospace,monospace);font-size:12px;overflow:hidden}.import-file-path.placeholder{color:var(--vscode-descriptionForeground)}.import-analysis button,.import-analysis select{border:1px solid var(--vscode-button-border,transparent);border-radius:6px;font-size:12px}.import-analysis button{background:var(--vscode-button-secondaryBackground,var(--vscode-button-background));color:var(--vscode-button-secondaryForeground,var(--vscode-button-foreground));cursor:pointer;padding:8px 12px}.import-analysis button:hover:not(:disabled){background:var(--vscode-button-secondaryHoverBackground,var(--vscode-button-hoverBackground))}.import-analyze-btn,.import-execute-btn{background:var(--vscode-button-background)!important;color:var(--vscode-button-foreground)!important}.import-analysis button:disabled{opacity:.65;cursor:not-allowed}.import-loading{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:10px;align-items:center;gap:12px;padding:16px;display:flex}@supports (color:color-mix(in lab, red, red)){.import-loading{background:color-mix(in srgb,var(--vscode-editor-background)84%,var(--vscode-input-background))}}.import-spinner{border:2px solid var(--vscode-descriptionForeground);border-top-color:var(--vscode-button-background);border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.8s linear infinite import-spinner-rotate}.import-progress{flex-direction:column;gap:2px;display:flex}.import-progress-step{color:var(--vscode-foreground);font-size:13px}.import-progress-detail{color:var(--vscode-descriptionForeground);font-size:11px}@keyframes import-spinner-rotate{to{transform:rotate(360deg)}}.import-site-info{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.import-site-info-item,.import-stat-card,.import-date-distribution,.import-detail-section,.import-execute-section{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:10px}@supports (color:color-mix(in lab, red, red)){.import-site-info-item,.import-stat-card,.import-date-distribution,.import-detail-section,.import-execute-section{background:color-mix(in srgb,var(--vscode-editor-background)84%,var(--vscode-input-background))}}.import-site-info-item{flex-direction:column;gap:6px;padding:14px;display:flex}.info-label{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.info-value{overflow-wrap:anywhere;font-size:13px;font-weight:500}.import-stat-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.import-stat-card{padding:14px}.import-stat-card h3,.import-date-distribution h3,.import-detail-section h3,.taxonomy-group h4{margin:0}.import-stat-number{margin-top:10px;font-size:28px;font-weight:700;line-height:1}.import-stat-breakdown,.import-execute-summary,.import-taxonomy-list{flex-wrap:wrap;gap:8px;display:flex}.import-stat-breakdown{margin-top:12px}.import-stat-tag,.import-count-tag,.import-taxonomy-pill,.macro-status-badge{border-radius:999px;align-items:center;gap:4px;padding:4px 9px;font-size:11px;font-weight:600;display:inline-flex}.stat-new,.import-taxonomy-pill.new-tax{color:#75beff;background:#75beff29}.stat-update,.stat-mapped,.import-taxonomy-pill.exists,.import-taxonomy-pill.mapped,.macro-status-badge.mapped,.import-execution-complete{color:#73c991;background:#73c99129}.stat-conflict{color:#ffb169;background:#ffa65729}.stat-duplicate,.stat-missing,.macro-status-badge.unmapped,.import-execution-error{color:#cca700;background:#cca70029}.import-date-distribution,.import-detail-section,.import-execute-section{padding:16px}.import-section-toggle{text-align:left;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;font-weight:600;display:flex;color:inherit!important;background:0 0!important;border:none!important;font-size:16px!important}.import-section-toggle:hover{opacity:.9;background:0 0!important}.toggle-icon{color:var(--vscode-descriptionForeground);font-size:12px}.distribution-bars{gap:10px;margin-top:14px;display:grid}.distribution-row{grid-template-columns:56px minmax(0,1fr) 72px;align-items:center;gap:10px;display:grid}.distribution-year,.distribution-count,.slug-cell{font-family:var(--vscode-editor-font-family,ui-monospace,monospace);font-size:11px}.distribution-bar-container{background:var(--vscode-input-background);border-radius:999px;height:10px;overflow:hidden}.distribution-bar{border-radius:inherit;min-width:8px;height:100%}.distribution-bar-posts{background:linear-gradient(90deg,#75beffcc,#75beff59)}.import-execute-section{justify-content:space-between;align-items:center;gap:16px;display:flex}.import-execute-summary{color:var(--vscode-descriptionForeground)}.import-execution-complete,.import-execution-error{border-radius:8px;padding:10px 12px;font-size:12px;font-weight:600}.import-execution-progress{border:1px solid var(--vscode-panel-border);background:var(--vscode-editor-background);border-radius:10px;gap:10px;padding:16px;display:grid}@supports (color:color-mix(in lab, red, red)){.import-execution-progress{background:color-mix(in srgb,var(--vscode-editor-background)84%,var(--vscode-input-background))}}.import-execution-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.import-execution-header h3{margin:0;font-size:14px}.import-progress-bar{background:var(--vscode-input-background);border-radius:999px;height:10px;overflow:hidden}.import-progress-fill{background:linear-gradient(90deg,#75beffd9,#75beff73);height:100%}.import-progress-info{flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;display:flex}.import-phase{font-weight:600}.import-detail,.import-counter{color:var(--vscode-descriptionForeground)}.import-detail-table{border-collapse:collapse;width:100%;margin-top:14px}.import-detail-table th,.import-detail-table td{text-align:left;border-bottom:1px solid var(--vscode-panel-border);vertical-align:middle;padding:10px 8px;font-size:12px}.import-detail-table th{color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.import-detail-table .status-badge{text-transform:uppercase;letter-spacing:.04em;border-radius:999px;align-items:center;padding:4px 9px;font-size:10px;font-weight:700;display:inline-flex}.import-detail-table .status-badge.new{color:#75beff;background:#75beff29}.import-detail-table .status-badge.update{color:#73c991;background:#73c99129}.import-detail-table .status-badge.conflict{color:#ffb169;background:#ffa65729}.import-detail-table .status-badge.duplicate,.import-detail-table .status-badge.missing{color:#cca700;background:#cca70029}.categories-cell,.existing-match,.mime-type-cell,.post-type-cell{color:var(--vscode-descriptionForeground);font-size:11px}.mime-type-cell,.post-type-cell,.existing-match,.slug-cell{font-family:var(--vscode-editor-font-family,ui-monospace,monospace)}.resolution-select,.taxonomy-mapping-input{background:var(--vscode-dropdown-background,var(--vscode-input-background));min-width:150px;color:var(--vscode-dropdown-foreground,var(--vscode-foreground));border:1px solid var(--vscode-dropdown-border,var(--vscode-panel-border));padding:6px 8px}.taxonomy-analyze-row{border-bottom:1px solid var(--vscode-panel-border);align-items:center;gap:12px;margin-top:12px;padding:0 0 12px;display:flex}.taxonomy-analyze-dropdown{position:relative}.taxonomy-analyze-btn{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.taxonomy-model-dropdown{background:var(--vscode-dropdown-background,var(--vscode-sideBar-background));border:1px solid var(--vscode-dropdown-border,var(--vscode-panel-border));z-index:20;border-radius:6px;min-width:220px;max-height:280px;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto;box-shadow:0 10px 24px #0000003d}.taxonomy-model-option{text-align:left;width:100%;display:block;color:var(--vscode-foreground)!important;background:0 0!important;border:none!important;border-radius:0!important;padding:8px 12px!important}.taxonomy-model-option:hover{background:var(--vscode-list-hoverBackground)!important}.taxonomy-analyze-hint{color:var(--vscode-descriptionForeground);font-size:11px}.import-taxonomy-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px;display:grid}.taxonomy-group{flex-direction:column;gap:12px;display:flex}.import-taxonomy-entry,.import-taxonomy-edit-form{flex-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.import-taxonomy-pill{cursor:default;border:none}button.import-taxonomy-pill{cursor:pointer}.mapped-target{background:#73c9911a}.taxonomy-mapping-arrow{color:var(--vscode-descriptionForeground);font-size:12px}.taxonomy-mapping-input{border-radius:6px;min-width:170px}.taxonomy-edit-btn,.taxonomy-clear-btn{justify-content:center;align-items:center;min-width:28px;min-height:28px;display:inline-flex;padding:0 8px!important}.taxonomy-edit-btn.ghost,.taxonomy-clear-btn{border:1px solid var(--vscode-panel-border)!important;color:var(--vscode-descriptionForeground)!important;background:0 0!important}.macros-list{gap:10px;margin-top:14px;display:grid}.macro-item{border:1px solid var(--vscode-panel-border);background:var(--vscode-input-background);border-radius:8px}.macro-item.unmapped{border-left:3px solid #cca700}.macro-header{align-items:center;gap:10px;padding:12px 14px;display:flex}.macro-name,.import-taxonomy-pill{font-family:var(--vscode-editor-font-family,ui-monospace,monospace)}.macro-count{color:var(--vscode-descriptionForeground);margin-left:auto;font-size:11px}.import-empty-state{color:var(--vscode-descriptionForeground);border:1px dashed var(--vscode-panel-border);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:56px 20px;display:flex}.import-empty-state p{margin:0;font-size:13px}@media (max-width:1100px){.import-site-info,.import-stat-cards,.import-taxonomy-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:780px){.import-analysis{padding:14px}.import-file-row,.distribution-row,.import-execute-section,.import-site-info,.import-stat-cards,.import-taxonomy-groups{grid-template-columns:1fr}.import-execute-section,.import-file-row{align-items:stretch}.import-analysis button,.resolution-select,.taxonomy-mapping-input{width:100%}.taxonomy-analyze-row{flex-direction:column;align-items:stretch}.import-taxonomy-entry,.import-taxonomy-edit-form{flex-direction:column;align-items:stretch;width:100%}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
\ No newline at end of file
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .table {
+    display: table;
+  }
+  .h-\[35px\] {
+    height: 35px;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .resize {
+    resize: both;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+}
+:root {
+  --accent-color: #007acc;
+  --accent-color-transparent: rgba(0, 122, 204, 0.25);
+  --vscode-editor-background: #1e1e1e;
+  --vscode-editor-foreground: #cccccc;
+  --vscode-sideBar-background: #252526;
+  --vscode-activityBar-background: #333333;
+  --vscode-activityBar-foreground: #ffffff;
+  --vscode-panel-background: #1e1e1e;
+  --vscode-titleBar-activeBackground: #252526;
+  --vscode-titleBar-activeForeground: #cccccc;
+  --vscode-statusBar-background: #007acc;
+  --vscode-statusBar-foreground: #ffffff;
+  --vscode-tab-activeBackground: #1e1e1e;
+  --vscode-tab-inactiveBackground: #2d2d2d;
+  --vscode-tab-activeForeground: #ffffff;
+  --vscode-tab-inactiveForeground: #969696;
+  --vscode-editorGroupHeader-tabsBackground: #252526;
+  --vscode-editorGroupHeader-tabsBorder: #1e1e1e;
+  --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+  --vscode-foreground: #cccccc;
+  --vscode-descriptionForeground: #858585;
+  --vscode-panel-border: #80808059;
+  --vscode-sideBar-border: #80808059;
+  --vscode-tab-border: #252526;
+  --vscode-focusBorder: #007fd4;
+  --vscode-input-background: rgba(255, 255, 255, 0.06);
+  --vscode-input-border: rgba(255, 255, 255, 0.12);
+  --vscode-list-hoverBackground: #2a2d2e;
+  --vscode-list-activeSelectionBackground: #094771;
+  --vscode-list-activeSelectionForeground: #ffffff;
+  --vscode-activityBarBadge-background: #007acc;
+  --vscode-activityBarBadge-foreground: #ffffff;
+  --vscode-testing-iconPassed: #73c991;
+  --vscode-editorWarning-foreground: #cca700;
+  --vscode-input-foreground: #cccccc;
+  --vscode-input-placeholderForeground: #a6a6a6;
+  --vscode-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --vscode-font-size: 13px;
+  --panel-1: var(--vscode-editor-background);
+  --panel-2: var(--vscode-sideBar-background);
+  --panel-3: var(--vscode-input-background);
+  --ink: var(--vscode-foreground);
+  --line: var(--vscode-panel-border);
+  --accent: var(--vscode-focusBorder);
+  --accent-soft: var(--vscode-list-hoverBackground);
+  --success: var(--vscode-testing-iconPassed);
+  --sidebar-width: 280px;
+  --assistant-width: 360px;
+  color-scheme: dark;
+}
+* {
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--vscode-editor-background);
+  color: var(--vscode-foreground);
+}
+body {
+  overflow: hidden;
+  user-select: none;
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+}
+body > [data-phx-session], body > [data-phx-main] {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+button {
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-background);
+  border: none;
+  padding: 6px 14px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+button:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+button:focus {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: 2px;
+}
+button.secondary {
+  background-color: var(--vscode-button-secondaryBackground);
+}
+button.secondary:hover {
+  background-color: #4a4d51;
+}
+button.compact {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+button.primary {
+  background-color: var(--vscode-button-background);
+  font-weight: 500;
+}
+button.primary:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+button.success {
+  background-color: #28a745;
+}
+button.success:hover {
+  background-color: #218838;
+}
+button.danger {
+  background-color: #dc3545;
+}
+button.danger:hover {
+  background-color: #c82333;
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+button svg, button svg * {
+  pointer-events: none;
+}
+.app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-editor-background);
+}
+.app-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+.window-titlebar {
+  position: relative;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder);
+  flex-shrink: 0;
+  app-region: drag;
+  -webkit-app-region: drag;
+  padding-right: calc(10px + var(--bds-titlebar-overlay-right, 0px));
+}
+.window-titlebar-menu-bar {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-left: 6px;
+  gap: 2px;
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+  z-index: 2;
+}
+.window-titlebar-menu-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.window-titlebar-menu-bar.is-hidden {
+  display: none;
+}
+.window-titlebar.is-mac .window-titlebar-menu-bar {
+  margin-left: max(var(--bds-titlebar-macos-left-inset, 78px), calc(6px + var(--bds-titlebar-overlay-left, 0px)));
+}
+.window-titlebar-menu-button {
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-titleBar-activeForeground);
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.window-titlebar-menu-button:hover, .window-titlebar-action-button:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+.window-titlebar-menu-button.is-active {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+.window-titlebar-menu-button:focus, .window-titlebar-menu-button:focus-visible, .window-titlebar-action-button:focus, .window-titlebar-action-button:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.window-titlebar-menu-dropdown {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  min-width: 210px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: var(--vscode-menu-background, var(--vscode-editorWidget-background));
+  border: 1px solid var(--vscode-menu-border, var(--vscode-panel-border));
+  border-radius: 6px;
+  box-shadow: var(--vscode-widget-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+  z-index: 10;
+}
+.window-titlebar-menu-item {
+  border: none;
+  background: transparent;
+  color: var(--vscode-menu-foreground, var(--vscode-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  text-align: left;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.window-titlebar-menu-item:focus, .window-titlebar-menu-item:focus-visible {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+.window-titlebar-menu-item:hover, .window-titlebar-menu-item.is-keyboard-active {
+  background-color: var(--vscode-menu-selectionBackground, var(--vscode-toolbar-hoverBackground));
+}
+.window-titlebar-menu-item-accelerator {
+  opacity: 0.8;
+}
+.window-titlebar-menu-separator {
+  height: 1px;
+  margin: 4px 2px;
+  background-color: var(--vscode-menu-separatorBackground, rgba(255, 255, 255, 0.08));
+}
+.window-titlebar-drag-region {
+  flex: 1;
+  height: 100%;
+}
+.window-titlebar-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 45%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-titleBar-activeForeground);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  pointer-events: none;
+}
+.window-titlebar-actions {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 6px;
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+}
+.window-titlebar-action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  line-height: 0;
+  background: transparent;
+  border: none;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+}
+.window-titlebar-sidebar-icon, .window-titlebar-panel-icon, .window-titlebar-assistant-icon {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.window-titlebar-sidebar-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 33.3333%;
+  width: 1.5px;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+.window-titlebar-panel-icon::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 66.6667%;
+  height: 1.5px;
+  transform: translateY(-50%);
+  background-color: currentColor;
+}
+.window-titlebar-assistant-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 66.6667%;
+  width: 1.5px;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+.window-titlebar-sidebar-pane, .window-titlebar-panel-pane, .window-titlebar-assistant-pane {
+  position: absolute;
+  background-color: currentColor;
+  transition: opacity 120ms ease;
+}
+.window-titlebar-sidebar-pane {
+  left: 0;
+  top: 0;
+  width: 33.3333%;
+  height: 100%;
+}
+.window-titlebar-panel-pane {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 33.3333%;
+}
+.window-titlebar-assistant-pane {
+  right: 0;
+  top: 0;
+  width: 33.3333%;
+  height: 100%;
+}
+.window-titlebar-sidebar-icon.is-inactive .window-titlebar-sidebar-pane, .window-titlebar-panel-icon.is-inactive .window-titlebar-panel-pane, .window-titlebar-assistant-icon.is-inactive .window-titlebar-assistant-pane {
+  opacity: 0;
+}
+.panel-shell {
+  height: 200px;
+  border-top: 1px solid var(--vscode-panel-border);
+  background: var(--vscode-panel-background);
+  display: flex;
+  flex-direction: column;
+}
+.panel-shell.is-hidden {
+  display: none;
+}
+.editor-toolbar-button.is-destructive {
+  color: #f48771;
+}
+.shell-overlay-backdrop, .gallery-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.68);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  z-index: 10000;
+}
+.shell-overlay-dismiss {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+.gallery-overlay {
+  position: relative;
+  width: min(980px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #1e1e1e;
+  border: 1px solid #3c3c3c;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+.insert-modal-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  padding: 16px;
+}
+.insert-modal-media-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid #3c3c3c;
+  border-radius: 8px;
+  background: #252526;
+  color: inherit;
+  padding: 10px;
+  text-align: left;
+}
+.insert-modal-media-thumb {
+  width: 100%;
+  min-height: 112px;
+  border-radius: 6px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.04);
+}
+.insert-modal-media-title {
+  font-weight: 600;
+  color: #ffffff;
+}
+.language-picker-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.language-picker-option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 12px;
+  align-items: center;
+  border: none;
+  border-radius: 4px;
+  padding: 12px 16px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.language-picker-label, .language-picker-status, .lightbox-counter {
+  color: #9d9d9d;
+  font-size: 12px;
+}
+.lightbox-counter {
+  margin-top: 4px;
+}
+@media (max-width: 720px) {
+  .insert-modal-media-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.panel-header {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  background-color: var(--vscode-sideBar-background);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.panel-tabs {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+.panel-tab {
+  border: none;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  padding: 0 12px;
+  cursor: pointer;
+}
+.panel-tab.active {
+  color: var(--vscode-tab-activeForeground);
+}
+.panel-close {
+  background: transparent;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0;
+}
+.panel-close:hover {
+  background-color: var(--vscode-list-hoverBackground);
+  color: var(--vscode-editor-foreground);
+}
+.panel-content {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 14px;
+}
+.panel-entry, .assistant-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.output-list, .git-log-list {
+  display: flex;
+  flex-direction: column;
+}
+.task-list {
+  display: flex;
+  flex-direction: column;
+}
+.task-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.task-status {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
+}
+.task-status-running {
+  color: var(--vscode-terminal-ansiGreen, var(--vscode-statusBar-foreground));
+}
+.task-status-pending {
+  color: var(--vscode-terminal-ansiYellow, var(--vscode-statusBar-foreground));
+}
+.panel-empty-state {
+  min-height: 100%;
+  justify-content: center;
+}
+.status-bar {
+  height: 22px;
+  background: var(--vscode-statusBar-background);
+  color: var(--vscode-statusBar-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.status-bar-left, .status-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.status-bar-left {
+  flex-shrink: 1;
+  min-width: 0;
+}
+.status-shell-controls {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.status-shell-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 100%;
+  padding: 0;
+  line-height: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.status-shell-toggle-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.status-shell-toggle-button:focus, .status-shell-toggle-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
+}
+.status-shell-toggle-button .window-titlebar-sidebar-icon, .status-shell-toggle-button .window-titlebar-panel-icon, .status-shell-toggle-button .window-titlebar-assistant-icon {
+  width: 12px;
+  height: 12px;
+}
+.status-bar-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.status-bar-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.status-bar-task-button {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.status-bar-item.theme-badge {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 3px;
+}
+.status-bar-item.language-badge {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 3px;
+  gap: 4px;
+}
+.status-bar-item.offline-badge {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.4;
+  font-size: 13px;
+  padding: 0 4px;
+}
+.status-bar-item.offline-badge.active {
+  background-color: rgba(255, 196, 0, 0.28);
+  opacity: 1;
+}
+.project-selector {
+  position: relative;
+  flex-shrink: 0;
+}
+.project-selector-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 22px;
+  background: transparent;
+  border: none;
+  color: var(--vscode-statusBar-foreground);
+  cursor: pointer;
+  font-size: 12px;
+  text-align: left;
+}
+.project-selector-trigger:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.project-selector-trigger:focus {
+  outline: none;
+}
+.project-icon, .dropdown-arrow, .project-check-icon {
+  flex-shrink: 0;
+}
+.project-name, .project-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-name {
+  max-width: 180px;
+}
+.dropdown-arrow {
+  opacity: 0.6;
+}
+.project-dropdown {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  min-width: 220px;
+  margin-bottom: 4px;
+  background-color: #252526;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 4px;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  overflow: hidden;
+}
+.project-dropdown-header {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+.project-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.project-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.project-item:hover, .project-item.active {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.project-item.active .project-check-icon {
+  color: #89d185;
+}
+.project-dropdown-footer {
+  padding: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  display: grid;
+  gap: 6px;
+}
+.create-project-btn, .existing-project-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 12px;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: inherit;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.create-project-btn:hover, .existing-project-btn:hover {
+  background-color: rgba(255, 255, 255, 0.18);
+}
+.status-bar-language-select {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+}
+.status-bar-language-select:focus {
+  outline: none;
+}
+.status-bar-count {
+  font-size: 11px;
+  opacity: 0.85;
+}
+.status-bar-item.brand {
+  font-weight: 600;
+}
+@media (max-width: 960px) {
+  .editor-frame {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .editor-meta {
+    border-left: none;
+    border-top: 1px solid var(--vscode-panel-border);
+    padding-left: 0;
+    padding-top: 10px;
+  }
+}
+.editor-section ul {
+  margin: 12px 0 0;
+  padding-left: 18px;
+}
+.editor-toolbar {
+  display: flex;
+  gap: 10px;
+}
+.editor-toolbar button {
+  padding: 9px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel-3);
+  color: var(--ink);
+}
+.editor-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.editor-meta-card, .assistant-card, .panel-entry {
+  padding: 16px;
+}
+.sidebar-header, .assistant-header, .panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+}
+.activity-bar {
+  width: 48px;
+  height: 100%;
+  background-color: var(--vscode-activityBar-background);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid var(--vscode-panel-border);
+}
+.activity-bar-top, .activity-bar-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 0;
+}
+.activity-bar-item {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--vscode-activityBar-foreground);
+  opacity: 0.6;
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+  border-radius: 0;
+}
+.activity-bar-item:hover {
+  opacity: 1;
+  background: transparent;
+}
+.activity-bar-item.active {
+  opacity: 1;
+}
+.activity-bar-item.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--vscode-activityBar-foreground);
+}
+.activity-bar-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 600;
+  background-color: var(--vscode-activityBarBadge-background);
+  color: var(--vscode-activityBarBadge-foreground);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.activity-bar-item svg, .tab-icon svg {
+  display: block;
+}
+.sidebar-shell, .assistant-sidebar-shell {
+  display: flex;
+  min-width: 0;
+}
+.sidebar-shell {
+  width: var(--sidebar-width);
+}
+.assistant-sidebar-shell {
+  width: var(--assistant-width);
+}
+.sidebar, .assistant-sidebar {
+  width: 100%;
+  height: 100%;
+  background: var(--vscode-sideBar-background);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.sidebar {
+  border-right: 1px solid var(--vscode-sideBar-border);
+}
+.assistant-sidebar {
+  border-left: 1px solid var(--vscode-sideBar-border);
+}
+.sidebar-shell.is-hidden, .assistant-sidebar-shell.is-hidden {
+  width: 0;
+  overflow: hidden;
+}
+.sidebar-shell.is-hidden .resizable-panel-divider, .assistant-sidebar-shell.is-hidden .resizable-panel-divider {
+  display: none;
+}
+.resizable-panel-divider {
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  position: relative;
+}
+.resizable-panel-divider:hover::after {
+  background-color: var(--vscode-focusBorder);
+}
+.resizable-panel-divider::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1px;
+  width: 1px;
+  background-color: var(--vscode-panel-border);
+}
+.assistant-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.assistant-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.assistant-card span, .panel-entry span, .editor-meta-row span, .editor-subtitle, .sidebar-item span {
+  color: var(--vscode-descriptionForeground);
+}
+.sidebar-content, .assistant-content {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 0;
+}
+.sidebar-section {
+  padding-bottom: 10px;
+}
+.sidebar-section-header {
+  padding: 0 12px 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
+}
+.sidebar-item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 7px 12px;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  background: var(--vscode-sideBar-background);
+  color: var(--vscode-foreground);
+}
+.sidebar-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+.sidebar-item.selected {
+  outline: 1px solid var(--vscode-focusBorder);
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.sidebar-badge {
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: rgba(110, 203, 139, 0.16);
+  color: var(--vscode-testing-iconPassed);
+}
+.sidebar-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+}
+.sidebar-section {
+  margin-bottom: 4px;
+  padding-bottom: 0;
+}
+.sidebar-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-sideBar-foreground);
+}
+.sidebar-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+.section-icon {
+  font-size: 8px;
+}
+.section-icon.status-draft {
+  color: var(--vscode-editorWarning-foreground);
+}
+.section-icon.status-published {
+  color: var(--vscode-testing-iconPassed);
+}
+.section-icon.status-archived {
+  color: var(--vscode-descriptionForeground);
+}
+.sidebar-list {
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-item-row {
+  display: flex;
+  align-items: stretch;
+}
+.sidebar-item {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 12px 6px 12px;
+  border: none;
+  border-left: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.sidebar-item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.sidebar-item.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  border-left-color: var(--vscode-focusBorder);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.sidebar-post-item {
+  flex-direction: row;
+}
+.sidebar-item.post-type-picture {
+  background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
+}
+.sidebar-item.post-type-aside {
+  background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
+}
+.sidebar-item.post-type-quote {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
+}
+.sidebar-item.post-type-link {
+  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
+}
+.sidebar-item.post-type-video {
+  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
+}
+.post-type-icon {
+  font-size: 14px;
+  line-height: 1.4;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+.sidebar-item-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+.sidebar-item-title-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.sidebar-item-title {
+  font-size: 13px;
+  color: var(--vscode-sideBar-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar-item-language-badge {
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: var(--vscode-badge-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-badge-background) 82%, transparent);
+  }
+  color: var(--vscode-badge-foreground);
+  font-size: 10px;
+  font-weight: 700;
+  text-align: center;
+}
+.sidebar-item-meta {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  margin-top: 2px;
+}
+.media-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  padding: 4px;
+}
+.media-item-row {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+}
+.media-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.media-item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.media-item.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.media-thumbnail {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vscode-input-background);
+  border-radius: 4px;
+  flex-shrink: 0;
+  overflow: hidden;
+  font-size: 20px;
+}
+.media-thumbnail.has-image {
+  position: relative;
+}
+.media-thumbnail-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.media-thumbnail-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.media-thumbnail.is-loaded .media-thumbnail-image {
+  opacity: 1;
+}
+.media-thumbnail.is-loaded .media-thumbnail-fallback {
+  opacity: 0;
+}
+.media-item-info {
+  flex: 1;
+  min-width: 0;
+}
+.media-item-name {
+  font-size: 12px;
+  color: var(--vscode-sideBar-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.media-item-size {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+.sidebar-item-row .sidebar-item, .media-item-row .media-item {
+  flex: 1;
+  min-width: 0;
+}
+.sidebar-actions {
+  display: flex;
+  gap: 4px;
+}
+.sidebar-action {
+  background: transparent;
+  border: none;
+  padding: 2px;
+  color: var(--vscode-sideBar-foreground);
+  cursor: pointer;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+}
+.sidebar-action:hover {
+  opacity: 1;
+  background-color: var(--vscode-list-hoverBackground);
+}
+.sidebar-action.active {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  opacity: 1;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px 8px;
+  position: relative;
+}
+.search-box input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 28px 6px 8px;
+  font-size: 12px;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-input-border);
+  color: var(--vscode-input-foreground);
+  border-radius: 3px;
+}
+.search-box input::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+.search-box input:focus {
+  outline: none;
+  border-color: var(--vscode-focusBorder);
+}
+.search-box button[type="submit"] {
+  position: absolute;
+  right: 40px;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  opacity: 0.7;
+}
+.search-box button[type="submit"]:hover {
+  opacity: 1;
+}
+.search-box .clear-search {
+  position: absolute;
+  right: 16px;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 10px;
+  opacity: 0.7;
+}
+.search-box .clear-search:hover {
+  opacity: 1;
+}
+.calendar-view {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vscode-sideBar-border);
+}
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground);
+  margin-bottom: 8px;
+}
+.calendar-header.collapsible-header {
+  cursor: pointer;
+  padding: 4px 6px;
+  margin: 0 -6px 8px -6px;
+  border-radius: 3px;
+  user-select: none;
+}
+.calendar-header.collapsible-header:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.calendar-header.collapsible-header.collapsed {
+  margin-bottom: 0;
+}
+.calendar-header .collapse-icon {
+  font-size: 9px;
+  margin-right: 4px;
+  opacity: 0.7;
+}
+.calendar-header .clear-filter {
+  background: transparent;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 10px;
+  padding: 2px 4px;
+  opacity: 0.7;
+}
+.calendar-header .clear-filter:hover {
+  opacity: 1;
+}
+.calendar-years {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.calendar-year-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 12px;
+  color: var(--vscode-sideBar-foreground);
+  background: transparent;
+  text-align: left;
+}
+.calendar-year-header:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.calendar-year-header.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+}
+.calendar-year-header .expand-icon {
+  font-size: 8px;
+  color: var(--vscode-descriptionForeground);
+  width: 10px;
+}
+.calendar-year-header .year-label {
+  flex: 1;
+}
+.calendar-year-header .year-count {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+  background-color: var(--vscode-badge-background);
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+.calendar-months {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 16px;
+  margin-top: 2px;
+}
+.calendar-month {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 6px;
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 12px;
+  color: var(--vscode-sideBar-foreground);
+  background: transparent;
+  text-align: left;
+}
+.calendar-month:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.calendar-month.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+}
+.calendar-month .month-count {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+.calendar-empty {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+  padding: 8px;
+  text-align: center;
+}
+.month-count, .sidebar-section-count {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+.filter-panel {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vscode-sideBar-border);
+}
+.filter-section {
+  margin-bottom: 12px;
+}
+.filter-section:last-child {
+  margin-bottom: 0;
+}
+.filter-header {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground);
+  margin-bottom: 6px;
+}
+.filter-header.collapsible-header {
+  cursor: pointer;
+  padding: 4px 6px;
+  margin: 0 -6px 6px -6px;
+  border-radius: 3px;
+  user-select: none;
+}
+.filter-header.collapsible-header:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.filter-header.collapsible-header.collapsed {
+  margin-bottom: 0;
+}
+.filter-header .collapse-icon {
+  font-size: 9px;
+  margin-right: 4px;
+  opacity: 0.7;
+}
+.filter-header .clear-filter {
+  background: transparent;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 10px;
+  padding: 2px 4px;
+  margin-left: auto;
+  opacity: 0.7;
+}
+.filter-header .clear-filter:hover {
+  opacity: 1;
+}
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.filter-chip {
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+  border: none;
+  padding: 2px 8px;
+  font-size: 11px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.15s, opacity 0.15s;
+}
+.filter-chip:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+.filter-chip.active {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+.filter-chip.has-color {
+  border: 1px solid transparent;
+}
+.filter-chip.has-color:hover {
+  opacity: 0.85;
+}
+.filter-chip.has-color.active {
+  box-shadow: 0 0 0 2px var(--vscode-focusBorder, #007fd4);
+}
+.filter-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  background-color: var(--vscode-list-hoverBackground);
+  border-bottom: 1px solid var(--vscode-sideBar-border);
+}
+.filter-status button {
+  background: transparent;
+  border: none;
+  color: var(--accent-color);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0;
+}
+.filter-status button:hover {
+  text-decoration: underline;
+  background: transparent;
+}
+.sidebar-load-more {
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+}
+.load-more-button {
+  width: 100%;
+  padding: 8px 16px;
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.load-more-button:hover:not(:disabled) {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+.filter-section {
+  padding-top: 4px;
+}
+.filter-header {
+  width: 100%;
+  padding: 6px 0;
+  background: transparent;
+  color: var(--vscode-foreground);
+  text-align: left;
+}
+.filter-chips {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.filter-chip {
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-foreground);
+}
+.filter-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.filter-status button, .load-more-button {
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-foreground);
+}
+.sidebar-load-more {
+  padding-bottom: 12px;
+}
+.load-more-button {
+  width: 100%;
+}
+.media-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.media-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.media-item-size {
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.chat-list-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--vscode-sideBar-border);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.chat-list-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+.chat-list-item.active {
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.chat-item-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+.chat-item-open {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.chat-item-open:hover {
+  background: transparent;
+}
+.chat-item-open:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: 2px;
+}
+.chat-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-item-date {
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.sidebar-delete-button {
+  background: transparent;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 6px;
+  flex-shrink: 0;
+  opacity: 1;
+  transition: opacity 0.15s, color 0.15s;
+}
+.sidebar-item-row:hover .sidebar-delete-button, .sidebar-item-row .sidebar-item.selected ~ .sidebar-delete-button, .media-item-row:hover .sidebar-delete-button, .media-item-row .media-item.selected ~ .sidebar-delete-button, .chat-list-item:hover .sidebar-delete-button, .chat-list-item.active .sidebar-delete-button {
+  opacity: 1;
+}
+.sidebar-delete-button:hover {
+  color: var(--vscode-errorForeground);
+}
+.sidebar-item-row .sidebar-item.selected ~ .sidebar-delete-button, .media-item-row .media-item.selected ~ .sidebar-delete-button {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.settings-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 12px 12px;
+}
+.settings-nav-entry {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.settings-nav-entry:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+.settings-nav-entry-icon {
+  width: 18px;
+  flex: 0 0 18px;
+  text-align: center;
+}
+.sidebar-empty {
+  padding: 16px 12px;
+  color: var(--vscode-descriptionForeground);
+}
+@media (max-width: 820px) {
+  .dashboard-stats {
+    grid-template-columns: 1fr;
+  }
+  .recent-post-item {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .media-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.tab-bar {
+  display: flex;
+  align-items: center;
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
+  border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder);
+  height: 35px;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+.tab-bar-tabs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+}
+.tab-bar-tabs::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+.tab-bar-empty {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px 0 10px;
+  height: 100%;
+  min-width: 100px;
+  max-width: 180px;
+  cursor: pointer;
+  background-color: var(--vscode-tab-inactiveBackground);
+  border: none;
+  border-right: 1px solid var(--vscode-tab-border);
+  color: var(--vscode-tab-inactiveForeground);
+  font-size: 13px;
+  user-select: none;
+  position: relative;
+  flex-shrink: 0;
+}
+.tab-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  cursor: inherit;
+}
+.tab:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.tab.active {
+  background-color: var(--vscode-tab-activeBackground);
+  color: var(--vscode-tab-activeForeground);
+}
+.tab.active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--vscode-focusBorder);
+}
+.tab.transient .tab-title {
+  font-style: italic;
+}
+.tab-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.tab-dirty-indicator {
+  color: var(--vscode-editorWarning-foreground, #e2c08d);
+  font-size: 10px;
+  line-height: 1;
+}
+.tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+.tab-title, .status-bar-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tab-close {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--vscode-icon-foreground, #c5c5c5);
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  opacity: 0;
+}
+.tab:hover .tab-close {
+  opacity: 0.7;
+}
+.tab.active .tab-close {
+  opacity: 0.7;
+}
+.tab-close:hover {
+  opacity: 1 !important;
+  background-color: var(--vscode-toolbar-hoverBackground);
+  color: var(--vscode-tab-activeForeground);
+}
+.tab-close:active {
+  background-color: var(--vscode-toolbar-activeBackground, rgba(99, 102, 103, 0.31));
+}
+.tab.dirty .tab-dirty-indicator {
+  display: block;
+}
+.tab.dirty .tab-close {
+  display: none;
+}
+.tab.dirty:hover .tab-close {
+  display: flex;
+  opacity: 0.7;
+}
+.tab.dirty:hover .tab-dirty-indicator {
+  display: none;
+}
+.tab:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, #007fd4);
+  outline-offset: -1px;
+}
+.output-item-details {
+  margin: 4px 0 0;
+  padding: 8px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.03);
+  color: inherit;
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  user-select: text;
+}
+.editor-shell {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--vscode-editor-background);
+}
+.editor-frame {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 240px;
+  gap: 16px;
+  padding: 14px 16px;
+}
+.editor-main, .editor-meta, .panel-shell, .assistant-card {
+  min-width: 0;
+}
+.editor-kicker {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
+}
+.editor-title {
+  margin: 10px 0 6px;
+  font-size: 24px;
+  font-weight: 600;
+}
+.editor-subtitle {
+  margin: 0 0 14px;
+}
+.editor-toolbar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.editor-toolbar-button {
+  border: 1px solid var(--vscode-panel-border);
+  background: transparent;
+  color: var(--vscode-foreground);
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+.editor-toolbar-button:hover, .panel-tab:hover {
+  background: var(--vscode-toolbar-hoverBackground);
+}
+.editor-section {
+  padding-top: 4px;
+}
+.editor-section h2 {
+  margin: 0 0 8px;
+  font-size: 16px;
+}
+.editor-list {
+  margin: 0;
+  padding-left: 18px;
+  line-height: 1.5;
+}
+.editor-list.compact li {
+  margin-bottom: 6px;
+}
+.editor-meta {
+  border-left: 1px solid var(--vscode-panel-border);
+  padding-left: 16px;
+}
+.editor-meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.post-editor .post-editor-markdown-surface, .scripts-monaco.monaco-editor-shell, .templates-monaco.monaco-editor-shell {
+  min-height: 0;
+  background: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  border-color: var(--vscode-panel-border);
+}
+.post-editor .monaco-editor-instance, .scripts-monaco .monaco-editor-instance, .templates-monaco .monaco-editor-instance {
+  min-height: 0;
+  background: var(--vscode-editor-background);
+}
+.monaco-editor-shell .monaco-editor, .monaco-editor-shell .monaco-editor .margin, .monaco-editor-shell .monaco-editor-background, .monaco-editor-shell .monaco-editor .inputarea.ime-input {
+  background-color: var(--vscode-editor-background) !important;
+}
+.monaco-editor-shell .monaco-editor, .monaco-editor-shell .monaco-editor .view-line {
+  color: var(--vscode-editor-foreground) !important;
+}
+.monaco-editor-shell .monaco-editor .line-numbers {
+  color: var(--vscode-editorLineNumber-foreground, #858585) !important;
+}
+.monaco-editor-shell .monaco-editor .current-line, .monaco-editor-shell .monaco-editor .view-overlays .current-line {
+  border-color: var(--vscode-editor-lineHighlightBorder, transparent) !important;
+}
+.help-doc-view {
+  --doc-bg: var(--panel-1, #1e1e1e);
+  --doc-surface: var(--panel-2, #252526);
+  --doc-border: var(--line, #3c3c3c);
+  --doc-text: var(--vscode-editor-foreground, #d4d4d4);
+  --doc-muted: var(--vscode-descriptionForeground, #9da3ad);
+  --doc-link: var(--vscode-textLink-foreground, #9cdcfe);
+  --doc-code-bg: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.2));
+  --doc-hover: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06));
+}
+.help-doc-view .misc-editor-content {
+  padding: 0;
+  overflow: hidden;
+}
+.documentation-view, .documentation-scroll {
+  background: var(--doc-bg, var(--vscode-editor-background));
+}
+.documentation-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+.documentation-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 28px 24px 40px;
+}
+.documentation-content {
+  max-width: 920px;
+  margin: 0 auto;
+  color: var(--doc-text, var(--vscode-editor-foreground));
+}
+.documentation-article, .help-doc-markdown {
+  background: var(--doc-surface);
+  padding: 18px 20px 24px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+}
+.documentation-content.markdown-body > .documentation-article > :first-child {
+  margin-top: 0;
+}
+.documentation-content.markdown-body > .documentation-article > :last-child {
+  margin-bottom: 0;
+}
+.documentation-content.markdown-body h1, .documentation-content.markdown-body h2, .documentation-content.markdown-body h3 {
+  color: var(--doc-text);
+  border-bottom: 1px solid var(--doc-border);
+  padding-bottom: 6px;
+  line-height: 1.25;
+}
+.documentation-content.markdown-body h1 {
+  font-size: 1.9rem;
+}
+.documentation-content.markdown-body h2 {
+  margin-top: 2rem;
+  font-size: 1.35rem;
+}
+.documentation-content.markdown-body h3 {
+  margin-top: 1.6rem;
+  font-size: 1.05rem;
+}
+.documentation-content.markdown-body p, .documentation-content.markdown-body li, .documentation-content.markdown-body td, .documentation-content.markdown-body th {
+  line-height: 1.6;
+}
+.documentation-content.markdown-body a {
+  color: var(--doc-link);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.14em;
+}
+.documentation-content.markdown-body a:hover {
+  color: var(--doc-text);
+}
+.documentation-content.markdown-body hr {
+  border: 0;
+  border-top: 1px solid var(--doc-border);
+  opacity: 0.8;
+}
+.documentation-content.markdown-body code {
+  background: var(--doc-code-bg);
+  padding: 0.12em 0.4em;
+  border-radius: 4px;
+  font: 0.92em/1.45 "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+}
+.documentation-content.markdown-body pre {
+  margin: 0.9rem 0 1.2rem;
+  background: var(--doc-code-bg);
+  border: 1px solid var(--doc-border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  overflow: auto;
+}
+.documentation-content.markdown-body pre code {
+  padding: 0;
+  background: transparent;
+  font-size: 0.9em;
+}
+.documentation-content.markdown-body blockquote {
+  margin: 1rem 0;
+  padding: 0 0 0 12px;
+  border-left: 3px solid var(--doc-border);
+  color: var(--doc-muted);
+}
+.documentation-content.markdown-body table {
+  width: 100%;
+  margin: 1rem 0 1.4rem;
+  border-collapse: collapse;
+  display: table;
+}
+.documentation-content.markdown-body th, .documentation-content.markdown-body td {
+  border: 1px solid var(--doc-border);
+  padding: 8px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+.documentation-content.markdown-body th {
+  background: var(--doc-hover);
+  font-weight: 700;
+}
+.documentation-content.markdown-body ul, .documentation-content.markdown-body ol {
+  margin: 0.85rem 0 1rem;
+  padding-left: 1.5rem;
+  display: block;
+}
+.documentation-content.markdown-body ul {
+  list-style: disc;
+}
+.documentation-content.markdown-body ol {
+  list-style: decimal;
+}
+.documentation-content.markdown-body li {
+  margin: 0.3rem 0;
+}
+.documentation-content.markdown-body li > ul, .documentation-content.markdown-body li > ol {
+  margin-top: 0.35rem;
+  margin-bottom: 0.35rem;
+}
+.documentation-content.markdown-body strong {
+  color: var(--doc-text);
+}
+.documentation-content.markdown-body img {
+  max-width: 100%;
+  height: auto;
+}
+.post-editor.editor, .scripts-view-shell.editor, .templates-view-shell.editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-editor-background);
+  overflow: hidden;
+}
+.post-editor .editor-header, .scripts-view-shell.editor .editor-header, .templates-view-shell.editor .editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 12px;
+  min-height: 35px;
+  background-color: var(--vscode-tab-activeBackground);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.post-editor .editor-tabs, .scripts-view-shell.editor .editor-tabs, .templates-view-shell.editor .editor-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+.post-editor .editor-tab, .scripts-view-shell.editor .editor-tab, .templates-view-shell.editor .editor-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 12px;
+  background-color: var(--vscode-tab-inactiveBackground);
+  color: var(--vscode-tab-inactiveForeground);
+  font-size: 13px;
+  border-radius: 4px 4px 0 0;
+}
+.post-editor .editor-tab.active, .scripts-view-shell.editor .editor-tab.active, .templates-view-shell.editor .editor-tab.active {
+  background-color: var(--vscode-tab-activeBackground);
+  color: var(--vscode-tab-activeForeground);
+}
+.post-editor .editor-tab-title, .scripts-view-shell.editor .editor-tab-title, .templates-view-shell.editor .editor-tab-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.post-editor .editor-tab-dirty {
+  color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-editorWarning-foreground));
+  font-size: 10px;
+}
+.post-editor .editor-tab-meta {
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.post-editor .editor-actions, .scripts-view-shell.editor .editor-actions, .templates-view-shell.editor .editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.post-editor .quick-actions-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.post-editor .quick-actions-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.post-editor .quick-actions-btn-icon {
+  font-size: 12px;
+  line-height: 1;
+}
+.post-editor .quick-actions-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  min-width: 280px;
+  background: var(--vscode-dropdown-background, #3c3c3c);
+  border: 1px solid var(--vscode-dropdown-border, #454545);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  overflow: hidden;
+}
+.post-editor .quick-actions-divider {
+  height: 1px;
+  background: var(--vscode-dropdown-border, #454545);
+}
+.post-editor .quick-action-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: var(--vscode-dropdown-foreground, #ccc);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+.post-editor .quick-action-item:hover:not(:disabled) {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+.post-editor .quick-action-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.post-editor .quick-action-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.post-editor .quick-action-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.post-editor .quick-action-text strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+.post-editor .quick-action-text small {
+  font-size: 11px;
+  opacity: 0.7;
+}
+.post-editor .status-badge, .scripts-view-shell.editor .status-badge, .templates-view-shell.editor .status-badge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.post-editor .status-badge.status-draft, .scripts-view-shell.editor .status-badge.status-draft, .templates-view-shell.editor .status-badge.status-draft {
+  background-color: rgba(204, 167, 0, 0.2);
+  color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-editorWarning-foreground));
+}
+.post-editor .status-badge.status-published, .scripts-view-shell.editor .status-badge.status-published, .templates-view-shell.editor .status-badge.status-published {
+  background-color: rgba(115, 201, 145, 0.2);
+  color: var(--vscode-testing-iconPassed);
+}
+.post-editor .status-badge.status-archived, .scripts-view-shell.editor .status-badge.status-archived, .templates-view-shell.editor .status-badge.status-archived {
+  background-color: rgba(133, 133, 133, 0.2);
+  color: var(--vscode-descriptionForeground);
+}
+.post-editor .auto-save-indicator {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+.post-editor .editor-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  overflow-y: auto;
+}
+.post-editor .metadata-toggle-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.post-editor .metadata-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 4px;
+  background: none;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+.post-editor .metadata-toggle:hover {
+  color: var(--vscode-foreground);
+}
+.post-editor .metadata-toggle-chevron {
+  font-size: 10px;
+}
+.post-editor .editor-header-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.post-editor .editor-header-row.is-collapsed {
+  display: none;
+}
+.post-editor .editor-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.post-editor .editor-media-panel {
+  width: 200px;
+  flex-shrink: 0;
+}
+.post-editor .editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 200px;
+}
+.post-editor .editor-field label, .post-editor .editor-body label, .post-editor .post-editor-links-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.post-editor .editor-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--vscode-foreground);
+}
+.post-editor .post-editor-input, .post-editor .post-editor-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
+  border-radius: 4px;
+  background: var(--vscode-input-background, rgba(255, 255, 255, 0.06));
+  color: var(--vscode-input-foreground, var(--vscode-foreground));
+  font: inherit;
+}
+.post-editor .post-editor-input.is-readonly {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+.post-editor .post-editor-textarea {
+  line-height: 1.5;
+  resize: vertical;
+}
+.post-editor .post-editor-excerpt {
+  min-height: 96px;
+}
+.post-editor .tag-input-container {
+  position: relative;
+  width: 100%;
+}
+.post-editor .tag-input-container.is-disabled {
+  opacity: 0.72;
+}
+.post-editor .tag-input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  min-height: 38px;
+  border: 1px solid var(--vscode-input-border, #3c3c3c);
+  border-radius: 4px;
+  background: var(--vscode-input-background, #3c3c3c);
+  cursor: text;
+}
+.post-editor .tag-input-wrapper:focus-within {
+  border-color: var(--vscode-focusBorder, #007fd4);
+  outline: none;
+}
+.post-editor .tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 0.85rem;
+  background: var(--vscode-badge-background, #4d4d4d);
+  border: 1px solid var(--vscode-widget-border, #454545);
+  border-radius: 4px;
+  color: var(--vscode-badge-foreground, #ffffff);
+  white-space: nowrap;
+}
+.post-editor .tag-chip.has-color {
+  border-radius: 12px;
+  padding: 3px 10px;
+}
+.post-editor .tag-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  border-radius: 50%;
+  transition: opacity 0.15s, background 0.15s;
+}
+.post-editor .tag-chip-remove:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+.post-editor .tag-chip.has-color .tag-chip-remove:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+.post-editor .tag-input-field {
+  flex: 1;
+  min-width: 120px;
+  padding: 2px 4px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-input-foreground, #cccccc);
+  font-family: inherit;
+  font-size: 0.9rem;
+  outline: none;
+}
+.post-editor .tag-input-field::placeholder {
+  color: var(--vscode-input-placeholderForeground, #a6a6a6);
+}
+.post-editor .tag-input-field:disabled {
+  cursor: not-allowed;
+}
+.post-editor .tag-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  padding: 4px;
+  background: var(--vscode-dropdown-background, #3c3c3c);
+  border: 1px solid var(--vscode-widget-border, #454545);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.post-editor .tag-suggestion {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-dropdown-foreground, #f0f0f0);
+  font-family: inherit;
+  font-size: 0.9rem;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+.post-editor .tag-suggestion:hover, .post-editor .tag-suggestion.selected {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+.post-editor .tag-suggestion-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.post-editor .tag-suggestion-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.post-editor .tag-suggestion.create-new {
+  border-top: 1px solid var(--vscode-widget-border, #454545);
+  margin-top: 4px;
+  padding: 6px 8px;
+  padding-top: 12px;
+  color: var(--vscode-notificationsInfoIcon-foreground, #75beff);
+}
+.post-editor .tag-suggestion.create-new:first-child {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 8px;
+}
+.post-editor .tag-suggestion-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px dashed currentColor;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.post-editor .editor-field-row {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+.post-editor .editor-language-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.post-editor .editor-language-row select {
+  flex: 1;
+  min-width: 0;
+}
+.post-editor .editor-translations-flags {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+.post-editor .editor-translation-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.post-editor .editor-translation-flag.status-draft {
+  opacity: 0.82;
+}
+.post-editor .editor-translation-flag.status-archived {
+  opacity: 0.45;
+  filter: grayscale(0.35);
+}
+.post-editor .editor-translation-flag.active {
+  border-color: var(--vscode-testing-iconQueued, #cca700);
+  background: var(--vscode-testing-iconQueued, #cca700);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-testing-iconQueued, #cca700) 14%, transparent);
+  }
+}
+.post-editor .editor-translation-flag:hover {
+  background: var(--vscode-list-hoverBackground);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-list-hoverBackground) 75%, transparent);
+  }
+}
+.post-editor .post-editor-links-panel, .post-editor .post-editor-side-panel {
+  padding: 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 8px;
+  background: var(--vscode-editor-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-editor-background) 82%, white 3%);
+  }
+}
+.post-editor .post-editor-side-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.post-editor .post-editor-links-columns {
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+.post-editor .post-editor-links-columns > div {
+  flex: 1;
+  min-width: 0;
+}
+.post-editor .post-editor-empty, .post-editor .post-editor-media-meta {
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.post-editor .post-editor-media-list {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.post-editor .post-editor-media-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+}
+.post-editor .editor-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 320px;
+}
+.post-editor .editor-toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.post-editor .editor-toolbar-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.post-editor .editor-toolbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.post-editor .editor-toolbar-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.post-editor .editor-mode-toggle {
+  display: flex;
+  gap: 4px;
+}
+.post-editor .editor-mode-toggle button, .post-editor .editor-toolbar-button {
+  padding: 4px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.post-editor .editor-mode-toggle button {
+  background-color: var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.08));
+  color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
+}
+.post-editor .editor-mode-toggle button:hover, .post-editor .editor-toolbar-button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
+}
+.post-editor .editor-mode-toggle button.active {
+  background-color: var(--vscode-button-background, var(--accent-color));
+  color: var(--vscode-button-foreground, #ffffff);
+}
+.post-editor .editor-toolbar-button {
+  background: var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.08));
+  color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
+}
+.post-editor .editor-excerpt-panel.is-collapsed {
+  display: none;
+}
+.post-editor .gallery-button {
+  padding: 4px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.post-editor .gallery-button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+.post-editor .insert-post-link-button, .post-editor .insert-media-button {
+  padding: 4px 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.post-editor .insert-post-link-button:hover, .post-editor .insert-media-button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+.post-editor .editor-preview {
+  flex: 1;
+  background-color: var(--vscode-input-background);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  min-height: 240px;
+  padding: 0;
+  border: none;
+}
+.post-editor .editor-preview {
+  flex: 1;
+  min-height: 240px;
+  padding: 14px;
+  background-color: var(--vscode-input-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  overflow: auto;
+  line-height: 1.6;
+}
+.post-editor .editor-preview-frame {
+  width: 100%;
+  min-height: 520px;
+  border: none;
+  background: #ffffff;
+}
+.post-editor .post-editor-markdown-surface {
+  position: relative;
+  flex: 1;
+  min-height: 380px;
+  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
+  border-radius: 4px;
+  background: var(--vscode-input-background);
+  overflow: hidden;
+}
+.post-editor .monaco-editor-shell, .scripts-monaco.monaco-editor-shell, .templates-monaco.monaco-editor-shell {
+  position: relative;
+}
+.monaco-editor-instance {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+.post-editor .monaco-editor-instance {
+  min-height: 380px;
+}
+.scripts-monaco .monaco-editor-instance, .templates-monaco .monaco-editor-instance {
+  min-height: 420px;
+}
+.monaco-editor-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: pre;
+  border: 0;
+}
+.post-editor .editor-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--vscode-panel-border);
+  background-color: var(--vscode-sideBar-background);
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+@media (max-width: 980px) {
+  .post-editor .editor-header, .scripts-view-shell.editor .editor-header, .templates-view-shell.editor .editor-header, .post-editor .metadata-toggle-header, .post-editor .editor-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .post-editor .editor-header-row, .post-editor .editor-field-row, .post-editor .post-editor-links-columns {
+    flex-direction: column;
+  }
+  .post-editor .editor-media-panel {
+    width: 100%;
+  }
+  .post-editor .editor-toolbar-right, .post-editor .editor-actions, .scripts-view-shell.editor .editor-actions, .templates-view-shell.editor .editor-actions {
+    justify-content: flex-start;
+  }
+}
+.settings-view, .style-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.settings-header, .style-view-header {
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--line, #3c3c3c);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.settings-search input {
+  width: min(320px, 40vw);
+}
+.settings-content {
+  padding: 20px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.setting-section {
+  border: 1px solid var(--line, #3c3c3c);
+  border-radius: 12px;
+  background: var(--panel-2, #252526);
+}
+.setting-section-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line, #3c3c3c);
+}
+.setting-section-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.setting-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.setting-label {
+  font-weight: 600;
+}
+.setting-control, .setting-input-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+.setting-actions {
+  padding: 0 16px 16px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.style-theme-picker {
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 14px;
+}
+.style-theme-option {
+  border: 1px solid var(--line, #3c3c3c);
+  background: var(--panel-2, #252526);
+  border-radius: 14px;
+  padding: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+.style-theme-option.selected {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 1px var(--accent-color);
+}
+.style-theme-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.style-theme-tones {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 8px;
+}
+.style-theme-tone {
+  height: 42px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+.style-apply-row {
+  padding: 0 20px 20px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.style-preview-container {
+  padding: 0 20px 20px;
+  flex: 1;
+  min-height: 0;
+}
+.style-preview-frame {
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  border: 1px solid var(--line, #3c3c3c);
+  border-radius: 14px;
+  background: #ffffff;
+}
+@media (max-width: 1100px) {
+  .setting-row {
+    grid-template-columns: 1fr;
+  }
+}
+.panel-shell {
+  min-height: 160px;
+  max-height: 160px;
+  border-top: 1px solid var(--line);
+}
+.panel-shell.is-hidden {
+  display: none;
+}
+.panel-tabs {
+  display: flex;
+  gap: 8px;
+}
+.panel-tabs {
+  display: flex;
+  gap: 2px;
+}
+.panel-tab {
+  background: transparent;
+  border: none;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--vscode-tab-inactiveForeground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+}
+.panel-tab:hover {
+  color: var(--vscode-tab-activeForeground);
+  background: transparent;
+}
+.panel-tab.active {
+  color: var(--vscode-tab-activeForeground);
+  border-bottom-color: var(--vscode-focusBorder);
+  background: transparent;
+}
+.assistant-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+}
+.assistant-sidebar-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.assistant-sidebar-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.assistant-sidebar-description, .assistant-sidebar-context-text, .assistant-sidebar-message-content {
+  color: var(--vscode-descriptionForeground);
+}
+.assistant-sidebar-status {
+  border-radius: 999px;
+  border: 1px solid var(--vscode-panel-border);
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.assistant-sidebar-status.is-offline {
+  background: rgba(255, 196, 0, 0.18);
+  border-color: rgba(255, 196, 0, 0.35);
+  color: var(--vscode-editor-foreground);
+}
+.assistant-sidebar-context {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
+}
+.assistant-sidebar-context-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.assistant-sidebar-context-label, .assistant-sidebar-message-role {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
+}
+.assistant-sidebar-context-value {
+  text-align: right;
+  color: var(--vscode-editor-foreground);
+}
+.assistant-sidebar-context-text, .assistant-sidebar-message-content {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.assistant-sidebar-prompt-form, .assistant-sidebar-welcome, .assistant-sidebar-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.assistant-sidebar-prompt {
+  width: 100%;
+  min-height: 120px;
+  resize: vertical;
+  border: 1px solid var(--vscode-input-border);
+  border-radius: 6px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  padding: 10px;
+  font: inherit;
+}
+.assistant-sidebar-prompt:focus {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: 1px;
+}
+.assistant-sidebar-start-button {
+  align-self: flex-start;
+  border: 1px solid var(--vscode-button-border, transparent);
+  border-radius: 999px;
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  padding: 7px 14px;
+  cursor: pointer;
+}
+.assistant-sidebar-start-button:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+.assistant-card, .assistant-sidebar-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  border-bottom-width: 1px;
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
+}
+.assistant-sidebar-message.user {
+  background: var(--vscode-list-hoverBackground);
+}
+.assistant-sidebar-message.assistant {
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
+}
+.status-bar {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--vscode-statusBar-background);
+  color: var(--vscode-statusBar-foreground);
+  font-size: 12px;
+  padding: 0 8px;
+  user-select: none;
+  flex-wrap: nowrap;
+  gap: 0;
+  border-top: none;
+}
+.status-bar-left, .status-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  min-width: 0;
+}
+.status-bar-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 100%;
+  max-width: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 0;
+  background: transparent;
+  font-size: 12px;
+}
+.status-bar-item .task-message-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+.task-spinner {
+  width: 10px;
+  height: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.panel-content {
+  padding: 8px;
+}
+.task-list {
+  gap: 4px;
+}
+.output-list, .git-log-list {
+  gap: 6px;
+}
+.task-entry {
+  padding: 8px;
+  border-bottom: none;
+  border-radius: 4px;
+  background-color: var(--vscode-sideBar-background);
+}
+.output-entry {
+  padding: 8px;
+  border-bottom: none;
+  border-radius: 4px;
+  background-color: var(--vscode-sideBar-background);
+  font-size: 12px;
+  color: var(--vscode-editor-foreground);
+}
+@media (max-width: 1100px) {
+  .editor-frame {
+    grid-template-columns: 1fr;
+  }
+  .assistant-sidebar-shell {
+    display: none;
+  }
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.text-muted {
+  color: var(--vscode-descriptionForeground);
+}
+.editor-empty {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: var(--vscode-editor-background);
+  overflow-y: auto;
+  padding: 40px 20px;
+}
+.dashboard-content {
+  max-width: 720px;
+  width: 100%;
+}
+.dashboard-content h1 {
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0 0 4px;
+  color: var(--vscode-editor-foreground);
+}
+.dashboard-content > .text-muted {
+  margin-bottom: 24px;
+  display: block;
+}
+.dashboard-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.stat-card {
+  padding: 16px;
+  background-color: var(--vscode-sideBar-background);
+  border-radius: 6px;
+}
+.stat-number {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--vscode-editor-foreground);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+}
+.stat-breakdown {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.stat-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+}
+.stat-published {
+  color: var(--vscode-testing-iconPassed);
+}
+.stat-draft {
+  color: var(--vscode-editorWarning-foreground);
+}
+.stat-archived {
+  color: var(--vscode-descriptionForeground);
+}
+.dashboard-section {
+  background-color: var(--vscode-sideBar-background);
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+.dashboard-section h4 {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0 0 12px;
+}
+.timeline-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 100px;
+}
+.timeline-bar-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+.timeline-bar {
+  width: 100%;
+  max-width: 40px;
+  background-color: var(--vscode-activityBarBadge-background);
+  border-radius: 3px 3px 0 0;
+  margin-top: auto;
+  min-height: 4px;
+  position: relative;
+  transition: opacity 0.15s;
+}
+.timeline-bar:hover {
+  opacity: 0.8;
+}
+.timeline-bar-count {
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+.timeline-bar-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 9px;
+  color: var(--vscode-descriptionForeground);
+  margin-top: 4px;
+  line-height: 1.15;
+}
+.timeline-bar-label-month {
+  white-space: nowrap;
+}
+.timeline-bar-label-year {
+  font-size: 8px;
+}
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: baseline;
+  line-height: 1.6;
+}
+.dashboard-tag {
+  padding: 2px 8px;
+  border-radius: 10px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-editor-foreground);
+  cursor: default;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+.dashboard-tag:hover {
+  opacity: 0.75;
+}
+.dashboard-tag.has-color {
+  border-radius: 12px;
+}
+.dashboard-tag.has-color:hover {
+  opacity: 0.85;
+}
+.tag-cloud-more {
+  font-size: 11px;
+}
+.tag-count {
+  font-size: 10px;
+  opacity: 0.5;
+  margin-left: 2px;
+}
+.dashboard-category {
+  font-size: 12px;
+  border: 1px solid var(--vscode-input-border);
+}
+.recent-posts-list {
+  display: flex;
+  flex-direction: column;
+}
+.recent-post-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: inherit;
+}
+.recent-post-item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+.recent-post-title {
+  flex: 1;
+  color: var(--vscode-editor-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.recent-post-status {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vscode-input-background);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.recent-post-status.status-published {
+  color: var(--vscode-testing-iconPassed);
+}
+.recent-post-status.status-draft {
+  color: var(--vscode-editorWarning-foreground);
+}
+.recent-post-status.status-archived {
+  color: var(--vscode-descriptionForeground);
+}
+.recent-post-date {
+  color: var(--vscode-descriptionForeground);
+  white-space: nowrap;
+}
+.settings-view-shell, .style-view, .tags-view-shell, .scripts-view-shell, .templates-view-shell, .chat-panel {
+  height: 100%;
+  background: var(--vscode-editor-background);
+}
+.chat-panel {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  color: var(--vscode-editor-foreground);
+}
+.chat-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  background: var(--vscode-sideBar-background);
+}
+.chat-panel-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: visible;
+  font-size: 14px;
+  font-weight: 600;
+}
+.chat-panel-title-main {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-panel-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.chat-model-selector-wrap {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+}
+.chat-model-selector-button, .chat-model-selector-option {
+  border: 1px solid var(--vscode-input-border);
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+}
+.chat-model-selector-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: auto;
+  border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
+  background: var(--vscode-dropdown-background, var(--vscode-sideBar-background));
+  color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
+  z-index: 20;
+}
+.chat-panel .chat-model-selector-button.chat-model-selector-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.chat-panel .chat-model-selector-caret {
+  position: static;
+  font-size: 10px;
+}
+.chat-messages, .chat-surface-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+.chat-message {
+  display: flex;
+  max-width: 100%;
+}
+.chat-message.user {
+  justify-content: flex-end;
+}
+.chat-message-content {
+  max-width: min(760px, 100%);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--vscode-sideBar-background);
+  color: var(--vscode-editor-foreground);
+}
+.chat-panel .chat-message.user .chat-message-content {
+  background: transparent;
+  color: var(--vscode-list-activeSelectionForeground);
+  border: 0;
+  padding: 6px 12px;
+  line-height: 1.35;
+}
+.chat-tool-surface-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.chat-tool-surface-table th, .chat-tool-surface-table td {
+  border-bottom: 1px solid var(--vscode-panel-border);
+  padding: 6px 8px;
+  text-align: left;
+}
+.chat-tool-surface-json {
+  overflow: auto;
+  padding: 10px 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  background: var(--vscode-textCodeBlock-background);
+}
+.chat-panel .chat-input-container {
+  --chat-input-line-height: 20px;
+  --chat-input-min-height: 20px;
+  border-top: 1px solid var(--vscode-panel-border);
+  padding: 8px 16px;
+  background: var(--vscode-sideBar-background);
+}
+.chat-panel .chat-input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  min-height: 30px;
+  border: 1px solid var(--vscode-input-border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  background: var(--vscode-input-background);
+}
+.chat-panel .chat-input-wrapper:focus-within {
+  border-color: var(--vscode-focusBorder);
+}
+.chat-panel .chat-input {
+  flex: 1;
+  box-sizing: border-box;
+  height: var(--chat-input-min-height);
+  min-height: var(--chat-input-min-height);
+  margin: 0;
+  padding: 6px 8px;
+  line-height: var(--chat-input-line-height);
+  max-height: 160px;
+  resize: vertical;
+  border: 0;
+  background: transparent;
+  color: var(--vscode-input-foreground);
+  overflow-y: hidden;
+}
+.chat-panel .chat-input::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+.chat-panel .chat-send-button {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  max-width: 22px;
+  max-height: 22px;
+  padding: 0;
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+.chat-panel .chat-send-button:hover:not(:disabled) {
+  background: var(--vscode-button-hoverBackground);
+}
+.chat-panel .chat-send-button:disabled {
+  opacity: 0.5;
+}
+.overlay-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+}
+.overlay-root:empty {
+  display: none;
+}
+.editor-shared-actions {
+  position: relative;
+  margin-bottom: 14px;
+}
+.ai-suggestions-modal-backdrop, .insert-modal-backdrop, .language-picker-modal-backdrop, .confirm-delete-modal-backdrop, .confirm-dialog-overlay, .gallery-overlay, .lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.68);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+.ai-suggestions-modal, .insert-modal, .language-picker-modal, .confirm-delete-modal, .confirm-dialog, .gallery-overlay-content {
+  background: #1e1e1e;
+  border: 1px solid #3c3c3c;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+.ai-suggestions-modal, .language-picker-modal, .confirm-delete-modal, .confirm-dialog {
+  width: min(680px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+}
+.insert-modal {
+  width: min(680px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.gallery-overlay-content {
+  width: min(980px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ai-suggestions-modal-header, .language-picker-modal-header, .confirm-delete-modal-header, .insert-modal-header, .gallery-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #3c3c3c;
+}
+.insert-modal-header {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+.insert-modal-header.media-header-only {
+  flex-direction: row;
+  align-items: center;
+}
+.ai-suggestions-modal-header h2, .language-picker-modal-header h2, .confirm-delete-modal-header h2, .gallery-overlay-header h2, .insert-modal-title, .confirm-dialog h3 {
+  margin: 0;
+  color: #ffffff;
+}
+.ai-suggestions-modal-close, .confirm-delete-modal-close, .gallery-overlay-close, .shared-popover-close, .lightbox-close {
+  border: none;
+  background: transparent;
+  color: #c5c5c5;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+.ai-suggestions-modal-body, .language-picker-modal-body, .confirm-delete-modal-body {
+  padding: 20px;
+  overflow: auto;
+}
+.ai-suggestions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.ai-suggestion-item {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #3c3c3c;
+  border-radius: 6px;
+  background: #252526;
+}
+.ai-suggestion-checkbox {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+}
+.ai-suggestion-checkbox input {
+  position: absolute;
+  opacity: 0;
+}
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #555555;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #1e1e1e;
+}
+.ai-suggestion-checkbox input:checked + .checkmark, .ai-suggestion-checkbox input:checked ~ .checkmark {
+  background: #0078d4;
+  border-color: #0078d4;
+}
+.ai-suggestion-checkbox input:checked + .checkmark::after, .ai-suggestion-checkbox input:checked ~ .checkmark::after {
+  content: "✓";
+  color: #ffffff;
+  font-size: 12px;
+}
+.ai-suggestion-content {
+  flex: 1;
+  min-width: 0;
+}
+.ai-suggestion-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.ai-suggestion-has-value, .language-picker-badge, .insert-modal-similarity-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: #c5c5c5;
+  font-size: 11px;
+}
+.ai-suggestion-comparison {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+}
+.ai-suggestion-column {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+}
+.ai-suggestion-column.muted {
+  color: #9d9d9d;
+}
+.ai-suggestion-column.highlighted {
+  border: 1px solid rgba(0, 122, 204, 0.4);
+  color: #ffffff;
+}
+.ai-suggestion-column-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ai-suggestion-arrow {
+  color: #9d9d9d;
+}
+.ai-suggestion-value {
+  min-height: 1.4em;
+}
+.ai-suggestion-value.loading {
+  color: var(--accent-color);
+  font-style: italic;
+}
+.ai-suggestions-error {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  background: rgba(220, 50, 50, 0.12);
+  border: 1px solid rgba(220, 50, 50, 0.35);
+  color: #ff6b6b;
+}
+.ai-suggestions-modal-footer, .confirm-delete-modal-footer, .confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid #3c3c3c;
+}
+.button-cancel, .button-delete, .button-apply, .confirm-dialog-actions button, .insert-modal-submit, .language-picker-row, .shared-popover-entry, .colour-swatch {
+  cursor: pointer;
+}
+.button-cancel, .confirm-dialog-actions button, .insert-modal-submit {
+  border: 1px solid #4c4c4c;
+  border-radius: 4px;
+  padding: 8px 14px;
+  background: transparent;
+  color: #f0f0f0;
+}
+.button-apply, .confirm-dialog-actions .primary, .insert-modal-submit {
+  background: #0e639c;
+  border-color: #0e639c;
+}
+.button-delete {
+  border: none;
+  border-radius: 4px;
+  padding: 8px 14px;
+  background: #c73c3c;
+  color: #ffffff;
+}
+.insert-modal-tabs {
+  display: flex;
+  margin: 0 -20px;
+}
+.insert-modal-tab {
+  flex: 1;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: #9d9d9d;
+  padding: 10px 16px;
+}
+.insert-modal-tab.active {
+  color: #ffffff;
+  border-bottom-color: #0e639c;
+  background: #252526;
+}
+.insert-modal-search {
+  border-bottom: 1px solid #3c3c3c;
+}
+.insert-modal-input, .shared-popover-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: #f0f0f0;
+  padding: 14px 20px;
+  font: inherit;
+}
+.menu-editor-view {
+  padding: 1rem;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  overflow: hidden;
+  background: var(--vscode-editor-background);
+}
+.menu-editor-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.menu-editor-header h2 {
+  margin: 0;
+}
+.menu-editor-header p {
+  margin: 0.25rem 0 0;
+  color: var(--vscode-descriptionForeground);
+}
+.menu-editor-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+.menu-editor-tree-wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background: var(--vscode-editor-background);
+  padding: 0.5rem;
+  min-height: 0;
+}
+.menu-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.menu-editor-tool {
+  width: 1.8rem;
+  height: 1.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  padding: 0;
+}
+.menu-editor-tool:hover:not(:disabled) {
+  background: var(--vscode-toolbar-hoverBackground);
+  border-color: var(--vscode-panel-border);
+}
+.menu-editor-tool:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.menu-editor-tree-shell {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.menu-editor-tree-level {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.menu-editor-tree-item {
+  margin: 0;
+  padding: 0;
+}
+.menu-editor-row {
+  --menu-editor-indent: calc(var(--menu-editor-depth) * 1rem);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.3rem 0.45rem 0.3rem calc(0.4rem + var(--menu-editor-indent));
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+}
+.menu-editor-row.is-selected {
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+.menu-editor-row.is-dragging {
+  opacity: 0.45;
+}
+.menu-editor-row.is-drop-before::before, .menu-editor-row.is-drop-after::after {
+  content: "";
+  position: absolute;
+  left: calc(0.4rem + var(--menu-editor-indent));
+  right: 0.45rem;
+  height: 2px;
+  background: var(--vscode-focusBorder);
+}
+.menu-editor-row.is-drop-before::before {
+  top: 0;
+}
+.menu-editor-row.is-drop-after::after {
+  bottom: 0;
+}
+.menu-editor-row.is-drop-inside {
+  box-shadow: inset 0 0 0 1px var(--vscode-focusBorder);
+  background: var(--vscode-list-hoverBackground);
+}
+.menu-editor-row-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  min-width: 1rem;
+  color: var(--vscode-descriptionForeground);
+  cursor: grab;
+  user-select: none;
+}
+.menu-editor-row-handle:active {
+  cursor: grabbing;
+}
+.menu-editor-row-kind {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  min-width: 1rem;
+  opacity: 0.9;
+}
+.menu-editor-row-title {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.menu-editor-row-title.is-editing {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+.menu-editor-entry-form {
+  display: block;
+}
+.menu-editor-inline-input {
+  width: 100%;
+  border: 1px solid var(--vscode-focusBorder);
+  border-radius: 4px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  padding: 0.25rem 0.45rem;
+  min-height: 1.8rem;
+}
+.menu-editor-inline-search {
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--vscode-panel-border);
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  max-height: 18rem;
+  overflow: hidden;
+}
+.menu-editor-inline-search-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.menu-editor-inline-search-head strong {
+  display: block;
+  font-size: 0.8rem;
+}
+.menu-editor-inline-search-head span {
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.75rem;
+}
+.menu-editor-inline-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.menu-editor-inline-action {
+  border: 1px solid var(--vscode-button-border, transparent);
+  border-radius: 4px;
+  background: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+}
+.menu-editor-inline-action:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+.menu-editor-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+.menu-editor-picker-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  padding: 0.45rem 0.55rem;
+  text-align: left;
+  cursor: pointer;
+}
+.menu-editor-picker-item:hover {
+  border-color: var(--vscode-focusBorder);
+  background: var(--vscode-list-hoverBackground);
+}
+.menu-editor-picker-item small, .menu-editor-picker-state {
+  color: var(--vscode-descriptionForeground);
+}
+.menu-editor-empty {
+  color: var(--vscode-descriptionForeground);
+  padding: 0.5rem 0.25rem;
+}
+@media (max-width: 720px) {
+  .menu-editor-inline-search-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .menu-editor-inline-actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+[data-testid="media-editor"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-editor-background);
+  overflow: hidden;
+}
+[data-testid="media-editor"] .editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 12px;
+  min-height: 35px;
+  background-color: var(--vscode-tab-activeBackground);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+[data-testid="media-editor"] .editor-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+[data-testid="media-editor"] .editor-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 12px;
+  background-color: var(--vscode-tab-inactiveBackground);
+  color: var(--vscode-tab-inactiveForeground);
+  font-size: 13px;
+  border-radius: 4px 4px 0 0;
+}
+[data-testid="media-editor"] .editor-tab.active {
+  background-color: var(--vscode-tab-activeBackground);
+  color: var(--vscode-tab-activeForeground);
+}
+[data-testid="media-editor"] .editor-tab-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-testid="media-editor"] .editor-tab-dirty {
+  color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-editorWarning-foreground));
+  font-size: 10px;
+}
+[data-testid="media-editor"] .editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+[data-testid="media-editor"] .editor-actions button {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+[data-testid="media-editor"] .editor-actions button.danger:hover {
+  background-color: var(--vscode-notificationsErrorIcon-foreground);
+}
+[data-testid="media-editor"] .auto-save-indicator {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+[data-testid="media-editor"] .quick-actions-wrapper {
+  position: relative;
+}
+[data-testid="media-editor"] .quick-actions-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+[data-testid="media-editor"] .quick-actions-btn-icon {
+  font-size: 12px;
+  line-height: 1;
+}
+[data-testid="media-editor"] .quick-actions-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  width: 280px;
+  background: var(--vscode-dropdown-background, #252526);
+  border: 1px solid var(--vscode-dropdown-border, #454545);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  z-index: 30;
+}
+[data-testid="media-editor"] .quick-actions-divider {
+  height: 1px;
+  background: var(--vscode-dropdown-border, #454545);
+}
+[data-testid="media-editor"] .quick-action-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: var(--vscode-dropdown-foreground, #ccc);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
+  background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+[data-testid="media-editor"] .quick-action-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+[data-testid="media-editor"] .quick-action-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+[data-testid="media-editor"] .quick-action-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+[data-testid="media-editor"] .quick-action-text strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+[data-testid="media-editor"] .quick-action-text small {
+  font-size: 11px;
+  opacity: 0.7;
+}
+[data-testid="media-editor"] .editor-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow-y: auto;
+  gap: 16px;
+}
+[data-testid="media-editor"] > .editor-content.media-editor {
+  flex-direction: row;
+  align-items: stretch;
+  gap: 24px;
+}
+[data-testid="media-editor"] .editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+[data-testid="media-editor"] .editor-field label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+[data-testid="media-editor"] .editor-field-row {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  margin-bottom: 0;
+}
+[data-testid="media-editor"] .post-editor-input, [data-testid="media-editor"] .post-editor-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
+  border-radius: 4px;
+  background: var(--vscode-input-background, rgba(255, 255, 255, 0.06));
+  color: var(--vscode-input-foreground, var(--vscode-foreground));
+  font: inherit;
+}
+[data-testid="media-editor"] .post-editor-input.disabled, [data-testid="media-editor"] .post-editor-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+[data-testid="media-editor"] .post-editor-textarea {
+  line-height: 1.5;
+  resize: vertical;
+}
+[data-testid="media-editor"] .media-preview {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vscode-input-background);
+  border-radius: 8px;
+  min-height: 300px;
+  overflow: hidden;
+}
+[data-testid="media-editor"] .media-preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+[data-testid="media-editor"] .media-preview-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 16px;
+  box-sizing: border-box;
+}
+[data-testid="media-editor"] .media-preview-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
+[data-testid="media-editor"] .media-details {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+}
+[data-testid="media-editor"] .media-editor-details-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+[data-testid="media-editor"] .media-details textarea {
+  resize: vertical;
+}
+[data-testid="media-editor"] .linked-posts-section label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+[data-testid="media-editor"] .add-link-btn {
+  background: var(--vscode-button-secondaryBackground);
+  border: none;
+  color: var(--vscode-button-secondaryForeground);
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+}
+[data-testid="media-editor"] .add-link-btn:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+[data-testid="media-editor"] .post-picker {
+  background: var(--vscode-dropdown-background);
+  border: 1px solid var(--vscode-dropdown-border);
+  border-radius: 4px;
+  margin-top: 8px;
+  max-height: 250px;
+  overflow-y: auto;
+}
+[data-testid="media-editor"] .post-picker-search {
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-dropdown-border);
+  position: sticky;
+  top: 0;
+  background: var(--vscode-dropdown-background);
+}
+[data-testid="media-editor"] .post-picker-search input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--vscode-input-background);
+  border: 1px solid var(--vscode-input-border);
+  border-radius: 3px;
+  color: var(--vscode-input-foreground);
+  font-size: 12px;
+}
+[data-testid="media-editor"] .post-picker-search input:focus {
+  outline: none;
+  border-color: var(--vscode-focusBorder);
+}
+[data-testid="media-editor"] .post-picker-list {
+  padding: 4px;
+}
+[data-testid="media-editor"] .post-picker-item {
+  width: 100%;
+  padding: 6px 8px;
+  cursor: pointer;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-testid="media-editor"] .post-picker-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+[data-testid="media-editor"] .post-picker-more {
+  padding: 6px 8px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  font-style: italic;
+}
+[data-testid="media-editor"] .no-posts, [data-testid="media-editor"] .no-linked-posts {
+  padding: 12px 8px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+  font-style: italic;
+}
+[data-testid="media-editor"] .linked-posts-list {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+[data-testid="media-editor"] .linked-post-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: var(--vscode-sideBar-background);
+  border-radius: 4px;
+}
+[data-testid="media-editor"] .linked-post-title, [data-testid="media-editor"] .linked-post-link {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-testid="media-editor"] .linked-post-title:hover, [data-testid="media-editor"] .linked-post-link:hover {
+  color: var(--vscode-textLink-foreground);
+  text-decoration: underline;
+}
+[data-testid="media-editor"] .linked-post-item .unlink-btn {
+  background: none;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+[data-testid="media-editor"] .linked-post-item:hover .unlink-btn {
+  opacity: 1;
+}
+[data-testid="media-editor"] .linked-post-item .unlink-btn:hover {
+  color: var(--vscode-errorForeground);
+}
+.translation-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.68);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  z-index: 10001;
+}
+.translation-modal {
+  width: min(640px, calc(100vw - 32px));
+  background: #1e1e1e;
+  border: 1px solid #3c3c3c;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+.translation-modal-header, .translation-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+}
+.translation-modal-header {
+  border-bottom: 1px solid #3c3c3c;
+}
+.translation-modal-footer {
+  border-top: 1px solid #3c3c3c;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.translation-modal-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.translation-modal-close {
+  border: none;
+  background: transparent;
+  color: #c5c5c5;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+.import-analysis {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 18px 20px 26px;
+  color: var(--vscode-foreground);
+}
+.import-analysis-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.import-analysis-header p {
+  margin: 0;
+  color: var(--vscode-descriptionForeground);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.import-definition-name {
+  width: min(480px, 100%);
+  border: 1px solid var(--vscode-input-border, transparent);
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground, var(--vscode-foreground));
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 18px;
+  font-weight: 600;
+}
+.import-file-selectors {
+  display: grid;
+  gap: 12px;
+}
+.import-file-row {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 14px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 8px;
+  background: var(--vscode-editor-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-editor-background) 76%, var(--vscode-input-background));
+  }
+}
+.import-file-row label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.import-file-path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--vscode-editor-font-family, ui-monospace, monospace);
+  font-size: 12px;
+}
+.import-file-path.placeholder {
+  color: var(--vscode-descriptionForeground);
+}
+.import-analysis button, .import-analysis select {
+  border: 1px solid var(--vscode-button-border, transparent);
+  border-radius: 6px;
+  font-size: 12px;
+}
+.import-analysis button {
+  background: var(--vscode-button-secondaryBackground, var(--vscode-button-background));
+  color: var(--vscode-button-secondaryForeground, var(--vscode-button-foreground));
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.import-analysis button:hover:not(:disabled) {
+  background: var(--vscode-button-secondaryHoverBackground, var(--vscode-button-hoverBackground));
+}
+.import-analyze-btn, .import-execute-btn {
+  background: var(--vscode-button-background) !important;
+  color: var(--vscode-button-foreground) !important;
+}
+.import-analysis button:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+.import-loading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 10px;
+  background: var(--vscode-editor-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-editor-background) 84%, var(--vscode-input-background));
+  }
+}
+.import-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--vscode-descriptionForeground);
+  border-top-color: var(--vscode-button-background);
+  border-radius: 50%;
+  animation: import-spinner-rotate 0.8s linear infinite;
+  flex-shrink: 0;
+}
+.import-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.import-progress-step {
+  font-size: 13px;
+  color: var(--vscode-foreground);
+}
+.import-progress-detail {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+@keyframes import-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.import-site-info {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.import-site-info-item, .import-stat-card, .import-date-distribution, .import-detail-section, .import-execute-section {
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 10px;
+  background: var(--vscode-editor-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-editor-background) 84%, var(--vscode-input-background));
+  }
+}
+.import-site-info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.info-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.info-value {
+  font-size: 13px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.import-stat-cards {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+.import-stat-card {
+  padding: 14px;
+}
+.import-stat-card h3, .import-date-distribution h3, .import-detail-section h3, .taxonomy-group h4 {
+  margin: 0;
+}
+.import-stat-number {
+  margin-top: 10px;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+.import-stat-breakdown, .import-execute-summary, .import-taxonomy-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.import-stat-breakdown {
+  margin-top: 12px;
+}
+.import-stat-tag, .import-count-tag, .import-taxonomy-pill, .macro-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.stat-new, .import-taxonomy-pill.new-tax {
+  background: rgba(117, 190, 255, 0.16);
+  color: #75beff;
+}
+.stat-update, .stat-mapped, .import-taxonomy-pill.exists, .import-taxonomy-pill.mapped, .macro-status-badge.mapped, .import-execution-complete {
+  background: rgba(115, 201, 145, 0.16);
+  color: #73c991;
+}
+.stat-conflict {
+  background: rgba(255, 166, 87, 0.16);
+  color: #ffb169;
+}
+.stat-duplicate, .stat-missing, .macro-status-badge.unmapped, .import-execution-error {
+  background: rgba(204, 167, 0, 0.16);
+  color: #cca700;
+}
+.import-date-distribution, .import-detail-section, .import-execute-section {
+  padding: 16px;
+}
+.import-section-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0;
+  border: none !important;
+  background: transparent !important;
+  color: inherit !important;
+  font-size: 16px !important;
+  font-weight: 600;
+  text-align: left;
+}
+.import-section-toggle:hover {
+  background: transparent !important;
+  opacity: 0.9;
+}
+.toggle-icon {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+.distribution-bars {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+.distribution-row {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) 72px;
+  gap: 10px;
+  align-items: center;
+}
+.distribution-year, .distribution-count, .slug-cell {
+  font-family: var(--vscode-editor-font-family, ui-monospace, monospace);
+  font-size: 11px;
+}
+.distribution-bar-container {
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--vscode-input-background);
+}
+.distribution-bar {
+  height: 100%;
+  min-width: 8px;
+  border-radius: inherit;
+}
+.distribution-bar-posts {
+  background: linear-gradient(90deg, rgba(117, 190, 255, 0.8), rgba(117, 190, 255, 0.35));
+}
+.import-execute-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.import-execute-summary {
+  color: var(--vscode-descriptionForeground);
+}
+.import-execution-complete, .import-execution-error {
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.import-execution-progress {
+  display: grid;
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 10px;
+  background: var(--vscode-editor-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--vscode-editor-background) 84%, var(--vscode-input-background));
+  }
+}
+.import-execution-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.import-execution-header h3 {
+  margin: 0;
+  font-size: 14px;
+}
+.import-progress-bar {
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--vscode-input-background);
+}
+.import-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, rgba(117, 190, 255, 0.85), rgba(117, 190, 255, 0.45));
+}
+.import-progress-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+.import-phase {
+  font-weight: 600;
+}
+.import-detail, .import-counter {
+  color: var(--vscode-descriptionForeground);
+}
+.import-detail-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 14px;
+}
+.import-detail-table th, .import-detail-table td {
+  padding: 10px 8px;
+  text-align: left;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  vertical-align: middle;
+  font-size: 12px;
+}
+.import-detail-table th {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.import-detail-table .status-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 4px 9px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.import-detail-table .status-badge.new {
+  background: rgba(117, 190, 255, 0.16);
+  color: #75beff;
+}
+.import-detail-table .status-badge.update {
+  background: rgba(115, 201, 145, 0.16);
+  color: #73c991;
+}
+.import-detail-table .status-badge.conflict {
+  background: rgba(255, 166, 87, 0.16);
+  color: #ffb169;
+}
+.import-detail-table .status-badge.duplicate, .import-detail-table .status-badge.missing {
+  background: rgba(204, 167, 0, 0.16);
+  color: #cca700;
+}
+.categories-cell, .existing-match, .mime-type-cell, .post-type-cell {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+.mime-type-cell, .post-type-cell, .existing-match, .slug-cell {
+  font-family: var(--vscode-editor-font-family, ui-monospace, monospace);
+}
+.resolution-select, .taxonomy-mapping-input {
+  min-width: 150px;
+  background: var(--vscode-dropdown-background, var(--vscode-input-background));
+  color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
+  border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
+  padding: 6px 8px;
+}
+.taxonomy-analyze-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 12px;
+  margin-top: 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+.taxonomy-analyze-dropdown {
+  position: relative;
+}
+.taxonomy-analyze-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.taxonomy-model-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 220px;
+  max-height: 280px;
+  overflow-y: auto;
+  background: var(--vscode-dropdown-background, var(--vscode-sideBar-background));
+  border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
+  border-radius: 6px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
+  z-index: 20;
+}
+.taxonomy-model-option {
+  width: 100%;
+  display: block;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: var(--vscode-foreground) !important;
+  text-align: left;
+  padding: 8px 12px !important;
+}
+.taxonomy-model-option:hover {
+  background: var(--vscode-list-hoverBackground) !important;
+}
+.taxonomy-analyze-hint {
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+.import-taxonomy-groups {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 14px;
+}
+.taxonomy-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.import-taxonomy-entry, .import-taxonomy-edit-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.import-taxonomy-entry, .import-taxonomy-edit-form {
+  flex-wrap: wrap;
+}
+.import-taxonomy-pill {
+  border: none;
+  cursor: default;
+}
+button.import-taxonomy-pill {
+  cursor: pointer;
+}
+.mapped-target {
+  background: rgba(115, 201, 145, 0.1);
+}
+.taxonomy-mapping-arrow {
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+.taxonomy-mapping-input {
+  min-width: 170px;
+  border-radius: 6px;
+}
+.taxonomy-edit-btn, .taxonomy-clear-btn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 8px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.taxonomy-edit-btn.ghost, .taxonomy-clear-btn {
+  background: transparent !important;
+  border: 1px solid var(--vscode-panel-border) !important;
+  color: var(--vscode-descriptionForeground) !important;
+}
+.macros-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+.macro-item {
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 8px;
+  background: var(--vscode-input-background);
+}
+.macro-item.unmapped {
+  border-left: 3px solid #cca700;
+}
+.macro-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+}
+.macro-name, .import-taxonomy-pill {
+  font-family: var(--vscode-editor-font-family, ui-monospace, monospace);
+}
+.macro-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+.import-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 56px 20px;
+  color: var(--vscode-descriptionForeground);
+  border: 1px dashed var(--vscode-panel-border);
+  border-radius: 12px;
+}
+.import-empty-state p {
+  margin: 0;
+  font-size: 13px;
+}
+@media (max-width: 1100px) {
+  .import-site-info, .import-stat-cards, .import-taxonomy-groups {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 780px) {
+  .import-analysis {
+    padding: 14px;
+  }
+  .import-file-row, .distribution-row, .import-execute-section, .import-site-info, .import-stat-cards, .import-taxonomy-groups {
+    grid-template-columns: 1fr;
+  }
+  .import-execute-section {
+    align-items: stretch;
+  }
+  .import-file-row {
+    align-items: stretch;
+  }
+  .import-analysis button, .resolution-select, .taxonomy-mapping-input {
+    width: 100%;
+  }
+  .taxonomy-analyze-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .import-taxonomy-entry, .import-taxonomy-edit-form {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@layer components {
+  .btn-base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 28px;
+    padding: 4px 10px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    font: inherit;
+    line-height: 1.2;
+    cursor: pointer;
+    user-select: none;
+  }
+  .btn-theme-primary {
+    color: var(--vscode-button-foreground, #ffffff);
+    background: var(--vscode-button-background, var(--vscode-focusBorder));
+  }
+  .btn-theme-primary:hover {
+    background: var(--vscode-button-hoverBackground, #0e639c);
+  }
+  .btn-theme-danger {
+    color: var(--vscode-errorForeground, #f48771);
+    background: transparent;
+    border-color: var(--vscode-errorForeground, #f48771);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb, var(--vscode-errorForeground, #f48771) 45%, transparent);
+    }
+  }
+  .btn-theme-danger:hover {
+    background: var(--vscode-errorForeground, #f48771);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--vscode-errorForeground, #f48771) 14%, transparent);
+    }
+  }
+  .panel-entry {
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    background-color: var(--vscode-sideBar-background);
+  }
+  .monaco-host {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}
diff --git a/priv/static/assets/app.js b/priv/static/assets/app.js
index b1c9ff8..e692a50 100644
--- a/priv/static/assets/app.js
+++ b/priv/static/assets/app.js
@@ -1,26 +1,9655 @@
-(()=>{var $e=t=>typeof t=="function"?t:function(){return t},ki=typeof self<"u"?self:null,Pe=typeof window<"u"?window:null,re=ki||Pe||globalThis,Ai="2.0.0",oe={connecting:0,open:1,closing:2,closed:3},Ci=1e4,Ti=1e3,Q={closed:"closed",errored:"errored",joined:"joined",joining:"joining",leaving:"leaving"},de={close:"phx_close",error:"phx_error",join:"phx_join",reply:"phx_reply",leave:"phx_leave"},pt={longpoll:"longpoll",websocket:"websocket"},_i={complete:4},mt="base64url.bearer.phx.",Ye=class{constructor(t,e,i,s){this.channel=t,this.event=e,this.payload=i||function(){return{}},this.receivedResp=null,this.timeout=s,this.timeoutTimer=null,this.recHooks=[],this.sent=!1}resend(t){this.timeout=t,this.reset(),this.send()}send(){this.hasReceived("timeout")||(this.startTimeout(),this.sent=!0,this.channel.socket.push({topic:this.channel.topic,event:this.event,payload:this.payload(),ref:this.ref,join_ref:this.channel.joinRef()}))}receive(t,e){return this.hasReceived(t)&&e(this.receivedResp.response),this.recHooks.push({status:t,callback:e}),this}reset(){this.cancelRefEvent(),this.ref=null,this.refEvent=null,this.receivedResp=null,this.sent=!1}matchReceive({status:t,response:e,_ref:i}){this.recHooks.filter(s=>s.status===t).forEach(s=>s.callback(e))}cancelRefEvent(){this.refEvent&&this.channel.off(this.refEvent)}cancelTimeout(){clearTimeout(this.timeoutTimer),this.timeoutTimer=null}startTimeout(){this.timeoutTimer&&this.cancelTimeout(),this.ref=this.channel.socket.makeRef(),this.refEvent=this.channel.replyEventName(this.ref),this.channel.on(this.refEvent,t=>{this.cancelRefEvent(),this.cancelTimeout(),this.receivedResp=t,this.matchReceive(t)}),this.timeoutTimer=setTimeout(()=>{this.trigger("timeout",{})},this.timeout)}hasReceived(t){return this.receivedResp&&this.receivedResp.status===t}trigger(t,e){this.channel.trigger(this.refEvent,{status:t,response:e})}},Ht=class{constructor(t,e){this.callback=t,this.timerCalc=e,this.timer=null,this.tries=0}reset(){this.tries=0,clearTimeout(this.timer)}scheduleTimeout(){clearTimeout(this.timer),this.timer=setTimeout(()=>{this.tries=this.tries+1,this.callback()},this.timerCalc(this.tries+1))}},Pi=class{constructor(t,e,i){this.state=Q.closed,this.topic=t,this.params=$e(e||{}),this.socket=i,this.bindings=[],this.bindingRef=0,this.timeout=this.socket.timeout,this.joinedOnce=!1,this.joinPush=new Ye(this,de.join,this.params,this.timeout),this.pushBuffer=[],this.stateChangeRefs=[],this.rejoinTimer=new Ht(()=>{this.socket.isConnected()&&this.rejoin()},this.socket.rejoinAfterMs),this.stateChangeRefs.push(this.socket.onError(()=>this.rejoinTimer.reset())),this.stateChangeRefs.push(this.socket.onOpen(()=>{this.rejoinTimer.reset(),this.isErrored()&&this.rejoin()})),this.joinPush.receive("ok",()=>{this.state=Q.joined,this.rejoinTimer.reset(),this.pushBuffer.forEach(s=>s.send()),this.pushBuffer=[]}),this.joinPush.receive("error",()=>{this.state=Q.errored,this.socket.isConnected()&&this.rejoinTimer.scheduleTimeout()}),this.onClose(()=>{this.rejoinTimer.reset(),this.socket.hasLogger()&&this.socket.log("channel",`close ${this.topic} ${this.joinRef()}`),this.state=Q.closed,this.socket.remove(this)}),this.onError(s=>{this.socket.hasLogger()&&this.socket.log("channel",`error ${this.topic}`,s),this.isJoining()&&this.joinPush.reset(),this.state=Q.errored,this.socket.isConnected()&&this.rejoinTimer.scheduleTimeout()}),this.joinPush.receive("timeout",()=>{this.socket.hasLogger()&&this.socket.log("channel",`timeout ${this.topic} (${this.joinRef()})`,this.joinPush.timeout),new Ye(this,de.leave,$e({}),this.timeout).send(),this.state=Q.errored,this.joinPush.reset(),this.socket.isConnected()&&this.rejoinTimer.scheduleTimeout()}),this.on(de.reply,(s,n)=>{this.trigger(this.replyEventName(n),s)})}join(t=this.timeout){if(this.joinedOnce)throw new Error("tried to join multiple times. 'join' can only be called a single time per channel instance");return this.timeout=t,this.joinedOnce=!0,this.rejoin(),this.joinPush}onClose(t){this.on(de.close,t)}onError(t){return this.on(de.error,e=>t(e))}on(t,e){let i=this.bindingRef++;return this.bindings.push({event:t,ref:i,callback:e}),i}off(t,e){this.bindings=this.bindings.filter(i=>!(i.event===t&&(typeof e>"u"||e===i.ref)))}canPush(){return this.socket.isConnected()&&this.isJoined()}push(t,e,i=this.timeout){if(e=e||{},!this.joinedOnce)throw new Error(`tried to push '${t}' to '${this.topic}' before joining. Use channel.join() before pushing events`);let s=new Ye(this,t,function(){return e},i);return this.canPush()?s.send():(s.startTimeout(),this.pushBuffer.push(s)),s}leave(t=this.timeout){this.rejoinTimer.reset(),this.joinPush.cancelTimeout(),this.state=Q.leaving;let e=()=>{this.socket.hasLogger()&&this.socket.log("channel",`leave ${this.topic}`),this.trigger(de.close,"leave")},i=new Ye(this,de.leave,$e({}),t);return i.receive("ok",()=>e()).receive("timeout",()=>e()),i.send(),this.canPush()||i.trigger("ok",{}),i}onMessage(t,e,i){return e}isMember(t,e,i,s){return this.topic!==t?!1:s&&s!==this.joinRef()?(this.socket.hasLogger()&&this.socket.log("channel","dropping outdated message",{topic:t,event:e,payload:i,joinRef:s}),!1):!0}joinRef(){return this.joinPush.ref}rejoin(t=this.timeout){this.isLeaving()||(this.socket.leaveOpenTopic(this.topic),this.state=Q.joining,this.joinPush.resend(t))}trigger(t,e,i,s){let n=this.onMessage(t,e,i,s);if(e&&!n)throw new Error("channel onMessage callbacks must return the payload, modified or unmodified");let r=this.bindings.filter(o=>o.event===t);for(let o=0;o<r.length;o++)r[o].callback(n,i,s||this.joinRef())}replyEventName(t){return`chan_reply_${t}`}isClosed(){return this.state===Q.closed}isErrored(){return this.state===Q.errored}isJoined(){return this.state===Q.joined}isJoining(){return this.state===Q.joining}isLeaving(){return this.state===Q.leaving}},Qe=class{static request(t,e,i,s,n,r,o){if(re.XDomainRequest){let a=new re.XDomainRequest;return this.xdomainRequest(a,t,e,s,n,r,o)}else if(re.XMLHttpRequest){let a=new re.XMLHttpRequest;return this.xhrRequest(a,t,e,i,s,n,r,o)}else{if(re.fetch&&re.AbortController)return this.fetchRequest(t,e,i,s,n,r,o);throw new Error("No suitable XMLHttpRequest implementation found")}}static fetchRequest(t,e,i,s,n,r,o){let a={method:t,headers:i,body:s},h=null;if(n){h=new AbortController;let c=setTimeout(()=>h.abort(),n);a.signal=h.signal}return re.fetch(e,a).then(c=>c.text()).then(c=>this.parseJSON(c)).then(c=>o&&o(c)).catch(c=>{c.name==="AbortError"&&r?r():o&&o(null)}),h}static xdomainRequest(t,e,i,s,n,r,o){return t.timeout=n,t.open(e,i),t.onload=()=>{let a=this.parseJSON(t.responseText);o&&o(a)},r&&(t.ontimeout=r),t.onprogress=()=>{},t.send(s),t}static xhrRequest(t,e,i,s,n,r,o,a){t.open(e,i,!0),t.timeout=r;for(let[h,c]of Object.entries(s))t.setRequestHeader(h,c);return t.onerror=()=>a&&a(null),t.onreadystatechange=()=>{if(t.readyState===_i.complete&&a){let h=this.parseJSON(t.responseText);a(h)}},o&&(t.ontimeout=o),t.send(n),t}static parseJSON(t){if(!t||t==="")return null;try{return JSON.parse(t)}catch{return console&&console.log("failed to parse JSON response",t),null}}static serialize(t,e){let i=[];for(var s in t){if(!Object.prototype.hasOwnProperty.call(t,s))continue;let n=e?`${e}[${s}]`:s,r=t[s];typeof r=="object"?i.push(this.serialize(r,n)):i.push(encodeURIComponent(n)+"="+encodeURIComponent(r))}return i.join("&")}static appendParams(t,e){if(Object.keys(e).length===0)return t;let i=t.match(/\?/)?"&":"?";return`${t}${i}${this.serialize(e)}`}},Ri=t=>{let e="",i=new Uint8Array(t),s=i.byteLength;for(let n=0;n<s;n++)e+=String.fromCharCode(i[n]);return btoa(e)},_e=class{constructor(t,e){e&&e.length===2&&e[1].startsWith(mt)&&(this.authToken=atob(e[1].slice(mt.length))),this.endPoint=null,this.token=null,this.skipHeartbeat=!0,this.reqs=new Set,this.awaitingBatchAck=!1,this.currentBatch=null,this.currentBatchTimer=null,this.batchBuffer=[],this.onopen=function(){},this.onerror=function(){},this.onmessage=function(){},this.onclose=function(){},this.pollEndpoint=this.normalizeEndpoint(t),this.readyState=oe.connecting,setTimeout(()=>this.poll(),0)}normalizeEndpoint(t){return t.replace("ws://","http://").replace("wss://","https://").replace(new RegExp("(.*)/"+pt.websocket),"$1/"+pt.longpoll)}endpointURL(){return Qe.appendParams(this.pollEndpoint,{token:this.token})}closeAndRetry(t,e,i){this.close(t,e,i),this.readyState=oe.connecting}ontimeout(){this.onerror("timeout"),this.closeAndRetry(1005,"timeout",!1)}isActive(){return this.readyState===oe.open||this.readyState===oe.connecting}poll(){let t={Accept:"application/json"};this.authToken&&(t["X-Phoenix-AuthToken"]=this.authToken),this.ajax("GET",t,null,()=>this.ontimeout(),e=>{if(e){var{status:i,token:s,messages:n}=e;if(i===410&&this.token!==null){this.onerror(410),this.closeAndRetry(3410,"session_gone",!1);return}this.token=s}else i=0;switch(i){case 200:n.forEach(r=>{setTimeout(()=>this.onmessage({data:r}),0)}),this.poll();break;case 204:this.poll();break;case 410:this.readyState=oe.open,this.onopen({}),this.poll();break;case 403:this.onerror(403),this.close(1008,"forbidden",!1);break;case 0:case 500:this.onerror(500),this.closeAndRetry(1011,"internal server error",500);break;default:throw new Error(`unhandled poll status ${i}`)}})}send(t){typeof t!="string"&&(t=Ri(t)),this.currentBatch?this.currentBatch.push(t):this.awaitingBatchAck?this.batchBuffer.push(t):(this.currentBatch=[t],this.currentBatchTimer=setTimeout(()=>{this.batchSend(this.currentBatch),this.currentBatch=null},0))}batchSend(t){this.awaitingBatchAck=!0,this.ajax("POST",{"Content-Type":"application/x-ndjson"},t.join(`
-`),()=>this.onerror("timeout"),e=>{this.awaitingBatchAck=!1,!e||e.status!==200?(this.onerror(e&&e.status),this.closeAndRetry(1011,"internal server error",!1)):this.batchBuffer.length>0&&(this.batchSend(this.batchBuffer),this.batchBuffer=[])})}close(t,e,i){for(let n of this.reqs)n.abort();this.readyState=oe.closed;let s=Object.assign({code:1e3,reason:void 0,wasClean:!0},{code:t,reason:e,wasClean:i});this.batchBuffer=[],clearTimeout(this.currentBatchTimer),this.currentBatchTimer=null,typeof CloseEvent<"u"?this.onclose(new CloseEvent("close",s)):this.onclose(s)}ajax(t,e,i,s,n){let r,o=()=>{this.reqs.delete(r),s()};r=Qe.request(t,this.endpointURL(),e,i,this.timeout,o,a=>{this.reqs.delete(r),this.isActive()&&n(a)}),this.reqs.add(r)}};var Ze={HEADER_LENGTH:1,META_LENGTH:4,KINDS:{push:0,reply:1,broadcast:2},encode(t,e){if(t.payload.constructor===ArrayBuffer)return e(this.binaryEncode(t));{let i=[t.join_ref,t.ref,t.topic,t.event,t.payload];return e(JSON.stringify(i))}},decode(t,e){if(t.constructor===ArrayBuffer)return e(this.binaryDecode(t));{let[i,s,n,r,o]=JSON.parse(t);return e({join_ref:i,ref:s,topic:n,event:r,payload:o})}},binaryEncode(t){let{join_ref:e,ref:i,event:s,topic:n,payload:r}=t,o=this.META_LENGTH+e.length+i.length+n.length+s.length,a=new ArrayBuffer(this.HEADER_LENGTH+o),h=new DataView(a),c=0;h.setUint8(c++,this.KINDS.push),h.setUint8(c++,e.length),h.setUint8(c++,i.length),h.setUint8(c++,n.length),h.setUint8(c++,s.length),Array.from(e,g=>h.setUint8(c++,g.charCodeAt(0))),Array.from(i,g=>h.setUint8(c++,g.charCodeAt(0))),Array.from(n,g=>h.setUint8(c++,g.charCodeAt(0))),Array.from(s,g=>h.setUint8(c++,g.charCodeAt(0)));var f=new Uint8Array(a.byteLength+r.byteLength);return f.set(new Uint8Array(a),0),f.set(new Uint8Array(r),a.byteLength),f.buffer},binaryDecode(t){let e=new DataView(t),i=e.getUint8(0),s=new TextDecoder;switch(i){case this.KINDS.push:return this.decodePush(t,e,s);case this.KINDS.reply:return this.decodeReply(t,e,s);case this.KINDS.broadcast:return this.decodeBroadcast(t,e,s)}},decodePush(t,e,i){let s=e.getUint8(1),n=e.getUint8(2),r=e.getUint8(3),o=this.HEADER_LENGTH+this.META_LENGTH-1,a=i.decode(t.slice(o,o+s));o=o+s;let h=i.decode(t.slice(o,o+n));o=o+n;let c=i.decode(t.slice(o,o+r));o=o+r;let f=t.slice(o,t.byteLength);return{join_ref:a,ref:null,topic:h,event:c,payload:f}},decodeReply(t,e,i){let s=e.getUint8(1),n=e.getUint8(2),r=e.getUint8(3),o=e.getUint8(4),a=this.HEADER_LENGTH+this.META_LENGTH,h=i.decode(t.slice(a,a+s));a=a+s;let c=i.decode(t.slice(a,a+n));a=a+n;let f=i.decode(t.slice(a,a+r));a=a+r;let g=i.decode(t.slice(a,a+o));a=a+o;let b=t.slice(a,t.byteLength),w={status:g,response:b};return{join_ref:h,ref:c,topic:f,event:de.reply,payload:w}},decodeBroadcast(t,e,i){let s=e.getUint8(1),n=e.getUint8(2),r=this.HEADER_LENGTH+2,o=i.decode(t.slice(r,r+s));r=r+s;let a=i.decode(t.slice(r,r+n));r=r+n;let h=t.slice(r,t.byteLength);return{join_ref:null,ref:null,topic:o,event:a,payload:h}}},Nt=class{constructor(t,e={}){this.stateChangeCallbacks={open:[],close:[],error:[],message:[]},this.channels=[],this.sendBuffer=[],this.ref=0,this.fallbackRef=null,this.timeout=e.timeout||Ci,this.transport=e.transport||re.WebSocket||_e,this.primaryPassedHealthCheck=!1,this.longPollFallbackMs=e.longPollFallbackMs,this.fallbackTimer=null,this.sessionStore=e.sessionStorage||re&&re.sessionStorage,this.establishedConnections=0,this.defaultEncoder=Ze.encode.bind(Ze),this.defaultDecoder=Ze.decode.bind(Ze),this.closeWasClean=!0,this.disconnecting=!1,this.binaryType=e.binaryType||"arraybuffer",this.connectClock=1,this.pageHidden=!1,this.transport!==_e?(this.encode=e.encode||this.defaultEncoder,this.decode=e.decode||this.defaultDecoder):(this.encode=this.defaultEncoder,this.decode=this.defaultDecoder);let i=null;Pe&&Pe.addEventListener&&(Pe.addEventListener("pagehide",s=>{this.conn&&(this.disconnect(),i=this.connectClock)}),Pe.addEventListener("pageshow",s=>{i===this.connectClock&&(i=null,this.connect())}),Pe.addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"?this.pageHidden=!0:(this.pageHidden=!1,!this.isConnected()&&!this.closeWasClean&&this.teardown(()=>this.connect()))})),this.heartbeatIntervalMs=e.heartbeatIntervalMs||3e4,this.rejoinAfterMs=s=>e.rejoinAfterMs?e.rejoinAfterMs(s):[1e3,2e3,5e3][s-1]||1e4,this.reconnectAfterMs=s=>e.reconnectAfterMs?e.reconnectAfterMs(s):[10,50,100,150,200,250,500,1e3,2e3][s-1]||5e3,this.logger=e.logger||null,!this.logger&&e.debug&&(this.logger=(s,n,r)=>{console.log(`${s}: ${n}`,r)}),this.longpollerTimeout=e.longpollerTimeout||2e4,this.params=$e(e.params||{}),this.endPoint=`${t}/${pt.websocket}`,this.vsn=e.vsn||Ai,this.heartbeatTimeoutTimer=null,this.heartbeatTimer=null,this.pendingHeartbeatRef=null,this.reconnectTimer=new Ht(()=>{if(this.pageHidden){this.log("Not reconnecting as page is hidden!"),this.teardown();return}this.teardown(()=>this.connect())},this.reconnectAfterMs),this.authToken=e.authToken}getLongPollTransport(){return _e}replaceTransport(t){this.connectClock++,this.closeWasClean=!0,clearTimeout(this.fallbackTimer),this.reconnectTimer.reset(),this.conn&&(this.conn.close(),this.conn=null),this.transport=t}protocol(){return location.protocol.match(/^https/)?"wss":"ws"}endPointURL(){let t=Qe.appendParams(Qe.appendParams(this.endPoint,this.params()),{vsn:this.vsn});return t.charAt(0)!=="/"?t:t.charAt(1)==="/"?`${this.protocol()}:${t}`:`${this.protocol()}://${location.host}${t}`}disconnect(t,e,i){this.connectClock++,this.disconnecting=!0,this.closeWasClean=!0,clearTimeout(this.fallbackTimer),this.reconnectTimer.reset(),this.teardown(()=>{this.disconnecting=!1,t&&t()},e,i)}connect(t){t&&(console&&console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor"),this.params=$e(t)),!(this.conn&&!this.disconnecting)&&(this.longPollFallbackMs&&this.transport!==_e?this.connectWithFallback(_e,this.longPollFallbackMs):this.transportConnect())}log(t,e,i){this.logger&&this.logger(t,e,i)}hasLogger(){return this.logger!==null}onOpen(t){let e=this.makeRef();return this.stateChangeCallbacks.open.push([e,t]),e}onClose(t){let e=this.makeRef();return this.stateChangeCallbacks.close.push([e,t]),e}onError(t){let e=this.makeRef();return this.stateChangeCallbacks.error.push([e,t]),e}onMessage(t){let e=this.makeRef();return this.stateChangeCallbacks.message.push([e,t]),e}ping(t){if(!this.isConnected())return!1;let e=this.makeRef(),i=Date.now();this.push({topic:"phoenix",event:"heartbeat",payload:{},ref:e});let s=this.onMessage(n=>{n.ref===e&&(this.off([s]),t(Date.now()-i))});return!0}transportName(t){switch(t){case _e:return"LongPoll";default:return t.name}}transportConnect(){this.connectClock++,this.closeWasClean=!1;let t;this.authToken&&(t=["phoenix",`${mt}${btoa(this.authToken).replace(/=/g,"")}`]),this.conn=new this.transport(this.endPointURL(),t),this.conn.binaryType=this.binaryType,this.conn.timeout=this.longpollerTimeout,this.conn.onopen=()=>this.onConnOpen(),this.conn.onerror=e=>this.onConnError(e),this.conn.onmessage=e=>this.onConnMessage(e),this.conn.onclose=e=>this.onConnClose(e)}getSession(t){return this.sessionStore&&this.sessionStore.getItem(t)}storeSession(t,e){this.sessionStore&&this.sessionStore.setItem(t,e)}connectWithFallback(t,e=2500){clearTimeout(this.fallbackTimer);let i=!1,s=!0,n,r,o=this.transportName(t),a=h=>{this.log("transport",`falling back to ${o}...`,h),this.off([n,r]),s=!1,this.replaceTransport(t),this.transportConnect()};if(this.getSession(`phx:fallback:${o}`))return a("memorized");this.fallbackTimer=setTimeout(a,e),r=this.onError(h=>{this.log("transport","error",h),s&&!i&&(clearTimeout(this.fallbackTimer),a(h))}),this.fallbackRef&&this.off([this.fallbackRef]),this.fallbackRef=this.onOpen(()=>{if(i=!0,!s){let h=this.transportName(t);return this.primaryPassedHealthCheck||this.storeSession(`phx:fallback:${h}`,"true"),this.log("transport",`established ${h} fallback`)}clearTimeout(this.fallbackTimer),this.fallbackTimer=setTimeout(a,e),this.ping(h=>{this.log("transport","connected to primary after",h),this.primaryPassedHealthCheck=!0,clearTimeout(this.fallbackTimer)})}),this.transportConnect()}clearHeartbeats(){clearTimeout(this.heartbeatTimer),clearTimeout(this.heartbeatTimeoutTimer)}onConnOpen(){this.hasLogger()&&this.log("transport",`${this.transportName(this.transport)} connected to ${this.endPointURL()}`),this.closeWasClean=!1,this.disconnecting=!1,this.establishedConnections++,this.flushSendBuffer(),this.reconnectTimer.reset(),this.resetHeartbeat(),this.stateChangeCallbacks.open.forEach(([,t])=>t())}heartbeatTimeout(){this.pendingHeartbeatRef&&(this.pendingHeartbeatRef=null,this.hasLogger()&&this.log("transport","heartbeat timeout. Attempting to re-establish connection"),this.triggerChanError(),this.closeWasClean=!1,this.teardown(()=>this.reconnectTimer.scheduleTimeout(),Ti,"heartbeat timeout"))}resetHeartbeat(){this.conn&&this.conn.skipHeartbeat||(this.pendingHeartbeatRef=null,this.clearHeartbeats(),this.heartbeatTimer=setTimeout(()=>this.sendHeartbeat(),this.heartbeatIntervalMs))}teardown(t,e,i){if(!this.conn)return t&&t();let s=this.conn;this.waitForBufferDone(s,()=>{e?s.close(e,i||""):s.close(),this.waitForSocketClosed(s,()=>{this.conn===s&&(this.conn.onopen=function(){},this.conn.onerror=function(){},this.conn.onmessage=function(){},this.conn.onclose=function(){},this.conn=null),t&&t()})})}waitForBufferDone(t,e,i=1){if(i===5||!t.bufferedAmount){e();return}setTimeout(()=>{this.waitForBufferDone(t,e,i+1)},150*i)}waitForSocketClosed(t,e,i=1){if(i===5||t.readyState===oe.closed){e();return}setTimeout(()=>{this.waitForSocketClosed(t,e,i+1)},150*i)}onConnClose(t){this.conn&&(this.conn.onclose=()=>{});let e=t&&t.code;this.hasLogger()&&this.log("transport","close",t),this.triggerChanError(),this.clearHeartbeats(),!this.closeWasClean&&e!==1e3&&this.reconnectTimer.scheduleTimeout(),this.stateChangeCallbacks.close.forEach(([,i])=>i(t))}onConnError(t){this.hasLogger()&&this.log("transport",t);let e=this.transport,i=this.establishedConnections;this.stateChangeCallbacks.error.forEach(([,s])=>{s(t,e,i)}),(e===this.transport||i>0)&&this.triggerChanError()}triggerChanError(){this.channels.forEach(t=>{t.isErrored()||t.isLeaving()||t.isClosed()||t.trigger(de.error)})}connectionState(){switch(this.conn&&this.conn.readyState){case oe.connecting:return"connecting";case oe.open:return"open";case oe.closing:return"closing";default:return"closed"}}isConnected(){return this.connectionState()==="open"}remove(t){this.off(t.stateChangeRefs),this.channels=this.channels.filter(e=>e!==t)}off(t){for(let e in this.stateChangeCallbacks)this.stateChangeCallbacks[e]=this.stateChangeCallbacks[e].filter(([i])=>t.indexOf(i)===-1)}channel(t,e={}){let i=new Pi(t,e,this);return this.channels.push(i),i}push(t){if(this.hasLogger()){let{topic:e,event:i,payload:s,ref:n,join_ref:r}=t;this.log("push",`${e} ${i} (${r}, ${n})`,s)}this.isConnected()?this.encode(t,e=>this.conn.send(e)):this.sendBuffer.push(()=>this.encode(t,e=>this.conn.send(e)))}makeRef(){let t=this.ref+1;return t===this.ref?this.ref=0:this.ref=t,this.ref.toString()}sendHeartbeat(){this.pendingHeartbeatRef&&!this.isConnected()||(this.pendingHeartbeatRef=this.makeRef(),this.push({topic:"phoenix",event:"heartbeat",payload:{},ref:this.pendingHeartbeatRef}),this.heartbeatTimeoutTimer=setTimeout(()=>this.heartbeatTimeout(),this.heartbeatIntervalMs))}flushSendBuffer(){this.isConnected()&&this.sendBuffer.length>0&&(this.sendBuffer.forEach(t=>t()),this.sendBuffer=[])}onConnMessage(t){this.decode(t.data,e=>{let{topic:i,event:s,payload:n,ref:r,join_ref:o}=e;r&&r===this.pendingHeartbeatRef&&(this.clearHeartbeats(),this.pendingHeartbeatRef=null,this.heartbeatTimer=setTimeout(()=>this.sendHeartbeat(),this.heartbeatIntervalMs)),this.hasLogger()&&this.log("receive",`${n.status||""} ${i} ${s} ${r&&"("+r+")"||""}`,n);for(let a=0;a<this.channels.length;a++){let h=this.channels[a];h.isMember(i,s,n,o)&&h.trigger(s,n,r,o)}for(let a=0;a<this.stateChangeCallbacks.message.length;a++){let[,h]=this.stateChangeCallbacks.message[a];h(e)}})}leaveOpenTopic(t){let e=this.channels.find(i=>i.topic===t&&(i.isJoined()||i.isJoining()));e&&(this.hasLogger()&&this.log("transport",`leaving duplicate topic "${t}"`),e.leave())}};var di="consecutive-reloads",xi=10,Ii=5e3,Li=1e4,Di=3e4,ui=["phx-click-loading","phx-change-loading","phx-submit-loading","phx-keydown-loading","phx-keyup-loading","phx-blur-loading","phx-focus-loading","phx-hook-loading"],gt="phx-drop-target-active",le="data-phx-component",Oe="data-phx-view",vt="data-phx-link",Oi="track-static",Mi="data-phx-link-state",Me="data-phx-ref-loading",ie="data-phx-ref-src",B="data-phx-ref-lock",$t="phx-pending-refs",fi="track-uploads",pe="data-phx-upload-ref",It="data-phx-preflighted-refs",Hi="data-phx-done-refs",et="drop-target",kt="data-phx-active-refs",at="phx:live-file:updated",pi="data-phx-skip",mi="data-phx-id",Ft="data-phx-prune",Ut="phx-connected",be="phx-loading",Re="phx-error",jt="phx-client-error",Fe="phx-server-error",ke="data-phx-parent-id",Lt="data-phx-main",fe="data-phx-root-id",At="viewport-top",Ct="viewport-bottom",Ni="viewport-overrun-target",$i="trigger-action",dt="phx-has-focused",Fi=["text","textarea","number","email","password","search","tel","url","date","time","datetime-local","color","range"],gi=["checkbox","radio"],Xe="phx-has-submitted",ce="data-phx-session",ze=`[${ce}]`,Tt="data-phx-sticky",Ee="data-phx-static",_t="data-phx-readonly",Le="data-phx-disabled",Bt="disable-with",ut="data-phx-disable-with-restore",Ue="hook",Ui="debounce",ji="throttle",ft="update",ht="stream",je="data-phx-stream",Dt="data-phx-portal",Ae="data-phx-teleported",ve="data-phx-teleported-src",lt="data-phx-runtime-hook",Bi="data-phx-pid",Vi="key",ae="phxPrivate",Vt="auto-recover",tt="phx:live-socket:debug",bt="phx:live-socket:profiling",wt="phx:live-socket:latency-sim",it="phx:nav-history-position",qi="progress",qt="mounted",Wt="__phoenix_reload_status__",Wi=1,Jt=3,Ji=200,Xi=500,zi="phx-",Ki=3e4,Be="debounce-trigger",Ve="throttled",Xt="debounce-prev-key",Gi={debounce:300,throttle:300},zt=[Me,ie,B],te="s",yt="r",K="c",j="k",he="kc",Kt="e",Gt="r",Yt="t",me="p",xe="stream",Yi=class{constructor(t,e,i){let{chunk_size:s,chunk_timeout:n}=e;this.liveSocket=i,this.entry=t,this.offset=0,this.chunkSize=s,this.chunkTimeout=n,this.chunkTimer=null,this.errored=!1,this.uploadChannel=i.channel(`lvu:${t.ref}`,{token:t.metadata()})}error(t){this.errored||(this.uploadChannel.leave(),this.errored=!0,clearTimeout(this.chunkTimer),this.entry.error(t))}upload(){this.uploadChannel.onError(t=>this.error(t)),this.uploadChannel.join().receive("ok",t=>this.readNextChunk()).receive("error",t=>this.error(t))}isDone(){return this.offset>=this.entry.file.size}readNextChunk(){let t=new window.FileReader,e=this.entry.file.slice(this.offset,this.chunkSize+this.offset);t.onload=i=>{if(i.target.error===null)this.offset+=i.target.result.byteLength,this.pushChunk(i.target.result);else return O("Read error: "+i.target.error)},t.readAsArrayBuffer(e)}pushChunk(t){this.uploadChannel.isJoined()&&this.uploadChannel.push("chunk",t,this.chunkTimeout).receive("ok",()=>{this.entry.progress(this.offset/this.entry.file.size*100),this.isDone()||(this.chunkTimer=setTimeout(()=>this.readNextChunk(),this.liveSocket.getLatencySim()||0))}).receive("error",({reason:e})=>this.error(e))}},O=(t,e)=>console.error&&console.error(t,e),ue=t=>{let e=typeof t;return e==="number"||e==="string"&&/^(0|[1-9]\d*)$/.test(t)};function Zi(){let t=new Set,e=document.querySelectorAll("*[id]");for(let i=0,s=e.length;i<s;i++)t.has(e[i].id)?console.error(`Multiple IDs detected: ${e[i].id}. Ensure unique element ids.`):t.add(e[i].id)}function Qi(t){let e=new Set;Object.keys(t).forEach(i=>{let s=document.getElementById(i);s&&s.parentElement&&s.parentElement.getAttribute("phx-update")!=="stream"&&e.add(`The stream container with id "${s.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`)}),e.forEach(i=>console.error(i))}var es=(t,e,i,s)=>{t.liveSocket.isDebugEnabled()&&console.log(`${t.id} ${e}: ${i} - `,s)},qe=t=>typeof t=="function"?t:function(){return t},ct=t=>JSON.parse(JSON.stringify(t)),Se=(t,e,i)=>{do{if(t.matches(`[${e}]`)&&!t.disabled)return t;t=t.parentElement||t.parentNode}while(t!==null&&t.nodeType===1&&!(i&&i.isSameNode(t)||t.matches(ze)));return null},Ie=t=>t!==null&&typeof t=="object"&&!(t instanceof Array),ts=(t,e)=>JSON.stringify(t)===JSON.stringify(e),Zt=t=>{for(let e in t)return!1;return!0},De=(t,e)=>t&&e(t),is=function(t,e,i,s){t.forEach(n=>{new Yi(n,i.config,s).upload()})},ss=t=>{if(t.dataTransfer.types){for(let e=0;e<t.dataTransfer.types.length;e++)if(t.dataTransfer.types[e]==="Files")return!0}return!1},ns={canPushState(){return typeof history.pushState<"u"},dropLocal(t,e,i){return t.removeItem(this.localKey(e,i))},updateLocal(t,e,i,s,n){let r=this.getLocal(t,e,i),o=this.localKey(e,i),a=r===null?s:n(r);return t.setItem(o,JSON.stringify(a)),a},getLocal(t,e,i){return JSON.parse(t.getItem(this.localKey(e,i)))},updateCurrentState(t){this.canPushState()&&history.replaceState(t(history.state||{}),"",window.location.href)},pushState(t,e,i){if(this.canPushState()){if(i!==window.location.href){if(e.type=="redirect"&&e.scroll){let s=history.state||{};s.scroll=e.scroll,history.replaceState(s,"",window.location.href)}delete e.scroll,history[t+"State"](e,"",i||null),window.requestAnimationFrame(()=>{let s=this.getHashTargetEl(window.location.hash);s?s.scrollIntoView():e.type==="redirect"&&window.scroll(0,0)})}}else this.redirect(i)},setCookie(t,e,i){let s=typeof i=="number"?` max-age=${i};`:"";document.cookie=`${t}=${e};${s} path=/`},getCookie(t){return document.cookie.replace(new RegExp(`(?:(?:^|.*;s*)${t}s*=s*([^;]*).*$)|^.*$`),"$1")},deleteCookie(t){document.cookie=`${t}=; max-age=-1; path=/`},redirect(t,e,i=s=>{window.location.href=s}){e&&this.setCookie("__phoenix_flash__",e,60),i(t)},localKey(t,e){return`${t}-${e}`},getHashTargetEl(t){let e=t.toString().substring(1);if(e!=="")return document.getElementById(e)||document.querySelector(`a[name="${e}"]`)}},Z=ns,ye={byId(t){return document.getElementById(t)||O(`no id found for ${t}`)},removeClass(t,e){t.classList.remove(e),t.classList.length===0&&t.removeAttribute("class")},all(t,e,i){if(!t)return[];let s=Array.from(t.querySelectorAll(e));return i&&s.forEach(i),s},childNodeLength(t){let e=document.createElement("template");return e.innerHTML=t,e.content.childElementCount},isUploadInput(t){return t.type==="file"&&t.getAttribute(pe)!==null},isAutoUpload(t){return t.hasAttribute("data-phx-auto-upload")},findUploadInputs(t){let e=t.id,i=this.all(document,`input[type="file"][${pe}][form="${e}"]`);return this.all(t,`input[type="file"][${pe}]`).concat(i)},findComponentNodeList(t,e,i=document){return this.all(i,`[${Oe}="${t}"][${le}="${e}"]`)},isPhxDestroyed(t){return!!(t.id&&ye.private(t,"destroyed"))},wantsNewTab(t){let e=t.ctrlKey||t.shiftKey||t.metaKey||t.button&&t.button===1,i=t.target instanceof HTMLAnchorElement&&t.target.hasAttribute("download"),s=t.target.hasAttribute("target")&&t.target.getAttribute("target").toLowerCase()==="_blank",n=t.target.hasAttribute("target")&&!t.target.getAttribute("target").startsWith("_");return e||s||i||n},isUnloadableFormSubmit(t){return t.target&&t.target.getAttribute("method")==="dialog"||t.submitter&&t.submitter.getAttribute("formmethod")==="dialog"?!1:!t.defaultPrevented&&!this.wantsNewTab(t)},isNewPageClick(t,e){let i=t.target instanceof HTMLAnchorElement?t.target.getAttribute("href"):null,s;if(t.defaultPrevented||i===null||this.wantsNewTab(t)||i.startsWith("mailto:")||i.startsWith("tel:")||t.target.isContentEditable)return!1;try{s=new URL(i)}catch{try{s=new URL(i,e)}catch{return!0}}return s.host===e.host&&s.protocol===e.protocol&&s.pathname===e.pathname&&s.search===e.search?s.hash===""&&!s.href.endsWith("#"):s.protocol.startsWith("http")},markPhxChildDestroyed(t){this.isPhxChild(t)&&t.setAttribute(ce,""),this.putPrivate(t,"destroyed",!0)},findPhxChildrenInFragment(t,e){let i=document.createElement("template");return i.innerHTML=t,this.findPhxChildren(i.content,e)},isIgnored(t,e){return(t.getAttribute(e)||t.getAttribute("data-phx-update"))==="ignore"},isPhxUpdate(t,e,i){return t.getAttribute&&i.indexOf(t.getAttribute(e))>=0},findPhxSticky(t){return this.all(t,`[${Tt}]`)},findPhxChildren(t,e){return this.all(t,`${ze}[${ke}="${e}"]`)},findExistingParentCIDs(t,e){let i=new Set,s=new Set;return e.forEach(n=>{this.all(document,`[${Oe}="${t}"][${le}="${n}"]`).forEach(r=>{i.add(n),this.all(r,`[${Oe}="${t}"][${le}]`).map(o=>parseInt(o.getAttribute(le))).forEach(o=>s.add(o))})}),s.forEach(n=>i.delete(n)),i},private(t,e){return t[ae]&&t[ae][e]},deletePrivate(t,e){t[ae]&&delete t[ae][e]},putPrivate(t,e,i){t[ae]||(t[ae]={}),t[ae][e]=i},updatePrivate(t,e,i,s){let n=this.private(t,e);n===void 0?this.putPrivate(t,e,s(i)):this.putPrivate(t,e,s(n))},syncPendingAttrs(t,e){t.hasAttribute(ie)&&(ui.forEach(i=>{t.classList.contains(i)&&e.classList.add(i)}),zt.filter(i=>t.hasAttribute(i)).forEach(i=>{e.setAttribute(i,t.getAttribute(i))}))},copyPrivates(t,e){e[ae]&&(t[ae]=e[ae])},putTitle(t){let e=document.querySelector("title");if(e){let{prefix:i,suffix:s,default:n}=e.dataset,r=typeof t!="string"||t.trim()==="";if(r&&typeof n!="string")return;let o=r?n:t;document.title=`${i||""}${o||""}${s||""}`}else document.title=t},debounce(t,e,i,s,n,r,o,a){let h=t.getAttribute(i),c=t.getAttribute(n);h===""&&(h=s),c===""&&(c=r);let f=h||c;switch(f){case null:return a();case"blur":this.incCycle(t,"debounce-blur-cycle",()=>{o()&&a()}),this.once(t,"debounce-blur")&&t.addEventListener("blur",()=>this.triggerCycle(t,"debounce-blur-cycle"));return;default:let g=parseInt(f),b=()=>c?this.deletePrivate(t,Ve):a(),w=this.incCycle(t,Be,b);if(isNaN(g))return O(`invalid throttle/debounce value: ${f}`);if(c){let S=!1;if(e.type==="keydown"){let A=this.private(t,Xt);this.putPrivate(t,Xt,e.key),S=A!==e.key}if(!S&&this.private(t,Ve))return!1;{a();let A=setTimeout(()=>{o()&&this.triggerCycle(t,Be)},g);this.putPrivate(t,Ve,A)}}else setTimeout(()=>{o()&&this.triggerCycle(t,Be,w)},g);let p=t.form;p&&this.once(p,"bind-debounce")&&p.addEventListener("submit",()=>{Array.from(new FormData(p).entries(),([S])=>{let A=p.elements.namedItem(S),$=A instanceof RadioNodeList?A[0]:A;$&&(this.incCycle($,Be),this.deletePrivate($,Ve))})}),this.once(t,"bind-debounce")&&t.addEventListener("blur",()=>{clearTimeout(this.private(t,Ve)),this.triggerCycle(t,Be)})}},triggerCycle(t,e,i){let[s,n]=this.private(t,e);i||(i=s),i===s&&(this.incCycle(t,e),n())},once(t,e){return this.private(t,e)===!0?!1:(this.putPrivate(t,e,!0),!0)},incCycle(t,e,i=function(){}){let[s]=this.private(t,e)||[0,i];return s++,this.putPrivate(t,e,[s,i]),s},maintainPrivateHooks(t,e,i,s){t.hasAttribute&&t.hasAttribute("data-phx-hook")&&!e.hasAttribute("data-phx-hook")&&e.setAttribute("data-phx-hook",t.getAttribute("data-phx-hook")),e.hasAttribute&&(e.hasAttribute(i)||e.hasAttribute(s))&&e.setAttribute("data-phx-hook","Phoenix.InfiniteScroll")},putCustomElHook(t,e){t.isConnected?t.setAttribute("data-phx-hook",""):console.error(`
+(() => {
+  // ../deps/phoenix/priv/static/phoenix.mjs
+  var closure = (value) => {
+    if (typeof value === "function") {
+      return value;
+    } else {
+      let closure22 = function() {
+        return value;
+      };
+      return closure22;
+    }
+  };
+  var globalSelf = typeof self !== "undefined" ? self : null;
+  var phxWindow = typeof window !== "undefined" ? window : null;
+  var global = globalSelf || phxWindow || globalThis;
+  var DEFAULT_VSN = "2.0.0";
+  var SOCKET_STATES = { connecting: 0, open: 1, closing: 2, closed: 3 };
+  var DEFAULT_TIMEOUT = 1e4;
+  var WS_CLOSE_NORMAL = 1e3;
+  var CHANNEL_STATES = {
+    closed: "closed",
+    errored: "errored",
+    joined: "joined",
+    joining: "joining",
+    leaving: "leaving"
+  };
+  var CHANNEL_EVENTS = {
+    close: "phx_close",
+    error: "phx_error",
+    join: "phx_join",
+    reply: "phx_reply",
+    leave: "phx_leave"
+  };
+  var TRANSPORTS = {
+    longpoll: "longpoll",
+    websocket: "websocket"
+  };
+  var XHR_STATES = {
+    complete: 4
+  };
+  var AUTH_TOKEN_PREFIX = "base64url.bearer.phx.";
+  var Push = class {
+    constructor(channel, event, payload, timeout) {
+      this.channel = channel;
+      this.event = event;
+      this.payload = payload || function() {
+        return {};
+      };
+      this.receivedResp = null;
+      this.timeout = timeout;
+      this.timeoutTimer = null;
+      this.recHooks = [];
+      this.sent = false;
+    }
+    /**
+     *
+     * @param {number} timeout
+     */
+    resend(timeout) {
+      this.timeout = timeout;
+      this.reset();
+      this.send();
+    }
+    /**
+     *
+     */
+    send() {
+      if (this.hasReceived("timeout")) {
+        return;
+      }
+      this.startTimeout();
+      this.sent = true;
+      this.channel.socket.push({
+        topic: this.channel.topic,
+        event: this.event,
+        payload: this.payload(),
+        ref: this.ref,
+        join_ref: this.channel.joinRef()
+      });
+    }
+    /**
+     *
+     * @param {*} status
+     * @param {*} callback
+     */
+    receive(status, callback) {
+      if (this.hasReceived(status)) {
+        callback(this.receivedResp.response);
+      }
+      this.recHooks.push({ status, callback });
+      return this;
+    }
+    /**
+     * @private
+     */
+    reset() {
+      this.cancelRefEvent();
+      this.ref = null;
+      this.refEvent = null;
+      this.receivedResp = null;
+      this.sent = false;
+    }
+    /**
+     * @private
+     */
+    matchReceive({ status, response, _ref }) {
+      this.recHooks.filter((h) => h.status === status).forEach((h) => h.callback(response));
+    }
+    /**
+     * @private
+     */
+    cancelRefEvent() {
+      if (!this.refEvent) {
+        return;
+      }
+      this.channel.off(this.refEvent);
+    }
+    /**
+     * @private
+     */
+    cancelTimeout() {
+      clearTimeout(this.timeoutTimer);
+      this.timeoutTimer = null;
+    }
+    /**
+     * @private
+     */
+    startTimeout() {
+      if (this.timeoutTimer) {
+        this.cancelTimeout();
+      }
+      this.ref = this.channel.socket.makeRef();
+      this.refEvent = this.channel.replyEventName(this.ref);
+      this.channel.on(this.refEvent, (payload) => {
+        this.cancelRefEvent();
+        this.cancelTimeout();
+        this.receivedResp = payload;
+        this.matchReceive(payload);
+      });
+      this.timeoutTimer = setTimeout(() => {
+        this.trigger("timeout", {});
+      }, this.timeout);
+    }
+    /**
+     * @private
+     */
+    hasReceived(status) {
+      return this.receivedResp && this.receivedResp.status === status;
+    }
+    /**
+     * @private
+     */
+    trigger(status, response) {
+      this.channel.trigger(this.refEvent, { status, response });
+    }
+  };
+  var Timer = class {
+    constructor(callback, timerCalc) {
+      this.callback = callback;
+      this.timerCalc = timerCalc;
+      this.timer = null;
+      this.tries = 0;
+    }
+    reset() {
+      this.tries = 0;
+      clearTimeout(this.timer);
+    }
+    /**
+     * Cancels any previous scheduleTimeout and schedules callback
+     */
+    scheduleTimeout() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.tries = this.tries + 1;
+        this.callback();
+      }, this.timerCalc(this.tries + 1));
+    }
+  };
+  var Channel = class {
+    constructor(topic, params, socket) {
+      this.state = CHANNEL_STATES.closed;
+      this.topic = topic;
+      this.params = closure(params || {});
+      this.socket = socket;
+      this.bindings = [];
+      this.bindingRef = 0;
+      this.timeout = this.socket.timeout;
+      this.joinedOnce = false;
+      this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params, this.timeout);
+      this.pushBuffer = [];
+      this.stateChangeRefs = [];
+      this.rejoinTimer = new Timer(() => {
+        if (this.socket.isConnected()) {
+          this.rejoin();
+        }
+      }, this.socket.rejoinAfterMs);
+      this.stateChangeRefs.push(this.socket.onError(() => this.rejoinTimer.reset()));
+      this.stateChangeRefs.push(
+        this.socket.onOpen(() => {
+          this.rejoinTimer.reset();
+          if (this.isErrored()) {
+            this.rejoin();
+          }
+        })
+      );
+      this.joinPush.receive("ok", () => {
+        this.state = CHANNEL_STATES.joined;
+        this.rejoinTimer.reset();
+        this.pushBuffer.forEach((pushEvent) => pushEvent.send());
+        this.pushBuffer = [];
+      });
+      this.joinPush.receive("error", () => {
+        this.state = CHANNEL_STATES.errored;
+        if (this.socket.isConnected()) {
+          this.rejoinTimer.scheduleTimeout();
+        }
+      });
+      this.onClose(() => {
+        this.rejoinTimer.reset();
+        if (this.socket.hasLogger()) this.socket.log("channel", `close ${this.topic} ${this.joinRef()}`);
+        this.state = CHANNEL_STATES.closed;
+        this.socket.remove(this);
+      });
+      this.onError((reason) => {
+        if (this.socket.hasLogger()) this.socket.log("channel", `error ${this.topic}`, reason);
+        if (this.isJoining()) {
+          this.joinPush.reset();
+        }
+        this.state = CHANNEL_STATES.errored;
+        if (this.socket.isConnected()) {
+          this.rejoinTimer.scheduleTimeout();
+        }
+      });
+      this.joinPush.receive("timeout", () => {
+        if (this.socket.hasLogger()) this.socket.log("channel", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout);
+        let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), this.timeout);
+        leavePush.send();
+        this.state = CHANNEL_STATES.errored;
+        this.joinPush.reset();
+        if (this.socket.isConnected()) {
+          this.rejoinTimer.scheduleTimeout();
+        }
+      });
+      this.on(CHANNEL_EVENTS.reply, (payload, ref) => {
+        this.trigger(this.replyEventName(ref), payload);
+      });
+    }
+    /**
+     * Join the channel
+     * @param {integer} timeout
+     * @returns {Push}
+     */
+    join(timeout = this.timeout) {
+      if (this.joinedOnce) {
+        throw new Error("tried to join multiple times. 'join' can only be called a single time per channel instance");
+      } else {
+        this.timeout = timeout;
+        this.joinedOnce = true;
+        this.rejoin();
+        return this.joinPush;
+      }
+    }
+    /**
+     * Hook into channel close
+     * @param {Function} callback
+     */
+    onClose(callback) {
+      this.on(CHANNEL_EVENTS.close, callback);
+    }
+    /**
+     * Hook into channel errors
+     * @param {Function} callback
+     */
+    onError(callback) {
+      return this.on(CHANNEL_EVENTS.error, (reason) => callback(reason));
+    }
+    /**
+     * Subscribes on channel events
+     *
+     * Subscription returns a ref counter, which can be used later to
+     * unsubscribe the exact event listener
+     *
+     * @example
+     * const ref1 = channel.on("event", do_stuff)
+     * const ref2 = channel.on("event", do_other_stuff)
+     * channel.off("event", ref1)
+     * // Since unsubscription, do_stuff won't fire,
+     * // while do_other_stuff will keep firing on the "event"
+     *
+     * @param {string} event
+     * @param {Function} callback
+     * @returns {integer} ref
+     */
+    on(event, callback) {
+      let ref = this.bindingRef++;
+      this.bindings.push({ event, ref, callback });
+      return ref;
+    }
+    /**
+     * Unsubscribes off of channel events
+     *
+     * Use the ref returned from a channel.on() to unsubscribe one
+     * handler, or pass nothing for the ref to unsubscribe all
+     * handlers for the given event.
+     *
+     * @example
+     * // Unsubscribe the do_stuff handler
+     * const ref1 = channel.on("event", do_stuff)
+     * channel.off("event", ref1)
+     *
+     * // Unsubscribe all handlers from event
+     * channel.off("event")
+     *
+     * @param {string} event
+     * @param {integer} ref
+     */
+    off(event, ref) {
+      this.bindings = this.bindings.filter((bind) => {
+        return !(bind.event === event && (typeof ref === "undefined" || ref === bind.ref));
+      });
+    }
+    /**
+     * @private
+     */
+    canPush() {
+      return this.socket.isConnected() && this.isJoined();
+    }
+    /**
+     * Sends a message `event` to phoenix with the payload `payload`.
+     * Phoenix receives this in the `handle_in(event, payload, socket)`
+     * function. if phoenix replies or it times out (default 10000ms),
+     * then optionally the reply can be received.
+     *
+     * @example
+     * channel.push("event")
+     *   .receive("ok", payload => console.log("phoenix replied:", payload))
+     *   .receive("error", err => console.log("phoenix errored", err))
+     *   .receive("timeout", () => console.log("timed out pushing"))
+     * @param {string} event
+     * @param {Object} payload
+     * @param {number} [timeout]
+     * @returns {Push}
+     */
+    push(event, payload, timeout = this.timeout) {
+      payload = payload || {};
+      if (!this.joinedOnce) {
+        throw new Error(`tried to push '${event}' to '${this.topic}' before joining. Use channel.join() before pushing events`);
+      }
+      let pushEvent = new Push(this, event, function() {
+        return payload;
+      }, timeout);
+      if (this.canPush()) {
+        pushEvent.send();
+      } else {
+        pushEvent.startTimeout();
+        this.pushBuffer.push(pushEvent);
+      }
+      return pushEvent;
+    }
+    /** Leaves the channel
+     *
+     * Unsubscribes from server events, and
+     * instructs channel to terminate on server
+     *
+     * Triggers onClose() hooks
+     *
+     * To receive leave acknowledgements, use the `receive`
+     * hook to bind to the server ack, ie:
+     *
+     * @example
+     * channel.leave().receive("ok", () => alert("left!") )
+     *
+     * @param {integer} timeout
+     * @returns {Push}
+     */
+    leave(timeout = this.timeout) {
+      this.rejoinTimer.reset();
+      this.joinPush.cancelTimeout();
+      this.state = CHANNEL_STATES.leaving;
+      let onClose = () => {
+        if (this.socket.hasLogger()) this.socket.log("channel", `leave ${this.topic}`);
+        this.trigger(CHANNEL_EVENTS.close, "leave");
+      };
+      let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), timeout);
+      leavePush.receive("ok", () => onClose()).receive("timeout", () => onClose());
+      leavePush.send();
+      if (!this.canPush()) {
+        leavePush.trigger("ok", {});
+      }
+      return leavePush;
+    }
+    /**
+     * Overridable message hook
+     *
+     * Receives all events for specialized message handling
+     * before dispatching to the channel callbacks.
+     *
+     * Must return the payload, modified or unmodified
+     * @param {string} event
+     * @param {Object} payload
+     * @param {integer} ref
+     * @returns {Object}
+     */
+    onMessage(_event, payload, _ref) {
+      return payload;
+    }
+    /**
+     * @private
+     */
+    isMember(topic, event, payload, joinRef) {
+      if (this.topic !== topic) {
+        return false;
+      }
+      if (joinRef && joinRef !== this.joinRef()) {
+        if (this.socket.hasLogger()) this.socket.log("channel", "dropping outdated message", { topic, event, payload, joinRef });
+        return false;
+      } else {
+        return true;
+      }
+    }
+    /**
+     * @private
+     */
+    joinRef() {
+      return this.joinPush.ref;
+    }
+    /**
+     * @private
+     */
+    rejoin(timeout = this.timeout) {
+      if (this.isLeaving()) {
+        return;
+      }
+      this.socket.leaveOpenTopic(this.topic);
+      this.state = CHANNEL_STATES.joining;
+      this.joinPush.resend(timeout);
+    }
+    /**
+     * @private
+     */
+    trigger(event, payload, ref, joinRef) {
+      let handledPayload = this.onMessage(event, payload, ref, joinRef);
+      if (payload && !handledPayload) {
+        throw new Error("channel onMessage callbacks must return the payload, modified or unmodified");
+      }
+      let eventBindings = this.bindings.filter((bind) => bind.event === event);
+      for (let i = 0; i < eventBindings.length; i++) {
+        let bind = eventBindings[i];
+        bind.callback(handledPayload, ref, joinRef || this.joinRef());
+      }
+    }
+    /**
+     * @private
+     */
+    replyEventName(ref) {
+      return `chan_reply_${ref}`;
+    }
+    /**
+     * @private
+     */
+    isClosed() {
+      return this.state === CHANNEL_STATES.closed;
+    }
+    /**
+     * @private
+     */
+    isErrored() {
+      return this.state === CHANNEL_STATES.errored;
+    }
+    /**
+     * @private
+     */
+    isJoined() {
+      return this.state === CHANNEL_STATES.joined;
+    }
+    /**
+     * @private
+     */
+    isJoining() {
+      return this.state === CHANNEL_STATES.joining;
+    }
+    /**
+     * @private
+     */
+    isLeaving() {
+      return this.state === CHANNEL_STATES.leaving;
+    }
+  };
+  var Ajax = class {
+    static request(method, endPoint, headers, body, timeout, ontimeout, callback) {
+      if (global.XDomainRequest) {
+        let req = new global.XDomainRequest();
+        return this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);
+      } else if (global.XMLHttpRequest) {
+        let req = new global.XMLHttpRequest();
+        return this.xhrRequest(req, method, endPoint, headers, body, timeout, ontimeout, callback);
+      } else if (global.fetch && global.AbortController) {
+        return this.fetchRequest(method, endPoint, headers, body, timeout, ontimeout, callback);
+      } else {
+        throw new Error("No suitable XMLHttpRequest implementation found");
+      }
+    }
+    static fetchRequest(method, endPoint, headers, body, timeout, ontimeout, callback) {
+      let options = {
+        method,
+        headers,
+        body
+      };
+      let controller = null;
+      if (timeout) {
+        controller = new AbortController();
+        const _timeoutId = setTimeout(() => controller.abort(), timeout);
+        options.signal = controller.signal;
+      }
+      global.fetch(endPoint, options).then((response) => response.text()).then((data) => this.parseJSON(data)).then((data) => callback && callback(data)).catch((err) => {
+        if (err.name === "AbortError" && ontimeout) {
+          ontimeout();
+        } else {
+          callback && callback(null);
+        }
+      });
+      return controller;
+    }
+    static xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) {
+      req.timeout = timeout;
+      req.open(method, endPoint);
+      req.onload = () => {
+        let response = this.parseJSON(req.responseText);
+        callback && callback(response);
+      };
+      if (ontimeout) {
+        req.ontimeout = ontimeout;
+      }
+      req.onprogress = () => {
+      };
+      req.send(body);
+      return req;
+    }
+    static xhrRequest(req, method, endPoint, headers, body, timeout, ontimeout, callback) {
+      req.open(method, endPoint, true);
+      req.timeout = timeout;
+      for (let [key, value] of Object.entries(headers)) {
+        req.setRequestHeader(key, value);
+      }
+      req.onerror = () => callback && callback(null);
+      req.onreadystatechange = () => {
+        if (req.readyState === XHR_STATES.complete && callback) {
+          let response = this.parseJSON(req.responseText);
+          callback(response);
+        }
+      };
+      if (ontimeout) {
+        req.ontimeout = ontimeout;
+      }
+      req.send(body);
+      return req;
+    }
+    static parseJSON(resp) {
+      if (!resp || resp === "") {
+        return null;
+      }
+      try {
+        return JSON.parse(resp);
+      } catch {
+        console && console.log("failed to parse JSON response", resp);
+        return null;
+      }
+    }
+    static serialize(obj, parentKey) {
+      let queryStr = [];
+      for (var key in obj) {
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+          continue;
+        }
+        let paramKey = parentKey ? `${parentKey}[${key}]` : key;
+        let paramVal = obj[key];
+        if (typeof paramVal === "object") {
+          queryStr.push(this.serialize(paramVal, paramKey));
+        } else {
+          queryStr.push(encodeURIComponent(paramKey) + "=" + encodeURIComponent(paramVal));
+        }
+      }
+      return queryStr.join("&");
+    }
+    static appendParams(url, params) {
+      if (Object.keys(params).length === 0) {
+        return url;
+      }
+      let prefix = url.match(/\?/) ? "&" : "?";
+      return `${url}${prefix}${this.serialize(params)}`;
+    }
+  };
+  var arrayBufferToBase64 = (buffer) => {
+    let binary = "";
+    let bytes = new Uint8Array(buffer);
+    let len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+  };
+  var LongPoll = class {
+    constructor(endPoint, protocols) {
+      if (protocols && protocols.length === 2 && protocols[1].startsWith(AUTH_TOKEN_PREFIX)) {
+        this.authToken = atob(protocols[1].slice(AUTH_TOKEN_PREFIX.length));
+      }
+      this.endPoint = null;
+      this.token = null;
+      this.skipHeartbeat = true;
+      this.reqs = /* @__PURE__ */ new Set();
+      this.awaitingBatchAck = false;
+      this.currentBatch = null;
+      this.currentBatchTimer = null;
+      this.batchBuffer = [];
+      this.onopen = function() {
+      };
+      this.onerror = function() {
+      };
+      this.onmessage = function() {
+      };
+      this.onclose = function() {
+      };
+      this.pollEndpoint = this.normalizeEndpoint(endPoint);
+      this.readyState = SOCKET_STATES.connecting;
+      setTimeout(() => this.poll(), 0);
+    }
+    normalizeEndpoint(endPoint) {
+      return endPoint.replace("ws://", "http://").replace("wss://", "https://").replace(new RegExp("(.*)/" + TRANSPORTS.websocket), "$1/" + TRANSPORTS.longpoll);
+    }
+    endpointURL() {
+      return Ajax.appendParams(this.pollEndpoint, { token: this.token });
+    }
+    closeAndRetry(code, reason, wasClean) {
+      this.close(code, reason, wasClean);
+      this.readyState = SOCKET_STATES.connecting;
+    }
+    ontimeout() {
+      this.onerror("timeout");
+      this.closeAndRetry(1005, "timeout", false);
+    }
+    isActive() {
+      return this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting;
+    }
+    poll() {
+      const headers = { "Accept": "application/json" };
+      if (this.authToken) {
+        headers["X-Phoenix-AuthToken"] = this.authToken;
+      }
+      this.ajax("GET", headers, null, () => this.ontimeout(), (resp) => {
+        if (resp) {
+          var { status, token, messages } = resp;
+          if (status === 410 && this.token !== null) {
+            this.onerror(410);
+            this.closeAndRetry(3410, "session_gone", false);
+            return;
+          }
+          this.token = token;
+        } else {
+          status = 0;
+        }
+        switch (status) {
+          case 200:
+            messages.forEach((msg) => {
+              setTimeout(() => this.onmessage({ data: msg }), 0);
+            });
+            this.poll();
+            break;
+          case 204:
+            this.poll();
+            break;
+          case 410:
+            this.readyState = SOCKET_STATES.open;
+            this.onopen({});
+            this.poll();
+            break;
+          case 403:
+            this.onerror(403);
+            this.close(1008, "forbidden", false);
+            break;
+          case 0:
+          case 500:
+            this.onerror(500);
+            this.closeAndRetry(1011, "internal server error", 500);
+            break;
+          default:
+            throw new Error(`unhandled poll status ${status}`);
+        }
+      });
+    }
+    // we collect all pushes within the current event loop by
+    // setTimeout 0, which optimizes back-to-back procedural
+    // pushes against an empty buffer
+    send(body) {
+      if (typeof body !== "string") {
+        body = arrayBufferToBase64(body);
+      }
+      if (this.currentBatch) {
+        this.currentBatch.push(body);
+      } else if (this.awaitingBatchAck) {
+        this.batchBuffer.push(body);
+      } else {
+        this.currentBatch = [body];
+        this.currentBatchTimer = setTimeout(() => {
+          this.batchSend(this.currentBatch);
+          this.currentBatch = null;
+        }, 0);
+      }
+    }
+    batchSend(messages) {
+      this.awaitingBatchAck = true;
+      this.ajax("POST", { "Content-Type": "application/x-ndjson" }, messages.join("\n"), () => this.onerror("timeout"), (resp) => {
+        this.awaitingBatchAck = false;
+        if (!resp || resp.status !== 200) {
+          this.onerror(resp && resp.status);
+          this.closeAndRetry(1011, "internal server error", false);
+        } else if (this.batchBuffer.length > 0) {
+          this.batchSend(this.batchBuffer);
+          this.batchBuffer = [];
+        }
+      });
+    }
+    close(code, reason, wasClean) {
+      for (let req of this.reqs) {
+        req.abort();
+      }
+      this.readyState = SOCKET_STATES.closed;
+      let opts = Object.assign({ code: 1e3, reason: void 0, wasClean: true }, { code, reason, wasClean });
+      this.batchBuffer = [];
+      clearTimeout(this.currentBatchTimer);
+      this.currentBatchTimer = null;
+      if (typeof CloseEvent !== "undefined") {
+        this.onclose(new CloseEvent("close", opts));
+      } else {
+        this.onclose(opts);
+      }
+    }
+    ajax(method, headers, body, onCallerTimeout, callback) {
+      let req;
+      let ontimeout = () => {
+        this.reqs.delete(req);
+        onCallerTimeout();
+      };
+      req = Ajax.request(method, this.endpointURL(), headers, body, this.timeout, ontimeout, (resp) => {
+        this.reqs.delete(req);
+        if (this.isActive()) {
+          callback(resp);
+        }
+      });
+      this.reqs.add(req);
+    }
+  };
+  var serializer_default = {
+    HEADER_LENGTH: 1,
+    META_LENGTH: 4,
+    KINDS: { push: 0, reply: 1, broadcast: 2 },
+    encode(msg, callback) {
+      if (msg.payload.constructor === ArrayBuffer) {
+        return callback(this.binaryEncode(msg));
+      } else {
+        let payload = [msg.join_ref, msg.ref, msg.topic, msg.event, msg.payload];
+        return callback(JSON.stringify(payload));
+      }
+    },
+    decode(rawPayload, callback) {
+      if (rawPayload.constructor === ArrayBuffer) {
+        return callback(this.binaryDecode(rawPayload));
+      } else {
+        let [join_ref, ref, topic, event, payload] = JSON.parse(rawPayload);
+        return callback({ join_ref, ref, topic, event, payload });
+      }
+    },
+    // private
+    binaryEncode(message) {
+      let { join_ref, ref, event, topic, payload } = message;
+      let metaLength = this.META_LENGTH + join_ref.length + ref.length + topic.length + event.length;
+      let header = new ArrayBuffer(this.HEADER_LENGTH + metaLength);
+      let view = new DataView(header);
+      let offset = 0;
+      view.setUint8(offset++, this.KINDS.push);
+      view.setUint8(offset++, join_ref.length);
+      view.setUint8(offset++, ref.length);
+      view.setUint8(offset++, topic.length);
+      view.setUint8(offset++, event.length);
+      Array.from(join_ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+      Array.from(ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+      Array.from(topic, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+      Array.from(event, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+      var combined = new Uint8Array(header.byteLength + payload.byteLength);
+      combined.set(new Uint8Array(header), 0);
+      combined.set(new Uint8Array(payload), header.byteLength);
+      return combined.buffer;
+    },
+    binaryDecode(buffer) {
+      let view = new DataView(buffer);
+      let kind = view.getUint8(0);
+      let decoder = new TextDecoder();
+      switch (kind) {
+        case this.KINDS.push:
+          return this.decodePush(buffer, view, decoder);
+        case this.KINDS.reply:
+          return this.decodeReply(buffer, view, decoder);
+        case this.KINDS.broadcast:
+          return this.decodeBroadcast(buffer, view, decoder);
+      }
+    },
+    decodePush(buffer, view, decoder) {
+      let joinRefSize = view.getUint8(1);
+      let topicSize = view.getUint8(2);
+      let eventSize = view.getUint8(3);
+      let offset = this.HEADER_LENGTH + this.META_LENGTH - 1;
+      let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));
+      offset = offset + joinRefSize;
+      let topic = decoder.decode(buffer.slice(offset, offset + topicSize));
+      offset = offset + topicSize;
+      let event = decoder.decode(buffer.slice(offset, offset + eventSize));
+      offset = offset + eventSize;
+      let data = buffer.slice(offset, buffer.byteLength);
+      return { join_ref: joinRef, ref: null, topic, event, payload: data };
+    },
+    decodeReply(buffer, view, decoder) {
+      let joinRefSize = view.getUint8(1);
+      let refSize = view.getUint8(2);
+      let topicSize = view.getUint8(3);
+      let eventSize = view.getUint8(4);
+      let offset = this.HEADER_LENGTH + this.META_LENGTH;
+      let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));
+      offset = offset + joinRefSize;
+      let ref = decoder.decode(buffer.slice(offset, offset + refSize));
+      offset = offset + refSize;
+      let topic = decoder.decode(buffer.slice(offset, offset + topicSize));
+      offset = offset + topicSize;
+      let event = decoder.decode(buffer.slice(offset, offset + eventSize));
+      offset = offset + eventSize;
+      let data = buffer.slice(offset, buffer.byteLength);
+      let payload = { status: event, response: data };
+      return { join_ref: joinRef, ref, topic, event: CHANNEL_EVENTS.reply, payload };
+    },
+    decodeBroadcast(buffer, view, decoder) {
+      let topicSize = view.getUint8(1);
+      let eventSize = view.getUint8(2);
+      let offset = this.HEADER_LENGTH + 2;
+      let topic = decoder.decode(buffer.slice(offset, offset + topicSize));
+      offset = offset + topicSize;
+      let event = decoder.decode(buffer.slice(offset, offset + eventSize));
+      offset = offset + eventSize;
+      let data = buffer.slice(offset, buffer.byteLength);
+      return { join_ref: null, ref: null, topic, event, payload: data };
+    }
+  };
+  var Socket = class {
+    constructor(endPoint, opts = {}) {
+      this.stateChangeCallbacks = { open: [], close: [], error: [], message: [] };
+      this.channels = [];
+      this.sendBuffer = [];
+      this.ref = 0;
+      this.fallbackRef = null;
+      this.timeout = opts.timeout || DEFAULT_TIMEOUT;
+      this.transport = opts.transport || global.WebSocket || LongPoll;
+      this.primaryPassedHealthCheck = false;
+      this.longPollFallbackMs = opts.longPollFallbackMs;
+      this.fallbackTimer = null;
+      this.sessionStore = opts.sessionStorage || global && global.sessionStorage;
+      this.establishedConnections = 0;
+      this.defaultEncoder = serializer_default.encode.bind(serializer_default);
+      this.defaultDecoder = serializer_default.decode.bind(serializer_default);
+      this.closeWasClean = true;
+      this.disconnecting = false;
+      this.binaryType = opts.binaryType || "arraybuffer";
+      this.connectClock = 1;
+      this.pageHidden = false;
+      if (this.transport !== LongPoll) {
+        this.encode = opts.encode || this.defaultEncoder;
+        this.decode = opts.decode || this.defaultDecoder;
+      } else {
+        this.encode = this.defaultEncoder;
+        this.decode = this.defaultDecoder;
+      }
+      let awaitingConnectionOnPageShow = null;
+      if (phxWindow && phxWindow.addEventListener) {
+        phxWindow.addEventListener("pagehide", (_e) => {
+          if (this.conn) {
+            this.disconnect();
+            awaitingConnectionOnPageShow = this.connectClock;
+          }
+        });
+        phxWindow.addEventListener("pageshow", (_e) => {
+          if (awaitingConnectionOnPageShow === this.connectClock) {
+            awaitingConnectionOnPageShow = null;
+            this.connect();
+          }
+        });
+        phxWindow.addEventListener("visibilitychange", () => {
+          if (document.visibilityState === "hidden") {
+            this.pageHidden = true;
+          } else {
+            this.pageHidden = false;
+            if (!this.isConnected() && !this.closeWasClean) {
+              this.teardown(() => this.connect());
+            }
+          }
+        });
+      }
+      this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 3e4;
+      this.rejoinAfterMs = (tries) => {
+        if (opts.rejoinAfterMs) {
+          return opts.rejoinAfterMs(tries);
+        } else {
+          return [1e3, 2e3, 5e3][tries - 1] || 1e4;
+        }
+      };
+      this.reconnectAfterMs = (tries) => {
+        if (opts.reconnectAfterMs) {
+          return opts.reconnectAfterMs(tries);
+        } else {
+          return [10, 50, 100, 150, 200, 250, 500, 1e3, 2e3][tries - 1] || 5e3;
+        }
+      };
+      this.logger = opts.logger || null;
+      if (!this.logger && opts.debug) {
+        this.logger = (kind, msg, data) => {
+          console.log(`${kind}: ${msg}`, data);
+        };
+      }
+      this.longpollerTimeout = opts.longpollerTimeout || 2e4;
+      this.params = closure(opts.params || {});
+      this.endPoint = `${endPoint}/${TRANSPORTS.websocket}`;
+      this.vsn = opts.vsn || DEFAULT_VSN;
+      this.heartbeatTimeoutTimer = null;
+      this.heartbeatTimer = null;
+      this.pendingHeartbeatRef = null;
+      this.reconnectTimer = new Timer(() => {
+        if (this.pageHidden) {
+          this.log("Not reconnecting as page is hidden!");
+          this.teardown();
+          return;
+        }
+        this.teardown(() => this.connect());
+      }, this.reconnectAfterMs);
+      this.authToken = opts.authToken;
+    }
+    /**
+     * Returns the LongPoll transport reference
+     */
+    getLongPollTransport() {
+      return LongPoll;
+    }
+    /**
+     * Disconnects and replaces the active transport
+     *
+     * @param {Function} newTransport - The new transport class to instantiate
+     *
+     */
+    replaceTransport(newTransport) {
+      this.connectClock++;
+      this.closeWasClean = true;
+      clearTimeout(this.fallbackTimer);
+      this.reconnectTimer.reset();
+      if (this.conn) {
+        this.conn.close();
+        this.conn = null;
+      }
+      this.transport = newTransport;
+    }
+    /**
+     * Returns the socket protocol
+     *
+     * @returns {string}
+     */
+    protocol() {
+      return location.protocol.match(/^https/) ? "wss" : "ws";
+    }
+    /**
+     * The fully qualified socket url
+     *
+     * @returns {string}
+     */
+    endPointURL() {
+      let uri = Ajax.appendParams(
+        Ajax.appendParams(this.endPoint, this.params()),
+        { vsn: this.vsn }
+      );
+      if (uri.charAt(0) !== "/") {
+        return uri;
+      }
+      if (uri.charAt(1) === "/") {
+        return `${this.protocol()}:${uri}`;
+      }
+      return `${this.protocol()}://${location.host}${uri}`;
+    }
+    /**
+     * Disconnects the socket
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes for valid status codes.
+     *
+     * @param {Function} callback - Optional callback which is called after socket is disconnected.
+     * @param {integer} code - A status code for disconnection (Optional).
+     * @param {string} reason - A textual description of the reason to disconnect. (Optional)
+     */
+    disconnect(callback, code, reason) {
+      this.connectClock++;
+      this.disconnecting = true;
+      this.closeWasClean = true;
+      clearTimeout(this.fallbackTimer);
+      this.reconnectTimer.reset();
+      this.teardown(() => {
+        this.disconnecting = false;
+        callback && callback();
+      }, code, reason);
+    }
+    /**
+     *
+     * @param {Object} params - The params to send when connecting, for example `{user_id: userToken}`
+     *
+     * Passing params to connect is deprecated; pass them in the Socket constructor instead:
+     * `new Socket("/socket", {params: {user_id: userToken}})`.
+     */
+    connect(params) {
+      if (params) {
+        console && console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor");
+        this.params = closure(params);
+      }
+      if (this.conn && !this.disconnecting) {
+        return;
+      }
+      if (this.longPollFallbackMs && this.transport !== LongPoll) {
+        this.connectWithFallback(LongPoll, this.longPollFallbackMs);
+      } else {
+        this.transportConnect();
+      }
+    }
+    /**
+     * Logs the message. Override `this.logger` for specialized logging. noops by default
+     * @param {string} kind
+     * @param {string} msg
+     * @param {Object} data
+     */
+    log(kind, msg, data) {
+      this.logger && this.logger(kind, msg, data);
+    }
+    /**
+     * Returns true if a logger has been set on this socket.
+     */
+    hasLogger() {
+      return this.logger !== null;
+    }
+    /**
+     * Registers callbacks for connection open events
+     *
+     * @example socket.onOpen(function(){ console.info("the socket was opened") })
+     *
+     * @param {Function} callback
+     */
+    onOpen(callback) {
+      let ref = this.makeRef();
+      this.stateChangeCallbacks.open.push([ref, callback]);
+      return ref;
+    }
+    /**
+     * Registers callbacks for connection close events
+     * @param {Function} callback
+     */
+    onClose(callback) {
+      let ref = this.makeRef();
+      this.stateChangeCallbacks.close.push([ref, callback]);
+      return ref;
+    }
+    /**
+     * Registers callbacks for connection error events
+     *
+     * @example socket.onError(function(error){ alert("An error occurred") })
+     *
+     * @param {Function} callback
+     */
+    onError(callback) {
+      let ref = this.makeRef();
+      this.stateChangeCallbacks.error.push([ref, callback]);
+      return ref;
+    }
+    /**
+     * Registers callbacks for connection message events
+     * @param {Function} callback
+     */
+    onMessage(callback) {
+      let ref = this.makeRef();
+      this.stateChangeCallbacks.message.push([ref, callback]);
+      return ref;
+    }
+    /**
+     * Pings the server and invokes the callback with the RTT in milliseconds
+     * @param {Function} callback
+     *
+     * Returns true if the ping was pushed or false if unable to be pushed.
+     */
+    ping(callback) {
+      if (!this.isConnected()) {
+        return false;
+      }
+      let ref = this.makeRef();
+      let startTime = Date.now();
+      this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref });
+      let onMsgRef = this.onMessage((msg) => {
+        if (msg.ref === ref) {
+          this.off([onMsgRef]);
+          callback(Date.now() - startTime);
+        }
+      });
+      return true;
+    }
+    /**
+     * @private
+     *
+     * @param {Function}
+     */
+    transportName(transport) {
+      switch (transport) {
+        case LongPoll:
+          return "LongPoll";
+        default:
+          return transport.name;
+      }
+    }
+    /**
+     * @private
+     */
+    transportConnect() {
+      this.connectClock++;
+      this.closeWasClean = false;
+      let protocols = void 0;
+      if (this.authToken) {
+        protocols = ["phoenix", `${AUTH_TOKEN_PREFIX}${btoa(this.authToken).replace(/=/g, "")}`];
+      }
+      this.conn = new this.transport(this.endPointURL(), protocols);
+      this.conn.binaryType = this.binaryType;
+      this.conn.timeout = this.longpollerTimeout;
+      this.conn.onopen = () => this.onConnOpen();
+      this.conn.onerror = (error) => this.onConnError(error);
+      this.conn.onmessage = (event) => this.onConnMessage(event);
+      this.conn.onclose = (event) => this.onConnClose(event);
+    }
+    getSession(key) {
+      return this.sessionStore && this.sessionStore.getItem(key);
+    }
+    storeSession(key, val) {
+      this.sessionStore && this.sessionStore.setItem(key, val);
+    }
+    connectWithFallback(fallbackTransport, fallbackThreshold = 2500) {
+      clearTimeout(this.fallbackTimer);
+      let established = false;
+      let primaryTransport = true;
+      let openRef, errorRef;
+      let fallbackTransportName = this.transportName(fallbackTransport);
+      let fallback = (reason) => {
+        this.log("transport", `falling back to ${fallbackTransportName}...`, reason);
+        this.off([openRef, errorRef]);
+        primaryTransport = false;
+        this.replaceTransport(fallbackTransport);
+        this.transportConnect();
+      };
+      if (this.getSession(`phx:fallback:${fallbackTransportName}`)) {
+        return fallback("memorized");
+      }
+      this.fallbackTimer = setTimeout(fallback, fallbackThreshold);
+      errorRef = this.onError((reason) => {
+        this.log("transport", "error", reason);
+        if (primaryTransport && !established) {
+          clearTimeout(this.fallbackTimer);
+          fallback(reason);
+        }
+      });
+      if (this.fallbackRef) {
+        this.off([this.fallbackRef]);
+      }
+      this.fallbackRef = this.onOpen(() => {
+        established = true;
+        if (!primaryTransport) {
+          let fallbackTransportName2 = this.transportName(fallbackTransport);
+          if (!this.primaryPassedHealthCheck) {
+            this.storeSession(`phx:fallback:${fallbackTransportName2}`, "true");
+          }
+          return this.log("transport", `established ${fallbackTransportName2} fallback`);
+        }
+        clearTimeout(this.fallbackTimer);
+        this.fallbackTimer = setTimeout(fallback, fallbackThreshold);
+        this.ping((rtt) => {
+          this.log("transport", "connected to primary after", rtt);
+          this.primaryPassedHealthCheck = true;
+          clearTimeout(this.fallbackTimer);
+        });
+      });
+      this.transportConnect();
+    }
+    clearHeartbeats() {
+      clearTimeout(this.heartbeatTimer);
+      clearTimeout(this.heartbeatTimeoutTimer);
+    }
+    onConnOpen() {
+      if (this.hasLogger()) this.log("transport", `${this.transportName(this.transport)} connected to ${this.endPointURL()}`);
+      this.closeWasClean = false;
+      this.disconnecting = false;
+      this.establishedConnections++;
+      this.flushSendBuffer();
+      this.reconnectTimer.reset();
+      this.resetHeartbeat();
+      this.stateChangeCallbacks.open.forEach(([, callback]) => callback());
+    }
+    /**
+     * @private
+     */
+    heartbeatTimeout() {
+      if (this.pendingHeartbeatRef) {
+        this.pendingHeartbeatRef = null;
+        if (this.hasLogger()) {
+          this.log("transport", "heartbeat timeout. Attempting to re-establish connection");
+        }
+        this.triggerChanError();
+        this.closeWasClean = false;
+        this.teardown(() => this.reconnectTimer.scheduleTimeout(), WS_CLOSE_NORMAL, "heartbeat timeout");
+      }
+    }
+    resetHeartbeat() {
+      if (this.conn && this.conn.skipHeartbeat) {
+        return;
+      }
+      this.pendingHeartbeatRef = null;
+      this.clearHeartbeats();
+      this.heartbeatTimer = setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);
+    }
+    teardown(callback, code, reason) {
+      if (!this.conn) {
+        return callback && callback();
+      }
+      const connToClose = this.conn;
+      this.waitForBufferDone(connToClose, () => {
+        if (code) {
+          connToClose.close(code, reason || "");
+        } else {
+          connToClose.close();
+        }
+        this.waitForSocketClosed(connToClose, () => {
+          if (this.conn === connToClose) {
+            this.conn.onopen = function() {
+            };
+            this.conn.onerror = function() {
+            };
+            this.conn.onmessage = function() {
+            };
+            this.conn.onclose = function() {
+            };
+            this.conn = null;
+          }
+          callback && callback();
+        });
+      });
+    }
+    waitForBufferDone(conn, callback, tries = 1) {
+      if (tries === 5 || !conn.bufferedAmount) {
+        callback();
+        return;
+      }
+      setTimeout(() => {
+        this.waitForBufferDone(conn, callback, tries + 1);
+      }, 150 * tries);
+    }
+    waitForSocketClosed(conn, callback, tries = 1) {
+      if (tries === 5 || conn.readyState === SOCKET_STATES.closed) {
+        callback();
+        return;
+      }
+      setTimeout(() => {
+        this.waitForSocketClosed(conn, callback, tries + 1);
+      }, 150 * tries);
+    }
+    onConnClose(event) {
+      if (this.conn) this.conn.onclose = () => {
+      };
+      let closeCode = event && event.code;
+      if (this.hasLogger()) this.log("transport", "close", event);
+      this.triggerChanError();
+      this.clearHeartbeats();
+      if (!this.closeWasClean && closeCode !== 1e3) {
+        this.reconnectTimer.scheduleTimeout();
+      }
+      this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event));
+    }
+    /**
+     * @private
+     */
+    onConnError(error) {
+      if (this.hasLogger()) this.log("transport", error);
+      let transportBefore = this.transport;
+      let establishedBefore = this.establishedConnections;
+      this.stateChangeCallbacks.error.forEach(([, callback]) => {
+        callback(error, transportBefore, establishedBefore);
+      });
+      if (transportBefore === this.transport || establishedBefore > 0) {
+        this.triggerChanError();
+      }
+    }
+    /**
+     * @private
+     */
+    triggerChanError() {
+      this.channels.forEach((channel) => {
+        if (!(channel.isErrored() || channel.isLeaving() || channel.isClosed())) {
+          channel.trigger(CHANNEL_EVENTS.error);
+        }
+      });
+    }
+    /**
+     * @returns {string}
+     */
+    connectionState() {
+      switch (this.conn && this.conn.readyState) {
+        case SOCKET_STATES.connecting:
+          return "connecting";
+        case SOCKET_STATES.open:
+          return "open";
+        case SOCKET_STATES.closing:
+          return "closing";
+        default:
+          return "closed";
+      }
+    }
+    /**
+     * @returns {boolean}
+     */
+    isConnected() {
+      return this.connectionState() === "open";
+    }
+    /**
+     * @private
+     *
+     * @param {Channel}
+     */
+    remove(channel) {
+      this.off(channel.stateChangeRefs);
+      this.channels = this.channels.filter((c) => c !== channel);
+    }
+    /**
+     * Removes `onOpen`, `onClose`, `onError,` and `onMessage` registrations.
+     *
+     * @param {refs} - list of refs returned by calls to
+     *                 `onOpen`, `onClose`, `onError,` and `onMessage`
+     */
+    off(refs) {
+      for (let key in this.stateChangeCallbacks) {
+        this.stateChangeCallbacks[key] = this.stateChangeCallbacks[key].filter(([ref]) => {
+          return refs.indexOf(ref) === -1;
+        });
+      }
+    }
+    /**
+     * Initiates a new channel for the given topic
+     *
+     * @param {string} topic
+     * @param {Object} chanParams - Parameters for the channel
+     * @returns {Channel}
+     */
+    channel(topic, chanParams = {}) {
+      let chan = new Channel(topic, chanParams, this);
+      this.channels.push(chan);
+      return chan;
+    }
+    /**
+     * @param {Object} data
+     */
+    push(data) {
+      if (this.hasLogger()) {
+        let { topic, event, payload, ref, join_ref } = data;
+        this.log("push", `${topic} ${event} (${join_ref}, ${ref})`, payload);
+      }
+      if (this.isConnected()) {
+        this.encode(data, (result) => this.conn.send(result));
+      } else {
+        this.sendBuffer.push(() => this.encode(data, (result) => this.conn.send(result)));
+      }
+    }
+    /**
+     * Return the next message ref, accounting for overflows
+     * @returns {string}
+     */
+    makeRef() {
+      let newRef = this.ref + 1;
+      if (newRef === this.ref) {
+        this.ref = 0;
+      } else {
+        this.ref = newRef;
+      }
+      return this.ref.toString();
+    }
+    sendHeartbeat() {
+      if (this.pendingHeartbeatRef && !this.isConnected()) {
+        return;
+      }
+      this.pendingHeartbeatRef = this.makeRef();
+      this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef });
+      this.heartbeatTimeoutTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);
+    }
+    flushSendBuffer() {
+      if (this.isConnected() && this.sendBuffer.length > 0) {
+        this.sendBuffer.forEach((callback) => callback());
+        this.sendBuffer = [];
+      }
+    }
+    onConnMessage(rawMessage) {
+      this.decode(rawMessage.data, (msg) => {
+        let { topic, event, payload, ref, join_ref } = msg;
+        if (ref && ref === this.pendingHeartbeatRef) {
+          this.clearHeartbeats();
+          this.pendingHeartbeatRef = null;
+          this.heartbeatTimer = setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);
+        }
+        if (this.hasLogger()) this.log("receive", `${payload.status || ""} ${topic} ${event} ${ref && "(" + ref + ")" || ""}`, payload);
+        for (let i = 0; i < this.channels.length; i++) {
+          const channel = this.channels[i];
+          if (!channel.isMember(topic, event, payload, join_ref)) {
+            continue;
+          }
+          channel.trigger(event, payload, ref, join_ref);
+        }
+        for (let i = 0; i < this.stateChangeCallbacks.message.length; i++) {
+          let [, callback] = this.stateChangeCallbacks.message[i];
+          callback(msg);
+        }
+      });
+    }
+    leaveOpenTopic(topic) {
+      let dupChannel = this.channels.find((c) => c.topic === topic && (c.isJoined() || c.isJoining()));
+      if (dupChannel) {
+        if (this.hasLogger()) this.log("transport", `leaving duplicate topic "${topic}"`);
+        dupChannel.leave();
+      }
+    }
+  };
+
+  // ../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js
+  var CONSECUTIVE_RELOADS = "consecutive-reloads";
+  var MAX_RELOADS = 10;
+  var RELOAD_JITTER_MIN = 5e3;
+  var RELOAD_JITTER_MAX = 1e4;
+  var FAILSAFE_JITTER = 3e4;
+  var PHX_EVENT_CLASSES = [
+    "phx-click-loading",
+    "phx-change-loading",
+    "phx-submit-loading",
+    "phx-keydown-loading",
+    "phx-keyup-loading",
+    "phx-blur-loading",
+    "phx-focus-loading",
+    "phx-hook-loading"
+  ];
+  var PHX_DROP_TARGET_ACTIVE_CLASS = "phx-drop-target-active";
+  var PHX_COMPONENT = "data-phx-component";
+  var PHX_VIEW_REF = "data-phx-view";
+  var PHX_LIVE_LINK = "data-phx-link";
+  var PHX_TRACK_STATIC = "track-static";
+  var PHX_LINK_STATE = "data-phx-link-state";
+  var PHX_REF_LOADING = "data-phx-ref-loading";
+  var PHX_REF_SRC = "data-phx-ref-src";
+  var PHX_REF_LOCK = "data-phx-ref-lock";
+  var PHX_PENDING_REFS = "phx-pending-refs";
+  var PHX_TRACK_UPLOADS = "track-uploads";
+  var PHX_UPLOAD_REF = "data-phx-upload-ref";
+  var PHX_PREFLIGHTED_REFS = "data-phx-preflighted-refs";
+  var PHX_DONE_REFS = "data-phx-done-refs";
+  var PHX_DROP_TARGET = "drop-target";
+  var PHX_ACTIVE_ENTRY_REFS = "data-phx-active-refs";
+  var PHX_LIVE_FILE_UPDATED = "phx:live-file:updated";
+  var PHX_SKIP = "data-phx-skip";
+  var PHX_MAGIC_ID = "data-phx-id";
+  var PHX_PRUNE = "data-phx-prune";
+  var PHX_CONNECTED_CLASS = "phx-connected";
+  var PHX_LOADING_CLASS = "phx-loading";
+  var PHX_ERROR_CLASS = "phx-error";
+  var PHX_CLIENT_ERROR_CLASS = "phx-client-error";
+  var PHX_SERVER_ERROR_CLASS = "phx-server-error";
+  var PHX_PARENT_ID = "data-phx-parent-id";
+  var PHX_MAIN = "data-phx-main";
+  var PHX_ROOT_ID = "data-phx-root-id";
+  var PHX_VIEWPORT_TOP = "viewport-top";
+  var PHX_VIEWPORT_BOTTOM = "viewport-bottom";
+  var PHX_VIEWPORT_OVERRUN_TARGET = "viewport-overrun-target";
+  var PHX_TRIGGER_ACTION = "trigger-action";
+  var PHX_HAS_FOCUSED = "phx-has-focused";
+  var FOCUSABLE_INPUTS = [
+    "text",
+    "textarea",
+    "number",
+    "email",
+    "password",
+    "search",
+    "tel",
+    "url",
+    "date",
+    "time",
+    "datetime-local",
+    "color",
+    "range"
+  ];
+  var CHECKABLE_INPUTS = ["checkbox", "radio"];
+  var PHX_HAS_SUBMITTED = "phx-has-submitted";
+  var PHX_SESSION = "data-phx-session";
+  var PHX_VIEW_SELECTOR = `[${PHX_SESSION}]`;
+  var PHX_STICKY = "data-phx-sticky";
+  var PHX_STATIC = "data-phx-static";
+  var PHX_READONLY = "data-phx-readonly";
+  var PHX_DISABLED = "data-phx-disabled";
+  var PHX_DISABLE_WITH = "disable-with";
+  var PHX_DISABLE_WITH_RESTORE = "data-phx-disable-with-restore";
+  var PHX_HOOK = "hook";
+  var PHX_DEBOUNCE = "debounce";
+  var PHX_THROTTLE = "throttle";
+  var PHX_UPDATE = "update";
+  var PHX_STREAM = "stream";
+  var PHX_STREAM_REF = "data-phx-stream";
+  var PHX_PORTAL = "data-phx-portal";
+  var PHX_TELEPORTED_REF = "data-phx-teleported";
+  var PHX_TELEPORTED_SRC = "data-phx-teleported-src";
+  var PHX_RUNTIME_HOOK = "data-phx-runtime-hook";
+  var PHX_LV_PID = "data-phx-pid";
+  var PHX_KEY = "key";
+  var PHX_PRIVATE = "phxPrivate";
+  var PHX_AUTO_RECOVER = "auto-recover";
+  var PHX_LV_DEBUG = "phx:live-socket:debug";
+  var PHX_LV_PROFILE = "phx:live-socket:profiling";
+  var PHX_LV_LATENCY_SIM = "phx:live-socket:latency-sim";
+  var PHX_LV_HISTORY_POSITION = "phx:nav-history-position";
+  var PHX_PROGRESS = "progress";
+  var PHX_MOUNTED = "mounted";
+  var PHX_RELOAD_STATUS = "__phoenix_reload_status__";
+  var LOADER_TIMEOUT = 1;
+  var MAX_CHILD_JOIN_ATTEMPTS = 3;
+  var BEFORE_UNLOAD_LOADER_TIMEOUT = 200;
+  var DISCONNECTED_TIMEOUT = 500;
+  var BINDING_PREFIX = "phx-";
+  var PUSH_TIMEOUT = 3e4;
+  var DEBOUNCE_TRIGGER = "debounce-trigger";
+  var THROTTLED = "throttled";
+  var DEBOUNCE_PREV_KEY = "debounce-prev-key";
+  var DEFAULTS = {
+    debounce: 300,
+    throttle: 300
+  };
+  var PHX_PENDING_ATTRS = [PHX_REF_LOADING, PHX_REF_SRC, PHX_REF_LOCK];
+  var STATIC = "s";
+  var ROOT = "r";
+  var COMPONENTS = "c";
+  var KEYED = "k";
+  var KEYED_COUNT = "kc";
+  var EVENTS = "e";
+  var REPLY = "r";
+  var TITLE = "t";
+  var TEMPLATES = "p";
+  var STREAM = "stream";
+  var EntryUploader = class {
+    constructor(entry, config, liveSocket) {
+      const { chunk_size, chunk_timeout } = config;
+      this.liveSocket = liveSocket;
+      this.entry = entry;
+      this.offset = 0;
+      this.chunkSize = chunk_size;
+      this.chunkTimeout = chunk_timeout;
+      this.chunkTimer = null;
+      this.errored = false;
+      this.uploadChannel = liveSocket.channel(`lvu:${entry.ref}`, {
+        token: entry.metadata()
+      });
+    }
+    error(reason) {
+      if (this.errored) {
+        return;
+      }
+      this.uploadChannel.leave();
+      this.errored = true;
+      clearTimeout(this.chunkTimer);
+      this.entry.error(reason);
+    }
+    upload() {
+      this.uploadChannel.onError((reason) => this.error(reason));
+      this.uploadChannel.join().receive("ok", (_data) => this.readNextChunk()).receive("error", (reason) => this.error(reason));
+    }
+    isDone() {
+      return this.offset >= this.entry.file.size;
+    }
+    readNextChunk() {
+      const reader = new window.FileReader();
+      const blob = this.entry.file.slice(
+        this.offset,
+        this.chunkSize + this.offset
+      );
+      reader.onload = (e) => {
+        if (e.target.error === null) {
+          this.offset += /** @type {ArrayBuffer} */
+          e.target.result.byteLength;
+          this.pushChunk(
+            /** @type {ArrayBuffer} */
+            e.target.result
+          );
+        } else {
+          return logError("Read error: " + e.target.error);
+        }
+      };
+      reader.readAsArrayBuffer(blob);
+    }
+    pushChunk(chunk) {
+      if (!this.uploadChannel.isJoined()) {
+        return;
+      }
+      this.uploadChannel.push("chunk", chunk, this.chunkTimeout).receive("ok", () => {
+        this.entry.progress(this.offset / this.entry.file.size * 100);
+        if (!this.isDone()) {
+          this.chunkTimer = setTimeout(
+            () => this.readNextChunk(),
+            this.liveSocket.getLatencySim() || 0
+          );
+        }
+      }).receive("error", ({ reason }) => this.error(reason));
+    }
+  };
+  var logError = (msg, obj) => console.error && console.error(msg, obj);
+  var isCid = (cid) => {
+    const type = typeof cid;
+    return type === "number" || type === "string" && /^(0|[1-9]\d*)$/.test(cid);
+  };
+  function detectDuplicateIds() {
+    const ids = /* @__PURE__ */ new Set();
+    const elems = document.querySelectorAll("*[id]");
+    for (let i = 0, len = elems.length; i < len; i++) {
+      if (ids.has(elems[i].id)) {
+        console.error(
+          `Multiple IDs detected: ${elems[i].id}. Ensure unique element ids.`
+        );
+      } else {
+        ids.add(elems[i].id);
+      }
+    }
+  }
+  function detectInvalidStreamInserts(inserts) {
+    const errors = /* @__PURE__ */ new Set();
+    Object.keys(inserts).forEach((id) => {
+      const streamEl = document.getElementById(id);
+      if (streamEl && streamEl.parentElement && streamEl.parentElement.getAttribute("phx-update") !== "stream") {
+        errors.add(
+          `The stream container with id "${streamEl.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`
+        );
+      }
+    });
+    errors.forEach((error) => console.error(error));
+  }
+  var debug = (view, kind, msg, obj) => {
+    if (view.liveSocket.isDebugEnabled()) {
+      console.log(`${view.id} ${kind}: ${msg} - `, obj);
+    }
+  };
+  var closure2 = (val) => typeof val === "function" ? val : function() {
+    return val;
+  };
+  var clone = (obj) => {
+    return JSON.parse(JSON.stringify(obj));
+  };
+  var closestPhxBinding = (el, binding, borderEl) => {
+    do {
+      if (el.matches(`[${binding}]`) && !el.disabled) {
+        return el;
+      }
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1 && !(borderEl && borderEl.isSameNode(el) || el.matches(PHX_VIEW_SELECTOR)));
+    return null;
+  };
+  var isObject = (obj) => {
+    return obj !== null && typeof obj === "object" && !(obj instanceof Array);
+  };
+  var isEqualObj = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);
+  var isEmpty = (obj) => {
+    for (const x in obj) {
+      return false;
+    }
+    return true;
+  };
+  var maybe = (el, callback) => el && callback(el);
+  var channelUploader = function(entries, onError, resp, liveSocket) {
+    entries.forEach((entry) => {
+      const entryUploader = new EntryUploader(entry, resp.config, liveSocket);
+      entryUploader.upload();
+    });
+  };
+  var eventContainsFiles = (e) => {
+    if (e.dataTransfer.types) {
+      for (let i = 0; i < e.dataTransfer.types.length; i++) {
+        if (e.dataTransfer.types[i] === "Files") {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  var Browser = {
+    canPushState() {
+      return typeof history.pushState !== "undefined";
+    },
+    dropLocal(localStorage, namespace, subkey) {
+      return localStorage.removeItem(this.localKey(namespace, subkey));
+    },
+    updateLocal(localStorage, namespace, subkey, initial, func) {
+      const current = this.getLocal(localStorage, namespace, subkey);
+      const key = this.localKey(namespace, subkey);
+      const newVal = current === null ? initial : func(current);
+      localStorage.setItem(key, JSON.stringify(newVal));
+      return newVal;
+    },
+    getLocal(localStorage, namespace, subkey) {
+      return JSON.parse(localStorage.getItem(this.localKey(namespace, subkey)));
+    },
+    updateCurrentState(callback) {
+      if (!this.canPushState()) {
+        return;
+      }
+      history.replaceState(
+        callback(history.state || {}),
+        "",
+        window.location.href
+      );
+    },
+    pushState(kind, meta, to) {
+      if (this.canPushState()) {
+        if (to !== window.location.href) {
+          if (meta.type == "redirect" && meta.scroll) {
+            const currentState = history.state || {};
+            currentState.scroll = meta.scroll;
+            history.replaceState(currentState, "", window.location.href);
+          }
+          delete meta.scroll;
+          history[kind + "State"](meta, "", to || null);
+          window.requestAnimationFrame(() => {
+            const hashEl = this.getHashTargetEl(window.location.hash);
+            if (hashEl) {
+              hashEl.scrollIntoView();
+            } else if (meta.type === "redirect") {
+              window.scroll(0, 0);
+            }
+          });
+        }
+      } else {
+        this.redirect(to);
+      }
+    },
+    setCookie(name, value, maxAgeSeconds) {
+      const expires = typeof maxAgeSeconds === "number" ? ` max-age=${maxAgeSeconds};` : "";
+      document.cookie = `${name}=${value};${expires} path=/`;
+    },
+    getCookie(name) {
+      return document.cookie.replace(
+        new RegExp(`(?:(?:^|.*;s*)${name}s*=s*([^;]*).*$)|^.*$`),
+        "$1"
+      );
+    },
+    deleteCookie(name) {
+      document.cookie = `${name}=; max-age=-1; path=/`;
+    },
+    redirect(toURL, flash, navigate = (url) => {
+      window.location.href = url;
+    }) {
+      if (flash) {
+        this.setCookie("__phoenix_flash__", flash, 60);
+      }
+      navigate(toURL);
+    },
+    localKey(namespace, subkey) {
+      return `${namespace}-${subkey}`;
+    },
+    getHashTargetEl(maybeHash) {
+      const hash = maybeHash.toString().substring(1);
+      if (hash === "") {
+        return;
+      }
+      return document.getElementById(hash) || document.querySelector(`a[name="${hash}"]`);
+    }
+  };
+  var browser_default = Browser;
+  var DOM = {
+    byId(id) {
+      return document.getElementById(id) || logError(`no id found for ${id}`);
+    },
+    removeClass(el, className) {
+      el.classList.remove(className);
+      if (el.classList.length === 0) {
+        el.removeAttribute("class");
+      }
+    },
+    all(node, query, callback) {
+      if (!node) {
+        return [];
+      }
+      const array = Array.from(node.querySelectorAll(query));
+      if (callback) {
+        array.forEach(callback);
+      }
+      return array;
+    },
+    childNodeLength(html) {
+      const template = document.createElement("template");
+      template.innerHTML = html;
+      return template.content.childElementCount;
+    },
+    isUploadInput(el) {
+      return el.type === "file" && el.getAttribute(PHX_UPLOAD_REF) !== null;
+    },
+    isAutoUpload(inputEl) {
+      return inputEl.hasAttribute("data-phx-auto-upload");
+    },
+    findUploadInputs(node) {
+      const formId = node.id;
+      const inputsOutsideForm = this.all(
+        document,
+        `input[type="file"][${PHX_UPLOAD_REF}][form="${formId}"]`
+      );
+      return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`).concat(
+        inputsOutsideForm
+      );
+    },
+    findComponentNodeList(viewId, cid, doc2 = document) {
+      return this.all(
+        doc2,
+        `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}="${cid}"]`
+      );
+    },
+    isPhxDestroyed(node) {
+      return node.id && DOM.private(node, "destroyed") ? true : false;
+    },
+    wantsNewTab(e) {
+      const wantsNewTab = e.ctrlKey || e.shiftKey || e.metaKey || e.button && e.button === 1;
+      const isDownload = e.target instanceof HTMLAnchorElement && e.target.hasAttribute("download");
+      const isTargetBlank = e.target.hasAttribute("target") && e.target.getAttribute("target").toLowerCase() === "_blank";
+      const isTargetNamedTab = e.target.hasAttribute("target") && !e.target.getAttribute("target").startsWith("_");
+      return wantsNewTab || isTargetBlank || isDownload || isTargetNamedTab;
+    },
+    isUnloadableFormSubmit(e) {
+      const isDialogSubmit = e.target && e.target.getAttribute("method") === "dialog" || e.submitter && e.submitter.getAttribute("formmethod") === "dialog";
+      if (isDialogSubmit) {
+        return false;
+      } else {
+        return !e.defaultPrevented && !this.wantsNewTab(e);
+      }
+    },
+    isNewPageClick(e, currentLocation) {
+      const href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute("href") : null;
+      let url;
+      if (e.defaultPrevented || href === null || this.wantsNewTab(e)) {
+        return false;
+      }
+      if (href.startsWith("mailto:") || href.startsWith("tel:")) {
+        return false;
+      }
+      if (e.target.isContentEditable) {
+        return false;
+      }
+      try {
+        url = new URL(href);
+      } catch {
+        try {
+          url = new URL(href, currentLocation);
+        } catch {
+          return true;
+        }
+      }
+      if (url.host === currentLocation.host && url.protocol === currentLocation.protocol) {
+        if (url.pathname === currentLocation.pathname && url.search === currentLocation.search) {
+          return url.hash === "" && !url.href.endsWith("#");
+        }
+      }
+      return url.protocol.startsWith("http");
+    },
+    markPhxChildDestroyed(el) {
+      if (this.isPhxChild(el)) {
+        el.setAttribute(PHX_SESSION, "");
+      }
+      this.putPrivate(el, "destroyed", true);
+    },
+    findPhxChildrenInFragment(html, parentId) {
+      const template = document.createElement("template");
+      template.innerHTML = html;
+      return this.findPhxChildren(template.content, parentId);
+    },
+    isIgnored(el, phxUpdate) {
+      return (el.getAttribute(phxUpdate) || el.getAttribute("data-phx-update")) === "ignore";
+    },
+    isPhxUpdate(el, phxUpdate, updateTypes) {
+      return el.getAttribute && updateTypes.indexOf(el.getAttribute(phxUpdate)) >= 0;
+    },
+    findPhxSticky(el) {
+      return this.all(el, `[${PHX_STICKY}]`);
+    },
+    findPhxChildren(el, parentId) {
+      return this.all(el, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}="${parentId}"]`);
+    },
+    findExistingParentCIDs(viewId, cids) {
+      const parentCids = /* @__PURE__ */ new Set();
+      const childrenCids = /* @__PURE__ */ new Set();
+      cids.forEach((cid) => {
+        this.all(
+          document,
+          `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}="${cid}"]`
+        ).forEach((parent) => {
+          parentCids.add(cid);
+          this.all(parent, `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}]`).map((el) => parseInt(el.getAttribute(PHX_COMPONENT))).forEach((childCID) => childrenCids.add(childCID));
+        });
+      });
+      childrenCids.forEach((childCid) => parentCids.delete(childCid));
+      return parentCids;
+    },
+    private(el, key) {
+      return el[PHX_PRIVATE] && el[PHX_PRIVATE][key];
+    },
+    deletePrivate(el, key) {
+      el[PHX_PRIVATE] && delete el[PHX_PRIVATE][key];
+    },
+    putPrivate(el, key, value) {
+      if (!el[PHX_PRIVATE]) {
+        el[PHX_PRIVATE] = {};
+      }
+      el[PHX_PRIVATE][key] = value;
+    },
+    updatePrivate(el, key, defaultVal, updateFunc) {
+      const existing = this.private(el, key);
+      if (existing === void 0) {
+        this.putPrivate(el, key, updateFunc(defaultVal));
+      } else {
+        this.putPrivate(el, key, updateFunc(existing));
+      }
+    },
+    syncPendingAttrs(fromEl, toEl) {
+      if (!fromEl.hasAttribute(PHX_REF_SRC)) {
+        return;
+      }
+      PHX_EVENT_CLASSES.forEach((className) => {
+        fromEl.classList.contains(className) && toEl.classList.add(className);
+      });
+      PHX_PENDING_ATTRS.filter((attr) => fromEl.hasAttribute(attr)).forEach(
+        (attr) => {
+          toEl.setAttribute(attr, fromEl.getAttribute(attr));
+        }
+      );
+    },
+    copyPrivates(target, source) {
+      if (source[PHX_PRIVATE]) {
+        target[PHX_PRIVATE] = source[PHX_PRIVATE];
+      }
+    },
+    putTitle(str) {
+      const titleEl = document.querySelector("title");
+      if (titleEl) {
+        const { prefix, suffix, default: defaultTitle } = titleEl.dataset;
+        const isEmpty2 = typeof str !== "string" || str.trim() === "";
+        if (isEmpty2 && typeof defaultTitle !== "string") {
+          return;
+        }
+        const inner = isEmpty2 ? defaultTitle : str;
+        document.title = `${prefix || ""}${inner || ""}${suffix || ""}`;
+      } else {
+        document.title = str;
+      }
+    },
+    debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, callback) {
+      let debounce = el.getAttribute(phxDebounce);
+      let throttle = el.getAttribute(phxThrottle);
+      if (debounce === "") {
+        debounce = defaultDebounce;
+      }
+      if (throttle === "") {
+        throttle = defaultThrottle;
+      }
+      const value = debounce || throttle;
+      switch (value) {
+        case null:
+          return callback();
+        case "blur":
+          this.incCycle(el, "debounce-blur-cycle", () => {
+            if (asyncFilter()) {
+              callback();
+            }
+          });
+          if (this.once(el, "debounce-blur")) {
+            el.addEventListener(
+              "blur",
+              () => this.triggerCycle(el, "debounce-blur-cycle")
+            );
+          }
+          return;
+        default:
+          const timeout = parseInt(value);
+          const trigger = () => throttle ? this.deletePrivate(el, THROTTLED) : callback();
+          const currentCycle = this.incCycle(el, DEBOUNCE_TRIGGER, trigger);
+          if (isNaN(timeout)) {
+            return logError(`invalid throttle/debounce value: ${value}`);
+          }
+          if (throttle) {
+            let newKeyDown = false;
+            if (event.type === "keydown") {
+              const prevKey = this.private(el, DEBOUNCE_PREV_KEY);
+              this.putPrivate(el, DEBOUNCE_PREV_KEY, event.key);
+              newKeyDown = prevKey !== event.key;
+            }
+            if (!newKeyDown && this.private(el, THROTTLED)) {
+              return false;
+            } else {
+              callback();
+              const t = setTimeout(() => {
+                if (asyncFilter()) {
+                  this.triggerCycle(el, DEBOUNCE_TRIGGER);
+                }
+              }, timeout);
+              this.putPrivate(el, THROTTLED, t);
+            }
+          } else {
+            setTimeout(() => {
+              if (asyncFilter()) {
+                this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle);
+              }
+            }, timeout);
+          }
+          const form = el.form;
+          if (form && this.once(form, "bind-debounce")) {
+            form.addEventListener("submit", () => {
+              Array.from(new FormData(form).entries(), ([name]) => {
+                const namedItem = form.elements.namedItem(name);
+                const input = namedItem instanceof RadioNodeList ? namedItem[0] : namedItem;
+                if (input) {
+                  this.incCycle(input, DEBOUNCE_TRIGGER);
+                  this.deletePrivate(input, THROTTLED);
+                }
+              });
+            });
+          }
+          if (this.once(el, "bind-debounce")) {
+            el.addEventListener("blur", () => {
+              clearTimeout(this.private(el, THROTTLED));
+              this.triggerCycle(el, DEBOUNCE_TRIGGER);
+            });
+          }
+      }
+    },
+    triggerCycle(el, key, currentCycle) {
+      const [cycle, trigger] = this.private(el, key);
+      if (!currentCycle) {
+        currentCycle = cycle;
+      }
+      if (currentCycle === cycle) {
+        this.incCycle(el, key);
+        trigger();
+      }
+    },
+    once(el, key) {
+      if (this.private(el, key) === true) {
+        return false;
+      }
+      this.putPrivate(el, key, true);
+      return true;
+    },
+    incCycle(el, key, trigger = function() {
+    }) {
+      let [currentCycle] = this.private(el, key) || [0, trigger];
+      currentCycle++;
+      this.putPrivate(el, key, [currentCycle, trigger]);
+      return currentCycle;
+    },
+    // maintains or adds privately used hook information
+    // fromEl and toEl can be the same element in the case of a newly added node
+    // fromEl and toEl can be any HTML node type, so we need to check if it's an element node
+    maintainPrivateHooks(fromEl, toEl, phxViewportTop, phxViewportBottom) {
+      if (fromEl.hasAttribute && fromEl.hasAttribute("data-phx-hook") && !toEl.hasAttribute("data-phx-hook")) {
+        toEl.setAttribute("data-phx-hook", fromEl.getAttribute("data-phx-hook"));
+      }
+      if (toEl.hasAttribute && (toEl.hasAttribute(phxViewportTop) || toEl.hasAttribute(phxViewportBottom))) {
+        toEl.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll");
+      }
+    },
+    putCustomElHook(el, hook) {
+      if (el.isConnected) {
+        el.setAttribute("data-phx-hook", "");
+      } else {
+        console.error(`
         hook attached to non-connected DOM element
-        ensure you are calling createHook within your connectedCallback. ${t.outerHTML}
-      `),this.putPrivate(t,"custom-el-hook",e)},getCustomElHook(t){return this.private(t,"custom-el-hook")},isUsedInput(t){return t.nodeType===Node.ELEMENT_NODE&&(this.private(t,dt)||this.private(t,Xe))},resetForm(t){Array.from(t.elements).forEach(e=>{this.deletePrivate(e,dt),this.deletePrivate(e,Xe)})},isPhxChild(t){return t.getAttribute&&t.getAttribute(ke)},isPhxSticky(t){return t.getAttribute&&t.getAttribute(Tt)!==null},isChildOfAny(t,e){return!!e.find(i=>i.contains(t))},firstPhxChild(t){return this.isPhxChild(t)?t:this.all(t,`[${ke}]`)[0]},isPortalTemplate(t){return t.tagName==="TEMPLATE"&&t.hasAttribute(Dt)},closestViewEl(t){let e=t.closest(`[${Ae}],${ze}`);return e?e.hasAttribute(Ae)?this.byId(e.getAttribute(Ae)):e.hasAttribute(ce)?e:null:null},dispatchEvent(t,e,i={}){let s=!0;t.nodeName==="INPUT"&&t.type==="file"&&e==="click"&&(s=!1);let o={bubbles:i.bubbles===void 0?s:!!i.bubbles,cancelable:!0,detail:i.detail||{}},a=e==="click"?new MouseEvent("click",o):new CustomEvent(e,o);t.dispatchEvent(a)},cloneNode(t,e){if(typeof e>"u")return t.cloneNode(!0);{let i=t.cloneNode(!1);return i.innerHTML=e,i}},mergeAttrs(t,e,i={}){let s=new Set(i.exclude||[]),n=i.isIgnored,r=e.attributes;for(let a=r.length-1;a>=0;a--){let h=r[a].name;if(s.has(h)){if(h==="value"){let c=e.value??e.getAttribute(h);t.value===c&&t.setAttribute("value",e.getAttribute(h))}}else{let c=e.getAttribute(h);t.getAttribute(h)!==c&&(!n||n&&h.startsWith("data-"))&&t.setAttribute(h,c)}}let o=t.attributes;for(let a=o.length-1;a>=0;a--){let h=o[a].name;n?h.startsWith("data-")&&!e.hasAttribute(h)&&!zt.includes(h)&&t.removeAttribute(h):e.hasAttribute(h)||t.removeAttribute(h)}},mergeFocusedInput(t,e){t instanceof HTMLSelectElement||ye.mergeAttrs(t,e,{exclude:["value"]}),e.readOnly?t.setAttribute("readonly",!0):t.removeAttribute("readonly")},hasSelectionRange(t){return t.setSelectionRange&&(t.type==="text"||t.type==="textarea")},restoreFocus(t,e,i){if(t instanceof HTMLSelectElement&&t.focus(),!ye.isTextualInput(t))return;t.matches(":focus")||t.focus(),this.hasSelectionRange(t)&&t.setSelectionRange(e,i)},isFormInput(t){return t.localName&&customElements.get(t.localName)?customElements.get(t.localName).formAssociated:/^(?:input|select|textarea)$/i.test(t.tagName)&&t.type!=="button"},syncAttrsToProps(t){t instanceof HTMLInputElement&&gi.indexOf(t.type.toLocaleLowerCase())>=0&&(t.checked=t.getAttribute("checked")!==null)},isTextualInput(t){return Fi.indexOf(t.type)>=0},isNowTriggerFormExternal(t,e){return t.getAttribute&&t.getAttribute(e)!==null&&document.body.contains(t)},cleanChildNodes(t,e){if(ye.isPhxUpdate(t,e,["append","prepend",ht])){let i=[];t.childNodes.forEach(s=>{s.id||(!(s.nodeType===Node.TEXT_NODE&&s.nodeValue.trim()==="")&&s.nodeType!==Node.COMMENT_NODE&&O(`only HTML element tags with an id are allowed inside containers with phx-update.
+        ensure you are calling createHook within your connectedCallback. ${el.outerHTML}
+      `);
+      }
+      this.putPrivate(el, "custom-el-hook", hook);
+    },
+    getCustomElHook(el) {
+      return this.private(el, "custom-el-hook");
+    },
+    isUsedInput(el) {
+      return el.nodeType === Node.ELEMENT_NODE && (this.private(el, PHX_HAS_FOCUSED) || this.private(el, PHX_HAS_SUBMITTED));
+    },
+    resetForm(form) {
+      Array.from(form.elements).forEach((input) => {
+        this.deletePrivate(input, PHX_HAS_FOCUSED);
+        this.deletePrivate(input, PHX_HAS_SUBMITTED);
+      });
+    },
+    isPhxChild(node) {
+      return node.getAttribute && node.getAttribute(PHX_PARENT_ID);
+    },
+    isPhxSticky(node) {
+      return node.getAttribute && node.getAttribute(PHX_STICKY) !== null;
+    },
+    isChildOfAny(el, parents) {
+      return !!parents.find((parent) => parent.contains(el));
+    },
+    firstPhxChild(el) {
+      return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0];
+    },
+    isPortalTemplate(el) {
+      return el.tagName === "TEMPLATE" && el.hasAttribute(PHX_PORTAL);
+    },
+    closestViewEl(el) {
+      const portalOrViewEl = el.closest(
+        `[${PHX_TELEPORTED_REF}],${PHX_VIEW_SELECTOR}`
+      );
+      if (!portalOrViewEl) {
+        return null;
+      }
+      if (portalOrViewEl.hasAttribute(PHX_TELEPORTED_REF)) {
+        return this.byId(portalOrViewEl.getAttribute(PHX_TELEPORTED_REF));
+      } else if (portalOrViewEl.hasAttribute(PHX_SESSION)) {
+        return portalOrViewEl;
+      }
+      return null;
+    },
+    dispatchEvent(target, name, opts = {}) {
+      let defaultBubble = true;
+      const isUploadTarget = target.nodeName === "INPUT" && target.type === "file";
+      if (isUploadTarget && name === "click") {
+        defaultBubble = false;
+      }
+      const bubbles = opts.bubbles === void 0 ? defaultBubble : !!opts.bubbles;
+      const eventOpts = {
+        bubbles,
+        cancelable: true,
+        detail: opts.detail || {}
+      };
+      const event = name === "click" ? new MouseEvent("click", eventOpts) : new CustomEvent(name, eventOpts);
+      target.dispatchEvent(event);
+    },
+    cloneNode(node, html) {
+      if (typeof html === "undefined") {
+        return node.cloneNode(true);
+      } else {
+        const cloned = node.cloneNode(false);
+        cloned.innerHTML = html;
+        return cloned;
+      }
+    },
+    // merge attributes from source to target
+    // if an element is ignored, we only merge data attributes
+    // including removing data attributes that are no longer in the source
+    mergeAttrs(target, source, opts = {}) {
+      const exclude = new Set(opts.exclude || []);
+      const isIgnored = opts.isIgnored;
+      const sourceAttrs = source.attributes;
+      for (let i = sourceAttrs.length - 1; i >= 0; i--) {
+        const name = sourceAttrs[i].name;
+        if (!exclude.has(name)) {
+          const sourceValue = source.getAttribute(name);
+          if (target.getAttribute(name) !== sourceValue && (!isIgnored || isIgnored && name.startsWith("data-"))) {
+            target.setAttribute(name, sourceValue);
+          }
+        } else {
+          if (name === "value") {
+            const sourceValue = source.value ?? source.getAttribute(name);
+            if (target.value === sourceValue) {
+              target.setAttribute("value", source.getAttribute(name));
+            }
+          }
+        }
+      }
+      const targetAttrs = target.attributes;
+      for (let i = targetAttrs.length - 1; i >= 0; i--) {
+        const name = targetAttrs[i].name;
+        if (isIgnored) {
+          if (name.startsWith("data-") && !source.hasAttribute(name) && !PHX_PENDING_ATTRS.includes(name)) {
+            target.removeAttribute(name);
+          }
+        } else {
+          if (!source.hasAttribute(name)) {
+            target.removeAttribute(name);
+          }
+        }
+      }
+    },
+    mergeFocusedInput(target, source) {
+      if (!(target instanceof HTMLSelectElement)) {
+        DOM.mergeAttrs(target, source, { exclude: ["value"] });
+      }
+      if (source.readOnly) {
+        target.setAttribute("readonly", true);
+      } else {
+        target.removeAttribute("readonly");
+      }
+    },
+    hasSelectionRange(el) {
+      return el.setSelectionRange && (el.type === "text" || el.type === "textarea");
+    },
+    restoreFocus(focused, selectionStart, selectionEnd) {
+      if (focused instanceof HTMLSelectElement) {
+        focused.focus();
+      }
+      if (!DOM.isTextualInput(focused)) {
+        return;
+      }
+      const wasFocused = focused.matches(":focus");
+      if (!wasFocused) {
+        focused.focus();
+      }
+      if (this.hasSelectionRange(focused)) {
+        focused.setSelectionRange(selectionStart, selectionEnd);
+      }
+    },
+    isFormInput(el) {
+      if (el.localName && customElements.get(el.localName)) {
+        return customElements.get(el.localName)[`formAssociated`];
+      }
+      return /^(?:input|select|textarea)$/i.test(el.tagName) && el.type !== "button";
+    },
+    syncAttrsToProps(el) {
+      if (el instanceof HTMLInputElement && CHECKABLE_INPUTS.indexOf(el.type.toLocaleLowerCase()) >= 0) {
+        el.checked = el.getAttribute("checked") !== null;
+      }
+    },
+    isTextualInput(el) {
+      return FOCUSABLE_INPUTS.indexOf(el.type) >= 0;
+    },
+    isNowTriggerFormExternal(el, phxTriggerExternal) {
+      return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null && document.body.contains(el);
+    },
+    cleanChildNodes(container, phxUpdate) {
+      if (DOM.isPhxUpdate(container, phxUpdate, ["append", "prepend", PHX_STREAM])) {
+        const toRemove = [];
+        container.childNodes.forEach((childNode) => {
+          if (!childNode.id) {
+            const isEmptyTextNode = childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue.trim() === "";
+            if (!isEmptyTextNode && childNode.nodeType !== Node.COMMENT_NODE) {
+              logError(
+                `only HTML element tags with an id are allowed inside containers with phx-update.
 
-removing illegal node: "${(s.outerHTML||s.nodeValue).trim()}"
+removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
 
-`),i.push(s))}),i.forEach(s=>s.remove())}},replaceRootContainer(t,e,i){let s=new Set(["id",ce,Ee,Lt,fe]);if(t.tagName.toLowerCase()===e.toLowerCase())return Array.from(t.attributes).filter(n=>!s.has(n.name.toLowerCase())).forEach(n=>t.removeAttribute(n.name)),Object.keys(i).filter(n=>!s.has(n.toLowerCase())).forEach(n=>t.setAttribute(n,i[n])),t;{let n=document.createElement(e);return Object.keys(i).forEach(r=>n.setAttribute(r,i[r])),s.forEach(r=>n.setAttribute(r,t.getAttribute(r))),n.innerHTML=t.innerHTML,t.replaceWith(n),n}},getSticky(t,e,i){let s=(ye.private(t,"sticky")||[]).find(([n])=>e===n);if(s){let[n,r,o]=s;return o}else return typeof i=="function"?i():i},deleteSticky(t,e){this.updatePrivate(t,"sticky",[],i=>i.filter(([s,n])=>s!==e))},putSticky(t,e,i){let s=i(t);this.updatePrivate(t,"sticky",[],n=>{let r=n.findIndex(([o])=>e===o);return r>=0?n[r]=[e,i,s]:n.push([e,i,s]),n})},applyStickyOperations(t){let e=ye.private(t,"sticky");e&&e.forEach(([i,s,n])=>this.putSticky(t,i,s))},isLocked(t){return t.hasAttribute&&t.hasAttribute(B)},attributeIgnored(t,e){return e.some(i=>t.name==i||i==="*"||i.includes("*")&&t.name.match(i)!=null)}},u=ye,We=class{static isActive(t,e){let i=e._phxRef===void 0,n=t.getAttribute(kt).split(",").indexOf(W.genFileRef(e))>=0;return e.size>0&&(i||n)}static isPreflighted(t,e){return t.getAttribute(It).split(",").indexOf(W.genFileRef(e))>=0&&this.isActive(t,e)}static isPreflightInProgress(t){return t._preflightInProgress===!0}static markPreflightInProgress(t){t._preflightInProgress=!0}constructor(t,e,i,s){this.ref=W.genFileRef(e),this.fileEl=t,this.file=e,this.view=i,this.meta=null,this._isCancelled=!1,this._isDone=!1,this._progress=0,this._lastProgressSent=-1,this._onDone=function(){},this._onElUpdated=this.onElUpdated.bind(this),this.fileEl.addEventListener(at,this._onElUpdated),this.autoUpload=s}metadata(){return this.meta}progress(t){this._progress=Math.floor(t),this._progress>this._lastProgressSent&&(this._progress>=100?(this._progress=100,this._lastProgressSent=100,this._isDone=!0,this.view.pushFileProgress(this.fileEl,this.ref,100,()=>{W.untrackFile(this.fileEl,this.file),this._onDone()})):(this._lastProgressSent=this._progress,this.view.pushFileProgress(this.fileEl,this.ref,this._progress)))}isCancelled(){return this._isCancelled}cancel(){this.file._preflightInProgress=!1,this._isCancelled=!0,this._isDone=!0,this._onDone()}isDone(){return this._isDone}error(t="failed"){this.fileEl.removeEventListener(at,this._onElUpdated),this.view.pushFileProgress(this.fileEl,this.ref,{error:t}),this.isAutoUpload()||W.clearFiles(this.fileEl)}isAutoUpload(){return this.autoUpload}onDone(t){this._onDone=()=>{this.fileEl.removeEventListener(at,this._onElUpdated),t()}}onElUpdated(){this.fileEl.getAttribute(kt).split(",").indexOf(this.ref)===-1&&(W.untrackFile(this.fileEl,this.file),this.cancel())}toPreflightPayload(){return{last_modified:this.file.lastModified,name:this.file.name,relative_path:this.file.webkitRelativePath,size:this.file.size,type:this.file.type,ref:this.ref,meta:typeof this.file.meta=="function"?this.file.meta():void 0}}uploader(t){if(this.meta.uploader){let e=t[this.meta.uploader]||O(`no uploader configured for ${this.meta.uploader}`);return{name:this.meta.uploader,callback:e}}else return{name:"channel",callback:is}}zipPostFlight(t){this.meta=t.entries[this.ref],this.meta||O(`no preflight upload response returned with ref ${this.ref}`,{input:this.fileEl,response:t})}},rs=0,W=class Pt{static genFileRef(e){let i=e._phxRef;return i!==void 0?i:(e._phxRef=(rs++).toString(),e._phxRef)}static getEntryDataURL(e,i,s){let n=this.activeFiles(e).find(r=>this.genFileRef(r)===i);s(URL.createObjectURL(n))}static hasUploadsInProgress(e){let i=0;return u.findUploadInputs(e).forEach(s=>{s.getAttribute(It)!==s.getAttribute(Hi)&&i++}),i>0}static serializeUploads(e){let i=this.activeFiles(e),s={};return i.forEach(n=>{let r={path:e.name},o=e.getAttribute(pe);s[o]=s[o]||[],r.ref=this.genFileRef(n),r.last_modified=n.lastModified,r.name=n.name||r.ref,r.relative_path=n.webkitRelativePath,r.type=n.type,r.size=n.size,typeof n.meta=="function"&&(r.meta=n.meta()),s[o].push(r)}),s}static clearFiles(e){e.value=null,e.removeAttribute(pe),u.putPrivate(e,"files",[])}static untrackFile(e,i){u.putPrivate(e,"files",u.private(e,"files").filter(s=>!Object.is(s,i)))}static trackFiles(e,i,s){if(e.getAttribute("multiple")!==null){let n=i.filter(r=>!this.activeFiles(e).find(o=>Object.is(o,r)));u.updatePrivate(e,"files",[],r=>r.concat(n)),e.value=null}else s&&s.files.length>0&&(e.files=s.files),u.putPrivate(e,"files",i)}static activeFileInputs(e){let i=u.findUploadInputs(e);return Array.from(i).filter(s=>s.files&&this.activeFiles(s).length>0)}static activeFiles(e){return(u.private(e,"files")||[]).filter(i=>We.isActive(e,i))}static inputsAwaitingPreflight(e){let i=u.findUploadInputs(e);return Array.from(i).filter(s=>this.filesAwaitingPreflight(s).length>0)}static filesAwaitingPreflight(e){return this.activeFiles(e).filter(i=>!We.isPreflighted(e,i)&&!We.isPreflightInProgress(i))}static markPreflightInProgress(e){e.forEach(i=>We.markPreflightInProgress(i.file))}constructor(e,i,s){this.autoUpload=u.isAutoUpload(e),this.view=i,this.onComplete=s,this._entries=Array.from(Pt.filesAwaitingPreflight(e)||[]).map(n=>new We(e,n,i,this.autoUpload)),Pt.markPreflightInProgress(this._entries),this.numEntriesInProgress=this._entries.length}isAutoUpload(){return this.autoUpload}entries(){return this._entries}initAdapterUpload(e,i,s){this._entries=this._entries.map(r=>(r.isCancelled()?(this.numEntriesInProgress--,this.numEntriesInProgress===0&&this.onComplete()):(r.zipPostFlight(e),r.onDone(()=>{this.numEntriesInProgress--,this.numEntriesInProgress===0&&this.onComplete()})),r));let n=this._entries.reduce((r,o)=>{if(!o.meta)return r;let{name:a,callback:h}=o.uploader(s.uploaders);return r[a]=r[a]||{callback:h,entries:[]},r[a].entries.push(o),r},{});for(let r in n){let{callback:o,entries:a}=n[r];o(a,i,e,s)}}},os={anyOf(t,e){return e.find(i=>t instanceof i)},isFocusable(t,e){return t instanceof HTMLAnchorElement&&t.rel!=="ignore"||t instanceof HTMLAreaElement&&t.href!==void 0||!t.disabled&&this.anyOf(t,[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement,HTMLButtonElement])||t instanceof HTMLIFrameElement||t.tabIndex>=0&&t.getAttribute("aria-hidden")!=="true"||!e&&t.getAttribute("tabindex")!==null&&t.getAttribute("aria-hidden")!=="true"},attemptFocus(t,e){if(this.isFocusable(t,e))try{t.focus()}catch{}return!!document.activeElement&&document.activeElement.isSameNode(t)},focusFirstInteractive(t){let e=t.firstElementChild;for(;e;){if(this.attemptFocus(e,!0)||this.focusFirstInteractive(e))return!0;e=e.nextElementSibling}},focusFirst(t){let e=t.firstElementChild;for(;e;){if(this.attemptFocus(e)||this.focusFirst(e))return!0;e=e.nextElementSibling}},focusLast(t){let e=t.lastElementChild;for(;e;){if(this.attemptFocus(e)||this.focusLast(e))return!0;e=e.previousElementSibling}}},ee=os,vi={LiveFileUpload:{activeRefs(){return this.el.getAttribute(kt)},preflightedRefs(){return this.el.getAttribute(It)},mounted(){this.js().ignoreAttributes(this.el,["value"]),this.preflightedWas=this.preflightedRefs()},updated(){let t=this.preflightedRefs();this.preflightedWas!==t&&(this.preflightedWas=t,t===""&&this.__view().cancelSubmit(this.el.form)),this.activeRefs()===""&&(this.el.value=null),this.el.dispatchEvent(new CustomEvent(at))}},LiveImgPreview:{mounted(){this.ref=this.el.getAttribute("data-phx-entry-ref"),this.inputEl=document.getElementById(this.el.getAttribute(pe)),W.getEntryDataURL(this.inputEl,this.ref,t=>{this.url=t,this.el.src=t})},destroyed(){URL.revokeObjectURL(this.url)}},FocusWrap:{mounted(){this.focusStart=this.el.firstElementChild,this.focusEnd=this.el.lastElementChild,this.focusStart.addEventListener("focus",t=>{if(!t.relatedTarget||!this.el.contains(t.relatedTarget)){let e=t.target.nextElementSibling;ee.attemptFocus(e)||ee.focusFirst(e)}else ee.focusLast(this.el)}),this.focusEnd.addEventListener("focus",t=>{if(!t.relatedTarget||!this.el.contains(t.relatedTarget)){let e=t.target.previousElementSibling;ee.attemptFocus(e)||ee.focusLast(e)}else ee.focusFirst(this.el)}),this.el.contains(document.activeElement)||(this.el.addEventListener("phx:show-end",()=>this.el.focus()),window.getComputedStyle(this.el).display!=="none"&&ee.focusFirst(this.el))}}},bi=t=>["HTML","BODY"].indexOf(t.nodeName.toUpperCase())>=0?null:["scroll","auto"].indexOf(getComputedStyle(t).overflowY)>=0?t:bi(t.parentElement),Qt=t=>t?t.scrollTop:document.documentElement.scrollTop||document.body.scrollTop,Ot=t=>t?t.getBoundingClientRect().bottom:window.innerHeight||document.documentElement.clientHeight,Mt=t=>t?t.getBoundingClientRect().top:0,as=(t,e)=>{let i=t.getBoundingClientRect();return Math.ceil(i.top)>=Mt(e)&&Math.ceil(i.left)>=0&&Math.floor(i.top)<=Ot(e)},hs=(t,e)=>{let i=t.getBoundingClientRect();return Math.ceil(i.bottom)>=Mt(e)&&Math.ceil(i.left)>=0&&Math.floor(i.bottom)<=Ot(e)},ei=(t,e)=>{let i=t.getBoundingClientRect();return Math.ceil(i.top)>=Mt(e)&&Math.ceil(i.left)>=0&&Math.floor(i.top)<=Ot(e)};vi.InfiniteScroll={mounted(){this.scrollContainer=bi(this.el);let t=Qt(this.scrollContainer),e=!1,i=500,s=null,n=this.throttle(i,(a,h)=>{s=()=>!0,this.liveSocket.js().push(this.el,a,{value:{id:h.id,_overran:!0},callback:()=>{s=null}})}),r=this.throttle(i,(a,h)=>{s=()=>h.scrollIntoView({block:"start"}),this.liveSocket.js().push(this.el,a,{value:{id:h.id},callback:()=>{s=null,window.requestAnimationFrame(()=>{ei(h,this.scrollContainer)||h.scrollIntoView({block:"start"})})}})}),o=this.throttle(i,(a,h)=>{s=()=>h.scrollIntoView({block:"end"}),this.liveSocket.js().push(this.el,a,{value:{id:h.id},callback:()=>{s=null,window.requestAnimationFrame(()=>{ei(h,this.scrollContainer)||h.scrollIntoView({block:"end"})})}})});this.onScroll=a=>{let h=Qt(this.scrollContainer);if(s)return t=h,s();let c=this.findOverrunTarget(),f=this.el.getAttribute(this.liveSocket.binding("viewport-top")),g=this.el.getAttribute(this.liveSocket.binding("viewport-bottom")),b=this.el.lastElementChild,w=this.el.firstElementChild,p=h<t,S=h>t;p&&f&&!e&&c.top>=0?(e=!0,n(f,w)):S&&e&&c.top<=0&&(e=!1),f&&p&&as(w,this.scrollContainer)?r(f,w):g&&S&&hs(b,this.scrollContainer)&&o(g,b),t=h},this.scrollContainer?this.scrollContainer.addEventListener("scroll",this.onScroll):window.addEventListener("scroll",this.onScroll)},destroyed(){this.scrollContainer?this.scrollContainer.removeEventListener("scroll",this.onScroll):window.removeEventListener("scroll",this.onScroll)},throttle(t,e){let i=0,s;return(...n)=>{let r=Date.now(),o=t-(r-i);o<=0||o>t?(s&&(clearTimeout(s),s=null),i=r,e(...n)):s||(s=setTimeout(()=>{i=Date.now(),s=null,e(...n)},o))}},findOverrunTarget(){let t,e=this.el.getAttribute(this.liveSocket.binding(Ni));if(e){let i=document.getElementById(e);if(i)t=i.getBoundingClientRect();else throw new Error("did not find element with id "+e)}else t=this.el.getBoundingClientRect();return t}};var ls=vi,Rt=class{static onUnlock(t,e){if(!u.isLocked(t)&&!t.closest(`[${B}]`))return e();let i=t.closest(`[${B}]`),s=i.closest(`[${B}]`).getAttribute(B);i.addEventListener(`phx:undo-lock:${s}`,()=>{e()},{once:!0})}constructor(t){this.el=t,this.loadingRef=t.hasAttribute(Me)?parseInt(t.getAttribute(Me),10):null,this.lockRef=t.hasAttribute(B)?parseInt(t.getAttribute(B),10):null}maybeUndo(t,e,i){if(!this.isWithin(t)){u.updatePrivate(this.el,$t,[],s=>(s.push(t),s));return}this.undoLocks(t,e,i),this.undoLoading(t,e),u.updatePrivate(this.el,$t,[],s=>s.filter(n=>{let r={detail:{ref:n,event:e},bubbles:!0,cancelable:!1};return this.loadingRef&&this.loadingRef>n&&this.el.dispatchEvent(new CustomEvent(`phx:undo-loading:${n}`,r)),this.lockRef&&this.lockRef>n&&this.el.dispatchEvent(new CustomEvent(`phx:undo-lock:${n}`,r)),n>t})),this.isFullyResolvedBy(t)&&this.el.removeAttribute(ie)}isWithin(t){return!(this.loadingRef!==null&&this.loadingRef>t&&this.lockRef!==null&&this.lockRef>t)}undoLocks(t,e,i){if(!this.isLockUndoneBy(t))return;let s=u.private(this.el,B);s&&(i(s),u.deletePrivate(this.el,B)),this.el.removeAttribute(B);let n={detail:{ref:t,event:e},bubbles:!0,cancelable:!1};this.el.dispatchEvent(new CustomEvent(`phx:undo-lock:${this.lockRef}`,n))}undoLoading(t,e){if(!this.isLoadingUndoneBy(t)){this.canUndoLoading(t)&&this.el.classList.contains("phx-submit-loading")&&this.el.classList.remove("phx-change-loading");return}if(this.canUndoLoading(t)){this.el.removeAttribute(Me);let i=this.el.getAttribute(Le),s=this.el.getAttribute(_t);s!==null&&(this.el.readOnly=s==="true",this.el.removeAttribute(_t)),i!==null&&(this.el.disabled=i==="true",this.el.removeAttribute(Le));let n=this.el.getAttribute(ut);n!==null&&(this.el.textContent=n,this.el.removeAttribute(ut));let r={detail:{ref:t,event:e},bubbles:!0,cancelable:!1};this.el.dispatchEvent(new CustomEvent(`phx:undo-loading:${this.loadingRef}`,r))}ui.forEach(i=>{(i!=="phx-submit-loading"||this.canUndoLoading(t))&&u.removeClass(this.el,i)})}isLoadingUndoneBy(t){return this.loadingRef===null?!1:this.loadingRef<=t}isLockUndoneBy(t){return this.lockRef===null?!1:this.lockRef<=t}isFullyResolvedBy(t){return(this.loadingRef===null||this.loadingRef<=t)&&(this.lockRef===null||this.lockRef<=t)}canUndoLoading(t){return this.lockRef===null||this.lockRef<=t}},cs=class{constructor(t,e,i){let s=new Set,n=new Set([...e.children].map(o=>o.id)),r=[];Array.from(t.children).forEach(o=>{if(o.id&&(s.add(o.id),n.has(o.id))){let a=o.previousElementSibling&&o.previousElementSibling.id;r.push({elementId:o.id,previousElementId:a})}}),this.containerId=e.id,this.updateType=i,this.elementsToModify=r,this.elementIdsToAdd=[...n].filter(o=>!s.has(o))}perform(){let t=u.byId(this.containerId);t&&(this.elementsToModify.forEach(e=>{e.previousElementId?De(document.getElementById(e.previousElementId),i=>{De(document.getElementById(e.elementId),s=>{s.previousElementSibling&&s.previousElementSibling.id==i.id||i.insertAdjacentElement("afterend",s)})}):De(document.getElementById(e.elementId),i=>{i.previousElementSibling==null||t.insertAdjacentElement("afterbegin",i)})}),this.updateType=="prepend"&&this.elementIdsToAdd.reverse().forEach(e=>{De(document.getElementById(e),i=>t.insertAdjacentElement("afterbegin",i))}))}},ti=11;function ds(t,e){var i=e.attributes,s,n,r,o,a;if(!(e.nodeType===ti||t.nodeType===ti)){for(var h=i.length-1;h>=0;h--)s=i[h],n=s.name,r=s.namespaceURI,o=s.value,r?(n=s.localName||n,a=t.getAttributeNS(r,n),a!==o&&(s.prefix==="xmlns"&&(n=s.name),t.setAttributeNS(r,n,o))):(a=t.getAttribute(n),a!==o&&t.setAttribute(n,o));for(var c=t.attributes,f=c.length-1;f>=0;f--)s=c[f],n=s.name,r=s.namespaceURI,r?(n=s.localName||n,e.hasAttributeNS(r,n)||t.removeAttributeNS(r,n)):e.hasAttribute(n)||t.removeAttribute(n)}}var st,us="http://www.w3.org/1999/xhtml",G=typeof document>"u"?void 0:document,fs=!!G&&"content"in G.createElement("template"),ps=!!G&&G.createRange&&"createContextualFragment"in G.createRange();function ms(t){var e=G.createElement("template");return e.innerHTML=t,e.content.childNodes[0]}function gs(t){st||(st=G.createRange(),st.selectNode(G.body));var e=st.createContextualFragment(t);return e.childNodes[0]}function vs(t){var e=G.createElement("body");return e.innerHTML=t,e.childNodes[0]}function bs(t){return t=t.trim(),fs?ms(t):ps?gs(t):vs(t)}function nt(t,e){var i=t.nodeName,s=e.nodeName,n,r;return i===s?!0:(n=i.charCodeAt(0),r=s.charCodeAt(0),n<=90&&r>=97?i===s.toUpperCase():r<=90&&n>=97?s===i.toUpperCase():!1)}function ws(t,e){return!e||e===us?G.createElement(t):G.createElementNS(e,t)}function ys(t,e){for(var i=t.firstChild;i;){var s=i.nextSibling;e.appendChild(i),i=s}return e}function St(t,e,i){t[i]!==e[i]&&(t[i]=e[i],t[i]?t.setAttribute(i,""):t.removeAttribute(i))}var ii={OPTION:function(t,e){var i=t.parentNode;if(i){var s=i.nodeName.toUpperCase();s==="OPTGROUP"&&(i=i.parentNode,s=i&&i.nodeName.toUpperCase()),s==="SELECT"&&!i.hasAttribute("multiple")&&(t.hasAttribute("selected")&&!e.selected&&(t.setAttribute("selected","selected"),t.removeAttribute("selected")),i.selectedIndex=-1)}St(t,e,"selected")},INPUT:function(t,e){St(t,e,"checked"),St(t,e,"disabled"),t.value!==e.value&&(t.value=e.value),e.hasAttribute("value")||t.removeAttribute("value")},TEXTAREA:function(t,e){var i=e.value;t.value!==i&&(t.value=i);var s=t.firstChild;if(s){var n=s.nodeValue;if(n==i||!i&&n==t.placeholder)return;s.nodeValue=i}},SELECT:function(t,e){if(!e.hasAttribute("multiple")){for(var i=-1,s=0,n=t.firstChild,r,o;n;)if(o=n.nodeName&&n.nodeName.toUpperCase(),o==="OPTGROUP")r=n,n=r.firstChild,n||(n=r.nextSibling,r=null);else{if(o==="OPTION"){if(n.hasAttribute("selected")){i=s;break}s++}n=n.nextSibling,!n&&r&&(n=r.nextSibling,r=null)}t.selectedIndex=i}}},Je=1,si=11,ni=3,ri=8;function ge(){}function Ss(t){if(t)return t.getAttribute&&t.getAttribute("id")||t.id}function Es(t){return function(i,s,n){if(n||(n={}),typeof s=="string")if(i.nodeName==="#document"||i.nodeName==="HTML"){var r=s;s=G.createElement("html"),s.innerHTML=r}else if(i.nodeName==="BODY"){var o=s;s=G.createElement("html"),s.innerHTML=o;var a=s.querySelector("body");a&&(s=a)}else s=bs(s);else s.nodeType===si&&(s=s.firstElementChild);var h=n.getNodeKey||Ss,c=n.onBeforeNodeAdded||ge,f=n.onNodeAdded||ge,g=n.onBeforeElUpdated||ge,b=n.onElUpdated||ge,w=n.onBeforeNodeDiscarded||ge,p=n.onNodeDiscarded||ge,S=n.onBeforeElChildrenUpdated||ge,A=n.skipFromChildren||ge,$=n.addChild||function(E,C){return E.appendChild(C)},J=n.childrenOnly===!0,T=Object.create(null),R=[];function L(E){R.push(E)}function V(E,C){if(E.nodeType===Je)for(var H=E.firstChild;H;){var P=void 0;C&&(P=h(H))?L(P):(p(H),H.firstChild&&V(H,C)),H=H.nextSibling}}function m(E,C,H){w(E)!==!1&&(C&&C.removeChild(E),p(E),V(E,H))}function y(E){if(E.nodeType===Je||E.nodeType===si)for(var C=E.firstChild;C;){var H=h(C);H&&(T[H]=C),y(C),C=C.nextSibling}}y(i);function F(E){f(E);for(var C=E.firstChild;C;){var H=C.nextSibling,P=h(C);if(P){var l=T[P];l&&nt(C,l)?(C.parentNode.replaceChild(l,C),M(l,C)):F(C)}else F(C);C=H}}function z(E,C,H){for(;C;){var P=C.nextSibling;(H=h(C))?L(H):m(C,E,!0),C=P}}function M(E,C,H){var P=h(C);if(P&&delete T[P],!H){var l=g(E,C);if(l===!1||(l instanceof HTMLElement&&(E=l,y(E)),t(E,C),b(E),S(E,C)===!1))return}E.nodeName!=="TEXTAREA"?X(E,C):ii.TEXTAREA(E,C)}function X(E,C){var H=A(E,C),P=C.firstChild,l=E.firstChild,d,v,k,_,D;e:for(;P;){for(_=P.nextSibling,d=h(P);!H&&l;){if(k=l.nextSibling,P.isSameNode&&P.isSameNode(l)){P=_,l=k;continue e}v=h(l);var N=l.nodeType,U=void 0;if(N===P.nodeType&&(N===Je?(d?d!==v&&((D=T[d])?k===D?U=!1:(E.insertBefore(D,l),v?L(v):m(l,E,!0),l=D,v=h(l)):U=!1):v&&(U=!1),U=U!==!1&&nt(l,P),U&&M(l,P)):(N===ni||N==ri)&&(U=!0,l.nodeValue!==P.nodeValue&&(l.nodeValue=P.nodeValue))),U){P=_,l=k;continue e}v?L(v):m(l,E,!0),l=k}if(d&&(D=T[d])&&nt(D,P))H||$(E,D),M(D,P);else{var q=c(P);q!==!1&&(q&&(P=q),P.actualize&&(P=P.actualize(E.ownerDocument||G)),$(E,P),F(P))}P=_,l=k}z(E,l,v);var se=ii[E.nodeName];se&&se(E,C)}var I=i,Y=I.nodeType,Ke=s.nodeType;if(!J){if(Y===Je)Ke===Je?nt(i,s)||(p(i),I=ys(i,ws(s.nodeName,s.namespaceURI))):I=s;else if(Y===ni||Y===ri){if(Ke===Y)return I.nodeValue!==s.nodeValue&&(I.nodeValue=s.nodeValue),I;I=s}}if(I===s)p(i);else{if(s.isSameNode&&s.isSameNode(I))return;if(M(I,s,J),R)for(var Ce=0,Ge=R.length;Ce<Ge;Ce++){var Te=T[R[Ce]];Te&&m(Te,Te.parentNode,!1)}}return!J&&I!==i&&i.parentNode&&(I.actualize&&(I=I.actualize(i.ownerDocument||G)),i.parentNode.replaceChild(I,i)),I}}var ks=Es(ds),xt=ks,rt=class{constructor(t,e,i,s,n,r,o={}){this.view=t,this.liveSocket=t.liveSocket,this.container=e,this.id=i,this.rootID=t.root.id,this.html=s,this.streams=n,this.streamInserts={},this.streamComponentRestore={},this.targetCID=r,this.cidPatch=ue(this.targetCID),this.pendingRemoves=[],this.phxRemove=this.liveSocket.binding("remove"),this.targetContainer=this.isCIDPatch()?this.targetCIDContainer(s):e,this.callbacks={beforeadded:[],beforeupdated:[],beforephxChildAdded:[],afteradded:[],afterupdated:[],afterdiscarded:[],afterphxChildAdded:[],aftertransitionsDiscarded:[]},this.withChildren=o.withChildren||o.undoRef||!1,this.undoRef=o.undoRef}before(t,e){this.callbacks[`before${t}`].push(e)}after(t,e){this.callbacks[`after${t}`].push(e)}trackBefore(t,...e){this.callbacks[`before${t}`].forEach(i=>i(...e))}trackAfter(t,...e){this.callbacks[`after${t}`].forEach(i=>i(...e))}markPrunableContentForRemoval(){let t=this.liveSocket.binding(ft);u.all(this.container,`[${t}=append] > *, [${t}=prepend] > *`,e=>{e.setAttribute(Ft,"")})}perform(t){let{view:e,liveSocket:i,html:s,container:n}=this,r=this.targetContainer;if(this.isCIDPatch()&&!this.targetContainer)return;if(this.isCIDPatch()){let T=r.closest(`[${B}]`);if(T&&!T.isSameNode(r)){let R=u.private(T,B);R&&(r=R.querySelector(`[data-phx-component="${this.targetCID}"]`))}}let o=i.getActiveElement(),{selectionStart:a,selectionEnd:h}=o&&u.hasSelectionRange(o)?o:{},c=i.binding(ft),f=i.binding(At),g=i.binding(Ct),b=i.binding($i),w=[],p=[],S=[],A=[],$=null,J=(T,R,L=this.withChildren)=>{let V={childrenOnly:T.getAttribute(le)===null&&!L,getNodeKey:m=>u.isPhxDestroyed(m)?null:t?m.id:m.id||m.getAttribute&&m.getAttribute(mi),skipFromChildren:m=>m.getAttribute(c)===ht,addChild:(m,y)=>{let{ref:F,streamAt:z}=this.getStreamInsert(y);if(F===void 0)return m.appendChild(y);if(this.setStreamRef(y,F),z===0)m.insertAdjacentElement("afterbegin",y);else if(z===-1){let M=m.lastElementChild;if(M&&!M.hasAttribute(je)){let X=Array.from(m.children).find(I=>!I.hasAttribute(je));m.insertBefore(y,X)}else m.appendChild(y)}else if(z>0){let M=Array.from(m.children)[z];m.insertBefore(y,M)}},onBeforeNodeAdded:m=>{if(this.getStreamInsert(m)?.updateOnly&&!this.streamComponentRestore[m.id])return!1;u.maintainPrivateHooks(m,m,f,g),this.trackBefore("added",m);let y=m;return this.streamComponentRestore[m.id]&&(y=this.streamComponentRestore[m.id],delete this.streamComponentRestore[m.id],J(y,m,!0)),y},onNodeAdded:m=>{m.getAttribute&&this.maybeReOrderStream(m,!0),u.isPortalTemplate(m)&&A.push(()=>this.teleport(m,J)),m instanceof HTMLImageElement&&m.srcset?m.srcset=m.srcset:m instanceof HTMLVideoElement&&m.autoplay&&m.play(),u.isNowTriggerFormExternal(m,b)&&($=m),(u.isPhxChild(m)&&e.ownsElement(m)||u.isPhxSticky(m)&&e.ownsElement(m.parentNode))&&this.trackAfter("phxChildAdded",m),m.nodeName==="SCRIPT"&&m.hasAttribute(lt)&&this.handleRuntimeHook(m,R),w.push(m)},onNodeDiscarded:m=>this.onNodeDiscarded(m),onBeforeNodeDiscarded:m=>{if(m.getAttribute&&m.getAttribute(Ft)!==null)return!0;if(m.parentElement!==null&&m.id&&u.isPhxUpdate(m.parentElement,c,[ht,"append","prepend"])||m.getAttribute&&m.getAttribute(Ae)||this.maybePendingRemove(m)||this.skipCIDSibling(m))return!1;if(u.isPortalTemplate(m)){let y=document.getElementById(m.content.firstElementChild.id);y&&(y.remove(),V.onNodeDiscarded(y),this.view.dropPortalElementId(y.id))}return!0},onElUpdated:m=>{u.isNowTriggerFormExternal(m,b)&&($=m),p.push(m),this.maybeReOrderStream(m,!1)},onBeforeElUpdated:(m,y)=>{if(m.id&&m.isSameNode(T)&&m.id!==y.id)return V.onNodeDiscarded(m),m.replaceWith(y),V.onNodeAdded(y);if(u.syncPendingAttrs(m,y),u.maintainPrivateHooks(m,y,f,g),u.cleanChildNodes(y,c),this.skipCIDSibling(y))return this.maybeReOrderStream(m),!1;if(u.isPhxSticky(m))return[ce,Ee,fe].map(M=>[M,m.getAttribute(M),y.getAttribute(M)]).forEach(([M,X,I])=>{I&&X!==I&&m.setAttribute(M,I)}),!1;if(u.isIgnored(m,c)||m.form&&m.form.isSameNode($))return this.trackBefore("updated",m,y),u.mergeAttrs(m,y,{isIgnored:u.isIgnored(m,c)}),p.push(m),u.applyStickyOperations(m),!1;if(m.type==="number"&&m.validity&&m.validity.badInput)return!1;let F=o&&m.isSameNode(o)&&u.isFormInput(m),z=F&&this.isChangedSelect(m,y);if(m.hasAttribute(ie)){let M=new Rt(m);if(M.lockRef&&(!this.undoRef||!M.isLockUndoneBy(this.undoRef))){u.applyStickyOperations(m);let I=m.hasAttribute(B)?u.private(m,B)||m.cloneNode(!0):null;I&&(u.putPrivate(m,B,I),F||(m=I))}}if(u.isPhxChild(y)){let M=m.getAttribute(ce);return u.mergeAttrs(m,y,{exclude:[Ee]}),M!==""&&m.setAttribute(ce,M),m.setAttribute(fe,this.rootID),u.applyStickyOperations(m),!1}return this.undoRef&&u.private(y,B)&&u.putPrivate(m,B,u.private(y,B)),u.copyPrivates(y,m),u.isPortalTemplate(y)?(A.push(()=>this.teleport(y,J)),m.content.replaceChildren(y.content.cloneNode(!0)),!1):F&&m.type!=="hidden"&&!z?(this.trackBefore("updated",m,y),u.mergeFocusedInput(m,y),u.syncAttrsToProps(m),p.push(m),u.applyStickyOperations(m),!1):(z&&m.blur(),u.isPhxUpdate(y,c,["append","prepend"])&&S.push(new cs(m,y,y.getAttribute(c))),u.syncAttrsToProps(y),u.applyStickyOperations(y),this.trackBefore("updated",m,y),m)}};xt(T,R,V)};if(this.trackBefore("added",n),this.trackBefore("updated",n,n),i.time("morphdom",()=>{this.streams.forEach(([R,L,V,m])=>{L.forEach(([y,F,z,M])=>{this.streamInserts[y]={ref:R,streamAt:F,limit:z,reset:m,updateOnly:M}}),m!==void 0&&u.all(document,`[${je}="${R}"]`,y=>{this.removeStreamChildElement(y)}),V.forEach(y=>{let F=document.getElementById(y);F&&this.removeStreamChildElement(F)})}),t&&u.all(this.container,`[${c}=${ht}]`).filter(R=>this.view.ownsElement(R)).forEach(R=>{Array.from(R.children).forEach(L=>{this.removeStreamChildElement(L,!0)})}),J(r,s);let T=0;for(;A.length>0&&T<5;){let R=A.slice();A=[],R.forEach(L=>L()),T++}this.view.portalElementIds.forEach(R=>{let L=document.getElementById(R);L&&(document.getElementById(L.getAttribute(ve))||(L.remove(),this.onNodeDiscarded(L),this.view.dropPortalElementId(R)))})}),i.isDebugEnabled()&&(Zi(),Qi(this.streamInserts),Array.from(document.querySelectorAll("input[name=id]")).forEach(T=>{T instanceof HTMLInputElement&&T.form&&console.error(`Detected an input with name="id" inside a form! This will cause problems when patching the DOM.
-`,T)})),S.length>0&&i.time("post-morph append/prepend restoration",()=>{S.forEach(T=>T.perform())}),i.silenceEvents(()=>u.restoreFocus(o,a,h)),u.dispatchEvent(document,"phx:update"),w.forEach(T=>this.trackAfter("added",T)),p.forEach(T=>this.trackAfter("updated",T)),this.transitionPendingRemoves(),$){i.unload();let T=u.private($,"submitter");if(T&&T.name&&r.contains(T)){let R=document.createElement("input");R.type="hidden";let L=T.getAttribute("form");L&&R.setAttribute("form",L),R.name=T.name,R.value=T.value,T.parentElement.insertBefore(R,T)}Object.getPrototypeOf($).submit.call($)}return!0}onNodeDiscarded(t){(u.isPhxChild(t)||u.isPhxSticky(t))&&this.liveSocket.destroyViewByEl(t),this.trackAfter("discarded",t)}maybePendingRemove(t){return t.getAttribute&&t.getAttribute(this.phxRemove)!==null?(this.pendingRemoves.push(t),!0):!1}removeStreamChildElement(t,e=!1){!e&&!this.view.ownsElement(t)||(this.streamInserts[t.id]?(this.streamComponentRestore[t.id]=t,t.remove()):this.maybePendingRemove(t)||(t.remove(),this.onNodeDiscarded(t)))}getStreamInsert(t){return(t.id?this.streamInserts[t.id]:{})||{}}setStreamRef(t,e){u.putSticky(t,je,i=>i.setAttribute(je,e))}maybeReOrderStream(t,e){let{ref:i,streamAt:s,reset:n}=this.getStreamInsert(t);if(s!==void 0&&(this.setStreamRef(t,i),!(!n&&!e)&&t.parentElement)){if(s===0)t.parentElement.insertBefore(t,t.parentElement.firstElementChild);else if(s>0){let r=Array.from(t.parentElement.children),o=r.indexOf(t);if(s>=r.length-1)t.parentElement.appendChild(t);else{let a=r[s];o>s?t.parentElement.insertBefore(t,a):t.parentElement.insertBefore(t,a.nextElementSibling)}}this.maybeLimitStream(t)}}maybeLimitStream(t){let{limit:e}=this.getStreamInsert(t),i=e!==null&&Array.from(t.parentElement.children);e&&e<0&&i.length>e*-1?i.slice(0,i.length+e).forEach(s=>this.removeStreamChildElement(s)):e&&e>=0&&i.length>e&&i.slice(e).forEach(s=>this.removeStreamChildElement(s))}transitionPendingRemoves(){let{pendingRemoves:t,liveSocket:e}=this;t.length>0&&e.transitionRemoves(t,()=>{t.forEach(i=>{let s=u.firstPhxChild(i);s&&e.destroyViewByEl(s),i.remove()}),this.trackAfter("transitionsDiscarded",t)})}isChangedSelect(t,e){return!(t instanceof HTMLSelectElement)||t.multiple?!1:t.options.length!==e.options.length?!0:(e.value=t.value,!t.isEqualNode(e))}isCIDPatch(){return this.cidPatch}skipCIDSibling(t){return t.nodeType===Node.ELEMENT_NODE&&t.hasAttribute(pi)}targetCIDContainer(t){if(!this.isCIDPatch())return;let[e,...i]=u.findComponentNodeList(this.view.id,this.targetCID);return i.length===0&&u.childNodeLength(t)===1?e:e&&e.parentNode}indexOf(t,e){return Array.from(t.children).indexOf(e)}teleport(t,e){let i=t.getAttribute(Dt),s=document.querySelector(i);if(!s)throw new Error("portal target with selector "+i+" not found");let n=t.content.firstElementChild;if(this.skipCIDSibling(n))return;if(!n?.id)throw new Error("phx-portal template must have a single root element with ID!");let r=document.getElementById(n.id),o;r?(s.contains(r)||s.appendChild(r),o=r):(o=document.createElement(n.tagName),s.appendChild(o)),n.setAttribute(Ae,this.view.id),n.setAttribute(ve,t.id),e(o,n,!0),n.removeAttribute(Ae),n.removeAttribute(ve),this.view.pushPortalElementId(n.id)}handleRuntimeHook(t,e){let i=t.getAttribute(lt),s=t.hasAttribute("nonce")?t.getAttribute("nonce"):null;if(t.hasAttribute("nonce")){let r=document.createElement("template");r.innerHTML=e,s=r.content.querySelector(`script[${lt}="${CSS.escape(i)}"]`).getAttribute("nonce")}let n=document.createElement("script");n.textContent=t.textContent,u.mergeAttrs(n,t,{isIgnored:!1}),s&&(n.nonce=s),t.replaceWith(n),t=n}},As=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),Cs=new Set(["'",'"']),oi=(t,e,i)=>{let s=0,n=!1,r,o,a,h,c,f,g=t.match(/^(\s*(?:<!--.*?-->\s*)*)<([^\s\/>]+)/);if(g===null)throw new Error(`malformed html ${t}`);for(s=g[0].length,r=g[1],a=g[2],h=s,s;s<t.length&&t.charAt(s)!==">";s++)if(t.charAt(s)==="="){let p=t.slice(s-3,s)===" id";s++;let S=t.charAt(s);if(Cs.has(S)){let A=s;for(s++,s;s<t.length&&t.charAt(s)!==S;s++);if(p){c=t.slice(A+1,s);break}}}let b=t.length-1;for(n=!1;b>=r.length+a.length;){let p=t.charAt(b);if(n)p==="-"&&t.slice(b-3,b)==="<!-"?(n=!1,b-=4):b-=1;else if(p===">"&&t.slice(b-2,b)==="--")n=!0,b-=3;else{if(p===">")break;b-=1}}o=t.slice(b+1,t.length);let w=Object.keys(e).map(p=>e[p]===!0?p:`${p}="${e[p]}"`).join(" ");if(i){let p=c?` id="${c}"`:"";As.has(a)?f=`<${a}${p}${w===""?"":" "}${w}/>`:f=`<${a}${p}${w===""?"":" "}${w}></${a}>`}else{let p=t.slice(h,b+1);f=`<${a}${w===""?"":" "}${w}${p}`}return[f,r,o]},ai=class{static extract(t){let{[Gt]:e,[Kt]:i,[Yt]:s}=t;return delete t[Gt],delete t[Kt],delete t[Yt],{diff:t,title:s,reply:e||null,events:i||[]}}constructor(t,e){this.viewId=t,this.rendered={},this.magicId=0,this.mergeDiff(e)}parentViewId(){return this.viewId}toString(t){let{buffer:e,streams:i}=this.recursiveToString(this.rendered,this.rendered[K],t,!0,{});return{buffer:e,streams:i}}recursiveToString(t,e=t[K],i,s,n){i=i?new Set(i):null;let r={buffer:"",components:e,onlyCids:i,streams:new Set};return this.toOutputBuffer(t,null,r,s,n),{buffer:r.buffer,streams:r.streams}}componentCIDs(t){return Object.keys(t[K]||{}).map(e=>parseInt(e))}isComponentOnlyDiff(t){return t[K]?Object.keys(t).length===1:!1}getComponent(t,e){return t[K][e]}resetRender(t){this.rendered[K][t]&&(this.rendered[K][t].reset=!0)}mergeDiff(t){let e=t[K],i={};if(delete t[K],this.rendered=this.mutableMerge(this.rendered,t),this.rendered[K]=this.rendered[K]||{},e){let s=this.rendered[K];for(let n in e)e[n]=this.cachedFindComponent(n,e[n],s,e,i);for(let n in e)s[n]=e[n];t[K]=e}}cachedFindComponent(t,e,i,s,n){if(n[t])return n[t];{let r,o,a=e[te];if(ue(a)){let h;a>0?h=this.cachedFindComponent(a,s[a],i,s,n):h=i[-a],o=h[te],r=this.cloneMerge(h,e,!0),r[te]=o}else r=e[te]!==void 0||i[t]===void 0?e:this.cloneMerge(i[t],e,!1);return n[t]=r,r}}mutableMerge(t,e){return e[te]!==void 0?e:(this.doMutableMerge(t,e),t)}doMutableMerge(t,e){if(e[j])this.mergeKeyed(t,e);else for(let i in e){let s=e[i],n=t[i];Ie(s)&&s[te]===void 0&&Ie(n)?this.doMutableMerge(n,s):t[i]=s}t[yt]&&(t.newRender=!0)}clone(t){return"structuredClone"in window?structuredClone(t):JSON.parse(JSON.stringify(t))}mergeKeyed(t,e){let i=this.clone(t);if(Object.entries(e[j]).forEach(([s,n])=>{if(s!==he)if(Array.isArray(n)){let[r,o]=n;t[j][s]=i[j][r],this.doMutableMerge(t[j][s],o)}else if(typeof n=="number"){let r=n;t[j][s]=i[j][r]}else typeof n=="object"&&(t[j][s]||(t[j][s]={}),this.doMutableMerge(t[j][s],n))}),e[j][he]<t[j][he])for(let s=e[j][he];s<t[j][he];s++)delete t[j][s];t[j][he]=e[j][he],e[xe]&&(t[xe]=e[xe]),e[me]&&(t[me]=e[me])}cloneMerge(t,e,i){let s;if(e[j])s=this.clone(t),this.mergeKeyed(s,e);else{s={...t,...e};for(let n in s){let r=e[n],o=t[n];Ie(r)&&r[te]===void 0&&Ie(o)?s[n]=this.cloneMerge(o,r,i):r===void 0&&Ie(o)&&(s[n]=this.cloneMerge(o,{},i))}}return i?(delete s.magicId,delete s.newRender):t[yt]&&(s.newRender=!0),s}componentToString(t){let{buffer:e,streams:i}=this.recursiveCIDToString(this.rendered[K],t,null),[s,n,r]=oi(e,{});return{buffer:s,streams:i}}pruneCIDs(t){t.forEach(e=>delete this.rendered[K][e])}get(){return this.rendered}isNewFingerprint(t={}){return!!t[te]}templateStatic(t,e){return typeof t=="number"?e[t]:t}nextMagicID(){return this.magicId++,`m${this.magicId}-${this.parentViewId()}`}toOutputBuffer(t,e,i,s,n={}){if(t[j])return this.comprehensionToBuffer(t,e,i,s);t[me]&&(e=t[me],delete t[me]);let{[te]:r}=t;r=this.templateStatic(r,e),t[te]=r;let o=t[yt],a=i.buffer;o&&(i.buffer=""),s&&o&&!t.magicId&&(t.newRender=!0,t.magicId=this.nextMagicID()),i.buffer+=r[0];for(let h=1;h<r.length;h++)this.dynamicToBuffer(t[h-1],e,i,s),i.buffer+=r[h];if(o){let h=!1,c;s||t.magicId?(h=s&&!t.newRender,c={[mi]:t.magicId,...n}):c=n,h&&(c[pi]=!0);let[f,g,b]=oi(i.buffer,c,h);t.newRender=!1,i.buffer=a+g+f+b}}comprehensionToBuffer(t,e,i,s){let n=e||t[me],r=this.templateStatic(t[te],e);t[te]=r,delete t[me];for(let o=0;o<t[j][he];o++){i.buffer+=r[0];for(let a=1;a<r.length;a++)this.dynamicToBuffer(t[j][o][a-1],n,i,s),i.buffer+=r[a]}if(t[xe]){let o=t[xe],[a,h,c,f]=o||[null,{},[],null];o!==void 0&&(t[j][he]>0||c.length>0||f)&&(delete t[xe],t[j]={[he]:0},i.streams.add(o))}}dynamicToBuffer(t,e,i,s){if(typeof t=="number"){let{buffer:n,streams:r}=this.recursiveCIDToString(i.components,t,i.onlyCids);i.buffer+=n,i.streams=new Set([...i.streams,...r])}else Ie(t)?this.toOutputBuffer(t,e,i,s,{}):i.buffer+=t}recursiveCIDToString(t,e,i){let s=t[e]||O(`no component for CID ${e}`,t),n={[le]:e,[Oe]:this.viewId},r=i&&!i.has(e);s.newRender=!r,s.magicId=`c${e}-${this.parentViewId()}`;let o=!s.reset,{buffer:a,streams:h}=this.recursiveToString(s,t,i,o,n);return delete s.reset,{buffer:a,streams:h}}},hi=[],li=200,Ts={exec(t,e,i,s,n,r){let[o,a]=r||[null,{callback:r&&r.callback}];(i.charAt(0)==="["?JSON.parse(i):[[o,a]]).forEach(([c,f])=>{c===o&&(f={...a,...f},f.callback=f.callback||a.callback),this.filterToEls(s.liveSocket,n,f).forEach(g=>{this[`exec_${c}`](t,e,i,s,n,g,f)})})},isVisible(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length>0)},isInViewport(t){let e=t.getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight,s=window.innerWidth||document.documentElement.clientWidth;return e.right>0&&e.bottom>0&&e.left<s&&e.top<i},exec_exec(t,e,i,s,n,r,{attr:o,to:a}){let h=r.getAttribute(o);if(!h)throw new Error(`expected ${o} to contain JS command on "${a}"`);s.liveSocket.execJS(r,h,e)},exec_dispatch(t,e,i,s,n,r,{event:o,detail:a,bubbles:h,blocking:c}){if(a=a||{},a.dispatcher=n,c){let f=new Promise((g,b)=>{a.done=g});s.liveSocket.asyncTransition(f)}u.dispatchEvent(r,o,{detail:a,bubbles:h})},exec_push(t,e,i,s,n,r,o){let{event:a,data:h,target:c,page_loading:f,loading:g,value:b,dispatcher:w,callback:p}=o,S={loading:g,value:b,target:c,page_loading:!!f,originalEvent:t},A=e==="change"&&w?w:n,$=c||A.getAttribute(s.binding("target"))||A,J=(T,R)=>{if(T.isConnected())if(e==="change"){let{newCid:L,_target:V}=o;V=V||(u.isFormInput(n)?n.name:void 0),V&&(S._target=V),T.pushInput(n,R,L,a||i,S,p)}else if(e==="submit"){let{submitter:L}=o;T.submitForm(n,R,a||i,L,S,p)}else T.pushEvent(e,n,R,a||i,h,S,p)};o.targetView&&o.targetCtx?J(o.targetView,o.targetCtx):s.withinTargets($,J)},exec_navigate(t,e,i,s,n,r,{href:o,replace:a}){s.liveSocket.historyRedirect(t,o,a?"replace":"push",null,n)},exec_patch(t,e,i,s,n,r,{href:o,replace:a}){s.liveSocket.pushHistoryPatch(t,o,a?"replace":"push",n)},exec_focus(t,e,i,s,n,r){ee.attemptFocus(r),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>ee.attemptFocus(r))})},exec_focus_first(t,e,i,s,n,r){ee.focusFirstInteractive(r)||ee.focusFirst(r),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>ee.focusFirstInteractive(r)||ee.focusFirst(r))})},exec_push_focus(t,e,i,s,n,r){hi.push(r||n)},exec_pop_focus(t,e,i,s,n,r){let o=hi.pop();o&&(o.focus(),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>o.focus())}))},exec_add_class(t,e,i,s,n,r,{names:o,transition:a,time:h,blocking:c}){this.addOrRemoveClasses(r,o,[],a,h,s,c)},exec_remove_class(t,e,i,s,n,r,{names:o,transition:a,time:h,blocking:c}){this.addOrRemoveClasses(r,[],o,a,h,s,c)},exec_toggle_class(t,e,i,s,n,r,{names:o,transition:a,time:h,blocking:c}){this.toggleClasses(r,o,a,h,s,c)},exec_toggle_attr(t,e,i,s,n,r,{attr:[o,a,h]}){this.toggleAttr(r,o,a,h)},exec_ignore_attrs(t,e,i,s,n,r,{attrs:o}){this.ignoreAttrs(r,o)},exec_transition(t,e,i,s,n,r,{time:o,transition:a,blocking:h}){this.addOrRemoveClasses(r,[],[],a,o,s,h)},exec_toggle(t,e,i,s,n,r,{display:o,ins:a,outs:h,time:c,blocking:f}){this.toggle(e,s,r,o,a,h,c,f)},exec_show(t,e,i,s,n,r,{display:o,transition:a,time:h,blocking:c}){this.show(e,s,r,o,a,h,c)},exec_hide(t,e,i,s,n,r,{display:o,transition:a,time:h,blocking:c}){this.hide(e,s,r,o,a,h,c)},exec_set_attr(t,e,i,s,n,r,{attr:[o,a]}){this.setOrRemoveAttrs(r,[[o,a]],[])},exec_remove_attr(t,e,i,s,n,r,{attr:o}){this.setOrRemoveAttrs(r,[],[o])},ignoreAttrs(t,e){u.putPrivate(t,"JS:ignore_attrs",{apply:(i,s)=>{let n=Array.from(i.attributes),r=n.map(o=>o.name);Array.from(s.attributes).filter(o=>!r.includes(o.name)).forEach(o=>{u.attributeIgnored(o,e)&&s.removeAttribute(o.name)}),n.forEach(o=>{u.attributeIgnored(o,e)&&s.setAttribute(o.name,o.value)})}})},onBeforeElUpdated(t,e){let i=u.private(t,"JS:ignore_attrs");i&&i.apply(t,e)},show(t,e,i,s,n,r,o){this.isVisible(i)||this.toggle(t,e,i,s,n,null,r,o)},hide(t,e,i,s,n,r,o){this.isVisible(i)&&this.toggle(t,e,i,s,null,n,r,o)},toggle(t,e,i,s,n,r,o,a){o=o||li;let[h,c,f]=n||[[],[],[]],[g,b,w]=r||[[],[],[]];if(h.length>0||g.length>0)if(this.isVisible(i)){let p=()=>{this.addOrRemoveClasses(i,b,h.concat(c).concat(f)),window.requestAnimationFrame(()=>{this.addOrRemoveClasses(i,g,[]),window.requestAnimationFrame(()=>this.addOrRemoveClasses(i,w,b))})},S=()=>{this.addOrRemoveClasses(i,[],g.concat(w)),u.putSticky(i,"toggle",A=>A.style.display="none"),i.dispatchEvent(new Event("phx:hide-end"))};i.dispatchEvent(new Event("phx:hide-start")),a===!1?(p(),setTimeout(S,o)):e.transition(o,p,S)}else{if(t==="remove")return;let p=()=>{this.addOrRemoveClasses(i,c,g.concat(b).concat(w));let A=s||this.defaultDisplay(i);window.requestAnimationFrame(()=>{this.addOrRemoveClasses(i,h,[]),window.requestAnimationFrame(()=>{u.putSticky(i,"toggle",$=>$.style.display=A),this.addOrRemoveClasses(i,f,c)})})},S=()=>{this.addOrRemoveClasses(i,[],h.concat(f)),i.dispatchEvent(new Event("phx:show-end"))};i.dispatchEvent(new Event("phx:show-start")),a===!1?(p(),setTimeout(S,o)):e.transition(o,p,S)}else this.isVisible(i)?window.requestAnimationFrame(()=>{i.dispatchEvent(new Event("phx:hide-start")),u.putSticky(i,"toggle",p=>p.style.display="none"),i.dispatchEvent(new Event("phx:hide-end"))}):window.requestAnimationFrame(()=>{i.dispatchEvent(new Event("phx:show-start"));let p=s||this.defaultDisplay(i);u.putSticky(i,"toggle",S=>S.style.display=p),i.dispatchEvent(new Event("phx:show-end"))})},toggleClasses(t,e,i,s,n,r){window.requestAnimationFrame(()=>{let[o,a]=u.getSticky(t,"classes",[[],[]]),h=e.filter(f=>o.indexOf(f)<0&&!t.classList.contains(f)),c=e.filter(f=>a.indexOf(f)<0&&t.classList.contains(f));this.addOrRemoveClasses(t,h,c,i,s,n,r)})},toggleAttr(t,e,i,s){t.hasAttribute(e)?s!==void 0?t.getAttribute(e)===i?this.setOrRemoveAttrs(t,[[e,s]],[]):this.setOrRemoveAttrs(t,[[e,i]],[]):this.setOrRemoveAttrs(t,[],[e]):this.setOrRemoveAttrs(t,[[e,i]],[])},addOrRemoveClasses(t,e,i,s,n,r,o){n=n||li;let[a,h,c]=s||[[],[],[]];if(a.length>0){let f=()=>{this.addOrRemoveClasses(t,h,[].concat(a).concat(c)),window.requestAnimationFrame(()=>{this.addOrRemoveClasses(t,a,[]),window.requestAnimationFrame(()=>this.addOrRemoveClasses(t,c,h))})},g=()=>this.addOrRemoveClasses(t,e.concat(c),i.concat(a).concat(h));o===!1?(f(),setTimeout(g,n)):r.transition(n,f,g);return}window.requestAnimationFrame(()=>{let[f,g]=u.getSticky(t,"classes",[[],[]]),b=e.filter(A=>f.indexOf(A)<0&&!t.classList.contains(A)),w=i.filter(A=>g.indexOf(A)<0&&t.classList.contains(A)),p=f.filter(A=>i.indexOf(A)<0).concat(b),S=g.filter(A=>e.indexOf(A)<0).concat(w);u.putSticky(t,"classes",A=>(A.classList.remove(...S),A.classList.add(...p),[p,S]))})},setOrRemoveAttrs(t,e,i){let[s,n]=u.getSticky(t,"attrs",[[],[]]),r=e.map(([h,c])=>h).concat(i),o=s.filter(([h,c])=>!r.includes(h)).concat(e),a=n.filter(h=>!r.includes(h)).concat(i);u.putSticky(t,"attrs",h=>(a.forEach(c=>h.removeAttribute(c)),o.forEach(([c,f])=>h.setAttribute(c,f)),[o,a]))},hasAllClasses(t,e){return e.every(i=>t.classList.contains(i))},isToggledOut(t,e){return!this.isVisible(t)||this.hasAllClasses(t,e)},filterToEls(t,e,{to:i}){let s=()=>{if(typeof i=="string")return document.querySelectorAll(i);if(i.closest){let n=e.closest(i.closest);return n?[n]:[]}else if(i.inner)return e.querySelectorAll(i.inner)};return i?t.jsQuerySelectorAll(e,i,s):[e]},defaultDisplay(t){return{tr:"table-row",td:"table-cell"}[t.tagName.toLowerCase()]||"block"},transitionClasses(t){if(!t)return null;let[e,i,s]=Array.isArray(t)?t:[t.split(" "),[],[]];return e=Array.isArray(e)?e:e.split(" "),i=Array.isArray(i)?i:i.split(" "),s=Array.isArray(s)?s:s.split(" "),[e,i,s]}},x=Ts,wi=(t,e)=>({exec(i,s){t.execJS(i,s,e)},show(i,s={}){let n=t.owner(i);x.show(e,n,i,s.display,x.transitionClasses(s.transition),s.time,s.blocking)},hide(i,s={}){let n=t.owner(i);x.hide(e,n,i,null,x.transitionClasses(s.transition),s.time,s.blocking)},toggle(i,s={}){let n=t.owner(i),r=x.transitionClasses(s.in),o=x.transitionClasses(s.out);x.toggle(e,n,i,s.display,r,o,s.time,s.blocking)},addClass(i,s,n={}){let r=Array.isArray(s)?s:s.split(" "),o=t.owner(i);x.addOrRemoveClasses(i,r,[],x.transitionClasses(n.transition),n.time,o,n.blocking)},removeClass(i,s,n={}){let r=Array.isArray(s)?s:s.split(" "),o=t.owner(i);x.addOrRemoveClasses(i,[],r,x.transitionClasses(n.transition),n.time,o,n.blocking)},toggleClass(i,s,n={}){let r=Array.isArray(s)?s:s.split(" "),o=t.owner(i);x.toggleClasses(i,r,x.transitionClasses(n.transition),n.time,o,n.blocking)},transition(i,s,n={}){let r=t.owner(i);x.addOrRemoveClasses(i,[],[],x.transitionClasses(s),n.time,r,n.blocking)},setAttribute(i,s,n){x.setOrRemoveAttrs(i,[[s,n]],[])},removeAttribute(i,s){x.setOrRemoveAttrs(i,[],[s])},toggleAttribute(i,s,n,r){x.toggleAttr(i,s,n,r)},push(i,s,n={}){t.withinOwners(i,r=>{let o=n.value||{};delete n.value;let a=new CustomEvent("phx:exec",{detail:{sourceElement:i}});x.exec(a,e,s,r,i,["push",{data:o,...n}])})},navigate(i,s={}){let n=new CustomEvent("phx:exec");t.historyRedirect(n,i,s.replace?"replace":"push",null,null)},patch(i,s={}){let n=new CustomEvent("phx:exec");t.pushHistoryPatch(n,i,s.replace?"replace":"push",null)},ignoreAttributes(i,s){x.ignoreAttrs(i,Array.isArray(s)?s:[s])}}),Et="hookId",ci="deadHook",_s=1,we=class yi{get liveSocket(){return this.__liveSocket()}static makeID(){return _s++}static elementID(e){return u.private(e,Et)}static deadHook(e){return u.private(e,ci)===!0}constructor(e,i,s){if(this.el=i,this.__attachView(e),this.__listeners=new Set,this.__isDisconnected=!1,u.putPrivate(this.el,Et,yi.makeID()),e&&e.isDead&&u.putPrivate(this.el,ci,!0),s){let n=new Set(["el","liveSocket","__view","__listeners","__isDisconnected","constructor","js","pushEvent","pushEventTo","handleEvent","removeHandleEvent","upload","uploadTo","__mounted","__updated","__beforeUpdate","__destroyed","__reconnected","__disconnected","__cleanup__"]);for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(this[o]=s[o],n.has(o)&&console.warn(`Hook object for element #${i.id} overwrites core property '${o}'!`));["mounted","beforeUpdate","updated","destroyed","disconnected","reconnected"].forEach(o=>{s[o]&&typeof s[o]=="function"&&(this[o]=s[o])})}}__attachView(e){e?(this.__view=()=>e,this.__liveSocket=()=>e.liveSocket):(this.__view=()=>{throw new Error(`hook not yet attached to a live view: ${this.el.outerHTML}`)},this.__liveSocket=()=>{throw new Error(`hook not yet attached to a live view: ${this.el.outerHTML}`)})}mounted(){}beforeUpdate(){}updated(){}destroyed(){}disconnected(){}reconnected(){}__mounted(){this.mounted()}__updated(){this.updated()}__beforeUpdate(){this.beforeUpdate()}__destroyed(){this.destroyed(),u.deletePrivate(this.el,Et)}__reconnected(){this.__isDisconnected&&(this.__isDisconnected=!1,this.reconnected())}__disconnected(){this.__isDisconnected=!0,this.disconnected()}js(){return{...wi(this.__view().liveSocket,"hook"),exec:e=>{this.__view().liveSocket.execJS(this.el,e,"hook")}}}pushEvent(e,i,s){let n=this.__view().pushHookEvent(this.el,null,e,i||{});if(s===void 0)return n.then(({reply:r})=>r);n.then(({reply:r,ref:o})=>s(r,o)).catch(()=>{})}pushEventTo(e,i,s,n){if(n===void 0){let r=[];this.__view().withinTargets(e,(a,h)=>{r.push({view:a,targetCtx:h})});let o=r.map(({view:a,targetCtx:h})=>a.pushHookEvent(this.el,h,i,s||{}));return Promise.allSettled(o)}this.__view().withinTargets(e,(r,o)=>{r.pushHookEvent(this.el,o,i,s||{}).then(({reply:a,ref:h})=>n(a,h)).catch(()=>{})})}handleEvent(e,i){let s={event:e,callback:n=>i(n.detail)};return window.addEventListener(`phx:${e}`,s.callback),this.__listeners.add(s),s}removeHandleEvent(e){window.removeEventListener(`phx:${e.event}`,e.callback),this.__listeners.delete(e)}upload(e,i){return this.__view().dispatchUploads(null,e,i)}uploadTo(e,i,s){return this.__view().withinTargets(e,(n,r)=>{n.dispatchUploads(r,i,s)})}__cleanup__(){this.__listeners.forEach(e=>this.removeHandleEvent(e))}},Ps=(t,e)=>{let i=t.endsWith("[]"),s=i?t.slice(0,-2):t;return s=s.replace(/([^\[\]]+)(\]?$)/,`${e}$1$2`),i&&(s+="[]"),s},ot=(t,e,i=[])=>{let{submitter:s}=e,n;if(s&&s.name){let f=document.createElement("input");f.type="hidden";let g=s.getAttribute("form");g&&f.setAttribute("form",g),f.name=s.name,f.value=s.value,s.parentElement.insertBefore(f,s),n=f}let r=new FormData(t),o=[];r.forEach((f,g,b)=>{f instanceof File&&o.push(g)}),o.forEach(f=>r.delete(f));let a=new URLSearchParams,{inputsUnused:h,onlyHiddenInputs:c}=Array.from(t.elements).reduce((f,g)=>{let{inputsUnused:b,onlyHiddenInputs:w}=f,p=g.name;if(!p)return f;b[p]===void 0&&(b[p]=!0),w[p]===void 0&&(w[p]=!0);let S=u.private(g,dt)||u.private(g,Xe),A=g.type==="hidden";return b[p]=b[p]&&!S,w[p]=w[p]&&A,f},{inputsUnused:{},onlyHiddenInputs:{}});for(let[f,g]of r.entries())if(i.length===0||i.indexOf(f)>=0){let b=h[f],w=c[f];b&&!(s&&s.name==f)&&!w&&a.append(Ps(f,"_unused_"),""),typeof g=="string"&&a.append(f,g)}return s&&n&&s.parentElement.removeChild(n),a.toString()},Rs=class Si{static closestView(e){let i=e.closest(ze);return i?u.private(i,"view"):null}constructor(e,i,s,n,r){this.isDead=!1,this.liveSocket=i,this.flash=n,this.parent=s,this.root=s?s.root:this,this.el=e;let o=u.private(this.el,"view");if(o!==void 0&&o.isDead!==!0)throw O(`The DOM element for this view has already been bound to a view.
+`
+              );
+            }
+            toRemove.push(childNode);
+          }
+        });
+        toRemove.forEach((childNode) => childNode.remove());
+      }
+    },
+    replaceRootContainer(container, tagName, attrs) {
+      const retainedAttrs = /* @__PURE__ */ new Set([
+        "id",
+        PHX_SESSION,
+        PHX_STATIC,
+        PHX_MAIN,
+        PHX_ROOT_ID
+      ]);
+      if (container.tagName.toLowerCase() === tagName.toLowerCase()) {
+        Array.from(container.attributes).filter((attr) => !retainedAttrs.has(attr.name.toLowerCase())).forEach((attr) => container.removeAttribute(attr.name));
+        Object.keys(attrs).filter((name) => !retainedAttrs.has(name.toLowerCase())).forEach((attr) => container.setAttribute(attr, attrs[attr]));
+        return container;
+      } else {
+        const newContainer = document.createElement(tagName);
+        Object.keys(attrs).forEach(
+          (attr) => newContainer.setAttribute(attr, attrs[attr])
+        );
+        retainedAttrs.forEach(
+          (attr) => newContainer.setAttribute(attr, container.getAttribute(attr))
+        );
+        newContainer.innerHTML = container.innerHTML;
+        container.replaceWith(newContainer);
+        return newContainer;
+      }
+    },
+    getSticky(el, name, defaultVal) {
+      const op = (DOM.private(el, "sticky") || []).find(
+        ([existingName]) => name === existingName
+      );
+      if (op) {
+        const [_name, _op, stashedResult] = op;
+        return stashedResult;
+      } else {
+        return typeof defaultVal === "function" ? defaultVal() : defaultVal;
+      }
+    },
+    deleteSticky(el, name) {
+      this.updatePrivate(el, "sticky", [], (ops) => {
+        return ops.filter(([existingName, _]) => existingName !== name);
+      });
+    },
+    putSticky(el, name, op) {
+      const stashedResult = op(el);
+      this.updatePrivate(el, "sticky", [], (ops) => {
+        const existingIndex = ops.findIndex(
+          ([existingName]) => name === existingName
+        );
+        if (existingIndex >= 0) {
+          ops[existingIndex] = [name, op, stashedResult];
+        } else {
+          ops.push([name, op, stashedResult]);
+        }
+        return ops;
+      });
+    },
+    applyStickyOperations(el) {
+      const ops = DOM.private(el, "sticky");
+      if (!ops) {
+        return;
+      }
+      ops.forEach(([name, op, _stashed]) => this.putSticky(el, name, op));
+    },
+    isLocked(el) {
+      return el.hasAttribute && el.hasAttribute(PHX_REF_LOCK);
+    },
+    attributeIgnored(attribute, ignoredAttributes) {
+      return ignoredAttributes.some(
+        (toIgnore) => attribute.name == toIgnore || toIgnore === "*" || toIgnore.includes("*") && attribute.name.match(toIgnore) != null
+      );
+    }
+  };
+  var dom_default = DOM;
+  var UploadEntry = class {
+    static isActive(fileEl, file) {
+      const isNew = file._phxRef === void 0;
+      const activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
+      const isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
+      return file.size > 0 && (isNew || isActive);
+    }
+    static isPreflighted(fileEl, file) {
+      const preflightedRefs = fileEl.getAttribute(PHX_PREFLIGHTED_REFS).split(",");
+      const isPreflighted = preflightedRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
+      return isPreflighted && this.isActive(fileEl, file);
+    }
+    static isPreflightInProgress(file) {
+      return file._preflightInProgress === true;
+    }
+    static markPreflightInProgress(file) {
+      file._preflightInProgress = true;
+    }
+    constructor(fileEl, file, view, autoUpload) {
+      this.ref = LiveUploader.genFileRef(file);
+      this.fileEl = fileEl;
+      this.file = file;
+      this.view = view;
+      this.meta = null;
+      this._isCancelled = false;
+      this._isDone = false;
+      this._progress = 0;
+      this._lastProgressSent = -1;
+      this._onDone = function() {
+      };
+      this._onElUpdated = this.onElUpdated.bind(this);
+      this.fileEl.addEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
+      this.autoUpload = autoUpload;
+    }
+    metadata() {
+      return this.meta;
+    }
+    progress(progress) {
+      this._progress = Math.floor(progress);
+      if (this._progress > this._lastProgressSent) {
+        if (this._progress >= 100) {
+          this._progress = 100;
+          this._lastProgressSent = 100;
+          this._isDone = true;
+          this.view.pushFileProgress(this.fileEl, this.ref, 100, () => {
+            LiveUploader.untrackFile(this.fileEl, this.file);
+            this._onDone();
+          });
+        } else {
+          this._lastProgressSent = this._progress;
+          this.view.pushFileProgress(this.fileEl, this.ref, this._progress);
+        }
+      }
+    }
+    isCancelled() {
+      return this._isCancelled;
+    }
+    cancel() {
+      this.file._preflightInProgress = false;
+      this._isCancelled = true;
+      this._isDone = true;
+      this._onDone();
+    }
+    isDone() {
+      return this._isDone;
+    }
+    error(reason = "failed") {
+      this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
+      this.view.pushFileProgress(this.fileEl, this.ref, { error: reason });
+      if (!this.isAutoUpload()) {
+        LiveUploader.clearFiles(this.fileEl);
+      }
+    }
+    isAutoUpload() {
+      return this.autoUpload;
+    }
+    //private
+    onDone(callback) {
+      this._onDone = () => {
+        this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
+        callback();
+      };
+    }
+    onElUpdated() {
+      const activeRefs = this.fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
+      if (activeRefs.indexOf(this.ref) === -1) {
+        LiveUploader.untrackFile(this.fileEl, this.file);
+        this.cancel();
+      }
+    }
+    toPreflightPayload() {
+      return {
+        last_modified: this.file.lastModified,
+        name: this.file.name,
+        relative_path: this.file.webkitRelativePath,
+        size: this.file.size,
+        type: this.file.type,
+        ref: this.ref,
+        meta: typeof this.file.meta === "function" ? this.file.meta() : void 0
+      };
+    }
+    uploader(uploaders) {
+      if (this.meta.uploader) {
+        const callback = uploaders[this.meta.uploader] || logError(`no uploader configured for ${this.meta.uploader}`);
+        return { name: this.meta.uploader, callback };
+      } else {
+        return { name: "channel", callback: channelUploader };
+      }
+    }
+    zipPostFlight(resp) {
+      this.meta = resp.entries[this.ref];
+      if (!this.meta) {
+        logError(`no preflight upload response returned with ref ${this.ref}`, {
+          input: this.fileEl,
+          response: resp
+        });
+      }
+    }
+  };
+  var liveUploaderFileRef = 0;
+  var LiveUploader = class _LiveUploader {
+    static genFileRef(file) {
+      const ref = file._phxRef;
+      if (ref !== void 0) {
+        return ref;
+      } else {
+        file._phxRef = (liveUploaderFileRef++).toString();
+        return file._phxRef;
+      }
+    }
+    static getEntryDataURL(inputEl, ref, callback) {
+      const file = this.activeFiles(inputEl).find(
+        (file2) => this.genFileRef(file2) === ref
+      );
+      callback(URL.createObjectURL(file));
+    }
+    static hasUploadsInProgress(formEl) {
+      let active = 0;
+      dom_default.findUploadInputs(formEl).forEach((input) => {
+        if (input.getAttribute(PHX_PREFLIGHTED_REFS) !== input.getAttribute(PHX_DONE_REFS)) {
+          active++;
+        }
+      });
+      return active > 0;
+    }
+    static serializeUploads(inputEl) {
+      const files = this.activeFiles(inputEl);
+      const fileData = {};
+      files.forEach((file) => {
+        const entry = { path: inputEl.name };
+        const uploadRef = inputEl.getAttribute(PHX_UPLOAD_REF);
+        fileData[uploadRef] = fileData[uploadRef] || [];
+        entry.ref = this.genFileRef(file);
+        entry.last_modified = file.lastModified;
+        entry.name = file.name || entry.ref;
+        entry.relative_path = file.webkitRelativePath;
+        entry.type = file.type;
+        entry.size = file.size;
+        if (typeof file.meta === "function") {
+          entry.meta = file.meta();
+        }
+        fileData[uploadRef].push(entry);
+      });
+      return fileData;
+    }
+    static clearFiles(inputEl) {
+      inputEl.value = null;
+      inputEl.removeAttribute(PHX_UPLOAD_REF);
+      dom_default.putPrivate(inputEl, "files", []);
+    }
+    static untrackFile(inputEl, file) {
+      dom_default.putPrivate(
+        inputEl,
+        "files",
+        dom_default.private(inputEl, "files").filter((f) => !Object.is(f, file))
+      );
+    }
+    /**
+     * @param {HTMLInputElement} inputEl
+     * @param {Array<File|Blob>} files
+     * @param {DataTransfer} [dataTransfer]
+     */
+    static trackFiles(inputEl, files, dataTransfer) {
+      if (inputEl.getAttribute("multiple") !== null) {
+        const newFiles = files.filter(
+          (file) => !this.activeFiles(inputEl).find((f) => Object.is(f, file))
+        );
+        dom_default.updatePrivate(
+          inputEl,
+          "files",
+          [],
+          (existing) => existing.concat(newFiles)
+        );
+        inputEl.value = null;
+      } else {
+        if (dataTransfer && dataTransfer.files.length > 0) {
+          inputEl.files = dataTransfer.files;
+        }
+        dom_default.putPrivate(inputEl, "files", files);
+      }
+    }
+    static activeFileInputs(formEl) {
+      const fileInputs = dom_default.findUploadInputs(formEl);
+      return Array.from(fileInputs).filter(
+        (el) => el.files && this.activeFiles(el).length > 0
+      );
+    }
+    static activeFiles(input) {
+      return (dom_default.private(input, "files") || []).filter(
+        (f) => UploadEntry.isActive(input, f)
+      );
+    }
+    static inputsAwaitingPreflight(formEl) {
+      const fileInputs = dom_default.findUploadInputs(formEl);
+      return Array.from(fileInputs).filter(
+        (input) => this.filesAwaitingPreflight(input).length > 0
+      );
+    }
+    static filesAwaitingPreflight(input) {
+      return this.activeFiles(input).filter(
+        (f) => !UploadEntry.isPreflighted(input, f) && !UploadEntry.isPreflightInProgress(f)
+      );
+    }
+    static markPreflightInProgress(entries) {
+      entries.forEach((entry) => UploadEntry.markPreflightInProgress(entry.file));
+    }
+    constructor(inputEl, view, onComplete) {
+      this.autoUpload = dom_default.isAutoUpload(inputEl);
+      this.view = view;
+      this.onComplete = onComplete;
+      this._entries = Array.from(
+        _LiveUploader.filesAwaitingPreflight(inputEl) || []
+      ).map((file) => new UploadEntry(inputEl, file, view, this.autoUpload));
+      _LiveUploader.markPreflightInProgress(this._entries);
+      this.numEntriesInProgress = this._entries.length;
+    }
+    isAutoUpload() {
+      return this.autoUpload;
+    }
+    entries() {
+      return this._entries;
+    }
+    initAdapterUpload(resp, onError, liveSocket) {
+      this._entries = this._entries.map((entry) => {
+        if (entry.isCancelled()) {
+          this.numEntriesInProgress--;
+          if (this.numEntriesInProgress === 0) {
+            this.onComplete();
+          }
+        } else {
+          entry.zipPostFlight(resp);
+          entry.onDone(() => {
+            this.numEntriesInProgress--;
+            if (this.numEntriesInProgress === 0) {
+              this.onComplete();
+            }
+          });
+        }
+        return entry;
+      });
+      const groupedEntries = this._entries.reduce((acc, entry) => {
+        if (!entry.meta) {
+          return acc;
+        }
+        const { name, callback } = entry.uploader(liveSocket.uploaders);
+        acc[name] = acc[name] || { callback, entries: [] };
+        acc[name].entries.push(entry);
+        return acc;
+      }, {});
+      for (const name in groupedEntries) {
+        const { callback, entries } = groupedEntries[name];
+        callback(entries, onError, resp, liveSocket);
+      }
+    }
+  };
+  var ARIA = {
+    anyOf(instance, classes) {
+      return classes.find((name) => instance instanceof name);
+    },
+    isFocusable(el, interactiveOnly) {
+      return el instanceof HTMLAnchorElement && el.rel !== "ignore" || el instanceof HTMLAreaElement && el.href !== void 0 || !el.disabled && this.anyOf(el, [
+        HTMLInputElement,
+        HTMLSelectElement,
+        HTMLTextAreaElement,
+        HTMLButtonElement
+      ]) || el instanceof HTMLIFrameElement || el.tabIndex >= 0 && el.getAttribute("aria-hidden") !== "true" || !interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true";
+    },
+    attemptFocus(el, interactiveOnly) {
+      if (this.isFocusable(el, interactiveOnly)) {
+        try {
+          el.focus();
+        } catch {
+        }
+      }
+      return !!document.activeElement && document.activeElement.isSameNode(el);
+    },
+    focusFirstInteractive(el) {
+      let child = el.firstElementChild;
+      while (child) {
+        if (this.attemptFocus(child, true) || this.focusFirstInteractive(child)) {
+          return true;
+        }
+        child = child.nextElementSibling;
+      }
+    },
+    focusFirst(el) {
+      let child = el.firstElementChild;
+      while (child) {
+        if (this.attemptFocus(child) || this.focusFirst(child)) {
+          return true;
+        }
+        child = child.nextElementSibling;
+      }
+    },
+    focusLast(el) {
+      let child = el.lastElementChild;
+      while (child) {
+        if (this.attemptFocus(child) || this.focusLast(child)) {
+          return true;
+        }
+        child = child.previousElementSibling;
+      }
+    }
+  };
+  var aria_default = ARIA;
+  var Hooks = {
+    LiveFileUpload: {
+      activeRefs() {
+        return this.el.getAttribute(PHX_ACTIVE_ENTRY_REFS);
+      },
+      preflightedRefs() {
+        return this.el.getAttribute(PHX_PREFLIGHTED_REFS);
+      },
+      mounted() {
+        this.js().ignoreAttributes(this.el, ["value"]);
+        this.preflightedWas = this.preflightedRefs();
+      },
+      updated() {
+        const newPreflights = this.preflightedRefs();
+        if (this.preflightedWas !== newPreflights) {
+          this.preflightedWas = newPreflights;
+          if (newPreflights === "") {
+            this.__view().cancelSubmit(this.el.form);
+          }
+        }
+        if (this.activeRefs() === "") {
+          this.el.value = null;
+        }
+        this.el.dispatchEvent(new CustomEvent(PHX_LIVE_FILE_UPDATED));
+      }
+    },
+    LiveImgPreview: {
+      mounted() {
+        this.ref = this.el.getAttribute("data-phx-entry-ref");
+        this.inputEl = document.getElementById(
+          this.el.getAttribute(PHX_UPLOAD_REF)
+        );
+        LiveUploader.getEntryDataURL(this.inputEl, this.ref, (url) => {
+          this.url = url;
+          this.el.src = url;
+        });
+      },
+      destroyed() {
+        URL.revokeObjectURL(this.url);
+      }
+    },
+    FocusWrap: {
+      mounted() {
+        this.focusStart = this.el.firstElementChild;
+        this.focusEnd = this.el.lastElementChild;
+        this.focusStart.addEventListener("focus", (e) => {
+          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+            const nextFocus = e.target.nextElementSibling;
+            aria_default.attemptFocus(nextFocus) || aria_default.focusFirst(nextFocus);
+          } else {
+            aria_default.focusLast(this.el);
+          }
+        });
+        this.focusEnd.addEventListener("focus", (e) => {
+          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+            const nextFocus = e.target.previousElementSibling;
+            aria_default.attemptFocus(nextFocus) || aria_default.focusLast(nextFocus);
+          } else {
+            aria_default.focusFirst(this.el);
+          }
+        });
+        if (!this.el.contains(document.activeElement)) {
+          this.el.addEventListener("phx:show-end", () => this.el.focus());
+          if (window.getComputedStyle(this.el).display !== "none") {
+            aria_default.focusFirst(this.el);
+          }
+        }
+      }
+    }
+  };
+  var findScrollContainer = (el) => {
+    if (["HTML", "BODY"].indexOf(el.nodeName.toUpperCase()) >= 0)
+      return null;
+    if (["scroll", "auto"].indexOf(getComputedStyle(el).overflowY) >= 0)
+      return el;
+    return findScrollContainer(el.parentElement);
+  };
+  var scrollTop = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.scrollTop;
+    } else {
+      return document.documentElement.scrollTop || document.body.scrollTop;
+    }
+  };
+  var bottom = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.getBoundingClientRect().bottom;
+    } else {
+      return window.innerHeight || document.documentElement.clientHeight;
+    }
+  };
+  var top = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.getBoundingClientRect().top;
+    } else {
+      return 0;
+    }
+  };
+  var isAtViewportTop = (el, scrollContainer) => {
+    const rect = el.getBoundingClientRect();
+    return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);
+  };
+  var isAtViewportBottom = (el, scrollContainer) => {
+    const rect = el.getBoundingClientRect();
+    return Math.ceil(rect.bottom) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.bottom) <= bottom(scrollContainer);
+  };
+  var isWithinViewport = (el, scrollContainer) => {
+    const rect = el.getBoundingClientRect();
+    return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);
+  };
+  Hooks.InfiniteScroll = {
+    mounted() {
+      this.scrollContainer = findScrollContainer(this.el);
+      let scrollBefore = scrollTop(this.scrollContainer);
+      let topOverran = false;
+      const throttleInterval = 500;
+      let pendingOp = null;
+      const onTopOverrun = this.throttle(
+        throttleInterval,
+        (topEvent, firstChild) => {
+          pendingOp = () => true;
+          this.liveSocket.js().push(this.el, topEvent, {
+            value: { id: firstChild.id, _overran: true },
+            callback: () => {
+              pendingOp = null;
+            }
+          });
+        }
+      );
+      const onFirstChildAtTop = this.throttle(
+        throttleInterval,
+        (topEvent, firstChild) => {
+          pendingOp = () => firstChild.scrollIntoView({ block: "start" });
+          this.liveSocket.js().push(this.el, topEvent, {
+            value: { id: firstChild.id },
+            callback: () => {
+              pendingOp = null;
+              window.requestAnimationFrame(() => {
+                if (!isWithinViewport(firstChild, this.scrollContainer)) {
+                  firstChild.scrollIntoView({ block: "start" });
+                }
+              });
+            }
+          });
+        }
+      );
+      const onLastChildAtBottom = this.throttle(
+        throttleInterval,
+        (bottomEvent, lastChild) => {
+          pendingOp = () => lastChild.scrollIntoView({ block: "end" });
+          this.liveSocket.js().push(this.el, bottomEvent, {
+            value: { id: lastChild.id },
+            callback: () => {
+              pendingOp = null;
+              window.requestAnimationFrame(() => {
+                if (!isWithinViewport(lastChild, this.scrollContainer)) {
+                  lastChild.scrollIntoView({ block: "end" });
+                }
+              });
+            }
+          });
+        }
+      );
+      this.onScroll = (_e) => {
+        const scrollNow = scrollTop(this.scrollContainer);
+        if (pendingOp) {
+          scrollBefore = scrollNow;
+          return pendingOp();
+        }
+        const rect = this.findOverrunTarget();
+        const topEvent = this.el.getAttribute(
+          this.liveSocket.binding("viewport-top")
+        );
+        const bottomEvent = this.el.getAttribute(
+          this.liveSocket.binding("viewport-bottom")
+        );
+        const lastChild = this.el.lastElementChild;
+        const firstChild = this.el.firstElementChild;
+        const isScrollingUp = scrollNow < scrollBefore;
+        const isScrollingDown = scrollNow > scrollBefore;
+        if (isScrollingUp && topEvent && !topOverran && rect.top >= 0) {
+          topOverran = true;
+          onTopOverrun(topEvent, firstChild);
+        } else if (isScrollingDown && topOverran && rect.top <= 0) {
+          topOverran = false;
+        }
+        if (topEvent && isScrollingUp && isAtViewportTop(firstChild, this.scrollContainer)) {
+          onFirstChildAtTop(topEvent, firstChild);
+        } else if (bottomEvent && isScrollingDown && isAtViewportBottom(lastChild, this.scrollContainer)) {
+          onLastChildAtBottom(bottomEvent, lastChild);
+        }
+        scrollBefore = scrollNow;
+      };
+      if (this.scrollContainer) {
+        this.scrollContainer.addEventListener("scroll", this.onScroll);
+      } else {
+        window.addEventListener("scroll", this.onScroll);
+      }
+    },
+    destroyed() {
+      if (this.scrollContainer) {
+        this.scrollContainer.removeEventListener("scroll", this.onScroll);
+      } else {
+        window.removeEventListener("scroll", this.onScroll);
+      }
+    },
+    throttle(interval, callback) {
+      let lastCallAt = 0;
+      let timer;
+      return (...args) => {
+        const now = Date.now();
+        const remainingTime = interval - (now - lastCallAt);
+        if (remainingTime <= 0 || remainingTime > interval) {
+          if (timer) {
+            clearTimeout(timer);
+            timer = null;
+          }
+          lastCallAt = now;
+          callback(...args);
+        } else if (!timer) {
+          timer = setTimeout(() => {
+            lastCallAt = Date.now();
+            timer = null;
+            callback(...args);
+          }, remainingTime);
+        }
+      };
+    },
+    findOverrunTarget() {
+      let rect;
+      const overrunTarget = this.el.getAttribute(
+        this.liveSocket.binding(PHX_VIEWPORT_OVERRUN_TARGET)
+      );
+      if (overrunTarget) {
+        const overrunEl = document.getElementById(overrunTarget);
+        if (overrunEl) {
+          rect = overrunEl.getBoundingClientRect();
+        } else {
+          throw new Error("did not find element with id " + overrunTarget);
+        }
+      } else {
+        rect = this.el.getBoundingClientRect();
+      }
+      return rect;
+    }
+  };
+  var hooks_default = Hooks;
+  var ElementRef = class {
+    static onUnlock(el, callback) {
+      if (!dom_default.isLocked(el) && !el.closest(`[${PHX_REF_LOCK}]`)) {
+        return callback();
+      }
+      const closestLock = el.closest(`[${PHX_REF_LOCK}]`);
+      const ref = closestLock.closest(`[${PHX_REF_LOCK}]`).getAttribute(PHX_REF_LOCK);
+      closestLock.addEventListener(
+        `phx:undo-lock:${ref}`,
+        () => {
+          callback();
+        },
+        { once: true }
+      );
+    }
+    constructor(el) {
+      this.el = el;
+      this.loadingRef = el.hasAttribute(PHX_REF_LOADING) ? parseInt(el.getAttribute(PHX_REF_LOADING), 10) : null;
+      this.lockRef = el.hasAttribute(PHX_REF_LOCK) ? parseInt(el.getAttribute(PHX_REF_LOCK), 10) : null;
+    }
+    // public
+    maybeUndo(ref, phxEvent, eachCloneCallback) {
+      if (!this.isWithin(ref)) {
+        dom_default.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {
+          pendingRefs.push(ref);
+          return pendingRefs;
+        });
+        return;
+      }
+      this.undoLocks(ref, phxEvent, eachCloneCallback);
+      this.undoLoading(ref, phxEvent);
+      dom_default.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {
+        return pendingRefs.filter((pendingRef) => {
+          let opts = {
+            detail: { ref: pendingRef, event: phxEvent },
+            bubbles: true,
+            cancelable: false
+          };
+          if (this.loadingRef && this.loadingRef > pendingRef) {
+            this.el.dispatchEvent(
+              new CustomEvent(`phx:undo-loading:${pendingRef}`, opts)
+            );
+          }
+          if (this.lockRef && this.lockRef > pendingRef) {
+            this.el.dispatchEvent(
+              new CustomEvent(`phx:undo-lock:${pendingRef}`, opts)
+            );
+          }
+          return pendingRef > ref;
+        });
+      });
+      if (this.isFullyResolvedBy(ref)) {
+        this.el.removeAttribute(PHX_REF_SRC);
+      }
+    }
+    // private
+    isWithin(ref) {
+      return !(this.loadingRef !== null && this.loadingRef > ref && this.lockRef !== null && this.lockRef > ref);
+    }
+    // Check for cloned PHX_REF_LOCK element that has been morphed behind
+    // the scenes while this element was locked in the DOM.
+    // When we apply the cloned tree to the active DOM element, we must
+    //
+    //   1. execute pending mounted hooks for nodes now in the DOM
+    //   2. undo any ref inside the cloned tree that has since been ack'd
+    undoLocks(ref, phxEvent, eachCloneCallback) {
+      if (!this.isLockUndoneBy(ref)) {
+        return;
+      }
+      const clonedTree = dom_default.private(this.el, PHX_REF_LOCK);
+      if (clonedTree) {
+        eachCloneCallback(clonedTree);
+        dom_default.deletePrivate(this.el, PHX_REF_LOCK);
+      }
+      this.el.removeAttribute(PHX_REF_LOCK);
+      const opts = {
+        detail: { ref, event: phxEvent },
+        bubbles: true,
+        cancelable: false
+      };
+      this.el.dispatchEvent(
+        new CustomEvent(`phx:undo-lock:${this.lockRef}`, opts)
+      );
+    }
+    undoLoading(ref, phxEvent) {
+      if (!this.isLoadingUndoneBy(ref)) {
+        if (this.canUndoLoading(ref) && this.el.classList.contains("phx-submit-loading")) {
+          this.el.classList.remove("phx-change-loading");
+        }
+        return;
+      }
+      if (this.canUndoLoading(ref)) {
+        this.el.removeAttribute(PHX_REF_LOADING);
+        const disabledVal = this.el.getAttribute(PHX_DISABLED);
+        const readOnlyVal = this.el.getAttribute(PHX_READONLY);
+        if (readOnlyVal !== null) {
+          this.el.readOnly = readOnlyVal === "true" ? true : false;
+          this.el.removeAttribute(PHX_READONLY);
+        }
+        if (disabledVal !== null) {
+          this.el.disabled = disabledVal === "true" ? true : false;
+          this.el.removeAttribute(PHX_DISABLED);
+        }
+        const disableRestore = this.el.getAttribute(PHX_DISABLE_WITH_RESTORE);
+        if (disableRestore !== null) {
+          this.el.textContent = disableRestore;
+          this.el.removeAttribute(PHX_DISABLE_WITH_RESTORE);
+        }
+        const opts = {
+          detail: { ref, event: phxEvent },
+          bubbles: true,
+          cancelable: false
+        };
+        this.el.dispatchEvent(
+          new CustomEvent(`phx:undo-loading:${this.loadingRef}`, opts)
+        );
+      }
+      PHX_EVENT_CLASSES.forEach((name) => {
+        if (name !== "phx-submit-loading" || this.canUndoLoading(ref)) {
+          dom_default.removeClass(this.el, name);
+        }
+      });
+    }
+    isLoadingUndoneBy(ref) {
+      return this.loadingRef === null ? false : this.loadingRef <= ref;
+    }
+    isLockUndoneBy(ref) {
+      return this.lockRef === null ? false : this.lockRef <= ref;
+    }
+    isFullyResolvedBy(ref) {
+      return (this.loadingRef === null || this.loadingRef <= ref) && (this.lockRef === null || this.lockRef <= ref);
+    }
+    // only remove the phx-submit-loading class if we are not locked
+    canUndoLoading(ref) {
+      return this.lockRef === null || this.lockRef <= ref;
+    }
+  };
+  var DOMPostMorphRestorer = class {
+    constructor(containerBefore, containerAfter, updateType) {
+      const idsBefore = /* @__PURE__ */ new Set();
+      const idsAfter = new Set(
+        [...containerAfter.children].map((child) => child.id)
+      );
+      const elementsToModify = [];
+      Array.from(containerBefore.children).forEach((child) => {
+        if (child.id) {
+          idsBefore.add(child.id);
+          if (idsAfter.has(child.id)) {
+            const previousElementId = child.previousElementSibling && child.previousElementSibling.id;
+            elementsToModify.push({
+              elementId: child.id,
+              previousElementId
+            });
+          }
+        }
+      });
+      this.containerId = containerAfter.id;
+      this.updateType = updateType;
+      this.elementsToModify = elementsToModify;
+      this.elementIdsToAdd = [...idsAfter].filter((id) => !idsBefore.has(id));
+    }
+    // We do the following to optimize append/prepend operations:
+    //   1) Track ids of modified elements & of new elements
+    //   2) All the modified elements are put back in the correct position in the DOM tree
+    //      by storing the id of their previous sibling
+    //   3) New elements are going to be put in the right place by morphdom during append.
+    //      For prepend, we move them to the first position in the container
+    perform() {
+      const container = dom_default.byId(this.containerId);
+      if (!container) {
+        return;
+      }
+      this.elementsToModify.forEach((elementToModify) => {
+        if (elementToModify.previousElementId) {
+          maybe(
+            document.getElementById(elementToModify.previousElementId),
+            (previousElem) => {
+              maybe(
+                document.getElementById(elementToModify.elementId),
+                (elem) => {
+                  const isInRightPlace = elem.previousElementSibling && elem.previousElementSibling.id == previousElem.id;
+                  if (!isInRightPlace) {
+                    previousElem.insertAdjacentElement("afterend", elem);
+                  }
+                }
+              );
+            }
+          );
+        } else {
+          maybe(document.getElementById(elementToModify.elementId), (elem) => {
+            const isInRightPlace = elem.previousElementSibling == null;
+            if (!isInRightPlace) {
+              container.insertAdjacentElement("afterbegin", elem);
+            }
+          });
+        }
+      });
+      if (this.updateType == "prepend") {
+        this.elementIdsToAdd.reverse().forEach((elemId) => {
+          maybe(
+            document.getElementById(elemId),
+            (elem) => container.insertAdjacentElement("afterbegin", elem)
+          );
+        });
+      }
+    }
+  };
+  var DOCUMENT_FRAGMENT_NODE = 11;
+  function morphAttrs(fromNode, toNode) {
+    var toNodeAttrs = toNode.attributes;
+    var attr;
+    var attrName;
+    var attrNamespaceURI;
+    var attrValue;
+    var fromValue;
+    if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
+      return;
+    }
+    for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
+      attr = toNodeAttrs[i];
+      attrName = attr.name;
+      attrNamespaceURI = attr.namespaceURI;
+      attrValue = attr.value;
+      if (attrNamespaceURI) {
+        attrName = attr.localName || attrName;
+        fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
+        if (fromValue !== attrValue) {
+          if (attr.prefix === "xmlns") {
+            attrName = attr.name;
+          }
+          fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
+        }
+      } else {
+        fromValue = fromNode.getAttribute(attrName);
+        if (fromValue !== attrValue) {
+          fromNode.setAttribute(attrName, attrValue);
+        }
+      }
+    }
+    var fromNodeAttrs = fromNode.attributes;
+    for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
+      attr = fromNodeAttrs[d];
+      attrName = attr.name;
+      attrNamespaceURI = attr.namespaceURI;
+      if (attrNamespaceURI) {
+        attrName = attr.localName || attrName;
+        if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
+          fromNode.removeAttributeNS(attrNamespaceURI, attrName);
+        }
+      } else {
+        if (!toNode.hasAttribute(attrName)) {
+          fromNode.removeAttribute(attrName);
+        }
+      }
+    }
+  }
+  var range;
+  var NS_XHTML = "http://www.w3.org/1999/xhtml";
+  var doc = typeof document === "undefined" ? void 0 : document;
+  var HAS_TEMPLATE_SUPPORT = !!doc && "content" in doc.createElement("template");
+  var HAS_RANGE_SUPPORT = !!doc && doc.createRange && "createContextualFragment" in doc.createRange();
+  function createFragmentFromTemplate(str) {
+    var template = doc.createElement("template");
+    template.innerHTML = str;
+    return template.content.childNodes[0];
+  }
+  function createFragmentFromRange(str) {
+    if (!range) {
+      range = doc.createRange();
+      range.selectNode(doc.body);
+    }
+    var fragment = range.createContextualFragment(str);
+    return fragment.childNodes[0];
+  }
+  function createFragmentFromWrap(str) {
+    var fragment = doc.createElement("body");
+    fragment.innerHTML = str;
+    return fragment.childNodes[0];
+  }
+  function toElement(str) {
+    str = str.trim();
+    if (HAS_TEMPLATE_SUPPORT) {
+      return createFragmentFromTemplate(str);
+    } else if (HAS_RANGE_SUPPORT) {
+      return createFragmentFromRange(str);
+    }
+    return createFragmentFromWrap(str);
+  }
+  function compareNodeNames(fromEl, toEl) {
+    var fromNodeName = fromEl.nodeName;
+    var toNodeName = toEl.nodeName;
+    var fromCodeStart, toCodeStart;
+    if (fromNodeName === toNodeName) {
+      return true;
+    }
+    fromCodeStart = fromNodeName.charCodeAt(0);
+    toCodeStart = toNodeName.charCodeAt(0);
+    if (fromCodeStart <= 90 && toCodeStart >= 97) {
+      return fromNodeName === toNodeName.toUpperCase();
+    } else if (toCodeStart <= 90 && fromCodeStart >= 97) {
+      return toNodeName === fromNodeName.toUpperCase();
+    } else {
+      return false;
+    }
+  }
+  function createElementNS(name, namespaceURI) {
+    return !namespaceURI || namespaceURI === NS_XHTML ? doc.createElement(name) : doc.createElementNS(namespaceURI, name);
+  }
+  function moveChildren(fromEl, toEl) {
+    var curChild = fromEl.firstChild;
+    while (curChild) {
+      var nextChild = curChild.nextSibling;
+      toEl.appendChild(curChild);
+      curChild = nextChild;
+    }
+    return toEl;
+  }
+  function syncBooleanAttrProp(fromEl, toEl, name) {
+    if (fromEl[name] !== toEl[name]) {
+      fromEl[name] = toEl[name];
+      if (fromEl[name]) {
+        fromEl.setAttribute(name, "");
+      } else {
+        fromEl.removeAttribute(name);
+      }
+    }
+  }
+  var specialElHandlers = {
+    OPTION: function(fromEl, toEl) {
+      var parentNode = fromEl.parentNode;
+      if (parentNode) {
+        var parentName = parentNode.nodeName.toUpperCase();
+        if (parentName === "OPTGROUP") {
+          parentNode = parentNode.parentNode;
+          parentName = parentNode && parentNode.nodeName.toUpperCase();
+        }
+        if (parentName === "SELECT" && !parentNode.hasAttribute("multiple")) {
+          if (fromEl.hasAttribute("selected") && !toEl.selected) {
+            fromEl.setAttribute("selected", "selected");
+            fromEl.removeAttribute("selected");
+          }
+          parentNode.selectedIndex = -1;
+        }
+      }
+      syncBooleanAttrProp(fromEl, toEl, "selected");
+    },
+    /**
+     * The "value" attribute is special for the <input> element since it sets
+     * the initial value. Changing the "value" attribute without changing the
+     * "value" property will have no effect since it is only used to the set the
+     * initial value.  Similar for the "checked" attribute, and "disabled".
+     */
+    INPUT: function(fromEl, toEl) {
+      syncBooleanAttrProp(fromEl, toEl, "checked");
+      syncBooleanAttrProp(fromEl, toEl, "disabled");
+      if (fromEl.value !== toEl.value) {
+        fromEl.value = toEl.value;
+      }
+      if (!toEl.hasAttribute("value")) {
+        fromEl.removeAttribute("value");
+      }
+    },
+    TEXTAREA: function(fromEl, toEl) {
+      var newValue = toEl.value;
+      if (fromEl.value !== newValue) {
+        fromEl.value = newValue;
+      }
+      var firstChild = fromEl.firstChild;
+      if (firstChild) {
+        var oldValue = firstChild.nodeValue;
+        if (oldValue == newValue || !newValue && oldValue == fromEl.placeholder) {
+          return;
+        }
+        firstChild.nodeValue = newValue;
+      }
+    },
+    SELECT: function(fromEl, toEl) {
+      if (!toEl.hasAttribute("multiple")) {
+        var selectedIndex = -1;
+        var i = 0;
+        var curChild = fromEl.firstChild;
+        var optgroup;
+        var nodeName;
+        while (curChild) {
+          nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();
+          if (nodeName === "OPTGROUP") {
+            optgroup = curChild;
+            curChild = optgroup.firstChild;
+            if (!curChild) {
+              curChild = optgroup.nextSibling;
+              optgroup = null;
+            }
+          } else {
+            if (nodeName === "OPTION") {
+              if (curChild.hasAttribute("selected")) {
+                selectedIndex = i;
+                break;
+              }
+              i++;
+            }
+            curChild = curChild.nextSibling;
+            if (!curChild && optgroup) {
+              curChild = optgroup.nextSibling;
+              optgroup = null;
+            }
+          }
+        }
+        fromEl.selectedIndex = selectedIndex;
+      }
+    }
+  };
+  var ELEMENT_NODE = 1;
+  var DOCUMENT_FRAGMENT_NODE$1 = 11;
+  var TEXT_NODE = 3;
+  var COMMENT_NODE = 8;
+  function noop() {
+  }
+  function defaultGetNodeKey(node) {
+    if (node) {
+      return node.getAttribute && node.getAttribute("id") || node.id;
+    }
+  }
+  function morphdomFactory(morphAttrs2) {
+    return function morphdom2(fromNode, toNode, options) {
+      if (!options) {
+        options = {};
+      }
+      if (typeof toNode === "string") {
+        if (fromNode.nodeName === "#document" || fromNode.nodeName === "HTML") {
+          var toNodeHtml = toNode;
+          toNode = doc.createElement("html");
+          toNode.innerHTML = toNodeHtml;
+        } else if (fromNode.nodeName === "BODY") {
+          var toNodeBody = toNode;
+          toNode = doc.createElement("html");
+          toNode.innerHTML = toNodeBody;
+          var bodyElement = toNode.querySelector("body");
+          if (bodyElement) {
+            toNode = bodyElement;
+          }
+        } else {
+          toNode = toElement(toNode);
+        }
+      } else if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
+        toNode = toNode.firstElementChild;
+      }
+      var getNodeKey = options.getNodeKey || defaultGetNodeKey;
+      var onBeforeNodeAdded = options.onBeforeNodeAdded || noop;
+      var onNodeAdded = options.onNodeAdded || noop;
+      var onBeforeElUpdated = options.onBeforeElUpdated || noop;
+      var onElUpdated = options.onElUpdated || noop;
+      var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop;
+      var onNodeDiscarded = options.onNodeDiscarded || noop;
+      var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop;
+      var skipFromChildren = options.skipFromChildren || noop;
+      var addChild = options.addChild || function(parent, child) {
+        return parent.appendChild(child);
+      };
+      var childrenOnly = options.childrenOnly === true;
+      var fromNodesLookup = /* @__PURE__ */ Object.create(null);
+      var keyedRemovalList = [];
+      function addKeyedRemoval(key) {
+        keyedRemovalList.push(key);
+      }
+      function walkDiscardedChildNodes(node, skipKeyedNodes) {
+        if (node.nodeType === ELEMENT_NODE) {
+          var curChild = node.firstChild;
+          while (curChild) {
+            var key = void 0;
+            if (skipKeyedNodes && (key = getNodeKey(curChild))) {
+              addKeyedRemoval(key);
+            } else {
+              onNodeDiscarded(curChild);
+              if (curChild.firstChild) {
+                walkDiscardedChildNodes(curChild, skipKeyedNodes);
+              }
+            }
+            curChild = curChild.nextSibling;
+          }
+        }
+      }
+      function removeNode(node, parentNode, skipKeyedNodes) {
+        if (onBeforeNodeDiscarded(node) === false) {
+          return;
+        }
+        if (parentNode) {
+          parentNode.removeChild(node);
+        }
+        onNodeDiscarded(node);
+        walkDiscardedChildNodes(node, skipKeyedNodes);
+      }
+      function indexTree(node) {
+        if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
+          var curChild = node.firstChild;
+          while (curChild) {
+            var key = getNodeKey(curChild);
+            if (key) {
+              fromNodesLookup[key] = curChild;
+            }
+            indexTree(curChild);
+            curChild = curChild.nextSibling;
+          }
+        }
+      }
+      indexTree(fromNode);
+      function handleNodeAdded(el) {
+        onNodeAdded(el);
+        var curChild = el.firstChild;
+        while (curChild) {
+          var nextSibling = curChild.nextSibling;
+          var key = getNodeKey(curChild);
+          if (key) {
+            var unmatchedFromEl = fromNodesLookup[key];
+            if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) {
+              curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
+              morphEl(unmatchedFromEl, curChild);
+            } else {
+              handleNodeAdded(curChild);
+            }
+          } else {
+            handleNodeAdded(curChild);
+          }
+          curChild = nextSibling;
+        }
+      }
+      function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) {
+        while (curFromNodeChild) {
+          var fromNextSibling = curFromNodeChild.nextSibling;
+          if (curFromNodeKey = getNodeKey(curFromNodeChild)) {
+            addKeyedRemoval(curFromNodeKey);
+          } else {
+            removeNode(
+              curFromNodeChild,
+              fromEl,
+              true
+              /* skip keyed nodes */
+            );
+          }
+          curFromNodeChild = fromNextSibling;
+        }
+      }
+      function morphEl(fromEl, toEl, childrenOnly2) {
+        var toElKey = getNodeKey(toEl);
+        if (toElKey) {
+          delete fromNodesLookup[toElKey];
+        }
+        if (!childrenOnly2) {
+          var beforeUpdateResult = onBeforeElUpdated(fromEl, toEl);
+          if (beforeUpdateResult === false) {
+            return;
+          } else if (beforeUpdateResult instanceof HTMLElement) {
+            fromEl = beforeUpdateResult;
+            indexTree(fromEl);
+          }
+          morphAttrs2(fromEl, toEl);
+          onElUpdated(fromEl);
+          if (onBeforeElChildrenUpdated(fromEl, toEl) === false) {
+            return;
+          }
+        }
+        if (fromEl.nodeName !== "TEXTAREA") {
+          morphChildren(fromEl, toEl);
+        } else {
+          specialElHandlers.TEXTAREA(fromEl, toEl);
+        }
+      }
+      function morphChildren(fromEl, toEl) {
+        var skipFrom = skipFromChildren(fromEl, toEl);
+        var curToNodeChild = toEl.firstChild;
+        var curFromNodeChild = fromEl.firstChild;
+        var curToNodeKey;
+        var curFromNodeKey;
+        var fromNextSibling;
+        var toNextSibling;
+        var matchingFromEl;
+        outer:
+          while (curToNodeChild) {
+            toNextSibling = curToNodeChild.nextSibling;
+            curToNodeKey = getNodeKey(curToNodeChild);
+            while (!skipFrom && curFromNodeChild) {
+              fromNextSibling = curFromNodeChild.nextSibling;
+              if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) {
+                curToNodeChild = toNextSibling;
+                curFromNodeChild = fromNextSibling;
+                continue outer;
+              }
+              curFromNodeKey = getNodeKey(curFromNodeChild);
+              var curFromNodeType = curFromNodeChild.nodeType;
+              var isCompatible = void 0;
+              if (curFromNodeType === curToNodeChild.nodeType) {
+                if (curFromNodeType === ELEMENT_NODE) {
+                  if (curToNodeKey) {
+                    if (curToNodeKey !== curFromNodeKey) {
+                      if (matchingFromEl = fromNodesLookup[curToNodeKey]) {
+                        if (fromNextSibling === matchingFromEl) {
+                          isCompatible = false;
+                        } else {
+                          fromEl.insertBefore(matchingFromEl, curFromNodeChild);
+                          if (curFromNodeKey) {
+                            addKeyedRemoval(curFromNodeKey);
+                          } else {
+                            removeNode(
+                              curFromNodeChild,
+                              fromEl,
+                              true
+                              /* skip keyed nodes */
+                            );
+                          }
+                          curFromNodeChild = matchingFromEl;
+                          curFromNodeKey = getNodeKey(curFromNodeChild);
+                        }
+                      } else {
+                        isCompatible = false;
+                      }
+                    }
+                  } else if (curFromNodeKey) {
+                    isCompatible = false;
+                  }
+                  isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild);
+                  if (isCompatible) {
+                    morphEl(curFromNodeChild, curToNodeChild);
+                  }
+                } else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) {
+                  isCompatible = true;
+                  if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) {
+                    curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
+                  }
+                }
+              }
+              if (isCompatible) {
+                curToNodeChild = toNextSibling;
+                curFromNodeChild = fromNextSibling;
+                continue outer;
+              }
+              if (curFromNodeKey) {
+                addKeyedRemoval(curFromNodeKey);
+              } else {
+                removeNode(
+                  curFromNodeChild,
+                  fromEl,
+                  true
+                  /* skip keyed nodes */
+                );
+              }
+              curFromNodeChild = fromNextSibling;
+            }
+            if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) {
+              if (!skipFrom) {
+                addChild(fromEl, matchingFromEl);
+              }
+              morphEl(matchingFromEl, curToNodeChild);
+            } else {
+              var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);
+              if (onBeforeNodeAddedResult !== false) {
+                if (onBeforeNodeAddedResult) {
+                  curToNodeChild = onBeforeNodeAddedResult;
+                }
+                if (curToNodeChild.actualize) {
+                  curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc);
+                }
+                addChild(fromEl, curToNodeChild);
+                handleNodeAdded(curToNodeChild);
+              }
+            }
+            curToNodeChild = toNextSibling;
+            curFromNodeChild = fromNextSibling;
+          }
+        cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey);
+        var specialElHandler = specialElHandlers[fromEl.nodeName];
+        if (specialElHandler) {
+          specialElHandler(fromEl, toEl);
+        }
+      }
+      var morphedNode = fromNode;
+      var morphedNodeType = morphedNode.nodeType;
+      var toNodeType = toNode.nodeType;
+      if (!childrenOnly) {
+        if (morphedNodeType === ELEMENT_NODE) {
+          if (toNodeType === ELEMENT_NODE) {
+            if (!compareNodeNames(fromNode, toNode)) {
+              onNodeDiscarded(fromNode);
+              morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));
+            }
+          } else {
+            morphedNode = toNode;
+          }
+        } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) {
+          if (toNodeType === morphedNodeType) {
+            if (morphedNode.nodeValue !== toNode.nodeValue) {
+              morphedNode.nodeValue = toNode.nodeValue;
+            }
+            return morphedNode;
+          } else {
+            morphedNode = toNode;
+          }
+        }
+      }
+      if (morphedNode === toNode) {
+        onNodeDiscarded(fromNode);
+      } else {
+        if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {
+          return;
+        }
+        morphEl(morphedNode, toNode, childrenOnly);
+        if (keyedRemovalList) {
+          for (var i = 0, len = keyedRemovalList.length; i < len; i++) {
+            var elToRemove = fromNodesLookup[keyedRemovalList[i]];
+            if (elToRemove) {
+              removeNode(elToRemove, elToRemove.parentNode, false);
+            }
+          }
+        }
+      }
+      if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {
+        if (morphedNode.actualize) {
+          morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);
+        }
+        fromNode.parentNode.replaceChild(morphedNode, fromNode);
+      }
+      return morphedNode;
+    };
+  }
+  var morphdom = morphdomFactory(morphAttrs);
+  var morphdom_esm_default = morphdom;
+  var DOMPatch = class {
+    constructor(view, container, id, html, streams, targetCID, opts = {}) {
+      this.view = view;
+      this.liveSocket = view.liveSocket;
+      this.container = container;
+      this.id = id;
+      this.rootID = view.root.id;
+      this.html = html;
+      this.streams = streams;
+      this.streamInserts = {};
+      this.streamComponentRestore = {};
+      this.targetCID = targetCID;
+      this.cidPatch = isCid(this.targetCID);
+      this.pendingRemoves = [];
+      this.phxRemove = this.liveSocket.binding("remove");
+      this.targetContainer = this.isCIDPatch() ? this.targetCIDContainer(html) : container;
+      this.callbacks = {
+        beforeadded: [],
+        beforeupdated: [],
+        beforephxChildAdded: [],
+        afteradded: [],
+        afterupdated: [],
+        afterdiscarded: [],
+        afterphxChildAdded: [],
+        aftertransitionsDiscarded: []
+      };
+      this.withChildren = opts.withChildren || opts.undoRef || false;
+      this.undoRef = opts.undoRef;
+    }
+    before(kind, callback) {
+      this.callbacks[`before${kind}`].push(callback);
+    }
+    after(kind, callback) {
+      this.callbacks[`after${kind}`].push(callback);
+    }
+    trackBefore(kind, ...args) {
+      this.callbacks[`before${kind}`].forEach((callback) => callback(...args));
+    }
+    trackAfter(kind, ...args) {
+      this.callbacks[`after${kind}`].forEach((callback) => callback(...args));
+    }
+    markPrunableContentForRemoval() {
+      const phxUpdate = this.liveSocket.binding(PHX_UPDATE);
+      dom_default.all(
+        this.container,
+        `[${phxUpdate}=append] > *, [${phxUpdate}=prepend] > *`,
+        (el) => {
+          el.setAttribute(PHX_PRUNE, "");
+        }
+      );
+    }
+    perform(isJoinPatch) {
+      const { view, liveSocket, html, container } = this;
+      let targetContainer = this.targetContainer;
+      if (this.isCIDPatch() && !this.targetContainer) {
+        return;
+      }
+      if (this.isCIDPatch()) {
+        const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);
+        if (closestLock && !closestLock.isSameNode(targetContainer)) {
+          const clonedTree = dom_default.private(closestLock, PHX_REF_LOCK);
+          if (clonedTree) {
+            targetContainer = clonedTree.querySelector(
+              `[data-phx-component="${this.targetCID}"]`
+            );
+          }
+        }
+      }
+      const focused = liveSocket.getActiveElement();
+      const { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
+      const phxUpdate = liveSocket.binding(PHX_UPDATE);
+      const phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP);
+      const phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM);
+      const phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION);
+      const added = [];
+      const updates = [];
+      const appendPrependUpdates = [];
+      let portalCallbacks = [];
+      let externalFormTriggered = null;
+      const morph = (targetContainer2, source, withChildren = this.withChildren) => {
+        const morphCallbacks = {
+          // normally, we are running with childrenOnly, as the patch HTML for a LV
+          // does not include the LV attrs (data-phx-session, etc.)
+          // when we are patching a live component, we do want to patch the root element as well;
+          // another case is the recursive patch of a stream item that was kept on reset (-> onBeforeNodeAdded)
+          childrenOnly: targetContainer2.getAttribute(PHX_COMPONENT) === null && !withChildren,
+          getNodeKey: (node) => {
+            if (dom_default.isPhxDestroyed(node)) {
+              return null;
+            }
+            if (isJoinPatch) {
+              return node.id;
+            }
+            return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+          },
+          // skip indexing from children when container is stream
+          skipFromChildren: (from) => {
+            return from.getAttribute(phxUpdate) === PHX_STREAM;
+          },
+          // tell morphdom how to add a child
+          addChild: (parent, child) => {
+            const { ref, streamAt } = this.getStreamInsert(child);
+            if (ref === void 0) {
+              return parent.appendChild(child);
+            }
+            this.setStreamRef(child, ref);
+            if (streamAt === 0) {
+              parent.insertAdjacentElement("afterbegin", child);
+            } else if (streamAt === -1) {
+              const lastChild = parent.lastElementChild;
+              if (lastChild && !lastChild.hasAttribute(PHX_STREAM_REF)) {
+                const nonStreamChild = Array.from(parent.children).find(
+                  (c) => !c.hasAttribute(PHX_STREAM_REF)
+                );
+                parent.insertBefore(child, nonStreamChild);
+              } else {
+                parent.appendChild(child);
+              }
+            } else if (streamAt > 0) {
+              const sibling = Array.from(parent.children)[streamAt];
+              parent.insertBefore(child, sibling);
+            }
+          },
+          onBeforeNodeAdded: (el) => {
+            if (this.getStreamInsert(el)?.updateOnly && !this.streamComponentRestore[el.id]) {
+              return false;
+            }
+            dom_default.maintainPrivateHooks(el, el, phxViewportTop, phxViewportBottom);
+            this.trackBefore("added", el);
+            let morphedEl = el;
+            if (this.streamComponentRestore[el.id]) {
+              morphedEl = this.streamComponentRestore[el.id];
+              delete this.streamComponentRestore[el.id];
+              morph(morphedEl, el, true);
+            }
+            return morphedEl;
+          },
+          onNodeAdded: (el) => {
+            if (el.getAttribute) {
+              this.maybeReOrderStream(el, true);
+            }
+            if (dom_default.isPortalTemplate(el)) {
+              portalCallbacks.push(() => this.teleport(el, morph));
+            }
+            if (el instanceof HTMLImageElement && el.srcset) {
+              el.srcset = el.srcset;
+            } else if (el instanceof HTMLVideoElement && el.autoplay) {
+              el.play();
+            }
+            if (dom_default.isNowTriggerFormExternal(el, phxTriggerExternal)) {
+              externalFormTriggered = el;
+            }
+            if (dom_default.isPhxChild(el) && view.ownsElement(el) || dom_default.isPhxSticky(el) && view.ownsElement(el.parentNode)) {
+              this.trackAfter("phxChildAdded", el);
+            }
+            if (el.nodeName === "SCRIPT" && el.hasAttribute(PHX_RUNTIME_HOOK)) {
+              this.handleRuntimeHook(el, source);
+            }
+            added.push(el);
+          },
+          onNodeDiscarded: (el) => this.onNodeDiscarded(el),
+          onBeforeNodeDiscarded: (el) => {
+            if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {
+              return true;
+            }
+            if (el.parentElement !== null && el.id && dom_default.isPhxUpdate(el.parentElement, phxUpdate, [
+              PHX_STREAM,
+              "append",
+              "prepend"
+            ])) {
+              return false;
+            }
+            if (el.getAttribute && el.getAttribute(PHX_TELEPORTED_REF)) {
+              return false;
+            }
+            if (this.maybePendingRemove(el)) {
+              return false;
+            }
+            if (this.skipCIDSibling(el)) {
+              return false;
+            }
+            if (dom_default.isPortalTemplate(el)) {
+              const teleportedEl = document.getElementById(
+                el.content.firstElementChild.id
+              );
+              if (teleportedEl) {
+                teleportedEl.remove();
+                morphCallbacks.onNodeDiscarded(teleportedEl);
+                this.view.dropPortalElementId(teleportedEl.id);
+              }
+            }
+            return true;
+          },
+          onElUpdated: (el) => {
+            if (dom_default.isNowTriggerFormExternal(el, phxTriggerExternal)) {
+              externalFormTriggered = el;
+            }
+            updates.push(el);
+            this.maybeReOrderStream(el, false);
+          },
+          onBeforeElUpdated: (fromEl, toEl) => {
+            if (fromEl.id && fromEl.isSameNode(targetContainer2) && fromEl.id !== toEl.id) {
+              morphCallbacks.onNodeDiscarded(fromEl);
+              fromEl.replaceWith(toEl);
+              return morphCallbacks.onNodeAdded(toEl);
+            }
+            dom_default.syncPendingAttrs(fromEl, toEl);
+            dom_default.maintainPrivateHooks(
+              fromEl,
+              toEl,
+              phxViewportTop,
+              phxViewportBottom
+            );
+            dom_default.cleanChildNodes(toEl, phxUpdate);
+            if (this.skipCIDSibling(toEl)) {
+              this.maybeReOrderStream(fromEl);
+              return false;
+            }
+            if (dom_default.isPhxSticky(fromEl)) {
+              [PHX_SESSION, PHX_STATIC, PHX_ROOT_ID].map((attr) => [
+                attr,
+                fromEl.getAttribute(attr),
+                toEl.getAttribute(attr)
+              ]).forEach(([attr, fromVal, toVal]) => {
+                if (toVal && fromVal !== toVal) {
+                  fromEl.setAttribute(attr, toVal);
+                }
+              });
+              return false;
+            }
+            if (dom_default.isIgnored(fromEl, phxUpdate) || fromEl.form && fromEl.form.isSameNode(externalFormTriggered)) {
+              this.trackBefore("updated", fromEl, toEl);
+              dom_default.mergeAttrs(fromEl, toEl, {
+                isIgnored: dom_default.isIgnored(fromEl, phxUpdate)
+              });
+              updates.push(fromEl);
+              dom_default.applyStickyOperations(fromEl);
+              return false;
+            }
+            if (fromEl.type === "number" && fromEl.validity && fromEl.validity.badInput) {
+              return false;
+            }
+            const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
+            const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
+            if (fromEl.hasAttribute(PHX_REF_SRC)) {
+              const ref = new ElementRef(fromEl);
+              if (ref.lockRef && (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))) {
+                dom_default.applyStickyOperations(fromEl);
+                const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
+                const clone2 = isLocked ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;
+                if (clone2) {
+                  dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);
+                  if (!isFocusedFormEl) {
+                    fromEl = clone2;
+                  }
+                }
+              }
+            }
+            if (dom_default.isPhxChild(toEl)) {
+              const prevSession = fromEl.getAttribute(PHX_SESSION);
+              dom_default.mergeAttrs(fromEl, toEl, { exclude: [PHX_STATIC] });
+              if (prevSession !== "") {
+                fromEl.setAttribute(PHX_SESSION, prevSession);
+              }
+              fromEl.setAttribute(PHX_ROOT_ID, this.rootID);
+              dom_default.applyStickyOperations(fromEl);
+              return false;
+            }
+            if (this.undoRef && dom_default.private(toEl, PHX_REF_LOCK)) {
+              dom_default.putPrivate(
+                fromEl,
+                PHX_REF_LOCK,
+                dom_default.private(toEl, PHX_REF_LOCK)
+              );
+            }
+            dom_default.copyPrivates(toEl, fromEl);
+            if (dom_default.isPortalTemplate(toEl)) {
+              portalCallbacks.push(() => this.teleport(toEl, morph));
+              fromEl.content.replaceChildren(toEl.content.cloneNode(true));
+              return false;
+            }
+            if (isFocusedFormEl && fromEl.type !== "hidden" && !focusedSelectChanged) {
+              this.trackBefore("updated", fromEl, toEl);
+              dom_default.mergeFocusedInput(fromEl, toEl);
+              dom_default.syncAttrsToProps(fromEl);
+              updates.push(fromEl);
+              dom_default.applyStickyOperations(fromEl);
+              return false;
+            } else {
+              if (focusedSelectChanged) {
+                fromEl.blur();
+              }
+              if (dom_default.isPhxUpdate(toEl, phxUpdate, ["append", "prepend"])) {
+                appendPrependUpdates.push(
+                  new DOMPostMorphRestorer(
+                    fromEl,
+                    toEl,
+                    toEl.getAttribute(phxUpdate)
+                  )
+                );
+              }
+              dom_default.syncAttrsToProps(toEl);
+              dom_default.applyStickyOperations(toEl);
+              this.trackBefore("updated", fromEl, toEl);
+              return fromEl;
+            }
+          }
+        };
+        morphdom_esm_default(targetContainer2, source, morphCallbacks);
+      };
+      this.trackBefore("added", container);
+      this.trackBefore("updated", container, container);
+      liveSocket.time("morphdom", () => {
+        this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
+          inserts.forEach(([key, streamAt, limit, updateOnly]) => {
+            this.streamInserts[key] = { ref, streamAt, limit, reset, updateOnly };
+          });
+          if (reset !== void 0) {
+            dom_default.all(document, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
+              this.removeStreamChildElement(child);
+            });
+          }
+          deleteIds.forEach((id) => {
+            const child = document.getElementById(id);
+            if (child) {
+              this.removeStreamChildElement(child);
+            }
+          });
+        });
+        if (isJoinPatch) {
+          dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`).filter((el) => this.view.ownsElement(el)).forEach((el) => {
+            Array.from(el.children).forEach((child) => {
+              this.removeStreamChildElement(child, true);
+            });
+          });
+        }
+        morph(targetContainer, html);
+        let teleportCount = 0;
+        while (portalCallbacks.length > 0 && teleportCount < 5) {
+          const copy = portalCallbacks.slice();
+          portalCallbacks = [];
+          copy.forEach((callback) => callback());
+          teleportCount++;
+        }
+        this.view.portalElementIds.forEach((id) => {
+          const el = document.getElementById(id);
+          if (el) {
+            const source = document.getElementById(
+              el.getAttribute(PHX_TELEPORTED_SRC)
+            );
+            if (!source) {
+              el.remove();
+              this.onNodeDiscarded(el);
+              this.view.dropPortalElementId(id);
+            }
+          }
+        });
+      });
+      if (liveSocket.isDebugEnabled()) {
+        detectDuplicateIds();
+        detectInvalidStreamInserts(this.streamInserts);
+        Array.from(document.querySelectorAll("input[name=id]")).forEach(
+          (node) => {
+            if (node instanceof HTMLInputElement && node.form) {
+              console.error(
+                'Detected an input with name="id" inside a form! This will cause problems when patching the DOM.\n',
+                node
+              );
+            }
+          }
+        );
+      }
+      if (appendPrependUpdates.length > 0) {
+        liveSocket.time("post-morph append/prepend restoration", () => {
+          appendPrependUpdates.forEach((update) => update.perform());
+        });
+      }
+      liveSocket.silenceEvents(
+        () => dom_default.restoreFocus(focused, selectionStart, selectionEnd)
+      );
+      dom_default.dispatchEvent(document, "phx:update");
+      added.forEach((el) => this.trackAfter("added", el));
+      updates.forEach((el) => this.trackAfter("updated", el));
+      this.transitionPendingRemoves();
+      if (externalFormTriggered) {
+        liveSocket.unload();
+        const submitter = dom_default.private(externalFormTriggered, "submitter");
+        if (submitter && submitter.name && targetContainer.contains(submitter)) {
+          const input = document.createElement("input");
+          input.type = "hidden";
+          const formId = submitter.getAttribute("form");
+          if (formId) {
+            input.setAttribute("form", formId);
+          }
+          input.name = submitter.name;
+          input.value = submitter.value;
+          submitter.parentElement.insertBefore(input, submitter);
+        }
+        Object.getPrototypeOf(externalFormTriggered).submit.call(
+          externalFormTriggered
+        );
+      }
+      return true;
+    }
+    onNodeDiscarded(el) {
+      if (dom_default.isPhxChild(el) || dom_default.isPhxSticky(el)) {
+        this.liveSocket.destroyViewByEl(el);
+      }
+      this.trackAfter("discarded", el);
+    }
+    maybePendingRemove(node) {
+      if (node.getAttribute && node.getAttribute(this.phxRemove) !== null) {
+        this.pendingRemoves.push(node);
+        return true;
+      } else {
+        return false;
+      }
+    }
+    removeStreamChildElement(child, force = false) {
+      if (!force && !this.view.ownsElement(child)) {
+        return;
+      }
+      if (this.streamInserts[child.id]) {
+        this.streamComponentRestore[child.id] = child;
+        child.remove();
+      } else {
+        if (!this.maybePendingRemove(child)) {
+          child.remove();
+          this.onNodeDiscarded(child);
+        }
+      }
+    }
+    getStreamInsert(el) {
+      const insert = el.id ? this.streamInserts[el.id] : {};
+      return insert || {};
+    }
+    setStreamRef(el, ref) {
+      dom_default.putSticky(
+        el,
+        PHX_STREAM_REF,
+        (el2) => el2.setAttribute(PHX_STREAM_REF, ref)
+      );
+    }
+    maybeReOrderStream(el, isNew) {
+      const { ref, streamAt, reset } = this.getStreamInsert(el);
+      if (streamAt === void 0) {
+        return;
+      }
+      this.setStreamRef(el, ref);
+      if (!reset && !isNew) {
+        return;
+      }
+      if (!el.parentElement) {
+        return;
+      }
+      if (streamAt === 0) {
+        el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
+      } else if (streamAt > 0) {
+        const children = Array.from(el.parentElement.children);
+        const oldIndex = children.indexOf(el);
+        if (streamAt >= children.length - 1) {
+          el.parentElement.appendChild(el);
+        } else {
+          const sibling = children[streamAt];
+          if (oldIndex > streamAt) {
+            el.parentElement.insertBefore(el, sibling);
+          } else {
+            el.parentElement.insertBefore(el, sibling.nextElementSibling);
+          }
+        }
+      }
+      this.maybeLimitStream(el);
+    }
+    maybeLimitStream(el) {
+      const { limit } = this.getStreamInsert(el);
+      const children = limit !== null && Array.from(el.parentElement.children);
+      if (limit && limit < 0 && children.length > limit * -1) {
+        children.slice(0, children.length + limit).forEach((child) => this.removeStreamChildElement(child));
+      } else if (limit && limit >= 0 && children.length > limit) {
+        children.slice(limit).forEach((child) => this.removeStreamChildElement(child));
+      }
+    }
+    transitionPendingRemoves() {
+      const { pendingRemoves, liveSocket } = this;
+      if (pendingRemoves.length > 0) {
+        liveSocket.transitionRemoves(pendingRemoves, () => {
+          pendingRemoves.forEach((el) => {
+            const child = dom_default.firstPhxChild(el);
+            if (child) {
+              liveSocket.destroyViewByEl(child);
+            }
+            el.remove();
+          });
+          this.trackAfter("transitionsDiscarded", pendingRemoves);
+        });
+      }
+    }
+    isChangedSelect(fromEl, toEl) {
+      if (!(fromEl instanceof HTMLSelectElement) || fromEl.multiple) {
+        return false;
+      }
+      if (fromEl.options.length !== toEl.options.length) {
+        return true;
+      }
+      toEl.value = fromEl.value;
+      return !fromEl.isEqualNode(toEl);
+    }
+    isCIDPatch() {
+      return this.cidPatch;
+    }
+    skipCIDSibling(el) {
+      return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
+    }
+    targetCIDContainer(html) {
+      if (!this.isCIDPatch()) {
+        return;
+      }
+      const [first, ...rest] = dom_default.findComponentNodeList(
+        this.view.id,
+        this.targetCID
+      );
+      if (rest.length === 0 && dom_default.childNodeLength(html) === 1) {
+        return first;
+      } else {
+        return first && first.parentNode;
+      }
+    }
+    indexOf(parent, child) {
+      return Array.from(parent.children).indexOf(child);
+    }
+    teleport(el, morph) {
+      const targetSelector = el.getAttribute(PHX_PORTAL);
+      const portalContainer = document.querySelector(targetSelector);
+      if (!portalContainer) {
+        throw new Error(
+          "portal target with selector " + targetSelector + " not found"
+        );
+      }
+      const toTeleport = el.content.firstElementChild;
+      if (this.skipCIDSibling(toTeleport)) {
+        return;
+      }
+      if (!toTeleport?.id) {
+        throw new Error(
+          "phx-portal template must have a single root element with ID!"
+        );
+      }
+      const existing = document.getElementById(toTeleport.id);
+      let portalTarget;
+      if (existing) {
+        if (!portalContainer.contains(existing)) {
+          portalContainer.appendChild(existing);
+        }
+        portalTarget = existing;
+      } else {
+        portalTarget = document.createElement(toTeleport.tagName);
+        portalContainer.appendChild(portalTarget);
+      }
+      toTeleport.setAttribute(PHX_TELEPORTED_REF, this.view.id);
+      toTeleport.setAttribute(PHX_TELEPORTED_SRC, el.id);
+      morph(portalTarget, toTeleport, true);
+      toTeleport.removeAttribute(PHX_TELEPORTED_REF);
+      toTeleport.removeAttribute(PHX_TELEPORTED_SRC);
+      this.view.pushPortalElementId(toTeleport.id);
+    }
+    handleRuntimeHook(el, source) {
+      const name = el.getAttribute(PHX_RUNTIME_HOOK);
+      let nonce = el.hasAttribute("nonce") ? el.getAttribute("nonce") : null;
+      if (el.hasAttribute("nonce")) {
+        const template = document.createElement("template");
+        template.innerHTML = source;
+        nonce = template.content.querySelector(`script[${PHX_RUNTIME_HOOK}="${CSS.escape(name)}"]`).getAttribute("nonce");
+      }
+      const script = document.createElement("script");
+      script.textContent = el.textContent;
+      dom_default.mergeAttrs(script, el, { isIgnored: false });
+      if (nonce) {
+        script.nonce = nonce;
+      }
+      el.replaceWith(script);
+      el = script;
+    }
+  };
+  var VOID_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "command",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  var quoteChars = /* @__PURE__ */ new Set(["'", '"']);
+  var modifyRoot = (html, attrs, clearInnerHTML) => {
+    let i = 0;
+    let insideComment = false;
+    let beforeTag, afterTag, tag, tagNameEndsAt, id, newHTML;
+    const lookahead = html.match(/^(\s*(?:<!--.*?-->\s*)*)<([^\s\/>]+)/);
+    if (lookahead === null) {
+      throw new Error(`malformed html ${html}`);
+    }
+    i = lookahead[0].length;
+    beforeTag = lookahead[1];
+    tag = lookahead[2];
+    tagNameEndsAt = i;
+    for (i; i < html.length; i++) {
+      if (html.charAt(i) === ">") {
+        break;
+      }
+      if (html.charAt(i) === "=") {
+        const isId = html.slice(i - 3, i) === " id";
+        i++;
+        const char = html.charAt(i);
+        if (quoteChars.has(char)) {
+          const attrStartsAt = i;
+          i++;
+          for (i; i < html.length; i++) {
+            if (html.charAt(i) === char) {
+              break;
+            }
+          }
+          if (isId) {
+            id = html.slice(attrStartsAt + 1, i);
+            break;
+          }
+        }
+      }
+    }
+    let closeAt = html.length - 1;
+    insideComment = false;
+    while (closeAt >= beforeTag.length + tag.length) {
+      const char = html.charAt(closeAt);
+      if (insideComment) {
+        if (char === "-" && html.slice(closeAt - 3, closeAt) === "<!-") {
+          insideComment = false;
+          closeAt -= 4;
+        } else {
+          closeAt -= 1;
+        }
+      } else if (char === ">" && html.slice(closeAt - 2, closeAt) === "--") {
+        insideComment = true;
+        closeAt -= 3;
+      } else if (char === ">") {
+        break;
+      } else {
+        closeAt -= 1;
+      }
+    }
+    afterTag = html.slice(closeAt + 1, html.length);
+    const attrsStr = Object.keys(attrs).map((attr) => attrs[attr] === true ? attr : `${attr}="${attrs[attr]}"`).join(" ");
+    if (clearInnerHTML) {
+      const idAttrStr = id ? ` id="${id}"` : "";
+      if (VOID_TAGS.has(tag)) {
+        newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}/>`;
+      } else {
+        newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}></${tag}>`;
+      }
+    } else {
+      const rest = html.slice(tagNameEndsAt, closeAt + 1);
+      newHTML = `<${tag}${attrsStr === "" ? "" : " "}${attrsStr}${rest}`;
+    }
+    return [newHTML, beforeTag, afterTag];
+  };
+  var Rendered = class {
+    static extract(diff) {
+      const { [REPLY]: reply, [EVENTS]: events, [TITLE]: title } = diff;
+      delete diff[REPLY];
+      delete diff[EVENTS];
+      delete diff[TITLE];
+      return { diff, title, reply: reply || null, events: events || [] };
+    }
+    constructor(viewId, rendered) {
+      this.viewId = viewId;
+      this.rendered = {};
+      this.magicId = 0;
+      this.mergeDiff(rendered);
+    }
+    parentViewId() {
+      return this.viewId;
+    }
+    toString(onlyCids) {
+      const { buffer: str, streams } = this.recursiveToString(
+        this.rendered,
+        this.rendered[COMPONENTS],
+        onlyCids,
+        true,
+        {}
+      );
+      return { buffer: str, streams };
+    }
+    recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids, changeTracking, rootAttrs) {
+      onlyCids = onlyCids ? new Set(onlyCids) : null;
+      const output = {
+        buffer: "",
+        components,
+        onlyCids,
+        streams: /* @__PURE__ */ new Set()
+      };
+      this.toOutputBuffer(rendered, null, output, changeTracking, rootAttrs);
+      return { buffer: output.buffer, streams: output.streams };
+    }
+    componentCIDs(diff) {
+      return Object.keys(diff[COMPONENTS] || {}).map((i) => parseInt(i));
+    }
+    isComponentOnlyDiff(diff) {
+      if (!diff[COMPONENTS]) {
+        return false;
+      }
+      return Object.keys(diff).length === 1;
+    }
+    getComponent(diff, cid) {
+      return diff[COMPONENTS][cid];
+    }
+    resetRender(cid) {
+      if (this.rendered[COMPONENTS][cid]) {
+        this.rendered[COMPONENTS][cid].reset = true;
+      }
+    }
+    mergeDiff(diff) {
+      const newc = diff[COMPONENTS];
+      const cache = {};
+      delete diff[COMPONENTS];
+      this.rendered = this.mutableMerge(this.rendered, diff);
+      this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {};
+      if (newc) {
+        const oldc = this.rendered[COMPONENTS];
+        for (const cid in newc) {
+          newc[cid] = this.cachedFindComponent(cid, newc[cid], oldc, newc, cache);
+        }
+        for (const cid in newc) {
+          oldc[cid] = newc[cid];
+        }
+        diff[COMPONENTS] = newc;
+      }
+    }
+    cachedFindComponent(cid, cdiff, oldc, newc, cache) {
+      if (cache[cid]) {
+        return cache[cid];
+      } else {
+        let ndiff, stat, scid = cdiff[STATIC];
+        if (isCid(scid)) {
+          let tdiff;
+          if (scid > 0) {
+            tdiff = this.cachedFindComponent(scid, newc[scid], oldc, newc, cache);
+          } else {
+            tdiff = oldc[-scid];
+          }
+          stat = tdiff[STATIC];
+          ndiff = this.cloneMerge(tdiff, cdiff, true);
+          ndiff[STATIC] = stat;
+        } else {
+          ndiff = cdiff[STATIC] !== void 0 || oldc[cid] === void 0 ? cdiff : this.cloneMerge(oldc[cid], cdiff, false);
+        }
+        cache[cid] = ndiff;
+        return ndiff;
+      }
+    }
+    mutableMerge(target, source) {
+      if (source[STATIC] !== void 0) {
+        return source;
+      } else {
+        this.doMutableMerge(target, source);
+        return target;
+      }
+    }
+    doMutableMerge(target, source) {
+      if (source[KEYED]) {
+        this.mergeKeyed(target, source);
+      } else {
+        for (const key in source) {
+          const val = source[key];
+          const targetVal = target[key];
+          const isObjVal = isObject(val);
+          if (isObjVal && val[STATIC] === void 0 && isObject(targetVal)) {
+            this.doMutableMerge(targetVal, val);
+          } else {
+            target[key] = val;
+          }
+        }
+      }
+      if (target[ROOT]) {
+        target.newRender = true;
+      }
+    }
+    clone(diff) {
+      if ("structuredClone" in window) {
+        return structuredClone(diff);
+      } else {
+        return JSON.parse(JSON.stringify(diff));
+      }
+    }
+    // keyed comprehensions
+    mergeKeyed(target, source) {
+      const clonedTarget = this.clone(target);
+      Object.entries(source[KEYED]).forEach(([i, entry]) => {
+        if (i === KEYED_COUNT) {
+          return;
+        }
+        if (Array.isArray(entry)) {
+          const [old_idx, diff] = entry;
+          target[KEYED][i] = clonedTarget[KEYED][old_idx];
+          this.doMutableMerge(target[KEYED][i], diff);
+        } else if (typeof entry === "number") {
+          const old_idx = entry;
+          target[KEYED][i] = clonedTarget[KEYED][old_idx];
+        } else if (typeof entry === "object") {
+          if (!target[KEYED][i]) {
+            target[KEYED][i] = {};
+          }
+          this.doMutableMerge(target[KEYED][i], entry);
+        }
+      });
+      if (source[KEYED][KEYED_COUNT] < target[KEYED][KEYED_COUNT]) {
+        for (let i = source[KEYED][KEYED_COUNT]; i < target[KEYED][KEYED_COUNT]; i++) {
+          delete target[KEYED][i];
+        }
+      }
+      target[KEYED][KEYED_COUNT] = source[KEYED][KEYED_COUNT];
+      if (source[STREAM]) {
+        target[STREAM] = source[STREAM];
+      }
+      if (source[TEMPLATES]) {
+        target[TEMPLATES] = source[TEMPLATES];
+      }
+    }
+    // Merges cid trees together, copying statics from source tree.
+    //
+    // The `pruneMagicId` is passed to control pruning the magicId of the
+    // target. We must always prune the magicId when we are sharing statics
+    // from another component. If not pruning, we replicate the logic from
+    // mutableMerge, where we set newRender to true if there is a root
+    // (effectively forcing the new version to be rendered instead of skipped)
+    //
+    cloneMerge(target, source, pruneMagicId) {
+      let merged;
+      if (source[KEYED]) {
+        merged = this.clone(target);
+        this.mergeKeyed(merged, source);
+      } else {
+        merged = { ...target, ...source };
+        for (const key in merged) {
+          const val = source[key];
+          const targetVal = target[key];
+          if (isObject(val) && val[STATIC] === void 0 && isObject(targetVal)) {
+            merged[key] = this.cloneMerge(targetVal, val, pruneMagicId);
+          } else if (val === void 0 && isObject(targetVal)) {
+            merged[key] = this.cloneMerge(targetVal, {}, pruneMagicId);
+          }
+        }
+      }
+      if (pruneMagicId) {
+        delete merged.magicId;
+        delete merged.newRender;
+      } else if (target[ROOT]) {
+        merged.newRender = true;
+      }
+      return merged;
+    }
+    componentToString(cid) {
+      const { buffer: str, streams } = this.recursiveCIDToString(
+        this.rendered[COMPONENTS],
+        cid,
+        null
+      );
+      const [strippedHTML, _before, _after] = modifyRoot(str, {});
+      return { buffer: strippedHTML, streams };
+    }
+    pruneCIDs(cids) {
+      cids.forEach((cid) => delete this.rendered[COMPONENTS][cid]);
+    }
+    // private
+    get() {
+      return this.rendered;
+    }
+    isNewFingerprint(diff = {}) {
+      return !!diff[STATIC];
+    }
+    templateStatic(part, templates) {
+      if (typeof part === "number") {
+        return templates[part];
+      } else {
+        return part;
+      }
+    }
+    nextMagicID() {
+      this.magicId++;
+      return `m${this.magicId}-${this.parentViewId()}`;
+    }
+    // Converts rendered tree to output buffer.
+    //
+    // changeTracking controls if we can apply the PHX_SKIP optimization.
+    toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}) {
+      if (rendered[KEYED]) {
+        return this.comprehensionToBuffer(
+          rendered,
+          templates,
+          output,
+          changeTracking
+        );
+      }
+      if (rendered[TEMPLATES]) {
+        templates = rendered[TEMPLATES];
+        delete rendered[TEMPLATES];
+      }
+      let { [STATIC]: statics } = rendered;
+      statics = this.templateStatic(statics, templates);
+      rendered[STATIC] = statics;
+      const isRoot = rendered[ROOT];
+      const prevBuffer = output.buffer;
+      if (isRoot) {
+        output.buffer = "";
+      }
+      if (changeTracking && isRoot && !rendered.magicId) {
+        rendered.newRender = true;
+        rendered.magicId = this.nextMagicID();
+      }
+      output.buffer += statics[0];
+      for (let i = 1; i < statics.length; i++) {
+        this.dynamicToBuffer(rendered[i - 1], templates, output, changeTracking);
+        output.buffer += statics[i];
+      }
+      if (isRoot) {
+        let skip = false;
+        let attrs;
+        if (changeTracking || rendered.magicId) {
+          skip = changeTracking && !rendered.newRender;
+          attrs = { [PHX_MAGIC_ID]: rendered.magicId, ...rootAttrs };
+        } else {
+          attrs = rootAttrs;
+        }
+        if (skip) {
+          attrs[PHX_SKIP] = true;
+        }
+        const [newRoot, commentBefore, commentAfter] = modifyRoot(
+          output.buffer,
+          attrs,
+          skip
+        );
+        rendered.newRender = false;
+        output.buffer = prevBuffer + commentBefore + newRoot + commentAfter;
+      }
+    }
+    comprehensionToBuffer(rendered, templates, output, changeTracking) {
+      const keyedTemplates = templates || rendered[TEMPLATES];
+      const statics = this.templateStatic(rendered[STATIC], templates);
+      rendered[STATIC] = statics;
+      delete rendered[TEMPLATES];
+      for (let i = 0; i < rendered[KEYED][KEYED_COUNT]; i++) {
+        output.buffer += statics[0];
+        for (let j = 1; j < statics.length; j++) {
+          this.dynamicToBuffer(
+            rendered[KEYED][i][j - 1],
+            keyedTemplates,
+            output,
+            changeTracking
+          );
+          output.buffer += statics[j];
+        }
+      }
+      if (rendered[STREAM]) {
+        const stream = rendered[STREAM];
+        const [_ref, _inserts, deleteIds, reset] = stream || [null, {}, [], null];
+        if (stream !== void 0 && (rendered[KEYED][KEYED_COUNT] > 0 || deleteIds.length > 0 || reset)) {
+          delete rendered[STREAM];
+          rendered[KEYED] = {
+            [KEYED_COUNT]: 0
+          };
+          output.streams.add(stream);
+        }
+      }
+    }
+    dynamicToBuffer(rendered, templates, output, changeTracking) {
+      if (typeof rendered === "number") {
+        const { buffer: str, streams } = this.recursiveCIDToString(
+          output.components,
+          rendered,
+          output.onlyCids
+        );
+        output.buffer += str;
+        output.streams = /* @__PURE__ */ new Set([...output.streams, ...streams]);
+      } else if (isObject(rendered)) {
+        this.toOutputBuffer(rendered, templates, output, changeTracking, {});
+      } else {
+        output.buffer += rendered;
+      }
+    }
+    recursiveCIDToString(components, cid, onlyCids) {
+      const component = components[cid] || logError(`no component for CID ${cid}`, components);
+      const attrs = { [PHX_COMPONENT]: cid, [PHX_VIEW_REF]: this.viewId };
+      const skip = onlyCids && !onlyCids.has(cid);
+      component.newRender = !skip;
+      component.magicId = `c${cid}-${this.parentViewId()}`;
+      const changeTracking = !component.reset;
+      const { buffer: html, streams } = this.recursiveToString(
+        component,
+        components,
+        onlyCids,
+        changeTracking,
+        attrs
+      );
+      delete component.reset;
+      return { buffer: html, streams };
+    }
+  };
+  var focusStack = [];
+  var default_transition_time = 200;
+  var JS = {
+    // private
+    exec(e, eventType, phxEvent, view, sourceEl, defaults) {
+      const [defaultKind, defaultArgs] = defaults || [
+        null,
+        { callback: defaults && defaults.callback }
+      ];
+      const commands = phxEvent.charAt(0) === "[" ? JSON.parse(phxEvent) : [[defaultKind, defaultArgs]];
+      commands.forEach(([kind, args]) => {
+        if (kind === defaultKind) {
+          args = { ...defaultArgs, ...args };
+          args.callback = args.callback || defaultArgs.callback;
+        }
+        this.filterToEls(view.liveSocket, sourceEl, args).forEach((el) => {
+          this[`exec_${kind}`](e, eventType, phxEvent, view, sourceEl, el, args);
+        });
+      });
+    },
+    isVisible(el) {
+      return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0);
+    },
+    // returns true if any part of the element is inside the viewport
+    isInViewport(el) {
+      const rect = el.getBoundingClientRect();
+      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+      return rect.right > 0 && rect.bottom > 0 && rect.left < windowWidth && rect.top < windowHeight;
+    },
+    // private
+    // commands
+    exec_exec(e, eventType, phxEvent, view, sourceEl, el, { attr, to }) {
+      const encodedJS = el.getAttribute(attr);
+      if (!encodedJS) {
+        throw new Error(`expected ${attr} to contain JS command on "${to}"`);
+      }
+      view.liveSocket.execJS(el, encodedJS, eventType);
+    },
+    exec_dispatch(e, eventType, phxEvent, view, sourceEl, el, { event, detail, bubbles, blocking }) {
+      detail = detail || {};
+      detail.dispatcher = sourceEl;
+      if (blocking) {
+        const promise = new Promise((resolve, _reject) => {
+          detail.done = resolve;
+        });
+        view.liveSocket.asyncTransition(promise);
+      }
+      dom_default.dispatchEvent(el, event, { detail, bubbles });
+    },
+    exec_push(e, eventType, phxEvent, view, sourceEl, el, args) {
+      const {
+        event,
+        data,
+        target,
+        page_loading,
+        loading,
+        value,
+        dispatcher,
+        callback
+      } = args;
+      const pushOpts = {
+        loading,
+        value,
+        target,
+        page_loading: !!page_loading,
+        originalEvent: e
+      };
+      const targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl;
+      const phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc;
+      const handler = (targetView, targetCtx) => {
+        if (!targetView.isConnected()) {
+          return;
+        }
+        if (eventType === "change") {
+          let { newCid, _target } = args;
+          _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);
+          if (_target) {
+            pushOpts._target = _target;
+          }
+          targetView.pushInput(
+            sourceEl,
+            targetCtx,
+            newCid,
+            event || phxEvent,
+            pushOpts,
+            callback
+          );
+        } else if (eventType === "submit") {
+          const { submitter } = args;
+          targetView.submitForm(
+            sourceEl,
+            targetCtx,
+            event || phxEvent,
+            submitter,
+            pushOpts,
+            callback
+          );
+        } else {
+          targetView.pushEvent(
+            eventType,
+            sourceEl,
+            targetCtx,
+            event || phxEvent,
+            data,
+            pushOpts,
+            callback
+          );
+        }
+      };
+      if (args.targetView && args.targetCtx) {
+        handler(args.targetView, args.targetCtx);
+      } else {
+        view.withinTargets(phxTarget, handler);
+      }
+    },
+    exec_navigate(e, eventType, phxEvent, view, sourceEl, el, { href, replace }) {
+      view.liveSocket.historyRedirect(
+        e,
+        href,
+        replace ? "replace" : "push",
+        null,
+        sourceEl
+      );
+    },
+    exec_patch(e, eventType, phxEvent, view, sourceEl, el, { href, replace }) {
+      view.liveSocket.pushHistoryPatch(
+        e,
+        href,
+        replace ? "replace" : "push",
+        sourceEl
+      );
+    },
+    exec_focus(e, eventType, phxEvent, view, sourceEl, el) {
+      aria_default.attemptFocus(el);
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => aria_default.attemptFocus(el));
+      });
+    },
+    exec_focus_first(e, eventType, phxEvent, view, sourceEl, el) {
+      aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el);
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(
+          () => aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el)
+        );
+      });
+    },
+    exec_push_focus(e, eventType, phxEvent, view, sourceEl, el) {
+      focusStack.push(el || sourceEl);
+    },
+    exec_pop_focus(_e, _eventType, _phxEvent, _view, _sourceEl, _el) {
+      const el = focusStack.pop();
+      if (el) {
+        el.focus();
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => el.focus());
+        });
+      }
+    },
+    exec_add_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {
+      this.addOrRemoveClasses(el, names, [], transition, time, view, blocking);
+    },
+    exec_remove_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {
+      this.addOrRemoveClasses(el, [], names, transition, time, view, blocking);
+    },
+    exec_toggle_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {
+      this.toggleClasses(el, names, transition, time, view, blocking);
+    },
+    exec_toggle_attr(e, eventType, phxEvent, view, sourceEl, el, { attr: [attr, val1, val2] }) {
+      this.toggleAttr(el, attr, val1, val2);
+    },
+    exec_ignore_attrs(e, eventType, phxEvent, view, sourceEl, el, { attrs }) {
+      this.ignoreAttrs(el, attrs);
+    },
+    exec_transition(e, eventType, phxEvent, view, sourceEl, el, { time, transition, blocking }) {
+      this.addOrRemoveClasses(el, [], [], transition, time, view, blocking);
+    },
+    exec_toggle(e, eventType, phxEvent, view, sourceEl, el, { display, ins, outs, time, blocking }) {
+      this.toggle(eventType, view, el, display, ins, outs, time, blocking);
+    },
+    exec_show(e, eventType, phxEvent, view, sourceEl, el, { display, transition, time, blocking }) {
+      this.show(eventType, view, el, display, transition, time, blocking);
+    },
+    exec_hide(e, eventType, phxEvent, view, sourceEl, el, { display, transition, time, blocking }) {
+      this.hide(eventType, view, el, display, transition, time, blocking);
+    },
+    exec_set_attr(e, eventType, phxEvent, view, sourceEl, el, { attr: [attr, val] }) {
+      this.setOrRemoveAttrs(el, [[attr, val]], []);
+    },
+    exec_remove_attr(e, eventType, phxEvent, view, sourceEl, el, { attr }) {
+      this.setOrRemoveAttrs(el, [], [attr]);
+    },
+    ignoreAttrs(el, attrs) {
+      dom_default.putPrivate(el, "JS:ignore_attrs", {
+        apply: (fromEl, toEl) => {
+          let fromAttributes = Array.from(fromEl.attributes);
+          let fromAttributeNames = fromAttributes.map((attr) => attr.name);
+          Array.from(toEl.attributes).filter((attr) => {
+            return !fromAttributeNames.includes(attr.name);
+          }).forEach((attr) => {
+            if (dom_default.attributeIgnored(attr, attrs)) {
+              toEl.removeAttribute(attr.name);
+            }
+          });
+          fromAttributes.forEach((attr) => {
+            if (dom_default.attributeIgnored(attr, attrs)) {
+              toEl.setAttribute(attr.name, attr.value);
+            }
+          });
+        }
+      });
+    },
+    onBeforeElUpdated(fromEl, toEl) {
+      const ignoreAttrs = dom_default.private(fromEl, "JS:ignore_attrs");
+      if (ignoreAttrs) {
+        ignoreAttrs.apply(fromEl, toEl);
+      }
+    },
+    // utils for commands
+    show(eventType, view, el, display, transition, time, blocking) {
+      if (!this.isVisible(el)) {
+        this.toggle(
+          eventType,
+          view,
+          el,
+          display,
+          transition,
+          null,
+          time,
+          blocking
+        );
+      }
+    },
+    hide(eventType, view, el, display, transition, time, blocking) {
+      if (this.isVisible(el)) {
+        this.toggle(
+          eventType,
+          view,
+          el,
+          display,
+          null,
+          transition,
+          time,
+          blocking
+        );
+      }
+    },
+    toggle(eventType, view, el, display, ins, outs, time, blocking) {
+      time = time || default_transition_time;
+      const [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []];
+      const [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []];
+      if (inClasses.length > 0 || outClasses.length > 0) {
+        if (this.isVisible(el)) {
+          const onStart = () => {
+            this.addOrRemoveClasses(
+              el,
+              outStartClasses,
+              inClasses.concat(inStartClasses).concat(inEndClasses)
+            );
+            window.requestAnimationFrame(() => {
+              this.addOrRemoveClasses(el, outClasses, []);
+              window.requestAnimationFrame(
+                () => this.addOrRemoveClasses(el, outEndClasses, outStartClasses)
+              );
+            });
+          };
+          const onEnd = () => {
+            this.addOrRemoveClasses(el, [], outClasses.concat(outEndClasses));
+            dom_default.putSticky(
+              el,
+              "toggle",
+              (currentEl) => currentEl.style.display = "none"
+            );
+            el.dispatchEvent(new Event("phx:hide-end"));
+          };
+          el.dispatchEvent(new Event("phx:hide-start"));
+          if (blocking === false) {
+            onStart();
+            setTimeout(onEnd, time);
+          } else {
+            view.transition(time, onStart, onEnd);
+          }
+        } else {
+          if (eventType === "remove") {
+            return;
+          }
+          const onStart = () => {
+            this.addOrRemoveClasses(
+              el,
+              inStartClasses,
+              outClasses.concat(outStartClasses).concat(outEndClasses)
+            );
+            const stickyDisplay = display || this.defaultDisplay(el);
+            window.requestAnimationFrame(() => {
+              this.addOrRemoveClasses(el, inClasses, []);
+              window.requestAnimationFrame(() => {
+                dom_default.putSticky(
+                  el,
+                  "toggle",
+                  (currentEl) => currentEl.style.display = stickyDisplay
+                );
+                this.addOrRemoveClasses(el, inEndClasses, inStartClasses);
+              });
+            });
+          };
+          const onEnd = () => {
+            this.addOrRemoveClasses(el, [], inClasses.concat(inEndClasses));
+            el.dispatchEvent(new Event("phx:show-end"));
+          };
+          el.dispatchEvent(new Event("phx:show-start"));
+          if (blocking === false) {
+            onStart();
+            setTimeout(onEnd, time);
+          } else {
+            view.transition(time, onStart, onEnd);
+          }
+        }
+      } else {
+        if (this.isVisible(el)) {
+          window.requestAnimationFrame(() => {
+            el.dispatchEvent(new Event("phx:hide-start"));
+            dom_default.putSticky(
+              el,
+              "toggle",
+              (currentEl) => currentEl.style.display = "none"
+            );
+            el.dispatchEvent(new Event("phx:hide-end"));
+          });
+        } else {
+          window.requestAnimationFrame(() => {
+            el.dispatchEvent(new Event("phx:show-start"));
+            const stickyDisplay = display || this.defaultDisplay(el);
+            dom_default.putSticky(
+              el,
+              "toggle",
+              (currentEl) => currentEl.style.display = stickyDisplay
+            );
+            el.dispatchEvent(new Event("phx:show-end"));
+          });
+        }
+      }
+    },
+    toggleClasses(el, classes, transition, time, view, blocking) {
+      window.requestAnimationFrame(() => {
+        const [prevAdds, prevRemoves] = dom_default.getSticky(el, "classes", [[], []]);
+        const newAdds = classes.filter(
+          (name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name)
+        );
+        const newRemoves = classes.filter(
+          (name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name)
+        );
+        this.addOrRemoveClasses(
+          el,
+          newAdds,
+          newRemoves,
+          transition,
+          time,
+          view,
+          blocking
+        );
+      });
+    },
+    toggleAttr(el, attr, val1, val2) {
+      if (el.hasAttribute(attr)) {
+        if (val2 !== void 0) {
+          if (el.getAttribute(attr) === val1) {
+            this.setOrRemoveAttrs(el, [[attr, val2]], []);
+          } else {
+            this.setOrRemoveAttrs(el, [[attr, val1]], []);
+          }
+        } else {
+          this.setOrRemoveAttrs(el, [], [attr]);
+        }
+      } else {
+        this.setOrRemoveAttrs(el, [[attr, val1]], []);
+      }
+    },
+    addOrRemoveClasses(el, adds, removes, transition, time, view, blocking) {
+      time = time || default_transition_time;
+      const [transitionRun, transitionStart, transitionEnd] = transition || [
+        [],
+        [],
+        []
+      ];
+      if (transitionRun.length > 0) {
+        const onStart = () => {
+          this.addOrRemoveClasses(
+            el,
+            transitionStart,
+            [].concat(transitionRun).concat(transitionEnd)
+          );
+          window.requestAnimationFrame(() => {
+            this.addOrRemoveClasses(el, transitionRun, []);
+            window.requestAnimationFrame(
+              () => this.addOrRemoveClasses(el, transitionEnd, transitionStart)
+            );
+          });
+        };
+        const onDone = () => this.addOrRemoveClasses(
+          el,
+          adds.concat(transitionEnd),
+          removes.concat(transitionRun).concat(transitionStart)
+        );
+        if (blocking === false) {
+          onStart();
+          setTimeout(onDone, time);
+        } else {
+          view.transition(time, onStart, onDone);
+        }
+        return;
+      }
+      window.requestAnimationFrame(() => {
+        const [prevAdds, prevRemoves] = dom_default.getSticky(el, "classes", [[], []]);
+        const keepAdds = adds.filter(
+          (name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name)
+        );
+        const keepRemoves = removes.filter(
+          (name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name)
+        );
+        const newAdds = prevAdds.filter((name) => removes.indexOf(name) < 0).concat(keepAdds);
+        const newRemoves = prevRemoves.filter((name) => adds.indexOf(name) < 0).concat(keepRemoves);
+        dom_default.putSticky(el, "classes", (currentEl) => {
+          currentEl.classList.remove(...newRemoves);
+          currentEl.classList.add(...newAdds);
+          return [newAdds, newRemoves];
+        });
+      });
+    },
+    setOrRemoveAttrs(el, sets, removes) {
+      const [prevSets, prevRemoves] = dom_default.getSticky(el, "attrs", [[], []]);
+      const alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes);
+      const newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets);
+      const newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes);
+      dom_default.putSticky(el, "attrs", (currentEl) => {
+        newRemoves.forEach((attr) => currentEl.removeAttribute(attr));
+        newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));
+        return [newSets, newRemoves];
+      });
+    },
+    hasAllClasses(el, classes) {
+      return classes.every((name) => el.classList.contains(name));
+    },
+    isToggledOut(el, outClasses) {
+      return !this.isVisible(el) || this.hasAllClasses(el, outClasses);
+    },
+    filterToEls(liveSocket, sourceEl, { to }) {
+      const defaultQuery = () => {
+        if (typeof to === "string") {
+          return document.querySelectorAll(to);
+        } else if (to.closest) {
+          const toEl = sourceEl.closest(to.closest);
+          return toEl ? [toEl] : [];
+        } else if (to.inner) {
+          return sourceEl.querySelectorAll(to.inner);
+        }
+      };
+      return to ? liveSocket.jsQuerySelectorAll(sourceEl, to, defaultQuery) : [sourceEl];
+    },
+    defaultDisplay(el) {
+      return { tr: "table-row", td: "table-cell" }[el.tagName.toLowerCase()] || "block";
+    },
+    transitionClasses(val) {
+      if (!val) {
+        return null;
+      }
+      let [trans, tStart, tEnd] = Array.isArray(val) ? val : [val.split(" "), [], []];
+      trans = Array.isArray(trans) ? trans : trans.split(" ");
+      tStart = Array.isArray(tStart) ? tStart : tStart.split(" ");
+      tEnd = Array.isArray(tEnd) ? tEnd : tEnd.split(" ");
+      return [trans, tStart, tEnd];
+    }
+  };
+  var js_default = JS;
+  var js_commands_default = (liveSocket, eventType) => {
+    return {
+      exec(el, encodedJS) {
+        liveSocket.execJS(el, encodedJS, eventType);
+      },
+      show(el, opts = {}) {
+        const owner = liveSocket.owner(el);
+        js_default.show(
+          eventType,
+          owner,
+          el,
+          opts.display,
+          js_default.transitionClasses(opts.transition),
+          opts.time,
+          opts.blocking
+        );
+      },
+      hide(el, opts = {}) {
+        const owner = liveSocket.owner(el);
+        js_default.hide(
+          eventType,
+          owner,
+          el,
+          null,
+          js_default.transitionClasses(opts.transition),
+          opts.time,
+          opts.blocking
+        );
+      },
+      toggle(el, opts = {}) {
+        const owner = liveSocket.owner(el);
+        const inTransition = js_default.transitionClasses(opts.in);
+        const outTransition = js_default.transitionClasses(opts.out);
+        js_default.toggle(
+          eventType,
+          owner,
+          el,
+          opts.display,
+          inTransition,
+          outTransition,
+          opts.time,
+          opts.blocking
+        );
+      },
+      addClass(el, names, opts = {}) {
+        const classNames = Array.isArray(names) ? names : names.split(" ");
+        const owner = liveSocket.owner(el);
+        js_default.addOrRemoveClasses(
+          el,
+          classNames,
+          [],
+          js_default.transitionClasses(opts.transition),
+          opts.time,
+          owner,
+          opts.blocking
+        );
+      },
+      removeClass(el, names, opts = {}) {
+        const classNames = Array.isArray(names) ? names : names.split(" ");
+        const owner = liveSocket.owner(el);
+        js_default.addOrRemoveClasses(
+          el,
+          [],
+          classNames,
+          js_default.transitionClasses(opts.transition),
+          opts.time,
+          owner,
+          opts.blocking
+        );
+      },
+      toggleClass(el, names, opts = {}) {
+        const classNames = Array.isArray(names) ? names : names.split(" ");
+        const owner = liveSocket.owner(el);
+        js_default.toggleClasses(
+          el,
+          classNames,
+          js_default.transitionClasses(opts.transition),
+          opts.time,
+          owner,
+          opts.blocking
+        );
+      },
+      transition(el, transition, opts = {}) {
+        const owner = liveSocket.owner(el);
+        js_default.addOrRemoveClasses(
+          el,
+          [],
+          [],
+          js_default.transitionClasses(transition),
+          opts.time,
+          owner,
+          opts.blocking
+        );
+      },
+      setAttribute(el, attr, val) {
+        js_default.setOrRemoveAttrs(el, [[attr, val]], []);
+      },
+      removeAttribute(el, attr) {
+        js_default.setOrRemoveAttrs(el, [], [attr]);
+      },
+      toggleAttribute(el, attr, val1, val2) {
+        js_default.toggleAttr(el, attr, val1, val2);
+      },
+      push(el, type, opts = {}) {
+        liveSocket.withinOwners(el, (view) => {
+          const data = opts.value || {};
+          delete opts.value;
+          let e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
+          js_default.exec(e, eventType, type, view, el, ["push", { data, ...opts }]);
+        });
+      },
+      navigate(href, opts = {}) {
+        const customEvent = new CustomEvent("phx:exec");
+        liveSocket.historyRedirect(
+          customEvent,
+          href,
+          opts.replace ? "replace" : "push",
+          null,
+          null
+        );
+      },
+      patch(href, opts = {}) {
+        const customEvent = new CustomEvent("phx:exec");
+        liveSocket.pushHistoryPatch(
+          customEvent,
+          href,
+          opts.replace ? "replace" : "push",
+          null
+        );
+      },
+      ignoreAttributes(el, attrs) {
+        js_default.ignoreAttrs(el, Array.isArray(attrs) ? attrs : [attrs]);
+      }
+    };
+  };
+  var HOOK_ID = "hookId";
+  var DEAD_HOOK = "deadHook";
+  var viewHookID = 1;
+  var ViewHook = class _ViewHook {
+    get liveSocket() {
+      return this.__liveSocket();
+    }
+    static makeID() {
+      return viewHookID++;
+    }
+    static elementID(el) {
+      return dom_default.private(el, HOOK_ID);
+    }
+    static deadHook(el) {
+      return dom_default.private(el, DEAD_HOOK) === true;
+    }
+    constructor(view, el, callbacks) {
+      this.el = el;
+      this.__attachView(view);
+      this.__listeners = /* @__PURE__ */ new Set();
+      this.__isDisconnected = false;
+      dom_default.putPrivate(this.el, HOOK_ID, _ViewHook.makeID());
+      if (view && view.isDead) {
+        dom_default.putPrivate(this.el, DEAD_HOOK, true);
+      }
+      if (callbacks) {
+        const protectedProps = /* @__PURE__ */ new Set([
+          "el",
+          "liveSocket",
+          "__view",
+          "__listeners",
+          "__isDisconnected",
+          "constructor",
+          // Standard object properties
+          // Core ViewHook API methods
+          "js",
+          "pushEvent",
+          "pushEventTo",
+          "handleEvent",
+          "removeHandleEvent",
+          "upload",
+          "uploadTo",
+          // Internal lifecycle callers
+          "__mounted",
+          "__updated",
+          "__beforeUpdate",
+          "__destroyed",
+          "__reconnected",
+          "__disconnected",
+          "__cleanup__"
+        ]);
+        for (const key in callbacks) {
+          if (Object.prototype.hasOwnProperty.call(callbacks, key)) {
+            this[key] = callbacks[key];
+            if (protectedProps.has(key)) {
+              console.warn(
+                `Hook object for element #${el.id} overwrites core property '${key}'!`
+              );
+            }
+          }
+        }
+        const lifecycleMethods = [
+          "mounted",
+          "beforeUpdate",
+          "updated",
+          "destroyed",
+          "disconnected",
+          "reconnected"
+        ];
+        lifecycleMethods.forEach((methodName) => {
+          if (callbacks[methodName] && typeof callbacks[methodName] === "function") {
+            this[methodName] = callbacks[methodName];
+          }
+        });
+      }
+    }
+    /** @internal */
+    __attachView(view) {
+      if (view) {
+        this.__view = () => view;
+        this.__liveSocket = () => view.liveSocket;
+      } else {
+        this.__view = () => {
+          throw new Error(
+            `hook not yet attached to a live view: ${this.el.outerHTML}`
+          );
+        };
+        this.__liveSocket = () => {
+          throw new Error(
+            `hook not yet attached to a live view: ${this.el.outerHTML}`
+          );
+        };
+      }
+    }
+    // Default lifecycle methods
+    mounted() {
+    }
+    beforeUpdate() {
+    }
+    updated() {
+    }
+    destroyed() {
+    }
+    disconnected() {
+    }
+    reconnected() {
+    }
+    // Internal lifecycle callers - called by the View
+    /** @internal */
+    __mounted() {
+      this.mounted();
+    }
+    /** @internal */
+    __updated() {
+      this.updated();
+    }
+    /** @internal */
+    __beforeUpdate() {
+      this.beforeUpdate();
+    }
+    /** @internal */
+    __destroyed() {
+      this.destroyed();
+      dom_default.deletePrivate(this.el, HOOK_ID);
+    }
+    /** @internal */
+    __reconnected() {
+      if (this.__isDisconnected) {
+        this.__isDisconnected = false;
+        this.reconnected();
+      }
+    }
+    /** @internal */
+    __disconnected() {
+      this.__isDisconnected = true;
+      this.disconnected();
+    }
+    js() {
+      return {
+        ...js_commands_default(this.__view().liveSocket, "hook"),
+        exec: (encodedJS) => {
+          this.__view().liveSocket.execJS(this.el, encodedJS, "hook");
+        }
+      };
+    }
+    pushEvent(event, payload, onReply) {
+      const promise = this.__view().pushHookEvent(
+        this.el,
+        null,
+        event,
+        payload || {}
+      );
+      if (onReply === void 0) {
+        return promise.then(({ reply }) => reply);
+      }
+      promise.then(
+        ({ reply, ref }) => onReply(reply, ref)
+      ).catch(() => {
+      });
+    }
+    pushEventTo(selectorOrTarget, event, payload, onReply) {
+      if (onReply === void 0) {
+        const targetPair = [];
+        this.__view().withinTargets(
+          selectorOrTarget,
+          (view, targetCtx) => {
+            targetPair.push({ view, targetCtx });
+          }
+        );
+        const promises = targetPair.map(({ view, targetCtx }) => {
+          return view.pushHookEvent(this.el, targetCtx, event, payload || {});
+        });
+        return Promise.allSettled(promises);
+      }
+      this.__view().withinTargets(
+        selectorOrTarget,
+        (view, targetCtx) => {
+          view.pushHookEvent(this.el, targetCtx, event, payload || {}).then(
+            ({ reply, ref }) => onReply(reply, ref)
+          ).catch(() => {
+          });
+        }
+      );
+    }
+    handleEvent(event, callback) {
+      const callbackRef = {
+        event,
+        callback: (customEvent) => callback(customEvent.detail)
+      };
+      window.addEventListener(
+        `phx:${event}`,
+        callbackRef.callback
+      );
+      this.__listeners.add(callbackRef);
+      return callbackRef;
+    }
+    removeHandleEvent(ref) {
+      window.removeEventListener(
+        `phx:${ref.event}`,
+        ref.callback
+      );
+      this.__listeners.delete(ref);
+    }
+    upload(name, files) {
+      return this.__view().dispatchUploads(null, name, files);
+    }
+    uploadTo(selectorOrTarget, name, files) {
+      return this.__view().withinTargets(
+        selectorOrTarget,
+        (view, targetCtx) => {
+          view.dispatchUploads(targetCtx, name, files);
+        }
+      );
+    }
+    /** @internal */
+    __cleanup__() {
+      this.__listeners.forEach(
+        (callbackRef) => this.removeHandleEvent(callbackRef)
+      );
+    }
+  };
+  var prependFormDataKey = (key, prefix) => {
+    const isArray = key.endsWith("[]");
+    let baseKey = isArray ? key.slice(0, -2) : key;
+    baseKey = baseKey.replace(/([^\[\]]+)(\]?$)/, `${prefix}$1$2`);
+    if (isArray) {
+      baseKey += "[]";
+    }
+    return baseKey;
+  };
+  var serializeForm = (form, opts, onlyNames = []) => {
+    const { submitter } = opts;
+    let injectedElement;
+    if (submitter && submitter.name) {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      const formId = submitter.getAttribute("form");
+      if (formId) {
+        input.setAttribute("form", formId);
+      }
+      input.name = submitter.name;
+      input.value = submitter.value;
+      submitter.parentElement.insertBefore(input, submitter);
+      injectedElement = input;
+    }
+    const formData = new FormData(form);
+    const toRemove = [];
+    formData.forEach((val, key, _index) => {
+      if (val instanceof File) {
+        toRemove.push(key);
+      }
+    });
+    toRemove.forEach((key) => formData.delete(key));
+    const params = new URLSearchParams();
+    const { inputsUnused, onlyHiddenInputs } = Array.from(form.elements).reduce(
+      (acc, input) => {
+        const { inputsUnused: inputsUnused2, onlyHiddenInputs: onlyHiddenInputs2 } = acc;
+        const key = input.name;
+        if (!key) {
+          return acc;
+        }
+        if (inputsUnused2[key] === void 0) {
+          inputsUnused2[key] = true;
+        }
+        if (onlyHiddenInputs2[key] === void 0) {
+          onlyHiddenInputs2[key] = true;
+        }
+        const isUsed = dom_default.private(input, PHX_HAS_FOCUSED) || dom_default.private(input, PHX_HAS_SUBMITTED);
+        const isHidden = input.type === "hidden";
+        inputsUnused2[key] = inputsUnused2[key] && !isUsed;
+        onlyHiddenInputs2[key] = onlyHiddenInputs2[key] && isHidden;
+        return acc;
+      },
+      { inputsUnused: {}, onlyHiddenInputs: {} }
+    );
+    for (const [key, val] of formData.entries()) {
+      if (onlyNames.length === 0 || onlyNames.indexOf(key) >= 0) {
+        const isUnused = inputsUnused[key];
+        const hidden = onlyHiddenInputs[key];
+        if (isUnused && !(submitter && submitter.name == key) && !hidden) {
+          params.append(prependFormDataKey(key, "_unused_"), "");
+        }
+        if (typeof val === "string") {
+          params.append(key, val);
+        }
+      }
+    }
+    if (submitter && injectedElement) {
+      submitter.parentElement.removeChild(injectedElement);
+    }
+    return params.toString();
+  };
+  var View = class _View {
+    static closestView(el) {
+      const liveViewEl = el.closest(PHX_VIEW_SELECTOR);
+      return liveViewEl ? dom_default.private(liveViewEl, "view") : null;
+    }
+    constructor(el, liveSocket, parentView, flash, liveReferer) {
+      this.isDead = false;
+      this.liveSocket = liveSocket;
+      this.flash = flash;
+      this.parent = parentView;
+      this.root = parentView ? parentView.root : this;
+      this.el = el;
+      const boundView = dom_default.private(this.el, "view");
+      if (boundView !== void 0 && boundView.isDead !== true) {
+        logError(
+          `The DOM element for this view has already been bound to a view.
 
         An element can only ever be associated with a single view!
         Please ensure that you are not trying to initialize multiple LiveSockets on the same page.
         This could happen if you're accidentally trying to render your root layout more than once.
         Ensure that the template set on the LiveView is different than the root layout.
-      `,{view:o}),new Error("Cannot bind multiple views to the same DOM element.");u.putPrivate(this.el,"view",this),this.id=this.el.id,this.el.setAttribute(fe,this.root.id),this.ref=0,this.lastAckRef=null,this.childJoins=0,this.loaderTimer=null,this.disconnectedTimer=null,this.pendingDiffs=[],this.pendingForms=new Set,this.redirect=!1,this.href=null,this.joinCount=this.parent?this.parent.joinCount-1:0,this.joinAttempts=0,this.joinPending=!0,this.destroyed=!1,this.joinCallback=function(a){a&&a()},this.stopCallback=function(){},this.pendingJoinOps=[],this.viewHooks={},this.formSubmits=[],this.children=this.parent?null:{},this.root.children[this.id]={},this.formsForRecovery={},this.channel=this.liveSocket.channel(`lv:${this.id}`,()=>{let a=this.href&&this.expandURL(this.href);return{redirect:this.redirect?a:void 0,url:this.redirect?void 0:a||void 0,params:this.connectParams(r),session:this.getSession(),static:this.getStatic(),flash:this.flash,sticky:this.el.hasAttribute(Tt)}}),this.portalElementIds=new Set}setHref(e){this.href=e}setRedirect(e){this.redirect=!0,this.href=e}isMain(){return this.el.hasAttribute(Lt)}connectParams(e){let i=this.liveSocket.params(this.el),s=u.all(document,`[${this.binding(Oi)}]`).map(n=>n.src||n.href).filter(n=>typeof n=="string");return s.length>0&&(i._track_static=s),i._mounts=this.joinCount,i._mount_attempts=this.joinAttempts,i._live_referer=e,this.joinAttempts++,i}isConnected(){return this.channel.canPush()}getSession(){return this.el.getAttribute(ce)}getStatic(){let e=this.el.getAttribute(Ee);return e===""?null:e}destroy(e=function(){}){this.destroyAllChildren(),this.destroyPortalElements(),this.destroyed=!0,u.deletePrivate(this.el,"view"),delete this.root.children[this.id],this.parent&&delete this.root.children[this.parent.id][this.id],clearTimeout(this.loaderTimer);let i=()=>{e();for(let s in this.viewHooks)this.destroyHook(this.viewHooks[s])};u.markPhxChildDestroyed(this.el),this.log("destroyed",()=>["the child has been removed from the parent"]),this.channel.leave().receive("ok",i).receive("error",i).receive("timeout",i)}setContainerClasses(...e){this.el.classList.remove(Ut,be,Re,jt,Fe),this.el.classList.add(...e)}showLoader(e){if(clearTimeout(this.loaderTimer),e)this.loaderTimer=setTimeout(()=>this.showLoader(),e);else{for(let i in this.viewHooks)this.viewHooks[i].__disconnected();this.setContainerClasses(be)}}execAll(e){u.all(this.el,`[${e}]`,i=>this.liveSocket.execJS(i,i.getAttribute(e)))}hideLoader(){clearTimeout(this.loaderTimer),clearTimeout(this.disconnectedTimer),this.setContainerClasses(Ut),this.execAll(this.binding("connected"))}triggerReconnected(){for(let e in this.viewHooks)this.viewHooks[e].__reconnected()}log(e,i){this.liveSocket.log(this,e,i)}transition(e,i,s=function(){}){this.liveSocket.transition(e,i,s)}withinTargets(e,i,s=document){if(e instanceof HTMLElement||e instanceof SVGElement)return this.liveSocket.owner(e,n=>i(n,e));if(ue(e))u.findComponentNodeList(this.id,e,s).length===0?O(`no component found matching phx-target of ${e}`):i(this,parseInt(e));else{let n=Array.from(s.querySelectorAll(e));n.length===0&&O(`nothing found matching the phx-target selector "${e}"`),n.forEach(r=>this.liveSocket.owner(r,o=>i(o,r)))}}applyDiff(e,i,s){this.log(e,()=>["",ct(i)]);let{diff:n,reply:r,events:o,title:a}=ai.extract(i),h=o.reduce((f,g)=>(g.length===3&&g[2]==!0?f.pre.push(g.slice(0,-1)):f.post.push(g),f),{pre:[],post:[]});this.liveSocket.dispatchEvents(h.pre);let c=()=>{s({diff:n,reply:r,events:h.post}),(typeof a=="string"||e=="mount"&&this.isMain())&&window.requestAnimationFrame(()=>u.putTitle(a))};"onDocumentPatch"in this.liveSocket.domCallbacks?this.liveSocket.triggerDOM("onDocumentPatch",[c]):c()}onJoin(e){let{rendered:i,container:s,liveview_version:n,pid:r}=e;if(s){let[o,a]=s;this.el=u.replaceRootContainer(this.el,o,a)}this.childJoins=0,this.joinPending=!0,this.flash=null,this.root===this&&(this.formsForRecovery=this.getFormsForRecovery()),this.isMain()&&window.history.state===null&&Z.pushState("replace",{type:"patch",id:this.id,position:this.liveSocket.currentHistoryPosition}),n!==this.liveSocket.version()&&console.warn(`LiveView asset version mismatch. JavaScript version ${this.liveSocket.version()} vs. server ${n}. To avoid issues, please ensure that your assets use the same version as the server.`),r&&this.el.setAttribute(Bi,r),Z.dropLocal(this.liveSocket.localStorage,window.location.pathname,di),this.applyDiff("mount",i,({diff:o,events:a})=>{this.rendered=new ai(this.id,o);let[h,c]=this.renderContainer(null,"join");this.dropPendingRefs(),this.joinCount++,this.joinAttempts=0,this.maybeRecoverForms(h,()=>{this.onJoinComplete(e,h,c,a)})})}dropPendingRefs(){u.all(document,`[${ie}="${this.refSrc()}"]`,e=>{e.removeAttribute(Me),e.removeAttribute(ie),e.removeAttribute(B)})}onJoinComplete({live_patch:e},i,s,n){if(this.joinCount>1||this.parent&&!this.parent.isJoinPending())return this.applyJoinPatch(e,i,s,n);u.findPhxChildrenInFragment(i,this.id).filter(o=>{let a=o.id&&this.el.querySelector(`[id="${o.id}"]`),h=a&&a.getAttribute(Ee);return h&&o.setAttribute(Ee,h),a&&a.setAttribute(fe,this.root.id),this.joinChild(o)}).length===0?this.parent?(this.root.pendingJoinOps.push([this,()=>this.applyJoinPatch(e,i,s,n)]),this.parent.ackJoin(this)):(this.onAllChildJoinsComplete(),this.applyJoinPatch(e,i,s,n)):this.root.pendingJoinOps.push([this,()=>this.applyJoinPatch(e,i,s,n)])}attachTrueDocEl(){this.el=u.byId(this.id),this.el.setAttribute(fe,this.root.id)}execNewMounted(e=document){let i=this.binding(At),s=this.binding(Ct);this.all(e,`[${i}], [${s}]`,n=>{u.maintainPrivateHooks(n,n,i,s),this.maybeAddNewHook(n)}),this.all(e,`[${this.binding(Ue)}], [data-phx-${Ue}]`,n=>{this.maybeAddNewHook(n)}),this.all(e,`[${this.binding(qt)}]`,n=>{this.maybeMounted(n)})}all(e,i,s){u.all(e,i,n=>{this.ownsElement(n)&&s(n)})}applyJoinPatch(e,i,s,n){this.joinCount>1&&this.pendingJoinOps.length&&(this.pendingJoinOps.forEach(o=>typeof o=="function"&&o()),this.pendingJoinOps=[]),this.attachTrueDocEl();let r=new rt(this,this.el,this.id,i,s,null);if(r.markPrunableContentForRemoval(),this.performPatch(r,!1,!0),this.joinNewChildren(),this.execNewMounted(),this.joinPending=!1,this.liveSocket.dispatchEvents(n),this.applyPendingUpdates(),e){let{kind:o,to:a}=e;this.liveSocket.historyPatch(a,o)}this.hideLoader(),this.joinCount>1&&this.triggerReconnected(),this.stopCallback()}triggerBeforeUpdateHook(e,i){this.liveSocket.triggerDOM("onBeforeElUpdated",[e,i]);let s=this.getHook(e),n=s&&u.isIgnored(e,this.binding(ft));if(s&&!e.isEqualNode(i)&&!(n&&ts(e.dataset,i.dataset)))return s.__beforeUpdate(),s}maybeMounted(e){let i=e.getAttribute(this.binding(qt)),s=i&&u.private(e,"mounted");i&&!s&&(this.liveSocket.execJS(e,i),u.putPrivate(e,"mounted",!0))}maybeAddNewHook(e){let i=this.addHook(e);i&&i.__mounted()}performPatch(e,i,s=!1){let n=[],r=!1,o=new Set;return this.liveSocket.triggerDOM("onPatchStart",[e.targetContainer]),e.after("added",a=>{this.liveSocket.triggerDOM("onNodeAdded",[a]);let h=this.binding(At),c=this.binding(Ct);u.maintainPrivateHooks(a,a,h,c),this.maybeAddNewHook(a),a.getAttribute&&this.maybeMounted(a)}),e.after("phxChildAdded",a=>{u.isPhxSticky(a)?this.liveSocket.joinRootViews():r=!0}),e.before("updated",(a,h)=>{this.triggerBeforeUpdateHook(a,h)&&o.add(a.id),x.onBeforeElUpdated(a,h)}),e.after("updated",a=>{o.has(a.id)&&this.getHook(a).__updated()}),e.after("discarded",a=>{a.nodeType===Node.ELEMENT_NODE&&n.push(a)}),e.after("transitionsDiscarded",a=>this.afterElementsRemoved(a,i)),e.perform(s),this.afterElementsRemoved(n,i),this.liveSocket.triggerDOM("onPatchEnd",[e.targetContainer]),r}afterElementsRemoved(e,i){let s=[];e.forEach(n=>{let r=u.all(n,`[${Oe}="${this.id}"][${le}]`),o=u.all(n,`[${this.binding(Ue)}], [data-phx-hook]`);r.concat(n).forEach(a=>{let h=this.componentID(a);ue(h)&&s.indexOf(h)===-1&&a.getAttribute(Oe)===this.id&&s.push(h)}),o.concat(n).forEach(a=>{let h=this.getHook(a);h&&this.destroyHook(h)})}),i&&this.maybePushComponentsDestroyed(s)}joinNewChildren(){u.findPhxChildren(document,this.id).forEach(e=>this.joinChild(e))}maybeRecoverForms(e,i){let s=this.binding("change"),n=this.root.formsForRecovery,r=document.createElement("template");r.innerHTML=e,u.all(r.content,`[${Dt}]`).forEach(h=>{r.content.firstElementChild.appendChild(h.content.firstElementChild)});let o=r.content.firstElementChild;o.id=this.id,o.setAttribute(fe,this.root.id),o.setAttribute(ce,this.getSession()),o.setAttribute(Ee,this.getStatic()),o.setAttribute(ke,this.parent?this.parent.id:null);let a=u.all(r.content,"form").filter(h=>h.id&&n[h.id]).filter(h=>!this.pendingForms.has(h.id)).filter(h=>n[h.id].getAttribute(s)===h.getAttribute(s)).map(h=>[n[h.id],h]);if(a.length===0)return i();a.forEach(([h,c],f)=>{this.pendingForms.add(c.id),this.pushFormRecovery(h,c,r.content.firstElementChild,()=>{this.pendingForms.delete(c.id),f===a.length-1&&i()})})}getChildById(e){return this.root.children[this.id][e]}getDescendentByEl(e){return e.id===this.id?this:this.children[e.getAttribute(ke)]?.[e.id]}destroyDescendent(e){for(let i in this.root.children)for(let s in this.root.children[i])if(s===e)return this.root.children[i][s].destroy()}joinChild(e){if(!this.getChildById(e.id)){let s=new Si(e,this.liveSocket,this);return this.root.children[this.id][s.id]=s,s.join(),this.childJoins++,!0}}isJoinPending(){return this.joinPending}ackJoin(e){this.childJoins--,this.childJoins===0&&(this.parent?this.parent.ackJoin(this):this.onAllChildJoinsComplete())}onAllChildJoinsComplete(){this.pendingForms.clear(),this.formsForRecovery={},this.joinCallback(()=>{this.pendingJoinOps.forEach(([e,i])=>{e.isDestroyed()||i()}),this.pendingJoinOps=[]})}update(e,i,s=!1){if(this.isJoinPending()||this.liveSocket.hasPendingLink()&&this.root.isMain())return s||this.pendingDiffs.push({diff:e,events:i}),!1;this.rendered.mergeDiff(e);let n=!1;return this.rendered.isComponentOnlyDiff(e)?this.liveSocket.time("component patch complete",()=>{u.findExistingParentCIDs(this.id,this.rendered.componentCIDs(e)).forEach(o=>{this.componentPatch(this.rendered.getComponent(e,o),o)&&(n=!0)})}):Zt(e)||this.liveSocket.time("full patch complete",()=>{let[r,o]=this.renderContainer(e,"update"),a=new rt(this,this.el,this.id,r,o,null);n=this.performPatch(a,!0)}),this.liveSocket.dispatchEvents(i),n&&this.joinNewChildren(),!0}renderContainer(e,i){return this.liveSocket.time(`toString diff (${i})`,()=>{let s=this.el.tagName,n=e?this.rendered.componentCIDs(e):null,{buffer:r,streams:o}=this.rendered.toString(n);return[`<${s}>${r}</${s}>`,o]})}componentPatch(e,i){if(Zt(e))return!1;let{buffer:s,streams:n}=this.rendered.componentToString(i),r=new rt(this,this.el,this.id,s,n,i);return this.performPatch(r,!0)}getHook(e){return this.viewHooks[we.elementID(e)]}addHook(e){let i=we.elementID(e);if(!(e.getAttribute&&!this.ownsElement(e)))if(i&&!this.viewHooks[i]){if(we.deadHook(e))return;let s=u.getCustomElHook(e)||O(`no hook found for custom element: ${e.id}`);return this.viewHooks[i]=s,s.__attachView(this),s}else{if(i||!e.getAttribute)return;{let s=e.getAttribute(`data-phx-${Ue}`)||e.getAttribute(this.binding(Ue));if(!s)return;let n=this.liveSocket.getHookDefinition(s);if(n){if(!e.id){O(`no DOM ID for hook "${s}". Hooks require a unique ID on each element.`,e);return}let r;try{if(typeof n=="function"&&n.prototype instanceof we)r=new n(this,e);else if(typeof n=="object"&&n!==null)r=new we(this,e,n);else{O(`Invalid hook definition for "${s}". Expected a class extending ViewHook or an object definition.`,e);return}}catch(o){let a=o instanceof Error?o.message:String(o);O(`Failed to create hook "${s}": ${a}`,e);return}return this.viewHooks[we.elementID(r.el)]=r,r}else s!==null&&O(`unknown hook found for "${s}"`,e)}}}destroyHook(e){let i=we.elementID(e.el);e.__destroyed(),e.__cleanup__(),delete this.viewHooks[i]}applyPendingUpdates(){this.pendingDiffs=this.pendingDiffs.filter(({diff:e,events:i})=>!this.update(e,i,!0)),this.eachChild(e=>e.applyPendingUpdates())}eachChild(e){let i=this.root.children[this.id]||{};for(let s in i)e(this.getChildById(s))}onChannel(e,i){this.liveSocket.onChannel(this.channel,e,s=>{this.isJoinPending()?this.joinCount>1?this.pendingJoinOps.push(()=>i(s)):this.root.pendingJoinOps.push([this,()=>i(s)]):this.liveSocket.requestDOMUpdate(()=>i(s))})}bindChannel(){this.liveSocket.onChannel(this.channel,"diff",e=>{this.liveSocket.requestDOMUpdate(()=>{this.applyDiff("update",e,({diff:i,events:s})=>this.update(i,s))})}),this.onChannel("redirect",({to:e,flash:i})=>this.onRedirect({to:e,flash:i})),this.onChannel("live_patch",e=>this.onLivePatch(e)),this.onChannel("live_redirect",e=>this.onLiveRedirect(e)),this.channel.onError(e=>this.onError(e)),this.channel.onClose(e=>this.onClose(e))}destroyAllChildren(){this.eachChild(e=>e.destroy())}onLiveRedirect(e){let{to:i,kind:s,flash:n}=e,r=this.expandURL(i),o=new CustomEvent("phx:server-navigate",{detail:{to:i,kind:s,flash:n}});this.liveSocket.historyRedirect(o,r,s,n)}onLivePatch(e){let{to:i,kind:s}=e;this.href=this.expandURL(i),this.liveSocket.historyPatch(i,s)}expandURL(e){return e.startsWith("/")?`${window.location.protocol}//${window.location.host}${e}`:e}onRedirect({to:e,flash:i,reloadToken:s}){this.liveSocket.redirect(e,i,s)}isDestroyed(){return this.destroyed}joinDead(){this.isDead=!0}joinPush(){return this.joinPush=this.joinPush||this.channel.join(),this.joinPush}join(e){this.showLoader(this.liveSocket.loaderTimeout),this.bindChannel(),this.isMain()&&(this.stopCallback=this.liveSocket.withPageLoading({to:this.href,kind:"initial"})),this.joinCallback=i=>{i=i||function(){},e?e(this.joinCount,i):i()},this.wrapPush(()=>this.channel.join(),{ok:i=>this.liveSocket.requestDOMUpdate(()=>this.onJoin(i)),error:i=>this.onJoinError(i),timeout:()=>this.onJoinError({reason:"timeout"})})}onJoinError(e){if(e.reason==="reload"){this.log("error",()=>[`failed mount with ${e.status}. Falling back to page reload`,e]),this.onRedirect({to:this.liveSocket.main.href,reloadToken:e.token});return}else if(e.reason==="unauthorized"||e.reason==="stale"){this.log("error",()=>["unauthorized live_redirect. Falling back to page request",e]),this.onRedirect({to:this.liveSocket.main.href,flash:this.flash});return}if((e.redirect||e.live_redirect)&&(this.joinPending=!1,this.channel.leave()),e.redirect)return this.onRedirect(e.redirect);if(e.live_redirect)return this.onLiveRedirect(e.live_redirect);if(this.log("error",()=>["unable to join",e]),this.isMain())this.displayError([be,Re,Fe],{unstructuredError:e,errorKind:"server"}),this.liveSocket.isConnected()&&this.liveSocket.reloadWithJitter(this);else{this.joinAttempts>=Jt&&(this.root.displayError([be,Re,Fe],{unstructuredError:e,errorKind:"server"}),this.log("error",()=>[`giving up trying to mount after ${Jt} tries`,e]),this.destroy());let i=u.byId(this.el.id);i?(u.mergeAttrs(i,this.el),this.displayError([be,Re,Fe],{unstructuredError:e,errorKind:"server"}),this.el=i):this.destroy()}}onClose(e){if(!this.isDestroyed()){if(this.isMain()&&this.liveSocket.hasPendingLink()&&e!=="leave")return this.liveSocket.reloadWithJitter(this);this.destroyAllChildren(),this.liveSocket.dropActiveElement(this),this.liveSocket.isUnloaded()&&this.showLoader(Ji)}}onError(e){this.onClose(e),this.liveSocket.isConnected()&&this.log("error",()=>["view crashed",e]),this.liveSocket.isUnloaded()||(this.liveSocket.isConnected()?this.displayError([be,Re,Fe],{unstructuredError:e,errorKind:"server"}):this.displayError([be,Re,jt],{unstructuredError:e,errorKind:"client"}))}displayError(e,i={}){this.isMain()&&u.dispatchEvent(window,"phx:page-loading-start",{detail:{to:this.href,kind:"error",...i}}),this.showLoader(),this.setContainerClasses(...e),this.delayedDisconnected()}delayedDisconnected(){this.disconnectedTimer=setTimeout(()=>{this.execAll(this.binding("disconnected"))},this.liveSocket.disconnectedTimeout)}wrapPush(e,i){let s=this.liveSocket.getLatencySim(),n=s?r=>setTimeout(()=>!this.isDestroyed()&&r(),s):r=>!this.isDestroyed()&&r();n(()=>{e().receive("ok",r=>n(()=>i.ok&&i.ok(r))).receive("error",r=>n(()=>i.error&&i.error(r))).receive("timeout",()=>n(()=>i.timeout&&i.timeout()))})}pushWithReply(e,i,s){if(!this.isConnected())return Promise.reject(new Error("no connection"));let[n,[r],o]=e?e({payload:s}):[null,[],{}],a=this.joinCount,h=function(){};return o.page_loading&&(h=this.liveSocket.withPageLoading({kind:"element",target:r})),typeof s.cid!="number"&&delete s.cid,new Promise((c,f)=>{this.wrapPush(()=>this.channel.push(i,s,Ki),{ok:g=>{n!==null&&(this.lastAckRef=n);let b=w=>{g.redirect&&this.onRedirect(g.redirect),g.live_patch&&this.onLivePatch(g.live_patch),g.live_redirect&&this.onLiveRedirect(g.live_redirect),h(),c({resp:g,reply:w,ref:n})};g.diff?this.liveSocket.requestDOMUpdate(()=>{this.applyDiff("update",g.diff,({diff:w,reply:p,events:S})=>{n!==null&&this.undoRefs(n,s.event),this.update(w,S),b(p)})}):(n!==null&&this.undoRefs(n,s.event),b(null))},error:g=>f(new Error(`failed with reason: ${JSON.stringify(g)}`)),timeout:()=>{f(new Error("timeout")),this.joinCount===a&&this.liveSocket.reloadWithJitter(this,()=>{this.log("timeout",()=>["received timeout while communicating with server. Falling back to hard refresh for recovery"])})}})})}undoRefs(e,i,s){if(!this.isConnected())return;let n=`[${ie}="${this.refSrc()}"]`;s?(s=new Set(s),u.all(document,n,r=>{s&&!s.has(r)||(u.all(r,n,o=>this.undoElRef(o,e,i)),this.undoElRef(r,e,i))})):u.all(document,n,r=>this.undoElRef(r,e,i))}undoElRef(e,i,s){new Rt(e).maybeUndo(i,s,r=>{let o=new rt(this,e,this.id,r,[],null,{undoRef:i}),a=this.performPatch(o,!0);u.all(e,`[${ie}="${this.refSrc()}"]`,h=>this.undoElRef(h,i,s)),a&&this.joinNewChildren()})}refSrc(){return this.el.id}putRef(e,i,s,n={}){let r=this.ref++,o=this.binding(Bt);if(n.loading){let a=u.all(document,n.loading).map(h=>({el:h,lock:!0,loading:!0}));e=e.concat(a)}for(let{el:a,lock:h,loading:c}of e){if(!h&&!c)throw new Error("putRef requires lock or loading");if(a.setAttribute(ie,this.refSrc()),c&&a.setAttribute(Me,r),h&&a.setAttribute(B,r),!c||n.submitter&&!(a===n.submitter||a===n.form))continue;let f=new Promise(p=>{a.addEventListener(`phx:undo-lock:${r}`,()=>p(w),{once:!0})}),g=new Promise(p=>{a.addEventListener(`phx:undo-loading:${r}`,()=>p(w),{once:!0})});a.classList.add(`phx-${s}-loading`);let b=a.getAttribute(o);b!==null&&(a.getAttribute(ut)||a.setAttribute(ut,a.textContent),b!==""&&(a.textContent=b),a.setAttribute(Le,a.getAttribute(Le)||a.disabled),a.setAttribute("disabled",""));let w={event:i,eventType:s,ref:r,isLoading:c,isLocked:h,lockElements:e.filter(({lock:p})=>p).map(({el:p})=>p),loadingElements:e.filter(({loading:p})=>p).map(({el:p})=>p),unlock:p=>{p=Array.isArray(p)?p:[p],this.undoRefs(r,i,p)},lockComplete:f,loadingComplete:g,lock:p=>new Promise(S=>{if(this.isAcked(r))return S(w);p.setAttribute(B,r),p.setAttribute(ie,this.refSrc()),p.addEventListener(`phx:lock-stop:${r}`,()=>S(w),{once:!0})})};n.payload&&(w.payload=n.payload),n.target&&(w.target=n.target),n.originalEvent&&(w.originalEvent=n.originalEvent),a.dispatchEvent(new CustomEvent("phx:push",{detail:w,bubbles:!0,cancelable:!1})),i&&a.dispatchEvent(new CustomEvent(`phx:push:${i}`,{detail:w,bubbles:!0,cancelable:!1}))}return[r,e.map(({el:a})=>a),n]}isAcked(e){return this.lastAckRef!==null&&this.lastAckRef>=e}componentID(e){let i=e.getAttribute&&e.getAttribute(le);return i?parseInt(i):null}targetComponentID(e,i,s={}){if(ue(i))return i;let n=s.target||e.getAttribute(this.binding("target"));return ue(n)?parseInt(n):i&&(n!==null||s.target)?this.closestComponentID(i):null}closestComponentID(e){return ue(e)?e:e?De(e.closest(`[${le}],[${ve}]`),i=>{if(i.hasAttribute(le))return this.ownsElement(i)&&this.componentID(i);if(i.hasAttribute(ve)){let s=u.byId(i.getAttribute(ve));return this.closestComponentID(s)}}):null}pushHookEvent(e,i,s,n){if(!this.isConnected())return this.log("hook",()=>["unable to push hook event. LiveView not connected",s,n]),Promise.reject(new Error("unable to push hook event. LiveView not connected"));let r=()=>this.putRef([{el:e,loading:!0,lock:!0}],s,"hook",{payload:n,target:i});return this.pushWithReply(r,"event",{type:"hook",event:s,value:n,cid:this.closestComponentID(i)}).then(({resp:o,reply:a,ref:h})=>({reply:a,ref:h}))}extractMeta(e,i,s){let n=this.binding("value-");for(let r=0;r<e.attributes.length;r++){i||(i={});let o=e.attributes[r].name;o.startsWith(n)&&(i[o.replace(n,"")]=e.getAttribute(o))}if(e.value!==void 0&&!(e instanceof HTMLFormElement)&&(i||(i={}),i.value=e.value,e.tagName==="INPUT"&&gi.indexOf(e.type)>=0&&!e.checked&&delete i.value),s){i||(i={});for(let r in s)i[r]=s[r]}return i}pushEvent(e,i,s,n,r,o={},a){this.pushWithReply(h=>this.putRef([{el:i,loading:!0,lock:!0}],n,e,{...o,payload:h?.payload}),"event",{type:e,event:n,value:this.extractMeta(i,r,o.value),cid:this.targetComponentID(i,s,o)}).then(({reply:h})=>a&&a(h)).catch(h=>O("Failed to push event",h))}pushFileProgress(e,i,s,n=function(){}){this.liveSocket.withinOwners(e.form,(r,o)=>{r.pushWithReply(null,"progress",{event:e.getAttribute(r.binding(qi)),ref:e.getAttribute(pe),entry_ref:i,progress:s,cid:r.targetComponentID(e.form,o)}).then(()=>n()).catch(a=>O("Failed to push file progress",a))})}pushInput(e,i,s,n,r,o){if(!e.form)throw new Error("form events require the input to be inside a form");let a,h=ue(s)?s:this.targetComponentID(e.form,i,r),c=p=>this.putRef([{el:e,loading:!0,lock:!0},{el:e.form,loading:!0,lock:!0}],n,"change",{...r,payload:p?.payload}),f,g=this.extractMeta(e.form,{},r.value),b={};e instanceof HTMLButtonElement&&(b.submitter=e),e.getAttribute(this.binding("change"))?f=ot(e.form,b,[e.name]):f=ot(e.form,b),u.isUploadInput(e)&&e.files&&e.files.length>0&&W.trackFiles(e,Array.from(e.files)),a=W.serializeUploads(e);let w={type:"form",event:n,value:f,meta:{_target:r._target||"undefined",...g},uploads:a,cid:h};this.pushWithReply(c,"event",w).then(({resp:p})=>{u.isUploadInput(e)&&u.isAutoUpload(e)?Rt.onUnlock(e,()=>{if(W.filesAwaitingPreflight(e).length>0){let[S,A]=c();this.undoRefs(S,n,[e.form]),this.uploadFiles(e.form,n,i,S,h,$=>{o&&o(p),this.triggerAwaitingSubmit(e.form,n),this.undoRefs(S,n)})}}):o&&o(p)}).catch(p=>O("Failed to push input event",p))}triggerAwaitingSubmit(e,i){let s=this.getScheduledSubmit(e);if(s){let[n,r,o,a]=s;this.cancelSubmit(e,i),a()}}getScheduledSubmit(e){return this.formSubmits.find(([i,s,n,r])=>i.isSameNode(e))}scheduleSubmit(e,i,s,n){if(this.getScheduledSubmit(e))return!0;this.formSubmits.push([e,i,s,n])}cancelSubmit(e,i){this.formSubmits=this.formSubmits.filter(([s,n,r,o])=>s.isSameNode(e)?(this.undoRefs(n,i),!1):!0)}disableForm(e,i,s={}){let n=p=>!(Se(p,`${this.binding(ft)}=ignore`,p.form)||Se(p,"data-phx-update=ignore",p.form)),r=p=>p.hasAttribute(this.binding(Bt)),o=p=>p.tagName=="BUTTON",a=p=>["INPUT","TEXTAREA","SELECT"].includes(p.tagName),h=Array.from(e.elements),c=h.filter(r),f=h.filter(o).filter(n),g=h.filter(a).filter(n);f.forEach(p=>{p.setAttribute(Le,p.disabled),p.disabled=!0}),g.forEach(p=>{p.setAttribute(_t,p.readOnly),p.readOnly=!0,p.files&&(p.setAttribute(Le,p.disabled),p.disabled=!0)});let b=c.concat(f).concat(g).map(p=>({el:p,loading:!0,lock:!0})),w=[{el:e,loading:!0,lock:!1}].concat(b).reverse();return this.putRef(w,i,"submit",s)}pushFormSubmit(e,i,s,n,r,o){let a=c=>this.disableForm(e,s,{...r,form:e,payload:c?.payload,submitter:n});u.putPrivate(e,"submitter",n);let h=this.targetComponentID(e,i);if(W.hasUploadsInProgress(e)){let[c,f]=a(),g=()=>this.pushFormSubmit(e,i,s,n,r,o);return this.scheduleSubmit(e,c,r,g)}else if(W.inputsAwaitingPreflight(e).length>0){let[c,f]=a(),g=()=>[c,f,r];this.uploadFiles(e,s,i,c,h,b=>{if(W.inputsAwaitingPreflight(e).length>0)return this.undoRefs(c,s);let w=this.extractMeta(e,{},r.value),p=ot(e,{submitter:n});this.pushWithReply(g,"event",{type:"form",event:s,value:p,meta:w,cid:h}).then(({resp:S})=>o(S)).catch(S=>O("Failed to push form submit",S))})}else if(!(e.hasAttribute(ie)&&e.classList.contains("phx-submit-loading"))){let c=this.extractMeta(e,{},r.value),f=ot(e,{submitter:n});this.pushWithReply(a,"event",{type:"form",event:s,value:f,meta:c,cid:h}).then(({resp:g})=>o(g)).catch(g=>O("Failed to push form submit",g))}}uploadFiles(e,i,s,n,r,o){let a=this.joinCount,h=W.activeFileInputs(e),c=h.length;h.forEach(f=>{let g=new W(f,this,()=>{c--,c===0&&o()}),b=g.entries().map(p=>p.toPreflightPayload());if(b.length===0){c--;return}let w={ref:f.getAttribute(pe),entries:b,cid:this.targetComponentID(f.form,s)};this.log("upload",()=>["sending preflight request",w]),this.pushWithReply(null,"allow_upload",w).then(({resp:p})=>{if(this.log("upload",()=>["got preflight response",p]),g.entries().forEach(S=>{p.entries&&!p.entries[S.ref]&&this.handleFailedEntryPreflight(S.ref,"failed preflight",g)}),p.error||Object.keys(p.entries).length===0)this.undoRefs(n,i),(p.error||[]).map(([A,$])=>{this.handleFailedEntryPreflight(A,$,g)});else{let S=A=>{this.channel.onError(()=>{this.joinCount===a&&A()})};g.initAdapterUpload(p,S,this.liveSocket)}}).catch(p=>O("Failed to push upload",p))})}handleFailedEntryPreflight(e,i,s){if(s.isAutoUpload()){let n=s.entries().find(r=>r.ref===e.toString());n&&n.cancel()}else s.entries().map(n=>n.cancel());this.log("upload",()=>[`error for entry ${e}`,i])}dispatchUploads(e,i,s){let n=this.targetCtxElement(e)||this.el,r=u.findUploadInputs(n).filter(o=>o.name===i);r.length===0?O(`no live file inputs found matching the name "${i}"`):r.length>1?O(`duplicate live file inputs found matching the name "${i}"`):u.dispatchEvent(r[0],fi,{detail:{files:s}})}targetCtxElement(e){if(ue(e)){let[i]=u.findComponentNodeList(this.id,e);return i}else return e||null}pushFormRecovery(e,i,s,n){let r=this.binding("change"),o=i.getAttribute(this.binding("target"))||i,a=i.getAttribute(this.binding(Vt))||i.getAttribute(this.binding("change")),h=Array.from(e.elements).filter(g=>u.isFormInput(g)&&g.name&&!g.hasAttribute(r));if(h.length===0){n();return}h.forEach(g=>g.hasAttribute(pe)&&W.clearFiles(g));let c=h.find(g=>g.type!=="hidden")||h[0],f=0;this.withinTargets(o,(g,b)=>{let w=this.targetComponentID(i,b);f++;let p=new CustomEvent("phx:form-recovery",{detail:{sourceElement:e}});x.exec(p,"change",a,this,c,["push",{_target:c.name,targetView:g,targetCtx:b,newCid:w,callback:()=>{f--,f===0&&n()}}])},s)}pushLinkPatch(e,i,s,n){let r=this.liveSocket.setPendingLink(i),o=e.isTrusted&&e.type!=="popstate",a=s?()=>this.putRef([{el:s,loading:o,lock:!0}],null,"click"):null,h=()=>this.liveSocket.redirect(window.location.href),c=i.startsWith("/")?`${location.protocol}//${location.host}${i}`:i;this.pushWithReply(a,"live_patch",{url:c}).then(({resp:f})=>{this.liveSocket.requestDOMUpdate(()=>{if(f.link_redirect)this.liveSocket.replaceMain(i,null,n,r);else{if(f.redirect)return;this.liveSocket.commitPendingLink(r)&&(this.href=i),this.applyPendingUpdates(),n&&n(r)}})},({error:f,timeout:g})=>h())}getFormsForRecovery(){if(this.joinCount===0)return{};let e=this.binding("change");return u.all(document,`#${CSS.escape(this.id)} form[${e}], [${Ae}="${CSS.escape(this.id)}"] form[${e}]`).filter(i=>i.id).filter(i=>i.elements.length>0).filter(i=>i.getAttribute(this.binding(Vt))!=="ignore").map(i=>{let s=i.cloneNode(!0);xt(s,i,{onBeforeElUpdated:(r,o)=>(u.copyPrivates(r,o),r.getAttribute("form")===i.id?(r.parentNode.removeChild(r),!1):!0)});let n=document.querySelectorAll(`[form="${CSS.escape(i.id)}"]`);return Array.from(n).forEach(r=>{let o=r.cloneNode(!0);xt(o,r),u.copyPrivates(o,r),o.removeAttribute("form"),s.appendChild(o)}),s}).reduce((i,s)=>(i[s.id]=s,i),{})}maybePushComponentsDestroyed(e){let i=e.filter(n=>u.findComponentNodeList(this.id,n).length===0),s=n=>{this.isDestroyed()||O("Failed to push components destroyed",n)};i.length>0&&(i.forEach(n=>this.rendered.resetRender(n)),this.pushWithReply(null,"cids_will_destroy",{cids:i}).then(()=>{this.liveSocket.requestDOMUpdate(()=>{let n=i.filter(r=>u.findComponentNodeList(this.id,r).length===0);n.length>0&&this.pushWithReply(null,"cids_destroyed",{cids:n}).then(({resp:r})=>{this.rendered.pruneCIDs(r.cids)}).catch(s)})}).catch(s))}ownsElement(e){let i=u.closestViewEl(e);return e.getAttribute(ke)===this.id||i&&i.id===this.id||!i&&this.isDead}submitForm(e,i,s,n,r={}){u.putPrivate(e,Xe,!0),Array.from(e.elements).forEach(a=>u.putPrivate(a,Xe,!0)),this.liveSocket.blurActiveElement(this),this.pushFormSubmit(e,i,s,n,r,()=>{this.liveSocket.restorePreviouslyActiveFocus()})}binding(e){return this.liveSocket.binding(e)}pushPortalElementId(e){this.portalElementIds.add(e)}dropPortalElementId(e){this.portalElementIds.delete(e)}destroyPortalElements(){this.liveSocket.unloaded||this.portalElementIds.forEach(e=>{let i=document.getElementById(e);i&&i.remove()})}};var xs=class{constructor(t,e,i={}){if(this.unloaded=!1,!e||e.constructor.name==="Object")throw new Error(`
+      `,
+          { view: boundView }
+        );
+        throw new Error("Cannot bind multiple views to the same DOM element.");
+      }
+      dom_default.putPrivate(this.el, "view", this);
+      this.id = this.el.id;
+      this.el.setAttribute(PHX_ROOT_ID, this.root.id);
+      this.ref = 0;
+      this.lastAckRef = null;
+      this.childJoins = 0;
+      this.loaderTimer = null;
+      this.disconnectedTimer = null;
+      this.pendingDiffs = [];
+      this.pendingForms = /* @__PURE__ */ new Set();
+      this.redirect = false;
+      this.href = null;
+      this.joinCount = this.parent ? this.parent.joinCount - 1 : 0;
+      this.joinAttempts = 0;
+      this.joinPending = true;
+      this.destroyed = false;
+      this.joinCallback = function(onDone) {
+        onDone && onDone();
+      };
+      this.stopCallback = function() {
+      };
+      this.pendingJoinOps = [];
+      this.viewHooks = {};
+      this.formSubmits = [];
+      this.children = this.parent ? null : {};
+      this.root.children[this.id] = {};
+      this.formsForRecovery = {};
+      this.channel = this.liveSocket.channel(`lv:${this.id}`, () => {
+        const url = this.href && this.expandURL(this.href);
+        return {
+          redirect: this.redirect ? url : void 0,
+          url: this.redirect ? void 0 : url || void 0,
+          params: this.connectParams(liveReferer),
+          session: this.getSession(),
+          static: this.getStatic(),
+          flash: this.flash,
+          sticky: this.el.hasAttribute(PHX_STICKY)
+        };
+      });
+      this.portalElementIds = /* @__PURE__ */ new Set();
+    }
+    setHref(href) {
+      this.href = href;
+    }
+    setRedirect(href) {
+      this.redirect = true;
+      this.href = href;
+    }
+    isMain() {
+      return this.el.hasAttribute(PHX_MAIN);
+    }
+    connectParams(liveReferer) {
+      const params = this.liveSocket.params(this.el);
+      const manifest = dom_default.all(document, `[${this.binding(PHX_TRACK_STATIC)}]`).map((node) => node.src || node.href).filter((url) => typeof url === "string");
+      if (manifest.length > 0) {
+        params["_track_static"] = manifest;
+      }
+      params["_mounts"] = this.joinCount;
+      params["_mount_attempts"] = this.joinAttempts;
+      params["_live_referer"] = liveReferer;
+      this.joinAttempts++;
+      return params;
+    }
+    isConnected() {
+      return this.channel.canPush();
+    }
+    getSession() {
+      return this.el.getAttribute(PHX_SESSION);
+    }
+    getStatic() {
+      const val = this.el.getAttribute(PHX_STATIC);
+      return val === "" ? null : val;
+    }
+    destroy(callback = function() {
+    }) {
+      this.destroyAllChildren();
+      this.destroyPortalElements();
+      this.destroyed = true;
+      dom_default.deletePrivate(this.el, "view");
+      delete this.root.children[this.id];
+      if (this.parent) {
+        delete this.root.children[this.parent.id][this.id];
+      }
+      clearTimeout(this.loaderTimer);
+      const onFinished = () => {
+        callback();
+        for (const id in this.viewHooks) {
+          this.destroyHook(this.viewHooks[id]);
+        }
+      };
+      dom_default.markPhxChildDestroyed(this.el);
+      this.log("destroyed", () => ["the child has been removed from the parent"]);
+      this.channel.leave().receive("ok", onFinished).receive("error", onFinished).receive("timeout", onFinished);
+    }
+    setContainerClasses(...classes) {
+      this.el.classList.remove(
+        PHX_CONNECTED_CLASS,
+        PHX_LOADING_CLASS,
+        PHX_ERROR_CLASS,
+        PHX_CLIENT_ERROR_CLASS,
+        PHX_SERVER_ERROR_CLASS
+      );
+      this.el.classList.add(...classes);
+    }
+    showLoader(timeout) {
+      clearTimeout(this.loaderTimer);
+      if (timeout) {
+        this.loaderTimer = setTimeout(() => this.showLoader(), timeout);
+      } else {
+        for (const id in this.viewHooks) {
+          this.viewHooks[id].__disconnected();
+        }
+        this.setContainerClasses(PHX_LOADING_CLASS);
+      }
+    }
+    execAll(binding) {
+      dom_default.all(
+        this.el,
+        `[${binding}]`,
+        (el) => this.liveSocket.execJS(el, el.getAttribute(binding))
+      );
+    }
+    hideLoader() {
+      clearTimeout(this.loaderTimer);
+      clearTimeout(this.disconnectedTimer);
+      this.setContainerClasses(PHX_CONNECTED_CLASS);
+      this.execAll(this.binding("connected"));
+    }
+    triggerReconnected() {
+      for (const id in this.viewHooks) {
+        this.viewHooks[id].__reconnected();
+      }
+    }
+    log(kind, msgCallback) {
+      this.liveSocket.log(this, kind, msgCallback);
+    }
+    transition(time, onStart, onDone = function() {
+    }) {
+      this.liveSocket.transition(time, onStart, onDone);
+    }
+    // calls the callback with the view and target element for the given phxTarget
+    // targets can be:
+    //  * an element itself, then it is simply passed to liveSocket.owner;
+    //  * a CID (Component ID), then we first search the component's element in the DOM
+    //  * a selector, then we search the selector in the DOM and call the callback
+    //    for each element found with the corresponding owner view
+    withinTargets(phxTarget, callback, dom = document) {
+      if (phxTarget instanceof HTMLElement || phxTarget instanceof SVGElement) {
+        return this.liveSocket.owner(
+          phxTarget,
+          (view) => callback(view, phxTarget)
+        );
+      }
+      if (isCid(phxTarget)) {
+        const targets = dom_default.findComponentNodeList(this.id, phxTarget, dom);
+        if (targets.length === 0) {
+          logError(`no component found matching phx-target of ${phxTarget}`);
+        } else {
+          callback(this, parseInt(phxTarget));
+        }
+      } else {
+        const targets = Array.from(dom.querySelectorAll(phxTarget));
+        if (targets.length === 0) {
+          logError(
+            `nothing found matching the phx-target selector "${phxTarget}"`
+          );
+        }
+        targets.forEach(
+          (target) => this.liveSocket.owner(target, (view) => callback(view, target))
+        );
+      }
+    }
+    applyDiff(type, rawDiff, callback) {
+      this.log(type, () => ["", clone(rawDiff)]);
+      const { diff, reply, events, title } = Rendered.extract(rawDiff);
+      const ev = events.reduce(
+        (acc, args) => {
+          if (args.length === 3 && args[2] == true) {
+            acc.pre.push(args.slice(0, -1));
+          } else {
+            acc.post.push(args);
+          }
+          return acc;
+        },
+        { pre: [], post: [] }
+      );
+      this.liveSocket.dispatchEvents(ev.pre);
+      const update = () => {
+        callback({ diff, reply, events: ev.post });
+        if (typeof title === "string" || type == "mount" && this.isMain()) {
+          window.requestAnimationFrame(() => dom_default.putTitle(title));
+        }
+      };
+      if ("onDocumentPatch" in this.liveSocket.domCallbacks) {
+        this.liveSocket.triggerDOM("onDocumentPatch", [update]);
+      } else {
+        update();
+      }
+    }
+    onJoin(resp) {
+      const { rendered, container, liveview_version, pid } = resp;
+      if (container) {
+        const [tag, attrs] = container;
+        this.el = dom_default.replaceRootContainer(this.el, tag, attrs);
+      }
+      this.childJoins = 0;
+      this.joinPending = true;
+      this.flash = null;
+      if (this.root === this) {
+        this.formsForRecovery = this.getFormsForRecovery();
+      }
+      if (this.isMain() && window.history.state === null) {
+        browser_default.pushState("replace", {
+          type: "patch",
+          id: this.id,
+          position: this.liveSocket.currentHistoryPosition
+        });
+      }
+      if (liveview_version !== this.liveSocket.version()) {
+        console.warn(
+          `LiveView asset version mismatch. JavaScript version ${this.liveSocket.version()} vs. server ${liveview_version}. To avoid issues, please ensure that your assets use the same version as the server.`
+        );
+      }
+      if (pid) {
+        this.el.setAttribute(PHX_LV_PID, pid);
+      }
+      browser_default.dropLocal(
+        this.liveSocket.localStorage,
+        window.location.pathname,
+        CONSECUTIVE_RELOADS
+      );
+      this.applyDiff("mount", rendered, ({ diff, events }) => {
+        this.rendered = new Rendered(this.id, diff);
+        const [html, streams] = this.renderContainer(null, "join");
+        this.dropPendingRefs();
+        this.joinCount++;
+        this.joinAttempts = 0;
+        this.maybeRecoverForms(html, () => {
+          this.onJoinComplete(resp, html, streams, events);
+        });
+      });
+    }
+    dropPendingRefs() {
+      dom_default.all(document, `[${PHX_REF_SRC}="${this.refSrc()}"]`, (el) => {
+        el.removeAttribute(PHX_REF_LOADING);
+        el.removeAttribute(PHX_REF_SRC);
+        el.removeAttribute(PHX_REF_LOCK);
+      });
+    }
+    onJoinComplete({ live_patch }, html, streams, events) {
+      if (this.joinCount > 1 || this.parent && !this.parent.isJoinPending()) {
+        return this.applyJoinPatch(live_patch, html, streams, events);
+      }
+      const newChildren = dom_default.findPhxChildrenInFragment(html, this.id).filter(
+        (toEl) => {
+          const fromEl = toEl.id && this.el.querySelector(`[id="${toEl.id}"]`);
+          const phxStatic = fromEl && fromEl.getAttribute(PHX_STATIC);
+          if (phxStatic) {
+            toEl.setAttribute(PHX_STATIC, phxStatic);
+          }
+          if (fromEl) {
+            fromEl.setAttribute(PHX_ROOT_ID, this.root.id);
+          }
+          return this.joinChild(toEl);
+        }
+      );
+      if (newChildren.length === 0) {
+        if (this.parent) {
+          this.root.pendingJoinOps.push([
+            this,
+            () => this.applyJoinPatch(live_patch, html, streams, events)
+          ]);
+          this.parent.ackJoin(this);
+        } else {
+          this.onAllChildJoinsComplete();
+          this.applyJoinPatch(live_patch, html, streams, events);
+        }
+      } else {
+        this.root.pendingJoinOps.push([
+          this,
+          () => this.applyJoinPatch(live_patch, html, streams, events)
+        ]);
+      }
+    }
+    attachTrueDocEl() {
+      this.el = dom_default.byId(this.id);
+      this.el.setAttribute(PHX_ROOT_ID, this.root.id);
+    }
+    // this is invoked for dead and live views, so we must filter by
+    // by owner to ensure we aren't duplicating hooks across disconnect
+    // and connected states. This also handles cases where hooks exist
+    // in a root layout with a LV in the body
+    execNewMounted(parent = document) {
+      let phxViewportTop = this.binding(PHX_VIEWPORT_TOP);
+      let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);
+      this.all(
+        parent,
+        `[${phxViewportTop}], [${phxViewportBottom}]`,
+        (hookEl) => {
+          dom_default.maintainPrivateHooks(
+            hookEl,
+            hookEl,
+            phxViewportTop,
+            phxViewportBottom
+          );
+          this.maybeAddNewHook(hookEl);
+        }
+      );
+      this.all(
+        parent,
+        `[${this.binding(PHX_HOOK)}], [data-phx-${PHX_HOOK}]`,
+        (hookEl) => {
+          this.maybeAddNewHook(hookEl);
+        }
+      );
+      this.all(parent, `[${this.binding(PHX_MOUNTED)}]`, (el) => {
+        this.maybeMounted(el);
+      });
+    }
+    all(parent, selector, callback) {
+      dom_default.all(parent, selector, (el) => {
+        if (this.ownsElement(el)) {
+          callback(el);
+        }
+      });
+    }
+    applyJoinPatch(live_patch, html, streams, events) {
+      if (this.joinCount > 1) {
+        if (this.pendingJoinOps.length) {
+          this.pendingJoinOps.forEach((cb) => typeof cb === "function" && cb());
+          this.pendingJoinOps = [];
+        }
+      }
+      this.attachTrueDocEl();
+      const patch = new DOMPatch(this, this.el, this.id, html, streams, null);
+      patch.markPrunableContentForRemoval();
+      this.performPatch(patch, false, true);
+      this.joinNewChildren();
+      this.execNewMounted();
+      this.joinPending = false;
+      this.liveSocket.dispatchEvents(events);
+      this.applyPendingUpdates();
+      if (live_patch) {
+        const { kind, to } = live_patch;
+        this.liveSocket.historyPatch(to, kind);
+      }
+      this.hideLoader();
+      if (this.joinCount > 1) {
+        this.triggerReconnected();
+      }
+      this.stopCallback();
+    }
+    triggerBeforeUpdateHook(fromEl, toEl) {
+      this.liveSocket.triggerDOM("onBeforeElUpdated", [fromEl, toEl]);
+      const hook = this.getHook(fromEl);
+      const isIgnored = hook && dom_default.isIgnored(fromEl, this.binding(PHX_UPDATE));
+      if (hook && !fromEl.isEqualNode(toEl) && !(isIgnored && isEqualObj(fromEl.dataset, toEl.dataset))) {
+        hook.__beforeUpdate();
+        return hook;
+      }
+    }
+    maybeMounted(el) {
+      const phxMounted = el.getAttribute(this.binding(PHX_MOUNTED));
+      const hasBeenInvoked = phxMounted && dom_default.private(el, "mounted");
+      if (phxMounted && !hasBeenInvoked) {
+        this.liveSocket.execJS(el, phxMounted);
+        dom_default.putPrivate(el, "mounted", true);
+      }
+    }
+    maybeAddNewHook(el) {
+      const newHook = this.addHook(el);
+      if (newHook) {
+        newHook.__mounted();
+      }
+    }
+    performPatch(patch, pruneCids, isJoinPatch = false) {
+      const removedEls = [];
+      let phxChildrenAdded = false;
+      const updatedHookIds = /* @__PURE__ */ new Set();
+      this.liveSocket.triggerDOM("onPatchStart", [patch.targetContainer]);
+      patch.after("added", (el) => {
+        this.liveSocket.triggerDOM("onNodeAdded", [el]);
+        const phxViewportTop = this.binding(PHX_VIEWPORT_TOP);
+        const phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);
+        dom_default.maintainPrivateHooks(el, el, phxViewportTop, phxViewportBottom);
+        this.maybeAddNewHook(el);
+        if (el.getAttribute) {
+          this.maybeMounted(el);
+        }
+      });
+      patch.after("phxChildAdded", (el) => {
+        if (dom_default.isPhxSticky(el)) {
+          this.liveSocket.joinRootViews();
+        } else {
+          phxChildrenAdded = true;
+        }
+      });
+      patch.before("updated", (fromEl, toEl) => {
+        const hook = this.triggerBeforeUpdateHook(fromEl, toEl);
+        if (hook) {
+          updatedHookIds.add(fromEl.id);
+        }
+        js_default.onBeforeElUpdated(fromEl, toEl);
+      });
+      patch.after("updated", (el) => {
+        if (updatedHookIds.has(el.id)) {
+          this.getHook(el).__updated();
+        }
+      });
+      patch.after("discarded", (el) => {
+        if (el.nodeType === Node.ELEMENT_NODE) {
+          removedEls.push(el);
+        }
+      });
+      patch.after(
+        "transitionsDiscarded",
+        (els) => this.afterElementsRemoved(els, pruneCids)
+      );
+      patch.perform(isJoinPatch);
+      this.afterElementsRemoved(removedEls, pruneCids);
+      this.liveSocket.triggerDOM("onPatchEnd", [patch.targetContainer]);
+      return phxChildrenAdded;
+    }
+    afterElementsRemoved(elements, pruneCids) {
+      const destroyedCIDs = [];
+      elements.forEach((parent) => {
+        const components = dom_default.all(
+          parent,
+          `[${PHX_VIEW_REF}="${this.id}"][${PHX_COMPONENT}]`
+        );
+        const hooks = dom_default.all(
+          parent,
+          `[${this.binding(PHX_HOOK)}], [data-phx-hook]`
+        );
+        components.concat(parent).forEach((el) => {
+          const cid = this.componentID(el);
+          if (isCid(cid) && destroyedCIDs.indexOf(cid) === -1 && el.getAttribute(PHX_VIEW_REF) === this.id) {
+            destroyedCIDs.push(cid);
+          }
+        });
+        hooks.concat(parent).forEach((hookEl) => {
+          const hook = this.getHook(hookEl);
+          hook && this.destroyHook(hook);
+        });
+      });
+      if (pruneCids) {
+        this.maybePushComponentsDestroyed(destroyedCIDs);
+      }
+    }
+    joinNewChildren() {
+      dom_default.findPhxChildren(document, this.id).forEach((el) => this.joinChild(el));
+    }
+    maybeRecoverForms(html, callback) {
+      const phxChange = this.binding("change");
+      const oldForms = this.root.formsForRecovery;
+      const template = document.createElement("template");
+      template.innerHTML = html;
+      dom_default.all(template.content, `[${PHX_PORTAL}]`).forEach((portalTemplate) => {
+        template.content.firstElementChild.appendChild(
+          portalTemplate.content.firstElementChild
+        );
+      });
+      const rootEl = template.content.firstElementChild;
+      rootEl.id = this.id;
+      rootEl.setAttribute(PHX_ROOT_ID, this.root.id);
+      rootEl.setAttribute(PHX_SESSION, this.getSession());
+      rootEl.setAttribute(PHX_STATIC, this.getStatic());
+      rootEl.setAttribute(PHX_PARENT_ID, this.parent ? this.parent.id : null);
+      const formsToRecover = (
+        // we go over all forms in the new DOM; because this is only the HTML for the current
+        // view, we can be sure that all forms are owned by this view:
+        dom_default.all(template.content, "form").filter((newForm) => newForm.id && oldForms[newForm.id]).filter((newForm) => !this.pendingForms.has(newForm.id)).filter(
+          (newForm) => oldForms[newForm.id].getAttribute(phxChange) === newForm.getAttribute(phxChange)
+        ).map((newForm) => {
+          return [oldForms[newForm.id], newForm];
+        })
+      );
+      if (formsToRecover.length === 0) {
+        return callback();
+      }
+      formsToRecover.forEach(([oldForm, newForm], i) => {
+        this.pendingForms.add(newForm.id);
+        this.pushFormRecovery(
+          oldForm,
+          newForm,
+          template.content.firstElementChild,
+          () => {
+            this.pendingForms.delete(newForm.id);
+            if (i === formsToRecover.length - 1) {
+              callback();
+            }
+          }
+        );
+      });
+    }
+    getChildById(id) {
+      return this.root.children[this.id][id];
+    }
+    getDescendentByEl(el) {
+      if (el.id === this.id) {
+        return this;
+      } else {
+        return this.children[el.getAttribute(PHX_PARENT_ID)]?.[el.id];
+      }
+    }
+    destroyDescendent(id) {
+      for (const parentId in this.root.children) {
+        for (const childId in this.root.children[parentId]) {
+          if (childId === id) {
+            return this.root.children[parentId][childId].destroy();
+          }
+        }
+      }
+    }
+    joinChild(el) {
+      const child = this.getChildById(el.id);
+      if (!child) {
+        const view = new _View(el, this.liveSocket, this);
+        this.root.children[this.id][view.id] = view;
+        view.join();
+        this.childJoins++;
+        return true;
+      }
+    }
+    isJoinPending() {
+      return this.joinPending;
+    }
+    ackJoin(_child) {
+      this.childJoins--;
+      if (this.childJoins === 0) {
+        if (this.parent) {
+          this.parent.ackJoin(this);
+        } else {
+          this.onAllChildJoinsComplete();
+        }
+      }
+    }
+    onAllChildJoinsComplete() {
+      this.pendingForms.clear();
+      this.formsForRecovery = {};
+      this.joinCallback(() => {
+        this.pendingJoinOps.forEach(([view, op]) => {
+          if (!view.isDestroyed()) {
+            op();
+          }
+        });
+        this.pendingJoinOps = [];
+      });
+    }
+    update(diff, events, isPending = false) {
+      if (this.isJoinPending() || this.liveSocket.hasPendingLink() && this.root.isMain()) {
+        if (!isPending) {
+          this.pendingDiffs.push({ diff, events });
+        }
+        return false;
+      }
+      this.rendered.mergeDiff(diff);
+      let phxChildrenAdded = false;
+      if (this.rendered.isComponentOnlyDiff(diff)) {
+        this.liveSocket.time("component patch complete", () => {
+          const parentCids = dom_default.findExistingParentCIDs(
+            this.id,
+            this.rendered.componentCIDs(diff)
+          );
+          parentCids.forEach((parentCID) => {
+            if (this.componentPatch(
+              this.rendered.getComponent(diff, parentCID),
+              parentCID
+            )) {
+              phxChildrenAdded = true;
+            }
+          });
+        });
+      } else if (!isEmpty(diff)) {
+        this.liveSocket.time("full patch complete", () => {
+          const [html, streams] = this.renderContainer(diff, "update");
+          const patch = new DOMPatch(this, this.el, this.id, html, streams, null);
+          phxChildrenAdded = this.performPatch(patch, true);
+        });
+      }
+      this.liveSocket.dispatchEvents(events);
+      if (phxChildrenAdded) {
+        this.joinNewChildren();
+      }
+      return true;
+    }
+    renderContainer(diff, kind) {
+      return this.liveSocket.time(`toString diff (${kind})`, () => {
+        const tag = this.el.tagName;
+        const cids = diff ? this.rendered.componentCIDs(diff) : null;
+        const { buffer: html, streams } = this.rendered.toString(cids);
+        return [`<${tag}>${html}</${tag}>`, streams];
+      });
+    }
+    componentPatch(diff, cid) {
+      if (isEmpty(diff))
+        return false;
+      const { buffer: html, streams } = this.rendered.componentToString(cid);
+      const patch = new DOMPatch(this, this.el, this.id, html, streams, cid);
+      const childrenAdded = this.performPatch(patch, true);
+      return childrenAdded;
+    }
+    getHook(el) {
+      return this.viewHooks[ViewHook.elementID(el)];
+    }
+    addHook(el) {
+      const hookElId = ViewHook.elementID(el);
+      if (el.getAttribute && !this.ownsElement(el)) {
+        return;
+      }
+      if (hookElId && !this.viewHooks[hookElId]) {
+        if (ViewHook.deadHook(el)) {
+          return;
+        }
+        const hook = dom_default.getCustomElHook(el) || logError(`no hook found for custom element: ${el.id}`);
+        this.viewHooks[hookElId] = hook;
+        hook.__attachView(this);
+        return hook;
+      } else if (hookElId || !el.getAttribute) {
+        return;
+      } else {
+        const hookName = el.getAttribute(`data-phx-${PHX_HOOK}`) || el.getAttribute(this.binding(PHX_HOOK));
+        if (!hookName) {
+          return;
+        }
+        const hookDefinition = this.liveSocket.getHookDefinition(hookName);
+        if (hookDefinition) {
+          if (!el.id) {
+            logError(
+              `no DOM ID for hook "${hookName}". Hooks require a unique ID on each element.`,
+              el
+            );
+            return;
+          }
+          let hookInstance;
+          try {
+            if (typeof hookDefinition === "function" && hookDefinition.prototype instanceof ViewHook) {
+              hookInstance = new hookDefinition(this, el);
+            } else if (typeof hookDefinition === "object" && hookDefinition !== null) {
+              hookInstance = new ViewHook(this, el, hookDefinition);
+            } else {
+              logError(
+                `Invalid hook definition for "${hookName}". Expected a class extending ViewHook or an object definition.`,
+                el
+              );
+              return;
+            }
+          } catch (e) {
+            const errorMessage = e instanceof Error ? e.message : String(e);
+            logError(`Failed to create hook "${hookName}": ${errorMessage}`, el);
+            return;
+          }
+          this.viewHooks[ViewHook.elementID(hookInstance.el)] = hookInstance;
+          return hookInstance;
+        } else if (hookName !== null) {
+          logError(`unknown hook found for "${hookName}"`, el);
+        }
+      }
+    }
+    destroyHook(hook) {
+      const hookId = ViewHook.elementID(hook.el);
+      hook.__destroyed();
+      hook.__cleanup__();
+      delete this.viewHooks[hookId];
+    }
+    applyPendingUpdates() {
+      this.pendingDiffs = this.pendingDiffs.filter(
+        ({ diff, events }) => !this.update(diff, events, true)
+      );
+      this.eachChild((child) => child.applyPendingUpdates());
+    }
+    eachChild(callback) {
+      const children = this.root.children[this.id] || {};
+      for (const id in children) {
+        callback(this.getChildById(id));
+      }
+    }
+    onChannel(event, cb) {
+      this.liveSocket.onChannel(this.channel, event, (resp) => {
+        if (this.isJoinPending()) {
+          if (this.joinCount > 1) {
+            this.pendingJoinOps.push(() => cb(resp));
+          } else {
+            this.root.pendingJoinOps.push([this, () => cb(resp)]);
+          }
+        } else {
+          this.liveSocket.requestDOMUpdate(() => cb(resp));
+        }
+      });
+    }
+    bindChannel() {
+      this.liveSocket.onChannel(this.channel, "diff", (rawDiff) => {
+        this.liveSocket.requestDOMUpdate(() => {
+          this.applyDiff(
+            "update",
+            rawDiff,
+            ({ diff, events }) => this.update(diff, events)
+          );
+        });
+      });
+      this.onChannel(
+        "redirect",
+        ({ to, flash }) => this.onRedirect({ to, flash })
+      );
+      this.onChannel("live_patch", (redir) => this.onLivePatch(redir));
+      this.onChannel("live_redirect", (redir) => this.onLiveRedirect(redir));
+      this.channel.onError((reason) => this.onError(reason));
+      this.channel.onClose((reason) => this.onClose(reason));
+    }
+    destroyAllChildren() {
+      this.eachChild((child) => child.destroy());
+    }
+    onLiveRedirect(redir) {
+      const { to, kind, flash } = redir;
+      const url = this.expandURL(to);
+      const e = new CustomEvent("phx:server-navigate", {
+        detail: { to, kind, flash }
+      });
+      this.liveSocket.historyRedirect(e, url, kind, flash);
+    }
+    onLivePatch(redir) {
+      const { to, kind } = redir;
+      this.href = this.expandURL(to);
+      this.liveSocket.historyPatch(to, kind);
+    }
+    expandURL(to) {
+      return to.startsWith("/") ? `${window.location.protocol}//${window.location.host}${to}` : to;
+    }
+    /**
+     * @param {{to: string, flash?: string, reloadToken?: string}} redirect
+     */
+    onRedirect({ to, flash, reloadToken }) {
+      this.liveSocket.redirect(to, flash, reloadToken);
+    }
+    isDestroyed() {
+      return this.destroyed;
+    }
+    joinDead() {
+      this.isDead = true;
+    }
+    joinPush() {
+      this.joinPush = this.joinPush || this.channel.join();
+      return this.joinPush;
+    }
+    join(callback) {
+      this.showLoader(this.liveSocket.loaderTimeout);
+      this.bindChannel();
+      if (this.isMain()) {
+        this.stopCallback = this.liveSocket.withPageLoading({
+          to: this.href,
+          kind: "initial"
+        });
+      }
+      this.joinCallback = (onDone) => {
+        onDone = onDone || function() {
+        };
+        callback ? callback(this.joinCount, onDone) : onDone();
+      };
+      this.wrapPush(() => this.channel.join(), {
+        ok: (resp) => this.liveSocket.requestDOMUpdate(() => this.onJoin(resp)),
+        error: (error) => this.onJoinError(error),
+        timeout: () => this.onJoinError({ reason: "timeout" })
+      });
+    }
+    onJoinError(resp) {
+      if (resp.reason === "reload") {
+        this.log("error", () => [
+          `failed mount with ${resp.status}. Falling back to page reload`,
+          resp
+        ]);
+        this.onRedirect({
+          to: this.liveSocket.main.href,
+          reloadToken: resp.token
+        });
+        return;
+      } else if (resp.reason === "unauthorized" || resp.reason === "stale") {
+        this.log("error", () => [
+          "unauthorized live_redirect. Falling back to page request",
+          resp
+        ]);
+        this.onRedirect({ to: this.liveSocket.main.href, flash: this.flash });
+        return;
+      }
+      if (resp.redirect || resp.live_redirect) {
+        this.joinPending = false;
+        this.channel.leave();
+      }
+      if (resp.redirect) {
+        return this.onRedirect(resp.redirect);
+      }
+      if (resp.live_redirect) {
+        return this.onLiveRedirect(resp.live_redirect);
+      }
+      this.log("error", () => ["unable to join", resp]);
+      if (this.isMain()) {
+        this.displayError(
+          [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],
+          { unstructuredError: resp, errorKind: "server" }
+        );
+        if (this.liveSocket.isConnected()) {
+          this.liveSocket.reloadWithJitter(this);
+        }
+      } else {
+        if (this.joinAttempts >= MAX_CHILD_JOIN_ATTEMPTS) {
+          this.root.displayError(
+            [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],
+            { unstructuredError: resp, errorKind: "server" }
+          );
+          this.log("error", () => [
+            `giving up trying to mount after ${MAX_CHILD_JOIN_ATTEMPTS} tries`,
+            resp
+          ]);
+          this.destroy();
+        }
+        const trueChildEl = dom_default.byId(this.el.id);
+        if (trueChildEl) {
+          dom_default.mergeAttrs(trueChildEl, this.el);
+          this.displayError(
+            [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],
+            { unstructuredError: resp, errorKind: "server" }
+          );
+          this.el = trueChildEl;
+        } else {
+          this.destroy();
+        }
+      }
+    }
+    onClose(reason) {
+      if (this.isDestroyed()) {
+        return;
+      }
+      if (this.isMain() && this.liveSocket.hasPendingLink() && reason !== "leave") {
+        return this.liveSocket.reloadWithJitter(this);
+      }
+      this.destroyAllChildren();
+      this.liveSocket.dropActiveElement(this);
+      if (this.liveSocket.isUnloaded()) {
+        this.showLoader(BEFORE_UNLOAD_LOADER_TIMEOUT);
+      }
+    }
+    onError(reason) {
+      this.onClose(reason);
+      if (this.liveSocket.isConnected()) {
+        this.log("error", () => ["view crashed", reason]);
+      }
+      if (!this.liveSocket.isUnloaded()) {
+        if (this.liveSocket.isConnected()) {
+          this.displayError(
+            [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],
+            { unstructuredError: reason, errorKind: "server" }
+          );
+        } else {
+          this.displayError(
+            [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_CLIENT_ERROR_CLASS],
+            { unstructuredError: reason, errorKind: "client" }
+          );
+        }
+      }
+    }
+    displayError(classes, details = {}) {
+      if (this.isMain()) {
+        dom_default.dispatchEvent(window, "phx:page-loading-start", {
+          detail: { to: this.href, kind: "error", ...details }
+        });
+      }
+      this.showLoader();
+      this.setContainerClasses(...classes);
+      this.delayedDisconnected();
+    }
+    delayedDisconnected() {
+      this.disconnectedTimer = setTimeout(() => {
+        this.execAll(this.binding("disconnected"));
+      }, this.liveSocket.disconnectedTimeout);
+    }
+    wrapPush(callerPush, receives) {
+      const latency = this.liveSocket.getLatencySim();
+      const withLatency = latency ? (cb) => setTimeout(() => !this.isDestroyed() && cb(), latency) : (cb) => !this.isDestroyed() && cb();
+      withLatency(() => {
+        callerPush().receive(
+          "ok",
+          (resp) => withLatency(() => receives.ok && receives.ok(resp))
+        ).receive(
+          "error",
+          (reason) => withLatency(() => receives.error && receives.error(reason))
+        ).receive(
+          "timeout",
+          () => withLatency(() => receives.timeout && receives.timeout())
+        );
+      });
+    }
+    pushWithReply(refGenerator, event, payload) {
+      if (!this.isConnected()) {
+        return Promise.reject(new Error("no connection"));
+      }
+      const [ref, [el], opts] = refGenerator ? refGenerator({ payload }) : [null, [], {}];
+      const oldJoinCount = this.joinCount;
+      let onLoadingDone = function() {
+      };
+      if (opts.page_loading) {
+        onLoadingDone = this.liveSocket.withPageLoading({
+          kind: "element",
+          target: el
+        });
+      }
+      if (typeof payload.cid !== "number") {
+        delete payload.cid;
+      }
+      return new Promise((resolve, reject) => {
+        this.wrapPush(() => this.channel.push(event, payload, PUSH_TIMEOUT), {
+          ok: (resp) => {
+            if (ref !== null) {
+              this.lastAckRef = ref;
+            }
+            const finish = (hookReply) => {
+              if (resp.redirect) {
+                this.onRedirect(resp.redirect);
+              }
+              if (resp.live_patch) {
+                this.onLivePatch(resp.live_patch);
+              }
+              if (resp.live_redirect) {
+                this.onLiveRedirect(resp.live_redirect);
+              }
+              onLoadingDone();
+              resolve({ resp, reply: hookReply, ref });
+            };
+            if (resp.diff) {
+              this.liveSocket.requestDOMUpdate(() => {
+                this.applyDiff("update", resp.diff, ({ diff, reply, events }) => {
+                  if (ref !== null) {
+                    this.undoRefs(ref, payload.event);
+                  }
+                  this.update(diff, events);
+                  finish(reply);
+                });
+              });
+            } else {
+              if (ref !== null) {
+                this.undoRefs(ref, payload.event);
+              }
+              finish(null);
+            }
+          },
+          error: (reason) => reject(new Error(`failed with reason: ${JSON.stringify(reason)}`)),
+          timeout: () => {
+            reject(new Error("timeout"));
+            if (this.joinCount === oldJoinCount) {
+              this.liveSocket.reloadWithJitter(this, () => {
+                this.log("timeout", () => [
+                  "received timeout while communicating with server. Falling back to hard refresh for recovery"
+                ]);
+              });
+            }
+          }
+        });
+      });
+    }
+    undoRefs(ref, phxEvent, onlyEls) {
+      if (!this.isConnected()) {
+        return;
+      }
+      const selector = `[${PHX_REF_SRC}="${this.refSrc()}"]`;
+      if (onlyEls) {
+        onlyEls = new Set(onlyEls);
+        dom_default.all(document, selector, (parent) => {
+          if (onlyEls && !onlyEls.has(parent)) {
+            return;
+          }
+          dom_default.all(
+            parent,
+            selector,
+            (child) => this.undoElRef(child, ref, phxEvent)
+          );
+          this.undoElRef(parent, ref, phxEvent);
+        });
+      } else {
+        dom_default.all(document, selector, (el) => this.undoElRef(el, ref, phxEvent));
+      }
+    }
+    undoElRef(el, ref, phxEvent) {
+      const elRef = new ElementRef(el);
+      elRef.maybeUndo(ref, phxEvent, (clonedTree) => {
+        const patch = new DOMPatch(this, el, this.id, clonedTree, [], null, {
+          undoRef: ref
+        });
+        const phxChildrenAdded = this.performPatch(patch, true);
+        dom_default.all(
+          el,
+          `[${PHX_REF_SRC}="${this.refSrc()}"]`,
+          (child) => this.undoElRef(child, ref, phxEvent)
+        );
+        if (phxChildrenAdded) {
+          this.joinNewChildren();
+        }
+      });
+    }
+    refSrc() {
+      return this.el.id;
+    }
+    putRef(elements, phxEvent, eventType, opts = {}) {
+      const newRef = this.ref++;
+      const disableWith = this.binding(PHX_DISABLE_WITH);
+      if (opts.loading) {
+        const loadingEls = dom_default.all(document, opts.loading).map((el) => {
+          return { el, lock: true, loading: true };
+        });
+        elements = elements.concat(loadingEls);
+      }
+      for (const { el, lock, loading } of elements) {
+        if (!lock && !loading) {
+          throw new Error("putRef requires lock or loading");
+        }
+        el.setAttribute(PHX_REF_SRC, this.refSrc());
+        if (loading) {
+          el.setAttribute(PHX_REF_LOADING, newRef);
+        }
+        if (lock) {
+          el.setAttribute(PHX_REF_LOCK, newRef);
+        }
+        if (!loading || opts.submitter && !(el === opts.submitter || el === opts.form)) {
+          continue;
+        }
+        const lockCompletePromise = new Promise((resolve) => {
+          el.addEventListener(`phx:undo-lock:${newRef}`, () => resolve(detail), {
+            once: true
+          });
+        });
+        const loadingCompletePromise = new Promise((resolve) => {
+          el.addEventListener(
+            `phx:undo-loading:${newRef}`,
+            () => resolve(detail),
+            { once: true }
+          );
+        });
+        el.classList.add(`phx-${eventType}-loading`);
+        const disableText = el.getAttribute(disableWith);
+        if (disableText !== null) {
+          if (!el.getAttribute(PHX_DISABLE_WITH_RESTORE)) {
+            el.setAttribute(PHX_DISABLE_WITH_RESTORE, el.textContent);
+          }
+          if (disableText !== "") {
+            el.textContent = disableText;
+          }
+          el.setAttribute(
+            PHX_DISABLED,
+            el.getAttribute(PHX_DISABLED) || el.disabled
+          );
+          el.setAttribute("disabled", "");
+        }
+        const detail = {
+          event: phxEvent,
+          eventType,
+          ref: newRef,
+          isLoading: loading,
+          isLocked: lock,
+          lockElements: elements.filter(({ lock: lock2 }) => lock2).map(({ el: el2 }) => el2),
+          loadingElements: elements.filter(({ loading: loading2 }) => loading2).map(({ el: el2 }) => el2),
+          unlock: (els) => {
+            els = Array.isArray(els) ? els : [els];
+            this.undoRefs(newRef, phxEvent, els);
+          },
+          lockComplete: lockCompletePromise,
+          loadingComplete: loadingCompletePromise,
+          lock: (lockEl) => {
+            return new Promise((resolve) => {
+              if (this.isAcked(newRef)) {
+                return resolve(detail);
+              }
+              lockEl.setAttribute(PHX_REF_LOCK, newRef);
+              lockEl.setAttribute(PHX_REF_SRC, this.refSrc());
+              lockEl.addEventListener(
+                `phx:lock-stop:${newRef}`,
+                () => resolve(detail),
+                { once: true }
+              );
+            });
+          }
+        };
+        if (opts.payload) {
+          detail["payload"] = opts.payload;
+        }
+        if (opts.target) {
+          detail["target"] = opts.target;
+        }
+        if (opts.originalEvent) {
+          detail["originalEvent"] = opts.originalEvent;
+        }
+        el.dispatchEvent(
+          new CustomEvent("phx:push", {
+            detail,
+            bubbles: true,
+            cancelable: false
+          })
+        );
+        if (phxEvent) {
+          el.dispatchEvent(
+            new CustomEvent(`phx:push:${phxEvent}`, {
+              detail,
+              bubbles: true,
+              cancelable: false
+            })
+          );
+        }
+      }
+      return [newRef, elements.map(({ el }) => el), opts];
+    }
+    isAcked(ref) {
+      return this.lastAckRef !== null && this.lastAckRef >= ref;
+    }
+    componentID(el) {
+      const cid = el.getAttribute && el.getAttribute(PHX_COMPONENT);
+      return cid ? parseInt(cid) : null;
+    }
+    targetComponentID(target, targetCtx, opts = {}) {
+      if (isCid(targetCtx)) {
+        return targetCtx;
+      }
+      const cidOrSelector = opts.target || target.getAttribute(this.binding("target"));
+      if (isCid(cidOrSelector)) {
+        return parseInt(cidOrSelector);
+      } else if (targetCtx && (cidOrSelector !== null || opts.target)) {
+        return this.closestComponentID(targetCtx);
+      } else {
+        return null;
+      }
+    }
+    closestComponentID(targetCtx) {
+      if (isCid(targetCtx)) {
+        return targetCtx;
+      } else if (targetCtx) {
+        return maybe(
+          // We either use the closest data-phx-component binding, or -
+          // in case of portals - continue with the portal source.
+          // This is necessary if teleporting an element outside of its LiveComponent.
+          targetCtx.closest(`[${PHX_COMPONENT}],[${PHX_TELEPORTED_SRC}]`),
+          (el) => {
+            if (el.hasAttribute(PHX_COMPONENT)) {
+              return this.ownsElement(el) && this.componentID(el);
+            }
+            if (el.hasAttribute(PHX_TELEPORTED_SRC)) {
+              const portalParent = dom_default.byId(el.getAttribute(PHX_TELEPORTED_SRC));
+              return this.closestComponentID(portalParent);
+            }
+          }
+        );
+      } else {
+        return null;
+      }
+    }
+    pushHookEvent(el, targetCtx, event, payload) {
+      if (!this.isConnected()) {
+        this.log("hook", () => [
+          "unable to push hook event. LiveView not connected",
+          event,
+          payload
+        ]);
+        return Promise.reject(
+          new Error("unable to push hook event. LiveView not connected")
+        );
+      }
+      const refGenerator = () => this.putRef([{ el, loading: true, lock: true }], event, "hook", {
+        payload,
+        target: targetCtx
+      });
+      return this.pushWithReply(refGenerator, "event", {
+        type: "hook",
+        event,
+        value: payload,
+        cid: this.closestComponentID(targetCtx)
+      }).then(({ resp: _resp, reply, ref }) => ({ reply, ref }));
+    }
+    extractMeta(el, meta, value) {
+      const prefix = this.binding("value-");
+      for (let i = 0; i < el.attributes.length; i++) {
+        if (!meta) {
+          meta = {};
+        }
+        const name = el.attributes[i].name;
+        if (name.startsWith(prefix)) {
+          meta[name.replace(prefix, "")] = el.getAttribute(name);
+        }
+      }
+      if (el.value !== void 0 && !(el instanceof HTMLFormElement)) {
+        if (!meta) {
+          meta = {};
+        }
+        meta.value = el.value;
+        if (el.tagName === "INPUT" && CHECKABLE_INPUTS.indexOf(el.type) >= 0 && !el.checked) {
+          delete meta.value;
+        }
+      }
+      if (value) {
+        if (!meta) {
+          meta = {};
+        }
+        for (const key in value) {
+          meta[key] = value[key];
+        }
+      }
+      return meta;
+    }
+    pushEvent(type, el, targetCtx, phxEvent, meta, opts = {}, onReply) {
+      this.pushWithReply(
+        (maybePayload) => this.putRef([{ el, loading: true, lock: true }], phxEvent, type, {
+          ...opts,
+          payload: maybePayload?.payload
+        }),
+        "event",
+        {
+          type,
+          event: phxEvent,
+          value: this.extractMeta(el, meta, opts.value),
+          cid: this.targetComponentID(el, targetCtx, opts)
+        }
+      ).then(({ reply }) => onReply && onReply(reply)).catch((error) => logError("Failed to push event", error));
+    }
+    pushFileProgress(fileEl, entryRef, progress, onReply = function() {
+    }) {
+      this.liveSocket.withinOwners(fileEl.form, (view, targetCtx) => {
+        view.pushWithReply(null, "progress", {
+          event: fileEl.getAttribute(view.binding(PHX_PROGRESS)),
+          ref: fileEl.getAttribute(PHX_UPLOAD_REF),
+          entry_ref: entryRef,
+          progress,
+          cid: view.targetComponentID(fileEl.form, targetCtx)
+        }).then(() => onReply()).catch((error) => logError("Failed to push file progress", error));
+      });
+    }
+    pushInput(inputEl, targetCtx, forceCid, phxEvent, opts, callback) {
+      if (!inputEl.form) {
+        throw new Error("form events require the input to be inside a form");
+      }
+      let uploads;
+      const cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx, opts);
+      const refGenerator = (maybePayload) => {
+        return this.putRef(
+          [
+            { el: inputEl, loading: true, lock: true },
+            { el: inputEl.form, loading: true, lock: true }
+          ],
+          phxEvent,
+          "change",
+          { ...opts, payload: maybePayload?.payload }
+        );
+      };
+      let formData;
+      const meta = this.extractMeta(inputEl.form, {}, opts.value);
+      const serializeOpts = {};
+      if (inputEl instanceof HTMLButtonElement) {
+        serializeOpts.submitter = inputEl;
+      }
+      if (inputEl.getAttribute(this.binding("change"))) {
+        formData = serializeForm(inputEl.form, serializeOpts, [inputEl.name]);
+      } else {
+        formData = serializeForm(inputEl.form, serializeOpts);
+      }
+      if (dom_default.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0) {
+        LiveUploader.trackFiles(inputEl, Array.from(inputEl.files));
+      }
+      uploads = LiveUploader.serializeUploads(inputEl);
+      const event = {
+        type: "form",
+        event: phxEvent,
+        value: formData,
+        meta: {
+          // no target was implicitly sent as "undefined" in LV <= 1.0.5, therefore
+          // we have to keep it. In 1.0.6 we switched from passing meta as URL encoded data
+          // to passing it directly in the event, but the JSON encode would drop keys with
+          // undefined values.
+          _target: opts._target || "undefined",
+          ...meta
+        },
+        uploads,
+        cid
+      };
+      this.pushWithReply(refGenerator, "event", event).then(({ resp }) => {
+        if (dom_default.isUploadInput(inputEl) && dom_default.isAutoUpload(inputEl)) {
+          ElementRef.onUnlock(inputEl, () => {
+            if (LiveUploader.filesAwaitingPreflight(inputEl).length > 0) {
+              const [ref, _els] = refGenerator();
+              this.undoRefs(ref, phxEvent, [inputEl.form]);
+              this.uploadFiles(
+                inputEl.form,
+                phxEvent,
+                targetCtx,
+                ref,
+                cid,
+                (_uploads) => {
+                  callback && callback(resp);
+                  this.triggerAwaitingSubmit(inputEl.form, phxEvent);
+                  this.undoRefs(ref, phxEvent);
+                }
+              );
+            }
+          });
+        } else {
+          callback && callback(resp);
+        }
+      }).catch((error) => logError("Failed to push input event", error));
+    }
+    triggerAwaitingSubmit(formEl, phxEvent) {
+      const awaitingSubmit = this.getScheduledSubmit(formEl);
+      if (awaitingSubmit) {
+        const [_el, _ref, _opts, callback] = awaitingSubmit;
+        this.cancelSubmit(formEl, phxEvent);
+        callback();
+      }
+    }
+    getScheduledSubmit(formEl) {
+      return this.formSubmits.find(
+        ([el, _ref, _opts, _callback]) => el.isSameNode(formEl)
+      );
+    }
+    scheduleSubmit(formEl, ref, opts, callback) {
+      if (this.getScheduledSubmit(formEl)) {
+        return true;
+      }
+      this.formSubmits.push([formEl, ref, opts, callback]);
+    }
+    cancelSubmit(formEl, phxEvent) {
+      this.formSubmits = this.formSubmits.filter(
+        ([el, ref, _opts, _callback]) => {
+          if (el.isSameNode(formEl)) {
+            this.undoRefs(ref, phxEvent);
+            return false;
+          } else {
+            return true;
+          }
+        }
+      );
+    }
+    disableForm(formEl, phxEvent, opts = {}) {
+      const filterIgnored = (el) => {
+        const userIgnored = closestPhxBinding(
+          el,
+          `${this.binding(PHX_UPDATE)}=ignore`,
+          el.form
+        );
+        return !(userIgnored || closestPhxBinding(el, "data-phx-update=ignore", el.form));
+      };
+      const filterDisables = (el) => {
+        return el.hasAttribute(this.binding(PHX_DISABLE_WITH));
+      };
+      const filterButton = (el) => el.tagName == "BUTTON";
+      const filterInput = (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
+      const formElements = Array.from(formEl.elements);
+      const disables = formElements.filter(filterDisables);
+      const buttons = formElements.filter(filterButton).filter(filterIgnored);
+      const inputs = formElements.filter(filterInput).filter(filterIgnored);
+      buttons.forEach((button) => {
+        button.setAttribute(PHX_DISABLED, button.disabled);
+        button.disabled = true;
+      });
+      inputs.forEach((input) => {
+        input.setAttribute(PHX_READONLY, input.readOnly);
+        input.readOnly = true;
+        if (input.files) {
+          input.setAttribute(PHX_DISABLED, input.disabled);
+          input.disabled = true;
+        }
+      });
+      const formEls = disables.concat(buttons).concat(inputs).map((el) => {
+        return { el, loading: true, lock: true };
+      });
+      const els = [{ el: formEl, loading: true, lock: false }].concat(formEls).reverse();
+      return this.putRef(els, phxEvent, "submit", opts);
+    }
+    pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply) {
+      const refGenerator = (maybePayload) => this.disableForm(formEl, phxEvent, {
+        ...opts,
+        form: formEl,
+        payload: maybePayload?.payload,
+        submitter
+      });
+      dom_default.putPrivate(formEl, "submitter", submitter);
+      const cid = this.targetComponentID(formEl, targetCtx);
+      if (LiveUploader.hasUploadsInProgress(formEl)) {
+        const [ref, _els] = refGenerator();
+        const push = () => this.pushFormSubmit(
+          formEl,
+          targetCtx,
+          phxEvent,
+          submitter,
+          opts,
+          onReply
+        );
+        return this.scheduleSubmit(formEl, ref, opts, push);
+      } else if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
+        const [ref, els] = refGenerator();
+        const proxyRefGen = () => [ref, els, opts];
+        this.uploadFiles(formEl, phxEvent, targetCtx, ref, cid, (_uploads) => {
+          if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
+            return this.undoRefs(ref, phxEvent);
+          }
+          const meta = this.extractMeta(formEl, {}, opts.value);
+          const formData = serializeForm(formEl, { submitter });
+          this.pushWithReply(proxyRefGen, "event", {
+            type: "form",
+            event: phxEvent,
+            value: formData,
+            meta,
+            cid
+          }).then(({ resp }) => onReply(resp)).catch((error) => logError("Failed to push form submit", error));
+        });
+      } else if (!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))) {
+        const meta = this.extractMeta(formEl, {}, opts.value);
+        const formData = serializeForm(formEl, { submitter });
+        this.pushWithReply(refGenerator, "event", {
+          type: "form",
+          event: phxEvent,
+          value: formData,
+          meta,
+          cid
+        }).then(({ resp }) => onReply(resp)).catch((error) => logError("Failed to push form submit", error));
+      }
+    }
+    uploadFiles(formEl, phxEvent, targetCtx, ref, cid, onComplete) {
+      const joinCountAtUpload = this.joinCount;
+      const inputEls = LiveUploader.activeFileInputs(formEl);
+      let numFileInputsInProgress = inputEls.length;
+      inputEls.forEach((inputEl) => {
+        const uploader = new LiveUploader(inputEl, this, () => {
+          numFileInputsInProgress--;
+          if (numFileInputsInProgress === 0) {
+            onComplete();
+          }
+        });
+        const entries = uploader.entries().map((entry) => entry.toPreflightPayload());
+        if (entries.length === 0) {
+          numFileInputsInProgress--;
+          return;
+        }
+        const payload = {
+          ref: inputEl.getAttribute(PHX_UPLOAD_REF),
+          entries,
+          cid: this.targetComponentID(inputEl.form, targetCtx)
+        };
+        this.log("upload", () => ["sending preflight request", payload]);
+        this.pushWithReply(null, "allow_upload", payload).then(({ resp }) => {
+          this.log("upload", () => ["got preflight response", resp]);
+          uploader.entries().forEach((entry) => {
+            if (resp.entries && !resp.entries[entry.ref]) {
+              this.handleFailedEntryPreflight(
+                entry.ref,
+                "failed preflight",
+                uploader
+              );
+            }
+          });
+          if (resp.error || Object.keys(resp.entries).length === 0) {
+            this.undoRefs(ref, phxEvent);
+            const errors = resp.error || [];
+            errors.map(([entry_ref, reason]) => {
+              this.handleFailedEntryPreflight(entry_ref, reason, uploader);
+            });
+          } else {
+            const onError = (callback) => {
+              this.channel.onError(() => {
+                if (this.joinCount === joinCountAtUpload) {
+                  callback();
+                }
+              });
+            };
+            uploader.initAdapterUpload(resp, onError, this.liveSocket);
+          }
+        }).catch((error) => logError("Failed to push upload", error));
+      });
+    }
+    handleFailedEntryPreflight(uploadRef, reason, uploader) {
+      if (uploader.isAutoUpload()) {
+        const entry = uploader.entries().find((entry2) => entry2.ref === uploadRef.toString());
+        if (entry) {
+          entry.cancel();
+        }
+      } else {
+        uploader.entries().map((entry) => entry.cancel());
+      }
+      this.log("upload", () => [`error for entry ${uploadRef}`, reason]);
+    }
+    dispatchUploads(targetCtx, name, filesOrBlobs) {
+      const targetElement = this.targetCtxElement(targetCtx) || this.el;
+      const inputs = dom_default.findUploadInputs(targetElement).filter(
+        (el) => el.name === name
+      );
+      if (inputs.length === 0) {
+        logError(`no live file inputs found matching the name "${name}"`);
+      } else if (inputs.length > 1) {
+        logError(`duplicate live file inputs found matching the name "${name}"`);
+      } else {
+        dom_default.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, {
+          detail: { files: filesOrBlobs }
+        });
+      }
+    }
+    targetCtxElement(targetCtx) {
+      if (isCid(targetCtx)) {
+        const [target] = dom_default.findComponentNodeList(this.id, targetCtx);
+        return target;
+      } else if (targetCtx) {
+        return targetCtx;
+      } else {
+        return null;
+      }
+    }
+    pushFormRecovery(oldForm, newForm, templateDom, callback) {
+      const phxChange = this.binding("change");
+      const phxTarget = newForm.getAttribute(this.binding("target")) || newForm;
+      const phxEvent = newForm.getAttribute(this.binding(PHX_AUTO_RECOVER)) || newForm.getAttribute(this.binding("change"));
+      const inputs = Array.from(oldForm.elements).filter(
+        (el) => dom_default.isFormInput(el) && el.name && !el.hasAttribute(phxChange)
+      );
+      if (inputs.length === 0) {
+        callback();
+        return;
+      }
+      inputs.forEach(
+        (input2) => input2.hasAttribute(PHX_UPLOAD_REF) && LiveUploader.clearFiles(input2)
+      );
+      const input = inputs.find((el) => el.type !== "hidden") || inputs[0];
+      let pending = 0;
+      this.withinTargets(
+        phxTarget,
+        (targetView, targetCtx) => {
+          const cid = this.targetComponentID(newForm, targetCtx);
+          pending++;
+          let e = new CustomEvent("phx:form-recovery", {
+            detail: { sourceElement: oldForm }
+          });
+          js_default.exec(e, "change", phxEvent, this, input, [
+            "push",
+            {
+              _target: input.name,
+              targetView,
+              targetCtx,
+              newCid: cid,
+              callback: () => {
+                pending--;
+                if (pending === 0) {
+                  callback();
+                }
+              }
+            }
+          ]);
+        },
+        templateDom
+      );
+    }
+    pushLinkPatch(e, href, targetEl, callback) {
+      const linkRef = this.liveSocket.setPendingLink(href);
+      const loading = e.isTrusted && e.type !== "popstate";
+      const refGen = targetEl ? () => this.putRef(
+        [{ el: targetEl, loading, lock: true }],
+        null,
+        "click"
+      ) : null;
+      const fallback = () => this.liveSocket.redirect(window.location.href);
+      const url = href.startsWith("/") ? `${location.protocol}//${location.host}${href}` : href;
+      this.pushWithReply(refGen, "live_patch", { url }).then(
+        ({ resp }) => {
+          this.liveSocket.requestDOMUpdate(() => {
+            if (resp.link_redirect) {
+              this.liveSocket.replaceMain(href, null, callback, linkRef);
+            } else if (resp.redirect) {
+              return;
+            } else {
+              if (this.liveSocket.commitPendingLink(linkRef)) {
+                this.href = href;
+              }
+              this.applyPendingUpdates();
+              callback && callback(linkRef);
+            }
+          });
+        },
+        ({ error: _error, timeout: _timeout }) => fallback()
+      );
+    }
+    getFormsForRecovery() {
+      if (this.joinCount === 0) {
+        return {};
+      }
+      const phxChange = this.binding("change");
+      return dom_default.all(
+        document,
+        `#${CSS.escape(this.id)} form[${phxChange}], [${PHX_TELEPORTED_REF}="${CSS.escape(this.id)}"] form[${phxChange}]`
+      ).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
+        (form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore"
+      ).map((form) => {
+        const clonedForm = form.cloneNode(true);
+        morphdom_esm_default(clonedForm, form, {
+          onBeforeElUpdated: (fromEl, toEl) => {
+            dom_default.copyPrivates(fromEl, toEl);
+            if (fromEl.getAttribute("form") === form.id) {
+              fromEl.parentNode.removeChild(fromEl);
+              return false;
+            }
+            return true;
+          }
+        });
+        const externalElements = document.querySelectorAll(
+          `[form="${CSS.escape(form.id)}"]`
+        );
+        Array.from(externalElements).forEach((el) => {
+          const clonedEl = (
+            /** @type {HTMLElement} */
+            el.cloneNode(true)
+          );
+          morphdom_esm_default(clonedEl, el);
+          dom_default.copyPrivates(clonedEl, el);
+          clonedEl.removeAttribute("form");
+          clonedForm.appendChild(clonedEl);
+        });
+        return clonedForm;
+      }).reduce((acc, form) => {
+        acc[form.id] = form;
+        return acc;
+      }, {});
+    }
+    maybePushComponentsDestroyed(destroyedCIDs) {
+      let willDestroyCIDs = destroyedCIDs.filter((cid) => {
+        return dom_default.findComponentNodeList(this.id, cid).length === 0;
+      });
+      const onError = (error) => {
+        if (!this.isDestroyed()) {
+          logError("Failed to push components destroyed", error);
+        }
+      };
+      if (willDestroyCIDs.length > 0) {
+        willDestroyCIDs.forEach((cid) => this.rendered.resetRender(cid));
+        this.pushWithReply(null, "cids_will_destroy", { cids: willDestroyCIDs }).then(() => {
+          this.liveSocket.requestDOMUpdate(() => {
+            let completelyDestroyCIDs = willDestroyCIDs.filter((cid) => {
+              return dom_default.findComponentNodeList(this.id, cid).length === 0;
+            });
+            if (completelyDestroyCIDs.length > 0) {
+              this.pushWithReply(null, "cids_destroyed", {
+                cids: completelyDestroyCIDs
+              }).then(({ resp }) => {
+                this.rendered.pruneCIDs(resp.cids);
+              }).catch(onError);
+            }
+          });
+        }).catch(onError);
+      }
+    }
+    ownsElement(el) {
+      let parentViewEl = dom_default.closestViewEl(el);
+      return el.getAttribute(PHX_PARENT_ID) === this.id || parentViewEl && parentViewEl.id === this.id || !parentViewEl && this.isDead;
+    }
+    submitForm(form, targetCtx, phxEvent, submitter, opts = {}) {
+      dom_default.putPrivate(form, PHX_HAS_SUBMITTED, true);
+      const inputs = Array.from(form.elements);
+      inputs.forEach((input) => dom_default.putPrivate(input, PHX_HAS_SUBMITTED, true));
+      this.liveSocket.blurActiveElement(this);
+      this.pushFormSubmit(form, targetCtx, phxEvent, submitter, opts, () => {
+        this.liveSocket.restorePreviouslyActiveFocus();
+      });
+    }
+    binding(kind) {
+      return this.liveSocket.binding(kind);
+    }
+    // phx-portal
+    pushPortalElementId(id) {
+      this.portalElementIds.add(id);
+    }
+    dropPortalElementId(id) {
+      this.portalElementIds.delete(id);
+    }
+    destroyPortalElements() {
+      if (!this.liveSocket.unloaded) {
+        this.portalElementIds.forEach((id) => {
+          const el = document.getElementById(id);
+          if (el) {
+            el.remove();
+          }
+        });
+      }
+    }
+  };
+  var LiveSocket = class {
+    constructor(url, phxSocket, opts = {}) {
+      this.unloaded = false;
+      if (!phxSocket || phxSocket.constructor.name === "Object") {
+        throw new Error(`
       a phoenix Socket must be provided as the second argument to the LiveSocket constructor. For example:
 
           import {Socket} from "phoenix"
           import {LiveSocket} from "phoenix_live_view"
           let liveSocket = new LiveSocket("/live", Socket, {...})
-      `);this.socket=new e(t,i),this.bindingPrefix=i.bindingPrefix||zi,this.opts=i,this.params=qe(i.params||{}),this.viewLogger=i.viewLogger,this.metadataCallbacks=i.metadata||{},this.defaults=Object.assign(ct(Gi),i.defaults||{}),this.prevActive=null,this.silenced=!1,this.main=null,this.outgoingMainEl=null,this.clickStartedAtTarget=null,this.linkRef=1,this.roots={},this.href=window.location.href,this.pendingLink=null,this.currentLocation=ct(window.location),this.hooks=i.hooks||{},this.uploaders=i.uploaders||{},this.loaderTimeout=i.loaderTimeout||Wi,this.disconnectedTimeout=i.disconnectedTimeout||Xi,this.reloadWithJitterTimer=null,this.maxReloads=i.maxReloads||xi,this.reloadJitterMin=i.reloadJitterMin||Ii,this.reloadJitterMax=i.reloadJitterMax||Li,this.failsafeJitter=i.failsafeJitter||Di,this.localStorage=i.localStorage||window.localStorage,this.sessionStorage=i.sessionStorage||window.sessionStorage,this.boundTopLevelEvents=!1,this.boundEventNames=new Set,this.blockPhxChangeWhileComposing=i.blockPhxChangeWhileComposing||!1,this.serverCloseRef=null,this.domCallbacks=Object.assign({jsQuerySelectorAll:null,onPatchStart:qe(),onPatchEnd:qe(),onNodeAdded:qe(),onBeforeElUpdated:qe()},i.dom||{}),this.transitions=new Is,this.currentHistoryPosition=parseInt(this.sessionStorage.getItem(it))||0,window.addEventListener("pagehide",s=>{this.unloaded=!0}),this.socket.onOpen(()=>{this.isUnloaded()&&window.location.reload()})}version(){return"1.1.28"}isProfileEnabled(){return this.sessionStorage.getItem(bt)==="true"}isDebugEnabled(){return this.sessionStorage.getItem(tt)==="true"}isDebugDisabled(){return this.sessionStorage.getItem(tt)==="false"}enableDebug(){this.sessionStorage.setItem(tt,"true")}enableProfiling(){this.sessionStorage.setItem(bt,"true")}disableDebug(){this.sessionStorage.setItem(tt,"false")}disableProfiling(){this.sessionStorage.removeItem(bt)}enableLatencySim(t){this.enableDebug(),console.log("latency simulator enabled for the duration of this browser session. Call disableLatencySim() to disable"),this.sessionStorage.setItem(wt,t)}disableLatencySim(){this.sessionStorage.removeItem(wt)}getLatencySim(){let t=this.sessionStorage.getItem(wt);return t?parseInt(t):null}getSocket(){return this.socket}connect(){window.location.hostname==="localhost"&&!this.isDebugDisabled()&&this.enableDebug();let t=()=>{this.resetReloadStatus(),this.joinRootViews()?(this.bindTopLevelEvents(),this.socket.connect()):this.main?this.socket.connect():this.bindTopLevelEvents({dead:!0}),this.joinDeadView()};["complete","loaded","interactive"].indexOf(document.readyState)>=0?t():document.addEventListener("DOMContentLoaded",()=>t())}disconnect(t){clearTimeout(this.reloadWithJitterTimer),this.serverCloseRef&&(this.socket.off(this.serverCloseRef),this.serverCloseRef=null),this.socket.disconnect(t)}replaceTransport(t){clearTimeout(this.reloadWithJitterTimer),this.socket.replaceTransport(t),this.connect()}execJS(t,e,i=null){let s=new CustomEvent("phx:exec",{detail:{sourceElement:t}});this.owner(t,n=>x.exec(s,i,e,n,t))}js(){return wi(this,"js")}unload(){this.unloaded||(this.main&&this.isConnected()&&this.log(this.main,"socket",()=>["disconnect for page nav"]),this.unloaded=!0,this.destroyAllViews(),this.disconnect())}triggerDOM(t,e){this.domCallbacks[t](...e)}time(t,e){if(!this.isProfileEnabled()||!console.time)return e();console.time(t);let i=e();return console.timeEnd(t),i}log(t,e,i){if(this.viewLogger){let[s,n]=i();this.viewLogger(t,e,s,n)}else if(this.isDebugEnabled()){let[s,n]=i();es(t,e,s,n)}}requestDOMUpdate(t){this.transitions.after(t)}asyncTransition(t){this.transitions.addAsyncTransition(t)}transition(t,e,i=function(){}){this.transitions.addTransition(t,e,i)}onChannel(t,e,i){t.on(e,s=>{let n=this.getLatencySim();n?setTimeout(()=>i(s),n):i(s)})}reloadWithJitter(t,e){clearTimeout(this.reloadWithJitterTimer),this.disconnect();let i=this.reloadJitterMin,s=this.reloadJitterMax,n=Math.floor(Math.random()*(s-i+1))+i,r=Z.updateLocal(this.localStorage,window.location.pathname,di,0,o=>o+1);r>=this.maxReloads&&(n=this.failsafeJitter),this.reloadWithJitterTimer=setTimeout(()=>{t.isDestroyed()||t.isConnected()||(t.destroy(),e?e():this.log(t,"join",()=>[`encountered ${r} consecutive reloads`]),r>=this.maxReloads&&this.log(t,"join",()=>[`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`]),this.hasPendingLink()?window.location=this.pendingLink:window.location.reload())},n)}getHookDefinition(t){if(t)return this.maybeInternalHook(t)||this.hooks[t]||this.maybeRuntimeHook(t)}maybeInternalHook(t){return t&&t.startsWith("Phoenix.")&&ls[t.split(".")[1]]}maybeRuntimeHook(t){let e=document.querySelector(`script[${lt}="${CSS.escape(t)}"]`);if(!e)return;let i=window[`phx_hook_${t}`];if(!i||typeof i!="function"){O("a runtime hook must be a function",e);return}let s=i();if(s&&(typeof s=="object"||typeof s=="function"))return s;O("runtime hook must return an object with hook callbacks or an instance of ViewHook",e)}isUnloaded(){return this.unloaded}isConnected(){return this.socket.isConnected()}getBindingPrefix(){return this.bindingPrefix}binding(t){return`${this.getBindingPrefix()}${t}`}channel(t,e){return this.socket.channel(t,e)}joinDeadView(){let t=document.body;if(t&&!this.isPhxView(t)&&!this.isPhxView(document.firstElementChild)){let e=this.newRootView(t);e.setHref(this.getHref()),e.joinDead(),this.main||(this.main=e),window.requestAnimationFrame(()=>{e.execNewMounted(),this.maybeScroll(history.state?.scroll)})}}joinRootViews(){let t=!1;return u.all(document,`${ze}:not([${ke}])`,e=>{if(!this.getRootById(e.id)){let i=this.newRootView(e);u.isPhxSticky(e)||i.setHref(this.getHref()),i.join(),e.hasAttribute(Lt)&&(this.main=i)}t=!0}),t}redirect(t,e,i){i&&Z.setCookie(Wt,i,60),this.unload(),Z.redirect(t,e)}replaceMain(t,e,i=null,s=this.setPendingLink(t)){let n=this.currentLocation.href;this.outgoingMainEl=this.outgoingMainEl||this.main.el;let r=u.findPhxSticky(document)||[],o=u.all(this.outgoingMainEl,`[${this.binding("remove")}]`).filter(h=>!u.isChildOfAny(h,r)),a=u.cloneNode(this.outgoingMainEl,"");this.main.showLoader(this.loaderTimeout),this.main.destroy(),this.main=this.newRootView(a,e,n),this.main.setRedirect(t),this.transitionRemoves(o),this.main.join((h,c)=>{h===1&&this.commitPendingLink(s)&&this.requestDOMUpdate(()=>{o.forEach(f=>f.remove()),r.forEach(f=>a.appendChild(f)),this.outgoingMainEl.replaceWith(a),this.outgoingMainEl=null,i&&i(s),c()})})}transitionRemoves(t,e){let i=this.binding("remove"),s=n=>{n.preventDefault(),n.stopImmediatePropagation()};t.forEach(n=>{for(let r of this.boundEventNames)n.addEventListener(r,s,!0);this.execJS(n,n.getAttribute(i),"remove")}),this.requestDOMUpdate(()=>{t.forEach(n=>{for(let r of this.boundEventNames)n.removeEventListener(r,s,!0)}),e&&e()})}isPhxView(t){return t.getAttribute&&t.getAttribute(ce)!==null}newRootView(t,e,i){let s=new Rs(t,this,null,e,i);return this.roots[s.id]=s,s}owner(t,e){let i,s=u.closestViewEl(t);if(s)i=this.getViewByEl(s);else{if(!t.isConnected)return null;i=this.main}return i&&e?e(i):i}withinOwners(t,e){this.owner(t,i=>e(i,t))}getViewByEl(t){let e=t.getAttribute(fe);return De(this.getRootById(e),i=>i.getDescendentByEl(t))}getRootById(t){return this.roots[t]}destroyAllViews(){for(let t in this.roots)this.roots[t].destroy(),delete this.roots[t];this.main=null}destroyViewByEl(t){let e=this.getRootById(t.getAttribute(fe));e&&e.id===t.id?(e.destroy(),delete this.roots[e.id]):e&&e.destroyDescendent(t.id)}getActiveElement(){return document.activeElement}dropActiveElement(t){this.prevActive&&t.ownsElement(this.prevActive)&&(this.prevActive=null)}restorePreviouslyActiveFocus(){this.prevActive&&this.prevActive!==document.body&&this.prevActive instanceof HTMLElement&&this.prevActive.focus()}blurActiveElement(){this.prevActive=this.getActiveElement(),this.prevActive!==document.body&&this.prevActive instanceof HTMLElement&&this.prevActive.blur()}bindTopLevelEvents({dead:t}={}){this.boundTopLevelEvents||(this.boundTopLevelEvents=!0,this.serverCloseRef=this.socket.onClose(e=>{if(e&&e.code===1e3&&this.main)return this.reloadWithJitter(this.main)}),document.body.addEventListener("click",function(){}),window.addEventListener("pageshow",e=>{e.persisted&&(this.getSocket().disconnect(),this.withPageLoading({to:window.location.href,kind:"redirect"}),window.location.reload())},!0),t||this.bindNav(),this.bindClicks(),t||this.bindForms(),this.bind({keyup:"keyup",keydown:"keydown"},(e,i,s,n,r,o)=>{let a=n.getAttribute(this.binding(Vi)),h=e.key&&e.key.toLowerCase();if(a&&a.toLowerCase()!==h)return;let c={key:e.key,...this.eventMeta(i,e,n)};x.exec(e,i,r,s,n,["push",{data:c}])}),this.bind({blur:"focusout",focus:"focusin"},(e,i,s,n,r,o)=>{if(!o){let a={key:e.key,...this.eventMeta(i,e,n)};x.exec(e,i,r,s,n,["push",{data:a}])}}),this.bind({blur:"blur",focus:"focus"},(e,i,s,n,r,o)=>{if(o==="window"){let a=this.eventMeta(i,e,n);x.exec(e,i,r,s,n,["push",{data:a}])}}),this.on("dragover",e=>e.preventDefault()),this.on("dragenter",e=>{let i=Se(e.target,this.binding(et));!i||!(i instanceof HTMLElement)||ss(e)&&this.js().addClass(i,gt)}),this.on("dragleave",e=>{let i=Se(e.target,this.binding(et));if(!i||!(i instanceof HTMLElement))return;let s=i.getBoundingClientRect();(e.clientX<=s.left||e.clientX>=s.right||e.clientY<=s.top||e.clientY>=s.bottom)&&this.js().removeClass(i,gt)}),this.on("drop",e=>{e.preventDefault();let i=Se(e.target,this.binding(et));if(!i||!(i instanceof HTMLElement))return;this.js().removeClass(i,gt);let s=i.getAttribute(this.binding(et)),n=s&&document.getElementById(s),r=Array.from(e.dataTransfer.files||[]);!n||!(n instanceof HTMLInputElement)||n.disabled||r.length===0||!(n.files instanceof FileList)||(W.trackFiles(n,r,e.dataTransfer),n.dispatchEvent(new Event("input",{bubbles:!0})))}),this.on(fi,e=>{let i=e.target;if(!u.isUploadInput(i))return;let s=Array.from(e.detail.files||[]).filter(n=>n instanceof File||n instanceof Blob);W.trackFiles(i,s),i.dispatchEvent(new Event("input",{bubbles:!0}))}))}eventMeta(t,e,i){let s=this.metadataCallbacks[t];return s?s(e,i):{}}setPendingLink(t){return this.linkRef++,this.pendingLink=t,this.resetReloadStatus(),this.linkRef}resetReloadStatus(){Z.deleteCookie(Wt)}commitPendingLink(t){return this.linkRef!==t?!1:(this.href=this.pendingLink,this.pendingLink=null,!0)}getHref(){return this.href}hasPendingLink(){return!!this.pendingLink}bind(t,e){for(let i in t){let s=t[i];this.on(s,n=>{let r=this.binding(i),o=this.binding(`window-${i}`),a=n.target.getAttribute&&n.target.getAttribute(r);a?this.debounce(n.target,n,s,()=>{this.withinOwners(n.target,h=>{e(n,i,h,n.target,a,null)})}):u.all(document,`[${o}]`,h=>{let c=h.getAttribute(o);this.debounce(h,n,s,()=>{this.withinOwners(h,f=>{e(n,i,f,h,c,"window")})})})})}}bindClicks(){this.on("mousedown",t=>this.clickStartedAtTarget=t.target),this.bindClick("click","click")}bindClick(t,e){let i=this.binding(e);window.addEventListener(t,s=>{let n=null;s.detail===0&&(this.clickStartedAtTarget=s.target);let r=this.clickStartedAtTarget||s.target;n=Se(s.target,i),this.dispatchClickAway(s,r),this.clickStartedAtTarget=null;let o=n&&n.getAttribute(i);if(!o){u.isNewPageClick(s,window.location)&&this.unload();return}n.getAttribute("href")==="#"&&s.preventDefault(),!n.hasAttribute(ie)&&this.debounce(n,s,"click",()=>{this.withinOwners(n,a=>{x.exec(s,"click",o,a,n,["push",{data:this.eventMeta("click",s,n)}])})})},!1)}dispatchClickAway(t,e){let i=this.binding("click-away"),s=e.closest(`[${ve}]`),n=s&&u.byId(s.getAttribute(ve));u.all(document,`[${i}]`,r=>{let o=e;s&&!s.contains(r)&&(o=n),r.isSameNode(o)||r.contains(o)||!x.isVisible(e)||this.withinOwners(r,a=>{let h=r.getAttribute(i);x.isVisible(r)&&x.isInViewport(r)&&x.exec(t,"click",h,a,r,["push",{data:this.eventMeta("click",t,t.target)}])})})}bindNav(){if(!Z.canPushState())return;history.scrollRestoration&&(history.scrollRestoration="manual");let t=null;window.addEventListener("scroll",e=>{clearTimeout(t),t=setTimeout(()=>{Z.updateCurrentState(i=>Object.assign(i,{scroll:window.scrollY}))},100)}),window.addEventListener("popstate",e=>{if(!this.registerNewLocation(window.location))return;let{type:i,backType:s,id:n,scroll:r,position:o}=e.state||{},a=window.location.href,h=o>this.currentHistoryPosition,c=h?i:s||i;this.currentHistoryPosition=o||0,this.sessionStorage.setItem(it,this.currentHistoryPosition.toString()),u.dispatchEvent(window,"phx:navigate",{detail:{href:a,patch:c==="patch",pop:!0,direction:h?"forward":"backward"}}),this.requestDOMUpdate(()=>{let f=()=>{this.maybeScroll(r)};this.main.isConnected()&&c==="patch"&&n===this.main.id?this.main.pushLinkPatch(e,a,null,f):this.replaceMain(a,null,f)})},!1),window.addEventListener("click",e=>{let i=Se(e.target,vt),s=i&&i.getAttribute(vt);if(!s||!this.isConnected()||!this.main||u.wantsNewTab(e))return;let n=i.href instanceof SVGAnimatedString?i.href.baseVal:i.href,r=i.getAttribute(Mi);e.preventDefault(),e.stopImmediatePropagation(),this.pendingLink!==n&&this.requestDOMUpdate(()=>{if(s==="patch")this.pushHistoryPatch(e,n,r,i);else if(s==="redirect")this.historyRedirect(e,n,r,null,i);else throw new Error(`expected ${vt} to be "patch" or "redirect", got: ${s}`);let o=i.getAttribute(this.binding("click"));o&&this.requestDOMUpdate(()=>this.execJS(i,o,"click"))})},!1)}maybeScroll(t){typeof t=="number"&&requestAnimationFrame(()=>{window.scrollTo(0,t)})}dispatchEvent(t,e={}){u.dispatchEvent(window,`phx:${t}`,{detail:e})}dispatchEvents(t){t.forEach(([e,i])=>this.dispatchEvent(e,i))}withPageLoading(t,e){u.dispatchEvent(window,"phx:page-loading-start",{detail:t});let i=()=>u.dispatchEvent(window,"phx:page-loading-stop",{detail:t});return e?e(i):i}pushHistoryPatch(t,e,i,s){if(!this.isConnected()||!this.main.isMain())return Z.redirect(e);this.withPageLoading({to:e,kind:"patch"},n=>{this.main.pushLinkPatch(t,e,s,r=>{this.historyPatch(e,i,r),n()})})}historyPatch(t,e,i=this.setPendingLink(t)){this.commitPendingLink(i)&&(this.currentHistoryPosition++,this.sessionStorage.setItem(it,this.currentHistoryPosition.toString()),Z.updateCurrentState(s=>({...s,backType:"patch"})),Z.pushState(e,{type:"patch",id:this.main.id,position:this.currentHistoryPosition},t),u.dispatchEvent(window,"phx:navigate",{detail:{patch:!0,href:t,pop:!1,direction:"forward"}}),this.registerNewLocation(window.location))}historyRedirect(t,e,i,s,n){let r=n&&t.isTrusted&&t.type!=="popstate";if(r&&n.classList.add("phx-click-loading"),!this.isConnected()||!this.main.isMain())return Z.redirect(e,s);if(/^\/$|^\/[^\/]+.*$/.test(e)){let{protocol:a,host:h}=window.location;e=`${a}//${h}${e}`}let o=window.scrollY;this.withPageLoading({to:e,kind:"redirect"},a=>{this.replaceMain(e,s,h=>{h===this.linkRef&&(this.currentHistoryPosition++,this.sessionStorage.setItem(it,this.currentHistoryPosition.toString()),Z.updateCurrentState(c=>({...c,backType:"redirect"})),Z.pushState(i,{type:"redirect",id:this.main.id,scroll:o,position:this.currentHistoryPosition},e),u.dispatchEvent(window,"phx:navigate",{detail:{href:e,patch:!1,pop:!1,direction:"forward"}}),this.registerNewLocation(window.location)),r&&n.classList.remove("phx-click-loading"),a()})})}registerNewLocation(t){let{pathname:e,search:i}=this.currentLocation;return e+i===t.pathname+t.search?!1:(this.currentLocation=ct(t),!0)}bindForms(){let t=0,e=!1;this.on("submit",i=>{let s=i.target.getAttribute(this.binding("submit")),n=i.target.getAttribute(this.binding("change"));!e&&n&&!s&&(e=!0,i.preventDefault(),this.withinOwners(i.target,r=>{r.disableForm(i.target),window.requestAnimationFrame(()=>{u.isUnloadableFormSubmit(i)&&this.unload(),i.target.submit()})}))}),this.on("submit",i=>{let s=i.target.getAttribute(this.binding("submit"));if(!s){u.isUnloadableFormSubmit(i)&&this.unload();return}i.preventDefault(),i.target.disabled=!0,this.withinOwners(i.target,n=>{x.exec(i,"submit",s,n,i.target,["push",{submitter:i.submitter}])})});for(let i of["change","input"])this.on(i,s=>{if(s instanceof CustomEvent&&(s.target instanceof HTMLInputElement||s.target instanceof HTMLSelectElement||s.target instanceof HTMLTextAreaElement)&&s.target.form===void 0){if(s.detail&&s.detail.dispatcher)throw new Error(`dispatching a custom ${i} event is only supported on input elements inside a form`);return}let n=this.binding("change"),r=s.target;if(this.blockPhxChangeWhileComposing&&s.isComposing){let w=`composition-listener-${i}`;u.private(r,w)||(u.putPrivate(r,w,!0),r.addEventListener("compositionend",()=>{r.dispatchEvent(new Event(i,{bubbles:!0})),u.deletePrivate(r,w)},{once:!0}));return}let o=r.getAttribute(n),a=r.form&&r.form.getAttribute(n),h=o||a;if(!h||r.type==="number"&&r.validity&&r.validity.badInput)return;let c=o?r:r.form,f=t;t++;let{at:g,type:b}=u.private(r,"prev-iteration")||{};g===f-1&&i==="change"&&b==="input"||(u.putPrivate(r,"prev-iteration",{at:f,type:i}),this.debounce(r,s,i,()=>{this.withinOwners(c,w=>{u.putPrivate(r,dt,!0),x.exec(s,"change",h,w,r,["push",{_target:s.target.name,dispatcher:c}])})}))});this.on("reset",i=>{let s=i.target;u.resetForm(s);let n=Array.from(s.elements).find(r=>r.type==="reset");n&&window.requestAnimationFrame(()=>{n.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!1}))})})}debounce(t,e,i,s){if(i==="blur"||i==="focusout")return s();let n=this.binding(Ui),r=this.binding(ji),o=this.defaults.debounce.toString(),a=this.defaults.throttle.toString();this.withinOwners(t,h=>{let c=()=>!h.isDestroyed()&&document.body.contains(t);u.debounce(t,e,n,o,r,a,c,()=>{s()})})}silenceEvents(t){this.silenced=!0,t(),this.silenced=!1}on(t,e){this.boundEventNames.add(t),window.addEventListener(t,i=>{this.silenced||e(i)})}jsQuerySelectorAll(t,e,i){let s=this.domCallbacks.jsQuerySelectorAll;return s?s(t,e,i):i()}},Is=class{constructor(){this.transitions=new Set,this.promises=new Set,this.pendingOps=[]}reset(){this.transitions.forEach(t=>{clearTimeout(t),this.transitions.delete(t)}),this.promises.clear(),this.flushPendingOps()}after(t){this.size()===0?t():this.pushPendingOp(t)}addTransition(t,e,i){e();let s=setTimeout(()=>{this.transitions.delete(s),i(),this.flushPendingOps()},t);this.transitions.add(s)}addAsyncTransition(t){this.promises.add(t),t.then(()=>{this.promises.delete(t),this.flushPendingOps()})}pushPendingOp(t){this.pendingOps.push(t)}size(){return this.transitions.size+this.promises.size}flushPendingOps(){if(this.size()>0)return;let t=this.pendingOps.shift();t&&(t(),this.flushPendingOps())}},Ei=xs;(function(){var t=e();function e(){if(typeof window.CustomEvent=="function")return window.CustomEvent;function n(r,o){o=o||{bubbles:!1,cancelable:!1,detail:void 0};var a=document.createEvent("CustomEvent");return a.initCustomEvent(r,o.bubbles,o.cancelable,o.detail),a}return n.prototype=window.Event.prototype,n}function i(n,r){var o=document.createElement("input");return o.type="hidden",o.name=n,o.value=r,o}function s(n,r){var o=n.getAttribute("data-to"),a=i("_method",n.getAttribute("data-method")),h=i("_csrf_token",n.getAttribute("data-csrf")),c=document.createElement("form"),f=document.createElement("input"),g=n.getAttribute("target");c.method=n.getAttribute("data-method")==="get"?"get":"post",c.action=o,c.style.display="none",g?c.target=g:r&&(c.target="_blank"),c.appendChild(h),c.appendChild(a),document.body.appendChild(c),f.type="submit",c.appendChild(f),f.click()}window.addEventListener("click",function(n){var r=n.target;if(!n.defaultPrevented)for(;r&&r.getAttribute;){var o=new t("phoenix.link.click",{bubbles:!0,cancelable:!0});if(!r.dispatchEvent(o))return n.preventDefault(),n.stopImmediatePropagation(),!1;if(r.getAttribute("data-method")&&r.getAttribute("data-to"))return s(r,n.metaKey||n.shiftKey),n.preventDefault(),!1;r=r.parentNode}},!1),window.addEventListener("phoenix.link.click",function(n){var r=n.target.getAttribute("data-confirm");r&&!window.confirm(r)&&n.preventDefault()},!1)})();document.addEventListener("DOMContentLoaded",()=>{let t=document.querySelector("meta[name='csrf-token']").getAttribute("content"),e="bds-panel-sidebar",i="bds-panel-assistant-sidebar",s="bds-ui-language",n="bds-workbench-",r=l=>{if(!l)return[];try{let d=JSON.parse(l);return Array.isArray(d)?d:[]}catch{return[]}},o=l=>{if(!l)return null;try{let d=JSON.parse(l);return d&&typeof d=="object"&&!Array.isArray(d)?d:null}catch{return null}},a=(l,d)=>{let v=l?.closest(".media-thumbnail");v&&(d?v.classList.add("is-loaded"):v.classList.remove("is-loaded"))},h=l=>{l.querySelectorAll(".media-thumbnail-image").forEach(d=>{a(d,!!(d.complete&&d.naturalWidth>0))})},c=l=>String(l||"").toLowerCase(),f=l=>{let d=l.target?.tagName||null;return l.target?.isContentEditable||["INPUT","TEXTAREA","SELECT"].includes(d)},g=(l,d)=>{let v=d.metaKey||d.ctrlKey;return c(d.key)===c(l.key)&&v===!!l.primary&&d.shiftKey===!!l.shift&&d.altKey===!!l.alt},b=(l,d,v)=>Math.max(d,Math.min(l,v)),w=(l,d,v,k)=>{let _=window.localStorage.getItem(l);if(!_)return d;let D=Number.parseInt(_,10);return Number.isNaN(D)?d:b(D,v,k)},p=l=>{let d=document.querySelector(l);if(!d)return 0;let v=Number.parseInt(d.style.width||"0",10);return Number.isNaN(v)?Math.round(d.getBoundingClientRect().width):v},S=(l,d)=>{let v=document.querySelector(l);v&&(v.style.width=`${d}px`,v.classList.remove("is-hidden"))},A=(l,d)=>{let v=l==="assistant"?i:e;window.localStorage.setItem(v,String(d))},$=()=>{let l=document.documentElement.style,d=(N,U)=>{l.setProperty("--bds-titlebar-overlay-left",`${N}px`),l.setProperty("--bds-titlebar-overlay-right",`${U}px`)},v=navigator.windowControlsOverlay;if(!v)return d(0,0),()=>{};let k=()=>{if(!v.visible){d(0,0);return}let N=v.getTitlebarAreaRect(),U=window.innerWidth||document.documentElement.clientWidth||N.right,q=Math.max(0,Math.round(N.left)),se=Math.max(0,Math.round(U-N.right));d(q,se)},_=()=>k(),D=()=>k();return k(),v.addEventListener("geometrychange",_),window.addEventListener("resize",D),()=>{v.removeEventListener("geometrychange",_),window.removeEventListener("resize",D)}},J,T=!1,R=!1,L=null,V=new Map,m=()=>{for(let l of V.values())if(typeof l?.hasTextFocus=="function"&&l.hasTextFocus())return l;return null},y=(l,d,v=d)=>{if(!l)return!1;let k=typeof l.getAction=="function"?l.getAction(d):null;return k&&typeof k.run=="function"?(k.run(),!0):typeof l.trigger=="function"?(l.trigger("bds-menu",v,null),!0):!1},F=l=>{if(typeof document.execCommand!="function")return!1;try{return document.execCommand(l)}catch{return!1}},z=l=>{let d=b(Math.round(l*100)/100,.5,2);window.__bdsAppZoom=d,document.documentElement.style.zoom=String(d)},M=l=>{let d=m();switch(l){case"undo":return d?y(d,"undo"):F("undo");case"redo":return d?y(d,"redo"):F("redo");case"cut":return d?y(d,"editor.action.clipboardCutAction"):F("cut");case"copy":return d?y(d,"editor.action.clipboardCopyAction"):F("copy");case"paste":return d?y(d,"editor.action.clipboardPasteAction"):F("paste");case"delete":return d?y(d,"deleteLeft"):F("delete");case"select_all":return d?y(d,"editor.action.selectAll"):F("selectAll");case"find":return d?y(d,"actions.find"):!1;case"replace":return d?y(d,"editor.action.startFindReplaceAction"):!1;case"reload":case"force_reload":return window.location.reload(),!0;case"reset_zoom":return z(1),!0;case"zoom_in":return z((window.__bdsAppZoom||1)+.1),!0;case"zoom_out":return z((window.__bdsAppZoom||1)-.1),!0;case"toggle_full_screen":return document.fullscreenElement?document.exitFullscreen?.():document.documentElement.requestFullscreen?.(),!0;default:return!1}},X=(l,d)=>window.getComputedStyle(document.documentElement).getPropertyValue(l).trim()||d,I=l=>{if(!l)return null;let d=l.match(/^#([0-9a-f]{6})$/i);if(d)return{r:Number.parseInt(d[1].slice(0,2),16),g:Number.parseInt(d[1].slice(2,4),16),b:Number.parseInt(d[1].slice(4,6),16)};let v=l.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);return v?{r:Number.parseInt(v[1],10),g:Number.parseInt(v[2],10),b:Number.parseInt(v[3],10)}:null},Y=(l,d)=>{let v=I(l);return v?`#${[v.r,v.g,v.b].map(k=>b(k,0,255).toString(16).padStart(2,"0")).join("")}`:d},Ke=l=>new Promise((d,v)=>{let k=document.querySelector(`script[src="${l}"]`);if(k){if(k.dataset.loaded==="true"){d();return}k.addEventListener("load",()=>d(),{once:!0}),k.addEventListener("error",()=>v(new Error(`Failed to load ${l}`)),{once:!0});return}let _=document.createElement("script");_.src=l,_.async=!0,_.addEventListener("load",()=>{_.dataset.loaded="true",d()},{once:!0}),_.addEventListener("error",()=>v(new Error(`Failed to load ${l}`)),{once:!0}),document.head.appendChild(_)}),Ce=(l,d)=>{let v=String(l||"working-tree").replace(/^\/+/,"");return`inmemory://model/git-diff/${d}/${v}`},Ge=l=>{T||(l.languages.register({id:"liquid"}),l.languages.setLanguageConfiguration("liquid",{comments:{blockComment:["{% comment %}","{% endcomment %}"]},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]}),l.languages.setMonarchTokensProvider("liquid",{defaultToken:"",tokenizer:{root:[[/\{\{-?/,{token:"delimiter.output",next:"@liquidOutput"}],[/\{%-?\s*comment\b[^%]*-?%\}/,{token:"comment.block",next:"@liquidComment"}],[/\{%-?/,{token:"delimiter.tag",next:"@liquidTag"}],[/<!DOCTYPE/i,"metatag"],[/<!--/,{token:"comment",next:"@htmlComment"}],[/(<)(script)/i,["delimiter.html","tag.html"],"@scriptTag"],[/(<)(style)/i,["delimiter.html","tag.html"],"@styleTag"],[/(<\/)([\w:-]+)/,["delimiter.html","tag.html"]],[/(<)([\w:-]+)/,["delimiter.html","tag.html"],"@htmlTag"],[/[^<{]+/,""],[/./,""]],liquidOutput:[[/-?\}\}/,{token:"delimiter.output",next:"@pop"}],[/\|\s*[a-zA-Z_][\w-]*/,"keyword"],[/\b(?:true|false|nil|blank|empty)\b/,"keyword"],[/\b\d+(?:\.\d+)?\b/,"number"],[/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,"string"],[/[a-zA-Z_][\w.-]*/,"identifier"],[/[,:()[\]]/,"delimiter"]],liquidTag:[[/-?%\}/,{token:"delimiter.tag",next:"@pop"}],[/\b(?:assign|capture|case|comment|cycle|decrement|echo|elsif|else|endcase|endcapture|endif|endfor|endunless|endcomment|for|if|include|increment|liquid|paginate|raw|render|tablerow|unless|when)\b/,"keyword"],[/\|\s*[a-zA-Z_][\w-]*/,"keyword"],[/\b(?:true|false|nil|blank|empty|contains)\b/,"keyword"],[/\b\d+(?:\.\d+)?\b/,"number"],[/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,"string"],[/[><=!]=?|\.|:/,"operator"],[/[a-zA-Z_][\w.-]*/,"identifier"],[/[,:()[\]]/,"delimiter"]],liquidComment:[[/\{%-?\s*endcomment\s*-?%\}/,{token:"comment.block",next:"@pop"}],[/./,"comment.block"]],htmlComment:[[/-->/,{token:"comment",next:"@pop"}],[/./,"comment"]],htmlTag:[[/\/>/,{token:"delimiter.html",next:"@pop"}],[/>/,{token:"delimiter.html",next:"@pop"}],[/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,"attribute.value"],[/[\w:-]+/,"attribute.name"],[/=/,"delimiter"]],scriptTag:[[/>/,{token:"delimiter.html",next:"@pop"}],[/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,"attribute.value"],[/[\w:-]+/,"attribute.name"],[/=/,"delimiter"]],styleTag:[[/>/,{token:"delimiter.html",next:"@pop"}],[/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,"attribute.value"],[/[\w:-]+/,"attribute.name"],[/=/,"delimiter"]]}}),T=!0)},Te=l=>{R||(l.languages.register({id:"markdown-with-macros"}),l.languages.setMonarchTokensProvider("markdown-with-macros",{defaultToken:"",tokenPostfix:".md",tokenizer:{root:[[/\[\[[a-zA-Z][\w-]*/,{token:"keyword.macro",next:"@macroParams"}],[/^#{1,6}\s.*$/,"keyword.header"],[/^\s*>+/,"string.quote"],[/^\s*[-+*]\s/,"keyword"],[/^\s*\d+\.\s/,"keyword"],[/^\s*```\w*/,{token:"string.code",next:"@codeblock"}],[/\*\*[^*]+\*\*/,"strong"],[/\*[^*]+\*/,"emphasis"],[/__[^_]+__/,"strong"],[/_[^_]+_/,"emphasis"],[/`[^`]+`/,"variable"],[/!?\[[^\]]*\]\([^)]*\)/,"string.link"],[/!?\[[^\]]*\]\[[^\]]*\]/,"string.link"]],macroParams:[[/\]\]/,{token:"keyword.macro",next:"@root"}],[/[a-zA-Z][\w-]*(?=\s*=)/,"attribute.name"],[/=/,"delimiter"],[/"[^"]*"/,"string"],[/\s+/,"white"],[/[^\]"=\s]+/,"attribute.value"]],codeblock:[[/^\s*```\s*$/,{token:"string.code",next:"@root"}],[/.*$/,"variable.source"]]}}),R=!0)},E=l=>{let d=Y(X("--vscode-editor-background",X("--vscode-input-background","#1e1e1e")),"#1e1e1e"),v=Y(X("--vscode-editor-foreground","#d4d4d4"),"#d4d4d4"),k=Y(X("--vscode-editorLineNumber-foreground","#858585"),"#858585"),_=Y(X("--vscode-editorLineNumber-activeForeground",v),v),D=Y(X("--vscode-editor-selectionBackground","#264f78"),"#264f78"),N=Y(X("--vscode-editor-inactiveSelectionBackground","#3a3d41"),"#3a3d41"),U=Y(X("--vscode-editorCursor-foreground",v),v),q=Y(X("--vscode-panel-border","#3c3c3c"),"#3c3c3c"),se=Y(X("--vscode-editor-lineHighlightBackground",d),d),ne=[d,v,k,_,D,N,U,q].join("|");if(ne===L){l.editor.setTheme("bds-theme");return}l.editor.defineTheme("bds-theme",{base:"vs-dark",inherit:!0,rules:[{token:"keyword.macro",foreground:"C586C0",fontStyle:"bold"},{token:"attribute.name",foreground:"9CDCFE"},{token:"attribute.value",foreground:"CE9178"}],colors:{"editor.background":d,"editor.foreground":v,"editor.lineHighlightBackground":se,"editorCursor.foreground":U,"editor.selectionBackground":D,"editor.inactiveSelectionBackground":N,"editorLineNumber.foreground":k,"editorLineNumber.activeForeground":_,"editorIndentGuide.background1":q,"editorIndentGuide.activeBackground1":v,"editorWidget.border":q,"editorGutter.background":d,focusBorder:q,"input.border":q}}),L=ne,l.editor.setTheme("bds-theme")},C=()=>window.monaco?.editor?(E(window.monaco),Ge(window.monaco),Te(window.monaco),Promise.resolve(window.monaco)):J||(J=Ke("/monaco/vs/loader.js").then(()=>new Promise((l,d)=>{window.require.config({paths:{vs:"/monaco/vs"}}),window.require(["vs/editor/editor.main"],()=>{E(window.monaco),Ge(window.monaco),Te(window.monaco),l(window.monaco)},d)})).catch(l=>{throw J=null,l}),J),H={AppShell:{mounted(){this.shortcuts=r(this.el.dataset.shortcuts),this.currentProjectId=this.el.dataset.projectId||"",this.syncStoredLayout(),this.syncStoredUiLanguage(),this.destroyOverlaySync=$(),this.workbenchStorageKey=l=>l?`${n}${l}`:null,this.restoreStoredWorkbenchSession=()=>{let l=this.el.dataset.projectId||"",d=this.workbenchStorageKey(l);if(!d)return!1;let v=o(window.localStorage.getItem(d));return v?(this.pushEvent("restore_workbench_session",{session:v}),!0):!1},this.persistWorkbenchSession=()=>{let l=this.el.dataset.projectId||"",d=this.workbenchStorageKey(l),v=this.el.dataset.workbenchSession;!d||!v||window.localStorage.setItem(d,v)},this.handleMouseDown=l=>{let d=l.target.closest("[data-role='resize-handle']");if(!d||!this.el.contains(d))return;l.preventDefault();let v=d.dataset.resize,k=l.clientX,_=p(v==="assistant"?"[data-testid='assistant-shell']":"[data-testid='sidebar-shell']"),D=v==="assistant"?280:200,N=v==="assistant"?640:500,U=v==="assistant",q=ne=>{let He=U?k-ne.clientX:ne.clientX-k,Ne=b(_+He,D,N);S(v==="assistant"?"[data-testid='assistant-shell']":"[data-testid='sidebar-shell']",Ne),A(v,Ne)},se=ne=>{let He=U?k-ne.clientX:ne.clientX-k,Ne=b(_+He,D,N);A(v,Ne),this.pushEvent("resize_panel",{target:v,width:Ne}),window.removeEventListener("mousemove",q),window.removeEventListener("mouseup",se)};window.addEventListener("mousemove",q),window.addEventListener("mouseup",se)},this.el.addEventListener("mousedown",this.handleMouseDown),this.handleNativeMenuAction=l=>{let d=l.detail?.action,v=l.detail?.ackId;d&&this.pushEvent("native_menu_action",{action:d},()=>{v&&window.dispatchEvent(new CustomEvent("bds:native-menu-action-ack",{detail:{ackId:v}}))})},this.handleChange=l=>{let d=l.target.closest(".status-bar-language-select");d&&this.el.contains(d)&&window.localStorage.setItem(s,d.value)},this.handleShortcutKeyDown=l=>{f(l)||!this.shortcuts.find(v=>g(v,l))||(l.preventDefault(),l.stopPropagation(),this.pushEvent("shortcut",{key:c(l.key),meta:l.metaKey,ctrl:l.ctrlKey,alt:l.altKey,shift:l.shiftKey,tag:l.target?.tagName||null,contentEditable:l.target?.isContentEditable||!1}))},this.handleThumbnailLoad=l=>{l.target instanceof HTMLImageElement&&l.target.classList.contains("media-thumbnail-image")&&a(l.target,!0)},this.handleThumbnailError=l=>{l.target instanceof HTMLImageElement&&l.target.classList.contains("media-thumbnail-image")&&a(l.target,!1)},this.handleEvent("menu-runtime-command",({action:l})=>{l&&M(String(l))}),window.addEventListener("bds:native-menu-action",this.handleNativeMenuAction),window.addEventListener("keydown",this.handleShortcutKeyDown,!0),this.el.addEventListener("load",this.handleThumbnailLoad,!0),this.el.addEventListener("error",this.handleThumbnailError,!0),this.el.addEventListener("change",this.handleChange),h(this.el),this.restoreStoredWorkbenchSession()},updated(){let l=this.el.dataset.projectId||"";l!==this.currentProjectId&&(this.currentProjectId=l,this.restoreStoredWorkbenchSession())||(h(this.el),this.persistWorkbenchSession())},destroyed(){this.el.removeEventListener("mousedown",this.handleMouseDown),this.el.removeEventListener("load",this.handleThumbnailLoad,!0),this.el.removeEventListener("error",this.handleThumbnailError,!0),this.el.removeEventListener("change",this.handleChange),window.removeEventListener("bds:native-menu-action",this.handleNativeMenuAction),window.removeEventListener("keydown",this.handleShortcutKeyDown,!0),this.destroyOverlaySync&&this.destroyOverlaySync()},syncStoredLayout(){this.pushEvent("sync_layout",{sidebar_width:w(e,p("[data-testid='sidebar-shell']"),200,500),assistant_sidebar_width:w(i,360,280,640)})},syncStoredUiLanguage(){let l=window.localStorage.getItem(s);l&&this.pushEvent("sync_ui_language",{language:l})}},SidebarInteractions:{mounted(){this.handleDblClick=l=>{let d=l.target.closest("[data-testid='sidebar-open-item']");!d||!this.el.contains(d)||this.pushEvent("pin_sidebar_item",{route:d.dataset.route,id:d.dataset.itemId,title:d.dataset.openTitle||"",subtitle:d.dataset.openSubtitle||""})},this.el.addEventListener("dblclick",this.handleDblClick)},destroyed(){this.el.removeEventListener("dblclick",this.handleDblClick)}},SettingsSectionScroll:{mounted(){this.lastTargetId=null,this.scrollToSelectedSection()},updated(){this.scrollToSelectedSection()},scrollToSelectedSection(){let l=this.el.dataset.settingsScrollTarget;!l||l===this.lastTargetId||(this.lastTargetId=l,window.requestAnimationFrame(()=>{let d=document.getElementById(l);d&&this.el.contains(d)&&d.scrollIntoView({block:"start",behavior:"smooth"})}))}},TagsSectionScroll:{mounted(){this.lastTargetId=null,this.scrollToSelectedSection()},updated(){this.scrollToSelectedSection()},scrollToSelectedSection(){let l=this.el.dataset.tagsScrollTarget;!l||l===this.lastTargetId||(this.lastTargetId=l,window.requestAnimationFrame(()=>{let d=document.getElementById(l);d&&this.el.contains(d)&&d.scrollIntoView({block:"start",behavior:"smooth"})}))}},ChatSurface:{mounted(){this.stickToBottom=!0,this.scrollContainer=null,this.autoResize=()=>{let l=this.el.querySelector(".chat-input");if(!l)return;let d=getComputedStyle(l),v=parseFloat(d.getPropertyValue("--chat-input-min-height"))||20,k=parseFloat(d.getPropertyValue("--chat-input-max-height"))||160;if(l.rows=1,l.style.minHeight=`${v}px`,l.value.trim()===""){l.style.height=`${v}px`,l.style.maxHeight=`${v}px`,l.style.overflowY="hidden";return}l.style.maxHeight=`${k}px`,l.style.height="0px";let _=Math.min(Math.max(l.scrollHeight,v),k);l.style.height=`${_}px`,l.style.overflowY=_>=k?"auto":"hidden"},this.syncScrollContainer=()=>{let l=this.el.querySelector(".chat-messages");l!==this.scrollContainer&&(this.scrollContainer&&this.scrollContainer.removeEventListener("scroll",this.handleScroll),this.scrollContainer=l,this.scrollContainer&&this.scrollContainer.addEventListener("scroll",this.handleScroll))},this.scrollToBottom=(l=!1)=>{this.scrollContainer&&(l||this.stickToBottom)&&(this.scrollContainer.scrollTop=this.scrollContainer.scrollHeight)},this.syncExpandedSurfaces=()=>{this.el.querySelectorAll(".chat-inline-surface[data-expanded='true']").forEach(l=>{l.open=!0})},this.surfaceObserver=new MutationObserver(()=>{this.syncExpandedSurfaces()}),this.handleScroll=()=>{if(!this.scrollContainer){this.stickToBottom=!0;return}let l=this.scrollContainer.scrollHeight-this.scrollContainer.scrollTop-this.scrollContainer.clientHeight;this.stickToBottom=l<48},this.handleInput=l=>{l.target.closest(".chat-input")&&(this.stickToBottom=!0,this.autoResize())},this.handleKeyDown=l=>{if(l.target.closest(".chat-input")&&l.key==="Enter"&&!l.shiftKey&&!l.isComposing){l.preventDefault();let d=this.el.querySelector("[data-testid='chat-send-button']");d&&!d.disabled&&d.click()}},this.el.addEventListener("input",this.handleInput),this.el.addEventListener("keydown",this.handleKeyDown),this.syncScrollContainer(),this.syncExpandedSurfaces(),this.surfaceObserver.observe(this.el,{childList:!0,subtree:!0}),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom(!0))},updated(){this.syncScrollContainer(),this.syncExpandedSurfaces(),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom())},destroyed(){this.surfaceObserver.disconnect(),this.el.removeEventListener("input",this.handleInput),this.el.removeEventListener("keydown",this.handleKeyDown),this.scrollContainer&&this.scrollContainer.removeEventListener("scroll",this.handleScroll)}},MenuEditorTree:{mounted(){this.dragItemId=null,this.dragSourceEl=null,this.dropTargetEl=null,this.dropPosition=null,this.clearDropTarget=()=>{this.dropTargetEl&&this.dropTargetEl.classList.remove("is-drop-before","is-drop-after","is-drop-inside"),this.dropTargetEl=null,this.dropPosition=null},this.setDropTarget=(l,d)=>{this.dropTargetEl===l&&this.dropPosition===d||(this.clearDropTarget(),this.dropTargetEl=l,this.dropPosition=d,l.classList.add(`is-drop-${d}`))},this.handleDragStart=l=>{let d=l.target.closest("[data-menu-drag-handle='true']"),v=l.target.closest("[data-menu-item-id]");!d||!v||!this.el.contains(v)||(this.dragItemId=v.dataset.menuItemId||null,this.dragSourceEl=v,v.classList.add("is-dragging"),l.dataTransfer&&(l.dataTransfer.effectAllowed="move",l.dataTransfer.setData("text/plain",this.dragItemId||"")))},this.handleDragOver=l=>{let d=l.target.closest("[data-menu-item-id]");if(!this.dragItemId||!d||!this.el.contains(d)){this.clearDropTarget();return}let v=d.dataset.menuItemId||"";if(!v||v===this.dragItemId){this.clearDropTarget();return}l.preventDefault();let k=d.getBoundingClientRect(),_=l.clientY-k.top,D=d.dataset.menuCanDropInside==="true",N=k.height*.3,U=k.height*.7,q=D&&_>=N&&_<=U?"inside":_<k.height/2?"before":"after";this.setDropTarget(d,q),l.dataTransfer&&(l.dataTransfer.dropEffect="move")},this.handleDrop=l=>{let d=l.target.closest("[data-menu-item-id]");if(!this.dragItemId||!d||!this.el.contains(d)||!this.dropPosition){this.clearDropTarget();return}l.preventDefault(),this.pushEvent("menu_editor_drop_item",{drag_item_id:this.dragItemId,target_item_id:d.dataset.menuItemId,position:this.dropPosition}),this.clearDropTarget()},this.handleDragLeave=l=>{let d=l.relatedTarget;this.dropTargetEl&&(!d||!this.dropTargetEl.contains(d))&&this.clearDropTarget()},this.handleDragEnd=()=>{this.dragSourceEl&&this.dragSourceEl.classList.remove("is-dragging"),this.dragItemId=null,this.dragSourceEl=null,this.clearDropTarget()},this.el.addEventListener("dragstart",this.handleDragStart),this.el.addEventListener("dragover",this.handleDragOver),this.el.addEventListener("drop",this.handleDrop),this.el.addEventListener("dragleave",this.handleDragLeave),this.el.addEventListener("dragend",this.handleDragEnd)},destroyed(){this.el.removeEventListener("dragstart",this.handleDragStart),this.el.removeEventListener("dragover",this.handleDragOver),this.el.removeEventListener("drop",this.handleDrop),this.el.removeEventListener("dragleave",this.handleDragLeave),this.el.removeEventListener("dragend",this.handleDragEnd)}},MonacoEditor:{mounted(){this.textarea=document.getElementById(this.el.dataset.monacoInputId)||this.el.querySelector("textarea"),this.host=this.el.querySelector(".monaco-editor-instance"),this.language=this.el.dataset.monacoLanguage||"plaintext",this.wordWrap=this.el.dataset.monacoWordWrap||"off",this.editorId=this.el.dataset.monacoEditorId||"",this.insertEvent=this.el.dataset.monacoInsertEvent||"",this.syncTimer=null,this.isApplyingRemoteUpdate=!1,this.lastKnownValue=this.textarea?.value||"",this.syncEditorFromTextarea=()=>{if(this.textarea=document.getElementById(this.el.dataset.monacoInputId)||this.el.querySelector("textarea"),!this.textarea||!this.editor)return;let l=this.textarea.value||"";this.editor.getValue()!==l&&(this.isApplyingRemoteUpdate=!0,this.editor.setValue(l),this.isApplyingRemoteUpdate=!1),this.lastKnownValue=l},this.layoutEditorSoon=()=>{window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{this.editor&&this.editor.layout()})})},this.waitForMonacoVisibleSize=()=>new Promise(l=>{let d=!1,v=0,k=()=>{let N=this.host?.getBoundingClientRect();return!!(N&&N.width>0&&N.height>0)},_=()=>{d||(d=!0,this.visibleSizeObserver?.disconnect(),this.visibleSizeObserver=null,l())},D=()=>{if(k()||v>=20){_();return}v+=1,window.requestAnimationFrame(D)};if(k()){_();return}window.ResizeObserver&&this.host&&(this.visibleSizeObserver=new ResizeObserver(()=>{k()&&_()}),this.visibleSizeObserver.observe(this.host)),window.requestAnimationFrame(D)}),this.queueSync=()=>{!this.textarea||!this.editor||(window.clearTimeout(this.syncTimer),this.syncTimer=window.setTimeout(()=>{if(!this.textarea||!this.editor)return;let l=this.editor.getValue();this.textarea.value!==l&&(this.lastKnownValue=l,this.textarea.value=l,this.textarea.dispatchEvent(new Event("input",{bubbles:!0})))},120))},this.handleInsert=({id:l,content:d})=>{if(!this.editor||!d||String(l)!==String(this.editorId))return;let v=this.editor.getModel(),k=this.editor.getSelection();if(!v||!k)return;let _=this.editor.getValue(),D=v.getOffsetAt(k.getStartPosition()),N=v.getOffsetAt(k.getEndPosition()),U=_.slice(0,D),q=_.slice(N),se=U!==""&&!U.endsWith(`
-`)?`
-`:"",ne=q!==""&&!d.endsWith(`
-`)?`
-`:"",He=`${se}${d}${ne}`;this.editor.executeEdits("bds-insert-content",[{range:k,text:He,forceMoveMarkers:!0}]),this.editor.focus()},C().then(async l=>{!this.host||!this.textarea||(await this.waitForMonacoVisibleSize(),E(l),this.editor=l.editor.create(this.host,{value:this.textarea.value||"",language:this.language,theme:"bds-theme",automaticLayout:!0,minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:this.wordWrap,lineNumbers:"on",lineNumbersMinChars:3,fontSize:14,fontFamily:"'Cascadia Code', 'Consolas', 'Courier New', monospace",padding:{top:12,bottom:12},roundedSelection:!1,renderLineHighlight:"line",formatOnPaste:!0,cursorStyle:"line",cursorBlinking:"smooth",quickSuggestions:this.language!=="markdown-with-macros",tabSize:2,insertSpaces:!0}),V.set(this.editorId||this.el.id,this.editor),l.editor.setTheme("bds-theme"),this.syncEditorFromTextarea(),this.layoutEditorSoon(),this.changeSubscription=this.editor.onDidChangeModelContent(()=>{this.isApplyingRemoteUpdate||this.queueSync()}),this.insertEvent&&this.handleEvent(this.insertEvent,this.handleInsert))}).catch(l=>{console.error("Failed to load Monaco editor",l)})},updated(){this.textarea=document.getElementById(this.el.dataset.monacoInputId)||this.el.querySelector("textarea"),this.host=this.el.querySelector(".monaco-editor-instance"),this.language=this.el.dataset.monacoLanguage||this.language||"plaintext",this.wordWrap=this.el.dataset.monacoWordWrap||this.wordWrap||"off",!(!this.editor||!this.textarea)&&(C().then(l=>{E(l),l.editor.setTheme("bds-theme"),this.editor.getModel()?.getLanguageId()!==this.language&&l.editor.setModelLanguage(this.editor.getModel(),this.language),this.editor.updateOptions({wordWrap:this.wordWrap})}),this.syncEditorFromTextarea(),this.layoutEditorSoon())},destroyed(){window.clearTimeout(this.syncTimer),this.visibleSizeObserver?.disconnect(),this.changeSubscription?.dispose(),V.delete(this.editorId||this.el.id),this.editor?.dispose()}},MonacoDiffEditor:{mounted(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true",this.readValues=()=>({original:this.originalInput?.value||"",modified:this.modifiedInput?.value||""}),this.applyDataset=()=>{this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true"},this.setModels=l=>{let d=this.readValues();this.originalModel?.dispose(),this.modifiedModel?.dispose(),this.originalModel=l.editor.createModel(d.original,this.language,l.Uri.parse(Ce(this.filePath,"original"))),this.modifiedModel=l.editor.createModel(d.modified,this.language,l.Uri.parse(Ce(this.filePath,"modified"))),this.editor.setModel({original:this.originalModel,modified:this.modifiedModel}),this.lastFilePath=this.filePath},C().then(l=>{this.host&&(E(l),this.editor=l.editor.createDiffEditor(this.host,{theme:"bds-theme",automaticLayout:!0,readOnly:!0,renderSideBySide:this.viewStyle==="side-by-side",minimap:{enabled:!1},scrollBeyondLastLine:!1,lineNumbers:"on",diffCodeLens:!1,originalEditable:!1,wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged},ignoreTrimWhitespace:!1}),this.setModels(l))}).catch(l=>{console.error("Failed to load Monaco diff editor",l)})},updated(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.applyDataset(),this.editor&&C().then(l=>{if(E(l),l.editor.setTheme("bds-theme"),this.editor.updateOptions({renderSideBySide:this.viewStyle==="side-by-side",wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged}}),this.lastFilePath!==this.filePath){this.setModels(l);return}let d=this.readValues();this.originalModel&&this.originalModel.getLanguageId()!==this.language&&l.editor.setModelLanguage(this.originalModel,this.language),this.modifiedModel&&this.modifiedModel.getLanguageId()!==this.language&&l.editor.setModelLanguage(this.modifiedModel,this.language),this.originalModel&&this.originalModel.getValue()!==d.original&&this.originalModel.setValue(d.original),this.modifiedModel&&this.modifiedModel.getValue()!==d.modified&&this.modifiedModel.setValue(d.modified)})},destroyed(){this.originalModel?.dispose(),this.modifiedModel?.dispose(),this.editor?.dispose()}}},P=new Ei("/live",Nt,{params:{_csrf_token:t},hooks:H,metadata:{keydown:l=>({key:l.key,meta:l.metaKey,ctrl:l.ctrlKey,alt:l.altKey,shift:l.shiftKey,tag:l.target?.tagName||null,contentEditable:l.target?.isContentEditable||!1})}});P.connect(),window.liveSocket=P});})();
+      `);
+      }
+      this.socket = new phxSocket(url, opts);
+      this.bindingPrefix = opts.bindingPrefix || BINDING_PREFIX;
+      this.opts = opts;
+      this.params = closure2(opts.params || {});
+      this.viewLogger = opts.viewLogger;
+      this.metadataCallbacks = opts.metadata || {};
+      this.defaults = Object.assign(clone(DEFAULTS), opts.defaults || {});
+      this.prevActive = null;
+      this.silenced = false;
+      this.main = null;
+      this.outgoingMainEl = null;
+      this.clickStartedAtTarget = null;
+      this.linkRef = 1;
+      this.roots = {};
+      this.href = window.location.href;
+      this.pendingLink = null;
+      this.currentLocation = clone(window.location);
+      this.hooks = opts.hooks || {};
+      this.uploaders = opts.uploaders || {};
+      this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;
+      this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT;
+      this.reloadWithJitterTimer = null;
+      this.maxReloads = opts.maxReloads || MAX_RELOADS;
+      this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;
+      this.reloadJitterMax = opts.reloadJitterMax || RELOAD_JITTER_MAX;
+      this.failsafeJitter = opts.failsafeJitter || FAILSAFE_JITTER;
+      this.localStorage = opts.localStorage || window.localStorage;
+      this.sessionStorage = opts.sessionStorage || window.sessionStorage;
+      this.boundTopLevelEvents = false;
+      this.boundEventNames = /* @__PURE__ */ new Set();
+      this.blockPhxChangeWhileComposing = opts.blockPhxChangeWhileComposing || false;
+      this.serverCloseRef = null;
+      this.domCallbacks = Object.assign(
+        {
+          jsQuerySelectorAll: null,
+          onPatchStart: closure2(),
+          onPatchEnd: closure2(),
+          onNodeAdded: closure2(),
+          onBeforeElUpdated: closure2()
+        },
+        opts.dom || {}
+      );
+      this.transitions = new TransitionSet();
+      this.currentHistoryPosition = parseInt(this.sessionStorage.getItem(PHX_LV_HISTORY_POSITION)) || 0;
+      window.addEventListener("pagehide", (_e) => {
+        this.unloaded = true;
+      });
+      this.socket.onOpen(() => {
+        if (this.isUnloaded()) {
+          window.location.reload();
+        }
+      });
+    }
+    // public
+    version() {
+      return "1.1.28";
+    }
+    isProfileEnabled() {
+      return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
+    }
+    isDebugEnabled() {
+      return this.sessionStorage.getItem(PHX_LV_DEBUG) === "true";
+    }
+    isDebugDisabled() {
+      return this.sessionStorage.getItem(PHX_LV_DEBUG) === "false";
+    }
+    enableDebug() {
+      this.sessionStorage.setItem(PHX_LV_DEBUG, "true");
+    }
+    enableProfiling() {
+      this.sessionStorage.setItem(PHX_LV_PROFILE, "true");
+    }
+    disableDebug() {
+      this.sessionStorage.setItem(PHX_LV_DEBUG, "false");
+    }
+    disableProfiling() {
+      this.sessionStorage.removeItem(PHX_LV_PROFILE);
+    }
+    enableLatencySim(upperBoundMs) {
+      this.enableDebug();
+      console.log(
+        "latency simulator enabled for the duration of this browser session. Call disableLatencySim() to disable"
+      );
+      this.sessionStorage.setItem(PHX_LV_LATENCY_SIM, upperBoundMs);
+    }
+    disableLatencySim() {
+      this.sessionStorage.removeItem(PHX_LV_LATENCY_SIM);
+    }
+    getLatencySim() {
+      const str = this.sessionStorage.getItem(PHX_LV_LATENCY_SIM);
+      return str ? parseInt(str) : null;
+    }
+    getSocket() {
+      return this.socket;
+    }
+    connect() {
+      if (window.location.hostname === "localhost" && !this.isDebugDisabled()) {
+        this.enableDebug();
+      }
+      const doConnect = () => {
+        this.resetReloadStatus();
+        if (this.joinRootViews()) {
+          this.bindTopLevelEvents();
+          this.socket.connect();
+        } else if (this.main) {
+          this.socket.connect();
+        } else {
+          this.bindTopLevelEvents({ dead: true });
+        }
+        this.joinDeadView();
+      };
+      if (["complete", "loaded", "interactive"].indexOf(document.readyState) >= 0) {
+        doConnect();
+      } else {
+        document.addEventListener("DOMContentLoaded", () => doConnect());
+      }
+    }
+    disconnect(callback) {
+      clearTimeout(this.reloadWithJitterTimer);
+      if (this.serverCloseRef) {
+        this.socket.off(this.serverCloseRef);
+        this.serverCloseRef = null;
+      }
+      this.socket.disconnect(callback);
+    }
+    replaceTransport(transport) {
+      clearTimeout(this.reloadWithJitterTimer);
+      this.socket.replaceTransport(transport);
+      this.connect();
+    }
+    /**
+     * @param {HTMLElement} el
+     * @param {string} encodedJS
+     * @param {string | null} [eventType]
+     */
+    execJS(el, encodedJS, eventType = null) {
+      const e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
+      this.owner(el, (view) => js_default.exec(e, eventType, encodedJS, view, el));
+    }
+    /**
+     * Returns an object with methods to manipulate the DOM and execute JavaScript.
+     * The applied changes integrate with server DOM patching.
+     *
+     * @returns {import("./js_commands").LiveSocketJSCommands}
+     */
+    js() {
+      return js_commands_default(this, "js");
+    }
+    // private
+    unload() {
+      if (this.unloaded) {
+        return;
+      }
+      if (this.main && this.isConnected()) {
+        this.log(this.main, "socket", () => ["disconnect for page nav"]);
+      }
+      this.unloaded = true;
+      this.destroyAllViews();
+      this.disconnect();
+    }
+    triggerDOM(kind, args) {
+      this.domCallbacks[kind](...args);
+    }
+    time(name, func) {
+      if (!this.isProfileEnabled() || !console.time) {
+        return func();
+      }
+      console.time(name);
+      const result = func();
+      console.timeEnd(name);
+      return result;
+    }
+    log(view, kind, msgCallback) {
+      if (this.viewLogger) {
+        const [msg, obj] = msgCallback();
+        this.viewLogger(view, kind, msg, obj);
+      } else if (this.isDebugEnabled()) {
+        const [msg, obj] = msgCallback();
+        debug(view, kind, msg, obj);
+      }
+    }
+    requestDOMUpdate(callback) {
+      this.transitions.after(callback);
+    }
+    asyncTransition(promise) {
+      this.transitions.addAsyncTransition(promise);
+    }
+    transition(time, onStart, onDone = function() {
+    }) {
+      this.transitions.addTransition(time, onStart, onDone);
+    }
+    onChannel(channel, event, cb) {
+      channel.on(event, (data) => {
+        const latency = this.getLatencySim();
+        if (!latency) {
+          cb(data);
+        } else {
+          setTimeout(() => cb(data), latency);
+        }
+      });
+    }
+    reloadWithJitter(view, log) {
+      clearTimeout(this.reloadWithJitterTimer);
+      this.disconnect();
+      const minMs = this.reloadJitterMin;
+      const maxMs = this.reloadJitterMax;
+      let afterMs = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs;
+      const tries = browser_default.updateLocal(
+        this.localStorage,
+        window.location.pathname,
+        CONSECUTIVE_RELOADS,
+        0,
+        (count) => count + 1
+      );
+      if (tries >= this.maxReloads) {
+        afterMs = this.failsafeJitter;
+      }
+      this.reloadWithJitterTimer = setTimeout(() => {
+        if (view.isDestroyed() || view.isConnected()) {
+          return;
+        }
+        view.destroy();
+        log ? log() : this.log(view, "join", () => [
+          `encountered ${tries} consecutive reloads`
+        ]);
+        if (tries >= this.maxReloads) {
+          this.log(view, "join", () => [
+            `exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`
+          ]);
+        }
+        if (this.hasPendingLink()) {
+          window.location = this.pendingLink;
+        } else {
+          window.location.reload();
+        }
+      }, afterMs);
+    }
+    getHookDefinition(name) {
+      if (!name) {
+        return;
+      }
+      return this.maybeInternalHook(name) || this.hooks[name] || this.maybeRuntimeHook(name);
+    }
+    maybeInternalHook(name) {
+      return name && name.startsWith("Phoenix.") && hooks_default[name.split(".")[1]];
+    }
+    maybeRuntimeHook(name) {
+      const runtimeHook = document.querySelector(
+        `script[${PHX_RUNTIME_HOOK}="${CSS.escape(name)}"]`
+      );
+      if (!runtimeHook) {
+        return;
+      }
+      let callbacks = window[`phx_hook_${name}`];
+      if (!callbacks || typeof callbacks !== "function") {
+        logError("a runtime hook must be a function", runtimeHook);
+        return;
+      }
+      const hookDefiniton = callbacks();
+      if (hookDefiniton && (typeof hookDefiniton === "object" || typeof hookDefiniton === "function")) {
+        return hookDefiniton;
+      }
+      logError(
+        "runtime hook must return an object with hook callbacks or an instance of ViewHook",
+        runtimeHook
+      );
+    }
+    isUnloaded() {
+      return this.unloaded;
+    }
+    isConnected() {
+      return this.socket.isConnected();
+    }
+    getBindingPrefix() {
+      return this.bindingPrefix;
+    }
+    binding(kind) {
+      return `${this.getBindingPrefix()}${kind}`;
+    }
+    channel(topic, params) {
+      return this.socket.channel(topic, params);
+    }
+    joinDeadView() {
+      const body = document.body;
+      if (body && !this.isPhxView(body) && !this.isPhxView(document.firstElementChild)) {
+        const view = this.newRootView(body);
+        view.setHref(this.getHref());
+        view.joinDead();
+        if (!this.main) {
+          this.main = view;
+        }
+        window.requestAnimationFrame(() => {
+          view.execNewMounted();
+          this.maybeScroll(history.state?.scroll);
+        });
+      }
+    }
+    joinRootViews() {
+      let rootsFound = false;
+      dom_default.all(
+        document,
+        `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`,
+        (rootEl) => {
+          if (!this.getRootById(rootEl.id)) {
+            const view = this.newRootView(rootEl);
+            if (!dom_default.isPhxSticky(rootEl)) {
+              view.setHref(this.getHref());
+            }
+            view.join();
+            if (rootEl.hasAttribute(PHX_MAIN)) {
+              this.main = view;
+            }
+          }
+          rootsFound = true;
+        }
+      );
+      return rootsFound;
+    }
+    redirect(to, flash, reloadToken) {
+      if (reloadToken) {
+        browser_default.setCookie(PHX_RELOAD_STATUS, reloadToken, 60);
+      }
+      this.unload();
+      browser_default.redirect(to, flash);
+    }
+    replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)) {
+      const liveReferer = this.currentLocation.href;
+      this.outgoingMainEl = this.outgoingMainEl || this.main.el;
+      const stickies = dom_default.findPhxSticky(document) || [];
+      const removeEls = dom_default.all(
+        this.outgoingMainEl,
+        `[${this.binding("remove")}]`
+      ).filter((el) => !dom_default.isChildOfAny(el, stickies));
+      const newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
+      this.main.showLoader(this.loaderTimeout);
+      this.main.destroy();
+      this.main = this.newRootView(newMainEl, flash, liveReferer);
+      this.main.setRedirect(href);
+      this.transitionRemoves(removeEls);
+      this.main.join((joinCount, onDone) => {
+        if (joinCount === 1 && this.commitPendingLink(linkRef)) {
+          this.requestDOMUpdate(() => {
+            removeEls.forEach((el) => el.remove());
+            stickies.forEach((el) => newMainEl.appendChild(el));
+            this.outgoingMainEl.replaceWith(newMainEl);
+            this.outgoingMainEl = null;
+            callback && callback(linkRef);
+            onDone();
+          });
+        }
+      });
+    }
+    transitionRemoves(elements, callback) {
+      const removeAttr = this.binding("remove");
+      const silenceEvents = (e) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      };
+      elements.forEach((el) => {
+        for (const event of this.boundEventNames) {
+          el.addEventListener(event, silenceEvents, true);
+        }
+        this.execJS(el, el.getAttribute(removeAttr), "remove");
+      });
+      this.requestDOMUpdate(() => {
+        elements.forEach((el) => {
+          for (const event of this.boundEventNames) {
+            el.removeEventListener(event, silenceEvents, true);
+          }
+        });
+        callback && callback();
+      });
+    }
+    isPhxView(el) {
+      return el.getAttribute && el.getAttribute(PHX_SESSION) !== null;
+    }
+    newRootView(el, flash, liveReferer) {
+      const view = new View(el, this, null, flash, liveReferer);
+      this.roots[view.id] = view;
+      return view;
+    }
+    owner(childEl, callback) {
+      let view;
+      const viewEl = dom_default.closestViewEl(childEl);
+      if (viewEl) {
+        view = this.getViewByEl(viewEl);
+      } else {
+        if (!childEl.isConnected) {
+          return null;
+        }
+        view = this.main;
+      }
+      return view && callback ? callback(view) : view;
+    }
+    withinOwners(childEl, callback) {
+      this.owner(childEl, (view) => callback(view, childEl));
+    }
+    getViewByEl(el) {
+      const rootId = el.getAttribute(PHX_ROOT_ID);
+      return maybe(
+        this.getRootById(rootId),
+        (root) => root.getDescendentByEl(el)
+      );
+    }
+    getRootById(id) {
+      return this.roots[id];
+    }
+    destroyAllViews() {
+      for (const id in this.roots) {
+        this.roots[id].destroy();
+        delete this.roots[id];
+      }
+      this.main = null;
+    }
+    destroyViewByEl(el) {
+      const root = this.getRootById(el.getAttribute(PHX_ROOT_ID));
+      if (root && root.id === el.id) {
+        root.destroy();
+        delete this.roots[root.id];
+      } else if (root) {
+        root.destroyDescendent(el.id);
+      }
+    }
+    getActiveElement() {
+      return document.activeElement;
+    }
+    dropActiveElement(view) {
+      if (this.prevActive && view.ownsElement(this.prevActive)) {
+        this.prevActive = null;
+      }
+    }
+    restorePreviouslyActiveFocus() {
+      if (this.prevActive && this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {
+        this.prevActive.focus();
+      }
+    }
+    blurActiveElement() {
+      this.prevActive = this.getActiveElement();
+      if (this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {
+        this.prevActive.blur();
+      }
+    }
+    /**
+     * @param {{dead?: boolean}} [options={}]
+     */
+    bindTopLevelEvents({ dead } = {}) {
+      if (this.boundTopLevelEvents) {
+        return;
+      }
+      this.boundTopLevelEvents = true;
+      this.serverCloseRef = this.socket.onClose((event) => {
+        if (event && event.code === 1e3 && this.main) {
+          return this.reloadWithJitter(this.main);
+        }
+      });
+      document.body.addEventListener("click", function() {
+      });
+      window.addEventListener(
+        "pageshow",
+        (e) => {
+          if (e.persisted) {
+            this.getSocket().disconnect();
+            this.withPageLoading({ to: window.location.href, kind: "redirect" });
+            window.location.reload();
+          }
+        },
+        true
+      );
+      if (!dead) {
+        this.bindNav();
+      }
+      this.bindClicks();
+      if (!dead) {
+        this.bindForms();
+      }
+      this.bind(
+        { keyup: "keyup", keydown: "keydown" },
+        (e, type, view, targetEl, phxEvent, _phxTarget) => {
+          const matchKey = targetEl.getAttribute(this.binding(PHX_KEY));
+          const pressedKey = e.key && e.key.toLowerCase();
+          if (matchKey && matchKey.toLowerCase() !== pressedKey) {
+            return;
+          }
+          const data = { key: e.key, ...this.eventMeta(type, e, targetEl) };
+          js_default.exec(e, type, phxEvent, view, targetEl, ["push", { data }]);
+        }
+      );
+      this.bind(
+        { blur: "focusout", focus: "focusin" },
+        (e, type, view, targetEl, phxEvent, phxTarget) => {
+          if (!phxTarget) {
+            const data = { key: e.key, ...this.eventMeta(type, e, targetEl) };
+            js_default.exec(e, type, phxEvent, view, targetEl, ["push", { data }]);
+          }
+        }
+      );
+      this.bind(
+        { blur: "blur", focus: "focus" },
+        (e, type, view, targetEl, phxEvent, phxTarget) => {
+          if (phxTarget === "window") {
+            const data = this.eventMeta(type, e, targetEl);
+            js_default.exec(e, type, phxEvent, view, targetEl, ["push", { data }]);
+          }
+        }
+      );
+      this.on("dragover", (e) => e.preventDefault());
+      this.on("dragenter", (e) => {
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
+        );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        if (eventContainsFiles(e)) {
+          this.js().addClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        }
+      });
+      this.on("dragleave", (e) => {
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
+        );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        const rect = dropzone.getBoundingClientRect();
+        if (e.clientX <= rect.left || e.clientX >= rect.right || e.clientY <= rect.top || e.clientY >= rect.bottom) {
+          this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        }
+      });
+      this.on("drop", (e) => {
+        e.preventDefault();
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
+        );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        const dropTargetId = dropzone.getAttribute(this.binding(PHX_DROP_TARGET));
+        const dropTarget = dropTargetId && document.getElementById(dropTargetId);
+        const files = Array.from(e.dataTransfer.files || []);
+        if (!dropTarget || !(dropTarget instanceof HTMLInputElement) || dropTarget.disabled || files.length === 0 || !(dropTarget.files instanceof FileList)) {
+          return;
+        }
+        LiveUploader.trackFiles(dropTarget, files, e.dataTransfer);
+        dropTarget.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      this.on(PHX_TRACK_UPLOADS, (e) => {
+        const uploadTarget = e.target;
+        if (!dom_default.isUploadInput(uploadTarget)) {
+          return;
+        }
+        const files = Array.from(e.detail.files || []).filter(
+          (f) => f instanceof File || f instanceof Blob
+        );
+        LiveUploader.trackFiles(uploadTarget, files);
+        uploadTarget.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+    }
+    eventMeta(eventName, e, targetEl) {
+      const callback = this.metadataCallbacks[eventName];
+      return callback ? callback(e, targetEl) : {};
+    }
+    setPendingLink(href) {
+      this.linkRef++;
+      this.pendingLink = href;
+      this.resetReloadStatus();
+      return this.linkRef;
+    }
+    // anytime we are navigating or connecting, drop reload cookie in case
+    // we issue the cookie but the next request was interrupted and the server never dropped it
+    resetReloadStatus() {
+      browser_default.deleteCookie(PHX_RELOAD_STATUS);
+    }
+    commitPendingLink(linkRef) {
+      if (this.linkRef !== linkRef) {
+        return false;
+      } else {
+        this.href = this.pendingLink;
+        this.pendingLink = null;
+        return true;
+      }
+    }
+    getHref() {
+      return this.href;
+    }
+    hasPendingLink() {
+      return !!this.pendingLink;
+    }
+    bind(events, callback) {
+      for (const event in events) {
+        const browserEventName = events[event];
+        this.on(browserEventName, (e) => {
+          const binding = this.binding(event);
+          const windowBinding = this.binding(`window-${event}`);
+          const targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding);
+          if (targetPhxEvent) {
+            this.debounce(e.target, e, browserEventName, () => {
+              this.withinOwners(e.target, (view) => {
+                callback(e, event, view, e.target, targetPhxEvent, null);
+              });
+            });
+          } else {
+            dom_default.all(document, `[${windowBinding}]`, (el) => {
+              const phxEvent = el.getAttribute(windowBinding);
+              this.debounce(el, e, browserEventName, () => {
+                this.withinOwners(el, (view) => {
+                  callback(e, event, view, el, phxEvent, "window");
+                });
+              });
+            });
+          }
+        });
+      }
+    }
+    bindClicks() {
+      this.on("mousedown", (e) => this.clickStartedAtTarget = e.target);
+      this.bindClick("click", "click");
+    }
+    bindClick(eventName, bindingName) {
+      const click = this.binding(bindingName);
+      window.addEventListener(
+        eventName,
+        (e) => {
+          let target = null;
+          if (e.detail === 0)
+            this.clickStartedAtTarget = e.target;
+          const clickStartedAtTarget = this.clickStartedAtTarget || e.target;
+          target = closestPhxBinding(e.target, click);
+          this.dispatchClickAway(e, clickStartedAtTarget);
+          this.clickStartedAtTarget = null;
+          const phxEvent = target && target.getAttribute(click);
+          if (!phxEvent) {
+            if (dom_default.isNewPageClick(e, window.location)) {
+              this.unload();
+            }
+            return;
+          }
+          if (target.getAttribute("href") === "#") {
+            e.preventDefault();
+          }
+          if (target.hasAttribute(PHX_REF_SRC)) {
+            return;
+          }
+          this.debounce(target, e, "click", () => {
+            this.withinOwners(target, (view) => {
+              js_default.exec(e, "click", phxEvent, view, target, [
+                "push",
+                { data: this.eventMeta("click", e, target) }
+              ]);
+            });
+          });
+        },
+        false
+      );
+    }
+    dispatchClickAway(e, clickStartedAt) {
+      const phxClickAway = this.binding("click-away");
+      const portal = clickStartedAt.closest(`[${PHX_TELEPORTED_SRC}]`);
+      const portalStartedAt = portal && dom_default.byId(portal.getAttribute(PHX_TELEPORTED_SRC));
+      dom_default.all(document, `[${phxClickAway}]`, (el) => {
+        let startedAt = clickStartedAt;
+        if (portal && !portal.contains(el)) {
+          startedAt = portalStartedAt;
+        }
+        if (!(el.isSameNode(startedAt) || el.contains(startedAt) || // When clicking a link with custom method,
+        // phoenix_html triggers a click on a submit button
+        // of a hidden form appended to the body. For such cases
+        // where the clicked target is hidden, we skip click-away.
+        //
+        // Also, when we have a portal, we don't want to check the visibility
+        // of the portal source, as it's a <template> that is always not visible.
+        // Instead, check the visibility of the original click target.
+        !js_default.isVisible(clickStartedAt))) {
+          this.withinOwners(el, (view) => {
+            const phxEvent = el.getAttribute(phxClickAway);
+            if (js_default.isVisible(el) && js_default.isInViewport(el)) {
+              js_default.exec(e, "click", phxEvent, view, el, [
+                "push",
+                { data: this.eventMeta("click", e, e.target) }
+              ]);
+            }
+          });
+        }
+      });
+    }
+    bindNav() {
+      if (!browser_default.canPushState()) {
+        return;
+      }
+      if (history.scrollRestoration) {
+        history.scrollRestoration = "manual";
+      }
+      let scrollTimer = null;
+      window.addEventListener("scroll", (_e) => {
+        clearTimeout(scrollTimer);
+        scrollTimer = setTimeout(() => {
+          browser_default.updateCurrentState(
+            (state) => Object.assign(state, { scroll: window.scrollY })
+          );
+        }, 100);
+      });
+      window.addEventListener(
+        "popstate",
+        (event) => {
+          if (!this.registerNewLocation(window.location)) {
+            return;
+          }
+          const { type, backType, id, scroll, position } = event.state || {};
+          const href = window.location.href;
+          const isForward = position > this.currentHistoryPosition;
+          const navType = isForward ? type : backType || type;
+          this.currentHistoryPosition = position || 0;
+          this.sessionStorage.setItem(
+            PHX_LV_HISTORY_POSITION,
+            this.currentHistoryPosition.toString()
+          );
+          dom_default.dispatchEvent(window, "phx:navigate", {
+            detail: {
+              href,
+              patch: navType === "patch",
+              pop: true,
+              direction: isForward ? "forward" : "backward"
+            }
+          });
+          this.requestDOMUpdate(() => {
+            const callback = () => {
+              this.maybeScroll(scroll);
+            };
+            if (this.main.isConnected() && navType === "patch" && id === this.main.id) {
+              this.main.pushLinkPatch(event, href, null, callback);
+            } else {
+              this.replaceMain(href, null, callback);
+            }
+          });
+        },
+        false
+      );
+      window.addEventListener(
+        "click",
+        (e) => {
+          const target = closestPhxBinding(e.target, PHX_LIVE_LINK);
+          const type = target && target.getAttribute(PHX_LIVE_LINK);
+          if (!type || !this.isConnected() || !this.main || dom_default.wantsNewTab(e)) {
+            return;
+          }
+          const href = target.href instanceof SVGAnimatedString ? target.href.baseVal : target.href;
+          const linkState = target.getAttribute(PHX_LINK_STATE);
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          if (this.pendingLink === href) {
+            return;
+          }
+          this.requestDOMUpdate(() => {
+            if (type === "patch") {
+              this.pushHistoryPatch(e, href, linkState, target);
+            } else if (type === "redirect") {
+              this.historyRedirect(e, href, linkState, null, target);
+            } else {
+              throw new Error(
+                `expected ${PHX_LIVE_LINK} to be "patch" or "redirect", got: ${type}`
+              );
+            }
+            const phxClick = target.getAttribute(this.binding("click"));
+            if (phxClick) {
+              this.requestDOMUpdate(() => this.execJS(target, phxClick, "click"));
+            }
+          });
+        },
+        false
+      );
+    }
+    maybeScroll(scroll) {
+      if (typeof scroll === "number") {
+        requestAnimationFrame(() => {
+          window.scrollTo(0, scroll);
+        });
+      }
+    }
+    dispatchEvent(event, payload = {}) {
+      dom_default.dispatchEvent(window, `phx:${event}`, { detail: payload });
+    }
+    dispatchEvents(events) {
+      events.forEach(([event, payload]) => this.dispatchEvent(event, payload));
+    }
+    withPageLoading(info, callback) {
+      dom_default.dispatchEvent(window, "phx:page-loading-start", { detail: info });
+      const done = () => dom_default.dispatchEvent(window, "phx:page-loading-stop", { detail: info });
+      return callback ? callback(done) : done;
+    }
+    pushHistoryPatch(e, href, linkState, targetEl) {
+      if (!this.isConnected() || !this.main.isMain()) {
+        return browser_default.redirect(href);
+      }
+      this.withPageLoading({ to: href, kind: "patch" }, (done) => {
+        this.main.pushLinkPatch(e, href, targetEl, (linkRef) => {
+          this.historyPatch(href, linkState, linkRef);
+          done();
+        });
+      });
+    }
+    historyPatch(href, linkState, linkRef = this.setPendingLink(href)) {
+      if (!this.commitPendingLink(linkRef)) {
+        return;
+      }
+      this.currentHistoryPosition++;
+      this.sessionStorage.setItem(
+        PHX_LV_HISTORY_POSITION,
+        this.currentHistoryPosition.toString()
+      );
+      browser_default.updateCurrentState((state) => ({ ...state, backType: "patch" }));
+      browser_default.pushState(
+        linkState,
+        {
+          type: "patch",
+          id: this.main.id,
+          position: this.currentHistoryPosition
+        },
+        href
+      );
+      dom_default.dispatchEvent(window, "phx:navigate", {
+        detail: { patch: true, href, pop: false, direction: "forward" }
+      });
+      this.registerNewLocation(window.location);
+    }
+    historyRedirect(e, href, linkState, flash, targetEl) {
+      const clickLoading = targetEl && e.isTrusted && e.type !== "popstate";
+      if (clickLoading) {
+        targetEl.classList.add("phx-click-loading");
+      }
+      if (!this.isConnected() || !this.main.isMain()) {
+        return browser_default.redirect(href, flash);
+      }
+      if (/^\/$|^\/[^\/]+.*$/.test(href)) {
+        const { protocol, host } = window.location;
+        href = `${protocol}//${host}${href}`;
+      }
+      const scroll = window.scrollY;
+      this.withPageLoading({ to: href, kind: "redirect" }, (done) => {
+        this.replaceMain(href, flash, (linkRef) => {
+          if (linkRef === this.linkRef) {
+            this.currentHistoryPosition++;
+            this.sessionStorage.setItem(
+              PHX_LV_HISTORY_POSITION,
+              this.currentHistoryPosition.toString()
+            );
+            browser_default.updateCurrentState((state) => ({
+              ...state,
+              backType: "redirect"
+            }));
+            browser_default.pushState(
+              linkState,
+              {
+                type: "redirect",
+                id: this.main.id,
+                scroll,
+                position: this.currentHistoryPosition
+              },
+              href
+            );
+            dom_default.dispatchEvent(window, "phx:navigate", {
+              detail: { href, patch: false, pop: false, direction: "forward" }
+            });
+            this.registerNewLocation(window.location);
+          }
+          if (clickLoading) {
+            targetEl.classList.remove("phx-click-loading");
+          }
+          done();
+        });
+      });
+    }
+    registerNewLocation(newLocation) {
+      const { pathname, search } = this.currentLocation;
+      if (pathname + search === newLocation.pathname + newLocation.search) {
+        return false;
+      } else {
+        this.currentLocation = clone(newLocation);
+        return true;
+      }
+    }
+    bindForms() {
+      let iterations = 0;
+      let externalFormSubmitted = false;
+      this.on("submit", (e) => {
+        const phxSubmit = e.target.getAttribute(this.binding("submit"));
+        const phxChange = e.target.getAttribute(this.binding("change"));
+        if (!externalFormSubmitted && phxChange && !phxSubmit) {
+          externalFormSubmitted = true;
+          e.preventDefault();
+          this.withinOwners(e.target, (view) => {
+            view.disableForm(e.target);
+            window.requestAnimationFrame(() => {
+              if (dom_default.isUnloadableFormSubmit(e)) {
+                this.unload();
+              }
+              e.target.submit();
+            });
+          });
+        }
+      });
+      this.on("submit", (e) => {
+        const phxEvent = e.target.getAttribute(this.binding("submit"));
+        if (!phxEvent) {
+          if (dom_default.isUnloadableFormSubmit(e)) {
+            this.unload();
+          }
+          return;
+        }
+        e.preventDefault();
+        e.target.disabled = true;
+        this.withinOwners(e.target, (view) => {
+          js_default.exec(e, "submit", phxEvent, view, e.target, [
+            "push",
+            { submitter: e.submitter }
+          ]);
+        });
+      });
+      for (const type of ["change", "input"]) {
+        this.on(type, (e) => {
+          if (e instanceof CustomEvent && (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) && e.target.form === void 0) {
+            if (e.detail && e.detail.dispatcher) {
+              throw new Error(
+                `dispatching a custom ${type} event is only supported on input elements inside a form`
+              );
+            }
+            return;
+          }
+          const phxChange = this.binding("change");
+          const input = e.target;
+          if (this.blockPhxChangeWhileComposing && e.isComposing) {
+            const key = `composition-listener-${type}`;
+            if (!dom_default.private(input, key)) {
+              dom_default.putPrivate(input, key, true);
+              input.addEventListener(
+                "compositionend",
+                () => {
+                  input.dispatchEvent(new Event(type, { bubbles: true }));
+                  dom_default.deletePrivate(input, key);
+                },
+                { once: true }
+              );
+            }
+            return;
+          }
+          const inputEvent = input.getAttribute(phxChange);
+          const formEvent = input.form && input.form.getAttribute(phxChange);
+          const phxEvent = inputEvent || formEvent;
+          if (!phxEvent) {
+            return;
+          }
+          if (input.type === "number" && input.validity && input.validity.badInput) {
+            return;
+          }
+          const dispatcher = inputEvent ? input : input.form;
+          const currentIterations = iterations;
+          iterations++;
+          const { at, type: lastType } = dom_default.private(input, "prev-iteration") || {};
+          if (at === currentIterations - 1 && type === "change" && lastType === "input") {
+            return;
+          }
+          dom_default.putPrivate(input, "prev-iteration", {
+            at: currentIterations,
+            type
+          });
+          this.debounce(input, e, type, () => {
+            this.withinOwners(dispatcher, (view) => {
+              dom_default.putPrivate(input, PHX_HAS_FOCUSED, true);
+              js_default.exec(e, "change", phxEvent, view, input, [
+                "push",
+                { _target: e.target.name, dispatcher }
+              ]);
+            });
+          });
+        });
+      }
+      this.on("reset", (e) => {
+        const form = e.target;
+        dom_default.resetForm(form);
+        const input = Array.from(form.elements).find((el) => el.type === "reset");
+        if (input) {
+          window.requestAnimationFrame(() => {
+            input.dispatchEvent(
+              new Event("input", { bubbles: true, cancelable: false })
+            );
+          });
+        }
+      });
+    }
+    debounce(el, event, eventType, callback) {
+      if (eventType === "blur" || eventType === "focusout") {
+        return callback();
+      }
+      const phxDebounce = this.binding(PHX_DEBOUNCE);
+      const phxThrottle = this.binding(PHX_THROTTLE);
+      const defaultDebounce = this.defaults.debounce.toString();
+      const defaultThrottle = this.defaults.throttle.toString();
+      this.withinOwners(el, (view) => {
+        const asyncFilter = () => !view.isDestroyed() && document.body.contains(el);
+        dom_default.debounce(
+          el,
+          event,
+          phxDebounce,
+          defaultDebounce,
+          phxThrottle,
+          defaultThrottle,
+          asyncFilter,
+          () => {
+            callback();
+          }
+        );
+      });
+    }
+    silenceEvents(callback) {
+      this.silenced = true;
+      callback();
+      this.silenced = false;
+    }
+    on(event, callback) {
+      this.boundEventNames.add(event);
+      window.addEventListener(event, (e) => {
+        if (!this.silenced) {
+          callback(e);
+        }
+      });
+    }
+    jsQuerySelectorAll(sourceEl, query, defaultQuery) {
+      const all = this.domCallbacks.jsQuerySelectorAll;
+      return all ? all(sourceEl, query, defaultQuery) : defaultQuery();
+    }
+  };
+  var TransitionSet = class {
+    constructor() {
+      this.transitions = /* @__PURE__ */ new Set();
+      this.promises = /* @__PURE__ */ new Set();
+      this.pendingOps = [];
+    }
+    reset() {
+      this.transitions.forEach((timer) => {
+        clearTimeout(timer);
+        this.transitions.delete(timer);
+      });
+      this.promises.clear();
+      this.flushPendingOps();
+    }
+    after(callback) {
+      if (this.size() === 0) {
+        callback();
+      } else {
+        this.pushPendingOp(callback);
+      }
+    }
+    addTransition(time, onStart, onDone) {
+      onStart();
+      const timer = setTimeout(() => {
+        this.transitions.delete(timer);
+        onDone();
+        this.flushPendingOps();
+      }, time);
+      this.transitions.add(timer);
+    }
+    addAsyncTransition(promise) {
+      this.promises.add(promise);
+      promise.then(() => {
+        this.promises.delete(promise);
+        this.flushPendingOps();
+      });
+    }
+    pushPendingOp(op) {
+      this.pendingOps.push(op);
+    }
+    size() {
+      return this.transitions.size + this.promises.size;
+    }
+    flushPendingOps() {
+      if (this.size() > 0) {
+        return;
+      }
+      const op = this.pendingOps.shift();
+      if (op) {
+        op();
+        this.flushPendingOps();
+      }
+    }
+  };
+  var LiveSocket2 = LiveSocket;
+
+  // ../deps/phoenix_html/priv/static/phoenix_html.js
+  (function() {
+    var PolyfillEvent = eventConstructor();
+    function eventConstructor() {
+      if (typeof window.CustomEvent === "function") return window.CustomEvent;
+      function CustomEvent2(event, params) {
+        params = params || { bubbles: false, cancelable: false, detail: void 0 };
+        var evt = document.createEvent("CustomEvent");
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+        return evt;
+      }
+      CustomEvent2.prototype = window.Event.prototype;
+      return CustomEvent2;
+    }
+    function buildHiddenInput(name, value) {
+      var input = document.createElement("input");
+      input.type = "hidden";
+      input.name = name;
+      input.value = value;
+      return input;
+    }
+    function handleClick(element, targetModifierKey) {
+      var to = element.getAttribute("data-to"), method = buildHiddenInput("_method", element.getAttribute("data-method")), csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")), form = document.createElement("form"), submit = document.createElement("input"), target = element.getAttribute("target");
+      form.method = element.getAttribute("data-method") === "get" ? "get" : "post";
+      form.action = to;
+      form.style.display = "none";
+      if (target) form.target = target;
+      else if (targetModifierKey) form.target = "_blank";
+      form.appendChild(csrf);
+      form.appendChild(method);
+      document.body.appendChild(form);
+      submit.type = "submit";
+      form.appendChild(submit);
+      submit.click();
+    }
+    window.addEventListener("click", function(e) {
+      var element = e.target;
+      if (e.defaultPrevented) return;
+      while (element && element.getAttribute) {
+        var phoenixLinkEvent = new PolyfillEvent("phoenix.link.click", {
+          "bubbles": true,
+          "cancelable": true
+        });
+        if (!element.dispatchEvent(phoenixLinkEvent)) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          return false;
+        }
+        if (element.getAttribute("data-method") && element.getAttribute("data-to")) {
+          handleClick(element, e.metaKey || e.shiftKey);
+          e.preventDefault();
+          return false;
+        } else {
+          element = element.parentNode;
+        }
+      }
+    }, false);
+    window.addEventListener("phoenix.link.click", function(e) {
+      var message = e.target.getAttribute("data-confirm");
+      if (message && !window.confirm(message)) {
+        e.preventDefault();
+      }
+    }, false);
+  })();
+
+  // js/bridges/titlebar_overlay.js
+  var syncTitlebarOverlayInsets = () => {
+    const rootStyle = document.documentElement.style;
+    const setInsets = (left, right) => {
+      rootStyle.setProperty("--bds-titlebar-overlay-left", `${left}px`);
+      rootStyle.setProperty("--bds-titlebar-overlay-right", `${right}px`);
+    };
+    const overlay = navigator.windowControlsOverlay;
+    if (!overlay) {
+      setInsets(0, 0);
+      return () => {
+      };
+    }
+    const updateInsets = () => {
+      if (!overlay.visible) {
+        setInsets(0, 0);
+        return;
+      }
+      const titlebarRect = overlay.getTitlebarAreaRect();
+      const viewportWidth = window.innerWidth || document.documentElement.clientWidth || titlebarRect.right;
+      const leftInset = Math.max(0, Math.round(titlebarRect.left));
+      const rightInset = Math.max(0, Math.round(viewportWidth - titlebarRect.right));
+      setInsets(leftInset, rightInset);
+    };
+    const onGeometryChange = () => updateInsets();
+    const onResize = () => updateInsets();
+    updateInsets();
+    overlay.addEventListener("geometrychange", onGeometryChange);
+    window.addEventListener("resize", onResize);
+    return () => {
+      overlay.removeEventListener("geometrychange", onGeometryChange);
+      window.removeEventListener("resize", onResize);
+    };
+  };
+
+  // js/bridges/menu_runtime.js
+  var createMenuRuntimeCommandRunner = ({ activeMonacoEditor, runMonacoEditorAction, runDocumentCommand, applyAppZoom }) => {
+    return (action) => {
+      const editor = activeMonacoEditor();
+      switch (action) {
+        case "undo":
+          return editor ? runMonacoEditorAction(editor, "undo") : runDocumentCommand("undo");
+        case "redo":
+          return editor ? runMonacoEditorAction(editor, "redo") : runDocumentCommand("redo");
+        case "cut":
+          return editor ? runMonacoEditorAction(editor, "editor.action.clipboardCutAction") : runDocumentCommand("cut");
+        case "copy":
+          return editor ? runMonacoEditorAction(editor, "editor.action.clipboardCopyAction") : runDocumentCommand("copy");
+        case "paste":
+          return editor ? runMonacoEditorAction(editor, "editor.action.clipboardPasteAction") : runDocumentCommand("paste");
+        case "delete":
+          return editor ? runMonacoEditorAction(editor, "deleteLeft") : runDocumentCommand("delete");
+        case "select_all":
+          return editor ? runMonacoEditorAction(editor, "editor.action.selectAll") : runDocumentCommand("selectAll");
+        case "find":
+          return editor ? runMonacoEditorAction(editor, "actions.find") : false;
+        case "replace":
+          return editor ? runMonacoEditorAction(editor, "editor.action.startFindReplaceAction") : false;
+        case "reload":
+        case "force_reload":
+          window.location.reload();
+          return true;
+        case "reset_zoom":
+          applyAppZoom(1);
+          return true;
+        case "zoom_in":
+          applyAppZoom((window.__bdsAppZoom || 1) + 0.1);
+          return true;
+        case "zoom_out":
+          applyAppZoom((window.__bdsAppZoom || 1) - 0.1);
+          return true;
+        case "toggle_full_screen":
+          if (document.fullscreenElement) {
+            document.exitFullscreen?.();
+          } else {
+            document.documentElement.requestFullscreen?.();
+          }
+          return true;
+        default:
+          return false;
+      }
+    };
+  };
+
+  // js/hooks/index.js
+  var createHooks = (hooks) => hooks;
+
+  // js/monaco/services.js
+  var createMonacoServices = (services) => services;
+
+  // js/app.js
+  document.addEventListener("DOMContentLoaded", () => {
+    const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+    const SIDEBAR_STORAGE_KEY = "bds-panel-sidebar";
+    const ASSISTANT_STORAGE_KEY = "bds-panel-assistant-sidebar";
+    const UI_LANGUAGE_STORAGE_KEY = "bds-ui-language";
+    const WORKBENCH_SESSION_STORAGE_KEY_PREFIX = "bds-workbench-";
+    const parseShortcutConfig = (value) => {
+      if (!value) {
+        return [];
+      }
+      try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : [];
+      } catch (_error) {
+        return [];
+      }
+    };
+    const parseJsonObject = (value) => {
+      if (!value) {
+        return null;
+      }
+      try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+      } catch (_error) {
+        return null;
+      }
+    };
+    const setMediaThumbnailLoaded = (image, loaded) => {
+      const thumbnail = image?.closest(".media-thumbnail");
+      if (!thumbnail) {
+        return;
+      }
+      if (loaded) {
+        thumbnail.classList.add("is-loaded");
+      } else {
+        thumbnail.classList.remove("is-loaded");
+      }
+    };
+    const syncMediaThumbnailState = (root) => {
+      root.querySelectorAll(".media-thumbnail-image").forEach((image) => {
+        setMediaThumbnailLoaded(image, Boolean(image.complete && image.naturalWidth > 0));
+      });
+    };
+    const normalizeShortcutKey = (key) => String(key || "").toLowerCase();
+    const shortcutTargetIsEditable = (event) => {
+      const tag = event.target?.tagName || null;
+      return event.target?.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(tag);
+    };
+    const shortcutMatchesEvent = (shortcut, event) => {
+      const primary = event.metaKey || event.ctrlKey;
+      return normalizeShortcutKey(event.key) === normalizeShortcutKey(shortcut.key) && primary === Boolean(shortcut.primary) && event.shiftKey === Boolean(shortcut.shift) && event.altKey === Boolean(shortcut.alt);
+    };
+    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+    const readStoredSize = (key, fallback, min, max) => {
+      const raw = window.localStorage.getItem(key);
+      if (!raw) {
+        return fallback;
+      }
+      const parsed = Number.parseInt(raw, 10);
+      if (Number.isNaN(parsed)) {
+        return fallback;
+      }
+      return clamp(parsed, min, max);
+    };
+    const shellWidth = (selector) => {
+      const shell = document.querySelector(selector);
+      if (!shell) {
+        return 0;
+      }
+      const width = Number.parseInt(shell.style.width || "0", 10);
+      return Number.isNaN(width) ? Math.round(shell.getBoundingClientRect().width) : width;
+    };
+    const setShellWidth = (selector, width) => {
+      const shell = document.querySelector(selector);
+      if (shell) {
+        shell.style.width = `${width}px`;
+        shell.classList.remove("is-hidden");
+      }
+    };
+    const persistWidth = (target, width) => {
+      const key = target === "assistant" ? ASSISTANT_STORAGE_KEY : SIDEBAR_STORAGE_KEY;
+      window.localStorage.setItem(key, String(width));
+    };
+    let monacoLoaderPromise;
+    let liquidLanguageRegistered = false;
+    let markdownWithMacrosRegistered = false;
+    let monacoThemeSignature = null;
+    const monacoEditors = /* @__PURE__ */ new Map();
+    const activeMonacoEditor = () => {
+      for (const editor of monacoEditors.values()) {
+        if (typeof editor?.hasTextFocus === "function" && editor.hasTextFocus()) {
+          return editor;
+        }
+      }
+      return null;
+    };
+    const runMonacoEditorAction = (editor, actionId, triggerId = actionId) => {
+      if (!editor) {
+        return false;
+      }
+      const action = typeof editor.getAction === "function" ? editor.getAction(actionId) : null;
+      if (action && typeof action.run === "function") {
+        action.run();
+        return true;
+      }
+      if (typeof editor.trigger === "function") {
+        editor.trigger("bds-menu", triggerId, null);
+        return true;
+      }
+      return false;
+    };
+    const runDocumentCommand = (command) => {
+      if (typeof document.execCommand !== "function") {
+        return false;
+      }
+      try {
+        return document.execCommand(command);
+      } catch (_error) {
+        return false;
+      }
+    };
+    const applyAppZoom = (nextZoom) => {
+      const zoom = clamp(Math.round(nextZoom * 100) / 100, 0.5, 2);
+      window.__bdsAppZoom = zoom;
+      document.documentElement.style.zoom = String(zoom);
+    };
+    const menuRuntimeCommandRunner = createMenuRuntimeCommandRunner({
+      activeMonacoEditor,
+      runMonacoEditorAction,
+      runDocumentCommand,
+      applyAppZoom
+    });
+    const cssVar = (name, fallback) => {
+      const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+      return value || fallback;
+    };
+    const parseRgbColor = (value) => {
+      if (!value) {
+        return null;
+      }
+      const hex = value.match(/^#([0-9a-f]{6})$/i);
+      if (hex) {
+        return {
+          r: Number.parseInt(hex[1].slice(0, 2), 16),
+          g: Number.parseInt(hex[1].slice(2, 4), 16),
+          b: Number.parseInt(hex[1].slice(4, 6), 16)
+        };
+      }
+      const rgb = value.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (!rgb) {
+        return null;
+      }
+      return {
+        r: Number.parseInt(rgb[1], 10),
+        g: Number.parseInt(rgb[2], 10),
+        b: Number.parseInt(rgb[3], 10)
+      };
+    };
+    const normalizeMonacoColor = (value, fallback) => {
+      const rgb = parseRgbColor(value);
+      if (!rgb) {
+        return fallback;
+      }
+      return `#${[rgb.r, rgb.g, rgb.b].map((channel) => clamp(channel, 0, 255).toString(16).padStart(2, "0")).join("")}`;
+    };
+    const loadScript = (src) => new Promise((resolve, reject) => {
+      const existing = document.querySelector(`script[src="${src}"]`);
+      if (existing) {
+        if (existing.dataset.loaded === "true") {
+          resolve();
+          return;
+        }
+        existing.addEventListener("load", () => resolve(), { once: true });
+        existing.addEventListener("error", () => reject(new Error(`Failed to load ${src}`)), {
+          once: true
+        });
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.addEventListener(
+        "load",
+        () => {
+          script.dataset.loaded = "true";
+          resolve();
+        },
+        { once: true }
+      );
+      script.addEventListener("error", () => reject(new Error(`Failed to load ${src}`)), {
+        once: true
+      });
+      document.head.appendChild(script);
+    });
+    const diffModelPath = (filePath, side) => {
+      const normalized = String(filePath || "working-tree").replace(/^\/+/, "");
+      return `inmemory://model/git-diff/${side}/${normalized}`;
+    };
+    const registerLiquidLanguage = (monaco) => {
+      if (liquidLanguageRegistered) {
+        return;
+      }
+      monaco.languages.register({ id: "liquid" });
+      monaco.languages.setLanguageConfiguration("liquid", {
+        comments: {
+          blockComment: ["{% comment %}", "{% endcomment %}"]
+        },
+        brackets: [
+          ["{", "}"],
+          ["[", "]"],
+          ["(", ")"]
+        ],
+        autoClosingPairs: [
+          { open: "{", close: "}" },
+          { open: "[", close: "]" },
+          { open: "(", close: ")" },
+          { open: '"', close: '"' },
+          { open: "'", close: "'" }
+        ],
+        surroundingPairs: [
+          { open: "{", close: "}" },
+          { open: "[", close: "]" },
+          { open: "(", close: ")" },
+          { open: '"', close: '"' },
+          { open: "'", close: "'" }
+        ]
+      });
+      monaco.languages.setMonarchTokensProvider("liquid", {
+        defaultToken: "",
+        tokenizer: {
+          root: [
+            [/\{\{-?/, { token: "delimiter.output", next: "@liquidOutput" }],
+            [/\{%-?\s*comment\b[^%]*-?%\}/, { token: "comment.block", next: "@liquidComment" }],
+            [/\{%-?/, { token: "delimiter.tag", next: "@liquidTag" }],
+            [/<!DOCTYPE/i, "metatag"],
+            [/<!--/, { token: "comment", next: "@htmlComment" }],
+            [/(<)(script)/i, ["delimiter.html", "tag.html"], "@scriptTag"],
+            [/(<)(style)/i, ["delimiter.html", "tag.html"], "@styleTag"],
+            [/(<\/)([\w:-]+)/, ["delimiter.html", "tag.html"]],
+            [/(<)([\w:-]+)/, ["delimiter.html", "tag.html"], "@htmlTag"],
+            [/[^<{]+/, ""],
+            [/./, ""]
+          ],
+          liquidOutput: [
+            [/-?\}\}/, { token: "delimiter.output", next: "@pop" }],
+            [/\|\s*[a-zA-Z_][\w-]*/, "keyword"],
+            [/\b(?:true|false|nil|blank|empty)\b/, "keyword"],
+            [/\b\d+(?:\.\d+)?\b/, "number"],
+            [/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/, "string"],
+            [/[a-zA-Z_][\w.-]*/, "identifier"],
+            [/[,:()[\]]/, "delimiter"]
+          ],
+          liquidTag: [
+            [/-?%\}/, { token: "delimiter.tag", next: "@pop" }],
+            [/\b(?:assign|capture|case|comment|cycle|decrement|echo|elsif|else|endcase|endcapture|endif|endfor|endunless|endcomment|for|if|include|increment|liquid|paginate|raw|render|tablerow|unless|when)\b/, "keyword"],
+            [/\|\s*[a-zA-Z_][\w-]*/, "keyword"],
+            [/\b(?:true|false|nil|blank|empty|contains)\b/, "keyword"],
+            [/\b\d+(?:\.\d+)?\b/, "number"],
+            [/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/, "string"],
+            [/[><=!]=?|\.|:/, "operator"],
+            [/[a-zA-Z_][\w.-]*/, "identifier"],
+            [/[,:()[\]]/, "delimiter"]
+          ],
+          liquidComment: [
+            [/\{%-?\s*endcomment\s*-?%\}/, { token: "comment.block", next: "@pop" }],
+            [/./, "comment.block"]
+          ],
+          htmlComment: [
+            [/-->/, { token: "comment", next: "@pop" }],
+            [/./, "comment"]
+          ],
+          htmlTag: [
+            [/\/>/, { token: "delimiter.html", next: "@pop" }],
+            [/>/, { token: "delimiter.html", next: "@pop" }],
+            [/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/, "attribute.value"],
+            [/[\w:-]+/, "attribute.name"],
+            [/=/, "delimiter"]
+          ],
+          scriptTag: [
+            [/>/, { token: "delimiter.html", next: "@pop" }],
+            [/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/, "attribute.value"],
+            [/[\w:-]+/, "attribute.name"],
+            [/=/, "delimiter"]
+          ],
+          styleTag: [
+            [/>/, { token: "delimiter.html", next: "@pop" }],
+            [/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/, "attribute.value"],
+            [/[\w:-]+/, "attribute.name"],
+            [/=/, "delimiter"]
+          ]
+        }
+      });
+      liquidLanguageRegistered = true;
+    };
+    const registerMarkdownWithMacrosLanguage = (monaco) => {
+      if (markdownWithMacrosRegistered) {
+        return;
+      }
+      monaco.languages.register({ id: "markdown-with-macros" });
+      monaco.languages.setMonarchTokensProvider("markdown-with-macros", {
+        defaultToken: "",
+        tokenPostfix: ".md",
+        tokenizer: {
+          root: [
+            [/\[\[[a-zA-Z][\w-]*/, { token: "keyword.macro", next: "@macroParams" }],
+            [/^#{1,6}\s.*$/, "keyword.header"],
+            [/^\s*>+/, "string.quote"],
+            [/^\s*[-+*]\s/, "keyword"],
+            [/^\s*\d+\.\s/, "keyword"],
+            [/^\s*```\w*/, { token: "string.code", next: "@codeblock" }],
+            [/\*\*[^*]+\*\*/, "strong"],
+            [/\*[^*]+\*/, "emphasis"],
+            [/__[^_]+__/, "strong"],
+            [/_[^_]+_/, "emphasis"],
+            [/`[^`]+`/, "variable"],
+            [/!?\[[^\]]*\]\([^)]*\)/, "string.link"],
+            [/!?\[[^\]]*\]\[[^\]]*\]/, "string.link"]
+          ],
+          macroParams: [
+            [/\]\]/, { token: "keyword.macro", next: "@root" }],
+            [/[a-zA-Z][\w-]*(?=\s*=)/, "attribute.name"],
+            [/=/, "delimiter"],
+            [/"[^"]*"/, "string"],
+            [/\s+/, "white"],
+            [/[^\]"=\s]+/, "attribute.value"]
+          ],
+          codeblock: [
+            [/^\s*```\s*$/, { token: "string.code", next: "@root" }],
+            [/.*$/, "variable.source"]
+          ]
+        }
+      });
+      markdownWithMacrosRegistered = true;
+    };
+    const ensureMonacoTheme = (monaco) => {
+      const background = normalizeMonacoColor(
+        cssVar("--vscode-editor-background", cssVar("--vscode-input-background", "#1e1e1e")),
+        "#1e1e1e"
+      );
+      const foreground = normalizeMonacoColor(cssVar("--vscode-editor-foreground", "#d4d4d4"), "#d4d4d4");
+      const lineNumber = normalizeMonacoColor(cssVar("--vscode-editorLineNumber-foreground", "#858585"), "#858585");
+      const activeLineNumber = normalizeMonacoColor(
+        cssVar("--vscode-editorLineNumber-activeForeground", foreground),
+        foreground
+      );
+      const selection = normalizeMonacoColor(cssVar("--vscode-editor-selectionBackground", "#264f78"), "#264f78");
+      const inactiveSelection = normalizeMonacoColor(
+        cssVar("--vscode-editor-inactiveSelectionBackground", "#3a3d41"),
+        "#3a3d41"
+      );
+      const cursor = normalizeMonacoColor(cssVar("--vscode-editorCursor-foreground", foreground), foreground);
+      const border = normalizeMonacoColor(cssVar("--vscode-panel-border", "#3c3c3c"), "#3c3c3c");
+      const lineHighlight = normalizeMonacoColor(
+        cssVar("--vscode-editor-lineHighlightBackground", background),
+        background
+      );
+      const signature = [background, foreground, lineNumber, activeLineNumber, selection, inactiveSelection, cursor, border].join("|");
+      if (signature === monacoThemeSignature) {
+        monaco.editor.setTheme("bds-theme");
+        return;
+      }
+      monaco.editor.defineTheme("bds-theme", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [
+          { token: "keyword.macro", foreground: "C586C0", fontStyle: "bold" },
+          { token: "attribute.name", foreground: "9CDCFE" },
+          { token: "attribute.value", foreground: "CE9178" }
+        ],
+        colors: {
+          "editor.background": background,
+          "editor.foreground": foreground,
+          "editor.lineHighlightBackground": lineHighlight,
+          "editorCursor.foreground": cursor,
+          "editor.selectionBackground": selection,
+          "editor.inactiveSelectionBackground": inactiveSelection,
+          "editorLineNumber.foreground": lineNumber,
+          "editorLineNumber.activeForeground": activeLineNumber,
+          "editorIndentGuide.background1": border,
+          "editorIndentGuide.activeBackground1": foreground,
+          "editorWidget.border": border,
+          "editorGutter.background": background,
+          "focusBorder": border,
+          "input.border": border
+        }
+      });
+      monacoThemeSignature = signature;
+      monaco.editor.setTheme("bds-theme");
+    };
+    const loadMonaco = () => {
+      if (window.monaco?.editor) {
+        ensureMonacoTheme(window.monaco);
+        registerLiquidLanguage(window.monaco);
+        registerMarkdownWithMacrosLanguage(window.monaco);
+        return Promise.resolve(window.monaco);
+      }
+      if (monacoLoaderPromise) {
+        return monacoLoaderPromise;
+      }
+      monacoLoaderPromise = loadScript("/monaco/vs/loader.js").then(
+        () => new Promise((resolve, reject) => {
+          window.require.config({ paths: { vs: "/monaco/vs" } });
+          window.require(["vs/editor/editor.main"], () => {
+            ensureMonacoTheme(window.monaco);
+            registerLiquidLanguage(window.monaco);
+            registerMarkdownWithMacrosLanguage(window.monaco);
+            resolve(window.monaco);
+          }, reject);
+        })
+      ).catch((error) => {
+        monacoLoaderPromise = null;
+        throw error;
+      });
+      return monacoLoaderPromise;
+    };
+    const monacoServices = createMonacoServices({ loadMonaco, ensureMonacoTheme });
+    const Hooks2 = {
+      AppShell: {
+        mounted() {
+          this.shortcuts = parseShortcutConfig(this.el.dataset.shortcuts);
+          this.currentProjectId = this.el.dataset.projectId || "";
+          this.syncStoredLayout();
+          this.syncStoredUiLanguage();
+          this.destroyOverlaySync = syncTitlebarOverlayInsets();
+          this.workbenchStorageKey = (projectId) => projectId ? `${WORKBENCH_SESSION_STORAGE_KEY_PREFIX}${projectId}` : null;
+          this.restoreStoredWorkbenchSession = () => {
+            const projectId = this.el.dataset.projectId || "";
+            const storageKey = this.workbenchStorageKey(projectId);
+            if (!storageKey) {
+              return false;
+            }
+            const session = parseJsonObject(window.localStorage.getItem(storageKey));
+            if (!session) {
+              return false;
+            }
+            this.pushEvent("restore_workbench_session", { session });
+            return true;
+          };
+          this.persistWorkbenchSession = () => {
+            const projectId = this.el.dataset.projectId || "";
+            const storageKey = this.workbenchStorageKey(projectId);
+            const session = this.el.dataset.workbenchSession;
+            if (!storageKey || !session) {
+              return;
+            }
+            window.localStorage.setItem(storageKey, session);
+          };
+          this.handleMouseDown = (event) => {
+            const handle = event.target.closest("[data-role='resize-handle']");
+            if (!handle || !this.el.contains(handle)) {
+              return;
+            }
+            event.preventDefault();
+            const target = handle.dataset.resize;
+            const startX = event.clientX;
+            const startWidth = target === "assistant" ? shellWidth("[data-testid='assistant-shell']") : shellWidth("[data-testid='sidebar-shell']");
+            const min = target === "assistant" ? 280 : 200;
+            const max = target === "assistant" ? 640 : 500;
+            const invert = target === "assistant";
+            const onMouseMove = (moveEvent) => {
+              const delta = invert ? startX - moveEvent.clientX : moveEvent.clientX - startX;
+              const width = clamp(startWidth + delta, min, max);
+              const selector = target === "assistant" ? "[data-testid='assistant-shell']" : "[data-testid='sidebar-shell']";
+              setShellWidth(selector, width);
+              persistWidth(target, width);
+            };
+            const onMouseUp = (upEvent) => {
+              const delta = invert ? startX - upEvent.clientX : upEvent.clientX - startX;
+              const width = clamp(startWidth + delta, min, max);
+              persistWidth(target, width);
+              this.pushEvent("resize_panel", { target, width });
+              window.removeEventListener("mousemove", onMouseMove);
+              window.removeEventListener("mouseup", onMouseUp);
+            };
+            window.addEventListener("mousemove", onMouseMove);
+            window.addEventListener("mouseup", onMouseUp);
+          };
+          this.el.addEventListener("mousedown", this.handleMouseDown);
+          this.handleNativeMenuAction = (event) => {
+            const action = event.detail?.action;
+            const ackId = event.detail?.ackId;
+            if (action) {
+              this.pushEvent("native_menu_action", { action }, () => {
+                if (ackId) {
+                  window.dispatchEvent(
+                    new CustomEvent("bds:native-menu-action-ack", { detail: { ackId } })
+                  );
+                }
+              });
+            }
+          };
+          this.handleChange = (event) => {
+            const select = event.target.closest(".status-bar-language-select");
+            if (select && this.el.contains(select)) {
+              window.localStorage.setItem(UI_LANGUAGE_STORAGE_KEY, select.value);
+            }
+          };
+          this.handleShortcutKeyDown = (event) => {
+            if (shortcutTargetIsEditable(event)) {
+              return;
+            }
+            const shortcut = this.shortcuts.find((candidate) => shortcutMatchesEvent(candidate, event));
+            if (!shortcut) {
+              return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.pushEvent("shortcut", {
+              key: normalizeShortcutKey(event.key),
+              meta: event.metaKey,
+              ctrl: event.ctrlKey,
+              alt: event.altKey,
+              shift: event.shiftKey,
+              tag: event.target?.tagName || null,
+              contentEditable: event.target?.isContentEditable || false
+            });
+          };
+          this.handleThumbnailLoad = (event) => {
+            if (event.target instanceof HTMLImageElement && event.target.classList.contains("media-thumbnail-image")) {
+              setMediaThumbnailLoaded(event.target, true);
+            }
+          };
+          this.handleThumbnailError = (event) => {
+            if (event.target instanceof HTMLImageElement && event.target.classList.contains("media-thumbnail-image")) {
+              setMediaThumbnailLoaded(event.target, false);
+            }
+          };
+          this.handleEvent("menu-runtime-command", ({ action }) => {
+            if (action) {
+              menuRuntimeCommandRunner(String(action));
+            }
+          });
+          window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction);
+          window.addEventListener("keydown", this.handleShortcutKeyDown, true);
+          this.el.addEventListener("load", this.handleThumbnailLoad, true);
+          this.el.addEventListener("error", this.handleThumbnailError, true);
+          this.el.addEventListener("change", this.handleChange);
+          syncMediaThumbnailState(this.el);
+          this.restoreStoredWorkbenchSession();
+        },
+        updated() {
+          const nextProjectId = this.el.dataset.projectId || "";
+          if (nextProjectId !== this.currentProjectId) {
+            this.currentProjectId = nextProjectId;
+            if (this.restoreStoredWorkbenchSession()) {
+              return;
+            }
+          }
+          syncMediaThumbnailState(this.el);
+          this.persistWorkbenchSession();
+        },
+        destroyed() {
+          this.el.removeEventListener("mousedown", this.handleMouseDown);
+          this.el.removeEventListener("load", this.handleThumbnailLoad, true);
+          this.el.removeEventListener("error", this.handleThumbnailError, true);
+          this.el.removeEventListener("change", this.handleChange);
+          window.removeEventListener("bds:native-menu-action", this.handleNativeMenuAction);
+          window.removeEventListener("keydown", this.handleShortcutKeyDown, true);
+          if (this.destroyOverlaySync) {
+            this.destroyOverlaySync();
+          }
+        },
+        syncStoredLayout() {
+          this.pushEvent("sync_layout", {
+            sidebar_width: readStoredSize(SIDEBAR_STORAGE_KEY, shellWidth("[data-testid='sidebar-shell']"), 200, 500),
+            assistant_sidebar_width: readStoredSize(ASSISTANT_STORAGE_KEY, 360, 280, 640)
+          });
+        },
+        syncStoredUiLanguage() {
+          const stored = window.localStorage.getItem(UI_LANGUAGE_STORAGE_KEY);
+          if (stored) {
+            this.pushEvent("sync_ui_language", { language: stored });
+          }
+        }
+      },
+      SidebarInteractions: {
+        mounted() {
+          this.handleDblClick = (event) => {
+            const button = event.target.closest("[data-testid='sidebar-open-item']");
+            if (!button || !this.el.contains(button)) {
+              return;
+            }
+            this.pushEvent("pin_sidebar_item", {
+              route: button.dataset.route,
+              id: button.dataset.itemId,
+              title: button.dataset.openTitle || "",
+              subtitle: button.dataset.openSubtitle || ""
+            });
+          };
+          this.el.addEventListener("dblclick", this.handleDblClick);
+        },
+        destroyed() {
+          this.el.removeEventListener("dblclick", this.handleDblClick);
+        }
+      },
+      SettingsSectionScroll: {
+        mounted() {
+          this.lastTargetId = null;
+          this.scrollToSelectedSection();
+        },
+        updated() {
+          this.scrollToSelectedSection();
+        },
+        scrollToSelectedSection() {
+          const targetId = this.el.dataset.settingsScrollTarget;
+          if (!targetId || targetId === this.lastTargetId) {
+            return;
+          }
+          this.lastTargetId = targetId;
+          window.requestAnimationFrame(() => {
+            const target = document.getElementById(targetId);
+            if (target && this.el.contains(target)) {
+              target.scrollIntoView({ block: "start", behavior: "smooth" });
+            }
+          });
+        }
+      },
+      TagsSectionScroll: {
+        mounted() {
+          this.lastTargetId = null;
+          this.scrollToSelectedSection();
+        },
+        updated() {
+          this.scrollToSelectedSection();
+        },
+        scrollToSelectedSection() {
+          const targetId = this.el.dataset.tagsScrollTarget;
+          if (!targetId || targetId === this.lastTargetId) {
+            return;
+          }
+          this.lastTargetId = targetId;
+          window.requestAnimationFrame(() => {
+            const target = document.getElementById(targetId);
+            if (target && this.el.contains(target)) {
+              target.scrollIntoView({ block: "start", behavior: "smooth" });
+            }
+          });
+        }
+      },
+      ChatSurface: {
+        mounted() {
+          this.stickToBottom = true;
+          this.scrollContainer = null;
+          this.autoResize = () => {
+            const textarea = this.el.querySelector(".chat-input");
+            if (!textarea) {
+              return;
+            }
+            const styles = getComputedStyle(textarea);
+            const minHeight = parseFloat(styles.getPropertyValue("--chat-input-min-height")) || 20;
+            const maxHeight = parseFloat(styles.getPropertyValue("--chat-input-max-height")) || 160;
+            textarea.rows = 1;
+            textarea.style.minHeight = `${minHeight}px`;
+            if (textarea.value.trim() === "") {
+              textarea.style.height = `${minHeight}px`;
+              textarea.style.maxHeight = `${minHeight}px`;
+              textarea.style.overflowY = "hidden";
+              return;
+            }
+            textarea.style.maxHeight = `${maxHeight}px`;
+            textarea.style.height = "0px";
+            const nextHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+            textarea.style.height = `${nextHeight}px`;
+            textarea.style.overflowY = nextHeight >= maxHeight ? "auto" : "hidden";
+          };
+          this.syncScrollContainer = () => {
+            const nextContainer = this.el.querySelector(".chat-messages");
+            if (nextContainer === this.scrollContainer) {
+              return;
+            }
+            if (this.scrollContainer) {
+              this.scrollContainer.removeEventListener("scroll", this.handleScroll);
+            }
+            this.scrollContainer = nextContainer;
+            if (this.scrollContainer) {
+              this.scrollContainer.addEventListener("scroll", this.handleScroll);
+            }
+          };
+          this.scrollToBottom = (force = false) => {
+            if (!this.scrollContainer) {
+              return;
+            }
+            if (force || this.stickToBottom) {
+              this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight;
+            }
+          };
+          this.syncExpandedSurfaces = () => {
+            this.el.querySelectorAll(".chat-inline-surface[data-expanded='true']").forEach((surface) => {
+              surface.open = true;
+            });
+          };
+          this.surfaceObserver = new MutationObserver(() => {
+            this.syncExpandedSurfaces();
+          });
+          this.handleScroll = () => {
+            if (!this.scrollContainer) {
+              this.stickToBottom = true;
+              return;
+            }
+            const distanceFromBottom = this.scrollContainer.scrollHeight - this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;
+            this.stickToBottom = distanceFromBottom < 48;
+          };
+          this.handleInput = (event) => {
+            if (!event.target.closest(".chat-input")) {
+              return;
+            }
+            this.stickToBottom = true;
+            this.autoResize();
+          };
+          this.handleKeyDown = (event) => {
+            if (!event.target.closest(".chat-input")) {
+              return;
+            }
+            if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+              event.preventDefault();
+              const sendButton = this.el.querySelector("[data-testid='chat-send-button']");
+              if (sendButton && !sendButton.disabled) {
+                sendButton.click();
+              }
+            }
+          };
+          this.el.addEventListener("input", this.handleInput);
+          this.el.addEventListener("keydown", this.handleKeyDown);
+          this.syncScrollContainer();
+          this.syncExpandedSurfaces();
+          this.surfaceObserver.observe(this.el, { childList: true, subtree: true });
+          this.autoResize();
+          window.requestAnimationFrame(() => this.scrollToBottom(true));
+        },
+        updated() {
+          this.syncScrollContainer();
+          this.syncExpandedSurfaces();
+          this.autoResize();
+          window.requestAnimationFrame(() => this.scrollToBottom());
+        },
+        destroyed() {
+          this.surfaceObserver.disconnect();
+          this.el.removeEventListener("input", this.handleInput);
+          this.el.removeEventListener("keydown", this.handleKeyDown);
+          if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener("scroll", this.handleScroll);
+          }
+        }
+      },
+      MenuEditorTree: {
+        mounted() {
+          this.dragItemId = null;
+          this.dragSourceEl = null;
+          this.dropTargetEl = null;
+          this.dropPosition = null;
+          this.clearDropTarget = () => {
+            if (this.dropTargetEl) {
+              this.dropTargetEl.classList.remove("is-drop-before", "is-drop-after", "is-drop-inside");
+            }
+            this.dropTargetEl = null;
+            this.dropPosition = null;
+          };
+          this.setDropTarget = (row, position) => {
+            if (this.dropTargetEl === row && this.dropPosition === position) {
+              return;
+            }
+            this.clearDropTarget();
+            this.dropTargetEl = row;
+            this.dropPosition = position;
+            row.classList.add(`is-drop-${position}`);
+          };
+          this.handleDragStart = (event) => {
+            const handle = event.target.closest("[data-menu-drag-handle='true']");
+            const row = event.target.closest("[data-menu-item-id]");
+            if (!handle || !row || !this.el.contains(row)) {
+              return;
+            }
+            this.dragItemId = row.dataset.menuItemId || null;
+            this.dragSourceEl = row;
+            row.classList.add("is-dragging");
+            if (event.dataTransfer) {
+              event.dataTransfer.effectAllowed = "move";
+              event.dataTransfer.setData("text/plain", this.dragItemId || "");
+            }
+          };
+          this.handleDragOver = (event) => {
+            const row = event.target.closest("[data-menu-item-id]");
+            if (!this.dragItemId || !row || !this.el.contains(row)) {
+              this.clearDropTarget();
+              return;
+            }
+            const targetItemId = row.dataset.menuItemId || "";
+            if (!targetItemId || targetItemId === this.dragItemId) {
+              this.clearDropTarget();
+              return;
+            }
+            event.preventDefault();
+            const rect = row.getBoundingClientRect();
+            const offsetY = event.clientY - rect.top;
+            const allowInside = row.dataset.menuCanDropInside === "true";
+            const insideBandTop = rect.height * 0.3;
+            const insideBandBottom = rect.height * 0.7;
+            const position = allowInside && offsetY >= insideBandTop && offsetY <= insideBandBottom ? "inside" : offsetY < rect.height / 2 ? "before" : "after";
+            this.setDropTarget(row, position);
+            if (event.dataTransfer) {
+              event.dataTransfer.dropEffect = "move";
+            }
+          };
+          this.handleDrop = (event) => {
+            const row = event.target.closest("[data-menu-item-id]");
+            if (!this.dragItemId || !row || !this.el.contains(row) || !this.dropPosition) {
+              this.clearDropTarget();
+              return;
+            }
+            event.preventDefault();
+            this.pushEvent("menu_editor_drop_item", {
+              drag_item_id: this.dragItemId,
+              target_item_id: row.dataset.menuItemId,
+              position: this.dropPosition
+            });
+            this.clearDropTarget();
+          };
+          this.handleDragLeave = (event) => {
+            const related = event.relatedTarget;
+            if (this.dropTargetEl && (!related || !this.dropTargetEl.contains(related))) {
+              this.clearDropTarget();
+            }
+          };
+          this.handleDragEnd = () => {
+            if (this.dragSourceEl) {
+              this.dragSourceEl.classList.remove("is-dragging");
+            }
+            this.dragItemId = null;
+            this.dragSourceEl = null;
+            this.clearDropTarget();
+          };
+          this.el.addEventListener("dragstart", this.handleDragStart);
+          this.el.addEventListener("dragover", this.handleDragOver);
+          this.el.addEventListener("drop", this.handleDrop);
+          this.el.addEventListener("dragleave", this.handleDragLeave);
+          this.el.addEventListener("dragend", this.handleDragEnd);
+        },
+        destroyed() {
+          this.el.removeEventListener("dragstart", this.handleDragStart);
+          this.el.removeEventListener("dragover", this.handleDragOver);
+          this.el.removeEventListener("drop", this.handleDrop);
+          this.el.removeEventListener("dragleave", this.handleDragLeave);
+          this.el.removeEventListener("dragend", this.handleDragEnd);
+        }
+      },
+      MonacoEditor: {
+        mounted() {
+          this.textarea = document.getElementById(this.el.dataset.monacoInputId) || this.el.querySelector("textarea");
+          this.host = this.el.querySelector(".monaco-editor-instance");
+          this.language = this.el.dataset.monacoLanguage || "plaintext";
+          this.wordWrap = this.el.dataset.monacoWordWrap || "off";
+          this.editorId = this.el.dataset.monacoEditorId || "";
+          this.insertEvent = this.el.dataset.monacoInsertEvent || "";
+          this.syncTimer = null;
+          this.isApplyingRemoteUpdate = false;
+          this.lastKnownValue = this.textarea?.value || "";
+          this.syncEditorFromTextarea = () => {
+            this.textarea = document.getElementById(this.el.dataset.monacoInputId) || this.el.querySelector("textarea");
+            if (!this.textarea || !this.editor) {
+              return;
+            }
+            const value = this.textarea.value || "";
+            if (this.editor.getValue() !== value) {
+              this.isApplyingRemoteUpdate = true;
+              this.editor.setValue(value);
+              this.isApplyingRemoteUpdate = false;
+            }
+            this.lastKnownValue = value;
+          };
+          this.layoutEditorSoon = () => {
+            window.requestAnimationFrame(() => {
+              window.requestAnimationFrame(() => {
+                if (!this.editor) {
+                  return;
+                }
+                this.editor.layout();
+              });
+            });
+          };
+          this.waitForMonacoVisibleSize = () => new Promise((resolve) => {
+            let settled = false;
+            let attempts = 0;
+            const hasVisibleSize = () => {
+              const rect = this.host?.getBoundingClientRect();
+              return Boolean(rect && rect.width > 0 && rect.height > 0);
+            };
+            const finish = () => {
+              if (settled) {
+                return;
+              }
+              settled = true;
+              this.visibleSizeObserver?.disconnect();
+              this.visibleSizeObserver = null;
+              resolve();
+            };
+            const check = () => {
+              if (hasVisibleSize() || attempts >= 20) {
+                finish();
+                return;
+              }
+              attempts += 1;
+              window.requestAnimationFrame(check);
+            };
+            if (hasVisibleSize()) {
+              finish();
+              return;
+            }
+            if (window.ResizeObserver && this.host) {
+              this.visibleSizeObserver = new ResizeObserver(() => {
+                if (hasVisibleSize()) {
+                  finish();
+                }
+              });
+              this.visibleSizeObserver.observe(this.host);
+            }
+            window.requestAnimationFrame(check);
+          });
+          this.queueSync = () => {
+            if (!this.textarea || !this.editor) {
+              return;
+            }
+            window.clearTimeout(this.syncTimer);
+            this.syncTimer = window.setTimeout(() => {
+              if (!this.textarea || !this.editor) {
+                return;
+              }
+              const value = this.editor.getValue();
+              if (this.textarea.value === value) {
+                return;
+              }
+              this.lastKnownValue = value;
+              this.textarea.value = value;
+              this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+            }, 120);
+          };
+          this.handleInsert = ({ id, content }) => {
+            if (!this.editor || !content || String(id) !== String(this.editorId)) {
+              return;
+            }
+            const model = this.editor.getModel();
+            const selection = this.editor.getSelection();
+            if (!model || !selection) {
+              return;
+            }
+            const value = this.editor.getValue();
+            const start = model.getOffsetAt(selection.getStartPosition());
+            const end = model.getOffsetAt(selection.getEndPosition());
+            const before = value.slice(0, start);
+            const after = value.slice(end);
+            const separator = before !== "" && !before.endsWith("\n") ? "\n" : "";
+            const suffix = after !== "" && !content.endsWith("\n") ? "\n" : "";
+            const inserted = `${separator}${content}${suffix}`;
+            this.editor.executeEdits("bds-insert-content", [
+              {
+                range: selection,
+                text: inserted,
+                forceMoveMarkers: true
+              }
+            ]);
+            this.editor.focus();
+          };
+          monacoServices.loadMonaco().then(async (monaco) => {
+            if (!this.host || !this.textarea) {
+              return;
+            }
+            await this.waitForMonacoVisibleSize();
+            monacoServices.ensureMonacoTheme(monaco);
+            this.editor = monaco.editor.create(this.host, {
+              value: this.textarea.value || "",
+              language: this.language,
+              theme: "bds-theme",
+              automaticLayout: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              wordWrap: this.wordWrap,
+              lineNumbers: "on",
+              lineNumbersMinChars: 3,
+              fontSize: 14,
+              fontFamily: "'Cascadia Code', 'Consolas', 'Courier New', monospace",
+              padding: { top: 12, bottom: 12 },
+              roundedSelection: false,
+              renderLineHighlight: "line",
+              formatOnPaste: true,
+              cursorStyle: "line",
+              cursorBlinking: "smooth",
+              quickSuggestions: this.language === "markdown-with-macros" ? false : true,
+              tabSize: 2,
+              insertSpaces: true
+            });
+            monacoEditors.set(this.editorId || this.el.id, this.editor);
+            monaco.editor.setTheme("bds-theme");
+            this.syncEditorFromTextarea();
+            this.layoutEditorSoon();
+            this.changeSubscription = this.editor.onDidChangeModelContent(() => {
+              if (this.isApplyingRemoteUpdate) {
+                return;
+              }
+              this.queueSync();
+            });
+            if (this.insertEvent) {
+              this.handleEvent(this.insertEvent, this.handleInsert);
+            }
+          }).catch((error) => {
+            console.error("Failed to load Monaco editor", error);
+          });
+        },
+        updated() {
+          this.textarea = document.getElementById(this.el.dataset.monacoInputId) || this.el.querySelector("textarea");
+          this.host = this.el.querySelector(".monaco-editor-instance");
+          this.language = this.el.dataset.monacoLanguage || this.language || "plaintext";
+          this.wordWrap = this.el.dataset.monacoWordWrap || this.wordWrap || "off";
+          if (!this.editor || !this.textarea) {
+            return;
+          }
+          monacoServices.loadMonaco().then((monaco) => {
+            monacoServices.ensureMonacoTheme(monaco);
+            monaco.editor.setTheme("bds-theme");
+            if (this.editor.getModel()?.getLanguageId() !== this.language) {
+              monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+            }
+            this.editor.updateOptions({ wordWrap: this.wordWrap });
+          });
+          this.syncEditorFromTextarea();
+          this.layoutEditorSoon();
+        },
+        destroyed() {
+          window.clearTimeout(this.syncTimer);
+          this.visibleSizeObserver?.disconnect();
+          this.changeSubscription?.dispose();
+          monacoEditors.delete(this.editorId || this.el.id);
+          this.editor?.dispose();
+        }
+      },
+      MonacoDiffEditor: {
+        mounted() {
+          this.host = this.el.querySelector(".monaco-diff-editor-instance");
+          this.originalInput = this.el.querySelector(".monaco-diff-original");
+          this.modifiedInput = this.el.querySelector(".monaco-diff-modified");
+          this.filePath = this.el.dataset.monacoDiffFilePath || "working-tree";
+          this.language = this.el.dataset.monacoDiffLanguage || "plaintext";
+          this.viewStyle = this.el.dataset.monacoDiffViewStyle || "inline";
+          this.wordWrap = this.el.dataset.monacoDiffWordWrap || "off";
+          this.hideUnchanged = this.el.dataset.monacoDiffHideUnchanged === "true";
+          this.readValues = () => ({
+            original: this.originalInput?.value || "",
+            modified: this.modifiedInput?.value || ""
+          });
+          this.applyDataset = () => {
+            this.filePath = this.el.dataset.monacoDiffFilePath || "working-tree";
+            this.language = this.el.dataset.monacoDiffLanguage || "plaintext";
+            this.viewStyle = this.el.dataset.monacoDiffViewStyle || "inline";
+            this.wordWrap = this.el.dataset.monacoDiffWordWrap || "off";
+            this.hideUnchanged = this.el.dataset.monacoDiffHideUnchanged === "true";
+          };
+          this.setModels = (monaco) => {
+            const values = this.readValues();
+            this.originalModel?.dispose();
+            this.modifiedModel?.dispose();
+            this.originalModel = monaco.editor.createModel(
+              values.original,
+              this.language,
+              monaco.Uri.parse(diffModelPath(this.filePath, "original"))
+            );
+            this.modifiedModel = monaco.editor.createModel(
+              values.modified,
+              this.language,
+              monaco.Uri.parse(diffModelPath(this.filePath, "modified"))
+            );
+            this.editor.setModel({ original: this.originalModel, modified: this.modifiedModel });
+            this.lastFilePath = this.filePath;
+          };
+          monacoServices.loadMonaco().then((monaco) => {
+            if (!this.host) {
+              return;
+            }
+            monacoServices.ensureMonacoTheme(monaco);
+            this.editor = monaco.editor.createDiffEditor(this.host, {
+              theme: "bds-theme",
+              automaticLayout: true,
+              readOnly: true,
+              renderSideBySide: this.viewStyle === "side-by-side",
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              lineNumbers: "on",
+              diffCodeLens: false,
+              originalEditable: false,
+              wordWrap: this.wordWrap,
+              hideUnchangedRegions: { enabled: this.hideUnchanged },
+              ignoreTrimWhitespace: false
+            });
+            this.setModels(monaco);
+          }).catch((error) => {
+            console.error("Failed to load Monaco diff editor", error);
+          });
+        },
+        updated() {
+          this.host = this.el.querySelector(".monaco-diff-editor-instance");
+          this.originalInput = this.el.querySelector(".monaco-diff-original");
+          this.modifiedInput = this.el.querySelector(".monaco-diff-modified");
+          this.applyDataset();
+          if (!this.editor) {
+            return;
+          }
+          monacoServices.loadMonaco().then((monaco) => {
+            monacoServices.ensureMonacoTheme(monaco);
+            monaco.editor.setTheme("bds-theme");
+            this.editor.updateOptions({
+              renderSideBySide: this.viewStyle === "side-by-side",
+              wordWrap: this.wordWrap,
+              hideUnchangedRegions: { enabled: this.hideUnchanged }
+            });
+            if (this.lastFilePath !== this.filePath) {
+              this.setModels(monaco);
+              return;
+            }
+            const values = this.readValues();
+            if (this.originalModel && this.originalModel.getLanguageId() !== this.language) {
+              monaco.editor.setModelLanguage(this.originalModel, this.language);
+            }
+            if (this.modifiedModel && this.modifiedModel.getLanguageId() !== this.language) {
+              monaco.editor.setModelLanguage(this.modifiedModel, this.language);
+            }
+            if (this.originalModel && this.originalModel.getValue() !== values.original) {
+              this.originalModel.setValue(values.original);
+            }
+            if (this.modifiedModel && this.modifiedModel.getValue() !== values.modified) {
+              this.modifiedModel.setValue(values.modified);
+            }
+          });
+        },
+        destroyed() {
+          this.originalModel?.dispose();
+          this.modifiedModel?.dispose();
+          this.editor?.dispose();
+        }
+      }
+    };
+    const liveSocket = new LiveSocket2("/live", Socket, {
+      params: { _csrf_token: csrfToken },
+      hooks: createHooks(Hooks2),
+      metadata: {
+        keydown: (event) => ({
+          key: event.key,
+          meta: event.metaKey,
+          ctrl: event.ctrlKey,
+          alt: event.altKey,
+          shift: event.shiftKey,
+          tag: event.target?.tagName || null,
+          contentEditable: event.target?.isContentEditable || false
+        })
+      }
+    });
+    liveSocket.connect();
+    window.liveSocket = liveSocket;
+  });
+})();
diff --git a/test/bds/desktop/shell_live_test.exs b/test/bds/desktop/shell_live_test.exs
index 89f0a71..78a79ef 100644
--- a/test/bds/desktop/shell_live_test.exs
+++ b/test/bds/desktop/shell_live_test.exs
@@ -6,6 +6,7 @@ defmodule BDS.Desktop.ShellLiveTest do
   import Phoenix.LiveViewTest
 
   @shell_live_source_root Path.expand("../../../lib/bds/desktop/shell_live", __DIR__)
+  @endpoint BDS.Desktop.Endpoint
   @css_source_files [
     "tokens.css",
     "shell.css",
@@ -28,6 +29,210 @@ defmodule BDS.Desktop.ShellLiveTest do
     |> Enum.join("\n")
   end
 
+  defp phase3_post_editor_assigns do
+    %{
+      myself: nil,
+      post_editor: %{
+        id: 42,
+        dirty?: true,
+        display_title: "Phase 3 Post",
+        status: :draft,
+        save_state: :saving,
+        quick_actions_open?: false,
+        can_publish?: true,
+        discard_title: "Discard draft",
+        discard_label: "Discard",
+        can_delete?: true,
+        metadata_expanded: true,
+        translation_flags: [
+          %{language: "en", status: :draft, active: true, label: "English", flag: "EN"}
+        ],
+        form: %{
+          "title" => "Phase 3 Post",
+          "author" => "Author",
+          "language" => "en",
+          "do_not_translate" => false,
+          "template_slug" => "",
+          "excerpt" => "Excerpt",
+          "content" => "# Hello",
+          "tags" => "elixir",
+          "categories" => "news"
+        },
+        tag_chips: [%{name: "elixir", color: "#3b82f6"}],
+        tag_query: "",
+        tag_suggestions: [],
+        tag_query_addable?: false,
+        languages: ["en", "de"],
+        detect_language_enabled?: true,
+        slug: "phase-3-post",
+        category_values: ["news"],
+        category_query: "",
+        category_suggestions: [],
+        category_query_addable?: false,
+        show_template_selector?: true,
+        template_options: [%{slug: "default", title: "Default"}],
+        post_links: %{backlinks: [], outlinks: []},
+        linked_media: [],
+        excerpt_expanded: true,
+        mode: :markdown,
+        gallery_count: 1,
+        preview_url: nil,
+        footer: %{created_at: "2026-05-04", updated_at: "2026-05-04", published_at: nil},
+        can_translate?: true
+      }
+    }
+  end
+
+  defp phase3_media_editor_assigns do
+    %{
+      myself: nil,
+      media_editor: %{
+        dirty?: true,
+        display_title: "Hero Image",
+        save_state: :saved,
+        quick_actions_open?: false,
+        is_image: true,
+        can_detect_language?: true,
+        can_translate?: true,
+        preview_url: "/media/hero.jpg",
+        form: %{
+          "title" => "Hero Image",
+          "alt" => "Hero alt",
+          "caption" => "Caption",
+          "tags" => "cover",
+          "author" => "Author",
+          "language" => "en"
+        },
+        original_name: "hero.jpg",
+        mime_type: "image/jpeg",
+        file_size: "42 KB",
+        dimensions: "1200x800",
+        languages: ["en", "de"],
+        translations: [],
+        post_picker_open?: false,
+        post_picker_query: "",
+        post_picker_results: [],
+        post_picker_overflow_count: 0,
+        linked_posts: [],
+        editing_translation: nil
+      }
+    }
+  end
+
+  defp phase3_script_editor_assigns do
+    %{
+      myself: nil,
+      script_editor: %{
+        id: 7,
+        title: "Build Feed",
+        slug: "build-feed",
+        kind: "utility",
+        entrypoint: "run",
+        enabled: true,
+        content: "print('ok')",
+        entrypoints: ["run"],
+        status: :draft,
+        can_publish?: true,
+        created_at: 1_714_816_000,
+        updated_at: 1_714_816_000
+      }
+    }
+  end
+
+  defp phase3_template_editor_assigns do
+    %{
+      myself: nil,
+      template_editor: %{
+        id: 9,
+        title: "Post Template",
+        slug: "post-template",
+        kind: :post,
+        enabled: true,
+        content: "{{ content }}",
+        status: :draft,
+        can_publish?: true,
+        created_at: 1_714_816_000,
+        updated_at: 1_714_816_000
+      }
+    }
+  end
+
+  defp phase3_chat_editor_assigns do
+    %{
+      myself: nil,
+      chat_editor: %{
+        id: 5,
+        needs_api_key?: false,
+        title: "AI Assistant",
+        effective_model: "gpt-4.1",
+        model_selector_open?: false,
+        available_models: [],
+        available_model_groups: [],
+        messages: [],
+        is_streaming: false,
+        pending_user_message: nil,
+        streaming_content: "",
+        streaming_tool_markers: [],
+        streaming_inline_surfaces: [],
+        input: "",
+        send_disabled?: true,
+        action_error: nil
+      }
+    }
+  end
+
+  defp phase3_menu_editor_assigns do
+    %{
+      myself: nil,
+      menu_editor: %{
+        draft: nil,
+        title: "Navigation",
+        description: "Manage site navigation",
+        can_move_up?: false,
+        can_move_down?: false,
+        can_indent?: false,
+        can_unindent?: false,
+        can_delete?: false,
+        items: []
+      }
+    }
+  end
+
+  defp phase3_settings_editor_assigns do
+    %{
+      myself: nil,
+      current_tab: %{type: :settings, id: "settings"},
+      settings_editor: %{
+        selected_section: "project",
+        search_query: "",
+        active_sections: [],
+        project_visible?: false,
+        editor_visible?: false,
+        content_visible?: false,
+        ai_visible?: false,
+        publishing_visible?: false,
+        data_visible?: false,
+        technology_visible?: false,
+        mcp_visible?: false
+      }
+    }
+  end
+
+  defp phase3_tags_editor_assigns do
+    %{
+      myself: nil,
+      tags_editor: %{
+        selected_section: "cloud",
+        tags: [],
+        new_tag: %{"name" => "", "color" => "#3b82f6"},
+        edit_draft: %{},
+        selected: [],
+        merge_target: nil,
+        templates: []
+      }
+    }
+  end
+
   test "shell live modules use contexts instead of direct Repo.get calls" do
     source_files =
       [
@@ -51,6 +256,56 @@ defmodule BDS.Desktop.ShellLiveTest do
     assert offenders == []
   end
 
+  @tag :phase3
+  test "phase 3 shell chrome renders utility-owned layout classes" do
+    conn = Plug.Conn.put_private(build_conn(), :phoenix_endpoint, BDS.Desktop.Endpoint)
+    {:ok, _view, html} = live_isolated(conn, BDS.Desktop.ShellLive)
+
+    assert html =~ "activity-bar flex h-full shrink-0 flex-col items-center"
+    assert html =~ "sidebar-shell flex min-w-0 shrink-0 overflow-hidden"
+    assert html =~ "tab-bar-empty flex h-full items-center px-3 text-sm"
+    assert html =~ "assistant-sidebar-shell flex min-w-0 shrink-0 overflow-hidden"
+    assert html =~ "status-bar flex h-[22px] shrink-0 items-center justify-between"
+  end
+
+  @tag :phase3
+  test "phase 3 editors and shared surfaces render utility-owned layouts" do
+    post_html = render_component(&BDS.Desktop.ShellLive.PostEditor.render/1, phase3_post_editor_assigns())
+    media_html = render_component(&BDS.Desktop.ShellLive.MediaEditor.render/1, phase3_media_editor_assigns())
+    script_html = render_component(&BDS.Desktop.ShellLive.ScriptEditor.render/1, phase3_script_editor_assigns())
+    template_html = render_component(&BDS.Desktop.ShellLive.TemplateEditor.render/1, phase3_template_editor_assigns())
+    chat_html = render_component(&BDS.Desktop.ShellLive.ChatEditor.render/1, phase3_chat_editor_assigns())
+    menu_html = render_component(&BDS.Desktop.ShellLive.MenuEditor.render/1, phase3_menu_editor_assigns())
+    settings_html = render_component(&BDS.Desktop.ShellLive.SettingsEditor.render/1, phase3_settings_editor_assigns())
+    tags_html = render_component(&BDS.Desktop.ShellLive.TagsEditor.render/1, phase3_tags_editor_assigns())
+
+    assert post_html =~ "post-editor editor flex h-full min-h-0 flex-col"
+    assert post_html =~ "editor-header flex shrink-0 items-start justify-between gap-3"
+    assert post_html =~ "editor-field flex flex-col gap-1.5"
+    assert post_html =~ "editor-toolbar flex items-center gap-3"
+
+    assert media_html =~ "media-editor editor flex h-full min-h-0 flex-col"
+    assert media_html =~ "editor-content media-editor grid min-h-0 flex-1 gap-4"
+
+    assert script_html =~ "scripts-view-shell editor flex h-full min-h-0 flex-col"
+    assert script_html =~ "editor-content scripts-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden"
+
+    assert template_html =~ "templates-view-shell editor flex h-full min-h-0 flex-col"
+    assert template_html =~ "editor-content templates-view flex min-h-0 flex-1 flex-col gap-4 overflow-hidden"
+
+    assert chat_html =~ "chat-panel flex h-full min-h-0 flex-col"
+    assert chat_html =~ "chat-panel-header flex shrink-0 items-center justify-between gap-3"
+
+    assert menu_html =~ "menu-editor-view flex h-full min-h-0 flex-col"
+    assert menu_html =~ "menu-editor-toolbar flex flex-wrap items-center gap-2"
+
+    assert settings_html =~ "settings-view-shell flex h-full min-h-0 flex-col overflow-hidden"
+    assert settings_html =~ "settings-header flex shrink-0 items-center justify-between gap-3"
+
+    assert tags_html =~ "tags-view-shell flex h-full min-h-0 flex-col overflow-hidden"
+    assert tags_html =~ "tag-form-row flex flex-wrap items-center gap-3"
+  end
+
   alias BDS.Persistence
   alias BDS.AI
   alias BDS.CliSync.Watcher
@@ -191,8 +446,6 @@ defmodule BDS.Desktop.ShellLiveTest do
     end
   end
 
-  @endpoint BDS.Desktop.Endpoint
-
   setup do
     :ok = Ecto.Adapters.SQL.Sandbox.checkout(BDS.Repo)
     Ecto.Adapters.SQL.Sandbox.mode(BDS.Repo, {:shared, self()})
@@ -694,7 +947,7 @@ defmodule BDS.Desktop.ShellLiveTest do
     assert html =~ ~s(data-testid="sidebar-shell")
     assert html =~ ~s(data-testid="status-bar")
     assert html =~ ~s(data-testid="status-task-button")
-    assert html =~ ~s(class="panel-shell is-hidden")
+    assert html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
     assert html =~ ~s(data-testid="activity-button")
     assert html =~ ~s(data-view="posts")
     assert html =~ ~s(data-view="media")
@@ -711,14 +964,14 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='toggle-sidebar']")
       |> render_click()
 
-    assert html =~ ~s(class="sidebar-shell is-hidden")
+    assert html =~ ~s(class="sidebar-shell flex min-w-0 shrink-0 overflow-hidden is-hidden")
 
     html =
       view
       |> element("[data-testid='toggle-sidebar']")
       |> render_click()
 
-    refute html =~ ~s(class="sidebar-shell is-hidden")
+    refute html =~ ~s(class="sidebar-shell flex min-w-0 shrink-0 overflow-hidden is-hidden")
 
     html =
       view
@@ -726,7 +979,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> render_click()
 
     assert html =~ ~s(data-region="panel")
-    refute html =~ ~s(class="panel-shell is-hidden")
+    refute html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
     assert html =~ ~s(data-testid="panel-close")
 
     html =
@@ -734,7 +987,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='panel-close']")
       |> render_click()
 
-    assert html =~ ~s(class="panel-shell is-hidden")
+    assert html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
 
     html =
       view
@@ -765,7 +1018,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> render_click()
 
     refute html =~ ~s(data-tab-type="settings")
-    assert html =~ ~s(class="tab-bar-empty")
+    assert html =~ ~s(class="tab-bar-empty flex h-full items-center px-3 text-sm")
   end
 
   test "macos hides the custom titlebar and moves shell toggles into the status bar" do
@@ -785,7 +1038,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='toggle-sidebar']")
       |> render_click()
 
-    assert html =~ ~s(class="sidebar-shell is-hidden")
+    assert html =~ ~s(class="sidebar-shell flex min-w-0 shrink-0 overflow-hidden is-hidden")
 
     html =
       render_hook(view, "native_menu_action", %{"action" => "edit_preferences"})
@@ -1053,7 +1306,7 @@ defmodule BDS.Desktop.ShellLiveTest do
     assert html =~ ~s(data-tab-id="post-1")
     assert html =~ ~s(data-tab-type="media")
     assert html =~ ~s(data-tab-id="media-1")
-    assert html =~ ~s(class="tab active transient")
+    assert Regex.match?(~r/class="tab [^"]*active[^"]*transient/, html)
   end
 
   test "workbench session restore renders documentation tab content" do
@@ -1469,7 +1722,7 @@ defmodule BDS.Desktop.ShellLiveTest do
 
     assert html =~ ~s(data-tab-type="post")
     assert html =~ ~s(data-tab-id="post-1")
-    assert html =~ ~s(class="tab active transient")
+    assert Regex.match?(~r/class="tab [^"]*active[^"]*transient/, html)
 
     html =
       render_click(view, "pin_sidebar_item", %{
@@ -1480,7 +1733,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       })
 
     assert html =~ ~s(data-tab-id="post-1")
-    refute html =~ ~s(class="tab active transient")
+    refute Regex.match?(~r/class="tab [^"]*active[^"]*transient/, html)
 
     html =
       render_click(view, "open_sidebar_item", %{
@@ -1521,13 +1774,13 @@ defmodule BDS.Desktop.ShellLiveTest do
     {:ok, view, html} = live_isolated(build_conn(), BDS.Desktop.ShellLive)
 
     assert html =~ ~s(data-testid="sidebar-shell")
-    assert html =~ ~s(class="panel-shell is-hidden")
+    assert html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
 
     html = render_keydown(view, "shortcut", %{key: "b", meta: true})
-    assert html =~ ~s(class="sidebar-shell is-hidden")
+    assert html =~ ~s(class="sidebar-shell flex min-w-0 shrink-0 overflow-hidden is-hidden")
 
     html = render_keydown(view, "shortcut", %{key: "j", meta: true})
-    refute html =~ ~s(class="panel-shell is-hidden")
+    refute html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
 
     html = render_keydown(view, "shortcut", %{key: "2", meta: true})
     assert html =~ ~s(data-view="media")
@@ -1557,7 +1810,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='toggle-sidebar']")
       |> render_click()
 
-    assert html =~ ~s(class="sidebar-shell is-hidden")
+    assert html =~ ~s(class="sidebar-shell flex min-w-0 shrink-0 overflow-hidden is-hidden")
     assert html =~ ~s(style="width: 0px;")
   end
 
@@ -1596,8 +1849,8 @@ defmodule BDS.Desktop.ShellLiveTest do
 
     assert html =~ ~s(data-testid="sidebar-search-form")
     assert html =~ ~s(data-testid="sidebar-filter-toggle")
-    assert html =~ ~s(class="sidebar-section-header")
-    assert html =~ ~s(class="sidebar-actions")
+    assert html =~ ~s(class="sidebar-section-header flex items-center justify-between gap-2")
+    assert html =~ ~s(class="sidebar-actions flex items-center gap-1")
     assert html =~ ~s(data-testid="sidebar-load-more")
 
     assert html_position(html, ~s(data-testid="sidebar-load-more")) >
@@ -1762,19 +2015,22 @@ defmodule BDS.Desktop.ShellLiveTest do
     assert html =~ "Add published posts"
 
     html = render_click(view, "select_panel_tab", %{"tab" => "output"})
-    refute html =~ ~s(class="panel-shell is-hidden")
+    refute html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
 
     html =
       view
       |> element("[data-testid='status-task-button']")
       |> render_click()
 
-    refute html =~ ~s(class="panel-shell is-hidden")
+    refute html =~ ~s(class="panel-shell flex min-h-0 shrink-0 flex-col overflow-hidden is-hidden")
 
-    assert html =~
-             ~s(<button class="panel-tab active" type="button" phx-click="select_panel_tab" phx-value-tab="tasks">)
+    assert Regex.match?(
+             ~r/<button class="panel-tab [^"]*active" type="button" phx-click="select_panel_tab" phx-value-tab="tasks">/,
+             html
+           )
 
-    assert html =~ ~s(class="task-list") or html =~ "No background tasks running"
+    assert html =~ ~s(class="task-list flex flex-col gap-2") or
+             html =~ ~s(class="panel-entry panel-empty-state")
   end
 
   test "metadata diff tasks localize task text, show progress, and open the diff result in the UI" do
@@ -2273,7 +2529,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> render_change()
 
     html = render(view)
-    assert html =~ ~s(class="tab active dirty")
+    assert Regex.match?(~r/class="tab [^"]*active[^"]*dirty/, html)
     assert html =~ "Updated Shell Post"
 
     _html = render_hook(view, "native_menu_action", %{"action" => "save"})
@@ -2868,7 +3124,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "published"
       })
 
-    assert published_script_html =~ ~s(class="scripts-view-shell editor")
+    assert published_script_html =~ ~s(class="scripts-view-shell editor flex h-full min-h-0 flex-col")
     assert published_script_html =~ ~s(data-testid="script-editor")
     assert published_script_html =~ ~s(data-testid="script-status-badge")
     assert published_script_html =~ ~s(class="status-badge status-published")
@@ -2889,7 +3145,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "published"
       })
 
-    assert published_template_html =~ ~s(class="templates-view-shell editor")
+    assert published_template_html =~ ~s(class="templates-view-shell editor flex h-full min-h-0 flex-col")
     assert published_template_html =~ ~s(data-testid="template-editor")
     assert published_template_html =~ ~s(data-testid="template-status-badge")
     assert published_template_html =~ ~s(class="status-badge status-published")
@@ -3082,8 +3338,9 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => media.original_name
       })
 
-    assert html =~ ~s(class="editor-content media-editor")
-    assert html =~ ~s(class="quick-actions-wrapper")
+    assert html =~
+         "class=\"editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]\""
+    assert html =~ ~s(class="quick-actions-wrapper relative")
     refute html =~ ~s(class="media-editor-form")
 
     assert has_element?(
@@ -3107,7 +3364,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> render_click()
 
     assert html =~ ~s(class="translation-modal-backdrop")
-    assert html =~ ~s(class="translation-modal")
+    assert html =~ ~s(class="translation-modal flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden")
     assert html =~ ~s(name="media_translation[title]")
     assert html =~ ~s(name="media_translation[alt]")
     assert html =~ ~s(name="media_translation[caption]")
@@ -3195,7 +3452,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "Project settings"
       })
 
-    assert settings_html =~ ~s(class="settings-view-shell")
+    assert settings_html =~ ~s(class="settings-view-shell flex h-full min-h-0 flex-col overflow-hidden")
     assert settings_html =~ ~s(class="setting-section")
     refute settings_html =~ "Desktop workbench content routed through the Elixir shell."
 
@@ -3207,7 +3464,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => "Manage tags"
       })
 
-    assert tags_html =~ ~s(class="tags-view-shell")
+    assert tags_html =~ ~s(class="tags-view-shell flex h-full min-h-0 flex-col overflow-hidden")
     assert tags_html =~ ~s(class="tags-section")
     refute tags_html =~ "Desktop workbench content routed through the Elixir shell."
 
@@ -3231,7 +3488,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => script.slug
       })
 
-    assert script_html =~ ~s(class="scripts-view-shell editor")
+    assert script_html =~ ~s(class="scripts-view-shell editor flex h-full min-h-0 flex-col")
     assert script_html =~ "scripts-monaco"
     assert script_html =~ ~s(data-monaco-language="lua")
     assert script_html =~ ~s(data-monaco-word-wrap="on")
@@ -3246,7 +3503,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => template.slug
       })
 
-    assert template_html =~ ~s(class="templates-view-shell editor")
+    assert template_html =~ ~s(class="templates-view-shell editor flex h-full min-h-0 flex-col")
     assert template_html =~ "templates-monaco"
     assert template_html =~ ~s(data-monaco-language="liquid")
     assert template_html =~ ~s(data-monaco-word-wrap="on")
@@ -3261,8 +3518,8 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => conversation.model || "chat"
       })
 
-    assert chat_html =~ ~s(class="chat-panel")
-    assert chat_html =~ ~s(class="chat-input-container")
+    assert chat_html =~ ~s(class="chat-panel flex h-full min-h-0 flex-col")
+    assert chat_html =~ ~s(class="chat-input-container flex shrink-0 flex-col gap-3")
     refute chat_html =~ "Desktop workbench content routed through the Elixir shell."
   end
 
@@ -3281,8 +3538,8 @@ defmodule BDS.Desktop.ShellLiveTest do
 
     assert html =~ ~s(data-testid="chat-model-selector-button")
     assert html =~ ~s(class="chat-panel-title-main")
-    assert html =~ ~s(class="chat-model-selector-wrap")
-    assert html =~ ~s(class="chat-model-selector-button chat-model-selector-inline")
+    assert html =~ ~s(class="chat-model-selector-wrap relative shrink-0")
+    assert html =~ ~s(class="chat-model-selector-button chat-model-selector-inline inline-flex items-center gap-2")
     refute html =~ ~s(class="chat-panel-header-actions")
 
     css = desktop_css_source()
@@ -3330,7 +3587,7 @@ defmodule BDS.Desktop.ShellLiveTest do
       |> element("[data-testid='chat-model-selector-button']")
       |> render_click()
 
-    assert selector_html =~ ~s(class="chat-model-selector-menu")
+    assert selector_html =~ ~s(class="chat-model-selector-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col")
     assert selector_html =~ ~s(data-testid="chat-model-selector-option")
     assert selector_html =~ "llama-current"
 
@@ -3380,7 +3637,7 @@ defmodule BDS.Desktop.ShellLiveTest do
         "subtitle" => conversation.model || "chat"
       })
 
-    assert html =~ ~s(<span class="tab-title">New Chat</span>)
+    assert html =~ ~s(<span class="tab-title truncate">New Chat</span>)
 
     _html =
       view
@@ -3408,10 +3665,10 @@ defmodule BDS.Desktop.ShellLiveTest do
            end)
 
     assert AI.get_chat_conversation(conversation.id).title == "Posts 2026"
-    assert html =~ ~s(<span class="tab-title">Posts 2026</span>)
+    assert html =~ ~s(<span class="tab-title truncate">Posts 2026</span>)
     assert html =~ ~r/<span class="chat-panel-title-main">\s*Posts 2026\s*<\/span>/
     assert html =~ ~s(<span class="chat-item-title">Posts 2026</span>)
-    refute html =~ ~s(<span class="tab-title">New Chat</span>)
+    refute html =~ ~s(<span class="tab-title truncate">New Chat</span>)
     refute html =~ ~s(<span class="chat-item-title">New Chat</span>)
   end
 
diff --git a/test/bds/desktop_test.exs b/test/bds/desktop_test.exs
index dca6bda..ece82e3 100644
--- a/test/bds/desktop_test.exs
+++ b/test/bds/desktop_test.exs
@@ -261,16 +261,16 @@ defmodule BDS.DesktopTest do
     conn = BDS.Desktop.Endpoint.call(conn, BDS.Desktop.Endpoint.init([]))
 
     assert conn.status == 200
-    assert conn.resp_body =~ ~s(class="app")
+    assert conn.resp_body =~ ~s(class="app flex h-full w-full flex-col")
     refute conn.resp_body =~ ~s(data-testid="window-titlebar")
     refute conn.resp_body =~ ~s(data-testid="window-titlebar-menu-bar")
     assert conn.resp_body =~ ~s(data-testid="status-shell-controls")
     assert conn.resp_body =~ ~s(data-testid="toggle-sidebar")
     assert conn.resp_body =~ ~s(data-testid="toggle-panel")
     assert conn.resp_body =~ ~s(data-testid="toggle-assistant")
-    assert conn.resp_body =~ ~s(class="activity-bar")
-    assert conn.resp_body =~ ~s(class="sidebar")
-    assert conn.resp_body =~ ~s(class="status-bar")
+    assert conn.resp_body =~ ~s(class="activity-bar flex h-full shrink-0 flex-col items-center justify-between")
+    assert conn.resp_body =~ ~s(class="sidebar flex min-w-0 flex-1 overflow-hidden")
+    assert conn.resp_body =~ ~s(class="status-bar flex h-[22px] shrink-0 items-center justify-between gap-2")
     assert conn.resp_body =~ ~s(data-phx-main)
     assert conn.resp_body =~ ~s(href="/assets/app.css")
     assert conn.resp_body =~ ~s(src="/assets/app.js")
diff --git a/test/bds/ui/shell_test.exs b/test/bds/ui/shell_test.exs
index db36124..b02fdb6 100644
--- a/test/bds/ui/shell_test.exs
+++ b/test/bds/ui/shell_test.exs
@@ -140,6 +140,44 @@ defmodule BDS.UI.ShellTest do
     assert template =~ "data-workbench-session={encoded_workbench_session(@workbench)}"
   end
 
+  test "tailwind source keeps theme tokens and shared component primitives" do
+    css = css_source()
+    app_css = File.read!("/Users/gb/Projects/bDS2/assets/css/app.css")
+
+    assert app_css =~ ~s|@import "tailwindcss" source(none);|
+    assert css =~ "@theme"
+    assert css =~ "--color-shell-bg:"
+    assert css =~ "--font-sans:"
+    assert css =~ "@layer components"
+    assert css =~ ".btn-base"
+    assert css =~ ".btn-theme-primary"
+    assert css =~ ".btn-theme-danger"
+    assert css =~ ".panel-entry"
+    assert css =~ ".monaco-host"
+  end
+
+  test "live javascript is split into focused Phoenix asset modules" do
+    app_js = File.read!("/Users/gb/Projects/bDS2/assets/js/app.js")
+
+    assert app_js =~ ~s(import { createHooks } from "./hooks/index.js";)
+    assert app_js =~ ~s(import { syncTitlebarOverlayInsets } from "./bridges/titlebar_overlay.js";)
+    assert app_js =~ ~s(import { createMenuRuntimeCommandRunner } from "./bridges/menu_runtime.js";)
+    assert app_js =~ ~s(import { createMonacoServices } from "./monaco/services.js";)
+    assert File.exists?("/Users/gb/Projects/bDS2/assets/js/hooks/index.js")
+    assert File.exists?("/Users/gb/Projects/bDS2/assets/js/bridges/titlebar_overlay.js")
+    assert File.exists?("/Users/gb/Projects/bDS2/assets/js/bridges/menu_runtime.js")
+    assert File.exists?("/Users/gb/Projects/bDS2/assets/js/monaco/services.js")
+  end
+
+  test "top level shell render uses utility classes for common layout" do
+    template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/index.html.heex")
+
+    assert template =~ ~s(class="app flex h-full w-full flex-col")
+    assert template =~ ~s(class="app-main flex min-h-0 flex-1 overflow-hidden")
+    assert template =~ ~s(class="app-content flex min-w-0 flex-1 flex-col overflow-hidden")
+    assert template =~ ~s(class="tab-bar flex h-[35px] shrink-0 items-center overflow-hidden")
+  end
+
   test "desktop shell css keeps editor and help docs on the VS Code dark surface" do
     css = css_source()
 
@@ -261,6 +299,7 @@ defmodule BDS.UI.ShellTest do
   test "desktop shell assets keep old activity, tab, focus, and titlebar overlay parity rules" do
     css = css_source()
     live_js = File.read!("/Users/gb/Projects/bDS2/assets/js/app.js")
+    titlebar_js = File.read!("/Users/gb/Projects/bDS2/assets/js/bridges/titlebar_overlay.js")
     template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/index.html.heex")
 
     assert css =~ "color: var(--vscode-activityBar-foreground)"
@@ -276,9 +315,9 @@ defmodule BDS.UI.ShellTest do
     assert css =~ "justify-content: space-between"
     assert css =~ "align-items: center"
     assert css =~ "padding-right: calc(10px + var(--bds-titlebar-overlay-right, 0px));"
-    assert live_js =~ "windowControlsOverlay"
-    assert live_js =~ "geometrychange"
-    assert live_js =~ "--bds-titlebar-overlay-left"
+    assert titlebar_js =~ "windowControlsOverlay"
+    assert titlebar_js =~ "geometrychange"
+    assert titlebar_js =~ "--bds-titlebar-overlay-left"
     assert live_js =~ "dataset.shortcuts"
     assert live_js =~ "addEventListener(\"keydown\", this.handleShortcutKeyDown, true)"
     assert live_js =~ "event.preventDefault()"
@@ -360,15 +399,15 @@ defmodule BDS.UI.ShellTest do
     assert css =~ "opacity: 1;"
 
     assert Regex.match?(
-             ~r/class="secondary quick-actions-btn".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= dgettext\("ui", "Quick Actions"\) %><\/span>/s,
+             ~r/class="secondary quick-actions-btn inline-flex items-center gap-2".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= dgettext\("ui", "Quick Actions"\) %><\/span>/s,
              template
            )
 
-    assert template =~ ~s(class="quick-action-text")
+    assert template =~ ~s(class="quick-action-text flex min-w-0 flex-1 flex-col")
     assert template =~ ~s(class="quick-action-icon">🤖</span>)
 
     assert Regex.match?(
-             ~r/class="quick-action-text">\s*<strong><%= dgettext\("ui", "AI Suggestions"\) %><\/strong>.*?<\/span>\s*<span class="quick-action-icon">🤖<\/span>/s,
+             ~r/class="quick-action-text[^"]*">\s*<strong><%= dgettext\("ui", "AI Suggestions"\) %><\/strong>.*?<\/span>\s*<span class="quick-action-icon">🤖<\/span>/s,
              template
            )
 
@@ -480,7 +519,7 @@ defmodule BDS.UI.ShellTest do
     assert post_editor_ex =~ "defp build_data(socket)"
 
     assert Regex.match?(
-             ~r/class="secondary quick-actions-btn".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= dgettext\("ui", "Quick Actions"\) %><\/span>/s,
+             ~r/class="secondary quick-actions-btn inline-flex items-center gap-2".*?<span class="quick-actions-btn-icon">⚡<\/span>\s*<span class="quick-actions-btn-label"><%= dgettext\("ui", "Quick Actions"\) %><\/span>/s,
              post_template
            )