@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/shared/components/bookmark.mjs

@@ -0,0 +1,26 @@
+// A bookmark (网页书签, Notion's bookmark block): a web page as a card the reader clicks to open it
+// in a new tab, its title, description and address (with the page's icon) and its cover at the
+// right, and its caption under it, a <figcaption> always written (empty while there is none). The
+// page editor makes one from a link: the server reads the page (editor/unfurl.mjs) and keeps its
+// icon and cover in the report's folder (assets/), which an export embeds (render/images.mjs); the
+// link stays the page's. A card: moved, deleted, captioned as a whole.
+export default {
+  id: "bookmark",
+  category: "card",
+  media: true,
+  match: "figure.doc-bookmark",
+  parts: {
+    card: { at: ":scope > a.doc-bookmark-card", edit: "none", min: 1, max: 1 },
+    text: { at: ":scope > a.doc-bookmark-card > .doc-bookmark-text", edit: "none", min: 1, max: 1 },
+    title: { at: ":scope > a.doc-bookmark-card > .doc-bookmark-text > .doc-bookmark-title", edit: "none", min: 1, max: 1 },
+    description: { at: ":scope > a.doc-bookmark-card > .doc-bookmark-text > .doc-bookmark-description", edit: "none", optional: true, max: 1 },
+    address: { at: ":scope > a.doc-bookmark-card > .doc-bookmark-text > .doc-bookmark-url", edit: "none", min: 1, max: 1 },
+    cover: { at: ":scope > a.doc-bookmark-card > .doc-bookmark-cover", edit: "none", optional: true, max: 1 },
+    caption: { at: ":scope > figcaption", edit: "text", min: 1, max: 1 },
+  },
+  only: ["card", "caption"],
+  // Left empty (nothing in it at all): the page editor's placeholder, kept; shown to no reader.
+  empty: true,
+  attrs: {},
+  classes: ["doc-bookmark", "doc-bookmark-card", "doc-bookmark-text", "doc-bookmark-title", "doc-bookmark-description", "doc-bookmark-url", "doc-bookmark-icon", "doc-bookmark-href", "doc-bookmark-cover"],
+};

package/browser/shared/components/callout.mjs

@@ -0,0 +1,9 @@
+// A callout (提示块), a container of blocks set apart on a fill, a line at its left; one written the
+// old way, words straight in it, holds them as one paragraph (the editor's natural HTML).
+export default {
+  id: "callout",
+  category: "container",
+  match: ".doc-callout",
+  flow: ".doc-callout",
+  classes: ["doc-callout"],
+};

package/browser/shared/components/chart.mjs

@@ -0,0 +1,20 @@
+// A chart: a host of a type the report's script defines (DocCharts.define), its data in a JSON
+// script, or, with data-doc-chart-data, the rows of the table whose frame carries that key
+// (src/shared/table-chart.mjs). charts/ draws it into the host.
+export default {
+  id: "chart",
+  within: "card",
+  match: "[data-doc-chart]",
+  assets: ["charts"],
+  uses: [/data-doc-chart=/],
+  attrs: {
+    "data-doc-chart": "the chart's type, one the document's script defines with DocCharts.define",
+    "data-doc-chart-data": "the key of the table it draws: the table's frame carries it as data-doc-chart-source",
+  },
+  runtime: {
+    attrs: { "[data-doc-chart]": ["data-doc-layout"] }, // data-doc-layout: why a chart drawn from a table drew nothing (charts/from-table.js)
+    classes: { "[data-doc-chart]": ["doc-chart"] },
+    // data-missing: no attribute, the name of a table chart's layout note (charts/from-table.js).
+    internal: ["doc-chart-message", "data-missing"],
+  },
+};

package/browser/shared/components/code.mjs

