@bespokeagentics/create-microdots-host 0.1.0

package/templates/base/scripts/discover.test.ts

@@ -0,0 +1,133 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { resolve } from 'node:path'
+import { afterEach, describe, expect, test } from 'vitest'
+
+import {
+  assertSurfaceTagsMatch,
+  listMicroDots,
+  registryFor,
+} from './discover.ts'
+
+const roots: string[] = []
+
+const root = (): string => {
+  const directory = mkdtempSync(resolve(tmpdir(), 'microdots-discovery-'))
+  roots.push(directory)
+  return directory
+}
+
+const writeDot = (
+  directory: string,
+  name: string,
+  metadata: Readonly<Record<string, unknown>>,
+): void => {
+  const dot = resolve(directory, name)
+  mkdirSync(dot, { recursive: true })
+  writeFileSync(
+    resolve(dot, 'package.json'),
+    JSON.stringify({ name: `@starter/${name}`, microdot: metadata }),
+  )
+}
+
+afterEach(() => {
+  roots.splice(0).forEach(directory => {
+    rmSync(directory, { recursive: true, force: true })
+  })
+})
+
+describe('MicroDot discovery', () => {
+  test('one metadata record drives one registry row per tag', () => {
+    const directory = root()
+    writeDot(directory, 'one', {
+      tags: ['one-view', 'one-admin'],
+      port: 3991,
+      bundle: 'one.js',
+    })
+
+    expect(registryFor(listMicroDots(directory))).toEqual([
+      {
+        tag: 'one-view',
+        bundle: '/microdots/one.js',
+        localPort: 3991,
+        attributes: {},
+      },
+      {
+        tag: 'one-admin',
+        bundle: '/microdots/one.js',
+        localPort: 3991,
+        attributes: {},
+      },
+    ])
+  })
+
+  test('duplicate tags fail before orchestration', () => {
+    const directory = root()
+    writeDot(directory, 'one', {
+      tags: ['one-view'],
+      port: 3991,
+      bundle: 'same.js',
+    })
+    writeDot(directory, 'two', {
+      tags: ['one-view'],
+      port: 3992,
+      bundle: 'two.js',
+    })
+    expect(() => listMicroDots(directory)).toThrow('duplicate tag')
+  })
+
+  test('duplicate ports fail before orchestration', () => {
+    const directory = root()
+    writeDot(directory, 'one', {
+      tags: ['one-view'],
+      port: 3991,
+      bundle: 'one.js',
+    })
+    writeDot(directory, 'two', {
+      tags: ['two-view'],
+      port: 3991,
+      bundle: 'two.js',
+    })
+    expect(() => listMicroDots(directory)).toThrow('duplicate port')
+  })
+
+  test('duplicate bundles fail before orchestration', () => {
+    const directory = root()
+    writeDot(directory, 'one', {
+      tags: ['one-view'],
+      port: 3991,
+      bundle: 'same.js',
+    })
+    writeDot(directory, 'two', {
+      tags: ['two-view'],
+      port: 3992,
+      bundle: 'same.js',
+    })
+    expect(() => listMicroDots(directory)).toThrow('duplicate bundle')
+  })
+
+  test('surface tags must match package metadata exactly', () => {
+    const directory = root()
+    writeDot(directory, 'one', {
+      tags: ['one-view', 'one-admin'],
+      port: 3991,
+      bundle: 'one.js',
+    })
+    const dot = listMicroDots(directory)[0]
+    if (dot === undefined) throw new Error('fixture dot was not discovered')
+
+    expect(() =>
+      assertSurfaceTagsMatch(dot, [{ tag: 'one-admin' }, { tag: 'one-view' }]),
+    ).not.toThrow()
+    expect(() => assertSurfaceTagsMatch(dot, [{ tag: 'one-view' }])).toThrow(
+      'do not match package.json microdot.tags',
+    )
+    expect(() =>
+      assertSurfaceTagsMatch(dot, [
+        { tag: 'one-view' },
+        { tag: 'one-admin' },
+        { tag: 'one-extra' },
+      ]),
+    ).toThrow('do not match package.json microdot.tags')
+  })
+})

package/templates/base/scripts/discover.ts

