@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/ai/application-ui-profile.defaults.json

@@ -17,7 +17,9 @@
   ],
   "preferences": {
     "application-shell": {
-      "preferred": "@kerfjs/ui:recipe-app-shell"
+      "preferred": "@kerfjs/ui:recipe-app-shell",
+      "avoid": ["@kerfjs/ui:wa-page"],
+      "rationale": "Compose the application shell from Workbench, SplitView, NavStack, or TabNavigator instead of a Web Awesome page."
     },
     "application-tabs": {
       "preferred": "@kerfjs/ui:tab-bar",
@@ -31,7 +33,7 @@
     "command-menu": {
       "preferred": "@kerfjs/ui:popup-menu",
       "avoid": ["@kerfjs/ui:wa-dropdown", "@kerfjs/ui:wa-dropdown-item"],
-      "rationale": "Render PopupMenu, which wraps wa-dropdown with the shared popup contract; use Select when choosing a value."
+      "rationale": "Render PopupMenu, Kerf's native command menu; use Select when choosing a value."
     },
     "embedded-media": {
       "preferred": "@kerfjs/ui:content-item",
@@ -69,12 +71,131 @@
       "rationale": "Render ResizableRegion for application panes instead of a Web Awesome split panel."
     },
     "structured-search": {
-      "preferred": "@kerfjs/ui:token-search-field"
+      "preferred": "@kerfjs/ui:search-field"
     },
     "value-selection": {
       "preferred": "@kerfjs/ui:select",
       "avoid": ["@kerfjs/ui:wa-select", "@kerfjs/ui:wa-option"],
-      "rationale": "Render Select, which wraps wa-select and wa-option with Kerf's popup and spacing contract."
+      "rationale": "Render Select, which replaces wa-select and wa-option with Kerf's own popup, form, and spacing contract."
+    },
+    "action-button": {
+      "preferred": "@kerfjs/ui:button",
+      "avoid": ["@kerfjs/ui:wa-button"],
+      "rationale": "Render Button, a native button with Kerf tones and sizes, icon-only with ariaLabel, or a toggle with pressed."
+    },
+    "text-entry": {
+      "preferred": "@kerfjs/ui:text-field",
+      "avoid": ["@kerfjs/ui:wa-input", "@kerfjs/ui:wa-textarea"],
+      "rationale": "Render TextField, a native input or textarea with Kerf label, hint, error, clear, and count anatomy."
+    },
+    "boolean-option": {
+      "preferred": "@kerfjs/ui:checkbox",
+      "avoid": ["@kerfjs/ui:wa-checkbox", "@kerfjs/ui:wa-checkbox-group"],
+      "rationale": "Render Checkbox, a native checkbox drawn as a Kerf box."
+    },
+    "exclusive-option": {
+      "preferred": "@kerfjs/ui:radio-group",
+      "avoid": ["@kerfjs/ui:wa-radio-group", "@kerfjs/ui:wa-radio"],
+      "rationale": "Render RadioGroup, a native radio group with a choices array."
+    },
+    "immediate-setting": {
+      "preferred": "@kerfjs/ui:switch",
+      "avoid": ["@kerfjs/ui:wa-switch"],
+      "rationale": "Render Switch, a native switch-role checkbox for a setting that applies immediately."
+    },
+    "modal-dialog": {
+      "preferred": "@kerfjs/ui:surface-scaffold",
+      "avoid": ["@kerfjs/ui:wa-dialog", "@kerfjs/ui:wa-drawer"],
+      "rationale": "Render DialogSurface, a native dialog opened with openDialog and closed with closeDialog; use its side-sheet or bottom-sheet presentation instead of a Web Awesome drawer."
+    },
+    "status-badge": {
+      "preferred": "@kerfjs/ui:badge",
+      "avoid": ["@kerfjs/ui:wa-badge"],
+      "rationale": "Render Badge for compact status, count, or category metadata."
+    },
+    "removable-tag": {
+      "preferred": "@kerfjs/ui:chip",
+      "avoid": ["@kerfjs/ui:wa-tag"],
+      "rationale": "Render Chip for a tag, removable or not."
+    },
+    "activity-indicator": {
+      "preferred": "@kerfjs/ui:loading-spinner",
+      "avoid": ["@kerfjs/ui:wa-spinner"],
+      "rationale": "Render LoadingSpinner for indeterminate activity."
+    },
+    "loading-placeholder": {
+      "preferred": "@kerfjs/ui:skeleton",
+      "avoid": ["@kerfjs/ui:wa-skeleton"],
+      "rationale": "Render Skeleton for a loading placeholder."
+    },
+    "anchored-surface": {
+      "preferred": "@kerfjs/ui:anchored-surface",
+      "avoid": ["@kerfjs/ui:wa-popover", "@kerfjs/ui:wa-popup"],
+      "rationale": "Render AnchoredSurface for anchored interactive help or popup content; position other elements with kerfjs/overlay's positionAnchored."
+    },
+    "content-container": {
+      "preferred": "@kerfjs/ui:content-item",
+      "avoid": ["@kerfjs/ui:wa-card"],
+      "rationale": "Contain related content in a ContentItem (appearance=\"surface\" for a raised card) or a SunkenPanel instead of a Web Awesome card."
+    },
+    "inline-status": {
+      "preferred": "@kerfjs/ui:state-banner",
+      "avoid": ["@kerfjs/ui:wa-callout"],
+      "rationale": "Render StateBanner for persistent inline status instead of a Web Awesome callout."
+    },
+    "fetched-content": {
+      "preferred": "@kerfjs/ui:content-item",
+      "avoid": ["@kerfjs/ui:wa-include"],
+      "rationale": "Fetch remote content with resource() from kerfjs/async and render it as Kerf content inside a ContentItem; never inject fetched markup."
+    },
+    "scroll-region": {
+      "preferred": "@kerfjs/ui:pane",
+      "avoid": ["@kerfjs/ui:wa-scroller"],
+      "rationale": "Let a Pane own vertical scrolling with scroll edges, or use ColumnTrack for a horizontal track, instead of a Web Awesome scroller."
+    },
+    "transient-notification": {
+      "preferred": "@kerfjs/ui:toast",
+      "avoid": ["@kerfjs/ui:wa-toast", "@kerfjs/ui:wa-toast-item"],
+      "rationale": "Call toast() from kerfjs/overlay with @kerfjs/ui/overlay-toast.css imported instead of a Web Awesome toast stack."
+    },
+    "hover-explanation": {
+      "preferred": "@kerfjs/ui:tooltip",
+      "avoid": ["@kerfjs/ui:wa-tooltip"],
+      "rationale": "Call tooltip() from kerfjs/overlay with @kerfjs/ui/overlay-tooltip.css imported instead of a Web Awesome tooltip; icon-only Kerf controls already get help tags."
+    },
+    "show-hide-content": {
+      "preferred": "@kerfjs/ui:disclosure",
+      "avoid": [
+        "@kerfjs/ui:wa-details",
+        "@kerfjs/ui:wa-accordion",
+        "@kerfjs/ui:wa-accordion-item"
+      ],
+      "rationale": "Use the Kerf Disclosure (a native details element) for show-and-hide content, and Disclosures sharing a name for an accordion."
+    },
+    "progress-indicator": {
+      "preferred": "@kerfjs/ui:progress-bar",
+      "avoid": ["@kerfjs/ui:wa-progress-bar"],
+      "rationale": "Use the Kerf ProgressBar, a native progress element with a label row, tones, and an indeterminate sweep."
+    },
+    "compact-progress": {
+      "preferred": "@kerfjs/ui:progress-ring",
+      "avoid": ["@kerfjs/ui:wa-progress-ring"],
+      "rationale": "Use the Kerf ProgressRing where a bar does not fit, inline in text, a row, or a toolbar."
+    },
+    "range-value": {
+      "preferred": "@kerfjs/ui:slider",
+      "avoid": ["@kerfjs/ui:wa-slider"],
+      "rationale": "Use the Kerf Slider, a native range input drawn as a track, fill, and thumb, with wireSliders for its live readout."
+    },
+    "tag-list": {
+      "preferred": "@kerfjs/ui:tag-field",
+      "avoid": ["@kerfjs/ui:wa-tag-input"],
+      "rationale": "Use the Kerf TagField, SearchField's token editor as a form field with a hidden input per tag, wired by wireTagFields."
+    },
+    "color-input": {
+      "preferred": "@kerfjs/ui:color-field",
+      "avoid": ["@kerfjs/ui:wa-color-picker"],
+      "rationale": "Use the Kerf ColorField, which opens a ColorPicker from a swatch and hex trigger, or an inline ColorPicker or ColorSwatches."
     }
   },
   "theme": {

package/ai/compile-time-contracts-v1.json

@@ -38,19 +38,19 @@
     },
     {
       "id": "KUI-T005",
-      "catalogKey": "@kerfjs/ui:token-search-field",
-      "publicImport": "@kerfjs/ui/token-search-field",
-      "symbols": ["TokenSearchFieldProps"],
+      "catalogKey": "@kerfjs/ui:search-field",
+      "publicImport": "@kerfjs/ui/search-field",
+      "symbols": ["SearchFieldProps"],
       "kind": "discriminated-union",
-      "summary": "Expanded state and expand-action inputs exist only for collapsible TokenSearchField variants."
+      "summary": "Expanded state and expand-action inputs exist only for collapsible SearchField variants."
     },
     {
       "id": "KUI-T006",
-      "catalogKey": "@kerfjs/ui:token-search-field",
-      "publicImport": "@kerfjs/ui/token-search-field",
-      "symbols": ["TokenSearchEditorAttributes"],
+      "catalogKey": "@kerfjs/ui:search-field",
+      "publicImport": "@kerfjs/ui/search-field",
+      "symbols": ["SearchFieldEditorAttributes"],
       "kind": "protected-attributes",
-      "summary": "TokenSearchField editor metadata cannot replace component-owned identity, morph, count, or placeholder attributes."
+      "summary": "SearchField editor metadata cannot replace component-owned identity, morph, count, or placeholder attributes."
     },
     {
       "id": "KUI-T007",
@@ -69,9 +69,9 @@
     },
     {
       "id": "KUI-T009",
-      "catalogKey": "@kerfjs/ui:token-search-field",
-      "publicImport": "@kerfjs/ui/wire-token-search-fields",
-      "symbols": ["TokenSearchKeyboardOptions", "WireTokenSearchFieldsOptions"],
+      "catalogKey": "@kerfjs/ui:search-field",
+      "publicImport": "@kerfjs/ui/wire-search-fields",
+      "symbols": ["SearchFieldKeyboardOptions", "WireSearchFieldsOptions"],
       "kind": "controlled-callback",
       "summary": "Adjacent-token removal requires the callback that commits removal to application-owned state."
     },