Update quality package

.changeset/quality-structure-linter-and-lint-rename.md

@@ -0,0 +1,20 @@
+---
+"@templatical/quality": minor
+"@templatical/editor": minor
+---
+
+Add `lintStructure` and reshape the quality package around a shared linting surface.
+
+**`@templatical/quality`**
+
+- New `lintStructure(content, options?)` linter — 5 rules: `structure.duplicate-block-id`, `structure.section-column-mismatch`, `structure.nested-section`, `structure.empty-section` (auto-fix removes the section), `structure.empty-column`.
+- Rule IDs are now namespaced. Every accessibility rule is prefixed with `a11y.` (e.g. `img-missing-alt` → `a11y.img-missing-alt`); structure rules use `structure.`. Severity overrides and message-map keys must use the prefixed form.
+- Type names renamed for cross-linter reuse: `A11yIssue` → `LintIssue`, `A11yOptions` → `LintOptions`, `A11yPatch` → `LintPatch`, `A11yPatchContext` → `LintPatchContext` (now also exposes `removeBlock`), `A11yThresholds` → `LintThresholds`, `DEFAULT_THRESHOLDS` → `DEFAULT_A11Y_THRESHOLDS`. The `RULES` export is now `ACCESSIBILITY_RULES`; a new `STRUCTURE_RULES` export sits alongside it.
+- New exports: `lintStructure`, `STRUCTURE_RULES`, `formatStructureMessage`, `getStructureMessages`, `SUPPORTED_STRUCTURE_MESSAGE_LOCALES`, `StructureMessageMap`, `StructureRuleMessageId`.
+
+**`@templatical/editor`**
+
+- `init({ accessibility })` is renamed to `init({ lint })` — the same option object now drives every linter exported by `@templatical/quality` (accessibility + structure).
+- Sidebar tab renamed from "Accessibility" to "Issues" and now shows both linter families. The composable is `useTemplateLint` (was `useAccessibilityLint`); the inject key is `TEMPLATE_LINT_KEY`; the components are `IssuesPanel.vue` and `BlockIssueBadge.vue`.
+- Section toolbar now rebalances `children` when the columns layout changes (1↔2↔3 / 1-2 / 2-1) — grows pad with empty columns, shrinks merge trailing columns into the last kept column so blocks are never silently dropped. Eliminates the `structure.section-column-mismatch` error that previously fired on every layout change.
+- Editor button reset (`.tpl button { background: none }`) now wrapped in `:where()` so its specificity drops to (0,0,1) and per-button utility classes (e.g. `tpl:bg-[var(--tpl-primary)]`) win. Fixes the Fix-button-renders-transparent bug introduced by the canvas reset; affects every primary-bg button in the editor.

apps/docs/.vitepress/config.ts

@@ -3,7 +3,7 @@ import { defineConfig, type DefaultTheme } from "vitepress";
 const enNav: DefaultTheme.NavItem[] = [
   { text: "Guide", link: "/getting-started/installation" },
   { text: "API", link: "/api/editor" },
-  { text: "Accessibility", link: "/quality/accessibility/" },
+  { text: "Quality", link: "/quality/" },
   { text: "Cloud", link: "/cloud/" },
   { text: "Playground", link: "https://play.templatical.com" },
 ];