@@ -0,0 +1,137 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs'
+import { basename, resolve } from 'node:path'
+import type { Plugin } from 'vite'
+
+export const repoRoot = resolve(import.meta.dirname, '..')
+export const microdotsRoot = resolve(repoRoot, 'microdots')
+
+export type MicroDotPackage = {
+  readonly name: string
+  readonly directory: string
+  readonly tags: ReadonlyArray<string>
+  readonly port: number
+  readonly bundle: string
+  readonly deployedApiUrl?: string
+}
+
+type PackageDocument = {
+  readonly name?: unknown
+  readonly microdot?: unknown
+}
+
+const readJson = (path: string): PackageDocument =>
+  JSON.parse(readFileSync(path, 'utf8'))
+
+const fail = (directory: string, detail: string): never => {
+  throw new Error(`[microdots] ${directory}/package.json ${detail}`)
+}
+
+export const readMicroDotDirectory = (directory: string): MicroDotPackage => {
+  const document = readJson(resolve(directory, 'package.json'))
+  const metadata = document.microdot
+  if (typeof metadata !== 'object' || metadata === null) {
+    return fail(directory, 'must declare a microdot object')
+  }
+  const tags = 'tags' in metadata ? metadata.tags : undefined
+  const port = 'port' in metadata ? metadata.port : undefined
+  const bundle = 'bundle' in metadata ? metadata.bundle : undefined
+  const deployedApiUrl =
+    'deployedApiUrl' in metadata ? metadata.deployedApiUrl : undefined
+  if (
+    !Array.isArray(tags) ||
+    tags.length === 0 ||
+    !tags.every(tag => typeof tag === 'string' && /^[a-z0-9]+(?:-[a-z0-9]+)+$/.test(tag))
+  ) {
+    return fail(directory, 'microdot.tags must be non-empty custom-element names')
+  }
+  if (typeof port !== 'number' || !Number.isInteger(port) || port < 1) {
+    return fail(directory, 'microdot.port must be a positive integer')
+  }
+  if (typeof bundle !== 'string' || !/^[a-z0-9]+(?:-[a-z0-9]+)*\.js$/.test(bundle)) {
+    return fail(directory, 'microdot.bundle must be a kebab-case .js filename')
+  }
+  if (deployedApiUrl !== undefined && typeof deployedApiUrl !== 'string') {
+    return fail(directory, 'microdot.deployedApiUrl must be a string when present')
+  }
+  return {
+    name: basename(directory),
+    directory,
+    tags,
+    port,
+    bundle,
+    ...(deployedApiUrl === undefined ? {} : { deployedApiUrl }),
+  }
+}
+
+const assertUnique = (
+  dots: ReadonlyArray<MicroDotPackage>,
+  label: string,
+  values: (dot: MicroDotPackage) => ReadonlyArray<string>,
+): void => {
+  const owners = new Map<string, string>()
+  dots.forEach(dot => {
+    values(dot).forEach(value => {
+      const previous = owners.get(value)
+      if (previous !== undefined) {
+        throw new Error(`[microdots] duplicate ${label} "${value}" in ${previous} and ${dot.name}`)
+      }
+      owners.set(value, dot.name)
+    })
+  })
+}
+
+export const listMicroDots = (
+  root: string = microdotsRoot,
+): ReadonlyArray<MicroDotPackage> => {
+  if (!existsSync(root)) return []
+  const dots = readdirSync(root, { withFileTypes: true })
+    .filter(entry => entry.isDirectory())
+    .map(entry => resolve(root, entry.name))
+    .filter(directory => existsSync(resolve(directory, 'package.json')))
+    .map(readMicroDotDirectory)
+    .sort((left, right) => left.name.localeCompare(right.name))
+  assertUnique(dots, 'tag', dot => dot.tags)
+  assertUnique(dots, 'port', dot => [String(dot.port)])
+  assertUnique(dots, 'bundle', dot => [dot.bundle])
+  return dots
+}
+
+export const registryFor = (
+  dots: ReadonlyArray<MicroDotPackage> = listMicroDots(),
+) =>
+  dots.flatMap(dot =>
+    dot.tags.map(tag => ({
+      tag,
+      bundle: `/microdots/${dot.bundle}`,
+      localPort: dot.port,
+      ...(dot.deployedApiUrl === undefined
+        ? {}
+        : { deployedApiUrl: dot.deployedApiUrl }),
+      attributes: {},
+    })),
+  )
+
+export const assertSurfaceTagsMatch = (
+  dot: MicroDotPackage,
+  surfaces: ReadonlyArray<{ readonly tag: string }>,
+): void => {
+  const declared = [...dot.tags].sort()
+  const emitted = surfaces.map(surface => surface.tag).sort()
+  if (JSON.stringify(declared) !== JSON.stringify(emitted)) {
+    throw new Error(
+      `[manifest] ${dot.name} surface tags [${emitted.join(', ')}] do not match package.json microdot.tags [${declared.join(', ')}]`,
+    )
+  }
+}
+
+const VIRTUAL_REGISTRY = 'virtual:microdots-registry'
+const RESOLVED_REGISTRY = `\0${VIRTUAL_REGISTRY}`
+
+export const microDotRegistryPlugin = (): Plugin => ({
+  name: 'starter:microdot-registry',
+  resolveId: id => (id === VIRTUAL_REGISTRY ? RESOLVED_REGISTRY : undefined),
+  load: id =>
+    id === RESOLVED_REGISTRY
+      ? `export const registry = ${JSON.stringify(registryFor())}`
+      : undefined,
+})

