App process builder

Use this composition for admin tools that edit a process, workflow, approval chain, or rule-backed form. The pattern is intentionally low-friction: an app shell, process tree, compact step map, inspector form, action toolbar, and validation feedback. Porchlight supplies the CSS contracts; your app owns data, selection, autosave, validation, permissions, and publishing.

Structure

• .pl-l-app-shell frames the admin area with persistent navigation.
• .pl-c-page-header names the current draft and carries publish actions.
• .pl-c-toolbar groups mode switches, preview, history, and save controls.
• .pl-c-split-pane separates the process tree, map, and inspector.
• .pl-c-tree represents folders, process drafts, and rule groups.
• .pl-c-workflow-board renders a readable step map without requiring a canvas.
• .pl-c-form, .pl-c-field, .pl-c-tabs, .pl-c-badge, and .pl-c-alert make the inspector actionable and stateful.

Semantic HTML

<div class="pl-l-app-shell">
  <header class="pl-l-app-shell__topbar">...</header>
  <aside class="pl-l-app-shell__sidebar">
    <nav class="pl-c-nav" aria-label="Admin navigation">...</nav>
  </aside>

  <main class="pl-l-app-shell__main">
    <div class="pl-c-page-header">
      <div class="pl-c-page-header__heading">
        <h1 class="pl-c-page-header__title">Vendor onboarding</h1>
        <span class="pl-c-page-header__subtitle">Draft v12, autosaved</span>
      </div>
      <div class="pl-c-page-header__actions">...</div>
    </div>

    <div class="pl-c-toolbar" aria-label="Process draft actions">...</div>

    <section class="pl-c-alert" data-tone="warning" role="status">
      <div class="pl-c-alert__content">
        <div class="pl-c-alert__title">Draft has warnings</div>
        <div class="pl-c-alert__body">
          Fix one missing owner before publish.
        </div>
      </div>
    </section>

    <section class="pl-c-split-pane" data-collapse="stack">
      <aside class="pl-c-split-pane__pane pl-c-split-pane__pane--start">
        <div class="pl-c-tree" role="tree" aria-label="Process library">
          ...
        </div>
      </aside>
      <div class="pl-c-split-pane__separator" role="separator"></div>
      <section class="pl-c-split-pane__pane pl-c-split-pane__pane--end">
        <section class="pl-c-workflow-board" aria-labelledby="map-title">
          ...
        </section>
        <form class="pl-c-form" aria-labelledby="inspector-title">...</form>
      </section>
    </section>
  </main>
</div>

Keep headings, forms, buttons, tabs, and tree items real HTML elements. Use aria-selected, aria-current, aria-invalid, aria-describedby, and role="status" from app state rather than styling-only flags.

Guidance

Prefer selection plus inspector editing before introducing a freeform canvas. Use the tree for durable structure, the map for sequence and status, and the inspector for focused edits. If the app later adds drag/drop, keep keyboard ordering and live announcements in application logic.

Preview

See the app process builder preview.