sibujs 4.6.0 → 4.7.0

package/dist/plugins.d.ts

@@ -1,9 +1,20 @@
+import { A as Accessor } from './signal-EotCj4hS.js';
+import { N as NodeChildren } from './types-CJFViL6Q.js';
 import { T as TrustedHTML } from './ssr-Bli9XRW5.js';
 export { P as PluginContext, a as PluginInstallCancelledError, b as PluginRegistry, S as SibuPlugin, c as createPlugin, d as createPluginRegistry, i as inject, e as isPluginInstallCancelledError, p as plugin, r as resetPlugins, s as setDefaultPluginRegistry, t as triggerPluginError, f as triggerPluginMount, g as triggerPluginUnmount } from './plugin-DVgSnTfK.js';
 export { L as LazyModule, M as Migration, a as MigrationStorageError, P as PackageExportTarget, S as SemVer, V as VERSION, b as bundlerMetadata, c as checkCompatibility, d as compareSemVer, e as createBootSequence, f as createBundle, g as createMigrationRunner, h as createModuleRegistry, i as createSSRCache, j as createTestHarness, k as deferNonCritical, l as env, m as healthCheck, n as lazyModule, p as packageInfo, o as parseSemVer, q as preloadCritical, r as prerenderRoutes, s as satisfies } from './startup-BLfSeL15.js';
 
 type Translations = Record<string, string>;
-type Params$1 = Record<string, string | number>;
+/**
+ * Interpolation parameters for `t()`, `translated()` and `Trans()`.
+ *
+ * A value may be a GETTER (a signal accessor or any `() => value`). Getters are
+ * called at lookup time, so inside a binding the parameter is tracked exactly
+ * like the locale: `translated("hello", { name: userName })` re-renders when
+ * either `userName` or the locale changes.
+ */
+type TranslationParams = Record<string, string | number | (() => string | number)>;
+type Params$1 = TranslationParams;
 /**
  * Set the active locale.
  *
@@ -56,21 +67,72 @@ declare function getLocale(): string;
  * because the assignment form would invoke the inherited `__proto__` setter for
  * a locale of that name instead of registering it. Locale names and translation
  * keys are treated literally throughout — see PROTOTYPE SAFETY above.
+ *
+ * NOTIFY. Every registration bumps the dictionary revision, so bindings that
+ * already rendered a key re-run and pick the new message up — the order of
+ * `setLocale()` and `registerTranslations()` no longer matters. The bump comes
+ * after publication, so a re-running binding can only ever see the new
+ * dictionary.
  */
 declare function registerTranslations(locale: string, messages: Translations): void;
 /**
  * Translate `key` in the current locale, falling back to the key itself when it
  * is not registered. A registered empty string is a translation and is returned
  * unchanged; the previous `|| key` discarded it and returned the key.
+ *
+ * `t()` returns a STRING — a snapshot. It is live only when it is read inside a
+ * binding (`span(() => t("hello"))`), because that binding is what re-runs.
+ * Called directly in a component body, `span(t("hello"))` renders the message
+ * once and never updates. For anything on screen prefer {@link translated},
+ * which hands the binding a getter and works for text children and attributes
+ * alike. `t()` remains the right call for one-off strings: event handlers,
+ * `confirm()` prompts, log lines, server renders.
+ *
+ * Parameter getters are resolved on every call, so `t("hi", { name: userName })`
+ * inside a binding tracks `userName` too.
  */
 declare function t(key: string, params?: Params$1): string;
 /**
- * Trans component — renders a translated string reactively.
- * Automatically updates when the client locale changes. During SSR it renders
- * once, using the locale belonging to the current request.
+ * A LIVE translation: returns a getter that re-reads the message every time a
+ * binding calls it. Pass it anywhere the tag factories accept a reactive value
+ * — a text child or any attribute — and only that one text node or attribute
+ * updates when the locale changes, when messages for it are registered later,
+ * or when a getter parameter changes. The surrounding elements are never
+ * rebuilt, so focus, typed input values and element identity survive a language
+ * switch.
+ *
+ * During SSR the binding evaluates once, using the locale of the current
+ * request.
+ *
+ * @param key Translation key
+ * @param params Optional interpolation parameters; values may be getters
+ * @returns An accessor producing the translated string
+ *
+ * @example
+ * ```ts
+ * const [userName] = signal("Ada");
+ *
+ * header([
+ *   h1(translated("app.title")),
+ *   span(translated("greeting", { name: userName })),
+ *   input({ placeholder: translated("search.placeholder"), "aria-label": translated("search.label") }),
+ * ]);
+ *
+ * setLocale("es"); // text and attributes update in place — no re-render
+ * ```
+ */
+declare function translated(key: string, params?: Params$1): Accessor<string>;
+/**
+ * Trans component — renders a translated string reactively inside a `<span>`.
+ * Automatically updates when the client locale changes, when messages for the
+ * active locale are registered, and when a getter parameter changes. During SSR
+ * it renders once, using the locale belonging to the current request.
+ *
+ * When no wrapper element is wanted, pass {@link translated} straight to the
+ * parent instead: `p(translated("greeting"))`.
  *
  * @param key Translation key
- * @param params Optional interpolation parameters
+ * @param params Optional interpolation parameters; values may be getters
  * @returns An HTMLElement (span) that reactively shows the translated text
  *
  * @example
@@ -78,8 +140,8 @@ declare function t(key: string, params?: Params$1): string;
  * registerTranslations("en", { greeting: "Hello, {name}!" });
  * registerTranslations("es", { greeting: "Hola, {name}!" });
  *
- * div([Trans("greeting", { name: "World" })]);
- * // When locale changes, the text updates automatically
+ * div([Trans("greeting", { name: userName })]);
+ * // When the locale or userName changes, the text updates automatically
  * ```
  */
 declare function Trans(key: string, params?: Params$1): HTMLElement;
