npm - sibujs - Versions diffs - 1.0.3 → 1.0.4 - Mend

sibujs 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/LICENSE +21 -21
package/dist/build.cjs +20 -0
package/dist/build.js +1 -1
package/dist/cdn.global.js +4 -4
package/dist/{chunk-MEZVEBPN.js → chunk-32ZISOLJ.js} +22 -0
package/dist/{chunk-7TQKR4PP.js → chunk-AZ3ISID5.js} +4 -0
package/dist/{chunk-3CRQALYP.js → chunk-DKOHBI74.js} +49 -2
package/dist/{chunk-DTCOOBMX.js → chunk-OF7UZIVB.js} +1 -1
package/dist/{chunk-N6IZB6KJ.js → chunk-PBHF5WKN.js} +56 -7
package/dist/{customElement-BKQfbSZQ.d.ts → customElement-yz8uyk-0.d.cts} +52 -6
package/dist/{customElement-BKQfbSZQ.d.cts → customElement-yz8uyk-0.d.ts} +52 -6
package/dist/extras.cjs +111 -9
package/dist/extras.d.cts +3 -2
package/dist/extras.d.ts +3 -2
package/dist/extras.js +9 -5
package/dist/index.cjs +22 -0
package/dist/index.d.cts +27 -2
package/dist/index.d.ts +27 -2
package/dist/index.js +5 -1
package/dist/patterns.d.cts +8 -2
package/dist/patterns.d.ts +8 -2
package/dist/plugins.cjs +142 -1
package/dist/plugins.d.cts +39 -3
package/dist/plugins.d.ts +39 -3
package/dist/plugins.js +119 -3
package/dist/{ssr-WKUPVSSK.js → ssr-6GIMY5MX.js} +5 -3
package/dist/ssr-BA6sxxUd.d.cts +135 -0
package/dist/ssr-BA6sxxUd.d.ts +135 -0
package/dist/ssr.cjs +5 -0
package/dist/ssr.d.cts +3 -113
package/dist/ssr.d.ts +3 -113
package/dist/ssr.js +4 -2
package/dist/ui.cjs +50 -2
package/dist/ui.d.cts +1 -1
package/dist/ui.d.ts +1 -1
package/dist/ui.js +3 -1
package/dist/widgets.cjs +56 -7
package/dist/widgets.d.cts +4 -2
package/dist/widgets.d.ts +4 -2
package/dist/widgets.js +1 -1
package/package.json +139 -139

package/dist/ssr-BA6sxxUd.d.ts ADDED Viewed

