@inkandswitch/patchwork-pkg-base 0.0.15 → 0.0.17

package/packages/contact/dist/ContactAvatar-FP32ZZH2.js

@@ -0,0 +1,161 @@
+import {
+  createAvatar,
+  getInitials,
+  setAvatarFallback,
+  setAvatarImage
+} from "./chunk-MOZI4Y4O.js";
+
+// src/ui.ts
+var USER_COLOR_PALETTE = [
+  { name: "Sky Blue", value: "hsl(200, 70%, 50%)" },
+  { name: "Coral", value: "hsl(10, 75%, 58%)" },
+  { name: "Emerald", value: "hsl(145, 70%, 45%)" },
+  { name: "Violet", value: "hsl(270, 70%, 55%)" },
+  { name: "Amber", value: "hsl(38, 85%, 50%)" },
+  { name: "Rose", value: "hsl(350, 70%, 55%)" },
+  { name: "Teal", value: "hsl(178, 70%, 45%)" },
+  { name: "Indigo", value: "hsl(235, 70%, 58%)" },
+  { name: "Lime", value: "hsl(85, 70%, 45%)" },
+  { name: "Fuchsia", value: "hsl(310, 70%, 55%)" },
+  { name: "Orange", value: "hsl(25, 80%, 52%)" },
+  { name: "Cyan", value: "hsl(188, 75%, 48%)" }
+];
+function generateColorFromString(str) {
+  const hash = Math.abs(
+    str.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  );
+  const colorIndex = hash % USER_COLOR_PALETTE.length;
+  return USER_COLOR_PALETTE[colorIndex].value;
+}
+
+// src/components/ContactAvatar.ts
+import { getImportableUrlFromAutomergeUrl } from "@inkandswitch/patchwork-filesystem";
+
+// ../node_modules/.pnpm/@inkandswitch+patchwork-providers@0.2.2_@automerge+automerge-repo@2.6.0-subduction.39_supports-color@7.2.0_/node_modules/@inkandswitch/patchwork-providers/dist/index.js
+function subscribe(element, selector, listener) {
+  const view = element.closest("patchwork-view");
+  const dispatchEl = view ?? element;
+  const channel = new MessageChannel();
+  const port = channel.port2;
+  const controller = new AbortController();
+  const { signal } = controller;
+  port.addEventListener("message", (event) => {
+    if (event.data?.type === "change")
+      listener(event.data.value);
+  }, { signal });
+  port.start();
+  const detail = {
+    selector,
+    port: channel.port1
+  };
+  dispatchEl.dispatchEvent(new CustomEvent("patchwork:subscribe", {
+    detail,
+    bubbles: true,
+    composed: true
+  }));
+  return () => {
+    if (signal.aborted)
+      return;
+    controller.abort();
+    port.postMessage({ type: "unsubscribe" });
+    port.close();
+  };
+}
+
+// src/components/ContactAvatar.ts
+function renderContactAvatar(handle, element) {
+  const avatar = createAvatar("default");
+  element.appendChild(avatar);
+  let selfName = "me";
+  const cleanups = [];
+  const heartbeats = {};
+  let presenceTimer;
+  function onEphemeralMessage(message) {
+    if (message.senderId) {
+      heartbeats[message.senderId] = Date.now();
+    }
+    updatePresence();
+  }
+  function updatePresence() {
+    const docUrl = handle.url;
+    const now = Date.now();
+    const timeout = 3e4;
+    const isPresent = Object.entries(heartbeats).some(
+      ([id, ts]) => id !== selfName && now - ts < timeout
+    );
+    const contact = handle.doc();
+    const userColor = contact && "color" in contact && contact.color ? contact.color : generateColorFromString(docUrl);
+    if (isPresent) {
+      avatar.classList.add("contact-avatar--present");
+      avatar.style.setProperty("--contact-presence-color", userColor);
+    } else {
+      avatar.classList.remove("contact-avatar--present");
+      avatar.style.removeProperty("--contact-presence-color");
+    }
+  }
+  handle.on("ephemeral-message", onEphemeralMessage);
+  cleanups.push(() => handle.off("ephemeral-message", onEphemeralMessage));
+  presenceTimer = setInterval(updatePresence, 5e3);
+  cleanups.push(() => clearInterval(presenceTimer));
+  const unsubscribe = subscribe(
+    element,
+    { type: "patchwork:contact" },
+    (contactUrl) => {
+      element.repo.find(contactUrl).then((selfHandle) => {
+        const selfDoc = selfHandle.doc();
+        if (selfDoc?.type === "registered") {
+          selfName = selfDoc.name;
+        }
+      });
+    }
+  );
+  cleanups.push(unsubscribe);
+  if (window.accountDocHandle) {
+    element.repo.find(window.accountDocHandle.url).then((accountHandle) => {
+      const accountDoc = accountHandle.doc();
+      if (accountDoc?.contactUrl) {
+        element.repo.find(accountDoc.contactUrl).then((selfHandle) => {
+          const selfDoc = selfHandle.doc();
+          if (selfDoc?.type === "registered") {
+            selfName = selfDoc.name;
+          }
+        });
+      }
+    });
+  }
+  async function update() {
+    const contact = handle.doc();
+    if (!contact) {
+      avatar.style.display = "none";
+      return;
+    }
+    avatar.style.display = "";
+    const isRegistered = contact.type === "registered";
+    const name = isRegistered ? contact.name : "Anonymous";
+    let avatarImgUrl;
+    if (isRegistered && contact.avatarUrl) {
+      try {
+        const avatarHandle = await element.repo.find(contact.avatarUrl);
+        avatarImgUrl = getImportableUrlFromAutomergeUrl(avatarHandle.url);
+      } catch {
+      }
+    }
+    setAvatarImage(avatar, avatarImgUrl, name);
+    if (isRegistered && name) {
+      setAvatarFallback(avatar, { initials: getInitials(name) });
+    } else {
+      setAvatarFallback(avatar, { iconSize: 20 });
+    }
+    updatePresence();
+  }
+  handle.on("change", update);
+  cleanups.push(() => handle.off("change", update));
+  update();
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+export {
+  renderContactAvatar
+};
+//# sourceMappingURL=ContactAvatar-FP32ZZH2.js.map

package/packages/contact/dist/ContactAvatar-FP32ZZH2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ui.ts", "../src/components/ContactAvatar.ts", "../../node_modules/.pnpm/@inkandswitch+patchwork-providers@0.2.2_@automerge+automerge-repo@2.6.0-subduction.39_supports-color@7.2.0_/node_modules/@inkandswitch/patchwork-providers/dist/index.js"],
+  "sourcesContent": ["/**\n * TODO: establish a system for referencing styles that\n * are shared across multiple tools.\n * This palette is also defined in the account-picker.\n *\n * User color palette for presence indicators (cursors, avatars, etc.)\n *\n * Colors are selected to:\n * - Be easily distinguishable from each other\n * - Work well on both light and dark backgrounds\n * - Be accessible and readable\n * - Look professional and modern\n */\nexport const USER_COLOR_PALETTE = [\n  { name: \"Sky Blue\", value: \"hsl(200, 70%, 50%)\" },\n  { name: \"Coral\", value: \"hsl(10, 75%, 58%)\" },\n  { name: \"Emerald\", value: \"hsl(145, 70%, 45%)\" },\n  { name: \"Violet\", value: \"hsl(270, 70%, 55%)\" },\n  { name: \"Amber\", value: \"hsl(38, 85%, 50%)\" },\n  { name: \"Rose\", value: \"hsl(350, 70%, 55%)\" },\n  { name: \"Teal\", value: \"hsl(178, 70%, 45%)\" },\n  { name: \"Indigo\", value: \"hsl(235, 70%, 58%)\" },\n  { name: \"Lime\", value: \"hsl(85, 70%, 45%)\" },\n  { name: \"Fuchsia\", value: \"hsl(310, 70%, 55%)\" },\n  { name: \"Orange\", value: \"hsl(25, 80%, 52%)\" },\n  { name: \"Cyan\", value: \"hsl(188, 75%, 48%)\" },\n] as const;\n\n/**\n * Generate a deterministic color from a string (like userId)\n * Useful for fallback when user hasn't chosen a color\n */\nexport function generateColorFromString(str: string): string {\n  const hash = Math.abs(\n    str.split(\"\").reduce((acc, char) => acc + char.charCodeAt(0), 0)\n  );\n  const colorIndex = hash % USER_COLOR_PALETTE.length;\n  return USER_COLOR_PALETTE[colorIndex].value;\n}\n", "import type { AutomergeUrl, DocHandle } from \"@automerge/automerge-repo\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\nimport { createAvatar, setAvatarImage, setAvatarFallback, getInitials } from \"./Avatar\";\nimport { generateColorFromString } from \"../ui\";\nimport { getImportableUrlFromAutomergeUrl } from \"@inkandswitch/patchwork-filesystem\";\nimport { subscribe } from \"@inkandswitch/patchwork-providers\";\n\ndeclare global {\n  interface Window {\n    accountDocHandle?: { url: AutomergeUrl };\n  }\n}\n\ntype TinyPatchworkLayoutDoc = {\n  contactUrl: AutomergeUrl;\n};\n\nexport function renderContactAvatar(\n  handle: DocHandle<ContactDoc>,\n  element: ToolElement\n) {\n  const avatar = createAvatar(\"default\");\n  element.appendChild(avatar);\n\n  let selfName = \"me\";\n  const cleanups: (() => void)[] = [];\n\n  // Track presence via ephemeral messages\n  const heartbeats: Record<string, number> = {};\n  let presenceTimer: ReturnType<typeof setInterval>;\n\n  function onEphemeralMessage(message: { senderId: string; message: unknown }) {\n    // useRemoteAwareness tracks heartbeats from ephemeral messages\n    if (message.senderId) {\n      heartbeats[message.senderId] = Date.now();\n    }\n    updatePresence();\n  }\n\n  function updatePresence() {\n    const docUrl = handle.url;\n    const now = Date.now();\n    const timeout = 30000;\n    const isPresent = Object.entries(heartbeats).some(\n      ([id, ts]) => id !== selfName && now - ts < timeout\n    );\n\n    const contact = handle.doc();\n    const userColor =\n      contact && \"color\" in contact && contact.color\n        ? contact.color\n        : generateColorFromString(docUrl);\n\n    if (isPresent) {\n      avatar.classList.add(\"contact-avatar--present\");\n      avatar.style.setProperty(\"--contact-presence-color\", userColor);\n    } else {\n      avatar.classList.remove(\"contact-avatar--present\");\n      avatar.style.removeProperty(\"--contact-presence-color\");\n    }\n  }\n\n  handle.on(\"ephemeral-message\", onEphemeralMessage);\n  cleanups.push(() => handle.off(\"ephemeral-message\", onEphemeralMessage));\n\n  // Periodically clean up stale heartbeats\n  presenceTimer = setInterval(updatePresence, 5000);\n  cleanups.push(() => clearInterval(presenceTimer));\n\n  // Get own contact via provider subscription\n  const unsubscribe = subscribe<string>(\n    element,\n    { type: \"patchwork:contact\" },\n    (contactUrl) => {\n      element.repo\n        .find<ContactDoc>(contactUrl as AutomergeUrl)\n        .then((selfHandle) => {\n          const selfDoc = selfHandle.doc();\n          if (selfDoc?.type === \"registered\") {\n            selfName = selfDoc.name;\n          }\n        });\n    }\n  );\n  cleanups.push(unsubscribe);\n\n  // Fallback: use window.accountDocHandle\n  if (window.accountDocHandle) {\n    element.repo\n      .find<TinyPatchworkLayoutDoc>(window.accountDocHandle.url)\n      .then((accountHandle) => {\n        const accountDoc = accountHandle.doc();\n        if (accountDoc?.contactUrl) {\n          element.repo\n            .find<ContactDoc>(accountDoc.contactUrl)\n            .then((selfHandle) => {\n              const selfDoc = selfHandle.doc();\n              if (selfDoc?.type === \"registered\") {\n                selfName = selfDoc.name;\n              }\n            });\n        }\n      });\n  }\n\n  async function update() {\n    const contact = handle.doc();\n    if (!contact) {\n      avatar.style.display = \"none\";\n      return;\n    }\n    avatar.style.display = \"\";\n\n    const isRegistered = contact.type === \"registered\";\n    const name = isRegistered ? contact.name : \"Anonymous\";\n\n    // avatar image\n    let avatarImgUrl: string | undefined;\n    if (isRegistered && contact.avatarUrl) {\n      try {\n        const avatarHandle = await element.repo.find(contact.avatarUrl);\n        avatarImgUrl = getImportableUrlFromAutomergeUrl(avatarHandle.url);\n      } catch {\n        // ignore failed avatar lookup\n      }\n    }\n    setAvatarImage(avatar, avatarImgUrl, name);\n\n    // fallback\n    if (isRegistered && name) {\n      setAvatarFallback(avatar, { initials: getInitials(name) });\n    } else {\n      setAvatarFallback(avatar, { iconSize: 20 });\n    }\n\n    updatePresence();\n  }\n\n  handle.on(\"change\", update);\n  cleanups.push(() => handle.off(\"change\", update));\n  update();\n\n  return () => {\n    for (const cleanup of cleanups) cleanup();\n  };\n}\n", "/**\n * Open a streaming subscription. Dispatches a `patchwork:subscribe` for the\n * given `selector` carrying a fresh `MessageChannel` port; the answering\n * provider pushes values back over that channel for as long as the\n * subscription is live. `listener` is invoked once per emission (the first\n * delivery is always async because `MessagePort.postMessage` queues a task).\n *\n * The event is dispatched from the nearest enclosing `<patchwork-view>` so\n * callers can pass any node inside a provider subtree. An unclaimed\n * subscription is never settled: if no provider answers, `listener` simply\n * never fires.\n *\n * Returns an unsubscribe function. Calling it tells the provider to tear down\n * (via an `unsubscribe` message) and closes the consumer's port; any values\n * the provider emits after that are dropped.\n */\nexport function subscribe(element, selector, listener) {\n    const view = element.closest(\"patchwork-view\");\n    const dispatchEl = view ?? element;\n    const channel = new MessageChannel();\n    const port = channel.port2;\n    const controller = new AbortController();\n    const { signal } = controller;\n    port.addEventListener(\"message\", (event) => {\n        if (event.data?.type === \"change\")\n            listener(event.data.value);\n    }, { signal });\n    // addEventListener (unlike assigning onmessage) does not implicitly start\n    // the port, so message delivery has to be kicked off explicitly.\n    port.start();\n    const detail = {\n        selector,\n        port: channel.port1,\n    };\n    dispatchEl.dispatchEvent(new CustomEvent(\"patchwork:subscribe\", {\n        detail,\n        bubbles: true,\n        composed: true,\n    }));\n    return () => {\n        if (signal.aborted)\n            return;\n        controller.abort();\n        port.postMessage({ type: \"unsubscribe\" });\n        port.close();\n    };\n}\n/**\n * Answer a `patchwork:subscribe`. The `producer` receives a `respond`\n * callback it can call any number of times to push values to the consumer,\n * and may return a teardown that runs when the consumer unsubscribes. Stops\n * propagation so ancestor providers don't double-answer. Values emitted after\n * the consumer unsubscribes are dropped.\n */\nexport function accept(event, producer) {\n    event.stopPropagation();\n    const port = event.detail.port;\n    let alive = true;\n    const respond = (value) => {\n        if (!alive)\n            return;\n        port.postMessage({ type: \"change\", value });\n    };\n    let teardown;\n    try {\n        teardown = producer(respond);\n    }\n    catch (err) {\n        console.error(\"[patchwork-providers] subscribe producer threw:\", err);\n    }\n    const stop = () => {\n        if (!alive)\n            return;\n        alive = false;\n        try {\n            teardown?.();\n        }\n        catch (err) {\n            console.error(\"[patchwork-providers] subscribe teardown threw:\", err);\n        }\n        port.close();\n    };\n    port.onmessage = (event) => {\n        if (event.data?.type === \"unsubscribe\")\n            stop();\n    };\n}\n/**\n * One-shot convenience wrapper over {@link subscribe}: opens a subscription\n * for `selector`, resolves with the first value a provider emits, then\n * immediately unsubscribes. Because there is no fallback provider, an\n * unclaimed selector never resolves \u2014 use `subscribe` directly if you need to\n * handle the \"no provider\" case.\n */\nexport function request(element, selector) {\n    return new Promise((resolve) => {\n        const unsubscribe = subscribe(element, selector, (value) => {\n            // The first emission is always async (postMessage queues a task), so\n            // `unsubscribe` is assigned by the time this fires.\n            unsubscribe();\n            resolve(value);\n        });\n    });\n}\nexport { registerRepoProviderElement, } from \"./repo-provider.js\";\n"],
+  "mappings": "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",
+  "names": []
+}