@@ -98,6 +160,9 @@ declare function hasTranslation(key: string): boolean;
  *
  * Own enumerable keys, so a locale is listed exactly when it was registered -
  * including one named `"__proto__"`, which publication now stores literally.
+ *
+ * Read inside a binding the list is live: registering a new locale re-runs it,
+ * so a language picker built from it picks up lazily loaded locales.
  */
 declare function getAvailableLocales(): string[];
 
@@ -127,6 +192,41 @@ interface RouteBase {
     readonly children?: RouteDef[];
     readonly beforeEnter?: Guard | Guard[];
     readonly alias?: string | string[];
+    /**
+     * Identity of the mounted instance of this route's component.
+     *
+     * When a navigation stays on this route but the key changes, the outlet
+     * disposes the old instance (running its `onUnmount` / `onCleanup`
+     * callbacks and releasing its bindings) and mounts a fresh one — so a page
+     * that reads `route().params.id` once at setup always sees the right id.
+     *
+     * **Default:** the path params this record declares in its *own* path (and
+     * aliases). `/records/1` → `/records/2` remounts; `?tab=a` → `?tab=b` or a
+     * hash change does not. A parent layout is not remounted when only a child's
+     * param changes — the child's `Outlet()` remounts the child instead. A
+     * record with no params of its own is never remounted by a param change, and
+     * a `*` tail (`pathMatch`) is not part of the default: a catch-all keeps its
+     * instance and reads `pathMatch` reactively (`key: (r) => r.params.pathMatch`
+     * remounts per path).
+     *
+     * **Override:** return any string derived from the route. Return a constant
+     * to keep one long-lived instance across param changes (the instance must
+     * then read params reactively, e.g. `routerState().params()` or
+     * `() => route().params.id`). Include query values to also remount on a
+     * query change.
+     *
+     * Called untracked with the committed route. Ignored by `KeepAliveRoute()`,
+     * which already keeps one instance per full location.
+     *
+     * @example
+     * ```ts
+     * // Keep one instance for every record; the page reads params reactively.
+     * { path: "/records/:id", component: RecordPage, key: () => "record" }
+     * // Also remount when ?tab changes.
+     * { path: "/records/:id", component: RecordPage, key: (r) => `${r.params.id}|${r.query.tab ?? ""}` }
+     * ```
+     */
+    readonly key?: (route: RouteContext) => string;
 }
 interface ComponentRoute extends RouteBase {
     readonly component: Component;
@@ -367,6 +467,11 @@ declare function setRoutes(routes: RouteDef[]): void;
 /**
  * Read the current route as a plain snapshot.
  *
+ * Reading it once in a route component's setup is safe: when a navigation
+ * changes that route's own params, the outlet mounts a fresh instance (see
+ * `RouteBase.key`). Inside a getter — `() => route().params.id` — the read is
+ * reactive, which is what a long-lived layout or a constant-`key` route needs.
+ *
  * @returns The active {@link RouteContext} (path, params, query, hash).
  * @throws If no router has been created yet.
  */
@@ -456,7 +561,10 @@ declare function beforeResolve(guard: NavigationGuard): () => void;
 declare function afterEach(hook: (to: RouteContext, from: RouteContext) => void): () => void;
 /**
  * The route outlet: renders whichever component matches the current route, and
- * swaps it on every navigation.
+ * swaps it when the top-level matched record or its instance key changes. By
+ * default the key is that record's own path params, so `/records/1` →
+ * `/records/2` mounts a fresh instance while a query- or hash-only change keeps
+ * the current one (see `RouteBase.key`).
  *
  * @returns A Comment anchor that manages the matched component. Like every
  * factory here it hands back a live node the caller can insert directly.
@@ -525,11 +633,11 @@ declare function RouterLink(props: {
     activeClass?: string;
     exactActiveClass?: string;
     /** @deprecated Pass children positionally: `RouterLink(props, children)`. */
-    nodes?: string | Node | (string | Node)[];
+    nodes?: NodeChildren;
     target?: string;
     rel?: string;
     [key: string]: unknown;
-}, children?: string | Node | (string | Node)[]): HTMLAnchorElement;
+}, children?: NodeChildren): HTMLAnchorElement;
 /**
  * Async boundary for code-split / deferred content.
  *
@@ -617,6 +725,11 @@ declare function __removeRouterPagehideHandler(): void;
 /**
  * Outlet renders the child route component within a layout.
  * Use inside a parent route's component to render matched children.
+ *
+ * The child is remounted when the matched child record changes or when its
+ * instance key does — by default the params declared below the top-level
+ * record, so a child-only param change remounts the child and leaves the
+ * layout in place (see `RouteBase.key`).
  */
 declare function Outlet(): Node;
 /**
@@ -782,4 +895,4 @@ declare function createSSRRouter(routes: SSRRouteDef[]): {
     }) => string;
 };
 
-export { type AsyncComponent, type AsyncRoute, type Component, type ComponentRoute, type Guard, type GuardResult, KeepAliveRoute, type LazyComponent, type LazyRoute, type NavigationFailure, type NavigationFailureReason, type NavigationGuard, type NavigationNext, type NavigationResult, type NavigationTarget, Outlet, type Params, type RedirectRoute, Route, type RouteBase, type RouteContext, type RouteDef, type RouteMeta, type RouteTransitionOptions, RouterLink, type RouterOptions, type RouterPlugin, type SSRRouteDef, type SSRRouteState, type ScrollBehavior, type ScrollPosition, SibuRouter, Suspense, Trans, __getNavigationEpoch, __removeRouterPagehideHandler, addRoute, afterEach, back, beforeEach, beforeResolve, buildURL, createMemoryRouter, createRouter, createSSRRouter, deserializeRouteState, destroyRouter, forward, getAvailableLocales, getLocale, getRouteInfo, getRouteTransition, go, hasRoute, hasTranslation, hydrateRouter, lazy, navigate, preloadRoute, push, registerTranslations, removeRoute, renderRouteToDocument, renderRouteToString, replace, resolveServerRoute, route, router, routerPlugin, routerState, serializeRouteState, setLocale, setRouteTransition, setRoutes, t };
+export { type AsyncComponent, type AsyncRoute, type Component, type ComponentRoute, type Guard, type GuardResult, KeepAliveRoute, type LazyComponent, type LazyRoute, type NavigationFailure, type NavigationFailureReason, type NavigationGuard, type NavigationNext, type NavigationResult, type NavigationTarget, Outlet, type Params, type RedirectRoute, Route, type RouteBase, type RouteContext, type RouteDef, type RouteMeta, type RouteTransitionOptions, RouterLink, type RouterOptions, type RouterPlugin, type SSRRouteDef, type SSRRouteState, type ScrollBehavior, type ScrollPosition, SibuRouter, Suspense, Trans, type TranslationParams, __getNavigationEpoch, __removeRouterPagehideHandler, addRoute, afterEach, back, beforeEach, beforeResolve, buildURL, createMemoryRouter, createRouter, createSSRRouter, deserializeRouteState, destroyRouter, forward, getAvailableLocales, getLocale, getRouteInfo, getRouteTransition, go, hasRoute, hasTranslation, hydrateRouter, lazy, navigate, preloadRoute, push, registerTranslations, removeRoute, renderRouteToDocument, renderRouteToString, replace, resolveServerRoute, route, router, routerPlugin, routerState, serializeRouteState, setLocale, setRouteTransition, setRoutes, t, translated };

package/dist/plugins.js

@@ -19,7 +19,7 @@ import {
   preloadCritical,
   prerenderRoutes,
   satisfies
-} from "./chunk-5MT6SJ3P.js";
+} from "./chunk-4AWA2PVD.js";
 import {
   isUnsafeKey
 } from "./chunk-H3SRKIYX.js";
@@ -38,16 +38,17 @@ import {
 } from "./chunk-J6FW5TV6.js";
 import {
   span
-} from "./chunk-JSXPZCET.js";
+} from "./chunk-7LUJQAOJ.js";
 import {
   escapeScriptJson,
   renderToString,
   serializeHeadEntry
 } from "./chunk-HURREPU2.js";
 import {
+  appendChildren,
   resolveClassValue
-} from "./chunk-VVWPJ543.js";
-import "./chunk-47M47FOM.js";
+} from "./chunk-UOL2ECCS.js";
+import "./chunk-FNJXNGYZ.js";
 import {
   isUrlAttribute,
   sanitizeStyleAttribute,
@@ -59,17 +60,18 @@ import {
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-XC4MEKGA.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   getRequestStore
 } from "./chunk-7XHATCIH.js";
 import "./chunk-5HZXGZ6T.js";
 import {
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-FQRUXCEE.js";
 import {
-  track
-} from "./chunk-5Q4R7HCL.js";
+  track,
+  untracked
+} from "./chunk-JWKYU5GV.js";
 import {
   devWarn,
   dispose,
@@ -80,14 +82,20 @@ import {
 // src/plugins/i18n.ts
 var _i18n = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.i18n.v1"), () => ({
   locale: signal("en"),
-  locales: /* @__PURE__ */ Object.create(null)
+  locales: /* @__PURE__ */ Object.create(null),
+  revision: signal(0)
 }));
 var [clientLocale, setClientLocale] = _i18n.locale;
 var locales = _i18n.locales;
