@cychien/ezdesign 0.9.2 → 0.11.0

package/dist/overlay.css

@@ -188,9 +188,11 @@
   color: var(--ez-ink);
   white-space: pre-wrap;
   word-break: break-word;
-  outline: none;
   overscroll-behavior: contain;
 }
+.ez-input:is(:focus, :focus-visible) {
+  outline: none;
+}
 .ez-input[data-empty]::before {
   content: attr(data-placeholder);
   position: absolute;
@@ -254,6 +256,8 @@
   background: #fff;
   border: 1px solid var(--ez-paper-edge);
   cursor: auto;
+  transform-origin: top left;
+  transform: scale(var(--ez-ui-scale, 1));
   box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
 }
 .ez-slash-head {

package/dist/overlay.js

@@ -147,23 +147,53 @@
   // src/client/slash.ts
   var MAX_QUERY = 24;
   var BREAK = /[\s ]/;
+  var PATH_CHAR = /[./\\:@#%&=?~+*_-]/;
+  function opensTrigger(prev) {
+    return BREAK.test(prev) || /[\p{P}\p{S}]/u.test(prev) && !PATH_CHAR.test(prev);
+  }
   var menuCount = 0;
+  function menuPosition(at, box, view, scale) {
+    const margin = 8 * scale;
+    const gap = 6 * scale;
+    const left = Math.max(margin, Math.min(at.left, view.width - box.width - margin));
+    const below = at.bottom + gap;
+    const above = at.top - box.height - gap;
+    const crowded = below + box.height > view.height - margin || at.top > view.height * 0.6;
+    const top = crowded && above >= margin ? above : Math.min(below, view.height - box.height - margin);
+    return { left, top };
+  }
   function detectSlash(before, trigger = "/") {
     const start = before.lastIndexOf(trigger);
     if (start === -1) return null;
     const prev = start === 0 ? "" : before[start - 1];
-    if (prev && !BREAK.test(prev)) return null;
+    if (prev && !opensTrigger(prev)) return null;
     const query = before.slice(start + 1);
     if (query.length > MAX_QUERY || BREAK.test(query)) return null;
     return { start, query };
   }
+  var WORD_BREAK = /[^\p{L}\p{N}]/u;
+  function rank(command, q) {
+    const names = [command.id, command.label].map((term) => term.toLowerCase());
+    if (names.some((name) => name.startsWith(q))) return 0;
+    if (names.some((name) => startsWord(name, q))) return 1;
+    if ([...names, ...command.keywords.map((k) => k.toLowerCase())].some((term) => term.includes(q))) return 2;
+    return null;
+  }
+  function startsWord(text, q) {
+    let at = text.indexOf(q);
+    while (at !== -1) {
+      if (at === 0 || WORD_BREAK.test(text.charAt(at - 1))) return true;
+      at = text.indexOf(q, at + 1);
+    }
+    return false;
+  }
   function filterCommands(commands, query) {
     const available = commands.filter((c) => c.enabled?.() ?? true);
     const q = query.trim().toLowerCase();
     if (!q) return available;
-    return available.filter(
-      (c) => [c.id, c.label, ...c.keywords].some((term) => term.toLowerCase().includes(q))
-    );
+    const ranked = available.map((command) => ({ command, rank: rank(command, q) })).filter((r) => r.rank !== null).sort((a, b) => a.rank - b.rank).map((r) => r.command);
+    if (ranked.length > 0) return ranked;
+    return available.filter((c) => c.description && startsWord(c.description.toLowerCase(), q));
   }
   function attachSlashMenu(editable, {
     mk,
@@ -203,11 +233,8 @@
       const at = slashRect();
       if (!at) return;
       const box = menu.getBoundingClientRect();
-      const left = Math.max(8, Math.min(at.left, view.innerWidth - box.width - 8));
-      const below = at.bottom + 6;
-      const above = at.top - box.height - 6;
-      const crowded = below + box.height > view.innerHeight - 8 || at.top > view.innerHeight * 0.6;
-      const top = crowded && above >= 8 ? above : Math.min(below, view.innerHeight - box.height - 8);
+      const scale = box.width / menu.offsetWidth || 1;
+      const { left, top } = menuPosition(at, box, { width: view.innerWidth, height: view.innerHeight }, scale);
       menu.style.left = `${left}px`;
       menu.style.top = `${top}px`;
     }
@@ -363,8 +390,19 @@
     return { close };
   }
 
+  // src/library/policy.ts
+  var VIDEO_CAP_BYTES = 2e8;
+
+  // src/attachment-policy.ts
+  var MAX_ATTACHMENT_BYTES = 8 * 1024 * 1024;
+  function isVideoMime(mime) {
+    return mime.startsWith("video/");
+  }
+  function attachmentByteLimit(mime) {
+    return isVideoMime(mime) ? VIDEO_CAP_BYTES : MAX_ATTACHMENT_BYTES;
+  }
+
   // src/client/attach.ts
-  var MAX_BYTES = 8 * 1024 * 1024;
   function directAttachments(api) {
     return {
       async upload(file) {
@@ -536,8 +574,9 @@
       placeCaretAfter(after);
     }
     function add(file) {
-      if (file.size > MAX_BYTES) {
-        showError(`${file.name || "\u9019\u500B\u6A94\u6848"} \u8D85\u904E\u55AE\u6A94 8 MB \u4E0A\u9650`);
+      const limit = attachmentByteLimit(file.type);
+      if (file.size > limit) {
+        showError(`${file.name || "\u9019\u500B\u6A94\u6848"} \u8D85\u904E\u55AE\u6A94 ${Math.round(limit / 1e6)} MB \u4E0A\u9650`);
         return;
       }
       const chip = fileChip(file.name || "\u8CBC\u4E0A\u7684\u5716\u7247");
@@ -723,6 +762,16 @@
       refs: () => draftRefs(snapshot()),
       pending: () => [...uploading].filter((c) => editable.contains(c)).length,
       pendingNames: () => draftPendingNames(snapshot()),
+      paintNotes(noteFor) {
+        editable.querySelectorAll(`[${CHIP_ATTR}], [${PICK_ATTR}]`).forEach((chip) => {
+          const ids = chip.hasAttribute(PICK_ATTR) ? parsePick(chip.getAttribute(PICK_ATTR)).map((f) => f.id) : [chip.getAttribute(CHIP_ATTR) ?? ""].filter(Boolean);
+          const text = ids.length ? noteFor(ids) : null;
+          let note = chip.querySelector(".ez-chip-note");
+          if (!text) return note?.remove();
+          note ?? (note = chip.querySelector(".ez-chip-name").insertAdjacentElement("afterend", mk("span", "ez-chip-note")));
+          note.textContent = text;
+        });
+      },
       // Either menu, whichever is up - at most one can be, since a trigger only
       // counts at the start of the word being typed.
       closeSlash: () => slash.close() || skillMenu.close(),
@@ -868,6 +917,7 @@
     };
   }
   var RELAY_TIMEOUT_MS = 1e4;
+  var UPLOAD_BYTES_PER_MS = 2e4;
   function relayLink(config) {
     const { shellOrigin } = config;
     const pending = /* @__PURE__ */ new Map();
@@ -891,13 +941,13 @@
         for (const listener of listeners) listener(data.snapshot);
       }
     });
-    const request = (op, transfer) => new Promise((resolve, reject) => {
+    const request = (op, timeoutMs = RELAY_TIMEOUT_MS) => new Promise((resolve, reject) => {
       const reqId = `r${++seq}-${Date.now().toString(36)}`;
       pending.set(reqId, { resolve, reject });
       window.setTimeout(() => {
         if (pending.delete(reqId)) reject(new Error("the review did not answer"));
-      }, RELAY_TIMEOUT_MS);
-      window.parent?.postMessage({ type: "ez:relay", reqId, op }, shellOrigin, transfer);
+      }, timeoutMs);
+      window.parent?.postMessage({ type: "ez:relay", reqId, op }, shellOrigin);
     });
     return {
       kind: "relay",
@@ -906,13 +956,12 @@
         await request({ op: "annotate", body });
       },
       attachments: {
+        // The file, not `arrayBuffer()`: a Blob is structured-cloned without reading
+        // it, so this frame never holds a 200 MB recording's bytes on its heap.
         upload: async (file) => {
-          const bytes = await file.arrayBuffer();
           const name = file.name || "image.png";
-          return await request(
-            { op: "upload", name, mime: file.type || "application/octet-stream", bytes },
-            [bytes]
-          );
+          const op = { op: "upload", name, mime: file.type || "application/octet-stream", file };
+          return await request(op, RELAY_TIMEOUT_MS + file.size / UPLOAD_BYTES_PER_MS);
         },
         discard: (id) => {
           request({ op: "discard-upload", id }).catch(() => {
@@ -2441,14 +2490,16 @@
   }
   function onScrollAttempt(e) {
     const w = e.type === "wheel" ? e : null;
-    if (w && (w.metaKey || w.ctrlKey) && window.parent !== window) {
+    const zoom = !!w && (w.metaKey || w.ctrlKey);
+    const boardPan = link.kind === "relay" && (mode !== "off" || pick2 !== null) && !isOwnUi(e.target);
+    if (w && (zoom || boardPan) && window.parent !== window) {
       e.preventDefault();
       const unit = w.deltaMode === 1 ? 16 : w.deltaMode === 2 ? window.innerHeight : 1;
       post({
         type: "ez:wheel",
         dx: w.deltaX * unit,
         dy: w.deltaY * unit,
-        ...link.kind === "relay" ? { zoom: true, at: { x: w.clientX, y: w.clientY } } : {}
+        ...zoom && link.kind === "relay" ? { zoom: true, at: { x: w.clientX, y: w.clientY } } : {}
       });
       return;
     }

package/dist/shell.css

@@ -771,6 +771,20 @@ body.ez-arranging .ez-frame {
   opacity: 0.4;
   cursor: default;
 }
+.ez-send-waiting {
+  animation: ez-send-wait 1.4s ease-in-out infinite;
+}
+@keyframes ez-send-wait {
+  50% {
+    opacity: 0.55;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ez-send-waiting {
+    animation: none;
+    opacity: 0.7;
+  }
+}
 .ez-notices {
   position: absolute;
   left: 0;
@@ -963,6 +977,219 @@ body.ez-arranging .ez-frame {
 .ez-update[hidden] {
   display: none;
 }
+.ez-devserver-card {
+  width: min(520px, calc(100% - 48px));
+  margin: max(48px, 12vh) auto 48px;
+  font-size: 13.5px;
+  line-height: 1.55;
+}
+.ez-devserver-card[hidden] {
+  display: none;
+}
+.ez-devserver-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.ez-devserver-text {
+  margin: 6px 0 0;
+  color: var(--muted-foreground);
+}
+.ez-devserver-hint {
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: var(--muted-foreground);
+}
+.ez-devserver-command {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--muted);
+}
+.ez-devserver-line,
+.ez-devserver-tool,
+.ez-devserver-log,
+.ez-devserver-input {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+.ez-devserver-line {
+  font-size: 13px;
+  -webkit-text-stroke: 0.3px currentColor;
+  color: var(--foreground);
+  word-break: break-all;
+}
+.ez-devserver-source {
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.ez-devserver-log {
+  margin: 14px 0 0;
+  max-height: 260px;
+  overflow: auto;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--ink);
+  color: #e8e6e1;
+  font-size: 11.5px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.ez-devserver-log:empty::before {
+  content: "\7b49\5f85\8f38\51fa\2026";
+  color: var(--ink-faint);
+}
+.ez-devserver-missing {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.ez-devserver-missing li {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.ez-devserver-tool {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border-radius: 5px;
+  background: var(--muted);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.ez-devserver-inline {
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--muted);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  font-size: 12px;
+}
+.ez-devserver-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 14px;
+}
+.ez-devserver-label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.ez-devserver-input {
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--foreground);
+  font-size: 13px;
+}
+.ez-devserver-input:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px var(--ring-halo);
+}
+.ez-devserver-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+}
+.ez-devserver-form .ez-devserver-actions {
+  margin-top: 4px;
+}
+.ez-devserver-go,
+.ez-devserver-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 7px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.ez-devserver-go {
+  border: 1px solid var(--primary);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
+}
+.ez-devserver-secondary {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--foreground);
+}
+.ez-devserver-go:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.ez-devserver-secondary:hover:not(:disabled) {
+  background: var(--muted);
+}
+.ez-devserver-go:disabled,
+.ez-devserver-secondary:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.ez-devserver-reason {
+  font-size: 12.5px;
+  color: var(--foreground);
+}
+.ez-devserver-asking {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: var(--muted-foreground);
+  animation: ez-devserver-pulse 1.6s ease-in-out infinite;
+}
+.ez-devserver-asking::before {
+  content: "";
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: ez-devserver-spin 0.8s linear infinite;
+}
+@keyframes ez-devserver-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+@keyframes ez-devserver-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+.ez-devserver-error {
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: oklch(45% 0.15 25);
+}
 .ez-section {
   padding: 14px;
   padding-block: 8px;
@@ -1289,6 +1516,15 @@ body.ez-arranging .ez-frame {
   line-height: 1.55;
   word-break: break-word;
 }
+.ez-qi-video {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ez-qi-video-failed {
+  color: var(--code-ink);
+}
 .ez-queue-item[data-editing] .ez-attach {
   margin: 6px 0 0;
 }
@@ -1384,6 +1620,9 @@ body.ez-arranging .ez-frame {
 .ez-agent-pill {
   --brand-nudge: 1px;
 }
+.ez-agent-pill[data-offline] {
+  color: var(--foreground);
+}
 .ez-agent-pill > svg,
 .ez-config-pill > svg {
   flex-shrink: 0;
@@ -1788,6 +2027,11 @@ body.ez-arranging .ez-frame {
 .ez-chip-pending {
   opacity: 0.55;
 }
+.ez-chip-note {
+  margin-left: 4px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
 .ez-file-chips {
   display: flex;
   flex-wrap: wrap;
@@ -2796,7 +3040,6 @@ body.ez-arranging .ez-frame {
 .ez-tabs-bar {
   display: flex;
   align-items: center;
-  gap: 8px;
   height: 42px;
   flex-shrink: 0;
   padding: 0 10px 0 0;
@@ -2914,6 +3157,7 @@ body.ez-arranging .ez-frame {
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  margin-left: 8px;
 }
 .ez-tab-new,
 .ez-canvas-menu {
@@ -3072,6 +3316,10 @@ body.ez-arranging .ez-frame {
 .ez-board[hidden] {
   display: none;
 }
+html.ez-on-board,
+html.ez-on-board body {
+  overscroll-behavior-x: none;
+}
 .ez-board.ez-space {
   cursor: grab;
 }
@@ -3097,6 +3345,17 @@ body.ez-arranging .ez-frame {
 .ez-board-frame[aria-selected=true] {
   outline-color: var(--arrange);
 }
+.ez-board-marquee {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  border: 1px solid var(--arrange);
+  background: color-mix(in oklab, var(--arrange) 8%, transparent);
+}
+.ez-board-marquee[hidden] {
+  display: none;
+}
 .ez-board-heads {
   position: absolute;
   left: 0;
@@ -3777,6 +4036,7 @@ body.ez-arranging .ez-frame {
 }
 .ez-library-detail-stage {
   position: relative;
+  container-type: size;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4061,3 +4321,39 @@ body.ez-arranging .ez-frame {
     animation-name: ez-fade-in;
   }
 }
+[data-host=desktop] .ez-tabs-bar {
+  padding-left: var(--traffic-light-room);
+  -webkit-app-region: drag;
+}
+[data-host=desktop][data-sidebar=open] .ez-tab:first-child {
+  margin-left: -1px;
+}
+[data-host=desktop] .ez-account {
+  display: none;
+}
+[data-host=desktop] .ez-tabs-bar button,
+[data-host=desktop] .ez-tabs-bar [role=tab],
+[data-host=desktop] .ez-tabs-bar .ez-menu {
+  -webkit-app-region: no-drag;
+}
+.ez-sidebar-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin: 0 6px 0 -4px;
+  border: none;
+  border-radius: 7px;
+  background: none;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+.ez-sidebar-toggle:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+[data-sidebar=closed] .ez-sidebar-toggle {
+  display: inline-flex;
+}