package/packages/contact/dist/ContactViewer-ZHEE6INW.js

@@ -0,0 +1,60 @@
+import {
+  createAvatar,
+  getInitials,
+  setAvatarFallback,
+  setAvatarImage
+} from "./chunk-MOZI4Y4O.js";
+
+// src/components/ContactViewer.ts
+import { automergeUrlToServiceWorkerUrl } from "@inkandswitch/patchwork-filesystem";
+function renderContactViewer(handle, element) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "contact-viewer";
+  const avatar = createAvatar("lg");
+  const nameEl = document.createElement("h2");
+  nameEl.className = "contact-viewer-name";
+  const labelEl = document.createElement("p");
+  labelEl.className = "contact-viewer-label";
+  labelEl.textContent = "Unregistered user";
+  wrapper.append(avatar, nameEl);
+  element.appendChild(wrapper);
+  async function update() {
+    const contact = handle.doc();
+    if (!contact) {
+      wrapper.style.display = "none";
+      return;
+    }
+    wrapper.style.display = "";
+    const isRegistered = contact.type === "registered";
+    const name = isRegistered ? contact.name : "Anonymous";
+    nameEl.textContent = name;
+    let avatarImgUrl;
+    if (isRegistered && contact.avatarUrl) {
+      try {
+        const avatarHandle = await element.repo.find(contact.avatarUrl);
+        avatarImgUrl = automergeUrlToServiceWorkerUrl(avatarHandle.url);
+      } catch {
+      }
+    }
+    setAvatarImage(avatar, avatarImgUrl, name);
+    if (isRegistered && name) {
+      setAvatarFallback(avatar, { initials: getInitials(name) });
+    } else {
+      setAvatarFallback(avatar, { iconSize: 32 });
+    }
+    if (!isRegistered) {
+      if (!wrapper.contains(labelEl)) wrapper.appendChild(labelEl);
+    } else {
+      labelEl.remove();
+    }
+  }
+  handle.on("change", update);
+  update();
+  return () => {
+    handle.off("change", update);
+  };
+}
+export {
+  renderContactViewer
+};
+//# sourceMappingURL=ContactViewer-ZHEE6INW.js.map

