@formicoidea/labre-core 0.39.1 → 0.40.0

package/dist/_pkgs/affine-block-paragraph/styles.js

@@ -1,5 +1,32 @@
+import { HEADING_LEVELS, HEADING_SCALE } from '../affine-shared/consts/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+/** Inline code is set this much smaller than the text around it. */
+const INLINE_CODE_SHRINK_PX = 3;
+/**
+ * H1…H6, generated from `HEADING_SCALE` so every size, line box and margin has
+ * one source. Inline code in a heading stays `INLINE_CODE_SHRINK_PX` below the
+ * heading's size; H6, the level closest to body text, keeps the body's code
+ * padding (with its 2px bottom).
+ */
+const headingStyles = unsafeCSS(HEADING_LEVELS.map(level => {
+    const { fontSize, fontWeight, letterSpacing, lineHeightExtra, marginTop } = HEADING_SCALE[level];
+    return `
+  .${level} {
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}em;
+    line-height: calc(1em + ${lineHeightExtra}px);
+    margin-top: ${marginTop}px;
+    margin-bottom: 10px;
+  }
+
+  .${level} code {
+    font-size: ${fontSize - INLINE_CODE_SHRINK_PX}px;
+    padding: ${level === 'h6' ? '0px 4px 2px' : '0px 4px'};
+  }
+`;
+}).join(''));
 export const paragraphBlockStyles = css `
   affine-paragraph {
     box-sizing: border-box;
@@ -21,91 +48,11 @@ export const paragraphBlockStyles = css `
   }
 
   affine-paragraph code {
-    font-size: calc(var(--affine-font-base) - 3px);
+    font-size: calc(var(--affine-font-base) - ${INLINE_CODE_SHRINK_PX}px);
     padding: 0px 4px 2px;
   }
 