@@ -0,0 +1,135 @@
+/**
+ * Converts an HTMLElement tree to an HTML string for server-side rendering.
+ */
+declare function renderToString(element: HTMLElement | DocumentFragment | Node): string;
+/**
+ * Hydrates a server-rendered DOM tree by attaching event listeners
+ * and activating reactive bindings.
+ */
+declare function hydrate(component: () => HTMLElement, container: HTMLElement): void;
+/**
+ * Branded type for raw HTML that has been explicitly marked as trusted.
+ * Use `trustHTML()` to create a value of this type. This prevents
+ * accidental injection of unsanitized user input into `headExtra`.
+ */
+type TrustedHTML = string & {
+    readonly __brand: "TrustedHTML";
+};
+/**
+ * Mark an HTML string as trusted for use in contexts that accept raw HTML
+ * (e.g. `renderToDocument({ headExtra })`). Only call this on
+ * developer-controlled strings — never on user input.
+ *
+ * @example
+ * ```ts
+ * const extra = trustHTML('<link rel="preconnect" href="https://fonts.googleapis.com">');
+ * renderToDocument(App, { headExtra: extra });
+ * ```
+ */
+declare function trustHTML(html: string): TrustedHTML;
+/**
+ * Renders a component to a full HTML document string.
+ *
+ * `headExtra` requires a `TrustedHTML` value created via `trustHTML()`.
+ * This prevents accidental injection of unsanitized user input.
+ */
+declare function renderToDocument(component: () => HTMLElement, options?: {
+    title?: string;
+    meta?: Record<string, string>[];
+    links?: Record<string, string>[];
+    scripts?: string[];
+    bodyAttrs?: Record<string, string>;
+    /**
+     * Raw HTML injected into `<head>`. Must be wrapped in `trustHTML()`
+     * to confirm the content is developer-controlled.
+     */
+    headExtra?: TrustedHTML;
+}): string;
+/**
+ * Renders a component tree to an async iterable of HTML chunks.
+ * Enables progressive server-side rendering — the consumer can write
+ * each chunk to a response stream as it becomes available.
+ */
+declare function renderToStream(element: HTMLElement | DocumentFragment | Node): AsyncGenerator<string>;
+/**
+ * Collects the full output of renderToStream into a string.
+ */
+declare function collectStream(stream: AsyncGenerator<string> | AsyncIterable<string>): Promise<string>;
+/**
+ * Renders a component tree to a Web ReadableStream<string>.
+ * Compatible with Node 18+, Deno, and edge runtimes.
+ * Uses pull-based backpressure — chunks are produced on demand.
+ */
+declare function renderToReadableStream(element: HTMLElement | DocumentFragment | Node): ReadableStream<string>;
+/**
+ * Marks an element as a hydration island. During partial hydration
+ * only elements marked with `data-sibu-island` will be hydrated.
+ */
+declare function island(id: string, component: () => HTMLElement): HTMLElement;
+/**
+ * Hydrate only elements marked as islands (`data-sibu-island`).
+ * Non-island content keeps its server-rendered HTML untouched.
+ */
+declare function hydrateIslands(container: HTMLElement, islands: Record<string, () => HTMLElement>): void;
+/**
+ * Progressively hydrate islands only when they enter the viewport.
+ * Uses IntersectionObserver to defer hydration of off-screen islands,
+ * reducing initial JavaScript execution cost.
+ *
+ * Returns a cleanup function that disconnects all observers.
+ */
+declare function hydrateProgressively(container: HTMLElement, islands: Record<string, () => HTMLElement>, options?: IntersectionObserverInit): () => void;
+/**
+ * Reset SSR state between requests. Call at the start of each SSR render
+ * to prevent ID drift in long-lived server processes.
+ */
+declare function resetSSRState(): void;
+/**
+ * Create a suspense boundary for SSR streaming.
+ * Renders fallback HTML inline and returns a promise for the resolved content.
+ *
+ * The returned element contains the fallback UI with a `data-sibu-suspense-id`
+ * marker. The promise resolves to `{ id, html }` once async content is ready.
+ */
+declare function ssrSuspense(props: {
+    fallback: () => HTMLElement;
+    content: () => Promise<HTMLElement>;
+}): {
+    element: HTMLElement;
+    promise: Promise<{
+        id: string;
+        html: string;
+    }>;
+};
+/**
+ * Generate an inline script that swaps a suspense fallback with resolved content.
+ * The id is escaped for both JS string and HTML attribute contexts to prevent injection.
+ */
+declare function suspenseSwapScript(id: string, nonce?: string): string;
+/**
+ * Renders a component tree with suspense boundaries as a stream.
+ * Yields the main tree HTML first (including fallback content for suspended
+ * boundaries), then flushes resolved content with inline swap scripts.
+ */
+declare function renderToSuspenseStream(element: HTMLElement | DocumentFragment | Node, pendingBoundaries?: Promise<{
+    id: string;
+    html: string;
+}>[]): AsyncGenerator<string>;
+/**
+ * Serialize application state into an HTML script tag for SSR.
+ * The serialized data is embedded in the document and picked up
+ * on the client with `deserializeState()`.
+ */
+declare function serializeState(state: Record<string, unknown>, nonce?: string): string;
+/**
+ * Retrieve state that was embedded by `serializeState()` during SSR.
+ *
+ * When a `validate` function is provided, it acts as a type guard —
+ * only data that passes validation is returned. This prevents
+ * tampered SSR payloads from being trusted by the client.
+ *
+ * @param validate Optional type guard to verify data integrity
+ */
+declare function deserializeState<T = Record<string, unknown>>(validate?: (data: unknown) => data is T): T | undefined;
+export { type TrustedHTML as T, hydrateIslands as a, hydrateProgressively as b, collectStream as c, deserializeState as d, renderToReadableStream as e, renderToStream as f, renderToString as g, hydrate as h, island as i, renderToSuspenseStream as j, resetSSRState as k, ssrSuspense as l, suspenseSwapScript as m, renderToDocument as r, serializeState as s, trustHTML as t };

package/dist/ssr.cjs CHANGED Viewed

