sharedserver 0.1.0__py3-none-any.whl

sharedserver/static/app.css

@@ -0,0 +1,226 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f6f8fa;
+  --panel: #ffffff;
+  --panel-subtle: #f6f8fa;
+  --text: #1f2328;
+  --muted: #636c76;
+  --border: #d0d7de;
+  --accent: #0969da;
+  --accent-hover: #0757b7;
+  --success: #1a7f37;
+  --danger: #cf222e;
+  --shadow: 0 1px 2px rgba(31, 35, 40, .06), 0 8px 24px rgba(140, 149, 159, .12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d1117;
+    --panel: #161b22;
+    --panel-subtle: #0d1117;
+    --text: #e6edf3;
+    --muted: #8d96a0;
+    --border: #30363d;
+    --accent: #2f81f7;
+    --accent-hover: #58a6ff;
+    --success: #3fb950;
+    --danger: #f85149;
+    --shadow: 0 0 0 1px rgba(240, 246, 252, .04), 0 16px 32px rgba(0, 0, 0, .24);
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button, input, textarea { font: inherit; }
+
+button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.topbar {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+  padding: 0 max(20px, calc((100vw - 1120px) / 2));
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--panel) 92%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.brand { display: flex; align-items: center; gap: 11px; }
+.brand div { display: flex; flex-direction: column; line-height: 1.2; }
+.brand strong { font-size: 15px; letter-spacing: -.01em; }
+.brand div span { margin-top: 3px; color: var(--muted); font-size: 11px; }
+
+.logo {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--text);
+  color: var(--panel);
+  font-size: 16px;
+  font-weight: 750;
+}
+
+.connection {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #bf8700; }
+.connection.online .status-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); }
+.connection.offline .status-dot { background: var(--danger); }
+
+.page { width: min(1120px, calc(100% - 32px)); margin: 32px auto 64px; }
+
+.panel {
+  overflow: hidden;
+  margin-bottom: 24px;
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
+.section-heading h1, .section-heading h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
+.section-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); }
+.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
+
+.button {
+  min-height: 34px;
+  padding: 5px 13px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  cursor: pointer;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.button.primary { border-color: var(--accent); background: var(--accent); color: white; }
+.button.primary:hover { background: var(--accent-hover); }
+.button.secondary { background: var(--panel-subtle); color: var(--text); }
+.button.secondary:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--text)); }
+.button.small { min-height: 29px; padding: 3px 9px; font-size: 12px; }
+
+#shared-text {
+  display: block;
+  width: 100%;
+  min-height: 190px;
+  resize: vertical;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-subtle);
+  color: var(--text);
+  font: 14px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+#shared-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+#shared-text:disabled { cursor: wait; opacity: .65; }
+.textarea-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; }
+
+.files-heading { align-items: center; }
+.toolbar { display: flex; gap: 8px; }
+
+.breadcrumbs { display: flex; align-items: center; min-height: 36px; margin: 0 -8px 12px; overflow-x: auto; white-space: nowrap; }
+.breadcrumbs button { padding: 4px 8px; border: 0; background: none; color: var(--accent); cursor: pointer; font-weight: 600; }
+.breadcrumbs button:last-child { color: var(--text); cursor: default; }
+.breadcrumbs span { color: var(--muted); }
+
+.drop-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 52px;
+  margin-bottom: 14px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: var(--panel-subtle);
+  color: var(--muted);
+  transition: border-color .15s, background .15s;
+}
+.drop-zone small::before { content: "· "; }
+.drop-zone.dragging { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent); }
+
+.upload-list:empty { display: none; }
+.upload-list { display: grid; gap: 8px; margin-bottom: 14px; }
+.upload-item { display: grid; grid-template-columns: minmax(100px, 1fr) 160px 50px; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
+.upload-item .upload-name { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
+.upload-item progress { width: 100%; accent-color: var(--accent); }
+.upload-item.error { color: var(--danger); }
+
+.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
+table { width: 100%; border-collapse: collapse; }
+th { padding: 9px 12px; background: var(--panel-subtle); color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; text-transform: uppercase; }
+th:last-child { text-align: right; }
+td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
+tbody tr:hover { background: color-mix(in srgb, var(--panel-subtle) 55%, transparent); }
+.name-cell { min-width: 220px; font-weight: 600; }
+.name-content { display: flex; align-items: center; min-width: 0; gap: 9px; }
+.file-icon { flex: 0 0 18px; width: 18px; color: var(--muted); text-align: center; }
+.entry-name, .folder-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.folder-link { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
+.size-cell, .date-cell { color: var(--muted); font-size: 12px; white-space: nowrap; }
+.actions { min-width: 160px; }
+.action-list { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
+.download-link { display: inline-grid; place-items: center; text-decoration: none; }
+.empty-state { padding: 48px 20px; color: var(--muted); text-align: center; }
+
+dialog { width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
+dialog::backdrop { background: rgba(0, 0, 0, .48); backdrop-filter: blur(2px); }
+dialog form { padding: 22px; }
+dialog h2 { margin: 0 0 18px; font-size: 19px; }
+dialog label { display: block; margin-bottom: 6px; font-weight: 600; }
+dialog input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-subtle); color: var(--text); }
+.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
+
+.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(380px, calc(100% - 40px)); padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--text); color: var(--panel); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }
+.toast.visible { opacity: 1; transform: translateY(0); }
+.toast.error { background: var(--danger); color: white; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (max-width: 700px) {
+  .topbar { min-height: 56px; padding: 0 16px; }
+  .page { width: min(100% - 20px, 1120px); margin-top: 16px; }
+  .panel { padding: 16px; border-radius: 10px; }
+  .section-heading { flex-direction: column; }
+  .files-heading { align-items: stretch; }
+  .toolbar { width: 100%; }
+  .toolbar .button { flex: 1; }
+  .clipboard-panel .section-heading .button { align-self: flex-start; }
+  .drop-zone { flex-direction: column; gap: 0; padding: 10px; }
+  .drop-zone small::before { content: ""; }
+  table { table-layout: fixed; }
+  .size-cell, .date-cell, th:nth-child(2), th:nth-child(3) { display: none; }
+  th:last-child { width: 138px; }
+  .name-cell, .actions { min-width: 0; }
+  .action-list { gap: 4px; }
+  .upload-item { grid-template-columns: minmax(80px, 1fr) 100px 38px; }
+}
+
+@media (max-width: 480px) {
+  .brand div span { display: none; }
+  th, td { padding: 9px 8px; }
+  .button.small { padding-inline: 7px; }
+}

sharedserver/static/app.js

@@ -0,0 +1,358 @@
+"use strict";
+
+const elements = {
+  connection: document.querySelector("#connection"),
+  text: document.querySelector("#shared-text"),
+  count: document.querySelector("#character-count"),
+  copyShared: document.querySelector("#copy-shared"),
+  breadcrumbs: document.querySelector("#breadcrumbs"),
+  fileList: document.querySelector("#file-list"),
+  empty: document.querySelector("#empty-state"),
+  chooseFiles: document.querySelector("#choose-files"),
+  fileInput: document.querySelector("#file-input"),
+  dropZone: document.querySelector("#drop-zone"),
+  uploadList: document.querySelector("#upload-list"),
+  newFolder: document.querySelector("#new-folder"),
+  folderDialog: document.querySelector("#folder-dialog"),
+  folderForm: document.querySelector("#folder-form"),
+  folderName: document.querySelector("#folder-name"),
+  cancelFolder: document.querySelector("#cancel-folder"),
+  toast: document.querySelector("#toast"),
+};
+
+let currentPath = "";
+let socket;
+let reconnectDelay = 500;
+let toastTimer;
+
+function showToast(message, isError = false) {
+  clearTimeout(toastTimer);
+  elements.toast.textContent = message;
+  elements.toast.className = `toast visible${isError ? " error" : ""}`;
+  toastTimer = setTimeout(() => { elements.toast.className = "toast"; }, 3200);
+}
+
+async function api(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    let message = `Request failed (${response.status})`;
+    try { message = (await response.json()).detail || message; } catch (_) { /* no JSON body */ }
+    throw new Error(message);
+  }
+  return response;
+}
+
+function setConnection(state, label) {
+  elements.connection.className = `connection ${state}`;
+  elements.connection.lastElementChild.textContent = label;
+}
+
+function connectClipboard() {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  socket = new WebSocket(`${protocol}//${location.host}/ws`);
+  setConnection("pending", "Connecting");
+
+  socket.addEventListener("open", () => {
+    reconnectDelay = 500;
+    setConnection("online", "Live sync connected");
+  });
+  socket.addEventListener("message", event => {
+    let message;
+    try { message = JSON.parse(event.data); } catch (_) { return; }
+    if (message.type === "clipboard") {
+      elements.text.disabled = false;
+      if (elements.text.value !== message.content) elements.text.value = message.content;
+      updateCount();
+    } else if (message.type === "error") {
+      showToast(message.message, true);
+    }
+  });
+  socket.addEventListener("close", () => {
+    elements.text.disabled = true;
+    setConnection("offline", "Connection lost, retrying");
+    setTimeout(connectClipboard, reconnectDelay);
+    reconnectDelay = Math.min(reconnectDelay * 2, 8000);
+  });
+  socket.addEventListener("error", () => socket.close());
+}
+
+function updateCount() {
+  const count = elements.text.value.length;
+  elements.count.textContent = `${count.toLocaleString()} ${count === 1 ? "character" : "characters"}`;
+}
+
+elements.text.addEventListener("input", () => {
+  updateCount();
+  if (socket?.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({type: "clipboard", content: elements.text.value}));
+  }
+});
+
+async function copyText(text) {
+  if (navigator.clipboard?.writeText && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const helper = document.createElement("textarea");
+  helper.value = text;
+  helper.style.position = "fixed";
+  helper.style.opacity = "0";
+  document.body.append(helper);
+  helper.select();
+  const copied = document.execCommand("copy");
+  helper.remove();
+  if (!copied) throw new Error("Clipboard access was denied by the browser");
+}
+
+elements.copyShared.addEventListener("click", async () => {
+  try {
+    await copyText(elements.text.value);
+    showToast("Text copied");
+  } catch (error) { showToast(error.message, true); }
+});
+
+function pathParams(path) {
+  const params = new URLSearchParams();
+  params.set("path", path);
+  return params;
+}
+
+function renderBreadcrumbs(path) {
+  elements.breadcrumbs.replaceChildren();
+  const parts = path ? path.split("/") : [];
+  const crumbs = [{name: "Shared folder", path: ""}];
+  let built = "";
+  for (const part of parts) {
+    built = built ? `${built}/${part}` : part;
+    crumbs.push({name: part, path: built});
+  }
+  crumbs.forEach((crumb, index) => {
+    if (index) {
+      const separator = document.createElement("span");
+      separator.textContent = "/";
+      elements.breadcrumbs.append(separator);
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = crumb.name;
+    if (index < crumbs.length - 1) button.addEventListener("click", () => loadDirectory(crumb.path));
+    elements.breadcrumbs.append(button);
+  });
+}
+
+function formatSize(bytes) {
+  if (bytes === null) return "—";
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  return `${(bytes / (1024 ** unit)).toFixed(unit ? 1 : 0)} ${units[unit]}`;
+}
+
+function button(label, action, accessibleLabel = label) {
+  const node = document.createElement("button");
+  node.type = "button";
+  node.className = "button secondary small";
+  node.textContent = label;
+  node.setAttribute("aria-label", accessibleLabel);
+  node.title = accessibleLabel;
+  node.addEventListener("click", action);
+  return node;
+}
+
+function renderEntry(entry) {
+  const row = document.createElement("tr");
+  const nameCell = document.createElement("td");
+  nameCell.className = "name-cell";
+  const nameContent = document.createElement("div");
+  nameContent.className = "name-content";
+  const icon = document.createElement("span");
+  icon.className = "file-icon";
+  icon.textContent = entry.is_directory ? "▰" : "▤";
+  nameContent.append(icon);
+
+  if (entry.is_directory) {
+    const link = document.createElement("button");
+    link.type = "button";
+    link.className = "folder-link";
+    link.textContent = entry.name;
+    link.title = entry.name;
+    link.addEventListener("click", () => loadDirectory(entry.path));
+    nameContent.append(link);
+  } else {
+    const name = document.createElement("span");
+    name.className = "entry-name";
+    name.textContent = entry.name;
+    name.title = entry.name;
+    nameContent.append(name);
+  }
+  nameCell.append(nameContent);
+
+  const sizeCell = document.createElement("td");
+  sizeCell.className = "size-cell";
+  sizeCell.textContent = formatSize(entry.size);
+  const dateCell = document.createElement("td");
+  dateCell.className = "date-cell";
+  dateCell.textContent = new Date(entry.modified).toLocaleString();
+  const actions = document.createElement("td");
+  actions.className = "actions";
+  const actionList = document.createElement("div");
+  actionList.className = "action-list";
+
+  if (!entry.is_directory) {
+    if (entry.copy_kind === "text") {
+      actionList.append(button("Copy", () => copyFileText(entry.path), "Copy file text"));
+    } else if (entry.copy_kind === "image") {
+      actionList.append(button("Copy", () => copyImage(entry.path), "Copy image"));
+    }
+    const download = document.createElement("a");
+    download.className = "button secondary small download-link";
+    download.textContent = "Download";
+    download.setAttribute("aria-label", `Download ${entry.name}`);
+    download.title = `Download ${entry.name}`;
+    download.href = `/api/download?${pathParams(entry.path)}`;
+    actionList.append(download);
+  }
+  actions.append(actionList);
+  row.append(nameCell, sizeCell, dateCell, actions);
+  return row;
+}
+
+async function loadDirectory(path = currentPath) {
+  try {
+    const response = await api(`/api/files?${pathParams(path)}`);
+    const listing = await response.json();
+    currentPath = listing.path;
+    renderBreadcrumbs(currentPath);
+    elements.fileList.replaceChildren(...listing.entries.map(renderEntry));
+    elements.empty.hidden = listing.entries.length !== 0;
+  } catch (error) { showToast(error.message, true); }
+}
+
+async function copyFileText(path) {
+  try {
+    const response = await api(`/api/text?${pathParams(path)}`);
+    await copyText((await response.json()).content);
+    showToast("File contents copied");
+  } catch (error) { showToast(error.message, true); }
+}
+
+function blobToPng(blob) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    const url = URL.createObjectURL(blob);
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      canvas.getContext("2d").drawImage(image, 0, 0);
+      canvas.toBlob(result => {
+        URL.revokeObjectURL(url);
+        result ? resolve(result) : reject(new Error("Image conversion failed"));
+      }, "image/png");
+    };
+    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error("Could not read the image")); };
+    image.src = url;
+  });
+}
+
+async function copyImage(path) {
+  if (!window.ClipboardItem || !navigator.clipboard?.write) {
+    showToast("Image copying is unavailable here. Download the image instead.", true);
+    return;
+  }
+  try {
+    const pngPromise = api(`/api/image?${pathParams(path)}`)
+      .then(response => response.blob())
+      .then(blobToPng);
+    await navigator.clipboard.write([new ClipboardItem({"image/png": pngPromise})]);
+    showToast("Image copied");
+  } catch (error) { showToast(`Copy failed: ${error.message}`, true); }
+}
+
+function uploadFile(file) {
+  return new Promise((resolve, reject) => {
+    const item = document.createElement("div");
+    item.className = "upload-item";
+    const name = document.createElement("span");
+    name.className = "upload-name";
+    name.textContent = file.name;
+    const progress = document.createElement("progress");
+    progress.max = 100;
+    progress.value = 0;
+    const percent = document.createElement("span");
+    percent.textContent = "0%";
+    item.append(name, progress, percent);
+    elements.uploadList.append(item);
+
+    const params = pathParams(currentPath);
+    params.set("filename", file.name);
+    const request = new XMLHttpRequest();
+    request.open("PUT", `/api/upload?${params}`);
+    request.setRequestHeader("Content-Type", "application/octet-stream");
+    request.upload.addEventListener("progress", event => {
+      if (!event.lengthComputable) return;
+      const value = Math.round((event.loaded / event.total) * 100);
+      progress.value = value;
+      percent.textContent = `${value}%`;
+    });
+    request.addEventListener("load", () => {
+      if (request.status >= 200 && request.status < 300) {
+        progress.value = 100;
+        percent.textContent = "Done";
+        setTimeout(() => item.remove(), 1500);
+        resolve();
+      } else {
+        let message = `Upload failed (${request.status})`;
+        try { message = JSON.parse(request.responseText).detail || message; } catch (_) { /* no JSON body */ }
+        item.classList.add("error");
+        percent.textContent = "Failed";
+        reject(new Error(`${file.name}: ${message}`));
+      }
+    });
+    request.addEventListener("error", () => reject(new Error(`${file.name}: network error`)));
+    request.send(file);
+  });
+}
+
+async function uploadFiles(files) {
+  for (const file of files) {
+    try { await uploadFile(file); } catch (error) { showToast(error.message, true); }
+  }
+  elements.fileInput.value = "";
+  await loadDirectory();
+}
+
+elements.chooseFiles.addEventListener("click", () => elements.fileInput.click());
+elements.fileInput.addEventListener("change", () => uploadFiles([...elements.fileInput.files]));
+["dragenter", "dragover"].forEach(type => elements.dropZone.addEventListener(type, event => {
+  event.preventDefault();
+  elements.dropZone.classList.add("dragging");
+}));
+["dragleave", "drop"].forEach(type => elements.dropZone.addEventListener(type, event => {
+  event.preventDefault();
+  elements.dropZone.classList.remove("dragging");
+}));
+elements.dropZone.addEventListener("drop", event => uploadFiles([...event.dataTransfer.files]));
+
+elements.newFolder.addEventListener("click", () => {
+  elements.folderForm.reset();
+  elements.folderDialog.showModal();
+  elements.folderName.focus();
+});
+elements.cancelFolder.addEventListener("click", () => elements.folderDialog.close());
+elements.folderForm.addEventListener("submit", async event => {
+  event.preventDefault();
+  try {
+    await api("/api/directories", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({path: currentPath, name: elements.folderName.value}),
+    });
+    elements.folderDialog.close();
+    showToast("Folder created");
+    await loadDirectory();
+  } catch (error) { showToast(error.message, true); }
+});
+
+connectClipboard();
+loadDirectory();

