@firedrill-tools/slack 0.1.1

package/firedrill/tools/slack/app/site/assets/slack-wordmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 130"><path d="m163.593 101.885l6.387-14.835c6.902 5.151 16.07 7.83 25.136 7.83c6.696 0 10.92-2.576 10.92-6.49c-.103-10.92-40.074-2.37-40.383-29.773c-.103-13.907 12.26-24.621 29.772-24.621c10.405 0 20.81 2.575 28.227 8.447l-5.975 15.144c-6.799-4.327-15.246-7.417-23.282-7.417c-5.46 0-9.065 2.575-9.065 5.872c.103 10.714 40.383 4.842 40.795 31.008c0 14.217-12.053 24.21-29.36 24.21c-12.672 0-24.313-2.988-33.172-9.375m245.08-20.192l17.616 9.787c-6.593 11.847-19.161 19.78-33.687 19.78c-21.325 0-38.632-17.307-38.632-38.632s17.307-38.632 38.632-38.632c14.423 0 27.094 8.035 33.687 19.78l-17.616 9.786c-3.194-5.563-9.169-9.374-16.071-9.374c-10.199 0-18.44 8.241-18.44 18.44s8.241 18.44 18.44 18.44c6.902 0 12.877-3.812 16.07-9.375M234.984 1.957h22.046v107.86h-22.046zm199.958 0h22.046v63.356l24.93-29.772h26.991l-30.802 35.85l33.275 38.426h-28.227L456.988 77.47v32.347h-22.046zM322.55 81.9V63.665c-3.194-5.357-9.787-9.477-17.204-9.477c-10.2 0-18.44 8.241-18.44 18.44s8.24 18.44 18.44 18.44c7.417 0 14.01-3.915 17.204-9.169m0-46.358h22.046v74.173H322.55v-8.756c-3.606 6.078-12.569 10.302-21.943 10.302c-19.368 0-34.614-17.307-34.614-38.735s15.246-38.529 34.614-38.529c9.374 0 18.337 4.224 21.943 10.302z"/><path fill="#e01e5a" d="M27.3 81.796c0 7.52-6.078 13.599-13.599 13.599A13.585 13.585 0 0 1 .103 81.796c0-7.52 6.078-13.598 13.598-13.598H27.3zm6.799 0c0-7.52 6.078-13.598 13.598-13.598s13.599 6.078 13.599 13.598v33.996c0 7.52-6.078 13.599-13.599 13.599A13.585 13.585 0 0 1 34.1 115.792z"/><path fill="#36c5f0" d="M47.697 27.197A13.585 13.585 0 0 1 34.1 13.598C34.099 6.078 40.177 0 47.697 0s13.599 6.078 13.599 13.598v13.599zm0 6.902c7.52 0 13.599 6.078 13.599 13.598s-6.078 13.599-13.599 13.599H13.598A13.585 13.585 0 0 1 0 47.697C0 40.177 6.078 34.1 13.598 34.1z"/><path fill="#2eb67d" d="M102.194 47.697c0-7.52 6.078-13.598 13.598-13.598s13.599 6.078 13.599 13.598s-6.078 13.599-13.599 13.599h-13.598zm-6.8 0c0 7.52-6.077 13.599-13.598 13.599a13.585 13.585 0 0 1-13.598-13.599V13.598C68.198 6.078 74.276 0 81.796 0s13.599 6.078 13.599 13.598z"/><path fill="#ecb22e" d="M81.796 102.194c7.52 0 13.599 6.078 13.599 13.598s-6.078 13.599-13.599 13.599a13.585 13.585 0 0 1-13.598-13.599v-13.598zm0-6.8a13.585 13.585 0 0 1-13.598-13.598c0-7.52 6.078-13.598 13.598-13.598h34.1c7.52 0 13.598 6.078 13.598 13.598s-6.078 13.599-13.599 13.599z"/></svg>

package/firedrill/tools/slack/app/site/assets/slack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"/><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"/><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"/><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"/></svg>

package/firedrill/tools/slack/app/site/chrome.css

