diff --git a/src/lib/components/AccessibilityPanel.svelte b/src/lib/components/AccessibilityPanel.svelte new file mode 100644 index 0000000..790117a --- /dev/null +++ b/src/lib/components/AccessibilityPanel.svelte @@ -0,0 +1,100 @@ +
+

Accessibility & Testing

+
+
+

Contrast Benchmarks

+ + + + + + + + + + + + + + + + + + + + + + + + + +
PairRatioStatus
Ghost Pixel on Event Horizon17.17:1Pass
Dim Thermal Throttle on Event Horizon4.84:1Pass
Bad Sector on Core MeltdownDecorative only⚠
+
+
+

Non-Color Cues

+
    +
  • Links Solid underline + Phantom Current
    • +
  • Errors Amber Alert + wavy underline + icon
    • +
  • Warnings Stack Overglow wavy underline
    • +
  • Spelling Amber Alert dotted underline variant
    • +
+
+
+

Test Checklist

+
    +
  • ☑ Five programming languages rendered
    • +
  • ☑ Markdown, JSON, diff, terminal verified
    • +
  • ☑ ANSI 16 + UI chrome demonstrated
    • +
  • ☑ Motion honors user prefers-reduced-motion
    • +
+
+
+
+ + diff --git a/src/lib/components/LanguageShowcase.svelte b/src/lib/components/LanguageShowcase.svelte new file mode 100644 index 0000000..49e40fd --- /dev/null +++ b/src/lib/components/LanguageShowcase.svelte @@ -0,0 +1,142 @@ +
+

Language Snapshots

+

+ Nine grammars render simultaneously, satisfying the spec requirement for multi-language + verification. +

+
+
+
+ TypeScript + ES2024 +
+ 
// Scoped diagnostic enforcing semantic priority
+export class KernelProbe {
+    readonly threshold: number = 85.5
+    async ping(bus: SystemBus): Promise<void> {
+        const reading = await bus.read("temp")
+        if (reading > this.threshold) {
+            throw new Error(`🔥 kernel panic: ${reading}°C`)
+        }
+    }
+}
+
+ +
+
+ Python + 3.12 +
+ 
#!/usr/bin/env python3
+"""Digital Rust semantic sample"""
+
+@dataclass
+class Snapshot:
+    name: str
+    ok: bool = True
+
+    def emit(self, metric: float) -> None:
+        print(f"{self.name}: {metric:.2f}")
+
+RUN = Snapshot("ansi-map", True)
+if __name__ == "__main__":
+    RUN.emit(4.50)
+
+ +
+
+ Rust + 1.76 +
+ 
// Attributes + lifetimes share Dead Thread
+#[derive(Debug, Clone)]
+pub struct Telemetry<'a> {
+    buffer: &'a [u8],
+    heat: f32,
+}
+
+impl Telemetry<'_> {
+    pub fn check_integrity(&self) -> Result<bool, Error> {
+        if self.heat > 95.0 {
+            return Err(Error::new(ErrorKind::Other, "KERNEL PANIC"))
+        }
+        Ok(true)
+    }
+}
+
+ +
+
+ Markdown + Spec prose +
+ 
## Digital Rust Guarantees
+- Tokens inherit `Ghost Pixel` when undefined
+- Links stay underlined [even offline](spec.md)
+> Errors outrank keywords every time.
+
+ +
+
+ JSON / TOML + Config +
+ 
{
+  "editor": {
+    "background": "#110402",
+    "cursor": "#D4A759",
+    "useRainbowBrackets": true
+  },
+  "diagnostics": ["error:wavy", "warning:stack"]
+}
+
+ +
+
+ HTML + CSS + Markup +
+ 
<section class="panel">
+  <h3>@keyframes glitch</h3>
+</section>
+
+.panel {
+  border: 1px solid var(--dark-packet);
+  color: var(--ghost-pixel);
+}
+
+ +
+
+ Diff / Git + Unified +
+ 
@@ -12,6 +12,7 @@
+- panic!("kernel meltdown")
++ log::warn!("stack overglow engaged")
+  return Ok(())
+
+ +
+
+ Shell / CLI + Bash +
+ 
rust@host$ digitalrust --apply --profile="dark"
+rust@host$ export THEME="digital-rust"
+rust@host$ printf "%s\n" $THEME
+
+ +
+
+ SQL + ANSI +
+ 
SELECT
+    COUNT(*) AS total_panics
+FROM errors
+WHERE palette = 'digital-rust'
+  AND severity IN ('fatal', 'critical');
+
+
+
diff --git a/src/lib/components/PaletteSection.svelte b/src/lib/components/PaletteSection.svelte new file mode 100644 index 0000000..e5ab30e --- /dev/null +++ b/src/lib/components/PaletteSection.svelte @@ -0,0 +1,185 @@ + + +
+

