{ "starter_contract_version": 1, "catalog_schema_version": 1, "codegen": { "prefer_existing": true, "do_not_rebuild_standard_ui": true, "configure_before_fork": true, "custom_only_when_project_specific": true, "do_not_modify_shared_library_source": true, "extension_order": [ "use", "configure", "compose", "wrap", "extend", "custom" ], "standardize_mechanics_customize_experience": true }, "accessibility_baseline": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized", "configuration_required" ], "contracts": [ { "id": "collection.index", "layer": "composite", "description": "Routable collection landing surface over existing pages or Dataset items.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "business page groups, blogs, resources, directories" ], "avoid_when": [ "creating a new content or taxonomy model" ], "supports": [ "route", "title", "description", "children", "items" ], "requires": [ "layout.page_header", "state.empty" ], "compatible_with": [ "dataset" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/CollectionIndex.vue" }, { "id": "collection.grid", "layer": "composite", "description": "Responsive cards for a Dataset-backed collection.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "blog, resource, case study, or service cards" ], "avoid_when": [ "inventing a vertical-specific listing block" ], "supports": [ "cards", "image", "title", "excerpt", "link" ], "requires": [ "collection.index" ], "compatible_with": [ "dataset" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/CollectionGrid.vue" }, { "id": "collection.list", "layer": "composite", "description": "Compact linked list for a Dataset-backed collection.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "jobs, webinars, guides, or directory entries" ], "avoid_when": [ "a staff record list with create/edit mechanics" ], "supports": [ "items", "title", "metadata", "link" ], "requires": [ "collection.index" ], "compatible_with": [ "dataset" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/CollectionList.vue" }, { "id": "collection.nav", "layer": "composite", "description": "Links for child and sibling collections without owning site navigation.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "blog categories, resource groups, and page hierarchies" ], "avoid_when": [ "replacing the site's global navigation model" ], "supports": [ "children", "siblings", "breadcrumbs", "active_route" ], "requires": [], "compatible_with": [ "dataset" ], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/CollectionNav.vue" }, { "id": "collection.pagination", "layer": "composite", "description": "Pagination or load-more controls for collection membership.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "large blogs, directories, and resource libraries" ], "avoid_when": [ "loading an unbounded collection into the browser" ], "supports": [ "page", "cursor", "load_more" ], "requires": [ "nav.pagination" ], "compatible_with": [ "records.query", "dataset" ], "states": [ "idle", "loading" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/CollectionPagination.vue" }, { "id": "token.color", "layer": "foundation", "description": "Semantic color tokens for surfaces, text, borders, and status.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "setting or overriding project color values" ], "avoid_when": [ "inventing a per-project color architecture", "hard-coding hex in components" ], "supports": [ "background", "surface", "text", "primary", "danger", "warning", "success", "border" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "assets/css/starter-tokens.css" }, { "id": "token.spacing", "layer": "foundation", "description": "Spacing scale for layout gaps, padding, and stacking.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "spacing layout or component padding" ], "avoid_when": [ "one-off pixel spacing scattered through generated views" ], "supports": [ "scale" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "assets/css/starter-tokens.css" }, { "id": "token.typography", "layer": "foundation", "description": "Typographic roles: display, headings, body, label, caption, code.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "text hierarchy", "labeling form and page content" ], "avoid_when": [ "arbitrary font-size utilities on every view" ], "supports": [ "display", "h1", "h2", "h3", "h4", "body", "label", "caption", "overline", "code" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "assets/css/starter-tokens.css" }, { "id": "token.radius", "layer": "foundation", "description": "Corner radius tokens.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "rounding controls, cards, and dialogs" ], "avoid_when": [ "mixing unrelated radius values in one project" ], "supports": [ "sm", "md", "lg" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "assets/css/starter-tokens.css" }, { "id": "token.shadow", "layer": "foundation", "description": "Elevation / shadow tokens.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "overlays, cards, and raised surfaces" ], "avoid_when": [ "decorative shadows that fight the token model" ], "supports": [ "sm", "md", "lg" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "assets/css/starter-tokens.css" }, { "id": "ui.button", "layer": "primitive", "description": "Action button with variants, sizes, icons, and loading.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "primary, secondary, destructive, or link actions" ], "avoid_when": [ "a genuinely custom interaction that is not a button" ], "supports": [ "primary", "secondary", "outline", "ghost", "destructive", "link", "loading", "icon", "full_width" ], "requires": [], "compatible_with": [], "states": [ "idle", "loading", "success" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "disabled": "preserve disabled semantics; do not fake with pointer-events" }, "runtime_dependencies": [], "implementation": "components/starter/UiButton.vue" }, { "id": "ui.input", "layer": "primitive", "description": "Single-line text input with label, description, and validation.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "short text, email, phone, search field chrome" ], "avoid_when": [ "long-form notes \u2014 use ui.textarea", "choice among known options \u2014 use ui.select" ], "supports": [ "label", "placeholder", "description", "error", "prefix", "suffix", "icon", "disabled", "readonly", "required" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "error": "announce validation error with the field" }, "runtime_dependencies": [], "implementation": "components/starter/UiInput.vue" }, { "id": "ui.textarea", "layer": "primitive", "description": "Multiline text input sharing the Input validation architecture.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "notes", "descriptions", "comments", "prompts" ], "avoid_when": [ "single-line values \u2014 use ui.input" ], "supports": [ "label", "placeholder", "description", "error", "disabled", "readonly", "required" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiTextarea.vue" }, { "id": "ui.select", "layer": "primitive", "description": "Single-choice select with placeholder and validation.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "exactly one choice from a known or searchable list" ], "avoid_when": [ "independent binary options \u2014 use ui.checkbox", "several visible exclusive choices \u2014 use ui.radio" ], "supports": [ "single", "placeholder", "validation", "searchable" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "loading", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "show empty options copy", "error": "keep prior value; surface error" }, "runtime_dependencies": [], "implementation": "components/starter/UiSelect.vue" }, { "id": "ui.checkbox", "layer": "primitive", "description": "Independent binary option.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "opt-in flags that do not exclude other options" ], "avoid_when": [ "exactly one of several visible choices \u2014 use ui.radio", "settings toggle \u2014 prefer ui.switch" ], "supports": [ "label", "disabled", "indeterminate" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiCheckbox.vue" }, { "id": "ui.radio", "layer": "primitive", "description": "Exactly one of several visible choices.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "small exclusive choice sets", "Discovery option groups" ], "avoid_when": [ "many options \u2014 use ui.select", "independent flags \u2014 use ui.checkbox" ], "supports": [ "group", "label", "disabled" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiRadio.vue" }, { "id": "ui.switch", "layer": "primitive", "description": "Immediate on/off setting control.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "application settings and reversible feature toggles" ], "avoid_when": [ "irreversible or high-consequence actions \u2014 use confirmation + ui.button" ], "supports": [ "label", "disabled" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiSwitch.vue" }, { "id": "ui.dialog", "layer": "primitive", "description": "Modal dialog for focused confirmation, form, or destructive tasks.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "a task that must complete or cancel before returning to the page" ], "avoid_when": [ "lightweight contextual actions \u2014 use ui.dropdown or ui.tooltip", "record editing in admin \u2014 prefer ui.drawer" ], "supports": [ "confirmation", "form", "information", "destructive", "focus_trap", "escape", "backdrop" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion", "dialog_focus_trap", "escape_closes", "error_announcement" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiDialog.vue" }, { "id": "ui.drawer", "layer": "primitive", "description": "Side overlay for record edit, detail, filters, or secondary workflows.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "admin record edit or detail without leaving the list", "filter sheets" ], "avoid_when": [ "a full-page create/edit is the product's primary task" ], "supports": [ "record_edit", "record_detail", "filters", "mobile" ], "requires": [], "compatible_with": [], "states": [ "idle", "loading", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion", "dialog_focus_trap", "escape_closes" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiDrawer.vue" }, { "id": "ui.tabs", "layer": "primitive", "description": "In-page section switcher.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "related views of the same record or settings group" ], "avoid_when": [ "primary app navigation \u2014 use layout.admin" ], "supports": [ "keyboard", "controlled" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiTabs.vue" }, { "id": "ui.badge", "layer": "primitive", "description": "Compact label. Prefer status.badge for lifecycle state.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "counts, roles, or non-lifecycle tags" ], "avoid_when": [ "record lifecycle \u2014 use status.badge", "arbitrary per-row colors" ], "supports": [ "neutral", "info" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiBadge.vue" }, { "id": "ui.tooltip", "layer": "primitive", "description": "Secondary explanation on hover or focus.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "short extra context that is not required to act" ], "avoid_when": [ "required instructions \u2014 put those in visible copy" ], "supports": [ "hover", "focus" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiTooltip.vue" }, { "id": "ui.dropdown", "layer": "primitive", "description": "Contextual action menu (view, edit, duplicate, archive, delete).", "framework_agnostic": true, "admission": "admitted", "use_when": [ "row actions or overflow menus" ], "avoid_when": [ "a single primary action \u2014 use ui.button" ], "supports": [ "view", "edit", "duplicate", "archive", "delete" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiDropdown.vue" }, { "id": "ui.avatar", "layer": "primitive", "description": "Person or org image with initials fallback.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "user, member, or assignee identity" ], "avoid_when": [ "generic icons \u2014 use ui.icon once admitted" ], "supports": [ "image", "initials", "group", "status_indicator" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "missing_image": "initials" }, "runtime_dependencies": [], "implementation": "components/starter/UiAvatar.vue" }, { "id": "ui.skeleton", "layer": "primitive", "description": "Preferred initial loading placeholder for major page sections.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "first paint of lists, details, and dashboards" ], "avoid_when": [ "tiny inline waits \u2014 ui.spinner may be enough" ], "supports": [ "block", "line", "table_row" ], "requires": [], "compatible_with": [], "states": [ "loading" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/Skeleton.vue" }, { "id": "ui.spinner", "layer": "primitive", "description": "Compact indeterminate loading indicator.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "button loading or small inline waits" ], "avoid_when": [ "major page sections \u2014 prefer ui.skeleton" ], "supports": [ "indeterminate" ], "requires": [], "compatible_with": [], "states": [ "loading" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiSpinner.vue" }, { "id": "ui.alert", "layer": "primitive", "description": "Persistent inline feedback: info, success, warning, error.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "page-level messages the user must still see" ], "avoid_when": [ "transient success \u2014 use ui.toast", "section failure \u2014 use state.error" ], "supports": [ "info", "success", "warning", "error" ], "requires": [], "compatible_with": [], "states": [ "success", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiAlert.vue" }, { "id": "ui.toast", "layer": "primitive", "description": "Temporary confirmation. Not for errors that require action.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "short success confirmations" ], "avoid_when": [ "errors that need a next step", "configuration_required" ], "supports": [ "success", "info" ], "requires": [], "compatible_with": [], "states": [ "success" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiToast.vue" }, { "id": "form.field", "layer": "composite", "description": "Label, control, help, required marker, and error for one field.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "any labeled input in an application form" ], "avoid_when": [ "bare decorative inputs with no validation or label" ], "supports": [ "label", "help", "error", "required" ], "requires": [ "ui.input" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "error": "announce associated error" }, "runtime_dependencies": [], "implementation": "components/starter/FormField.vue" }, { "id": "form.section", "layer": "composite", "description": "Grouped fields with title, explanation, and responsive grid.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "structured create/edit forms with more than one topic" ], "avoid_when": [ "a single field \u2014 form.field is enough" ], "supports": [ "title", "explanation", "divider", "responsive_grid" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/FormSection.vue" }, { "id": "form.standard", "layer": "composite", "description": "Standard form: fields, validation, submit, cancel. Not a form engine.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "public or authenticated forms that submit through platform adapters" ], "avoid_when": [ "inventing a project-local form framework" ], "supports": [ "validation", "submit", "cancel" ], "requires": [ "form.field", "form.section" ], "compatible_with": [ "forms.public_submission" ], "states": [ "idle", "loading", "success", "error", "unauthorized", "configuration_required" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "error": "state.error", "configuration_required": "state.configuration_required" }, "runtime_dependencies": [], "implementation": "components/starter/StandardForm.vue" }, { "id": "record.table", "layer": "composite", "description": "Sortable, filterable tabular record display.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "multiple structured records on desktop operational UI" ], "avoid_when": [ "fewer than a handful of visual cards", "primarily visual content" ], "supports": [ "columns", "sorting", "filters", "selection", "bulk_actions", "row_actions", "pagination", "loading", "empty", "column_visibility", "sticky_header", "responsive_fallback" ], "requires": [ "state.empty", "state.loading", "ui.dropdown" ], "compatible_with": [ "records.query" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty", "error": "state.error", "unauthorized": "permission copy, not a raw 403" }, "runtime_dependencies": [], "implementation": "components/starter/RecordTable.vue" }, { "id": "record.detail", "layer": "composite", "description": "Record detail layout: status, properties, related, activity, actions.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "inspecting one record" ], "avoid_when": [ "editing is the only task \u2014 prefer record.edit or ui.drawer" ], "supports": [ "status", "properties", "related", "activity", "actions" ], "requires": [ "state.empty", "state.error" ], "compatible_with": [ "records.query" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/RecordDetail.vue" }, { "id": "record.create", "layer": "composite", "description": "Authenticated create: form.standard + adapter.records.createRecord.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "staff or member creates a record the entity schema allows" ], "avoid_when": [ "p", "u", "b", "l", "i", "c", " ", "u", "n", "a", "u", "t", "h", "e", "n", "t", "i", "c", "a", "t", "e", "d", " ", "c", "a", "p", "t", "u", "r", "e", " ", "\u2014", " ", "u", "s", "e", " ", "f", "o", "r", "m", ".", "s", "t", "a", "n", "d", "a", "r", "d", " ", "+", " ", "t", "h", "e", " ", "F", "o", "r", "m", "s", " ", "A", "p", "p", " ", "B", "l", "o", "c", "k" ], "supports": [ "visible_field_planning", "hidden_single_option_selects", "system_keys_excluded" ], "requires": [ "form.standard", "adapter.records" ], "compatible_with": [ "records.query" ], "states": [ "idle", "loading", "success", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "unauthorized": "do not render a writable form" }, "runtime_dependencies": [], "implementation": "components/starter/RecordCreate.vue" }, { "id": "record.edit", "layer": "composite", "description": "Authenticated edit: form.standard + adapter.records.patchRecord.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "updating fields the entity schema marks editable" ], "avoid_when": [ "p", "r", "o", "t", "e", "c", "t", "e", "d", " ", "o", "r", " ", "s", "y", "s", "t", "e", "m", "_", "m", "a", "n", "a", "g", "e", "d", " ", "f", "i", "e", "l", "d", "s", " ", "\u2014", " ", "t", "h", "o", "s", "e", " ", "a", "r", "e", " ", "n", "o", "t", " ", "s", "l", "o", "t", "s" ], "supports": [ "visible_field_planning", "unsaved_changes" ], "requires": [ "form.standard", "adapter.records" ], "compatible_with": [ "records.query", "workflow.transition" ], "states": [ "idle", "loading", "success", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/RecordEdit.vue" }, { "id": "file.upload", "layer": "composite", "description": "Provider-neutral application-file upload \u2192 file_id.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "attaching documents or images to a subject record" ], "avoid_when": [ "raw object storage \u2014 use adapter.storage", "embedding vendor SDKs in the browser" ], "supports": [ "single", "multiple", "drag_drop", "image", "document", "type_restriction", "size_restriction", "progress", "retry", "preview", "remove" ], "requires": [ "adapter.files", "state.error" ], "compatible_with": [ "files.attachments" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized", "configuration_required" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "error": "failed upload with retry", "configuration_required": "state.configuration_required" }, "runtime_dependencies": [], "implementation": "components/starter/FileUpload.vue" }, { "id": "file.attachments", "layer": "composite", "description": "Attachment list/remove for a subject record.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "showing files already bound to a record" ], "avoid_when": [ "a", " ", "s", "t", "a", "n", "d", "a", "l", "o", "n", "e", " ", "D", "A", "M", " ", "o", "r", " ", "f", "o", "l", "d", "e", "r", " ", "p", "r", "o", "d", "u", "c", "t", " ", "\u2014", " ", "t", "h", "a", "t", " ", "i", "s", " ", "a", "n", " ", "A", "p", "p", " ", "B", "l", "o", "c", "k" ], "supports": [ "list", "remove", "download" ], "requires": [ "file.upload", "adapter.files" ], "compatible_with": [ "files.attachments" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/AttachmentList.vue" }, { "id": "record.summary", "layer": "composite", "description": "Thin operational summary of an existing list. Not Reporting.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "counts or highlights of the current listRecords page" ], "avoid_when": [ "analytics", "time-series", "metric-definition systems" ], "supports": [ "current_value", "list_scoped" ], "requires": [], "compatible_with": [ "records.query" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/RecordSummary.vue" }, { "id": "record.calendar", "layer": "composite", "description": "Temporal grouping of an existing list. Not calendar.sync and not a scheduling engine.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "month/week/day/agenda views of records that already have dates" ], "avoid_when": [ "booking.availability engines", "calendar.sync", "inventing appointments as data.entity" ], "supports": [ "month", "week", "day", "agenda" ], "requires": [], "compatible_with": [ "booking.availability", "records.query" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/RecordCalendar.vue" }, { "id": "state.empty", "layer": "composite", "description": "Empty state with icon, title, description, and actions.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "a list or section has zero records" ], "avoid_when": [ "load failure \u2014 use state.error" ], "supports": [ "icon", "title", "description", "primary_action", "secondary_action" ], "requires": [], "compatible_with": [], "states": [ "empty" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/EmptyState.vue" }, { "id": "state.error", "layer": "composite", "description": "Safe error state. Never render raw backend errors.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "failed load", "permission denied", "integration unavailable", "temporary outage" ], "avoid_when": [ "showing exception strings or stack traces to end users" ], "supports": [ "failed_load", "permission_denied", "integration_unavailable", "temporarily_unavailable" ], "requires": [], "compatible_with": [], "states": [ "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "unauthorized": "permission denied copy" }, "runtime_dependencies": [], "implementation": "components/starter/ErrorState.vue" }, { "id": "state.success", "layer": "composite", "description": "Completed-task confirmation region.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "post-submit or post-booking confirmation screens" ], "avoid_when": [ "transient toasts \u2014 use ui.toast" ], "supports": [ "title", "next_action" ], "requires": [], "compatible_with": [], "states": [ "success" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/SuccessState.vue" }, { "id": "state.loading", "layer": "composite", "description": "Section-level loading. Prefer skeletons for major regions.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "waiting on the first payload for a region" ], "avoid_when": [ "r", "e", "p", "l", "a", "c", "i", "n", "g", " ", "u", "i", ".", "s", "k", "e", "l", "e", "t", "o", "n", " ", "f", "o", "r", " ", "l", "a", "r", "g", "e", " ", "p", "a", "g", "e", " ", "c", "h", "r", "o", "m", "e" ], "supports": [], "requires": [ "ui.skeleton", "ui.spinner" ], "compatible_with": [], "states": [ "loading" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/LoadingState.vue" }, { "id": "state.configuration_required", "layer": "composite", "description": "Runtime setup required. The feature exists; configuration activates it.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "a provider binding is missing or degraded" ], "avoid_when": [ "treating missing Stripe/CRM as a failed build", "hiding the feature" ], "supports": [ "provider_name", "admin_action", "customer_unavailable_copy" ], "requires": [], "compatible_with": [ "payments.subscription", "email.send", "crm.contact.upsert" ], "states": [ "configuration_required" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "admin": "Connect {provider} to activate.", "customer": "This capability is not available yet." }, "runtime_dependencies": [ { "binding": "provider_binding", "configuration_required": true } ], "implementation": "components/starter/ConfigurationRequired.vue" }, { "id": "layout.page", "layer": "composite", "description": "Public page frame (header, main, footer). Marketing/landing chrome.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "public marketing, landing, or unauthenticated content pages" ], "avoid_when": [ "authenticated app chrome \u2014 use layout.admin" ], "supports": [ "header", "main", "footer" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/PageLayout.vue" }, { "id": "layout.admin", "layer": "composite", "description": "Visual authenticated app shell: sidebar, topbar, breadcrumbs, user menu. Not block:admin.shell.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "staff or signed-in application chrome" ], "avoid_when": [ "replacing the protected admin.shell App Block", "public marketing pages" ], "supports": [ "sidebar", "topbar", "breadcrumbs", "page_content", "user_menu", "mobile_nav", "collapsed" ], "requires": [ "adapter.auth" ], "compatible_with": [], "states": [ "idle", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/AdminLayout.vue" }, { "id": "layout.settings", "layer": "composite", "description": "Settings page frame. Sections are optional; do not force all of them.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "account, workspace, notification, or integration settings" ], "avoid_when": [ "forcing billing/team/security sections that the project does not have" ], "supports": [ "nav", "section", "responsive" ], "requires": [], "compatible_with": [], "states": [ "idle", "unauthorized", "configuration_required" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/SettingsLayout.vue" }, { "id": "layout.page_header", "layer": "composite", "description": "Title, description, breadcrumbs, primary and secondary actions.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "record lists, details, settings, and dashboards" ], "avoid_when": [ "inventing a new page heading per entity" ], "supports": [ "title", "description", "breadcrumbs", "primary_action", "secondary_actions" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/PageHeader.vue" }, { "id": "filter.bar", "layer": "composite", "description": "Search, status, owner, date range, category, saved filters, clear.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "operational record lists" ], "avoid_when": [ "rebuilding filter chrome per CRM or case app" ], "supports": [ "search", "status", "owner", "date_range", "category", "saved_filters", "clear" ], "requires": [ "search.box", "ui.select" ], "compatible_with": [ "records.query" ], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/FilterBar.vue" }, { "id": "search.box", "layer": "composite", "description": "Debounced search chrome. Not a Search capability.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "filtering an existing records.query list" ], "avoid_when": [ "a platform Search product", "a private search engine" ], "supports": [ "debounce" ], "requires": [ "ui.input" ], "compatible_with": [ "records.query" ], "states": [ "idle", "loading", "empty" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/SearchBox.vue" }, { "id": "nav.pagination", "layer": "composite", "description": "Page, cursor, or load-more controls matching the backend primitive.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "lists that page through records.query" ], "avoid_when": [ "loading the entire collection into the client" ], "supports": [ "page", "cursor", "load_more" ], "requires": [], "compatible_with": [ "records.query" ], "states": [ "idle", "loading" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/Pagination.vue" }, { "id": "status.badge", "layer": "composite", "description": "Lifecycle state \u2192 semantic treatment. Distinct from ui.badge.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "workflow or record status display" ], "avoid_when": [ "Codegen picking colors per entity" ], "supports": [ "pending", "active", "paid", "draft", "rejected" ], "requires": [], "compatible_with": [ "workflow.transition" ], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/StatusBadge.vue" }, { "id": "record.list", "layer": "composite", "description": "Page-level record list: header, filters, table, pagination, create.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "staff lists of structured records" ], "avoid_when": [ "rebuilding list chrome per entity", "replacing an App Block record.table slot" ], "supports": [ "header", "search", "filters", "table", "cards", "pagination", "create" ], "requires": [ "layout.page_header", "filter.bar", "record.table", "nav.pagination", "state.empty" ], "compatible_with": [ "records.query", "record.card" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty", "error": "state.error", "unauthorized": "permission copy, not a raw 403" }, "runtime_dependencies": [], "implementation": "components/starter/RecordList.vue" }, { "id": "record.card", "layer": "composite", "description": "Mobile-friendly record representation; table remains the desktop host.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "narrow viewports or visual record summaries" ], "avoid_when": [ "replacing record.table on dense desktop ops UIs" ], "supports": [ "title", "subtitle", "status", "assignee" ], "requires": [ "status.badge" ], "compatible_with": [ "records.query" ], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/RecordCard.vue" }, { "id": "chart.bar", "layer": "composite", "description": "Bar chart of a bounded Dataset. Not Reporting and not a chart builder.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "comparing categorical or time-bucket values from an explicit Dataset" ], "avoid_when": [ "saved report_definition dashboards \u2014 that is reporting.dashboard", "scatter, combo, maps, or a chart_definition Cloud record" ], "supports": [ "categories", "values", "empty", "loading" ], "requires": [ "state.empty", "state.loading" ], "compatible_with": [ "dataset", "metric.card", "visualization.chart" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty" }, "runtime_dependencies": [], "implementation": "components/starter/ChartBar.vue" }, { "id": "chart.line", "layer": "composite", "description": "Line chart of a bounded Dataset series. Not a time-series warehouse.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "showing a trend from an explicit Dataset series" ], "avoid_when": [ "BI analytics", "inventing a private charting backend" ], "supports": [ "x", "y", "empty", "loading" ], "requires": [ "state.empty", "state.loading" ], "compatible_with": [ "dataset", "visualization.chart" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty" }, "runtime_dependencies": [], "implementation": "components/starter/ChartLine.vue" }, { "id": "chart.pie", "layer": "composite", "description": "Pie chart of a bounded Dataset. Parts of one whole.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "showing composition of a small explicit Dataset" ], "avoid_when": [ "many categories better shown as chart.bar", "a chart builder" ], "supports": [ "categories", "values", "empty" ], "requires": [ "state.empty" ], "compatible_with": [ "dataset", "visualization.chart" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty" }, "runtime_dependencies": [], "implementation": "components/starter/ChartPie.vue" }, { "id": "chart.area", "layer": "composite", "description": "Area chart of a bounded Dataset series.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "emphasizing magnitude of a Dataset series over time" ], "avoid_when": [ "s", "c", "a", "t", "t", "e", "r", " ", "o", "r", " ", "s", "t", "a", "c", "k", "e", "d", " ", "c", "o", "m", "b", "o", " ", "c", "h", "a", "r", "t", "s", " ", "\u2014", " ", "n", "o", "t", " ", "a", "d", "m", "i", "t", "t", "e", "d", " ", "i", "n", " ", "v", "1" ], "supports": [ "x", "y", "empty", "loading" ], "requires": [ "state.empty", "state.loading" ], "compatible_with": [ "dataset", "visualization.chart" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty" }, "runtime_dependencies": [], "implementation": "components/starter/ChartArea.vue" }, { "id": "metric.card", "layer": "composite", "description": "Present a scalar Dataset or calculator output. Not metric.count.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "displaying one figure from a Dataset or Calculation IR output" ], "avoid_when": [ "defining a saved aggregate \u2014 that is reporting metric.count/metric.sum", "replacing visualization.chart", "using proposed stat.card" ], "supports": [ "value", "label", "empty", "loading" ], "requires": [ "state.empty" ], "compatible_with": [ "dataset", "calculation.calculator", "reporting.dashboard" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "empty": "state.empty" }, "runtime_dependencies": [], "implementation": "components/starter/MetricCard.vue" }, { "id": "calculator.formula", "layer": "composite", "description": "Typed inputs plus local Calculation IR evaluation. Not a formula builder.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "presenting a Feature Pack or Codegen authored calculator" ], "avoid_when": [ "staff runtime formula authoring", "authoritative invoice/tax/commission math until calculation.evaluate", "eval() or arbitrary JavaScript" ], "supports": [ "typed_inputs", "local_evaluate", "scalar_output", "dataset_output" ], "requires": [ "state.empty", "state.error", "metric.card" ], "compatible_with": [ "dataset", "calculation.calculator", "form.standard" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "error": "state.error" }, "runtime_dependencies": [], "implementation": "components/starter/CalculatorFormula.vue" }, { "id": "adapter.auth", "layer": "adapter", "description": "Platform auth client. No local user database.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "sign-in, session, and role-aware routing" ], "avoid_when": [ "a second users table", "hard-coded admin passwords" ], "supports": [], "requires": [], "compatible_with": [ "auth.sign_in", "auth.profile" ], "states": [ "idle", "loading", "success", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "adapter.records", "layer": "adapter", "description": "Platform records client: createRecord / patchRecord / listRecords / getRecord.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "persisting or listing Cloud records" ], "avoid_when": [ "a project-local ORM or shadow database" ], "supports": [], "requires": [], "compatible_with": [ "records.query", "workflow.transition" ], "states": [ "idle", "loading", "success", "empty", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "adapter.files", "layer": "adapter", "description": "Application-file client (file_id upload/download/delete/attach).", "framework_agnostic": true, "admission": "admitted", "use_when": [ "application files bound to records" ], "avoid_when": [ "raw bucket keys or vendor SDKs in generated apps" ], "supports": [], "requires": [], "compatible_with": [ "files.attachments" ], "states": [ "idle", "loading", "success", "error", "unauthorized", "configuration_required" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "adapter.storage", "layer": "adapter", "description": "Raw object-storage client (storage.file.*). Not application files.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "explicit storage.file ports" ], "avoid_when": [ "substituting this for adapter.files on App Block attachments" ], "supports": [], "requires": [], "compatible_with": [ "storage.file.put" ], "states": [ "idle", "loading", "success", "error", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "adapter.permissions", "layer": "adapter", "description": "Platform permissions client. Frontend gates are UX; backend remains authoritative.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "hiding actions the session cannot perform" ], "avoid_when": [ "treating a client gate as enforcement" ], "supports": [], "requires": [], "compatible_with": [ "auth.sign_in" ], "states": [ "idle", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "adapter.events", "layer": "adapter", "description": "Platform event client for reading activity. Generated apps do not emit PackEvent ids.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "displaying activity already produced by Cloud mutations" ], "avoid_when": [ "POST /events from generated code" ], "supports": [], "requires": [], "compatible_with": [ "activity.timeline" ], "states": [ "idle", "loading", "success", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "lib/p2hs-app.js" }, { "id": "ui.combobox", "layer": "primitive", "description": "Searchable single-value selection with keyboard navigation and async options.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "large or remote option sets", "entity references and provider-neutral pickers" ], "avoid_when": [ "small static option sets \u2014 use ui.select" ], "supports": [ "search", "async_options", "clear", "keyboard_navigation" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "loading", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiCombobox.vue" }, { "id": "ui.currency_input", "layer": "primitive", "description": "Locale-aware currency amount input that preserves a canonical numeric value.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "prices, invoices, subscriptions, and checkout forms" ], "avoid_when": [ "provider-specific money objects in generated UI" ], "supports": [ "currency", "minor_units", "locale_formatting", "validation" ], "requires": [ "form.field", "ui.input" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiCurrencyInput.vue" }, { "id": "ui.richtext", "layer": "primitive", "description": "Constrained rich text editing with a portable document value.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "posts, pages, comments, and long-form descriptions" ], "avoid_when": [ "embedding a vendor editor or raw HTML contract" ], "supports": [ "portable_value", "links", "lists", "headings", "safe_output" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiRichtext.vue" }, { "id": "ui.command_menu", "layer": "primitive", "description": "Keyboard-first command/search menu over declared application actions.", "framework_agnostic": true, "admission": "admitted", "use_when": [ "workspace navigation, actions, and search shortcuts" ], "avoid_when": [ "provider-specific command APIs or hidden permission bypasses" ], "supports": [ "keyboard_navigation", "grouping", "search", "permission_aware_actions" ], "requires": [ "ui.input" ], "compatible_with": [], "states": [ "idle", "empty", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": "components/starter/UiCommandMenu.vue" } ], "proposed": [ { "id": "token.border", "layer": "foundation", "description": "Border width and style tokens.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "control and card outlines" ], "avoid_when": [ "one-off border classes per view" ], "supports": [ "width", "style" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "token.breakpoint", "layer": "foundation", "description": "Responsive breakpoints.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "layout that changes at sm/md/lg/xl" ], "avoid_when": [ "ad-hoc media queries per generated page" ], "supports": [ "sm", "md", "lg", "xl" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "token.z_index", "layer": "foundation", "description": "Stacking tokens for overlays.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "dialog, drawer, toast, popover layering" ], "avoid_when": [ "magic z-index numbers in project CSS" ], "supports": [ "dropdown", "dialog", "toast" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "token.motion", "layer": "foundation", "description": "Duration and easing tokens, including reduced-motion.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "enter/exit and loading motion" ], "avoid_when": [ "ignoring prefers-reduced-motion" ], "supports": [ "duration", "easing", "reduced_motion" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "token.container", "layer": "foundation", "description": "Application and full-width container widths.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "page max-width and full-bleed sections" ], "avoid_when": [ "hard-coded max-width per page" ], "supports": [ "app", "full" ], "requires": [], "compatible_with": [], "states": [], "accessibility": [ "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "ui.datepicker", "layer": "primitive", "description": "Date, time, datetime, and range pickers. Timezone is an application concern.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "scheduling, due dates, reporting windows as UI" ], "avoid_when": [ "booking.availability engines", "storing timezone only in the widget" ], "supports": [ "date", "time", "datetime", "range" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "ui.multiselect", "layer": "primitive", "description": "Multiple choice for tags, categories, permissions, and filters.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "several values from one list" ], "avoid_when": [ "introducing a third-party select pack per generated app" ], "supports": [ "search", "tags", "async_options" ], "requires": [ "form.field" ], "compatible_with": [], "states": [ "idle", "loading", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "ui.icon", "layer": "primitive", "description": "Single project icon system. Do not mix Lucide, Heroicons, and FontAwesome.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "navigation, empty states, and inline actions" ], "avoid_when": [ "a second icon pack in the same generated project" ], "supports": [ "named_set" ], "requires": [], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "layout.container", "layer": "composite", "description": "Standard application or full-width container.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "page width constraints" ], "avoid_when": [ "hand-rolled max-width wrappers" ], "supports": [], "requires": [ "token.container" ], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "layout.stack", "layer": "composite", "description": "Vertical stack with tokenized gap.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "vertical rhythm" ], "avoid_when": [ "one-off margin utilities on every child" ], "supports": [], "requires": [ "token.spacing" ], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "layout.cluster", "layer": "composite", "description": "Wrapping horizontal cluster with tokenized gap.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "inline actions, chips, and toolbars" ], "avoid_when": [ "a true grid of equal columns \u2014 use layout.grid" ], "supports": [], "requires": [ "token.spacing" ], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "layout.grid", "layer": "composite", "description": "Responsive columns.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "card grids and form columns" ], "avoid_when": [ "hand-crafted responsive CSS per page" ], "supports": [ "sm", "md", "xl" ], "requires": [ "token.breakpoint" ], "compatible_with": [], "states": [ "idle" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "stat.card", "layer": "composite", "description": "Dashboard figure: value, optional comparison, icon, link. Not Reporting.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "operational counts on a dashboard built from current lists" ], "avoid_when": [ "analytics time-series", "metric-definition systems", "use admitted metric.card" ], "supports": [ "value", "comparison", "trend", "icon", "link" ], "requires": [ "record.summary" ], "compatible_with": [], "states": [ "idle", "loading", "empty", "error" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": {}, "runtime_dependencies": [], "implementation": null }, { "id": "gate.permission", "layer": "composite", "description": "UX hide/show for a permission. Backend remains the authority.", "framework_agnostic": true, "admission": "proposed", "use_when": [ "hiding delete/edit when the session lacks permission" ], "avoid_when": [ "u", "s", "i", "n", "g", " ", "t", "h", "i", "s", " ", "a", "s", " ", "t", "h", "e", " ", "s", "e", "c", "u", "r", "i", "t", "y", " ", "b", "o", "u", "n", "d", "a", "r", "y" ], "supports": [], "requires": [ "adapter.permissions" ], "compatible_with": [], "states": [ "idle", "unauthorized" ], "accessibility": [ "keyboard_navigable", "visible_focus", "labeled", "semantic_html", "aria_only_when_needed", "contrast_safe_tokens", "reduced_motion" ], "fallbacks": { "unauthorized": "omit the action; do not fake success" }, "runtime_dependencies": [], "implementation": null } ] }