@@ -0,0 +1,73 @@
+/* Client chrome added around the simulated surfaces: nav rows, section actions, huddle split button, clip buttons,
+   schedule caret, and the "not simulated" panel. */
+.sb-nav { padding: 0 0 12px; }
+.sb-nav .sb-link { padding-left: 8px; }
+.sb-nav .sb-glyph .icon { width: 18px; height: 18px; }
+.section-head { position: relative; display: flex; align-items: center; }
+.section-head .section-toggle { flex: 1; min-width: 0; }
+.section-toggle > span:last-child { font-weight: 400; }
+.section-action {
+  position: absolute; top: 2px; width: 24px; height: 24px; border-radius: 4px;
+  display: none; align-items: center; justify-content: center; color: var(--sidebar-text);
+}
+.section-action[data-section-add], .section-action[data-ns="apps"] { right: 14px; }
+.section-action[data-section-options] { right: 40px; }
+.section-action .icon { width: 16px; height: 16px; }
+.section-action:hover, .section-action[aria-expanded="true"] { background: var(--sidebar-hover); color: #fff; }
+.section-head:hover .section-action, .section-head:focus-within .section-action, .section-action[aria-expanded="true"] { display: inline-flex; }
+.members-stack .avatar { width: 22px; height: 22px; font-size: 11px; border: 2px solid #fff; border-radius: 6px; margin-right: -4px; }
+.members-pill { padding-left: 3px; height: 30px; }
+.huddle-split {
+  display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
+}
+.huddle-split[hidden] { display: none; }
+.huddle-btn, .huddle-caret { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 13px; font-weight: 700; }
+.huddle-btn { padding: 0 8px; }
+.huddle-caret { padding: 0 4px; border-left: 1px solid var(--border); }
+.huddle-btn .icon { width: 18px; height: 18px; }
+.huddle-caret .icon { width: 14px; height: 14px; }
+.huddle-btn:hover, .huddle-caret:hover, .huddle-caret[aria-expanded="true"] { background: var(--hover); color: var(--text); }
+.pane-tab-add { padding: 0 6px; }
+.pane-tab-add .icon { width: 16px; height: 16px; }
+.send-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.4); }
+.send-btn { border-radius: 4px 0 0 4px; }
+.send-caret {
+  width: 22px; height: 28px; border-radius: 0 4px 4px 0; display: inline-flex; align-items: center; justify-content: center;
+  background: var(--primary); color: #fff;
+}
+.send-caret .icon { width: 14px; height: 14px; }
+.send-caret:hover { background: var(--primary-hover); }
+.send-btn:disabled + .send-divider { background: var(--border); }
+.send-btn:disabled + .send-divider + .send-caret { background: transparent; color: var(--text-2); }
+.send-btn:disabled + .send-divider + .send-caret:hover { background: var(--hover); color: var(--text); }
+.menu.ns-menu { padding: 0; min-width: 0; }
+.ns-panel { width: 280px; padding: 16px 20px; white-space: normal; }
+.ns-title { font-size: 15px; font-weight: 900; color: var(--text); }
+.ns-subtitle { font-size: 13px; color: var(--text-2); margin-top: 2px; }
+.ns-text { margin: 10px 0 12px; font-size: 13px; line-height: 1.45; color: var(--text); }
+.ns-tag {
+  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2);
+  background: var(--surface-3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px;
+}
+@media (max-width: 768px) {
+  .huddle-text { display: none; }
+  .composer-actions-start [data-ns="video"], .composer-actions-start [data-ns="audio"] { display: none; }
+}
+.fd-tooltip {
+  position: fixed; z-index: 60; max-width: 240px; padding: 6px 10px; border-radius: 8px; pointer-events: none;
+  background: #1d1c1d; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+}
+.fd-tooltip::after {
+  content: ""; position: absolute; left: var(--arrow-x, 50%); top: 100%; margin-left: -5px;
+  border: 5px solid transparent; border-top-color: #1d1c1d;
+}
+.fd-tooltip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1d1c1d; }
+.menu.wide-menu .menu-item, .menu.wide-menu .menu-label { white-space: normal; overflow: visible; text-overflow: clip; }
+.thread-composer .composer-toolbar { flex-wrap: wrap; }
+.thread-composer .composer-actions-start { flex-wrap: wrap; min-width: 0; }
+.thread-composer .composer-actions { gap: 4px; }
+/* Current Slack (2023+) selected sidebar row: a light lavender pill with aubergine text, not the older blue fill. */
+.sb-link[aria-current="page"], .sb-link[aria-current="page"]:hover { background: rgba(249, 237, 255, 0.9); color: #39063a; }
+.sb-link[aria-current="page"] .sb-glyph, .sb-link[aria-current="page"] .sb-glyph .icon { color: #39063a; }
+.sb-link[aria-current="page"] .sb-glyph .presence { border-color: #f5e9fa; }

package/firedrill/tools/slack/app/site/chrome.js

@@ -0,0 +1,96 @@
+// Slack client chrome that the Tool does not simulate (huddles, clips, saved items, forwarding, scheduling, files,
+// apps, slash commands). These controls stay in their real place so the client reads as Slack, and each opens a short
+// panel saying it is outside this Tool's scope. Nothing here calls an operation or invents workspace data.
+import { el, openMenu } from "./ui.js";
+
+const PANELS = {
+  activity: ["Activity", "Mentions, reactions and thread replies", "There is no activity or notification feed in this Tool. Unread conversations are shown in bold in the sidebar."],
+  later: ["Later", "Saved messages and reminders", "Saved items and reminders are not part of this Tool."],
+  threads: ["Threads", "A feed of threads you follow", "Open a thread from its channel with “N replies”; a cross-channel followed-threads feed is not modelled."],
+  huddles: ["Huddles", "Audio and video huddles", "Calls and huddles are not part of this Tool."],
+  huddle: ["Start huddle", "Audio and video huddles", "Calls and huddles are not part of this Tool."],
+  "huddle-options": ["Huddle options", "Copy huddle link, start with video", "Calls and huddles are not part of this Tool."],
+  drafts: ["Drafts & sent", "Unsent drafts, scheduled and sent messages", "Drafts and scheduled messages are not stored by this Tool; composer text stays in this tab only."],
+  apps: ["Add apps", "Install and manage apps", "App installation is not part of this Tool. Bot users seeded in the world are listed under Apps."],
+  files: ["Files", "Files shared in this conversation", "files.* methods are not part of this Tool, so no files exist in this world."],
+  "add-tab": ["Add a tab", "Canvas, list, workflow or bookmark", "canvases.*, lists and bookmarks.* are not part of this Tool."],
+  video: ["Record video clip", "Clips", "Recording and uploading clips is not part of this Tool."],
+  audio: ["Record audio clip", "Clips", "Recording and uploading clips is not part of this Tool."],
+  shortcuts: ["Shortcuts", "Slash commands and workflows", "Slash commands and workflow shortcuts are not part of this Tool."],
+  schedule: ["Schedule for later", "Scheduled messages", "chat.scheduleMessage is not part of this Tool. Send posts immediately."],
+  forward: ["Forward message", "Share to another conversation", "Message sharing is not part of this Tool. Use “Copy link to message” from the More menu."],
+  save: ["Save for later", "Saved items", "Saved items and reminders are not part of this Tool."],
+};
+
+/** Open the "not simulated" panel next to `anchor`. */
+export function notSimulated(anchor, key) {
+  const [title, subtitle, text] = (Object.hasOwn(PANELS, key) ? PANELS[key] : undefined) ?? [anchor.getAttribute("aria-label") ?? "Not available", "", "This feature is not part of this Tool."];
+  const panel = el("div", { class: "ns-panel", attrs: { role: "dialog", "aria-label": `${title} is not simulated` } }, [
+    el("div", { class: "ns-title", text: title }),
+    subtitle ? el("div", { class: "ns-subtitle", text: subtitle }) : undefined,
+    el("p", { class: "ns-text", text }),
+    el("div", { class: "ns-tag", text: "Not simulated by this Tool" }),
+  ]);
+  const rect = anchor.getBoundingClientRect();
+  const above = rect.top > window.innerHeight * 0.6;
+  const align = rect.left > window.innerWidth * 0.6 ? "end" : "start";
+  openMenu(anchor, panel, { align, above, className: "ns-menu" });
+}
+
+document.addEventListener("click", (event) => {
+  const control = event.target instanceof Element ? event.target.closest("[data-ns]") : null;
+  if (!control || control.disabled) return;
+  event.preventDefault();
+  event.stopPropagation();
+  notSimulated(control, control.dataset.ns);
+}, true);
+
+// Slack-style tooltips: a dark bubble with an arrow instead of the native title box. The title moves to data-tip on
+// first hover or focus so the browser's own tooltip never appears; the accessible name stays on aria-label.
+const tip = el("div", { class: "fd-tooltip", attrs: { role: "tooltip", id: "fd-tooltip" } });
+tip.hidden = true;
+document.body.append(tip);
+let tipTarget;
+function tipSource(node) {
+  const target = node instanceof Element ? node.closest("[title], [data-tip]") : null;
+  if (!target || target.closest(".menu, dialog:not([open])")) return undefined;
+  if (target.hasAttribute("title")) {
+    const text = target.getAttribute("title");
+    target.removeAttribute("title");
+    if (text) target.dataset.tip = text;
+  }
+  return target.dataset.tip ? target : undefined;
+}
+function showTip(target) {
+  const visible = target.getBoundingClientRect();
+  const hit = document.elementFromPoint(visible.left + visible.width / 2, visible.top + visible.height / 2);
+  if (visible.width === 0 || !hit || !(target === hit || target.contains(hit))) return hideTip(); // hidden or covered
+  tipTarget = target;
+  tip.textContent = target.dataset.tip;
+  tip.hidden = false;
+  const rect = target.getBoundingClientRect();
+  const box = tip.getBoundingClientRect();
+  const below = rect.top < box.height + 16;
+  tip.classList.toggle("below", below);
+  const left = Math.max(8, Math.min(window.innerWidth - box.width - 8, rect.left + rect.width / 2 - box.width / 2));
+  tip.style.left = `${left}px`;
+  tip.style.top = `${below ? rect.bottom + 8 : rect.top - box.height - 8}px`;
+  tip.style.setProperty("--arrow-x", `${rect.left + rect.width / 2 - left}px`);
+}
+function hideTip() {
+  tipTarget = undefined;
+  tip.hidden = true;
+}
+document.addEventListener("pointerover", (event) => {
+  if (event.pointerType && event.pointerType !== "mouse") return; // touch and pen show no hover tooltip, as in Slack
+  const target = tipSource(event.target);
+  if (target && target !== tipTarget) showTip(target);
+  else if (!target) hideTip();
+});
+document.addEventListener("focusin", (event) => {
+  const target = tipSource(event.target);
+  if (target && target.matches(":focus-visible")) showTip(target);
+});
+for (const type of ["pointerdown", "focusout", "scroll", "keydown"]) document.addEventListener(type, hideTip, true);
+window.addEventListener("resize", hideTip);
+window.addEventListener("hashchange", hideTip);

package/firedrill/tools/slack/app/site/icons.js

@@ -0,0 +1,96 @@
+// Monochrome 20 px glyphs in the outlined style of the Slack client, drawn as path/stroke data so the app ships no
+// icon font and makes no remote requests. Everything is `currentColor`.
+const STROKE = { fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" };
+
+// Each entry: [viewBox, elements]. Elements are [tag, attributes]; `s: true` applies the stroke preset.
+const GLYPHS = {
+  hash: ["0 0 20 20", [["path", { s: true, d: "M7.5 3.5 5.5 16.5M14.5 3.5l-2 13M3.5 7.5h13M3 12.5h13" }]]],
+  lock: ["0 0 20 20", [["rect", { s: true, x: "4", y: "8.5", width: "12", height: "8.5", rx: "1.5" }], ["path", { s: true, d: "M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5" }]]],
+  chevron_down: ["0 0 20 20", [["path", { s: true, d: "m6 8 4 4 4-4" }]]],
+  chevron_right: ["0 0 20 20", [["path", { s: true, d: "m8 6 4 4-4 4" }]]],
+  chevron_left: ["0 0 20 20", [["path", { s: true, d: "m12 6-4 4 4 4" }]]],
+  arrow_left: ["0 0 20 20", [["path", { s: true, d: "M16 10H4M9 5l-5 5 5 5" }]]],
+  arrow_right: ["0 0 20 20", [["path", { s: true, d: "M4 10h12M11 5l5 5-5 5" }]]],
+  clock: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "7" }], ["path", { s: true, d: "M10 6v4l2.5 2" }]]],
+  search: ["0 0 20 20", [["circle", { s: true, cx: "8.5", cy: "8.5", r: "5.5" }], ["path", { s: true, d: "m12.5 12.5 4.5 4.5" }]]],
+  help: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "7.5" }], ["path", { s: true, d: "M7.75 7.75a2.25 2.25 0 1 1 3.5 1.9c-.8.5-1.25 1-1.25 1.85" }], ["circle", { fill: "currentColor", cx: "10", cy: "14.25", r: ".9" }]]],
+  home: ["0 0 20 20", [["path", { s: true, d: "M3.5 9.5 10 3.5l6.5 6v7a1 1 0 0 1-1 1h-3.5v-5h-4v5H4.5a1 1 0 0 1-1-1z" }]]],
+  dm: ["0 0 20 20", [["path", { s: true, d: "M10 3.5c-3.9 0-7 2.6-7 5.8 0 1.6.8 3.1 2.1 4.1L4.5 17l3.6-1.6c.6.1 1.2.2 1.9.2 3.9 0 7-2.6 7-5.8s-3.1-6.3-7-6.3z" }]]],
+  bell: ["0 0 20 20", [["path", { s: true, d: "M5.5 8.5a4.5 4.5 0 0 1 9 0v3l1.5 2.5h-12L5.5 11.5z" }], ["path", { s: true, d: "M8.5 16.5a1.5 1.5 0 0 0 3 0" }]]],
+  bookmark: ["0 0 20 20", [["path", { s: true, d: "M5.5 3.5h9v13l-4.5-3-4.5 3z" }]]],
+  more_h: ["0 0 20 20", [["circle", { fill: "currentColor", cx: "5", cy: "10", r: "1.5" }], ["circle", { fill: "currentColor", cx: "10", cy: "10", r: "1.5" }], ["circle", { fill: "currentColor", cx: "15", cy: "10", r: "1.5" }]]],
+  more_v: ["0 0 20 20", [["circle", { fill: "currentColor", cx: "10", cy: "5", r: "1.5" }], ["circle", { fill: "currentColor", cx: "10", cy: "10", r: "1.5" }], ["circle", { fill: "currentColor", cx: "10", cy: "15", r: "1.5" }]]],
+  compose: ["0 0 20 20", [["path", { s: true, d: "M11 4H5a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 5 16h9a1.5 1.5 0 0 0 1.5-1.5V9" }], ["path", { s: true, d: "m14.6 3.4 2 2-6.6 6.6H8v-2z" }]]],
+  plus: ["0 0 20 20", [["path", { s: true, d: "M10 4.5v11M4.5 10h11" }]]],
+  close: ["0 0 20 20", [["path", { s: true, d: "m5 5 10 10M15 5 5 15" }]]],
+  check: ["0 0 20 20", [["path", { s: true, d: "m4 10.5 4 4 8-9" }]]],
+  emoji: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "7.5" }], ["path", { s: true, d: "M6.5 11.5c.7 1.5 2 2.3 3.5 2.3s2.8-.8 3.5-2.3" }], ["circle", { fill: "currentColor", cx: "7.5", cy: "8", r: "1" }], ["circle", { fill: "currentColor", cx: "12.5", cy: "8", r: "1" }]]],
+  emoji_add: ["0 0 20 20", [["path", { s: true, d: "M17.4 11a7.5 7.5 0 1 1-8.4-8.4" }], ["path", { s: true, d: "M6.5 11.5c.7 1.5 2 2.3 3.5 2.3s2.8-.8 3.5-2.3" }], ["circle", { fill: "currentColor", cx: "7.5", cy: "8", r: "1" }], ["circle", { fill: "currentColor", cx: "12.5", cy: "8", r: "1" }], ["path", { s: true, d: "M15.5 2.5v5M13 5h5" }]]],
+  thread: ["0 0 20 20", [["path", { s: true, d: "M4 4.5h12a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z" }]]],
+  reply: ["0 0 20 20", [["path", { s: true, d: "M8 5 3.5 9.5 8 14" }], ["path", { s: true, d: "M3.5 9.5H12a4.5 4.5 0 0 1 4.5 4.5v1.5" }]]],
+  pin: ["0 0 20 20", [["path", { s: true, d: "M12.5 3.5l4 4-1.5 1.5-.5-.5-3 3 .5 3-1.5 1.5-3-3-4 4-1-1 4-4-3-3L5 8l3 .5 3-3-.5-.5z" }]]],
+  pencil: ["0 0 20 20", [["path", { s: true, d: "m13.5 3.5 3 3L7 16H4v-3z" }], ["path", { s: true, d: "m11.5 5.5 3 3" }]]],
+  trash: ["0 0 20 20", [["path", { s: true, d: "M4 5.5h12M8 5.5V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5M5.5 5.5l.8 10a1 1 0 0 0 1 .9h5.4a1 1 0 0 0 1-.9l.8-10M8.5 8.5v5M11.5 8.5v5" }]]],
+  link: ["0 0 20 20", [["path", { s: true, d: "M8.5 11.5a3 3 0 0 1 0-4.2l2-2a3 3 0 0 1 4.2 4.2l-1 1" }], ["path", { s: true, d: "M11.5 8.5a3 3 0 0 1 0 4.2l-2 2a3 3 0 0 1-4.2-4.2l1-1" }]]],
+  at: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "3" }], ["path", { s: true, d: "M13 10v1.5a1.5 1.5 0 0 0 3 0V10a6 6 0 1 0-2.4 4.8" }]]],
+  bold: ["0 0 20 20", [["path", { s: true, "stroke-width": "1.8", d: "M6 4h4.5a2.75 2.75 0 0 1 0 5.5H6zM6 9.5h5.25a3 3 0 0 1 0 6H6z" }]]],
+  italic: ["0 0 20 20", [["path", { s: true, d: "M8.5 4h6M5.5 16h6M11.5 4l-3 12" }]]],
+  strike: ["0 0 20 20", [["path", { s: true, d: "M4 10h12M13.5 6.2C13 4.9 11.7 4 10 4 7.8 4 6.5 5.2 6.5 6.6c0 .6.2 1 .5 1.4M6.5 13.8c.5 1.3 1.8 2.2 3.5 2.2 2.2 0 3.5-1.2 3.5-2.6 0-.6-.2-1-.5-1.4" }]]],
+  code: ["0 0 20 20", [["path", { s: true, d: "m7 6-4 4 4 4M13 6l4 4-4 4" }]]],
+  code_block: ["0 0 20 20", [["rect", { s: true, x: "3", y: "4", width: "14", height: "12", rx: "1.5" }], ["path", { s: true, d: "m8.5 8-2 2 2 2M11.5 8l2 2-2 2" }]]],
+  list_ol: ["0 0 20 20", [["path", { s: true, d: "M8 5.5h9M8 10h9M8 14.5h9M3.5 4.5 4.5 4v3M3.5 12.5h1.8c.5 0 .7.5.4.9L3.5 15.5h2.3" }]]],
+  list_ul: ["0 0 20 20", [["path", { s: true, d: "M8 5.5h9M8 10h9M8 14.5h9" }], ["circle", { fill: "currentColor", cx: "4.5", cy: "5.5", r: "1" }], ["circle", { fill: "currentColor", cx: "4.5", cy: "10", r: "1" }], ["circle", { fill: "currentColor", cx: "4.5", cy: "14.5", r: "1" }]]],
+  quote: ["0 0 20 20", [["path", { s: true, d: "M4 4v12M8 6h8M8 10h8M8 14h5" }]]],
+  format: ["0 0 20 20", [["path", { s: true, d: "M4 5h12M4 10h12M4 15h7" }], ["path", { s: true, d: "M14 13v4" }]]],
+  send: ["0 0 20 20", [["path", { fill: "currentColor", d: "M2.5 3.5 17.5 10 2.5 16.5l2-6.5zM5.5 10.5 4.2 14.8 14.3 10 4.2 5.2l1.3 4.3H10v1z" }]]],
+  users: ["0 0 20 20", [["circle", { s: true, cx: "7.5", cy: "7", r: "2.75" }], ["path", { s: true, d: "M2.5 16a5 5 0 0 1 10 0" }], ["path", { s: true, d: "M12.5 4.6a2.75 2.75 0 0 1 0 4.8M14 11.3a5 5 0 0 1 3.5 4.7" }]]],
+  user_add: ["0 0 20 20", [["circle", { s: true, cx: "8", cy: "7", r: "3" }], ["path", { s: true, d: "M2.5 16.5a5.5 5.5 0 0 1 11 0M15.5 6.5v5M13 9h5" }]]],
+  info: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "7.5" }], ["path", { s: true, d: "M10 9v5" }], ["circle", { fill: "currentColor", cx: "10", cy: "6.5", r: ".9" }]]],
+  star: ["0 0 20 20", [["path", { s: true, d: "m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.8L10 13.8l-4.3 2.3.9-4.8L3 8l4.9-.6z" }]]],
+  archive: ["0 0 20 20", [["path", { s: true, d: "M3 4.5h14v3H3zM4 7.5v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-8M8 11h4" }]]],
+  filter: ["0 0 20 20", [["path", { s: true, d: "M3 5h14M5.5 10h9M8 15h4" }]]],
+  channel_browse: ["0 0 20 20", [["path", { s: true, d: "M7 3.5 5.5 12.5M12 3.5l-1.5 9M3.5 6.5h10M3 10.5h10" }], ["circle", { s: true, cx: "14.5", cy: "14", r: "2.5" }], ["path", { s: true, d: "m16.3 15.8 1.5 1.5" }]]],
+  headphones: ["0 0 20 20", [["path", { s: true, d: "M4 12V10a6 6 0 0 1 12 0v2" }], ["rect", { s: true, x: "3", y: "11.5", width: "3.5", height: "5", rx: "1" }], ["rect", { s: true, x: "13.5", y: "11.5", width: "3.5", height: "5", rx: "1" }]]],
+  refresh: ["0 0 20 20", [["path", { s: true, d: "M16 9.5A6 6 0 0 0 5.2 6.5M4 10.5a6 6 0 0 0 10.8 3" }], ["path", { s: true, d: "M4.5 3.5v3.5H8M15.5 16.5V13H12" }]]],
+  spinner: ["0 0 20 20", [["path", { s: true, d: "M10 3a7 7 0 1 1-6.1 3.6" }]]],
+  menu: ["0 0 20 20", [["path", { s: true, d: "M3 5.5h14M3 10h14M3 14.5h14" }]]],
+  sort: ["0 0 20 20", [["path", { s: true, d: "M6 4v12M6 16l-2.5-2.5M6 16l2.5-2.5M14 16V4M14 4l-2.5 2.5M14 4l2.5 2.5" }]]],
+  canvas: ["0 0 20 20", [["rect", { s: true, x: "3.5", y: "3.5", width: "13", height: "13", rx: "1.5" }], ["path", { s: true, d: "M6.5 7.5h7M6.5 10.5h7M6.5 13.5h4" }]]],
+  hash_circle: ["0 0 20 20", [["circle", { s: true, cx: "10", cy: "10", r: "7.5" }], ["path", { s: true, d: "M8.5 6.5 7.5 13.5M12.5 6.5l-1 7M6.5 8.5h7M6 11.5h7" }]]],
+  forward: ["0 0 20 20", [["path", { s: true, d: "M11.5 4.5 16.5 9l-5 4.5" }], ["path", { s: true, d: "M16.5 9H9a5 5 0 0 0-5 5v1.5" }]]],
+  video: ["0 0 20 20", [["rect", { s: true, x: "2.5", y: "5.5", width: "10.5", height: "9", rx: "1.5" }], ["path", { s: true, d: "m13 9 4.5-2.5v7L13 11" }]]],
+  mic: ["0 0 20 20", [["rect", { s: true, x: "7.5", y: "3", width: "5", height: "9", rx: "2.5" }], ["path", { s: true, d: "M4.5 9.5a5.5 5.5 0 0 0 11 0M10 15v2.5" }]]],
+  slash: ["0 0 20 20", [["rect", { s: true, x: "3", y: "3", width: "14", height: "14", rx: "3" }], ["path", { s: true, d: "m11.5 6.5-3 7" }]]],
+  drafts: ["0 0 20 20", [["path", { s: true, d: "M3 9.5 16.5 3.5 13 16.5l-3.5-4.5z" }], ["path", { s: true, d: "m9.5 12 7-8.5" }]]],
+  directory: ["0 0 20 20", [["rect", { s: true, x: "4", y: "3", width: "12", height: "14", rx: "1.5" }], ["circle", { s: true, cx: "10", cy: "8.5", r: "2" }], ["path", { s: true, d: "M7 14a3 3 0 0 1 6 0" }]]],
+  apps: ["0 0 20 20", [["rect", { s: true, x: "3.5", y: "3.5", width: "5", height: "5", rx: "1" }], ["rect", { s: true, x: "11.5", y: "3.5", width: "5", height: "5", rx: "1" }], ["rect", { s: true, x: "3.5", y: "11.5", width: "5", height: "5", rx: "1" }], ["rect", { s: true, x: "11.5", y: "11.5", width: "5", height: "5", rx: "1" }]]],
+  files: ["0 0 20 20", [["path", { s: true, d: "M5.5 3h6l3.5 3.5V16a1 1 0 0 1-1 1h-8.5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" }], ["path", { s: true, d: "M11.5 3v3.5H15" }]]],
+};
+
+const NS = "http://www.w3.org/2000/svg";
+
+/** Create one icon as an inline `<svg>` element (decorative; callers give labels to the surrounding control). */
+export function icon(name, className = "") {
+  const entry = Object.hasOwn(GLYPHS, name) ? GLYPHS[name] : GLYPHS.help;
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", entry[0]);
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("class", `icon ${className}`.trim());
+  svg.dataset.icon = name;
+  for (const [tag, attributes] of entry[1]) {
+    const element = document.createElementNS(NS, tag);
+    if (attributes.s) for (const [key, value] of Object.entries(STROKE)) element.setAttribute(key, value);
+    for (const [key, value] of Object.entries(attributes)) if (key !== "s") element.setAttribute(key, value);
+    svg.append(element);
+  }
+  return svg;
+}
+
+/** Replace every `<span data-icon="…">` placeholder in `root` with its glyph. */
+export function hydrateIcons(root = document) {
+  for (const placeholder of root.querySelectorAll("span[data-icon]")) {
+    const glyph = icon(placeholder.dataset.icon, placeholder.className);
+    placeholder.replaceWith(glyph);
+  }
+}

