eidotter 0.20.1 → 0.22.0

package/guidelines/README.md

@@ -8,7 +8,7 @@ eidotter provides 36 ready-to-use components with consistent DOS terminal stylin
 
 - **Dark theme only** - Amber-on-black phosphor CRT aesthetic
 - **CGA color palette** - 16 authentic CGA colors + amber extensions
-- **Monospace typography** - Flexi IBM VGA True (bitmap-style VGA font)
+- **Monospace typography** - Perfect DOS VGA 437 (pixel-perfect-vector VGA font)
 - **Minimal rounded corners** - 2-4px max (DOS aesthetic)
 - **Phosphor glow effects** - Authentic CRT visual effects
 - **React Aria** - Accessible keyboard/focus handling on interactive components
@@ -101,7 +101,7 @@ import 'eidotter/themes/amber-mono.css';
 Individual imports are still available if you need granular control (e.g., providing your own font or overriding tokens):
 
 ```tsx
-import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face
+import 'eidotter/fonts.css';   // Perfect DOS VGA 437 @font-face
 import 'eidotter/tokens.css';  // Design token CSS variables
 import 'eidotter/styles';      // Component CSS + Tailwind utilities
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -38,6 +38,8 @@
     "tailwind.preset.cjs",
     "tailwind.preset.enhanced.cjs",
     "src/styles/fonts.css",
+    "src/styles/fonts/Perfect_DOS_VGA_437.ttf",
+    "src/styles/fonts/Perfect_DOS_VGA_437_LICENSE.txt",
     "src/styles/fonts/Flexi_IBM_VGA_True.ttf",
     "src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt",
     "src/styles/tokens.css",
@@ -138,7 +140,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.54.0",
-    "vite": "^6.2.0"
+    "vite": "^8.0.10"
   },
   "dependencies": {
     "pixelarticons": "^2.1.0",

package/src/styles/fonts/Perfect_DOS_VGA_437_LICENSE.txt

@@ -0,0 +1,104 @@
+ /
+/(_____________            ____
+\              /______)\  |    |        
+:\      |     /         \:|    |:::::::::: : .. . : ..  . .  :.    .
+  \_____|    /      |    \|    |______  
+___ /               ________          \...     .     .      .
+\______________     \       |  |      /.. . .   .   .             .
+               \            |__|     /
+--x--x-----x----\______     |-/_____/-x--x-xx--x-- - -x -- - -   --  - - - 
+. . . . . . . . . . . .\____|. . . . . .
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - general information  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
+ designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
+ with the 437 Codepage (standard US/International). This is a "bitmap" font,
+ meaning it emulates a bitmap font and can only be used at a given size (8 or
+ multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
+ won't produce antialias if used at round positions.
+ 
+ There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
+ codepage 437. It should be used, for example, if you're opening DOS ASCII
+ files on notepad or another windows-based editor. Since it's faithful to the
+ original DOS codes, it won't accent correctly in windows ("�" would produce
+ something different, not an "e" with an acute).
+ 
+ There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
+ to a windows codepage. This should use accented characters correctly but won't
+ work if you're opening a DOS-based text file.
+ 
+ UPDATE: this is a new version, updated in august/2008. It has fixed leading
+ metrics for Mac systems.
+
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+ 
+ This font was created to be used on a Flash-based ANSi viewer I'm working. To
+ create it, I created a small Quick Basic program to write all characters on
+ screen,
+ 
+  CLS
+  FOR l = 0 TO 255
+    charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
+  NEXT
+  SUB charWrite (lin, col, char$)
+    DEF SEG = &HB800
+    FOR i = 1 TO LEN(char$)
+      POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
+      IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
+    NEXT
+  END SUB
+  
+ Then captured the text screen using SCREEN THIEF (a very, very old screen
+ capture TSR program which converts text screens to images accurately). I then
+ recreated the font polygon by polygon on Fontlab, while looking at the image
+ on Photoshop. No conversion took place.
+
+-------------------------------------------------------------------------------
+>> copyright and stuff >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ This is a free font/file, distribute as you wish to who you wish. You are free
+ to use it on a movie, a videogame, a video, a broadcast, without having to ask
+ my permission.
+
+ Please do not send me emails asking me to sign release forms if it require
+ any sort of scanning or digital compositing. It's a big chore. This license
+ file and a simple confirmation email should suffice as proof that you are
+ allowed to use it.
+
+ Of course I don't mind emails letting me know where something has been used.
+ Those are always gratifying!
+
+ Do NOT sell this font. It's not yours and you can't make money of it.
+
+-------------------------------------------------------------------------------
+>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ Zeh Fernando
+ zeh@zehfernando.com
+ www.zehfernando.com
+
+ rorshack ^ maiden brazil
+
+-------------------------------------------------------------------------------
+>> other notes >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ The year is now 2021. I would be remiss not to mention these more modern font
+ packages:
+
+ https://int10h.org/oldschool-pc-fonts/fontlist/
+
+ They include VGA-like fonts and a bunch of other systems, easily supplanting
+ the need for "Perfect DOS VGA" and then some.
+
+ They use a Creative Commons license.
+
+-------------------------------------------------------------------------------
+^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
+-------------------------------------------------------------------------------

package/src/styles/fonts.css

@@ -1,6 +1,12 @@
 /*
- * Flexi IBM VGA True v2 — scalable TrueType remake of the IBM VGA BIOS font,
- * aspect-corrected (CC BY-SA 4.0, VileR / int10h.org).
+ * Perfect DOS VGA 437 by Zeh Fernando (2002, updated 2008).
+ *
+ * Pixel-perfect-vector TTF — every glyph outline is axis-aligned, no curves,
+ * scales cleanly at any size. Replaces Flexi IBM VGA True (which was a
+ * bezier-outline font that resembled but didn't capture authentic DOS
+ * pixel-art shapes). License: see Perfect_DOS_VGA_437_LICENSE.txt — free
+ * to redistribute and use in any project, including commercial; selling
+ * the font as a standalone is not permitted (which eidotter doesn't do).
  *
  * Single-weight by design: authentic DOS had no bold variant. Emphasis is
  * expressed via color, uppercase, or inverse video — never by weight.
@@ -8,10 +14,10 @@
  * downstream stylesheet accidentally requests a heavier weight.
  */
 @font-face {
-  font-family: 'Flexi IBM VGA True';
+  font-family: 'Perfect DOS VGA 437';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   font-synthesis: none;
-  src: url('./fonts/Flexi_IBM_VGA_True.ttf') format('truetype');
+  src: url('./fonts/Perfect_DOS_VGA_437.ttf') format('truetype');
 }

package/src/styles/theme.amber-mono.css

@@ -29,8 +29,10 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-amber.css

@@ -29,12 +29,14 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-alert-info: #0a1828;
   --color-semantic-alert-success: #122010;
   --color-semantic-alert-warning: #352800;
   --color-semantic-alert-error: #430500;
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-mode4-p0.css

@@ -37,6 +37,8 @@
   --color-semantic-text-accent: #00ff00;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-text-muted: rgba(255, 255, 0, 0.65);
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-border-default: #00ff00;
   --color-semantic-border-focus: #ffff00;
   --color-semantic-border-hover: #ff0000;
@@ -53,8 +55,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-mode4-p1.css

@@ -37,6 +37,8 @@
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff00ff;
   --color-semantic-text-muted: rgba(255, 252, 247, 0.65);
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff00ff;
@@ -53,8 +55,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-mode5.css

@@ -37,6 +37,8 @@
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-text-muted: rgba(255, 252, 247, 0.65);
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff0000;
@@ -53,8 +55,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/tokens.css

@@ -29,12 +29,14 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-alert-info: #1f2228; /** Warm dark blue for info alerts */
   --color-semantic-alert-success: #122010; /** Warm dark green for success alerts */
   --color-semantic-alert-warning: #352800; /** Dark amber for warning alerts */
   --color-semantic-alert-error: #430500; /** Warm dark red for error alerts */
-  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
+  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/tailwind.preset.cjs

@@ -68,6 +68,7 @@ const preset = {
         "dos-text-accent": "var(--color-semantic-text-accent)",
         "dos-text-disabled": "var(--color-semantic-text-disabled)",
         "dos-text-muted": "var(--color-semantic-text-muted)",
+        "dos-text-ai-draft": "var(--color-semantic-text-ai-draft)",
         "dos-border-default": "var(--color-semantic-border-default)",
         "dos-border-focus": "var(--color-semantic-border-focus)",
         "dos-border-hover": "var(--color-semantic-border-hover)",
@@ -85,7 +86,7 @@ const preset = {
       },
       "fontFamily": {
         "dos": [
-          "\"Flexi IBM VGA True\"",
+          "\"Perfect DOS VGA 437\"",
           "monospace"
         ],
         "dos-fallback": [