@@ -0,0 +1,37 @@
+// A code block (代码块): div.doc-code, its title (.doc-code-title: plain text on one line;
+// empty, the kit shows 代码块) above its code (a pre holding one code element), highlighted by
+// code.js: a basic block, its title and its code edited as plain text. The kit draws its header's
+// fold arrow before the title and its language, copy and wrap buttons after it (generated); folded
+// (doc-code--folded) it shows its header alone. Its long lines wrap; doc-code--nowrap scrolls
+// them instead. Its language is its own (data-language) or the one it looks like (自动识别: its title's
+// file extension, else its code). Its lines are numbered from 1, or from data-line-start (an excerpt
+// numbered as in its file: src/shared/code-lines.mjs), whose range of lines the kit shows beside its
+// title (第 120–139 行, generated). A line that starts a structure has an arrow
+// left of its number that folds it, the lines inside hidden (data-folded-lines) (Feishu's code
+// block, Notion's look).
+export default {
+  id: "code",
+  category: "block",
+  match: ".doc-code",
+  assets: ["code"],
+  uses: [/doc-code\b/],
+  parts: {
+    title: { at: ":scope > .doc-code-title", edit: "text", max: 1 },
+    code: { at: ":scope > pre", edit: "text", max: 1 },
+  },
+  only: ["title", "code"],
+  attrs: {
+    "data-language": "its language (else the one it looks like: its title's file extension, else its code)",
+    "data-line-numbers": "false: no line numbers; on a pre written without its block, the intake moves it onto the block",
+    "data-line-start": "the number its first line shows (a whole number from 1; 1 without it): an excerpt numbered as in its file, kept by a copy; on a pre written without its block, the intake moves it onto the block (on a block's pre it does nothing: the checks say so)",
+    "data-start": "on a pre written without its block (Prism's): the number its first line shows, which the intake writes as the block's data-line-start",
+    "data-title": "on a pre written without its block: its title (a file's name), which the intake writes as the block's .doc-code-title",
+    "data-wrap": "on a pre written without its block: false keeps its long lines each on one line, scrolled (a directory tree, a log), which the intake writes as the block's doc-code--nowrap; true wraps them, as the block does anyway",
+    "data-folded-lines": "the lines whose structure it shows folded (their places in the block, from 1 whatever data-line-start numbers them, spaces between): a brace's content, a Python body, an element…; on a pre written without its block, the intake moves it onto the block",
+  },
+  classes: ["doc-code", "doc-code-title", "doc-code--folded", "doc-code--nowrap"],
+  runtime: {
+    generated: [".doc-code-fold", ".doc-code-range", ".doc-code-tools"],
+    internal: ["doc-code-lines", "doc-code-line*", "doc-code-content", "doc-code-toolbar", "doc-code-language", "doc-code-separator", "doc-code-copy*", "doc-code-wrap*", "data-line-number"],
+  },
+};

package/browser/shared/components/columns.mjs

@@ -0,0 +1,16 @@
+// 分栏: blocks side by side, as Feishu's and Notion's columns. A .doc-columns holds 2 to 5
+// .doc-column, each a flow of blocks (any but chapters and other columns); on a narrow screen
+// they stack. A column's width is its share of the row, less the gaps (--doc-column-ratio,
+// Feishu's width_ratio): written on every column of a row (adding up to 1; laid out in
+// proportion), or on none (equal).
+export default {
+  id: "columns",
+  category: "container",
+  match: ".doc-columns",
+  parts: {
+    columns: { at: ":scope > .doc-column", edit: "flow", min: 2, max: 5 },
+  },
+  only: ["columns"],
+  shares: { part: "columns", property: "--doc-column-ratio", min: 1 / 24 },
+  classes: ["doc-columns", "doc-column"],
+};

package/browser/shared/components/details.mjs

