# ui

"A literal glued to the front of a Razor expression parses as an email address"

In a .razor file, `word@Expr.Member` (e.g. `P@Score.Value`) is parsed as a literal string, not an expression. Razor's email-address heuristic sees the `foo@bar.baz` shape and treats the whole thing as text. The element renders the raw source, with no compile error and no warning. Put the literal inside the expression instead: `@($"P{Score.Value}")`.

razorinterpolation

"A panel's width and height are the outer size (border-box by default)"

In s&box razor UI the declared width/height of a panel is the OUTER number: padding and borders sit inside it, not added on top. The default already behaves like box-sizing: border-box, with no such declaration anywhere. Author every width/height as the outer number the mockup shows; adding padding/border by hand under-sizes every box by exactly its own padding.

"A percent-width flex child renders as a floating pill, not a left-anchored progress fill"

A progress fill built as a plain flex child sized by width:N% renders as a small detached pill floating partway along the track, because the engine's flex layout does not left-pin an under-width percent child the way a browser does. Fill must be position:absolute in a position:relative track.

scssflexbox

"A runtime-written Data-filesystem image needs a code Texture, not a CSS background-image URL"

An image you write to FileSystem.Data at runtime (a per-save thumbnail, a screenshot) is not addressable from a CSS background-image URL -- those resolve against mounted content, not the user Data FS. Decode it into a Texture in code and assign Style.BackgroundImage instead.

uifilesystem

"Building an s&box HUD"

One ScreenPanel host, static UIState for modals, self-closing panels, toast stack: BuildHash every flag the markup reads.

"Defer a synchronous blocking call a few frames so the loading overlay actually paints"

Showing a loading overlay and running a synchronous main-thread job in the same handler never paints the overlay -- the blocking work runs before the render pass. Show the overlay, count down a couple of frames, then run the blocker in OnUpdate.

razorui

"Editing .razor safely (shell/emoji mojibake)"

Razor HUD emoji and dashes die under Get-Content/Set-Content: edit with byte-safe UTF-8 APIs or a real editor.

toolingrazor

"Flex-grow track with a percentage-width child causes a layout feedback loop"

A flex-grow slider track holding a normal-flow fill child sized by width:N% balloons wider as the value increases: take the fill out of flow with position:absolute, and make sure the track carries no overflow:hidden.

uicss

"My s&box UI won't update / is frozen"

BuildHash() is the only re-render trigger: hash everything the markup reads, including collection contents and flags.

uifrozen-ui

"New .razor.scss files are not applied until the editor restarts"

A newly created .razor.scss file is not picked up by a running editor session: the panel component works but is unstyled until the next restart.

"PanelComponent uses OnTreeBuilt, not OnAfterTreeRender"

OnAfterTreeRender(bool) is a Panel hook: on a PanelComponent it fails with CS0115; use parameterless OnTreeBuilt() or OnTreeFirstBuilt().

"Roboto Mono is the engine's monospace font"

s&box ships Roboto Mono (all weights): JetBrains Mono and Consolas only resolve on dev machines with those system fonts. Only five families are reachable from UI CSS.

uifonts

"Runtime textures for UI panels must be assigned from C#"

SCSS background-image only resolves asset paths. Runtime Texture objects must be assigned via Panel.Style.BackgroundImage in OnTreeBuilt.

uitexture

"SliderControl near-min values render scientific notation in CSS style"

The engine SliderControl renders its thumb position as a raw float in a CSS style attribute: near-min values with snap residue produce scientific notation (4.9E-06%), causing a style parse error.

uislider

"TextEntry.OnTextEdited needs an explicit-type block lambda"

An untyped or expression-bodied lambda on TextEntry.OnTextEdited fails with CS8917 or CS0029. Use an explicit param type plus a block body.

"The Razor @namespace trap"

Razor classes get a RootNamespace/folder-derived namespace: declare @namespace and global using or C# can't find your panels.

"Too many font-size declarations (or too much text) corrupt UI glyph rendering"

SUPERSEDED: the font-size-declaration-count theory below was owner-settled (26.07.22) to be a CAPTURE-PATH artifact, not a real render bug. Panels with these exact font-size declarations render pin-sharp on the physical screen. Never strip font-size from a shipping stylesheet to 'fix' captures. See camera-screenshot-cannot-verify-fonts.

uiscss

"transition-delay, :intro and :outro parse cleanly in razor-scss"

transition-delay, :intro and :outro all parse in the engine's razor-scss pipeline, tested isolated on engine build 26.07.22. An earlier caution that treated these selectors as unsupported can relax. A novel selector is worth one isolated test before you write it off, because an unparsed selector aborts the whole stylesheet to a 0x0 render.

razorscss

"Visible cursor blocks game mouse input: no raw bypass exists"

With a visible cursor (MouseVisibility.Visible), mouse buttons that land on a pointer-events panel never reach Input.Down/Pressed, and Input.Keyboard.Down("mouse2") is not a bypass. Raw Mouse.Delta stays live, though, creating a separate trap.

inputmouse