package/templates/base/scripts/dot-vite.ts

@@ -0,0 +1,28 @@
+import { resolve } from 'node:path'
+import type { Plugin, UserConfig } from 'vite'
+
+import { emitMicroDotManifest } from '@bespokeagentics/microdots-vite-plugin'
+
+import { readMicroDotDirectory } from './discover.ts'
+
+export const dotConfig = (
+  dotDirectory: string,
+  plugins: ReadonlyArray<Plugin> = [],
+): UserConfig => {
+  const dot = readMicroDotDirectory(dotDirectory)
+  return {
+    plugins: [...plugins, emitMicroDotManifest(dotDirectory)],
+    build: {
+      outDir: resolve(dotDirectory, '../../host/public/microdots'),
+      emptyOutDir: false,
+      cssCodeSplit: false,
+      target: 'esnext',
+      lib: {
+        entry: resolve(dotDirectory, 'src/entry.ts'),
+        formats: ['es'],
+        fileName: () => dot.bundle,
+      },
+      rolldownOptions: { output: { codeSplitting: false } },
+    },
+  }
+}

package/templates/base/scripts/emit-manifests.ts

@@ -0,0 +1,154 @@
+import { createHash } from 'node:crypto'
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  writeFileSync,
+} from 'node:fs'
+import { resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { gzipSync } from 'node:zlib'
+import type {
+  AttributeSpec,
+  MicroDotSurface,
+} from '@bespokeagentics/microdots-element'
+
+import {
+  assertSurfaceTagsMatch,
+  listMicroDots,
+  repoRoot,
+} from './discover.ts'
+
+const isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>
+  typeof value === 'object' && value !== null
+
+const isSurface = (value: unknown): value is MicroDotSurface => {
+  if (!isRecord(value)) return false
+  return (
+    typeof value['tag'] === 'string' &&
+    isRecord(value['attributes']) &&
+    isRecord(value['events'])
+  )
+}
+
+const buildId = (bytes: Uint8Array): string =>
+  createHash('sha256').update(bytes).digest('hex').slice(0, 8)
+
+const manifestAttribute = (name: string, spec: AttributeSpec) => ({
+  name,
+  type: spec.type ?? 'string',
+  required: spec.required ?? false,
+  ...(spec.default === undefined ? {} : { default: spec.default }),
+  live: spec.live ?? false,
+  ownership: spec.ownership ?? 'dot',
+  ...(spec.values === undefined ? {} : { values: spec.values }),
+  ...(spec.description === undefined ? {} : { description: spec.description }),
+})
+
+const eventRef = (
+  dotName: string,
+  eventName: string,
+  payload: unknown,
+  contract: Readonly<Record<string, unknown>>,
+): string => {
+  const exportName = Object.keys(contract).find(name =>
+    Object.is(contract[name], payload),
+  )
+  if (exportName === undefined) {
+    throw new Error(
+      `[manifest] ${dotName}.${eventName} payload is not a named contract export`,
+    )
+  }
+  return `@starter/${dotName}/contract#${exportName}`
+}
+
+const assertNoDocumentReset = (name: string, source: string): void => {
+  const fingerprints = [
+    /\*,\s*::?after,\s*::?before/,
+    /(^|[;}]|\\)h1,h2,h3,h4,h5,h6\{/,
+    /-webkit-tap-highlight-color/,
+  ]
+  if (fingerprints.some(pattern => pattern.test(source))) {
+    throw new Error(
+      `[manifest] ${name} bundle carries a document-wide reset; use the scoped MicroDot Tailwind prologue`,
+    )
+  }
+}
+
+const onlyIndex = process.argv.indexOf('--only')
+const only = onlyIndex === -1 ? undefined : process.argv[onlyIndex + 1]
+const dots = listMicroDots().filter(dot => only === undefined || dot.name === only)
+
+if (only !== undefined && dots.length !== 1) {
+  throw new Error(`[manifest] no MicroDot named ${only}`)
+}
+
+for (const dot of dots) {
+  const bundlePath = resolve(repoRoot, 'host/public/microdots', dot.bundle)
+  if (!existsSync(bundlePath)) {
+    throw new Error(`[manifest] ${dot.name} bundle is missing: ${bundlePath}`)
+  }
+  const source = readFileSync(bundlePath)
+  assertNoDocumentReset(dot.name, source.toString('utf8'))
+  const build = buildId(source)
+  const stem = dot.bundle.slice(0, -3)
+  const hashedFile = `${stem}.${build}.js`
+  const dist = resolve(dot.directory, 'dist')
+  mkdirSync(dist, { recursive: true })
+  copyFileSync(bundlePath, resolve(dist, hashedFile))
+
+  const surfaceModule: unknown = await import(
+    pathToFileURL(resolve(dot.directory, 'src/surface.ts')).href
+  )
+  const contractModule: unknown = await import(
+    pathToFileURL(resolve(dot.directory, 'src/contract.ts')).href
+  )
+  if (!isRecord(surfaceModule) || !Array.isArray(surfaceModule['surfaces'])) {
+    throw new Error(`[manifest] ${dot.name} surface.ts must export surfaces[]`)
+  }
+  if (!isRecord(contractModule)) {
+    throw new Error(`[manifest] ${dot.name} contract exports are unreadable`)
+  }
+  const surfaces = surfaceModule['surfaces']
+  if (!surfaces.every(isSurface)) {
+    throw new Error(`[manifest] ${dot.name} surfaces[] contains an invalid surface`)
+  }
+  assertSurfaceTagsMatch(dot, surfaces)
+  const document = {
+    name: dot.name,
+    build,
+    bundle: {
+      file: dot.bundle,
+      hashedFile,
+      bytes: source.byteLength,
+      gzipBytes: gzipSync(source).byteLength,
+    },
+    service: {
+      localPort: dot.port,
+      ...(dot.deployedApiUrl === undefined
+        ? {}
+        : { deployedApiUrl: dot.deployedApiUrl }),
+    },
+    tags: surfaces.map(surface => ({
+      tag: surface.tag,
+      attributes: Object.entries(surface.attributes).map(([name, spec]) =>
+        manifestAttribute(name, spec),
+      ),
+      events: Object.entries(surface.events).map(([name, event]) => ({
+        name,
+        payload: {
+          ref: eventRef(dot.name, name, event.payload, contractModule),
+        },
+        ...(event.description === undefined
+          ? {}
+          : { description: event.description }),
+      })),
+    })),
+  }
+  writeFileSync(
+    resolve(dist, `${dot.name}.manifest.json`),
+    `${JSON.stringify(document, null, 2)}\n`,
+  )
+  console.log(`[manifest] ${dot.name}@${build} → dist/${dot.name}.manifest.json`)
+}

package/templates/base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun", "node", "vite/client"]
+  },
+  "include": ["types.d.ts", "host/**/*", "microdots/**/*", "scripts/**/*", "tests/**/*"]
+}