@@ -0,0 +1,15 @@
+// A disclosure (折叠列表), a container: its summary's label is its title, its content a flow of
+// blocks, and nothing else: a summary without its label, or any other element beside the summary and
+// the content, is a failure of gallery check (the kit does not wrap or indent one).
+export default {
+  id: "details",
+  category: "container",
+  match: "details.doc-details",
+  parts: {
+    summary: { at: ":scope > summary", edit: "none", max: 1 },
+    label: { at: ":scope > summary > .doc-details-summary-label", edit: "text", max: 1 },
+    content: { at: ":scope > .doc-details-content", edit: "flow", max: 1 },
+  },
+  only: ["summary", "content"],
+  classes: ["doc-details", "doc-details-summary-label", "doc-details-content"],
+};

package/browser/shared/components/dialog.mjs

@@ -0,0 +1,28 @@
+// A detail card (详情卡片): a dialog opened by a link to it or by data-doc-dialog-open; its content a
+// flow of blocks like the page's, which any block may start (dialogs.js).
+
+/**
+ * What a card held besides, in the kit's older form: a header in its panel, of its title and a close
+ * button. A file that still has them is read as the new form (source/natural.mjs headedCard).
+ */
+export const HEADED = { header: "doc-dialog-header", title: "doc-dialog-title", close: "doc-dialog-close", closeAttribute: "data-doc-dialog-close" };
+
+export default {
+  id: "dialog",
+  category: "container",
+  match: "dialog.doc-dialog",
+  assets: ["dialogs"],
+  uses: [/doc-dialog/],
+  parts: {
+    content: { at: ":scope > .doc-dialog-panel > .doc-dialog-content", edit: "flow", max: 1 },
+  },
+  attrs: {
+    "data-doc-dialog-open": "opens the detail card this selector finds",
+  },
+  classes: ["doc-dialog", "doc-dialog-panel", "doc-dialog-content", "doc-dialog-trigger"],
+  runtime: {
+    attrs: { "dialog.doc-dialog": ["data-doc-dialog-ready", "open", "aria-label"], ".doc-dialog-content": ["tabindex"] },
+    root: { classes: ["doc-dialog-open", "doc-dialog-gutter"] },
+    internal: ["doc-dialog-in", "doc-dialog-fade"], // its styles' keyframes (coming up, the backdrop fading in)
+  },
+};

package/browser/shared/components/diff.mjs

@@ -0,0 +1,18 @@
+// A diff (代码对比): a code block's look (its title, the header's fold arrow and copy button) showing
+// the lines a change adds and removes, its options as JSON in it; the header shows the counts. A
+// whole block the kit draws (code.js).
+export default {
+  id: "diff",
+  category: "whole",
+  match: ".doc-diff",
+  assets: ["code"],
+  uses: [/doc-diff\b/],
+  parts: {
+    title: { at: ":scope > .doc-code-title", edit: "none", max: 1 },
+  },
+  classes: ["doc-diff"],
+  runtime: {
+    generated: [".doc-diff-body", ".doc-diff-stats"],
+    internal: ["doc-diff-added", "doc-diff-removed"],
+  },
+};

package/browser/shared/components/divider.mjs

@@ -0,0 +1,6 @@
+// A divider line: a basic block.
+export default {
+  id: "divider",
+  category: "block",
+  match: "hr",
+};

package/browser/shared/components/embed.mjs

@@ -0,0 +1,25 @@
+// An embed (嵌入, Notion's embed block): a web page shown in a frame on the page, or an HTML or PDF
+// file of the report's folder, and its caption under it, a <figcaption> always written (empty while
+// there is none). <iframe class="doc-embed-frame" src="https://…" sandbox="…"> for a web page (it
+// stays on the web: an export shows it where the reader is online); src="assets/<file>.html" (a
+// sandbox without allow-same-origin) or "assets/<file>.pdf" (no sandbox: the browser's own viewer)
+// for a file, which an export embeds (render/embeds.mjs; the runtime shows an embedded PDF through a
+// blob: address, runtime/embeds.js). Its height is --doc-embed-height (px) in its style
+// attribute, else 320px (a file's 500px, .doc-embed--file). A card: the page editor makes one
+// (链接, or 上传), resizes its height, captions and moves it.
+export default {
+  id: "embed",
+  category: "card",
+  media: true,
+  match: "figure.doc-embed",
+  parts: {
+    frame: { at: ":scope > iframe.doc-embed-frame", edit: "none", min: 1, max: 1 },
+    caption: { at: ":scope > figcaption", edit: "text", min: 1, max: 1 },
+  },
+  only: ["frame", "caption"],
+  // Left empty (nothing in it at all): the page editor's placeholder, kept; shown to no reader.
+  empty: true,
+  attrs: {},
+  classes: ["doc-embed", "doc-embed--file", "doc-embed-frame"],
+  runtime: { attrs: { "iframe.doc-embed-frame": ["data-doc-blob"] } },
+};

