@threadlabs/looma 0.39.4 → 0.39.5

package/docs/catalog.json

@@ -458,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.39.4",
+  "version": "0.39.5",
   "groups": [
     {
       "id": "layout",
@@ -3020,12 +3020,8 @@
           {
             "name": "--ui-callout-surface",
             "declarations": [
-              "var(--ui-info-soft)",
-              "var(--ui-surface-muted)",
-              "var(--ui-success-soft)",
-              "var(--ui-accent-soft)",
-              "var(--ui-warning-soft)",
-              "var(--ui-danger-soft)"
+              "color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default))",
+              "var(--ui-surface-muted)"
             ]
           },
           {
@@ -3039,9 +3035,6 @@
           {
             "name": "--ui-accent-active"
           },
-          {
-            "name": "--ui-accent-soft"
-          },
           {
             "name": "--ui-accent-solid"
           },
@@ -3051,9 +3044,6 @@
           {
             "name": "--ui-border-width"
           },
-          {
-            "name": "--ui-danger-soft"
-          },
           {
             "name": "--ui-danger-solid"
           },
@@ -3069,9 +3059,6 @@
           {
             "name": "--ui-font-size-sm"
           },
-          {
-            "name": "--ui-info-soft"
-          },
           {
             "name": "--ui-info-solid"
           },
@@ -3088,10 +3075,10 @@
             "name": "--ui-space-3"
           },
           {
-            "name": "--ui-success-soft"
+            "name": "--ui-success-solid"
           },
           {
-            "name": "--ui-success-solid"
+            "name": "--ui-surface-default"
           },
           {
             "name": "--ui-surface-muted"
@@ -3102,9 +3089,6 @@
           {
             "name": "--ui-text-secondary"
           },
-          {
-            "name": "--ui-warning-soft"
-          },
           {
             "name": "--ui-warning-solid"
           }

package/editor/chunks/extensions.js

@@ -11351,6 +11351,15 @@ function setActiveTableCellBackground(editor, backgroundColor) {
 * Default Tiptap extension preset for Looma editor.
 * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
 */
+/** Marks ProseMirror-owned content inside a composed block; surrounding slots may also contain UI.
+* The marker lives with the node view's contentDOM and never enters the saved document. */
+function documentContentNodeView(renderer) {
+	return (props) => {
+		const view = renderer(props);
+		view.contentDOM?.setAttribute("data-looma-editor-content", "");
+		return view;
+	};
+}
 var LoomaCodeBlock = CodeBlockLowlight.extend({
 	addAttributes() {
 		return {
@@ -11462,12 +11471,12 @@ function getDefaultEditorExtensions(options = {}) {
 		TaskList,
 		LoomaTaskItem.configure({ nested: false }),
 		Blockquote,
-		calloutNodeView ? LoomaCallout.extend({ addNodeView: () => calloutNodeView }) : LoomaCallout,
+		calloutNodeView ? LoomaCallout.extend({ addNodeView: () => documentContentNodeView(calloutNodeView) }) : LoomaCallout,
 		LoomaChip,
 		LoomaTabs,
 		LoomaTab,
 		...imageInline ? [] : [LoomaFigure, LoomaFigcaption],
-		LoomaExpand.configure({ nodeView: expandNodeView ?? null }),
+		LoomaExpand.configure({ nodeView: expandNodeView ? documentContentNodeView(expandNodeView) : null }),
 		LoomaTableOfContents.configure({ nodeView: tableOfContentsNodeView ?? null }),
 		LoomaFootnoteReference,
 		LoomaFootnotes,

package/package.json

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

package/styles/ui-callout.css

@@ -59,7 +59,7 @@
       --_ui-callout-icon: var(--ui-callout-icon);
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-      --_callout-surface: var(--ui-info-soft);
+      --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -127,31 +127,26 @@
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=tip"] {
-      --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=important"] {
-      --_callout-surface: var(--ui-accent-soft);
       --_callout-border: var(--ui-accent-solid);
       --_callout-icon: var(--ui-accent-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=warning"] {
-      --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
       --_callout-icon: var(--ui-warning-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=success"] {
-      --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=danger"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=caution"] {
-      --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);
     }

package/vue/UiCallout.vue

@@ -325,7 +325,7 @@ const hostState = computed(() =>
     --_ui-callout-icon: var(--ui-callout-icon);
     --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-    --_callout-surface: var(--ui-info-soft);
+    --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
     --_ui-selection-context-surface: light-dark(
       oklch(
         from var(--ui-callout-surface, var(--_callout-surface))
@@ -414,32 +414,27 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-callout-state~="tone=tip"]:where([data-hn-ui-callout])) {
-    --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
   }
 
   :global(:scope[data-ui-callout-state~="tone=important"]:where([data-hn-ui-callout])) {
-    --_callout-surface: var(--ui-accent-soft);
     --_callout-border: var(--ui-accent-solid);
     --_callout-icon: var(--ui-accent-solid);
   }
 
   :global(:scope[data-ui-callout-state~="tone=warning"]:where([data-hn-ui-callout])) {
-    --_callout-surface: var(--ui-warning-soft);
     --_callout-border: var(--ui-warning-solid);
     --_callout-icon: var(--ui-warning-solid);
   }
 
   :global(:scope[data-ui-callout-state~="tone=success"]:where([data-hn-ui-callout])) {
-    --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
   }
 
   :global(:scope[data-ui-callout-state~="tone=danger"]:where([data-hn-ui-callout])),
   :global(:scope[data-ui-callout-state~="tone=caution"]:where([data-hn-ui-callout])) {
-    --_callout-surface: var(--ui-danger-soft);
     --_callout-border: var(--ui-danger-solid);
     --_callout-icon: var(--ui-danger-solid);
   }

package/vue/chunks/UiCallout.js

@@ -297,6 +297,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4d92265d"]]);
+}), [["__scopeId", "data-v-63b1b042"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/components.css

@@ -1647,7 +1647,7 @@ html[data-ui-input-modality="touch"]
     --_ui-callout-icon: var(--ui-callout-icon);
     --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-    --_callout-surface: var(--ui-info-soft);
+    --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
     --_ui-selection-context-surface: light-dark(
       oklch(
         from var(--ui-callout-surface, var(--_callout-surface))
@@ -1730,27 +1730,22 @@ html[data-ui-input-modality="touch"]
     --_callout-icon: var(--ui-text-secondary);
 }
 :scope[data-ui-callout-state~="tone=tip"]:where([data-hn-ui-callout]) {
-    --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
 }
 :scope[data-ui-callout-state~="tone=important"]:where([data-hn-ui-callout]) {
-    --_callout-surface: var(--ui-accent-soft);
     --_callout-border: var(--ui-accent-solid);
     --_callout-icon: var(--ui-accent-solid);
 }
 :scope[data-ui-callout-state~="tone=warning"]:where([data-hn-ui-callout]) {
-    --_callout-surface: var(--ui-warning-soft);
     --_callout-border: var(--ui-warning-solid);
     --_callout-icon: var(--ui-warning-solid);
 }
 :scope[data-ui-callout-state~="tone=success"]:where([data-hn-ui-callout]) {
-    --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
 }
 :scope[data-ui-callout-state~="tone=danger"]:where([data-hn-ui-callout]),:scope[data-ui-callout-state~="tone=caution"]:where([data-hn-ui-callout]) {
-    --_callout-surface: var(--ui-danger-soft);
     --_callout-border: var(--ui-danger-solid);
     --_callout-icon: var(--ui-danger-solid);
 }
@@ -13065,6 +13060,17 @@ html[data-ui-input-modality="touch"]
   background: var(--ui-surface-muted);
 }
 @media (pointer: coarse) { .looma-compact-editor { font-size: var(--ui-font-size-md); } }
+/* Document whitespace belongs to projected content, not the component templates around it.
+   A low-priority layer preserves each component's explicit wrapping rules. */
+@layer looma-editor-whitespace {
+  :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror :where([data-component]) {
+    white-space: normal;
+  }
+  :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror :where([data-looma-editor-content]) {
+    white-space: break-spaces;
+  }
+}
+
 /* The editor surface owns its renderer canvas. Existing hooks retain their defaults. */
 /* Native TOC wrappers position the composed control beyond the active-block guide.
    The IconButton itself owns its dot, motion, focus and touch treatment. */
@@ -17318,7 +17324,7 @@ html[data-ui-input-modality="touch"]
       --_ui-callout-icon: var(--ui-callout-icon);
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-      --_callout-surface: var(--ui-info-soft);
+      --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -17386,31 +17392,26 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=tip"] {
-      --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=important"] {
-      --_callout-surface: var(--ui-accent-soft);
       --_callout-border: var(--ui-accent-solid);
       --_callout-icon: var(--ui-accent-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=warning"] {
-      --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
       --_callout-icon: var(--ui-warning-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=success"] {
-      --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
     :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=danger"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=caution"] {
-      --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);
     }