slexkit 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Zero-build, Markdown-friendly reactive UI runtime for AI output.",
   "author": "SlexKit contributors",
   "type": "module",
@@ -16,7 +16,7 @@
   "module": "./dist/slexkit.js",
   "types": "./dist/types/index.d.ts",
   "bin": {
-    "slex": "./scripts/cli.mjs"
+    "slex": "scripts/cli.mjs"
   },
   "workspaces": [
     "packages/*"
@@ -92,6 +92,7 @@
     "copy-runtime": "node scripts/cli.mjs copy-runtime",
     "preview": "bun run site/server.ts",
     "smoke:release": "node scripts/release-smoke.mjs",
+    "smoke:registry": "node scripts/registry-smoke.mjs",
     "test": "bun test --conditions browser --isolate --preload ./tests/setup.ts tests packages",
     "test:watch": "bun test --conditions browser --isolate --watch --preload ./tests/setup.ts tests packages",
     "lint": "eslint src/",

package/src/components/svelte/content/Formula.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import katex from "katex";
+  import { bindPropStore } from "../bindProps";
+  import { bool, text } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  const tex = $derived(text(p.tex ?? p.formula ?? p.value));
+  const displayMode = $derived(p.displayMode === undefined && p.display === undefined && p.block === undefined
+    ? true
+    : bool(p.displayMode ?? p.display ?? p.block));
+  const rendered = $derived(renderFormula(tex, displayMode));
+
+  function renderFormula(source: string, display: boolean): string {
+    return katex.renderToString(source || "\\,", {
+      displayMode: display,
+      throwOnError: false,
+      strict: "ignore",
+      output: "htmlAndMathml",
+    });
+  }
+</script>
+
+<div class="slex-formula" data-display={displayMode ? "block" : "inline"}>{@html rendered}</div>

package/src/components/svelte/content/Table.svelte

@@ -31,7 +31,7 @@
       {#each rows(p.rows ?? p.items) as row}
         <tr>
           {#if readColumns(p.columns).length}
-            {#each readColumns(p.columns) as column}<td>{readCell(row, column)}</td>{/each}
+            {#each readColumns(p.columns) as column, index}<td>{readCell(row, column, index)}</td>{/each}
           {:else if Array.isArray(row)}
             {#each row as cell}<td>{text(cell)}</td>{/each}
           {:else}

package/src/components/svelte/helpers.ts

@@ -76,7 +76,8 @@ export function readColumnLabel(column: unknown, fallback: string): string {
   return text(column, fallback);
 }
 
-export function readCell(row: unknown, column: string): string {
+export function readCell(row: unknown, column: string, index?: number): string {
+  if (Array.isArray(row)) return text(typeof index === "number" ? row[index] : undefined);
   if (row && typeof row === "object") return text((row as Record<string, unknown>)[column]);
   return text(row);
 }
@@ -105,6 +106,7 @@ export function catalogGroups(value: unknown): Array<{ label: string; items: Rec
 
 export function renderChildren(node: HTMLElement, ctx: RenderContext) {
   if (ctx.children && Object.keys(ctx.children).length > 0) {
+    node.replaceChildren();
     ctx.renderTree(ctx.children, node, ctx.forCtx);
   }
   return {
@@ -118,6 +120,59 @@ export function emit(ctx: RenderContext, event: string, data?: unknown): void {
   ctx.emit(event, data);
 }
 
+export type ScheduledFrame = {
+  kind: "api" | "native" | "microtask";
+  id?: unknown;
+  canceled: boolean;
+};
+
+export function scheduleFrame(ctx: RenderContext, fn: (time?: number) => void): ScheduledFrame {
+  const handle: ScheduledFrame = { kind: "microtask", canceled: false };
+  const run = (time?: number) => {
+    if (!handle.canceled) fn(time);
+  };
+  const apiRaf = ctx.api?.raf;
+  if (typeof apiRaf === "function") {
+    try {
+      handle.kind = "api";
+      handle.id = apiRaf(run);
+      return handle;
+    } catch {
+      handle.kind = "microtask";
+      handle.id = undefined;
+    }
+  }
+
+  const ownerWindow = ctx.document.defaultView;
+  if (ownerWindow && typeof ownerWindow.requestAnimationFrame === "function") {
+    try {
+      handle.kind = "native";
+      handle.id = ownerWindow.requestAnimationFrame(run);
+      return handle;
+    } catch {
+      handle.kind = "microtask";
+      handle.id = undefined;
+    }
+  }
+
+  queueMicrotask(() => run());
+  return handle;
+}
+
+export function cancelScheduledFrame(ctx: RenderContext, handle: ScheduledFrame | undefined): void {
+  if (!handle || handle.canceled) return;
+  handle.canceled = true;
+  if (handle.kind === "api" && typeof ctx.api?.cancelRaf === "function") {
+    try {
+      ctx.api.cancelRaf(handle.id);
+    } catch {
+      // The runtime may already be disposed; cancellation is best effort.
+    }
+  } else if (handle.kind === "native" && typeof handle.id === "number") {
+    ctx.document.defaultView?.cancelAnimationFrame(handle.id);
+  }
+}
+
 function formatScriptKey(key: string): string {
   return /^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key);
 }

package/src/components/svelte/input/Input.svelte

@@ -176,13 +176,6 @@
     {/if}
     {#if controls}
       <span class="slex-input-controls">
-        <button
-          class="slex-input-step"
-          type="button"
-          aria-label={`Decrease ${controlLabel}`}
-          disabled={decrementDisabled}
-          onclick={() => stepBy(-1)}
-        >-</button>
         <button
           class="slex-input-step"
           type="button"
@@ -190,6 +183,13 @@
           disabled={incrementDisabled}
           onclick={() => stepBy(1)}
         >+</button>
+        <button
+          class="slex-input-step"
+          type="button"
+          aria-label={`Decrease ${controlLabel}`}
+          disabled={decrementDisabled}
+          onclick={() => stepBy(-1)}
+        >-</button>
       </span>
     {/if}
   </div>

package/src/components/svelte/input/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { bindPropStore } from "../bindProps";
-  import { emit, label, list, text } from "../helpers";
+  import { emit, label, list, scheduleFrame, text } from "../helpers";
   import InlineIcon from "../InlineIcon.svelte";
   import type { PropValues, SvelteComponentProps } from "../types";
 
@@ -97,7 +97,7 @@
   function close(focusTrigger = true): void {
     open = false;
     activeIndex = selectedIndex();
-    if (focusTrigger) requestAnimationFrame(() => triggerEl?.focus());
+    if (focusTrigger) scheduleFrame(ctx, () => triggerEl?.focus());
   }
 
   function toggle(): void {

package/src/components/svelte/input/Switch.svelte

@@ -10,7 +10,7 @@
   let lastHapticAt = 0;
   $effect(() => bindPropStore(props, (next) => {
     p = next;
-    enabled = !!next.enabled;
+    enabled = !!(next.enabled ?? next.checked ?? next.value);
   }));
 
   function toggle(event: Event): void {

package/src/components/svelte/input/Tabs.svelte

@@ -2,7 +2,7 @@
   import FlowbiteTabs from "../../../../node_modules/flowbite-svelte/dist/tabs/Tabs.svelte";
   import FlowbiteTabItem from "../../../../node_modules/flowbite-svelte/dist/tabs/TabItem.svelte";
   import { bindPropStore } from "../bindProps";
-  import { emit, list, text } from "../helpers";
+  import { cancelScheduledFrame, emit, list, scheduleFrame, text, type ScheduledFrame } from "../helpers";
   import InlineIcon from "../InlineIcon.svelte";
   import type { PropValues, SvelteComponentProps } from "../types";
 
@@ -55,14 +55,14 @@
   }
 
   function annotateTabs(node: HTMLElement) {
-    let raf: number | undefined;
+    let frame: ScheduledFrame | undefined;
     let resizeObserver: ResizeObserver | undefined;
     let indicatorReady = false;
 
     function scheduleIndicatorUpdate(list: HTMLElement, selectedTrigger: HTMLElement | undefined) {
-      if (raf !== undefined) cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        raf = undefined;
+      cancelScheduledFrame(ctx, frame);
+      frame = scheduleFrame(ctx, () => {
+        frame = undefined;
         if (!selectedTrigger) {
           list.style.setProperty("--slex-tabs-indicator-opacity", "0");
           return;
@@ -96,7 +96,7 @@
         list.style.setProperty("--slex-tabs-indicator-opacity", "1");
         if (!indicatorReady) {
           indicatorReady = true;
-          requestAnimationFrame(() => {
+          scheduleFrame(ctx, () => {
             list.dataset.indicatorReady = "true";
           });
         }
@@ -137,7 +137,7 @@
         apply();
       },
       destroy() {
-        if (raf !== undefined) cancelAnimationFrame(raf);
+        cancelScheduledFrame(ctx, frame);
         resizeObserver?.disconnect();
       },
     };

package/src/components/svelte/tooling/PlaygroundMarkdown.svelte

@@ -15,10 +15,92 @@
     inlineKatex: KatexRenderer,
     blockKatex: KatexRenderer,
   };
+  const options = { headerIds: false };
+
+  function stripFrontmatter(value: string) {
+    const raw = String(value ?? "").replace(/^\uFEFF/, "").replace(/\r\n/g, "\n");
+    if (!raw.startsWith("---")) return raw;
+
+    const end = raw.indexOf("\n---", 3);
+    if (end === -1) return raw;
+
+    const closeEnd = raw.indexOf("\n", end + 1);
+    return raw.slice(closeEnd === -1 ? raw.length : closeEnd + 1).trimStart();
+  }
+
+  function escapeHtml(value: string) {
+    return String(value)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function stripInlineMarkdown(value: string) {
+    return String(value)
+      .replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "")
+      .replace(/`([^`]+)`/g, "$1")
+      .replace(/\*\*([^*]+)\*\*/g, "$1")
+      .replace(/\*([^*]+)\*/g, "$1")
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+      .replace(/<[^>]+>/g, "")
+      .replace(/\s+#+\s*$/, "")
+      .trim();
+  }
+
+  function slugText(value: string) {
+    const slug = String(value)
+      .toLowerCase()
+      .replace(/[`"'\u2018\u2019\u201c\u201d]/g, "")
+      .replace(/[^a-z0-9\u4e00-\u9fa5]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+    return slug || "section";
+  }
+
+  function createHeadingIdGenerator() {
+    const counts = new Map<string, number>();
+    return (rawTitle: string) => {
+      const explicit = rawTitle.match(/\s+\{#([A-Za-z0-9_-]+)\}\s*$/)?.[1] ?? "";
+      const base = explicit || slugText(stripInlineMarkdown(rawTitle));
+      const count = counts.get(base) ?? 0;
+      counts.set(base, count + 1);
+      return count ? `${base}-${count + 1}` : base;
+    };
+  }
+
+  function normalizeHeadingAnchors(markdown: string) {
+    const nextId = createHeadingIdGenerator();
+    let fence: { char: string; length: number } | null = null;
+
+    return String(markdown ?? "")
+      .split(/\n/)
+      .map((line) => {
+        const marker = String(line).match(/^[ \t]{0,3}(`{3,}|~{3,})/);
+        if (fence) {
+          if (marker && marker[1][0] === fence.char && marker[1].length >= fence.length) fence = null;
+          return line;
+        }
+        if (marker) {
+          fence = { char: marker[1][0], length: marker[1].length };
+          return line;
+        }
+
+        const heading = String(line).match(/^(#{1,6})[ \t]+(.+)$/);
+        if (!heading) return line;
+        const rawTitle = heading[2].replace(/\s+#+\s*$/, "");
+        const renderedTitle = rawTitle.replace(/\s+\{#[A-Za-z0-9_-]+\}\s*$/, "").trim();
+        return `<span id="${escapeHtml(nextId(rawTitle))}" class="slex-doc-heading-anchor"></span>\n${heading[1]} ${renderedTitle}`;
+      })
+      .join("\n");
+  }
+
+  function previewMarkdown(value: string) {
+    return normalizeHeadingAnchors(stripFrontmatter(value));
+  }
 </script>
 
-<div class="slex-doc-streamdown">
-  <SvelteMarkdown source={content} {extensions} {renderers}>
+<div class="slex-doc-prose slex-doc-streamdown">
+  <SvelteMarkdown source={previewMarkdown(content)} {extensions} {renderers} {options}>
     {#snippet code({ lang, text })}
       <PlaygroundSlexCode {lang} {text} {domain} />
     {/snippet}

package/src/styles/components/button.css

@@ -1,104 +1,104 @@
-.slex-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  max-width: 100%;
-  min-width: 0;
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-radius: var(--radius);
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-  transition:
-    background 150ms ease,
-    border-color 150ms ease,
-    color 150ms ease,
-    box-shadow 150ms ease,
-    transform 150ms ease;
-}
-
-.slex-button--primary {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--primary);
-}
-
-.slex-button--primary:hover:not(:disabled):not(.slex-button--disabled) {
-  background: color-mix(in oklab, var(--primary) 90%, transparent);
-  border-color: color-mix(in oklab, var(--primary) 90%, transparent);
-  color: var(--primary-foreground);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.slex-button--secondary {
-  background: var(--secondary);
-  color: var(--secondary-foreground);
-  border-color: var(--border);
-}
-
-.slex-button--secondary:hover:not(:disabled):not(.slex-button--disabled) {
-  background: var(--accent);
-  color: var(--accent-foreground);
-  border-color: var(--border);
-}
-
-.slex-button--danger {
-  background: var(--destructive);
-  color: var(--destructive-foreground);
-  border-color: var(--destructive);
-}
-
-.slex-button--danger:hover:not(:disabled):not(.slex-button--disabled) {
-  background: color-mix(in oklab, var(--destructive) 90%, transparent);
-  border-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-}
-
-.slex-button--ghost {
-  background: transparent;
-  color: var(--muted-foreground);
-  border-color: transparent;
-}
-
-.slex-button--ghost:hover:not(:disabled):not(.slex-button--disabled) {
-  background: var(--accent);
-  color: var(--accent-foreground);
-}
-
-.slex-button:disabled,
-.slex-button[disabled],
-.slex-button--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-  transform: none;
-  box-shadow: none;
-}
-
-.slex-button:active:not(:disabled):not(.slex-button--disabled) {
-  transform: translateY(0);
-  box-shadow: var(--shadow-sm);
-}
-
-.slex-button:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: 2px;
-}
-
-.slex-button--icon {
-  width: var(--slex-control-height, 2.25rem);
-  min-height: var(--slex-control-height, 2.25rem);
-  padding-inline: 0;
-}
-
+.slex-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.slex-button--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
+.slex-button--primary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--primary) 90%, transparent);
+  border-color: color-mix(in oklab, var(--primary) 90%, transparent);
+  color: var(--primary-foreground);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.slex-button--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--secondary:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+  border-color: var(--border);
+}
+
+.slex-button--danger {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+  border-color: var(--destructive);
+}
+
+.slex-button--danger:hover:not(:disabled):not(.slex-button--disabled) {
+  background: color-mix(in oklab, var(--destructive) 90%, transparent);
+  border-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+}
+
+.slex-button--ghost {
+  background: transparent;
+  color: var(--muted-foreground);
+  border-color: transparent;
+}
+
+.slex-button--ghost:hover:not(:disabled):not(.slex-button--disabled) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.slex-button:disabled,
+.slex-button[disabled],
+.slex-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+  box-shadow: none;
+}
+
+.slex-button:active:not(:disabled):not(.slex-button--disabled) {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.slex-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slex-button--icon {
+  width: var(--slex-control-height, 2.25rem);
+  min-height: var(--slex-control-height, 2.25rem);
+  padding-inline: 0;
+}
+
 .slex-button-icon {
   display: inline-flex;
   width: 1.125rem;