package/packages/contact/dist/ContactViewer-ZHEE6INW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/ContactViewer.ts"],
+  "sourcesContent": ["import type { DocHandle } from \"@automerge/automerge-repo\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\nimport { createAvatar, setAvatarImage, setAvatarFallback, getInitials } from \"./Avatar\";\nimport { automergeUrlToServiceWorkerUrl } from \"@inkandswitch/patchwork-filesystem\";\n\nexport function renderContactViewer(\n  handle: DocHandle<ContactDoc>,\n  element: ToolElement\n) {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"contact-viewer\";\n\n  const avatar = createAvatar(\"lg\");\n  const nameEl = document.createElement(\"h2\");\n  nameEl.className = \"contact-viewer-name\";\n  const labelEl = document.createElement(\"p\");\n  labelEl.className = \"contact-viewer-label\";\n  labelEl.textContent = \"Unregistered user\";\n\n  wrapper.append(avatar, nameEl);\n  element.appendChild(wrapper);\n\n  async function update() {\n    const contact = handle.doc();\n    if (!contact) {\n      wrapper.style.display = \"none\";\n      return;\n    }\n    wrapper.style.display = \"\";\n\n    const isRegistered = contact.type === \"registered\";\n    const name = isRegistered ? contact.name : \"Anonymous\";\n\n    nameEl.textContent = name;\n\n    // avatar image\n    let avatarImgUrl: string | undefined;\n    if (isRegistered && contact.avatarUrl) {\n      try {\n        const avatarHandle = await element.repo.find(contact.avatarUrl);\n        avatarImgUrl = automergeUrlToServiceWorkerUrl(avatarHandle.url);\n      } catch {\n        // ignore failed avatar lookup\n      }\n    }\n    setAvatarImage(avatar, avatarImgUrl, name);\n\n    // fallback\n    if (isRegistered && name) {\n      setAvatarFallback(avatar, { initials: getInitials(name) });\n    } else {\n      setAvatarFallback(avatar, { iconSize: 32 });\n    }\n\n    // label\n    if (!isRegistered) {\n      if (!wrapper.contains(labelEl)) wrapper.appendChild(labelEl);\n    } else {\n      labelEl.remove();\n    }\n  }\n\n  handle.on(\"change\", update);\n  update();\n\n  return () => {\n    handle.off(\"change\", update);\n  };\n}\n"],
+  "mappings": ";;;;;;;;AAIA,SAAS,sCAAsC;AAExC,SAAS,oBACd,QACA,SACA;AACA,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAQ,YAAY;AAEpB,QAAM,SAAS,aAAa,IAAI;AAChC,QAAM,SAAS,SAAS,cAAc,IAAI;AAC1C,SAAO,YAAY;AACnB,QAAM,UAAU,SAAS,cAAc,GAAG;AAC1C,UAAQ,YAAY;AACpB,UAAQ,cAAc;AAEtB,UAAQ,OAAO,QAAQ,MAAM;AAC7B,UAAQ,YAAY,OAAO;AAE3B,iBAAe,SAAS;AACtB,UAAM,UAAU,OAAO,IAAI;AAC3B,QAAI,CAAC,SAAS;AACZ,cAAQ,MAAM,UAAU;AACxB;AAAA,IACF;AACA,YAAQ,MAAM,UAAU;AAExB,UAAM,eAAe,QAAQ,SAAS;AACtC,UAAM,OAAO,eAAe,QAAQ,OAAO;AAE3C,WAAO,cAAc;AAGrB,QAAI;AACJ,QAAI,gBAAgB,QAAQ,WAAW;AACrC,UAAI;AACF,cAAM,eAAe,MAAM,QAAQ,KAAK,KAAK,QAAQ,SAAS;AAC9D,uBAAe,+BAA+B,aAAa,GAAG;AAAA,MAChE,QAAQ;AAAA,MAER;AAAA,IACF;AACA,mBAAe,QAAQ,cAAc,IAAI;AAGzC,QAAI,gBAAgB,MAAM;AACxB,wBAAkB,QAAQ,EAAE,UAAU,YAAY,IAAI,EAAE,CAAC;AAAA,IAC3D,OAAO;AACL,wBAAkB,QAAQ,EAAE,UAAU,GAAG,CAAC;AAAA,IAC5C;AAGA,QAAI,CAAC,cAAc;AACjB,UAAI,CAAC,QAAQ,SAAS,OAAO,EAAG,SAAQ,YAAY,OAAO;AAAA,IAC7D,OAAO;AACL,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,GAAG,UAAU,MAAM;AAC1B,SAAO;AAEP,SAAO,MAAM;AACX,WAAO,IAAI,UAAU,MAAM;AAAA,EAC7B;AACF;",
+  "names": []
+}