package/templates/base/types.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css?inline' {
+  const css: string
+  export default css
+}
+
+declare module 'virtual:microdots-registry' {
+  import type { MicroDotRegistry } from '@bespokeagentics/microdots-host'
+  export const registry: MicroDotRegistry
+}

package/templates/base/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    include: ['**/*.test.ts'],
+  },
+})

package/templates/plain/host/src/styles.css

@@ -0,0 +1,46 @@
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+
+html { background: var(--surface-page); color: var(--text-primary); }
+body {
+  margin: 0;
+  min-width: 20rem;
+  min-height: 100vh;
+  font-family: var(--font-body);
+  background: var(--surface-page);
+}
+
+.shell-header,
+.shell-nav,
+main,
+.shell-footer { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
+
+.shell-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-block: 2.5rem 1.5rem;
+}
+.shell-header h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.05; }
+.shell-kicker { margin: 0 0 0.5rem; color: var(--text-accent); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); font-size: var(--fs-caption); }
+.theme-control { display: grid; gap: 0.35rem; color: var(--text-secondary); font-size: var(--fs-label); }
+.theme-control select { color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0.6rem 2rem 0.6rem 0.75rem; }
+
+.shell-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
+.shell-nav__link { color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; }
+.shell-nav__link:hover { color: var(--text-primary); background: var(--int-hover); }
+.shell-nav__link[aria-current='page'] { color: var(--text-accent); background: var(--int-active); font-weight: var(--fw-semibold); }
+
+main { padding-block: 1.5rem 3rem; }
+.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
+.route-section { display: contents; }
+.microdot-slot { min-width: 0; }
+.microdot-slot > * { display: block; }
+
+.placeholder { min-height: 14rem; display: grid; place-content: center; gap: 0.5rem; padding: 2rem; text-align: center; color: var(--text-secondary); background: var(--surface-default); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }
+.placeholder h2, .placeholder p { margin: 0; }
+.placeholder--error { color: var(--status-error-fg); border-color: var(--status-error-border); background: var(--status-error-bg); }
+
+.shell-footer { padding-block: 1rem 2rem; color: var(--text-muted); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--fs-mono-sm); }