-  .h1 {
-    font-size: var(--affine-font-h-1);
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: calc(1em + 8px);
-    margin-top: 18px;
-    margin-bottom: 10px;
-  }
-
-  .h1 code {
-    font-size: calc(var(--affine-font-base) + 10px);
-    padding: 0px 4px;
-  }
-
-  .h2 {
-    font-size: var(--affine-font-h-2);
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: calc(1em + 10px);
-    margin-top: 14px;
-    margin-bottom: 10px;
-  }
-
-  .h2 code {
-    font-size: calc(var(--affine-font-base) + 8px);
-    padding: 0px 4px;
-  }
-
-  .h3 {
-    font-size: var(--affine-font-h-3);
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: calc(1em + 8px);
-    margin-top: 12px;
-    margin-bottom: 10px;
-  }
-
-  .h3 code {
-    font-size: calc(var(--affine-font-base) + 6px);
-    padding: 0px 4px;
-  }
-
-  .h4 {
-    font-size: var(--affine-font-h-4);
-    font-weight: 600;
-    letter-spacing: -0.015em;
-    line-height: calc(1em + 8px);
-    margin-top: 12px;
-    margin-bottom: 10px;
-  }
-  .h4 code {
-    font-size: calc(var(--affine-font-base) + 4px);
-    padding: 0px 4px;
-  }
-
-  .h5 {
-    font-size: var(--affine-font-h-5);
-    font-weight: 600;
-    letter-spacing: -0.015em;
-    line-height: calc(1em + 8px);
-    margin-top: 12px;
-    margin-bottom: 10px;
-  }
-  .h5 code {
-    font-size: calc(var(--affine-font-base) + 2px);
-    padding: 0px 4px;
-  }
-
-  .h6 {
-    font-size: var(--affine-font-h-6);
-    font-weight: 600;
-    letter-spacing: -0.015em;
-    line-height: calc(1em + 8px);
-    margin-top: 12px;
-    margin-bottom: 10px;
-  }
-
-  .h6 code {
-    font-size: var(--affine-font-base);
-    padding: 0px 4px 2px;
-  }
+  ${headingStyles}
 
   .quote {
     line-height: 26px;

package/dist/_pkgs/affine-block-paragraph/turbo/paragraph-layout-handler.js

@@ -19,6 +19,7 @@ export class ParagraphLayoutHandlerExtension extends BlockLayoutHandlerExtension
         const { zoom, viewScale } = viewportRecord;
         const paragraph = {
             type: 'affine:paragraph',
+            paragraphType: model.props.type,
             sentences: [],
             blockId: model.id,
             rect: { x: 0, y: 0, w: 0, h: 0 },

package/dist/_pkgs/affine-block-paragraph/turbo/paragraph-painter.worker.d.ts

@@ -6,6 +6,8 @@ interface SentenceLayout {
 }
 export interface ParagraphLayout extends BlockLayout {
     type: 'affine:paragraph';
+    /** The paragraph block's own `props.type`: `text`, `quote`, `h1`…`h6`. */
+    paragraphType: string;
     sentences: SentenceLayout[];
 }
 export declare const ParagraphLayoutPainterExtension: import("../../store/index.js").ExtensionType;

package/dist/_pkgs/affine-block-paragraph/turbo/paragraph-painter.worker.js

@@ -39,12 +39,17 @@ class ParagraphLayoutPainter {
             console.warn('Expected paragraph layout but received different format:', layout);
             return;
         }
+        // Headings are not painted (TODO: fine-tune the baseline for heading
+        // sizes). Skipped on the block TYPE, not on the font size: H6 is set at
+        // the body's 15px (`HEADING_SCALE`), so a size test would paint it as text.
+        if (layout.paragraphType.startsWith('h'))
+            return;
         const renderedPositions = new Set();
         layout.sentences.forEach(sentence => {
             const fontSize = sentence.fontSize;
             const baselineY = getBaseline(fontSize);
             if (fontSize !== 15)
-                return; // TODO: fine-tune for heading font sizes
+                return; // the baseline is tuned for body text only
             ctx.font = `${fontSize}px Inter`;
             ctx.strokeStyle = 'yellow';
             sentence.rects.forEach(textRect => {

package/dist/_pkgs/affine-block-root/edgeless/clipboard/clipboard.js

@@ -4,7 +4,7 @@ import { addImages } from '../../../affine-block-image/index.js';
 import { CanvasRenderer, DefaultTool, EdgelessCRUDIdentifier, ExportManager, getSurfaceComponent, } from '../../../affine-block-surface/index.js';
 import { splitIntoLines } from '../../../affine-gfx-text/index.js';
 import { BookmarkStyles, DEFAULT_NOTE_HEIGHT, DEFAULT_NOTE_WIDTH, FrameBlockModel, MAX_IMAGE_WIDTH, } from '../../../affine-model/index.js';
-import { ClipboardAdapter, decodeClipboardBlobs, } from '../../../affine-shared/adapters/index.js';
+import { ClipboardAdapter, decodeClipboardBlobs, ImageProxyService, } from '../../../affine-shared/adapters/index.js';
 import { CANVAS_EXPORT_IGNORE_TAGS, EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, } from '../../../affine-shared/consts/index.js';
 import { EmbedOptionProvider, ParseDocUrlProvider, TelemetryProvider, } from '../../../affine-shared/services/index.js';
 import { convertToPng, isInsidePageEditor, isTopLevelBlock, isUrlInClipboard, matchModels, referenceToNode, } from '../../../affine-shared/utils/index.js';
@@ -324,7 +324,7 @@ export class EdgelessClipboardController extends PageClipboard {
         }
         ctx.scale(dpr, dpr);
         const replaceImgSrcWithSvg = this._exportManager?.replaceImgSrcWithSvg;
-        const imageProxy = host.std.clipboard.configs.get('imageProxy');
+        const imageProxy = host.std.get(ImageProxyService).imageProxyURL;
         const html2canvasOption = {
             ignoreElements: function (element) {
                 if (CANVAS_EXPORT_IGNORE_TAGS.includes(element.tagName) ||
@@ -351,7 +351,7 @@ export class EdgelessClipboardController extends PageClipboard {
                 await replaceImgSrcWithSvg?.(element);
             },
             backgroundColor: 'transparent',
-            useCORS: imageProxy ? false : true,
+            useCORS: !imageProxy,
             proxy: imageProxy,
         };
         const _drawTopLevelBlock = async (block, isInFrame = false) => {

package/dist/_pkgs/affine-block-root/keyboard/keymap.js

@@ -1,13 +1,33 @@
 import { KeymapExtension } from '../../std/index.js';
+const NATIVE_FOCUSABLE_SELECTOR = 'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+/**
+ * The editor host swallows Tab and Shift-Tab so that indentation stays under
+ * the control of the block-scoped handlers. That would however trap the focus
+ * on the native controls the editor renders (the collapse button of headings
+ * and lists, for instance), which then could neither be reached nor left with
+ * the keyboard. When the event originates from such a control — and not from
+ * editable text — the native tabbing behaviour is let through.
+ */
+const isNativeFocusableTarget = (target) => {
+    if (!(target instanceof Element))
+        return false;
+    if (target instanceof HTMLElement && target.isContentEditable)
+        return false;
+    return !!target.closest(NATIVE_FOCUSABLE_SELECTOR);
+};
 export const fallbackKeymap = KeymapExtension(() => {
     return {
         Tab: ctx => {
             const event = ctx.get('defaultState').event;
+            if (isNativeFocusableTarget(event.target))
+                return;
             event.stopPropagation();
             event.preventDefault();
         },
         'Shift-Tab': ctx => {
             const event = ctx.get('defaultState').event;
+            if (isNativeFocusableTarget(event.target))
+                return;
             event.stopPropagation();
             event.preventDefault();
         },

package/dist/_pkgs/affine-block-surface/extensions/export-manager/export-manager.d.ts

@@ -3,12 +3,14 @@ import { type BlockStdScope, type EditorHost } from '../../../std/index.js';
 import { GfxBlockElementModel, type GfxController, GfxPrimitiveElementModel } from '../../../std/gfx/index.js';
 import type { ExtensionType, Store } from '../../../store/index.js';
 import { CanvasRenderer } from '../../renderer/canvas-renderer.js';
-export type ExportOptions = {
-    imageProxyEndpoint: string;
-};
 export declare class ExportManager {
     readonly std: BlockStdScope;
-    private readonly _exportOptions;
+    /**
+     * The image proxy every remote-image fetch of the export goes through —
+     * resolved from {@link ImageProxyService}, the one host seam for it, never
+     * from a local constant. Empty means « fetch direct » (issue #258).
+     */
+    private get _imageProxyURL();
     replaceImgSrcWithSvg: (element: HTMLElement) => Promise<void>;
     get doc(): Store;
     get editorHost(): EditorHost;

package/dist/_pkgs/affine-block-surface/extensions/export-manager/export-manager.js

@@ -1,6 +1,6 @@
 import { ImageBlockModel } from '../../../affine-model/index.js';
-import { FetchUtils } from '../../../affine-shared/adapters/index.js';
-import { CANVAS_EXPORT_IGNORE_TAGS, DEFAULT_IMAGE_PROXY_ENDPOINT, } from '../../../affine-shared/consts/index.js';
+import { FetchUtils, ImageProxyService } from '../../../affine-shared/adapters/index.js';
+import { CANVAS_EXPORT_IGNORE_TAGS } from '../../../affine-shared/consts/index.js';
 import { isInsidePageEditor, matchModels } from '../../../affine-shared/utils/index.js';
 import { BlockSuiteError, ErrorCode } from '../../../global/exceptions/index.js';
 import { deserializeXYWH } from '../../../global/gfx/index.js';
@@ -10,6 +10,14 @@ import { CanvasRenderer } from '../../renderer/canvas-renderer.js';
 import { getBgGridGap } from '../../utils/get-bg-grip-gap.js';
 import { FileExporter } from './file-exporter.js';
 export class ExportManager {
+    /**
+     * The image proxy every remote-image fetch of the export goes through —
+     * resolved from {@link ImageProxyService}, the one host seam for it, never
+     * from a local constant. Empty means « fetch direct » (issue #258).
+     */
+    get _imageProxyURL() {
+        return this.std.get(ImageProxyService).imageProxyURL;
+    }
     get doc() {
         return this.std.store;
     }
@@ -18,14 +26,11 @@ export class ExportManager {
     }
     constructor(std) {
         this.std = std;
-        this._exportOptions = {
-            imageProxyEndpoint: DEFAULT_IMAGE_PROXY_ENDPOINT,
-        };
         this.replaceImgSrcWithSvg = async (element) => {
             const imgList = Array.from(element.querySelectorAll('img'));
             // Create an array of promises
             const promises = imgList.map(img => {
-                return FetchUtils.fetchImage(img.src, undefined, this._exportOptions.imageProxyEndpoint)
+                return FetchUtils.fetchImage(img.src, undefined, this._imageProxyURL)
                     .then(response => response && response.blob())
                     .then(async (blob) => {
                     if (!blob)
@@ -159,8 +164,8 @@ export class ExportManager {
             x: pageLeft - viewport.left,
             width: pageWidth,
             height: viewportHeight,
-            useCORS: this._exportOptions.imageProxyEndpoint ? false : true,
-            proxy: this._exportOptions.imageProxyEndpoint,
+            useCORS: !this._imageProxyURL,
+            proxy: this._imageProxyURL,
         };
         let data;
         try {
@@ -228,8 +233,8 @@ export class ExportManager {
                 });
                 await this.replaceImgSrcWithSvg(element);
             },
-            useCORS: this._exportOptions.imageProxyEndpoint ? false : true,
-            proxy: this._exportOptions.imageProxyEndpoint,
+            useCORS: !this._imageProxyURL,
+            proxy: this._imageProxyURL,
         };
         let data;
         try {

package/dist/_pkgs/affine-block-surface/framework-background/def.d.ts

@@ -494,7 +494,10 @@ export interface FrameworkBackgroundDef {
     transitionBandWidth?: Ratio;
     chrome?: BackgroundChromeDef;
 }
-/** The default card: a plain white rectangle, no border, no radius. */
+/**
+ * The default card: a plain rectangle in the shared notation scale's card
+ * fill, no border, no radius.
+ */
 export declare const DEFAULT_BACKGROUND_SURFACE: BackgroundSurfaceDef;
 /** The plot rectangle of a background of size `w × h`, in element-local units. */
 export declare function backgroundPlot(def: FrameworkBackgroundDef, w: number, h: number): {

package/dist/_pkgs/affine-block-surface/framework-background/def.js

@@ -1,6 +1,10 @@
-/** The default card: a plain white rectangle, no border, no radius. */
+import { NOTATION_NEUTRALS } from '../../affine-shared/consts/index.js';
+/**
+ * The default card: a plain rectangle in the shared notation scale's card
+ * fill, no border, no radius.
+ */
 export const DEFAULT_BACKGROUND_SURFACE = {
-    fill: '#ffffff',
+    fill: NOTATION_NEUTRALS.cardFill,
 };
 /** The plot rectangle of a background of size `w × h`, in element-local units. */
 export function backgroundPlot(def, w, h) {

package/dist/_pkgs/affine-block-surface/utils/priority-queue.js

@@ -21,9 +21,9 @@ export class PriorityQueue {
             if (rightChildIndex < length) {
                 leftChild = this.heap[leftChildIndex];
                 rightChild = this.heap[rightChildIndex];
-                if ((swap === null &&
+                if ((swap === -1 &&
                     this._compare(rightChild.priority, element.priority) < 0) ||
-                    (swap !== null &&
+                    (swap !== -1 &&
                         this._compare(rightChild.priority, leftChild.priority) < 0)) {
                     swap = rightChildIndex;
                 }

package/dist/_pkgs/affine-components/toggle-button/toggle-button.d.ts

@@ -6,6 +6,11 @@ export declare class ToggleButton extends ToggleButton_base {
     render(): import("lit-html").TemplateResult<1>;
     accessor collapsed: boolean;
     accessor updateCollapsed: (collapsed: boolean) => void;
+    /**
+     * Id of the children container this button expands and collapses,
+     * exposed to assistive technologies through `aria-controls`.
+     */
+    accessor controls: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/affine-components/toggle-button/toggle-button.js

@@ -48,13 +48,18 @@ let ToggleButton = (() => {
     let _updateCollapsed_decorators;
     let _updateCollapsed_initializers = [];
     let _updateCollapsed_extraInitializers = [];
+    let _controls_decorators;
+    let _controls_initializers = [];
+    let _controls_extraInitializers = [];
     return class ToggleButton extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _collapsed_decorators = [property({ attribute: false })];
             _updateCollapsed_decorators = [property({ attribute: false })];
+            _controls_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _collapsed_decorators, { kind: "accessor", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
             __esDecorate(this, null, _updateCollapsed_decorators, { kind: "accessor", name: "updateCollapsed", static: false, private: false, access: { has: obj => "updateCollapsed" in obj, get: obj => obj.updateCollapsed, set: (obj, value) => { obj.updateCollapsed = value; } }, metadata: _metadata }, _updateCollapsed_initializers, _updateCollapsed_extraInitializers);
+            __esDecorate(this, null, _controls_decorators, { kind: "accessor", name: "controls", static: false, private: false, access: { has: obj => "controls" in obj, get: obj => obj.controls, set: (obj, value) => { obj.controls = value; } }, metadata: _metadata }, _controls_initializers, _controls_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
@@ -63,6 +68,11 @@ let ToggleButton = (() => {
       align-items: start;
       justify-content: start;
       position: absolute;
+      padding: 0;
+      border: 0;
+      color: inherit;
+      background: transparent;
+      font: inherit;
       width: 16px;
       height: 16px;
       top: calc((1em - 16px) / 2 + 5px);
@@ -78,6 +88,11 @@ let ToggleButton = (() => {
       background: var(--affine-hover-color);
     }
 
+    .toggle-icon:focus-visible {
+      opacity: 1;
+      outline: 1px solid var(--affine-primary-color);
+    }
+
     .toggle-icon[data-collapsed='true'] {
       opacity: 1;
     }
@@ -100,32 +115,23 @@ let ToggleButton = (() => {
     }
   `; }
         render() {
-            const toggleDownTemplate = html `
-      <div
-        contenteditable="false"
-        class="toggle-icon"
-        @click=${() => this.updateCollapsed(!this.collapsed)}
-      >
-        ${ToggleDownIcon({
-                width: '16px',
-                height: '16px',
-            })}
-      </div>
-    `;
-            const toggleRightTemplate = html `
-      <div
+            return html `
+      <button
+        type="button"
         contenteditable="false"
         class="toggle-icon"
         data-collapsed=${this.collapsed}
+        aria-label=${this.collapsed ? 'Expand content' : 'Collapse content'}
+        aria-expanded=${!this.collapsed}
+        aria-controls=${this.controls}
         @click=${() => this.updateCollapsed(!this.collapsed)}
       >
-        ${ToggleRightIcon({
+        ${(this.collapsed ? ToggleRightIcon : ToggleDownIcon)({
                 width: '16px',
                 height: '16px',
             })}
-      </div>
+      </button>
     `;
-            return this.collapsed ? toggleRightTemplate : toggleDownTemplate;
         }
         #collapsed_accessor_storage = __runInitializers(this, _collapsed_initializers, void 0);
         get collapsed() { return this.#collapsed_accessor_storage; }
@@ -133,9 +139,16 @@ let ToggleButton = (() => {
         #updateCollapsed_accessor_storage = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _updateCollapsed_initializers, void 0));
         get updateCollapsed() { return this.#updateCollapsed_accessor_storage; }
         set updateCollapsed(value) { this.#updateCollapsed_accessor_storage = value; }
+        #controls_accessor_storage = (__runInitializers(this, _updateCollapsed_extraInitializers), __runInitializers(this, _controls_initializers, void 0));
+        /**
+         * Id of the children container this button expands and collapses,
+         * exposed to assistive technologies through `aria-controls`.
+         */
+        get controls() { return this.#controls_accessor_storage; }
+        set controls(value) { this.#controls_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _updateCollapsed_extraInitializers);
+            __runInitializers(this, _controls_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/affine-gfx-template/builtin/other.js

@@ -1,18 +1,24 @@
 import { ConnectorMode, FontFamily, FontWeight, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '../../affine-model/index.js';
+import { NOTATION_NEUTRALS } from '../../affine-shared/consts/index.js';
 import { makeTemplateSnapshot, surfaceText, } from '../make-snapshot.js';
 /**
  * The generic ("Other") diagrams: built ONLY from general BlockSuite shapes
  * (`shape` rect/polygon, `text`, `connector`) per the composition principle —
  * they belong to no framework, so they ship from the template package itself.
  */
-const DARK = '#262626';
-const MUTED = '#9aa0a6';
+/**
+ * Their neutrals are the shared notation scale's, like every framework's:
+ * the ink, the divider grey, the label grey and the card white. Only
+ * the hues (kanban cards, gantt bars) are the diagrams' own.
+ */
+const DARK = NOTATION_NEUTRALS.ink;
+const MUTED = NOTATION_NEUTRALS.divider;
 function rect(x, y, w, h, opts = {}) {
     const el = {
         type: 'shape',
         shapeType: opts.shapeType ?? 'rect',
         filled: true,
-        fillColor: opts.fill ?? '#ffffff',
+        fillColor: opts.fill ?? NOTATION_NEUTRALS.cardFill,
         strokeColor: opts.stroke ?? DARK,
         strokeWidth: opts.sw ?? 2,
         strokeStyle: opts.dash ? StrokeStyle.Dash : StrokeStyle.Solid,
@@ -36,7 +42,7 @@ function label(x, y, w, h, str, opts = {}) {
     return {
         type: 'text',
         text: surfaceText(str),
-        color: opts.color ?? '#1a1a1a',
+        color: opts.color ?? DARK,
         fontFamily: FontFamily.Inter,
         fontSize: opts.fontSize ?? 16,
         fontWeight: opts.weight ?? FontWeight.Regular,
@@ -72,7 +78,12 @@ function swot() {
 }
 // ── Kanban (To do / Doing / Done) ─────────────────────────────────────
 function kanban() {
-    const colOpts = { fill: '#f4f4f5', stroke: MUTED, sw: 1.5, radius: 10 };
+    const colOpts = {
+        fill: NOTATION_NEUTRALS.cardFill,
+        stroke: MUTED,
+        sw: 1.5,
+        radius: 10,
+    };
     const head = {
         fontSize: 18,
         weight: FontWeight.Medium,
@@ -109,7 +120,10 @@ function bmc() {
     });
     const hdr = (x, s) => ({
         box: rect(x, 8, 128, 34, { stroke: MUTED, sw: 1 }),
-        txt: label(x + 8, 16, 120, 18, s, { fontSize: 11, color: '#5f6368' }),
+        txt: label(x + 8, 16, 120, 18, s, {
+            fontSize: 11,
+            color: NOTATION_NEUTRALS.label,
+        }),
     });
     const h1 = hdr(470, 'Designed for');
     const h2 = hdr(602, 'Designed by');
@@ -156,7 +170,7 @@ function fishbone() {
         sw: 1.4,
         dash: true,
         text: n,
-        textColor: '#5f6368',
+        textColor: NOTATION_NEUTRALS.label,
         fontSize: 13,
     });
     const out = {
@@ -190,10 +204,13 @@ function gantt() {
     // week gridlines + labels
     for (let i = 0; i < 6; i++) {
         const x = 220 + i * 130;
-        out[`g${i}`] = line(x, 40, x, 268, { stroke: '#e0e0e0', sw: 1 });
+        out[`g${i}`] = line(x, 40, x, 268, {
+            stroke: NOTATION_NEUTRALS.cardBorder,
+            sw: 1,
+        });
         out[`w${i}`] = label(x - 16, 12, 40, 20, `W${i + 1}`, {
             fontSize: 12,
-            color: '#5f6368',
+            color: NOTATION_NEUTRALS.label,
             align: TextAlign.Center,
         });
     }
@@ -212,11 +229,11 @@ function gantt() {
 }
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
 const previews = {
-    swot: `<svg ${ATTRS} fill="none"><rect x="20" y="12" width="95" height="56" stroke="#262626" stroke-width="2"/><path d="M67.5 12 V68 M20 40 H115" stroke="#262626" stroke-width="1.6"/></svg>`,
-    kanban: `<svg ${ATTRS} fill="none"><rect x="10" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="50" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="90" y="12" width="35" height="56" rx="4" stroke="#9aa0a6"/><rect x="15" y="22" width="25" height="11" rx="2" fill="#fde6c8"/><rect x="55" y="22" width="25" height="11" rx="2" fill="#d6e4fb"/><rect x="95" y="22" width="25" height="11" rx="2" fill="#d5efd9"/></svg>`,
-    bmc: `<svg ${ATTRS} fill="none"><g stroke="#262626" stroke-width="1.2"><rect x="8" y="14" width="22" height="40"/><rect x="32" y="14" width="22" height="20"/><rect x="32" y="35" width="22" height="19"/><rect x="56" y="14" width="22" height="40"/><rect x="80" y="14" width="22" height="20"/><rect x="80" y="35" width="22" height="19"/><rect x="104" y="14" width="22" height="40"/><rect x="8" y="56" width="57" height="14"/><rect x="68" y="56" width="58" height="14"/></g></svg>`,
-    fishbone: `<svg ${ATTRS} fill="none"><path d="M14 40 H112" stroke="#262626" stroke-width="3"/><rect x="112" y="33" width="20" height="14" stroke="#262626" stroke-width="1.4"/><path d="M40 18 L52 40 M40 62 L52 40 M84 18 L96 40 M84 62 L96 40" stroke="#262626" stroke-width="1.4"/></svg>`,
-    gantt: `<svg ${ATTRS} fill="none"><path d="M40 14 V70 M62 14 V70 M84 14 V70 M106 14 V70" stroke="#e0e0e0"/><rect x="40" y="22" width="34" height="8" rx="2" fill="#4574c4"/><rect x="52" y="36" width="44" height="8" rx="2" fill="#2f9e95"/><rect x="62" y="50" width="50" height="8" rx="2" fill="#d99a2b"/><rect x="84" y="64" width="28" height="8" rx="2" fill="#43a06b"/></svg>`,
+    swot: `<svg ${ATTRS} fill="none"><rect x="20" y="12" width="95" height="56" stroke="${DARK}" stroke-width="2"/><path d="M67.5 12 V68 M20 40 H115" stroke="${DARK}" stroke-width="1.6"/></svg>`,
+    kanban: `<svg ${ATTRS} fill="none"><rect x="10" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="50" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="90" y="12" width="35" height="56" rx="4" stroke="${MUTED}"/><rect x="15" y="22" width="25" height="11" rx="2" fill="#fde6c8"/><rect x="55" y="22" width="25" height="11" rx="2" fill="#d6e4fb"/><rect x="95" y="22" width="25" height="11" rx="2" fill="#d5efd9"/></svg>`,
+    bmc: `<svg ${ATTRS} fill="none"><g stroke="${DARK}" stroke-width="1.2"><rect x="8" y="14" width="22" height="40"/><rect x="32" y="14" width="22" height="20"/><rect x="32" y="35" width="22" height="19"/><rect x="56" y="14" width="22" height="40"/><rect x="80" y="14" width="22" height="20"/><rect x="80" y="35" width="22" height="19"/><rect x="104" y="14" width="22" height="40"/><rect x="8" y="56" width="57" height="14"/><rect x="68" y="56" width="58" height="14"/></g></svg>`,
+    fishbone: `<svg ${ATTRS} fill="none"><path d="M14 40 H112" stroke="${DARK}" stroke-width="3"/><rect x="112" y="33" width="20" height="14" stroke="${DARK}" stroke-width="1.4"/><path d="M40 18 L52 40 M40 62 L52 40 M84 18 L96 40 M84 62 L96 40" stroke="${DARK}" stroke-width="1.4"/></svg>`,
+    gantt: `<svg ${ATTRS} fill="none"><path d="M40 14 V70 M62 14 V70 M84 14 V70 M106 14 V70" stroke="${NOTATION_NEUTRALS.cardBorder}"/><rect x="40" y="22" width="34" height="8" rx="2" fill="#4574c4"/><rect x="52" y="36" width="44" height="8" rx="2" fill="#2f9e95"/><rect x="62" y="50" width="50" height="8" rx="2" fill="#d99a2b"/><rect x="84" y="64" width="28" height="8" rx="2" fill="#43a06b"/></svg>`,
 };
 function t(name, preview, elements) {
     return {

package/dist/_pkgs/affine-inline-preset/markdown.d.ts

@@ -18,4 +18,7 @@ export declare const UnderthroughExtension: ExtensionType & {
 export declare const CodeExtension: ExtensionType & {
     identifier: import("../global/di/types.js").ServiceIdentifier<import("../std/inline/index.js").InlineMarkdownMatch<AffineTextAttributes>>;
 };
+export declare const EmDashExtension: ExtensionType & {
+    identifier: import("../global/di/types.js").ServiceIdentifier<import("../std/inline/index.js").InlineMarkdownMatch<AffineTextAttributes>>;
+};
 export declare const MarkdownExtensions: ExtensionType[];

package/dist/_pkgs/affine-inline-preset/markdown.js

@@ -193,6 +193,24 @@ export const CodeExtension = InlineMarkdownExtension({
         });
     },
 });
+// typographic replacement: word -- + space => word — + space
+// not convert: --- + space (divider shortcut), --flag + space, inside inline code
+export const EmDashExtension = InlineMarkdownExtension({
+    name: 'em-dash',
+    pattern: /(?:^|[^-])--\s$/,
+    action: ({ inlineEditor, inlineRange, undoManager }) => {
+        const dashes = { index: inlineRange.index - 3, length: 2 };
+        const format = inlineEditor.getFormat(dashes);
+        if (format.code)
+            return;
+        undoManager.stopCapturing();
+        inlineEditor.insertText(dashes, '—', format);
+        inlineEditor.setInlineRange({
+            index: inlineRange.index - 1,
+            length: 0,
+        });
+    },
+});
 export const MarkdownExtensions = [
     BoldItalicMarkdown,
     BoldMarkdown,
@@ -201,4 +219,5 @@ export const MarkdownExtensions = [
     UnderthroughExtension,
     CodeExtension,
     LatexExtension,
+    EmDashExtension,
 ];

package/dist/_pkgs/affine-shared/adapters/middlewares/proxy.d.ts

@@ -2,7 +2,17 @@ import type { TransformerMiddleware } from '../../../store/index.js';
 import { StoreExtension } from '../../../store/index.js';
 export declare const customImageProxyMiddleware: (imageProxyURL: string) => TransformerMiddleware;
 export declare const setImageProxyMiddlewareURL: (url: string) => void;
+/**
+ * Reads the URL at run time: a `setImageProxyURL` made after module load
+ * reaches every job using this middleware.
+ */
 export declare const defaultImageProxyMiddleware: TransformerMiddleware;
+/**
+ * The ONE seam governing every remote-image fetch the library performs on the
+ * host's behalf: link-card favicons and og:images, image import, canvas
+ * PNG/PDF export, copy-as-image. An empty URL means « fetch direct ».
+ * See `docs/integrate/04-host-seams.md`.
+ */
 export declare class ImageProxyService extends StoreExtension {
     static key: string;
     private _imageProxyURL;