@burger-editor/client 4.0.0-alpha.7 → 4.0.0-alpha.8

package/dist/client.css

@@ -504,6 +504,7 @@
   --bge-dialog-background-color: var(--bge-ui-background-color);
   --bge-focus-outline-width: 2px;
   --bge-tooltip-background-color: rgb(0 0 0 / 60%);
+  --bge-font-family-monospace: "Courier New", monospace;
 }
 
 :where(body:has(dialog[open])) {
@@ -523,6 +524,7 @@
   padding: 0;
   padding-block: 1em;
   overscroll-behavior: contain;
+  font-size: 16px;
   color: var(--bge-dialog-font-color);
   resize: both;
   background: var(--bge-dialog-background-color);
@@ -596,16 +598,16 @@ select,
 textarea) {
   inline-size: 100%;
   padding: 0.5em 0.7em;
-  font-size: inherit;
+  font-size: 1em;
   line-height: 1.1;
-  border: 1px solid var(--bge-border-color);
-  border-radius: var(--border-radius);
 }
 :where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
 select,
 textarea,
 [contenteditable]) {
   background: var(--bge-lightest-color);
+  border: 1px solid var(--bge-border-color);
+  border-radius: var(--border-radius);
 }
 :where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
 select,
@@ -762,28 +764,33 @@ textarea,
   display: none;
 }
 
