Files
breadcrumb-the-shire/tools/codex-skills/core-guardrails/references/boundaries-ui.md
fs c7b8fd516a feat: extend module platform with UI slots, runtime components, CLI tooling and {{userId}} search support
Completes the generic module platform that enables modules to contribute
UI elements, runtime JS components, and search resources without any
core hardcoding.

New generic UI slot types:
- topbar.right_item: module-contributed topbar buttons
- layout.body_end_template: module-contributed dialog/overlay templates
- layout.head_style: module-contributed global CSS
- runtime.component: declarative JS component registration with phase ordering

New infrastructure:
- ModuleAutoloader: PSR-4 autoloading for module-local PHP classes
- ModuleRuntimePageBuilder: symlinks module pages into runtime directory
- ModuleRuntimeAssetPublisher: publishes module CSS/JS to web/modules/
- ModulePermissionSynchronizer: syncs module permissions to DB
- CLI scripts: module-runtime-sync, module-build, module-migrate,
  module-permissions-sync, module-assets-sync
- {{userId}} placeholder in SearchDataService for user-scoped search queries
- Component runtime with phased initialization (early/default/late)
- AppContainer.protectExistingBindings() to prevent module→core overwrites
- Architecture tests: ModuleStructureContractTest, CoreTemplateIsolationTest,
  FrontendComponentRuntimeContractTest, AppContainerIsolationContractTest

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 22:19:56 +01:00

3.4 KiB

UI Boundaries (MUST / MUST NOT)

Listen-Standard

  1. MUST Listen ueber initStandardListPage(...) initialisieren.
  2. MUST Filter-Toolbar ueber zentrale Helper/Partials rendern.
  3. MUST aktive Chips/Drawer-Verhalten ueber Standard-Contracts laufen lassen.
  4. MUST NOT direkt gridFiltersFromSchema(...) oder initListFilterExperience(...) in Listen-Templates verwenden.
  5. MUST NOT Legacy-Filter-Toggle-Markup (data-toolbar-toggle, data-filter-overflow, data-filter-toggle) neu einbauen.
  6. MUST rowInteraction-Standard fuer Listen mit Row-Navigation beibehalten (sichtbare Action-Spalte + Enter + Doppelklick-Fallback).
  7. MUST pageSize-Standard beibehalten (10/25/50/100, Toolbar rechts, URL > localStorage > default).

Detailseiten-Standard

  1. MUST Hauptformular mit data-standard-detail-form="1" markieren.
  2. MUST Unsaved/Shortcut/Dirty-State ueber initStandardDetailPage(...) nutzen.
  3. MUST Detail-Aktionen ueber Action-Policy-Contract (data-detail-action-policy, data-detail-action-kind, data-detail-confirm-message) steuern.
  4. MUST NOT inline confirm(...) (onclick / onsubmit) auf standardisierten Detailseiten nutzen.

Confirm + Telemetry Standard

  1. MUST Confirm-Dialoge zentral ueber den globalen Confirm-Service abwickeln.
  2. MUST NOT window.confirm(...) in App-JS oder inline HTML-Handlern verwenden.
  3. MUST relevante Frontend-Warnpfade zentral ueber Frontend-Telemetrie erfassen.
  4. MUST NOT relevante UX-/Fehlerpfade nur als Console-Warnung implementieren.

Frontend Page-Module Hard Cut

  1. MUST Seiteninitialisierung ueber dedizierte Module unter web/js/pages/* umsetzen.
  2. MUST Page-Config ueber script[type="application/json"] + readPageConfig(...) bereitstellen/lesen.
  3. MUST alle JS-src in pages/** und templates/** ueber assetVersion('...js...') laden.
  4. MUST NOT inline <script type="module">...</script> in pages/** oder templates/** verwenden.

Component Lifecycle Runtime

  1. MUST migrierte Komponenten ueber init(root, config) + destroy() standardisieren.
  2. MUST NOT migrierte Komponenten per DOMContentLoaded/Module-Sideeffect selbst auto-initialisieren.
  3. MUST Listener, Timer und Observer, die in init(...) entstehen, in destroy() wieder abbauen.
  4. MUST Runtime-Konfiguration ueber Page-Config (readPageConfig(...)) beziehen, keine verteilten Ad-hoc-Globals.
  5. MUST host-gebundene UI-Komponenten ueber explizite data-app-component-Hosts im Markup binden.
  6. Global-Utilities ohne natuerliches Host-Element MAY via Runtime scope: 'global' registriert werden, MUESSEN aber denselben Lifecycle-Contract inkl. destroy() einhalten.

Shared Partials

  1. MUST Listen-Titlebar ueber templates/partials/app-list-titlebar.phtml rendern.
  2. MUST List-Tabs ueber templates/partials/app-list-tabs.phtml rendern.
  3. MUST Purge-Action ueber templates/partials/app-list-purge-action.phtml rendern.
  4. MUST Detail-Validation-Summary ueber templates/partials/app-details-validation-summary.phtml rendern.

RBAC in Templates

  1. MUST UI-Capabilities nur ueber $viewAuth lesen.
  2. MUST NOT can('...') in Templates verwenden.

CSS Boundaries

  1. MUST Styles moeglichst lokal in web/css/components, web/css/layout oder web/css/pages halten.
  2. MUST NOT globale unscoped Overrides ohne klaren Scope einfuehren.
  3. MUST Vendor-Overrides nur in web/css/vendor-overrides/** pflegen.
  4. MUST bestehende CSS-Variablen bevorzugen statt neue Inline-Farbwerte zu verteilen.