package/browser/shared/components/figure.mjs

@@ -0,0 +1,14 @@
+// A card (卡片块): a figure, a chart or a drawing of the report's own, framed once, moved and resized
+// as a whole. Its title and caption are text; what else it holds (a chart, a drawing in HTML or SVG
+// of the report's own) is the card's content as it is.
+export default {
+  id: "figure",
+  category: "card",
+  match: "figure",
+  parts: {
+    title: { at: ":scope > h3", edit: "text", optional: true, max: 1 },
+    caption: { at: ":scope > .doc-figure-caption", edit: "text", optional: true, max: 1 },
+  },
+  attrs: { "data-surface": "bounded: framed, as every card is (older files write it)" },
+  classes: ["doc-figure", "doc-figure--compact", "doc-figure-caption"],
+};

package/browser/shared/components/file.mjs

@@ -0,0 +1,23 @@
+// A file (文件, Notion's file block): one file of the report's folder, <a class="doc-file-link"
+// href="assets/<file>" download="<its name>"> holding its name and size, and its caption under it,
+// a <figcaption> always written (empty while there is none). A card: the page editor makes one
+// (上传, or a link whose file the server downloads into the report's folder), captions, replaces and
+// moves it. The preview serves the file from the report's folder for saving; a build and an export
+// embed it (render/files.mjs), so the one file holds it.
+export default {
+  id: "file",
+  category: "card",
+  media: true,
+  match: "figure.doc-file",
+  parts: {
+    link: { at: ":scope > a.doc-file-link", edit: "none", min: 1, max: 1 },
+    name: { at: ":scope > a.doc-file-link > .doc-file-name", edit: "none", min: 1, max: 1 },
+    size: { at: ":scope > a.doc-file-link > .doc-file-size", edit: "none", optional: true, max: 1 },
+    caption: { at: ":scope > figcaption", edit: "text", min: 1, max: 1 },
+  },
+  only: ["link", "caption"],
+  // Left empty (nothing in it at all): the page editor's placeholder, kept; shown to no reader.
+  empty: true,
+  attrs: {},
+  classes: ["doc-file", "doc-file-link", "doc-file-name", "doc-file-size"],
+};

package/browser/shared/components/heading.mjs

@@ -0,0 +1,6 @@
+// A heading, levels 1 to 4 (the fourth body-sized): a basic block.
+export default {
+  id: "heading",
+  category: "block",
+  match: "h1, h2, h3, h4",
+};

package/browser/shared/components/highlight.mjs

@@ -0,0 +1,9 @@
+// A highlight panel (高亮块), a container of blocks; the opening summary is one. Its first child may be
+// an icon (.doc-icon: an emoji, an icon of a set or an image, as the page's), standing left of its blocks.
+export default {
+  id: "highlight",
+  category: "container",
+  match: ".doc-panel, .doc-summary",
+  flow: ".doc-summary, .doc-panel",
+  classes: ["doc-panel", "doc-summary"],
+};

package/browser/shared/components/icon.mjs