package/firedrill/tools/slack/app/site/index.html

@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Slack (synthetic)</title>
+    <link rel="icon" type="image/svg+xml" href="./assets/slack.svg" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="./chrome.css" />
+    <script type="module" src="./app.js"></script>
+    <script type="module" src="./chrome.js"></script>
+  </head>
+  <body>
+    <div class="shell" id="shell">
+      <header class="topbar">
+        <div class="topbar-start">
+          <button type="button" class="topbar-btn" id="nav-menu" aria-label="Show sidebar" title="Sidebar"><span data-icon="menu"></span></button>
+          <button type="button" class="topbar-btn" id="nav-back" aria-label="Back" title="Back" disabled><span data-icon="arrow_left"></span></button>
+          <button type="button" class="topbar-btn" id="nav-forward" aria-label="Forward" title="Forward" disabled><span data-icon="arrow_right"></span></button>
+          <button type="button" class="topbar-btn" id="nav-history" aria-label="History" aria-expanded="false" title="History"><span data-icon="clock"></span></button>
+        </div>
+        <form class="topbar-search" id="search-form" role="search">
+          <label class="visually-hidden" for="search">Search</label>
+          <span data-icon="search" class="search-glyph"></span>
+          <input id="search" type="text" placeholder="Search" autocomplete="off" spellcheck="false" />
+          <button type="button" class="search-clear" id="search-clear" aria-label="Clear search" hidden><span data-icon="close"></span></button>
+        </form>
+        <div class="topbar-end">
+          <button type="button" class="topbar-btn" id="help" aria-label="Help" aria-expanded="false" title="Help"><span data-icon="help"></span></button>
+        </div>
+      </header>
+
+      <nav class="rail" id="rail" aria-label="Workspace">
+        <button type="button" class="rail-workspace" id="workspace-tile" aria-label="Workspace menu" aria-expanded="false" title="Workspace">
+          <span class="rail-tile" id="workspace-initial">·</span>
+        </button>
+        <div class="rail-items">
+          <button type="button" class="rail-item" data-view="home" aria-current="page"><span class="rail-icon"><span data-icon="home"></span></span><span class="rail-label">Home</span></button>
+          <button type="button" class="rail-item" data-view="dms"><span class="rail-icon"><span data-icon="dm"></span></span><span class="rail-label">DMs</span></button>
+          <button type="button" class="rail-item" data-view="activity" data-ns="activity" aria-expanded="false"><span class="rail-icon"><span data-icon="bell"></span></span><span class="rail-label">Activity</span></button>
+          <button type="button" class="rail-item" data-view="later" data-ns="later"><span class="rail-icon"><span data-icon="bookmark"></span></span><span class="rail-label">Later</span></button>
+          <button type="button" class="rail-item" data-view="more" aria-expanded="false"><span class="rail-icon"><span data-icon="more_h"></span></span><span class="rail-label">More</span></button>
+        </div>
+        <div class="rail-bottom">
+          <button type="button" class="rail-plus" id="rail-create" aria-label="Create new" aria-expanded="false" title="Create new"><span data-icon="plus"></span></button>
+          <button type="button" class="rail-avatar" id="me-button" aria-label="Your profile" aria-expanded="false" title="You"><span class="avatar md" id="me-avatar" aria-hidden="true">?</span><span class="presence active" aria-hidden="true"></span></button>
+        </div>
+      </nav>
+
+      <div class="workspace" id="workspace">
+        <aside class="sidebar" id="sidebar" aria-label="Conversations">
+          <div class="sidebar-header">
+            <button type="button" class="sidebar-title" id="workspace-menu" aria-expanded="false"><span class="sidebar-title-text" id="workspace-name">Loading…</span><span data-icon="chevron_down"></span></button>
+            <div class="sidebar-header-actions">
+              <button type="button" class="sidebar-filter" id="sidebar-filter" aria-label="Filter conversations" aria-expanded="false" title="Filter conversations"><span data-icon="filter"></span></button>
+              <button type="button" class="sidebar-compose" id="compose" aria-label="New message" title="New message"><span data-icon="compose"></span></button>
+            </div>
+          </div>
+          <div class="sidebar-scroll" id="sidebar-scroll">
+            <div class="sidebar-denied" id="sidebar-denied" hidden></div>
+            <ul class="sidebar-list sb-nav" role="list" aria-label="Views">
+              <li><button type="button" class="sb-link sb-nav-link" data-ns="threads" title="Threads"><span class="sb-glyph"><span data-icon="thread"></span></span><span class="sb-name">Threads</span></button></li>
+              <li><button type="button" class="sb-link sb-nav-link" data-ns="huddles" title="Huddles"><span class="sb-glyph"><span data-icon="headphones"></span></span><span class="sb-name">Huddles</span></button></li>
+              <li><button type="button" class="sb-link sb-nav-link" data-ns="drafts" title="Drafts &amp; sent"><span class="sb-glyph"><span data-icon="drafts"></span></span><span class="sb-name">Drafts &amp; sent</span></button></li>
+              <li><button type="button" class="sb-link sb-nav-link" id="nav-directories" title="Directories"><span class="sb-glyph"><span data-icon="directory"></span></span><span class="sb-name">Directories</span></button></li>
+            </ul>
+            <section class="sidebar-section" id="section-channels">
+              <div class="section-head"><button type="button" class="section-toggle" id="channels-toggle" aria-expanded="true" aria-controls="channel-list"><span data-icon="chevron_down" class="section-chevron"></span><span>Channels</span></button><button type="button" class="section-action" data-section-options="Channels" aria-label="Channels section options" title="Section options" aria-expanded="false"><span data-icon="more_v"></span></button><button type="button" class="section-action" data-section-add="add-channels" aria-label="Add channels" title="Add channels" aria-expanded="false"><span data-icon="plus"></span></button></div>
+              <ul class="sidebar-list" id="channel-list" role="list" aria-label="Channels"></ul>
+              <button type="button" class="sidebar-add" id="add-channels" aria-expanded="false"><span class="add-box"><span data-icon="plus"></span></span><span>Add channels</span></button>
+            </section>
+            <section class="sidebar-section" id="section-dms">
+              <div class="section-head"><button type="button" class="section-toggle" id="dms-toggle" aria-expanded="true" aria-controls="dm-list"><span data-icon="chevron_down" class="section-chevron"></span><span>Direct messages</span></button><button type="button" class="section-action" data-section-options="Direct messages" aria-label="Direct messages section options" title="Section options" aria-expanded="false"><span data-icon="more_v"></span></button><button type="button" class="section-action" data-section-add="add-dm" aria-label="Add a direct message" title="New message" aria-expanded="false"><span data-icon="plus"></span></button></div>
+              <ul class="sidebar-list" id="dm-list" role="list" aria-label="Direct messages"></ul>
+              <button type="button" class="sidebar-add" id="add-dm"><span class="add-box"><span data-icon="plus"></span></span><span>New message</span></button>
+            </section>
+            <section class="sidebar-section" id="section-apps" hidden>
+              <div class="section-head"><button type="button" class="section-toggle" id="apps-toggle" aria-expanded="true" aria-controls="app-list"><span data-icon="chevron_down" class="section-chevron"></span><span>Apps</span></button><button type="button" class="section-action" data-ns="apps" aria-label="Add apps" title="Add apps" aria-expanded="false"><span data-icon="plus"></span></button></div>
+              <ul class="sidebar-list" id="app-list" role="list" aria-label="Apps"></ul>
+            </section>
+          </div>
+        </aside>
+
+        <main class="pane" id="pane">
+          <header class="pane-header" id="pane-header">
+            <div class="pane-title-wrap">
+              <button type="button" class="pane-title" id="pane-title" aria-expanded="false"><span class="pane-title-glyph" id="pane-title-glyph"></span><span class="pane-title-text" id="pane-title-text">Loading…</span><span data-icon="chevron_down" class="pane-title-chevron"></span></button>
+              <button type="button" class="pane-topic" id="pane-topic" hidden></button>
+            </div>
+            <div class="pane-header-actions" id="pane-header-actions">
+              <button type="button" class="members-pill" id="members-pill" aria-label="View members" hidden><span class="members-stack" id="members-stack"></span><span class="members-count" id="members-count"></span></button>
+              <div class="huddle-split" id="huddle-split"><button type="button" class="huddle-btn" data-ns="huddle" aria-label="Start huddle" title="Start huddle"><span data-icon="headphones"></span><span class="huddle-text">Huddle</span></button><button type="button" class="huddle-caret" data-ns="huddle-options" aria-label="Huddle options" title="Huddle options" aria-expanded="false"><span data-icon="chevron_down"></span></button></div>
+              <button type="button" class="icon-btn" id="pane-more" aria-label="More actions" title="More actions" aria-expanded="false"><span data-icon="more_v"></span></button>
+              <button type="button" class="icon-btn" id="pane-details" aria-label="Conversation details" title="Details" hidden><span data-icon="info"></span></button>
+            </div>
+          </header>
+          <nav class="pane-tabs" id="pane-tabs" aria-label="Conversation sections">
+            <button type="button" class="pane-tab" data-tab="messages" aria-current="page"><span data-icon="dm"></span>Messages</button>
+            <button type="button" class="pane-tab" data-tab="pins"><span data-icon="pin"></span>Pins<span class="tab-count" id="pins-count"></span></button>
+            <button type="button" class="pane-tab" data-ns="files" aria-label="Files"><span data-icon="files"></span>Files</button>
+            <button type="button" class="pane-tab pane-tab-add" data-ns="add-tab" aria-label="Add a tab" title="Add canvas, list, workflow or bookmark" aria-expanded="false"><span data-icon="plus"></span></button>
+          </nav>
+          <div class="pane-body" id="pane-body" tabindex="-1">
+            <div class="message-scroll" id="message-scroll">
+              <div class="message-list" id="messages" role="log" aria-live="polite" aria-label="Messages"></div>
+            </div>
+          </div>
+          <div class="pane-footer" id="pane-footer">
+            <div class="composer" id="composer">
+              <div class="composer-toolbar" id="composer-toolbar">
+                <button type="button" class="fmt-btn" data-fmt="*" aria-label="Bold" title="Bold"><span data-icon="bold"></span></button>
+                <button type="button" class="fmt-btn" data-fmt="_" aria-label="Italic" title="Italic"><span data-icon="italic"></span></button>
+                <button type="button" class="fmt-btn" data-fmt="~" aria-label="Strikethrough" title="Strikethrough"><span data-icon="strike"></span></button>
+                <span class="fmt-divider" role="separator"></span>
+                <button type="button" class="fmt-btn" data-fmt="link" aria-label="Link" title="Link"><span data-icon="link"></span></button>
+                <span class="fmt-divider" role="separator"></span>
+                <button type="button" class="fmt-btn" data-fmt="ol" aria-label="Ordered list" title="Ordered list"><span data-icon="list_ol"></span></button>
+                <button type="button" class="fmt-btn" data-fmt="ul" aria-label="Bulleted list" title="Bulleted list"><span data-icon="list_ul"></span></button>
+                <span class="fmt-divider" role="separator"></span>
+                <button type="button" class="fmt-btn" data-fmt="quote" aria-label="Blockquote" title="Blockquote"><span data-icon="quote"></span></button>
+                <span class="fmt-divider" role="separator"></span>
+                <button type="button" class="fmt-btn" data-fmt="`" aria-label="Code" title="Code"><span data-icon="code"></span></button>
+                <button type="button" class="fmt-btn" data-fmt="```" aria-label="Code block" title="Code block"><span data-icon="code_block"></span></button>
+              </div>
+              <label class="visually-hidden" for="composer-input" id="composer-label">Message</label>
+              <textarea id="composer-input" rows="1" placeholder="Message" spellcheck="true"></textarea>
+              <div class="composer-actions">
+                <div class="composer-actions-start">
+                  <button type="button" class="composer-plus" id="composer-plus" aria-label="Attach" aria-expanded="false" title="Attach"><span data-icon="plus"></span></button>
+                  <button type="button" class="fmt-btn" id="composer-format" aria-label="Hide formatting" aria-pressed="true" title="Hide formatting"><span data-icon="format"></span></button>
+                  <button type="button" class="fmt-btn" id="composer-emoji" aria-label="Emoji" aria-expanded="false" title="Emoji"><span data-icon="emoji"></span></button>
+                  <button type="button" class="fmt-btn" id="composer-mention" aria-label="Mention someone" aria-expanded="false" title="Mention someone"><span data-icon="at"></span></button>
+                  <span class="fmt-divider" role="separator"></span>
+                  <button type="button" class="fmt-btn" data-ns="video" aria-label="Record video clip" title="Record video clip"><span data-icon="video"></span></button>
+                  <button type="button" class="fmt-btn" data-ns="audio" aria-label="Record audio clip" title="Record audio clip"><span data-icon="mic"></span></button>
+                  <span class="fmt-divider" role="separator"></span>
+                  <button type="button" class="fmt-btn" data-ns="shortcuts" aria-label="Run shortcut" title="Run shortcut" aria-expanded="false"><span data-icon="slash"></span></button>
+                </div>
+                <div class="composer-actions-end">
+                  <button type="button" class="send-btn" id="send" aria-label="Send now" title="Send now" disabled><span data-icon="send"></span></button><span class="send-divider" aria-hidden="true"></span><button type="button" class="send-caret" id="send-schedule" data-ns="schedule" aria-label="Schedule for later" title="Schedule for later" aria-expanded="false"><span data-icon="chevron_down"></span></button>
+                </div>
+              </div>
+            </div>
+            <p class="composer-note" id="composer-note" role="alert" hidden></p>
+            <div class="composer-banner" id="composer-banner" hidden></div>
+          </div>
+        </main>
+
+        <aside class="side-panel" id="side-panel" aria-label="Details" hidden>
+          <header class="side-header">
+            <div class="side-title-wrap"><h2 class="side-title" id="side-title">Thread</h2><span class="side-subtitle" id="side-subtitle"></span></div>
+            <button type="button" class="icon-btn" id="side-close" aria-label="Close"><span data-icon="close"></span></button>
+          </header>
+          <div class="side-body" id="side-body"></div>
+        </aside>
+      </div>
+    </div>
+
+    <dialog class="modal" id="create-channel-dialog" aria-labelledby="create-channel-title">
+      <form id="create-channel-form" method="dialog" novalidate>
+        <header class="modal-header"><h2 id="create-channel-title">Create a channel</h2><button type="button" class="icon-btn modal-close" data-close aria-label="Close"><span data-icon="close"></span></button></header>
+        <div class="modal-body">
+          <label class="field-label" for="channel-name">Name</label>
+          <div class="field channel-name-field">
+            <span class="field-prefix" id="channel-name-prefix"><span data-icon="hash"></span></span>
+            <input id="channel-name" maxlength="80" autocomplete="off" placeholder="e.g. plan-budget" />
+            <span class="field-counter" id="channel-name-counter">80</span>
+          </div>
+          <p class="field-hint">Channels are where conversations happen around a topic. Use a name that is easy to find and understand.</p>
+          <fieldset class="visibility">
+            <legend class="field-label">Visibility</legend>
+            <label class="radio"><input type="radio" name="visibility" value="public" checked /><span><strong>Public</strong> — Anyone in the workspace</span></label>
+            <label class="radio"><input type="radio" name="visibility" value="private" /><span><strong>Private</strong> — Only specific people<br /><small>Can only be viewed or joined by invitation</small></span></label>
+          </fieldset>
+          <p class="modal-error" id="create-channel-error" role="alert" hidden></p>
+        </div>
+        <footer class="modal-footer">
+          <button type="submit" class="btn primary" id="create-channel-submit" disabled>Create</button>
+        </footer>
+      </form>
+    </dialog>
+
+    <dialog class="modal" id="topic-dialog" aria-labelledby="topic-title">
+      <form id="topic-form" method="dialog" novalidate>
+        <header class="modal-header"><h2 id="topic-title">Edit topic</h2><button type="button" class="icon-btn modal-close" data-close aria-label="Close"><span data-icon="close"></span></button></header>
+        <div class="modal-body">
+          <label class="visually-hidden" for="topic-input">Topic</label>
+          <textarea id="topic-input" class="field-textarea" rows="3" maxlength="250" placeholder="Add a topic"></textarea>
+          <p class="field-hint">Let people know what this channel is focused on right now (e.g. a project milestone). Topics are always visible in the header.</p>
+          <p class="modal-error" id="topic-error" role="alert" hidden></p>
+        </div>
+        <footer class="modal-footer">
+          <button type="button" class="btn" data-close>Cancel</button>
+          <button type="submit" class="btn primary" id="topic-submit">Save</button>
+        </footer>
+      </form>
+    </dialog>
+
+    <dialog class="modal people-modal" id="people-dialog" aria-labelledby="people-title">
+      <form id="people-form" method="dialog" novalidate>
+        <header class="modal-header"><div><h2 id="people-title">Add people</h2><p class="modal-subtitle" id="people-subtitle"></p></div><button type="button" class="icon-btn modal-close" data-close aria-label="Close"><span data-icon="close"></span></button></header>
+        <div class="modal-body">
+          <label class="visually-hidden" for="people-filter">Search people</label>
+          <div class="field"><span class="field-prefix"><span data-icon="search"></span></span><input id="people-filter" autocomplete="off" placeholder="Search by name" /></div>
+          <div class="people-selected" id="people-selected" aria-live="polite"></div>
+          <ul class="people-list" id="people-list" role="listbox" aria-multiselectable="true" aria-label="People"></ul>
+          <p class="modal-error" id="people-error" role="alert" hidden></p>
+        </div>
+        <footer class="modal-footer">
+          <button type="submit" class="btn primary" id="people-submit" disabled>Add</button>
+        </footer>
+      </form>
+    </dialog>
+
+    <dialog class="modal details-modal" id="details-dialog" aria-labelledby="details-title">
+      <header class="modal-header">
+        <h2 id="details-title" class="details-title"><span id="details-glyph"></span><span id="details-name"></span></h2>
+        <button type="button" class="icon-btn modal-close" data-close aria-label="Close"><span data-icon="close"></span></button>
+      </header>
+      <nav class="modal-tabs" id="details-tabs" aria-label="Details sections">
+        <button type="button" class="modal-tab" data-tab="about" aria-current="page">About</button>
+        <button type="button" class="modal-tab" data-tab="members">Members<span class="tab-count" id="details-members-count"></span></button>
+        <button type="button" class="modal-tab" data-tab="settings">Settings</button>
+      </nav>
+      <div class="modal-body details-body" id="details-body"></div>
+    </dialog>
+
+    <dialog class="modal about-modal" id="about-dialog" aria-labelledby="about-title">
+      <header class="modal-header"><h2 id="about-title">About this workspace</h2><button type="button" class="icon-btn modal-close" data-close aria-label="Close"><span data-icon="close"></span></button></header>
+      <div class="modal-body about-body">
+        <div class="about-brand"><img src="./assets/slack.svg" alt="" width="40" height="40" /><img src="./assets/slack-wordmark.svg" alt="Slack" class="about-wordmark" height="24" /></div>
+        <dl class="about-list" id="about-list"></dl>
+        <p class="field-hint">A synthetic workspace served by a Firedrill Tool. Messages, channels and members exist only inside this world; nothing is delivered to Slack.</p>
+      </div>
+    </dialog>
+
+    <dialog class="modal confirm-modal" id="confirm-dialog" aria-labelledby="confirm-title" aria-describedby="confirm-text">
+      <form method="dialog">
+        <header class="modal-header"><h2 id="confirm-title">Confirm</h2><button type="submit" value="cancel" class="icon-btn modal-close" aria-label="Close"><span data-icon="close"></span></button></header>
+        <div class="modal-body">
+          <p id="confirm-text"></p>
+          <div class="confirm-preview" id="confirm-preview" hidden></div>
+        </div>
+        <footer class="modal-footer">
+          <button type="submit" value="cancel" class="btn" autofocus>Cancel</button>
+          <button type="submit" value="ok" class="btn primary" id="confirm-ok">OK</button>
+        </footer>
+      </form>
+    </dialog>
+
+    <div class="toast" id="toast" role="status" aria-live="polite" hidden><span id="toast-text"></span></div>
+  </body>
+</html>