package/packages/contact/dist/InlineContactAvatar-VZDPEZV2.js

@@ -0,0 +1,46 @@
+import {
+  createAvatar,
+  getInitials,
+  setAvatarFallback,
+  setAvatarImage
+} from "./chunk-MOZI4Y4O.js";
+
+// src/components/InlineContactAvatar.ts
+import { automergeUrlToServiceWorkerUrl } from "@inkandswitch/patchwork-filesystem";
+function renderInlineContactAvatar(handle, element) {
+  const avatar = createAvatar("sm");
+  element.appendChild(avatar);
+  async function update() {
+    const contact = handle.doc();
+    if (!contact) {
+      avatar.style.display = "none";
+      return;
+    }
+    avatar.style.display = "";
+    const isRegistered = contact.type === "registered";
+    const name = isRegistered ? contact.name : "Anonymous";
+    let avatarImgUrl;
+    if (isRegistered && contact.avatarUrl) {
+      try {
+        const avatarHandle = await element.repo.find(contact.avatarUrl);
+        avatarImgUrl = automergeUrlToServiceWorkerUrl(avatarHandle.url);
+      } catch {
+      }
+    }
+    setAvatarImage(avatar, avatarImgUrl, name);
+    if (isRegistered && name) {
+      setAvatarFallback(avatar, { initials: getInitials(name) });
+    } else {
+      setAvatarFallback(avatar, { iconSize: 16 });
+    }
+  }
+  handle.on("change", update);
+  update();
+  return () => {
+    handle.off("change", update);
+  };
+}
+export {
+  renderInlineContactAvatar
+};
+//# sourceMappingURL=InlineContactAvatar-VZDPEZV2.js.map