-[data-bgi] {
+[data-bge-component=editable-area] [data-bgi] {
+  --outline: none;
   min-inline-size: 20px;
   min-block-size: 20px;
-  outline: 1px #a6a6a6 dotted;
+  outline: var(--outline);
+}
+[data-bge-component=editable-area] [data-bgi]:where([data-bge-container]:hover [data-bge-component=editable-area] [data-bgi]) {
+  --outline: 1px #a6a6a6 dotted;
 }
-[data-bgi]:hover {
+[data-bge-component=editable-area] [data-bgi]:hover {
+  --outline: 1px solid var(--bge-ui-primary-color);
   cursor: pointer;
-  outline: 1px solid var(--bge-ui-primary-color);
-  background-color: var(--bge-ui-background-color);
+  background-color: oklch(from currentcolor l c h/5%);
+  background-blend-mode: darken;
 }
-[data-bgi]:hover img {
+[data-bge-component=editable-area] [data-bgi]:hover img {
   filter: brightness(90%);
 }
-[data-bgi] a,
-[data-bgi] area,
-[data-bgi] button,
-[data-bgi] input,
-[data-bgi] label,
-[data-bgi] select,
-[data-bgi] summary,
-[data-bgi] textarea,
-[data-bgi] iframe {
+[data-bge-component=editable-area] [data-bgi] a,
+[data-bge-component=editable-area] [data-bgi] area,
+[data-bge-component=editable-area] [data-bgi] button,
+[data-bge-component=editable-area] [data-bgi] input,
+[data-bge-component=editable-area] [data-bgi] label,
+[data-bge-component=editable-area] [data-bgi] select,
+[data-bge-component=editable-area] [data-bgi] summary,
+[data-bge-component=editable-area] [data-bgi] textarea,
+[data-bge-component=editable-area] [data-bgi] iframe {
   pointer-events: none;
 }
 

package/dist/client.js

@@ -2928,6 +2928,12 @@ function requireSemver () {
 var semverExports = requireSemver();
 const semver = /*@__PURE__*/getDefaultExportFromCjs(semverExports);
 
+const CSS_LAYER = {
+    base: 'bge-component-bases',
+    components: 'bge-components',
+    ui: 'bge-ui',
+};
+
 /**
  *
  * @param doc
@@ -2941,6 +2947,18 @@ function appendStylesheetTo(doc, url) {
     doc.head.append(link);
 }
 
+/**
+ *
+ * @param cssContents
+ * @param layer
+ */
+function createStylesheet(cssContents, layer) {
+    const css = layer ? `@layer ${layer} {${cssContents}}` : cssContents;
+    const blob = new Blob([css], { type: 'text/css' });
+    const url = URL.createObjectURL(blob);
+    return url;
+}
+
 class ElementNotFoundError extends Error {
     static {
         this.prototype.name = 'ElementNotFoundError';
@@ -2989,9 +3007,7 @@ class EditorUI {
         this.#el = typeof elOrSelector === 'string' ? getElement(elOrSelector) : elOrSelector;
         this.#el.dataset.bgeComponent = name;
         if (options?.stylesheet) {
-            const css = options.stylesheet;
-            const blob = new Blob([css], { type: 'text/css' });
-            const url = URL.createObjectURL(blob);
+            const url = createStylesheet(options.stylesheet, CSS_LAYER.ui);
             appendStylesheetTo(this.el.ownerDocument, url);
         }
     }
@@ -3280,35 +3296,43 @@ class ComponentObserver {
  *
  * @param items
  * @param generalCSS
+ * @param layer
  */
-function createComponentStylesheet(items, generalCSS) {
+function createComponentStylesheet(items, generalCSS, layer) {
     const itemStyles = Object.values(items)
         .map((item) => item.style)
         .filter(Boolean)
         .join('\n');
-    const css = `${itemStyles}\n${generalCSS}`;
+    return createStylesheet(itemStyles + '\n' + generalCSS, layer);
+}
+
+/**
+ *
+ * @param url
+ * @param layer
+ */
+async function createStylesheetFromUrl(url, layer) {
+    const response = await fetch(url);
+    const cssContents = await response.text();
+    const css = layer ? `@layer ${layer} {${cssContents}}` : cssContents;
     const blob = new Blob([css], { type: 'text/css' });
-    const url = URL.createObjectURL(blob);
-    return url;
+    const blobUrl = URL.createObjectURL(blob);
+    return blobUrl;
 }
 
 const PREFIX = '--bge-options-';
 /**
- *
+ * Get all custom properties from editorArea
  * @param editorArea
  */
 function getCustomProperties(editorArea) {
     const categories = new Map();
     const defaultValues = new Map();
-    // From iframe scope
-    const CSSStyleRule = editorArea.containerElement.ownerDocument.defaultView?.CSSStyleRule;
-    if (CSSStyleRule === undefined) {
-        throw new Error('CSSStyleRule is not available');
-    }
     for (const styleSheet of editorArea.containerElement.ownerDocument.styleSheets) {
         try {
-            for (const cssRule of styleSheet.cssRules) {
-                if (cssRule instanceof CSSStyleRule && cssRule.selectorText === ':root') {
+            const styleRules = getStyleRules(styleSheet.cssRules, editorArea);
+            for (const cssRule of styleRules) {
+                if (cssRule.selectorText === ':root') {
                     for (const cssProperty of cssRule.style) {
                         if (cssProperty.startsWith(PREFIX)) {
                             const [type, key] = cssProperty.slice(PREFIX.length).split('-');
@@ -3337,6 +3361,13 @@ function getCustomProperties(editorArea) {
             throw error;
         }
     }
+    for (const propList of categories.values()) {
+        for (const [key, customProperty] of propList.entries()) {
+            if (customProperty.value.trim().toLowerCase() === 'null') {
+                propList.delete(key);
+            }
+        }
+    }
     for (const [category, value] of defaultValues.entries()) {
         const currentMap = categories.get(category);
         if (!currentMap) {
@@ -3350,6 +3381,34 @@ function getCustomProperties(editorArea) {
     }
     return categories;
 }
+/**
+ * Get all CSSStyleRule from CSSRule array recursively
+ * @param rules - CSSRule array
+ * @param scope - EditableArea
+ * @returns CSSStyleRule array
+ */
+function getStyleRules(rules, scope) {
+    const CSSStyleRule = scope.containerElement.ownerDocument.defaultView?.CSSStyleRule;
+    if (CSSStyleRule === undefined) {
+        throw new Error('CSSStyleRule is not available');
+    }
+    const CSSGroupingRule = scope.containerElement.ownerDocument.defaultView?.CSSGroupingRule;
+    if (CSSGroupingRule === undefined) {
+        throw new Error('CSSGroupingRule is not available');
+    }
+    const styleRules = [];
+    for (const rule of rules) {
+        if (rule instanceof CSSStyleRule) {
+            styleRules.push(rule);
+            continue;
+        }
+        if (rule instanceof CSSGroupingRule) {
+            styleRules.push(...getStyleRules(rule.cssRules, scope));
+            continue;
+        }
+    }
+    return styleRules;
+}
 
 const getCSSPropertyAsNumberCache = new Map();
 /**
@@ -3384,10 +3443,6 @@ class BlockMenu extends EditorUI {
 					position: absolute;
 					z-index: 2147483647;
 					pointer-events: none;
-
-					> * {
-						pointer-events: auto;
-					}
 				}
 			`,
         });
@@ -5296,8 +5351,12 @@ class BurgerEditorEngine {
     static #itemSeeds = new Map();
     static async new(options) {
         const engine = new BurgerEditorEngine(options);
-        const componentStylesheet = createComponentStylesheet(options.items, options.generalCSS);
-        const stylesheets = [componentStylesheet, ...(options.config.stylesheets ?? [])];
+        const layers = createStylesheet(`@layer ${CSS_LAYER.base}, ${CSS_LAYER.components}, ${CSS_LAYER.ui};`);
+        const baseStylesheet = createComponentStylesheet(options.items, options.generalCSS, CSS_LAYER.base);
+        const componentStylesheets = await Promise.all(options.config.stylesheets.map(async (stylesheet) => {
+            return createStylesheetFromUrl(stylesheet.path, stylesheet.layer ?? CSS_LAYER.components);
+        }));
+        const stylesheets = [layers, baseStylesheet, ...componentStylesheets];
         const mainInitialContent = typeof options.initialContents === 'string'
             ? options.initialContents
             : options.initialContents.main;
@@ -6553,6 +6612,7 @@ const INSPECT_EFFECT = 1 << 17;
 const HEAD_EFFECT = 1 << 18;
 const EFFECT_PRESERVED = 1 << 19;
 const EFFECT_IS_UPDATING = 1 << 20;
+const USER_EFFECT = 1 << 21;
 
 const STATE_SYMBOL = Symbol('$state');
 const LEGACY_PROPS = Symbol('legacy props');
@@ -6748,7 +6808,7 @@ function pop(component) {
 					var component_effect = component_effects[i];
 					set_active_effect(component_effect.effect);
 					set_active_reaction(component_effect.reaction);
-					effect(component_effect.fn);
+					create_user_effect(component_effect.fn);
 				}
 			} finally {
 				set_active_effect(previous_effect);
@@ -7111,7 +7171,7 @@ function derived(fn) {
 		fn,
 		reactions: null,
 		rv: 0,
-		v: /** @type {V} */ (null),
+		v: /** @type {V} */ (UNINITIALIZED),
 		wv: 0,
 		parent: parent_derived ?? active_effect,
 		ac: null
@@ -7312,7 +7372,7 @@ function set(source, value, should_proxy = false) {
 		(!untracking || (active_reaction.f & INSPECT_EFFECT) !== 0) &&
 		is_runes() &&
 		(active_reaction.f & (DERIVED | BLOCK_EFFECT | INSPECT_EFFECT)) !== 0 &&
-		!(reaction_sources?.[1].includes(source) && reaction_sources[0] === active_reaction)
+		!(source_ownership?.reaction === active_reaction && source_ownership.sources.includes(source))
 	) {
 		state_unsafe_mutation();
 	}
@@ -7721,11 +7781,17 @@ function user_effect(fn) {
 			reaction: active_reaction
 		});
 	} else {
-		var signal = effect(fn);
-		return signal;
+		return create_user_effect(fn);
 	}
 }
 
+/**
+ * @param {() => void | (() => void)} fn
+ */
+function create_user_effect(fn) {
+	return create_effect(EFFECT | USER_EFFECT, fn, false);
+}
+
 /**
  * Internal representation of `$effect.pre(...)`
  * @param {() => void | (() => void)} fn
@@ -7733,7 +7799,7 @@ function user_effect(fn) {
  */
 function user_pre_effect(fn) {
 	validate_effect();
-	return render_effect(fn);
+	return create_effect(RENDER_EFFECT | USER_EFFECT, fn, true);
 }
 
 /**
@@ -8216,17 +8282,17 @@ function set_active_effect(effect) {
 /**
  * When sources are created within a reaction, reading and writing
  * them within that reaction should not cause a re-run
- * @type {null | [active_reaction: Reaction, sources: Source[]]}
+ * @type {null | { reaction: Reaction, sources: Source[] }}
  */
-let reaction_sources = null;
+let source_ownership = null;
 
 /** @param {Value} value */
 function push_reaction_value(value) {
 	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
-		if (reaction_sources === null) {
-			reaction_sources = [active_reaction, [value]];
+		if (source_ownership === null) {
+			source_ownership = { reaction: active_reaction, sources: [value] };
 		} else {
-			reaction_sources[1].push(value);
+			source_ownership.sources.push(value);
 		}
 	}
 }
@@ -8360,7 +8426,12 @@ function schedule_possible_effect_self_invalidation(signal, effect, root = true)
 	for (var i = 0; i < reactions.length; i++) {
 		var reaction = reactions[i];
 
-		if (reaction_sources?.[1].includes(signal) && reaction_sources[0] === active_reaction) continue;
+		if (
+			source_ownership?.reaction === active_reaction &&
+			source_ownership.sources.includes(signal)
+		) {
+			continue;
+		}
 
 		if ((reaction.f & DERIVED) !== 0) {
 			schedule_possible_effect_self_invalidation(/** @type {Derived} */ (reaction), effect, false);
@@ -8382,7 +8453,7 @@ function update_reaction(reaction) {
 	var previous_untracked_writes = untracked_writes;
 	var previous_reaction = active_reaction;
 	var previous_skip_reaction = skip_reaction;
-	var previous_reaction_sources = reaction_sources;
+	var previous_reaction_sources = source_ownership;
 	var previous_component_context = component_context;
 	var previous_untracking = untracking;
 
@@ -8395,10 +8466,10 @@ function update_reaction(reaction) {
 		(flags & UNOWNED) !== 0 && (untracking || !is_updating_effect || active_reaction === null);
 	active_reaction = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null;
 
-	reaction_sources = null;
+	source_ownership = null;
 	set_component_context(reaction.ctx);
 	untracking = false;
-	read_version++;
+	++read_version;
 
 	reaction.f |= EFFECT_IS_UPDATING;
 
@@ -8483,7 +8554,7 @@ function update_reaction(reaction) {
 		untracked_writes = previous_untracked_writes;
 		active_reaction = previous_reaction;
 		skip_reaction = previous_skip_reaction;
-		reaction_sources = previous_reaction_sources;
+		source_ownership = previous_reaction_sources;
 		set_component_context(previous_component_context);
 		untracking = previous_untracking;
 
@@ -8650,6 +8721,8 @@ function flush_queued_effects(effects) {
 
 		if ((effect.f & (DESTROYED | INERT)) === 0) {
 			if (check_dirtiness(effect)) {
+				var wv = write_version;
+
 				update_effect(effect);
 
 				// Effects with no dependencies or teardown do not get added to the effect tree.
@@ -8666,9 +8739,19 @@ function flush_queued_effects(effects) {
 						effect.fn = null;
 					}
 				}
+
+				// if state is written in a user effect, abort and re-schedule, lest we run
+				// effects that should be removed as a result of the state change
+				if (write_version > wv && (effect.f & USER_EFFECT) !== 0) {
+					break;
+				}
 			}
 		}
 	}
+
+	for (; i < length; i += 1) {
+		schedule_effect(effects[i]);
+	}
 }
 
 /**
@@ -8765,7 +8848,10 @@ function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		if (!reaction_sources?.[1].includes(signal) || reaction_sources[0] !== active_reaction) {
+		if (
+			source_ownership?.reaction !== active_reaction ||
+			!source_ownership?.sources.includes(signal)
+		) {
 			var deps = active_reaction.deps;
 			if (signal.rv < read_version) {
 				signal.rv = read_version;
@@ -8800,7 +8886,7 @@ function get(signal) {
 		}
 	}
 
-	if (is_derived) {
+	if (is_derived && !is_destroying_effect) {
 		derived = /** @type {Derived} */ (signal);
 
 		if (check_dirtiness(derived)) {
@@ -8808,13 +8894,48 @@ function get(signal) {
 		}
 	}
 
-	if (is_destroying_effect && old_values.has(signal)) {
-		return old_values.get(signal);
+	if (is_destroying_effect) {
+		if (old_values.has(signal)) {
+			return old_values.get(signal);
+		}
+
+		if (is_derived) {
+			derived = /** @type {Derived} */ (signal);
+
+			var value = derived.v;
+
+			// if the derived is dirty, or depends on the values that just changed, re-execute
+			if ((derived.f & CLEAN) !== 0 || depends_on_old_values(derived)) {
+				value = execute_derived(derived);
+			}
+
+			old_values.set(derived, value);
+
+			return value;
+		}
 	}
 
 	return signal.v;
 }
 
+/** @param {Derived} derived */
+function depends_on_old_values(derived) {
+	if (derived.v === UNINITIALIZED) return true; // we don't know, so assume the worst
+	if (derived.deps === null) return false;
+
+	for (const dep of derived.deps) {
+		if (old_values.has(dep)) {
+			return true;
+		}
+
+		if ((dep.f & DERIVED) !== 0 && depends_on_old_values(/** @type {Derived} */ (dep))) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 /**
  * Capture an array of all the signals that are read when `fn` is called
  * @template T
@@ -10821,9 +10942,9 @@ function set_style(dom, value, prev_styles, next_styles) {
  * @template V
  * @param {HTMLSelectElement} select
  * @param {V} value
- * @param {boolean} [mounting]
+ * @param {boolean} mounting
  */
-function select_option(select, value, mounting) {
+function select_option(select, value, mounting = false) {
 	if (select.multiple) {
 		// If value is null or undefined, keep the selection as is
 		if (value == undefined) {
@@ -11192,7 +11313,7 @@ function attribute_effect(
 		var current = set_attributes(element, prev, next, css_hash, skip_warning);
 
 		if (inited && is_select && 'value' in next) {
-			select_option(/** @type {HTMLSelectElement} */ (element), next.value, false);
+			select_option(/** @type {HTMLSelectElement} */ (element), next.value);
 		}
 
 		for (let symbol of Object.getOwnPropertySymbols(effects)) {
@@ -11217,7 +11338,7 @@ function attribute_effect(
 		var select = /** @type {HTMLSelectElement} */ (element);
 
 		effect(() => {
-			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value);
+			select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
 			init_select(select);
 		});
 	}
@@ -11515,11 +11636,12 @@ function capture_store_binding(fn) {
 	}
 }
 
-/** @import { Derived, Source } from './types.js' */
+/** @import { ComponentContext } from '#client' */
+/** @import { Derived, Effect, Source } from './types.js' */
 
 /**
  * The proxy handler for legacy $$restProps and $$props
- * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number> }>}}
+ * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number>, parent_effect: Effect }>}}
  */
 const legacy_rest_props_handler = {
 	get(target, key) {
@@ -11529,17 +11651,25 @@ const legacy_rest_props_handler = {
 	},
 	set(target, key, value) {
 		if (!(key in target.special)) {
-			// Handle props that can temporarily get out of sync with the parent
-			/** @type {Record<string, (v?: unknown) => unknown>} */
-			target.special[key] = prop(
-				{
-					get [key]() {
-						return target.props[key];
-					}
-				},
-				/** @type {string} */ (key),
-				PROPS_IS_UPDATED
-			);
+			var previous_effect = active_effect;
+
+			try {
+				set_active_effect(target.parent_effect);
+
+				// Handle props that can temporarily get out of sync with the parent
+				/** @type {Record<string, (v?: unknown) => unknown>} */
+				target.special[key] = prop(
+					{
+						get [key]() {
+							return target.props[key];
+						}
+					},
+					/** @type {string} */ (key),
+					PROPS_IS_UPDATED
+				);
+			} finally {
+				set_active_effect(previous_effect);
+			}
 		}
 
 		target.special[key](value);
@@ -11578,7 +11708,19 @@ const legacy_rest_props_handler = {
  * @returns {Record<string, unknown>}
  */
 function legacy_rest_props(props, exclude) {
-	return new Proxy({ props, exclude, special: {}, version: source(0) }, legacy_rest_props_handler);
+	return new Proxy(
+		{
+			props,
+			exclude,
+			special: {},
+			version: source(0),
+			// TODO this is only necessary because we need to track component
+			// destruction inside `prop`, because of `bind:this`, but it
+			// seems likely that we can simplify `bind:this` instead
+			parent_effect: /** @type {Effect} */ (active_effect)
+		},
+		legacy_rest_props_handler
+	);
 }
 
 /**
@@ -11667,14 +11809,6 @@ function spread_props(...props) {
 	return new Proxy({ props }, spread_props_handler);
 }
 
-/**
- * @param {Derived} current_value
- * @returns {boolean}
- */
-function has_destroyed_component_ctx(current_value) {
-	return current_value.ctx?.d ?? false;
-}
-
 /**
  * This function is responsible for synchronizing a possibly bound prop with the inner component state.
  * It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
@@ -11793,16 +11927,24 @@ function prop(props, key, flags, fallback) {
 	// create a derived that we can write to locally.
 	// Or we are in legacy mode where we always create a derived to replicate that
 	// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
-	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(getter);
+	var overridden = false;
+
+	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(() => {
+		overridden = false;
+		return getter();
+	});
 
 	// Capture the initial value if it's bindable
 	if (bindable) get(d);
 
+	var parent_effect = /** @type {Effect} */ (active_effect);
+
 	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
 		if (arguments.length > 0) {
 			const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
 
 			set(d, new_value);
+			overridden = true;
 
 			if (fallback_value !== undefined) {
 				fallback_value = new_value;
@@ -11811,8 +11953,12 @@ function prop(props, key, flags, fallback) {
 			return value;
 		}
 
-		// TODO is this still necessary post-#16263?
-		if (has_destroyed_component_ctx(d)) {
+		// special case — avoid recalculating the derived if we're in a
+		// teardown function and the prop was overridden locally, or the
+		// component was already destroyed (this latter part is necessary
+		// because `bind:this` can read props after the component has
+		// been destroyed. TODO simplify `bind:this`
+		if ((is_destroying_effect && overridden) || (parent_effect.f & DESTROYED) !== 0) {
 			return d.v;
 		}
 
@@ -14591,7 +14737,7 @@ function parseConfig(config) {
   }
 }
 
-const version = "4.0.0-alpha.6";
+const version = "4.0.0-alpha.7";
 function attachDraftSwitcher(engine) {
   if (engine.hasDraft()) {
     const container = document.createElement("div");