@mk-kit/ui 0.38.0 → 0.39.0

package/README.md

@@ -23,7 +23,12 @@ ng add @mk-kit/ui
 ```
 
 `ng add` installs the package and wires the theme stylesheet into
-`angular.json`. By hand instead:
+`angular.json`.
+
+**Coming from PrimeNG?** `ng g @mk-kit/ui:migrate-primeng --dry-run` shows
+what the codemod would rewrite (imports, class names, 1:1 selectors, a few
+input names) and what needs a manual touch; without `--dry-run` it applies
+the changes and writes `primeng-migration.md`. Details: <https://mk-kit.dev/migration>. By hand instead:
 
 ```bash
 npm install @mk-kit/ui

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-kit/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "publishConfig": {
     "access": "public"
   },

package/schematics/collection.json

@@ -5,6 +5,11 @@
       "description": "Adds @mk-kit/ui to an application: wires the theme stylesheet into angular.json and optionally scaffolds a provideMkI18n override block.",
       "factory": "./ng-add/index#ngAdd",
       "schema": "./ng-add/schema.json"
+    },
+    "migrate-primeng": {
+      "description": "Migrates a PrimeNG app to @mk-kit/ui: rewrites imports, class names and 1:1 selectors, annotates what needs a manual touch, cleans angular.json / package.json and writes a report.",
+      "factory": "./migrate-primeng/index#migratePrimeng",
+      "schema": "./migrate-primeng/schema.json"
     }
   }
 }

package/schematics/migrate-primeng/index.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migratePrimeng = migratePrimeng;
+const mapping_1 = require("./mapping");
+const transform_1 = require("./transform");
+const SKIP_DIRS = new Set(['node_modules', 'dist', '.angular', '.git']);
+function migratePrimeng(options) {
+    return (tree, context) => {
+        const root = normalize(options.path ?? 'src');
+        const dryRun = !!options.dryRun;
+        const reportPath = options.report ?? 'primeng-migration.md';
+        const files = [];
+        let scanned = 0;
+        tree.getDir(root).visit((path) => {
+            if (path.split('/').some((seg) => SKIP_DIRS.has(seg)))
+                return;
+            const isTs = path.endsWith('.ts') && !path.endsWith('.d.ts');
+            const isHtml = path.endsWith('.html');
+            if (!isTs && !isHtml)
+                return;
+            scanned++;
+            const source = tree.read(path)?.toString('utf8');
+            if (source === undefined || !/primeng|<p-[a-zA-Z]|\bp[A-Z][a-zA-Z]+\b/.test(source))
+                return;
+            const result = isTs ? (0, transform_1.transformTypeScript)(source) : (0, transform_1.transformTemplate)(source);
+            if (!result.findings.length && !result.changed)
+                return;
+            files.push({ path, findings: result.findings, changed: result.changed });
+            if (result.changed && !dryRun)
+                tree.overwrite(path, result.text);
+        });
+        const unmapped = files.some((f) => f.findings.some((x) => x.kind === 'unmapped'));
+        for (const [path, fn] of [
+            ['/angular.json', transform_1.transformAngularJson],
+            ['/package.json', (src) => (0, transform_1.transformPackageJson)(src, unmapped ? [] : mapping_1.PRIMENG_PACKAGES)],
+        ]) {
+            if (!tree.exists(path))
+                continue;
+            scanned++;
+            const result = fn(tree.read(path).toString('utf8'));
+            if (!result.findings.length)
+                continue;
+            files.push({ path, findings: result.findings, changed: result.changed });
+            if (result.changed && !dryRun)
+                tree.overwrite(path, result.text);
+        }
+        if (unmapped) {
+            files.push({
+                path: '/package.json',
+                changed: false,
+                findings: [{ rule: 'package:keep', message: 'primeng kept in package.json: some components have no mk-kit equivalent yet (see "Not available")', kind: 'manual', count: 1 }],
+            });
+        }
+        const report = (0, transform_1.renderReport)(files, { dryRun, scanned });
+        if (!dryRun) {
+            if (tree.exists(reportPath))
+                tree.overwrite(reportPath, report);
+            else
+                tree.create(reportPath, report);
+        }
+        const counts = { rewrite: 0, manual: 0, unmapped: 0 };
+        for (const f of files)
+            for (const x of f.findings)
+                counts[x.kind] += x.count;
+        context.logger.info(`migrate-primeng: ${dryRun ? 'dry run — ' : ''}${files.filter((f) => f.changed).length} file(s) ${dryRun ? 'would change' : 'changed'}; ` +
+            `${counts.rewrite} rewrites, ${counts.manual} manual steps, ${counts.unmapped} without an equivalent.` +
+            (dryRun ? '' : ` Report: ${reportPath}`));
+        if (dryRun)
+            context.logger.info('\n' + report);
+        return tree;
+    };
+}
+function normalize(p) {
+    const trimmed = p.replace(/\/+$/, '');
+    return trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+}

package/schematics/migrate-primeng/mapping.js

