Skip to main content
Darpan UI pages use two primary surface types: static pages for saved records and workflows for guided create or edit paths. For the broader shell and token model behind these contracts, see Frontend PWA philosophy and Frontend design system.

​
Static surfaces

  • Static pages are framed with StaticPageFrame.
  • Section blocks use StaticPageSection.
  • Saved records use static-page-record-grid and static-page-record-tile.
  • In-surface navigation uses static-page-module-grid and static-page-module-tile.
  • Saved-list chrome uses static-page-list-toolbar and static-page-pager.
  • Inline editable names use StaticEditableTitle.

​
Workflow surfaces

  • Workflow pages are framed with WorkflowPage.
  • Steps use WorkflowStepForm.
  • Create-entry workflows default to one question per step.
  • Keyed multiple-choice prompts use WorkflowShortcutChoiceCards.
  • Form layouts start with workflow-form-grid, workflow-form-grid--two, and workflow-form-grid--compact.
  • Action buttons stay on shared controls such as AppSaveAction and AppSelect.

​
Migration rules

  • Settings pages split into static saved-record surfaces and workflow create/edit surfaces when one page is doing both jobs.
  • Repeated layout patterns belong in shared utility classes in src/style.css, not page-local scoped CSS.
  • Static pages preserve route behavior and workflow-origin state when they launch workflows.
  • Custom page behavior stays in darpan-ui.

​
Validation

Page tests cover shared contract classes. Focused UI tests run before broader UI checks.