@ai-ecoverse/slicc-spectrum 1.5.0 → 1.7.0

package/dist/slicc-ui.js

@@ -5332,6 +5332,56 @@ var IconSaveFloppy = class extends IconBase {
 // 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"
@@ -6068,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],
@@ -6571,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,
@@ -6587,18 +6704,23 @@ function openDocument(dock, kind, path, screen) {
   dock.focusPanel(id);
   return id;
 }
-function defaultLayout(dock, screen, items = surfaces) {
+function defaultLayout(dock, screen, agent, items = surfaces) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
     for (const item2 of items) {
-      if (item2.side === side && item2.open.includes(screen)) openSurface(dock, item2, screen);
+      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, items = surfaces) {
-  return items.filter((item2) => !dock.has(item2.id));
+  return items.filter(
+    (item2) => item2.id === "chat" ? chats(dock).length === 0 : !dock.has(item2.id)
+  );
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -6610,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({
@@ -6618,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);
@@ -6639,7 +6771,8 @@ var SliccApp = class extends ThemedElement {
     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;
@@ -6682,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);
@@ -6790,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() {
@@ -6842,12 +6990,16 @@ var SliccApp = class extends ThemedElement {
           (params) => create(document2.tag, model, params)
         ])
       ),
+      ...this.#offers("chat") ? { chat: (params) => create("slicc-chat", model, params) } : {},
       sprinkle: (params) => create("slicc-sprinkle", model, params)
     };
+    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.surfaces);
+    if (!restored) defaultLayout(dock, this.screen, this.#active(), this.surfaces);
     this.#started = this.screen;
+    this.#prune();
     this.#saving = true;
     this.#save();
   }
@@ -6870,11 +7022,32 @@ 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, this.surfaces);
+    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);
@@ -6885,14 +7058,42 @@ var SliccApp = class extends ThemedElement {
     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 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 {
@@ -7002,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)}
@@ -8410,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,
@@ -8462,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 })
@@ -8472,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);
       })
     ];
   }
@@ -8497,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 });
@@ -8568,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}
     `;
   }
 };
@@ -8660,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;
@@ -8674,6 +8889,7 @@ var SliccComposer = class extends ModelElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.agent = "";
   }
   static styles = [
     shared,
@@ -8872,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),
@@ -10131,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,
@@ -10160,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);
@@ -10185,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}`;
   }
 };
 
@@ -52320,6 +52610,7 @@ var theme = {
 };
 var SliccDock = class extends HTMLElement {
   factories = {};
+  accepts = [];
   #api = null;
   #contents = /* @__PURE__ */ new Map();
   get api() {
@@ -52367,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";
@@ -52404,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();
   }