contenuti: aggiunge size xl/xxl e allineamento (con giustificato)

- style-presets: size += xl, xxl; align += justify
- global.css: .cs-size-xl (1.5em), .cs-size-xxl (2em), .cs-align-justify
- content-seed: 'align' nei default styleOptions dei tag testo/html, così il
  picker orientamento (sx/centrato/dx/giustificato) compare nell'editor
- Base.astro: sincronizza la copia hardcoded degli stili nell'editor inline

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/data/content-seed.ts

@@ -11,9 +11,9 @@ import { performanceClassPricing } from './pricing';
 export type ContentType = 'text' | 'html' | 'image';
 export interface SeedEntry { tag: string; type: ContentType; value: string; styleOptions?: StyleGroup[] }
 
-const T = (tag: string, value: string, styleOptions: StyleGroup[] = ['size', 'color', 'weight', 'style']): SeedEntry =>
+const T = (tag: string, value: string, styleOptions: StyleGroup[] = ['size', 'color', 'weight', 'style', 'align']): SeedEntry =>
   ({ tag, type: 'text', value, styleOptions });
-const H = (tag: string, value: string, styleOptions: StyleGroup[] = ['size', 'color']): SeedEntry =>
+const H = (tag: string, value: string, styleOptions: StyleGroup[] = ['size', 'color', 'align']): SeedEntry =>
   ({ tag, type: 'html', value, styleOptions });
 const I = (tag: string): SeedEntry => ({ tag, type: 'image', value: '' });
 

src/layouts/Base.astro

@@ -107,7 +107,7 @@ const showTags = canTags && wantTags;
       </div>
       <script is:inline>
         (() => {
-          const STYLE_GROUPS = { size: ['s','m','l'], color: ['accent','accent-dark','dark','heading','text','text-light','white'], weight: ['normal','bold'], style: ['normal','italic'], align: ['left','center','right'] };
+          const STYLE_GROUPS = { size: ['s','m','l','xl','xxl'], color: ['accent','accent-dark','dark','heading','text','text-light','white'], weight: ['normal','bold'], style: ['normal','italic'], align: ['left','center','right','justify'] };
           const modal = document.getElementById('tag-modal');
           const tmTag = document.getElementById('tm-tag');
           const tmGuid = document.getElementById('tm-guid');

src/lib/style-presets.ts

@@ -1,9 +1,9 @@
 export const STYLE_GROUPS = {
-  size: ['s', 'm', 'l'],
+  size: ['s', 'm', 'l', 'xl', 'xxl'],
   color: ['accent', 'accent-dark', 'dark', 'heading', 'text', 'text-light', 'white'],
   weight: ['normal', 'bold'],
   style: ['normal', 'italic'],
-  align: ['left', 'center', 'right'],
+  align: ['left', 'center', 'right', 'justify'],
 } as const;
 
 export type StyleGroup = keyof typeof STYLE_GROUPS;

src/styles/global.css

@@ -73,6 +73,8 @@ html.js [data-reveal].is-inview, html.js .section-heading.is-inview { opacity: 1
 .cs-size-s { font-size: .85em; }
 .cs-size-m { font-size: 1em; }
 .cs-size-l { font-size: 1.25em; }
+.cs-size-xl { font-size: 1.5em; }
+.cs-size-xxl { font-size: 2em; }
 .cs-color-accent { color: var(--c-accent); }
 .cs-color-accent-dark { color: var(--c-accent-dark); }
 .cs-color-dark { color: var(--c-dark); }
@@ -87,3 +89,4 @@ html.js [data-reveal].is-inview, html.js .section-heading.is-inview { opacity: 1
 .cs-align-left { text-align: left; }
 .cs-align-center { text-align: center; }
 .cs-align-right { text-align: right; }
+.cs-align-justify { text-align: justify; }