streetui 2.5.0 → 2.7.0

package/dist/testing.cjs

@@ -971,6 +971,13 @@ function applyProp(dom, element, name, value) {
     }
     return;
   }
+  if (name.startsWith("style.")) {
+    const el = element;
+    const prop = name.slice("style.".length);
+    if (value === null || value === void 0) el.style.removeProperty(prop);
+    else el.style.setProperty(prop, String(value));
+    return;
+  }
   if (value === null || value === void 0 || value === false) {
     dom.removeAttribute(element, name);
     return;
@@ -1021,6 +1028,11 @@ var TAG_MAP = {
   "list-item": "li",
   image: "img",
   link: "a",
+  // A `code()` node renders as a semantic `<pre>` outer element; the mount/
+  // hydrate branches add a single inner `<code>` holding the escaped source
+  // (mirrors how `text` renders `<span>` + an inner text node). One graph
+  // node → one outer element preserves positional hydration.
+  code: "pre",
   component: "div",
   slot: "div",
   fragment: "div",
@@ -1739,6 +1751,23 @@ function mountNode(ctx, graphNode, parentDom) {
     dom.appendChild(parentDom, el2);
     return instance2;
   }
+  if (graphNode.type === "code") {
+    const source = String(graphNode.getProp("text") ?? "");
+    const pre = dom.createElement("pre");
+    const codeEl = dom.createElement("code");
+    const textNode = dom.createTextNode(source);
+    dom.appendChild(codeEl, textNode);
+    dom.appendChild(pre, codeEl);
+    applyNodeProps(ctx, graphNode, pre);
+    const instance2 = new NodeInstance(graphNode, pre);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, pre, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, textUpdate(dom, pre, textNode));
+    }
+    dom.appendChild(parentDom, pre);
+    return instance2;
+  }
   if (graphNode.type === "link") {
     const el2 = dom.createElement("a");
     const href = graphNode.getProp("href");
@@ -2041,6 +2070,188 @@ function wireComponentBehavior(ctx, graphNode, instance) {
   for (const cleanup of fn()) instance.trackCleanup(cleanup);
 }
 
+// ../state/src/signal.ts
+var _activeConsumer = null;
+function withConsumer(consumer, fn) {
+  const prev = _activeConsumer;
+  _activeConsumer = consumer;
+  try {
+    return fn();
+  } finally {
+    _activeConsumer = prev;
+  }
+}
+var _batchDepth = 0;
+var _pendingFlushes = /* @__PURE__ */ new Map();
+function _enqueueBatchFlush(sig, value) {
+  _pendingFlushes.set(sig, { signal: sig, value });
+}
+var Signal = class {
+  _value;
+  _subscribers = /* @__PURE__ */ new Set();
+  _consumers = /* @__PURE__ */ new Set();
+  constructor(initial) {
+    this._value = initial;
+  }
+  get() {
+    if (_activeConsumer !== null) {
+      this._consumers.add(_activeConsumer);
+      _activeConsumer._addSource(this);
+    }
+    return this._value;
+  }
+  peek() {
+    return this._value;
+  }
+  set(value) {
+    if (Object.is(this._value, value)) return;
+    this._value = value;
+    if (_batchDepth > 0) {
+      _enqueueBatchFlush(this, value);
+    } else {
+      this._flush(value);
+    }
+  }
+  update(fn) {
+    this.set(fn(this._value));
+  }
+  subscribe(fn) {
+    this._subscribers.add(fn);
+    return () => {
+      this._subscribers.delete(fn);
+    };
+  }
+  _removeConsumer(consumer) {
+    this._consumers.delete(consumer);
+  }
+  /**
+   * Called by the batch machinery after the batch has completed.
+   * Notifies subscribers with the final coalesced value.
+   */
+  _flushBatch(value) {
+    this._flush(value);
+  }
+  _flush(value) {
+    for (const sub of [...this._subscribers]) sub(value);
+    for (const consumer of [...this._consumers]) consumer._invalidate();
+  }
+  /**
+   * @internal DevTools inspection only. The number of live observers
+   * (direct subscribers plus derived/effect consumers). Read-only; never
+   * mutates reactive state.
+   */
+  _observerCount() {
+    return this._subscribers.size + this._consumers.size;
+  }
+};
+var DerivedSignal = class {
+  _value = void 0;
+  _dirty = true;
+  _disposed = false;
+  _fn;
+  _subscribers = /* @__PURE__ */ new Set();
+  /** All upstream sources this derived currently reads from. */
+  _sources = /* @__PURE__ */ new Set();
+  /** Downstream consumers that depend on this derived. */
+  _consumers = /* @__PURE__ */ new Set();
+  constructor(fn) {
+    this._fn = fn;
+  }
+  get() {
+    if (_activeConsumer !== null) {
+      this._consumers.add(_activeConsumer);
+      _activeConsumer._addSource(this);
+    }
+    if (this._dirty) this._recompute();
+    return this._value;
+  }
+  peek() {
+    if (this._dirty) this._recompute();
+    return this._value;
+  }
+  subscribe(fn) {
+    if (this._dirty) this._recompute();
+    this._subscribers.add(fn);
+    return () => {
+      this._subscribers.delete(fn);
+    };
+  }
+  _addSource(src) {
+    this._sources.add(src);
+  }
+  _removeConsumer(consumer) {
+    this._consumers.delete(consumer);
+  }
+  _invalidate() {
+    if (this._disposed) return;
+    this._dirty = true;
+    const newVal = this.peek();
+    for (const sub of [...this._subscribers]) sub(newVal);
+    for (const consumer of [...this._consumers]) consumer._invalidate();
+  }
+  _recompute() {
+    for (const src of this._sources) src._removeConsumer(this);
+    this._sources.clear();
+    this._value = withConsumer(this, this._fn);
+    this._dirty = false;
+  }
+  dispose() {
+    this._disposed = true;
+    for (const src of this._sources) src._removeConsumer(this);
+    this._sources.clear();
+    this._subscribers.clear();
+    this._consumers.clear();
+  }
+  /**
+   * @internal DevTools inspection only. Live observers (subscribers plus
+   * downstream consumers). Read-only.
+   */
+  _observerCount() {
+    return this._subscribers.size + this._consumers.size;
+  }
+};
+var Effect = class {
+  _fn;
+  _cleanup = void 0;
+  _disposed = false;
+  _sources = /* @__PURE__ */ new Set();
+  constructor(fn) {
+    this._fn = fn;
+    this._run();
+  }
+  _addSource(src) {
+    this._sources.add(src);
+  }
+  _invalidate() {
+    if (this._disposed) return;
+    this._run();
+  }
+  _run() {
+    for (const src of this._sources) src._removeConsumer(this);
+    this._sources.clear();
+    if (typeof this._cleanup === "function") this._cleanup();
+    const result = withConsumer(this, this._fn);
+    this._cleanup = typeof result === "function" ? result : void 0;
+  }
+  dispose() {
+    this._disposed = true;
+    for (const src of this._sources) src._removeConsumer(this);
+    this._sources.clear();
+    if (typeof this._cleanup === "function") this._cleanup();
+    this._cleanup = void 0;
+  }
+};
+function signal(initial) {
+  return new Signal(initial);
+}
+function derived(fn) {
+  return new DerivedSignal(fn);
+}
+function effect(fn) {
+  const e = new Effect(fn);
+  return () => e.dispose();
+}
+
 // ../renderer/src/hydration-diagnostics.ts
 function formatHydrationDiagnostic(d) {
   const at = ` at ${d.path}`;
@@ -2120,6 +2331,27 @@ function hydrateNode(ctx, graphNode, domNode, path) {
       }
       return instance;
     }
+    case "code": {
+      let codeEl = dom.firstChild(domNode);
+      if (codeEl === null || dom.isTextNode(codeEl)) {
+        const createdCode = dom.createElement("code");
+        dom.appendChild(domNode, createdCode);
+        codeEl = createdCode;
+      }
+      let textNode = dom.firstChild(codeEl);
+      if (textNode === null || !dom.isTextNode(textNode)) {
+        const created = dom.createTextNode(String(graphNode.getProp("text") ?? ""));
+        dom.appendChild(codeEl, created);
+        textNode = created;
+      }
+      const instance = new NodeInstance(graphNode, domNode);
+      ctx.instances.set(graphNode.id, instance);
+      wireEvents(dom, graph, graphNode, domNode, instance);
+      if (graphNode.stateRefs.length !== 0) {
+        wireSignalBindings(ctx, graphNode, instance, textUpdate(dom, domNode, textNode));
+      }
+      return instance;
+    }
     case "image":
     case "link": {
       const instance = new NodeInstance(graphNode, domNode);
@@ -2271,6 +2503,8 @@ function expectedTag(ctx, graphNode) {
       return "img";
     case "link":
       return "a";
+    case "code":
+      return "pre";
     case "button":
       return "button";
     default:
@@ -2980,188 +3214,6 @@ function resolveHead(config) {
   return { entries };
 }
 
-// ../state/src/signal.ts
-var _activeConsumer = null;
-function withConsumer(consumer, fn) {
-  const prev = _activeConsumer;
-  _activeConsumer = consumer;
-  try {
-    return fn();
-  } finally {
-    _activeConsumer = prev;
-  }
-}
-var _batchDepth = 0;
-var _pendingFlushes = /* @__PURE__ */ new Map();
-function _enqueueBatchFlush(sig, value) {
-  _pendingFlushes.set(sig, { signal: sig, value });
-}
-var Signal = class {
-  _value;
-  _subscribers = /* @__PURE__ */ new Set();
-  _consumers = /* @__PURE__ */ new Set();
-  constructor(initial) {
-    this._value = initial;
-  }
-  get() {
-    if (_activeConsumer !== null) {
-      this._consumers.add(_activeConsumer);
-      _activeConsumer._addSource(this);
-    }
-    return this._value;
-  }
-  peek() {
-    return this._value;
-  }
-  set(value) {
-    if (Object.is(this._value, value)) return;
-    this._value = value;
-    if (_batchDepth > 0) {
-      _enqueueBatchFlush(this, value);
-    } else {
-      this._flush(value);
-    }
-  }
-  update(fn) {
-    this.set(fn(this._value));
-  }
-  subscribe(fn) {
-    this._subscribers.add(fn);
-    return () => {
-      this._subscribers.delete(fn);
-    };
-  }
-  _removeConsumer(consumer) {
-    this._consumers.delete(consumer);
-  }
-  /**
-   * Called by the batch machinery after the batch has completed.
-   * Notifies subscribers with the final coalesced value.
-   */
-  _flushBatch(value) {
-    this._flush(value);
-  }
-  _flush(value) {
-    for (const sub of [...this._subscribers]) sub(value);
-    for (const consumer of [...this._consumers]) consumer._invalidate();
-  }
-  /**
-   * @internal DevTools inspection only. The number of live observers
-   * (direct subscribers plus derived/effect consumers). Read-only; never
-   * mutates reactive state.
-   */
-  _observerCount() {
-    return this._subscribers.size + this._consumers.size;
-  }
-};
-var DerivedSignal = class {
-  _value = void 0;
-  _dirty = true;
-  _disposed = false;
-  _fn;
-  _subscribers = /* @__PURE__ */ new Set();
-  /** All upstream sources this derived currently reads from. */
-  _sources = /* @__PURE__ */ new Set();
-  /** Downstream consumers that depend on this derived. */
-  _consumers = /* @__PURE__ */ new Set();
-  constructor(fn) {
-    this._fn = fn;
-  }
-  get() {
-    if (_activeConsumer !== null) {
-      this._consumers.add(_activeConsumer);
-      _activeConsumer._addSource(this);
-    }
-    if (this._dirty) this._recompute();
-    return this._value;
-  }
-  peek() {
-    if (this._dirty) this._recompute();
-    return this._value;
-  }
-  subscribe(fn) {
-    if (this._dirty) this._recompute();
-    this._subscribers.add(fn);
-    return () => {
-      this._subscribers.delete(fn);
-    };
-  }
-  _addSource(src) {
-    this._sources.add(src);
-  }
-  _removeConsumer(consumer) {
-    this._consumers.delete(consumer);
-  }
-  _invalidate() {
-    if (this._disposed) return;
-    this._dirty = true;
-    const newVal = this.peek();
-    for (const sub of [...this._subscribers]) sub(newVal);
-    for (const consumer of [...this._consumers]) consumer._invalidate();
-  }
-  _recompute() {
-    for (const src of this._sources) src._removeConsumer(this);
-    this._sources.clear();
-    this._value = withConsumer(this, this._fn);
-    this._dirty = false;
-  }
-  dispose() {
-    this._disposed = true;
-    for (const src of this._sources) src._removeConsumer(this);
-    this._sources.clear();
-    this._subscribers.clear();
-    this._consumers.clear();
-  }
-  /**
-   * @internal DevTools inspection only. Live observers (subscribers plus
-   * downstream consumers). Read-only.
-   */
-  _observerCount() {
-    return this._subscribers.size + this._consumers.size;
-  }
-};
-var Effect = class {
-  _fn;
-  _cleanup = void 0;
-  _disposed = false;
-  _sources = /* @__PURE__ */ new Set();
-  constructor(fn) {
-    this._fn = fn;
-    this._run();
-  }
-  _addSource(src) {
-    this._sources.add(src);
-  }
-  _invalidate() {
-    if (this._disposed) return;
-    this._run();
-  }
-  _run() {
-    for (const src of this._sources) src._removeConsumer(this);
-    this._sources.clear();
-    if (typeof this._cleanup === "function") this._cleanup();
-    const result = withConsumer(this, this._fn);
-    this._cleanup = typeof result === "function" ? result : void 0;
-  }
-  dispose() {
-    this._disposed = true;
-    for (const src of this._sources) src._removeConsumer(this);
-    this._sources.clear();
-    if (typeof this._cleanup === "function") this._cleanup();
-    this._cleanup = void 0;
-  }
-};
-function signal(initial) {
-  return new Signal(initial);
-}
-function derived(fn) {
-  return new DerivedSignal(fn);
-}
-function effect(fn) {
-  const e = new Effect(fn);
-  return () => e.dispose();
-}
-
 // ../dsl/src/builders.ts
 function isSignal(v) {
   return v !== null && typeof v === "object" && typeof v["get"] === "function" && typeof v["subscribe"] === "function";
@@ -3386,6 +3438,16 @@ var ContentBuilderBase = class {
       node.addEvent({ type: "click", handlerKey });
     }
   }
+  code(source, options = {}) {
+    const props = {};
+    if (options.language !== void 0) props["data-language"] = options.language;
+    if (options.class !== void 0) props["class"] = options.class;
+    if (options.id !== void 0) props["id"] = options.id;
+    applyA11yProps(props, options);
+    const node = this._graph.createNode("code", { parent: this._node, props });
+    const resolved = bindValue(this._graph, node, "text", source);
+    node.setProp("text", resolved);
+  }
 };
 var ContainerBuilderBase = class extends ContentBuilderBase {
   section(key, builder, options = {}) {
@@ -4122,7 +4184,7 @@ function trigger(el, type, init = {}) {
 }
 
 // src/version.ts
-var VERSION = "2.5.0";
+var VERSION = "2.7.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   VERSION,