@pageport-slant/corner-assets

Shared form components and UI primitives for corner apps.

This package ships source TypeScript/TSX directly. Consumers compile it with their own bundler (Next.js, Vite, Bun).

Install

This package is published publicly to npmjs.com.

Add it to a project

bun add @pageport-slant/corner-assets

Required consumer setup

Next.js — transpile the package

Source .tsx files in node_modules are not transpiled by default. Add:

// next.config.ts
const nextConfig = {
  transpilePackages: ["@pageport-slant/corner-assets"],
}

Tailwind v4 — scan the package

Tailwind v4 does not scan node_modules by default. Add an @source rule to your global CSS so Tailwind picks up classes used inside the package:

/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/@pageport-slant/corner-assets/components";

Usage

Standard generated forms should use FormPageShell. It owns the default banner, footer, card, progress placement, draft save indicator, fields, validation, navigation gating, and submit path.

import { FormPageShell, FormUIProvider } from "@pageport-slant/corner-assets/form"
import { Button } from "@pageport-slant/corner-assets/form/ui/button"
import * as Luma from "@pageport-slant/corner-assets/form/themes/luma"
import { cn } from "@pageport-slant/corner-assets/lib/utils"

// Render with a theme bundle:
<FormUIProvider bundle={Luma}>
  <FormPageShell schema={schema} brand={brand} footer={footer} />
</FormUIProvider>

For custom page chrome, keep the engine package-owned and compose the supported runtime primitives instead. App code can place its own header, footer, and progress UI around the body; it should not import form libraries, copy the renderer, hand-roll validation, or call direct zod.

import {
  FormBody,
  FormProgress,
  FormRuntimeProvider,
  useFormRuntime,
} from "@pageport-slant/corner-assets/form"

function CustomHeader() {
  const form = useFormRuntime()

  return (
    <header>
      <p>{form.schema.name}</p>
      <p>
        Step {form.sectionIndex + 1} of {form.visibleSections.length}
      </p>
    </header>
  )
}

export default function CustomFormPage() {
  return (
    <FormRuntimeProvider schema={schema}>
      <CustomHeader />
      <div className="grid gap-8 lg:grid-cols-[1fr_16rem]">
        <FormBody />
        <aside>
          <FormProgress orientation="vertical" />
        </aside>
      </div>
      <footer>App-owned footer content</footer>
    </FormRuntimeProvider>
  )
}

useFormRuntime() exposes read-only runtime state: schema, visibleSections, currentSection, currentPage, sectionIndex, pageIndex, completed, progressSegments, draftStatus, status, isFirst, and isLastStep. Sanctioned actions are next(), back(), jumpToSection(index), and jumpToPage(sectionIndex, pageIndex). Forward jumps remain blocked unless the target is current or already completed.

Layout

• components/form/ — form schema renderer, fields, blocks, hooks
• components/form/ui/ — shadcn-style primitives used as the default theme
• components/form/themes/ — alternate FormUI bundles (luma, sera, vega)
• lib/utils.ts — cn helper

Releasing a new version

Publishing runs automatically when a git tag matching v*.*.* is pushed.

# bump the version in package.json, commit it
npm version patch   # or minor / major
git push --follow-tags

The Publish package workflow installs deps, typechecks, and runs npm publish --access public against npmjs.com. Configure the repository secret NPM_TOKEN with an npm automation token that can publish to the pageport-slant organization.