@heycys/gallery 0.1.1 → 0.2.0

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.1.1 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
+@heycys/gallery 0.2.0 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
 
 ## @asamuzakjp/css-color 5.1.11
 
@@ -3254,7 +3254,7 @@ SOFTWARE.
 
 ## Lucide icons
 
-A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, and the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab).
+A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab), and the default home page's house.
 
 ```
 ISC License

package/browser/editor/components/align.mjs

@@ -0,0 +1,58 @@
+// A block's alignment, and a text block's indent (对齐与缩进, the block menu's: Feishu's 缩进和对齐 ›;
+// components that say `toggles: ALIGN_TOGGLES`, a paragraph and a heading; a table, whose frame is placed
+// on the page the same way, says `toggles: ALIGN_PLACES`). Class switches the file keeps and the
+// kit draws (src/render/kit/styles/flow.css, table.css): centred or right-aligned (doc-align-center,
+// doc-align-right; left is neither, the kit's own), and for a text block moved in by levels of two body
+// characters (doc-indent-1 … doc-indent-8). The page editor's block menu sets them (page/align.mjs), Enter carries them
+// to the block it makes (core.mjs newBlock), and Backspace at a block's start takes them off one at a
+// time before it joins or deletes (typing/: the alignment first, then a level of indent, Feishu's
+// order).
+
+import { TEXT_ALIGN_CLASSES } from "../../shared/components/paragraph.mjs";
+
+/** The alignments a text block may have, by name: none is left (the kit's own). */
+export const ALIGNS = { center: "doc-align-center", right: "doc-align-right" };
+
+/** The indents' classes, level 1 first (the kit's: src/shared/components/paragraph.mjs). */
+export const INDENTS = TEXT_ALIGN_CLASSES.filter((name) => name.startsWith("doc-indent-"));
+
+/** The deepest indent. */
+export const INDENT_MOST = INDENTS.length;
+
+/** The classes of a text block's alignment and indent: its component's `toggles`. */
+export const ALIGN_TOGGLES = TEXT_ALIGN_CLASSES;
+
+/** The classes of a block's alignment alone (a table's frame: its component's `toggles`), the same two. */
+export const ALIGN_PLACES = Object.values(ALIGNS);
+
+/** The elements that take a text block's alignment and indent (a paragraph, a heading; a cell's alignment is its own classes'). */
+export const TEXT_BLOCKS = "p, h1, h2, h3, h4";
+
+/** A block's alignment: "left", "center" or "right". */
+export const alignOf = (element) => Object.keys(ALIGNS).find((name) => element.classList.contains(ALIGNS[name])) ?? "left";
+
+/** A block's indent: 0 to INDENT_MOST. */
+export const indentOf = (element) => INDENTS.findIndex((name) => element.classList.contains(name)) + 1;
+
+/** The look (class switches) that gives a block the alignment `name` ("left": none). */
+export const alignLook = (name) => ({ classes: Object.fromEntries(Object.entries(ALIGNS).map(([each, cls]) => [cls, each === name])) });
+
+/** The look that gives a block the indent `level` (0: none). */
+export const indentLook = (level) => ({ classes: Object.fromEntries(INDENTS.map((cls, index) => [cls, index + 1 === level])) });
+
+/**
+ * The alignment and indent of text block `from` (a paragraph or a heading) given to `to`, a paragraph
+ * made from it (Enter's split: core.mjs newBlock, the half after the caret or the empty line before it,
+ * as a word processor's new line keeps its paragraph's). Returns `to`.
+ */
+export function carry(from, to) {
+  if (!from?.matches?.(TEXT_BLOCKS)) return to;
+  for (const name of ALIGN_TOGGLES) if (from.classList.contains(name)) to.classList.add(name);
+  return to;
+}
+
+/** Whether a block takes an alignment (its kind's toggles hold it; `toggles`: TOGGLES of its kind). */
+export const aligns = (toggles) => Boolean(toggles?.includes(ALIGNS.center));
+
+/** Whether a block takes an indent too, as a text block does (a table's alignment has none). */
+export const indents = (toggles) => Boolean(toggles?.includes(INDENTS[0]));

package/browser/editor/components/code/index.mjs

@@ -67,7 +67,7 @@ export default {
   components: ["doc-code"],
   placeholders: { title: t("请输入代码块名称") }, // Feishu's
   hosts: {
-    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: true, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // plain text, its lines kept
+    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: false, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // Enter stays inside its code, including at the start
     codeTitle: { name: t("代码块标题"), caps: CODE_CAPS, parts: [["code", "title"]] }, // one line; empty, the kit shows 代码块
   },
   types: {

package/browser/editor/components/columns/page.mjs

@@ -49,11 +49,11 @@ export function ratiosAfterRemove(ratios, removed) {
 /**
  * The gap after column `index` dragged by `fraction` of the row's width: only the two columns
  * beside it change, snapping to their equal split or to a tenth of the row for the left one when
- * within 1%, both keeping the least share (1/24, or more where `least` says so for a part: the
+ * within `near` of the row (page/columns/ gives 5px of it; 1% when not said; 0: no snapping), both keeping the least share (1/24, or more where `least` says so for a part: the
  * share its content needs, a flowchart's node as narrow as the kit lets it be, page/columns/).
  * `ratios` are those when the drag started.
  */
-export function ratiosAfterResize(ratios, index, fraction, least = []) {
+export function ratiosAfterResize(ratios, index, fraction, least = [], near = 0.01) {
   const left = ratios[index];
   const right = ratios[index + 1];
   const low = Math.max(MIN_RATIO, least[index] ?? 0);
@@ -62,8 +62,8 @@ export function ratiosAfterResize(ratios, index, fraction, least = []) {
   let moved = fraction;
   const equal = (left + right) / 2 - left;
   const step = Math.round(10 * (left + moved)) / 10 - left;
-  if (Math.abs(equal - moved) < 0.01) moved = equal;
-  else if (Math.abs(step - moved) < 0.01) moved = step;
+  if (Math.abs(equal - moved) < near) moved = equal;
+  else if (Math.abs(step - moved) < near) moved = step;
   moved = Math.min(Math.max(moved, low - left), right - high);
   const out = [...ratios];
   out[index] = left + moved;

package/browser/editor/components/embed/index.mjs

@@ -24,8 +24,8 @@ export const HEIGHT = "--doc-embed-height";
 /** The frame's height as a size: the least and the most (px) it may be given. */
 export const HEIGHT_SIZE = { min: 96, max: 2000, px: true };
 
-/** The sandbox of a web page's frame (Notion's), and of an HTML file's (no origin of its own). */
-export const WEB_SANDBOX = "allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin allow-storage-access-by-user-activation allow-popups-to-escape-sandbox";
+/** The sandbox of a web page's frame (Notion's: the sidebar's web links have it too, shared/web-links.mjs), and of an HTML file's (no origin of its own). */
+export { WEB_SANDBOX } from "../../../shared/web-links.mjs";
 export const FILE_SANDBOX = "allow-scripts allow-popups allow-forms allow-modals";
 
 /**

package/browser/editor/components/embed/page.mjs

@@ -37,7 +37,7 @@ const STYLE = `
   ${gestureLock("data-ge-embed-resize=\"right\"", { cursor: "nwse-resize" })}
   ${gestureLock("data-ge-embed-resize=\"left\"", { cursor: "nesw-resize" })}
   .ge-layer > .ge-embed-corner { pointer-events: auto; }
