@formicoidea/labre-core 0.41.0 → 0.43.1

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/translate-created.d.ts

@@ -0,0 +1,25 @@
+import type { GfxController } from '../../std/gfx/index.js';
+/**
+ * Run `body` and report the ids of everything it put on the board — canvas
+ * elements and canvas blocks alike.
+ *
+ * Both subscriptions are synchronous: a Yjs observer fires when the transaction
+ * commits, inside the `addElement` / `addBlock` call, so an action that creates
+ * on the spot is fully accounted for by the time `body` returns. An action that
+ * creates from a promise is NOT, and its artefact is left where the command put
+ * it — which is today's behaviour for every command, so nothing regresses.
+ */
+export declare function collectCreated(gfx: GfxController, body: () => void): string[];
+/**
+ * Move a freshly created drawing by `(dx, dy)`, and report what is left to
+ * select.
+ *
+ * Only the TOP-LEVEL items move. An element the same run filed inside a group
+ * it also created is carried by that group, and moving it twice would tear the
+ * drawing apart. A group is moved through its children — `GfxGroupLikeElement`'s
+ * `xywh` setter is a deliberate no-op, its box being derived from what it holds
+ * — which is exactly what {@link updateXYWH} does, along with a connector's free
+ * endpoints (an anchored one simply follows what it is tied to) and a note's
+ * collapsed height. Hence no second opinion here.
+ */
+export declare function translateCreated(gfx: GfxController, ids: string[], dx: number, dy: number): string[];

package/dist/_pkgs/affine-widget-edgeless-toolbar/placement/translate-created.js

