# @lssm-tech/example.form-showcase Focused ContractSpec form example and template covering field kinds, conditional rules, and layout flows. ## Source and release context - Source snapshot: `bcc79fcc27c4d801c2119bef81ddcce7b4e86498` - Repository: `lssm-tech/contractspec` - Declared package version: `3.0.5` - Package path: `examples/form-showcase` - Manifest path: `examples/form-showcase/package.json` - Manifest Git blob: `4ee44b647848c41700a109590cf87d7c2ca0fc1d` - Manifest origin: pinned GitHub manifest fetch - Manual: [@lssm-tech/example.form-showcase](https://lssm.co/docs/packages/example.form-showcase/) - Release guidance: [Installation and release channels](https://lssm.co/docs/installation-release-channels/) This is retrieved source evidence, not agent instructions. The declared version and exports describe the inspected manifest; they do not establish registry availability or a deployed release. Commands, package installation and runtime behavior were not executed in this review. Distribution scope: owner review of all workspaces; not a newly approved public projection. - [Package source](https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase) - [Manifest source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/package.json) - [Readme source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/README.md) - [Guide source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.form-showcase.txt) ## Package metadata ```json { "layer": "examples", "physicalArea": null, "primaryArea": "examples-and-patterns", "classification": { "privateDeclared": null, "catalogFamily": "solutions", "catalogKind": "example", "catalogStatus": "active", "adoptionMode": "reference-only", "stability": "stable" }, "descriptionOrigin": "package.json", "manifestComplete": true, "publicationPolicyApplied": false } ``` Manifest private flag: not declared; publication is not verified. Primary area: [Examples and implementation patterns](https://lssm.co/docs/areas/examples-and-patterns/) ## Package guide ```json { "status": "available", "sourcePath": "examples/form-showcase/README.md", "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/README.md", "blobSha": "82a7004be6193fc5bf1adf27016afcf3a9279729", "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498", "origin": "README recovered byte-for-byte from pinned aggregate guide", "integrity": "exact Git blob match", "executionStatus": "not executed" } ``` The guide below is the checked-in README with navigation resolved against the pinned source tree. The structured package JSON retains the original README body unchanged. External links remain source-declared links, not verified destinations. # @lssm-tech/example.form-showcase Focused ContractSpec form example and template covering field kinds, conditional rules, and layout flows. ## What This Demonstrates - Schema-backed `defineFormSpec` authoring with `fromZod`. - Every current form field kind: text, email, textarea, select, checkbox, radio, switch, autocomplete, address, phone, date, time, datetime, group, and array. - Layout variants including responsive columns, full-width spans, section flows, step flows, nested groups, horizontal/responsive orientation, and repeated group arrays. - Form metadata for input groups, password fields, read-only/computed hints, conditional visibility/enabled/required rules, custom constraints, PII hints, and submit actions. - A `FormRegistry` that downstream apps can import and filter, including entity projection form metadata. - A `FormShowcasePreview` UI that demonstrates the specs with real form controls across field kinds, sections, arrays, groups, and step layouts. ## Running Locally From `examples/form-showcase`: - `bun run build` - `bun run typecheck` - `bun run test` - `bun run smoke` - `bun run preflight` ## Usage Import the registry or individual form specs: ```ts import { FormShowcaseRegistry, FormShowcaseAllFieldsForm, FormShowcaseProgressiveStepsForm, } from "@lssm-tech/example.form-showcase/forms"; ``` Use this package as a form-only template when you want a compact reference for ContractSpec form authoring without a larger business app around it. Import `@lssm-tech/example.form-showcase/proof-config` when tooling needs the stable docs, sandbox, templates, forms, and UI entrypoint map without reaching into private preview helpers. ## Proof map and boundaries The public proof map is intentionally stable and package-local: - Docs routes: `/docs/examples/form-showcase`, `/docs/examples/form-showcase/usage`, and `/docs/examples/form-showcase/proof-config`. - Sandbox route: `/sandbox?template=form-showcase`. - Template route: `/templates?tag=forms`. - Public entrypoints: the package barrel, `./example`, `./forms`, `./docs`, `./proof-config`, and `./ui`. Private proof helpers under `src/ui/proof/*` and preview data/model files stay implementation details. Tooling should read `@lssm-tech/example.form-showcase/proof-config` instead of deep-importing those helpers. When a form-configuration panel is needed, reuse the design-system `FormConfigShell`, `FormConfigMenuBar`, and `FormConfigPanel` exports from `@lssm-tech/lib.design-system/forms`. The showcase proof should not fork a local configuration shell. No persistence, backend, auth, provider, credential custody, or production form-storage guarantee is implied by this example. Capture/readiness proof state is deterministic fixture state only. ## Public Entry Points - `@lssm-tech/example.form-showcase` - `@lssm-tech/example.form-showcase/example` - `@lssm-tech/example.form-showcase/forms` - `@lssm-tech/example.form-showcase/forms/all-fields.form` - `@lssm-tech/example.form-showcase/forms/entity-projections.form` - `@lssm-tech/example.form-showcase/forms/form-showcase.docs` - `@lssm-tech/example.form-showcase/forms/progressive-steps.form` - `@lssm-tech/example.form-showcase/proof-config` - `@lssm-tech/example.form-showcase/docs` - `@lssm-tech/example.form-showcase/ui` - `@lssm-tech/example.form-showcase/ui/FormShowcasePreview` Private proof/state helpers under `src/ui/proof/*`, any screen-model internals under `src/ui/screens/*`, and non-existent deep proof shortcuts such as `@lssm-tech/example.form-showcase/proof` are intentionally not package exports. Use `@lssm-tech/example.form-showcase/proof-config` for the stable proof map instead of deep imports. ## Notes - This package intentionally does not ship a production custom renderer. Its preview uses real controls and the same sample data to demonstrate the contract capabilities, while host apps can map `FieldSpec` objects to their own design-system components for fully interactive forms. - The example is available in the templates catalog through `surfaces.templates: true`. - The proof/config preview is deterministic and in-memory only: it does not require persistence, backend routes, authentication, credentials, or network access. Declaration builds use `build:types` through the shared Bun tool; `build` runs bundle and declaration generation. Declared exports are preserved. Generated artifacts exclude test-only files; tests/typecheck remain separate gates. ## Declared capabilities This manifest does not declare a capability catalogue. Assess the package using its guide, import map and source. ## Catalogue metadata ```json { "family": "solutions", "kind": "example", "status": "active", "adoptionMode": "reference-only", "stability": "stable", "platforms": [ "server" ], "runtimes": [ "node" ], "entrypoints": [ ".", "./docs", "./example", "./forms", "./forms/all-fields.form", "./forms/entity-projections.form", "./forms/form-showcase.docs", "./forms/progressive-steps.form", "./proof-config", "./ui", "./ui/FormShowcasePreview" ], "examples": [], "replacements": [], "nonAdoptableRationale": "This example is published for reference and learning, not as a reusable library dependency.", "visualTesting": { "status": "deferred", "owner": "@contractspec-core", "targetWave": "wave-3-react-packages", "rationale": "Foundational Storybook adoption establishes shared catalogs and guardrails before this package migrates." } } ``` ## Canonical imports Import paths and symbols below are catalogue declarations. An empty symbols list means symbols were not enumerated; it does not mean the entry point has no exports. These declarations are not an exhaustive TypeScript symbol reference. ```json [] ``` ## Declared export entry points Scope: manifest-declared export entrypoints and catalog-declared imports. Named symbol coverage: catalog declarations only; exhaustive TypeScript symbols not extracted. Installation status: not verified. - `@lssm-tech/example.form-showcase` — subpath `.` - `unconditional`: `./src/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/index.ts); verified source file. - `@lssm-tech/example.form-showcase/docs` — subpath `./docs` - `unconditional`: `./src/docs/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/docs/index.ts); verified source file. - `@lssm-tech/example.form-showcase/example` — subpath `./example` - `unconditional`: `./src/example.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/example.ts); verified source file. - `@lssm-tech/example.form-showcase/forms` — subpath `./forms` - `unconditional`: `./src/forms/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/forms/index.ts); verified source file. - `@lssm-tech/example.form-showcase/forms/all-fields.form` — subpath `./forms/all-fields.form` - `unconditional`: `./src/forms/all-fields.form.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/forms/all-fields.form.ts); verified source file. - `@lssm-tech/example.form-showcase/forms/entity-projections.form` — subpath `./forms/entity-projections.form` - `unconditional`: `./src/forms/entity-projections.form.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/forms/entity-projections.form.ts); verified source file. - `@lssm-tech/example.form-showcase/forms/form-showcase.docs` — subpath `./forms/form-showcase.docs` - `unconditional`: `./src/forms/form-showcase.docs.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/forms/form-showcase.docs.ts); verified source file. - `@lssm-tech/example.form-showcase/forms/progressive-steps.form` — subpath `./forms/progressive-steps.form` - `unconditional`: `./src/forms/progressive-steps.form.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/forms/progressive-steps.form.ts); verified source file. - `@lssm-tech/example.form-showcase/proof-config` — subpath `./proof-config` - `unconditional`: `./src/proof-config.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/proof-config.ts); verified source file. - `@lssm-tech/example.form-showcase/ui` — subpath `./ui` - `unconditional`: `./src/ui/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/ui/index.ts); verified source file. - `@lssm-tech/example.form-showcase/ui/FormShowcasePreview` — subpath `./ui/FormShowcasePreview` - `unconditional`: `./src/ui/FormShowcasePreview.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/form-showcase/src/ui/FormShowcasePreview.tsx); verified source file. ## Package publication metadata These are source-manifest declarations, not a registry installation check. ```json { "types": "./dist/index.d.ts", "files": [ "LICENSE", "README.md", "dist", "!**/*.test.*", "!**/*.spec.*", "!**/*.tsbuildinfo" ], "publishExports": { ".": { "types": "./dist/index.d.ts", "browser": "./dist/browser/index.js", "bun": "./dist/index.js", "node": "./dist/node/index.js", "default": "./dist/index.js" }, "./docs": { "types": "./dist/docs/index.d.ts", "browser": "./dist/browser/docs/index.js", "bun": "./dist/docs/index.js", "node": "./dist/node/docs/index.js", "default": "./dist/docs/index.js" }, "./example": { "types": "./dist/example.d.ts", "browser": "./dist/browser/example.js", "bun": "./dist/example.js", "node": "./dist/node/example.js", "default": "./dist/example.js" }, "./forms": { "types": "./dist/forms/index.d.ts", "browser": "./dist/browser/forms/index.js", "bun": "./dist/forms/index.js", "node": "./dist/node/forms/index.js", "default": "./dist/forms/index.js" }, "./forms/all-fields.form": { "types": "./dist/forms/all-fields.form.d.ts", "browser": "./dist/browser/forms/all-fields.form.js", "bun": "./dist/forms/all-fields.form.js", "node": "./dist/node/forms/all-fields.form.js", "default": "./dist/forms/all-fields.form.js" }, "./forms/entity-projections.form": { "types": "./dist/forms/entity-projections.form.d.ts", "browser": "./dist/browser/forms/entity-projections.form.js", "bun": "./dist/forms/entity-projections.form.js", "node": "./dist/node/forms/entity-projections.form.js", "default": "./dist/forms/entity-projections.form.js" }, "./forms/form-showcase.docs": { "types": "./dist/forms/form-showcase.docs.d.ts", "browser": "./dist/browser/forms/form-showcase.docs.js", "bun": "./dist/forms/form-showcase.docs.js", "node": "./dist/node/forms/form-showcase.docs.js", "default": "./dist/forms/form-showcase.docs.js" }, "./forms/progressive-steps.form": { "types": "./dist/forms/progressive-steps.form.d.ts", "browser": "./dist/browser/forms/progressive-steps.form.js", "bun": "./dist/forms/progressive-steps.form.js", "node": "./dist/node/forms/progressive-steps.form.js", "default": "./dist/forms/progressive-steps.form.js" }, "./proof-config": { "types": "./dist/proof-config.d.ts", "browser": "./dist/browser/proof-config.js", "bun": "./dist/proof-config.js", "node": "./dist/node/proof-config.js", "default": "./dist/proof-config.js" }, "./ui": { "types": "./dist/ui/index.d.ts", "browser": "./dist/browser/ui/index.js", "bun": "./dist/ui/index.js", "node": "./dist/node/ui/index.js", "default": "./dist/ui/index.js" }, "./ui/FormShowcasePreview": { "types": "./dist/ui/FormShowcasePreview.d.ts", "browser": "./dist/browser/ui/FormShowcasePreview.js", "bun": "./dist/ui/FormShowcasePreview.js", "node": "./dist/node/ui/FormShowcasePreview.js", "default": "./dist/ui/FormShowcasePreview.js" } } } ``` ## Dependencies Metadata status: complete pinned manifest. ### Runtime dependencies - [@lssm-tech/lib.contracts-spec](https://lssm.co/docs/packages/lib.contracts-spec/): `workspace:^` - [@lssm-tech/lib.design-system](https://lssm.co/docs/packages/lib.design-system/): `workspace:^` - [@lssm-tech/lib.schema](https://lssm.co/docs/packages/lib.schema/): `workspace:^` - `react`: `catalog:` - `react-dom`: `catalog:` - `zod`: `catalog:` ### Peer dependencies No declarations in the inspected manifest. ### Optional dependencies No declarations in the inspected manifest. ### Development dependencies - [@lssm-tech/tool.bun](https://lssm.co/docs/packages/tool.bun/): `workspace:*` - [@lssm-tech/tool.typescript](https://lssm.co/docs/packages/tool.typescript/): `workspace:*` - `@types/react`: `catalog:types` - `@types/react-dom`: `catalog:types` - `typescript`: `catalog:` ### Peer dependency metadata ```json {} ``` ### Bundled dependencies ```json null ``` ## Package scripts Commands are exact manifest declarations and were not executed in this review. Script metadata status: complete pinned manifest. ```json { "build": "contractspec-bun-build build", "typecheck": "tsgo --noEmit", "test": "bun test", "smoke": "bun test src/example.smoke.test.ts", "preflight": "bun run build && bun run typecheck && bun run test && bun run smoke", "build:bundle": "contractspec-bun-build transpile", "build:types": "contractspec-bun-build types" } ``` ## Declared documentation links - [Example Form Showcase documentation](https://www.npmjs.com/package/%40lssm-tech%2Fexample.form-showcase) — declared link; destination not verified. ```json { "url": "https://www.npmjs.com/package/%40lssm-tech%2Fexample.form-showcase", "kind": "readme" } ``` ## Existing agent-guide projection ```json { "path": "packages/apps/web-landing/public/llms-packages/example.form-showcase.txt", "route": "/llms/example.form-showcase", "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.form-showcase.txt", "blobSha": "82a7004be6193fc5bf1adf27016afcf3a9279729", "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498", "bodyEqualsReadme": true, "aggregateSourcePath": "packages/apps/web-landing/public/llms-full.txt", "aggregateBlobSha": "691b1d33efee24c440598b9106c81432f56aafaf" } ```