${esc(titolo)} · Desk Mercati

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_105":106,"_107":108},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","Checco27","name","desk-api","path","stile.ts","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/Checco27/desk-api/code/stile.ts","extension","id","37863bce-7afe-4610-bea6-13a0eec91e58","fileId","9ec1a24c-ade2-11f1-baa1-1607ee4eb77e","parentId","branchId","5e3db326-f6b3-4bc5-a5cd-b244c32f6cbf","branchVersion",127,"latest",true,"createdAt",["D",1789132433139],"version",2,"fileType","script","content","/* =====================================================================\n * STILE — sistema visivo di Desk Mercati\n * ---------------------------------------------------------------\n * Token e guscio condivisi da tutte le pagine. Ogni modulo importa\n * `guscio()` e passa solo il contenuto: barra laterale, barra\n * superiore, piè di pagina e responsive stanno qui una volta sola.\n *\n * Tre vincoli del progetto, tutti rispettati qui dentro:\n * niente JavaScript (le pagine sono generate dal server e servite\n * statiche), caratteri da Google Fonts caricati con , e la\n * barra laterale che a larghezza iPhone diventa una barra inferiore.\n * ===================================================================== */\n\nexport const esc = (s: unknown) =>\n String(s ?? \"\")\n .replace(/&/g, \"&\").replace(//g, \">\");\n\nexport const num = (x: any, d = 2) =>\n x === null || x === undefined || !isFinite(Number(x))\n ? \"—\"\n : Number(x).toFixed(d).replace(\".\", \",\");\n\nexport const pct = (x: any, d = 1, segno = false) =>\n x === null || x === undefined || !isFinite(Number(x))\n ? \"—\"\n : (segno && x >= 0 ? \"+\" : \"\") +\n (Number(x) * 100).toFixed(d).replace(\".\", \",\") + \"%\";\n\nexport const segno = (x: any) => (x > 0 ? \"su\" : x < 0 ? \"giu\" : \"\");\n\n/* ------------------------------ token ----------------------------- */\n\nexport const TOKEN = `\n:root{\n --fondo:#08090b; --pannello:#0a0c0e; --traccia:#0b0d10;\n --hover:#101317; --attiva:#13161a; --vuota:#14181c; --chip:#1b1f24;\n --div:#171b20; --bordo:#1c2127; --sep:#20252b; --bordoBtn:#262c33;\n --pollice:#22272e; --polliceHover:#2f353d; --bordoAttivo:#333a42;\n --t1:#f2f4f7; --t2:#e6e9ed; --t3:#9aa2ab; --nav:#8b939d;\n --crumb:#7d858f; --label:#6b737d; --meta:#5c646e; --min:#4a525b;\n --blu:#58a6ff; --bluHover:#8cc2ff; --sel:#1f3b5c;\n --verde:#3fb950; --giallo:#d29922; --rosso:#f85149;\n --lat:214px; --top:44px;\n}`;\n\n/* ------------------------------ base ------------------------------ */\n\nconst BASE = `\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:var(--fondo);color:var(--t2);font-size:13px;line-height:1.5;\nfont-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;\n-webkit-font-smoothing:antialiased}\n.mn{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}\na{color:var(--blu);text-decoration:none}\na:hover{color:var(--bluHover)}\n:focus-visible{outline:1px solid var(--blu);outline-offset:1px}\n::-webkit-scrollbar{width:10px;height:10px}\n::-webkit-scrollbar-track{background:var(--traccia)}\n::-webkit-scrollbar-thumb{background:var(--pollice)}\n::-webkit-scrollbar-thumb:hover{background:var(--polliceHover)}\n\n/* --- barra laterale --- */\n.lat{position:fixed;top:0;left:0;bottom:0;width:var(--lat);background:var(--pannello);\nborder-right:1px solid var(--div);display:flex;flex-direction:column;z-index:20}\n.marchio{padding:16px 18px 10px}\n.marchio b{font-size:14px;font-weight:700;letter-spacing:.10em;color:var(--t1);display:block}\n.marchio span{font-size:9.5px;letter-spacing:.14em;color:var(--meta);display:block;margin-top:3px}\n.voci{flex:1;padding-top:8px;overflow-y:auto}\n.voce{display:flex;align-items:center;gap:10px;padding:7px 18px;color:var(--nav);\nfont-size:10.5px;letter-spacing:.12em;border-left:2px solid transparent}\n.voce i{color:var(--min);font-style:normal;font-size:9.5px}\n.voce:hover{background:var(--hover);color:var(--t2)}\n.voce.on{background:var(--attiva);color:var(--t1);border-left-color:var(--blu)}\n.piede{border-top:1px solid var(--div);padding:10px 18px 12px;font-size:9px;\nletter-spacing:.10em;color:var(--min)}\n.piede .rig{display:flex;justify-content:space-between;margin-bottom:4px}\n.dot{width:5px;height:5px;border-radius:50%;background:var(--verde);display:inline-block;\nmargin-right:6px;animation:dmblink 2.4s ease-in-out infinite}\n@keyframes dmblink{0%,100%{opacity:1}50%{opacity:.35}}\n.quota{height:2px;background:var(--vuota);margin:5px 0 4px}\n.quota i{display:block;height:100%;background:var(--giallo)}\n\n/* --- barra superiore --- */\n.top{position:fixed;top:0;left:var(--lat);right:0;height:var(--top);background:var(--pannello);\nborder-bottom:1px solid var(--div);display:flex;align-items:center;gap:16px;\npadding:0 16px;z-index:19;overflow-x:auto;white-space:nowrap}\n.crumb{font-size:9.5px;letter-spacing:.14em;color:var(--crumb)}\n.tick{font-size:9.5px;letter-spacing:.06em;color:var(--label)}\n.tick b{color:var(--t2);font-weight:500;margin-left:5px}\n.su{color:var(--verde)}.giu{color:var(--rosso)}\n\n/* --- area --- */\n.area{margin-left:var(--lat);padding:calc(var(--top) + 22px) 22px 60px;max-width:1180px;\nanimation:dmfade .18s ease-out}\n@keyframes dmfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\nh1{font-size:26px;font-weight:600;letter-spacing:.01em;color:var(--t1)}\n.sotto{font-size:12px;color:var(--crumb);margin-top:3px}\n\n/* --- pannelli --- */\n.pan{border:1px solid var(--bordo);margin-bottom:12px}\n.pan>h2{font-size:9.5px;font-weight:500;letter-spacing:.16em;color:var(--label);\npadding:9px 14px;border-bottom:1px solid var(--bordo);\nfont-family:'IBM Plex Mono',monospace;display:flex;justify-content:space-between;gap:12px}\n.pan>.cnt{padding:14px}\n.griglia{display:grid;gap:12px}\n.g2{grid-template-columns:1fr 1fr}\n.g3{grid-template-columns:repeat(3,1fr)}\n.g13{grid-template-columns:1.3fr 1fr}\n\n/* --- numeri in evidenza --- */\n.cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bordo);\nborder:1px solid var(--bordo);margin-bottom:14px}\n.cif{background:var(--fondo);padding:12px 14px}\n.cif .et{font-size:9px;letter-spacing:.16em;color:var(--label);font-family:'IBM Plex Mono',monospace}\n.cif .vl{font-size:30px;font-weight:600;line-height:1.1;margin-top:4px}\n.cif .vl small{font-size:11px;color:var(--meta);font-weight:400}\n.cif .dl{font-size:9px;letter-spacing:.10em;color:var(--meta);margin-top:6px;\nfont-family:'IBM Plex Mono',monospace;border-top:1px solid var(--div);padding-top:5px}\n\n/* --- tabelle --- */\ntable{width:100%;border-collapse:collapse}\nth{font-size:9px;letter-spacing:.16em;color:var(--label);font-weight:400;text-align:right;\npadding:8px 10px;border-bottom:1px solid var(--bordo);font-family:'IBM Plex Mono',monospace}\nth:first-child{text-align:left}\ntd{padding:10px;border-bottom:1px solid var(--div);text-align:right;font-size:12.5px}\ntd:first-child{text-align:left}\ntr:last-child td{border-bottom:none}\ntbody tr:hover{background:var(--hover)}\n.tk{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--t1);font-size:13px}\n.nm{font-size:10.5px;color:var(--meta);display:block;margin-top:1px}\n\n/* --- barre --- */\n.bar{height:3px;background:var(--vuota);position:relative;display:block;min-width:40px}\n.bar i{display:block;height:100%}\n.b-alto{background:var(--verde)}.b-medio{background:var(--blu)}\n.b-basso{background:var(--bordoAttivo)}.b-neg{background:var(--rosso)}\n\n/* --- etichette --- */\n.tag{font-size:9px;letter-spacing:.12em;padding:2px 6px;border:1px solid currentColor;\nfont-family:'IBM Plex Mono',monospace;white-space:nowrap}\n.t-fatto{color:var(--verde)}.t-stima{color:var(--blu)}\n.t-ass{color:var(--giallo)}.t-ia{color:#a371f7}\n\n/* --- prosa --- */\np+p{margin-top:9px}\n.testo{font-size:12.5px;line-height:1.65;color:var(--t2);max-width:74ch}\n.fioco{color:var(--crumb)}\nul{list-style:none}\nli{padding:7px 0;border-bottom:1px solid var(--div);font-size:12.5px}\nli:last-child{border-bottom:none}\n\n/* --- form --- */\ninput{background:var(--fondo);border:1px solid var(--bordoBtn);color:var(--t2);\npadding:9px 11px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;width:100%}\ninput:focus{outline:none;border-color:var(--blu)}\nbutton{background:var(--chip);border:1px solid var(--bordoBtn);color:var(--t2);\npadding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.10em;\ncursor:pointer}\nbutton:hover{border-color:var(--bordoAttivo);color:var(--t1)}\nform{display:flex;gap:8px}\n\n/* --- iPhone: la laterale diventa barra inferiore --- */\n@media(max-width:760px){\n .lat{top:auto;width:100%;height:56px;flex-direction:row;border-right:none;\n border-top:1px solid var(--div);padding-bottom:env(safe-area-inset-bottom)}\n .marchio,.piede{display:none}\n .voci{display:flex;padding:0;overflow-x:auto}\n .voce{flex:1;flex-direction:column;gap:3px;justify-content:center;padding:8px 4px;\n border-left:none;border-top:2px solid transparent;font-size:8.5px;letter-spacing:.08em}\n .voce.on{border-left:none;border-top-color:var(--blu)}\n .voce i{display:none}\n .top{left:0;padding:0 12px}\n .area{margin-left:0;padding:calc(var(--top) + 16px) 14px 80px}\n h1{font-size:21px}\n .g2,.g3,.g13{grid-template-columns:1fr}\n .cifre{grid-template-columns:1fr 1fr}\n .cifre .cif:last-child{grid-column:1/-1}\n .pan>.cnt{padding:12px}\n td,th{padding:8px 6px;font-size:11.5px}\n}`;\n\n/* ----------------------------- guscio ----------------------------- */\n\nexport const NAV = [\n { id: \"panoramica\", n: \"01\", et: \"PANORAMICA\", href: \"/brief\" },\n { id: \"opportunita\", n: \"02\", et: \"OPPORTUNITÀ\", href: \"/radar\" },\n { id: \"ricerca\", n: \"03\", et: \"RICERCA TITOLI\", href: \"/\" },\n { id: \"macro\", n: \"04\", et: \"MACRO\", href: \"/macro\" },\n { id: \"notizie\", n: \"05\", et: \"NOTIZIE\", href: \"/notizie\" },\n];\n\nexport type Meta = {\n crumb?: string;\n indici?: { et: string; valore: string; var: number }[];\n quota?: { usati: number; totale: number; etichetta: string };\n aggiornato?: string;\n};\n\nexport function guscio(\n titolo: string,\n attivo: string,\n contenuto: string,\n meta: Meta = {},\n) {\n const indici = (meta.indici ?? []).map((i) =>\n `${esc(i.et)}${esc(i.valore)}\n ${i.var >= 0 ? \"+\" : \"\"}${\n num(i.var, 2)\n }%`\n ).join(\"\");\n\n const q = meta.quota;\n const pieno = q && q.totale ? Math.min(100, (q.usati / q.totale) * 100) : 0;\n\n return `\n\n\n\n\n\n\n${esc(titolo)} · Desk Mercati\n\n\n\n\n\n\n\n