@@ -0,0 +1,67 @@
+import { EdgelessCRUDIdentifier, updateXYWH, } from '../../affine-block-surface/index.js';
+import { Bound } from '../../global/gfx/index.js';
+/**
+ * Run `body` and report the ids of everything it put on the board — canvas
+ * elements and canvas blocks alike.
+ *
+ * Both subscriptions are synchronous: a Yjs observer fires when the transaction
+ * commits, inside the `addElement` / `addBlock` call, so an action that creates
+ * on the spot is fully accounted for by the time `body` returns. An action that
+ * creates from a promise is NOT, and its artefact is left where the command put
+ * it — which is today's behaviour for every command, so nothing regresses.
+ */
+export function collectCreated(gfx, body) {
+    const ids = [];
+    const subscriptions = [
+        gfx.surface?.elementAdded.subscribe(({ id }) => {
+            ids.push(id);
+        }),
+        gfx.std.store.slots.blockUpdated.subscribe(payload => {
+            if (payload.type === 'add')
+                ids.push(payload.id);
+        }),
+    ];
+    try {
+        body();
+    }
+    finally {
+        subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+    return ids;
+}
+/**
+ * Move a freshly created drawing by `(dx, dy)`, and report what is left to
+ * select.
+ *
+ * Only the TOP-LEVEL items move. An element the same run filed inside a group
+ * it also created is carried by that group, and moving it twice would tear the
+ * drawing apart. A group is moved through its children — `GfxGroupLikeElement`'s
+ * `xywh` setter is a deliberate no-op, its box being derived from what it holds
+ * — which is exactly what {@link updateXYWH} does, along with a connector's free
+ * endpoints (an anchored one simply follows what it is tied to) and a note's
+ * collapsed height. Hence no second opinion here.
+ */
+export function translateCreated(gfx, ids, dx, dy) {
+    const created = new Set(ids);
+    const models = ids
+        .map(id => gfx.getElementById(id))
+        .filter((model) => !!model && 'xywh' in model);
+    const top = models.filter(model => !model.group || !created.has(model.group.id));
+    if (dx !== 0 || dy !== 0) {
+        const updateElement = gfx.std.get(EdgelessCRUDIdentifier).updateElement;
+        // Wrapped, not handed over: `Store.updateBlock` is a prototype method that
+        // reads `this.readonly` and `this._crud`. `updateXYWH` happens to re-bind it
+        // (`updateBlock.call(ele.store, …)`), so today nothing breaks — but an
+        // unbound method sitting in a variable is a landmine that reads correct, and
+        // the day that `.call` becomes a plain call the first canvas block placed
+        // would throw on `readonly` of undefined.
+        const updateBlock = (model, props) => gfx.std.store.updateBlock(model, props);
+        for (const model of top) {
+            const bound = Bound.deserialize(model.xywh);
+            bound.x += dx;
+            bound.y += dy;
+            updateXYWH(model, bound, updateElement, updateBlock);
+        }
+    }
+    return top.map(model => model.id);
+}

package/dist/_pkgs/affine-widget-edgeless-toolbar/translations.d.ts

@@ -11,5 +11,11 @@ import { type ChromeWording } from '../affine-shared/services/index.js';
  */
 export declare const EDGELESS_TOOLBAR_COMING_SOON: ChromeWording;
 export declare const EDGELESS_TOOLBAR_MORE_TOOLS: ChromeWording;
+/**
+ * A family the element still carries but the host no longer configures
+ * (#396): the font picker keeps its name, greyed, with this mark. `{{name}}`
+ * is the family name, a proper name the host does not translate.
+ */
+export declare const EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE: ChromeWording;
 /** Every wording this package declares, in the order it renders them. */
 export declare const EDGELESS_TOOLBAR_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-widget-edgeless-toolbar/translations.js

@@ -14,7 +14,17 @@ export const EDGELESS_TOOLBAR_MORE_TOOLS = [
     'com.labre.edgeless-toolbar.more-tools',
     'More Tools',
 ];
+/**
+ * A family the element still carries but the host no longer configures
+ * (#396): the font picker keeps its name, greyed, with this mark. `{{name}}`
+ * is the family name, a proper name the host does not translate.
+ */
+export const EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE = [
+    'com.labre.edgeless-toolbar.font-family-unavailable',
+    '{{name}} (unavailable)',
+];
 /** Every wording this package declares, in the order it renders them. */
 export const EDGELESS_TOOLBAR_WORDINGS = [
     EDGELESS_TOOLBAR_MORE_TOOLS,
+    EDGELESS_TOOLBAR_FONT_FAMILY_UNAVAILABLE,
 ];

package/dist/_pkgs/affine-widget-edgeless-toolbar/view.js

@@ -3,6 +3,7 @@ import { artefactCatalogueDefaultExtension } from './catalogue/artefact-catalogu
 import { edgelessArtefactCatalogueWidget } from './catalogue/artefact-catalogue-widget.js';
 import { edgelessToolbarWidget } from './edgeless-toolbar.js';
 import { effects } from './effects.js';
+import { ArtefactPlacementTool } from './placement/artefact-placement-tool.js';
 export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
     constructor() {
         super(...arguments);
@@ -23,6 +24,10 @@ export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
             // sidebar overrides the seam and the widget then never opens.
             context.register(edgelessArtefactCatalogueWidget);
             context.register(artefactCatalogueDefaultExtension);
+            // Unconditionally too, and for the same reason: the tool is generic
+            // chrome driven by whatever commands are registered, so a framework whose
+            // flag is off simply never arms it. See `docs/adr/0009`.
+            context.register(ArtefactPlacementTool);
         }
     }
 }

package/dist/_pkgs/affine-widget-frame-title/edgeless-frame-title-editor.js

