WORK-420
Setting up your dashboard 0 entities found · 9/32 branches scanned
ID:WORK-420Status:done

placeholder: image-src resolver

![Portrait](placeholder:portrait) resolves to a generated, theme-tinted inline SVG placeholder sized to the named shape — deterministic, offline, screenshot-stable.

Priority:mediumComplexity:moderateMilestone:v0.22.0Source:SPEC-106
claude/spec-106-image-src-schemes View source

Criteria completion

Criteria completion: 3 of 3 (100%) checked; tracking started on Jun 13, no incremental history yet0%25%50%75%100%Jun 13Jun 15

Tracking started Jun 13 — check back for trends.

Relationships

Implements 1
Related 4
Branches 2
claude/spec-106-image-src-schemes current done
claude/spec-image-src-scheme-sugar pendingmain done
History 2
  1. 3358f53
    Created (done)by bjornolofandersson
  2. 8bc0dca
    Content editedby Claude
    plan: break SPEC-106 into WORK-418..422 under v0.22.0

Scope

  • Register a placeholder:<shape> resolver (via WORK-418) emitting a generated inline <svg> for each shape: cover (16:9), square, portrait (3:4), wide, banner, avatar (round), thumbnail.
  • The SVG is a neutral scene (e.g. horizon + sun) at the shape's aspect ratio, drawn with theme tokens (var(--rf-color-surface)/--rf-color-muted/--rf-color-border) so it tracks tint + dark mode. Deterministic (no randomness).
  • Unknown shape → fall back to cover + dev warning. alt → accessible label.

Acceptance Criteria

  • placeholder:<shape> emits a deterministic, token-tinted inline SVG for each documented shape, at the correct aspect ratio.
  • Output adapts to light/dark via tokens (no hardcoded colours); identical across runs.
  • Unknown shape falls back to cover with a dev warning; tests cover shapes + fallback.

Dependencies

  • Requires WORK-418 (the scheme registry).

References

  • SPEC-106.

Resolution

Completed: 2026-06-13

Branch: claude/spec-106-image-src-schemes

What was done

  • Added packages/runes/src/lib/placeholder.ts — placeholderSvg(shape, { label }) builds a deterministic inline-SVG Tag tree for each shape: cover (16:9), wide (12:5), banner (3:1), square, portrait (3:4), thumbnail (4:3), avatar (round). Rectangular shapes draw a neutral horizon scene (sun + hill + frame); avatar draws a person silhouette + ring. Coordinates are rounded for stable output.
  • All fills reference theme tokens (var(--rf-color-surface|muted|border)), so placeholders track tint + dark mode; no hardcoded colours.
  • alt → role="img" + aria-label; empty alt → aria-hidden="true" (decorative).
  • Registered the placeholder:<shape> scheme in image-schemes.ts; unknown shape console.warns and falls back to cover.
  • Added packages/lumina/styles/runes/placeholder.css (.rf-placeholder responsive base + round avatar) and imported it in index.css.
  • Tests cover every shape (token-only colours, a11y label), determinism, the cover fallback + warning, and the decorative empty-alt case.

Notes

  • The SVG carries width="100%" and relies on its viewBox for aspect, so browsers compute height from the ratio.