package/packages/contact/dist/InlineContactAvatar-VZDPEZV2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/InlineContactAvatar.ts"],
+  "sourcesContent": ["import type { DocHandle } from \"@automerge/automerge-repo\";\nimport type { ToolElement } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"../types\";\nimport { createAvatar, setAvatarImage, setAvatarFallback, getInitials } from \"./Avatar\";\nimport { automergeUrlToServiceWorkerUrl } from \"@inkandswitch/patchwork-filesystem\";\n\nexport function renderInlineContactAvatar(\n  handle: DocHandle<ContactDoc>,\n  element: ToolElement\n) {\n  const avatar = createAvatar(\"sm\");\n  element.appendChild(avatar);\n\n  async function update() {\n    const contact = handle.doc();\n    if (!contact) {\n      avatar.style.display = \"none\";\n      return;\n    }\n    avatar.style.display = \"\";\n\n    const isRegistered = contact.type === \"registered\";\n    const name = isRegistered ? contact.name : \"Anonymous\";\n\n    // avatar image\n    let avatarImgUrl: string | undefined;\n    if (isRegistered && contact.avatarUrl) {\n      try {\n        const avatarHandle = await element.repo.find(contact.avatarUrl);\n        avatarImgUrl = automergeUrlToServiceWorkerUrl(avatarHandle.url);\n      } catch {\n        // ignore failed avatar lookup\n      }\n    }\n    setAvatarImage(avatar, avatarImgUrl, name);\n\n    // fallback\n    if (isRegistered && name) {\n      setAvatarFallback(avatar, { initials: getInitials(name) });\n    } else {\n      setAvatarFallback(avatar, { iconSize: 16 });\n    }\n  }\n\n  handle.on(\"change\", update);\n  update();\n\n  return () => {\n    handle.off(\"change\", update);\n  };\n}\n"],
+  "mappings": ";;;;;;;;AAIA,SAAS,sCAAsC;AAExC,SAAS,0BACd,QACA,SACA;AACA,QAAM,SAAS,aAAa,IAAI;AAChC,UAAQ,YAAY,MAAM;AAE1B,iBAAe,SAAS;AACtB,UAAM,UAAU,OAAO,IAAI;AAC3B,QAAI,CAAC,SAAS;AACZ,aAAO,MAAM,UAAU;AACvB;AAAA,IACF;AACA,WAAO,MAAM,UAAU;AAEvB,UAAM,eAAe,QAAQ,SAAS;AACtC,UAAM,OAAO,eAAe,QAAQ,OAAO;AAG3C,QAAI;AACJ,QAAI,gBAAgB,QAAQ,WAAW;AACrC,UAAI;AACF,cAAM,eAAe,MAAM,QAAQ,KAAK,KAAK,QAAQ,SAAS;AAC9D,uBAAe,+BAA+B,aAAa,GAAG;AAAA,MAChE,QAAQ;AAAA,MAER;AAAA,IACF;AACA,mBAAe,QAAQ,cAAc,IAAI;AAGzC,QAAI,gBAAgB,MAAM;AACxB,wBAAkB,QAAQ,EAAE,UAAU,YAAY,IAAI,EAAE,CAAC;AAAA,IAC3D,OAAO;AACL,wBAAkB,QAAQ,EAAE,UAAU,GAAG,CAAC;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,GAAG,UAAU,MAAM;AAC1B,SAAO;AAEP,SAAO,MAAM;AACX,WAAO,IAAI,UAAU,MAAM;AAAA,EAC7B;AACF;",
+  "names": []
+}