package/templates/plain/host/vite.config.template.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import { hostConfig } from './vite.base.ts'
+
+export default defineConfig(hostConfig())

package/templates/plain/microdots/pulse/src/styles.css

@@ -0,0 +1,17 @@
+@import './tokens.css';
+
+.starter-card { font-family: var(--font-body); color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem; display: grid; gap: 1rem; }
+.starter-card h2 { margin: 0; color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-display-m); }
+.starter-card header, .starter-card footer { display: grid; gap: 0.5rem; }
+.starter-card footer { grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--border-subtle); padding-top: 1rem; color: var(--text-muted); font-size: var(--fs-caption); }
+.starter-card__body { min-height: 8rem; display: grid; align-content: center; gap: 0.75rem; padding: 1rem; background: var(--surface-raised); border-radius: var(--radius-md); }
+.microdot-overline, .microdot-note, .microdot-state { margin: 0; }
+.microdot-overline { color: var(--text-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; }
+.microdot-note { color: var(--text-secondary); font-size: var(--fs-body-s); line-height: 1.5; }
+.microdot-state { color: var(--text-primary); font-weight: var(--fw-medium); }
+.microdot-state--error { color: var(--status-error-fg); }
+.microdot-action { font: inherit; cursor: pointer; color: var(--text-on-brand); background: var(--accent-fill); border: 0; border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; }
+.microdot-action:hover { background: var(--accent-fill-hover); }
+.pulse__field { display: flex; justify-content: space-between; gap: 1rem; }
+.pulse__label { color: var(--text-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; }
+.pulse__value { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-caption); text-align: right; word-break: break-all; }

package/templates/plain/microdots/pulse/vite.config.template.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import { dotConfig } from '../../scripts/dot-vite.ts'
+
+export default defineConfig(dotConfig(import.meta.dirname))

package/templates/plain/microdots/scope-picker/src/styles.css

@@ -0,0 +1,19 @@
+@import './tokens.css';
+
+.starter-card { font-family: var(--font-body); color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem; display: grid; gap: 1rem; }
+.starter-card h2 { margin: 0; color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-display-m); }
+.starter-card header, .starter-card footer { display: grid; gap: 0.5rem; }
+.starter-card footer { grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--border-subtle); padding-top: 1rem; color: var(--text-muted); font-size: var(--fs-caption); }
+.starter-card__body { min-height: 8rem; display: grid; align-content: center; gap: 0.75rem; padding: 1rem; background: var(--surface-raised); border-radius: var(--radius-md); }
+.microdot-overline, .microdot-note, .microdot-state { margin: 0; }
+.microdot-overline { color: var(--text-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; }
+.microdot-note { color: var(--text-secondary); font-size: var(--fs-body-s); line-height: 1.5; }
+.microdot-state { color: var(--text-primary); font-weight: var(--fw-medium); }
+.microdot-state--error { color: var(--status-error-fg); }
+.microdot-action, .scope-picker__choice { font: inherit; cursor: pointer; border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; }
+.microdot-action { color: var(--text-on-brand); background: var(--accent-fill); border: 0; }
+.microdot-action:hover { background: var(--accent-fill-hover); }
+.scope-picker__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.scope-picker__choice { color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-default); }
+.scope-picker__choice:hover { background: var(--int-hover); }
+.scope-picker__choice--selected { background: var(--int-active); border-color: var(--accent-fill); }

