@texuli/blocks 0.0.0-stage → 0.1.0-next.0

package/dist/embed/schema.js

@@ -0,0 +1,217 @@
+import { safeHref } from '@texuli/core/url-policy';
+import { hasUnsafeText } from "../core/safety.js";
+import { fail, ok, parseBlockBase, parsePlainText } from "../core/schema/primitives.js";
+export const EMBED_BLOCK_TYPES = ['embed-app', 'link-preview'];
+export const EMBED_APP_MAX_BYTES = 2_400;
+const EMBED_APP_MAX_DEPTH = 12;
+const EMBED_APP_MAX_NODES = 2_000;
+function plainRecord(value, path) {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return fail(path, 'Expected a plain object');
+    }
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && prototype !== null) {
+        return fail(path, 'Object data must be plain JSON');
+    }
+    return ok(value);
+}
+function cloneJson(value, path, depth, ancestors, budget) {
+    budget.nodes += 1;
+    if (budget.nodes > EMBED_APP_MAX_NODES)
+        return fail(path, 'Embedded app has too many values');
+    if (depth > EMBED_APP_MAX_DEPTH)
+        return fail(path, 'Embedded app data is nested too deeply');
+    if (value === null || typeof value === 'boolean')
+        return ok(value);
+    if (typeof value === 'string') {
+        return hasUnsafeText(value, true, true)
+            ? fail(path, 'Embedded app text contains unsafe characters')
+            : ok(value);
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? ok(value) : fail(path, 'Embedded app numbers must be finite');
+    }
+    if (typeof value !== 'object')
+        return fail(path, 'Embedded app must contain only JSON values');
+    if (ancestors.has(value))
+        return fail(path, 'Embedded app data must not contain cycles');
+    ancestors.add(value);
+    if (Array.isArray(value)) {
+        const output = [];
+        for (let index = 0; index < value.length; index += 1) {
+            const descriptor = Object.getOwnPropertyDescriptor(value, String(index));
+            if (!descriptor || !('value' in descriptor)) {
+                ancestors.delete(value);
+                return fail([...path, index], 'Embedded app arrays must contain plain values');
+            }
+            const child = cloneJson(descriptor.value, [...path, index], depth + 1, ancestors, budget);
+            if (!child.success) {
+                ancestors.delete(value);
+                return child;
+            }
+            output.push(child.data);
+        }
+        const extraKeys = Reflect.ownKeys(value).filter((key) => {
+            if (key === 'length')
+                return false;
+            if (typeof key !== 'string' || !/^\d+$/.test(key))
+                return true;
+            const index = Number(key);
+            return String(index) !== key || index >= value.length;
+        });
+        ancestors.delete(value);
+        return extraKeys.length === 0
+            ? ok(output)
+            : fail(path, 'Embedded app arrays cannot have extra properties');
+    }
+    const record = plainRecord(value, path);
+    if (!record.success) {
+        ancestors.delete(value);
+        return record;
+    }
+    const output = {};
+    for (const key of Reflect.ownKeys(record.data)) {
+        if (typeof key !== 'string' ||
+            key === '__proto__' ||
+            key === 'constructor' ||
+            key === 'prototype') {
+            ancestors.delete(value);
+            return fail([...path, String(key)], 'Embedded app object has an unsafe key');
+        }
+        const descriptor = Object.getOwnPropertyDescriptor(record.data, key);
+        if (!descriptor?.enumerable || !('value' in descriptor)) {
+            ancestors.delete(value);
+            return fail([...path, key], 'Embedded app objects must contain plain data properties');
+        }
+        const child = cloneJson(descriptor.value, [...path, key], depth + 1, ancestors, budget);
+        if (!child.success) {
+            ancestors.delete(value);
+            return child;
+        }
+        output[key] = child.data;
+    }
+    ancestors.delete(value);
+    return ok(output);
+}
+function parseEmbedApp(record, base) {
+    const title = parsePlainText(record.title, ['title'], 80);
+    if (!title.success)
+        return title;
+    let startLabel;
+    if (record.startLabel !== undefined) {
+        const result = parsePlainText(record.startLabel, ['startLabel'], 40);
+        if (!result.success)
+            return result;
+        startLabel = result.data;
+    }
+    if (record.height !== undefined &&
+        record.height !== 'sm' &&
+        record.height !== 'md' &&
+        record.height !== 'lg') {
+        return fail(['height'], 'height must be sm, md or lg');
+    }
+    const app = cloneJson(record.app, ['app'], 1, new WeakSet(), { nodes: 0 });
+    if (!app.success)
+        return app;
+    const appRecord = plainRecord(app.data, ['app']);
+    if (!appRecord.success)
+        return appRecord;
+    if (appRecord.data.kind !== undefined && appRecord.data.kind !== 'app') {
+        return fail(['app', 'kind'], 'Only app blueprints can be embedded');
+    }
+    let serialized;
+    try {
+        serialized = JSON.stringify(appRecord.data);
+    }
+    catch {
+        return fail(['app'], 'Embedded app could not be serialized as JSON');
+    }
+    if (new TextEncoder().encode(serialized).byteLength > EMBED_APP_MAX_BYTES) {
+        return fail(['app'], `Embedded app JSON must be at most ${EMBED_APP_MAX_BYTES} bytes`);
+    }
+    if (containsNestedEmbed(appRecord.data)) {
+        return fail(['app'], 'An embedded app cannot contain another embed-app block');
+    }
+    return ok({
+        ...base,
+        type: 'embed-app',
+        title: title.data,
+        ...(startLabel === undefined ? {} : { startLabel }),
+        ...(record.height === undefined ? {} : { height: record.height }),
+        app: appRecord.data,
+    });
+}
+function containsNestedEmbed(value) {
+    if (Array.isArray(value))
+        return value.some(containsNestedEmbed);
+    if (value === null || typeof value !== 'object')
+        return false;
+    const record = value;
+    return record.type === 'embed-app' || Object.values(record).some(containsNestedEmbed);
+}
+function parseLinkPreview(record, base) {
+    if (typeof record.href !== 'string' ||
+        record.href.length > 2_048 ||
+        hasUnsafeText(record.href, false, false)) {
+        return fail(['href'], 'href must be a URL of at most 2048 characters');
+    }
+    const href = safeHref(record.href, 'untrusted');
+    if (!href)
+        return fail(['href'], 'link previews require a safe HTTPS URL');
+    let url;
+    try {
+        url = new URL(href);
+    }
+    catch {
+        return fail(['href'], 'link previews require an absolute HTTPS URL');
+    }
+    if (url.protocol !== 'https:' || url.username !== '' || url.password !== '') {
+        return fail(['href'], 'link previews require HTTPS without embedded credentials');
+    }
+    const title = parsePlainText(record.title, ['title'], 120);
+    if (!title.success)
+        return title;
+    let description;
+    if (record.description !== undefined) {
+        const parsed = parsePlainText(record.description, ['description'], 240);
+        if (!parsed.success)
+            return parsed;
+        description = parsed.data;
+    }
+    let site;
+    if (record.site !== undefined) {
+        const parsed = parsePlainText(record.site, ['site'], 80);
+        if (!parsed.success)
+            return parsed;
+        site = parsed.data;
+    }
+    return ok({
+        ...base,
+        type: 'link-preview',
+        href,
+        title: title.data,
+        ...(description === undefined ? {} : { description }),
+        ...(site === undefined ? {} : { site }),
+    });
+}
+/** Validate a link preview or app frame block before exposing it to a renderer. */
+export function safeParseEmbedBlock(value) {
+    const object = plainRecord(value, []);
+    if (!object.success)
+        return object;
+    const record = object.data;
+    if (record.type !== 'embed-app' && record.type !== 'link-preview') {
+        return fail(['type'], 'Expected embed-app or link-preview');
+    }
+    const base = parseBlockBase(record, []);
+    if (!base.success)
+        return base;
+    return record.type === 'embed-app'
+        ? parseEmbedApp(record, base.data)
+        : parseLinkPreview(record, base.data);
+}
+/** Renderer-facing validation result, with untrusted values kept inert on failure. */
+export function checkEmbedBlock(value) {
+    const result = safeParseEmbedBlock(value);
+    return result.success ? { ok: true, block: result.data } : { ok: false, issues: result.issues };
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="./css-modules.d.ts" />
+/**
+ * `@texuli/blocks` — content blocks for pages, documents and slides.
+ * Core engine (schemas, limits, untrusted guard, formula, catalog) lives in
+ * `./core`. UI families land in later PLAN_001 tasks.
+ */
+export { CODE_BLOCK_TYPES, type CodeBlockCheck, type CodeBlockLabelOverrides, type CodeBlockLabels, type CodeBlockViewProps, type CodeFamilyBlock, type CodeFamilyBlockType, checkCodeBlock, isCodeFamilyBlock, loadCodeFamily, } from './code/index.js';
+export * from './core/index.js';
+export { checkDataBlock, DATA_BLOCK_TYPES, type DataBlockCheck, type DataBlockLabelOverrides, type DataBlockLabels, type DataBlockViewProps, type DataFamilyBlock, type DataFamilyBlockType, isDataFamilyBlock, loadDataFamily, } from './data/index.js';
+export { DIAGRAM_BLOCK_TYPES, type Diagram, type DiagramBlockViewProps, type DiagramFamilyBlock, type DiagramType, isDiagramFamilyBlock, isDiagramFamilyType, loadDiagramFamily, parseDiagram, } from './diagram/index.js';
+export { checkEmbedBlock, EMBED_APP_MAX_BYTES, EMBED_BLOCK_TYPES, type EmbedAppBlock, type EmbedBlock, type EmbedBlockCheck, type EmbedBlockLabels, type EmbedBlockViewProps, type EmbedFamilyBlock, type EmbedFamilyBlockType, type EmbedMountCleanup, type EmbedMountResult, type EmbedParseResult, type LinkPreviewBlock, loadEmbedFamily, safeParseEmbedBlock, } from './embed/index.js';
+export { type CalculatorBlock, type ChecklistBlock, checkInteractiveBlock, evaluateCalculator, INTERACTIVE_BLOCK_TYPES, type InteractiveBlock, type InteractiveBlockCheck, type InteractiveBlockLabelOverrides, type InteractiveBlockLabels, type InteractiveBlockViewProps, type InteractiveFamilyBlock, type InteractiveFamilyBlockType, isInteractiveFamilyBlock, loadInteractiveFamily, type PollBlock, parseInteractiveBlock, type QuizBlock, } from './interactive/index.js';
+export { checkMapBlock, isMapBlock, loadMapFamily, MAP_BASEMAPS, MAP_BLOCK_TYPES, MAP_LIMITS, type MapBasemapId, type MapBlock, type MapBlockCheck, type MapBlockLabelOverrides, type MapBlockLabels, type MapBlockViewProps, type MapPoint, parseMapBlock, } from './map/index.js';
+export { checkMediaBlock, isMediaFamilyBlock, loadMediaFamily, MEDIA_BLOCK_TYPES, type MediaBlockCheck, type MediaBlockLabelOverrides, type MediaBlockLabels, type MediaBlockViewProps, type MediaFamilyBlock, type MediaFamilyBlockType, } from './media/index.js';
+export { checkStructureBlock, isStructureFamilyBlock, loadStructureFamily, STRUCTURE_BLOCK_TYPES, type StructureBlockCheck, type StructureBlockLabelOverrides, type StructureBlockLabels, type StructureBlockViewProps, type StructureFamilyBlock, type StructureFamilyBlockType, } from './structure/index.js';
+export { checkTextBlock, isTextFamilyBlock, loadTextFamily, TEXT_BLOCK_TYPES, type TextBlockCheck, type TextBlockLabelOverrides, type TextBlockLabels, type TextBlockViewProps, type TextFamilyBlock, type TextFamilyBlockType, } from './text/index.js';

package/dist/index.js

@@ -0,0 +1,15 @@
+/**
+ * `@texuli/blocks` — content blocks for pages, documents and slides.
+ * Core engine (schemas, limits, untrusted guard, formula, catalog) lives in
+ * `./core`. UI families land in later PLAN_001 tasks.
+ */
+export { CODE_BLOCK_TYPES, checkCodeBlock, isCodeFamilyBlock, loadCodeFamily, } from "./code/index.js";
+export * from "./core/index.js";
+export { checkDataBlock, DATA_BLOCK_TYPES, isDataFamilyBlock, loadDataFamily, } from "./data/index.js";
+export { DIAGRAM_BLOCK_TYPES, isDiagramFamilyBlock, isDiagramFamilyType, loadDiagramFamily, parseDiagram, } from "./diagram/index.js";
+export { checkEmbedBlock, EMBED_APP_MAX_BYTES, EMBED_BLOCK_TYPES, loadEmbedFamily, safeParseEmbedBlock, } from "./embed/index.js";
+export { checkInteractiveBlock, evaluateCalculator, INTERACTIVE_BLOCK_TYPES, isInteractiveFamilyBlock, loadInteractiveFamily, parseInteractiveBlock, } from "./interactive/index.js";
+export { checkMapBlock, isMapBlock, loadMapFamily, MAP_BASEMAPS, MAP_BLOCK_TYPES, MAP_LIMITS, parseMapBlock, } from "./map/index.js";
+export { checkMediaBlock, isMediaFamilyBlock, loadMediaFamily, MEDIA_BLOCK_TYPES, } from "./media/index.js";
+export { checkStructureBlock, isStructureFamilyBlock, loadStructureFamily, STRUCTURE_BLOCK_TYPES, } from "./structure/index.js";
+export { checkTextBlock, isTextFamilyBlock, loadTextFamily, TEXT_BLOCK_TYPES, } from "./text/index.js";

package/dist/interactive/CalculatorBlock.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+import type { InteractiveBlockLabels } from './labels.js';
+import { type CalculatorBlock, evaluateCalculator } from './schema.js';
+
+let {
+  block,
+  labels,
+}: {
+  block: CalculatorBlock;
+  labels: InteractiveBlockLabels;
+} = $props();
+
+let values = $state<Record<string, number | null>>({});
+let seeded = false;
+$effect.pre(() => {
+  if (seeded) return;
+  values = Object.fromEntries(
+    block.inputs.map((input) => [input.name, input.default ?? input.min ?? 0])
+  );
+  seeded = true;
+});
+
+const evaluation = $derived(evaluateCalculator(block, values));
+
+function onInput(name: string, event: Event): void {
+  const raw = (event.currentTarget as HTMLInputElement).value;
+  const n = Number(raw);
+  values = { ...values, [name]: Number.isFinite(n) ? n : null };
+}
+</script>
+
+<div class="tx-block-interactive" data-tx-block="calculator" data-tone={block.tone}>
+  {#if block.title}
+    <h3 class="tx-block-interactive__title">{block.title}</h3>
+  {/if}
+  {#if block.description}
+    <p class="tx-block-interactive__prompt">{block.description}</p>
+  {/if}
+
+  <div class="tx-block-interactive__inputs">
+    {#each block.inputs as input (input.name)}
+      <label class="tx-block-interactive__field">
+        <span>{input.label}</span>
+        <input
+          type="number"
+          name={input.name}
+          value={values[input.name] ?? ''}
+          min={input.min}
+          max={input.max}
+          step={input.step ?? 'any'}
+          oninput={(event) => onInput(input.name, event)}
+        />
+      </label>
+    {/each}
+  </div>
+
+  <p class="tx-block-interactive__result" aria-live="polite" data-tx-calculator-result>
+    {block.outputLabel ?? labels.calculatorResult}:
+    {evaluation.ok ? evaluation.formatted : evaluation.message}
+  </p>
+</div>

package/dist/interactive/CalculatorBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+import type { InteractiveBlockLabels } from './labels.js';
+import { type CalculatorBlock } from './schema.js';
+type $$ComponentProps = {
+    block: CalculatorBlock;
+    labels: InteractiveBlockLabels;
+};
+declare const CalculatorBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalculatorBlock = ReturnType<typeof CalculatorBlock>;
+export default CalculatorBlock;

package/dist/interactive/ChecklistBlock.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { Checkbox } from 'texuli/choice';
+import type { InteractiveBlockLabels } from './labels.js';
+import type { ChecklistBlock } from './schema.js';
+
+let {
+  block,
+  labels,
+}: {
+  block: ChecklistBlock;
+  labels: InteractiveBlockLabels;
+} = $props();
+
+let done = $state<Record<string, boolean>>({});
+let seeded = false;
+$effect.pre(() => {
+  if (seeded) return;
+  done = Object.fromEntries(block.items.map((item) => [item.id, item.done === true]));
+  seeded = true;
+});
+
+const completed = $derived(Object.values(done).filter(Boolean).length);
+const total = $derived(block.items.length);
+</script>
+
+<div class="tx-block-interactive" data-tx-block="checklist" data-tone={block.tone}>
+  {#if block.title}
+    <h3 class="tx-block-interactive__title">{block.title}</h3>
+  {/if}
+  <p class="tx-block-interactive__prompt" aria-live="polite">
+    {labels.checklistProgress}: {completed} / {total}
+  </p>
+  <div class="tx-block-interactive__options" role="group" aria-label={block.title ?? 'Checklist'}>
+    {#each block.items as item (item.id)}
+      <Checkbox
+        checked={done[item.id] === true}
+        label={item.label}
+        onCheckedChange={(next) => {
+          done = { ...done, [item.id]: next };
+        }}
+      />
+    {/each}
+  </div>
+</div>

package/dist/interactive/ChecklistBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+import type { InteractiveBlockLabels } from './labels.js';
+import type { ChecklistBlock } from './schema.js';
+type $$ComponentProps = {
+    block: ChecklistBlock;
+    labels: InteractiveBlockLabels;
+};
+declare const ChecklistBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChecklistBlock = ReturnType<typeof ChecklistBlock>;
+export default ChecklistBlock;

package/dist/interactive/InteractiveBlockView.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import CalculatorBlockView from './CalculatorBlock.svelte';
+import ChecklistBlockView from './ChecklistBlock.svelte';
+import { checkInteractiveBlock } from './check.js';
+import type { InteractiveBlockViewProps } from './family.js';
+import { resolveInteractiveBlockLabels } from './labels.js';
+import PollBlockView from './PollBlock.svelte';
+import QuizBlockView from './QuizBlock.svelte';
+import './interactive.css';
+
+let { block, labels, oninvalid }: InteractiveBlockViewProps = $props();
+
+const check = $derived(checkInteractiveBlock(block));
+const text = $derived(resolveInteractiveBlockLabels(labels));
+
+$effect(() => {
+  if (!check.ok) oninvalid?.(check.issues);
+});
+</script>
+
+{#if !check.ok}
+  <p class="tx-block tx-block-invalid" role="note" data-tx-block="invalid">{text.invalid}</p>
+{:else if check.block.type === 'poll'}
+  <PollBlockView block={check.block} labels={text} />
+{:else if check.block.type === 'quiz'}
+  <QuizBlockView block={check.block} labels={text} />
+{:else if check.block.type === 'calculator'}
+  <CalculatorBlockView block={check.block} labels={text} />
+{:else if check.block.type === 'checklist'}
+  <ChecklistBlockView block={check.block} labels={text} />
+{/if}

package/dist/interactive/InteractiveBlockView.svelte.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="../css-modules.d.ts" />
+import type { InteractiveBlockViewProps } from './family.js';
+declare const InteractiveBlockView: import("svelte").Component<InteractiveBlockViewProps, {}, "">;
+type InteractiveBlockView = ReturnType<typeof InteractiveBlockView>;
+export default InteractiveBlockView;

package/dist/interactive/PollBlock.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { Button } from 'texuli/button';
+import { Checkbox, RadioGroup } from 'texuli/choice';
+import type { InteractiveBlockLabels } from './labels.js';
+import type { PollBlock } from './schema.js';
+
+let {
+  block,
+  labels,
+}: {
+  block: PollBlock;
+  labels: InteractiveBlockLabels;
+} = $props();
+
+let selected = $state<string[]>([]);
+let radioValue = $state('');
+let submitted = $state(false);
+
+const multi = $derived(block.allowMultiple === true);
+const qId = $derived(`${block.id ?? 'poll'}-q`);
+
+function toggle(id: string, next: boolean): void {
+  if (submitted) return;
+  if (next) {
+    if (!selected.includes(id)) selected = [...selected, id];
+  } else {
+    selected = selected.filter((x) => x !== id);
+  }
+}
+
+function submit(): void {
+  if (multi) {
+    if (selected.length === 0) return;
+  } else {
+    if (!radioValue) return;
+    selected = [radioValue];
+  }
+  submitted = true;
+}
+
+function reset(): void {
+  selected = [];
+  radioValue = '';
+  submitted = false;
+}
+
+const counts = $derived.by(() => {
+  const map = Object.fromEntries(block.options.map((o) => [o.id, 0])) as Record<string, number>;
+  if (submitted) {
+    for (const id of selected) {
+      if (map[id] !== undefined) map[id] += 1;
+    }
+  }
+  return map;
+});
+
+const total = $derived(submitted ? Math.max(1, selected.length) : 1);
+</script>
+
+<div class="tx-block-interactive" data-tx-block="poll" data-tone={block.tone}>
+  <p class="tx-block-interactive__prompt" id={qId}>{block.question}</p>
+
+  {#if multi}
+    <div class="tx-block-interactive__options" role="group" aria-labelledby={qId}>
+      {#each block.options as option (option.id)}
+        <Checkbox
+          checked={selected.includes(option.id)}
+          disabled={submitted}
+          label={option.label}
+          onCheckedChange={(next) => toggle(option.id, next)}
+        />
+      {/each}
+    </div>
+  {:else}
+    <RadioGroup
+      bind:value={radioValue}
+      disabled={submitted}
+      items={block.options.map((o) => ({ value: o.id, label: o.label }))}
+      aria-labelledby={qId}
+    />
+  {/if}
+
+  <div class="tx-block-interactive__actions">
+    {#if !submitted}
+      <Button
+        type="button"
+        onclick={submit}
+        disabled={multi ? selected.length === 0 : radioValue === ''}
+      >
+        {labels.pollSubmit}
+      </Button>
+    {:else}
+      <Button type="button" variant="secondary" onclick={reset}>{labels.pollReset}</Button>
+    {/if}
+  </div>
+
+  {#if submitted}
+    <div class="tx-block-interactive__results" aria-live="polite">
+      <p class="tx-block-interactive__result">{labels.pollResults}</p>
+      {#each block.options as option (option.id)}
+        {@const pct = Math.round(((counts[option.id] ?? 0) / total) * 100)}
+        <div class="tx-block-interactive__bar">
+          <span>{option.label} — {pct}%</span>
+          <div class="tx-block-interactive__bar-track">
+            <div class="tx-block-interactive__bar-fill" style:inline-size="{pct}%"></div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/interactive/PollBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+import type { InteractiveBlockLabels } from './labels.js';
+import type { PollBlock } from './schema.js';
+type $$ComponentProps = {
+    block: PollBlock;
+    labels: InteractiveBlockLabels;
+};
+declare const PollBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type PollBlock = ReturnType<typeof PollBlock>;
+export default PollBlock;

package/dist/interactive/QuizBlock.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { Button } from 'texuli/button';
+import { RadioGroup } from 'texuli/choice';
+import type { InteractiveBlockLabels } from './labels.js';
+import type { QuizBlock } from './schema.js';
+
+let {
+  block,
+  labels,
+}: {
+  block: QuizBlock;
+  labels: InteractiveBlockLabels;
+} = $props();
+
+let index = $state(0);
+let choice = $state('');
+let checked = $state(false);
+let score = $state(0);
+let done = $state(false);
+
+const question = $derived(block.questions[index]);
+const total = $derived(block.questions.length);
+
+function checkAnswer(): void {
+  if (!question || !choice || checked) return;
+  checked = true;
+  if (choice === question.correctId) score += 1;
+}
+
+function next(): void {
+  if (!checked) return;
+  if (index + 1 >= total) {
+    done = true;
+    return;
+  }
+  index += 1;
+  choice = '';
+  checked = false;
+}
+</script>
+
+<div class="tx-block-interactive" data-tx-block="quiz" data-tone={block.tone}>
+  {#if block.title}
+    <h3 class="tx-block-interactive__title">{block.title}</h3>
+  {/if}
+
+  {#if done}
+    <p class="tx-block-interactive__result" aria-live="polite">
+      {labels.quizScore}: {score} / {total}
+    </p>
+  {:else if question}
+    <p class="tx-block-interactive__prompt" id="{question.id}-prompt">
+      {index + 1}. {question.prompt}
+    </p>
+    <RadioGroup
+      bind:value={choice}
+      disabled={checked}
+      items={question.options.map((o) => ({ value: o.id, label: o.label }))}
+      aria-labelledby="{question.id}-prompt"
+    />
+    <div class="tx-block-interactive__actions">
+      {#if !checked}
+        <Button type="button" onclick={checkAnswer} disabled={!choice}>{labels.quizSubmit}</Button>
+      {:else}
+        <p class="tx-block-interactive__result" aria-live="polite">
+          {choice === question.correctId ? labels.quizCorrect : labels.quizIncorrect}
+          {#if question.explanation}
+            — {question.explanation}
+          {/if}
+        </p>
+        <Button type="button" onclick={next}>{labels.quizNext}</Button>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/interactive/QuizBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+import type { InteractiveBlockLabels } from './labels.js';
+import type { QuizBlock } from './schema.js';
+type $$ComponentProps = {
+    block: QuizBlock;
+    labels: InteractiveBlockLabels;
+};
+declare const QuizBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type QuizBlock = ReturnType<typeof QuizBlock>;
+export default QuizBlock;

package/dist/interactive/check.d.ts

@@ -0,0 +1,10 @@
+import type { FieldIssue } from '../core/schema/primitives.js';
+import type { InteractiveFamilyBlock } from './engine.js';
+export type InteractiveBlockCheck = {
+    ok: true;
+    block: InteractiveFamilyBlock;
+} | {
+    ok: false;
+    issues: FieldIssue[];
+};
+export declare function checkInteractiveBlock(value: unknown): InteractiveBlockCheck;

package/dist/interactive/check.js

@@ -0,0 +1,9 @@
+import { parseFamilyBlock } from "../core/schema/parse-family.js";
+import { parseInteractiveBlock } from "./schema.js";
+export function checkInteractiveBlock(value) {
+    // Only this family's parser: the renderer does not bundle every family's rules.
+    const parsed = parseFamilyBlock(value, [parseInteractiveBlock], 'interactive');
+    if (!parsed.success)
+        return { ok: false, issues: parsed.issues };
+    return { ok: true, block: parsed.data };
+}

package/dist/interactive/engine.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `@texuli/blocks/interactive/engine` — Svelte-free interactive parsers + formula.
+ * Prefer `@texuli/blocks/formula` when only the calculator AST is needed.
+ */
+import type { Block, FieldIssue } from '../core/index.js';
+import type { InteractiveBlockLabelOverrides } from './labels.js';
+import { type InteractiveBlock, type InteractiveBlockType } from './schema.js';
+export { type ArithmeticOp, type ComparisonOp, type Condition, evaluateCondition, evaluateFormula, FORMULA_LIMITS, type FormatFormulaOptions, type FormulaDiagnostic, type FormulaInputs, type FormulaParseResult, type FormulaUnit, formatFormulaValue, formulaJsonPath, formulaVariables, type NumberFormula, type ParseFormulaOptions, parseFormula, roundTo, } from '../core/formula/index.js';
+export { checkInteractiveBlock, type InteractiveBlockCheck } from './check.js';
+export { DEFAULT_INTERACTIVE_BLOCK_LABELS, type InteractiveBlockLabelOverrides, type InteractiveBlockLabels, resolveInteractiveBlockLabels, } from './labels.js';
+export { type CalculatorBlock, type CalculatorInput, type ChecklistBlock, type ChecklistItem, evaluateCalculator, INTERACTIVE_BLOCK_TYPES, type InteractiveBlock, type InteractiveBlockType, type PollBlock, type PollOption, parseInteractiveBlock, type QuizBlock, type QuizOption, type QuizQuestion, } from './schema.js';
+export type InteractiveFamilyBlock = InteractiveBlock;
+export type InteractiveFamilyBlockType = InteractiveBlockType;
+export declare function isInteractiveFamilyBlock(block: Block): block is InteractiveFamilyBlock;
+export interface InteractiveBlockViewProps {
+    block: unknown;
+    labels?: InteractiveBlockLabelOverrides;
+    oninvalid?: (issues: FieldIssue[]) => void;
+}