Files
site-builder/craft/src/sections/thumbnails.ts
T
shadowdaoandClaude Sonnet 5.5 6e819f1ef2 feat(site-builder): section library catalog, modal and insertion
Catalog skeleton with per-family files (one seed each for hero, services,
contact), live token-styled thumbnails, insert-after-selection, and
save-as-section into project extras.

Refs #52

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-07 11:52:25 -07:00

22 lines
1.2 KiB
TypeScript

import type { SiteDesign } from '../state/SiteDesignContext';
import { templateComponentToTreeNode } from '../templates/apply-template';
import { flattenTreeForCraft } from '../utils/craft-tree';
import { exportToHtml } from '../utils/html-export';
import type { SectionDef } from './catalog';
/** Full HTML document of one section rendered with the site's own tokens and
* fonts, for a sandboxed (script-less) `<iframe srcdoc>` thumbnail. Uses the
* exact static export path, so it matches what publishing would produce. */
export function buildSectionPreviewDoc(def: SectionDef, design: SiteDesign): string {
const flat = flattenTreeForCraft(templateComponentToTreeNode(def.tree));
const nodes: Record<string, unknown> = { ...flat.nodes };
// exportToHtml walks from ROOT; hang the section under a synthetic one.
const rootChildren = [flat.rootNodeId];
(nodes[flat.rootNodeId] as any).parent = 'ROOT';
nodes.ROOT = {
type: { resolvedName: 'Container' }, isCanvas: true, props: {}, displayName: 'Container',
custom: {}, hidden: false, parent: null, nodes: rootChildren, linkedNodes: {},
};
return exportToHtml(JSON.stringify(nodes), { design, includeFonts: true }).html;
}