@ai-ecoverse/slicc-spectrum 1.4.0 → 1.6.0

package/dist/slicc-ui.js

@@ -1,3 +1,9 @@
+import {
+  SlottableRequestEvent,
+  conditionAttributeWithId,
+  isWebKit,
+  randomID
+} from "./chunk-Y4Z7K443.js";
 import {
   IS_MOBILE,
   IS_TOUCH_DEVICE,
@@ -15,16 +21,7 @@ import {
 import {
   SizedMixin,
   n as n2
-} from "./chunk-SBRFYELH.js";
-import {
-  defineElement
-} from "./chunk-6A6NIESE.js";
-import {
-  SlottableRequestEvent,
-  conditionAttributeWithId,
-  isWebKit,
-  randomID
-} from "./chunk-Y4Z7K443.js";
+} from "./chunk-4JUIYZ4Q.js";
 import "./chunk-364Y2XOJ.js";
 import {
   r
@@ -38,6 +35,9 @@ import {
   o,
   o2
 } from "./chunk-2BBOXTOJ.js";
+import {
+  defineElement
+} from "./chunk-6A6NIESE.js";
 import {
   A,
   D,
@@ -2048,7 +2048,7 @@ var MenuItem = class extends LikeAnchor(ObserveSlotText(ObserveSlotPresence(Focu
         <sp-icon-chevron100
           class="spectrum-UIIcon-ChevronRight100 chevron icon"
         ></sp-icon-chevron100>
-      ` : (this.dependencyManager.add("sp-overlay"), this.dependencyManager.add("sp-popover"), import("./chunk-FFZJVWZQ.js"), import("./chunk-7PY7B3ZW.js"), b`
+      ` : (this.dependencyManager.add("sp-overlay"), this.dependencyManager.add("sp-popover"), import("./chunk-JCRICTXR.js"), import("./chunk-7PY7B3ZW.js"), b`
       <sp-overlay
         receives-focus="false"
         .triggerElement=${this}
@@ -3113,7 +3113,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3174,7 +3174,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -3255,7 +3255,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -3488,7 +3488,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3549,7 +3549,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -3630,7 +3630,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -3915,7 +3915,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3948,7 +3948,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -4027,7 +4027,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -4305,7 +4305,7 @@ var TruncatedValueTooltipController = class {
     return this.refreshTruncationState();
   }
   async ensureTooltipDeps() {
-    this._tooltipDepsLoaded || (await Promise.all([import("./chunk-FFZJVWZQ.js"), import("./chunk-6GSDEWD5.js")]), this._tooltipDepsLoaded = true, Promise.resolve().then(() => {
+    this._tooltipDepsLoaded || (await Promise.all([import("./chunk-JCRICTXR.js"), import("./chunk-MJOCPOXZ.js")]), this._tooltipDepsLoaded = true, Promise.resolve().then(() => {
       this.host.requestUpdate(truncatedValueTooltipUpdatedSymbol, false);
     }));
   }
@@ -4995,6 +4995,49 @@ var IconContrast = class extends IconBase {
 // node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-contrast.js
 defineElement("sp-icon-contrast", IconContrast);
 
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/Edit.js
+var EditIcon = ({ width: t14 = 24, height: l10 = 24, hidden: e14 = false, title: r13 = "Edit" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${t14}"
+    height="${l10}"
+    viewBox="0 0 20 20"
+    aria-hidden=${e14 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="m17.78076,1.75684c-1.27197-1.04102-3.22705-.89844-4.4502.32324L3.07764,12.33398c-.32031.31934-.55859.7168-.68896,1.15039l-1.38428,4.58398c-.08008.26465-.00781.55176.1875.74707.14258.14258.33447.21973.53027.21973.07227,0,.14551-.01074.2168-.03223l4.58252-1.38379c.43359-.12988.83154-.36816,1.15088-.68848,0,0,10.16846-10.16797,10.35547-10.35547.64795-.64746.99316-1.54492.94775-2.45996-.0459-.91504-.48145-1.77539-1.19482-2.3584ZM2.84473,17.16309l.97998-3.24609c.02716-.09033.06714-.17578.11377-.25732l2.40869,2.40918c-.08154.04639-.16718.08643-.25781.11377l-3.24463.98047Zm14.12158-11.64746c-.15472.15552-7.09985,7.1001-9.52545,9.52588l-2.47461-2.4751L14.39111,3.14062c.38623-.38672.896-.58594,1.38965-.58594.38086,0,.75244.11914,1.05029.3623.3916.32129.62109.77246.646,1.27246.0249.49316-.16113.97656-.51074,1.32617Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/Edit.js
+var EditIcon2 = ({ width: t14 = 24, height: e14 = 24, hidden: a11 = false, title: l10 = "Edit" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${e14}"
+    viewBox="0 0 36 36"
+    width="${t14}"
+    aria-hidden=${a11 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path
+      d="M33.567 8.2 27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945ZM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconEdit.js
+var IconEdit = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? EditIcon({ hidden: !this.label, title: this.label }) : EditIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js
+defineElement("sp-icon-edit", IconEdit);
+
 // node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/Filter.js
 var FilterIcon = ({ width: l10 = 24, height: t14 = 24, hidden: e14 = false, title: r13 = "Filter" } = {}) => tag2`<svg
     xmlns="http://www.w3.org/2000/svg"
@@ -5245,6 +5288,100 @@ var IconLightbulb = class extends IconBase {
 // node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-lightbulb.js
 defineElement("sp-icon-lightbulb", IconLightbulb);
 
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/SaveFloppy.js
+var SaveFloppyIcon = ({ width: e14 = 24, height: t14 = 24, hidden: l10 = false, title: r13 = "Save Floppy" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e14}"
+    height="${t14}"
+    viewBox="0 0 20 20"
+    aria-hidden=${l10 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="M17.41406,4.10352l-1.51758-1.51758c-.37793-.37793-.87988-.58594-1.41406-.58594H4.25c-1.24072,0-2.25,1.00977-2.25,2.25v11.5c0,1.24023,1.00928,2.25,2.25,2.25h11.5c1.24072,0,2.25-1.00977,2.25-2.25V5.51758c0-.52637-.21338-1.04199-.58594-1.41406ZM7.75,3.5h4.5v3h-4.5v-3ZM13.25,16.5h-6.5v-4.5h6.5v4.5ZM16.5,15.75c0,.41309-.33643.75-.75.75h-1v-4.5c0-.82715-.67285-1.5-1.5-1.5h-6.5c-.82715,0-1.5.67285-1.5,1.5v4.5h-1c-.41357,0-.75-.33691-.75-.75V4.25c0-.41309.33643-.75.75-.75h2v3c0,.82715.67285,1.5,1.5,1.5h4.5c.82715,0,1.5-.67285,1.5-1.5v-3h.73242c.1333,0,.25879.05176.35352.14648l1.51758,1.51758c.09326.09277.14648.22168.14648.35352v10.23242Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/SaveFloppy.js
+var SaveFloppyIcon2 = ({ width: e14 = 24, height: t14 = 24, hidden: a11 = false, title: l10 = "Save Floppy" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${t14}"
+    viewBox="0 0 36 36"
+    width="${e14}"
+    aria-hidden=${a11 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path d="M20 4h4v6h-4z" />
+    <path
+      d="M31.708 8.293s-4.015-4-4.146-4.114A.969.969 0 0 0 27 4h-1v8H14V4H5a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V9a1 1 0 0 0-.292-.707ZM26 30H10V16h16Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconSaveFloppy.js
+var IconSaveFloppy = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? SaveFloppyIcon({ hidden: !this.label, title: this.label }) : SaveFloppyIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js
+defineElement("sp-icon-save-floppy", IconSaveFloppy);
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/OpenIn.js
+var OpenInIcon = ({ width: e14 = 24, height: t14 = 24, hidden: l10 = false, title: r13 = "Open In" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e14}"
+    height="${t14}"
+    viewBox="0 0 20 20"
+    aria-hidden=${l10 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="m18,15.75V4.25c0-1.24072-1.00928-2.25-2.25-2.25H4.25c-1.24072,0-2.25,1.00928-2.25,2.25v3.71777c0,.41406.33594.75.75.75s.75-.33594.75-.75v-3.71777c0-.41357.33643-.75.75-.75h11.5c.41357,0,.75.33643.75.75v11.5c0,.41357-.33643.75-.75.75h-3.81104c-.41406,0-.75.33594-.75.75s.33594.75.75.75h3.81104c1.24072,0,2.25-1.00928,2.25-2.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="m11,9.75v4.24268c0,.41406-.33594.75-.75.75s-.75-.33594-.75-.75v-2.43213l-6.46973,6.46973c-.14648.14648-.33838.21973-.53027.21973s-.38379-.07324-.53027-.21973c-.29297-.29297-.29297-.76758,0-1.06055l6.46973-6.46973h-2.43213c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h4.24268c.41406,0,.75.33594.75.75Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/OpenIn.js
+var OpenInIcon2 = ({ width: a11 = 24, height: e14 = 24, hidden: t14 = false, title: l10 = "Open In" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${a11}"
+    height="${e14}"
+    viewBox="0 0 36 36"
+    aria-hidden=${t14 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path
+      d="M33 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6h24v24H19a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"
+    />
+    <path
+      d="M18.636 27.764a.784.784 0 0 0 .56.236.803.803 0 0 0 .804-.754v-10.75a.497.497 0 0 0-.496-.496H8.754a.803.803 0 0 0-.754.804.785.785 0 0 0 .235.56l3.786 3.786-9.042 9.042a1 1 0 0 0 0 1.415l1.414 1.414a1 1 0 0 0 1.414 0l9.043-9.042Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconOpenIn.js
+var IconOpenIn = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? OpenInIcon({ hidden: !this.label, title: this.label }) : OpenInIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js
+defineElement("sp-icon-open-in", IconOpenIn);
+
 // node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/GlobeGrid.js
 var GlobeGridIcon = ({ width: e14 = 24, height: t14 = 24, hidden: r13 = false, title: l10 = "Globe Grid" } = {}) => tag2`<svg
     xmlns="http://www.w3.org/2000/svg"
@@ -5981,6 +6118,45 @@ var u8 = n7(b);
 var c9 = n7(w);
 var $2 = n7(T);
 
+// src/app/dips.ts
+var dipType = "application/x-slicc-sprinkle";
+var Dips = class extends Emitter {
+  key = "slicc-ui.dips";
+  #out = /* @__PURE__ */ new Set();
+  #storage = null;
+  load(storage) {
+    this.#storage = storage;
+    try {
+      const saved = JSON.parse(storage?.getItem(this.key) ?? "[]");
+      this.#out = new Set(Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : []);
+    } catch {
+      this.#out = /* @__PURE__ */ new Set();
+    }
+    this.emit("change", this.list());
+  }
+  list() {
+    return [...this.#out];
+  }
+  has(id) {
+    return this.#out.has(id);
+  }
+  detach(id) {
+    if (this.#out.has(id)) return;
+    this.#out.add(id);
+    this.#storage?.setItem(this.key, JSON.stringify(this.list()));
+    this.emit("change", this.list());
+  }
+};
+function dipsOf(node) {
+  let current = node;
+  while (current) {
+    const found = current.dips;
+    if (found instanceof Dips) return found;
+    current = current.parentNode ?? current.host ?? null;
+  }
+  return null;
+}
+
 // src/app/fonts.ts
 var adobeClean = [
   ["Regular", 400],
@@ -6204,13 +6380,17 @@ var SliccFileView = class extends ThemedElement {
     ...ThemedElement.properties,
     path: {},
     text: { state: true },
-    missing: { state: true }
+    missing: { state: true },
+    draft: { state: true },
+    saving: { state: true }
   };
   constructor() {
     super();
     this.path = "";
     this.text = null;
     this.missing = false;
+    this.draft = null;
+    this.saving = false;
   }
   static styles = [
     shared,
@@ -6220,8 +6400,81 @@ var SliccFileView = class extends ThemedElement {
         flex: 1;
         min-height: 0;
       }
+      textarea {
+        flex: 1;
+        min-height: 0;
+        margin: 0;
+        padding: 8px 12px;
+        border: 0;
+        resize: none;
+        outline: none;
+        background: var(--spectrum-background-layer-2-color);
+        color: var(--spectrum-neutral-content-color-default);
+        font-family: var(--spectrum-code-font-family-stack, ui-monospace, monospace);
+        font-size: 13px;
+        line-height: 20px;
+        tab-size: 2;
+      }
     `
   ];
+  edit() {
+    this.draft = this.text ?? "";
+    this.focusOn("textarea");
+  }
+  cancel() {
+    this.draft = null;
+  }
+  async save() {
+    const model = this.model;
+    if (!model || this.draft === null) return;
+    const draft = this.draft;
+    this.saving = true;
+    try {
+      await model.files.write(this.path, draft);
+      this.text = draft;
+      this.missing = false;
+      if (this.draft === draft) this.draft = null;
+    } finally {
+      this.saving = false;
+    }
+  }
+  #keydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.cancel();
+    } else if (event.key === "s" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      void this.save();
+    }
+  }
+  #actions() {
+    if (this.draft === null) {
+      return b`<sp-action-button size="s" quiet ?disabled=${this.text === null} @click=${() => this.edit()}>
+        <sp-icon-edit slot="icon"></sp-icon-edit>Edit
+      </sp-action-button>`;
+    }
+    return b`<sp-action-button size="s" quiet @click=${() => this.cancel()}>Cancel</sp-action-button>
+      <sp-action-button size="s" ?disabled=${this.saving} @click=${() => this.save()}>
+        <sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>Save
+      </sp-action-button>`;
+  }
+  #body(change) {
+    if (this.draft !== null) {
+      return b`<textarea
+        aria-label=${`Edit ${this.path}`}
+        spellcheck="false"
+        .value=${this.draft}
+        @input=${(event) => {
+        this.draft = event.target.value;
+      }}
+        @keydown=${this.#keydown}
+      ></textarea>`;
+    }
+    if (this.missing) {
+      return b`<div class="note">This file doesn’t exist${change ? " any more" : ""}.</div>`;
+    }
+    return b`<slicc-code-view path=${this.path} color=${this.color} .contents=${this.text}></slicc-code-view>`;
+  }
   subscribe(model) {
     void this.#read(model);
     return [
@@ -6251,8 +6504,9 @@ var SliccFileView = class extends ThemedElement {
               <sp-action-button size="s" quiet @click=${() => request(this, "open-diff", this.path)}>
                 <sp-icon-compare slot="icon"></sp-icon-compare>Diff
               </sp-action-button>` : A}
+        ${this.#actions()}
       </div>
-      ${this.missing ? b`<div class="note">This file doesn’t exist${change ? " any more" : ""}.</div>` : b`<slicc-code-view path=${this.path} color=${this.color} .contents=${this.text}></slicc-code-view>`}`;
+      ${this.#body(change)}`;
   }
 };
 
@@ -6354,8 +6608,8 @@ function screenClass(width) {
   if (width < 1200) return "tablet";
   return "desktop";
 }
-function surface(id) {
-  return surfaces.find((candidate) => candidate.id === id);
+function surface(id, items = surfaces) {
+  return items.find((candidate) => candidate.id === id);
 }
 function create(tag3, model, params = {}) {
   const element2 = document.createElement(tag3);
@@ -6406,11 +6660,39 @@ function openSurface(dock, item2, screen) {
     ...fresh && item2.width && screen !== "phone" ? { initialWidth: item2.width } : {}
   });
 }
+function chatId(agentId) {
+  return `chat:${agentId}`;
+}
+function chatAgent(id) {
+  return id?.startsWith("chat:") ? id.slice(5) : null;
+}
+function chats(dock) {
+  return dock.api.panels.map((panel) => panel.id).filter((id) => chatAgent(id) !== null);
+}
+function openChat(dock, agent, screen, focus = true) {
+  const id = chatId(agent.id);
+  if (!dock.has(id)) {
+    const sibling = chats(dock)[0];
+    const place = sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock, "center", screen);
+    dock.open({
+      id,
+      component: "chat",
+      title: agent.name,
+      params: { agent: agent.id },
+      inactive: !focus,
+      ...place
+    });
+  }
+  if (focus) dock.focusPanel(id);
+  else dock.reveal(id);
+  return id;
+}
 function openDocument(dock, kind, path, screen) {
   const id = `${kind}:${path}`;
   if (!dock.has(id)) {
     const sibling = dock.api.panels.find((panel) => /^(file|diff):/.test(panel.id));
-    const place = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : dock.has("chat") && screen !== "phone" ? { position: { referencePanel: "chat", direction: "right" } } : placement(dock, "center", screen);
+    const chat = chats(dock)[0];
+    const place = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : chat && screen !== "phone" ? { position: { referencePanel: chat, direction: "right" } } : placement(dock, "center", screen);
     dock.open({
       id,
       component: kind,
@@ -6422,18 +6704,23 @@ function openDocument(dock, kind, path, screen) {
   dock.focusPanel(id);
   return id;
 }
-function defaultLayout(dock, screen) {
+function defaultLayout(dock, screen, agent, items = surfaces) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
-    for (const item2 of surfaces) {
-      if (item2.side === side && item2.open.includes(screen)) openSurface(dock, item2, screen);
+    for (const item2 of items) {
+      if (item2.side !== side || !item2.open.includes(screen)) continue;
+      if (item2.id !== "chat") openSurface(dock, item2, screen);
+      else if (agent) openChat(dock, agent, screen, false);
     }
   }
-  dock.api.getPanel("chat")?.api.setActive();
+  const chat = chats(dock)[0];
+  if (chat) dock.api.getPanel(chat)?.api.setActive();
 }
-function closed(dock) {
-  return surfaces.filter((item2) => !dock.has(item2.id));
+function closed(dock, items = surfaces) {
+  return items.filter(
+    (item2) => item2.id === "chat" ? chats(dock).length === 0 : !dock.has(item2.id)
+  );
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -6445,7 +6732,17 @@ function sprinkleSurface(sprinkle) {
     open: []
   };
 }
-function openSprinkle(dock, sprinkle, screen) {
+var directions = {
+  left: "left",
+  right: "right",
+  top: "above",
+  bottom: "below",
+  center: "within"
+};
+function dropPlacement(panel, position) {
+  return panel ? { position: { referencePanel: panel, direction: directions[position] ?? "within" } } : null;
+}
+function openSprinkle(dock, sprinkle, screen, place = null) {
   const id = `sprinkle:${sprinkle.id}`;
   if (!dock.has(id)) {
     dock.open({
@@ -6453,7 +6750,7 @@ function openSprinkle(dock, sprinkle, screen) {
       component: "sprinkle",
       title: sprinkle.title,
       params: { sprinkle: sprinkle.id },
-      ...placement(dock, "right", screen)
+      ...place ?? placement(dock, "right", screen)
     });
   }
   dock.focusPanel(id);
@@ -6468,9 +6765,14 @@ function railIcon(icon) {
   return b`<slicc-lucide slot="icon" name=${icon}></slicc-lucide>`;
 }
 var SliccApp = class extends ThemedElement {
-  static properties = { ...ThemedElement.properties, screen: { reflect: true } };
+  static properties = {
+    ...ThemedElement.properties,
+    screen: { reflect: true },
+    surfaces: { attribute: false }
+  };
   storage = globalThis.localStorage ?? null;
-  layoutKey = "slicc-ui.layout";
+  layoutKey = "slicc-ui.layout.v2";
+  dips = new Dips();
   #fontBase = defaultFontBase;
   #resize = null;
   #started = null;
@@ -6478,6 +6780,7 @@ var SliccApp = class extends ThemedElement {
   constructor() {
     super();
     this.screen = screenClass(globalThis.innerWidth ?? 1280);
+    this.surfaces = surfaces;
   }
   static styles = [
     shared,
@@ -6512,6 +6815,11 @@ var SliccApp = class extends ThemedElement {
       box-sizing: border-box;
       background: var(--spectrum-background-layer-1-color);
     }
+    .rail.drop {
+      background: var(--spectrum-accent-background-color-default);
+      outline: 2px solid var(--spectrum-focus-indicator-color);
+      outline-offset: -2px;
+    }
     .rail.left {
       grid-column: 1;
       border-right: 1px solid var(--spectrum-gray-200);
@@ -6620,10 +6928,20 @@ var SliccApp = class extends ThemedElement {
     const update = () => this.requestUpdate();
     return [
       ...super.subscribe(model),
-      model.agent.on("agents", update),
-      model.agent.on("active", update),
+      model.agent.on("agents", () => {
+        this.#prune();
+        update();
+      }),
+      model.agent.on("active", () => {
+        const agent = this.#active();
+        if (this.#started && agent && this.#offers("chat")) {
+          openChat(this.dock, agent, this.screen, false);
+        }
+        update();
+      }),
       model.files.on("changes", update),
-      model.sprinkles.on("sprinkles", update)
+      model.sprinkles.on("sprinkles", update),
+      this.dips.on("change", update)
     ];
   }
   connectedCallback() {
@@ -6665,21 +6983,31 @@ var SliccApp = class extends ThemedElement {
     const dock = this.dock;
     this.#saving = false;
     dock.factories = {
-      ...Object.fromEntries(surfaces.map((item2) => [item2.id, () => create(item2.tag, model)])),
+      ...Object.fromEntries(this.surfaces.map((item2) => [item2.id, () => create(item2.tag, model)])),
       ...Object.fromEntries(
         Object.entries(documents).map(([kind, document2]) => [
           kind,
           (params) => create(document2.tag, model, params)
         ])
       ),
+      ...this.#offers("chat") ? { chat: (params) => create("slicc-chat", model, params) } : {},
       sprinkle: (params) => create("slicc-sprinkle", model, params)
     };
-    const restored = dock.restore(this.#saved());
-    if (!restored) defaultLayout(dock, this.screen);
+    dock.accepts = [dipType];
+    this.dips.load(this.storage);
+    const saved = this.#saved();
+    const restored = this.#offered(saved, dock.factories) && dock.restore(saved);
+    if (!restored) defaultLayout(dock, this.screen, this.#active(), this.surfaces);
     this.#started = this.screen;
+    this.#prune();
     this.#saving = true;
     this.#save();
   }
+  #offered(layout, factories) {
+    return Object.values(layout?.panels ?? {}).every(
+      (panel) => (panel.contentComponent ?? "") in factories
+    );
+  }
   get storageKey() {
     return `${this.layoutKey}.${this.screen}`;
   }
@@ -6694,30 +7022,79 @@ var SliccApp = class extends ThemedElement {
     if (this.#saving) this.storage?.setItem(this.storageKey, JSON.stringify(this.dock.toJSON()));
     this.requestUpdate();
   }
+  #active() {
+    const model = this.model;
+    return model?.agent.list().find((agent) => agent.id === model.agent.active()) ?? null;
+  }
+  #prune() {
+    const dock = this.renderRoot.querySelector("slicc-dock");
+    if (!dock || !this.#started) return;
+    const known = new Set(this.model?.agent.list().map((agent) => agent.id));
+    for (const id of chats(dock)) {
+      if (!known.has(chatAgent(id))) dock.close(id);
+    }
+  }
+  #activated(event) {
+    const agent = chatAgent(event.detail.id);
+    if (agent && agent !== this.model?.agent.active()) this.model?.agent.select(agent);
+  }
   resetLayout() {
-    defaultLayout(this.dock, this.screen);
+    defaultLayout(this.dock, this.screen, this.#active(), this.surfaces);
     this.#save();
   }
   show(id) {
+    const agent = this.#active();
+    if (id === "chat" && agent && this.#offers("chat")) {
+      openChat(this.dock, agent, this.screen);
+      return;
+    }
     const sprinkle = this.model?.sprinkles.list().find((candidate) => `sprinkle:${candidate.id}` === id);
     if (sprinkle) {
       openSprinkle(this.dock, sprinkle, this.screen);
       return;
     }
-    const item2 = surface(id);
+    const item2 = surface(id, this.surfaces);
     if (!item2) return;
     openSurface(this.dock, item2, this.screen);
     this.dock.focusPanel(id);
   }
+  #sprinkle(id) {
+    return this.model?.sprinkles.list().find((candidate) => candidate.id === id);
+  }
+  #detach(id, place, open) {
+    const sprinkle = this.#sprinkle(id);
+    if (!sprinkle) return;
+    this.dips.detach(id);
+    if (open) openSprinkle(this.dock, sprinkle, this.screen, place);
+  }
+  #dropped(event) {
+    const { type, data, panel, position } = event.detail;
+    if (type === dipType) this.#detach(data, dropPlacement(panel, position), true);
+  }
+  #railOver(event) {
+    if (!event.dataTransfer?.types.includes(dipType)) return;
+    event.preventDefault();
+    event.currentTarget.classList.add("drop");
+  }
+  #railLeave(event) {
+    event.currentTarget.classList.remove("drop");
+  }
+  #railDrop(event) {
+    event.currentTarget.classList.remove("drop");
+    const id = event.dataTransfer?.getData(dipType);
+    if (!id) return;
+    event.preventDefault();
+    this.#detach(id, null, false);
+  }
   #rail(items, side) {
-    return b`<nav class=${`rail ${side}`} aria-label=${`Closed panels, ${side}`}>${items.map(
+    return b`<nav class=${`rail ${side}`} aria-label=${`Closed panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${items.map(
       (item2) => u8`<sp-action-button quiet size="m" label=${`Open ${item2.title}`} title=${item2.title} data-surface=${item2.id} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</sp-action-button>`
     )}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
-    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline).map(sprinkleSurface).filter((item2) => !dock?.has(item2.id));
-    const shut = dock && this.#started ? [...sprinkles, ...closed(dock)] : [];
+    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface).filter((item2) => !dock?.has(item2.id));
+    const shut = dock && this.#started ? [...sprinkles, ...closed(dock, this.surfaces)] : [];
     const phone = this.screen === "phone";
     return {
       left: this.#rail(phone ? [] : shut.filter((item2) => item2.side !== "right"), "left"),
@@ -6738,7 +7115,7 @@ var SliccApp = class extends ThemedElement {
   #keydown = (event) => {
     if (!event.altKey || event.ctrlKey || event.metaKey) return;
     const digit = event.code.match(/^Digit([1-9])$/)?.[1] ?? event.key.match(/^[1-9]$/)?.[0];
-    const surface2 = digit ? surfaces[Number(digit) - 1] : void 0;
+    const surface2 = digit ? this.surfaces[Number(digit) - 1] : void 0;
     if (surface2) {
       event.preventDefault();
       this.show(surface2.id);
@@ -6760,21 +7137,33 @@ var SliccApp = class extends ThemedElement {
       ${surface2.title}<kbd slot="value">Alt+${index + 1}</kbd>
     </sp-menu-item>`;
   }
-  #status() {
+  #offers(id) {
+    return this.surfaces.some((item2) => item2.id === id);
+  }
+  #agentStatus() {
+    if (!this.#offers("chat")) return A;
     const model = this.model;
     const agent = model?.agent.list().find((candidate) => candidate.id === model.agent.active());
     const label = model?.settings.models().find((option2) => option2.id === agent?.model)?.label;
-    const changes = model?.files.changes().length ?? 0;
-    return b`<footer role="status" aria-label="Status">
-      ${agent ? b`<span class="item">${dot(agent.status)}${agent.name} · ${agent.status}</span>
+    return agent ? b`<span class="item">${dot(agent.status)}${agent.name} · ${agent.status}</span>
             <span>${label ?? agent.model}</span>
             <span class="item" title="Context fill"
               >Context <span class="bar"><span style=${`width: ${percent(agent.contextFill)}`}></span></span>
               ${percent(agent.contextFill)}</span
-            >` : b`<span>No agent</span>`}
-      <button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>
+            >` : b`<span>No agent</span>`;
+  }
+  #changes() {
+    if (!this.#offers("changes")) return A;
+    const changes = this.model?.files.changes().length ?? 0;
+    return b`<button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>`;
+  }
+  #status() {
+    return b`<footer role="status" aria-label="Status">
+      ${this.#agentStatus()}
+      ${this.#changes()}
+      <slot name="status"></slot>
       <span class="spacer"></span>
-      <span class="hints"><kbd>F6</kbd> next group · <kbd>Alt+1–${Math.min(9, surfaces.length)}</kbd> panels · <kbd>Alt+Shift+T</kbd> theme</span>
+      <span class="hints"><kbd>F6</kbd> next group · <kbd>Alt+1–${Math.min(9, this.surfaces.length)}</kbd> panels · <kbd>Alt+Shift+T</kbd> theme</span>
     </footer>`;
   }
   render() {
@@ -6785,23 +7174,23 @@ var SliccApp = class extends ThemedElement {
       <div class="shell">
         <header>
           <span class="brand">slicc</span>
-          <sp-picker size="s" label="Agent" value=${this.model?.agent.active() ?? ""} @change=${this.#pick}>
+          ${this.#offers("chat") ? b`<sp-picker size="s" label="Agent" value=${this.model?.agent.active() ?? ""} @change=${this.#pick}>
             ${agents.map(
       (agent) => b`<sp-menu-item value=${agent.id}>${agent.kind === "scoop" ? `\u21B3 ${agent.name}` : agent.name}</sp-menu-item>`
     )}
-          </sp-picker>
+          </sp-picker>` : A}
           <span class="spacer"></span>
-          <slicc-tray .model=${this.model}></slicc-tray>
+          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>
             <sp-icon-view-grid slot="icon"></sp-icon-view-grid>
             <span slot="label">View</span>
-            ${surfaces.map((surface2, index) => this.#menuItem(surface2, index))}
+            ${this.surfaces.map((surface2, index) => this.#menuItem(surface2, index))}
             <sp-menu-divider></sp-menu-divider>
             <sp-menu-item value="reset">Reset layout</sp-menu-item>
           </sp-action-menu>
-          <sp-action-button size="s" quiet label="Settings" title="Settings" @click=${() => this.show("settings")}>
+          ${this.#offers("settings") ? b`<sp-action-button size="s" quiet label="Settings" title="Settings" @click=${() => this.show("settings")}>
             <sp-icon-settings slot="icon"></sp-icon-settings>
-          </sp-action-button>
+          </sp-action-button>` : A}
           <sp-action-button
             size="s"
             quiet
@@ -6814,6 +7203,9 @@ var SliccApp = class extends ThemedElement {
         <main>
           ${rails.left}
           <slicc-dock empty-text="All panels are closed. Open one from a rail or View." @layout-change=${this.#save}
+            @active-panel-change=${this.#activated}
+            @external-drop=${this.#dropped}
+            @detach-sprinkle=${(event) => this.#detach(event.detail.id, null, true)}
             @open-file=${(event) => this.#request("file", event)}
             @open-diff=${(event) => this.#request("diff", event)}
             @show-surface=${(event) => this.show(event.detail.id)}
@@ -8222,6 +8614,11 @@ var messageCss = i`
 
 // src/app/chat.ts
 var SliccChat = class extends ThemedElement {
+  static properties = { ...ThemedElement.properties, agent: {} };
+  constructor() {
+    super();
+    this.agent = "";
+  }
   static styles = [
     shared,
     messageCss,
@@ -8274,8 +8671,8 @@ var SliccChat = class extends ThemedElement {
   #handlers = {
     color: "light",
     model: null,
-    answer: (questionId, answer) => this.model?.agent.answer(this.model.agent.active(), questionId, answer),
-    resolve: (messageId, state) => this.model?.agent.resolveLick(this.model.agent.active(), messageId, state),
+    answer: (questionId, answer) => this.model?.agent.answer(this.#id(), questionId, answer),
+    resolve: (messageId, state) => this.model?.agent.resolveLick(this.#id(), messageId, state),
     action: (action) => this.#action(action),
     open: (path) => this.dispatchEvent(
       new CustomEvent("open-file", { detail: { path }, bubbles: true, composed: true })
@@ -8284,13 +8681,15 @@ var SliccChat = class extends ThemedElement {
   subscribe(model) {
     return [
       ...super.subscribe(model),
-      model.agent.on("active", () => this.#refresh(true)),
+      model.agent.on("active", () => {
+        if (!this.agent) this.#refresh(true);
+      }),
       model.agent.on("agents", () => this.requestUpdate()),
       model.agent.on("messages", (agentId) => {
-        if (agentId === model.agent.active()) this.#refresh(true);
+        if (agentId === this.#id()) this.#refresh(true);
       }),
       model.agent.on("message", ({ agentId }) => {
-        if (agentId === model.agent.active()) this.#refresh(false);
+        if (agentId === this.#id()) this.#refresh(false);
       })
     ];
   }
@@ -8309,14 +8708,17 @@ var SliccChat = class extends ThemedElement {
   focus() {
     this.focusOn("slicc-composer");
   }
+  #id() {
+    return this.agent || (this.model?.agent.active() ?? "");
+  }
   #agent() {
-    const model = this.model;
-    return model?.agent.list().find((agent) => agent.id === model.agent.active());
+    const id = this.#id();
+    return this.model?.agent.list().find((agent) => agent.id === id);
   }
   #action(action) {
     const model = this.model;
     if (!model) return;
-    const id = model.agent.active();
+    const id = this.#id();
     if (action === "retry") {
       const last = model.agent.messages(id).filter((message) => message.role === "user").at(-1);
       if (last) void model.agent.send(id, { text: last.text, attachments: last.attachments });
@@ -8380,7 +8782,7 @@ var SliccChat = class extends ThemedElement {
           ${agent && messages.length > 0 ? this.#items(messages, agent) : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
         </div>
       </div>
-      ${this.model ? b`<slicc-composer .model=${this.model}></slicc-composer>` : A}
+      ${this.model ? b`<slicc-composer .model=${this.model} .agent=${this.agent}></slicc-composer>` : A}
     `;
   }
 };
@@ -8472,7 +8874,8 @@ var SliccComposer = class extends ModelElement {
     value: { state: true },
     attachments: { state: true },
     popup: { state: true },
-    dictating: { state: true }
+    dictating: { state: true },
+    agent: {}
   };
   #drafts = /* @__PURE__ */ new Map();
   #history = -1;
@@ -8486,6 +8889,7 @@ var SliccComposer = class extends ModelElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.agent = "";
   }
   static styles = [
     shared,
@@ -8684,14 +9088,22 @@ var SliccComposer = class extends ModelElement {
       }
     `
   ];
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("agent") && this.agent && this.model && this.agent !== this.#agent) {
+      this.#switch(this.agent);
+    }
+  }
   subscribe(model) {
-    this.#switch(model.agent.active());
+    this.#switch(this.agent || model.agent.active());
     void model.files.list().then((entries) => {
       this.#paths = entries.filter((entry) => entry.kind === "file").map((entry) => entry.path);
     });
     const update = () => this.requestUpdate();
     return [
-      model.agent.on("active", (id) => this.#switch(id)),
+      model.agent.on("active", (id) => {
+        if (!this.agent) this.#switch(id);
+      }),
       model.agent.on("agents", update),
       model.agent.on("messages", update),
       model.agent.on("message", update),
@@ -9943,6 +10355,7 @@ async function frameFonts(files, base) {
     (font) => Boolean(font.data)
   );
 }
+var grip = w`<svg class="grip" viewBox="0 0 8 14" width="8" height="14" aria-hidden="true">${[2, 7, 12].flatMap((y5) => [2, 6].map((x5) => w`<circle cx=${x5} cy=${y5} r="1.25"></circle>`))}</svg>`;
 var SliccSprinkle = class extends ThemedElement {
   static properties = {
     ...ThemedElement.properties,
@@ -9972,6 +10385,43 @@ var SliccSprinkle = class extends ThemedElement {
       height: 100%;
       border: 0;
     }
+    .handle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: max-content;
+      max-width: 100%;
+      box-sizing: border-box;
+      height: 28px;
+      padding: 0 4px 0 6px;
+      border: 1px solid var(--spectrum-gray-200);
+      border-bottom: 0;
+      border-radius: 6px 6px 0 0;
+      background: var(--spectrum-background-layer-1-color);
+      color: var(--spectrum-neutral-subdued-content-color-default);
+      font-size: var(--spectrum-font-size-75);
+      cursor: grab;
+      user-select: none;
+    }
+    .handle:active {
+      cursor: grabbing;
+    }
+    .handle .grip {
+      fill: currentColor;
+    }
+    .handle .name {
+      color: var(--spectrum-neutral-content-color-default);
+    }
+    .moved {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px dashed var(--spectrum-gray-300);
+      border-radius: 8px;
+      color: var(--spectrum-neutral-subdued-content-color-default);
+      font-size: var(--spectrum-font-size-75);
+    }
     .note {
       padding: 24px;
       color: var(--spectrum-neutral-subdued-content-color-default);
@@ -9997,22 +10447,50 @@ var SliccSprinkle = class extends ThemedElement {
       this.height = data.height;
     }
   };
+  #dips = new Dips();
   subscribe(model) {
+    this.#dips = dipsOf(this) ?? this.#dips;
     globalThis.addEventListener("message", this.#message);
     return [
       ...super.subscribe(model),
       () => globalThis.removeEventListener("message", this.#message),
-      model.sprinkles.on("sprinkles", () => this.requestUpdate())
+      model.sprinkles.on("sprinkles", () => this.requestUpdate()),
+      this.#dips.on("change", () => this.requestUpdate())
     ];
   }
+  #drag = (event) => {
+    const data = this.#data;
+    event.dataTransfer?.setData(dipType, this.sprinkle);
+    event.dataTransfer?.setData("text/plain", data?.title ?? this.sprinkle);
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+  };
+  #send(type, id) {
+    this.dispatchEvent(new CustomEvent(type, { detail: { id }, bubbles: true, composed: true }));
+  }
   get #data() {
     return this.model?.sprinkles.list().find((candidate) => candidate.id === this.sprinkle);
   }
   render() {
     const data = this.#data;
     if (!data) return b`<div class="note">This sprinkle is gone.</div>`;
+    if (this.inline && this.#dips.has(data.id)) {
+      return b`<div class="moved">
+        <sp-icon-open-in size="s"></sp-icon-open-in>
+        <span>${data.title} is open as a panel.</span>
+        <sp-action-button size="s" quiet @click=${() => this.#send("show-surface", `sprinkle:${data.id}`)}>Show</sp-action-button>
+      </div>`;
+    }
     const style = `color-scheme:${this.color};${this.inline ? `height:${this.height}px;` : ""}`;
-    return b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${frameDocument(data.html, this.color, data.name)}></iframe>`;
+    const frame = b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${frameDocument(data.html, this.color, data.name)}></iframe>`;
+    if (!this.inline) return frame;
+    return b`<div class="handle" draggable="true" title="Drag into the dock or a rail to open as a panel" @dragstart=${this.#drag}>
+        ${grip}
+        <span class="name">${data.title}</span>
+        <sp-action-button size="xs" quiet label=${`Open ${data.title} as a panel`} title="Open as a panel" @click=${() => this.#send("detach-sprinkle", data.id)}>
+          <sp-icon-open-in slot="icon"></sp-icon-open-in>
+        </sp-action-button>
+      </div>
+      ${frame}`;
   }
 };
 
@@ -10997,7 +11475,7 @@ var bundledLanguagesInfo = [
   {
     "id": "html",
     "name": "HTML",
-    "import": (() => import("./chunk-YPQKCWWG.js"))
+    "import": (() => import("./chunk-FXM4K5WL.js"))
   },
   {
     "id": "html-derivative",
@@ -52132,6 +52610,7 @@ var theme = {
 };
 var SliccDock = class extends HTMLElement {
   factories = {};
+  accepts = [];
   #api = null;
   #contents = /* @__PURE__ */ new Map();
   get api() {
@@ -52179,12 +52658,30 @@ var SliccDock = class extends HTMLElement {
     api.onDidActivePanelChange(
       ({ panel }) => this.#dispatch("active-panel-change", { id: panel?.id ?? null })
     );
+    api.onUnhandledDragOver((event) => {
+      if (this.#accepted(event.nativeEvent)) event.accept();
+    });
+    api.onDidDrop((event) => {
+      const type = this.#accepted(event.nativeEvent);
+      if (!type) return;
+      const transfer = event.nativeEvent.dataTransfer;
+      this.#dispatch("external-drop", {
+        type,
+        data: transfer.getData(type),
+        panel: event.group?.activePanel?.id ?? null,
+        position: event.position
+      });
+    });
     api.onDidRemovePanel((panel) => {
       this.#contents.delete(panel.id);
       this.#dispatch("panel-close", { id: panel.id });
     });
     this.#api = api;
   }
+  #accepted(native) {
+    const types = native instanceof DragEvent ? [...native.dataTransfer?.types ?? []] : [];
+    return this.accepts.find((type) => types.includes(type));
+  }
   #create(id, name) {
     const element2 = document.createElement("div");
     element2.className = "panel";
@@ -52216,6 +52713,10 @@ var SliccDock = class extends HTMLElement {
     }
     return this.api.addPanel(options);
   }
+  reveal(id) {
+    const panel = this.api.getPanel(id);
+    panel?.group.model.openPanel(panel, { skipSetGroupActive: true });
+  }
   close(id) {
     this.api.getPanel(id)?.api.close();
   }
@@ -61493,8 +61994,16 @@ var SliccFileTree = class extends HTMLElement {
     return this.#paths;
   }
   set paths(value) {
+    const expanded = this.#paths.length > 0 ? this.#expandedNow() : this.#expanded;
     this.#paths = value;
-    this.#tree?.resetPaths(value, { initialExpandedPaths: this.#expanded });
+    this.#tree?.resetPaths(value, { initialExpandedPaths: expanded });
+  }
+  #expandedNow() {
+    const tree = this.#tree;
+    return this.#paths.filter((path) => {
+      const item2 = path.endsWith("/") ? tree?.getItem(path) : null;
+      return !!item2 && "isExpanded" in item2 && item2.isExpanded();
+    }).map((path) => path.slice(0, -1));
   }
   get gitStatus() {
     return this.#status;