@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/affine-shared/adapters/utils/color.js

@@ -0,0 +1,283 @@
+import { cssVarV2, darkThemeV2, lightThemeV2 } from '@toeverything/theme/v2';
+/**
+ * A colour is treated as a shade of grey below this chroma, and is then only
+ * ever mapped onto the grey highlight — never onto a hue.
+ */
+const ACHROMATIC_CHROMA_THRESHOLD = 0.02;
+/**
+ * Greys this dark or this light are the reader's own text and background
+ * colours: leaving them unmapped is what keeps a pasted document legible in
+ * both themes.
+ */
+const DEFAULT_TEXT_LIGHTNESS_MIN = 0.4;
+const DEFAULT_TEXT_LIGHTNESS_MAX = 0.9;
+const MAX_COLOR_DISTANCE = 0.18;
+const MAX_CHROMA_DISTANCE = 0.12;
+const MAX_HUE_DISTANCE = 45;
+const supportedTextColorNames = [
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'teal',
+    'blue',
+    'purple',
+    'grey',
+];
+/**
+ * The basic CSS colour keywords. Anything outside this set parses as `null`,
+ * which means "leave the text alone" — the conservative outcome.
+ */
+const NAMED_COLORS = {
+    aqua: '#00ffff',
+    black: '#000000',
+    blue: '#0000ff',
+    cyan: '#00ffff',
+    fuchsia: '#ff00ff',
+    gray: '#808080',
+    green: '#008000',
+    grey: '#808080',
+    lime: '#00ff00',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    navy: '#000080',
+    olive: '#808000',
+    orange: '#ffa500',
+    purple: '#800080',
+    red: '#ff0000',
+    silver: '#c0c0c0',
+    teal: '#008080',
+    transparent: '#00000000',
+    white: '#ffffff',
+    yellow: '#ffff00',
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const parseHex = (value) => {
+    const hex = value.slice(1);
+    if (!/^[0-9a-f]+$/i.test(hex))
+        return null;
+    const expand = (part) => part.length === 1
+        ? Number.parseInt(part + part, 16)
+        : Number.parseInt(part, 16);
+    const size = hex.length === 3 || hex.length === 4 ? 1 : 2;
+    if (hex.length !== size * 3 && hex.length !== size * 4)
+        return null;
+    return {
+        r: expand(hex.slice(0, size)),
+        g: expand(hex.slice(size, size * 2)),
+        b: expand(hex.slice(size * 2, size * 3)),
+        alpha: hex.length === size * 4 ? expand(hex.slice(size * 3, size * 4)) / 255 : 1,
+    };
+};
+/** A colour channel: `0-255`, or a percentage of 255. */
+const parseChannel = (token) => {
+    const trimmed = token.trim();
+    if (!trimmed)
+        return null;
+    const isPercentage = trimmed.endsWith('%');
+    const value = Number.parseFloat(isPercentage ? trimmed.slice(0, -1) : trimmed);
+    if (Number.isNaN(value))
+        return null;
+    return clamp(Math.round(isPercentage ? (value / 100) * 255 : value), 0, 255);
+};
+/** An alpha value: `0-1`, or a percentage. */
+const parseAlpha = (token) => {
+    if (token === null)
+        return 1;
+    const trimmed = token.trim();
+    if (!trimmed)
+        return null;
+    const isPercentage = trimmed.endsWith('%');
+    const value = Number.parseFloat(isPercentage ? trimmed.slice(0, -1) : trimmed);
+    if (Number.isNaN(value))
+        return null;
+    return clamp(isPercentage ? value / 100 : value, 0, 1);
+};
+/**
+ * Split the body of a colour function into its arguments and its alpha,
+ * accepting both the legacy comma syntax (`rgb(1, 2, 3, 0.5)`) and the modern
+ * space syntax (`rgb(1 2 3 / 50%)`).
+ */
+const splitFunctionArgs = (body) => {
+    const [main, alphaPart] = body.split('/');
+    const args = main.split(/[\s,]+/).filter(Boolean);
+    let alpha = alphaPart?.trim() ? alphaPart.trim() : null;
+    if (alpha === null && args.length === 4) {
+        alpha = args.pop() ?? null;
+    }
+    return { args, alpha };
+};
+const parseHue = (token) => {
+    const trimmed = token.trim().toLowerCase();
+    const value = Number.parseFloat(trimmed);
+    if (Number.isNaN(value))
+        return null;
+    if (trimmed.endsWith('turn'))
+        return value * 360;
+    if (trimmed.endsWith('rad'))
+        return (value * 180) / Math.PI;
+    if (trimmed.endsWith('grad'))
+        return value * 0.9;
+    return value;
+};
+const hslToRgb = (h, s, l) => {
+    const hue = ((h % 360) + 360) % 360;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const m = l - c / 2;
+    const [r, g, b] = [
+        [c, x, 0],
+        [x, c, 0],
+        [0, c, x],
+        [0, x, c],
+        [x, 0, c],
+        [c, 0, x],
+    ][Math.floor(hue / 60) % 6];
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+};
+/**
+ * Parse the subset of CSS colour syntax that turns up in pasted HTML: hex,
+ * `rgb()`/`rgba()`, `hsl()`/`hsla()` and the basic colour keywords. Anything
+ * else — `color-mix()`, a custom property, an unknown keyword — is `null`.
+ */
+export const parseCssColor = (value) => {
+    const trimmed = value.trim().toLowerCase();
+    if (!trimmed)
+        return null;
+    const named = NAMED_COLORS[trimmed];
+    if (named)
+        return parseHex(named);
+    if (trimmed.startsWith('#'))
+        return parseHex(trimmed);
+    const fn = trimmed.match(/^(rgba?|hsla?)\(([^)]*)\)$/);
+    if (!fn)
+        return null;
+    const { args, alpha: rawAlpha } = splitFunctionArgs(fn[2]);
+    if (args.length !== 3)
+        return null;
+    const alpha = parseAlpha(rawAlpha);
+    if (alpha === null)
+        return null;
+    if (fn[1].startsWith('rgb')) {
+        const [r, g, b] = args.map(parseChannel);
+        if (r === null || g === null || b === null)
+            return null;
+        return { r, g, b, alpha };
+    }
+    const hue = parseHue(args[0]);
+    const saturation = parseAlpha(args[1]);
+    const lightness = parseAlpha(args[2]);
+    if (hue === null || saturation === null || lightness === null)
+        return null;
+    return { ...hslToRgb(hue, saturation, lightness), alpha };
+};
+const srgbToLinear = (channel) => {
+    const value = channel / 255;
+    return value <= 0.04045
+        ? value / 12.92
+        : Math.pow((value + 0.055) / 1.055, 2.4);
+};
+/**
+ * Oklab is perceptually uniform, so "near enough to count as the same colour"
+ * is a plain distance here, which it is not in sRGB.
+ */
+const rgbToOklab = ({ r, g, b }) => {
+    const red = srgbToLinear(r);
+    const green = srgbToLinear(g);
+    const blue = srgbToLinear(b);
+    const l = Math.cbrt(0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue);
+    const m = Math.cbrt(0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue);
+    const s = Math.cbrt(0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue);
+    const result = {
+        l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+        a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+        b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    };
+    return {
+        ...result,
+        chroma: Math.hypot(result.a, result.b),
+        hue: (Math.atan2(result.b, result.a) * 180) / Math.PI,
+    };
+};
+const supportedTextColors = supportedTextColorNames.map(name => ({
+    name,
+    cssVar: cssVarV2(`text/highlight/fg/${name}`),
+    // Both themes are candidates: a document is pasted in one theme and read in
+    // the other, so whichever reference is nearer decides the highlight.
+    references: [
+        lightThemeV2[`text/highlight/fg/${name}`],
+        darkThemeV2[`text/highlight/fg/${name}`],
+    ].flatMap(color => {
+        const parsed = parseCssColor(color);
+        return parsed ? [rgbToOklab(parsed)] : [];
+    }),
+}));
+const colorDistance = (a, b) => Math.hypot(a.l - b.l, a.a - b.a, a.b - b.b);
+const hueDistance = (a, b) => {
+    const distance = Math.abs(a - b) % 360;
+    return Math.min(distance, 360 - distance);
+};
+/**
+ * Map a CSS colour onto the nearest supported text highlight, or `null` when
+ * nothing is near enough. `null` is the good outcome for the reader: text with
+ * no colour follows the theme, whereas a wrong colour can leave it unreadable
+ * in one of the two themes.
+ */
+export const resolveNearestSupportedColor = (color) => {
+    const parsed = parseCssColor(color);
+    // A translucent colour was picked to sit on the source background, not ours.
+    if (!parsed || parsed.alpha < 1) {
+        return null;
+    }
+    const target = rgbToOklab(parsed);
+    const achromatic = target.chroma < ACHROMATIC_CHROMA_THRESHOLD;
+    if (achromatic &&
+        (target.l < DEFAULT_TEXT_LIGHTNESS_MIN ||
+            target.l > DEFAULT_TEXT_LIGHTNESS_MAX)) {
+        return null;
+    }
+    let nearest;
+    for (const supported of supportedTextColors) {
+        // A grey never becomes a hue, and a hue never becomes the grey.
+        if (achromatic !== (supported.name === 'grey')) {
+            continue;
+        }
+        for (const reference of supported.references) {
+            const distance = colorDistance(target, reference);
+            if (distance > MAX_COLOR_DISTANCE ||
+                (!achromatic &&
+                    (Math.abs(target.chroma - reference.chroma) > MAX_CHROMA_DISTANCE ||
+                        hueDistance(target.hue, reference.hue) > MAX_HUE_DISTANCE))) {
+                continue;
+            }
+            if (!nearest || distance < nearest.distance) {
+                nearest = { cssVar: supported.cssVar, distance };
+            }
+        }
+    }
+    return nearest?.cssVar ?? null;
+};
+/**
+ * Read the `color` declaration out of an inline `style` attribute, leaving
+ * `background-color` and friends alone.
+ */
+export const extractColorFromStyle = (style) => {
+    if (typeof style !== 'string') {
+        return null;
+    }
+    for (const declaration of style.split(';')) {
+        const colon = declaration.indexOf(':');
+        if (colon === -1)
+            continue;
+        // Split on the first colon only: `rgb(0 0 0 / 50%)` has none, but a
+        // `url()` or a future colour syntax may.
+        if (declaration.slice(0, colon).trim().toLowerCase() === 'color') {
+            return declaration.slice(colon + 1).trim();
+        }
+    }
+    return null;
+};

