Branch: cfix-webstage-keepstyle

Commit: 110f19e1 (branched from dev)

Summary

Fixes the web StageShow (browser) rendering of slide text items with "Keep Style" checked not matching the stage layout preview inside FreeShow. The web client's port of the slide-text renderer had drifted from the app's in four ways — original item layout was discarded, font sizes were overridden, the canvas used the wrong resolution, and two behavior options were applied differently.

Deep dive

How "Keep Style" works in the app

A slide_text stage item normally re-renders slide text with stage-defined styling. With Keep Style (keepStyle) checked, the app instead renders the slide's items exactly as they appear on the output — original position, size, and text styling — inside a scaled-down slide-resolution canvas:

<!-- frontend SlideText.svelte (style = keepStyle) -->
<Main let:resolution let:width let:height>
    <Zoomed background="transparent" style={getStyleResolution(resolution, width, height, "fit")} center>
        <Textbox {item} ... isStage originalStyle />
    </Zoomed>
</Main>

The originalStyle flag is the key: the app's Textbox only resets the item's own box when it is not set:

// frontend Textbox.svelte
if (isStage && !originalStyle) {
    currentStyle += "display: contents;"
}

What the web client did instead

The stage server has its own ports of SlideText/Textbox/Zoomed, and the keep-style path had drifted:

1. Layout discarded — the web Textbox always appended display: contents (dissolving the item's box: position, dimensions, background), and separately rescaled the item's bounds from slide space to the browser window — inside a canvas that already scales:

// server Textbox.svelte (before)
function getCustomStyle(style) {
    style += "display: contents;"     // unconditional
    return style
}
if (autoStage) itemStyle = itemStyle + newSizes   // window-relative rescale

1. Font size stomped — the text spans appended a font-size override whenever fontSize was truthy, and Stagebox always passed the stage item's font size (default 100px):

<span style="{style ? text.style + (fontSize ? 'font-size: ' + fontSize + 'px;' : '') : ...}">

The app deliberately passes fontSize={0} for slide text ("don't pass fontSize from item style, which is MAX_FONT_SIZE=800").

1. Wrong canvas resolution — the web Zoomed defaults to dynamicResolution: true, overriding the canvas with window.innerWidth/innerHeight. Item coordinates are defined in slide space (1920×1080), so positions only lined up if the browser happened to be fullscreen 1080p:

// server Zoomed.svelte
let resolution = show?.settings.resolution || { width: 1920, height: 1080 }
if (dynamicResolution) resolution = { width: window.innerWidth, height: window.innerHeight }  // ← the problem

1. Option semantics — auto-size was keyed to the deprecated item.auto flag instead of textFit (modern shows only set textFit, so they never auto-sized on the web), and the stage "line count" limit was applied to the current slide, where the app only applies it to next/previous slide previews:

// app:  maxLines={Number(slideOffset !== 0 && stageItem.lineCount)}
// web:  maxLines={Number(stageItem.lineCount)}          ← truncated the live slide

The fix

The web Textbox gained the app's originalStyle mode:

export let originalStyle: boolean = false // keep the slide item's own box/position/text styles ("Keep Style")

// keep the item's original bounds when rendering inside a slide-resolution canvas
if (autoStage && !originalStyle) itemStyle = itemStyle + newSizes

function getCustomStyle(style) {
    // reset item styles (as it's set in parent item) - unless keeping the slide item's own layout
    if (!originalStyle) style += "display: contents;"
    return style
}

And the web SlideText keep-style branch now mirrors the app exactly — slide-resolution canvas, original font sizes, textFit-based auto-size, offset-only line limits:

$: slideResolution = (slide as any)?.settings?.resolution || { width: 1920, height: 1080 }

<Zoomed show={{ settings: { resolution: slideResolution } }} dynamicResolution={false}
        style={getStyleResolution(slideResolution, width, height, "fit")} center>
    <Textbox showId={currentSlide.id} {item} originalStyle
             maxLines={Number(slideOffset !== 0 && stageItem.lineCount)}
             autoSize={(item.textFit !== "none" || item.auto) && autoSize}
             fontSize={0} ... />
</Zoomed>

With fontSize={0}, the span override is skipped and the slide's own text styles apply; when auto-size is enabled, the computed size still takes over (same as the app). The Stagebox call site was aligned too (autoSize={item.textFit !== "none" && item.auto !== false}).

Known remaining difference

Auto-sized text uses a simpler measuring algorithm on the web client than the app's, so auto-fitted items can differ by a small font-size margin. Static keep-style items (the common case) now match exactly.

Verification

Stage server bundle builds cleanly; prettier passes; no new svelte-check findings. Rendering parity is best confirmed visually: open the web stage display with a Keep Style layout and compare against the in-app stage preview (hard-refresh the browser — the stage page is PWA-cached).

🤖 Generated with Claude Code