@glw907/cairn-cms 0.62.2 → 0.76.0

package/dist/sveltekit/guard.js

@@ -32,6 +32,16 @@ function isLocalHost(hostname) {
 export function createAuthGuard() {
     return async function handle({ event, resolve }) {
         const { pathname } = event.url;
+        // Fail closed if the dev-backend flag is set in a deployed runtime. Read both env sources: a
+        // Cloudflare Worker var lands on platform.env, an adapter-node OS var on process.env. A correct
+        // production build already eliminated the dev backend (the consumer gates it on the build-foldable
+        // `dev`), so a set flag signals a polluted environment; refuse loudly.
+        const platformFlag = event.platform?.env?.CAIRN_DEV_BACKEND;
+        const processFlag = typeof process !== 'undefined' ? process.env?.CAIRN_DEV_BACKEND : undefined;
+        if (platformFlag === '1' || platformFlag === true || processFlag === '1') {
+            log.error('guard.rejected', { reason: 'dev_backend_in_prod', path: pathname });
+            return new Response('cairn: the dev backend flag is set in a deployed environment. Unset CAIRN_DEV_BACKEND.', { status: 503 });
+        }
         // Rule 2 - non-admin: restore the framework's strict Origin check the consumer disabled when
         // they set checkOrigin: false to hand cairn the admin CSRF authority.
         if (!isAdminPath(pathname)) {

package/dist/sveltekit/health.d.ts

@@ -1,5 +1,5 @@
 import type { CairnRuntime } from '../content/types.js';
-import type { GithubKeyEnv } from '../github/credentials.js';
+import type { BackendEnv } from '../github/credentials.js';
 /** The `/admin/healthz` payload. */
 export interface HealthData {
     ok: boolean;
@@ -10,9 +10,13 @@ export interface HealthData {
         };
     };
 }
-/** Run the signing self-test against the configured App id and the Worker's key secret. */
+/**
+ * Run the signing self-test against the configured App id and the Worker's key secret. The self-test
+ * is GitHub-specific, so it narrows the provider on `kind === 'github-app'` for the App id; a
+ * non-GitHub backend skips the signing check.
+ */
 export declare function healthLoad(event: {
     platform?: {
-        env?: GithubKeyEnv;
+        env?: BackendEnv;
     };
 }, runtime: CairnRuntime): Promise<HealthData>;

package/dist/sveltekit/health.js

@@ -2,11 +2,17 @@
 // PKCS#1-to-PKCS#8 conversion is caught early (spec §7.8). The payload is pass/fail and a
 // coarse detail only; it never carries the key or a token.
 import { signingSelfTest } from '../github/signing.js';
-/** Run the signing self-test against the configured App id and the Worker's key secret. */
+import { isGithubApp } from '../github/backend.js';
+/**
+ * Run the signing self-test against the configured App id and the Worker's key secret. The self-test
+ * is GitHub-specific, so it narrows the provider on `kind === 'github-app'` for the App id; a
+ * non-GitHub backend skips the signing check.
+ */
 export async function healthLoad(event, runtime) {
     const key = event.platform?.env?.GITHUB_APP_PRIVATE_KEY_B64;
-    const githubAppSigning = key
-        ? await signingSelfTest(runtime.backend.appId, key)
+    const provider = runtime.backend;
+    const githubAppSigning = isGithubApp(provider) && key
+        ? await signingSelfTest(provider.appId, key)
         : { ok: false, detail: 'GITHUB_APP_PRIVATE_KEY_B64 is not configured' };
     return { ok: githubAppSigning.ok, checks: { githubAppSigning } };
 }

package/dist/sveltekit/index.d.ts

@@ -10,5 +10,5 @@ export { parseAdminPath, type AdminView } from './admin-dispatch.js';
 export { createCairnAdmin, type CairnAdminDeps, type AdminData } from './cairn-admin.js';
 export { healthLoad, type HealthData } from './health.js';
 export type { RequestContext, CookieJar, HandleInput } from './types.js';
-export type { GithubKeyEnv } from '../github/credentials.js';
+export type { BackendEnv } from '../github/credentials.js';
 export type { AuthEnv } from '../auth/types.js';

package/dist/sveltekit/nav-routes.d.ts

@@ -1,6 +1,6 @@
-import { type GithubKeyEnv } from '../github/credentials.js';
 import { type NavNode } from '../nav/site-config.js';
 import type { CairnRuntime } from '../content/types.js';
+import type { Backend } from '../github/backend.js';
 import type { ContentEvent } from './content-routes.js';
 /** One page option for the URL picker datalist. */
 export interface NavPageOption {
@@ -19,13 +19,14 @@ export interface NavLoadData {
     saved: boolean;
     error: string | null;
 }
-/** Injectable dependencies; tests stub the token mint to avoid signing a real key. */
+/** Injectable dependencies; a test injects a live `Backend` so the read and commit paths run with no real token mint. */
 export interface NavRoutesDeps {
     /**
-     * Mint a GitHub App installation token from the Worker env. Defaults to the real signer.
-     *  A bare string works too; the routes await whatever comes back.
+     * Override the resolved content backend. A test injects a live `Backend` (a `makeGithubBackend`
+     *  over a fetch double) so the read and commit paths run with no real token mint. When set it
+     *  replaces the per-handler `locals.backend ?? runtime.backend.connect(env)` resolve.
      */
-    mintToken?: (env: GithubKeyEnv) => string | Promise<string>;
+    backend?: Backend;
 }
 /**
  *

package/dist/sveltekit/nav-routes.js

@@ -1,10 +1,7 @@
 // The admin nav-editing routes: the load and save a site's /admin/nav shim calls. A factory closes
-// over the composed runtime and the GitHub token mint, mirroring createContentRoutes, so the read
-// and commit paths are unit-testable against a fetch double with an injected token.
+// over the composed runtime, mirroring createContentRoutes, so the read and commit paths are
+// unit-testable against a fetch double behind an injected Backend.
 import { redirect, error } from '@sveltejs/kit';
-import { appCredentials } from '../github/credentials.js';
-import { cachedInstallationToken } from '../github/signing.js';
-import { listMarkdown, readRaw, commitFile } from '../github/repo.js';
 import { isConflict } from '../github/types.js';
 import { log } from '../log/index.js';
 import { parseSiteConfig, extractMenu, validateNavTree, setMenu } from '../nav/site-config.js';
@@ -13,13 +10,19 @@ import { requireSession } from './guard.js';
  *
  */
 export function createNavRoutes(runtime, deps = {}) {
-    const mintToken = deps.mintToken ?? ((env) => cachedInstallationToken(appCredentials(runtime.backend, env)));
+    /**
+     * Resolve the live content backend for one request: the test seam, then the dev double's
+     *  `event.locals.backend`, then the production `runtime.backend.connect(env)`.
+     */
+    function resolveBackend(event) {
+        return deps.backend ?? event.locals.backend ?? runtime.backend.connect(event.platform?.env ?? {});
+    }
     /** List page-like concepts (routable, not dated) for the URL picker. Best-effort per concept. */
-    async function pageOptions(token) {
+    async function pageOptions(backend) {
         const pageConcepts = runtime.concepts.filter((c) => c.routing.routable && !c.routing.dated);
         const lists = await Promise.all(pageConcepts.map(async (c) => {
             try {
-                const files = await listMarkdown(runtime.backend, c.dir, token);
+                const files = await backend.readEntries(c.dir, backend.defaultBranch);
                 return files.map((f) => ({ label: f.id, url: `/${f.id}` }));
             }
             catch {
@@ -36,17 +39,11 @@ export function createNavRoutes(runtime, deps = {}) {
             throw error(404, 'No navigation menu configured');
         const maxDepth = config.maxDepth ?? 2;
         const menu = { name: config.menuName, label: config.label, maxDepth };
-        let token;
-        try {
-            token = await mintToken(event.platform?.env ?? {});
-        }
-        catch {
-            return { menu, tree: [], pages: [], saved: false, error: 'Could not authenticate with GitHub.' };
-        }
+        const backend = resolveBackend(event);
         let tree = [];
         let raw = null;
         try {
-            raw = await readRaw(runtime.backend, config.configPath, token);
+            raw = await backend.readFile(config.configPath, backend.defaultBranch);
         }
         catch {
             // An unreadable config degrades to an empty tree; the first save writes a clean menu.
@@ -69,7 +66,7 @@ export function createNavRoutes(runtime, deps = {}) {
         return {
             menu,
             tree,
-            pages: await pageOptions(token),
+            pages: await pageOptions(backend),
             saved: event.url.searchParams.get('saved') === '1',
             error: event.url.searchParams.get('error'),
         };
@@ -90,13 +87,18 @@ export function createNavRoutes(runtime, deps = {}) {
             const message = err instanceof Error ? err.message : 'Invalid navigation';
             throw redirect(303, `/admin/nav?error=${encodeURIComponent(message)}`);
         }
-        const token = await mintToken(event.platform?.env ?? {});
-        const raw = await readRaw(runtime.backend, config.configPath, token);
+        const backend = resolveBackend(event);
+        // Read the head BEFORE the content, so this expectedHead is at-or-before the bytes the commit
+        // merges. The nav write lands on the default branch and triggers a deploy, so it is fail-closed:
+        // a concurrent commit to the config moves the head off this value and the commit throws a
+        // conflict, surfacing the reload-and-reapply prompt below rather than a silent last-writer-wins.
+        const head = await backend.branchHead(backend.defaultBranch);
+        const raw = await backend.readFile(config.configPath, backend.defaultBranch);
         if (raw === null)
             throw error(404, 'Site config not found');
         const commitFields = { concept: 'nav', id: 'site-config', editor: editor.email };
         try {
-            await commitFile(runtime.backend, config.configPath, setMenu(raw, config.menuName, tree), { message: `Update ${config.label.toLowerCase()}`, author: { name: editor.displayName, email: editor.email } }, token);
+            await backend.commit(backend.defaultBranch, [{ path: config.configPath, content: setMenu(raw, config.menuName, tree) }], { name: editor.displayName, email: editor.email }, `Update ${config.label.toLowerCase()}`, head ?? undefined);
             log.info('commit.succeeded', commitFields);
         }
         catch (err) {

package/dist/sveltekit/types.d.ts

@@ -1,4 +1,5 @@
 import type { AuthEnv, Editor } from '../auth/types.js';
+import type { Backend } from '../github/backend.js';
 export interface CookieSetOptions {
     path: string;
     httpOnly?: boolean;
@@ -33,6 +34,7 @@ export interface EventBase<Env> {
     request: Request;
     locals: {
         editor?: Editor | null;
+        backend?: Backend;
     };
     platform?: PlatformContext<Env>;
 }

package/dist/vite/index.d.ts

@@ -50,11 +50,11 @@ export interface AdapterFacts {
     owner?: string;
     /** `cairn.backend.repo`. */
     repo?: string;
-    /** `cairn.sender.from`. */
+    /** `cairn.email.from`. */
     from?: string;
     /**
-     * `cairn.assets.bucketBinding`, the media R2 binding name; undefined when the adapter declares no
-     *  assets. The doctor's conditional media-bucket check reads it.
+     * `cairn.media.bucketBinding`, the media R2 binding name; undefined when the adapter declares no
+     *  media. The doctor's conditional media-bucket check reads it.
      */
     mediaBucketBinding?: string;
 }

package/dist/vite/index.js

@@ -22,10 +22,16 @@ function virtualSource(opts, mode) {
         .join('\n');
     // In write mode the committed file may not exist yet, so do not import it.
     const committedImport = mode === 'verify' ? `import committed from ${JSON.stringify(manifestPath + '?raw')};` : '';
-    const resultExpr = mode === 'write' ? 'serializeManifest(built)' : '(verifyManifest(built, committed), "ok")';
+    // In verify mode, run verifyReferences after verifyManifest, inside the generated source where the
+    // built manifest is in scope. References have no prerender backstop, so this build gate is their only
+    // integrity authority; it cannot move to the verifyManifestFromVite TS call site, where `built` does
+    // not exist (it lives only in this evaluated string).
+    const resultExpr = mode === 'write'
+        ? 'serializeManifest(built)'
+        : '(verifyManifest(built, committed), verifyReferences(built), "ok")';
     return `
 import { buildSiteManifest } from '@glw907/cairn-cms/delivery/data';
-import { serializeManifest, verifyManifest } from '@glw907/cairn-cms';
+import { serializeManifest, verifyManifest, verifyReferences } from '@glw907/cairn-cms';
 import { cairn, siteConfig } from ${JSON.stringify(opts.configModule)};
 ${committedImport}
 const globs = {
@@ -212,13 +218,16 @@ function adapterFactsSource(opts) {
     return `
 import { cairn } from ${JSON.stringify(opts.configModule)};
 const backend = cairn?.backend ?? {};
-const sender = cairn?.sender ?? {};
-const assets = cairn?.assets ?? {};
+const email = cairn?.email ?? {};
+const media = cairn?.media ?? {};
 const facts = {};
-if (typeof backend.owner === 'string') facts.owner = backend.owner;
-if (typeof backend.repo === 'string') facts.repo = backend.repo;
-if (typeof sender.from === 'string') facts.from = sender.from;
-if (typeof assets.bucketBinding === 'string') facts.mediaBucketBinding = assets.bucketBinding;
+// The owner/repo identity is GitHub-specific, so it is read only off the github-app provider.
+if (backend.kind === 'github-app') {
+  if (typeof backend.owner === 'string') facts.owner = backend.owner;
+  if (typeof backend.repo === 'string') facts.repo = backend.repo;
+}
+if (typeof email.from === 'string') facts.from = email.from;
+if (typeof media.bucketBinding === 'string') facts.mediaBucketBinding = media.bucketBinding;
 export const result = JSON.stringify(facts);
 `;
 }

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.62.2",
+  "version": "0.76.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "sideEffects": [
     "**/*.svelte",
     "**/*.css"
@@ -34,15 +37,20 @@
     "check:docs": "node scripts/docs-links.mjs",
     "check:version": "node scripts/check-version.mjs",
     "check:prose": "node scripts/check-admin-prose.mjs",
+    "check:public-tokens": "node scripts/check-public-tokens.mjs",
+    "test:reskin": "node scripts/reskin-fixture.mjs",
     "lint": "eslint src/lib",
     "check:comments": "bash scripts/check-comments.sh",
+    "check:dev-package": "node scripts/check-dev-package.mjs",
     "prepare": "npm run package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:unit": "vitest run --project unit",
     "test:integration": "vitest run --project integration",
-    "test:component": "vitest run --project component"
+    "test:component": "vitest run --project component",
+    "emit-template": "node scripts/emit-template.mjs",
+    "test:emit": "node --test scripts/emit-template.test.mjs"
   },
   "exports": {
     ".": {
@@ -66,6 +74,10 @@
     },
     "./components/spellcheck-assets/spellchecker-wasm.wasm": "./dist/components/spellcheck-assets/spellchecker-wasm.wasm",
     "./components/spellcheck-assets/dictionary-en-us.txt": "./dist/components/spellcheck-assets/dictionary-en-us.txt",
+    "./islands": {
+      "types": "./dist/islands/index.d.ts",
+      "default": "./dist/islands/index.js"
+    },
     "./render": {
       "types": "./dist/render/authoring.d.ts",
       "svelte": "./dist/render/authoring.js",
@@ -131,6 +143,7 @@
     "codemirror": "^6.0.2",
     "gray-matter": "^4",
     "hast-util-sanitize": "^5.0.2",
+    "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
     "heic-to": "^1.5.2",
     "mdast-util-directive": "^3.1.0",
@@ -143,6 +156,7 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",
+    "shiki": "^4.3.0",
     "spellchecker-wasm": "^0.3.3",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
@@ -159,6 +173,7 @@
     "@types/node": "^22.19.19",
     "@vitest/browser": "^4.1.7",
     "@vitest/browser-playwright": "^4.1.7",
+    "culori": "^4.0.2",
     "daisyui": "^5.5.23",
     "eslint": "^9.39.4",
     "eslint-plugin-jsdoc": "^63.0.7",

package/src/lib/ambient.ts

@@ -6,12 +6,19 @@
 // hand-writes the `declare global` block. The field is optional: the engine's own structural
 // event types read it as `editor?: Editor | null`, and a request the guard has not touched
 // carries no editor at all.
+//
+// `backend` is the per-request content-store channel: the dev-backend handle sets it so the engine
+// resolves it ahead of the real `githubApp` provider (`locals.backend ?? runtime.backend.connect`).
+// Typing it here makes that seam a checked contract, so a mis-keyed write cannot silently fall
+// through to the production provider. A production request never sets it.
 import type { Editor } from './auth/types.js';
+import type { Backend } from './github/backend.js';
 
 declare global {
   namespace App {
     interface Locals {
       editor?: Editor | null;
+      backend?: Backend;
     }
   }
 }

package/src/lib/auth/types.ts

@@ -14,6 +14,13 @@ export interface AuthEnv {
   AUTH_DB?: D1Database;
   /** Canonical origin for confirmation links, never read from a request header (spec 7.1, risk H3). */
   PUBLIC_ORIGIN?: string;
+  /**
+   * Dev-backend tripwire flag. The dev backend sets this in local development; if it is ever set in
+   * a deployed runtime the guard refuses (the build-foldable `dev` gate should have eliminated the
+   * dev backend, so a set flag signals a polluted environment). A string from a Worker var or a
+   * boolean.
+   */
+  CAIRN_DEV_BACKEND?: string | boolean;
   /** Cloudflare Email Sending binding. */
   EMAIL?: {
     send(message: {

package/src/lib/components/CairnAdmin.svelte

@@ -20,8 +20,7 @@ mount inside `AdminLayout`. No styling or wrapper elements of its own.
   import type { ContentFormFailure } from '../sveltekit/content-routes.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
-  import type { LinkResolve } from '../content/links.js';
-  import type { MediaResolve } from '../render/resolve-media.js';
+  import type { SiteRender } from '../content/types.js';
 
   interface Props {
     /** The discriminated view data from `createCairnAdmin`'s load. */
@@ -37,10 +36,7 @@ mount inside `AdminLayout`. No styling or wrapper elements of its own.
         })
       | null;
     /** The site's design-accurate render pipeline, for the edit view's preview pane. */
-    render?: (
-      md: string,
-      opts?: { stagger?: boolean; resolve?: LinkResolve; resolveMedia?: MediaResolve },
-    ) => string | Promise<string>;
+    render?: SiteRender;
     /** The site's component registry, for the edit view's insert palette. */
     registry?: ComponentRegistry;
     /** The site's icon set, for the edit view's guided form fields. */

package/src/lib/components/ComponentForm.svelte

@@ -55,7 +55,7 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
     values = working;
   });
 
-  const attributes = $derived(def.attributes ?? []);
+  const attributes = $derived(Object.entries(def.attributes ?? {}));
   const flatSlots = $derived((def.slots ?? []).filter((s) => s.kind !== 'repeatable'));
   const repeatableSlots = $derived((def.slots ?? []).filter((s) => s.kind === 'repeatable'));
 
@@ -107,7 +107,7 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
   function rowLabel(slot: (typeof repeatableSlots)[number], value: string, index: number): string {
     const fallback = `${slot.label} ${index + 1}`;
     if (!slot.itemLabel) return fallback;
-    const key = slot.itemFields?.[0]?.key ?? 'text';
+    const key = Object.keys(slot.itemFields ?? {})[0] ?? 'text';
     const derived = slot.itemLabel({ [key]: value }, index);
     return derived && derived.trim() ? derived : fallback;
   }
@@ -125,14 +125,34 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
     return typeof v === 'string' ? v : '';
   }
 
+  // The HTML input type for the text-fallback arm. ComponentForm has no dedicated number/date arm
+  // the way FieldInput does, so it folds those scalar types into the one fallback input; everything
+  // else renders a plain text box.
+  function inputType(type: string): string {
+    switch (type) {
+      case 'number':
+        return 'number';
+      case 'date':
+        return 'date';
+      case 'datetime':
+        return 'datetime-local';
+      case 'url':
+        return 'url';
+      case 'email':
+        return 'email';
+      default:
+        return 'text';
+    }
+  }
+
   // A required attribute is unmet only for a text/select/icon field left empty; a boolean is always
   // met (its false is a real choice). A required slot is unmet when its string is empty or its
   // repeatable list has no non-empty item. This drives the asterisk-marked fields, the disabled
   // Insert, and (through the bound `incomplete`) the dialog's incomplete preview state.
   const incompleteState = $derived.by(() => {
-    for (const field of attributes) {
+    for (const [name, field] of attributes) {
       if (!field.required || field.type === 'boolean') continue;
-      if (asString(field.key) === '') return true;
+      if (asString(name) === '') return true;
     }
     for (const slot of def.slots ?? []) {
       if (!slot.required) continue;
@@ -164,9 +184,9 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
   // next to the field meanwhile.
   const errors = $derived.by(() => {
     const out: Record<string, string> = {};
-    for (const field of attributes) {
-      if (field.required && field.type !== 'boolean' && touched[field.key] && asString(field.key) === '') {
-        out[field.key] = `${field.label} is required.`;
+    for (const [name, field] of attributes) {
+      if (field.required && field.type !== 'boolean' && touched[name] && asString(name) === '') {
+        out[name] = `${field.label} is required.`;
       }
     }
     for (const slot of def.slots ?? []) {
@@ -201,16 +221,16 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
 </script>
 
 <div class="flex flex-col gap-3" bind:this={formEl}>
-  {#each attributes as field (field.key)}
+  {#each attributes as [name, field] (name)}
     {#if field.type === 'boolean'}
       <label class="label cursor-pointer justify-start gap-2">
         <input
           class="checkbox checkbox-sm"
           type="checkbox"
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          checked={asBool(field.key)}
-          onchange={(e) => (working.attributes[field.key] = e.currentTarget.checked)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          checked={asBool(name)}
+          onchange={(e) => (working.attributes[name] = e.currentTarget.checked)}
         />
         <span class="text-sm">{field.label}</span>
       </label>
@@ -220,14 +240,14 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
         <select
           class="select"
           aria-required={field.required ? 'true' : undefined}
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          value={asString(field.key)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          value={asString(name)}
           onchange={(e) => {
-            working.attributes[field.key] = e.currentTarget.value;
-            markTouched(field.key);
+            working.attributes[name] = e.currentTarget.value;
+            markTouched(name);
           }}
-          onblur={() => markTouched(field.key)}
+          onblur={() => markTouched(name)}
         >
           {#if !field.required}<option value="">—</option>{/if}
           {#each field.options ?? [] as opt (opt)}<option value={opt}>{opt}</option>{/each}
@@ -239,9 +259,9 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
         <IconPicker
           {icons}
           label={field.label}
-          value={asString(field.key)}
+          value={asString(name)}
           required={field.required ?? false}
-          onChange={(name) => (working.attributes[field.key] = name)}
+          onChange={(glyph) => (working.attributes[name] = glyph)}
         />
       </div>
     {:else}
@@ -249,19 +269,20 @@ binds out its live `values` and `incomplete` so the dialog can render that previ
         <span class="text-sm font-medium">{field.label}{#if field.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <input
           class="input"
+          type={inputType(field.type)}
           aria-required={field.required ? 'true' : undefined}
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          value={asString(field.key)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          value={asString(name)}
           oninput={(e) => {
-            working.attributes[field.key] = e.currentTarget.value;
-            markTouched(field.key);
+            working.attributes[name] = e.currentTarget.value;
+            markTouched(name);
           }}
-          onblur={() => markTouched(field.key)}
+          onblur={() => markTouched(name)}
         />
       </label>
     {/if}
-    {#if errors[field.key]}<span id={`err-${field.key}`} role="alert" class="text-error text-xs">{errors[field.key]}</span>{/if}
+    {#if errors[name]}<span id={`err-${name}`} role="alert" class="text-error text-xs">{errors[name]}</span>{/if}
   {/each}
 
   {#each flatSlots as slot (slot.name)}