slexkit 0.3.1 → 0.3.3

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;
@@ -1362,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;
@@ -1377,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();
     };
@@ -1403,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];
@@ -1436,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()))
@@ -1457,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) {
@@ -1834,7 +1856,7 @@ ${parseSource}
   var parseSlexKitDsl = parseSlexSource;
 
   // src/version.ts
-  var SLEXKIT_VERSION = "0.3.1";
+  var SLEXKIT_VERSION = "0.3.3";
   var SLEX_PROTOCOL_VERSION = "0.1";
   var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
   function getSlexKitInfo() {
@@ -12241,7 +12263,7 @@ ${component_stack}
   }
 
   // src/components/svelte/input/Slider.svelte
-  var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+  var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
   function Slider($$anchor, $$props) {
     push($$props, true);
     let p = state(proxy({}));
@@ -12341,30 +12363,32 @@ ${component_stack}
     }
     reset(span_2);
     reset(div_1);
-    var input_1 = sibling(div_1, 2);
+    var div_2 = sibling(div_1, 2);
+    var input_1 = sibling(child(div_2), 2);
     remove_input_defaults(input_1);
+    reset(div_2);
     reset(div);
     template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
       set_attribute2(div, "data-orientation", $0);
       set_text(text_1, $1);
       set_text(text_2, $2);
-      set_attribute2(input_1, "min", $3);
-      set_attribute2(input_1, "max", $4);
-      set_attribute2(input_1, "step", $5);
-      set_value(input_1, $6);
+      set_style(div_2, $3);
+      set_attribute2(input_1, "min", $4);
+      set_attribute2(input_1, "max", $5);
+      set_attribute2(input_1, "step", $6);
+      set_value(input_1, $7);
       input_1.disabled = !!get2(p).disabled;
-      set_attribute2(input_1, "aria-label", $7);
-      set_style(input_1, $8);
+      set_attribute2(input_1, "aria-label", $8);
     }, [
       () => text2(get2(p).orientation, "horizontal"),
       () => text2(get2(p).label ?? $$props.componentName),
       () => text2(get2(value) ?? 0),
+      () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`,
       () => Number(get2(p).min ?? 0),
       () => Number(get2(p).max ?? 100),
       () => Number(get2(p).step ?? 1),
       () => Number(get2(value) ?? 0),
-      () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName),
-      () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`
+      () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName)
     ]);
     delegated("pointerdown", input_1, grabSlider);
     delegated("input", input_1, (event2) => choose(Number(event2.target.value)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Zero-build, Markdown-friendly reactive UI runtime for AI output.",
   "author": "SlexKit contributors",
   "type": "module",

package/src/components/svelte/input/Slider.svelte

@@ -80,17 +80,19 @@
     </span>
     <span class="slex-slider-value">{text(value ?? 0)}{#if p.unit} {text(p.unit)}{/if}</span>
   </div>
-  <input
-    type="range"
-    class="slex-slider"
-    min={Number(p.min ?? 0)}
-    max={Number(p.max ?? 100)}
-    step={Number(p.step ?? 1)}
-    value={Number(value ?? 0)}
-    disabled={!!p.disabled}
-    aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label ?? componentName)}
-    style={`--slex-slider-progress: ${sliderProgress(value, p.min, p.max)}`}
-    onpointerdown={grabSlider}
-    oninput={(event) => choose(Number((event.target as HTMLInputElement).value))}
-  />
+  <div class="slex-slider-control" style={`--slex-slider-progress: ${sliderProgress(value, p.min, p.max)}`}>
+    <span class="slex-slider-track" aria-hidden="true"></span>
+    <input
+      type="range"
+      class="slex-slider"
+      min={Number(p.min ?? 0)}
+      max={Number(p.max ?? 100)}
+      step={Number(p.step ?? 1)}
+      value={Number(value ?? 0)}
+      disabled={!!p.disabled}
+      aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label ?? componentName)}
+      onpointerdown={grabSlider}
+      oninput={(event) => choose(Number((event.target as HTMLInputElement).value))}
+    />
+  </div>
 </div>

package/src/styles/components/slider.css

@@ -30,22 +30,71 @@
   font-weight: 600;
 }
 
+.slex-slider-control {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1rem;
+}
+
+.slex-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
 .slex-slider {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
+  display: block;
   width: 100%;
   height: 1rem;
+  margin: 0;
   padding: 0;
   border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  color: transparent;
   accent-color: var(--primary);
   cursor: pointer;
   overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
+.slexkit-root .slex-slider-control input.slex-slider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  overflow: visible;
+}
+
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
@@ -55,7 +104,7 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background-color: var(--background);
@@ -69,16 +118,10 @@
 .slex-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
 }
 
 .slex-slider::-moz-range-thumb {
@@ -114,16 +157,16 @@
 }
 
 .slex-slider::-moz-range-track {
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: var(--secondary);
+  background: transparent;
 }
 
 .slex-slider::-moz-range-progress {
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 999px;
-  background: var(--primary);
+  background: transparent;
 }
 
 .slex-slider-label-text {

package/src/styles/components/text-input.css

@@ -56,11 +56,40 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+.slexkit-root .slex-input-control input.slex-input {
+  box-sizing: border-box;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5625rem;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  box-shadow: none;
+  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;
+}
+
 .slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .slex-input-unit {
   box-sizing: border-box;
   display: inline-flex;

package/src/styles/layout.css

@@ -32,52 +32,6 @@
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;