slexkit 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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/*"
@@ -81,7 +81,7 @@
   ],
   "scripts": {
     "dev": "bun run site/server.ts",
-    "build": "bun run build:core && bun run --filter @slexkit/streamdown build && bun run --filter @slexkit/obsidian build && bun run --filter @slexkit/mcp build",
+    "build": "bun run build:core && bun run --filter @slexkit/streamdown build && bun run --filter @slexkit/mcp build",
     "build:core": "bun run scripts/build-core.ts",
     "ai:docs": "bun run scripts/generate-ai-docs.ts",
     "version:sync": "bun run scripts/sync-version.ts",
@@ -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/",
@@ -119,6 +120,7 @@
     "flowbite": "^4.0.2",
     "flowbite-svelte": "^1.33.1",
     "katex": "^0.17.0",
+    "marked": "^18.0.5",
     "svelte": "^5.55.9",
     "svelte-highlight": "^7.9.0"
   },

package/skills/slexkit-host-integration/SKILL.md

@@ -21,7 +21,7 @@ Use this skill as `/host` when adding SlexKit to a host application or documenta
 
 - Vanilla host: `createSlexKitMarkdownRuntimeHost`.
 - React/Streamdown: `@slexkit/streamdown`.
-- Obsidian: `@slexkit/obsidian`, readonly fenced block rendering.
+- Obsidian: install the official SlexKit plugin from Obsidian Community Plugins; release repo `slexkit/obsidian-slexkit`.
 - Custom host: detect the `slex` code fence, pass source plus artifact id to the runtime host, dispose when the block is removed.
 
 ## Rules

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/display/Text.svelte

@@ -6,6 +6,19 @@
   let { props }: SvelteComponentProps = $props();
   let p = $state<PropValues>({});
   $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  const color = $derived(p.color == null || p.color === "" ? undefined : text(p.color));
+  const size = $derived(cssLength(p.size));
+
+  function cssLength(value: unknown): string | undefined {
+    if (value == null || value === "") return undefined;
+    const rendered = text(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
 </script>
 
-<div class={`slex-text${p.variant ? ` slex-text--${text(p.variant)}` : ""}${p.class ? ` ${text(p.class)}` : ""}`}>{text(p.content ?? p.text ?? p.label)}</div>
+<div
+  class={`slex-text${p.variant ? ` slex-text--${text(p.variant)}` : ""}${p.class ? ` ${text(p.class)}` : ""}`}
+  style:color={color}
+  style:font-size={size}
+>{text(p.content ?? p.text ?? p.label)}</div>

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/Checkbox.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <span class="slex-choice-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
-  <label class="slex-checkbox-field">
+  <label class="slex-checkbox-field" data-disabled={p.disabled ? "true" : undefined}>
     <input
       type="checkbox"
       class="slex-checkbox"

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

@@ -8,21 +8,6 @@
   import { parseEngineeringNumber } from "../../../engine/engineering";
   import type { PropValues, SvelteComponentProps } from "../types";
 
-  const engineeringPrefixFactors: Record<string, number> = {
-    p: 1e-12,
-    n: 1e-9,
-    u: 1e-6,
-    "\u00b5": 1e-6,
-    "\u788c": 1e-6,
-    m: 1e-3,
-    k: 1e3,
-    K: 1e3,
-    M: 1e6,
-    meg: 1e6,
-    G: 1e9,
-    T: 1e12,
-  };
-
   let { componentName, props, ctx }: SvelteComponentProps = $props();
   let p = $state<PropValues>({});
   let value = $state("");
@@ -35,8 +20,6 @@
   const readonly = $derived(bool(p.readonly) || bool(p.readOnly));
   const required = $derived(bool(p.required));
   const invalid = $derived(bool(p.invalid) || !!errorText);
-  const steppable = $derived(isSteppableInput());
-  const controls = $derived(steppable && p.controls !== false && p.controls !== "false");
   const componentId = $derived(safeId(componentName));
   const inputId = $derived(text(p.id) || (componentId ? `slex-input-${componentId}` : fallbackId));
   const descriptionId = $derived(`${inputId}-description`);
@@ -44,10 +27,6 @@
   const explicitAriaLabel = $derived(text(p["aria-label"] ?? p.ariaLabel));
   const computedAriaLabel = $derived(explicitAriaLabel || (labelText ? "" : text(p.placeholder)));
   const describedBy = $derived([descriptionText ? descriptionId : "", errorText ? errorId : ""].filter(Boolean).join(" "));
-  const numericValue = $derived(readNumericValue());
-  const controlLabel = $derived(labelText || text(p.placeholder) || componentName || "input");
-  const decrementDisabled = $derived(!canStep(-1));
-  const incrementDisabled = $derived(!canStep(1));
   $effect(() => bindPropStore(props, (next) => {
     p = next;
     value = text(next.value);
@@ -61,76 +40,6 @@
     return text(p.type, "text") === "engineering" ? "text" : text(p.type, "text");
   }
 
-  function isSteppableInput(): boolean {
-    const kind = text(p.type, "text");
-    return kind === "number" ||
-      kind === "engineering" ||
-      p.min !== undefined ||
-      p.max !== undefined ||
-      p.step !== undefined;
-  }
-
-  function numericProp(input: unknown): number | undefined {
-    if (input === undefined || input === null || input === "") return undefined;
-    const next = Number(input);
-    return Number.isFinite(next) ? next : undefined;
-  }
-
-  function stepSize(): number {
-    const next = numericProp(p.step);
-    if (next !== undefined && next > 0) return next;
-    if (text(p.type, "text") !== "engineering") return 1;
-    const parsed = parseEngineeringNumber(value);
-    if (!parsed.valid || !parsed.prefix) return 1;
-    return engineeringPrefixFactors[parsed.prefix] ?? 1;
-  }
-
-  function readNumericValue(): number | null {
-    if (text(p.type, "text") === "engineering") {
-      const parsed = parseEngineeringNumber(value);
-      return parsed.valid && parsed.number !== null ? parsed.number : null;
-    }
-    const next = Number(value);
-    return Number.isFinite(next) ? next : null;
-  }
-
-  function clamp(next: number): number {
-    const min = numericProp(p.min);
-    const max = numericProp(p.max);
-    let clamped = next;
-    if (min !== undefined) clamped = Math.max(min, clamped);
-    if (max !== undefined) clamped = Math.min(max, clamped);
-    return clamped;
-  }
-
-  function canStep(direction: -1 | 1): boolean {
-    if (!controls || disabled || readonly || numericValue === null) return false;
-    return clamp(numericValue + direction * stepSize()) !== numericValue;
-  }
-
-  function formatSteppedValue(next: number): string {
-    if (text(p.type, "text") !== "engineering") return text(next);
-    const parsed = parseEngineeringNumber(value);
-    if (!parsed.valid) return text(next);
-    const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
-    const visibleNumber = factor ? next / factor : next;
-    return `${formatNumber(visibleNumber)}${parsed.prefix}${parsed.unit}`;
-  }
-
-  function formatNumber(next: number): string {
-    return text(Number(next.toPrecision(12)));
-  }
-
-  function emitValue(nextValue: string): void {
-    value = nextValue;
-    emit(ctx, "change", text(p.type, "text") === "engineering" ? parseEngineeringNumber(value) : value);
-  }
-
-  function stepBy(direction: -1 | 1): void {
-    if (!canStep(direction) || numericValue === null) return;
-    emitValue(formatSteppedValue(clamp(numericValue + direction * stepSize())));
-  }
-
   function update(event: Event): void {
     if (disabled || readonly) return;
     value = (event.target as HTMLInputElement).value;
@@ -150,7 +59,6 @@
   <div
     class="slex-input-control"
     data-has-unit={unitText ? "true" : undefined}
-    data-has-controls={controls ? "true" : undefined}
   >
     <input
       id={inputId}
@@ -174,24 +82,6 @@
     {#if unitText}
       <span class="slex-input-unit" aria-hidden="true">{unitText}</span>
     {/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"
-          aria-label={`Increase ${controlLabel}`}
-          disabled={incrementDisabled}
-          onclick={() => stepBy(1)}
-        >+</button>
-      </span>
-    {/if}
   </div>
   {#if descriptionText}
     <div id={descriptionId} class="slex-input-description">{descriptionText}</div>

package/src/components/svelte/input/RadioGroup.svelte

@@ -49,7 +49,7 @@
     {@const disabled = !!item.disabled || !!p.disabled}
     {@const hapticKey = text(itemValue)}
     <span class="slex-choice-event-layer" onpointerdown={() => haptic(hapticKey, disabled, 8)} onclick={() => haptic(hapticKey, disabled, 8)}>
-      <label class="slex-radio-field">
+      <label class="slex-radio-field" data-disabled={disabled ? "true" : undefined}>
         <input
           type="radio"
           class="slex-radio"

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 {
@@ -34,7 +34,7 @@
 </script>
 
 <span class="slex-switch-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
-  <label class="slex-switch" data-state={enabled ? "on" : "off"}>
+  <label class="slex-switch" data-state={enabled ? "on" : "off"} data-disabled={p.disabled ? "true" : undefined}>
     <input
       type="checkbox"
       role="switch"

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}