@cardinali-studio/adminkit 1.0.0

package/dist/theme.css

@@ -0,0 +1,636 @@
+/* Tema dell'admin — SOLE custom property e le regole che le usano.
+ *
+ * Questi sono i **default del motore**, non l'aspetto di un cliente. Il sito che monta il kit
+ * li sovrascrive nel suo `admin/src/theme.css`, che viene importato DOPO: i default restano
+ * qui perché il kit deve funzionare da solo, e una variabile che un cliente non ridefinisce
+ * non deve dare un pannello rotto senza nessun errore.
+ *
+ * La regola che tiene in piedi la separazione: se una richiesta di aspetto non si può esprimere
+ * ridefinendo una variabile, la risposta giusta NON è modificare un componente qui dentro — è
+ * aggiungere una variabile, così la ottengono tutti i siti. Un componente modificato per un
+ * cliente è il primo passo verso un fork del motore.
+ *
+ * Le classi sono prefissate `ak-` per non incrociare né site.css né il vecchio admin.css.
+ *
+ * NB: questo file si consuma da `dist/` (l'export del pacchetto è `"./theme.css":
+ * "./dist/theme.css"`, la copia la fa `npm run build` di adminkit), quindi dopo averlo toccato
+ * serve `npm run build:pkgs`. Il `theme.css` del cliente invece lo compila Vite insieme
+ * all'admin: i due file si comportano diversamente, ed è già costata una modifica che sembrava
+ * non avere effetto.
+ */
+
+:root {
+  color-scheme: light;
+  --ak-bg: #fbfbfa;
+  --ak-panel: #ffffff;
+  --ak-ink: #1a1a1a;
+  --ak-ink-quiet: #6b6b6b;
+  --ak-line: #e4e4e2;
+  --ak-accent: #b94732;
+  --ak-accent-ink: #ffffff;
+  --ak-accent-hover: #a33d2a;
+  --ak-danger: #b00020;
+  --ak-radius: 6px;
+  --ak-gap: 14px;
+  --ak-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+
+  /* Il guscio a tre colonne. Stanno qui e non nell'app perché sono la leva con cui un altro
+     sito cambia pelle senza toccare un componente: la colonna scura, la sua larghezza, il grigio
+     dell'elenco. */
+  --ak-rail-w: 208px;
+  --ak-col-w: 272px;
+  --ak-rail-bg: #17181a;
+  --ak-rail-ink: #9b9b98;
+  --ak-rail-ink-on: #ffffff;
+  --ak-rail-hover: rgba(255, 255, 255, .06);
+  --ak-rail-on: rgba(255, 255, 255, .11);
+  --ak-rail-line: rgba(255, 255, 255, .10);
+  --ak-col-bg: #f4f4f2;
+  /* Due nomi usati da tempo in `.bk-*` (Prenotazioni) sempre con un fallback hardcoded
+     (`var(--ak-muted,#777)`, `var(--ak-paper,#fff)`), perché non erano mai stati dichiarati
+     davvero: senza una vera custom property qui, quel fallback è tutto ciò che Prenotazioni
+     vedrà mai, tema scuro compreso. Sono alias, non nuovi concetti — non aggiungono un quinto
+     piano alla gerarchia delle superfici, si limitano a dare un nome che `.bk-*` già usa a due
+     token che esistono già. */
+  --ak-muted: var(--ak-ink-quiet);
+  --ak-paper: var(--ak-panel);
+  /* Fra `--ak-ink-quiet` e `--ak-line`: usata da alcune regole (`.dl-state`, `.dl-total`,
+     `.ov-stat-quiet`) da prima che fosse mai dichiarata — con la sola varianti col fallback
+     `var(--ak-ink-faint, var(--ak-ink-quiet))` funzionavano per caso, le altre restavano senza
+     valore. */
+  --ak-ink-faint: #9a9a94;
+  /* Lato della cella nella griglia dei media: cambia quante foto entrano per riga. */
+  --ak-cell: 152px;
+  /* Il passaggio del mouse è un velo, la SELEZIONE è un pannello bianco con la sua barra
+     d'accento: se i due stati si somigliano, l'elenco smette di dire dove sei. */
+  --ak-hover: rgba(0, 0, 0, .045);
+  --ak-font: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
+  --ak-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --ak-fs: 14px;
+  --ak-fs-small: 12px;
+
+  /* ---- Superfici senza tratti -------------------------------------------------------------
+     La direzione nuova del pannello: a separare sono il colore del fondo e l'ombra, non un
+     bordo di un pixel. Un contorno disegna una scatola, e una schermata piena di scatole si
+     legge come un modulo da compilare invece che come il contenuto che rappresenta.
+
+     QUATTRO piani, e non di più — al quinto la gerarchia smette di leggersi:
+
+       --ak-ground      il foglio sotto tutto: PIÙ PROFONDO di `--ak-bg`, ed è questa la leva
+                        che dà contrasto a una superficie bianca. Con un fondo quasi bianco
+                        anche lui, una card resta appesa alla sola ombra e sparisce.
+       --ak-panel       la superficie sollevata (già dichiarata sopra: bianca)
+       --ak-inset       un blocco incassato DENTRO una superficie
+       --ak-inset-deep  il pozzetto: vaschette dei segmentati, segnaposto delle immagini
+
+     Le ombre hanno sempre DUE componenti: una vicina che definisce il bordo e una lontana e
+     molto diluita che dà l'altezza. Con la sola vicina una card sembra stampata sul foglio
+     invece che appoggiata sopra; con la sola lontana sembra sporca.
+
+     Stanno qui e non in `admin/src/app.css` perché sono decisioni di aspetto, e questo file è
+     l'unica leva di personalizzazione per sito: un cliente con un'identità più fredda cambia
+     questi quattro valori e si porta dietro ogni schermata che li usa. Erano dentro `.pw`
+     (l'editor dei lavori) finché a usarli era una sola schermata; dalla seconda, una copia
+     sarebbe stata la prima occasione per farle divergere.
+
+     NB: questo file si consuma da `dist/`, non da `src/` — dopo averlo toccato serve
+     `npm run build:pkgs`, o l'admin continua a usare gli stili vecchi senza dare errore. */
+  --ak-ground: #efeeea;
+  --ak-inset: #f4f4f1;
+  --ak-inset-deep: #e7e7e2;
+  --ak-lift-1: 0 1px 2px rgba(20, 20, 24, .07), 0 5px 12px -8px rgba(20, 20, 24, .28);
+  --ak-lift-2: 0 1px 2px rgba(20, 20, 24, .06), 0 10px 24px -14px rgba(20, 20, 24, .35);
+  --ak-lift-3: 0 2px 6px rgba(20, 20, 24, .07), 0 28px 56px -28px rgba(20, 20, 24, .45);
+  /* L'anello di focus sostituisce il bordo che non c'è: senza, un campo riempito non ha modo
+     di dire dove sta il cursore. */
+  --ak-ring: 0 0 0 3px color-mix(in srgb, var(--ak-accent) 20%, transparent);
+}
+
+/* ---- Tema scuro --------------------------------------------------------------------------
+   Stessa gerarchia di elevazione del chiaro (ground più profondo di bg, bg più profondo di
+   panel), ma invertita in luminanza: in un'interfaccia scura una superficie sale illuminandosi,
+   non ombreggiandosi — l'ombra da sola smette di leggersi su un fondo già quasi nero.
+
+   Non tutto si ridefinisce. Il rail è già scuro anche nel tema chiaro (`--ak-rail-bg`), quindi
+   il suo contrasto interno non dipende da questo blocco; le dimensioni (`--ak-radius`,
+   `--ak-gap`, le larghezze, `--ak-cell`, i font) non hanno un colore da invertire. `--ak-ring`
+   non si ridefinisce nemmeno lui: è già `color-mix(…, var(--ak-accent) …)`, quindi eredita da
+   solo il nuovo accento sotto.
+
+   L'accento non cambia solo tono: `--ak-accent-ink` passa da bianco a un quasi-nero caldo,
+   perché serve sia come testo (link, barra di selezione) sia come sfondo pieno di un bottone
+   (`.ak-btn-primary`) — un solo hex chiaro non regge bene entrambi i ruoli su un fondo quasi
+   nero. Valori verificati per contrasto WCAG (soglia AA 4.5:1 testo, 3:1 componenti UI): ink su
+   bg/panel/ground 13-15:1, ink-quiet 6-7:1, ink-faint 4.6-5.3:1, accento come testo 4.7-5.1:1,
+   accent-ink su accento pieno 5.5:1.
+
+   Un sito che in futuro vuole un accento scuro diverso dal default deve scrivere il proprio
+   override nello STESSO selettore scoped (`:root[data-theme="dark"]`), non in un `:root`
+   semplice: quest'ultimo (specificità 0,1,0) perde sempre contro questo (0,2,0), a prescindere
+   dall'ordine di import — un override scritto nel modo sbagliato sparirebbe senza errore non
+   appena si passa al tema scuro. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ak-ground: #16171a;
+  --ak-bg: #1c1d20;
+  --ak-col-bg: #1a1b1e;
+  --ak-inset: #1a1b1e;
+  --ak-inset-deep: #131417;
+  --ak-panel: #232428;
+
+  --ak-line: rgba(255, 255, 255, .12);
+  --ak-hover: rgba(255, 255, 255, .06);
+  --ak-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
+  --ak-lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6);
+  --ak-lift-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -14px rgba(0, 0, 0, .65);
+  --ak-lift-3: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .7);
+
+  --ak-ink: #ececea;
+  --ak-ink-quiet: #a3a3a0;
+  --ak-ink-faint: #8c8c86;
+
+  --ak-accent: #d9713f;
+  --ak-accent-ink: #241209;
+  --ak-accent-hover: #c0602f;
+  --ak-danger: #ef6a5c;
+}
+
+.ak-form { display: flex; flex-direction: column; gap: calc(var(--ak-gap) * 1.4); }
+
+.ak-group {
+  border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+  padding: var(--ak-gap); margin: 0;
+  display: flex; flex-direction: column; gap: var(--ak-gap);
+  background: var(--ak-panel);
+}
+.ak-legend {
+  font: 600 var(--ak-fs-small)/1 var(--ak-font);
+  text-transform: uppercase; letter-spacing: .08em; color: var(--ak-ink-quiet);
+  padding: 0 6px;
+}
+
+.ak-field { display: flex; flex-direction: column; gap: 5px; }
+.ak-field-inline { flex-direction: row; align-items: center; gap: 8px; }
+.ak-label { font: 500 var(--ak-fs)/1.3 var(--ak-font); color: var(--ak-ink); }
+.ak-hint  { font: 400 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+.ak-error { font: 500 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-danger); }
+
+.ak-input {
+  font: 400 var(--ak-fs)/1.4 var(--ak-font);
+  color: var(--ak-ink); background: var(--ak-panel);
+  border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+  padding: 8px 10px; width: 100%;
+}
+/* Le caselle e i cursori prendono l'accento del sito invece del blu di sistema. */
+input, select, textarea, button { accent-color: var(--ak-accent); }
+
+.ak-input:focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 1px; }
+.ak-textarea { resize: vertical; font-family: var(--ak-font-mono); font-size: var(--ak-fs-small); }
+
+.ak-btn {
+  font: 500 var(--ak-fs-small)/1 var(--ak-font);
+  padding: 7px 12px; border-radius: var(--ak-radius);
+  border: 1px solid var(--ak-line); background: var(--ak-panel); color: var(--ak-ink);
+  cursor: pointer;
+}
+a.ak-btn { text-decoration: none; display: inline-flex; align-items: center; }
+.ak-btn:hover { border-color: var(--ak-ink-quiet); }
+.ak-btn:disabled { opacity: .5; cursor: default; }
+.ak-btn:disabled:hover { border-color: var(--ak-line); }
+.ak-btn-quiet { color: var(--ak-ink-quiet); }
+/* Il bottone dell'azione principale della schermata — «Salva e pubblica», «Crea». Ce n'è al
+   massimo UNO visibile per volta: se due gesti si contendono l'accento, l'accento non indica più
+   niente. */
+.ak-btn-primary {
+  background: var(--ak-accent); border-color: var(--ak-accent); color: var(--ak-accent-ink);
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+}
+.ak-btn-primary:hover:not(:disabled) { background: var(--ak-accent-hover); border-color: var(--ak-accent-hover); }
+.ak-btn-primary:disabled:hover { border-color: var(--ak-accent); }
+.ak-btn-block { width: 100%; }
+.ak-icon {
+  border: 0; background: transparent; cursor: pointer; color: var(--ak-ink-quiet);
+  font: 500 var(--ak-fs)/1 var(--ak-font); padding: 2px 6px;
+}
+.ak-icon:hover { color: var(--ak-ink); }
+
+.ak-thumb {
+  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
+  border-radius: var(--ak-radius); background: var(--ak-line);
+}
+.ak-thumb-empty { opacity: .5; }
+.ak-media-one { display: flex; gap: var(--ak-gap); align-items: flex-start; }
+.ak-media-one .ak-thumb { width: 96px; }
+.ak-media-actions { display: flex; flex-direction: column; gap: 6px; }
+.ak-media-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 8px; margin-bottom: 8px;
+}
+.ak-media-item { margin: 0; }
+.ak-media-item-bar { display: flex; justify-content: space-between; align-items: center; }
+/* Voce nascosta (widget r2Curated): resta nell'elenco e al suo posto, ma non va online.
+   Si vede spenta, non sparita — è tutta la differenza fra "nascosta" e "tolta". La barra dei
+   bottoni resta a piena opacità, altrimenti quello per rimetterla online sarebbe il meno
+   leggibile della riga. */
+.ak-media-item.is-hidden .ak-thumb { opacity: .28; filter: grayscale(1); }
+
+/* ---- Media: il guscio del modale di scelta ------------------------------------------ */
+.ak-spacer { flex: 1; }
+
+.mb-modal {
+  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35);
+  display: grid; place-items: center; padding: 4vh 4vw;
+}
+.mb-modal-panel {
+  background: var(--ak-bg); border-radius: var(--ak-radius);
+  width: 100%; max-width: 1100px; max-height: 92vh; overflow: auto; padding: var(--ak-gap);
+}
+
+.mb { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--ak-gap); align-items: start; }
+.mb-side { position: sticky; top: 0; }
+.mb-main { min-width: 0; }
+
+/* ---- Media: le cartelle -------------------------------------------------------------- */
+.mf { display: flex; flex-direction: column; }
+.mf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.mf-item {
+  position: relative; display: flex; align-items: center;
+  border: 1px solid transparent; border-radius: 6px; background: transparent;
+}
+.mf-open {
+  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
+  border: 0; background: transparent; cursor: pointer;
+  padding: 8px 10px; font: 500 13px/1.3 var(--ak-font); color: var(--ak-ink);
+}
+.mf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mf-count { font: 400 var(--ak-fs-small)/1 var(--ak-font); color: var(--ak-ink-quiet); font-variant-numeric: tabular-nums; }
+.mf-item:hover { background: var(--ak-hover); }
+.mf-item.is-on {
+  background: var(--ak-panel); border-color: var(--ak-line);
+  box-shadow: var(--ak-shadow), inset 2px 0 0 var(--ak-accent);
+}
+.mf-item.is-on .mf-name { font-weight: 600; }
+/* Bersaglio di uno spostamento. Deve gridare: un drop andato nel posto sbagliato sposta file
+   veri dentro il bucket, e la strada indietro è un altro drop. */
+.mf-item.is-over {
+  background: var(--ak-panel); border-color: var(--ak-accent); border-style: dashed;
+  color: var(--ak-accent);
+}
+.mf-item.is-over .mf-count { color: var(--ak-accent); }
+/* «Senza cartella» è un'altra cosa dalle cartelle: sopra la riga, non nell'elenco. */
+.mf-loose { margin-bottom: 10px; }
+.mf-list + .mf-list { padding-top: 12px; border-top: 1px solid var(--ak-line); }
+.mf-new { margin-top: 10px; align-self: flex-start; }
+/* Compare solo mentre si trascina una cartella: è il bersaglio del primo livello, che prima non
+   esisteva — l'unico modo era indovinare che «Tutte» lo fosse. */
+.mf-root-drop {
+  margin-top: 10px; padding: 12px 10px; border-radius: var(--ak-radius);
+  border: 2px dashed var(--ak-line); text-align: center;
+  font: 500 var(--ak-fs-small)/1.3 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.mf-root-drop.is-over { border-color: var(--ak-accent); color: var(--ak-accent); background: var(--ak-panel); }
+/* Il cestino chiude la colonna, staccato: è un posto dove si va, non una cartella fra le altre. */
+.mf-tail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ak-line); }
+.mf-ico { flex: none; color: var(--ak-ink-quiet); }
+.mf-item.is-on .mf-ico { color: var(--ak-accent); }
+
+.mf-actions { position: relative; flex: none; }
+.mf-more {
+  display: flex; border: 0; background: transparent; cursor: pointer; border-radius: 4px;
+  color: var(--ak-ink-quiet); padding: 4px 6px; opacity: 0;
+  font: 500 var(--ak-fs-small)/1 var(--ak-font);
+}
+.mf-item:hover .mf-more, .mf-item.is-on .mf-more, .mf-more:focus-visible { opacity: 1; }
+.mf-more:hover { background: var(--ak-bg); color: var(--ak-ink); }
+.mf-menu {
+  position: absolute; top: calc(100% + 2px); z-index: 30;
+  min-width: 200px; padding: 4px; display: flex; flex-direction: column; gap: 1px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: 8px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
+}
+.mf-menu.is-left { right: 0; left: auto; }
+.mf-menu.is-right { left: 0; right: auto; }
+.mf-menu > button {
+  border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 5px;
+  padding: 7px 9px; font: 400 13px/1.2 var(--ak-font); color: var(--ak-ink);
+}
+.mf-menu > button:hover { background: var(--ak-bg); }
+.mf-menu > button.mf-danger { color: var(--ak-danger); }
+.mf-menu-form { min-width: 260px; padding: 10px; gap: 8px; }
+.mf-menu-row { display: flex; gap: 6px; }
+
+/* ---- Media: la griglia ---------------------------------------------------------------- */
+/* `min-height: 100%`: la zona che riceve i file trascinati è alta quanto il pannello, non
+   quanto il suo contenuto. In una cartella vuota — cioè proprio quando si sta caricando — era
+   una striscia di quaranta pixel in cima, e tutto il resto dello schermo non riceveva niente. */
+.mg-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 100%; position: relative; }
+.mg-wrap.is-dropping { outline: 2px dashed var(--ak-accent); outline-offset: -6px; border-radius: var(--ak-radius); }
+.mg-dropzone {
+  position: absolute; inset: 0; z-index: 5; pointer-events: none;
+  display: grid; place-items: center; border-radius: var(--ak-radius);
+  background: rgba(255, 255, 255, .82);
+  font: 500 var(--ak-fs)/1.4 var(--ak-font); color: var(--ak-ink);
+}
+.mg-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 32px; }
+.mg-all { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 500 13px/1 var(--ak-font); }
+.mg-all input { width: 15px; height: 15px; margin: 0; }
+.mg-act {
+  border: 0; background: transparent; cursor: pointer; padding: 4px 0;
+  font: 500 13px/1 var(--ak-font); color: var(--ak-accent);
+}
+.mg-act:hover:not(:disabled) { text-decoration: underline; }
+.mg-act:disabled { color: var(--ak-ink-quiet); cursor: default; }
+.mg-act.is-danger { color: var(--ak-danger); }
+.mg-menu-wrap { position: relative; display: inline-flex; }
+.mg-menu {
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
+  min-width: 190px; max-height: 320px; overflow: auto; padding: 4px;
+  display: flex; flex-direction: column; gap: 1px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: 8px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
+}
+.mg-menu > button {
+  display: flex; justify-content: space-between; gap: 12px;
+  border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 5px;
+  padding: 7px 9px; font: 400 13px/1.2 var(--ak-font); color: var(--ak-ink);
+}
+.mg-menu > button:hover { background: var(--ak-bg); }
+.mg-sort { font: inherit; border: 1px solid var(--ak-line); border-radius: 4px; padding: 2px 4px; }
+.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.mg-section { display: flex; flex-direction: column; gap: 10px; }
+.mg-section-head { display: flex; align-items: center; gap: 14px; }
+.mg-section-title {
+  margin: 0; font: 600 11px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .09em;
+  color: var(--ak-ink-quiet);
+}
+/* L'avanzamento di un'operazione lunga non è una nota a margine: è la risposta alla domanda
+   «sta facendo qualcosa?». Se non si vede, chi guarda ricarica la pagina. */
+.mg-progress {
+  margin: 0; padding: 8px 12px; border-radius: var(--ak-radius);
+  background: var(--ak-panel); border: 1px solid var(--ak-accent);
+  font: 500 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink);
+}
+
+/* Celle di ingombro uguale, immagine INTERA dentro. Prima erano quadrati con `object-fit: cover`:
+   un verticale sembrava un quadrato e per riconoscere una foto bisognava aprirla. */
+.mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ak-cell), 1fr)); gap: 18px 14px; }
+.mg-item { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
+.mg-frame {
+  position: relative; height: var(--ak-cell); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.mg-img {
+  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
+  background: var(--ak-line); box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
+}
+/* La cornice della selezione è DECORAZIONE: `pointer-events: none` o si prende lei il click.
+   Essendo un ::after del frame viene disegnata dopo la casella, quindi le stava sopra: premere
+   la spunta di un elemento già selezionato non lo deselezionava, lo apriva. */
+.mg-item.is-on .mg-frame::after {
+  content: ""; position: absolute; inset: -6px; pointer-events: none;
+  border: 2px solid var(--ak-accent); border-radius: 4px;
+}
+.mg-check {
+  position: absolute; left: 4px; bottom: 4px; z-index: 3; width: 20px; height: 20px; border-radius: 4px;
+  display: none; align-items: center; justify-content: center; cursor: pointer;
+  border: 1px solid var(--ak-line); background: rgba(255, 255, 255, .94);
+  font: 700 12px/1 var(--ak-font); color: var(--ak-accent-ink);
+}
+.mg-item:hover .mg-check, .mg-item.is-on .mg-check { display: flex; }
+.mg-item.is-on .mg-check { background: var(--ak-accent); border-color: var(--ak-accent); }
+.mg-cap {
+  font: 400 11px/1.3 var(--ak-font); color: var(--ak-ink-quiet); text-align: center;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* ---- Media: una cartella dentro la griglia ------------------------------------------- */
+/* Occupa uno slot come una foto: è contenuto anche lei, si seleziona e si trascina — e una cosa
+   che si prende e si sposta deve avere la dimensione di un bersaglio, non di un chip. */
+.mg-folder { position: relative; }
+.mg-folder .mg-frame {
+  border: 1px solid var(--ak-line); border-radius: var(--ak-radius); background: var(--ak-panel);
+}
+.mg-folder:hover .mg-frame { border-color: var(--ak-ink-quiet); }
+.mg-folder-ico { width: 58%; height: auto; fill: var(--ak-line); stroke: var(--ak-ink-quiet); stroke-width: 1.2; }
+.mg-folder .mg-cap { font-weight: 500; color: var(--ak-ink); }
+/* Bersaglio di un drop: la cartella sta per ricevere qualcosa. */
+.mg-folder.is-over .mg-frame {
+  border: 2px dashed var(--ak-accent); background: var(--ak-bg);
+}
+.mg-folder.is-over .mg-folder-ico { fill: var(--ak-panel); stroke: var(--ak-accent); }
+.mg-folder-menu { position: absolute; top: 6px; right: 6px; z-index: 4; }
+.mg-folder-menu .mf-more { background: rgba(255, 255, 255, .92); border: 1px solid var(--ak-line); }
+/* Erano invisibili: `.mf-more` nasce con opacity 0 e la regola che lo accende guarda `.mf-item`,
+   cioè la riga della colonna di sinistra. Dentro una cella della griglia non c'è nessun
+   `.mf-item`, quindi il menu restava spento anche al passaggio del mouse. */
+.mg-folder:hover .mg-folder-menu .mf-more,
+.mg-folder.is-on .mg-folder-menu .mf-more,
+.mg-folder-menu .mf-more:focus-visible { opacity: 1; }
+.mg-foot {
+  position: sticky; bottom: 0; z-index: 2;
+  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+
+/* ---- Media: la foto a schermo intero -------------------------------------------------- */
+.lb { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
+.lb-top {
+  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
+  padding: 10px 14px; color: #fff;
+}
+.lb-id { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.lb-name { font: 500 13px/1.2 var(--ak-font); }
+.lb-count { font: 400 12px/1 var(--ak-font); opacity: .6; }
+.lb-tools { display: flex; justify-content: flex-end; gap: 2px; }
+.lb-btn {
+  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
+  border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 6px;
+  padding: 8px 10px; font: 500 13px/1 var(--ak-font);
+}
+.lb-btn:hover { background: rgba(255, 255, 255, .13); }
+.lb-btn.is-on { background: rgba(255, 255, 255, .2); }
+.lb-tools .lb-btn { min-width: 34px; justify-content: center; }
+.lb-stage {
+  flex: 1; min-height: 0; position: relative;
+  display: flex; align-items: center; justify-content: center; padding: 0 66px 22px;
+}
+.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.lb-nav {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
+  background: rgba(255, 255, 255, .14); color: #fff; font: 400 24px/1 var(--ak-font);
+}
+.lb-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
+.lb-nav:disabled { opacity: .2; cursor: default; }
+.lb-prev { left: 12px; }
+.lb-next { right: 12px; }
+.lb-info {
+  position: absolute; right: 14px; top: 58px; width: 290px; z-index: 2;
+  background: rgba(22, 22, 22, .94); border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 8px; padding: 12px 14px; color: #eaeaea;
+}
+.lb-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font: 400 12px/1.4 var(--ak-font); }
+.lb-info dt { color: #9b9b98; }
+.lb-info dd { margin: 0; word-break: break-word; }
+
+/* ---- Media: il dialogo di caricamento ------------------------------------------------- */
+.up { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .42); display: grid; place-items: center; padding: 5vh 5vw; }
+.up-panel {
+  position: relative; width: 100%; max-width: 620px; padding: 30px 28px 24px;
+  display: flex; flex-direction: column; gap: 12px;
+  background: var(--ak-panel); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
+}
+.up-close {
+  position: absolute; top: 8px; right: 12px; border: 0; background: transparent; cursor: pointer;
+  color: var(--ak-ink-quiet); font: 400 22px/1 var(--ak-font);
+}
+.up-drop {
+  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px;
+  border: 2px dashed var(--ak-line); border-radius: 8px; background: var(--ak-bg);
+}
+.up-drop.is-over { border-color: var(--ak-accent); background: #fdf4f2; }
+.up-cloud { color: var(--ak-ink-quiet); }
+.up-hint { margin: 0; font: 400 13px/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+.up-dest { margin: 0; font: 400 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+
+/* ---- Cestino ------------------------------------------------------------------------ */
+.tr { display: flex; flex-direction: column; gap: 10px; }
+.tr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.tr-row {
+  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+.tr-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--ak-line); }
+.tr-name { font: 500 var(--ak-fs-small)/1.3 var(--ak-font); }
+.tr-orig { flex: 1; font: 400 11px/1.3 var(--ak-font-mono); color: var(--ak-ink-quiet);
+           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---- objectList (l'unico widget ricorsivo) ------------------------------------------- */
+.ol-obj { display: flex; flex-direction: column; gap: var(--ak-gap); }
+.ol-list {
+  border: 1px dashed var(--ak-line); border-radius: var(--ak-radius);
+  padding: 10px; margin: 0; display: flex; flex-direction: column; gap: 10px;
+}
+.ol-item {
+  border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+  padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--ak-bg);
+}
+.ol-item-bar { display: flex; align-items: center; gap: 4px; }
+
+/* ---- Anteprima locale (pannello di Regia) ------------------------------------------- */
+.rg { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
+.rg-top {
+  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+.rg-name { font: 600 var(--ak-fs-small)/1.3 var(--ak-font); }
+.rg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ak-ink-quiet); flex: none; }
+.rg-dot-running { background: #3faa72; }
+.rg-dot-starting { background: #c08a2a; }
+.rg-dot-crashed, .rg-dot-failed { background: #b34a3f; }
+.rg-lan {
+  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
+  padding: 10px 12px; border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+.rg-lan-urls { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.rg-qr { flex: none; width: 128px; height: 128px; border-radius: 4px; }
+
+/* ---- Il campo di prosa (testo formattato) ----------------------------------------------
+   Un `contenteditable`, non una textarea: chi usa il pannello vede il grassetto in grassetto e
+   i link come link, mai gli asterischi. Vedi form/prose/ProseField.tsx.
+
+   Il carattere è quello del testo, NON `--ak-font-mono`: `.ak-textarea` lo imposta a spaziatura
+   fissa perché lì dentro c'era markdown da leggere carattere per carattere, e qui invece si
+   guarda un testo. Va sovrascritto, altrimenti una biografia sembra un file di configurazione.
+   ---------------------------------------------------------------------------------------- */
+.ak-prose-field {
+  font-family: var(--ak-font); white-space: pre-wrap; overflow-wrap: break-word;
+  cursor: text; resize: none; height: auto;
+}
+.ak-prose-field:focus { outline: 0; box-shadow: var(--ak-ring); }
+.ak-prose-field p { margin: 0; }
+.ak-prose-field p + p { margin-top: .85em; }
+.ak-prose-field strong { font-weight: 650; }
+/* I collegamenti si vedono che lo sono: è metà del senso di mostrare il testo formattato. */
+.ak-prose-field a { color: var(--ak-accent); text-decoration: underline; text-underline-offset: 2px; }
+/* Il segnaposto: un campo vuoto contiene comunque un `<p><br></p>`, quindi `:empty` non
+   scatterebbe mai — lo stato «vuoto» lo dichiara il componente, che conosce il valore. */
+.ak-prose-field.is-empty::before {
+  content: attr(data-placeholder); display: block; white-space: pre-wrap;
+  color: color-mix(in srgb, var(--ak-ink-quiet) 75%, transparent); pointer-events: none;
+}
+
+/* ---- La barra di formattazione sopra la selezione -------------------------------------
+   Appartiene alla PAGINA e non al campo: è disegnata in un portal su `document.body` e
+   posizionata con `position: fixed` da `ProseArea`, che sa dov'è la selezione. Dentro il campo
+   sarebbe prigioniera del suo `overflow`. Vedi form/prose/ProseBar.tsx.
+
+   `--ak-prose-bar-h` è dichiarata qui e LETTA DAL CODICE (la costante `BAR_H`): serve a
+   decidere se la barra ci sta sopra la selezione prima di disegnarla, e misurarla davvero
+   vorrebbe dire un salto visibile a ogni selezione. Se cambia l'altezza, cambia là. --------- */
+.ak-prose-bar {
+  --ak-prose-bar-h: 40px;
+  position: fixed; z-index: 60; height: var(--ak-prose-bar-h);
+  display: flex; align-items: center; gap: 2px; padding: 0 6px;
+  border-radius: 10px; background: var(--ak-panel); box-shadow: var(--ak-lift-3);
+  /* Il testo sotto si continua a selezionare col mouse: la barra non intercetta i movimenti
+     del puntatore fuori dai suoi bottoni. */
+  pointer-events: auto;
+}
+.ak-prose-btn {
+  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
+  border: 0; border-radius: 7px; background: transparent; color: var(--ak-ink);
+  cursor: pointer; font: 500 13px/1 var(--ak-font);
+}
+.ak-prose-btn:hover { background: var(--ak-inset); }
+.ak-prose-btn:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+.ak-prose-btn.is-bold { font-weight: 700; }
+.ak-prose-btn.is-italic { font-style: italic; font-family: Georgia, serif; }
+/* Il link acceso quando la selezione è già dentro un collegamento: è la sola cosa che
+   distingue «aggiungi» da «modifica» prima di aprire il dialogo. */
+.ak-prose-btn.is-on { color: var(--ak-accent); }
+.ak-prose-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ak-line); }
+
+/* Il dialogo del collegamento. Non riusa `.pe-modal` del pannello: quello vive in app.css, che
+   adminkit non conosce — il motore non può dipendere dal foglio di chi lo monta. */
+.ak-prose-modal {
+  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
+  background: rgba(0, 0, 0, .35); padding: 20px;
+}
+.ak-prose-card {
+  width: min(460px, 100%); border-radius: 14px; background: var(--ak-panel);
+  box-shadow: var(--ak-lift-3); overflow: hidden;
+}
+.ak-prose-card header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 18px 12px;
+}
+.ak-prose-card h2 { margin: 0; font: 600 15px/1.2 var(--ak-font); }
+.ak-prose-card header button {
+  border: 0; background: transparent; color: var(--ak-ink-quiet); cursor: pointer;
+  font-size: 20px; line-height: 1; padding: 0 4px;
+}
+/* Le tre schede in una vaschetta incassata: è una scelta fra tre, non tre bottoni. Stessa
+   grammatica di `.seg` nel pannello. */
+.ak-prose-tabs {
+  display: flex; gap: 2px; margin: 0 18px; padding: 2px;
+  border-radius: 9px; background: var(--ak-inset-deep, var(--ak-inset));
+}
+.ak-prose-tab {
+  flex: 1; height: 30px; border: 0; border-radius: 7px; background: transparent;
+  color: var(--ak-ink-quiet); cursor: pointer; font: 500 12px/1 var(--ak-font);
+}
+.ak-prose-tab:hover { color: var(--ak-ink); }
+.ak-prose-tab.is-on { background: var(--ak-panel); color: var(--ak-ink); box-shadow: var(--ak-lift-1); }
+.ak-prose-body { padding: 16px 18px 4px; }
+.ak-prose-body .ak-input { width: 100%; }
+.ak-prose-card footer {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 18px 18px;
+}
+.ak-prose-card footer > div { display: flex; gap: 8px; margin-left: auto; }
+.ak-prose-unlink {
+  border: 0; background: transparent; color: var(--ak-danger); cursor: pointer;
+  font: 500 12px/1 var(--ak-font); padding: 6px 2px;
+}
+.ak-prose-unlink:hover { text-decoration: underline; }

package/dist/yaml.d.ts

@@ -0,0 +1,8 @@
+export declare class YamlEmitError extends Error {
+    constructor(message: string);
+}
+/** Stringa YAML fra doppi apici, sicura su una riga sola. */
+export declare function yamlStr(value: unknown): string;
+/** Scalare non quotato dove è sicuro (numeri, booleani), quotato altrimenti. */
+export declare function yamlScalar(value: unknown): string;
+export declare function toYamlLines(value: unknown, indent?: number, maxDepth?: number): string[];