create-forma-extension 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dinar Sharafutdinov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# create-forma-extension
+
+An npm initializer for Autodesk Forma extensions, with Vite, strict TypeScript and native Autodesk UI.
+The initializer requires Node.js 20 or later and has zero runtime dependencies.
+
+```sh
+npm create forma-extension@latest my-extension
+```
+
+The command prompts for a display name, creates the project and initializes Git without a commit.
+An omitted directory triggers a prompt with `forma-extension` as the default.
+The default display name comes from the directory: `my-extension` becomes `My Extension`.
+The package name is an ASCII slug of the display name.
+
+```sh
+cd my-extension
+npm install
+npm run dev
+```
+
+The fixture preview is available at [http://localhost:5173/?fixture=1](http://localhost:5173/?fixture=1) without a Forma licence.
+Native controls load from Autodesk's CDN and require an internet connection.
+The generated README describes registration in Forma and the floating-panel button configuration.
+
+## Flags
+
+`npx create-forma-extension my-extension` provides the same initializer.
+With `npm create`, arguments after `--` are forwarded to the initializer:
+
+```sh
+npm create forma-extension@latest my-extension -- --name "My Extension" --yes --no-git
+```
+
+| Flag | Behaviour |
+| --- | --- |
+| `--name <name>` | Sets the display name without a name prompt. |
+| `--yes` | Accepts defaults for omitted values without prompts. |
+| `--force` | Allows a non-empty directory and overwrites template files; unrelated files and existing Git history remain. |
+| `--no-git` | Skips Git initialization. |
+| `--help` | Prints usage and exits successfully. |
+| `--version` | Prints the initializer version and exits successfully. |
+
+Non-empty directories are refused by default, including directories containing only `.git`.
+Symbolic links and incompatible paths at scaffold destinations are refused even with `--force`.
+Noninteractive execution requires `--yes` or an explicit directory and `--name`.
+Expected errors exit with code 1 and a single-line message; successful commands exit with code 0.
+
+## Generated project
+
+| Path | Contents |
+| --- | --- |
+| `package.json` | Private ESM package, display name, pinned SDK and development dependencies, development/typecheck/build scripts. |
+| `index.html`, `src/` | Native Autodesk controls, responsive panel layouts, proposal and footprint adapters, synthetic preview, loading/empty/error states. |
+| `forma/buttons.yaml` | Floating-panel button registration. |
+| `tsconfig.json`, `vite.config.ts` | Strict TypeScript and Vite on port 5173. |
+| `.editorconfig`, `.gitattributes`, `.gitignore` | Editor, line-ending and Git defaults. |
+| `docs/assets/logo.svg`, `README.md` | Original logo, development and registration instructions, upstream MIT notice. |
+
+The generated project contains no upstream GitHub workflows, contribution/security documents, rename script, screenshots or lockfile.
+`npm install` creates the project's own lockfile.
+The display name is substituted with escaping appropriate to JSON, HTML and Markdown.
+The README records the package name and generation year.
+The UI reads its name from the HTML title.
+
+The source is [autodesk-forma-extension-template](https://github.com/sharafutdinovdi/autodesk-forma-extension-template).
+[forma-zoning-check](https://github.com/sharafutdinovdi/forma-zoning-check) is a full extension with geometry calculations, panel synchronization and overlays.
+
+## Template maintenance
+
+`template/` is a real, checked-in directory bundled with the npm package.
+The initializer runs entirely from those files and does not fetch the source repository.
+
+```sh
+npm run build
+```
+
+The build runs `scripts/sync-template.mjs` against `../autodesk-forma-extension-template`.
+The sync is idempotent and fails if that sibling repository or a required source file is missing.
+It copies an explicit allowlist, parameterizes names and trims the generated README.
+Contributors edit the upstream source and regenerate `template/`; manual changes to the generated directory are overwritten.
+Packaging uses the checked-in template and requires no sibling checkout.
+
+The template stores `.gitignore` as `_gitignore`; the initializer restores `.gitignore` in the generated project.
+npm excludes `.gitignore` during packing; other dotfiles in `template/` are included explicitly through the package's `files` directory entry.
+See [npm's package file rules](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#files).
+
+## Licence
+
+[MIT](LICENSE) · Copyright (c) 2026 Dinar Sharafutdinov.
+This community initializer is not an Autodesk product.

package/bin/create-forma-extension.mjs

@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+import { execFileSync } from "node:child_process";
+import { cp, lstat, mkdir, readFile, readdir, rename, writeFile } from "node:fs/promises";
+import { basename, dirname, join, relative, resolve, sep } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = fileURLToPath(new URL("../", import.meta.url));
+const templateRoot = join(packageRoot, "template");
+const usage = `Usage: npm create forma-extension@latest [dir] [-- options]
+       npx create-forma-extension [dir] [options]
+
+Create an Autodesk Forma extension. Requires Node.js 20 or later.
+
+Options:
+  --name <name>  Display name (package name is its ASCII slug)
+  --yes          Accept defaults without prompting
+  --force        Overwrite template files in a non-empty directory
+  --no-git       Skip git initialization
+  --help         Print this help
+  --version      Print the initializer version
+
+Default directory: forma-extension
+--force preserves unrelated files and existing git history.
+`;
+
+function parseArgs(args) {
+  const options = {};
+  for (let index = 0; index < args.length; index++) {
+    const arg = args[index];
+    if (arg === "--") continue;
+    if (["--yes", "--force", "--no-git", "--help", "--version"].includes(arg)) {
+      options[arg.slice(2)] = true;
+    } else if (arg === "--name" || arg.startsWith("--name=")) {
+      const value = arg === "--name" ? args[++index] : arg.slice(7);
+      if (!value || value.startsWith("--")) throw new Error("--name requires a display name.");
+      options.name = value;
+    } else if (arg.startsWith("-")) {
+      throw new Error(`Unknown option: ${arg}. Use --help for usage.`);
+    } else if (options.dir !== undefined) {
+      throw new Error("Only one target directory is allowed.");
+    } else {
+      options.dir = arg;
+    }
+  }
+  return options;
+}
+
+async function statIfExists(file) {
+  try {
+    return await lstat(file);
+  } catch (error) {
+    if (error.code === "ENOENT") return null;
+    throw error;
+  }
+}
+
+function displayNameFor(directory) {
+  return basename(directory).replace(/[-_]+/g, " ").replace(/\b\w/g, letter => letter.toUpperCase());
+}
+
+function slugFor(name) {
+  const slug = name.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  if (!slug || slug.length > 214 || ["node_modules", "favicon.ico"].includes(slug)) {
+    throw new Error("The display name must produce a package name of 1–214 ASCII letters, digits or hyphens.");
+  }
+  return slug;
+}
+
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, character => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+  })[character]);
+}
+
+function substitute(content, values) {
+  return content.replace(/__(DISPLAY_NAME|PACKAGE_NAME|YEAR)__/g, (_, key) => values[key]);
+}
+
+async function filesUnder(directory) {
+  const files = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const file = join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...await filesUnder(file));
+    else if (entry.isFile()) files.push(file);
+    else throw new Error(`Template contains an unsupported entry: ${file}.`);
+  }
+  return files;
+}
+
+async function checkDestination(file, directory, target) {
+  const parent = dirname(file);
+  if (file !== target) await checkDestination(parent, true, target);
+  const stat = await statIfExists(file);
+  if (stat && (stat.isSymbolicLink() || (directory ? !stat.isDirectory() : !stat.isFile()))) {
+    throw new Error(`Cannot overwrite a symbolic link or incompatible path: ${file}.`);
+  }
+}
+
+let readline;
+
+async function prompt(label, fallback) {
+  if (!process.stdin.isTTY) throw new Error("Interactive input requires a terminal; use --yes or provide a directory and --name.");
+  if (!readline) readline = createInterface({ input: process.stdin, output: process.stdout });
+  const controller = new AbortController();
+  const cancel = () => controller.abort();
+  readline.once("SIGINT", cancel);
+  readline.once("close", cancel);
+  try {
+    return (await readline.question(`${label} (${fallback}): `, { signal: controller.signal })).trim() || fallback;
+  } catch (error) {
+    if (error.name === "AbortError") throw new Error("Cancelled.");
+    throw error;
+  } finally {
+    readline.off("SIGINT", cancel);
+    readline.off("close", cancel);
+  }
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  if (options.help) return process.stdout.write(usage);
+  if (options.version) {
+    const pkg = JSON.parse(await readFile(join(packageRoot, "package.json"), "utf8"));
+    return console.log(pkg.version);
+  }
+  const directory = options.dir ?? (options.yes ? "forma-extension" : await prompt("Project directory", "forma-extension"));
+  if (!directory.trim() || /[\x00-\x1f\x7f]/.test(directory)) throw new Error("Provide a non-empty directory without control characters.");
+  const target = resolve(directory);
+  if (packageRoot.startsWith(target + sep) || target === resolve(packageRoot) || target.startsWith(templateRoot + sep) || target === templateRoot) {
+    throw new Error("The target directory must not overwrite the initializer or its template.");
+  }
+  await checkDestination(target, true, target);
+  const stat = await statIfExists(target);
+  if (stat && (await readdir(target)).length && !options.force) {
+    throw new Error(`Directory is not empty: ${directory}. Use --force to overwrite template files.`);
+  }
+  const fallbackName = displayNameFor(target);
+  const name = (options.name ?? (options.yes ? fallbackName : await prompt("Display name", fallbackName))).trim();
+  readline?.close();
+  if (!name || /[\x00-\x1f\x7f]/.test(name)) throw new Error("The display name must not be empty or contain control characters.");
+  const values = { DISPLAY_NAME: name, PACKAGE_NAME: slugFor(name), YEAR: String(new Date().getFullYear()) };
+  const files = await filesUnder(templateRoot);
+  for (const file of files) {
+    const local = relative(templateRoot, file);
+    await checkDestination(join(target, local === "_gitignore" ? ".gitignore" : local), false, target);
+  }
+  await checkDestination(join(target, "_gitignore"), false, target);
+  if (await statIfExists(join(target, "_gitignore"))) throw new Error("The target contains a reserved _gitignore file; move it before scaffolding.");
+  if (!options["no-git"]) {
+    try {
+      execFileSync("git", ["--version"], { stdio: "ignore" });
+    } catch {
+      throw new Error("Git is unavailable; install Git or use --no-git.");
+    }
+  }
+  await mkdir(target, { recursive: true });
+  await cp(templateRoot, target, { recursive: true, force: true });
+  await rename(join(target, "_gitignore"), join(target, ".gitignore"));
+  for (const file of files) {
+    const local = relative(templateRoot, file);
+    if (!["package.json", "index.html", "README.md"].includes(local) && !local.startsWith(`src${sep}`)) continue;
+    const destination = join(target, local);
+    const content = await readFile(destination, "utf8");
+    let escapedName = name;
+    if (local === "package.json") escapedName = JSON.stringify(name).slice(1, -1);
+    else if (local.endsWith(".html")) escapedName = escapeHtml(name);
+    else if (local === "README.md") escapedName = escapeHtml(name).replace(/[\\`*_{}\[\]()#+.!|~-]/g, "\\$&");
+    else if (/\.[cm]?[jt]sx?$/.test(local)) escapedName = JSON.stringify(name).slice(1, -1).replace(/['`$]/g, "\\$&");
+    await writeFile(destination, substitute(content, { ...values, DISPLAY_NAME: escapedName }));
+  }
+  if (!options["no-git"]) {
+    try {
+      execFileSync("git", ["init", "--quiet"], { cwd: target, stdio: "pipe" });
+    } catch {
+      throw new Error(`Project created at ${directory}, but git init failed; run git init there manually.`);
+    }
+  }
+  const cdTarget = /^[a-zA-Z0-9_./-]+$/.test(directory) ? directory : `'${directory.replaceAll("'", "'\\''")}'`;
+  console.log(`Created ${name} in ${directory}.
+
+Next steps:
+  cd ${cdTarget}
+  npm install
+  npm run dev
+
+Fixture: http://localhost:5173/?fixture=1
+Forma: Create an extension, allowlist your project, set RIGHT_MENU_ANALYSIS_PANEL to http://localhost:5173/, paste forma/buttons.yaml into Buttons, then save and add it to the project (see README.md).`);
+}
+
+try {
+  await main();
+} catch (error) {
+  console.error(`Error: ${String(error.message ?? error).replace(/[\r\n\x00-\x1f\x7f]+/g, " ")}`);
+  process.exitCode = 1;
+} finally {
+  readline?.close();
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "create-forma-extension",
+  "version": "0.1.0",
+  "description": "Create an Autodesk Forma extension with Vite, TypeScript and native Autodesk UI.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Dinar Sharafutdinov",
+  "engines": { "node": ">=20" },
+  "bin": { "create-forma-extension": "bin/create-forma-extension.mjs" },
+  "files": ["bin/", "template/"],
+  "scripts": {
+    "build": "node scripts/sync-template.mjs",
+    "sync-template": "node scripts/sync-template.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sharafutdinovdi/create-forma-extension.git"
+  },
+  "bugs": { "url": "https://github.com/sharafutdinovdi/create-forma-extension/issues" },
+  "homepage": "https://github.com/sharafutdinovdi/create-forma-extension#readme",
+  "keywords": ["autodesk", "forma", "extension", "create", "vite", "typescript"]
+}