@@ -0,0 +1,289 @@
+"use strict";
+/**
+ * PrimeNG → @mk-kit/ui mapping used by the `migrate-primeng` schematic.
+ *
+ * Two tables:
+ * - `MODULES`: what each `primeng/<x>` import path exports and which mk-kit
+ *   class replaces each symbol (`null` = no drop-in equivalent → reported).
+ * - `SELECTORS`: template-level rewrites. `to` set + `exact` true means a
+ *   mechanical rename is safe; otherwise the original markup is left alone
+ *   and a `<!-- mk-kit: … -->` note is inserted once per file.
+ *
+ * Everything here is checked against the library's real exports/selectors
+ * (see projects/docs/public/api.json); keep it that way when editing.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PRIMENG_PACKAGES = exports.DOCS_BASE = exports.SELECTORS = exports.MODULES = void 0;
+const D = 'https://mk-kit.dev';
+exports.MODULES = [
+    { path: 'button', symbols: { ButtonModule: 'MkButton', Button: 'MkButton', ButtonDirective: 'MkButton' }, docs: '/components/buttons' },
+    { path: 'splitbutton', symbols: { SplitButtonModule: 'MkSplitButton', SplitButton: 'MkSplitButton' }, note: 'mk-split-button takes an mk-menu via [menu] instead of [model].', docs: '/components/buttons' },
+    { path: 'inputtext', symbols: { InputTextModule: 'MkInput', InputText: 'MkInput' }, docs: '/components/text-inputs' },
+    { path: 'textarea', symbols: { TextareaModule: 'MkInput', Textarea: 'MkInput' }, docs: '/components/text-inputs' },
+    { path: 'inputtextarea', symbols: { InputTextareaModule: 'MkInput', InputTextarea: 'MkInput' }, docs: '/components/text-inputs' },
+    { path: 'inputnumber', symbols: { InputNumberModule: 'MkNumberInput', InputNumber: 'MkNumberInput' }, docs: '/components/text-inputs' },
+    { path: 'password', symbols: { PasswordModule: 'MkPasswordInput', Password: 'MkPasswordInput' }, docs: '/components/text-inputs' },
+    { path: 'inputotp', symbols: { InputOtpModule: 'MkOtp', InputOtp: 'MkOtp' }, docs: '/components/text-inputs' },
+    { path: 'checkbox', symbols: { CheckboxModule: 'MkCheckbox', Checkbox: 'MkCheckbox' }, docs: '/components/toggles' },
+    { path: 'radiobutton', symbols: { RadioButtonModule: 'MkRadioGroup', RadioButton: 'MkRadioGroup' }, note: 'mk-radio-group wraps mk-radio children; the group owns the value.', docs: '/components/toggles' },
+    { path: 'toggleswitch', symbols: { ToggleSwitchModule: 'MkSwitch', ToggleSwitch: 'MkSwitch' }, docs: '/components/toggles' },
+    { path: 'inputswitch', symbols: { InputSwitchModule: 'MkSwitch', InputSwitch: 'MkSwitch' }, docs: '/components/toggles' },
+    { path: 'select', symbols: { SelectModule: 'MkSelect', Select: 'MkSelect' }, note: 'mk-select takes [options] as {label, value}[] — no optionLabel/optionValue.', docs: '/components/forms' },
+    { path: 'dropdown', symbols: { DropdownModule: 'MkSelect', Dropdown: 'MkSelect' }, note: 'mk-select takes [options] as {label, value}[] — no optionLabel/optionValue.', docs: '/components/forms' },
+    { path: 'multiselect', symbols: { MultiSelectModule: 'MkMultiSelect', MultiSelect: 'MkMultiSelect' }, note: 'mk-multi-select takes [options] as {label, value}[].', docs: '/components/selection' },
+    { path: 'listbox', symbols: { ListboxModule: 'MkListbox', Listbox: 'MkListbox' }, docs: '/components/selection' },
+    { path: 'autocomplete', symbols: { AutoCompleteModule: 'MkAutocomplete', AutoComplete: 'MkAutocomplete' }, note: 'Pass [options] (sync or async) instead of (completeMethod) + [suggestions].', docs: '/components/selection' },
+    { path: 'cascadeselect', symbols: { CascadeSelectModule: 'MkCascader', CascadeSelect: 'MkCascader' }, docs: '/components/selection' },
+    { path: 'treeselect', symbols: { TreeSelectModule: 'MkTreeSelect', TreeSelect: 'MkTreeSelect' }, docs: '/components/selection' },
+    { path: 'selectbutton', symbols: { SelectButtonModule: 'MkButtonToggleGroup', SelectButton: 'MkButtonToggleGroup' }, note: 'mk-button-toggle-group uses mk-button-toggle children instead of [options].', docs: '/components/selection' },
+    { path: 'togglebutton', symbols: { ToggleButtonModule: 'MkButtonToggleGroup', ToggleButton: 'MkButtonToggleGroup' }, docs: '/components/selection' },
+    { path: 'datepicker', symbols: { DatePickerModule: 'MkDatePicker', DatePicker: 'MkDatePicker' }, docs: '/components/date-time' },
+    { path: 'calendar', symbols: { CalendarModule: 'MkDatePicker', Calendar: 'MkDatePicker' }, docs: '/components/date-time' },
+    { path: 'rating', symbols: { RatingModule: 'MkRating', Rating: 'MkRating' }, docs: '/components/sliders' },
+    { path: 'slider', symbols: { SliderModule: 'MkSlider', Slider: 'MkSlider' }, note: 'Range mode → mk-range-slider.', docs: '/components/sliders' },
+    { path: 'colorpicker', symbols: { ColorPickerModule: 'MkColorPicker', ColorPicker: 'MkColorPicker' }, docs: '/components/sliders' },
+    { path: 'fileupload', symbols: { FileUploadModule: 'MkFileUpload', FileUpload: 'MkFileUpload' }, note: 'Replace [url] + (onUpload) with [uploadFn].', docs: '/components/forms' },
+    { path: 'editor', symbols: { EditorModule: 'MkRichText', Editor: 'MkRichText' }, docs: '/components/rich-text' },
+    { path: 'knob', symbols: { KnobModule: 'MkProgressRing', Knob: 'MkProgressRing' }, note: 'mk-progress-ring is display-only; for an editable dial use mk-slider.', docs: '/components/proportion-charts' },
+    { path: 'table', symbols: { TableModule: 'MkTable', Table: 'MkTable' }, note: 'mk-table renders from [columns] + [data]; templates via mkTableCell. Server-side paging/sorting → MkTableDataSource.', docs: '/components/table' },
+    { path: 'paginator', symbols: { PaginatorModule: 'MkPagination', Paginator: 'MkPagination' }, note: 'mk-pagination is 1-based with [total] + [pageSize]; no [first]/[rows].', docs: '/components/navigation' },
+    { path: 'tree', symbols: { TreeModule: 'MkTree', Tree: 'MkTree' }, note: 'Node shape is {label, children, key}; use [nodes].', docs: '/components/tree' },
+    { path: 'treetable', symbols: { TreeTableModule: 'MkTable', TreeTable: 'MkTable' }, note: 'mk-table with [childrenKey] renders tree rows.', docs: '/components/table' },
+    { path: 'dataview', symbols: { DataViewModule: null, DataView: null }, note: 'No data-view: compose mk-list / mk-grid with @for.', docs: '/components/cards-lists' },
+    { path: 'orderlist', symbols: { OrderListModule: 'MkSortableList', OrderList: 'MkSortableList' }, docs: '/components/drag-drop' },
+    { path: 'picklist', symbols: { PickListModule: 'MkTransferList', PickList: 'MkTransferList' }, docs: '/components/selection' },
+    { path: 'scroller', symbols: { ScrollerModule: 'MkVirtualScroll', Scroller: 'MkVirtualScroll' }, docs: '/components/data' },
+    { path: 'virtualscroller', symbols: { VirtualScrollerModule: 'MkVirtualScroll', VirtualScroller: 'MkVirtualScroll' }, docs: '/components/data' },
+    { path: 'timeline', symbols: { TimelineModule: 'MkTimeline', Timeline: 'MkTimeline' }, note: 'Use mk-timeline-item children instead of [value] + templates.', docs: '/components/empty-timeline' },
+    { path: 'organizationchart', symbols: { OrganizationChartModule: null, OrganizationChart: null }, note: 'No org chart yet.', docs: '/components/tree' },
+    { path: 'chart', symbols: { ChartModule: null, UIChart: null }, note: 'p-chart wraps Chart.js. mk-kit ships SVG charts: mk-line-chart, mk-bar-chart, mk-donut-chart, mk-gauge, … — map by [type].', docs: '/components/charts' },
+    { path: 'dialog', symbols: { DialogModule: 'MkDialog', Dialog: 'MkDialog' }, note: 'mk-dialog is opened through MkDialogService.open(Component) — no [(visible)] toggle. Move the dialog body into its own component.', docs: '/components/dialogs' },
+    { path: 'dynamicdialog', symbols: { DynamicDialogModule: null, DialogService: 'MkDialogService', DynamicDialogRef: 'MkOverlayRef', DynamicDialogConfig: null }, note: 'MkDialogService.open(Cmp, { data }); inject MK_OVERLAY_DATA in the component; await ref.afterClosed.', docs: '/components/dialogs' },
+    { path: 'confirmdialog', symbols: { ConfirmDialogModule: null, ConfirmDialog: null }, note: 'Use MkDialogService.confirm({ title, message, tone }) — no <p-confirmDialog> host element needed.', docs: '/components/dialogs' },
+    { path: 'confirmpopup', symbols: { ConfirmPopupModule: 'MkPopconfirm', ConfirmPopup: 'MkPopconfirm' }, note: 'Use [mkPopconfirmFor] on the trigger.', docs: '/components/popovers' },
+    { path: 'toast', symbols: { ToastModule: null, Toast: null }, note: 'No <p-toast> host: inject MkToastService and call success/info/warning/danger(message, { title }).', docs: '/components/snackbar' },
+    { path: 'message', symbols: { MessageModule: 'MkAlert', Message: 'MkAlert' }, docs: '/components/feedback' },
+    { path: 'messages', symbols: { MessagesModule: 'MkAlert', Messages: 'MkAlert' }, note: 'One mk-alert per message.', docs: '/components/feedback' },
+    { path: 'tooltip', symbols: { TooltipModule: 'MkTooltip', Tooltip: 'MkTooltip' }, docs: '/components/popovers' },
+    { path: 'popover', symbols: { PopoverModule: 'MkPopover', Popover: 'MkPopover' }, note: 'Use [mkPopoverTriggerFor] on the trigger instead of #op.toggle($event).', docs: '/components/popovers' },
+    { path: 'overlaypanel', symbols: { OverlayPanelModule: 'MkPopover', OverlayPanel: 'MkPopover' }, note: 'Use [mkPopoverTriggerFor] on the trigger instead of #op.toggle($event).', docs: '/components/popovers' },
+    { path: 'drawer', symbols: { DrawerModule: 'MkDrawer', Drawer: 'MkDrawer' }, docs: '/components/drawer' },
+    { path: 'sidebar', symbols: { SidebarModule: 'MkDrawer', Sidebar: 'MkDrawer' }, docs: '/components/drawer' },
+    { path: 'blockui', symbols: { BlockUIModule: 'MkBlockUi', BlockUI: 'MkBlockUi' }, note: 'Use the [mkBlockUi] directive on the region.', docs: '/components/feedback' },
+    { path: 'progressbar', symbols: { ProgressBarModule: 'MkProgressBar', ProgressBar: 'MkProgressBar' }, docs: '/components/loading' },
+    { path: 'progressspinner', symbols: { ProgressSpinnerModule: 'MkSpinner', ProgressSpinner: 'MkSpinner' }, docs: '/components/loading' },
+    { path: 'skeleton', symbols: { SkeletonModule: 'MkSkeleton', Skeleton: 'MkSkeleton' }, docs: '/components/loading' },
+    { path: 'badge', symbols: { BadgeModule: 'MkBadge', Badge: 'MkBadge', BadgeDirective: 'MkBadge' }, note: 'pBadge attribute → <mk-badge> element next to the target.', docs: '/components/badges-avatars' },
+    { path: 'tag', symbols: { TagModule: 'MkTag', Tag: 'MkTag' }, docs: '/components/badges-avatars' },
+    { path: 'chip', symbols: { ChipModule: 'MkChip', Chip: 'MkChip' }, docs: '/components/badges-avatars' },
+    { path: 'avatar', symbols: { AvatarModule: 'MkAvatar', Avatar: 'MkAvatar' }, docs: '/components/badges-avatars' },
+    { path: 'avatargroup', symbols: { AvatarGroupModule: 'MkAvatarGroup', AvatarGroup: 'MkAvatarGroup' }, docs: '/components/badges-avatars' },
+    { path: 'card', symbols: { CardModule: 'MkCard', Card: 'MkCard' }, note: 'Header/footer via mk-card-header / mk-card-footer.', docs: '/components/cards-lists' },
+    { path: 'panel', symbols: { PanelModule: 'MkCard', Panel: 'MkCard' }, note: 'Collapsible panel → mk-accordion-item.', docs: '/components/cards-lists' },
+    { path: 'fieldset', symbols: { FieldsetModule: 'MkCard', Fieldset: 'MkCard' }, docs: '/components/cards-lists' },
+    { path: 'divider', symbols: { DividerModule: 'MkDivider', Divider: 'MkDivider' }, docs: '/components/cards-lists' },
+    { path: 'toolbar', symbols: { ToolbarModule: 'MkToolbar', Toolbar: 'MkToolbar' }, docs: '/components/structure' },
+    { path: 'splitter', symbols: { SplitterModule: 'MkSplitter', Splitter: 'MkSplitter' }, docs: '/components/structure' },
+    { path: 'accordion', symbols: { AccordionModule: 'MkAccordion', Accordion: 'MkAccordion', AccordionPanel: 'MkAccordionItem', AccordionHeader: 'MkAccordionHeader', AccordionContent: null, AccordionTab: 'MkAccordionItem' }, docs: '/components/navigation' },
+    { path: 'tabs', symbols: { TabsModule: 'MkTabs', Tabs: 'MkTabs', TabList: null, Tab: 'MkTab', TabPanels: null, TabPanel: null }, note: 'mk-tabs uses <mk-tab label="…"> children: merge each p-tab + p-tabpanel pair.', docs: '/components/navigation' },
+    { path: 'tabview', symbols: { TabViewModule: 'MkTabs', TabView: 'MkTabs', TabPanel: 'MkTab' }, docs: '/components/navigation' },
+    { path: 'stepper', symbols: { StepperModule: 'MkStepper', Stepper: 'MkStepper', StepList: null, Step: 'MkStep', StepPanels: null, StepPanel: null }, docs: '/components/stepper' },
+    { path: 'steps', symbols: { StepsModule: 'MkStepper', Steps: 'MkStepper' }, note: 'Use mk-step children instead of [model].', docs: '/components/stepper' },
+    { path: 'menu', symbols: { MenuModule: 'MkMenu', Menu: 'MkMenu' }, note: 'Use mk-menu-item children instead of [model]; open with [mkMenuTriggerFor].', docs: '/components/navigation' },
+    { path: 'menubar', symbols: { MenubarModule: 'MkNavList', Menubar: 'MkNavList' }, note: 'Horizontal nav → mk-nav-list / mk-toolbar with mkButton links.', docs: '/components/command-nav' },
+    { path: 'tieredmenu', symbols: { TieredMenuModule: 'MkMenu', TieredMenu: 'MkMenu' }, note: 'Nested items via [mkSubmenuFor].', docs: '/components/navigation' },
+    { path: 'contextmenu', symbols: { ContextMenuModule: 'MkContextMenuTrigger', ContextMenu: 'MkContextMenuTrigger' }, note: 'Use [mkContextMenuTriggerFor]="menu" on the element.', docs: '/components/context-menu' },
+    { path: 'megamenu', symbols: { MegaMenuModule: null, MegaMenu: null }, note: 'No mega menu; compose mk-popover + mk-nav-list.', docs: '/components/command-nav' },
+    { path: 'panelmenu', symbols: { PanelMenuModule: 'MkNavList', PanelMenu: 'MkNavList' }, note: 'mk-nav-list with mk-nav-group children.', docs: '/components/command-nav' },
+    { path: 'breadcrumb', symbols: { BreadcrumbModule: 'MkBreadcrumb', Breadcrumb: 'MkBreadcrumb' }, note: 'Use mk-breadcrumb-item children instead of [model].', docs: '/components/navigation' },
+    { path: 'dock', symbols: { DockModule: null, Dock: null }, note: 'No dock.', docs: '/components/navigation' },
+    { path: 'carousel', symbols: { CarouselModule: 'MkCarousel', Carousel: 'MkCarousel' }, note: 'Use mkCarouselSlide templates instead of [value].', docs: '/components/data' },
+    { path: 'galleria', symbols: { GalleriaModule: 'MkImageGallery', Galleria: 'MkImageGallery' }, docs: '/components/images' },
+    { path: 'image', symbols: { ImageModule: 'MkImage', Image: 'MkImage' }, note: 'Preview → MkLightboxService.', docs: '/components/images' },
+    { path: 'scrollpanel', symbols: { ScrollPanelModule: 'MkScrollArea', ScrollPanel: 'MkScrollArea' }, docs: '/components/structure' },
+    { path: 'scrolltop', symbols: { ScrollTopModule: 'MkBackToTop', ScrollTop: 'MkBackToTop' }, docs: '/components/navigation' },
+    { path: 'speeddial', symbols: { SpeedDialModule: 'MkFab', SpeedDial: 'MkFab' }, note: 'mk-fab with mkFabAction children.', docs: '/components/navigation' },
+    { path: 'inplace', symbols: { InplaceModule: 'MkInlineEdit', Inplace: 'MkInlineEdit' }, docs: '/components/table' },
+    { path: 'metergroup', symbols: { MeterGroupModule: null, MeterGroup: null }, note: 'No meter group yet; mk-progress-bar per segment.', docs: '/components/loading' },
+    { path: 'terminal', symbols: { TerminalModule: null, Terminal: null }, note: 'No terminal.', docs: '/components/data' },
+    { path: 'iconfield', symbols: { IconFieldModule: 'MkInputGroup', IconField: 'MkInputGroup', InputIcon: 'MkIcon', InputIconModule: 'MkIcon' }, note: 'mk-input-group with a prefix slot.', docs: '/components/text-inputs' },
+    { path: 'inputgroup', symbols: { InputGroupModule: 'MkInputGroup', InputGroup: 'MkInputGroup' }, docs: '/components/text-inputs' },
+    { path: 'inputgroupaddon', symbols: { InputGroupAddonModule: null, InputGroupAddon: null }, note: 'Addons are content slots of mk-input-group.', docs: '/components/text-inputs' },
+    { path: 'floatlabel', symbols: { FloatLabelModule: 'MkFormField', FloatLabel: 'MkFormField' }, note: 'mk-form-field labelPosition="float".', docs: '/components/forms' },
+    { path: 'iftalabel', symbols: { IftaLabelModule: 'MkFormField', IftaLabel: 'MkFormField' }, docs: '/components/forms' },
+    { path: 'keyfilter', symbols: { KeyFilterModule: 'MkMask', KeyFilter: 'MkMask' }, note: 'Use [mkMask] patterns or a Validators.pattern.', docs: '/components/utilities' },
+    { path: 'inputmask', symbols: { InputMaskModule: 'MkMask', InputMask: 'MkMask' }, note: '[mkMask] on a native input (tokens 0 / A / *).', docs: '/components/utilities' },
+    { path: 'ripple', symbols: { RippleModule: 'MkRipple', Ripple: 'MkRipple' }, docs: '/components/utilities' },
+    { path: 'focustrap', symbols: { FocusTrapModule: 'MkFocusTrap', FocusTrap: 'MkFocusTrap' }, docs: '/core-services' },
+    { path: 'autofocus', symbols: { AutoFocusModule: 'MkAutofocus', AutoFocus: 'MkAutofocus' }, docs: '/components/utilities' },
+    { path: 'animateonscroll', symbols: { AnimateOnScrollModule: 'MkIntersect', AnimateOnScroll: 'MkIntersect' }, docs: '/components/utilities' },
+    { path: 'styleclass', symbols: { StyleClassModule: null, StyleClass: null }, note: 'Bind [class.x] / @if instead.' },
+    { path: 'dragdrop', symbols: { DragDropModule: 'MkDropList', Draggable: 'MkDrag', Droppable: 'MkDropList' }, docs: '/components/drag-drop' },
+    { path: 'api', symbols: { MessageService: 'MkToastService', ConfirmationService: 'MkDialogService', MenuItem: null, PrimeNGConfig: null, PrimeIcons: null, FilterService: null, SortEvent: null, TreeNode: null, SelectItem: null, PrimeTemplate: null, SharedModule: null }, note: 'MessageService.add({severity, summary, detail}) → MkToastService.<severity>(detail, { title: summary }). ConfirmationService.confirm({…}) → await MkDialogService.confirm({ title, message, tone }).', docs: '/components/snackbar' },
+    { path: 'config', symbols: { PrimeNG: null, providePrimeNG: null }, note: 'providePrimeNG({ theme }) → import @mk-kit/ui/styles.css and use provideMkI18n for strings.', docs: '/theming' },
+];
+/** Element / attribute rewrites for templates. Order matters only for overlapping prefixes (longest first is enforced by the transform). */
+exports.SELECTORS = [
+    // Buttons
+    { kind: 'attribute', from: 'pButton', to: 'mkButton', attrs: { severity: 'tone', '[severity]': '[tone]', '[outlined]': null, '[loading]': '[loading]', '[disabled]': '[disabled]' }, note: 'label="…" / icon="…" become content: <button mkButton><mk-icon name="…" /> Label</button>; [outlined]/[text]/[link] → variant="outline" | "ghost" | "link".', manual: true, docs: '/components/buttons' },
+    { kind: 'element', from: 'p-button', note: '<p-button label="…"> → <button mkButton>…</button>; severity → tone; [outlined] → variant="outline".', docs: '/components/buttons' },
+    { kind: 'element', from: 'p-splitbutton', to: 'mk-split-button', manual: true, note: '[model] → an <mk-menu #m> with mk-menu-item children and [menu]="m"; label → content.', docs: '/components/buttons' },
+    { kind: 'element', from: 'p-splitButton', to: 'mk-split-button', manual: true, note: '[model] → an <mk-menu #m> with mk-menu-item children and [menu]="m"; label → content.', docs: '/components/buttons' },
+    // Text inputs
+    { kind: 'attribute', from: 'pInputText', to: 'mkInput', docs: '/components/text-inputs' },
+    { kind: 'attribute', from: 'pTextarea', to: 'mkInput', docs: '/components/text-inputs' },
+    { kind: 'attribute', from: 'pInputTextarea', to: 'mkInput', docs: '/components/text-inputs' },
+    { kind: 'attribute', from: 'pAutoFocus', to: 'mkAutofocus', docs: '/components/utilities' },
+    { kind: 'attribute', from: 'pRipple', to: 'mkRipple', docs: '/components/utilities' },
+    { kind: 'attribute', from: 'pTooltip', to: 'mkTooltip', attrs: { tooltipPosition: 'mkTooltipPlacement', '[tooltipPosition]': '[mkTooltipPlacement]' }, docs: '/components/popovers' },
+    { kind: 'attribute', from: 'pBadge', note: 'pBadge attribute → place an <mk-badge dot> / <mk-badge>{{ n }}</mk-badge> next to the element.', docs: '/components/badges-avatars' },
+    { kind: 'attribute', from: 'pKeyFilter', note: 'Use [mkMask] or Validators.pattern.', docs: '/components/utilities' },
+    { kind: 'attribute', from: 'pInputMask', to: 'mkMask', manual: true, note: 'Mask tokens: PrimeNG 9/a/* → mk-kit 0/A/*.', docs: '/components/utilities' },
+    { kind: 'element', from: 'p-inputnumber', to: 'mk-number-input', manual: true, note: 'mode="currency" → mk-currency-input; [showButtons] is always on.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputNumber', to: 'mk-number-input', manual: true, note: 'mode="currency" → mk-currency-input; [showButtons] is always on.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-password', to: 'mk-password-input', attrs: { '[feedback]': '[showStrength]', '[toggleMask]': null }, docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputotp', to: 'mk-otp', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputOtp', to: 'mk-otp', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-floatlabel', to: 'mk-form-field', manual: true, note: 'Add labelPosition="float" and move the <label> text into [label].', docs: '/components/forms' },
+    { kind: 'element', from: 'p-floatLabel', to: 'mk-form-field', manual: true, note: 'Add labelPosition="float" and move the <label> text into [label].', docs: '/components/forms' },
+    { kind: 'element', from: 'p-iconfield', to: 'mk-input-group', manual: true, note: 'Icon → a prefix slot inside mk-input-group.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-iconField', to: 'mk-input-group', manual: true, note: 'Icon → a prefix slot inside mk-input-group.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputgroupaddon', note: 'Addons are content slots of mk-input-group: replace the wrapper with a plain element inside mk-input-group.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputGroupAddon', note: 'Addons are content slots of mk-input-group: replace the wrapper with a plain element inside mk-input-group.', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputgroup', to: 'mk-input-group', docs: '/components/text-inputs' },
+    { kind: 'element', from: 'p-inputGroup', to: 'mk-input-group', docs: '/components/text-inputs' },
+    // Toggles & selection
+    { kind: 'element', from: 'p-checkbox', to: 'mk-checkbox', manual: true, note: 'Non-binary (array) checkboxes → one mk-checkbox per option; label="…" → content.', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-radiobutton', note: 'Wrap options in <mk-radio-group [(ngModel)]> with <mk-radio value="…">Label</mk-radio> children.', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-radioButton', note: 'Wrap options in <mk-radio-group [(ngModel)]> with <mk-radio value="…">Label</mk-radio> children.', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-toggleswitch', to: 'mk-switch', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-toggleSwitch', to: 'mk-switch', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-inputswitch', to: 'mk-switch', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-inputSwitch', to: 'mk-switch', docs: '/components/toggles' },
+    { kind: 'element', from: 'p-select', to: 'mk-select', manual: true, note: 'Map [options] to {label, value}[] (no optionLabel/optionValue); [showClear] not needed.', docs: '/components/forms' },
+    { kind: 'element', from: 'p-dropdown', to: 'mk-select', manual: true, note: 'Map [options] to {label, value}[] (no optionLabel/optionValue).', docs: '/components/forms' },
+    { kind: 'element', from: 'p-multiselect', to: 'mk-multi-select', manual: true, note: 'Map [options] to {label, value}[].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-multiSelect', to: 'mk-multi-select', manual: true, note: 'Map [options] to {label, value}[].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-listbox', to: 'mk-listbox', manual: true, note: 'Map [options] to {label, value}[].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-autocomplete', to: 'mk-autocomplete', manual: true, note: '(completeMethod) + [suggestions] → [options] (array or (query) => Promise/Observable).', docs: '/components/selection' },
+    { kind: 'element', from: 'p-autoComplete', to: 'mk-autocomplete', manual: true, note: '(completeMethod) + [suggestions] → [options] (array or (query) => Promise/Observable).', docs: '/components/selection' },
+    { kind: 'element', from: 'p-cascadeselect', to: 'mk-cascader', manual: true, note: 'Options: {label, value, children}[].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-cascadeSelect', to: 'mk-cascader', manual: true, note: 'Options: {label, value, children}[].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-treeselect', to: 'mk-tree-select', manual: true, note: '[options] → [nodes] ({label, key, children}).', docs: '/components/selection' },
+    { kind: 'element', from: 'p-treeSelect', to: 'mk-tree-select', manual: true, note: '[options] → [nodes] ({label, key, children}).', docs: '/components/selection' },
+    { kind: 'element', from: 'p-selectbutton', to: 'mk-button-toggle-group', manual: true, note: '[options] → <mk-button-toggle value="…">Label</mk-button-toggle> children.', docs: '/components/selection' },
+    { kind: 'element', from: 'p-selectButton', to: 'mk-button-toggle-group', manual: true, note: '[options] → <mk-button-toggle value="…">Label</mk-button-toggle> children.', docs: '/components/selection' },
+    { kind: 'element', from: 'p-togglebutton', note: 'Single toggle → <mk-button-toggle-group> with one <mk-button-toggle>, or a checkbox-style mkButton.', docs: '/components/selection' },
+    { kind: 'element', from: 'p-toggleButton', note: 'Single toggle → <mk-button-toggle-group> with one <mk-button-toggle>, or a checkbox-style mkButton.', docs: '/components/selection' },
+    { kind: 'element', from: 'p-rating', to: 'mk-rating', attrs: { stars: 'max', '[stars]': '[max]' }, docs: '/components/sliders' },
+    { kind: 'element', from: 'p-slider', to: 'mk-slider', manual: true, note: '[range] → mk-range-slider with [low, high] value.', docs: '/components/sliders' },
+    { kind: 'element', from: 'p-colorpicker', to: 'mk-color-picker', docs: '/components/sliders' },
+    { kind: 'element', from: 'p-colorPicker', to: 'mk-color-picker', docs: '/components/sliders' },
+    { kind: 'element', from: 'p-knob', note: 'Display → mk-progress-ring [value]; editable → mk-slider.', docs: '/components/proportion-charts' },
+    // Dates
+    { kind: 'element', from: 'p-datepicker', to: 'mk-date-picker', manual: true, note: '[minDate]/[maxDate] → [min]/[max]; [showTime] → mk-datetime-picker; [selectionMode]="range" → mk-date-range-picker; dateFormat → displayFormat (yyyy-MM-dd tokens).', docs: '/components/date-time' },
+    { kind: 'element', from: 'p-datePicker', to: 'mk-date-picker', manual: true, note: '[minDate]/[maxDate] → [min]/[max]; [showTime] → mk-datetime-picker; range → mk-date-range-picker.', docs: '/components/date-time' },
+    { kind: 'element', from: 'p-calendar', to: 'mk-date-picker', manual: true, note: '[minDate]/[maxDate] → [min]/[max]; [showTime] → mk-datetime-picker; range → mk-date-range-picker; [timeOnly] → mk-time-picker.', docs: '/components/date-time' },
+    // Files & editors
+    { kind: 'element', from: 'p-fileupload', to: 'mk-file-upload', manual: true, note: '[url] + (onUpload) → [uploadFn]; [maxFileSize] → [maxSize]; mode="basic" is the default look.', docs: '/components/forms' },
+    { kind: 'element', from: 'p-fileUpload', to: 'mk-file-upload', manual: true, note: '[url] + (onUpload) → [uploadFn]; [maxFileSize] → [maxSize].', docs: '/components/forms' },
+    { kind: 'element', from: 'p-editor', to: 'mk-rich-text', manual: true, note: 'HTML in/out via [(ngModel)] works; toolbar customisation differs (see docs).', docs: '/components/rich-text' },
+    // Data
+    { kind: 'element', from: 'p-table', to: 'mk-table', manual: true, note: '[value] → [data]; define [columns] ({key, header, sortable}) and drop the <ng-template pTemplate="header|body"> blocks (custom cells → mkTableCell); [paginator] → mk-pagination or MkTableDataSource; selection → [selectable] + [(selected)].', attrs: { '[value]': '[data]', '[selectionMode]': null, '[rowHover]': '[hover]', '[striped]': '[zebra]', '[stripedRows]': '[zebra]' }, docs: '/components/table' },
+    { kind: 'element', from: 'p-treetable', to: 'mk-table', manual: true, note: 'mk-table with [childrenKey]="\'children\'"; same column mapping as p-table.', attrs: { '[value]': '[data]' }, docs: '/components/table' },
+    { kind: 'element', from: 'p-treeTable', to: 'mk-table', manual: true, note: 'mk-table with [childrenKey]="\'children\'"; same column mapping as p-table.', attrs: { '[value]': '[data]' }, docs: '/components/table' },
+    { kind: 'element', from: 'p-paginator', to: 'mk-pagination', manual: true, note: '[rows] → [pageSize], [totalRecords] → [total], [first] → 1-based [(page)]; (onPageChange) → (pageChange).', attrs: { '[rows]': '[pageSize]', '[totalRecords]': '[total]', '(onPageChange)': '(pageChange)' }, docs: '/components/navigation' },
+    { kind: 'element', from: 'p-dataview', note: 'Compose mk-list / mk-grid with @for; mk-pagination for paging.', docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-dataView', note: 'Compose mk-list / mk-grid with @for; mk-pagination for paging.', docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-tree', to: 'mk-tree', manual: true, note: '[value] → [nodes] ({label, key, children}); [(selection)] → [(selected)].', attrs: { '[value]': '[nodes]' }, docs: '/components/tree' },
+    { kind: 'element', from: 'p-orderlist', to: 'mk-sortable-list', manual: true, note: '[value] → [(items)] with a projected row template.', docs: '/components/drag-drop' },
+    { kind: 'element', from: 'p-orderList', to: 'mk-sortable-list', manual: true, note: '[value] → [(items)] with a projected row template.', docs: '/components/drag-drop' },
+    { kind: 'element', from: 'p-picklist', to: 'mk-transfer-list', manual: true, note: '[source]/[target] → [items] + [(value)].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-pickList', to: 'mk-transfer-list', manual: true, note: '[source]/[target] → [items] + [(value)].', docs: '/components/selection' },
+    { kind: 'element', from: 'p-scroller', to: 'mk-virtual-scroll', manual: true, note: '[itemSize] → [itemHeight]; row template is projected.', attrs: { '[itemSize]': '[itemHeight]' }, docs: '/components/data' },
+    { kind: 'element', from: 'p-virtualscroller', to: 'mk-virtual-scroll', manual: true, note: '[itemSize] → [itemHeight]; row template is projected.', attrs: { '[itemSize]': '[itemHeight]' }, docs: '/components/data' },
+    { kind: 'element', from: 'p-timeline', to: 'mk-timeline', manual: true, note: '[value] + templates → <mk-timeline-item> children.', docs: '/components/empty-timeline' },
+    { kind: 'element', from: 'p-organizationchart', note: 'No org chart yet — mk-tree is the closest.', docs: '/components/tree' },
+    { kind: 'element', from: 'p-organizationChart', note: 'No org chart yet — mk-tree is the closest.', docs: '/components/tree' },
+    { kind: 'element', from: 'p-chart', note: 'Replace by the matching SVG chart: type="line" → mk-line-chart, "bar" → mk-bar-chart, "doughnut"/"pie" → mk-donut-chart, "radar" → mk-radar-chart, "scatter"/"bubble" → mk-scatter-chart. Data shape is plain series arrays.', docs: '/components/charts' },
+    { kind: 'element', from: 'p-metergroup', note: 'No meter group yet; use one mk-progress-bar per segment.', docs: '/components/loading' },
+    { kind: 'element', from: 'p-meterGroup', note: 'No meter group yet; use one mk-progress-bar per segment.', docs: '/components/loading' },
+    // Overlays & feedback
+    { kind: 'element', from: 'p-dialog', note: 'mk-dialog is opened with MkDialogService.open(Component, { data }) — move this <p-dialog> body into a component (see docs) and drop [(visible)].', docs: '/components/dialogs' },
+    { kind: 'element', from: 'p-confirmdialog', note: 'Remove this host element; call await MkDialogService.confirm({ title, message, tone }) where you used ConfirmationService.', docs: '/components/dialogs' },
+    { kind: 'element', from: 'p-confirmDialog', note: 'Remove this host element; call await MkDialogService.confirm({ title, message, tone }) where you used ConfirmationService.', docs: '/components/dialogs' },
+    { kind: 'element', from: 'p-confirmpopup', note: 'Put [mkPopconfirmFor]="pc" on the trigger and an <mk-popconfirm #pc message="…" (confirm)="…"> next to it.', docs: '/components/popovers' },
+    { kind: 'element', from: 'p-confirmPopup', note: 'Put [mkPopconfirmFor]="pc" on the trigger and an <mk-popconfirm #pc message="…" (confirm)="…"> next to it.', docs: '/components/popovers' },
+    { kind: 'element', from: 'p-toast', note: 'Remove this host element; MkToastService mounts its own container. MessageService.add({severity, summary, detail}) → toast.<severity>(detail, { title: summary }).', docs: '/components/snackbar' },
+    { kind: 'element', from: 'p-message', to: 'mk-alert', manual: true, note: 'severity → tone (error → danger); text="…" → content.', attrs: { severity: 'tone', '[severity]': '[tone]' }, docs: '/components/feedback' },
+    { kind: 'element', from: 'p-messages', note: 'Render one <mk-alert [tone]> per message with @for.', docs: '/components/feedback' },
+    { kind: 'element', from: 'p-popover', note: 'Put [mkPopoverTriggerFor]="pop" on the trigger and rename this element to <mk-popover #pop>; drop #op.toggle($event).', docs: '/components/popovers' },
+    { kind: 'element', from: 'p-overlaypanel', note: 'Put [mkPopoverTriggerFor]="pop" on the trigger and rename this element to <mk-popover #pop>; drop #op.toggle($event).', docs: '/components/popovers' },
+    { kind: 'element', from: 'p-overlayPanel', note: 'Put [mkPopoverTriggerFor]="pop" on the trigger and rename this element to <mk-popover #pop>; drop #op.toggle($event).', docs: '/components/popovers' },
+    { kind: 'element', from: 'p-drawer', to: 'mk-drawer', manual: true, note: '[(visible)] → [(open)]; position → side; [modal] → [hasBackdrop].', attrs: { '[(visible)]': '[(open)]', '[visible]': '[open]', '(visibleChange)': '(openChange)', position: 'side', '[position]': '[side]', '[modal]': '[hasBackdrop]', header: 'heading', '[header]': '[heading]' }, docs: '/components/drawer' },
+    { kind: 'element', from: 'p-sidebar', to: 'mk-drawer', manual: true, note: '[(visible)] → [(open)]; position → side; [modal] → [hasBackdrop].', attrs: { '[(visible)]': '[(open)]', '[visible]': '[open]', '(visibleChange)': '(openChange)', position: 'side', '[position]': '[side]', '[modal]': '[hasBackdrop]', header: 'heading', '[header]': '[heading]' }, docs: '/components/drawer' },
+    { kind: 'element', from: 'p-blockui', note: 'Use the [mkBlockUi]="busy()" directive on the region (or MkBlockUiService for the page).', docs: '/components/feedback' },
+    { kind: 'element', from: 'p-blockUI', note: 'Use the [mkBlockUi]="busy()" directive on the region (or MkBlockUiService for the page).', docs: '/components/feedback' },
+    { kind: 'element', from: 'p-progressbar', to: 'mk-progress-bar', attrs: { '[mode]': null, mode: null }, manual: true, note: 'mode="indeterminate" → the indeterminate attribute.', docs: '/components/loading' },
+    { kind: 'element', from: 'p-progressBar', to: 'mk-progress-bar', manual: true, note: 'mode="indeterminate" → the indeterminate attribute.', docs: '/components/loading' },
+    { kind: 'element', from: 'p-progressspinner', to: 'mk-spinner', docs: '/components/loading' },
+    { kind: 'element', from: 'p-progressSpinner', to: 'mk-spinner', docs: '/components/loading' },
+    { kind: 'element', from: 'p-skeleton', to: 'mk-skeleton', attrs: { shape: 'shape', width: 'width', height: 'height' }, docs: '/components/loading' },
+    { kind: 'element', from: 'p-badge', to: 'mk-badge', manual: true, note: '[value] → content; severity → tone.', attrs: { severity: 'tone', '[severity]': '[tone]' }, docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-tag', to: 'mk-tag', manual: true, note: '[value] → content; severity → tone; [rounded] is the default look.', attrs: { severity: 'tone', '[severity]': '[tone]' }, docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-chip', to: 'mk-chip', manual: true, note: 'label="…" → content; [removable] is the same; (onRemove) → (remove).', attrs: { '(onRemove)': '(remove)' }, docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-avatar', to: 'mk-avatar', manual: true, note: 'label="AB" → name="A B" (initials are derived); image → src; shape="circle" is the default.', attrs: { image: 'src', '[image]': '[src]' }, docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-avatargroup', to: 'mk-avatar-group', docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-avatarGroup', to: 'mk-avatar-group', docs: '/components/badges-avatars' },
+    { kind: 'element', from: 'p-card', to: 'mk-card', manual: true, note: 'header="…" → <mk-card-header> / <mk-card-title>; pTemplate="footer" → <mk-card-footer>.', docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-panel', to: 'mk-card', manual: true, note: 'header → <mk-card-header>; [toggleable] → use mk-accordion-item instead.', docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-fieldset', to: 'mk-card', manual: true, note: 'legend → <mk-card-header>.', docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-divider', to: 'mk-divider', attrs: { layout: 'orientation', '[layout]': '[orientation]' }, docs: '/components/cards-lists' },
+    { kind: 'element', from: 'p-toolbar', to: 'mk-toolbar', manual: true, note: 'pTemplate="start|end" → plain content; use mk-flex for alignment.', docs: '/components/structure' },
+    { kind: 'element', from: 'p-splitter', to: 'mk-splitter', manual: true, note: 'p-splitterpanel children → two projected children; [layout] → orientation.', attrs: { layout: 'orientation', '[layout]': '[orientation]' }, docs: '/components/structure' },
+    { kind: 'element', from: 'p-splitterpanel', note: 'Drop the wrapper: mk-splitter projects its two children directly.', docs: '/components/structure' },
+    { kind: 'element', from: 'p-splitterPanel', note: 'Drop the wrapper: mk-splitter projects its two children directly.', docs: '/components/structure' },
+    { kind: 'element', from: 'p-scrollpanel', to: 'mk-scroll-area', docs: '/components/structure' },
+    { kind: 'element', from: 'p-scrollPanel', to: 'mk-scroll-area', docs: '/components/structure' },
+    { kind: 'element', from: 'p-scrolltop', to: 'mk-back-to-top', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-scrollTop', to: 'mk-back-to-top', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-image', to: 'mk-image', manual: true, note: '[preview] → MkLightboxService.open().', docs: '/components/images' },
+    { kind: 'element', from: 'p-galleria', to: 'mk-image-gallery', manual: true, note: '[value] → [images] ({src, alt}).', docs: '/components/images' },
+    { kind: 'element', from: 'p-carousel', to: 'mk-carousel', manual: true, note: '[value] + template → <ng-template mkCarouselSlide> per item.', docs: '/components/data' },
+    { kind: 'element', from: 'p-inplace', to: 'mk-inline-edit', manual: true, note: 'Bind [(value)] instead of display/content templates.', docs: '/components/table' },
+    // Navigation
+    { kind: 'element', from: 'p-tabs', to: 'mk-tabs', manual: true, note: 'Merge each <p-tab> + <p-tabpanel> pair into <mk-tab label="…">…</mk-tab>; drop p-tablist / p-tabpanels.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tablist', note: 'Drop: mk-tabs renders its own tab list.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tabpanels', note: 'Drop: <mk-tab> children go directly inside <mk-tabs>.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tabpanel', note: 'Becomes <mk-tab label="…"> (label from the matching <p-tab>).', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tabview', to: 'mk-tabs', manual: true, note: '[(activeIndex)] → [(selectedIndex)].', attrs: { '[(activeIndex)]': '[(selectedIndex)]', '[activeIndex]': '[selectedIndex]', '(activeIndexChange)': '(selectedIndexChange)' }, docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tabView', to: 'mk-tabs', manual: true, note: '[(activeIndex)] → [(selectedIndex)].', attrs: { '[(activeIndex)]': '[(selectedIndex)]', '[activeIndex]': '[selectedIndex]', '(activeIndexChange)': '(selectedIndexChange)' }, docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tabPanel', to: 'mk-tab', attrs: { header: 'label', '[header]': '[label]' }, docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordion', to: 'mk-accordion', attrs: { '[multiple]': '[multi]', multiple: 'multi' }, docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordion-panel', to: 'mk-accordion-item', manual: true, note: 'Move the <p-accordion-header> text into header="…" and drop the p-accordion-content wrapper.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordionpanel', to: 'mk-accordion-item', manual: true, note: 'Move the <p-accordion-header> text into header="…" and drop the p-accordion-content wrapper.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordion-header', note: 'Becomes header="…" on the mk-accordion-item (or an [mkAccordionHeader] template).', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordion-content', note: 'Drop the wrapper: content goes directly inside mk-accordion-item.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordiontab', to: 'mk-accordion-item', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-accordionTab', to: 'mk-accordion-item', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-stepper', to: 'mk-stepper', manual: true, note: 'Each p-step + p-step-panel → <mk-step label="…">; [(value)] → [(selectedIndex)] (0-based).', docs: '/components/stepper' },
+    { kind: 'element', from: 'p-steps', to: 'mk-stepper', manual: true, note: '[model] → <mk-step label="…"> children; [(activeIndex)] → [(selectedIndex)].', attrs: { '[(activeIndex)]': '[(selectedIndex)]', '[activeIndex]': '[selectedIndex]' }, docs: '/components/stepper' },
+    { kind: 'element', from: 'p-menu', to: 'mk-menu', manual: true, note: '[model] → <mk-menu-item> children; [popup] + #menu.toggle($event) → [mkMenuTriggerFor]="menu" on the button.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tieredmenu', to: 'mk-menu', manual: true, note: '[model] → <mk-menu-item> children; nested items via [mkSubmenuFor].', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-tieredMenu', to: 'mk-menu', manual: true, note: '[model] → <mk-menu-item> children; nested items via [mkSubmenuFor].', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-contextmenu', to: 'mk-menu', manual: true, note: '[model] → <mk-menu-item> children; [target] → put [mkContextMenuTriggerFor]="menu" on the element.', docs: '/components/context-menu' },
+    { kind: 'element', from: 'p-contextMenu', to: 'mk-menu', manual: true, note: '[model] → <mk-menu-item> children; [target] → put [mkContextMenuTriggerFor]="menu" on the element.', docs: '/components/context-menu' },
+    { kind: 'element', from: 'p-menubar', note: 'Horizontal nav → <mk-toolbar> with mkButton links, or mk-nav-list.', docs: '/components/command-nav' },
+    { kind: 'element', from: 'p-megamenu', note: 'No mega menu; compose mk-popover + mk-nav-list.', docs: '/components/command-nav' },
+    { kind: 'element', from: 'p-megaMenu', note: 'No mega menu; compose mk-popover + mk-nav-list.', docs: '/components/command-nav' },
+    { kind: 'element', from: 'p-panelmenu', to: 'mk-nav-list', manual: true, note: '[model] → <mk-nav-group> / <mk-nav-item> children.', docs: '/components/command-nav' },
+    { kind: 'element', from: 'p-panelMenu', to: 'mk-nav-list', manual: true, note: '[model] → <mk-nav-group> / <mk-nav-item> children.', docs: '/components/command-nav' },
+    { kind: 'element', from: 'p-breadcrumb', to: 'mk-breadcrumb', manual: true, note: '[model] → <mk-breadcrumb-item> children.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-dock', note: 'No dock.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-speeddial', to: 'mk-fab', manual: true, note: '[model] → <button mkFabAction> children.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-speedDial', to: 'mk-fab', manual: true, note: '[model] → <button mkFabAction> children.', docs: '/components/navigation' },
+    { kind: 'element', from: 'p-terminal', note: 'No terminal.', docs: '/components/data' },
+];
+exports.DOCS_BASE = D;
+/** package.json dependencies the migration makes obsolete. */
+exports.PRIMENG_PACKAGES = ['primeng', '@primeng/themes', '@primeuix/themes', '@primeuix/styled', 'primeicons', 'primeflex'];

package/schematics/migrate-primeng/schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "MkKitMigratePrimeng",
+  "title": "@mk-kit/ui migrate-primeng schematic",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "default": "src",
+      "description": "Directory to migrate (TypeScript and HTML files are visited recursively)."
+    },
+    "dryRun": {
+      "type": "boolean",
+      "default": false,
+      "description": "Compute and print the report without writing any file.",
+      "alias": "d"
+    },
+    "report": {
+      "type": "string",
+      "default": "primeng-migration.md",
+      "description": "Path of the Markdown report to write (relative to the workspace root)."
+    }
+  },
+  "required": []
+}

package/schematics/migrate-primeng/transform.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MK_STYLE_PATH = void 0;
+exports.transformTypeScript = transformTypeScript;
+exports.transformTemplate = transformTemplate;
+exports.transformAngularJson = transformAngularJson;
+exports.transformPackageJson = transformPackageJson;
+exports.renderReport = renderReport;
+/**
+ * Pure string transforms behind the `migrate-primeng` schematic. No devkit
+ * types here so they can be unit-tested on fixtures and reused by other
+ * tooling. Every function returns the new text plus what it did.
+ */
+const mapping_1 = require("./mapping");
+const MODULE_BY_PATH = new Map(mapping_1.MODULES.map((m) => [m.path, m]));
+function escapeRe(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function docsUrl(route) {
+    return route ? `${mapping_1.DOCS_BASE}${route}` : undefined;
+}
+/* ------------------------------------------------------------------------ */
+/* TypeScript                                                                */
+/* ------------------------------------------------------------------------ */
+const IMPORT_RE = /import\s*(type\s+)?\{([^}]*)\}\s*from\s*['"]primeng\/([\w-]+)['"];?[ \t]*\r?\n?/g;
+/**
+ * Rewrites `primeng/*` imports to `@mk-kit/ui`, renames the imported
+ * identifiers everywhere in the file, keeps unmapped symbols on their
+ * original import, and dedupes `imports: [...]` arrays.
+ */
+function transformTypeScript(source) {
+    const findings = [];
+    const mkNames = new Set();
+    const renames = new Map();
+    const keep = [];
+    let text = source;
+    let firstImportIndex = -1;
+    text = text.replace(IMPORT_RE, (whole, isType, names, path, offset) => {
+        const rule = MODULE_BY_PATH.get(path);
+        if (firstImportIndex === -1)
+            firstImportIndex = offset;
+        const symbols = names
+            .split(',')
+            .map((n) => n.trim())
+            .filter(Boolean);
+        const unmapped = [];
+        for (const raw of symbols) {
+            const [name, alias] = raw.split(/\s+as\s+/).map((s) => s.trim());
+            const target = rule?.symbols[name];
+            if (target) {
+                mkNames.add(target);
+                renames.set(alias ?? name, target);
+                add(findings, `import:primeng/${path}`, `${name} → ${target}`, 'rewrite', rule?.docs);
+            }
+            else {
+                unmapped.push(raw);
+                add(findings, `import:primeng/${path}`, `${name} (primeng/${path}) has no drop-in equivalent — kept`, rule ? 'manual' : 'unmapped', rule?.docs);
+            }
+        }
+        if (unmapped.length)
+            keep.push(`import ${isType ?? ''}{ ${unmapped.join(', ')} } from 'primeng/${path}';\n`);
+        if (rule?.note && symbols.some((s) => rule.symbols[s.split(/\s+as\s+/)[0].trim()])) {
+            add(findings, `note:primeng/${path}`, rule.note, 'manual', rule.docs);
+        }
+        return '';
+    });
+    if (firstImportIndex === -1)
+        return { text: source, changed: false, findings };
+    // Rename identifiers (whole words) — includes `imports: [...]` entries and injected services.
+    for (const [from, to] of renames) {
+        if (from === to)
+            continue;
+        text = text.replace(new RegExp(`\\b${escapeRe(from)}\\b`, 'g'), to);
+    }
+    // Dedupe entries inside `imports: [ ... ]` arrays (several PrimeNG symbols map to one class).
+    text = text.replace(/imports:\s*\[([^\]]*)\]/g, (whole, inner) => {
+        const seen = new Set();
+        const items = inner
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s && !seen.has(s) && seen.add(s));
+        const multiline = inner.includes('\n');
+        return multiline ? `imports: [\n    ${items.join(',\n    ')},\n  ]` : `imports: [${items.join(', ')}]`;
+    });
+    // Insert the mk-kit import where the first primeng import was, merging with an existing one.
+    const header = [...(keep.length ? keep : [])];
+    if (mkNames.size) {
+        const existing = /import\s*\{([^}]*)\}\s*from\s*['"]@mk-kit\/ui['"];?[ \t]*\r?\n?/;
+        const m = existing.exec(text);
+        if (m) {
+            const merged = new Set(m[1].split(',').map((s) => s.trim()).filter(Boolean));
+            for (const n of mkNames)
+                merged.add(n);
+            text = text.replace(existing, `import { ${[...merged].join(', ')} } from '@mk-kit/ui';\n`);
+        }
+        else {
+            header.unshift(`import { ${[...mkNames].join(', ')} } from '@mk-kit/ui';\n`);
+        }
+    }
+    text = text.slice(0, firstImportIndex) + header.join('') + text.slice(firstImportIndex);
+    // Service usage hints (MessageService / ConfirmationService bodies are not mechanical).
+    if (renames.has('MessageService')) {
+        text = text.replace(/(\n[ \t]*)([^\n]*\.add\(\s*\{[^\n]*severity[^\n]*)/g, '$1// mk-kit: MessageService.add({severity, summary, detail}) → toast.<severity>(detail, { title: summary })$1$2');
+    }
+    if (renames.has('ConfirmationService')) {
+        text = text.replace(/(\n[ \t]*)([^\n]*\.confirm\(\s*\{[^\n]*)/g, '$1// mk-kit: ConfirmationService.confirm({...}) → await dialog.confirm({ title, message, tone }) returns boolean$1$2');
+    }
+    // Inline templates get the template pass too.
+    const tpl = transformTemplate(text, true);
+    text = tpl.text;
+    findings.push(...tpl.findings);
+    return { text, changed: text !== source, findings };
+}
+/* ------------------------------------------------------------------------ */
+/* Templates                                                                 */
+/* ------------------------------------------------------------------------ */
+/** Longest selectors first so `p-inputgroupaddon` is not eaten by `p-inputgroup`. */
+const ELEMENT_RULES = mapping_1.SELECTORS.filter((r) => r.kind === 'element').sort((a, b) => b.from.length - a.from.length);
+const ATTRIBUTE_RULES = mapping_1.SELECTORS.filter((r) => r.kind === 'attribute').sort((a, b) => b.from.length - a.from.length);
+function noteComment(rule, inline) {
+    const text = `mk-kit: ${rule.from} → ${rule.to ?? 'manual'} — ${rule.note ?? ''}`.trim();
+    // Inside a TS template literal `-->` is fine; keep one comment style everywhere.
+    return inline ? `<!-- ${text} -->` : `<!-- ${text} -->`;
+}
+function renameAttrs(openTag, attrs) {
+    if (!attrs)
+        return openTag;
+    let out = openTag;
+    for (const [from, to] of Object.entries(attrs)) {
+        const re = new RegExp(`(\\s)${escapeRe(from)}(?=[\\s=>/])`, 'g');
+        out = out.replace(re, (_m, ws) => (to === null ? ws.trimEnd() : `${ws}${to}`));
+    }
+    return out;
+}
+/**
+ * Rewrites PrimeNG selectors in a template (an .html file, or a whole .ts file
+ * when `inline` — only `<p-…` tags and known attribute tokens are touched).
+ */
+function transformTemplate(source, inline = false) {
+    const findings = [];
+    let text = source;
+    for (const rule of ELEMENT_RULES) {
+        const open = new RegExp(`<${escapeRe(rule.from)}(?=[\\s>/])`, 'g');
+        const close = new RegExp(`</${escapeRe(rule.from)}\\s*>`, 'g');
+        const matches = text.match(open);
+        if (!matches)
+            continue;
+        const n = matches.length;
+        if (rule.to) {
+            // Rename open/close tags, then attributes on each opening tag.
+            text = text.replace(open, `<${rule.to}`).replace(close, `</${rule.to}>`);
+            if (rule.attrs) {
+                const tagRe = new RegExp(`<${escapeRe(rule.to)}(\\s[^>]*)?>`, 'g');
+                text = text.replace(tagRe, (tag) => renameAttrs(tag, rule.attrs));
+            }
+            add(findings, `element:${rule.from}`, `<${rule.from}> → <${rule.to}>`, 'rewrite', rule.docs, n);
+            if (rule.manual && rule.note) {
+                text = insertNote(text, `<${rule.to}`, noteComment(rule, inline));
+                add(findings, `manual:${rule.from}`, rule.note, 'manual', rule.docs, n);
+            }
+        }
+        else {
+            text = insertNote(text, `<${rule.from}`, noteComment(rule, inline));
+            add(findings, `element:${rule.from}`, rule.note ?? 'no drop-in equivalent', 'unmapped', rule.docs, n);
+        }
+    }
+    for (const rule of ATTRIBUTE_RULES) {
+        // Attribute token forms: `pButton`, `[pTooltip]="…"`, `pTooltip="…"`.
+        const token = new RegExp(`(?<=[\\s\\[])${escapeRe(rule.from)}(?=[\\s=\\]>/])`, 'g');
+        const matches = text.match(token);
+        if (!matches)
+            continue;
+        const n = matches.length;
+        if (rule.to) {
+            text = text.replace(token, rule.to);
+            if (rule.attrs) {
+                const tagRe = new RegExp(`<[a-zA-Z][^>]*\\b${escapeRe(rule.to)}\\b[^>]*>`, 'g');
+                text = text.replace(tagRe, (tag) => renameAttrs(tag, rule.attrs));
+            }
+            add(findings, `attr:${rule.from}`, `${rule.from} → ${rule.to}`, 'rewrite', rule.docs, n);
+            if (rule.manual && rule.note) {
+                text = insertNoteBeforeTagWith(text, rule.to, noteComment(rule, inline));
+                add(findings, `manual:${rule.from}`, rule.note, 'manual', rule.docs, n);
+            }
+        }
+        else {
+            text = insertNoteBeforeTagWith(text, rule.from, noteComment(rule, inline));
+            add(findings, `attr:${rule.from}`, rule.note ?? 'no drop-in equivalent', 'unmapped', rule.docs, n);
+        }
+    }
+    return { text, changed: text !== source, findings };
+}
+/** Insert `note` once, right before the first occurrence of `needle` (keeps indentation). */
+function insertNote(text, needle, note) {
+    if (text.includes(note))
+        return text;
+    const i = text.indexOf(needle);
+    if (i === -1)
+        return text;
+    const lineStart = text.lastIndexOf('\n', i) + 1;
+    const indent = text.slice(lineStart, i).match(/^[ \t]*$/) ? text.slice(lineStart, i) : '';
+    return indent ? text.slice(0, lineStart) + indent + note + '\n' + text.slice(lineStart) : text.slice(0, i) + note + ' ' + text.slice(i);
+}
+/** Insert `note` once before the first tag that carries `attr`. */
+function insertNoteBeforeTagWith(text, attr, note) {
+    if (text.includes(note))
+        return text;
+    const re = new RegExp(`<[a-zA-Z][^>]*(?<=[\\s\\[])${escapeRe(attr)}(?=[\\s=\\]>/])`);
+    const m = re.exec(text);
+    if (!m)
+        return text;
+    return insertNote(text, m[0], note);
+}
+/* ------------------------------------------------------------------------ */
+/* Workspace files                                                           */
+/* ------------------------------------------------------------------------ */
+exports.MK_STYLE_PATH = 'node_modules/@mk-kit/ui/styles/mk-kit.css';
+/** Remove PrimeNG / primeicons / primeflex style entries from every project's `styles`; add the mk-kit theme. */
+function transformAngularJson(source) {
+    const findings = [];
+    let json;
+    try {
+        json = JSON.parse(source);
+    }
+    catch {
+        return { text: source, changed: false, findings };
+    }
+    let changed = false;
+    for (const project of Object.values(json.projects ?? {})) {
+        const options = project?.architect?.build?.options;
+        if (!options || !Array.isArray(options.styles))
+            continue;
+        const before = options.styles.length;
+        options.styles = options.styles.filter((s) => {
+            const p = typeof s === 'string' ? s : s?.input ?? '';
+            return !/prime(ng|icons|flex|uix)/i.test(p);
+        });
+        if (options.styles.length !== before) {
+            changed = true;
+            add(findings, 'styles:primeng', `removed ${before - options.styles.length} PrimeNG/primeicons style entries`, 'rewrite', '/theming', before - options.styles.length);
+        }
+        const has = options.styles.some((s) => (typeof s === 'string' ? s : s?.input ?? '').includes('@mk-kit/ui/styles'));
+        if (!has) {
+            options.styles.unshift(exports.MK_STYLE_PATH);
+            changed = true;
+            add(findings, 'styles:mk-kit', `added ${exports.MK_STYLE_PATH}`, 'rewrite', '/theming');
+        }
+    }
+    return { text: changed ? JSON.stringify(json, null, 2) + '\n' : source, changed, findings };
+}
+/** Drop PrimeNG packages from dependencies and make sure @mk-kit/ui is present. */
+function transformPackageJson(source, packages, mkVersion = '^0.38.0') {
+    const findings = [];
+    let json;
+    try {
+        json = JSON.parse(source);
+    }
+    catch {
+        return { text: source, changed: false, findings };
+    }
+    let changed = false;
+    for (const field of ['dependencies', 'devDependencies']) {
+        const deps = json[field];
+        if (!deps)
+            continue;
+        for (const p of packages) {
+            if (p in deps) {
+                delete deps[p];
+                changed = true;
+                add(findings, 'package:remove', `removed ${p} from ${field}`, 'rewrite');
+            }
+        }
+    }
+    json.dependencies ??= {};
+    if (!json.dependencies['@mk-kit/ui']) {
+        json.dependencies['@mk-kit/ui'] = mkVersion;
+        changed = true;
+        add(findings, 'package:add', `added @mk-kit/ui ${mkVersion}`, 'rewrite');
+    }
+    return { text: changed ? JSON.stringify(json, null, 2) + '\n' : source, changed, findings };
+}
+function add(findings, rule, message, kind, docs, count = 1) {
+    const existing = findings.find((f) => f.rule === rule && f.message === message);
+    if (existing)
+        existing.count += count;
+    else
+        findings.push({ rule, message, kind, docs: docsUrl(docs), count });
+}
+/** Markdown report of a whole run. */
+function renderReport(files, options) {
+    const all = files.flatMap((f) => f.findings.map((x) => ({ ...x, file: f.path })));
+    const changed = files.filter((f) => f.changed);
+    const byKind = (kind) => all.filter((f) => f.kind === kind);
+    const sum = (list) => list.reduce((n, f) => n + f.count, 0);
+    const lines = [];
+    lines.push('# PrimeNG → mk-kit migration report', '');
+    lines.push(`${options.dryRun ? '**Dry run** — nothing was written. ' : ''}Scanned ${options.scanned} files, ${options.dryRun ? 'would change' : 'changed'} ${changed.length}.`, '');
+    lines.push(`- Automatic rewrites: **${sum(byKind('rewrite'))}**`);
+    lines.push(`- Needs a manual touch: **${sum(byKind('manual'))}**`);
+    lines.push(`- No mk-kit equivalent: **${sum(byKind('unmapped'))}**`, '');
+    lines.push('## Rewrites', '');
+    const rewrites = group(byKind('rewrite'));
+    lines.push(...(rewrites.length ? rewrites.map(([msg, n]) => `- ${msg} ×${n}`) : ['- (none)']), '');
+    lines.push('## Manual steps', '', 'Look for `<!-- mk-kit: … -->` and `// mk-kit:` comments in the changed files.', '');
+    const manual = group(byKind('manual'), true);
+    lines.push(...(manual.length ? manual.map(([msg, n, docs]) => `- ${msg} ×${n}${docs ? ` — [docs](${docs})` : ''}`) : ['- (none)']), '');
+    lines.push('## Not available in mk-kit', '');
+    const unmapped = group(byKind('unmapped'), true);
+    lines.push(...(unmapped.length ? unmapped.map(([msg, n, docs]) => `- ${msg} ×${n}${docs ? ` — closest: [docs](${docs})` : ''}`) : ['- (none)']), '');
+    lines.push('## Files', '');
+    lines.push(...(changed.length ? changed.map((f) => `- \`${f.path}\` — ${f.findings.map((x) => `${x.rule}×${x.count}`).join(', ')}`) : ['- (none)']), '');
+    lines.push('## Next', '');
+    lines.push('1. Run `ng build` and fix the remaining template errors — most are the `<!-- mk-kit -->` notes above.', '2. Replace `MessageService.add(...)` calls with `MkToastService` and `ConfirmationService.confirm(...)` with `await MkDialogService.confirm(...)`.', '3. Icons: `pi pi-*` classes → `<mk-icon name="…" />` (see https://mk-kit.dev/components/icon).', `4. Theme: \`--mk-*\` tokens replace the PrimeNG preset — https://mk-kit.dev/theming.`, '');
+    return lines.join('\n');
+}
+function group(list, withDocs = false) {
+    const map = new Map();
+    for (const f of list) {
+        const key = f.message;
+        const cur = map.get(key) ?? [0, f.docs];
+        cur[0] += f.count;
+        map.set(key, cur);
+    }
+    return [...map.entries()].map(([msg, [n, docs]]) => [msg, n, withDocs ? docs : undefined]);
+}