Main Color Palette

+

Warm rust-to-void gradient used across editor, UI, and docs.

+
+ {#each rustRamp as entry (entry.id)} +
+ + {#if entry.id === 'digital-rust'}{entry.name}{:else}{entry.name}{/if} + + {entry.hex.toUpperCase()} +
+ {/each} +
+
+ +
+

ANSI 16-Color Map

+
+ {#each ansiSlots as slot (slot.slot)} + {@const entry = color(slot.colorId)} +
+ {slot.slot} + {entry.name} + {entry.hex} +
+ {/each} +
+
+ + diff --git a/src/lib/components/PreviewGallery.svelte b/src/lib/components/PreviewGallery.svelte new file mode 100644 index 0000000..d11a8d9 --- /dev/null +++ b/src/lib/components/PreviewGallery.svelte @@ -0,0 +1,256 @@ + + +
+

Theme Preview

+
+ {#each images as image, i (image.full)} + + {/each} +
+
+ + event.target === lightbox && lightbox.close()} + onkeydown={(event) => { + if (event.key === 'ArrowLeft') show(current - 1); + if (event.key === 'ArrowRight') show(current + 1); + }} +> + + + + {images[current].alt} + + + diff --git a/src/lib/components/SiteFooter.svelte b/src/lib/components/SiteFooter.svelte new file mode 100644 index 0000000..80c66a2 --- /dev/null +++ b/src/lib/components/SiteFooter.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/SiteHeader.svelte b/src/lib/components/SiteHeader.svelte new file mode 100644 index 0000000..44ba311 --- /dev/null +++ b/src/lib/components/SiteHeader.svelte @@ -0,0 +1,194 @@ + + +
+

DIGITAL RUST

+ Spec v1.2.2 +
Syntax · UI · Terminal
+
+ A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. +
+ +
+ + diff --git a/src/lib/components/SpecGuarantees.svelte b/src/lib/components/SpecGuarantees.svelte new file mode 100644 index 0000000..bae47fd --- /dev/null +++ b/src/lib/components/SpecGuarantees.svelte @@ -0,0 +1,90 @@ +
+

Spec Guarantees

+
+
+

Priority Stack

+
    +
  • Error scopes override everything with Amber Alert
    • +
  • + Warnings inherit Stack Overglow with wavy underline +
    • +
  • Semantic tokens fall back to TextMate colors when absent
    • +
+
+
+

Language Coverage

+
    +
  • TypeScript · Python · Rust · Markdown · JSON/TOML
    • +
  • HTML/CSS · SQL · Shell · Diff/SCM views
    • +
  • Template + decorator scopes, regex, interpolation
    • +
+
+
+

Editor & UI

+
    +
  • Tabs, gutter, minimap, status bar, panels
    • +
  • Diagnostics + git markers reuse ANSI cues
    • +
  • Focus rings + disabled states meet contrast rules
    • +
+
+
+

Accessibility

+
    +
  • Solid vs. wavy underline separates links/errors
    • +
  • Color-blind safe via redundant icons + patterns
    • +
  • Documented contrast pairs for auditing
    • +
+
+
+
+ + diff --git a/src/lib/components/TerminalSection.svelte b/src/lib/components/TerminalSection.svelte new file mode 100644 index 0000000..cc0e85a --- /dev/null +++ b/src/lib/components/TerminalSection.svelte @@ -0,0 +1,118 @@ +
+
+
+ digitalrust@entropy:~$ + cat DIGITAL_RUST_SPEC.md | verify --strict +
+
+ fingerprint: 0xDR-1.2.2
+ updated: 2025-11-29
+ priority-order: errors > warnings > semantic > textmate +
+ +
+ digitalrust@entropy:~$ + theme audit --sections syntax ui terminal accessibility +
+
+ Syntax Coverage ........ PASS
+ UI Surfaces ............ PASS
+ ANSI Map ............... PASS
+ Non-color cues ......... PASS +
+ +
+ digitalrust@entropy:~$ + tail -n4 /var/log/digital-rust +
+
+ [OK] WCAG contrast ≥ 4.5:1 enforced
+ [OK] Markdown + JSON + Diff snapshots loaded
+ [OK] Terminal ANSI pairs bound to palette
+ [!] Remember: errors outrank keywords +
+ +
+ digitalrust@entropy:~$ + +
+
+
+ + diff --git a/src/lib/components/TokenMap.svelte b/src/lib/components/TokenMap.svelte new file mode 100644 index 0000000..6e85e56 --- /dev/null +++ b/src/lib/components/TokenMap.svelte @@ -0,0 +1,250 @@ + + +
+

Token Classification Map

+

+ Each card renders the canonical color, name, and example scopes. Sigils inherit their parent + token color per spec. +

+
+ {#each categories as category (category.title)} + {@const swatch = color(category.colorId)} +
+
+ {category.title} + + {swatch.name} · {swatch.hex} + +
+

{category.description}

+
+ {#each category.examples as example (example.text)} + {example.text} + {/each} +
+
+ {/each} +
+
+ + diff --git a/src/lib/components/UiComponents.svelte b/src/lib/components/UiComponents.svelte new file mode 100644 index 0000000..c72f1ca --- /dev/null +++ b/src/lib/components/UiComponents.svelte @@ -0,0 +1,95 @@ +
+

UI Components

+

+ The Digital Rust UI Specification: chunky hardware panel switches, recessed input wells, and + the press-and-release cycle. Rest carries an offset shadow and inner-highlight bevel; hover + lifts toward the light; active drives the element into the rack. + Full component gallery → +

+
+
+

Buttons

+
+ + +
+
+ + + +
+
+ +
+

+ rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: press(2px,2px) + + collapse +

+
+ +
+

Inputs — Recessed Wells

+
+ + +
+
+ + +

✗ Connection refused on port 22

+
+

+ Event Horizon well · no offset shadow · hover: Dark Packet border · focus: Digital Rust + border + Stack Overglow ring +

+
+ +
+

Checkbox & Toggle

+
+ +
+
+ +
+
+ +
+
+ +
+

+ checkbox runs the full press cycle · toggle thumb slides on a railed track +

+
+ +
+

Tabs

+
+
+ + + +
+
+ active tab: Null Pointer bg + Digital Rust power rail · hover: Bad Sector fill +
+
+
+ digitalrust@entropy + CPU 42% + Git✓ +
+
+
+
diff --git a/src/lib/components/UiLab.svelte b/src/lib/components/UiLab.svelte new file mode 100644 index 0000000..03b2c3a --- /dev/null +++ b/src/lib/components/UiLab.svelte @@ -0,0 +1,282 @@ +
+

Editor & UI Surfaces

+
+
+
+
+ main.rs + diagnostics.ts + README.md +
+ ● MOD +
+
+
+ 42 + 43 + 44 + 45 +
+
+
#[cfg(test)]
+
+ fn assert_entropy() { +
+
+ ··assert_eq(true, + true); +
+
}
+
+
+
+ Rust Analyzer + CPU 42% + Git✓ +
+
+ +
+

Diff Indicators

+
+ Git Added + Git Modified + Git Deleted +
+
+
+ Memory Leek · bg 15%
+
~ Dead Thread · bg 10%
+
- Amber Alert · bg 15%
+
+
+ +
+

Diagnostics

+
    +
  • ✗ Kernel panic detected: wavy Amber Alert underline
    • +
  • ⚠ Deprecated API: Stack Overglow underline
    • +
  • ℹ Hint bubbles use Dead Thread
    • +
+
+ Inlay hint + parameter: rust +
+
+
+
+ + diff --git a/src/lib/palette.ts b/src/lib/palette.ts index f6f4be0..3e5d83c 100644 --- a/src/lib/palette.ts +++ b/src/lib/palette.ts @@ -99,6 +99,31 @@ export const accentFamilies: DrAccentFamily[] = [ } ]; +export interface AnsiSlot { + slot: string; + colorId: string; +} + +// Canonical 16-colour terminal mapping from the spec's ANSI Color Mapping table. +export const ansiSlots: AnsiSlot[] = [ + { slot: 'Black', colorId: 'event-horizon' }, + { slot: 'Red', colorId: 'digital-rust' }, + { slot: 'Green', colorId: 'memory-leek' }, + { slot: 'Yellow', colorId: 'stack-overglow' }, + { slot: 'Blue', colorId: 'blue-screen' }, + { slot: 'Magenta', colorId: 'fractured-shell' }, + { slot: 'Cyan', colorId: 'dead-thread' }, + { slot: 'White', colorId: 'phosphor-smoke' }, + { slot: 'Bright Black', colorId: 'bad-sector' }, + { slot: 'Bright Red', colorId: 'fatal-error' }, + { slot: 'Bright Green', colorId: 'bright-memory-leek' }, + { slot: 'Bright Yellow', colorId: 'bright-stack-overglow' }, + { slot: 'Bright Blue', colorId: 'bright-blue-screen' }, + { slot: 'Bright Magenta', colorId: 'bright-fractured-shell' }, + { slot: 'Bright Cyan', colorId: 'bright-dead-thread' }, + { slot: 'Bright White', colorId: 'ghost-pixel' } +]; + export const allColors: DrColor[] = [ ...rustRamp, amberAlertText, @@ -123,6 +148,28 @@ export function hexToRgba(hex: string, alpha: number): string { return `rgba(${r}, ${g}, ${b}, ${alpha})`; } +function relativeLuminance(hex: string): number { + const value = parseInt(hex.slice(1), 16); + const channel = (shift: number) => { + const c = ((value >> shift) & 0xff) / 255; + return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); + }; + return 0.2126 * channel(16) + 0.7152 * channel(8) + 0.0722 * channel(0); +} + +export function contrastRatio(hexA: string, hexB: string): number { + const a = relativeLuminance(hexA); + const b = relativeLuminance(hexB); + return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05); +} + +// Text on a swatch uses whichever of the palette endpoints reads better. +export function bestTextColor(bgHex: string): DrColor { + const light = color('ghost-pixel'); + const dark = color('event-horizon'); + return contrastRatio(bgHex, light.hex) >= contrastRatio(bgHex, dark.hex) ? light : dark; +} + function tint(id: string, alpha: number): string { return hexToRgba(color(id).hex, alpha); } diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css index 9661d86..7286c32 100644 --- a/src/lib/styles/app.css +++ b/src/lib/styles/app.css @@ -273,6 +273,16 @@ a:active { color: var(--dead-thread); } +.error-inline { + color: var(--amber-alert-text); + text-decoration: underline wavy var(--amber-alert-text); +} + +.warning-inline { + color: var(--stack-overglow); + text-decoration: underline wavy var(--stack-overglow); +} + /* ──────────────────────────────────────────── Cursor & blinking ──────────────────────────────────────────── */ @@ -923,8 +933,37 @@ footer { .dr-callout.error { border-left: 3px solid var(--amber-alert); } .dr-callout.error .callout-title { color: var(--amber-alert-text); } -/* ── Badges (spec-compliant, supplements .badge in UI lab) ── */ -.badge.warn { +/* ── Badges ── */ +.badge { + border-radius: var(--dr-radius); + padding: 0.2rem 0.6rem; + font-size: var(--dr-text-xs); + text-transform: uppercase; + letter-spacing: 0.08em; + font-weight: 700; + border: 1px solid; +} + +.badge.add { + background: var(--memory-leek-15); + color: var(--memory-leek); + border-color: var(--memory-leek-30); +} + +.badge.mod { + background: var(--dead-thread-15); + color: var(--dead-thread); + border-color: var(--dead-thread-30); +} + +.badge.del { + background: var(--amber-alert-10); + color: var(--amber-alert-text); + border-color: var(--amber-alert-25); +} + +.badge.warn, +.badge.warning { color: var(--stack-overglow); background: var(--stack-overglow-15); border: 1px solid var(--stack-overglow-30); @@ -1007,31 +1046,6 @@ footer { .container { padding: 0; } - - h1 { - font-size: clamp(1.75rem, 10vw, 2.5rem); - letter-spacing: 0.05em; - } - - .token-grid { - grid-template-columns: 1fr; - } - - .color-grid { - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - } - - .color-chip { - height: 72px; - } - - .color-hex { - font-size: 0.6rem; - } - - .ansi-grid { - grid-template-columns: 1fr 1fr; - } } /* ──────────────────────────────────────────── @@ -1050,3 +1064,243 @@ footer { scroll-behavior: auto !important; } } + +/* ──────────────────────────────────────────── + Code showcase + ──────────────────────────────────────────── */ + +.code-showcase { + margin-top: var(--dr-space-2xl); +} + +.markdown-code { + line-height: 1.5; +} + +.md-marker { + color: var(--copper-trace); +} + +.md-heading { + color: var(--fatal-error); + font-weight: 700; + text-transform: uppercase; +} + +.md-list { + color: var(--copper-trace); +} + +.md-link { + color: var(--phantom-current); + text-decoration: underline; +} + +.md-url { + color: var(--dim-stack-overglow); +} + +.md-quote { + color: var(--dr-text-secondary); + font-style: italic; +} + +.md-code { + color: var(--memory-leek); + background: var(--dr-surface-highlight); + padding: 0 0.2rem; + border-radius: var(--dr-radius-sm); +} + +.md-bold { + color: var(--dr-text-primary); + font-weight: 700; +} + +.json-key { + color: var(--dead-thread); +} + +.diff-meta { + color: var(--blue-screen); +} + +.diff-add { + color: var(--dr-text-primary); + background: var(--memory-leek-15); +} + +.diff-remove { + color: var(--phantom-current); + background: var(--amber-alert-15); +} + +.diff-context { + color: var(--dr-text-primary); +} + +.shell-command { + color: var(--stack-overglow); +} + +.shell-flag { + color: var(--fatal-error); +} + +.shell-variable { + color: var(--dr-text-primary); +} + +.code-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); + gap: var(--dr-space-lg); + margin-bottom: var(--dr-space-xl); +} + +.code-block { + background: var(--dr-surface-base); + border: var(--dr-border); + border-radius: var(--dr-radius); + overflow: hidden; + position: relative; + box-shadow: var(--dr-shadow-offset-md), + var(--dr-shadow-inner-highlight); + transition: border-color var(--dr-transition-normal); +} + +.code-block:hover { + border-color: var(--daemon-blood); +} + +.code-block-header { + background: var(--dr-surface-elevated); + padding: var(--dr-space-sm) var(--dr-space-md); + border-bottom: var(--dr-border-subtle); + display: flex; + justify-content: space-between; + align-items: center; +} + +.code-block-title { + color: var(--fatal-error); + font-size: var(--dr-text-sm); + text-transform: uppercase; + letter-spacing: 0.05em; + font-family: var(--dr-font-heading); + font-weight: 700; +} + +.code-block-lang { + color: var(--fatal-error); + font-size: var(--dr-text-xs); + background: var(--dr-surface-base); + padding: 0.2rem 0.5rem; + border-radius: var(--dr-radius-sm); + border: var(--dr-border-subtle); +} + +.code { + padding: var(--dr-space-lg); + font-family: var(--dr-font-mono); + font-size: var(--dr-text-sm); + line-height: 1.6; + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--bad-sector) transparent; +} + +.code:hover { + scrollbar-color: var(--dark-packet) transparent; +} + +/* ── Syntax tokens ── */ + +.keyword { + color: var(--fatal-error); + font-weight: 700; +} + +.function { + color: var(--stack-overglow); +} + +.class-name { + color: var(--dead-thread); +} + +.string { + color: var(--memory-leek); +} + +.number { + color: var(--thermal-throttle); +} + +.comment { + color: var(--dim-thermal-throttle); + font-style: italic; +} + +.variable { + color: var(--dr-text-primary); +} + +.operator { + color: var(--copper-trace); +} + +.punctuation { + color: var(--copper-trace); +} + +.special { + color: var(--copper-trace); +} + +.support { + color: var(--dim-stack-overglow); +} + +.decorator { + color: var(--dead-thread); + font-style: italic; +} + +.literal { + color: var(--bright-stack-overglow); +} + +.constant { + color: var(--bright-stack-overglow); +} + +.parameter { + color: var(--dr-text-primary); +} + +.type { + color: var(--dead-thread); +} + +.pseudo { + color: var(--dim-stack-overglow); +} + +.selector { + color: var(--dr-text-primary); +} + +.css-class { + color: var(--dead-thread); +} + +.at-rule { + color: var(--fatal-error); +} + +.error { + color: var(--amber-alert-text); + text-decoration: wavy underline; +} + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc88df0..5c157cc 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,35 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+ + + + Digital Rust / Demonstration + + + +
+ + + + + + + + + + + +
diff --git a/src/routes/playground/+page.svelte b/src/routes/playground/+page.svelte new file mode 100644 index 0000000..99c64ae --- /dev/null +++ b/src/routes/playground/+page.svelte @@ -0,0 +1 @@ +

Playground stub

diff --git a/src/routes/spec/+page.svelte b/src/routes/spec/+page.svelte new file mode 100644 index 0000000..628719c --- /dev/null +++ b/src/routes/spec/+page.svelte @@ -0,0 +1 @@ +

Spec stub

diff --git a/src/routes/ui/+page.svelte b/src/routes/ui/+page.svelte new file mode 100644 index 0000000..e30cd55 --- /dev/null +++ b/src/routes/ui/+page.svelte @@ -0,0 +1 @@ +

UI stub