-  /* A corner handle: a plain gray bar bent round the frame's corner, no border (as the image's sides). */
+  /* A corner handle: a plain gray bar bent round the frame's corner, no border. */
   .ge-embed-corner { width: 20px; height: 20px; cursor: nwse-resize; }
   .ge-embed-corner[data-side="left"] { cursor: nesw-resize; }
   .ge-embed-corner::after { content: ""; position: absolute; bottom: 5px; width: 9px; height: 9px; border: 0 solid light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); border-bottom-width: 3px; transition: border-color 120ms ease; }

package/browser/editor/components/file/page.mjs

@@ -58,9 +58,9 @@ export function create({ pages, fileUrl }) {
     onEmbed: (url) => fetchInto(figure, url),
   });
 
-  async function uploadInto(figure, file) {
+  async function uploadInto(figure, file, options = {}) {
     if (file.size > MAX_BYTES) return say(t("文件太大（最多 {0}）。", sizeLimit("file")), "error");
-    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file)));
+    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file), options));
   }
 
   const fetchInto = (figure, url) => media.attempt(figure, t("正在下载…"), t("无法下载这个文件"), async () => place(figure, await media.uploadUrl(url)));
@@ -69,13 +69,13 @@ export function create({ pages, fileUrl }) {
   // with its caption), never the same element, so that undo brings back what stood there (a
   // placeholder never written, a block as it was) and the file loses the new one. One undo step; the
   // block selected.
-  function place(figure, answer) {
+  function place(figure, answer, { pasted = false } = {}) {
     if (!figure.isConnected) return;
     const doc = figure.ownerDocument;
     const replacing = Boolean(linkOf(figure));
     const next = newFile(doc);
     next.replaceChildren(...fileParts(doc, answer, fileUrl(answer.path), captionOf(figure)?.innerHTML ?? ""));
-    media.place(figure, next, { replacing });
+    media.place(figure, next, { replacing, pasted });
     if (replacing) say(t("已替换文件 · Ctrl+Z 撤销"));
   }
 

package/browser/editor/components/flowchart/add.mjs

@@ -10,20 +10,21 @@ import { t } from "../../../shared/i18n/index.mjs";
 // card's vertical middle (the layer over the page draws it: overlay-layer.mjs, so it scrolls with
 // the node and never touches the report's markup; above the handle and a section's bar there,
 // IN_LAYER button, so the half of a row's last node's button over its section's bar is the
-// button's), a white surface with a hairline border and a thin outline plus, grey once the pointer
-// is on it (Notion-flat: no blue). A click adds a node right
+// button's), a white surface lifted by a soft shadow (no line round it) and a thin outline plus, the plus
+// darker once the pointer is on it and the surface grey only while it is pressed (the editor's icon button
+// look, look.mjs BUTTONS; Notion-flat: no blue). A click adds a node right
 // after it (page.mjs addAfter: one undo step, the caret in its empty first line, bold armed); the
 // press itself moves no caret and starts no box selection. It goes as the pointer leaves the node
 // (and the button), as a drag or a box selection begins, and with any structural change that takes
 // its node away.
 
 const STYLE = `
-  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 1px solid light-dark(rgb(44 44 43 / 16%), rgb(243 243 243 / 18%)); border-radius: 50%;
-    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px light-dark(rgb(25 25 25 / 6%), rgb(0 0 0 / 20%));
-    opacity: 0; transition: opacity .12s, background-color .12s, color .12s, border-color .12s; }
+  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
+    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%));
+    opacity: 0; transition: opacity .12s, background-color .12s, color .12s; }
   .ge-flow-add[data-shown] { opacity: 1; }
   .ge-flow-add > svg { display: block; width: 14px; height: 14px; margin: 3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
-  .ge-flow-add:hover { background: light-dark(#f4f4f3, #2f2f2f); color: var(--ge-ico); border-color: light-dark(rgb(44 44 43 / 24%), rgb(255 255 255 / 26%)); }
+  .ge-flow-add:hover { color: var(--ge-ico); }
   .ge-flow-add:active { background: light-dark(#ebebea, #404040); }
   @media (prefers-reduced-motion: reduce) { .ge-flow-add { transition: none; } }
 `;

package/browser/editor/components/flowchart/page.mjs

@@ -266,7 +266,7 @@ const NODE_CHOICES = [
 const STYLE = `
   [data-ge-editing] ol.doc-flow > li { --ge-text-radius: 8px; }
   [data-ge-editing] ol.doc-flow > li > * { --ge-text-radius: 3px; }
-  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 600; }
+  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 700; }
 `;
 
 /**

package/browser/editor/components/heading/index.mjs

@@ -1,4 +1,5 @@
 import { headingIcon } from "../icons.mjs";
+import { ALIGN_TOGGLES } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 标题 1–4: headings h1–h4 (the fourth is body-sized, set apart by its weight; an author's h5 or h6 is
@@ -10,7 +11,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // heading into a paragraph), clipboard/own/ and src/transfer/markdown.mjs (written by its level: `clipboard`).
 // Folding its section: page/fold/ (the triangle right of its words, what is hidden, the section going with
 // it wherever blocks are taken away whole) and page.mjs (Ctrl/⌘+Enter in its words).
-// Its color (颜色 in the block menu): class switches, colors.mjs.
+// Its color (颜色 in the block menu): class switches, colors.mjs; its alignment and indent (对齐与缩进), align.mjs.
 // Its look: the kit's styles/flow.css (src/render/kit/).
 // How a heading of a level is written out: # … #### by level.
 const writtenAs = (level) => ({ kind: "heading", level });
@@ -23,7 +24,7 @@ export default {
     heading: {
       name: t("标题"),
       match: [{ rank: 190, tag: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
-      colors: ["text", "background"],
+      colors: ["text", "background"], toggles: ALIGN_TOGGLES,
       emptyIsNothing: true, fromWords: true,
       clipboard: { of: (unit) => writtenAs(Math.min(4, Number(unit.localName.slice(1)) || 2)) }, // h5 and h6, which no type stands for, as heading 4
     },
@@ -31,22 +32,22 @@ export default {
   types: {
     heading1: {
       turn: 3, menu: ["basic", 3],
-      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
+      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, emptyToText: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
       label: t("标题 1"), icon: headingIcon(1), hint: "#", markdown: [{ match: /^(#|＃)[ \u00a0\u3000]$/ }], words: "标题1 一级标题 大标题 biaoti1 yiji bt1 bt heading1 h1 title",
     },
     heading2: {
       turn: 4, menu: ["basic", 4],
-      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
+      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, emptyToText: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
       label: t("标题 2"), icon: headingIcon(2), hint: "##", markdown: [{ match: /^(##|＃＃)[ \u00a0\u3000]$/ }], words: "标题2 二级标题 biaoti2 erji bt2 bt heading2 h2",
     },
     heading3: {
       turn: 5, menu: ["basic", 5],
-      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
+      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, emptyToText: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
       label: t("标题 3"), icon: headingIcon(3), hint: "###", markdown: [{ match: /^(###|＃＃＃)[ \u00a0\u3000]$/ }], words: "标题3 三级标题 小标题 biaoti3 sanji bt3 bt heading3 h3",
     },
     heading4: {
       turn: 6, menu: ["basic", 6],
-      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
+      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, emptyToText: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
       label: t("标题 4"), icon: headingIcon(4), hint: "####", markdown: [{ match: /^(####|＃＃＃＃)[ \u00a0\u3000]$/ }], words: "标题4 四级标题 biaoti4 siji bt4 bt heading4 h4",
     },
   },

package/browser/editor/components/icons.mjs

@@ -24,6 +24,17 @@ export const PAGE_ICON = svg('<path d="M5 18.33a1.67 1.67 0 0 1-1.67-1.66V3.33a1
 /** A section (分区): blocks gathered between brackets, the block menu's 组成新分区 and the section's line in 设置 › 组件列表. */
 export const SECTION_ICON = svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2H6M14 3.75h.75a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H14"/><path d="M7.25 7.75h5.5M7.25 12.25h5.5"/>');
 
+/**
+ * A custom block (自定义块): a card of text, a rounded square with a short title line over two longer
+ * ones. The one mark of a block that has no picture of its own: the "/" menu's row and a block's menu,
+ * 添加自定义块's library, and a custom block's line in 设置 › 组件列表. On the 20 box of the icons beside
+ * it, so that the menus' stroke (1.25 at 20px) is its stroke too.
+ */
+export const BLOCK_ICON = svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><path d="M6.75 7h3.5M6.75 10h6.5M6.75 13h4.5"/>');
+
+/** 设置: a ring with eight short rays, the board's card menu and a custom block's handle menu. */
+export const SETTINGS_ICON = svg('<circle cx="10" cy="10" r="2.25"/><path d="M10 3.25v1.5M10 15.25v1.5M3.25 10h1.5M15.25 10h1.5M5.2 5.2l1.06 1.06M13.74 13.74l1.06 1.06M5.2 14.8l1.06-1.06M13.74 6.26l1.06-1.06"/>');
+
 /** A detail card (详情卡片): a card with two lines of text. */
 export const DIALOG_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2.5"/><path d="M6.5 8h7M6.5 11.5h4.5"/>');
 export const LINK_ICON = svg('<g transform="rotate(45 10 10)"><path d="M7 8.5V6a3 3 0 0 1 6 0v2.5M7 11.5V14a3 3 0 0 0 6 0v-2.5M10 7.5v5"/></g>'); // two U's and the line between them, turned 45°

package/browser/editor/components/image/crop.mjs

@@ -1,5 +1,5 @@
 import { Z } from "../../../shared/layers.mjs";
-import { addStyle, element, mount } from "../../page/ui.mjs";
+import { addStyle, element, mount, textButton } from "../../page/ui.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 裁剪图片 (notion-lite's blocks/image/edit/crop.js, Notion's 31868): a dialog over the page, the
@@ -19,13 +19,10 @@ const STYLE = `
     box-shadow: 0 0 0 1px var(--ge-outline), 0 20px 40px rgb(0 0 0 / 30%); }
   .ge-crop-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ge-line); }
   .ge-crop-title { flex: 1; text-align: center; font-weight: 500; white-space: nowrap; }
-  .ge-crop-shape, .ge-crop-cancel, .ge-crop-save { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
-  .ge-crop-shape { color: var(--ge-tx2); }
+  .ge-crop-shape { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx2); font: inherit; cursor: pointer; }
   .ge-crop-shape[aria-pressed="true"] { background: var(--ge-fill); color: var(--ge-accent-text); }
-  .ge-crop-shape:hover, .ge-crop-cancel:hover { background: var(--ge-hover); }
-  .ge-crop-cancel { color: var(--ge-tx2); }
-  .ge-crop-save { background: var(--ge-accent); color: #fff; font-weight: 500; }
-  .ge-crop-save:hover { background: var(--ge-accent-hover); }
+  .ge-crop-shape:hover { background: var(--ge-hover); }
+  .ge-crop-shape[aria-pressed="true"]:hover { background: var(--ge-btn-primary-hover); }
   .ge-crop-body { display: flex; justify-content: center; padding: 30px; background: light-dark(#f7f6f3, #1f1f1f); }
   .ge-crop-stage { position: relative; overflow: hidden; }
   .ge-crop-stage > img { display: block; max-width: 70vw; max-height: 75vh; pointer-events: none; }
@@ -56,8 +53,8 @@ export function openCrop(img, save, from = {}) {
     button.addEventListener("click", () => shape(ratio, button));
     return button;
   });
-  const cancel = element("button", { type: "button", class: "ge-crop-cancel", text: t("取消") });
-  const done = element("button", { type: "button", class: "ge-crop-save", text: t("保存") });
+  const cancel = textButton(t("取消"), null, { class: "ge-crop-cancel" });
+  const done = textButton(t("保存"), null, { class: "ge-crop-save", primary: true });
   const dialog = element("div", { class: "ge-crop-dialog", role: "dialog", "aria-label": t("裁剪图片") },
     element("div", { class: "ge-crop-bar" }, ...shapes, element("div", { class: "ge-crop-title", text: t("裁剪图片") }), cancel, done),
     element("div", { class: "ge-crop-body" }, stage));

package/browser/editor/components/image/index.mjs

@@ -36,6 +36,8 @@ export default {
       name: t("图片"),
       match: [{ rank: 45, tag: "figure", class: "doc-image" }],
       boxed: true,
+      // Selected alone with its picture, its corner grips and toolbar show it: no selection fill (selection/index.mjs).
+      unfilled: ":scope > img",
       toggles: ALIGN,
       sizes: { [SPAN]: SPAN_SIZE },
     },