Reference

Changelog

All notable changes to Digital Bunker Web to Widget. Versions follow semantic versioning.

1.0.0

2026-09-20LATEST

First release on Fab. Everything below is covered by automation tests (DigitalBunker.WebUMG.*, 21 contracts) on Unreal Engine 5.8.

Agent skills and activation3

  • The 8 agent skills (best-practices, design, from-image, screen, import, bind, reimport, diagnostics) are served by a hosted MCP server (https://mcp.digitalxbunker.com) rather than shipping as files, so they improve without you reinstalling anything. Every command a skill tells your agent to run (webumg.py lint, webumg.py import, ...) still runs entirely on your own machine against your own project — only the guidance text is hosted.
  • Your activation code is in ACTIVATION.txt at the root of this plugin folder: paste it at https://mcp.digitalxbunker.com/activate and a license key is issued instantly — no account, no order number, nothing to wait on. The page it lands you on fills that key into a ready-made config for Claude Code, Cursor, Codex CLI or OpenCode with a copy button, or use Tools/setup-mcp.py to have it written for you.
  • Nothing else in the plugin needs a key or a network connection. The importer, the CLI, the commandlet and all 21 automation contracts run entirely offline; only the optional hosted guidance text is gated.

Added32

  • Inline <svg> elements and img src="*.svg" files are rasterized into UI textures at 2x the CSS size by a built-in renderer: rect, circle, ellipse, line, polyline, polygon, path (every command including arcs), g, use, symbol, transforms, nonzero/evenodd fills, strokes with caps, joins and miter limit, opacity, linear and radial gradients, viewBox with preserveAspectRatio, currentColor (MAP014 info; MAP023 lists what is skipped: text, filters, masks, clip paths, dash arrays).
  • External stylesheets: <link rel="stylesheet"> files next to the HTML are loaded in document order, and @import statements (local, with media lists) are spliced in recursively (HTML013; HTML011/CSS004 when a file is remote or missing).
  • aspect-ratio with one px side derives the other (w-[200px] aspect-video).
  • transform-origin (keywords, percentages, px, Tailwind origin-*) sets the render transform pivot (MAP022 when a px origin has no px box).
  • text-transform: capitalize title-cases the text at import.
  • Absolute children are layered in CSS paint order: those that precede positioned (relative) flow content in the same parent go into an _Underlay canvas beneath it (MAP018), so frame images and glows placed before the content no longer cover it in UMG.
  • transform: translate(-50%, -50%) and translateX/translateY percentages in inline styles and stylesheets map to canvas slot alignment, the same as the Tailwind -translate-x-1/2 classes.
  • transform: rotate(), scale() and px translate() map to the widget render transform (MAP021).
  • Borders on some sides only (border-b, border-l) are drawn as edge lines instead of a four-sided outline (MAP020).
  • A text-only flex box centres or right-aligns its text with justify-content and align-items in both axes.
  • An absolute element stretched between two edges with an auto size on the other axis resolves its extent from the parent's px box instead of collapsing to zero (MAP019 when it cannot).
  • A progress bar whose fill is a gradient takes the gradient's first stop as the fill colour.
  • Tolerant HTML parser with entity decoding, whitespace collapsing, raw-text style/script handling, structured diagnostics with line and column, and a nesting-depth guard.
  • CSS value model (lengths, boxes, colors including rgb, hsl, oklch, oklab, named colors) and a stylesheet parser with element, class, id, attribute, descendant and child selectors, pseudo-classes hover/focus/active/disabled, specificity, :root custom properties, var() with fallbacks, @layer, @supports, and @theme tokens.
  • Tailwind v3/v4 utility expansion without a compiler: layout, flex, grid, spacing, sizing, position, typography, colors with /opacity, arbitrary values, !important, negative values, responsive variants against a design viewport, dark:, state variants, and a full default palette.
  • Cascade producing one computed style per element from Preflight or browser defaults, stylesheet rules, Tailwind utilities (with Tailwind precedence independent of class order), inline style and !important.
  • Mapper producing an engine-independent widget plan: Vertical/Horizontal/Wrap/Grid/Scroll boxes, Overlay plus Canvas for absolute children with anchors from insets, Border and Size Box decorations, buttons with hover/pressed/disabled styles, images, progress bars (including the nested-div pattern), form controls, spacers for justify-content, Collapsed hidden elements, stable naming, binding and event collection, localization text entries.
  • Deterministic plan JSON manifest with sorted keys and a SHA1 plan hash; round-trip parsing.
  • Editor emitter creating Widget Blueprints through the standard factory, importing images as UI textures, routing text through a String Table, recording provenance metadata, compiling and saving.
  • Re-import that reuses widgets by name and class (preserving Event Graph references and designer tweaks), reports added/kept/reclassed/removed, and refuses to overwrite foreign assets without --force.
  • Generated C++ binding header with BindWidget members, BlueprintImplementableEvents and text keys.
  • DBWebUMGImport commandlet with JSON report, lint mode, manifest and header output; Tools/webumg.py CLI; Tools menu import; Content Browser re-import action.
  • Portable-boundary checker, authoring guide for agents, support matrix, diagnostics reference.
  • Eight Agent Skills served over MCP (see "Agent skills and activation" above), including webumg-from-image for 1:1 reconstruction of a supplied screenshot or mockup, with Tools/setup-mcp.py to wire up Claude Code, Cursor, Codex CLI and OpenCode.
  • DBWebUMG.Render console command and webumg.py render: offscreen PNG of an imported widget plus a geometry JSON (absolute rectangle and visibility per widget) for numeric comparison against the browser.
  • Demo content: Content/DigitalBunkerWebUMG/Demo/WBP_CombatHUD imported from Tests/Fixtures/combat_hud.html; gradient materials under Content/DigitalBunkerWebUMG/Materials.
  • backdrop-blur-* / backdrop-filter: blur() map to a native UMG Background Blur (frosted panels).
  • CSS and Tailwind gradients become native gradient layers: two shipped UI materials (linear, radial) instanced per gradient. Up to three stops with positions, angles, CSS corner keywords, circle/ellipse extents and premultiplied sRGB interpolation follow the specification; the gradient probe fixture renders within 1/255 of Chrome. Rounded corners kept, padding box covered. Fades and vignettes no longer need baked PNGs.
  • data-webumg-ignore marks preview-only elements (a gameplay screenshot behind a HUD) that the importer skips (MAP016); on a <script> it marks a preview helper (HTML010 info).
  • Font import: font-family resolves to @font-face files or installed system fonts, imported as inline Font Face assets and a composite Font per family with faces by weight and slant (EMIT009/EMIT010). Line heights are computed from the real font metrics the way Slate rounds them, unitless line-height inherits as a factor, Slate sizes are fractional, and single words never wrap.
  • Buttons with gradient backgrounds draw the gradient on each state brush (normal, hovered, pressed, disabled).
  • webumg.py render composites in gamma space like Slate and browsers do; --window captures through a real Slate window for ground truth.

Fixed during pre-release testing against a real HUD6

  • hidden now beats other display utilities regardless of class order, as in Tailwind (a hidden flex death screen rendered visible).
  • Canvas children with a fixed width and automatic height no longer collapse to zero height.
  • An inline element with flex-1 inside a flex row now fills the row.
  • A flex container centring a single styled inline element keeps the element as an item with its own style; block containers that collapse to a text block keep the inline element style.
  • rounded-full maps to half-height rounding; a fixed radius larger than the box drew nothing.
  • CLI recovers content paths mangled by Git Bash path conversion.

Known limitations5

  • Inline formatting inside a text run is flattened (MAP012); RichTextBlock support is planned.
  • Gradients use at most three stops (MAP005 for more); angled or circular gradients on elements without a resolvable px size are rendered as if square (MAP017); box-shadow is ignored (MAP006).
  • Remote stylesheets are not fetched (HTML011); @media blocks are ignored (CSS002).
  • The SVG rasterizer draws no text, filters, masks, clip paths or dash arrays (MAP023).
  • Events are declared in the header but the Button OnClicked to event wiring in the Blueprint graph is manual in this version.