@public-ui/mcp 4.1.2-rc.7 → 4.1.2-rc.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -5
- package/shared/sample-index.json +14 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.1.2-rc.
|
|
3
|
+
"version": "4.1.2-rc.8",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -42,19 +42,19 @@
|
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@modelcontextprotocol/sdk": "1.
|
|
45
|
+
"@modelcontextprotocol/sdk": "1.29.0",
|
|
46
46
|
"express": "5.2.1",
|
|
47
47
|
"fuse.js": "7.1.0",
|
|
48
48
|
"zod": "4.3.6",
|
|
49
|
-
"@public-ui/components": "4.1.2-rc.
|
|
49
|
+
"@public-ui/components": "4.1.2-rc.8"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@eslint/js": "9.39.4",
|
|
53
53
|
"@modelcontextprotocol/inspector": "0.21.1",
|
|
54
54
|
"@types/express": "5.0.6",
|
|
55
55
|
"@types/node": "25.5.0",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "8.
|
|
57
|
-
"@typescript-eslint/parser": "8.
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "8.58.0",
|
|
57
|
+
"@typescript-eslint/parser": "8.58.0",
|
|
58
58
|
"eslint": "9.39.4",
|
|
59
59
|
"eslint-plugin-json": "4.0.1",
|
|
60
60
|
"globals": "17.4.0",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-
|
|
3
|
+
"generatedAt": "2026-04-02T08:24:45.189Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
7
|
-
"totalDocs":
|
|
6
|
+
"total": 289,
|
|
7
|
+
"totalDocs": 52,
|
|
8
8
|
"totalSpecs": 53,
|
|
9
9
|
"totalSamples": 165,
|
|
10
10
|
"totalScenarios": 19
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "32ed9010f036ae02d0fac284105d127f7aa0534d",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -421,7 +421,15 @@
|
|
|
421
421
|
"group": "docs/tutorials",
|
|
422
422
|
"name": "NEW_COMPONENT",
|
|
423
423
|
"path": "docs/tutorials/NEW_COMPONENT.md",
|
|
424
|
-
"code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Controller implementieren (`controller.ts`) — erweitert `BaseController<Api>` |\n| 5 | Functional Component erstellen (`component.tsx`) — stateless Renderer |\n| 6 | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>` |\n| 7 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 8 | Beispiel in React-Sample-App anlegen |\n| 9 | Validierung: `pnpm format && pnpm lint && pnpm test && pnpm -r build` |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Controller\n\nDatei: `src/internal/functional-components/<component>/controller.ts`\n\n```typescript\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { MyComponentApi } from './api';\nimport { myComponentPropsConfig } from './api';\n\nexport class MyComponentController extends BaseController<MyComponentApi> implements ControllerInterface<MyComponentApi> {\n\tpublic constructor(setState: SetStateFn<MyComponentApi>, getState: GetStateFn<MyComponentApi>) {\n\t\tsuper(myComponentPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<MyComponentApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n}\n```\n\n- Event-Handler und Ref-Setter als **Arrow-Properties** (`handleClick = () => { … }`)\n- Lifecycle- und Watcher-Methoden als **Prototype-Methoden**\n- Details: [ARC42 §4 — Controller Layer](../../packages/components/src/components/_skeleton/ARC42.md#controller-layer)\n\n## Schritt 5 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nconst myBem = bem.forBlock('kol-my-component');\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = (props) => {\n\tconst { name } = props;\n\treturn (\n\t\t<div class={myBem()}>\n\t\t\t<span class={myBem('name')}>{name}</span>\n\t\t</div>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 6 — Web Component\n\nDatei: `src/components/<component>/web-components/<component>/component.tsx`\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../../../internal/functional-components/my-component/component';\nimport { MyComponentController } from '../../../../internal/functional-components/my-component/controller';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\tprivate readonly ctrl = new MyComponentController(this.setState, this.getState);\n\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.ctrl.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\n## Schritt 7 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 8 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 9 — Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm test # ~2-3 Minuten, NICHT abbrechen\npnpm -r build # ~2 Minuten, NICHT abbrechen\n```\n\nAlle vier Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Performance-Analyse**: [`_skeleton/PERFORMANCE_ANALYSIS.md`](../../packages/components/src/components/_skeleton/PERFORMANCE_ANALYSIS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
|
|
424
|
+
"code": "# Neue Komponente erstellen\n\n> Schritt-für-Schritt-Anleitung basierend auf dem [Skeleton Blueprint](../../packages/components/src/components/_skeleton/ARC42.md).\n\n## Grundprinzipien\n\n- Auflistungen werden immer alphabetisch sortiert\n- Die [ARC42.md](../../packages/components/src/components/_skeleton/ARC42.md) ist die führende Architektur-Spezifikation — lies sie vollständig, bevor du eine neue Komponente erstellst\n- Alle Web Components verwenden `shadow: true` — Komponenten ohne Shadow DOM werden als Functional Components implementiert\n- Props leben in `src/internal/props/` mit eigenem `PropDefinition` pro Prop\n- Kein toter Code, keine Barrel-Files, keine `types.ts`\n\n## Checkliste\n\n| Schritt | Kurzbeschreibung |\n| :-----: | ---------------------------------------------------------------------------------------- |\n| 0 | Projekt starten |\n| 1 | Tag-Name in Stencil-Konfiguration registrieren |\n| 2 | Props erstellen oder vorhandene wiederverwenden (`src/internal/props/`) |\n| 3 | API-Definition erstellen (`api.tsx`) mit `PropsConfigShape` und `ApiFromConfig` |\n| 4 | Controller implementieren (`controller.ts`) — erweitert `BaseController<Api>` |\n| 5 | Functional Component erstellen (`component.tsx`) — stateless Renderer |\n| 6 | Web Component erstellen (`component.tsx`) — erweitert `BaseWebComponent<Api>` |\n| 7 | Tests co-lokalisiert neben `component.tsx` erstellen |\n| 8 | Beispiel in React-Sample-App anlegen |\n| 9 | Validierung: `pnpm format && pnpm lint && pnpm --filter @public-ui/components test:unit` |\n\n## Schritt 0 — Projekt starten\n\nProjekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.\n\n## Schritt 1 — Tag-Name registrieren\n\nDen Tag-Namen der neuen Komponente in `packages/components/stencil.config.ts` registrieren.\n\n## Schritt 2 — Props erstellen (Props-First!)\n\n**Bevor die Komponente implementiert wird, müssen alle Props definiert sein.**\n\nPro Prop eine Datei unter `src/internal/props/`:\n\n```typescript\n// src/internal/props/name.ts\nimport type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>('name', '', normalizeString);\n```\n\n- `SimpleProp<K, T>` wenn externer und interner Typ identisch sind\n- `Prop<K, TExternal, TInternal>` wenn sich die Typen unterscheiden (z.B. `ColorProp`)\n- Export in `src/internal/props/index.ts` hinzufügen\n- Bestehende Props aus `index.ts` wiederverwenden, wenn möglich\n\nDetails: [ARC42 §4 — Schema Helper Layer](../../packages/components/src/components/_skeleton/ARC42.md#schema-helper-layer)\n\n## Schritt 3 — API-Definition\n\nDatei: `src/internal/functional-components/<component>/api.tsx`\n\n```typescript\nimport { nameProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const myComponentPropsConfig = {\n\trequired: [nameProp],\n\t// optional: [showProp],\n} as const satisfies PropsConfigShape;\n\nexport type MyComponentApi = ApiFromConfig<\n\ttypeof myComponentPropsConfig,\n\t{\n\t\t// Nur definieren, was die Komponente tatsächlich nutzt:\n\t\t// Callbacks: { click: () => void };\n\t\t// Emitters: { change: string };\n\t\t// Methods: { focus: () => void };\n\t\t// States: { count: number };\n\t\t// Refs: { button: HTMLButtonElement };\n\t\t// Listeners: { keydown: KeyboardEvent };\n\t}\n>;\n```\n\nDetails: [ARC42 §4 — API Definition with PropsConfigShape](../../packages/components/src/components/_skeleton/ARC42.md#api-definition-with-propsconfigshape-and-apifromconfig)\n\n## Schritt 4 — Controller\n\nDatei: `src/internal/functional-components/<component>/controller.ts`\n\n```typescript\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { MyComponentApi } from './api';\nimport { myComponentPropsConfig } from './api';\n\nexport class MyComponentController extends BaseController<MyComponentApi> implements ControllerInterface<MyComponentApi> {\n\tpublic constructor(stateAccess: StateAccess<MyComponentApi>) {\n\t\tsuper(stateAccess, myComponentPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<MyComponentApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('name', v);\n\t\t});\n\t}\n}\n```\n\n- Event-Handler und Ref-Setter als **Arrow-Properties** (`handleClick = () => { … }`)\n- Lifecycle- und Watcher-Methoden als **Prototype-Methoden**\n- Details: [ARC42 §4 — Controller Layer](../../packages/components/src/components/_skeleton/ARC42.md#controller-layer)\n\n## Schritt 5 — Functional Component\n\nDatei: `src/internal/functional-components/<component>/component.tsx`\n\n```tsx\nimport type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MyComponentApi } from './api';\n\nconst myBem = bem.forBlock('kol-my-component');\n\nexport const MyComponentFC: FC<FunctionalComponentProps<MyComponentApi>> = (props) => {\n\tconst { name } = props;\n\treturn (\n\t\t<div class={myBem()}>\n\t\t\t<span class={myBem('name')}>{name}</span>\n\t\t</div>\n\t);\n};\n```\n\n- Stateless, keine Seiteneffekte\n- Details: [ARC42 §4 — Functional Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#functional-component-layer)\n\n## Schritt 6 — Web Component\n\nDatei: `src/components/<component>/component.tsx`\n\n```tsx\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { MyComponentApi } from '../../../../internal/functional-components/my-component/api';\nimport { MyComponentFC } from '../../../../internal/functional-components/my-component/component';\nimport { MyComponentController } from '../../../../internal/functional-components/my-component/controller';\n\n@Component({\n\ttag: 'kol-my-component',\n\tshadow: true,\n})\nexport class KolMyComponent extends BaseWebComponent<MyComponentApi> implements WebComponentInterface<MyComponentApi> {\n\tprivate readonly ctrl = new MyComponentController(this.stateAccess);\n\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MyComponentFC name={this.ctrl.getRenderProp('name')} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n```\n\n- Immer `shadow: true` und `<Host>` ohne Klassen-Attribut\n- `@Watch` nur auf unterstrichene Props\n- Details: [ARC42 §4 — Web Component Layer](../../packages/components/src/components/_skeleton/ARC42.md#web-component-layer)\n\nWenn ein Controller garantiert kein `@State` benötigt, verwende den Sentinel:\n\n```typescript\nprivate readonly ctrl = new MyComponentController(BaseWebComponent.stateLess);\n```\n\n## Schritt 7 — Tests\n\nTests liegen **direkt neben** `component.tsx` — kein `test/`-Unterordner.\n\n**Snapshot-Test** (`snapshot.spec.tsx`):\n\n```tsx\nimport { executeSnapshotTests } from '../../../../utils/testing';\nimport { KolMyComponent } from './component';\n\nconst TAG = 'kol-my-component';\n\ntype Props = {\n\t_name: string;\n};\n\nexecuteSnapshotTests<Props>(TAG, [KolMyComponent], [{ _name: 'Test' }, { _name: '' }]);\n```\n\n**Interaction-Test** (`interaction.e2e.ts`):\n\n```typescript\nimport { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\ntest.describe('kol-my-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.setContent('<kol-my-component _name=\"Test\"></kol-my-component>');\n\t});\n\n\ttest('should render the name', async ({ page }) => {\n\t\tawait expect(page.locator('kol-my-component')).toBeVisible();\n\t});\n});\n```\n\nDetails: [ARC42 §9 — Design Decision 11](../../packages/components/src/components/_skeleton/ARC42.md#9-design-decisions)\n\n## Schritt 8 — Beispiel in React-Sample-App\n\nDatei: `packages/samples/react/src/scenarios/<component>.tsx`\n\nAnschließend die Route in `packages/samples/react/src/scenarios/routes.ts` registrieren.\n\nZum Testen:\n\n```bash\ncd packages/samples/react\npnpm start\n# Navigiere zu http://localhost:9191\n```\n\n## Schritt 9 — Validierung\n\n```bash\npnpm format # ~10 Sekunden\npnpm lint # ~1 Minute, NICHT abbrechen\npnpm --filter @public-ui/components test:unit # ~2-3 Minuten, NICHT abbrechen\n```\n\nAlle drei Befehle müssen fehlerfrei durchlaufen.\n\n## Referenz\n\nDie vollständige Referenzimplementierung findet sich im Skeleton Blueprint:\n\n- **Architektur**: [`_skeleton/ARC42.md`](../../packages/components/src/components/_skeleton/ARC42.md)\n- **Agent-Instruktionen**: [`_skeleton/AGENTS.md`](../../packages/components/src/components/_skeleton/AGENTS.md)\n- **Performance-Analyse**: [`_skeleton/PERFORMANCE_ANALYSIS.md`](../../packages/components/src/components/_skeleton/PERFORMANCE_ANALYSIS.md)\n- **Refactoring-Leitfaden**: [`_skeleton/REFACTORING_PROMPT.md`](../../packages/components/src/components/_skeleton/REFACTORING_PROMPT.md)\n",
|
|
425
|
+
"kind": "doc"
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"id": "doc/UPGRADEABLE_DEPENDENCIES",
|
|
429
|
+
"group": "docs",
|
|
430
|
+
"name": "UPGRADEABLE_DEPENDENCIES",
|
|
431
|
+
"path": "docs/UPGRADEABLE_DEPENDENCIES.md",
|
|
432
|
+
"code": "# Upgradeable Dependencies — Major Versions Available\n\n**Analysis Date:** 2026-03-31 \n**Scope:** Root package.json + all packages in `packages/*/` \n**Method:** npm-check-updates with `--target greatest`\n\n---\n\n## 🔴 Critical (Breaking Changes – Manual Work Required)\n\n### 1. **@stencil/core** | 4.38.3 → 4.43.3 (patch) / 5.0.0-next.0 (major)\n\n- **Status:** v5 is in pre-release (next channel), v4.43.3 is latest stable\n- **Breaking Changes:**\n - v5.0.0-next.0 is not production-ready (next channel)\n - Multiple output-target packages block v5 upgrade:\n - @public-ui/stencil-angular-output-target\n - @public-ui/stencil-react-output-target\n - @public-ui/stencil-solid-output-target\n - @public-ui/stencil-vue-output-target\n - @stencil/playwright requires >=4.13.0, conflicts with 5.x\n- **Risk:** VERY HIGH – Core platform dependency\n- **Recommendation:** Stay on v4.43.3 until v5 is stable and output-targets are compatible\n- **Effort:** Would require coordinating 4+ downstream packages\n\n### 2. **eslint** | 9.39.4 → 10.1.0\n\n- **Breaking Changes:**\n - Legacy `.eslintrc.json` configuration is no longer supported; must migrate to flat config (`eslint.config.js`)\n - Node.js < v20.19.0 no longer supported\n - Config file lookup now starts from linted file's directory (beneficial for monorepos)\n - Formatter output depends on Node.js native `styleText()` API\n - NO_COLOR and NODE_DISABLE_COLORS environment variables now affect color output\n - FlatESLint and LegacyESLint deprecated APIs removed\n - JSX reference tracking improved (may affect scope-dependent rules)\n- **Peer Dependencies:** Requires @eslint/js ^10.0.0 and eslint-plugin-jsx-a11y compatibility\n- **Config Changes:** Must convert `.eslintrc.json` to `eslint.config.js` (tool available: `eslint --init`)\n- **Risk:** HIGH – Affects all linting configuration\n- **Effort:** MEDIUM – Config migration required but automation tools available\n- **Roadmap:** [Migrate to v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n\n### 3. **jest** | 26.6.3 → 30.3.0\n\n- **Breaking Changes:**\n - Node.js 14, 16, 19, 21 no longer supported (require >=18.x, >=20.x)\n - Minimum TypeScript now 5.4+\n - jest-environment-jsdom upgraded from jsdom 21 → jsdom 26 (spec compliance changes)\n - Mocking `window.location` behavior may change\n - Deprecated alias methods removed (e.g., `toBeTruthy()` aliases)\n - Non-enumerable object properties excluded from matchers by default\n - `jest.mock()` now case-sensitive (affects Windows edge cases)\n - `jest.genMockFromModule()` removed (use `jest.createMockFromModule()`)\n - `--testPathPattern` renamed to `--testPathPatterns`\n - Performance: Real-world speedups from optimizations\n- **Risk:** HIGH – Core testing framework with wide breaking surface\n- **Effort:** MEDIUM → HIGH – Will require test review and fixes\n- **Migration:** [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n\n### 4. **TypeScript** | 5.9.3 → 6.0.2\n\n- **Breaking Changes:**\n - `moduleResolution: classic` removed (only nodenext, bundler supported)\n - AMD, UMD, SystemJS modules removed (ESM only)\n - `esModuleInterop` and `allowSyntheticDefaultImports` cannot be set to false\n - `target: es5` deprecated; minimum ES2015\n - All code treated as strict mode (automatic \"use strict\" emission)\n- **Config Migration:** Migration CLI available: `npx @andrewbranch/ts5to6`\n- **Impact:** May be low if tsconfig.json is explicit and uses modern settings\n- **Peer:** @stencil-community/eslint-plugin requires ^4.9.4 || ^5.0.0 (blocks 6.0+)\n- **Risk:** MEDIUM – Language compiler fundamental shift\n- **Effort:** LOW → MEDIUM – Config migration mostly automatic\n- **Roadmap:** [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n\n### 5. **@angular/core** | 19.2.20 → 22.0.0-next.5 (Angular v19, v20, v21 adapters)\n\n- **Packages Affected:**\n - `/packages/adapters/angular/v19/`: 19.2.20 → 22.0.0-next.5\n - `/packages/adapters/angular/v20/`: 20.3.18 → 22.0.0-next.5\n - `/packages/adapters/angular/v21/`: 21.2.6 → 22.0.0-next.5\n- **Breaking Changes (v20+):**\n - Node.js >=22.22.0 required (v24.13.1+) – v20 no longer supported\n - TypeScript >=5.8 required\n - Zoneless applications now stable (Zone.js side effects deprecated)\n - Ivy strict mode enabled by default\n - ViewEngine completely removed\n - NgModules support deprecated in favor of standalone components\n- **Complexity:** Enterprise applications can take weeks to migrate\n- **Related:** Also affects @angular/compiler, @angular/compiler-cli, zone.js, @angular/common\n- **Risk:** VERY HIGH – Multi-framework adapter dependencies\n- **Effort:** HIGH – Complete architectural review needed\n- **Roadmap:** [Angular Update Guide](https://angular.dev/update-guide)\n\n---\n\n## 🟡 High (Test-Intensive Upgrades)\n\n### 1. **jest** (component package) | 26.6.3 → 30.3.0\n\n- **Location:** `/packages/components/`\n- **Risk:** Same as critical jest (see above), but scoped to component tests\n- **Effort:** MEDIUM\n- **Testing:** All component unit tests must run and pass\n\n### 2. **@types/jest** | 26.0.24 → 30.0.0\n\n- **Breaking:** TypeScript types for jest@30 (follows jest breaking changes)\n- **Dependency:** Must upgrade together with jest\n- **Risk:** MEDIUM\n- **Effort:** LOW – Automatic with jest upgrade\n\n### 3. **knip** | 5.88.1 → 6.1.0 (components, stylelint-rules)\n\n- **Breaking Changes:**\n - Node.js <v20.19.0 no longer supported\n - Issue type `classMembers` removed\n - `--include-libs` and `--isolate-workspaces` flags removed (now default)\n - `--experimental-tags` renamed to `--tags`\n - `issues.files` structure changes in reporters\n - `issues._files` removed\n - Root files removed\n- **Packages:** tools/stylelint-rules, components\n- **Risk:** MEDIUM – Unused-code detection configuration changes\n- **Effort:** LOW → MEDIUM – Config review needed\n- **Roadmap:** [knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n\n### 4. **@types/color-convert** | 2.0.4 → 3.0.1 + **color-rgba** | 2.4.0 → 3.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Major version bump on color-rgba (internal API changes likely)\n- **Risk:** MEDIUM – Type definitions and color processing\n- **Effort:** LOW – Likely compatible\n- **Notes:** These are typically non-breaking for consumers\n\n### 5. **@typescript-eslint/eslint-plugin** & **@typescript-eslint/parser** | 8.57.2 → 8.58.0 (patch)\n\n- **Note:** ncu shows 8.58.1-alpha.0 as \"greatest\" but 8.58.0 is stable latest\n- **Peer:** @stencil-community/eslint-plugin requires ^7.0.0 || ^8.0.0\n- **Risk:** LOW\n- **Effort:** LOW – Patch upgrade\n\n### 6. **cssnano** | 7.1.3 → 7.1.4\n\n- **Risk:** LOW – Patch-level CSS minifier\n- **Effort:** LOW\n\n### 7. **postcss-sorting** | 9.1.0 → 10.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Likely minor API changes (changelog not specific in v9→v10)\n- **Risk:** MEDIUM – CSS property ordering configuration\n- **Effort:** LOW → MEDIUM\n- **Roadmap:** [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n\n### 8. **mocha** | 11.7.5 → 12.0.0-beta-9\n\n- **Status:** Beta release only\n- **Breaking:** Likely breaking changes in beta\n- **Risk:** MEDIUM\n- **Effort:** MEDIUM – Wait for stable v12.0.0 release\n- **Recommendation:** Defer until stable release\n\n### 9. **cpy-cli** | 6.0.0 → 7.0.0 (themes package)\n\n- **Breaking:** Major file copy utility version\n- **Risk:** MEDIUM – Copy script behavior changes likely\n- **Effort:** LOW → MEDIUM\n- **Testing:** Verify theme build output\n\n---\n\n## 🟢 Low (Safe Upgrades)\n\n### 1. **@eslint/js** | 9.39.4 → 10.0.1 (themes, stylelint-rules, components)\n\n- **Peer Dependency:** Requires eslint ^10.0.0 (blocks eslint upgrade dependency)\n- **Risk:** LOW – Language rule sets\n- **Effort:** LOW\n- **Upgrade Path:** Do together with eslint v10.0.0\n\n### 2. **minimatch** | 10.2.4 → 10.2.5 (React, Vue, Svelte, Angular v19/v20/v21)\n\n- **Type:** Patch-level glob matching utility\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 3. **rollup** | 4.60.0 → 4.60.1 (themes)\n\n- **Type:** Patch-level bundler\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 4. **npm-run-all2** | 8.0.4 → 8.1.0-beta.0 (root)\n\n- **Note:** Beta version only\n- **Risk:** LOW (beta)\n- **Recommendation:** Wait for stable 8.1.0\n\n### 5. **stylelint-order** | 7.0.1 → 8.1.1 (root)\n\n- **Type:** CSS plugin\n- **Risk:** LOW – Property ordering\n- **Effort:** LOW\n\n### 6. **svelte** | ^5.55.0 → ^5.55.1 (svelte adapter)\n\n- **Type:** Patch-level framework\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 7. **@babel/types** | 7.29.0 → 8.0.0-rc.3 (Vue, Svelte adapters)\n\n- **Status:** Release candidate\n- **Risk:** MEDIUM (RC stage)\n- **Effort:** LOW\n- **Recommendation:** Wait for stable 8.0.0 release\n\n### 8. **zone.js** | 0.15.1 → 0.16.1 (Angular adapters v19-v21)\n\n- **Type:** Angular zone management\n- **Dependency:** Follows Angular major versions\n- **Risk:** LOW (if upgrading Angular)\n- **Effort:** LOW\n\n---\n\n## Summary\n\n### Upgrade Statistics\n\n| Category | Count | Total Packages Affected |\n| --------------------------------- | ------- | ---------------------------- |\n| 🔴 Critical | 5 | 9 packages (with variations) |\n| 🟡 High | 9 | 7 unique packages |\n| 🟢 Low | 8 | 15 unique packages |\n| **Total Unique Upgradeable Deps** | **~22** | **Across entire monorepo** |\n\n### Critical Blockers & Interdependencies\n\n```\n1. @stencil/core@5 BLOCKED by:\n - @public-ui/stencil-angular-output-target (requires >=4)\n - @public-ui/stencil-react-output-target (requires >=4)\n - @public-ui/stencil-solid-output-target (requires >=2.17.2)\n - @public-ui/stencil-vue-output-target (requires >=4)\n - @stencil/playwright (requires >=4.13.0)\n ACTION: Keep on v4.43.3 until output-targets are v5-compatible\n\n2. eslint@10.0.0 blocks:\n - @stencil-community/eslint-plugin (requires ^8.0.0 || ^9.0.0)\n - eslint-plugin-jsx-a11y (requires ^8.0.0 || ^9.0.0)\n ACTION: Coordinate multi-package eslint migration\n\n3. prettier@3.8.1 blocked by:\n - prettier-plugin-organize-imports (requires >=2.0)\n ACTION: prettier@4.0.0-alpha.13 incompatible; stay on v3\n\n4. TypeScript@6.0.2 blocked by:\n - @stencil-community/eslint-plugin (requires ^4.9.4 || ^5.0.0)\n ACTION: Stay on TypeScript 5.x for now\n\n5. Angular@22 (next.5) not stable:\n - v20: Angular-specific adapters only\n - Migration complex: weeks for enterprise apps\n ACTION: Keep Angular adapters on current major versions\n```\n\n### Recommended Upgrade Priority\n\n#### Phase 1 (Immediate – Low Risk)\n\n- ✅ minimatch (10.2.4 → 10.2.5) — patch only\n- ✅ rollup (4.60.0 → 4.60.1) — patch only\n- ✅ stylelint-order (7.0.1 → 8.1.1) — CSS plugin\n- ✅ cssnano (7.1.3 → 7.1.4) — patch only\n\n#### Phase 2 (Short-term – High Effort)\n\n- ⚠️ jest@30 + @types/jest@30 — test suite migration (2-5 days)\n - Scoped start: `/packages/components/` component tests\n - Follow with root/adapters test suites\n- ⚠️ eslint@10 + @eslint/js@10 — config migration (1-3 days)\n - Convert `.eslintrc.json` → `eslint.config.js`\n - Test all lint rules\n - Update CI/CD pipelines\n\n#### Phase 3 (Medium-term – Coordinate)\n\n- ⚠️ TypeScript@6 — only after reviewing @stencil-community/eslint-plugin compatibility\n- ⚠️ knip@6 — unused-code detection, config review (0.5-1 day)\n\n#### Phase 4 (Blocked – Wait for Stable)\n\n- ❌ prettier@4.0.0-alpha → keep v3 until stable (blocked by prettier-plugin-organize-imports)\n- ❌ @stencil/core@5 → wait for output-target compatibility\n- ❌ Angular@22 → stay on v19/v20/v21 adapter versions (production-critical)\n- ❌ mocha@12, @babel/types@8 → wait for stable releases (beta only)\n\n### Estimated Overall Effort\n\n| Phase | Effort | Timeline | Risk |\n| -------------------------- | ------------- | ------------- | ----------- |\n| Phase 1 | LOW | 0.5-1 hour | VERY LOW |\n| Phase 2 | HIGH | 3-5 days | MEDIUM-HIGH |\n| Phase 3 | MEDIUM | 1-2 days | MEDIUM |\n| Phase 4 | BLOCKED | N/A | BLOCKED |\n| **Total (if all applied)** | **VERY HIGH** | **2-3 weeks** | **HIGH** |\n\n---\n\n## Research Sources\n\n- [Migrate to ESLint v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n- [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n- [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n- [Angular Update Guide](https://angular.dev/update-guide)\n- [Knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n- [Stencil Releases](https://github.com/ionic-team/stencil/releases)\n- [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n",
|
|
425
433
|
"kind": "doc"
|
|
426
434
|
},
|
|
427
435
|
{
|
|
@@ -2245,7 +2253,7 @@
|
|
|
2245
2253
|
"group": "spec",
|
|
2246
2254
|
"name": "spin",
|
|
2247
2255
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/spin.md",
|
|
2248
|
-
"code": "# kol-spin\n\n\n\n<!-- Auto Generated Below -->\n\n\n##
|
|
2256
|
+
"code": "# kol-spin\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \\| undefined` | `undefined` |\n| `_show` | `_show` | Makes the element show up. | `boolean \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"cycle\" \\| \"dot\" \\| \"none\" \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
2249
2257
|
"kind": "spec"
|
|
2250
2258
|
},
|
|
2251
2259
|
{
|