', heading) if subheading: subheading = re.sub(r'(
', subheading) scale = comp.get("scale", None) # Build inline style from both scale and custom style props style_parts = [] if scale is not None and 1 <= int(scale) <= 6: style_parts.append(f"font-size: var(--text-scale-{int(scale)})") heading_font_size = comp.get("heading_font_size", "") heading_color = comp.get("heading_color", "") heading_ls = comp.get("heading_letter_spacing", "") text_align = comp.get("text_align", "") if heading_font_size: style_parts.append(f"font-size: {heading_font_size}") if heading_color: style_parts.append(f"color: {heading_color}") if heading_ls: style_parts.append(f"letter-spacing: {heading_ls}") if text_align: style_parts.append(f"text-align: {text_align}") h_style = f' style="{"; ".join(style_parts)}"' if style_parts else "" inner = f'
{heading}
\n' if subheading: sub_style_parts = [] sub_fs = comp.get("subheading_font_size", "") sub_color = comp.get("subheading_color", "") sub_ls = comp.get("subheading_letter_spacing", "") if sub_fs: sub_style_parts.append(f"font-size: {sub_fs}") if sub_color: sub_style_parts.append(f"color: {sub_color}") if sub_ls: sub_style_parts.append(f"letter-spacing: {sub_ls}") if text_align: sub_style_parts.append(f"text-align: {text_align}") s_style = f' style="{"; ".join(sub_style_parts)}"' if sub_style_parts else "" inner += f'{subheading}
\n' elif ctype == "Glass_Canvas": md = comp.get("markdown_content", "") or comp.get("body", "") html_content = simple_markdown_to_html(md) # Build inline style from custom style props gs_parts = ["width:100%", "min-height:100%", "box-sizing:border-box"] # --- Auto font-size scaling for Glass_Canvas --- # When content is too long for the allocated grid rows, shrink font-size # to avoid overflow into adjacent components. # Estimation: ~80 chars per row at 16px base font-size (with padding). user_font_size = comp.get("font_size", "") if not user_font_size: # Only auto-scale when user hasn't set a custom size grid_area_str = comp.get("grid_area", "") if grid_area_str: try: ga_parts = [int(x.strip()) for x in grid_area_str.split("/")] allocated_rows = ga_parts[2] - ga_parts[0] # row_end - row_start content_len = len(md) chars_per_row = 80 # approximate chars that fit in one grid row at 16px needed_rows = max(1, content_len / chars_per_row) if needed_rows > allocated_rows: # Scale down proportionally, but never below 12px scale = allocated_rows / needed_rows new_size = max(12, int(16 * scale)) if new_size < 16: gs_parts.append(f"font-size: {new_size}px") except (ValueError, IndexError): pass for prop in ["background", "border", "border_radius", "padding", "font_size", "color", "line_height", "text_align"]: val = comp.get(prop, "") if val: css_prop = prop.replace("_", "-") gs_parts.append(f"{css_prop}: {val}") grid_style = "; ".join(gs_parts) + ";" tension = comp.get("tension_score", None) if tension is not None: weight = int(300 + (float(tension) * 600)) inner = f'{html_content}
\n'
else:
inner = f'{html_content}
\n'
elif ctype == "Floating_Meta":
pos = comp.get("position", "top-left")
items_html = "".join([f"{item}" for item in comp.get("items", [])])
fm_style_parts = []
for prop in ["font_size", "color", "letter_spacing", "text_align"]:
val = comp.get(prop, "")
if val:
fm_style_parts.append(f"{prop.replace('_', '-')}: {val}")
fm_style = f' style="{"; ".join(fm_style_parts)}"' if fm_style_parts else ""
inner = f'\n'
elif ctype == "Stat_Block":
inner = f'''{comp.get("number", "")}{comp.get("unit", "")}
{comp.get("label", "")}
\n' elif ctype == "Page_Ghost_Number": # Ghost numbers are decorative overlays — still use absolute positioning return f'
{comp.get("number", "")}
\n'
elif ctype == "Shaped_Canvas":
shape = comp.get("shape_keyword", "circle")
md = comp.get("markdown_content", "") or comp.get("body", "")
html_content = simple_markdown_to_html(md)
sc_style_parts = []
for prop in ["background", "border", "border_radius", "padding"]:
val = comp.get(prop, "")
if val:
sc_style_parts.append(f"{prop.replace('_', '-')}: {val}")
sc_style = f' style="{"; ".join(sc_style_parts)}"' if sc_style_parts else ""
inner = f'''{html_content}
{label_html}{html_body}
\n'
# Sidenotes bypass grid-item wrapping for Tufte layout — returned raw
return inner
elif ctype == "Delta_Widget":
metric = comp.get("metric", "")
value = comp.get("value", "")
delta = comp.get("delta", "")
trend = comp.get("trend", "up") # up / down / flat
label = comp.get("label", "")
trend_symbol = {"up": "▲", "down": "▼", "flat": "─"}.get(trend, "")
trend_color = {"up": "#22c55e", "down": "#ef4444", "flat": "var(--c-muted)"}.get(trend, "var(--c-muted)")
inner = f'''\n'''
elif ctype == "Process_List":
steps = comp.get("steps", [])
steps_html = ""
for i, step in enumerate(steps):
title = step.get("title", "")
desc = step.get("description", "")
steps_html += f'{title}
{desc}
- {steps_html}
\n'
# Note: unified_svg is now injected per page-section as a bg-layer
# (since page-sections are block-level, a single spanning div won't work)
# Render each page as a block-level section in normal document flow
for page_idx, page in enumerate(pages):
archetype = page.get("archetype", "cover_hero")
# Auto-assign grid areas
_auto_assign_grid_areas(archetype, page.get("components", []))
# Cognitive Load Margins
total_chars = 0
sidenotes = []
main_components = []
for comp in page.get("components", []):
text_content = comp.get("markdown_content", "") or comp.get("body", "") or ""
total_chars += len(text_content)
if comp.get("type") == "Sidenote_Block":
sidenotes.append(comp)
else:
main_components.append(comp)
for step in comp.get("steps", []):
total_chars += len(step.get("title", "")) + len(step.get("description", ""))
if total_chars > 500:
safe_inset = "8% 10%"
elif total_chars > 200:
safe_inset = "10% 12%"
else:
safe_inset = ""
safe_inset_style = f" inset: {safe_inset};" if safe_inset else ""
# Page section: block-level box in document flow (no top/absolute)
html += f'\n
\n'
else:
# ═══ LEGACY PER-PAGE MODE (single-page documents) ═══
for page_idx, page in enumerate(pages):
archetype = page.get("archetype", "cover_hero")
_auto_assign_grid_areas(archetype, page.get("components", []))
total_chars = 0
sidenotes = []
main_components = []
for comp in page.get("components", []):
text_content = comp.get("markdown_content", "") or comp.get("body", "") or ""
total_chars += len(text_content)
if comp.get("type") == "Sidenote_Block":
sidenotes.append(comp)
else:
main_components.append(comp)
for step in comp.get("steps", []):
total_chars += len(step.get("title", "")) + len(step.get("description", ""))
if total_chars > 500:
safe_inset = "8% 10%"
elif total_chars > 200:
safe_inset = "10% 12%"
else:
safe_inset = ""
safe_inset_style = f" inset: {safe_inset};" if safe_inset else ""
page_svg = ""
if svg_type != "none":
data_points = None
for comp in page.get("components", []):
dp = comp.get("data_points")
if dp and isinstance(dp, list) and all(isinstance(x, (int, float)) for x in dp):
data_points = dp
break
if data_points and len(data_points) >= 2:
page_svg = _generate_data_driven_svg(data_points, canvas_w, canvas_h, palette['accent'])
elif continuous_svgs and page_idx < len(continuous_svgs):
page_svg = continuous_svgs[page_idx]
elif bg_svg:
page_svg = bg_svg
html += f'\n\n'
# Per-page unified background SVG (replaces the old single spanning bg-layer-full)
if unified_svg:
html += f'
\n'
html += '{unified_svg}
\n'
# Per-page data-driven SVG background (overlays on top of unified bg)
if svg_type != "none":
data_points = None
for comp in page.get("components", []):
dp = comp.get("data_points")
if dp and isinstance(dp, list) and all(isinstance(x, (int, float)) for x in dp):
data_points = dp
break
if data_points and len(data_points) >= 2:
page_svg = _generate_data_driven_svg(data_points, canvas_w, canvas_h, palette['accent'])
html += f' {page_svg}
\n'
# Tufte layout
if archetype == "tufte_report" and sidenotes:
html += f' \n'
html += f'
\n'
else:
html += f' \n'
for comp in main_components:
html += " " + render_component(comp)
html += '
\n'
html += ' \n'
for comp in sidenotes:
html += " " + render_component(comp)
html += '
\n'
html += ' \n'
for comp in page.get("components", []):
html += " " + render_component(comp)
html += '
\n'
html += ' \n'
if page_svg:
html += f'
\n'
else:
html += f' {page_svg}
\n'
if archetype == "tufte_report" and sidenotes:
html += f' \n'
html += f'
\n\n'
for comp in main_components:
html += " " + render_component(comp)
html += '
\n'
html += ' \n'
for comp in sidenotes:
html += " " + render_component(comp)
html += '
\n'
html += ' \n'
for comp in page.get("components", []):
html += " " + render_component(comp)
html += '
\n\n'
html += "\n"
# 4. Save
with open(output_html_path, 'w', encoding='utf-8') as f:
f.write(html)
return output_html_path, palette
if __name__ == "__main__":
main()