slexkit 0.3.0 → 0.3.2

package/dist/umd/slexkit.umd.js

@@ -499,19 +499,31 @@
   function createComponentAccessor(read) {
     const subscribers = new Set;
     let current = read();
-    const accessor = () => current;
-    accessor.subscribe = (run) => {
-      subscribers.add(run);
-      run(current);
-      const stop = createEffect(() => {
+    let stopEffect;
+    const start = () => {
+      if (stopEffect)
+        return;
+      stopEffect = createEffect(() => {
         current = read();
-        for (const subscriber of subscribers)
+        for (const subscriber of Array.from(subscribers))
           subscriber(current);
         flushDom?.();
       });
+    };
+    const accessor = () => current;
+    accessor.subscribe = (run) => {
+      const wasIdle = subscribers.size === 0;
+      subscribers.add(run);
+      if (wasIdle)
+        start();
+      else
+        run(current);
       return () => {
         subscribers.delete(run);
-        stop();
+        if (subscribers.size === 0) {
+          stopEffect?.();
+          stopEffect = undefined;
+        }
       };
     };
     return accessor;
@@ -792,6 +804,9 @@
     const mode = getComponentStateMode(type);
     return mode === "value" || mode === "checked" || mode === "enabled";
   }
+  function isReadableComponent(type) {
+    return getComponentStateMode(type) === "readable";
+  }
   function isStatefulComponent(type) {
     return getComponentStateMode(type) !== "none";
   }
@@ -908,7 +923,10 @@
   function ensureComponentState(name, type, components, componentTypes) {
     if (!components[name])
       components[name] = {};
-    componentTypes[name] = type;
+    const previousType = componentTypes[name] ?? "";
+    if (!(isWritableComponent(previousType) && isReadableComponent(type))) {
+      componentTypes[name] = type;
+    }
     return components[name];
   }
   function syncReadableComponentProp(type, state, propName, value) {
@@ -936,6 +954,9 @@
   function syncComponentProps(type, name, props, components, componentTypes) {
     if (!name || !isStatefulComponent(type))
       return;
+    const previousType = componentTypes[name] ?? "";
+    if (isWritableComponent(previousType) && isReadableComponent(type))
+      return;
     const state = ensureComponentState(name, type, components, componentTypes);
     if (type === "input" && typeof props.type === "string") {
       assignInputType(state, props.type);
@@ -1000,7 +1021,7 @@
   function warnDuplicateState(ns, name, currentType, currentPath, previous) {
     console.warn(`[SlexKit][${ns}] Component state '${name}' is declared more than once at ${previous.path} and ${currentPath}; state is shared by namespace and component name.`);
     if (previous.type !== currentType) {
-      console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
+      console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); use distinct names when components should not share state.`);
     }
   }
   function dynamicStateBinding(type, props) {
@@ -1012,6 +1033,9 @@
     return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
   }
   function shouldWarnDuplicateState(currentType, currentBinding, previous) {
+    if (isReadableComponent(previous.type) && isReadableComponent(currentType)) {
+      return false;
+    }
     if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
       return false;
     }
@@ -1350,9 +1374,10 @@
     const renderer = getRenderer(type);
     if (!renderer)
       return;
-    const forWrapper = (container.ownerDocument || document).createElement("div");
-    forWrapper.className = "slexkit-for-wrapper";
-    container.appendChild(forWrapper);
+    const doc = container.ownerDocument || document;
+    const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+    const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+    container.append(startAnchor, endAnchor);
     const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
     const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
     const $keyProp = props.$key;
@@ -1365,8 +1390,10 @@
       disposedSlots.add(slot);
       leavingSlots.delete(slot);
       callHook(g, name, "onUnmount");
-      disposeComponent(slot.el);
-      slot.el.remove();
+      if (slot.el) {
+        disposeComponent(slot.el);
+        slot.el.remove();
+      }
       if (slot.dispose)
         slot.dispose();
     };
@@ -1391,12 +1418,16 @@
         }
       }
       for (const slot of deletedSlots) {
-        container.appendChild(slot.el);
         leavingSlots.add(slot);
+        if (!slot.el) {
+          disposeSlot(slot);
+          continue;
+        }
         applyLeaveAnimation(slot.el, slot.props, () => {
           disposeSlot(slot);
         });
       }
+      let cursor = startAnchor;
       arr.forEach((item, index) => {
         item = asReactiveValue(item, g);
         const keyVal = newKeys[index];
@@ -1424,20 +1455,22 @@
           const indexSignal = createSignal(index);
           const revisionSignal = createSignal(0);
           slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-          if (slot.el) {
-            applyEnterAnimation(slot.el, slot.props);
-            callHook(g, name, "onMount");
+          if (!slot.el) {
+            disposeSlot(slot);
+            return;
           }
+          applyEnterAnimation(slot.el, slot.props);
+          callHook(g, name, "onMount");
           slotMap.set(keyVal, slot);
         }
-        const refChild = forWrapper.children[index];
-        if (slot.el && refChild !== slot.el) {
-          forWrapper.insertBefore(slot.el, refChild ?? null);
+        const nextChild = cursor.nextSibling;
+        if (slot.el && nextChild !== slot.el) {
+          container.insertBefore(slot.el, nextChild ?? endAnchor);
+        }
+        if (slot.el) {
+          cursor = slot.el;
         }
       });
-      while (forWrapper.children.length > arr.length) {
-        forWrapper.lastChild.remove();
-      }
     });
     onCleanup(() => {
       for (const slot of Array.from(slotMap.values()))
@@ -1445,7 +1478,8 @@
       slotMap.clear();
       for (const slot of Array.from(leavingSlots))
         disposeSlot(slot);
-      forWrapper.remove();
+      startAnchor.remove();
+      endAnchor.remove();
     });
   }
   function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1822,7 +1856,7 @@ ${parseSource}
   var parseSlexKitDsl = parseSlexSource;
 
   // src/version.ts
-  var SLEXKIT_VERSION = "0.3.0";
+  var SLEXKIT_VERSION = "0.3.2";
   var SLEX_PROTOCOL_VERSION = "0.1";
   var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
   function getSlexKitInfo() {
@@ -2950,7 +2984,6 @@ ${parseSource}
       min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
       max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
       step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
-      controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
       onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
     },
     children: noChildren,
@@ -3458,6 +3491,8 @@ ${parseSource}
       content: { type: "string", dynamic: true, description: "Alias for text." },
       label: { type: "string", dynamic: true, description: "Alias for text." },
       variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+      color: { type: "string", dynamic: true, description: "Optional CSS color for controlled previews." },
+      size: { type: "string | number", dynamic: true, description: "Optional font size. Numbers are treated as px." },
       class: { type: "string", description: "Additional host-controlled CSS class." }
     },
     children: noChildren,
@@ -3828,7 +3863,11 @@ ${parseSource}
     return Object.keys(value).some((key) => key.includes(":"));
   }
   function bareLayoutFromSource(value) {
-    const { slex: _slex, namespace: _namespace, g: _g, layout: _layout, ...layout } = value;
+    const layout = { ...value };
+    delete layout.slex;
+    delete layout.namespace;
+    delete layout.g;
+    delete layout.layout;
     return layout;
   }
   function isStateOnlySource(value) {
@@ -12599,6 +12638,7 @@ ${component_stack}
     reset(label2);
     reset(span);
     template_effect(($0, $1) => {
+      set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
       input.disabled = !!get2(p).disabled;
       set_attribute2(input, "data-state", get2(checked) ? "checked" : "unchecked");
       set_attribute2(input, "aria-label", $0);
@@ -12674,6 +12714,7 @@ ${component_stack}
     reset(span);
     template_effect(($0, $1) => {
       set_attribute2(label2, "data-state", get2(enabled) ? "on" : "off");
+      set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
       input.disabled = !!get2(p).disabled;
       set_attribute2(input, "aria-label", $0);
       set_text(text_1, $1);
@@ -12694,26 +12735,11 @@ ${component_stack}
   var nextInputId = 0;
   var root_14 = from_html(`<label class="slex-input-label"> </label>`);
   var root_2 = from_html(`<span class="slex-input-unit" aria-hidden="true"> </span>`);
-  var root_33 = from_html(`<span class="slex-input-controls"><button class="slex-input-step" type="button">+</button> <button class="slex-input-step" type="button">-</button></span>`);
-  var root_4 = from_html(`<div class="slex-input-description"> </div>`);
-  var root_52 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
-  var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!> <!></div> <!> <!></div>`);
+  var root_33 = from_html(`<div class="slex-input-description"> </div>`);
+  var root_4 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
+  var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!></div> <!> <!></div>`);
   function Input($$anchor, $$props) {
     push($$props, true);
-    const engineeringPrefixFactors = {
-      p: 0.000000000001,
-      n: 0.000000001,
-      u: 0.000001,
-      "µ": 0.000001,
-      "碌": 0.000001,
-      m: 0.001,
-      k: 1000,
-      K: 1000,
-      M: 1e6,
-      meg: 1e6,
-      G: 1e9,
-      T: 1000000000000
-    };
     let p = state(proxy({}));
     let value = state("");
     const fallbackId = `slex-input-${++nextInputId}`;
@@ -12725,8 +12751,6 @@ ${component_stack}
     const readonly = user_derived(() => bool(get2(p).readonly) || bool(get2(p).readOnly));
     const required = user_derived(() => bool(get2(p).required));
     const invalid2 = user_derived(() => bool(get2(p).invalid) || !!get2(errorText));
-    const steppable = user_derived(isSteppableInput);
-    const controls = user_derived(() => get2(steppable) && get2(p).controls !== false && get2(p).controls !== "false");
     const componentId = user_derived(() => safeId($$props.componentName));
     const inputId = user_derived(() => text2(get2(p).id) || (get2(componentId) ? `slex-input-${get2(componentId)}` : fallbackId));
     const descriptionId = user_derived(() => `${get2(inputId)}-description`);
@@ -12737,10 +12761,6 @@ ${component_stack}
       get2(descriptionText) ? get2(descriptionId) : "",
       get2(errorText) ? get2(errorId) : ""
     ].filter(Boolean).join(" "));
-    const numericValue = user_derived(readNumericValue);
-    const controlLabel = user_derived(() => get2(labelText) || text2(get2(p).placeholder) || $$props.componentName || "input");
-    const decrementDisabled = user_derived(() => !canStep(-1));
-    const incrementDisabled = user_derived(() => !canStep(1));
     user_effect(() => bindPropStore($$props.props, (next2) => {
       set(p, next2, true);
       set(value, text2(next2.value), true);
@@ -12751,72 +12771,6 @@ ${component_stack}
     function inputType() {
       return text2(get2(p).type, "text") === "engineering" ? "text" : text2(get2(p).type, "text");
     }
-    function isSteppableInput() {
-      const kind = text2(get2(p).type, "text");
-      return kind === "number" || kind === "engineering" || get2(p).min !== undefined || get2(p).max !== undefined || get2(p).step !== undefined;
-    }
-    function numericProp(input) {
-      if (input === undefined || input === null || input === "")
-        return;
-      const next2 = Number(input);
-      return Number.isFinite(next2) ? next2 : undefined;
-    }
-    function stepSize() {
-      const next2 = numericProp(get2(p).step);
-      if (next2 !== undefined && next2 > 0)
-        return next2;
-      if (text2(get2(p).type, "text") !== "engineering")
-        return 1;
-      const parsed = parseEngineeringNumber(get2(value));
-      if (!parsed.valid || !parsed.prefix)
-        return 1;
-      return engineeringPrefixFactors[parsed.prefix] ?? 1;
-    }
-    function readNumericValue() {
-      if (text2(get2(p).type, "text") === "engineering") {
-        const parsed = parseEngineeringNumber(get2(value));
-        return parsed.valid && parsed.number !== null ? parsed.number : null;
-      }
-      const next2 = Number(get2(value));
-      return Number.isFinite(next2) ? next2 : null;
-    }
-    function clamp(next2) {
-      const min = numericProp(get2(p).min);
-      const max = numericProp(get2(p).max);
-      let clamped = next2;
-      if (min !== undefined)
-        clamped = Math.max(min, clamped);
-      if (max !== undefined)
-        clamped = Math.min(max, clamped);
-      return clamped;
-    }
-    function canStep(direction) {
-      if (!get2(controls) || get2(disabled) || get2(readonly) || get2(numericValue) === null)
-        return false;
-      return clamp(get2(numericValue) + direction * stepSize()) !== get2(numericValue);
-    }
-    function formatSteppedValue(next2) {
-      if (text2(get2(p).type, "text") !== "engineering")
-        return text2(next2);
-      const parsed = parseEngineeringNumber(get2(value));
-      if (!parsed.valid)
-        return text2(next2);
-      const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
-      const visibleNumber = factor ? next2 / factor : next2;
-      return `${formatNumber2(visibleNumber)}${parsed.prefix}${parsed.unit}`;
-    }
-    function formatNumber2(next2) {
-      return text2(Number(next2.toPrecision(12)));
-    }
-    function emitValue(nextValue) {
-      set(value, nextValue, true);
-      emit($$props.ctx, "change", text2(get2(p).type, "text") === "engineering" ? parseEngineeringNumber(get2(value)) : get2(value));
-    }
-    function stepBy(direction) {
-      if (!canStep(direction) || get2(numericValue) === null)
-        return;
-      emitValue(formatSteppedValue(clamp(get2(numericValue) + direction * stepSize())));
-    }
     function update2(event2) {
       if (get2(disabled) || get2(readonly))
         return;
@@ -12842,9 +12796,9 @@ ${component_stack}
       });
     }
     var div_1 = sibling(node, 2);
-    var input_1 = child(div_1);
-    remove_input_defaults(input_1);
-    var node_1 = sibling(input_1, 2);
+    var input = child(div_1);
+    remove_input_defaults(input);
+    var node_1 = sibling(input, 2);
     {
       var consequent_1 = ($$anchor2) => {
         var span = root_2();
@@ -12858,33 +12812,11 @@ ${component_stack}
           $$render(consequent_1);
       });
     }
-    var node_2 = sibling(node_1, 2);
-    {
-      var consequent_2 = ($$anchor2) => {
-        var span_1 = root_33();
-        var button = child(span_1);
-        var button_1 = sibling(button, 2);
-        reset(span_1);
-        template_effect(() => {
-          set_attribute2(button, "aria-label", `Increase ${get2(controlLabel)}`);
-          button.disabled = get2(incrementDisabled);
-          set_attribute2(button_1, "aria-label", `Decrease ${get2(controlLabel)}`);
-          button_1.disabled = get2(decrementDisabled);
-        });
-        delegated("click", button, () => stepBy(1));
-        delegated("click", button_1, () => stepBy(-1));
-        append($$anchor2, span_1);
-      };
-      if_block(node_2, ($$render) => {
-        if (get2(controls))
-          $$render(consequent_2);
-      });
-    }
     reset(div_1);
-    var node_3 = sibling(div_1, 2);
+    var node_2 = sibling(div_1, 2);
     {
-      var consequent_3 = ($$anchor2) => {
-        var div_2 = root_4();
+      var consequent_2 = ($$anchor2) => {
+        var div_2 = root_33();
         var text_3 = child(div_2, true);
         reset(div_2);
         template_effect(() => {
@@ -12893,15 +12825,15 @@ ${component_stack}
         });
         append($$anchor2, div_2);
       };
-      if_block(node_3, ($$render) => {
+      if_block(node_2, ($$render) => {
         if (get2(descriptionText))
-          $$render(consequent_3);
+          $$render(consequent_2);
       });
     }
-    var node_4 = sibling(node_3, 2);
+    var node_3 = sibling(node_2, 2);
     {
-      var consequent_4 = ($$anchor2) => {
-        var div_3 = root_52();
+      var consequent_3 = ($$anchor2) => {
+        var div_3 = root_4();
         var text_4 = child(div_3, true);
         reset(div_3);
         template_effect(() => {
@@ -12910,9 +12842,9 @@ ${component_stack}
         });
         append($$anchor2, div_3);
       };
-      if_block(node_4, ($$render) => {
+      if_block(node_3, ($$render) => {
         if (get2(errorText))
-          $$render(consequent_4);
+          $$render(consequent_3);
       });
     }
     reset(div);
@@ -12921,21 +12853,20 @@ ${component_stack}
       set_attribute2(div, "data-required", get2(required) ? "true" : undefined);
       set_attribute2(div, "data-readonly", get2(readonly) ? "true" : undefined);
       set_attribute2(div_1, "data-has-unit", get2(unitText) ? "true" : undefined);
-      set_attribute2(div_1, "data-has-controls", get2(controls) ? "true" : undefined);
-      set_attribute2(input_1, "id", get2(inputId));
-      set_attribute2(input_1, "type", $0);
-      set_attribute2(input_1, "inputmode", $1);
-      set_attribute2(input_1, "name", $2);
-      set_attribute2(input_1, "placeholder", $3);
-      input_1.disabled = get2(disabled);
-      input_1.readOnly = get2(readonly);
-      input_1.required = get2(required);
-      set_attribute2(input_1, "min", $4);
-      set_attribute2(input_1, "max", $5);
-      set_attribute2(input_1, "step", $6);
-      set_attribute2(input_1, "aria-label", get2(computedAriaLabel) || undefined);
-      set_attribute2(input_1, "aria-describedby", get2(describedBy) || undefined);
-      set_attribute2(input_1, "aria-invalid", get2(invalid2) ? "true" : undefined);
+      set_attribute2(input, "id", get2(inputId));
+      set_attribute2(input, "type", $0);
+      set_attribute2(input, "inputmode", $1);
+      set_attribute2(input, "name", $2);
+      set_attribute2(input, "placeholder", $3);
+      input.disabled = get2(disabled);
+      input.readOnly = get2(readonly);
+      input.required = get2(required);
+      set_attribute2(input, "min", $4);
+      set_attribute2(input, "max", $5);
+      set_attribute2(input, "step", $6);
+      set_attribute2(input, "aria-label", get2(computedAriaLabel) || undefined);
+      set_attribute2(input, "aria-describedby", get2(describedBy) || undefined);
+      set_attribute2(input, "aria-invalid", get2(invalid2) ? "true" : undefined);
     }, [
       () => inputType(),
       () => text2(get2(p).type, "text") === "engineering" ? "decimal" : undefined,
@@ -12945,12 +12876,12 @@ ${component_stack}
       () => get2(p).max === undefined ? undefined : text2(get2(p).max),
       () => get2(p).step === undefined ? undefined : text2(get2(p).step)
     ]);
-    delegated("input", input_1, update2);
-    bind_value(input_1, () => get2(value), ($$value) => set(value, $$value));
+    delegated("input", input, update2);
+    bind_value(input, () => get2(value), ($$value) => set(value, $$value));
     append($$anchor, div);
     pop();
   }
-  delegate(["input", "click"]);
+  delegate(["input"]);
 
   // src/components/svelte/input/RadioGroup.svelte
   var root_34 = from_html(`<span> </span>`);
@@ -13066,6 +12997,7 @@ ${component_stack}
       reset(label2);
       reset(span_1);
       template_effect(($0, $1, $2) => {
+        set_attribute2(label2, "data-disabled", get2(disabled) ? "true" : undefined);
         set_attribute2(input, "name", $0);
         set_value(input, $1);
         set_checked(input, get2(itemValue) === get2(value));
@@ -13101,7 +13033,7 @@ ${component_stack}
   var root_16 = from_html(`<label class="slex-select-label"><!> <!></label>`);
   var root_8 = from_html(`<span class="slex-select-check" aria-hidden="true"></span>`);
   var root_6 = from_html(`<li role="option"><span class="slex-select-option-label"><!> <span> </span></span> <!></li>`);
-  var root_53 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
+  var root_52 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
   var root_9 = from_html(`<option> </option>`);
   var root10 = from_html(`<div class="slex-select"><!> <button type="button" class="slex-select-trigger" aria-haspopup="listbox"><span class="slex-select-value"><!> <span> </span></span> <span class="slex-select-icon" aria-hidden="true"></span></button> <!> <select class="slex-select-native" tabindex="-1" aria-hidden="true"><option> </option><!></select></div>`);
   function Select($$anchor, $$props) {
@@ -13305,7 +13237,7 @@ ${component_stack}
     var node_4 = sibling(button, 2);
     {
       var consequent_6 = ($$anchor2) => {
-        var ul = root_53();
+        var ul = root_52();
         each(ul, 21, () => get2(options), index, ($$anchor3, item, index2) => {
           const isSelected = user_derived(() => get2(item).value === text2(get2(value)));
           const isActive = user_derived(() => index2 === get2(activeIndex));
@@ -16156,7 +16088,7 @@ Migration example: ${hintLines.join(" ")}`;
   delegate(["click"]);
 
   // src/components/svelte/input/Tabs.svelte
-  var root_54 = from_html(`<span class="slex-sr-only"> </span>`);
+  var root_53 = from_html(`<span class="slex-sr-only"> </span>`);
   var root_36 = from_html(`<!> <!>`, 1);
   var root_82 = from_html(`<div></div>`);
   var root_18 = from_html(`<!> <span class="slex-tabs-selected-indicator" aria-hidden="true"></span>`, 1);
@@ -16334,7 +16266,7 @@ Migration example: ${hintLines.join(" ")}`;
                 var node_4 = sibling(node_3, 2);
                 {
                   var consequent_1 = ($$anchor5) => {
-                    var span = root_54();
+                    var span = root_53();
                     var text_1 = child(span, true);
                     reset(span);
                     template_effect(() => set_text(text_1, get2(label2)));
@@ -16774,7 +16706,7 @@ Migration example: ${hintLines.join(" ")}`;
   var root_111 = from_html(`<button><!> <!></button>`);
   var root_62 = from_html(`<span class="sr-only"> </span>`);
   var root_83 = from_svg(`<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>`);
-  var root_55 = from_html(`<a><!> <!></a>`);
+  var root_54 = from_html(`<a><!> <!></a>`);
   function CloseButton($$anchor, $$props) {
     push($$props, true);
     let color = prop($$props, "color", 3, "gray"), name = prop($$props, "name", 3, "Close"), size = prop($$props, "size", 3, "md"), restProps = rest_props($$props, [
@@ -16848,7 +16780,7 @@ Migration example: ${hintLines.join(" ")}`;
         append($$anchor2, button);
       };
       var alternate_2 = ($$anchor2) => {
-        var a = root_55();
+        var a = root_54();
         attribute_effect(a, ($0) => ({
           ...restProps,
           onclick,
@@ -17481,11 +17413,21 @@ Migration example: ${hintLines.join(" ")}`;
     push($$props, true);
     let p = state(proxy({}));
     user_effect(() => bindPropStore($$props.props, (next2) => set(p, next2, true)));
+    const color = user_derived(() => get2(p).color == null || get2(p).color === "" ? undefined : text2(get2(p).color));
+    const size = user_derived(() => cssLength(get2(p).size));
+    function cssLength(value) {
+      if (value == null || value === "")
+        return;
+      const rendered = text2(value);
+      return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+    }
     var div = root20();
+    let styles;
     var text_1 = child(div, true);
     reset(div);
     template_effect(($0, $1) => {
       set_class(div, 1, $0);
+      styles = set_style(div, "", styles, { color: get2(color), "font-size": get2(size) });
       set_text(text_1, $1);
     }, [
       () => `slex-text${get2(p).variant ? ` slex-text--${text2(get2(p).variant)}` : ""}${get2(p).class ? ` ${text2(get2(p).class)}` : ""}`,
@@ -17657,7 +17599,7 @@ Migration example: ${hintLines.join(" ")}`;
   var root_45 = from_html(`<span class="slex-code-block-language"> </span>`);
   var root_114 = from_html(`<figcaption class="slex-code-block-header"><span class="slex-code-block-title"><!> <!></span> <!></figcaption>`);
   var root_72 = from_html(`<span> </span>`);
-  var root_56 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
+  var root_55 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
   var root22 = from_html(`<figure class="slex-code-block"><!> <pre class="slex-code-block-pre"><code></code></pre></figure>`);
   function CodeBlock($$anchor, $$props) {
     push($$props, true);
@@ -17826,7 +17768,7 @@ Migration example: ${hintLines.join(" ")}`;
     var pre = sibling(node, 2);
     var code_1 = child(pre);
     each(code_1, 21, () => get2(lines), index, ($$anchor2, line) => {
-      var span_3 = root_56();
+      var span_3 = root_55();
       var span_4 = child(span_3);
       each(span_4, 21, () => get2(line), index, ($$anchor3, token) => {
         var fragment_1 = comment();
@@ -31966,7 +31908,7 @@ l0,-` + (midHeight + 144) + `c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949
 
   // src/components/svelte/content/Section.svelte
   var root_28 = from_html(`<div class="slex-section-eyebrow"> </div>`);
-  var root_57 = from_html(`<span> </span>`);
+  var root_56 = from_html(`<span> </span>`);
   var root_313 = from_html(`<h2 class="slex-section-title"><!><!></h2>`);
   var root_65 = from_html(`<p class="slex-section-subtitle"> </p>`);
   var root_73 = from_html(`<a class="slex-section-action"> </a>`);
@@ -32017,7 +31959,7 @@ l0,-` + (midHeight + 144) + `c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949
             var node_4 = sibling(node_3);
             {
               var consequent_2 = ($$anchor4) => {
-                var span = root_57();
+                var span = root_56();
                 var text_2 = child(span, true);
                 reset(span);
                 template_effect(($0) => set_text(text_2, $0), [() => text2(get2(p).title)]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Zero-build, Markdown-friendly reactive UI runtime for AI output.",
   "author": "SlexKit contributors",
   "type": "module",
@@ -81,7 +81,7 @@
   ],
   "scripts": {
     "dev": "bun run site/server.ts",
-    "build": "bun run build:core && bun run --filter @slexkit/streamdown build && bun run --filter @slexkit/obsidian build && bun run --filter @slexkit/mcp build",
+    "build": "bun run build:core && bun run --filter @slexkit/streamdown build && bun run --filter @slexkit/mcp build",
     "build:core": "bun run scripts/build-core.ts",
     "ai:docs": "bun run scripts/generate-ai-docs.ts",
     "version:sync": "bun run scripts/sync-version.ts",
@@ -120,6 +120,7 @@
     "flowbite": "^4.0.2",
     "flowbite-svelte": "^1.33.1",
     "katex": "^0.17.0",
+    "marked": "^18.0.5",
     "svelte": "^5.55.9",
     "svelte-highlight": "^7.9.0"
   },

package/skills/slexkit-host-integration/SKILL.md

@@ -21,7 +21,7 @@ Use this skill as `/host` when adding SlexKit to a host application or documenta
 
 - Vanilla host: `createSlexKitMarkdownRuntimeHost`.
 - React/Streamdown: `@slexkit/streamdown`.
-- Obsidian: `@slexkit/obsidian`, readonly fenced block rendering.
+- Obsidian: install the official SlexKit plugin from Obsidian Community Plugins; release repo `slexkit/obsidian-slexkit`.
 - Custom host: detect the `slex` code fence, pass source plus artifact id to the runtime host, dispose when the block is removed.
 
 ## Rules

package/src/components/svelte/display/Text.svelte

@@ -6,6 +6,19 @@
   let { props }: SvelteComponentProps = $props();
   let p = $state<PropValues>({});
   $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  const color = $derived(p.color == null || p.color === "" ? undefined : text(p.color));
+  const size = $derived(cssLength(p.size));
+
+  function cssLength(value: unknown): string | undefined {
+    if (value == null || value === "") return undefined;
+    const rendered = text(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
 </script>
 
-<div class={`slex-text${p.variant ? ` slex-text--${text(p.variant)}` : ""}${p.class ? ` ${text(p.class)}` : ""}`}>{text(p.content ?? p.text ?? p.label)}</div>
+<div
+  class={`slex-text${p.variant ? ` slex-text--${text(p.variant)}` : ""}${p.class ? ` ${text(p.class)}` : ""}`}
+  style:color={color}
+  style:font-size={size}
+>{text(p.content ?? p.text ?? p.label)}</div>

package/src/components/svelte/input/Checkbox.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <span class="slex-choice-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
-  <label class="slex-checkbox-field">
+  <label class="slex-checkbox-field" data-disabled={p.disabled ? "true" : undefined}>
     <input
       type="checkbox"
       class="slex-checkbox"