package/packages/contact/dist/chunk-MOZI4Y4O.js

@@ -0,0 +1,54 @@
+// src/components/Avatar.ts
+var sizeClass = {
+  default: "",
+  sm: "contact-avatar--sm",
+  lg: "contact-avatar--lg"
+};
+var USER_ICON_SVGS = {
+  16: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  20: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  32: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`
+};
+function createAvatar(size = "default") {
+  const root = document.createElement("span");
+  root.className = ["contact-avatar", sizeClass[size]].filter(Boolean).join(" ");
+  return root;
+}
+function setAvatarImage(root, src, alt) {
+  let img = root.querySelector(".contact-avatar-image");
+  if (src) {
+    if (!img) {
+      img = document.createElement("img");
+      img.className = "contact-avatar-image";
+      root.prepend(img);
+    }
+    img.src = src;
+    img.alt = alt;
+  } else if (img) {
+    img.remove();
+  }
+}
+function setAvatarFallback(root, content) {
+  let fallback = root.querySelector(".contact-avatar-fallback");
+  if (!fallback) {
+    fallback = document.createElement("span");
+    fallback.className = "contact-avatar-fallback";
+    root.appendChild(fallback);
+  }
+  if ("initials" in content) {
+    fallback.textContent = content.initials;
+  } else {
+    fallback.innerHTML = USER_ICON_SVGS[content.iconSize] ?? USER_ICON_SVGS[20];
+  }
+}
+function getInitials(name) {
+  return name.split(" ").map((word) => word[0]).join("");
+}
+
+export {
+  createAvatar,
+  setAvatarImage,
+  setAvatarFallback,
+  getInitials
+};
+//# sourceMappingURL=chunk-MOZI4Y4O.js.map

package/packages/contact/dist/chunk-MOZI4Y4O.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Avatar.ts"],
+  "sourcesContent": ["export type AvatarSize = \"default\" | \"sm\" | \"lg\";\n\nconst sizeClass: Record<AvatarSize, string> = {\n  default: \"\",\n  sm: \"contact-avatar--sm\",\n  lg: \"contact-avatar--lg\",\n};\n\nconst USER_ICON_SVGS: Record<number, string> = {\n  16: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg>`,\n  20: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg>`,\n  32: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg>`,\n};\n\nexport function createAvatar(size: AvatarSize = \"default\"): HTMLElement {\n  const root = document.createElement(\"span\");\n  root.className = [\"contact-avatar\", sizeClass[size]]\n    .filter(Boolean)\n    .join(\" \");\n  return root;\n}\n\nexport function setAvatarImage(\n  root: HTMLElement,\n  src: string | undefined,\n  alt: string\n) {\n  let img = root.querySelector<HTMLImageElement>(\".contact-avatar-image\");\n  if (src) {\n    if (!img) {\n      img = document.createElement(\"img\");\n      img.className = \"contact-avatar-image\";\n      root.prepend(img);\n    }\n    img.src = src;\n    img.alt = alt;\n  } else if (img) {\n    img.remove();\n  }\n}\n\nexport function setAvatarFallback(\n  root: HTMLElement,\n  content: { initials: string } | { iconSize: number }\n) {\n  let fallback = root.querySelector<HTMLElement>(\".contact-avatar-fallback\");\n  if (!fallback) {\n    fallback = document.createElement(\"span\");\n    fallback.className = \"contact-avatar-fallback\";\n    root.appendChild(fallback);\n  }\n  if (\"initials\" in content) {\n    fallback.textContent = content.initials;\n  } else {\n    fallback.innerHTML = USER_ICON_SVGS[content.iconSize] ?? USER_ICON_SVGS[20];\n  }\n}\n\nexport function getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((word) => word[0])\n    .join(\"\");\n}\n"],
+  "mappings": ";AAEA,IAAM,YAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,aAAa,OAAmB,WAAwB;AACtE,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,YAAY,CAAC,kBAAkB,UAAU,IAAI,CAAC,EAChD,OAAO,OAAO,EACd,KAAK,GAAG;AACX,SAAO;AACT;AAEO,SAAS,eACd,MACA,KACA,KACA;AACA,MAAI,MAAM,KAAK,cAAgC,uBAAuB;AACtE,MAAI,KAAK;AACP,QAAI,CAAC,KAAK;AACR,YAAM,SAAS,cAAc,KAAK;AAClC,UAAI,YAAY;AAChB,WAAK,QAAQ,GAAG;AAAA,IAClB;AACA,QAAI,MAAM;AACV,QAAI,MAAM;AAAA,EACZ,WAAW,KAAK;AACd,QAAI,OAAO;AAAA,EACb;AACF;AAEO,SAAS,kBACd,MACA,SACA;AACA,MAAI,WAAW,KAAK,cAA2B,0BAA0B;AACzE,MAAI,CAAC,UAAU;AACb,eAAW,SAAS,cAAc,MAAM;AACxC,aAAS,YAAY;AACrB,SAAK,YAAY,QAAQ;AAAA,EAC3B;AACA,MAAI,cAAc,SAAS;AACzB,aAAS,cAAc,QAAQ;AAAA,EACjC,OAAO;AACL,aAAS,YAAY,eAAe,QAAQ,QAAQ,KAAK,eAAe,EAAE;AAAA,EAC5E;AACF;AAEO,SAAS,YAAY,MAAsB;AAChD,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE;AACZ;",
+  "names": []
+}

