examplePackage manifestv3.0.5

example.form-showcase

Focused ContractSpec form example and template covering field kinds, conditional rules, and layout flows.

@lssm-tech/example.form-showcase
Source, release and verification context

Source snapshot bcc79fcc · Declared package version 3.0.5. This page combines the checked-in package guide and manifest; commands and runtime behavior were not executed in this review.

Package source ↗ Manifest ↗
servernode
EXPLORE THE PACKAGE

See where this package fits.

Follow a declared connection, inspect an import, then open the source guide when you need the detail.

THIS PACKAGEexample.form-showcaseExamples

Arrows point from a package to its direct dependency. Each count is derived from the captured manifests.

6 declarationsSELECT TO INSPECT

@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. Use the guide, import map and source to assess the package.

Imports and export paths.

11 entries

These are package-manifest entry points. Named symbols listed above come from the capability catalogue; this is not an exhaustive TypeScript symbol reference.

11 imports

Dependencies and related packages.

Runtime dependencies 6
react
catalog:
react-dom
catalog:
zod
catalog:
Development dependencies 5
@types/react
catalog:types
@types/react-dom
catalog:types
typescript
catalog:

Package scripts.

Commands declared by this package. Review its setup requirements before running them; no command here was executed by this review.

buildcontractspec-bun-build build
typechecktsgo --noEmit
testbun test
smokebun test src/example.smoke.test.ts
preflightbun run build && bun run typecheck && bun run test && bun run smoke
build:bundlecontractspec-bun-build transpile
build:typescontractspec-bun-build types
Your view

Make room for your context.

Shape the presentation around this moment. You can change it whenever you need.

Your context

The different parts of you

Choose a starting point

A useful mix of context, visuals and gentle guidance.

Tune each dimension
Each dimension can change independently. Product permissions and available actions stay unchanged.

Support the way you begin and return

Tune your support

Reading comfort

Choose your language

Interface language changes text only. Markets, prices and workflows keep their own settings.

Translation coverage

Original source

Navigation151
Graph616
Categories378
Portfolio833
Examples2,035
Source preview1,542

More translations will be added as content is reviewed.

This preference is saved on this browser.

Search the website

Useful starting points

No results. Try a shorter phrase, an operation name or another search area.

A LITTLE ROOM TO EXPLORE

Find something to explore.

Open a closer look on this page, try a different perspective, or follow the detail into its own page.

How previews and controls work
01

Look before you leave

Hover a link or focus it with Tab to see a preview. Clicking the original link or pressing Enter always opens its destination.

02

Stay with the context

Move into the preview to explore its sections. Use Alt + ↓ from a focused link to enter it with the keyboard. Escape closes it.

03

Open the possibilities

Disclosure rows, perspective choices and highlighted controls reveal more. Your view changes reading comfort and the context you explore.

A separate button for a closer look

Show small preview buttons beside links where there is room. Tap the eye to inspect, or tap the link to go straight there. This choice stays in this tab.

No browsing history is collected. Reduced motion follows your device and Your view.