slexkit 0.3.0 → 0.3.2

package/dist/components/switch.css

@@ -104,11 +104,11 @@
   opacity: 0.55;
 }
 
-.slex-switch:has(.slex-switch-input:disabled) {
+.slex-switch[data-disabled="true"] {
   cursor: not-allowed;
 }
 
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
+.slex-switch[data-disabled="true"]:hover .slex-switch-control,
+.slex-switch[data-disabled="true"]:hover .slex-switch-control::after {
   box-shadow: none;
 }

package/dist/components/switch.js

@@ -89,6 +89,7 @@ function Switch($$anchor, $$props) {
   reset(span);
   template_effect(($0, $1) => {
     set_attribute(label, "data-state", get(enabled) ? "on" : "off");
+    set_attribute(label, "data-disabled", get(p).disabled ? "true" : undefined);
     input.disabled = !!get(p).disabled;
     set_attribute(input, "aria-label", $0);
     set_text(text_1, $1);

package/dist/components/text-input.css

@@ -45,16 +45,18 @@
   border: 1px solid var(--input);
   border-radius: var(--radius);
   background: var(--background);
+  background-clip: padding-box;
   color: var(--foreground);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.5;
   outline: none;
+  -webkit-appearance: none;
+  appearance: none;
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-unit="true"] .slex-input,
-.slex-input-control[data-has-controls="true"] .slex-input {
+.slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -78,79 +80,16 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
-.slex-input-control[data-has-controls="true"] .slex-input-unit {
-  border-radius: 0;
-}
-
-.slex-input-controls {
-  box-sizing: border-box;
-  display: inline-grid;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-  flex: 0 0 auto;
-  width: 1.875rem;
-  min-width: 1.875rem;
-  min-height: 2.5625rem;
-  overflow: hidden;
-  border: 1px solid var(--input);
-  border-left: 0;
-  border-radius: 0 var(--radius) var(--radius) 0;
-  background: var(--background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  border-top: 1px solid var(--input);
-  border-radius: 0;
-  background: transparent;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-input-step:first-child {
-  border-top: 0;
-}
-
-.slex-input-step:last-child {
-  border-radius: 0;
-}
-
-.slex-input-step:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--muted) 52%, var(--background));
-}
-
-.slex-input-step:focus-visible {
-  z-index: 1;
-  outline: none;
-  background: color-mix(in oklab, var(--muted) 58%, var(--background));
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 34%, transparent);
-}
-
-.slex-input-step:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .slex-input::placeholder {
   color: var(--muted-foreground);
 }
 
 .slex-input:focus {
   border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -175,6 +114,10 @@
 
 .slex-input-field[data-invalid="true"] .slex-input:focus {
   border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control[data-has-unit="true"] .slex-input:focus {
   box-shadow: none;
 }
 
@@ -182,13 +125,12 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input,
-.slex-input-control:focus-within .slex-input-unit,
-.slex-input-control:focus-within .slex-input-controls {
-  border-color: var(--ring);
+.slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-step {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit {
   border-color: var(--ring);
 }
 
@@ -197,22 +139,16 @@
   color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-step {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
-.slex-input-field[data-invalid="true"] .slex-input-controls {
-  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
-}
-
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
+.slex-input-field[data-invalid="true"] .slex-input-control:not([data-has-unit]):focus-within {
+  box-shadow: none;
+}
+
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls,
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
   border-color: var(--destructive);
 }
 
@@ -226,11 +162,6 @@
   cursor: not-allowed;
 }
 
-.slex-input[disabled] ~ .slex-input-controls,
-.slex-input[readonly] ~ .slex-input-controls {
-  opacity: 0.6;
-}
-
 .slex-input-description {
   color: var(--muted-foreground);
   font-size: 0.75rem;

package/dist/components/text.js

@@ -11,10 +11,12 @@ import {
   reset,
   set,
   set_class,
+  set_style,
   set_text,
   state,
   template_effect,
   text1 as text,
+  user_derived,
   user_effect
 } from "../chunks/button-cr1fhsa7.js";
 
@@ -27,11 +29,21 @@ function Text($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
   user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  const color = user_derived(() => get(p).color == null || get(p).color === "" ? undefined : text(get(p).color));
+  const size = user_derived(() => cssLength(get(p).size));
+  function cssLength(value) {
+    if (value == null || value === "")
+      return;
+    const rendered = text(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
   var div = root();
+  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: get(color), "font-size": get(size) });
     set_text(text_1, $1);
   }, [
     () => `slex-text${get(p).variant ? ` slex-text--${text(get(p).variant)}` : ""}${get(p).class ? ` ${text(get(p).class)}` : ""}`,

package/dist/components/tooling.css

@@ -572,7 +572,6 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
-  clip-path: inset(50%);
 }
 
 .slex-playground-error {

package/dist/runtime.cjs

@@ -468,19 +468,31 @@ function configureComponentScope(options) {
 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;
@@ -761,6 +773,9 @@ function isWritableComponent(type) {
   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";
 }
@@ -877,7 +892,10 @@ function createGProxy(g, components, componentTypes) {
 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) {
@@ -905,6 +923,9 @@ function syncReadableComponentProp(type, state, propName, value) {
 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);
@@ -969,7 +990,7 @@ function seedStaticComponentState(type, state, props) {
 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) {
@@ -981,6 +1002,9 @@ function isMirroredValueControlPair(previousType, currentType) {
   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;
   }
@@ -1319,9 +1343,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   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;
@@ -1334,8 +1359,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     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();
   };
@@ -1360,12 +1387,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     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];
@@ -1393,20 +1424,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         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()))
@@ -1414,7 +1447,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     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) {
@@ -1791,7 +1825,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() {
@@ -2919,7 +2953,6 @@ var inputSpec = component({
     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,
@@ -3427,6 +3460,8 @@ var textSpec = component({
     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,
@@ -3727,7 +3762,11 @@ function isRenderableSource(value) {
   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) {

package/dist/runtime.js

@@ -396,19 +396,31 @@ function configureComponentScope(options) {
 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;
@@ -689,6 +701,9 @@ function isWritableComponent(type) {
   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";
 }
@@ -805,7 +820,10 @@ function createGProxy(g, components, componentTypes) {
 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) {
@@ -833,6 +851,9 @@ function syncReadableComponentProp(type, state, propName, value) {
 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);
@@ -897,7 +918,7 @@ function seedStaticComponentState(type, state, props) {
 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) {
@@ -909,6 +930,9 @@ function isMirroredValueControlPair(previousType, currentType) {
   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;
   }
@@ -1247,9 +1271,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   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;
@@ -1262,8 +1287,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     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();
   };
@@ -1288,12 +1315,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     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];
@@ -1321,20 +1352,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         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()))
@@ -1342,7 +1375,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     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) {
@@ -1719,7 +1753,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() {
@@ -2847,7 +2881,6 @@ var inputSpec = component({
     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,
@@ -3355,6 +3388,8 @@ var textSpec = component({
     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,
@@ -3655,7 +3690,11 @@ function isRenderableSource(value) {
   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) {