@@ -0,0 +1,18 @@
+// The page's icon (页面图标, Notion's): right above the report's title, in the header,
+// left-aligned with the title's text (a highlight panel may begin with one too, smaller: highlight.mjs); an emoji (<div class="doc-icon">🎯</div>), an icon of
+// a set in a color (<div class="doc-icon" data-icon="/icons/airplane_blue.svg"></div>: MingCute's, or
+// /icons/tabler/<name>_<color>.svg, Tabler's; src/shared/emoji/data/icons.json) or an image of the
+// report's folder (<div class="doc-icon"><img src="assets/icon-….png" alt=""></div>). A whole
+// block: the page editor changes it with its own picker and nothing else; never moved. report.json
+// mirrors it (icon) for the workbench's tree. The preview, a build and an export show each kind as
+// a picture (render/emoji.mjs); the kit colors a set's icon (styles/page.css). They also give
+// the browser tab its image: a <link rel="icon" data-doc-tab-icon> in the head, which the page
+// editor keeps as the icon changes; no report writes it.
+export default {
+  id: "icon",
+  category: "whole",
+  match: ".doc-icon",
+  classes: ["doc-icon"],
+  attrs: { "data-icon": "an icon of a set in a color: /icons/<name>_<color>.svg (MingCute) or /icons/tabler/<name>_<color>.svg (Tabler)" },
+  runtime: { internal: ["data-doc-tab-icon"] }, // the render puts it in the head, the editor keeps it
+};

package/browser/shared/components/image.mjs

@@ -0,0 +1,39 @@
+// An image (图片, Notion's image block): one picture of the report's folder, <img src="assets/<file>"
+// alt="…">, and its caption under it, a <figcaption> always written (empty while there is none).
+// Its width is the picture's own, at most the width it stands in, or a share of that width
+// (--doc-span in its style attribute, sizes.css); centered, or at the left or right. A card: the
+// page editor makes one (上传, or a link it downloads), resizes, aligns, captions and moves it. The
+// preview serves its picture from the report's folder; a build and an export embed it
+// (render/images.mjs). A reader's click opens its picture large (runtime below).
+export default {
+  id: "image",
+  category: "card",
+  media: true,
+  match: "figure.doc-image",
+  parts: {
+    picture: { at: ":scope > img", edit: "none", min: 1, max: 1 },
+    caption: { at: ":scope > figcaption", edit: "text", min: 1, max: 1 },
+  },
+  only: ["picture", "caption"],
+  // Left empty (nothing in it at all): the page editor's placeholder, kept; shown to no reader.
+  empty: true,
+  // A cropped picture (the page editor's 裁剪图片): the picture it was cropped from, in the report's
+  // folder, and what of it is kept; the export shows the cropped one.
+  attrs: {
+    "data-original": "the picture a cropped one was cropped from (assets/<file>)",
+    "data-crop": "what of the original a cropped picture keeps: x y width height, in % of it",
+  },
+  classes: ["doc-image", "doc-image--left", "doc-image--right"],
+  // 图片放大 (runtime/zoom.js, which pictures by src/shared/zoom.mjs: an image block's and any other
+  // picture of the page): a picture clicked opens large in a viewer of the kit's, a <dialog> at the
+  // end of <body> while it is open, <html> kept from scrolling meanwhile (and, while the pointer is on
+  // a picture that opens, showing the zoom-in cursor). Nothing an author writes. While the page is
+  // read, a picture that opens is offered to the keyboard (data-doc-zoom, src/shared/zoom.mjs
+  // ZOOM_MARK: a tab stop, a button's role, a popup, its name), which an export of the view takes off.
+  runtime: {
+    generated: ["dialog.doc-zoom"],
+    attrs: { "img[data-doc-zoom]": ["data-doc-zoom", "tabindex", "role", "aria-haspopup", "aria-label"] },
+    root: { classes: ["doc-zoom-open", "doc-zoom-gutter", "doc-zoom-hover"] },
+    internal: ["doc-zoom-*"], // the viewer's parts (picture, caption, close button) and its styles' keyframes
+  },
+};