package/packages/contact/dist/datatype-ABVDVPWS.js

@@ -0,0 +1,27 @@
+// src/datatype.ts
+var init = (doc) => {
+  Object.assign(doc, {
+    type: "anonymous"
+  });
+};
+var getTitle = (doc) => {
+  if (doc.type === "registered") {
+    return doc.name;
+  }
+  return "Anonymous";
+};
+var setTitle = (doc, title) => {
+  if (doc.type === "registered") {
+    doc.name = title;
+  }
+};
+var ContactDatatype = {
+  init,
+  getTitle,
+  setTitle
+};
+export {
+  ContactDatatype,
+  init
+};
+//# sourceMappingURL=datatype-ABVDVPWS.js.map

package/packages/contact/dist/datatype-ABVDVPWS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/datatype.ts"],
+  "sourcesContent": ["import { type DatatypeImplementation } from \"@inkandswitch/patchwork-plugins\";\nimport type { ContactDoc } from \"./types\";\n\nexport const init = (doc: ContactDoc) => {\n  Object.assign(doc, {\n    type: \"anonymous\",\n  } as ContactDoc);\n};\n\nconst getTitle = (doc: ContactDoc) => {\n  if (doc.type === \"registered\") {\n    return doc.name;\n  }\n  return \"Anonymous\";\n};\n\nconst setTitle = (doc: ContactDoc, title: string) => {\n  if (doc.type === \"registered\") {\n    doc.name = title;\n  }\n};\n\nexport const ContactDatatype: DatatypeImplementation<ContactDoc> = {\n  init,\n  getTitle,\n  setTitle,\n};\n"],
+  "mappings": ";AAGO,IAAM,OAAO,CAAC,QAAoB;AACvC,SAAO,OAAO,KAAK;AAAA,IACjB,MAAM;AAAA,EACR,CAAe;AACjB;AAEA,IAAM,WAAW,CAAC,QAAoB;AACpC,MAAI,IAAI,SAAS,cAAc;AAC7B,WAAO,IAAI;AAAA,EACb;AACA,SAAO;AACT;AAEA,IAAM,WAAW,CAAC,KAAiB,UAAkB;AACnD,MAAI,IAAI,SAAS,cAAc;AAC7B,QAAI,OAAO;AAAA,EACb;AACF;AAEO,IAAM,kBAAsD;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/packages/contact/dist/tool.css

@@ -0,0 +1,81 @@
+/* src/styles.css */
+@layer package {
+  :root,
+  :host,
+  [theme] {
+    --contact-fg: var(--editor-line, black);
+    --contact-muted-fg: var(--editor-line-offset-50, #999);
+    --contact-border: var(--editor-fill-offset-10, #e5e5e5);
+    --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);
+    --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);
+  }
+}
+.contact-avatar {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+  border: 1px solid var(--contact-border);
+  min-width: 2rem;
+  min-height: 2rem;
+  max-width: 2rem;
+  max-height: 2rem;
+  height: 100%;
+  width: 100%;
+}
+.contact-avatar--sm {
+  min-width: initial;
+  min-height: initial;
+  max-width: initial;
+  max-height: initial;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.contact-avatar--lg {
+  min-width: initial;
+  min-height: initial;
+  max-width: initial;
+  max-height: initial;
+  width: 64px;
+  height: 64px;
+}
+.contact-avatar--present {
+  box-shadow: 0 0 0 2px var(--contact-presence-color);
+}
+.contact-avatar-image {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.contact-avatar-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--contact-fallback-bg);
+  color: var(--contact-fallback-fg);
+}
+.contact-viewer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--contact-fg);
+}
+.contact-viewer-name {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.contact-viewer-label {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--contact-muted-fg);
+}
+/*# sourceMappingURL=tool.css.map */

package/packages/contact/dist/tool.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/styles.css"],
+  "sourcesContent": ["@layer package {\n:root,\n:host,\n[theme] {\n  --contact-fg: var(--editor-line, black);\n  --contact-muted-fg: var(--editor-line-offset-50, #999);\n  --contact-border: var(--editor-fill-offset-10, #e5e5e5);\n  --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);\n  --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);\n}\n}\n\n/* Avatar */\n\n.contact-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n  border: 1px solid var(--contact-border);\n  min-width: 2rem;\n  min-height: 2rem;\n  max-width: 2rem;\n  max-height: 2rem;\n  height: 100%;\n  width: 100%;\n}\n\n.contact-avatar--sm {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.contact-avatar--lg {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 64px;\n  height: 64px;\n}\n\n.contact-avatar--present {\n  box-shadow: 0 0 0 2px var(--contact-presence-color);\n}\n\n.contact-avatar-image {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.contact-avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--contact-fallback-bg);\n  color: var(--contact-fallback-fg);\n}\n\n/* Contact Viewer */\n\n.contact-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--contact-fg);\n}\n\n.contact-viewer-name {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.contact-viewer-label {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--contact-muted-fg);\n}\n"],
+  "mappings": ";AAAA;AACA;AAAA,EACA;AAAA,EACA,CAAC;AACC,kBAAc,IAAI,aAAa,EAAE;AACjC,wBAAoB,IAAI,uBAAuB,EAAE;AACjD,sBAAkB,IAAI,uBAAuB,EAAE;AAC/C,2BAAuB,IAAI,uBAAuB,EAAE;AACpD,2BAAuB,IAAI,uBAAuB,EAAE;AACtD;AACA;AAIA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,UAAQ;AACR,SAAO;AACT;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,cAAY;AACZ,aAAW;AACX,cAAY;AACZ,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,SAAO;AACP,UAAQ;AACR,cAAY;AACd;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,OAAK;AACL,SAAO,IAAI;AACb;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,aAAW;AACX,SAAO,IAAI;AACb;",
+  "names": []
+}