package/dist/_pkgs/affine-shared/adapters/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './color.js';
 export * from './fetch.js';
 export * from './file-path.js';
 export * from './hast.js';

package/dist/_pkgs/affine-shared/adapters/utils/index.js

@@ -1,3 +1,4 @@
+export * from './color.js';
 export * from './fetch.js';
 export * from './file-path.js';
 export * from './hast.js';

package/dist/_pkgs/affine-shared/commands/block-crud/get-selected-blocks.js

@@ -86,9 +86,17 @@ export const getSelectedBlocksCommand = (ctx, next) => {
     if (ctx.filter) {
         dirtyResult = dirtyResult.filter(ctx.filter);
     }
-    // remove duplicate elements
+    // Remove duplicate elements. A `Set` and not `indexOf`: selecting a whole
+    // document hands this command every block at once, and a scan per block is
+    // quadratic in the size of the document.
+    const seen = new Set();
     const result = dirtyResult
-        .filter((el, index) => dirtyResult.indexOf(el) === index)
+        .filter(el => {
+        if (seen.has(el))
+            return false;
+        seen.add(el);
+        return true;
+    })
         // sort by document position
         .sort((a, b) => {
         if (a === b) {

package/dist/_pkgs/affine-shared/commands/model-crud/draft-selected-models.js

@@ -1,4 +1,4 @@
-import { toDraftModel, } from '../../../store/index.js';
+import { toDraftModel } from '../../../store/index.js';
 export const draftSelectedModelsCommand = (ctx, next) => {
     const models = ctx.selectedModels;
     if (!models) {

package/dist/_pkgs/affine-shared/commands/selection/focus-block-end.js

@@ -1,4 +1,4 @@
-import { TextSelection, } from '../../../std/index.js';
+import { TextSelection } from '../../../std/index.js';
 /**
  * Focus the end of the block
  * @param focusBlock - The block to focus

package/dist/_pkgs/affine-shared/commands/selection/focus-block-start.js

@@ -1,4 +1,4 @@
-import { TextSelection, } from '../../../std/index.js';
+import { TextSelection } from '../../../std/index.js';
 export const focusBlockStart = (ctx, next) => {
     const { focusBlock, std } = ctx;
     if (!focusBlock || !focusBlock.model.text)

package/dist/_pkgs/affine-shared/consts/index.d.ts

@@ -4,6 +4,16 @@ export declare const EDGELESS_BLOCK_CHILD_PADDING = 24;
 export declare const EDGELESS_BLOCK_CHILD_BORDER_WIDTH = 2;
 export declare const PAGE_HEADER_HEIGHT = 53;
 export declare const EMBED_CARD_MIN_WIDTH = 450;
+/**
+ * The smallest a thing you TAP may be, in CSS pixels.
+ *
+ * 44 is the figure both platform guidelines settle on (WCAG 2.2's target-size
+ * criterion asks for 24, which is a floor for a mouse, not a finger). Labre's
+ * boards are worked on a tablet in a workshop as often as on a laptop, so any
+ * list a user picks from — the artefact catalogue's rows are the first — sizes
+ * its rows from here rather than from whatever looked right in a screenshot.
+ */
+export declare const TOUCH_TARGET_MIN_PX = 44;
 export declare const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number>;
 export declare const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number>;
 export declare const EMBED_BLOCK_FLAVOUR_LIST: readonly ["affine:embed-github", "affine:embed-youtube", "affine:embed-figma", "affine:embed-linked-doc", "affine:embed-synced-doc", "affine:embed-html", "affine:embed-loom"];

package/dist/_pkgs/affine-shared/consts/index.js

@@ -6,6 +6,16 @@ export const EDGELESS_BLOCK_CHILD_BORDER_WIDTH = 2;
 // In AFFiNE, to avoid the option element to be covered by the header, we need to reserve the space for the header
 export const PAGE_HEADER_HEIGHT = 53;
 export const EMBED_CARD_MIN_WIDTH = 450;
+/**
+ * The smallest a thing you TAP may be, in CSS pixels.
+ *
+ * 44 is the figure both platform guidelines settle on (WCAG 2.2's target-size
+ * criterion asks for 24, which is a floor for a mouse, not a finger). Labre's
+ * boards are worked on a tablet in a workshop as often as on a laptop, so any
+ * list a user picks from — the artefact catalogue's rows are the first — sizes
+ * its rows from here rather than from whatever looked right in a screenshot.
+ */
+export const TOUCH_TARGET_MIN_PX = 44;
 export const EMBED_CARD_WIDTH = {
     horizontal: 752,
     horizontalThin: 752,

package/dist/_pkgs/affine-shared/services/artefact-catalogue-service.d.ts

@@ -0,0 +1,55 @@
+import type { CommandOwner } from '../../std/index.js';
+import type { ExtensionType } from '../../store/index.js';
+/**
+ * Consumer 2 of `docs/adr/0008`: the "more artefacts" sidepanel, which shows an
+ * owner's WHOLE `'catalogue'` surface by sub-category once its senior sub-menu
+ * has stopped being able to.
+ *
+ * The seam had to exist before either end of it, because the senior menu is
+ * what opens it — `selectSeniorMenuCommands` reports an overflow, the menu
+ * grows a trailing button, and that button needs somewhere to send the click.
+ * The library now ships the panel that answers by default
+ * (`edgeless-artefact-catalogue-widget`, registered next to the toolbar
+ * widget), and the menu still renders the button only when this provider
+ * answers — so an assembly that overrode the provider away shows no control
+ * that opens nothing.
+ *
+ * The contract is two verbs on purpose. Everything the panel needs to draw
+ * itself is already enumerable from the command registry
+ * (`getCommandsForSurface(std, owner, 'catalogue')`), so the seam carries the
+ * OWNER and nothing else — no list of entries, no open state, no rendering.
+ * That is what lets the two implementations be genuinely different things: the
+ * library's own left sidepanel, and a host's existing right-hand sidebar.
+ */
+export interface ArtefactCatalogueService {
+    /** Show the catalogue, scoped to one framework's artefacts. */
+    open(owner: CommandOwner): void;
+    /** Put it away. Never touches the active senior tool. */
+    close(): void;
+}
+export declare const ArtefactCatalogueProvider: import("../../global/di/types.js").ServiceIdentifier<ArtefactCatalogueService> & (<U extends ArtefactCatalogueService = ArtefactCatalogueService>(variant: import("../../global/di/types.js").ServiceVariant) => import("../../global/di/types.js").ServiceIdentifier<U>);
+/**
+ * Host override seam: replace the library's sidepanel with the host's own —
+ * or switch the catalogue off entirely.
+ *
+ * **Replace** — a host that already owns a sidebar (a right-hand inspector, a
+ * docked panel, a mobile sheet) registers this extension, its implementation
+ * answers {@link ArtefactCatalogueProvider}, and the library's widget is then
+ * never asked to open: the sub-menu's "More artefacts…" entry resolves ONE
+ * service, and `di.override` decides which. The host's own UI draws itself
+ * from the registry (`getCommandsForSurface(std, owner, 'catalogue')`,
+ * `getCommandIcon`) and creates through the one bottleneck
+ * (`runCommand(std, command, { surface: 'catalogue', … })`), so telemetry and
+ * the usage measure keep flowing wherever the pixels live.
+ *
+ * **Disable** — pass `null`. The provider then answers nothing, and every
+ * consumer reads that the honest way: the sub-menu's "More artefacts…" button
+ * is not rendered (a control that opens nothing is a lie), and the library's
+ * panel never opens. This is a cold-assembly switch, like the framework flags:
+ * decided when the editor is put together, not toggled mid-session.
+ *
+ * Mirrors `CommandUsageExtension` / `KeymapOverrideExtension`: `di.override`,
+ * so a host registering after the library's own extensions always wins,
+ * whatever the registration order turns out to be.
+ */
+export declare function ArtefactCatalogueExtension(service: ArtefactCatalogueService | null): ExtensionType;

package/dist/_pkgs/affine-shared/services/artefact-catalogue-service.js

@@ -0,0 +1,35 @@
+import { createIdentifier } from '../../global/di/index.js';
+export const ArtefactCatalogueProvider = createIdentifier('AffineArtefactCatalogue');
+/**
+ * Host override seam: replace the library's sidepanel with the host's own —
+ * or switch the catalogue off entirely.
+ *
+ * **Replace** — a host that already owns a sidebar (a right-hand inspector, a
+ * docked panel, a mobile sheet) registers this extension, its implementation
+ * answers {@link ArtefactCatalogueProvider}, and the library's widget is then
+ * never asked to open: the sub-menu's "More artefacts…" entry resolves ONE
+ * service, and `di.override` decides which. The host's own UI draws itself
+ * from the registry (`getCommandsForSurface(std, owner, 'catalogue')`,
+ * `getCommandIcon`) and creates through the one bottleneck
+ * (`runCommand(std, command, { surface: 'catalogue', … })`), so telemetry and
+ * the usage measure keep flowing wherever the pixels live.
+ *
+ * **Disable** — pass `null`. The provider then answers nothing, and every
+ * consumer reads that the honest way: the sub-menu's "More artefacts…" button
+ * is not rendered (a control that opens nothing is a lie), and the library's
+ * panel never opens. This is a cold-assembly switch, like the framework flags:
+ * decided when the editor is put together, not toggled mid-session.
+ *
+ * Mirrors `CommandUsageExtension` / `KeymapOverrideExtension`: `di.override`,
+ * so a host registering after the library's own extensions always wins,
+ * whatever the registration order turns out to be.
+ */
+export function ArtefactCatalogueExtension(service) {
+    return {
+        setup: di => {
+            // `null` rides through the factory on purpose: `getOptional` then
+            // reports the catalogue as absent, which is the whole disable story.
+            di.override(ArtefactCatalogueProvider, () => service);
+        },
+    };
+}