sharedserver/templates/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#0d1117">
+  <title>SharedServer</title>
+  <link rel="stylesheet" href="/static/app.css">
+  <script src="/static/app.js" defer></script>
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo" aria-hidden="true">S</span>
+      <div>
+        <strong>SharedServer</strong>
+        <span>Local network sharing</span>
+      </div>
+    </div>
+    <div id="connection" class="connection pending" role="status">
+      <span class="status-dot"></span>
+      <span>Connecting</span>
+    </div>
+  </header>
+
+  <main class="page">
+    <section class="panel clipboard-panel" aria-labelledby="clipboard-title">
+      <div class="section-heading">
+        <div>
+          <p class="eyebrow">Live sync</p>
+          <h1 id="clipboard-title">Shared text clipboard</h1>
+          <p>Type on any device and every connected device updates instantly.</p>
+        </div>
+        <button id="copy-shared" class="button secondary" type="button">Copy text</button>
+      </div>
+      <label class="sr-only" for="shared-text">Shared text</label>
+      <textarea id="shared-text" rows="8" maxlength="1000000" placeholder="Paste or type text here…" disabled></textarea>
+      <div class="textarea-meta"><span id="character-count">0 characters</span><span>Stored in memory only</span></div>
+    </section>
+
+    <section class="panel files-panel" aria-labelledby="files-title">
+      <div class="section-heading files-heading">
+        <div>
+          <p class="eyebrow">Shared directory</p>
+          <h2 id="files-title">File browser</h2>
+        </div>
+        <div class="toolbar">
+          <button id="new-folder" class="button secondary" type="button">New folder</button>
+          <button id="choose-files" class="button primary" type="button">Upload files</button>
+          <input id="file-input" type="file" multiple hidden>
+        </div>
+      </div>
+
+      <nav id="breadcrumbs" class="breadcrumbs" aria-label="Current path"></nav>
+
+      <div id="drop-zone" class="drop-zone">
+        <span>Drop files here to upload</span>
+        <small>Existing files will not be overwritten</small>
+      </div>
+      <div id="upload-list" class="upload-list" aria-live="polite"></div>
+
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr><th>Name</th><th>Size</th><th>Modified</th><th><span class="sr-only">Actions</span></th></tr>
+          </thead>
+          <tbody id="file-list"></tbody>
+        </table>
+        <div id="empty-state" class="empty-state" hidden>This folder is empty</div>
+      </div>
+    </section>
+  </main>
+
+  <dialog id="folder-dialog">
+    <form id="folder-form" method="dialog">
+      <h2>New folder</h2>
+      <label for="folder-name">Folder name</label>
+      <input id="folder-name" name="name" maxlength="255" autocomplete="off" required>
+      <div class="dialog-actions">
+        <button class="button secondary" value="cancel" type="button" id="cancel-folder">Cancel</button>
+        <button class="button primary" value="create" type="submit">Create</button>
+      </div>
+    </form>
+  </dialog>
+
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+</body>
+</html>