@threadlabs/looma 0.23.13 → 0.23.15

package/editor/chunks/extensions.js

@@ -9561,10 +9561,10 @@ function arrayEquals(left, right) {
 }
 function readRenderedColumnWidths(tableElement) {
 	const colElements = Array.from(tableElement.querySelectorAll("colgroup col"));
-	if (colElements.length > 0) return colElements.map((column) => Math.max(1, Math.round(column.getBoundingClientRect().width)));
+	if (colElements.length > 0) return colElements.map((column) => Math.max(1, column.getBoundingClientRect().width));
 	const firstRow = tableElement.rows.item(0);
 	if (!firstRow) return [];
-	return Array.from(firstRow.cells).map((cell) => Math.max(1, Math.round(cell.getBoundingClientRect().width)));
+	return Array.from(firstRow.cells).map((cell) => Math.max(1, cell.getBoundingClientRect().width));
 }
 function distributeWidthDelta(widths, availableWidth, minWidth) {
 	const normalized = [...widths];
@@ -9672,8 +9672,8 @@ function insertTableAtRange(editor, range, options = {}) {
 * Browser layout is the source of truth at the end of a pointer resize, but
 * ProseMirror must persist integer widths in the document. The algorithm keeps
 * proportions, enforces a minimum, and distributes rounding error so the final
-* sum still equals the rendered table width. Spanning cells are updated once at
-* their top-left map coordinate rather than once per covered grid position.
+* sum fits the rendered column grid, excluding the outer table border. Spanning
+* cells are updated once at their top-left map coordinate rather than once per covered grid position.
 *
 * @invariant Every persisted width is an integer at least `minWidth`, and each
 * spanning cell receives one width per logical column from its top-left origin.
@@ -9685,7 +9685,7 @@ function normalizeActiveTableColumnWidths(editor, tableElement, minWidth = 25) {
 	if (!tableInfo) return false;
 	const renderedColumnWidths = readRenderedColumnWidths(tableElement);
 	if (renderedColumnWidths.length === 0) return false;
-	const normalizedColumnWidths = normalizeColumnWidths(renderedColumnWidths, Math.max(1, Math.round(tableElement.getBoundingClientRect().width)), minWidth);
+	const normalizedColumnWidths = normalizeColumnWidths(renderedColumnWidths, Math.max(1, Math.floor(renderedColumnWidths.reduce((sum, width) => sum + width, 0))), minWidth);
 	const { pos: tablePos, node: table } = tableInfo;
 	const map = TableMap.get(table);
 	const tableStart = tablePos + 1;

package/editor/extensions/table-commands.d.ts

@@ -95,8 +95,8 @@ export declare function insertTableAtRange(editor: Editor, range: Range, options
  * Browser layout is the source of truth at the end of a pointer resize, but
  * ProseMirror must persist integer widths in the document. The algorithm keeps
  * proportions, enforces a minimum, and distributes rounding error so the final
- * sum still equals the rendered table width. Spanning cells are updated once at
- * their top-left map coordinate rather than once per covered grid position.
+ * sum fits the rendered column grid, excluding the outer table border. Spanning
+ * cells are updated once at their top-left map coordinate rather than once per covered grid position.
  *
  * @invariant Every persisted width is an integer at least `minWidth`, and each
  * spanning cell receives one width per logical column from its top-left origin.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.13",
+  "version": "0.23.15",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-input.css

@@ -95,9 +95,14 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :scope,
+      :scope[data-ui-input-state~="size=sm"],
+      :scope[data-ui-input-state~="size=lg"] {
+        font-size: var(--ui-font-size-md);
+      }
+
       :scope[data-ui-input-state~="size=sm"] {
         min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
-        font-size: inherit;
       }
     }
 

package/styles/ui-tree-item.css

@@ -337,7 +337,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
       .row {
         grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
       }
@@ -351,6 +351,37 @@
         opacity: 1;
         pointer-events: auto;
       }
+
+      .row:is(:hover, :focus-within) > .label,
+      .row:is(:hover, :focus-within) > .label:dir(rtl),
+      :scope[data-move-source] > .row > .label,
+      :scope[data-move-source] > .row > .label:dir(rtl) {
+        mask-image: none;
+      }
+
+      .row[data-ui-marquee] > .label {
+        mask-image: linear-gradient(
+          to right,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      .row[data-ui-marquee] > .label:dir(rtl) {
+        mask-image: linear-gradient(
+          to left,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      :scope[data-selection-mode="multiple"] > .row {
+        grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+      }
+
+      :scope[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 5;
+      }
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -492,6 +523,24 @@
       grid-column: 5;
     }
 
+    @media (hover: none), (pointer: coarse) {
+      html[data-ui-input-modality="touch"] :scope .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :scope .actions {
+        grid-column: 5;
+      }
+
+      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 6;
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .row,
       .disclosure-icon,
@@ -570,7 +619,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -578,6 +627,9 @@
        outside the row. It is bare until pointed at: a resting surface behind it read as a faint
        patch rather than as a control. */
 
+    @media (hover: none), (pointer: coarse) {
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/vue/UiInput.vue

@@ -602,12 +602,17 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
+  [data-component~="ui-input"],
+  [data-component~="ui-input"][data-ui-input-state~="size=sm"],
+  [data-component~="ui-input"][data-ui-input-state~="size=lg"] {
+    font-size: var(--ui-font-size-md);
+  }
+
   [data-component~="ui-input"][data-ui-input-state~="size=sm"] {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
     );
-    font-size: inherit;
   }
 }
 

package/vue/UiTreeItem.vue

@@ -925,7 +925,7 @@ function attribute(value: unknown): any {
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
-@media (hover: none) {
+@media (hover: none), (pointer: coarse) {
   .row {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
   }
@@ -939,6 +939,41 @@ function attribute(value: unknown): any {
     opacity: 1;
     pointer-events: auto;
   }
+
+  .row:is(:hover, :focus-within) > .label,
+  .row:is(:hover, :focus-within) > .label:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label,
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
+    mask-image: none;
+  }
+
+  .row[data-ui-marquee] > .label {
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      )
+    );
+  }
+
+  .row[data-ui-marquee] > .label:dir(rtl) {
+    mask-image: linear-gradient(
+      to left,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      )
+    );
+  }
+
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+  }
+
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions {
+    grid-column: 5;
+  }
 }
 
 /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -1094,6 +1129,29 @@ html[data-ui-input-modality="touch"]
   grid-column: 5;
 }
 
+@media (hover: none), (pointer: coarse) {
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  }
+
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions {
+    grid-column: 5;
+  }
+
+  html[data-ui-input-modality="touch"]
+    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    > .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+  }
+
+  html[data-ui-input-modality="touch"]
+    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    > .row
+    > .actions {
+    grid-column: 6;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .row,
   .disclosure-icon,

package/vue/chunks/UiInput.js

@@ -690,6 +690,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-762209e1"]]);
+}), [["__scopeId", "data-v-e45d8c3f"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiTreeItem.js

@@ -610,6 +610,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d2b1bbe0"]]);
+}), [["__scopeId", "data-v-fd74ff6c"]]);
 //#endregion
 export { UiTreeItem_default as t };