@@ -55,6 +55,7 @@ __export(ssr_exports, {
   setStructuredData: () => setStructuredData,
   ssrSuspense: () => ssrSuspense,
   suspenseSwapScript: () => suspenseSwapScript,
+  trustHTML: () => trustHTML,
   wasm: () => wasm,
   worker: () => worker,
   workerFn: () => workerFn
@@ -156,6 +157,9 @@ function hydrateNode(serverNode, clientNode) {
     hydrateNode(serverChildren[i2], clientChildren[i2]);
   }
 }
+function trustHTML(html2) {
+  return html2;
+}
 function renderToDocument(component, options = {}) {
   let content;
   try {
@@ -1836,6 +1840,7 @@ function isWasmCached(key) {
   setStructuredData,
   ssrSuspense,
   suspenseSwapScript,
+  trustHTML,
   wasm,
   worker,
   workerFn

package/dist/ssr.d.cts CHANGED Viewed

@@ -1,3 +1,5 @@
+export { T as TrustedHTML, c as collectStream, d as deserializeState, h as hydrate, a as hydrateIslands, b as hydrateProgressively, i as island, r as renderToDocument, e as renderToReadableStream, f as renderToStream, g as renderToString, j as renderToSuspenseStream, k as resetSSRState, s as serializeState, l as ssrSuspense, m as suspenseSwapScript, t as trustHTML } from './ssr-BA6sxxUd.cjs';
 interface HeadProps {
     title?: string | (() => string);
     meta?: Record<string, string | (() => string)>[];
@@ -23,118 +25,6 @@ declare function setStructuredData(data: Record<string, unknown>): void;
  */
 declare function setCanonical(url: string): void;
-/**
- * Converts an HTMLElement tree to an HTML string for server-side rendering.
- */
-declare function renderToString(element: HTMLElement | DocumentFragment | Node): string;
-/**
- * Hydrates a server-rendered DOM tree by attaching event listeners
- * and activating reactive bindings.
- */
-declare function hydrate(component: () => HTMLElement, container: HTMLElement): void;
-/**
- * Renders a component to a full HTML document string.
- *
- * **Security warning:** `headExtra` is injected as raw HTML into the document head.
- * Never pass unsanitized user input to `headExtra` — it is intended for trusted,
- * developer-controlled content only (e.g. inline styles, custom meta tags).
- */
-declare function renderToDocument(component: () => HTMLElement, options?: {
-    title?: string;
-    meta?: Record<string, string>[];
-    links?: Record<string, string>[];
-    scripts?: string[];
-    bodyAttrs?: Record<string, string>;
-    /** Raw HTML injected into <head>. Must not contain unsanitized user input. */
-    headExtra?: string;
-}): string;
-/**
- * Renders a component tree to an async iterable of HTML chunks.
- * Enables progressive server-side rendering — the consumer can write
- * each chunk to a response stream as it becomes available.
- */
-declare function renderToStream(element: HTMLElement | DocumentFragment | Node): AsyncGenerator<string>;
-/**
- * Collects the full output of renderToStream into a string.
- */
-declare function collectStream(stream: AsyncGenerator<string> | AsyncIterable<string>): Promise<string>;
-/**
- * Renders a component tree to a Web ReadableStream<string>.
- * Compatible with Node 18+, Deno, and edge runtimes.
- * Uses pull-based backpressure — chunks are produced on demand.
- */
-declare function renderToReadableStream(element: HTMLElement | DocumentFragment | Node): ReadableStream<string>;
-/**
- * Marks an element as a hydration island. During partial hydration
- * only elements marked with `data-sibu-island` will be hydrated.
- */
-declare function island(id: string, component: () => HTMLElement): HTMLElement;
-/**
- * Hydrate only elements marked as islands (`data-sibu-island`).
- * Non-island content keeps its server-rendered HTML untouched.
- */
-declare function hydrateIslands(container: HTMLElement, islands: Record<string, () => HTMLElement>): void;
-/**
- * Progressively hydrate islands only when they enter the viewport.
- * Uses IntersectionObserver to defer hydration of off-screen islands,
- * reducing initial JavaScript execution cost.
- *
- * Returns a cleanup function that disconnects all observers.
- */
-declare function hydrateProgressively(container: HTMLElement, islands: Record<string, () => HTMLElement>, options?: IntersectionObserverInit): () => void;
-/**
- * Reset SSR state between requests. Call at the start of each SSR render
- * to prevent ID drift in long-lived server processes.
- */
-declare function resetSSRState(): void;
-/**
- * Create a suspense boundary for SSR streaming.
- * Renders fallback HTML inline and returns a promise for the resolved content.
- *
- * The returned element contains the fallback UI with a `data-sibu-suspense-id`
- * marker. The promise resolves to `{ id, html }` once async content is ready.
- */
-declare function ssrSuspense(props: {
-    fallback: () => HTMLElement;
-    content: () => Promise<HTMLElement>;
-}): {
-    element: HTMLElement;
-    promise: Promise<{
-        id: string;
-        html: string;
-    }>;
-};
-/**
- * Generate an inline script that swaps a suspense fallback with resolved content.
- * The id is escaped for both JS string and HTML attribute contexts to prevent injection.
- */
-declare function suspenseSwapScript(id: string, nonce?: string): string;
-/**
- * Renders a component tree with suspense boundaries as a stream.
- * Yields the main tree HTML first (including fallback content for suspended
- * boundaries), then flushes resolved content with inline swap scripts.
- */
-declare function renderToSuspenseStream(element: HTMLElement | DocumentFragment | Node, pendingBoundaries?: Promise<{
-    id: string;
-    html: string;
-}>[]): AsyncGenerator<string>;
-/**
- * Serialize application state into an HTML script tag for SSR.
- * The serialized data is embedded in the document and picked up
- * on the client with `deserializeState()`.
- */
-declare function serializeState(state: Record<string, unknown>, nonce?: string): string;
-/**
- * Retrieve state that was embedded by `serializeState()` during SSR.
- *
- * When a `validate` function is provided, it acts as a type guard —
- * only data that passes validation is returned. This prevents
- * tampered SSR payloads from being trusted by the client.
- *
- * @param validate Optional type guard to verify data integrity
- */
-declare function deserializeState<T = Record<string, unknown>>(validate?: (data: unknown) => data is T): T | undefined;
 interface UseWorkerReturn<TInput, TOutput> {
     post(data: TInput): void;
     result: () => TOutput | null;
@@ -481,4 +371,4 @@ declare function createMiddlewareChain(): {
     }) => Promise<void>;
 };
-export { type ActionFn, type ActionResult, Head, type ISROptions, type MicroApp, type MicroAppConfig, type MiddlewareFn, type SSGOptions, type SSGResult, type ScrollRestorationOptions, type ServiceWorkerState, type SharedScope, type UseWorkerFnReturn, type UseWorkerReturn, type WasmConfig, type WasmModuleState, type WorkerPool, clearWasmCache, collectStream, composeMiddleware, createAction, createISR, createMicroApp, createMiddlewareChain, createSharedScope, createWasmBridge, createWorkerPool, defineRemoteComponent, deserializeState, generateStaticSite, hydrate, hydrateIslands, hydrateProgressively, isWasmCached, island, loadRemoteModule, loadWasmModule, preloadWasm, renderToDocument, renderToReadableStream, renderToStream, renderToString, renderToSuspenseStream, resetSSRState, scrollRestoration, serializeState, serviceWorker, setCanonical, setStructuredData, ssrSuspense, suspenseSwapScript, wasm, worker, workerFn };
+export { type ActionFn, type ActionResult, Head, type ISROptions, type MicroApp, type MicroAppConfig, type MiddlewareFn, type SSGOptions, type SSGResult, type ScrollRestorationOptions, type ServiceWorkerState, type SharedScope, type UseWorkerFnReturn, type UseWorkerReturn, type WasmConfig, type WasmModuleState, type WorkerPool, clearWasmCache, composeMiddleware, createAction, createISR, createMicroApp, createMiddlewareChain, createSharedScope, createWasmBridge, createWorkerPool, defineRemoteComponent, generateStaticSite, isWasmCached, loadRemoteModule, loadWasmModule, preloadWasm, scrollRestoration, serviceWorker, setCanonical, setStructuredData, wasm, worker, workerFn };

package/dist/ssr.d.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+export { T as TrustedHTML, c as collectStream, d as deserializeState, h as hydrate, a as hydrateIslands, b as hydrateProgressively, i as island, r as renderToDocument, e as renderToReadableStream, f as renderToStream, g as renderToString, j as renderToSuspenseStream, k as resetSSRState, s as serializeState, l as ssrSuspense, m as suspenseSwapScript, t as trustHTML } from './ssr-BA6sxxUd.js';
 interface HeadProps {
     title?: string | (() => string);
     meta?: Record<string, string | (() => string)>[];
@@ -23,118 +25,6 @@ declare function setStructuredData(data: Record<string, unknown>): void;
  */
 declare function setCanonical(url: string): void;
-/**
- * Converts an HTMLElement tree to an HTML string for server-side rendering.
- */
-declare function renderToString(element: HTMLElement | DocumentFragment | Node): string;
-/**
- * Hydrates a server-rendered DOM tree by attaching event listeners
- * and activating reactive bindings.
- */
-declare function hydrate(component: () => HTMLElement, container: HTMLElement): void;
-/**
- * Renders a component to a full HTML document string.
- *
- * **Security warning:** `headExtra` is injected as raw HTML into the document head.
- * Never pass unsanitized user input to `headExtra` — it is intended for trusted,
- * developer-controlled content only (e.g. inline styles, custom meta tags).
- */
-declare function renderToDocument(component: () => HTMLElement, options?: {
-    title?: string;
-    meta?: Record<string, string>[];
-    links?: Record<string, string>[];
-    scripts?: string[];
-    bodyAttrs?: Record<string, string>;
-    /** Raw HTML injected into <head>. Must not contain unsanitized user input. */
-    headExtra?: string;
-}): string;
-/**
- * Renders a component tree to an async iterable of HTML chunks.
- * Enables progressive server-side rendering — the consumer can write
- * each chunk to a response stream as it becomes available.
- */
-declare function renderToStream(element: HTMLElement | DocumentFragment | Node): AsyncGenerator<string>;
-/**
- * Collects the full output of renderToStream into a string.
- */
-declare function collectStream(stream: AsyncGenerator<string> | AsyncIterable<string>): Promise<string>;
-/**
- * Renders a component tree to a Web ReadableStream<string>.
- * Compatible with Node 18+, Deno, and edge runtimes.
- * Uses pull-based backpressure — chunks are produced on demand.
- */
-declare function renderToReadableStream(element: HTMLElement | DocumentFragment | Node): ReadableStream<string>;
-/**
- * Marks an element as a hydration island. During partial hydration
- * only elements marked with `data-sibu-island` will be hydrated.
- */
-declare function island(id: string, component: () => HTMLElement): HTMLElement;
-/**
- * Hydrate only elements marked as islands (`data-sibu-island`).
- * Non-island content keeps its server-rendered HTML untouched.
- */
-declare function hydrateIslands(container: HTMLElement, islands: Record<string, () => HTMLElement>): void;
-/**
- * Progressively hydrate islands only when they enter the viewport.
- * Uses IntersectionObserver to defer hydration of off-screen islands,
- * reducing initial JavaScript execution cost.
- *
- * Returns a cleanup function that disconnects all observers.
- */
-declare function hydrateProgressively(container: HTMLElement, islands: Record<string, () => HTMLElement>, options?: IntersectionObserverInit): () => void;
-/**
- * Reset SSR state between requests. Call at the start of each SSR render
- * to prevent ID drift in long-lived server processes.
- */
-declare function resetSSRState(): void;
-/**
- * Create a suspense boundary for SSR streaming.
- * Renders fallback HTML inline and returns a promise for the resolved content.
- *
- * The returned element contains the fallback UI with a `data-sibu-suspense-id`
- * marker. The promise resolves to `{ id, html }` once async content is ready.
- */
-declare function ssrSuspense(props: {
-    fallback: () => HTMLElement;
-    content: () => Promise<HTMLElement>;
-}): {
-    element: HTMLElement;
-    promise: Promise<{
-        id: string;
-        html: string;
-    }>;
-};
-/**
- * Generate an inline script that swaps a suspense fallback with resolved content.
- * The id is escaped for both JS string and HTML attribute contexts to prevent injection.
- */
-declare function suspenseSwapScript(id: string, nonce?: string): string;
-/**
- * Renders a component tree with suspense boundaries as a stream.
- * Yields the main tree HTML first (including fallback content for suspended
- * boundaries), then flushes resolved content with inline swap scripts.
- */
-declare function renderToSuspenseStream(element: HTMLElement | DocumentFragment | Node, pendingBoundaries?: Promise<{
-    id: string;
-    html: string;
-}>[]): AsyncGenerator<string>;
-/**
- * Serialize application state into an HTML script tag for SSR.
- * The serialized data is embedded in the document and picked up
- * on the client with `deserializeState()`.
- */
-declare function serializeState(state: Record<string, unknown>, nonce?: string): string;
-/**
- * Retrieve state that was embedded by `serializeState()` during SSR.
- *
- * When a `validate` function is provided, it acts as a type guard —
- * only data that passes validation is returned. This prevents
- * tampered SSR payloads from being trusted by the client.
- *
- * @param validate Optional type guard to verify data integrity
- */
-declare function deserializeState<T = Record<string, unknown>>(validate?: (data: unknown) => data is T): T | undefined;
 interface UseWorkerReturn<TInput, TOutput> {
     post(data: TInput): void;
     result: () => TOutput | null;
@@ -481,4 +371,4 @@ declare function createMiddlewareChain(): {
     }) => Promise<void>;
 };
-export { type ActionFn, type ActionResult, Head, type ISROptions, type MicroApp, type MicroAppConfig, type MiddlewareFn, type SSGOptions, type SSGResult, type ScrollRestorationOptions, type ServiceWorkerState, type SharedScope, type UseWorkerFnReturn, type UseWorkerReturn, type WasmConfig, type WasmModuleState, type WorkerPool, clearWasmCache, collectStream, composeMiddleware, createAction, createISR, createMicroApp, createMiddlewareChain, createSharedScope, createWasmBridge, createWorkerPool, defineRemoteComponent, deserializeState, generateStaticSite, hydrate, hydrateIslands, hydrateProgressively, isWasmCached, island, loadRemoteModule, loadWasmModule, preloadWasm, renderToDocument, renderToReadableStream, renderToStream, renderToString, renderToSuspenseStream, resetSSRState, scrollRestoration, serializeState, serviceWorker, setCanonical, setStructuredData, ssrSuspense, suspenseSwapScript, wasm, worker, workerFn };
+export { type ActionFn, type ActionResult, Head, type ISROptions, type MicroApp, type MicroAppConfig, type MiddlewareFn, type SSGOptions, type SSGResult, type ScrollRestorationOptions, type ServiceWorkerState, type SharedScope, type UseWorkerFnReturn, type UseWorkerReturn, type WasmConfig, type WasmModuleState, type WorkerPool, clearWasmCache, composeMiddleware, createAction, createISR, createMicroApp, createMiddlewareChain, createSharedScope, createWasmBridge, createWorkerPool, defineRemoteComponent, generateStaticSite, isWasmCached, loadRemoteModule, loadWasmModule, preloadWasm, scrollRestoration, serviceWorker, setCanonical, setStructuredData, wasm, worker, workerFn };

package/dist/ssr.js CHANGED Viewed

@@ -38,8 +38,9 @@ import {
   resetSSRState,
   serializeState,
   ssrSuspense,
-  suspenseSwapScript
-} from "./chunk-7TQKR4PP.js";
+  suspenseSwapScript,
+  trustHTML
+} from "./chunk-AZ3ISID5.js";
 import "./chunk-EWFVA3TJ.js";
 import "./chunk-MDVXJWFN.js";
 import "./chunk-SDLZDHKP.js";
@@ -84,6 +85,7 @@ export {
   setStructuredData,
   ssrSuspense,
   suspenseSwapScript,
+  trustHTML,
   wasm,
   worker,
   workerFn

package/dist/ui.cjs CHANGED Viewed

@@ -29,6 +29,7 @@ __export(ui_exports, {
   bindAttrs: () => bindAttrs,
   bindBoolAttr: () => bindBoolAttr,
   bindData: () => bindData,
+  bindField: () => bindField,
   composable: () => composable,
   compose: () => compose,
   createGuard: () => createGuard,
@@ -448,6 +449,34 @@ function max(maxVal, message) {
 function custom(fn, message) {
   return (value) => fn(value) ? null : message;
 }
+function bindField(field, extras) {
+  const fieldOn = {
+    input: (e) => {
+      const target = e.target;
+      if (target.type === "checkbox") {
+        field.set(target.checked);
+      } else {
+        field.set(target.value);
+      }
+    },
+    change: (e) => {
+      const target = e.target;
+      if ("checked" in target && target.type === "checkbox") {
+        field.set(target.checked);
+      } else {
+        field.set(target.value);
+      }
+    },
+    blur: () => field.touch()
+  };
+  const { on: extraOn, value: _ignoreValue, ...restExtras } = extras ?? {};
+  const mergedOn = extraOn && typeof extraOn === "object" ? { ...fieldOn, ...extraOn } : fieldOn;
+  return {
+    value: field.value,
+    on: mergedOn,
+    ...restExtras
+  };
+}
 function form(config) {
   const fieldEntries = Object.entries(config);
   const fieldMap = {};
@@ -862,10 +891,19 @@ function announce(message, priority = "polite") {
 // src/ui/scopedStyle.ts
 var scopeCounter = 0;
+function sanitizeCSS(css) {
+  let sanitized = css.replace(/@import\s+[^;]+;/gi, "/* @import removed */");
+  sanitized = sanitized.replace(/url\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* url() removed */");
+  sanitized = sanitized.replace(/expression\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* expression() removed */");
+  sanitized = sanitized.replace(/-moz-binding\s*:[^;]+;/gi, "/* -moz-binding removed */");
+  sanitized = sanitized.replace(/behavior\s*:[^;]+;/gi, "/* behavior removed */");
+  return sanitized;
+}
 function scopedStyle(css) {
   const id = `sibu-s${scopeCounter++}`;
   const attr = `data-${id}`;
-  const scopedCSS = css.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g, (match, selector, delimiter) => {
+  const safeCss = sanitizeCSS(css);
+  const scopedCSS = safeCss.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g, (match, selector, delimiter) => {
     const trimmed = selector.trim();
     if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
       return match;
@@ -1091,7 +1129,16 @@ function toast(options) {
       timers.delete(id);
     }
   }
-  return { toasts, show, dismiss, dismissAll };
+  return {
+    toasts,
+    show,
+    info: (message) => show(message, "info"),
+    success: (message) => show(message, "success"),
+    error: (message) => show(message, "error"),
+    warning: (message) => show(message, "warning"),
+    dismiss,
+    dismissAll
+  };
 }
 // src/ui/infiniteScroll.ts
@@ -1509,6 +1556,7 @@ function createGuard(validator) {
   bindAttrs,
   bindBoolAttr,
   bindData,
+  bindField,
   composable,
   compose,
   createGuard,

package/dist/ui.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, V as ValidatorFn, e as VirtualList, f as VirtualListProps, g as announce, h as aria, i as bindAttrs, j as bindBoolAttr, k as bindData, l as creditCardMask, m as custom, n as dateMask, o as defineElement, p as dialog, q as email, r as eventBus, s as focus, t as form, u as hotkey, v as infiniteScroll, w as inputMask, x as intersection, y as lazyLoad, z as matchesPattern, A as max, B as maxLength, D as min, E as minLength, G as pagination, H as phoneMask, J as removeScopedStyle, K as required, L as scopedStyle, N as ssnMask, O as svgElement, P as timeMask, Q as toast, R as withScopedStyle, S as zipMask } from './customElement-BKQfbSZQ.cjs';
+export { B as BoundFieldProps, C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, e as ToastInstance, V as ValidatorFn, f as VirtualList, g as VirtualListProps, h as announce, i as aria, j as bindAttrs, k as bindBoolAttr, l as bindData, m as bindField, n as creditCardMask, o as custom, p as dateMask, q as defineElement, r as dialog, s as email, t as eventBus, u as focus, v as form, w as hotkey, x as infiniteScroll, y as inputMask, z as intersection, A as lazyLoad, D as matchesPattern, E as max, G as maxLength, H as min, J as minLength, K as pagination, L as phoneMask, N as removeScopedStyle, O as required, P as scopedStyle, Q as ssnMask, R as svgElement, S as timeMask, U as toast, W as withScopedStyle, X as zipMask } from './customElement-yz8uyk-0.cjs';
 export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as composable, d as compose, e as createGuard, f as createSlots, g as defineComponent, h as defineSlottedComponent, i as defineStrictComponent, v as validateProps, j as validators, w as withBoundary, k as withDefaults, l as withProps, m as withWrapper } from './contracts-DOrhwbke.cjs';
 /**

package/dist/ui.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, V as ValidatorFn, e as VirtualList, f as VirtualListProps, g as announce, h as aria, i as bindAttrs, j as bindBoolAttr, k as bindData, l as creditCardMask, m as custom, n as dateMask, o as defineElement, p as dialog, q as email, r as eventBus, s as focus, t as form, u as hotkey, v as infiniteScroll, w as inputMask, x as intersection, y as lazyLoad, z as matchesPattern, A as max, B as maxLength, D as min, E as minLength, G as pagination, H as phoneMask, J as removeScopedStyle, K as required, L as scopedStyle, N as ssnMask, O as svgElement, P as timeMask, Q as toast, R as withScopedStyle, S as zipMask } from './customElement-BKQfbSZQ.js';
+export { B as BoundFieldProps, C as CustomElementOptions, F as FieldConfig, a as FocusTrap, b as FormConfig, c as FormField, d as FormReturn, I as IntersectionResult, M as MaskOptions, T as Toast, e as ToastInstance, V as ValidatorFn, f as VirtualList, g as VirtualListProps, h as announce, i as aria, j as bindAttrs, k as bindBoolAttr, l as bindData, m as bindField, n as creditCardMask, o as custom, p as dateMask, q as defineElement, r as dialog, s as email, t as eventBus, u as focus, v as form, w as hotkey, x as infiniteScroll, y as inputMask, z as intersection, A as lazyLoad, D as matchesPattern, E as max, G as maxLength, H as min, J as minLength, K as pagination, L as phoneMask, N as removeScopedStyle, O as required, P as scopedStyle, Q as ssnMask, R as svgElement, S as timeMask, U as toast, W as withScopedStyle, X as zipMask } from './customElement-yz8uyk-0.js';
 export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as composable, d as compose, e as createGuard, f as createSlots, g as defineComponent, h as defineSlottedComponent, i as defineStrictComponent, v as validateProps, j as validators, w as withBoundary, k as withDefaults, l as withProps, m as withWrapper } from './contracts-DOrhwbke.js';
 /**

package/dist/ui.js CHANGED Viewed

@@ -6,6 +6,7 @@ import {
   bindAttrs,
   bindBoolAttr,
   bindData,
+  bindField,
   creditCardMask,
   custom,
   dateMask,
@@ -36,7 +37,7 @@ import {
   toast,
   withScopedStyle,
   zipMask
-} from "./chunk-3CRQALYP.js";
+} from "./chunk-DKOHBI74.js";
 import {
   RenderProp,
   assertType,
@@ -106,6 +107,7 @@ export {
   bindAttrs,
   bindBoolAttr,
   bindData,
+  bindField,
   composable,
   compose,
   createGuard,

package/dist/widgets.cjs CHANGED Viewed

@@ -824,26 +824,75 @@ function fileUpload(options) {
 function contentEditable() {
   const [content, setContent] = signal("");
   const [isFocused, setFocused] = signal(false);
-  function execCommand(command, value) {
-    if (typeof document !== "undefined" && document.execCommand) {
-      document.execCommand(command, false, value ?? "");
+  function wrapSelection(tagName) {
+    if (typeof window === "undefined") return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const ancestor = range.commonAncestorContainer;
+    const existingWrap = findAncestorByTag(
+      ancestor instanceof HTMLElement ? ancestor : ancestor.parentElement,
+      tagName
+    );
+    let targetNode = null;
+    if (existingWrap) {
+      const parent = existingWrap.parentNode;
+      if (parent) {
+        const firstChild = existingWrap.firstChild;
+        const lastChild = existingWrap.lastChild;
+        while (existingWrap.firstChild) {
+          parent.insertBefore(existingWrap.firstChild, existingWrap);
+        }
+        parent.removeChild(existingWrap);
+        if (firstChild && lastChild) {
+          const newRange = document.createRange();
+          newRange.setStartBefore(firstChild);
+          newRange.setEndAfter(lastChild);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+          return;
+        }
+      }
+    } else {
+      const wrapper = document.createElement(tagName);
+      try {
+        range.surroundContents(wrapper);
+      } catch {
+        const fragment = range.extractContents();
+        wrapper.appendChild(fragment);
+        range.insertNode(wrapper);
+      }
+      targetNode = wrapper;
+    }
+    if (targetNode) {
+      selection.removeAllRanges();
+      const newRange = document.createRange();
+      newRange.selectNodeContents(targetNode);
+      selection.addRange(newRange);
+    }
+  }
+  function findAncestorByTag(el, tagName) {
+    const upper = tagName.toUpperCase();
+    while (el) {
+      if (el.tagName === upper) return el;
+      el = el.parentElement;
     }
+    return null;
   }
   function bold() {
-    execCommand("bold");
+    wrapSelection("strong");
   }
   function italic() {
-    execCommand("italic");
+    wrapSelection("em");
   }
   function underline() {
-    execCommand("underline");
+    wrapSelection("u");
   }
   return {
     content,
     setContent,
     isFocused,
     setFocused,
-    execCommand,
     bold,
     italic,
     underline