package/templates/plain/microdots/scope-picker/vite.config.template.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import { dotConfig } from '../../scripts/dot-vite.ts'
+
+export default defineConfig(dotConfig(import.meta.dirname))

package/templates/plain/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "workspaces": ["host", "microdots/*"],
+  "scripts": {
+    "dev": "bun scripts/dev.ts",
+    "build": "bun scripts/build.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint host microdots scripts",
+    "test": "vitest run",
+    "tokens:check": "bun scripts/check-tokens.ts",
+    "check": "bun run typecheck && bun run lint && bun run test && bun run tokens:check"
+  },
+  "dependencies": {
+    "@bespokeagentics/microdots-authoring": "0.1.1",
+    "@bespokeagentics/microdots-element": "0.1.1",
+    "@bespokeagentics/microdots-host": "0.1.1",
+    "@bespokeagentics/microdots-runtime": "0.1.1",
+    "@bespokeagentics/microdots-theme": "0.1.1",
+    "@effect/platform-node": "4.0.0-rc.108",
+    "effect": "4.0.0-rc.108",
+    "foldkit": "^0.144.0"
+  },
+  "devDependencies": {
+    "@bespokeagentics/microdots-vite-plugin": "0.1.1",
+    "@types/bun": "^1.3.14",
+    "@types/node": "^26.2.0",
+    "happy-dom": "^20.10.4",
+    "oxlint": "^1.78.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "@effect/platform-node-shared": "4.0.0-rc.108"
+  }
+}

package/templates/tailwind/host/src/styles.css

@@ -0,0 +1,28 @@
+@import 'tailwindcss';
+@import '@bespokeagentics/microdots-theme/theme.css';
+@source './';
+
+[hidden] { display: none !important; }
+
+@layer components {
+  html { @apply bg-surface-page text-fg; }
+  body { @apply m-0 min-h-screen min-w-80 bg-surface-page font-body; }
+  .shell-header, .shell-nav, main, .shell-footer { @apply mx-auto w-[min(72rem,calc(100%-2rem))]; }
+  .shell-header { @apply flex flex-wrap items-end justify-between gap-4 py-10 pb-6; }
+  .shell-header h1 { @apply m-0 text-[clamp(1.8rem,5vw,3.4rem)] leading-tight; }
+  .shell-kicker { @apply mb-2 mt-0 text-caption font-semibold uppercase tracking-wider text-fg-accent; }
+  .theme-control { @apply grid gap-1.5 text-label text-fg-muted; }
+  .theme-control select { @apply rounded-sm border border-border bg-surface px-3 py-2 text-fg; }
+  .shell-nav { @apply flex flex-wrap gap-1.5 border-b border-border-subtle pb-6; }
+  .shell-nav__link { @apply rounded-sm px-3 py-2 text-fg-muted no-underline hover:bg-int-hover hover:text-fg; }
+  .shell-nav__link[aria-current='page'] { @apply bg-int-active font-semibold text-fg-accent; }
+  main { @apply py-6 pb-12; }
+  .route-grid { @apply grid items-start gap-4; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
+  .route-section { display: contents; }
+  .microdot-slot { @apply min-w-0; }
+  .microdot-slot > * { @apply block; }
+  .placeholder { @apply grid min-h-56 place-content-center gap-2 rounded-lg border border-dashed border-border bg-surface p-8 text-center text-fg-muted; }
+  .placeholder h2, .placeholder p { @apply m-0; }
+  .placeholder--error { @apply border-status-error-border bg-status-error-bg text-status-error-fg; }
+  .shell-footer { @apply border-t border-border-subtle py-4 pb-8 font-mono text-mono-sm text-fg-subtle; }
+}

package/templates/tailwind/host/vite.config.template.ts

@@ -0,0 +1,5 @@
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+import { hostConfig } from './vite.base.ts'
+
+export default defineConfig(hostConfig(tailwindcss()))