\n DESK MERCATI / ${\n esc(meta.crumb ?? titolo.toUpperCase())\n }\n ${indici}\n

\n\n

${contenuto}

\n`;\n}\n\n/* --------------------------- componenti --------------------------- */\n\nexport const pannello = (et: string, cnt: string, destra = \"\") =>\n `

${esc(et)}${\n destra ? `${destra}` : \"\"\n }

${cnt}

`;\n\nexport const pannelloNudo = (et: string, cnt: string, destra = \"\") =>\n `

${esc(et)}${\n destra ? `${destra}` : \"\"\n }

${cnt}

`;\n\nexport const cifra = (et: string, vl: string, dl = \"\", colore = \"\") =>\n `

${esc(et)}

${vl}

\n ${dl ? `

${dl}

` : \"\"}

`;\n\nexport const barra = (perc: number, classe = \"b-medio\") =>\n ``;\n\n/** Colore di una barra secondo la scala 0-100 usata dai punteggi. */\nexport const classePunteggio = (v: number | null) =>\n v === null || v === undefined\n ? \"b-basso\"\n : v >= 70\n ? \"b-alto\"\n : v >= 45\n ? \"b-medio\"\n : \"b-basso\";","deleted",false,"label",[14],"d095f470-1674-4a4d-9ace-b88544e253d1",["D",1788877625254],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","4f82c29c-9334-4b68-869b-01f1e3424455","pinnedFileId","69636a3e-ab91-11f1-a1a4-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a08168-2ad6-7239-bb3f-de6b9862c6c1","tursoName","d095f47016744a4d9aceb88544e253d1","tursoHostname","d095f47016744a4d9aceb88544e253d1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789485645684],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_104":53},"org",{"_9":10,"_99":53,"_100":53,"_55":56,"_101":102,"_103":42},"branch",{"_35":89,"_11":90,"_22":28,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",134,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_138":139,"_140":141,"_142":143,"_144":42,"_145":42,"_146":42,"_147":32,"_148":-5,"_149":-7,"_150":-7,"_151":63,"_152":42,"_153":42,"_154":-5,"_155":42,"_156":42,"_157":42,"_158":-5},"ENV",{"_109":110,"_111":112,"_113":90,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]