@bendyline/squisq 2.5.0 → 2.7.0
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/dist/{chunk-NNL3HHKA.js → chunk-KOU5WRVN.js} +50 -12
- package/dist/chunk-PGI7HSWE.js +8 -0
- package/dist/doc/index.d.ts +3 -3
- package/dist/doc/index.js +1 -1
- package/dist/fence/index.d.ts +74 -0
- package/dist/fence/index.js +6 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +5 -1
- package/dist/{materializePageSection-DgOFYge7.d.ts → materializePageSection-Rss5thAj.d.ts} +10 -0
- package/dist/transform/index.d.ts +1 -1
- package/package.json +6 -1
|
@@ -1149,6 +1149,13 @@ var PANEL_KINDS = /* @__PURE__ */ new Set([
|
|
|
1149
1149
|
function isMermaidFence(node) {
|
|
1150
1150
|
return node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid";
|
|
1151
1151
|
}
|
|
1152
|
+
function isWidgetFence(node, widgetFenceLangs) {
|
|
1153
|
+
if (isMermaidFence(node)) return true;
|
|
1154
|
+
if (!widgetFenceLangs || widgetFenceLangs.length === 0) return false;
|
|
1155
|
+
if (node.type !== "code") return false;
|
|
1156
|
+
const lang = node.lang?.trim().toLowerCase();
|
|
1157
|
+
return !!lang && widgetFenceLangs.includes(lang);
|
|
1158
|
+
}
|
|
1152
1159
|
function htmlTreeContainsMedia(nodes) {
|
|
1153
1160
|
for (const value of nodes) {
|
|
1154
1161
|
if (!value || typeof value !== "object") continue;
|
|
@@ -1169,11 +1176,11 @@ function markdownNodeContainsMedia(value) {
|
|
|
1169
1176
|
}
|
|
1170
1177
|
return Array.isArray(node.children) && node.children.some(markdownNodeContainsMedia);
|
|
1171
1178
|
}
|
|
1172
|
-
function unconsumedRichContent(block, draft) {
|
|
1179
|
+
function unconsumedRichContent(block, draft, widgetFenceLangs) {
|
|
1173
1180
|
if (!block.contents || block.contents.length === 0) return void 0;
|
|
1174
1181
|
const templateHasMedia = Boolean(draft.slots.media) || Boolean(draft.slots.items?.some((item) => item.media !== void 0));
|
|
1175
1182
|
const markdown = block.contents.filter(
|
|
1176
|
-
(node) =>
|
|
1183
|
+
(node) => isWidgetFence(node, widgetFenceLangs) || !templateHasMedia && markdownNodeContainsMedia(node)
|
|
1177
1184
|
);
|
|
1178
1185
|
if (markdown.length === 0) return void 0;
|
|
1179
1186
|
return {
|
|
@@ -1181,18 +1188,22 @@ function unconsumedRichContent(block, draft) {
|
|
|
1181
1188
|
markdown
|
|
1182
1189
|
};
|
|
1183
1190
|
}
|
|
1184
|
-
function preserveRichContent(block, draft) {
|
|
1185
|
-
const richContent = unconsumedRichContent(block, draft);
|
|
1191
|
+
function preserveRichContent(block, draft, widgetFenceLangs) {
|
|
1192
|
+
const richContent = unconsumedRichContent(block, draft, widgetFenceLangs);
|
|
1186
1193
|
return richContent ? { ...draft, slots: { ...draft.slots, richContent } } : draft;
|
|
1187
1194
|
}
|
|
1188
|
-
function draftForBlock(block, viewport, customTemplates) {
|
|
1195
|
+
function draftForBlock(block, viewport, customTemplates, widgetFenceLangs) {
|
|
1189
1196
|
if (isTemplatedPageBlock(block)) {
|
|
1190
1197
|
const resolved = resolvePageBlock(block);
|
|
1191
1198
|
const templateName = resolved.templateName;
|
|
1192
1199
|
const extractor = sectionExtractors[templateName];
|
|
1193
1200
|
if (extractor) {
|
|
1194
1201
|
return {
|
|
1195
|
-
draft: preserveRichContent(
|
|
1202
|
+
draft: preserveRichContent(
|
|
1203
|
+
block,
|
|
1204
|
+
extractor(resolved.templateBlock, { block, viewport }),
|
|
1205
|
+
widgetFenceLangs
|
|
1206
|
+
),
|
|
1196
1207
|
source: "template",
|
|
1197
1208
|
templateName
|
|
1198
1209
|
};
|
|
@@ -1215,7 +1226,7 @@ function draftForBlock(block, viewport, customTemplates) {
|
|
|
1215
1226
|
}
|
|
1216
1227
|
};
|
|
1217
1228
|
return {
|
|
1218
|
-
draft: preserveRichContent(block, draft2),
|
|
1229
|
+
draft: preserveRichContent(block, draft2, widgetFenceLangs),
|
|
1219
1230
|
source: "custom-template",
|
|
1220
1231
|
templateName
|
|
1221
1232
|
};
|
|
@@ -1237,7 +1248,7 @@ function draftForBlock(block, viewport, customTemplates) {
|
|
|
1237
1248
|
emphasis: "quiet"
|
|
1238
1249
|
};
|
|
1239
1250
|
return {
|
|
1240
|
-
draft: preserveRichContent(block, draft),
|
|
1251
|
+
draft: preserveRichContent(block, draft, widgetFenceLangs),
|
|
1241
1252
|
source: "fallback",
|
|
1242
1253
|
templateName,
|
|
1243
1254
|
diagnostic
|
|
@@ -1257,7 +1268,7 @@ function draftForBlock(block, viewport, customTemplates) {
|
|
|
1257
1268
|
}
|
|
1258
1269
|
};
|
|
1259
1270
|
return {
|
|
1260
|
-
draft: preserveRichContent(block, draft),
|
|
1271
|
+
draft: preserveRichContent(block, draft, widgetFenceLangs),
|
|
1261
1272
|
source: "authored"
|
|
1262
1273
|
};
|
|
1263
1274
|
}
|
|
@@ -1319,7 +1330,7 @@ function materializePageSection(block, options = {}) {
|
|
|
1319
1330
|
const theme = options.theme ?? DEFAULT_THEME;
|
|
1320
1331
|
const viewport = options.viewport ?? VIEWPORT_PRESETS.landscape;
|
|
1321
1332
|
const pageStyle = resolvePageStyle(theme);
|
|
1322
|
-
const result = draftForBlock(block, viewport, options.customTemplates);
|
|
1333
|
+
const result = draftForBlock(block, viewport, options.customTemplates, options.widgetFenceLangs);
|
|
1323
1334
|
const override = overrideFor(pageStyle, result.draft.kind, result.templateName);
|
|
1324
1335
|
const background = override?.background ?? (result.draft.mediaBackground ? "media" : "base");
|
|
1325
1336
|
const emphasis = override?.emphasis ?? result.draft.emphasis ?? "standard";
|
|
@@ -1375,7 +1386,7 @@ function materializePageSections(doc, options = {}) {
|
|
|
1375
1386
|
}
|
|
1376
1387
|
const walk = (blocks, depth) => {
|
|
1377
1388
|
for (const block of blocks) {
|
|
1378
|
-
const result = draftForBlock(block, viewport, customTemplates);
|
|
1389
|
+
const result = draftForBlock(block, viewport, customTemplates, options.widgetFenceLangs);
|
|
1379
1390
|
seeds.push({ ...result, block, depth });
|
|
1380
1391
|
const consumed = result.draft.kind === "canvas-embed" && isContainerTemplate(result.templateName);
|
|
1381
1392
|
if (!consumed && block.children && block.children.length > 0) {
|
|
@@ -1574,6 +1585,10 @@ var PAGE_BASE_CSS = `
|
|
|
1574
1585
|
}
|
|
1575
1586
|
.squisq-page *, .squisq-page *::before, .squisq-page *::after { box-sizing: border-box; }
|
|
1576
1587
|
.squisq-page img { max-width: 100%; height: auto; }
|
|
1588
|
+
.squisq-page a {
|
|
1589
|
+
color: var(--squisq-page-primary);
|
|
1590
|
+
text-decoration-color: color-mix(in srgb, var(--squisq-page-primary) 40%, transparent);
|
|
1591
|
+
}
|
|
1577
1592
|
|
|
1578
1593
|
/* Page pattern washes (very low intensity) */
|
|
1579
1594
|
.squisq-page[data-pattern='dots'] {
|
|
@@ -1993,11 +2008,34 @@ var PAGE_BASE_CSS = `
|
|
|
1993
2008
|
.squisq-page-prose p { margin: 0; }
|
|
1994
2009
|
.squisq-page-prose p + p { margin-top: 1.25em; }
|
|
1995
2010
|
.squisq-page-prose > * + * { margin-top: 1.1em; }
|
|
1996
|
-
.squisq-page-prose a { color: var(--squisq-page-primary); text-decoration-color: color-mix(in srgb, var(--squisq-page-primary) 40%, transparent); }
|
|
1997
2011
|
.squisq-page-prose code { font-family: var(--squisq-page-mono-font); font-size: 0.9em; }
|
|
1998
2012
|
.squisq-page-prose :not(pre) > code { background: color-mix(in srgb, var(--squisq-page-text) 8%, transparent); border-radius: 4px; padding: 0.12em 0.35em; }
|
|
1999
2013
|
.squisq-page-prose pre { background: color-mix(in srgb, var(--squisq-page-text) 6%, transparent); border-radius: var(--squisq-page-radius); padding: 1em 1.25em; overflow-x: auto; }
|
|
2000
2014
|
.squisq-page-prose pre code { background: none; border-radius: 0; padding: 0; }
|
|
2015
|
+
.squisq-page .squisq-md-code-frame { position: relative; margin: 1em 0; }
|
|
2016
|
+
.squisq-page .squisq-md-code-frame > pre { margin: 0; padding-right: 5rem; }
|
|
2017
|
+
.squisq-page .squisq-md-code-copy {
|
|
2018
|
+
position: absolute;
|
|
2019
|
+
z-index: 1;
|
|
2020
|
+
top: 0.55rem;
|
|
2021
|
+
right: 0.55rem;
|
|
2022
|
+
min-width: 3.7rem;
|
|
2023
|
+
padding: 0.28rem 0.5rem;
|
|
2024
|
+
border: 1px solid color-mix(in srgb, var(--squisq-page-text) 20%, transparent);
|
|
2025
|
+
border-radius: 5px;
|
|
2026
|
+
background: color-mix(in srgb, var(--squisq-page-bg) 90%, transparent);
|
|
2027
|
+
color: inherit;
|
|
2028
|
+
font: 500 0.72rem/1.2 system-ui, sans-serif;
|
|
2029
|
+
cursor: pointer;
|
|
2030
|
+
opacity: 0.58;
|
|
2031
|
+
transition: opacity 120ms ease, background-color 120ms ease;
|
|
2032
|
+
}
|
|
2033
|
+
.squisq-page .squisq-md-code-frame:hover > .squisq-md-code-copy,
|
|
2034
|
+
.squisq-page .squisq-md-code-copy:focus-visible,
|
|
2035
|
+
.squisq-page .squisq-md-code-copy[data-copy-state='copied'],
|
|
2036
|
+
.squisq-page .squisq-md-code-copy[data-copy-state='failed'] { opacity: 1; }
|
|
2037
|
+
.squisq-page .squisq-md-code-copy:hover { background: var(--squisq-page-bg); }
|
|
2038
|
+
.squisq-page .squisq-md-code-copy:disabled { cursor: wait; }
|
|
2001
2039
|
.squisq-page-prose blockquote { margin: 0; border-left: 4px solid var(--squisq-page-accent); padding-left: 1.25em; color: var(--squisq-page-text-muted); }
|
|
2002
2040
|
.squisq-page-prose ul, .squisq-page-prose ol { padding-left: 1.5em; margin: 0; }
|
|
2003
2041
|
.squisq-page-prose li + li { margin-top: 0.4em; }
|
package/dist/doc/index.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { bb as TemplateBlock, bc as TemplateContext, a3 as Layer, w as CustomTem
|
|
|
2
2
|
export { T as FRONTMATTER_CUSTOM_TEMPLATES_KEY, U as FRONTMATTER_CUSTOM_THEMES_KEY, a5 as LayoutHints, aY as RenderStyle, bi as ThemeColorPalette, bo as ThemeStyle, bp as ThemeTypography, bC as VIEWPORT_PRESETS, bN as ViewportPreset, bS as createTemplateContext, bZ as getLayoutHints, c0 as getTwoColumnPositions, c1 as getViewport, c2 as getViewportOrientation, c5 as isTemplateBlock, c8 as scaledFontSize } from '../Doc-DBadkoP4.js';
|
|
3
3
|
import { L as MarkdownNode, a3 as TransitionType, a2 as TransitionDirection, M as MarkdownBlockNode, r as MarkdownHeading, n as MarkdownDocument, T as MarkdownTable, i as MarkdownCodeBlock, G as MarkdownList } from '../types-CcrDFdWH.js';
|
|
4
4
|
import { C as CoercedBlockMeta } from '../annotationCoercion-CPHEggo3.js';
|
|
5
|
-
import { c as PageSection } from '../materializePageSection-
|
|
6
|
-
export { M as MaterializePageSectionOptions, a as MaterializePageSectionsOptions, P as PageMedia, b as PageRichText, d as PageSectionDiagnostic, e as PageSectionItem, f as PageSectionMaterialization, g as PageSectionSource, h as PageSpatialKind, i as PageTransformHints, m as materializePageSection, j as materializePageSections, r as resolvePageStyle } from '../materializePageSection-
|
|
5
|
+
import { c as PageSection } from '../materializePageSection-Rss5thAj.js';
|
|
6
|
+
export { M as MaterializePageSectionOptions, a as MaterializePageSectionsOptions, P as PageMedia, b as PageRichText, d as PageSectionDiagnostic, e as PageSectionItem, f as PageSectionMaterialization, g as PageSectionSource, h as PageSpatialKind, i as PageTransformHints, m as materializePageSection, j as materializePageSections, r as resolvePageStyle } from '../materializePageSection-Rss5thAj.js';
|
|
7
7
|
import { C as ContentContainer } from '../ContentContainer-B2w9sUoL.js';
|
|
8
8
|
export { D as DEFAULT_THEME, g as getAvailableThemes, b as getThemeSummaries, r as resolveTheme } from '../themeLibrary-8BQMY2HV.js';
|
|
9
9
|
|
|
@@ -2355,7 +2355,7 @@ declare function pageStyleDataAttributes(pageStyle: ThemePageStyle): Record<stri
|
|
|
2355
2355
|
* Structural, theme-independent stylesheet for the page rendition.
|
|
2356
2356
|
* Everything is scoped under `.squisq-page`.
|
|
2357
2357
|
*/
|
|
2358
|
-
declare const PAGE_BASE_CSS = "\n/* \u2500\u2500 Base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page {\n background: var(--squisq-page-bg);\n color: var(--squisq-page-text);\n font-family: var(--squisq-page-body-font);\n line-height: var(--squisq-page-line-height);\n --squisq-page-divider-color: color-mix(in srgb, var(--squisq-page-text) 16%, transparent);\n --squisq-page-section-pad: 3.5rem;\n --squisq-page-shadow: none;\n}\n.squisq-page *, .squisq-page *::before, .squisq-page *::after { box-sizing: border-box; }\n.squisq-page img { max-width: 100%; height: auto; }\n\n/* Page pattern washes (very low intensity) */\n.squisq-page[data-pattern='dots'] {\n background-image: radial-gradient(color-mix(in srgb, var(--squisq-page-text) 7%, transparent) 1px, transparent 1px);\n background-size: 22px 22px;\n}\n.squisq-page[data-pattern='grid'] {\n background-image:\n linear-gradient(color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px),\n linear-gradient(90deg, color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px);\n background-size: 44px 44px;\n}\n.squisq-page[data-pattern='diagonal'] {\n background-image: repeating-linear-gradient(\n -45deg,\n color-mix(in srgb, var(--squisq-page-text) 4%, transparent) 0 1px,\n transparent 1px 14px\n );\n}\n.squisq-page[data-pattern='noise'] { background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E\"); }\n\n/* Spacing scale */\n.squisq-page[data-spacing='compact'] { --squisq-page-section-pad: 2.25rem; }\n.squisq-page[data-spacing='comfortable'] { --squisq-page-section-pad: 3.5rem; }\n.squisq-page[data-spacing='generous'] { --squisq-page-section-pad: 5.25rem; }\n\n/* Shadow language */\n.squisq-page[data-shadow='soft'] { --squisq-page-shadow: 0 14px 36px color-mix(in srgb, var(--squisq-page-text) 14%, transparent); }\n.squisq-page[data-shadow='crisp'] { --squisq-page-shadow: 0 2px 10px color-mix(in srgb, var(--squisq-page-text) 26%, transparent); }\n.squisq-page[data-shadow='heavy'] { --squisq-page-shadow: 10px 10px 0 color-mix(in srgb, var(--squisq-page-text) 82%, transparent); }\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section { position: relative; padding-block: var(--squisq-page-section-pad); }\n.squisq-page-section-inner {\n max-width: var(--squisq-page-content-max);\n margin-inline: auto;\n padding-inline: 24px;\n}\n/* Backdrops anchor to the section; these content roots stack above them. */\n.squisq-page-hero-body,\n.squisq-page-banner-body,\n.squisq-page-quote-figure { position: relative; }\n.squisq-page-section--feature-split .squisq-page-section-inner,\n.squisq-page-section--gallery .squisq-page-section-inner,\n.squisq-page-section--table-section .squisq-page-section-inner,\n.squisq-page-section--canvas-embed .squisq-page-section-inner,\n.squisq-page-section--stat-band .squisq-page-section-inner,\n.squisq-page-section--card-grid .squisq-page-section-inner,\n.squisq-page-section--media-figure .squisq-page-section-inner,\n.squisq-page-section--hero .squisq-page-section-inner {\n max-width: var(--squisq-page-wide-max);\n}\n\n/* Background rhythm */\n.squisq-page-section--bg-alternate { background: var(--squisq-page-bg-alt); }\n.squisq-page-section--bg-accent {\n background: var(--squisq-page-accent-bg);\n color: var(--squisq-page-accent-text);\n}\n.squisq-page-section--bg-media { color: #ffffff; }\n\n/* Dividers between adjacent sections */\n.squisq-page[data-divider='hairline'] .squisq-page-section + .squisq-page-section { border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page[data-divider='thick-rule'] .squisq-page-section + .squisq-page-section { border-top: 3px solid var(--squisq-page-primary); }\n.squisq-page[data-divider='double-rule'] .squisq-page-section + .squisq-page-section { border-top: 4px double var(--squisq-page-divider-color); }\n.squisq-page[data-divider='dotted'] .squisq-page-section + .squisq-page-section { border-top: 2px dotted var(--squisq-page-divider-color); }\n/* Banded sections carry their own edges; media sections never need rules. */\n.squisq-page .squisq-page-section--bg-media,\n.squisq-page .squisq-page-section--bg-media + .squisq-page-section,\n.squisq-page .squisq-page-section--timeline-rail + .squisq-page-section--timeline-rail { border-top: none; }\n\n/* \u2500\u2500 Headings, eyebrows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section-title {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.15;\n margin: 0 0 0.5em;\n}\n.squisq-page[data-heading-case='uppercase'] .squisq-page-section-title { text-transform: uppercase; letter-spacing: 0.03em; }\n.squisq-page[data-underline='accent-bar'] .squisq-page-section-title::after {\n content: '';\n display: block;\n width: 56px;\n height: 4px;\n margin-top: 0.4em;\n border-radius: 2px;\n background: var(--squisq-page-accent);\n}\n.squisq-page[data-underline='full-rule'] .squisq-page-section-title {\n border-bottom: 1px solid var(--squisq-page-divider-color);\n padding-bottom: 0.35em;\n}\n\n.squisq-page-eyebrow {\n display: block;\n font-size: 0.8125rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--squisq-page-accent);\n margin: 0 0 0.9em;\n}\n.squisq-page[data-eyebrow='numbered'] .squisq-page-eyebrow::after { content: ' \u2014'; color: var(--squisq-page-text-muted); }\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow {\n display: inline-block;\n font-family: var(--squisq-page-mono-font);\n text-transform: none;\n letter-spacing: 0.06em;\n border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 55%, transparent);\n border-radius: var(--squisq-page-radius);\n padding: 0.15em 0.6em;\n background: color-mix(in srgb, var(--squisq-page-accent) 10%, transparent);\n}\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::before { content: '['; opacity: 0.6; }\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::after { content: ']'; opacity: 0.6; }\n\n/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--hero { padding-block: calc(var(--squisq-page-section-pad) * 1.5); }\n.squisq-page-hero-title {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.08;\n margin: 0;\n font-size: 2.75rem;\n}\n.squisq-page[data-heading-scale='display'] .squisq-page-hero-title { font-size: 3.4rem; }\n.squisq-page[data-heading-scale='oversized'] .squisq-page-hero-title { font-size: 4rem; font-size: clamp(3rem, 9cqw, 6rem); line-height: 1.02; }\n.squisq-page[data-heading-case='uppercase'] .squisq-page-hero-title { text-transform: uppercase; letter-spacing: 0.02em; }\n.squisq-page-hero-subtitle {\n margin: 1.1em 0 0;\n font-size: 1.25rem;\n color: var(--squisq-page-text-muted);\n max-width: 42em;\n white-space: pre-line;\n}\n.squisq-page-section--bg-media .squisq-page-hero-subtitle { color: rgba(255, 255, 255, 0.88); }\n\n/* Stacked (default): centered column */\n.squisq-page[data-hero-style='stacked'] .squisq-page-hero-body { text-align: center; }\n.squisq-page[data-hero-style='stacked'] .squisq-page-hero-subtitle { margin-inline: auto; }\n\n/* Oversized type: hard left, no decoration */\n.squisq-page[data-hero-style='oversized-type'] .squisq-page-hero-title { font-size: 4.25rem; font-size: clamp(3.25rem, 10cqw, 6.5rem); line-height: 0.98; }\n\n/* Split: text and media side by side */\n.squisq-page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }\n.squisq-page-hero-grid .squisq-page-hero-media img { width: 100%; object-fit: cover; }\n\n/* Full-bleed & letterbox: media behind text */\n.squisq-page-section--hero-media {\n padding-block: 0;\n min-height: min(72svh, 620px);\n display: flex;\n align-items: flex-end;\n}\n.squisq-page[data-hero-style='letterbox'] .squisq-page-section--hero-media { min-height: min(52svh, 460px); }\n.squisq-page-hero-backdrop { position: absolute; inset: 0; overflow: hidden; }\n.squisq-page-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; }\n.squisq-page-hero-backdrop::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.68) 100%);\n}\n.squisq-page[data-hero-style='letterbox'] .squisq-page-hero-backdrop img { filter: saturate(0.9); }\n.squisq-page-section--hero-media .squisq-page-section-inner { padding-block: 3rem; width: 100%; }\n\n/* \u2500\u2500 Banner (sectionHeader) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-banner-title { font-size: 2rem; }\n.squisq-page[data-heading-scale='display'] .squisq-page-banner-title { font-size: 2.5rem; }\n.squisq-page[data-heading-scale='oversized'] .squisq-page-banner-title { font-size: 3rem; font-size: clamp(2.25rem, 6cqw, 3.75rem); }\n.squisq-page-section--banner.squisq-page-section--bg-media { padding-block: 0; min-height: 280px; display: flex; align-items: flex-end; }\n.squisq-page-section--banner.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 2rem; width: 100%; }\n.squisq-page-section--banner .squisq-page-section-title { margin-bottom: 0; }\n\n/* \u2500\u2500 Stat band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-stats { display: flex; gap: 3rem; justify-content: center; text-align: center; flex-wrap: wrap; }\n.squisq-page-stat { flex: 1 1 220px; max-width: 420px; }\n.squisq-page-stat-value {\n display: block;\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n font-size: 3.25rem;\n line-height: 1;\n color: var(--squisq-page-accent);\n}\n.squisq-page[data-numerals='oversized'] .squisq-page-stat-value { font-size: 4.5rem; font-size: clamp(3.5rem, 8cqw, 5.5rem); }\n.squisq-page[data-numerals='mono'] .squisq-page-stat-value { font-family: var(--squisq-page-mono-font); letter-spacing: -0.02em; }\n.squisq-page[data-numerals='boxed'] .squisq-page-stat-value {\n display: inline-block;\n border: 2px solid var(--squisq-page-accent);\n border-radius: var(--squisq-page-radius);\n padding: 0.18em 0.4em;\n}\n.squisq-page-stat-title { display: block; margin-top: 0.9em; font-size: 1.125rem; font-weight: 600; }\n.squisq-page-stat-body { display: block; margin-top: 0.45em; color: var(--squisq-page-text-muted); font-size: 0.95rem; }\n.squisq-page-stat-meta { text-align: center; margin-top: 1.5rem; color: var(--squisq-page-text-muted); font-size: 0.85rem; }\n.squisq-page-stat-bar { height: 10px; border-radius: 999px; background: var(--squisq-page-accent); margin-top: 0.8em; }\n.squisq-page-stat--bars { text-align: left; }\n\n/* \u2500\u2500 Quote band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-quote {\n margin: 0;\n font-family: var(--squisq-page-title-font);\n font-size: 1.6rem;\n line-height: 1.35;\n white-space: pre-line;\n}\n.squisq-page-section--em-strong .squisq-page-quote { font-size: 2.1rem; }\n.squisq-page-section--em-quiet .squisq-page-quote { font-size: 1.25rem; color: var(--squisq-page-text-muted); }\n.squisq-page-quote-attribution { margin-top: 1.1em; font-family: var(--squisq-page-body-font); font-size: 0.95rem; color: var(--squisq-page-text-muted); }\n.squisq-page-quote-attribution::before { content: '\u2014 '; }\n.squisq-page[data-quote-mark='accent-bar'] .squisq-page-quote-figure { border-left: 4px solid var(--squisq-page-accent); padding-left: 1.5rem; }\n.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure { position: relative; padding-top: 1.25rem; }\n.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure::before {\n content: '\\201C';\n position: absolute;\n top: -0.12em;\n left: -0.05em;\n font-family: var(--squisq-page-title-font);\n font-size: 5.5rem;\n line-height: 1;\n color: color-mix(in srgb, var(--squisq-page-accent) 42%, transparent);\n pointer-events: none;\n}\n.squisq-page-section--v-display .squisq-page-quote-figure { text-align: center; border-left: none; }\n.squisq-page-section--v-display .squisq-page-quote { font-size: 2.4rem; font-size: clamp(1.9rem, 5cqw, 3rem); }\n.squisq-page-section--v-editorial .squisq-page-quote-figure {\n border-block: 3px solid var(--squisq-page-primary);\n border-left: none;\n padding: 2rem 0.5rem;\n}\n/* Full-bleed quote over media */\n.squisq-page-section--quote-band.squisq-page-section--bg-media { padding-block: 0; min-height: 380px; display: flex; align-items: center; }\n.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 3.5rem; }\n.squisq-page-quote-backdrop { position: absolute; inset: 0; overflow: hidden; }\n.squisq-page-quote-backdrop img, .squisq-page-quote-backdrop video { width: 100%; height: 100%; object-fit: cover; }\n.squisq-page-quote-backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }\n.squisq-page-section--quote-band[data-hint-vignette] .squisq-page-quote-backdrop::after {\n background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);\n}\n.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-quote-figure { border: none; text-align: center; }\n\n/* \u2500\u2500 Feature split \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 2; }\n.squisq-page-feature-media img { width: 100%; object-fit: cover; }\n.squisq-page-feature-title { font-size: 1.75rem; }\n.squisq-page-feature-body { color: var(--squisq-page-text-muted); font-size: 1.05rem; white-space: pre-line; margin: 0; }\n\n/* \u2500\u2500 Media figure \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-figure { margin: 0; }\n.squisq-page-figure img, .squisq-page-figure video { width: 100%; display: block; }\n.squisq-page-figure figcaption { margin-top: 0.9em; font-size: 0.9rem; color: var(--squisq-page-text-muted); text-align: center; }\n.squisq-page-media-credit { font-size: 0.78rem; opacity: 0.75; }\n\n/* Media frame treatment (figures, features, gallery tiles, cards) */\n.squisq-page-media-frame { overflow: hidden; }\n.squisq-page[data-framing='rounded'] .squisq-page-media-frame { border-radius: var(--squisq-page-radius); }\n.squisq-page[data-framing='bordered'] .squisq-page-media-frame { border: 3px solid var(--squisq-page-text); }\n.squisq-page[data-framing='polaroid'] .squisq-page-media-frame {\n background: #ffffff;\n padding: 10px 10px 16px;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 2px;\n}\n.squisq-page[data-framing='letterboxed'] .squisq-page-media-frame img { aspect-ratio: 21 / 9; object-fit: cover; }\n.squisq-page[data-framing='circle-accent'] .squisq-page-media-frame { border-radius: calc(var(--squisq-page-radius) * 2); }\n.squisq-page .squisq-page-media-frame { box-shadow: var(--squisq-page-shadow); }\n\n/* Rich body nodes that the selected template did not consume. This universal\n * supplement keeps diagrams/media visible without making every template\n * duplicate the same preservation logic. */\n.squisq-page-rich-content {\n margin-top: clamp(1.5rem, 4vw, 3rem);\n padding-top: clamp(1.25rem, 3vw, 2rem);\n border-top: 1px solid var(--squisq-page-divider-color);\n}\n.squisq-page-rich-content :is(img, video) { display: block; max-width: 100%; height: auto; margin-inline: auto; }\n.squisq-page-rich-content .squisq-md-mermaid { min-height: min(520px, 62vh); margin-block: 0; }\n\n/* \u2500\u2500 Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }\n.squisq-page-gallery .squisq-page-media-frame img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.squisq-page-gallery-caption { margin-top: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--squisq-page-text-muted); }\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-callout {\n border-radius: var(--squisq-page-radius);\n border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 32%, transparent);\n border-left: 5px solid var(--squisq-page-accent);\n background: color-mix(in srgb, var(--squisq-page-accent) 7%, var(--squisq-page-bg));\n padding: 1.75rem 2rem;\n box-shadow: var(--squisq-page-shadow);\n display: flex;\n gap: 1.75rem;\n align-items: flex-start;\n}\n.squisq-page-callout-title { font-family: var(--squisq-page-title-font); font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5em; }\n.squisq-page-callout-body { margin: 0; white-space: pre-line; }\n.squisq-page-callout-meta { margin-top: 0.9em; font-size: 0.82rem; color: var(--squisq-page-text-muted); }\n.squisq-page-callout .squisq-page-media-frame { flex: 0 0 132px; }\n.squisq-page-callout .squisq-page-media-frame img { width: 132px; height: 132px; object-fit: cover; }\n.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame,\n.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame img { border-radius: 50%; }\n.squisq-page-section--v-definition .squisq-page-callout-title { font-style: italic; }\n.squisq-page-section--v-diagnostic .squisq-page-callout { border-left-color: var(--squisq-page-highlight); }\n\n/* \u2500\u2500 Card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }\n.squisq-page-card {\n border-radius: var(--squisq-page-radius);\n background: var(--squisq-page-bg-alt);\n border-top: 4px solid var(--squisq-page-card-accent, var(--squisq-page-accent));\n padding: 1.75rem 1.75rem 1.9rem;\n box-shadow: var(--squisq-page-shadow);\n}\n.squisq-page-card-title { font-family: var(--squisq-page-title-font); font-size: 1.3rem; margin: 0 0 0.4em; }\n.squisq-page-card-body { margin: 0; color: var(--squisq-page-text-muted); white-space: pre-line; }\n.squisq-page-cards-title { text-align: center; font-size: 1.9rem; margin-bottom: 1.75rem; }\n\n/* \u2500\u2500 Item list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-items { list-style: none; margin: 0; padding: 0; counter-reset: squisq-item; max-width: 40em; }\n.squisq-page-items li {\n counter-increment: squisq-item;\n position: relative;\n padding: 0.9em 0 0.9em 3.4em;\n font-size: 1.1rem;\n}\n.squisq-page-items li + li { border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-items li::before {\n content: counter(squisq-item, decimal-leading-zero);\n position: absolute;\n left: 0;\n top: 0.85em;\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n color: var(--squisq-page-accent);\n font-size: 1.15em;\n}\n.squisq-page[data-numerals='mono'] .squisq-page-items li::before { font-family: var(--squisq-page-mono-font); }\n.squisq-page-items-title { font-size: 1.9rem; }\n\n/* \u2500\u2500 Timeline rail (dateEvent) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--timeline-rail { padding-block: 1.4rem; }\n.squisq-page-section--timeline-rail:first-child { padding-top: var(--squisq-page-section-pad); }\n.squisq-page-milestone { display: grid; grid-template-columns: 150px 1fr; gap: 2rem; align-items: baseline; position: relative; }\n.squisq-page-milestone-date {\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n color: var(--squisq-page-accent);\n font-size: 1.05rem;\n text-align: right;\n}\n.squisq-page-milestone-rail {\n position: absolute;\n left: 166px;\n top: -1.4rem;\n bottom: -1.4rem;\n width: 2px;\n background: color-mix(in srgb, var(--squisq-page-accent) 35%, transparent);\n}\n.squisq-page-milestone-rail::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 0.55em;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transform: translateX(-50%);\n background: var(--squisq-page-accent);\n border: 2px solid var(--squisq-page-bg);\n}\n.squisq-page-milestone-body { padding-left: 2.25rem; white-space: pre-line; }\n.squisq-page-milestone-footer { margin-top: 0.5em; font-size: 0.85rem; color: var(--squisq-page-text-muted); }\n\n/* \u2500\u2500 Table section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-table-title { font-size: 1.9rem; }\n.squisq-page-table-scroll { overflow-x: auto; border-radius: var(--squisq-page-radius); box-shadow: var(--squisq-page-shadow); }\n.squisq-page-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }\n.squisq-page-table th {\n background: var(--squisq-page-accent-bg);\n color: var(--squisq-page-accent-text);\n font-family: var(--squisq-page-title-font);\n text-align: left;\n padding: 0.8em 1em;\n}\n.squisq-page-table td { padding: 0.7em 1em; border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--squisq-page-text) 3.5%, transparent); }\n\n/* \u2500\u2500 Canvas embed (spatial SVG) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-canvas {\n width: 100%;\n margin-inline: auto;\n overflow: hidden;\n border-radius: var(--squisq-page-radius);\n}\n.squisq-page-canvas svg { display: block; width: 100%; height: 100%; }\n.squisq-page-canvas--framed { border: 1px solid var(--squisq-page-divider-color); box-shadow: var(--squisq-page-shadow); }\n.squisq-page-canvas--terminal { border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 45%, transparent); }\n.squisq-page-canvas--terminal::before {\n content: '\\25CF \\25CF \\25CF';\n display: block;\n font-size: 9px;\n letter-spacing: 4px;\n padding: 6px 12px;\n color: color-mix(in srgb, var(--squisq-page-accent) 70%, transparent);\n background: color-mix(in srgb, var(--squisq-page-accent) 9%, var(--squisq-page-bg));\n border-bottom: 1px solid color-mix(in srgb, var(--squisq-page-accent) 30%, transparent);\n}\n\n/* \u2500\u2500 Prose \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--prose { padding-block: calc(var(--squisq-page-section-pad) * 0.45); }\n.squisq-page[data-divider] .squisq-page-section--prose + .squisq-page-section--prose { border-top: none; }\n.squisq-page-prose { font-size: 1.05rem; }\n.squisq-page-prose p { margin: 0; }\n.squisq-page-prose p + p { margin-top: 1.25em; }\n.squisq-page-prose > * + * { margin-top: 1.1em; }\n.squisq-page-prose a { color: var(--squisq-page-primary); text-decoration-color: color-mix(in srgb, var(--squisq-page-primary) 40%, transparent); }\n.squisq-page-prose code { font-family: var(--squisq-page-mono-font); font-size: 0.9em; }\n.squisq-page-prose :not(pre) > code { background: color-mix(in srgb, var(--squisq-page-text) 8%, transparent); border-radius: 4px; padding: 0.12em 0.35em; }\n.squisq-page-prose pre { background: color-mix(in srgb, var(--squisq-page-text) 6%, transparent); border-radius: var(--squisq-page-radius); padding: 1em 1.25em; overflow-x: auto; }\n.squisq-page-prose pre code { background: none; border-radius: 0; padding: 0; }\n.squisq-page-prose blockquote { margin: 0; border-left: 4px solid var(--squisq-page-accent); padding-left: 1.25em; color: var(--squisq-page-text-muted); }\n.squisq-page-prose ul, .squisq-page-prose ol { padding-left: 1.5em; margin: 0; }\n.squisq-page-prose li + li { margin-top: 0.4em; }\n.squisq-page-prose hr { border: none; border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-prose table { width: 100%; border-collapse: collapse; }\n.squisq-page-prose th { font-family: var(--squisq-page-title-font); text-align: left; padding: 0.6em 0.8em; border-bottom: 2px solid var(--squisq-page-divider-color); }\n.squisq-page-prose td { padding: 0.55em 0.8em; border-bottom: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-prose img { border-radius: var(--squisq-page-radius); }\n.squisq-page-prose h1, .squisq-page-prose h2, .squisq-page-prose h3,\n.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.2;\n margin: 0 0 0.45em;\n}\n.squisq-page-prose h1 { font-size: 2.1rem; }\n.squisq-page-prose h2 { font-size: 1.65rem; }\n.squisq-page-prose h3 { font-size: 1.35rem; }\n.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 { font-size: 1.15rem; }\n.squisq-page-section--prose[data-hint-drop-cap] .squisq-page-prose > p:first-child::first-letter {\n font-family: var(--squisq-page-title-font);\n font-size: 3.4em;\n font-weight: 700;\n float: left;\n line-height: 0.85;\n padding-right: 0.12em;\n color: var(--squisq-page-accent);\n}\n\n/* \u2500\u2500 Footer band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--footer { text-align: center; }\n\n/* \u2500\u2500 Thin-margin embedding (chat bubbles) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page--thin .squisq-page-section-inner { padding-inline: 0; }\n.squisq-page--thin .squisq-page-section { padding-block: 1.5rem; }\n\n/* Thumbnail image mode */\n.squisq-page--thumbnail-images .squisq-page-prose img,\n.squisq-page--thumbnail-images .squisq-page-figure img { max-width: 100px; max-height: 100px; object-fit: cover; }\n\n/* \u2500\u2500 Reveal animation (progressive enhancement) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (prefers-reduced-motion: no-preference) {\n .squisq-page-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }\n .squisq-page-reveal--in { opacity: 1; transform: none; }\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@container squisq-page (max-width: 720px) {\n\n.squisq-page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n.squisq-page-feature { grid-template-columns: 1fr; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 0; }\n.squisq-page-stats { flex-direction: column; gap: 1.75rem; }\n.squisq-page-cards { grid-template-columns: 1fr; }\n.squisq-page-gallery { grid-template-columns: repeat(2, 1fr); }\n.squisq-page-milestone { grid-template-columns: 1fr; gap: 0.5rem; }\n.squisq-page-milestone-rail { display: none; }\n.squisq-page-section-inner { padding-inline: 18px; }\n\n}\n@supports not (container-type: inline-size) {\n @media (max-width: 720px) {\n\n.squisq-page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n.squisq-page-feature { grid-template-columns: 1fr; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 0; }\n.squisq-page-stats { flex-direction: column; gap: 1.75rem; }\n.squisq-page-cards { grid-template-columns: 1fr; }\n.squisq-page-gallery { grid-template-columns: repeat(2, 1fr); }\n.squisq-page-milestone { grid-template-columns: 1fr; gap: 0.5rem; }\n.squisq-page-milestone-rail { display: none; }\n.squisq-page-section-inner { padding-inline: 18px; }\n\n }\n}\n";
|
|
2358
|
+
declare const PAGE_BASE_CSS = "\n/* \u2500\u2500 Base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page {\n background: var(--squisq-page-bg);\n color: var(--squisq-page-text);\n font-family: var(--squisq-page-body-font);\n line-height: var(--squisq-page-line-height);\n --squisq-page-divider-color: color-mix(in srgb, var(--squisq-page-text) 16%, transparent);\n --squisq-page-section-pad: 3.5rem;\n --squisq-page-shadow: none;\n}\n.squisq-page *, .squisq-page *::before, .squisq-page *::after { box-sizing: border-box; }\n.squisq-page img { max-width: 100%; height: auto; }\n.squisq-page a {\n color: var(--squisq-page-primary);\n text-decoration-color: color-mix(in srgb, var(--squisq-page-primary) 40%, transparent);\n}\n\n/* Page pattern washes (very low intensity) */\n.squisq-page[data-pattern='dots'] {\n background-image: radial-gradient(color-mix(in srgb, var(--squisq-page-text) 7%, transparent) 1px, transparent 1px);\n background-size: 22px 22px;\n}\n.squisq-page[data-pattern='grid'] {\n background-image:\n linear-gradient(color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px),\n linear-gradient(90deg, color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px);\n background-size: 44px 44px;\n}\n.squisq-page[data-pattern='diagonal'] {\n background-image: repeating-linear-gradient(\n -45deg,\n color-mix(in srgb, var(--squisq-page-text) 4%, transparent) 0 1px,\n transparent 1px 14px\n );\n}\n.squisq-page[data-pattern='noise'] { background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E\"); }\n\n/* Spacing scale */\n.squisq-page[data-spacing='compact'] { --squisq-page-section-pad: 2.25rem; }\n.squisq-page[data-spacing='comfortable'] { --squisq-page-section-pad: 3.5rem; }\n.squisq-page[data-spacing='generous'] { --squisq-page-section-pad: 5.25rem; }\n\n/* Shadow language */\n.squisq-page[data-shadow='soft'] { --squisq-page-shadow: 0 14px 36px color-mix(in srgb, var(--squisq-page-text) 14%, transparent); }\n.squisq-page[data-shadow='crisp'] { --squisq-page-shadow: 0 2px 10px color-mix(in srgb, var(--squisq-page-text) 26%, transparent); }\n.squisq-page[data-shadow='heavy'] { --squisq-page-shadow: 10px 10px 0 color-mix(in srgb, var(--squisq-page-text) 82%, transparent); }\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section { position: relative; padding-block: var(--squisq-page-section-pad); }\n.squisq-page-section-inner {\n max-width: var(--squisq-page-content-max);\n margin-inline: auto;\n padding-inline: 24px;\n}\n/* Backdrops anchor to the section; these content roots stack above them. */\n.squisq-page-hero-body,\n.squisq-page-banner-body,\n.squisq-page-quote-figure { position: relative; }\n.squisq-page-section--feature-split .squisq-page-section-inner,\n.squisq-page-section--gallery .squisq-page-section-inner,\n.squisq-page-section--table-section .squisq-page-section-inner,\n.squisq-page-section--canvas-embed .squisq-page-section-inner,\n.squisq-page-section--stat-band .squisq-page-section-inner,\n.squisq-page-section--card-grid .squisq-page-section-inner,\n.squisq-page-section--media-figure .squisq-page-section-inner,\n.squisq-page-section--hero .squisq-page-section-inner {\n max-width: var(--squisq-page-wide-max);\n}\n\n/* Background rhythm */\n.squisq-page-section--bg-alternate { background: var(--squisq-page-bg-alt); }\n.squisq-page-section--bg-accent {\n background: var(--squisq-page-accent-bg);\n color: var(--squisq-page-accent-text);\n}\n.squisq-page-section--bg-media { color: #ffffff; }\n\n/* Dividers between adjacent sections */\n.squisq-page[data-divider='hairline'] .squisq-page-section + .squisq-page-section { border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page[data-divider='thick-rule'] .squisq-page-section + .squisq-page-section { border-top: 3px solid var(--squisq-page-primary); }\n.squisq-page[data-divider='double-rule'] .squisq-page-section + .squisq-page-section { border-top: 4px double var(--squisq-page-divider-color); }\n.squisq-page[data-divider='dotted'] .squisq-page-section + .squisq-page-section { border-top: 2px dotted var(--squisq-page-divider-color); }\n/* Banded sections carry their own edges; media sections never need rules. */\n.squisq-page .squisq-page-section--bg-media,\n.squisq-page .squisq-page-section--bg-media + .squisq-page-section,\n.squisq-page .squisq-page-section--timeline-rail + .squisq-page-section--timeline-rail { border-top: none; }\n\n/* \u2500\u2500 Headings, eyebrows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section-title {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.15;\n margin: 0 0 0.5em;\n}\n.squisq-page[data-heading-case='uppercase'] .squisq-page-section-title { text-transform: uppercase; letter-spacing: 0.03em; }\n.squisq-page[data-underline='accent-bar'] .squisq-page-section-title::after {\n content: '';\n display: block;\n width: 56px;\n height: 4px;\n margin-top: 0.4em;\n border-radius: 2px;\n background: var(--squisq-page-accent);\n}\n.squisq-page[data-underline='full-rule'] .squisq-page-section-title {\n border-bottom: 1px solid var(--squisq-page-divider-color);\n padding-bottom: 0.35em;\n}\n\n.squisq-page-eyebrow {\n display: block;\n font-size: 0.8125rem;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--squisq-page-accent);\n margin: 0 0 0.9em;\n}\n.squisq-page[data-eyebrow='numbered'] .squisq-page-eyebrow::after { content: ' \u2014'; color: var(--squisq-page-text-muted); }\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow {\n display: inline-block;\n font-family: var(--squisq-page-mono-font);\n text-transform: none;\n letter-spacing: 0.06em;\n border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 55%, transparent);\n border-radius: var(--squisq-page-radius);\n padding: 0.15em 0.6em;\n background: color-mix(in srgb, var(--squisq-page-accent) 10%, transparent);\n}\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::before { content: '['; opacity: 0.6; }\n.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::after { content: ']'; opacity: 0.6; }\n\n/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--hero { padding-block: calc(var(--squisq-page-section-pad) * 1.5); }\n.squisq-page-hero-title {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.08;\n margin: 0;\n font-size: 2.75rem;\n}\n.squisq-page[data-heading-scale='display'] .squisq-page-hero-title { font-size: 3.4rem; }\n.squisq-page[data-heading-scale='oversized'] .squisq-page-hero-title { font-size: 4rem; font-size: clamp(3rem, 9cqw, 6rem); line-height: 1.02; }\n.squisq-page[data-heading-case='uppercase'] .squisq-page-hero-title { text-transform: uppercase; letter-spacing: 0.02em; }\n.squisq-page-hero-subtitle {\n margin: 1.1em 0 0;\n font-size: 1.25rem;\n color: var(--squisq-page-text-muted);\n max-width: 42em;\n white-space: pre-line;\n}\n.squisq-page-section--bg-media .squisq-page-hero-subtitle { color: rgba(255, 255, 255, 0.88); }\n\n/* Stacked (default): centered column */\n.squisq-page[data-hero-style='stacked'] .squisq-page-hero-body { text-align: center; }\n.squisq-page[data-hero-style='stacked'] .squisq-page-hero-subtitle { margin-inline: auto; }\n\n/* Oversized type: hard left, no decoration */\n.squisq-page[data-hero-style='oversized-type'] .squisq-page-hero-title { font-size: 4.25rem; font-size: clamp(3.25rem, 10cqw, 6.5rem); line-height: 0.98; }\n\n/* Split: text and media side by side */\n.squisq-page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }\n.squisq-page-hero-grid .squisq-page-hero-media img { width: 100%; object-fit: cover; }\n\n/* Full-bleed & letterbox: media behind text */\n.squisq-page-section--hero-media {\n padding-block: 0;\n min-height: min(72svh, 620px);\n display: flex;\n align-items: flex-end;\n}\n.squisq-page[data-hero-style='letterbox'] .squisq-page-section--hero-media { min-height: min(52svh, 460px); }\n.squisq-page-hero-backdrop { position: absolute; inset: 0; overflow: hidden; }\n.squisq-page-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; }\n.squisq-page-hero-backdrop::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.68) 100%);\n}\n.squisq-page[data-hero-style='letterbox'] .squisq-page-hero-backdrop img { filter: saturate(0.9); }\n.squisq-page-section--hero-media .squisq-page-section-inner { padding-block: 3rem; width: 100%; }\n\n/* \u2500\u2500 Banner (sectionHeader) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-banner-title { font-size: 2rem; }\n.squisq-page[data-heading-scale='display'] .squisq-page-banner-title { font-size: 2.5rem; }\n.squisq-page[data-heading-scale='oversized'] .squisq-page-banner-title { font-size: 3rem; font-size: clamp(2.25rem, 6cqw, 3.75rem); }\n.squisq-page-section--banner.squisq-page-section--bg-media { padding-block: 0; min-height: 280px; display: flex; align-items: flex-end; }\n.squisq-page-section--banner.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 2rem; width: 100%; }\n.squisq-page-section--banner .squisq-page-section-title { margin-bottom: 0; }\n\n/* \u2500\u2500 Stat band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-stats { display: flex; gap: 3rem; justify-content: center; text-align: center; flex-wrap: wrap; }\n.squisq-page-stat { flex: 1 1 220px; max-width: 420px; }\n.squisq-page-stat-value {\n display: block;\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n font-size: 3.25rem;\n line-height: 1;\n color: var(--squisq-page-accent);\n}\n.squisq-page[data-numerals='oversized'] .squisq-page-stat-value { font-size: 4.5rem; font-size: clamp(3.5rem, 8cqw, 5.5rem); }\n.squisq-page[data-numerals='mono'] .squisq-page-stat-value { font-family: var(--squisq-page-mono-font); letter-spacing: -0.02em; }\n.squisq-page[data-numerals='boxed'] .squisq-page-stat-value {\n display: inline-block;\n border: 2px solid var(--squisq-page-accent);\n border-radius: var(--squisq-page-radius);\n padding: 0.18em 0.4em;\n}\n.squisq-page-stat-title { display: block; margin-top: 0.9em; font-size: 1.125rem; font-weight: 600; }\n.squisq-page-stat-body { display: block; margin-top: 0.45em; color: var(--squisq-page-text-muted); font-size: 0.95rem; }\n.squisq-page-stat-meta { text-align: center; margin-top: 1.5rem; color: var(--squisq-page-text-muted); font-size: 0.85rem; }\n.squisq-page-stat-bar { height: 10px; border-radius: 999px; background: var(--squisq-page-accent); margin-top: 0.8em; }\n.squisq-page-stat--bars { text-align: left; }\n\n/* \u2500\u2500 Quote band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-quote {\n margin: 0;\n font-family: var(--squisq-page-title-font);\n font-size: 1.6rem;\n line-height: 1.35;\n white-space: pre-line;\n}\n.squisq-page-section--em-strong .squisq-page-quote { font-size: 2.1rem; }\n.squisq-page-section--em-quiet .squisq-page-quote { font-size: 1.25rem; color: var(--squisq-page-text-muted); }\n.squisq-page-quote-attribution { margin-top: 1.1em; font-family: var(--squisq-page-body-font); font-size: 0.95rem; color: var(--squisq-page-text-muted); }\n.squisq-page-quote-attribution::before { content: '\u2014 '; }\n.squisq-page[data-quote-mark='accent-bar'] .squisq-page-quote-figure { border-left: 4px solid var(--squisq-page-accent); padding-left: 1.5rem; }\n.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure { position: relative; padding-top: 1.25rem; }\n.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure::before {\n content: '\\201C';\n position: absolute;\n top: -0.12em;\n left: -0.05em;\n font-family: var(--squisq-page-title-font);\n font-size: 5.5rem;\n line-height: 1;\n color: color-mix(in srgb, var(--squisq-page-accent) 42%, transparent);\n pointer-events: none;\n}\n.squisq-page-section--v-display .squisq-page-quote-figure { text-align: center; border-left: none; }\n.squisq-page-section--v-display .squisq-page-quote { font-size: 2.4rem; font-size: clamp(1.9rem, 5cqw, 3rem); }\n.squisq-page-section--v-editorial .squisq-page-quote-figure {\n border-block: 3px solid var(--squisq-page-primary);\n border-left: none;\n padding: 2rem 0.5rem;\n}\n/* Full-bleed quote over media */\n.squisq-page-section--quote-band.squisq-page-section--bg-media { padding-block: 0; min-height: 380px; display: flex; align-items: center; }\n.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 3.5rem; }\n.squisq-page-quote-backdrop { position: absolute; inset: 0; overflow: hidden; }\n.squisq-page-quote-backdrop img, .squisq-page-quote-backdrop video { width: 100%; height: 100%; object-fit: cover; }\n.squisq-page-quote-backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }\n.squisq-page-section--quote-band[data-hint-vignette] .squisq-page-quote-backdrop::after {\n background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);\n}\n.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-quote-figure { border: none; text-align: center; }\n\n/* \u2500\u2500 Feature split \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 2; }\n.squisq-page-feature-media img { width: 100%; object-fit: cover; }\n.squisq-page-feature-title { font-size: 1.75rem; }\n.squisq-page-feature-body { color: var(--squisq-page-text-muted); font-size: 1.05rem; white-space: pre-line; margin: 0; }\n\n/* \u2500\u2500 Media figure \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-figure { margin: 0; }\n.squisq-page-figure img, .squisq-page-figure video { width: 100%; display: block; }\n.squisq-page-figure figcaption { margin-top: 0.9em; font-size: 0.9rem; color: var(--squisq-page-text-muted); text-align: center; }\n.squisq-page-media-credit { font-size: 0.78rem; opacity: 0.75; }\n\n/* Media frame treatment (figures, features, gallery tiles, cards) */\n.squisq-page-media-frame { overflow: hidden; }\n.squisq-page[data-framing='rounded'] .squisq-page-media-frame { border-radius: var(--squisq-page-radius); }\n.squisq-page[data-framing='bordered'] .squisq-page-media-frame { border: 3px solid var(--squisq-page-text); }\n.squisq-page[data-framing='polaroid'] .squisq-page-media-frame {\n background: #ffffff;\n padding: 10px 10px 16px;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 2px;\n}\n.squisq-page[data-framing='letterboxed'] .squisq-page-media-frame img { aspect-ratio: 21 / 9; object-fit: cover; }\n.squisq-page[data-framing='circle-accent'] .squisq-page-media-frame { border-radius: calc(var(--squisq-page-radius) * 2); }\n.squisq-page .squisq-page-media-frame { box-shadow: var(--squisq-page-shadow); }\n\n/* Rich body nodes that the selected template did not consume. This universal\n * supplement keeps diagrams/media visible without making every template\n * duplicate the same preservation logic. */\n.squisq-page-rich-content {\n margin-top: clamp(1.5rem, 4vw, 3rem);\n padding-top: clamp(1.25rem, 3vw, 2rem);\n border-top: 1px solid var(--squisq-page-divider-color);\n}\n.squisq-page-rich-content :is(img, video) { display: block; max-width: 100%; height: auto; margin-inline: auto; }\n.squisq-page-rich-content .squisq-md-mermaid { min-height: min(520px, 62vh); margin-block: 0; }\n\n/* \u2500\u2500 Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }\n.squisq-page-gallery .squisq-page-media-frame img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.squisq-page-gallery-caption { margin-top: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--squisq-page-text-muted); }\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-callout {\n border-radius: var(--squisq-page-radius);\n border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 32%, transparent);\n border-left: 5px solid var(--squisq-page-accent);\n background: color-mix(in srgb, var(--squisq-page-accent) 7%, var(--squisq-page-bg));\n padding: 1.75rem 2rem;\n box-shadow: var(--squisq-page-shadow);\n display: flex;\n gap: 1.75rem;\n align-items: flex-start;\n}\n.squisq-page-callout-title { font-family: var(--squisq-page-title-font); font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5em; }\n.squisq-page-callout-body { margin: 0; white-space: pre-line; }\n.squisq-page-callout-meta { margin-top: 0.9em; font-size: 0.82rem; color: var(--squisq-page-text-muted); }\n.squisq-page-callout .squisq-page-media-frame { flex: 0 0 132px; }\n.squisq-page-callout .squisq-page-media-frame img { width: 132px; height: 132px; object-fit: cover; }\n.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame,\n.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame img { border-radius: 50%; }\n.squisq-page-section--v-definition .squisq-page-callout-title { font-style: italic; }\n.squisq-page-section--v-diagnostic .squisq-page-callout { border-left-color: var(--squisq-page-highlight); }\n\n/* \u2500\u2500 Card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }\n.squisq-page-card {\n border-radius: var(--squisq-page-radius);\n background: var(--squisq-page-bg-alt);\n border-top: 4px solid var(--squisq-page-card-accent, var(--squisq-page-accent));\n padding: 1.75rem 1.75rem 1.9rem;\n box-shadow: var(--squisq-page-shadow);\n}\n.squisq-page-card-title { font-family: var(--squisq-page-title-font); font-size: 1.3rem; margin: 0 0 0.4em; }\n.squisq-page-card-body { margin: 0; color: var(--squisq-page-text-muted); white-space: pre-line; }\n.squisq-page-cards-title { text-align: center; font-size: 1.9rem; margin-bottom: 1.75rem; }\n\n/* \u2500\u2500 Item list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-items { list-style: none; margin: 0; padding: 0; counter-reset: squisq-item; max-width: 40em; }\n.squisq-page-items li {\n counter-increment: squisq-item;\n position: relative;\n padding: 0.9em 0 0.9em 3.4em;\n font-size: 1.1rem;\n}\n.squisq-page-items li + li { border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-items li::before {\n content: counter(squisq-item, decimal-leading-zero);\n position: absolute;\n left: 0;\n top: 0.85em;\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n color: var(--squisq-page-accent);\n font-size: 1.15em;\n}\n.squisq-page[data-numerals='mono'] .squisq-page-items li::before { font-family: var(--squisq-page-mono-font); }\n.squisq-page-items-title { font-size: 1.9rem; }\n\n/* \u2500\u2500 Timeline rail (dateEvent) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--timeline-rail { padding-block: 1.4rem; }\n.squisq-page-section--timeline-rail:first-child { padding-top: var(--squisq-page-section-pad); }\n.squisq-page-milestone { display: grid; grid-template-columns: 150px 1fr; gap: 2rem; align-items: baseline; position: relative; }\n.squisq-page-milestone-date {\n font-family: var(--squisq-page-title-font);\n font-weight: 700;\n color: var(--squisq-page-accent);\n font-size: 1.05rem;\n text-align: right;\n}\n.squisq-page-milestone-rail {\n position: absolute;\n left: 166px;\n top: -1.4rem;\n bottom: -1.4rem;\n width: 2px;\n background: color-mix(in srgb, var(--squisq-page-accent) 35%, transparent);\n}\n.squisq-page-milestone-rail::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 0.55em;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transform: translateX(-50%);\n background: var(--squisq-page-accent);\n border: 2px solid var(--squisq-page-bg);\n}\n.squisq-page-milestone-body { padding-left: 2.25rem; white-space: pre-line; }\n.squisq-page-milestone-footer { margin-top: 0.5em; font-size: 0.85rem; color: var(--squisq-page-text-muted); }\n\n/* \u2500\u2500 Table section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-table-title { font-size: 1.9rem; }\n.squisq-page-table-scroll { overflow-x: auto; border-radius: var(--squisq-page-radius); box-shadow: var(--squisq-page-shadow); }\n.squisq-page-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }\n.squisq-page-table th {\n background: var(--squisq-page-accent-bg);\n color: var(--squisq-page-accent-text);\n font-family: var(--squisq-page-title-font);\n text-align: left;\n padding: 0.8em 1em;\n}\n.squisq-page-table td { padding: 0.7em 1em; border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--squisq-page-text) 3.5%, transparent); }\n\n/* \u2500\u2500 Canvas embed (spatial SVG) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-canvas {\n width: 100%;\n margin-inline: auto;\n overflow: hidden;\n border-radius: var(--squisq-page-radius);\n}\n.squisq-page-canvas svg { display: block; width: 100%; height: 100%; }\n.squisq-page-canvas--framed { border: 1px solid var(--squisq-page-divider-color); box-shadow: var(--squisq-page-shadow); }\n.squisq-page-canvas--terminal { border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 45%, transparent); }\n.squisq-page-canvas--terminal::before {\n content: '\\25CF \\25CF \\25CF';\n display: block;\n font-size: 9px;\n letter-spacing: 4px;\n padding: 6px 12px;\n color: color-mix(in srgb, var(--squisq-page-accent) 70%, transparent);\n background: color-mix(in srgb, var(--squisq-page-accent) 9%, var(--squisq-page-bg));\n border-bottom: 1px solid color-mix(in srgb, var(--squisq-page-accent) 30%, transparent);\n}\n\n/* \u2500\u2500 Prose \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--prose { padding-block: calc(var(--squisq-page-section-pad) * 0.45); }\n.squisq-page[data-divider] .squisq-page-section--prose + .squisq-page-section--prose { border-top: none; }\n.squisq-page-prose { font-size: 1.05rem; }\n.squisq-page-prose p { margin: 0; }\n.squisq-page-prose p + p { margin-top: 1.25em; }\n.squisq-page-prose > * + * { margin-top: 1.1em; }\n.squisq-page-prose code { font-family: var(--squisq-page-mono-font); font-size: 0.9em; }\n.squisq-page-prose :not(pre) > code { background: color-mix(in srgb, var(--squisq-page-text) 8%, transparent); border-radius: 4px; padding: 0.12em 0.35em; }\n.squisq-page-prose pre { background: color-mix(in srgb, var(--squisq-page-text) 6%, transparent); border-radius: var(--squisq-page-radius); padding: 1em 1.25em; overflow-x: auto; }\n.squisq-page-prose pre code { background: none; border-radius: 0; padding: 0; }\n.squisq-page .squisq-md-code-frame { position: relative; margin: 1em 0; }\n.squisq-page .squisq-md-code-frame > pre { margin: 0; padding-right: 5rem; }\n.squisq-page .squisq-md-code-copy {\n position: absolute;\n z-index: 1;\n top: 0.55rem;\n right: 0.55rem;\n min-width: 3.7rem;\n padding: 0.28rem 0.5rem;\n border: 1px solid color-mix(in srgb, var(--squisq-page-text) 20%, transparent);\n border-radius: 5px;\n background: color-mix(in srgb, var(--squisq-page-bg) 90%, transparent);\n color: inherit;\n font: 500 0.72rem/1.2 system-ui, sans-serif;\n cursor: pointer;\n opacity: 0.58;\n transition: opacity 120ms ease, background-color 120ms ease;\n}\n.squisq-page .squisq-md-code-frame:hover > .squisq-md-code-copy,\n.squisq-page .squisq-md-code-copy:focus-visible,\n.squisq-page .squisq-md-code-copy[data-copy-state='copied'],\n.squisq-page .squisq-md-code-copy[data-copy-state='failed'] { opacity: 1; }\n.squisq-page .squisq-md-code-copy:hover { background: var(--squisq-page-bg); }\n.squisq-page .squisq-md-code-copy:disabled { cursor: wait; }\n.squisq-page-prose blockquote { margin: 0; border-left: 4px solid var(--squisq-page-accent); padding-left: 1.25em; color: var(--squisq-page-text-muted); }\n.squisq-page-prose ul, .squisq-page-prose ol { padding-left: 1.5em; margin: 0; }\n.squisq-page-prose li + li { margin-top: 0.4em; }\n.squisq-page-prose hr { border: none; border-top: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-prose table { width: 100%; border-collapse: collapse; }\n.squisq-page-prose th { font-family: var(--squisq-page-title-font); text-align: left; padding: 0.6em 0.8em; border-bottom: 2px solid var(--squisq-page-divider-color); }\n.squisq-page-prose td { padding: 0.55em 0.8em; border-bottom: 1px solid var(--squisq-page-divider-color); }\n.squisq-page-prose img { border-radius: var(--squisq-page-radius); }\n.squisq-page-prose h1, .squisq-page-prose h2, .squisq-page-prose h3,\n.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 {\n font-family: var(--squisq-page-title-font);\n font-weight: var(--squisq-page-title-weight);\n line-height: 1.2;\n margin: 0 0 0.45em;\n}\n.squisq-page-prose h1 { font-size: 2.1rem; }\n.squisq-page-prose h2 { font-size: 1.65rem; }\n.squisq-page-prose h3 { font-size: 1.35rem; }\n.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 { font-size: 1.15rem; }\n.squisq-page-section--prose[data-hint-drop-cap] .squisq-page-prose > p:first-child::first-letter {\n font-family: var(--squisq-page-title-font);\n font-size: 3.4em;\n font-weight: 700;\n float: left;\n line-height: 0.85;\n padding-right: 0.12em;\n color: var(--squisq-page-accent);\n}\n\n/* \u2500\u2500 Footer band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page-section--footer { text-align: center; }\n\n/* \u2500\u2500 Thin-margin embedding (chat bubbles) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.squisq-page--thin .squisq-page-section-inner { padding-inline: 0; }\n.squisq-page--thin .squisq-page-section { padding-block: 1.5rem; }\n\n/* Thumbnail image mode */\n.squisq-page--thumbnail-images .squisq-page-prose img,\n.squisq-page--thumbnail-images .squisq-page-figure img { max-width: 100px; max-height: 100px; object-fit: cover; }\n\n/* \u2500\u2500 Reveal animation (progressive enhancement) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (prefers-reduced-motion: no-preference) {\n .squisq-page-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }\n .squisq-page-reveal--in { opacity: 1; transform: none; }\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@container squisq-page (max-width: 720px) {\n\n.squisq-page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n.squisq-page-feature { grid-template-columns: 1fr; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 0; }\n.squisq-page-stats { flex-direction: column; gap: 1.75rem; }\n.squisq-page-cards { grid-template-columns: 1fr; }\n.squisq-page-gallery { grid-template-columns: repeat(2, 1fr); }\n.squisq-page-milestone { grid-template-columns: 1fr; gap: 0.5rem; }\n.squisq-page-milestone-rail { display: none; }\n.squisq-page-section-inner { padding-inline: 18px; }\n\n}\n@supports not (container-type: inline-size) {\n @media (max-width: 720px) {\n\n.squisq-page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n.squisq-page-feature { grid-template-columns: 1fr; }\n.squisq-page-feature--media-right .squisq-page-feature-media { order: 0; }\n.squisq-page-stats { flex-direction: column; gap: 1.75rem; }\n.squisq-page-cards { grid-template-columns: 1fr; }\n.squisq-page-gallery { grid-template-columns: repeat(2, 1fr); }\n.squisq-page-milestone { grid-template-columns: 1fr; gap: 0.5rem; }\n.squisq-page-milestone-rail { display: none; }\n.squisq-page-section-inner { padding-inline: 18px; }\n\n }\n}\n";
|
|
2359
2359
|
/**
|
|
2360
2360
|
* Complete stylesheet for a themed page: a `.squisq-page { … }` variable
|
|
2361
2361
|
* block followed by the structural CSS. For string-HTML consumers; the
|
package/dist/doc/index.js
CHANGED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { bh as Theme } from '../Doc-DBadkoP4.js';
|
|
2
|
+
import '../types-CcrDFdWH.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Host-pluggable fence renderers — the contract shared by the read path
|
|
6
|
+
* (`@bendyline/squisq-react`'s `MarkdownRenderer` / `LinearDocView`) and
|
|
7
|
+
* the edit path (`@bendyline/squisq-editor-react`'s `HostFenceExtension`).
|
|
8
|
+
*
|
|
9
|
+
* A host registers a renderer per fence *language* (the token after the
|
|
10
|
+
* opening backticks). Wherever squisq renders markdown, a fenced code
|
|
11
|
+
* block whose language is claimed renders through the host's component
|
|
12
|
+
* instead of the default code block; unclaimed fences are untouched.
|
|
13
|
+
*
|
|
14
|
+
* Design constraints the contract encodes:
|
|
15
|
+
*
|
|
16
|
+
* - **All payload lives in the fence body.** The info string's *meta*
|
|
17
|
+
* segment does not survive the WYSIWYG round-trip (ProseMirror keeps
|
|
18
|
+
* only the `language-*` class token), so `meta` is populated on the
|
|
19
|
+
* read path only and renderers must not depend on it.
|
|
20
|
+
* - **Core stays React-free.** `FenceRenderer` returns `unknown`; the
|
|
21
|
+
* react packages narrow it to `ReactNode` at their boundaries.
|
|
22
|
+
* - Failures fall back: the react integrations wrap renderers in an
|
|
23
|
+
* error boundary that degrades to the plain code block, so a broken
|
|
24
|
+
* host widget never takes a document down with it.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
/** Everything a fence renderer receives for one claimed fence. */
|
|
28
|
+
interface FenceRenderContext {
|
|
29
|
+
/** Normalized (trimmed, lowercased) fence language token. */
|
|
30
|
+
lang: string;
|
|
31
|
+
/**
|
|
32
|
+
* The info-string remainder after the language. READ PATH ONLY — absent
|
|
33
|
+
* in edit mode (it does not survive the ProseMirror round-trip). Do not
|
|
34
|
+
* store payload here; use the body.
|
|
35
|
+
*/
|
|
36
|
+
meta?: string;
|
|
37
|
+
/** Fence body, verbatim. */
|
|
38
|
+
value: string;
|
|
39
|
+
/**
|
|
40
|
+
* Parsed body when it was valid JSON or the documented YAML subset
|
|
41
|
+
* (see `parseDataFence` in `@bendyline/squisq/doc`); undefined when
|
|
42
|
+
* parsing failed or was not attempted. Renderers needing guaranteed
|
|
43
|
+
* structure should parse `value` themselves.
|
|
44
|
+
*/
|
|
45
|
+
data?: unknown;
|
|
46
|
+
/** Surface-applied theme — read colors/typography directly from it. */
|
|
47
|
+
theme?: Theme;
|
|
48
|
+
/** Which pipeline is rendering: static read view or the live editor. */
|
|
49
|
+
mode: 'read' | 'edit';
|
|
50
|
+
/**
|
|
51
|
+
* Edit mode only: replace the fence body with `next` in one undoable
|
|
52
|
+
* editor transaction. Absent on the read path.
|
|
53
|
+
*/
|
|
54
|
+
replaceValue?: (next: string) => void;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* A host renderer for one fence language. Returns the host UI for the
|
|
58
|
+
* fence — `ReactNode` in the react integrations; typed `unknown` here so
|
|
59
|
+
* core carries no React dependency.
|
|
60
|
+
*/
|
|
61
|
+
type FenceRenderer = (ctx: FenceRenderContext) => unknown;
|
|
62
|
+
/**
|
|
63
|
+
* Registry: normalized fence language → renderer. Keys are matched
|
|
64
|
+
* against `lang.trim().toLowerCase()`; register lowercase keys.
|
|
65
|
+
*/
|
|
66
|
+
type FenceRendererMap = Record<string, FenceRenderer>;
|
|
67
|
+
/**
|
|
68
|
+
* The registry's claimed languages, for plumbing that needs the *set*
|
|
69
|
+
* without the functions (e.g. the page materializer's
|
|
70
|
+
* `widgetFenceLangs`, or `CodeSnippetExtension.reservedLanguages`).
|
|
71
|
+
*/
|
|
72
|
+
declare function fenceRendererLangs(renderers: FenceRendererMap | undefined): readonly string[];
|
|
73
|
+
|
|
74
|
+
export { type FenceRenderContext, type FenceRenderer, type FenceRendererMap, fenceRendererLangs };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { D as DEFAULT_THEME, a as DEFAULT_THEME_ID, T as THEMES, g as getAvailab
|
|
|
6
6
|
export { M as MediaEntry, a as MediaProvider } from './MediaProvider-wpSe21B3.js';
|
|
7
7
|
export { E as EditorLayerMeta, I as ImageEditCanvas, a as ImageEditDoc, b as ImageEditLayer, c as ImageEditLayerKind, d as ImageEditMeta } from './ImageEditDoc-Cq2a3c30.js';
|
|
8
8
|
export { ASCII_CHAR_H, ASCII_CHAR_W, ASCII_DIAGRAM_FENCE_LANGS, ASCII_TIMELINE_FENCE_LANGS, AccentLayout, AsciiDiagram, AsciiDiagramDetection, AsciiDiagramEdge, AsciiDiagramNode, AsciiTimeline, AsciiTimelineDetection, AsciiTimelineEvent, AsciiTimelineLink, AsciiTimelineMarker, AsciiTimelineSide, AsciiTimelineStats, AsciiTimelineStyle, AsciiTimelineTrack, AudioSegmentTiming, BASE_INPUT_DESCRIPTORS, BLOCK_MEDIA_LAYOUT_POLICIES, BlockLayerMaterialization, BlockMediaLayoutPolicy, BuiltInTemplateName, CONTAINER_TEMPLATES, COVER_SLIDE_FRONTMATTER_KEYS, COVER_SLIDE_TEMPLATE_OPTIONS, ClipBox, ConnectorAnchor, ConnectorPort, ConnectorRouting, ConnectorSnapPoint, CoverBlockInput, CoverSlidePlayback, CoverSlideSettings, CoverSlideTemplate, CoverSlideTemplateOption, DEFAULT_COVER_SLIDE_SETTINGS, DEFAULT_LAYOUT, DIAGRAM_LABEL_HORIZONTAL_PADDING, DIAGRAM_LABEL_LINE_HEIGHT, DIAGRAM_LABEL_MIN_FONT_SIZE, DIAGRAM_LABEL_VERTICAL_PADDING, DataFenceParseResult, DeriveTemplateInputsOptions, DetectAsciiTimelineOptions, DiagramEdge, DiagramLabelFit, DiagramLayout, DiagramLayoutOptions, DiagramNodePosition, DrawingConnector, DrawingLayout, DrawingLayoutOptions, DrawingShape, DrawingShapeKind, EmbeddedVideo, ExpandDocBlocksOptions, ExtractedTableData, FirstImage, InputCoercion, LayerMaterializationDiagnostic, LayerMaterializationFailureMode, LayerMaterializationSource, LayoutLayerDefaults, LayoutLayersResult, MAX_COVER_SLIDE_DURATION_SECONDS, MarkdownToDocOptions, MarkdownValidationResult, MaterializeBlockLayersOptions, NarrationResolution, NativeMediaLayout, NoMediaLayout, PAGE_BASE_CSS, PATH_SHAPE_KINDS, PageSectionContext, PageSectionDraft, RenderAsciiDiagramOptions, RenderAsciiTimelineOptions, RenderTreeOptions, RepairResult, ResolvedPageBlock, RichListItem, RuntimeTemplateRegistry, SHAPE_NAMES, SectionExtractor, SupplementalMediaLayoutVariant, SupplementalMediaShape, SupplementalMediaVariantMatrix, TABLE_FED_TEMPLATES, TEMPLATE_AUTHORING_METADATA, TEMPLATE_INPUT_DESCRIPTORS, TEMPLATE_METADATA, TREE_FENCE_LANGS, TemplateAuthoringMetadata, TemplateAuthoringRole, TemplateBodyPolicy, TemplateInputDescriptor, TemplateMediaOwnership, TemplateMetadata, TemplateParamFinding, Tree, TreeDetection, TreeItem, TreeNode, UnconsumedMediaBehavior, ValidateOptions, adjustY, anchorPoint, applyNarrationTiming, applyRenderStyleToLayers, asciiCellToCanvas, asciiDiagramFromBlocks, asciiDiagramFromTemplateData, asciiDiagramToTemplateData, asciiTimelineToTemplateData, autoTemplatePreservesContent, bigText, buildPageCss, buildPageCssVars, buildRegistry, canvasToAsciiCell, clipEndpoints, clipPoint, coerceTemplateParams, comparisonBar, computeDiagramLayout, computeDrawingLayout, computeLayoutLayers, connectorPath, contentBlock, countBlocks, coverBlock, createAccentLayers, cssFilterForTreatment, dataTable, dateEvent, definitionCard, deriveTemplateInputs, detectAsciiDiagram, detectAsciiTimeline, detectTree, diagramBlock, docToMarkdown, drawingBlock, expandCoverBlock, expandDocBlocks, expandPersistentLayers, extractBlockquoteText, extractBodyPlainText, extractEmbeddedVideos, extractFirstEmbeddedVideo, extractFirstImage, extractImages, extractListItems, extractRichListItems, extractTableData, extractTableFromContents, factCard, fallbackBlockLayers, findFirstList, findFirstTable, fitBigTextSize, fitDiagramLabel, flattenBlocks, flattenRenderableBlocks, fullBleedQuote, getAccentLayout, getAnimationProgress, getAnimationStyle, getAvailableTemplates, getBlockBodyText, getBlockDepth, getBlockMediaLayoutPolicy, getDefaultAnimation, getDefaultAnimationDuration, getOverlayOpacity, getPersistentLayersFromTheme, getPinnedBlockMeta, getTemplateHint, getThemeFont, getTransitionClass, hasTemplate, imageWithCaption, isAsciiDiagramFence, isAsciiTimelineFence, isContainerTemplate, isDataFence, isEligibleAsciiFenceLang, isEligibleAsciiTimelineFenceLang, isEligibleTreeFenceLang, isExplicitDiagramLang, isExplicitTimelineLang, isExplicitTreeLang, isRepairableDiagram, isShapeName, isTemplatedPageBlock, isTreeFence, isWrappedFlowTimelineSource, layoutBlock, leftFeature, lineStyleDasharray, lintTemplateParams, listBlock, mapBlock, markdownToDoc, markerPath, materializeBlockLayers, nearestSnapPoint, normalizeShapeKind, pageStyleDataAttributes, parseAsciiDiagram, parseAsciiTimeline, parseAsciiTimelineWithStats, parseDataFence, parseTree, parseWrappedFlowTimeline, parseYamlSubset, photoGrid, pullQuote, quoteBlock, readCustomTemplatesFromFrontmatter, readCustomThemesFromFrontmatter, renderAsciiDiagram, renderAsciiTimeline, renderTree, repairAsciiDiagram, replaceDataFence, resolveAudioMapping, resolveColorScheme, resolveCoverSlideSettings, resolvePageBlock, resolvePersistentLayers, resolveTemplateName, resolveThemeForDoc, rightFeature, scaleAnimationDuration, scoreTextSimilarity, sectionExtractors, sectionHeader, shapePath, shouldUseShadow, snapEndpoints, snapPoints, statHighlight, templateRegistry, themeWantsAmbientMotion, themedEntrance, themedFontSize, themedImageTreatment, themedScrim, themedSurfaceGradient, timelineBlock, titleBlock, treeBlock, treeFromMarkdownList, treeFromTemplateData, treeToTemplateData, twoColumn, validateMarkdownDoc, validateMarkdownSource, videoPullQuote, videoWithCaption, wrapWithPersistentLayers, writeCustomTemplatesToFrontmatter, writeCustomThemesToFrontmatter } from './doc/index.js';
|
|
9
|
-
export { M as MaterializePageSectionOptions, a as MaterializePageSectionsOptions, P as PageMedia, b as PageRichText, c as PageSection, d as PageSectionDiagnostic, e as PageSectionItem, f as PageSectionMaterialization, g as PageSectionSource, h as PageSpatialKind, i as PageTransformHints, m as materializePageSection, j as materializePageSections, r as resolvePageStyle } from './materializePageSection-
|
|
9
|
+
export { M as MaterializePageSectionOptions, a as MaterializePageSectionsOptions, P as PageMedia, b as PageRichText, c as PageSection, d as PageSectionDiagnostic, e as PageSectionItem, f as PageSectionMaterialization, g as PageSectionSource, h as PageSpatialKind, i as PageTransformHints, m as materializePageSection, j as materializePageSections, r as resolvePageStyle } from './materializePageSection-Rss5thAj.js';
|
|
10
10
|
export { calculateBearing, decodeGeohash, encodeGeohash, geohashOverlapsBounds, geohashToHierarchicalPath, getGeohash4Neighbors, getGeohashPath, getGeohashPrefix, getNeighbors, haversineDistance } from './spatial/index.js';
|
|
11
11
|
export { LocalForageAdapter, LocalForageAdapterOptions, LocalStorageAdapter, MemoryStorageAdapter, ScopedContentContainer, StorageAdapter, createMediaProviderFromContainer, scopeContainer } from './storage/index.js';
|
|
12
12
|
export { C as ContentContainer, a as ContentEntry, M as MemoryContentContainer, f as findDocumentPath } from './ContentContainer-B2w9sUoL.js';
|
|
@@ -25,3 +25,4 @@ export { I as ICONS, a as IconEntry, b as IconFamily, c as IconTextRun, h as has
|
|
|
25
25
|
export { IconSuggestion, canonicalIconToken, iconGlyph, looksLikeIconToken, resolveIcon, suggestIcons } from './icons/index.js';
|
|
26
26
|
export { BlockContentProfile, RecommendationResult, profileBlockContents, recommendTemplatesForBlock } from './recommend/index.js';
|
|
27
27
|
export { AlignConfig, AlignInput, BandpassState, BuildNarrationTimingOptions, BuildScriptOptions, DEFAULT_ALIGN_CONFIG, DEFAULT_FEATURE_CONFIG, DEFAULT_NUCLEI_CONFIG, DEFAULT_PACING_CONFIG, DEFAULT_VAD_CONFIG, FeatureConfig, FeatureState, FrameFeatures, NarrationAlignment, NarrationBlockRange, NarrationScript, NarrationSessionConfig, NarrationSessionState, NarrationTimingBlock, NarrationTimingJsonV3, NarrationTrace, NucleiConfig, NucleiState, PacingConfig, PacingState, PacingTick, ScriptBlockRange, ScriptToken, TraceSample, VadConfig, VadState, WordTiming, alignNarration, bandpassRun, buildNarrationScript, buildNarrationTimingJson, createBandpass, createFeatureState, createNarrationSession, createNucleiState, createPacingState, createVadState, detectSyllableOnsets, downsampleTrace, estimateSyllables, expectedSyllablesAt, extractFrameFeatures, featureStep, narrationSessionStep, nucleiStep, pacingStep, parseNarrationTimingJson, reanchorPacing, reanchorSession, traceWordPosAt, vadStep, wordIndexAtChar, wordIndexAtTime, wordPosAtExpectedSyllables } from './narration/index.js';
|
|
28
|
+
export { FenceRenderContext, FenceRenderer, FenceRendererMap, fenceRendererLangs } from './fence/index.js';
|
package/dist/index.js
CHANGED
|
@@ -24,6 +24,9 @@ import {
|
|
|
24
24
|
traceWordPosAt,
|
|
25
25
|
vadStep
|
|
26
26
|
} from "./chunk-7Z5T3CUI.js";
|
|
27
|
+
import {
|
|
28
|
+
fenceRendererLangs
|
|
29
|
+
} from "./chunk-PGI7HSWE.js";
|
|
27
30
|
import {
|
|
28
31
|
DEFAULT_TRANSFORM_STYLE_ID,
|
|
29
32
|
analyzeBlocks,
|
|
@@ -170,7 +173,7 @@ import {
|
|
|
170
173
|
sectionExtractors,
|
|
171
174
|
validateMarkdownDoc,
|
|
172
175
|
validateMarkdownSource
|
|
173
|
-
} from "./chunk-
|
|
176
|
+
} from "./chunk-KOU5WRVN.js";
|
|
174
177
|
import {
|
|
175
178
|
ASCII_CHAR_H,
|
|
176
179
|
ASCII_CHAR_W,
|
|
@@ -742,6 +745,7 @@ export {
|
|
|
742
745
|
factCard,
|
|
743
746
|
fallbackBlockLayers,
|
|
744
747
|
featureStep,
|
|
748
|
+
fenceRendererLangs,
|
|
745
749
|
fetchResourceBytes,
|
|
746
750
|
findDocumentPath,
|
|
747
751
|
findFirstList,
|
|
@@ -191,6 +191,16 @@ interface MaterializePageSectionOptions {
|
|
|
191
191
|
totalBlocks?: number;
|
|
192
192
|
/** Document-scoped custom templates (render as canvas embeds). */
|
|
193
193
|
customTemplates?: readonly CustomTemplateDefinition[];
|
|
194
|
+
/**
|
|
195
|
+
* Fence languages a host renderer claims as widgets (see
|
|
196
|
+
* `@bendyline/squisq/fence`). Typed-template sections keep only the rich
|
|
197
|
+
* content they haven't already consumed — historically just mermaid
|
|
198
|
+
* fences and media. A claimed fence must survive that filter too, or a
|
|
199
|
+
* host widget inside a callout/card block is dropped before it ever
|
|
200
|
+
* reaches the renderer. Lowercased language tokens; mermaid is always
|
|
201
|
+
* kept regardless.
|
|
202
|
+
*/
|
|
203
|
+
widgetFenceLangs?: readonly string[];
|
|
194
204
|
}
|
|
195
205
|
/** Doc-level options. */
|
|
196
206
|
interface MaterializePageSectionsOptions extends MaterializePageSectionOptions {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as ColorScheme, O as Doc, k as Block } from '../Doc-DBadkoP4.js';
|
|
2
|
-
import { i as PageTransformHints } from '../materializePageSection-
|
|
2
|
+
import { i as PageTransformHints } from '../materializePageSection-Rss5thAj.js';
|
|
3
3
|
import { d as ExtractionType, E as ExtractedElement, b as ExtractionOptions } from '../contentExtractor-BNfVJV2U.js';
|
|
4
4
|
import '../types-CcrDFdWH.js';
|
|
5
5
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bendyline/squisq",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
4
4
|
"description": "Headless utilities for doc/block rendering, spatial math, Markdown, and storage",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Bendyline",
|
|
@@ -121,6 +121,11 @@
|
|
|
121
121
|
"types": "./dist/narration/index.d.ts",
|
|
122
122
|
"import": "./dist/narration/index.js",
|
|
123
123
|
"default": "./dist/narration/index.js"
|
|
124
|
+
},
|
|
125
|
+
"./fence": {
|
|
126
|
+
"types": "./dist/fence/index.d.ts",
|
|
127
|
+
"import": "./dist/fence/index.js",
|
|
128
|
+
"default": "./dist/fence/index.js"
|
|
124
129
|
}
|
|
125
130
|
},
|
|
126
131
|
"scripts": {
|