+var [revision, setRevision] = _i18n.revision ?? (_i18n.revision = signal(0));
 function dictionaryFor(locale) {
   return Object.hasOwn(locales, locale) ? locales[locale] : void 0;
 }
+function trackDictionaries() {
+  if (!getRequestStore()) revision();
+}
 function lookup(key) {
+  trackDictionaries();
   const dictionary = dictionaryFor(getLocale());
   if (dictionary === void 0 || !Object.hasOwn(dictionary, key)) return void 0;
   const message = dictionary[key];
@@ -117,18 +125,29 @@ function registerTranslations(locale, messages) {
     enumerable: true,
     configurable: true
   });
+  setRevision((n) => n + 1);
+}
+function resolveParam(params, name) {
+  if (!Object.hasOwn(params, name)) return "";
+  const raw = params[name];
+  const value = typeof raw === "function" ? raw() : raw;
+  return value == null ? "" : String(value);
 }
 function t(key, params) {
   const message = lookup(key) ?? key;
-  return params ? message.replace(/\{(\w+)\}/g, (_, p) => String(params[p] ?? "")) : message;
+  return params ? message.replace(/\{(\w+)\}/g, (_, p) => resolveParam(params, p)) : message;
+}
+function translated(key, params) {
+  return () => t(key, params);
 }
 function Trans(key, params) {
-  return span(() => t(key, params));
+  return span(translated(key, params));
 }
 function hasTranslation(key) {
   return lookup(key) !== void 0;
 }
 function getAvailableLocales() {
+  trackDictionaries();
   return Object.keys(locales);
 }
 