@@ -78,7 +78,8 @@ let EdgelessFrameTitleEditor = (() => {
       outline: none;
       z-index: 1;
       border: 1px solid var(--affine-primary-color);
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
       overflow: hidden;
       font-family: var(--affine-font-family);
     }

package/dist/_pkgs/affine-widget-slash-menu/translations.d.ts

@@ -53,12 +53,19 @@ export declare const SLASH_MENU_DELETE_DESCRIPTION: ChromeWording;
  * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
  *
  * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `List`, `Style` — note again, but written as TEMPLATE literals
+ *   (`` `1_List@${index++}` ``, `` `2_Style@${index++}` ``,
+ *   `blocks/note/src/configs/slash-menu.ts`), which is why the first
+ *   inventory — a grep for `group: '` — missed both (#390).
  * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
  *   (iframe) block, and (postponed, `blocks/table`) table.
  * - `Page` — the linked-doc embed block.
  * - `Edgeless Element` — surface-ref.
  * - `Date`, `Actions` — this package's own groups (`./config.ts`).
  *
+ * The inventory covers template literals too: the `<Name>` is read between the
+ * `_` and the `@`, whichever way the group string was built.
+ *
  * NOT included: `Database`, used only by the postponed `blocks/database` and
  * `blocks/data-view` — the PO's decision excludes those surfaces, and
  * `Database` has no other user today. A framework or a later lot that adds a
@@ -67,6 +74,15 @@ export declare const SLASH_MENU_DELETE_DESCRIPTION: ChromeWording;
  * of this existed.
  */
 export declare const SLASH_MENU_GROUP_BASIC: ChromeWording;
+export declare const SLASH_MENU_GROUP_LIST: ChromeWording;
+/**
+ * An ALIAS, not a new key: `STYLE_MENU_LABEL` already carries the word
+ * `Style` in the chrome table, and a second key with the same fallback would
+ * fail the "un mot chrome, une clé" test. Listed in the group table below,
+ * NOT in `SLASH_MENU_WORDINGS` — an alias is walked once, from
+ * `CHROME_WORDINGS`, exactly like `SLASH_MENU_COPY` / `_DUPLICATE`.
+ */
+export declare const SLASH_MENU_GROUP_STYLE: ChromeWording;
 export declare const SLASH_MENU_GROUP_CONTENT_MEDIA: ChromeWording;
 export declare const SLASH_MENU_GROUP_PAGE: ChromeWording;
 export declare const SLASH_MENU_GROUP_EDGELESS_ELEMENT: ChromeWording;

package/dist/_pkgs/affine-widget-slash-menu/translations.js

@@ -1,4 +1,4 @@
-import { TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DUPLICATE, TOOLBAR_MOVE_DOWN, TOOLBAR_MOVE_UP, } from '../affine-shared/services/index.js';
+import { STYLE_MENU_LABEL, TOOLBAR_COPY, TOOLBAR_DELETE, TOOLBAR_DUPLICATE, TOOLBAR_MOVE_DOWN, TOOLBAR_MOVE_UP, } from '../affine-shared/services/index.js';
 /**
  * The slash menu's own wordings — one `ChromeWording` per static config
  * literal (`name`, `description`, a tooltip's `caption`) that
@@ -91,12 +91,19 @@ export const SLASH_MENU_DELETE_DESCRIPTION = [
  * '<n>_<Name>@<i>'`, the `<Name>` between `_` and `@`):
  *
  * - `Basic` — callout, latex, note (paragraph/heading/list/quote/divider).
+ * - `List`, `Style` — note again, but written as TEMPLATE literals
+ *   (`` `1_List@${index++}` ``, `` `2_Style@${index++}` ``,
+ *   `blocks/note/src/configs/slash-menu.ts`), which is why the first
+ *   inventory — a grep for `group: '` — missed both (#390).
  * - `Content & Media` — attachment, bookmark, image, latex, the generic embed
  *   (iframe) block, and (postponed, `blocks/table`) table.
  * - `Page` — the linked-doc embed block.
  * - `Edgeless Element` — surface-ref.
  * - `Date`, `Actions` — this package's own groups (`./config.ts`).
  *
+ * The inventory covers template literals too: the `<Name>` is read between the
+ * `_` and the `@`, whichever way the group string was built.
+ *
  * NOT included: `Database`, used only by the postponed `blocks/database` and
  * `blocks/data-view` — the PO's decision excludes those surfaces, and
  * `Database` has no other user today. A framework or a later lot that adds a
@@ -108,6 +115,18 @@ export const SLASH_MENU_GROUP_BASIC = [
     'com.labre.slash-menu.group.basic',
     'Basic',
 ];
+export const SLASH_MENU_GROUP_LIST = [
+    'com.labre.slash-menu.group.list',
+    'List',
+];
+/**
+ * An ALIAS, not a new key: `STYLE_MENU_LABEL` already carries the word
+ * `Style` in the chrome table, and a second key with the same fallback would
+ * fail the "un mot chrome, une clé" test. Listed in the group table below,
+ * NOT in `SLASH_MENU_WORDINGS` — an alias is walked once, from
+ * `CHROME_WORDINGS`, exactly like `SLASH_MENU_COPY` / `_DUPLICATE`.
+ */
+export const SLASH_MENU_GROUP_STYLE = STYLE_MENU_LABEL;
 export const SLASH_MENU_GROUP_CONTENT_MEDIA = [
     'com.labre.slash-menu.group.content-media',
     'Content & Media',
@@ -131,6 +150,8 @@ export const SLASH_MENU_GROUP_ACTIONS = [
 /** The group table, keyed by the raw group name `parseGroup` extracts. */
 const SLASH_MENU_GROUP_WORDINGS = {
     Basic: SLASH_MENU_GROUP_BASIC,
+    List: SLASH_MENU_GROUP_LIST,
+    Style: SLASH_MENU_GROUP_STYLE,
     'Content & Media': SLASH_MENU_GROUP_CONTENT_MEDIA,
     Page: SLASH_MENU_GROUP_PAGE,
     'Edgeless Element': SLASH_MENU_GROUP_EDGELESS_ELEMENT,
@@ -167,6 +188,7 @@ export const SLASH_MENU_WORDINGS = [
     SLASH_MENU_COPY_DUPLICATE_CAPTION,
     SLASH_MENU_DELETE_DESCRIPTION,
     SLASH_MENU_GROUP_BASIC,
+    SLASH_MENU_GROUP_LIST,
     SLASH_MENU_GROUP_CONTENT_MEDIA,
     SLASH_MENU_GROUP_PAGE,
     SLASH_MENU_GROUP_EDGELESS_ELEMENT,

package/dist/_pkgs/affine-widget-toolbar/utils.js

@@ -23,6 +23,21 @@ export const sideMap = new Map([
     // has only one shape element
     ['affine:surface:shape', { top: 26, bottom: -26 }],
 ]);
+/**
+ * The narrowest room the row is ever told it has.
+ *
+ * A cap is a `max-width`: below the width of what the row cannot give up, it
+ * stops being an instruction and becomes a guillotine — the entries past it are
+ * painted outside the row's own background, over the document. A floor keeps
+ * that from ever happening on a number nobody meant.
+ *
+ * 120px is a minimal row, drawn: three icon buttons — the "⋮" plus the two
+ * entries a menu is worth opening for — at {@link MENU_BUTTON_WIDTH} each, the
+ * two 8px gaps between them, one separator and its gap, and the row's own 6px
+ * of padding on either side. 109px, rounded up to leave the border its half
+ * pixel and the eye a little air.
+ */
+const MIN_TOOLBAR_WIDTH = 120;
 export function autoUpdatePosition(signal, toolbar, referenceElement, flavour, placement, sideOptions, options = { elementResize: false }, 
 /**
  * Called whenever the room the row has just changed. This is the only place
@@ -51,22 +66,32 @@ onAvailableWidth) {
         }
         : {
             placement,
+            // ORDER MATTERS, and `size` comes LAST of the four — after `inline`,
+            // after `shift`, after `flip` — which is the order floating-ui
+            // documents for it and the order this row needs.
+            //
+            // `size` asks the question "how much room is there", and it has two
+            // different answers depending on whether a `shift` has already run:
+            //
+            // - **after `shift`** (`middlewareData.shift.enabled.x`): the room is
+            //   `maximumClippingWidth` — the clipping box, less the padding. Which
+            //   is the truth: it is where the row may be drawn, and `shift` will
+            //   slide the row to fit inside it.
+            // - **before `shift`**, on an UNALIGNED placement (`'top'`, which is
+            //   what a text selection's row uses), floating-ui falls back to
+            //   `width - 2 × overflow` — the row's own width, less twice what a
+            //   row CENTRED on the selection would stick out by. That number is
+            //   not room at all. It is fine while the centred row fits, and the
+            //   moment it would stick out by one pixel it collapses below the
+            //   row's width and the entries start leaving for the "⋮" — with 900px
+            //   of empty editor next to them, because `shift` was about to slide
+            //   the row back in anyway. Worse, it is computed from a width `size`
+            //   itself has just capped, so each `reset` makes it smaller: the
+            //   format bar measured 75px of "room" inside a 420px window.
+            //
+            // See the cap's only reader, `availableWidthOf`.
             middleware: [
                 offset(10 + offsetY),
-                size({
-                    padding: 10,
-                    apply: ({ elements, availableWidth }) => {
-                        elements.floating.style.width = 'fit-content';
-                        // The room the row has. The toolbar never wraps and never
-                        // scrolls: past this width its entries give way, in the order
-                        // they declared, into the "⋮" menu — see `ToolbarFitter`.
-                        const capped = `${availableWidth}px`;
-                        if (elements.floating.style.maxWidth !== capped) {
-                            elements.floating.style.maxWidth = capped;
-                            onAvailableWidth?.();
-                        }
-                    },
-                }),
                 isInline ? inline() : undefined,
                 shift(state => ({
                     padding: {
@@ -88,6 +113,20 @@ onAvailableWidth) {
                 // 25/08/2026, third video: the map background's row). Horizontal
                 // placement belongs to `shift`, which slides — it never teleports.
                 flip({ padding: 10, crossAxis: false, flipAlignment: false }),
+                size({
+                    padding: 10,
+                    apply: ({ elements, availableWidth }) => {
+                        elements.floating.style.width = 'fit-content';
+                        // The room the row has. The toolbar never wraps and never
+                        // scrolls: past this width its entries give way, in the order
+                        // they declared, into the "⋮" menu — see `ToolbarFitter`.
+                        const capped = `${Math.max(availableWidth, MIN_TOOLBAR_WIDTH)}px`;
+                        if (elements.floating.style.maxWidth !== capped) {
+                            elements.floating.style.maxWidth = capped;
+                            onAvailableWidth?.();
+                        }
+                    },
+                }),
                 hide(),
             ],
         };
@@ -599,6 +638,10 @@ const MAX_FIT_ROUNDS = 3;
  * keeps its natural width under it, while an `inner` toolbar is pinned to the
  * exact width of the block it sits on. Anything else — a row nothing has
  * positioned yet — has all the room in the world and collapses nothing.
+ *
+ * The cap is the clipping box less its padding, never the row's own width: see
+ * the middleware order in {@link autoUpdatePosition}. It is floored at
+ * {@link MIN_TOOLBAR_WIDTH}.
  */
 function availableWidthOf(toolbar) {
     const max = Number.parseFloat(toolbar.style.maxWidth);

package/dist/_pkgs/data-view/core/detail/field.js

@@ -129,7 +129,8 @@ let RecordField = (() => {
     }
 
     .field-content.is-editing {
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
     }
 
     .field-content.is-focus {

package/dist/_pkgs/data-view/core/filter/literal/define.js

@@ -83,7 +83,9 @@ export const allLiteralConfig = [
                     items: type.element.data?.map(tag => {
                         const selected = set.has(tag.id);
                         const prefix = selected
-                            ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                            ? CheckBoxCheckSolidIcon({
+                                style: `color:var(--affine-primary-color)`,
+                            })
                             : CheckBoxUnIcon();
                         return menu.action({
                             name: tag.value,

package/dist/_pkgs/data-view/core/group-by/renderer/boolean-group.js

@@ -15,7 +15,7 @@ export class BooleanGroupView extends BaseGroup {
     render() {
         return html ` <div class="data-view-group-title-boolean-view">
       ${this.value
-            ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+            ? CheckBoxCheckSolidIcon({ style: `color:var(--affine-primary-color)` })
             : CheckBoxUnIcon()}
     </div>`;
     }

package/dist/_pkgs/data-view/property-presets/checkbox/cell-renderer.js

@@ -40,6 +40,12 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
 import { checkboxPropertyModelConfig } from './define.js';
+/**
+ * The chrome accent, reached through its token rather than written as a hex:
+ * the six-dot burst is chrome, so it has to follow the host's theme (DESIGN.md,
+ * The Borrowed Blue Rule).
+ */
+const ACCENT = 'var(--affine-primary-color)';
 const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     const sparkingEl = document.createElement('div');
     sparkingEl.classList.add('affine-check-animation');
@@ -56,7 +62,7 @@ const playCheckAnimation = async (refElement, { left = 0, size = 20 } = {}) => {
     refElement.append(sparkingEl);
     await sparkingEl.animate([
         {
-            boxShadow: '0 -18px 0 -8px #1e96eb, 16px -8px 0 -8px #1e96eb, 16px 8px 0 -8px #1e96eb, 0 18px 0 -8px #1e96eb, -16px 8px 0 -8px #1e96eb, -16px -8px 0 -8px #1e96eb',
+            boxShadow: `0 -18px 0 -8px ${ACCENT}, 16px -8px 0 -8px ${ACCENT}, 16px 8px 0 -8px ${ACCENT}, 0 18px 0 -8px ${ACCENT}, -16px 8px 0 -8px ${ACCENT}, -16px -8px 0 -8px ${ACCENT}`,
         },
     ], { duration: 240, easing: 'ease', fill: 'forwards' }).finished;
     await sparkingEl.animate([
@@ -120,7 +126,7 @@ let CheckboxCell = (() => {
         render() {
             const checked = this.value ?? false;
             const icon = checked
-                ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                ? CheckBoxCheckSolidIcon({ style: `color:var(--affine-primary-color)` })
                 : CheckBoxUnIcon();
             return html ` <div class="affine-database-checkbox-container">
       <div

package/dist/_pkgs/data-view/view-presets/kanban/pc/cell.js

@@ -156,7 +156,7 @@ let KanbanCell = (() => {
                 ? '1px solid var(--affine-primary-color)'
                 : '';
             this.style.boxShadow = this.isEditing$.value
-                ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+                ? '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)'
                 : '';
             return html ` ${this.renderIcon()}
     ${renderUniLit(view, props, {

package/dist/_pkgs/data-view/view-presets/kanban/pc/controller/drag.js

@@ -172,7 +172,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(group, self, card) {
             const target = card ?? group.querySelector('.add-card');

package/dist/_pkgs/data-view/view-presets/table/pc/controller/drag.js

@@ -156,7 +156,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(x, y, width) {
             document.body.append(div);

package/dist/_pkgs/data-view/view-presets/table/pc/controller/selection.js

@@ -967,7 +967,7 @@ let SelectionElement = (() => {
                 ? 'dashed'
                 : 'solid';
             div.style.boxShadow = isEditing
-                ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+                ? '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)'
                 : 'unset';
             div.style.display = 'block';
             dragToFill.style.left = `${x + w}px`;

package/dist/_pkgs/data-view/view-presets/table/pc/header/vertical-indicator.js

@@ -101,7 +101,8 @@ let TableVerticalIndicator = (() => {
     }
 
     .with-shadow.vertical-indicator::after {
-      box-shadow: 0px 0px 8px 0px rgba(30, 150, 235, 0.35);
+      box-shadow: 0px 0px 8px 0px
+        color-mix(in srgb, var(--affine-primary-color) 35%, transparent);
     }
   `; }
         render() {

package/dist/_pkgs/data-view/view-presets/table/pc/row/row-select-checkbox.js

@@ -122,7 +122,9 @@ let RowSelectCheckbox = (() => {
             return html `
       <div class="${classString}">
         ${this.isSelected$.value
-                ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                ? CheckBoxCheckSolidIcon({
+                    style: `color:var(--affine-primary-color)`,
+                })
                 : CheckBoxUnIcon()}
       </div>
     `;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/drag.js

@@ -177,7 +177,8 @@ const createDropPreview = () => {
     div.style.height = '2px';
     div.style.borderRadius = '1px';
     div.style.backgroundColor = 'var(--affine-primary-color)';
-    div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
+    div.style.boxShadow =
+        '0px 0px 8px 0px color-mix(in srgb, var(--affine-primary-color) 35%, transparent)';
     return {
         display(x, y, width) {
             document.body.append(div);

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/selection.js

@@ -859,7 +859,7 @@ let SelectionElement = (() => {
                     height: `${focus.height}px`,
                     display: 'block',
                     boxShadow: focus.editing
-                        ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+                        ? '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)'
                         : 'unset',
                 })
                 : undefined;

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/group/top/header/vertical-indicator.js

@@ -101,7 +101,8 @@ let TableVerticalIndicator = (() => {
     }
 
     .with-shadow.vertical-indicator::after {
-      box-shadow: 0px 0px 8px 0px rgba(30, 150, 235, 0.35);
+      box-shadow: 0px 0px 8px 0px
+        color-mix(in srgb, var(--affine-primary-color) 35%, transparent);
     }
   `; }
         render() {

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/row/row-header.js

@@ -138,7 +138,9 @@ let TableRowHeader = (() => {
       <div @click=${this.selectRow} class="${styles.checkboxWrapper}">
         <div class="${classString}">
           ${this.rowSelected$.value
-                    ? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
+                    ? CheckBoxCheckSolidIcon({
+                        style: `color:var(--affine-primary-color)`,
+                    })
                     : CheckBoxUnIcon()}
         </div>
       </div>

package/dist/_pkgs/global/gfx/xywh.js

@@ -2,6 +2,13 @@ export function serializeXYWH(x, y, w, h) {
     return `[${x},${y},${w},${h}]`;
 }
 export function deserializeXYWH(xywh) {
+    // An ABSENT value is not a parse failure: a document whose Yjs state has
+    // pending structs can hand us an element whose `xywh` key is simply missing.
+    // Say nothing here — this getter runs several times per frame per element,
+    // and the surface already reports the damaged element once, at mount.
+    if (xywh === null || xywh === undefined) {
+        return [0, 0, 0, 0];
+    }
     try {
         return JSON.parse(xywh);
     }