@threadlabs/looma 0.23.21 → 0.23.22

package/vue/UiSidebar.d.ts

@@ -101,9 +101,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:width"?: ((value: number) => any) | undefined;
 }>, {
     width: number | null;
+    resizable: boolean | null;
     breakpoint: "sm" | "md" | "lg" | null;
     collapsed: boolean | null;
-    resizable: boolean | null;
     side: "start" | "end" | null;
     maxWidth: number | null;
     minWidth: number | null;

package/vue/chunks/UiImage.js

@@ -0,0 +1,313 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiImage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-alt",
+	"data-height",
+	"data-placement",
+	"data-resizable",
+	"data-selected",
+	"data-src",
+	"data-width",
+	"data-ui-image-state"
+];
+var _hoisted_2 = {
+	class: "frame",
+	ref: "frame"
+};
+var _hoisted_3 = [
+	"src",
+	"alt",
+	"width",
+	"height"
+];
+var _hoisted_4 = ["hidden"];
+//#endregion
+//#region .build/vue/UiImage.vue
+var UiImage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiImage",
+	props: {
+		alt: {
+			type: null,
+			default: ""
+		},
+		height: {
+			type: null,
+			default: null
+		},
+		placement: {
+			type: null,
+			default: "block"
+		},
+		resizable: {
+			type: null,
+			default: false
+		},
+		selected: {
+			type: null,
+			default: false
+		},
+		src: {
+			type: null,
+			default: ""
+		},
+		width: {
+			type: null,
+			default: null
+		}
+	},
+	emits: [
+		"update:height",
+		"update:width",
+		"resize"
+	],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			alt: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "alt" },
+				description: "A text alternative for the image.",
+				default: ""
+			},
+			height: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "height" },
+				description: "Image height in CSS pixels; resizing preserves the intrinsic aspect ratio."
+			},
+			placement: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "placement" },
+				description: "Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.",
+				values: [
+					"block",
+					"center",
+					"wrap-left",
+					"wrap-right"
+				],
+				default: "block"
+			},
+			resizable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "resizable" },
+				description: "Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selected" },
+				description: "Outlines the media as the current selection.",
+				default: false
+			},
+			src: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "src" },
+				description: "The image source, used by the default media.",
+				default: ""
+			},
+			width: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "width" },
+				description: "Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping."
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			alt: "",
+			height: null,
+			placement: "block",
+			resizable: false,
+			selected: false,
+			src: "",
+			width: null
+		};
+		const checkedProps = computed(() => ({
+			alt: checkedProp(props["alt"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "alt", acceptedProps),
+			height: checkedProp(props["height"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "height", acceptedProps),
+			placement: checkedProp(props["placement"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "placement", acceptedProps),
+			resizable: checkedProp(props["resizable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "resizable", acceptedProps),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selected", acceptedProps),
+			src: checkedProp(props["src"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "src", acceptedProps),
+			width: checkedProp(props["width"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "width", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		const frameElement = useTemplateRef("frame");
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "figure")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-image> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-image> has an incompatible root."
+			})
+		});
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			checkedProps.value.placement && "placement",
+			checkedProps.value.placement != null && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
+			checkedProps.value.selected && "selected"
+		].filter(Boolean).join(" "));
+		const isResizeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["width"]) && Number.isInteger(detail["height"]) && (detail["phase"] === "preview" || detail["phase"] === "commit" || detail["phase"] === "cancel") && (detail["trigger"] === "pointer" || detail["trigger"] === "keyboard") && Object.keys(detail).every((key) => [
+			"width",
+			"height",
+			"phase",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { resize: isResizeDetail },
+			modeled: ["height", "width"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-image/ui-image.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-image/ui-image.js",
+				definition: "./components/ui-image/ui-image.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"alt",
+				"height",
+				"placement",
+				"resizable",
+				"selected",
+				"src",
+				"width"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
+			refs: { frame: frameElement }
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("figure", mergeProps({ "data-component": "ui-image" }, nativeAttrs(_ctx.$attrs), {
+				"data-alt": reflectedProp("alt", "alt", checkedProps.value.alt, void 0, false),
+				"data-height": reflectedProp("height", "height", checkedProps.value.height, void 0, false),
+				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
+				"data-resizable": reflectedProp("resizable", "resizable", checkedProps.value.resizable, void 0, false),
+				"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-src": reflectedProp("src", "src", checkedProps.value.src, void 0, false),
+				"data-width": reflectedProp("width", "width", checkedProps.value.width, void 0, false),
+				"data-ui-image-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [createElementVNode("div", _hoisted_2, [
+				renderSlot(_ctx.$slots, "media", {}, () => [createElementVNode("img", {
+					src: checkedProps.value.src ?? void 0,
+					alt: checkedProps.value.alt ?? void 0,
+					width: checkedProps.value.width ?? void 0,
+					height: checkedProps.value.height ?? void 0
+				}, null, 8, _hoisted_3)]),
+				createElementVNode("div", {
+					class: "handles",
+					hidden: !(checkedProps.value.selected && checkedProps.value.resizable)
+				}, [..._cache[0] || (_cache[0] = [
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "top-left",
+						"aria-label": "Resize image from top left"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "top-right",
+						"aria-label": "Resize image from top right"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "bottom-left",
+						"aria-label": "Resize image from bottom left"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "bottom-right",
+						"aria-label": "Resize image from bottom right"
+					}, null, -1)
+				])], 8, _hoisted_4),
+				renderSlot(_ctx.$slots, "controls")
+			], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-2895fbac"]]);
+//#endregion
+export { UiImage_default as t };

package/vue/chunks/UiSeparator.js

@@ -2,34 +2,86 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { i as vPropValidity, t as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-orientation", "data-orientation"];
+var _hoisted_1 = [
+	"aria-orientation",
+	"data-orientation",
+	"data-selectable",
+	"data-selected",
+	"data-ui-separator-state"
+];
 //#endregion
 //#region .build/vue/UiSeparator.vue
 var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiSeparator",
-	props: { orientation: {
-		type: null,
-		default: "horizontal"
-	} },
+	props: {
+		orientation: {
+			type: null,
+			default: "horizontal"
+		},
+		selectable: {
+			type: null,
+			default: false
+		},
+		selected: {
+			type: null,
+			default: false
+		}
+	},
 	setup(__props) {
-		const propValidityContract = { props: { orientation: {
-			type: {
-				kind: "terminal",
-				name: "keyword"
+		const propValidityContract = { props: {
+			orientation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "aria-orientation" },
+				description: "Whether the separator divides stacked content (horizontal) or inline content (vertical).",
+				values: ["horizontal", "vertical"],
+				default: "horizontal"
 			},
-			required: false,
-			target: { attribute: "aria-orientation" },
-			description: "Whether the separator divides stacked content (horizontal) or inline content (vertical).",
-			values: ["horizontal", "vertical"],
-			default: "horizontal"
-		} } };
+			selectable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selectable" },
+				description: "Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selected" },
+				description: "Shows the selected document divider. Selection does not change separator semantics.",
+				default: false
+			}
+		} };
 		const props = __props;
-		const acceptedProps = { orientation: "horizontal" };
-		const checkedProps = computed(() => ({ orientation: checkedProp(props["orientation"], {
-			kind: "terminal",
-			name: "keyword"
-		}, false, "orientation", acceptedProps) }));
+		const acceptedProps = {
+			orientation: "horizontal",
+			selectable: false,
+			selected: false
+		};
+		const checkedProps = computed(() => ({
+			orientation: checkedProp(props["orientation"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "orientation", acceptedProps),
+			selectable: checkedProp(props["selectable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selectable", acceptedProps),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selected", acceptedProps)
+		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -54,16 +106,21 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				message: "Server markup for <ui-separator> has an incompatible root."
 			})
 		});
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [checkedProps.value.selectable && "selectable", checkedProps.value.selected && "selected"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
 				"aria-orientation": checkedProps.value.orientation ?? void 0,
-				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false)
+				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
+				"data-selectable": reflectedProp("selectable", "selectable", checkedProps.value.selectable, void 0, false),
+				"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-ui-separator-state": hostState.value || void 0
 			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5289daff"]]);
+}), [["__scopeId", "data-v-7451a37c"]]);
 //#endregion
 export { UiSeparator_default as t };

package/vue/components.css

@@ -4789,6 +4789,156 @@ svg[data-v-539c5c85-s] {
   display: none;
 }
 
+[data-component~="ui-image"][data-v-2895fbac] {
+  display: flex;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--ui-space-3) 0;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=center"][data-v-2895fbac] {
+  justify-content: center;
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"][data-v-2895fbac] {
+  float: left;
+  padding-inline-end: var(--ui-space-4);
+}
+[data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"][data-v-2895fbac] {
+  float: right;
+  padding-inline-start: var(--ui-space-4);
+}
+[data-component~="ui-image"][data-v-2895fbac]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+  inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame[data-v-2895fbac] {
+  inline-size: 100%;
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  img[data-v-2895fbac],
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+  .frame
+  img[data-v-2895fbac-s] {
+  inline-size: 100%;
+}
+.frame[data-v-2895fbac] {
+  position: relative;
+  flex: 0 1 auto;
+  inline-size: var(--_ui-image-width, fit-content);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  align-self: flex-start;
+  border-radius: var(--ui-radius-md);
+}
+.frame img[data-v-2895fbac], .frame img[data-v-2895fbac-s] {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+  margin: 0;
+  border-radius: inherit;
+}
+[data-component~="ui-image"][data-resizing] .frame img[data-v-2895fbac],
+[data-component~="ui-image"][data-resizing] .frame img[data-v-2895fbac-s] {
+  inline-size: 100%;
+}
+[data-component~="ui-image"][data-ui-image-state~="selected"] .frame[data-v-2895fbac] {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-border-width);
+}
+.handle[data-v-2895fbac] {
+  position: absolute;
+  z-index: 1;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+}
+.handle[data-v-2895fbac]::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle[data-v-2895fbac]:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  border-radius: var(--ui-radius-sm);
+}
+.handle[data-corner="top-left"][data-v-2895fbac] {
+  top: -12px;
+  left: -12px;
+  cursor: nwse-resize;
+}
+.handle[data-corner="top-right"][data-v-2895fbac] {
+  top: -12px;
+  right: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-left"][data-v-2895fbac] {
+  bottom: -12px;
+  left: -12px;
+  cursor: nesw-resize;
+}
+.handle[data-corner="bottom-right"][data-v-2895fbac] {
+  bottom: -12px;
+  right: -12px;
+  cursor: nwse-resize;
+}
+.handles[hidden][data-v-2895fbac], [data-component~="ui-image"][hidden][data-v-2895fbac] {
+  display: none;
+}
+@media (max-width: 767px) {
+[data-component~="ui-image"][data-v-2895fbac]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+    float: none;
+    inline-size: 100%;
+    padding-inline: 0;
+}
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+    .handles[data-v-2895fbac] {
+    display: none;
+}
+}
+@media (pointer: coarse) {
+.handle[data-v-2895fbac] {
+    inline-size: 44px;
+    block-size: 44px;
+}
+.handle[data-v-2895fbac]::after {
+    inset: 18px;
+}
+.handle[data-corner="top-left"][data-v-2895fbac] {
+    top: -22px;
+    left: -22px;
+}
+.handle[data-corner="top-right"][data-v-2895fbac] {
+    top: -22px;
+    right: -22px;
+}
+.handle[data-corner="bottom-left"][data-v-2895fbac] {
+    bottom: -22px;
+    left: -22px;
+}
+.handle[data-corner="bottom-right"][data-v-2895fbac] {
+    bottom: -22px;
+    right: -22px;
+}
+}
+@media (forced-colors: active) {
+[data-component~="ui-image"][data-ui-image-state~="selected"] .frame[data-v-2895fbac], .handle[data-v-2895fbac]:focus-visible {
+    outline-color: Highlight;
+}
+.handle[data-v-2895fbac]::after {
+    border-color: Highlight;
+    background: Canvas;
+}
+}
+
 /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
 @property --ui-input-border {
@@ -7033,7 +7183,7 @@ dialog[data-v-d317023c] {
 }
 
 /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
-[data-component~="ui-separator"][data-v-5289daff] {
+[data-component~="ui-separator"][data-v-7451a37c] {
   box-sizing: border-box;
   align-self: stretch;
   margin: 0;
@@ -7041,12 +7191,29 @@ dialog[data-v-d317023c] {
   border-block-start: var(--ui-border-width) solid
     var(--ui-separator-color, var(--ui-border-divider));
 }
-[data-component~="ui-separator"][aria-orientation="vertical"][data-v-5289daff] {
+[data-component~="ui-separator"][aria-orientation="vertical"][data-v-7451a37c] {
   block-size: auto;
   border-block-start: 0;
   border-inline-start: var(--ui-border-width) solid
     var(--ui-separator-color, var(--ui-border-divider));
 }
+[data-component~="ui-separator"][data-ui-separator-state~="selectable"][data-v-7451a37c] {
+  min-block-size: var(--ui-control-size-sm);
+  border: 0;
+  background: linear-gradient(
+    var(--ui-separator-color, var(--ui-border-divider)),
+    var(--ui-separator-color, var(--ui-border-divider))
+  ) center / 100% var(--ui-border-width) no-repeat;
+  cursor: pointer;
+}
+[data-component~="ui-separator"][data-ui-separator-state~="selectable"][data-v-7451a37c]:hover {
+  background-color: var(--ui-surface-hover);
+}
+[data-component~="ui-separator"][data-ui-separator-state~="selected"][data-v-7451a37c] {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
+  border-radius: var(--ui-radius-sm);
+}
 
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-sidebar-backdrop {
@@ -9364,13 +9531,6 @@ html[data-ui-input-modality="touch"]
   pointer-events: none;
 }
 
-.looma-editor .ProseMirror img {
-  max-width: 100%;
-  height: auto;
-  margin: var(--ui-space-3) 0;
-  border-radius: var(--ui-radius-md);
-}
-
 .looma-editor .ProseMirror img[data-looma-image]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(var(--ui-focus-width) + var(--ui-border-width));