@@ -1302,6 +1321,30 @@ function afterEach(hook) {
   return _routerRef.current.afterEach(hook);
 }
 var routeCleanups = [];
+var ownParamNamesCache = /* @__PURE__ */ new WeakMap();
+function ownParamNames(record) {
+  const cached = ownParamNamesCache.get(record);
+  if (cached) return cached;
+  const aliases = record.alias == null ? [] : Array.isArray(record.alias) ? record.alias : [record.alias];
+  const names = /* @__PURE__ */ new Set();
+  for (const pattern of [record.path, ...aliases]) {
+    for (const m of pattern.matchAll(/\/:([^/]+)/g)) {
+      names.add(m[1].endsWith("?") ? m[1].slice(0, -1) : m[1]);
+    }
+  }
+  const result = [...names];
+  ownParamNamesCache.set(record, result);
+  return result;
+}
+function instanceKey(owner, records, route2) {
+  const custom = owner.key;
+  if (custom) return untracked(() => String(custom(route2)));
+  const parts = [];
+  for (const record of records) {
+    for (const name of ownParamNames(record)) parts.push(name, route2.params[name] ?? null);
+  }
+  return JSON.stringify(parts);
+}
 function Route() {
   const anchor = document.createComment("route-outlet");
   let currentNode = null;
@@ -1309,6 +1352,7 @@ function Route() {
   let errorNode = null;
   let navSeq = 0;
   let currentTopRoute = null;
+  let currentKey = null;
   let routeTorn = false;
   const commitTarget = (seq) => routeTorn || seq !== navSeq ? null : anchor.parentNode;
   const release = (node) => {
@@ -1400,11 +1444,13 @@ function Route() {
       const match = _routerRef.current["matcher"].match(route2.path);
       if (!match) {
         currentTopRoute = null;
+        currentKey = null;
         cleanupNodes();
         return;
       }
       const routeDef = match.matched[0] || match.route;
-      if (routeDef === currentTopRoute && currentNode) {
+      const key = instanceKey(routeDef, [routeDef], route2);
+      if (routeDef === currentTopRoute && key === currentKey && currentNode) {
         return;
       }
       if ("redirect" in routeDef) {
@@ -1432,6 +1478,7 @@ function Route() {
           }
           if (node) {
             currentTopRoute = routeDef;
+            currentKey = key;
             cleanupNodes();
             parent.insertBefore(node, anchor.nextSibling);
             currentNode = node;
@@ -1469,6 +1516,7 @@ function Route() {
     routeTeardown();
     cleanupNodes();
     currentTopRoute = null;
+    currentKey = null;
   };
   registerDisposer(anchor, routeCleanup);
   routeCleanups.push(routeCleanup);
@@ -1655,19 +1703,7 @@ function RouterLink(props, children) {
       }
     }
   });
-  if (typeof content === "string") {
-    link.textContent = content;
-  } else if (content instanceof Node) {
-    link.appendChild(content);
-  } else if (Array.isArray(content)) {
-    content.forEach((child) => {
-      if (typeof child === "string") {
-        link.appendChild(document.createTextNode(child));
-      } else if (child instanceof Node) {
-        link.appendChild(child);
-      }
-    });
-  }
+  if (content !== void 0) appendChildren(link, content);
   const onLinkClick = (e) => {
     if (e.defaultPrevented || target || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) {
       return;
@@ -1829,6 +1865,7 @@ function Outlet() {
   const anchor = document.createComment("route-outlet-nested");
   let currentNode = null;
   let currentChild = null;
+  let currentKey = null;
   let navSeq = 0;
   let outletTorn = false;
   const clearCurrent = () => {
@@ -1838,6 +1875,7 @@ function Outlet() {
       currentNode = null;
     }
     currentChild = null;
+    currentKey = null;
   };
   const commitTarget = (seq) => outletTorn || seq !== navSeq ? null : anchor.parentNode;
   const release = (node) => {
@@ -1858,7 +1896,8 @@ function Outlet() {
       clearCurrent();
       return;
     }
-    if (childRoute === currentChild && currentNode) return;
+    const key = instanceKey(childRoute, route2.matched.slice(1), route2);
+    if (childRoute === currentChild && key === currentKey && currentNode) return;
     try {
       const cacheKey = `${route2.path}\0${childRoute.path}`;
       const plan = await _routerRef.current.loadPlan(childRoute, cacheKey);
@@ -1874,6 +1913,7 @@ function Outlet() {
       parent.insertBefore(node, anchor.nextSibling);
       currentNode = node;
       currentChild = childRoute;
+      currentKey = key;
     } catch (error) {
       if (outletTorn || seq !== navSeq) return;
       console.error("[Outlet] Failed to render child route:", error);
@@ -1896,6 +1936,7 @@ function Outlet() {
       currentNode = null;
     }
     currentChild = null;
+    currentKey = null;
   };
   registerDisposer(anchor, outletCleanup);
   routeCleanups.push(outletCleanup);
@@ -2312,6 +2353,7 @@ export {
   setRouteTransition,
   setRoutes,
   t,
+  translated,
   triggerPluginError,
   triggerPluginMount,
   triggerPluginUnmount

package/dist/ssr.cjs

@@ -1712,7 +1712,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.6.0" : "dev";
+var _runtimeVersion = true ? "4.7.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -1768,6 +1768,14 @@ var getSubscriberCount2 = API.getSubscriberCount;
 var getSubscriberDeps2 = API.getSubscriberDeps;
 var forEachSubscriber2 = API.forEachSubscriber;
 
+// src/core/devtoolsHook.ts
+function emitDevtools(hook, event, payload) {
+  try {
+    hook.emit(event, payload);
+  } catch {
+  }
+}
+
 // src/core/signals/effect.ts
 var _g = globalThis;
 var MAX_RERUNS = 100;
@@ -1883,12 +1891,17 @@ function effect(effectFn, options) {
   try {
     retrack2(ctx.bodyFn, ctx.subscriber);
     if (ctx.rerunPending) drainReruns(ctx);
+  } catch (err) {
+    ctx.disposed = true;
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+    cleanup2(ctx.subscriber);
+    throw err;
   } finally {
     ctx.running = false;
     ctx.rerunPending = false;
   }
   const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook) hook.emit("effect:create", { effectFn });
+  if (hook) emitDevtools(hook, "effect:create", { effectFn });
   return () => disposeEffect(ctx);
 }
 
@@ -2256,7 +2269,7 @@ function signal(initial, options) {
       state2.__v++;
       if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
@@ -2270,7 +2283,7 @@ function signal(initial, options) {
       state2.value = newValue;
       state2.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
       }
@@ -2289,7 +2302,7 @@ function signal(initial, options) {
   }
   if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
+    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
@@ -2812,8 +2825,34 @@ function toKebab(prop) {
 }
 function applyStyle(el, style2) {
   if (typeof style2 === "function") {
+    const getter = style2;
+    let written = [];
+    let wroteString = false;
     const teardown = reactiveBinding2(() => {
-      el.setAttribute("style", sanitizeStyleAttribute(String(style2()), { element: el }));
+      const value = getter();
+      if (value === null || typeof value !== "object") {
+        written = [];
+        wroteString = true;
+        el.setAttribute("style", sanitizeStyleAttribute(String(value), { element: el }));
+        return;
+      }
+      const decl = el.style;
+      if (wroteString) {
+        el.removeAttribute("style");
+        wroteString = false;
+      }
+      const next = [];
+      for (const prop in value) {
+        const val = value[prop];
+        if (val == null) continue;
+        const name = toKebab(prop);
+        next.push(name);
+        decl.setProperty(name, sanitizeCSSValue(String(val), { property: name, element: el }));
+      }
+      for (let i2 = 0; i2 < written.length; i2++) {
+        if (next.indexOf(written[i2]) === -1) decl.removeProperty(written[i2]);
+      }
+      written = next;
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -2844,7 +2883,9 @@ function applyClass(el, cls) {
   }
   if (typeof cls === "function") {
     const teardown = reactiveBinding2(() => {
-      el.setAttribute("class", cls());
+      const value = cls();
+      if (value == null || value === false) el.removeAttribute("class");
+      else el.setAttribute("class", value);
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -2926,7 +2967,7 @@ function appendChildren(el, nodes) {
     }
   }
 }
-var tagFactory = (tag, ns) => {
+function tagFactory(tag, ns) {
   const blocked = isBlockedTag(tag);
   return (first, second) => {
     if (blocked) {
@@ -2975,7 +3016,9 @@ var tagFactory = (tag, ns) => {
     const pClass = props.class;
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
-    if (pId != null) {
+    if (typeof pId === "function") {
+      registerDisposer(el, bindAttribute(el, "id", pId));
+    } else if (pId != null) {
       if (DEV && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
         devWarn(
           `tagFactory: element id="${pId}" matches a common global and may cause DOM clobbering. Avoid setting ids from untrusted input.`
@@ -3025,12 +3068,10 @@ var tagFactory = (tag, ns) => {
         }
       }
     }
-    if (props.onElement && typeof props.onElement === "function") {
-      props.onElement(el);
-    }
+    if (typeof props.onElement === "function") props.onElement(el);
     return el;
   };
-};
+}
 
 // src/core/rendering/html.ts
 var html = tagFactory("html");

package/dist/ssr.js

@@ -23,9 +23,9 @@ import {
   wasm,
   worker,
   workerFn
-} from "./chunk-ORMZXBKQ.js";
+} from "./chunk-VZSG24LS.js";
 import "./chunk-52XFPGSN.js";
-import "./chunk-JSXPZCET.js";
+import "./chunk-7LUJQAOJ.js";
 import {
   collectStream,
   deserializeState,
@@ -46,14 +46,14 @@ import {
   suspenseSwapScript,
   trustHTML
 } from "./chunk-HURREPU2.js";
-import "./chunk-VVWPJ543.js";
-import "./chunk-47M47FOM.js";
+import "./chunk-UOL2ECCS.js";
+import "./chunk-FNJXNGYZ.js";
 import "./chunk-2INLLLMZ.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-XC4MEKGA.js";
+import "./chunk-WEQ3DMVL.js";
 import "./chunk-7XHATCIH.js";
-import "./chunk-D33YTSX5.js";
-import "./chunk-5Q4R7HCL.js";
+import "./chunk-FQRUXCEE.js";
+import "./chunk-JWKYU5GV.js";
 import "./chunk-NYNYSPK7.js";
 export {
   Head,