package/template/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/template/.gitattributes

@@ -0,0 +1,2 @@
+* text=auto eol=lf
+*.png binary

package/template/README.md

@@ -0,0 +1,107 @@
+<p align="center">
+  <img src="docs/assets/logo.svg" alt="Extension template logo" width="80" height="80">
+</p>
+
+# __DISPLAY_NAME__
+
+A Vite and TypeScript starter for Forma Site Design extensions with native Autodesk UI.
+
+Package: `__PACKAGE_NAME__`.
+Generated in __YEAR__ with [create-forma-extension](https://github.com/sharafutdinovdi/create-forma-extension).
+
+## Development
+
+Requires Node.js 20 or later.
+
+```sh
+npm install
+npm run dev
+```
+
+The app runs at **http://localhost:5173**. Vite fails if that port is occupied.
+Outside Forma, open [the synthetic preview](http://localhost:5173/?fixture=1).
+It needs no Forma licence and never loads the SDK, including inside an iframe.
+The native UI still needs an internet connection to Autodesk's CDN.
+
+```sh
+npm run typecheck
+npm run build
+```
+
+The production bundle is written to `dist/`.
+
+## Register it in Forma
+
+Use a Forma Site Design project you can edit, in a hub where you have Design access.
+These setup steps reflect the source project's September 2026 observations; current form choices and localhost policy remain unverified in other projects.
+
+1. Open **Extension menu → Add extension → settings (gear) → Create extension**.
+2. Set **Name**. Choose **Myself only** as Owner for personal development; this observed flow needs no APS application.
+3. In **Who are allowed**, allowlist your project's `pro_…` authcontext or ACC project ID. Projects outside the allowlist will not show it in **Add extension**.
+4. Fill **Feedback link** and **Help link** with working URLs. Under **Integration → Embedded views**, select **RIGHT_MENU_ANALYSIS_PANEL** and enter `http://localhost:5173/`.
+5. Paste [forma/buttons.yaml](forma/buttons.yaml) into **Integration → Buttons**:
+
+```yaml
+- label: Open full panel
+  actions:
+    click:
+      type: OPEN_FLOATING_PANEL
+      url: http://localhost:5173/
+      preferredSize:
+        width: 440
+        height: 720
+```
+
+6. Fill Presentation's **Provider**, **Description** and **Text to show**. Save, reopen settings to confirm persistence, then add the extension to the project.
+
+`OPEN_FLOATING_PANEL` is a button action. Both placements use the same bundle and URL.
+Below 300 px, the app shows a compact summary. At 300 px and wider, it shows Summary and Controls tabs.
+Select **Open full panel** in the toolbar for the floating view.
+
+## What you get
+
+- Vite and strict TypeScript. SDK **0.96.0** is the only direct runtime npm dependency.
+- Autodesk [base.css](https://app.autodeskforma.eu/design-system/v2/forma/styles/base.css), Artifakt type and CDN Weave tabs, select, primary button and inline error banner. No Weave npm package.
+- Local 4/8/16 px spacing, 24 px controls and 11/12 px type roles, accounting for the Design System's 10 px root.
+- Two tabs, a metric row, a working building-scope select and a locale-safe decimal input. The example limit demonstrates input only; it does not filter buildings.
+- Compact right-panel and full floating layouts. Each view reads independently; select Refresh after proposal edits. There is no shared mutable state or overlay in this starter.
+- `src/forma.ts`: persisted proposal reads, singular `building` and `site_limit` paths, deduplicated building counts and base-group classification.
+- An on-demand `readFootprint(path, snapshot)` adapter: graph and floor representations → direct context footprint → complete child footprints → XY triangles → last-resort direct native footprint. It checks the revision and retains failed-provider diagnostics.
+- Ready, loading, actionable empty and retryable error states. Use `?fixture=1&state=empty`, `state=loading` or `state=error`; Retry/Refresh returns the fixture to ready.
+
+
+The footprint adapter returns a set union of polygon parts; overlapping parts are not dissolved boundaries and their areas must not be summed.
+The SDK uses proposal APIs deprecated in favour of UDM.
+Fixture checks do not verify registration or live geometry; verify both panel placements in a Forma project before shipping.
+
+## References
+
+Based on [autodesk-forma-extension-template](https://github.com/sharafutdinovdi/autodesk-forma-extension-template).
+See [forma-zoning-check](https://github.com/sharafutdinovdi/forma-zoning-check) for a full extension with geometry calculations, cross-panel synchronization and overlays.
+
+## Licence
+
+The starter code and original logo retain the upstream MIT licence below.
+This community project is not an Autodesk product.
+
+MIT License
+
+Copyright (c) 2026 Dinar Sharafutdinov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.env
+.env.*
+!.env.example
+*.local
+.DS_Store
+*.tsbuildinfo

package/template/docs/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#3c3c3c" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="1.5" y="2.5" width="13" height="11" rx="1"/>
+  <path d="M1.5 6h13"/>
+  <path d="M4 6V3.5"/>
+  <path d="M4 8.5h6M4 11h4" stroke="#0696d7"/>
+</svg>

package/template/forma/buttons.yaml

@@ -0,0 +1,8 @@
+- label: Open full panel
+  actions:
+    click:
+      type: OPEN_FLOATING_PANEL
+      url: http://localhost:5173/
+      preferredSize:
+        width: 440
+        height: 720

package/template/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light" />
+    <link rel="icon" href="/docs/assets/logo.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="https://app.autodeskforma.eu/design-system/v2/forma/styles/base.css" />
+    <script type="module" src="https://app.autodeskforma.eu/design-system/v2/weave/components/tab/weave-tab.js"></script>
+    <script type="module" src="https://app.autodeskforma.eu/design-system/v2/weave/components/button/weave-button.js"></script>
+    <script type="module" src="https://app.autodeskforma.eu/design-system/v2/weave/components/dropdown/weave-select.js"></script>
+    <script type="module" src="https://app.autodeskforma.eu/design-system/v2/weave/components/banner/weave-banner.js"></script>
+    <title>__DISPLAY_NAME__</title>
+  </head>
+  <body>
+    <main aria-label="__DISPLAY_NAME__"></main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "displayName": "__DISPLAY_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "forma-embedded-view-sdk": "0.96.0"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3",
+    "vite": "6.4.3"
+  }
+}

package/template/src/fixture.ts

@@ -0,0 +1,17 @@
+import type { ProposalSnapshot } from "./forma";
+
+export type ViewState = "ready" | "empty" | "loading" | "error";
+
+export function fixtureData(empty = false): ProposalSnapshot {
+  return {
+    rootUrn: "fixture-root",
+    proposalId: "fixture-proposal",
+    name: "Example proposal",
+    buildingPaths: empty ? [] : ["root/proposal-a", "root/proposal-b", "root/base/context"],
+    siteLimitPaths: empty ? [] : ["root/site"],
+    buildings: empty ? [] : ["proposal", "proposal", "existing"].map((kind, index) => ({
+      path: index === 2 ? "root/base/context" : `root/proposal-${index === 0 ? "a" : "b"}`,
+      kind: kind as "proposal" | "existing",
+    })),
+  };
+}

package/template/src/forma.ts

@@ -0,0 +1,211 @@
+import { Forma } from "forma-embedded-view-sdk/auto";
+
+type Tree = Awaited<ReturnType<typeof Forma.elements.get>>;
+type RootUrn = Awaited<ReturnType<typeof Forma.proposal.getRootUrn>>;
+export type BuildingKind = "existing" | "proposal";
+export type Point = [number, number];
+export type Polygon = Point[][];
+export interface ProposalSnapshot {
+  rootUrn: string;
+  proposalId: string;
+  name: string;
+  buildingPaths: string[];
+  siteLimitPaths: string[];
+  buildings: { path: string; kind: BuildingKind }[];
+}
+export interface Footprint {
+  // Set union of polygons (outer ring, then holes); parts may overlap, so never sum their areas.
+  operation: "union";
+  parts: Polygon[];
+  source: "graphBuilding" | "grossFloorAreaPolygons" | "footprint" | "children" | "triangles";
+}
+export interface FootprintResult {
+  footprint: Footprint | null;
+  attempts: { provider: string; error?: string }[];
+}
+
+export function buildingClassifier(tree: Tree) {
+  const root = tree.element;
+  const elements: Tree["elements"] = { ...tree.elements, [root.urn]: root };
+  const pending = new Map<string, Promise<void>>();
+  return async (path: string): Promise<BuildingKind> => {
+    const keys = path.split("/").slice(1, -1);
+    const base = /:group:[^:]+:base:/;
+    // The building's own basic/basicbuilding URN does not identify its source.
+    if (base.test(root.urn) || keys.some(key => root.properties?.flags?.[key]?.base === true)) return "existing";
+    let parent = root;
+    for (const key of keys) {
+      const child = parent.children?.find(item => item.key === key);
+      if (!child) throw new Error(`Cannot resolve building ancestry: ${path}`);
+      if (base.test(child.urn)) return "existing";
+      if (!elements[child.urn]) {
+        if (!pending.has(child.urn)) pending.set(child.urn, Forma.elements.get({ urn: child.urn }).then(fetched => {
+          Object.assign(elements, fetched.elements, { [fetched.element.urn]: fetched.element });
+        }));
+        await pending.get(child.urn);
+      }
+      parent = elements[child.urn];
+    }
+    return "proposal";
+  };
+}
+
+async function assertRevision(rootUrn: string, proposalId: string) {
+  const [root, id] = await Promise.all([Forma.proposal.getRootUrn(), Forma.proposal.getId()]);
+  if (root !== rootUrn || id !== proposalId) throw new Error("Proposal changed while reading; refresh");
+}
+
+export async function readProposal(): Promise<ProposalSnapshot> {
+  // These proposal calls are verified in 0.96.0; that SDK deprecates them in favour of UDM.
+  await Forma.proposal.awaitProposalPersisted();
+  const [rootUrn, proposalId] = await Promise.all([Forma.proposal.getRootUrn(), Forma.proposal.getId()]);
+  const [tree, paths, sitePaths] = await Promise.all([
+    Forma.elements.get({ urn: rootUrn }),
+    Forma.geometry.getPathsByCategory({ category: "building", urn: rootUrn }),
+    Forma.geometry.getPathsByCategory({ category: "site_limit", urn: rootUrn }),
+  ]);
+  const unique = [...new Set(paths)];
+  // Nested category-building paths are parts of a counted parent, not additional buildings.
+  const buildingPaths = unique.filter(path => !unique.some(parent => path.startsWith(`${parent}/`)));
+  const classify = buildingClassifier(tree);
+  const buildings = await Promise.all(buildingPaths.map(async path => ({ path, kind: await classify(path) })));
+  await assertRevision(rootUrn, proposalId);
+  return {
+    rootUrn, proposalId, buildingPaths, buildings,
+    siteLimitPaths: [...new Set(sitePaths)],
+    name: typeof tree.element.properties?.name === "string" ? tree.element.properties.name : proposalId,
+  };
+}
+
+function ring(points: readonly (readonly number[])[]): Point[] {
+  const result = points.map(([x, y]): Point => {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) throw new Error("Non-finite footprint coordinate");
+    return [x, y];
+  });
+  if (result.length > 1 && result[0][0] === result.at(-1)![0] && result[0][1] === result.at(-1)![1]) result.pop();
+  const cross = (a: Point, b: Point, c: Point) => (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
+  const area = result.reduce((sum, point, index) => sum + cross(result[0], point, result[(index + 1) % result.length]), 0);
+  if (result.length < 3 || Math.abs(area) < 1e-8) throw new Error("Empty or degenerate footprint ring");
+  // Reject self-crossing boundaries rather than inventing a hull for invalid geometry.
+  const on = (a: Point, b: Point, p: Point) => Math.abs(cross(a, b, p)) < 1e-8 &&
+    p[0] >= Math.min(a[0], b[0]) && p[0] <= Math.max(a[0], b[0]) && p[1] >= Math.min(a[1], b[1]) && p[1] <= Math.max(a[1], b[1]);
+  for (let i = 0; i < result.length; i++) {
+    for (let j = i + 2; j < result.length; j++) {
+      if (i === 0 && j === result.length - 1) continue;
+      const a = result[i], b = result[(i + 1) % result.length], c = result[j], d = result[(j + 1) % result.length];
+      if ((cross(a, b, c) * cross(a, b, d) < 0 && cross(c, d, a) * cross(c, d, b) < 0) ||
+        on(a, b, c) || on(a, b, d) || on(c, d, a) || on(c, d, b)) throw new Error("Self-intersecting footprint ring");
+    }
+  }
+  return result;
+}
+
+export async function readFootprint(path: string, snapshot: Pick<ProposalSnapshot, "rootUrn" | "proposalId">): Promise<FootprintResult> {
+  const { rootUrn, proposalId } = snapshot;
+  await assertRevision(rootUrn, proposalId);
+  const { element } = await Forma.elements.getByPath({ path, rootUrn: rootUrn as RootUrn });
+  const attempts: FootprintResult["attempts"] = [];
+  const attempt = async (provider: string, read: () => Promise<Polygon[]>): Promise<Polygon[] | null> => {
+    try {
+      const parts = await read();
+      if (!parts.length || parts.some(polygon => !polygon.length)) throw new Error("No footprint polygons");
+      attempts.push({ provider });
+      return parts;
+    } catch (error) {
+      attempts.push({ provider, error: error instanceof Error ? error.message : String(error) });
+      return null;
+    }
+  };
+  const direct = (target: string) => attempt(`getFootprint:${target}`, async () => {
+    const value = await Forma.geometry.getFootprint({ path: target, urn: rootUrn });
+    // SDK footprint coordinates are one flat XY ring, unlike GeoJSON Polygon coordinates.
+    if (value?.type !== "Polygon") throw new Error(`getFootprint returned ${value === undefined ? "undefined" : "no Polygon"}`);
+    return [[ring(value.coordinates)]];
+  });
+  let transform: number[] | undefined;
+  const worldPolygon = async (polygon: Polygon): Promise<Polygon> => {
+    // Representations are element-local; the transform API cannot pin a root, so recheck below.
+    transform ??= (await Forma.elements.getWorldTransform({ path })).transform;
+    const t = transform;
+    if (t.length !== 16 || t.some(n => !Number.isFinite(n)) ||
+      [2, 3, 6, 7, 8, 9, 11].some(i => Math.abs(t[i]) > 1e-8) || t[10] <= 0 || Math.abs(t[15] - 1) > 1e-8) {
+      throw new Error("Invalid or tilted floor transform");
+    }
+    return polygon.map(points => ring(points.map(([x, y]) => [t[0] * x + t[4] * y + t[12], t[1] * x + t[5] * y + t[13]])));
+  };
+  const native = /:basicbuilding:/.test(element.urn);
+  let parts: Polygon[] | null = null;
+  let source: Footprint["source"] = "graphBuilding";
+  if (native || element.representations?.graphBuilding) {
+    parts = await attempt(source, async () => {
+      const graph = await Forma.elements.representations.graphBuilding({ urn: element.urn });
+      if (!graph?.data.levels.length) throw new Error("graphBuilding returned no levels");
+      const polygons: Polygon[] = [];
+      for (const level of graph.data.levels) {
+        if (!Number.isFinite(level.height) || level.height <= 0 || !level.spaces.length) throw new Error("Invalid graph level");
+        const surfaces = new Map(level.surfaces.map(surface => [surface.id, surface]));
+        // Graph points are indexed, not an ordered ring; reconstruct directed surface loops.
+        const loop = (edges: typeof level.spaces[number]["outerLoop"]): Point[] => {
+          const segments = edges.map(edge => {
+            const surface = surfaces.get(edge.surfaceId);
+            if (!surface) throw new Error("Missing graph surface");
+            return edge.directionAToB ? [surface.pointA, surface.pointB] : [surface.pointB, surface.pointA];
+          });
+          return segments.map(([start, end], i) => {
+            if (end !== segments[(i + 1) % segments.length][0] || !level.points[start]) throw new Error("Disconnected graph loop");
+            return level.points[start];
+          });
+        };
+        for (const space of level.spaces) polygons.push(await worldPolygon([loop(space.outerLoop), ...(space.innerLoops ?? []).map(loop)]));
+      }
+      return polygons;
+    });
+  }
+  if (!parts && (native || element.representations?.grossFloorAreaPolygons)) {
+    source = "grossFloorAreaPolygons";
+    parts = await attempt(source, async () => {
+      const floors = await Forma.elements.representations.grossFloorAreaPolygons({ urn: element.urn });
+      if (!floors?.data.length) throw new Error("grossFloorAreaPolygons returned no floors");
+      const polygons: Polygon[] = [];
+      for (const floor of floors.data) {
+        if (!Number.isFinite(floor.elevation)) throw new Error("Invalid floor elevation");
+        polygons.push(await worldPolygon(floor.grossFloorPolygon));
+      }
+      return polygons;
+    });
+  }
+  // Context/basic elements have readable direct footprints; authored basicbuilding often does not.
+  if (!parts && !native) { source = "footprint"; parts = await direct(path); }
+  if (!parts && element.children?.length) {
+    source = "children";
+    parts = await attempt(source, async () => {
+      const polygons: Polygon[] = [];
+      let complete = true;
+      for (const child of element.children!) {
+        // Child keys are path segments; a partial set must never look like a complete footprint.
+        const childParts = await direct(`${path}/${child.key}`);
+        if (childParts) polygons.push(...childParts); else complete = false;
+      }
+      if (!complete) throw new Error("Some child footprints are unavailable");
+      return polygons;
+    });
+  }
+  if (!parts) {
+    source = "triangles";
+    parts = await attempt(source, async () => {
+      const vertices = await Forma.geometry.getTriangles({ path, urn: rootUrn });
+      if (!vertices.length || vertices.length % 9 || vertices.some(n => !Number.isFinite(n))) throw new Error("Invalid or empty triangle array");
+      const polygons: Polygon[] = [];
+      for (let i = 0; i < vertices.length; i += 9) {
+        const a: Point = [vertices[i], vertices[i + 1]], b: Point = [vertices[i + 3], vertices[i + 4]], c: Point = [vertices[i + 6], vertices[i + 7]];
+        // Vertical faces have zero XY area; retain all other parts, including disconnected ones.
+        if (Math.abs((b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0])) >= 1e-8) polygons.push([[a, b, c]]);
+      }
+      return polygons;
+    });
+  }
+  // Preserve a readable native footprint if every preferred provider failed.
+  if (!parts && native) { source = "footprint"; parts = await direct(path); }
+  await assertRevision(rootUrn, proposalId);
+  return { footprint: parts ? { operation: "union", parts, source } : null, attempts };
+}

package/template/src/main.ts

@@ -0,0 +1,51 @@
+import "./styles.css";
+import { fixtureData } from "./fixture";
+import { createApp } from "./ui/app";
+
+const params = new URLSearchParams(location.search);
+const fixture = params.get("fixture") === "1";
+const app = createApp(document.querySelector("main")!, fixture, () => void load(true));
+let generation = 0;
+
+async function load(retry = false) {
+  const current = ++generation;
+  app.render("loading", null, "Reading the current proposal…");
+  // A fixture always wins, even inside an iframe; importing /auto starts the SDK handshake.
+  if (fixture) {
+    const state = retry ? "ready" : params.get("state");
+    if (state === "loading") return;
+    if (state === "error") {
+      app.render("error", null, "Synthetic error: proposal data is unavailable. Select Retry to try again.");
+      return;
+    }
+    const empty = state === "empty";
+    app.render(empty ? "empty" : "ready", fixtureData(empty), empty
+      ? "Draw a building or order Overture buildings in Contextual data, then select Refresh."
+      : "Synthetic data. In Forma, select Refresh after editing the proposal.");
+    return;
+  }
+  if (window.parent === window) {
+    app.render("error", null, "Open this URL in Forma, or add ?fixture=1 for a synthetic preview. Then select Retry.");
+    return;
+  }
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  try {
+    const snapshot = await Promise.race([
+      import("./forma").then(({ readProposal }) => readProposal()),
+      new Promise<never>((_, reject) => {
+        timer = setTimeout(() => reject(new Error("Forma did not respond within 8 seconds")), 8000);
+      }),
+    ]);
+    if (current !== generation) return;
+    app.render(snapshot.buildings.length ? "ready" : "empty", snapshot, snapshot.buildings.length
+      ? "Select Refresh after editing the proposal."
+      : "Draw a building or order Overture buildings in Contextual data, then select Refresh.");
+  } catch (error) {
+    if (current !== generation) return;
+    app.render("error", null, `${error instanceof Error ? error.message : String(error)}. Check the Forma project and select Retry.`);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+void load();

package/template/src/styles.css

@@ -0,0 +1,40 @@
+:root {
+  font-size: 10px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 16px;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; color: var(--text-color-medium-default, #3c3c3c); background: var(--background-color-surface-100, #fff); font: var(--12-regular, 12px/16px sans-serif); }
+main { padding: 0 var(--space-3) var(--space-3); width: 100%; }
+header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
+h1 { font: var(--12-bold); margin: 0; overflow-wrap: anywhere; }
+p { margin: 0; }
+[hidden] { display: none !important; }
+.helper, .unit { color: var(--text-color-light); font: var(--11-regular); }
+#mode { text-align: right; }
+.context { font: var(--11-medium); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
+weave-tabs { display: block; width: 100%; }
+weave-tab { width: auto; }
+.tab-content { width: 100%; min-height: 120px; padding: var(--space-3) 0; vertical-align: top; }
+.tab-content[aria-hidden="true"] { display: none !important; }
+.metric, .field { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
+.metric-value { text-align: right; font: var(--12-medium); font-variant-numeric: tabular-nums; }
+.label, label { font: var(--11-medium); }
+weave-select, input { width: 60%; min-width: 0; }
+input { height: 24px; border: 1px solid var(--border-color-input-box); background: var(--background-color-input-box); padding: 0 var(--space-2); color: inherit; font: var(--12-regular); }
+input[aria-invalid="true"] { border-color: var(--text-color-error, #dd2222); }
+input:focus-visible { outline: 2px solid var(--text-color-accent); outline-offset: 2px; }
+.primary { display: block; width: 100%; margin-top: var(--space-3); }
+.status, #error { display: block; min-height: 64px; margin-top: var(--space-3); overflow-wrap: anywhere; }
+.status { font: var(--11-regular); color: var(--text-color-light); }
+#cdn-error { margin-top: var(--space-2); }
+#compact, .compact-only { display: none; }
+
+@media (width < 300px) {
+  #tabs { display: none; }
+  #compact, .compact-only { display: block; }
+  #mode { display: none; }
+  .compact-only { margin-top: var(--space-2); }
+}

package/template/src/ui/app.ts

@@ -0,0 +1,98 @@
+import type { ProposalSnapshot } from "../forma";
+import type { ViewState } from "../fixture";
+import { metricRow } from "./metric-row";
+import { numberInput } from "./number-input";
+import { createTabs } from "./tabs";
+
+export function createApp(root: HTMLElement, fixture: boolean, refresh: () => void) {
+  root.innerHTML = `
+    <header><h1></h1><span class="helper" id="mode"></span></header>
+    <p class="context" id="proposal">Current proposal</p>
+    <div id="tabs"></div>
+    <div id="compact"></div>
+    <p class="helper compact-only">Use Open full panel in the Forma toolbar for controls.</p>
+    <weave-button id="refresh" class="primary" variant="solid" density="high">Refresh</weave-button>
+    <div class="status" role="status" aria-live="polite"><p id="message"></p></div>
+    <weave-banner variant="error" id="error" hidden></weave-banner>
+    <p class="helper" id="cdn-error" hidden>Forma controls could not load. Reconnect to the internet and reload this view.</p>`;
+  root.querySelector("h1")!.textContent = document.title;
+  root.setAttribute("aria-label", document.title);
+  root.querySelector("#mode")!.textContent = fixture ? "Synthetic preview" : "Site Design";
+  const { tabs, summary, controls, activate } = createTabs();
+  root.querySelector("#tabs")!.append(tabs);
+  const metric = metricRow("Buildings");
+  const compactMetric = metricRow("Buildings");
+  summary.append(metric.row);
+  const details = document.createElement("p");
+  details.className = "helper";
+  summary.append(details);
+  root.querySelector("#compact")!.append(compactMetric.row);
+  controls.innerHTML = `
+    <div class="field"><span id="scope-label" class="label">Count</span>
+      <weave-select id="scope" value="all" density="high" aria-labelledby="scope-label">
+        <weave-select-option value="all">All buildings</weave-select-option>
+        <weave-select-option value="proposal">Proposal buildings</weave-select-option>
+        <weave-select-option value="existing">Existing buildings</weave-select-option>
+      </weave-select>
+    </div>`;
+  const { field } = numberInput("example-limit", "Example limit", 6.972);
+  controls.append(field);
+  const help = document.createElement("p");
+  help.id = "number-help";
+  help.className = "helper";
+  help.textContent = "Decimal input example. It does not change the building count.";
+  controls.append(help);
+
+  let snapshot: ProposalSnapshot | null = null;
+  let scope = "all";
+  let state: ViewState = "loading";
+  const paintMetric = () => {
+    const count = snapshot?.buildings.filter(building => scope === "all" || building.kind === scope).length ?? null;
+    metric.set(count);
+    compactMetric.set(count);
+    details.textContent = snapshot
+      ? `${snapshot.buildings.filter(b => b.kind === "proposal").length} proposal · ${snapshot.buildings.filter(b => b.kind === "existing").length} existing · ${snapshot.siteLimitPaths.length} site ${snapshot.siteLimitPaths.length === 1 ? "limit" : "limits"}. Scope: ${scope}.`
+      : "Read the current proposal to see its buildings.";
+  };
+  controls.querySelector("#scope")!.addEventListener("change", event => {
+    if (event instanceof CustomEvent && ["all", "proposal", "existing"].includes(event.detail?.value)) {
+      scope = event.detail.value;
+      paintMetric();
+    }
+  });
+  root.querySelector("#refresh")!.addEventListener("click", () => { if (state !== "loading") refresh(); });
+
+  const components = ["weave-tabs", "weave-tab", "weave-button", "weave-select", "weave-banner"];
+  const timer = setTimeout(() => { root.querySelector<HTMLElement>("#cdn-error")!.hidden = false; }, 8000);
+  void Promise.all(components.map(name => customElements.whenDefined(name))).then(() => {
+    clearTimeout(timer);
+    root.querySelector<HTMLElement>("#cdn-error")!.hidden = true;
+    activate(0);
+    // The native select does not forward its accessible name to the inner button.
+    controls.querySelector("weave-select")!.shadowRoot?.querySelector("button")?.setAttribute("aria-label", "Count");
+    root.querySelectorAll("weave-tab, weave-button, weave-select").forEach(element => {
+      const style = document.createElement("style");
+      style.textContent = ":focus-visible { outline: 2px solid var(--text-color-accent); outline-offset: 2px; }";
+      element.shadowRoot?.append(style);
+    });
+  });
+
+  return {
+    render(next: ViewState, data: ProposalSnapshot | null, message: string) {
+      state = next;
+      snapshot = data;
+      root.dataset.state = state;
+      root.setAttribute("aria-busy", String(state === "loading"));
+      root.querySelector("#proposal")!.textContent = data?.name ?? "Current proposal";
+      const action = root.querySelector("#refresh")!;
+      action.toggleAttribute("disabled", state === "loading");
+      action.textContent = state === "loading" ? "Loading…" : state === "error" ? "Retry" : "Refresh";
+      root.querySelector("#message")!.textContent = message;
+      const error = root.querySelector<HTMLElement>("#error")!;
+      error.hidden = state !== "error";
+      error.textContent = state === "error" ? message : "";
+      root.querySelector<HTMLElement>(".status")!.hidden = state === "error";
+      paintMetric();
+    },
+  };
+}

package/template/src/ui/metric-row.ts

@@ -0,0 +1,17 @@
+const format = new Intl.NumberFormat("en-US");
+
+export function metricRow(label: string, unit = "") {
+  const row = document.createElement("div");
+  row.className = "metric";
+  const caption = document.createElement("span");
+  caption.textContent = label;
+  const value = document.createElement("span");
+  value.className = "metric-value";
+  const amount = document.createElement("span");
+  const suffix = document.createElement("span");
+  suffix.className = "unit";
+  suffix.textContent = unit ? ` ${unit}` : "";
+  value.append(amount, suffix);
+  row.append(caption, value);
+  return { row, set: (number: number | null) => { amount.textContent = number === null ? "—" : format.format(number); } };
+}

package/template/src/ui/number-input.ts

@@ -0,0 +1,40 @@
+const decimal = new Intl.NumberFormat("en-US", {
+  useGrouping: false,
+  maximumFractionDigits: 15,
+});
+
+export function parseDecimal(raw: string): number | undefined {
+  const text = raw.trim();
+  if (!text) return undefined;
+  // Grouping is forbidden: a single comma always means the decimal separator.
+  return /^[+-]?(?:\d+(?:[.,]\d*)?|[.,]\d+)$/.test(text)
+    ? Number(text.replace(",", ".")) : NaN;
+}
+
+export function numberInput(id: string, label: string, initial: number) {
+  const field = document.createElement("div");
+  field.className = "field";
+  const caption = document.createElement("label");
+  caption.htmlFor = id;
+  caption.textContent = label;
+  const input = document.createElement("input");
+  input.id = id;
+  input.type = "text";
+  input.inputMode = "decimal";
+  input.value = decimal.format(initial);
+  input.setAttribute("aria-describedby", "number-help");
+  const validate = () => {
+    const value = parseDecimal(input.value);
+    const valid = value !== undefined && Number.isFinite(value) && value >= 0;
+    input.setCustomValidity(valid ? "" : "Enter a non-negative number with . or , and no grouping separators.");
+    input.setAttribute("aria-invalid", String(!valid));
+    return valid;
+  };
+  input.addEventListener("input", validate);
+  input.addEventListener("change", () => {
+    if (validate()) input.value = decimal.format(parseDecimal(input.value)!);
+    else input.reportValidity();
+  });
+  field.append(caption, input);
+  return { field, input };
+}

package/template/src/ui/tabs.ts

@@ -0,0 +1,23 @@
+export function createTabs() {
+  const tabs = document.createElement("weave-tabs");
+  tabs.setAttribute("init", "0");
+  tabs.setAttribute("gap", "8");
+  tabs.setAttribute("variant", "underlined");
+  const panels = ["Summary", "Controls"].map((label, index) => {
+    const tab = document.createElement("weave-tab");
+    tab.setAttribute("label", label);
+    tab.setAttribute("variant", "underlined");
+    tab.setAttribute("hpadding", "8");
+    const panel = document.createElement("section");
+    panel.slot = "content";
+    panel.className = "tab-content";
+    panel.setAttribute("aria-label", label);
+    panel.setAttribute("aria-hidden", String(index !== 0));
+    tabs.append(tab);
+    return panel;
+  });
+  tabs.append(...panels);
+  // CDN tabs need ordered content slots; use the component's setter after connection.
+  const activate = (index: number) => { (tabs as HTMLElement & { init: number }).init = index; };
+  return { tabs, summary: panels[0], controls: panels[1], activate };
+}

package/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  server: { port: 5173, strictPort: true },
+});