eidotter 0.18.0 → 0.19.0

package/LICENSE.md

@@ -64,4 +64,44 @@ For the avoidance of doubt, Section 5(b) does not affect any right the Licensor
 
 ---
 
-For more information about the license, visit: https://creativecommons.org/licenses/by-nc/4.0/ 
+For more information about the license, visit: https://creativecommons.org/licenses/by-nc/4.0/
+
+---
+
+# Third-Party Licenses
+
+eidotter bundles the following third-party software into its distributed package. Each third-party component retains its original license, reproduced below in full as required by that license.
+
+## pixelarticons
+
+[pixelarticons](https://github.com/halfmage/pixelarticons) — authentic DOS pixel art icons. Bundled into `dist/index.es.js` and `dist/index.umd.js` via `src/components/Icon/components/Icon.tsx`.
+
+```
+MIT License
+
+Copyright (c) 2019 Gerrit Halfmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Flexi IBM VGA True
+
+Flexi IBM VGA True v2 — bitmap-style remake of the IBM VGA BIOS font by VileR (int10h.org). Bundled as `src/styles/fonts/Flexi_IBM_VGA_True.ttf` and loaded via `src/styles/fonts.css`.
+
+Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/). Full license text and attribution notice: `src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt`.

package/README.md

@@ -12,7 +12,7 @@ npm install eidotter
 
 ```tsx
 import { Terminal, Button, Alert } from 'eidotter';
-import 'eidotter/fonts.css';   // Flexi IBM VGA False @font-face (required)
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
 import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
 import 'eidotter/tokens.css';  // Design token CSS variables (required)
 
@@ -35,7 +35,7 @@ function App() {
 Import the styles, tokens, and font. All component styling is pre-compiled — no build tools required.
 
 ```tsx
-import 'eidotter/fonts.css';   // Flexi IBM VGA False @font-face (required)
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
 import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
 import 'eidotter/tokens.css';  // CSS variable definitions
 
@@ -43,7 +43,7 @@ import 'eidotter/tokens.css';  // CSS variable definitions
 import 'eidotter/themes/amber-mono.css';
 ```
 
-**Font:** eiDotter uses [Flexi IBM VGA False](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — a vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). It scales cleanly at any size. The `fonts.css` import loads the bundled TTF via `@font-face`. No fallback fonts are configured so you'll immediately see if the font isn't loading.
+**Font:** eiDotter uses [Flexi IBM VGA True v2](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — an aspect-corrected vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). The "True" variant matches authentic 4:3 VGA proportions with an extended character set (Greek, Cyrillic, Hebrew, Latin). The `fonts.css` import loads the bundled TTF via `@font-face`. No fallback fonts are configured so you'll immediately see if the font isn't loading.
 
 ### With Tailwind CSS
 
@@ -74,7 +74,7 @@ For React Aria state variants and animations, use the enhanced preset:
 presets: [require('eidotter/tailwind.preset.enhanced')],
 ```
 
-## Available Components (v0.18.0)
+## Available Components (33)
 
 | Component | Description |
 |-----------|-------------|
@@ -92,7 +92,8 @@ presets: [require('eidotter/tailwind.preset.enhanced')],
 | CommandPrompt | Interactive command-line input with blinking cursor |
 | FilterBar | Multi-select toggle group for faceted filtering |
 | Footer | Site footer with legal links (Impressum + Datenschutz) |
-| Icon | SVG icons backed by @untitledui/icons |
+| Header | Sticky site header composing branding + Nav — retro/modern variants |
+| Icon | SVG icons backed by pixelarticons (MIT) — authentic DOS pixel art |
 | InlineExpand | Inline disclosure widget for expanding text within prose |
 | Input | Text input with DOS styling and error variant |
 | Modal | Dialog overlay with title bar and close button |
@@ -113,6 +114,14 @@ presets: [require('eidotter/tailwind.preset.enhanced')],
 
 ## Component Examples
 
+### Header
+
+```tsx
+<Header brandName="DMNC.TECH" items={navItems} variant="retro">
+  {/* or use children for custom branding */}
+</Header>
+```
+
 ### Terminal
 
 ```tsx
@@ -213,7 +222,7 @@ Available themes: `amber-mono`, `cga-amber`, `cga-mode4-p0`, `cga-mode4-p1`, `cg
 
 **Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
 
-**Typography:** `font-dos` (Flexi IBM VGA False), `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
+**Typography:** `font-dos` (Flexi IBM VGA True v2), `text-dos-text-xs` through `text-dos-display-2xl`, `leading-dos-text-xs` through `leading-dos-display-2xl`
 
 **Spacing:** 4px grid via design tokens
 

package/dist/components/Header/components/Header.d.ts

@@ -1,25 +1,24 @@
 import React from 'react';
 import type { NavItem, NavProps } from '../../Nav';
 import './Header.css';
-export interface HeaderProps {
-    /** Site branding — text string or custom ReactNode (logo, icon + text, etc.) */
-    branding: React.ReactNode;
-    /** Href for the branding link (default: "/") */
-    brandingHref?: string;
-    /** Navigation items */
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Site brand name displayed in the header */
+    brandName?: string;
+    /** Href for the brand link (default: "/") */
+    brandHref?: string;
+    /** Navigation items passed through to Nav */
     items: NavItem[];
     /** Currently active href (highlights matching nav link) */
     activeHref?: string;
-    /** Visual variant */
+    /** Visual variant applied to both header and nav */
     variant?: 'retro' | 'modern';
-    /** Custom link component for framework routing (e.g., Next.js Link, React Router Link) */
+    /** Whether the header sticks to viewport top */
+    sticky?: boolean;
+    /** Custom link component for framework routing (Next.js Link, React Router Link, etc.) */
     linkComponent?: NavProps['linkComponent'];
+    /** Custom branding content — replaces brandName when provided */
+    children?: React.ReactNode;
     /** Additional CSS class name */
     className?: string;
 }
-/**
- * Standard site header composing branding + Nav.
- * Provides the canonical layout for all eidotter-consuming sites:
- * branding left, desktop nav right, hamburger on mobile.
- */
-export declare const Header: React.FC<HeaderProps>;
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Icon/components/Icon.d.ts

@@ -1,10 +1,20 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import './Icon.css';
-type UTIIcon = FC<{
-    size?: number;
-    className?: string;
-}>;
-declare const ICON_MAP: Record<string, UTIIcon>;
+type PixelIcon = FC<React.SVGProps<SVGSVGElement>>;
+declare const ICON_MAP: {
+    Info: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Warning: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Error: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Done: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Check: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Close: PixelIcon;
+    'Chevron Up': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    'Chevron Down': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    App: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Cancel: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Fullscreen: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Add: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+};
 export type IconName = keyof typeof ICON_MAP;
 export type IconSize = 'L' | 'S';
 export interface IconProps {
@@ -24,8 +34,9 @@ export interface IconProps {
     'aria-label'?: string;
 }
 /**
- * Icon component backed by @untitledui/icons.
+ * Icon component backed by pixelarticons (MIT licensed).
  * Renders inline SVG with proper viewBox scaling at any size.
+ * The DOS pixel aesthetic matches eidotter's design language.
  */
 export declare const Icon: FC<IconProps>;
 export {};