package/packages/contact/dist/tool.js

@@ -0,0 +1,70 @@
+// src/tool.ts
+function addStyles(element, textContent) {
+  const id = "contact-styles";
+  const el = element.querySelector(`#${id}`) ?? document.createElement("style");
+  Object.assign(el, { textContent, id });
+  element.append(el);
+}
+async function loadStyles() {
+  const url = new URL("./tool.css", import.meta.url);
+  return (await fetch(url)).text();
+}
+var plugins = [
+  {
+    type: "patchwork:datatype",
+    id: "contact",
+    name: "Contact",
+    icon: "User",
+    unlisted: true,
+    async load() {
+      const { ContactDatatype } = await import("./datatype-ABVDVPWS.js");
+      return ContactDatatype;
+    }
+  },
+  {
+    type: "patchwork:tool",
+    id: "contact",
+    name: "Contact Viewer",
+    supportedDatatypes: ["contact"],
+    async load() {
+      const { renderContactViewer } = await import("./ContactViewer-ZHEE6INW.js");
+      const css = await loadStyles();
+      return (handle, element) => {
+        addStyles(document.head, css);
+        return renderContactViewer(handle, element);
+      };
+    }
+  },
+  {
+    type: "patchwork:tool",
+    id: "contact-avatar",
+    name: "Contact Avatar",
+    supportedDatatypes: ["contact"],
+    async load() {
+      const { renderContactAvatar } = await import("./ContactAvatar-FP32ZZH2.js");
+      const css = await loadStyles();
+      return (handle, element) => {
+        addStyles(document.head, css);
+        return renderContactAvatar(handle, element);
+      };
+    }
+  },
+  {
+    type: "patchwork:tool",
+    id: "contact-inline",
+    name: "Inline Contact Avatar",
+    supportedDatatypes: ["contact"],
+    async load() {
+      const { renderInlineContactAvatar } = await import("./InlineContactAvatar-VZDPEZV2.js");
+      const css = await loadStyles();
+      return (handle, element) => {
+        addStyles(document.head, css);
+        return renderInlineContactAvatar(handle, element);
+      };
+    }
+  }
+];
+export {
+  plugins
+};
+//# sourceMappingURL=tool.js.map

package/packages/contact/dist/tool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/tool.ts"],
+  "sourcesContent": ["import type { ToolImplementation } from \"@inkandswitch/patchwork-plugins\";\nimport \"./styles.css\";\n\nfunction addStyles(element: HTMLElement, textContent: string) {\n  const id = \"contact-styles\";\n  const el = element.querySelector(`#${id}`) ?? document.createElement(\"style\");\n  Object.assign(el, { textContent, id });\n  element.append(el);\n}\n\nasync function loadStyles() {\n  const url = new URL(\"./tool.css\", import.meta.url);\n  return (await fetch(url)).text();\n}\n\nexport const plugins = [\n  {\n    type: \"patchwork:datatype\",\n    id: \"contact\",\n    name: \"Contact\",\n    icon: \"User\",\n    unlisted: true,\n    async load() {\n      const { ContactDatatype } = await import(\"./datatype\");\n      return ContactDatatype;\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact\",\n    name: \"Contact Viewer\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactViewer } =\n        await import(\"./components/ContactViewer\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactViewer(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-avatar\",\n    name: \"Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderContactAvatar } =\n        await import(\"./components/ContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderContactAvatar(handle, element);\n      };\n    },\n  },\n  {\n    type: \"patchwork:tool\",\n    id: \"contact-inline\",\n    name: \"Inline Contact Avatar\",\n    supportedDatatypes: [\"contact\"],\n    async load(): Promise<ToolImplementation> {\n      const { renderInlineContactAvatar } =\n        await import(\"./components/InlineContactAvatar\");\n      const css = await loadStyles();\n      return (handle, element) => {\n        addStyles(document.head, css);\n        return renderInlineContactAvatar(handle, element);\n      };\n    },\n  },\n];\n"],
+  "mappings": ";AAGA,SAAS,UAAU,SAAsB,aAAqB;AAC5D,QAAM,KAAK;AACX,QAAM,KAAK,QAAQ,cAAc,IAAI,EAAE,EAAE,KAAK,SAAS,cAAc,OAAO;AAC5E,SAAO,OAAO,IAAI,EAAE,aAAa,GAAG,CAAC;AACrC,UAAQ,OAAO,EAAE;AACnB;AAEA,eAAe,aAAa;AAC1B,QAAM,MAAM,IAAI,IAAI,cAAc,YAAY,GAAG;AACjD,UAAQ,MAAM,MAAM,GAAG,GAAG,KAAK;AACjC;AAEO,IAAM,UAAU;AAAA,EACrB;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM,OAAO;AACX,YAAM,EAAE,gBAAgB,IAAI,MAAM,OAAO,wBAAY;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,oBAAoB,IAC1B,MAAM,OAAO,6BAA4B;AAC3C,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,oBAAoB,QAAQ,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,oBAAoB,CAAC,SAAS;AAAA,IAC9B,MAAM,OAAoC;AACxC,YAAM,EAAE,0BAA0B,IAChC,MAAM,OAAO,mCAAkC;AACjD,YAAM,MAAM,MAAM,WAAW;AAC7B,aAAO,CAAC,QAAQ,YAAY;AAC1B,kBAAU,SAAS,MAAM,GAAG;AAC5B,eAAO,0BAA0B,QAAQ,OAAO;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}