@@ -12,33 +12,29 @@ const enSidebar: DefaultTheme.SidebarMulti = {
   "/quality/": [
     {
       text: "Quality",
-      items: [{ text: "Overview", link: "/quality/" }],
+      items: [
+        { text: "Overview", link: "/quality/" },
+        { text: "Options", link: "/quality/options" },
+        { text: "Severity & fixes", link: "/quality/severity-and-fixes" },
+        { text: "Headless usage", link: "/quality/headless-usage" },
+        {
+          text: "Contributing locales",
+          link: "/quality/contributing-locales",
+        },
+      ],
     },
     {
       text: "Accessibility",
       items: [
         { text: "Overview", link: "/quality/accessibility/" },
-        {
-          text: "Getting Started",
-          link: "/quality/accessibility/getting-started",
-        },
-        {
-          text: "Rule catalog",
-          link: "/quality/accessibility/rule-catalog",
-        },
-        { text: "Options", link: "/quality/accessibility/options" },
-        {
-          text: "Severity & fixes",
-          link: "/quality/accessibility/severity-and-fixes",
-        },
-        {
-          text: "Headless usage",
-          link: "/quality/accessibility/headless-usage",
-        },
-        {
-          text: "Contributing locales",
-          link: "/quality/accessibility/contributing-locales",
-        },
+        { text: "Rule catalog", link: "/quality/accessibility/rule-catalog" },
+      ],
+    },
+    {
+      text: "Structure",
+      items: [
+        { text: "Overview", link: "/quality/structure/" },
+        { text: "Rule catalog", link: "/quality/structure/rule-catalog" },
       ],
     },
   ],
@@ -147,7 +143,7 @@ const enSidebar: DefaultTheme.SidebarMulti = {
 const deNav: DefaultTheme.NavItem[] = [
   { text: "Anleitung", link: "/de/getting-started/installation" },
   { text: "API", link: "/de/api/editor" },
-  { text: "Barrierefreiheit", link: "/de/quality/accessibility/" },
+  { text: "Qualität", link: "/de/quality/" },
   { text: "Cloud", link: "/de/cloud/" },
   { text: "Playground", link: "https://play.templatical.com" },
 ];
@@ -156,33 +152,35 @@ const deSidebar: DefaultTheme.SidebarMulti = {
   "/de/quality/": [
     {
       text: "Qualität",
-      items: [{ text: "Überblick", link: "/de/quality/" }],
+      items: [
+        { text: "Überblick", link: "/de/quality/" },
+        { text: "Optionen", link: "/de/quality/options" },
+        {
+          text: "Schweregrade & Fixes",
+          link: "/de/quality/severity-and-fixes",
+        },
+        { text: "Headless-Nutzung", link: "/de/quality/headless-usage" },
+        {
+          text: "Lokalen beitragen",
+          link: "/de/quality/contributing-locales",
+        },
+      ],
     },
     {
       text: "Barrierefreiheit",
       items: [
         { text: "Überblick", link: "/de/quality/accessibility/" },
-        {
-          text: "Erste Schritte",
-          link: "/de/quality/accessibility/getting-started",
-        },
         {
           text: "Regelkatalog",
           link: "/de/quality/accessibility/rule-catalog",
         },
-        { text: "Optionen", link: "/de/quality/accessibility/options" },
-        {
-          text: "Schweregrad & Korrekturen",
-          link: "/de/quality/accessibility/severity-and-fixes",
-        },
-        {
-          text: "Headless-Nutzung",
-          link: "/de/quality/accessibility/headless-usage",
-        },
-        {
-          text: "Lokale beitragen",
-          link: "/de/quality/accessibility/contributing-locales",
-        },
+      ],
+    },
+    {
+      text: "Struktur",
+      items: [
+        { text: "Überblick", link: "/de/quality/structure/" },
+        { text: "Regelkatalog", link: "/de/quality/structure/rule-catalog" },
       ],
     },
   ],

apps/docs/de/getting-started/installation.md

@@ -72,14 +72,17 @@ Wenn Sie `editor.toMjml()` aufrufen, ohne dass der Renderer installiert ist, wir
 
 ## Paketübersicht
 
-| Paket                         | Beschreibung                                                        | Erforderlich                                                                                                 |
-| ----------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `@templatical/editor`         | Visueller Drag-and-Drop-Editor und `init()`-Einstiegspunkt          | Ja                                                                                                           |
-| `@templatical/types`          | Gemeinsame TypeScript-Typen, Block-Factory-Funktionen, Type Guards  | Automatisch installiert                                                                                      |
-| `@templatical/core`           | Framework-agnostische Editor-Logik (State, History)                 | Automatisch installiert                                                                                      |
-| `@templatical/renderer`       | Rendert Templates zu MJML                                           | Optional – installieren, wo Sie `editor.toMjml()` (Browser) oder `renderToMjml()` (Node.js, Server) aufrufen |
-| `@templatical/import-beefree` | Konvertiert BeeFree-JSON-Templates in das Templatical-Format        | Optional                                                                                                     |
-| `@templatical/import-unlayer` | Konvertiert Unlayer-JSON-Design-Templates in das Templatical-Format | Optional                                                                                                     |
+| Paket                          | Beschreibung                                                                                                            | Erforderlich                                                                                                 |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `@templatical/editor`          | Visueller Drag-and-Drop-Editor und `init()`-Einstiegspunkt                                                              | Ja                                                                                                           |
+| `@templatical/types`           | Gemeinsame TypeScript-Typen, Block-Factory-Funktionen, Type Guards                                                      | Automatisch installiert                                                                                      |
+| `@templatical/core`            | Framework-agnostische Editor-Logik (State, History)                                                                     | Automatisch installiert                                                                                      |
+| `@templatical/renderer`        | Rendert Templates zu MJML                                                                                               | Optional – installieren, wo Sie `editor.toMjml()` (Browser) oder `renderToMjml()` (Node.js, Server) aufrufen |
+| `@templatical/quality`         | Template-Linter (Barrierefreiheit + Struktur) für das Issues-Panel des Editors und Headless- / CI-Checks                | Optional – installieren, um den Issues-Sidebar-Tab und die Inline-Block-Badges zu aktivieren                 |
+| `@templatical/media-library`   | Eigenständige Medienbibliothek (Typen, Composable, API-Client, Vue-Komponenten), wird von `initCloud()` genutzt         | Optional – nur nötig, wenn Sie `initCloud()` für den Medien-Browser verwenden                                |
+| `@templatical/import-beefree`  | Konvertiert BeeFree-JSON-Templates in das Templatical-Format                                                            | Optional                                                                                                     |
+| `@templatical/import-unlayer`  | Konvertiert Unlayer-JSON-Design-Templates in das Templatical-Format                                                     | Optional                                                                                                     |
+| `@templatical/import-html`     | Konvertiert bestehende HTML-E-Mail-Templates (Tabellen-basiert) in das Templatical-Format                               | Optional                                                                                                     |
 
 `@templatical/types` und `@templatical/core` sind direkte Abhängigkeiten von `@templatical/editor` und werden automatisch installiert.
 
@@ -90,7 +93,7 @@ Der Editor lädt vier optionale Peers zur Laufzeit per dynamischem `import()`, a
 | Peer                         | Wann geladen                                   | Installieren, wenn Sie                   |
 | ---------------------------- | ---------------------------------------------- | ---------------------------------------- |
 | `@templatical/renderer`      | Erster Aufruf von `editor.toMjml()`            | MJML-Export aus dem Browser benötigen    |
-| `@templatical/quality`       | Beim Mounten des Editors (Accessibility-Panel) | Die Accessibility-Sidebar nutzen möchten |
+| `@templatical/quality`       | Beim Mounten des Editors (Issues-Panel)        | Barrierefreiheit + Struktur-Lint in der Issues-Sidebar nutzen möchten |
 | `@templatical/media-library` | Erstes Öffnen des Medien-Browsers              | `initCloud()` verwenden                  |
 | `pusher-js`                  | Cloud-Realtime-Verbindung                      | `initCloud()` verwenden                  |