@rdna/radiants 0.1.3 → 0.1.5

package/fonts.css

@@ -1,105 +1,35 @@
 /* =============================================================================
    fonts.css - @rdna/radiants Font Definitions
+   Imports core (initial load) and editorial (lazy load) font declarations.
+   Existing consumers that import fonts.css get everything.
+   Apps can import fonts-core.css alone for initial load.
    ============================================================================= */
 
-/* -----------------------------------------------------------------------------
-   @font-face Declarations
-   ----------------------------------------------------------------------------- */
-
-/* Mondwest - Body font
-   Consumers may define their own local/project @font-face for Mondwest.
-   The RDNA package does not ship those files due licensing.
-   ----------------------------------------------------------------------------- */
-
-/* Joystix - Heading font
-   ----------------------------------------------------------------------------- */
-
-@font-face {
-  font-family: 'Joystix Monospace';
-  src: url('./fonts/Joystix.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* PixelCode - Monospace font
-   ----------------------------------------------------------------------------- */
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Italic.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Bold-Italic.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Light.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Light-Italic.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'PixelCode';
-  src: url('./fonts/PixelCode-Medium-Italic.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
+@import './fonts-core.css';
+@import './fonts-editorial.css';
 
 /* -----------------------------------------------------------------------------
    Font Family Theme Variables
+   Available at load time even before editorial fonts resolve — components can
+   reference var(--font-blackletter) etc. and the value renders once the font loads.
    ----------------------------------------------------------------------------- */
 
 @theme {
   /* Semantic font roles */
-  --font-sans: 'Mondwest', system-ui, sans-serif;
+  --font-sans: 'Mondwest', Georgia, 'Times New Roman', serif;
   --font-heading: 'Joystix Monospace', monospace;
   --font-mono: 'PixelCode', monospace;
 
-  /* Named brand aliases (font-mondwest, font-joystix) */
-  --font-mondwest: 'Mondwest', system-ui, sans-serif;
+  /* Semantic font roles — extended */
+  --font-display: 'Waves Blackletter CPC', serif;
+  --font-caption: 'Pixeloid Sans', sans-serif;
+  --font-tiny: 'Waves Tiny CPC', serif;
+
+  /* Named brand aliases */
+  --font-mondwest: 'Mondwest', Georgia, 'Times New Roman', serif;
   --font-joystix: 'Joystix Monospace', monospace;
+  --font-pixel-code: 'PixelCode', monospace;
+  --font-blackletter: 'Waves Blackletter CPC', serif;
+  --font-pixeloid: 'Pixeloid Sans', sans-serif;
+  --font-waves-tiny: 'Waves Tiny CPC', serif;
 }

package/generated/ai-contract.json

@@ -289,7 +289,7 @@
         },
         {
           "name": "pure-white",
-          "hex": "#ffffff"
+          "hex": "#fffcf3"
         },
         {
           "name": "success-mint",
@@ -305,7 +305,16 @@
         "text-lg",
         "text-xl",
         "text-2xl",
-        "text-3xl"
+        "text-3xl",
+        "text-4xl",
+        "text-5xl",
+        "text-fluid-sm",
+        "text-fluid-base",
+        "text-fluid-lg",
+        "text-fluid-xl",
+        "text-fluid-2xl",
+        "text-fluid-3xl",
+        "text-fluid-4xl"
       ],
       "weights": [
         "font-normal",

package/generated/contract.freshness.json

@@ -1,8 +1,9 @@
 {
-  "sourceHash": "7d55f626b5e4f15814bc582e07a9568bb249c102ab7e3c39921ec39dfba85ec2",
+  "sourceHash": "373835957df725c1500ea1772e9ec44613f94d0049713586b434dbc695f2bd42",
   "inputs": [
     "packages/radiants/components/core/Alert/Alert.meta.ts",
     "packages/radiants/components/core/AlertDialog/AlertDialog.meta.ts",
+    "packages/radiants/components/core/AppWindow/AppWindow.meta.ts",
     "packages/radiants/components/core/Avatar/Avatar.meta.ts",
     "packages/radiants/components/core/Badge/Badge.meta.ts",
     "packages/radiants/components/core/Breadcrumbs/Breadcrumbs.meta.ts",

package/generated/eslint-contract.json

@@ -11,7 +11,7 @@
       "#fcc383": "sunset-fuzz",
       "#ff6b63": "sun-red",
       "#cef5ca": "mint",
-      "#ffffff": "pure-white",
+      "#fffcf3": "pure-white",
       "#22c55e": "success-mint"
     },
     "hexToSemantic": {
@@ -35,7 +35,7 @@
         "bg": "success",
         "text": "success"
       },
-      "#ffffff": {
+      "#fffcf3": {
         "bg": "card"
       },
       "#22c55e": {
@@ -71,7 +71,7 @@
         "bg": "status-success",
         "text": "status-success"
       },
-      "oklch(1.0000 0.0000 0)": {
+      "oklch(0.9909 0.0123 91.51)": {
         "bg": "card"
       },
       "oklch(0.7227 0.1920 149.58)": {
@@ -322,13 +322,44 @@
       "text-lg",
       "text-xl",
       "text-2xl",
-      "text-3xl"
+      "text-3xl",
+      "text-4xl",
+      "text-5xl",
+      "text-fluid-sm",
+      "text-fluid-base",
+      "text-fluid-lg",
+      "text-fluid-xl",
+      "text-fluid-2xl",
+      "text-fluid-3xl",
+      "text-fluid-4xl"
     ],
     "validWeights": [
       "font-normal",
       "font-medium",
       "font-semibold",
       "font-bold"
+    ],
+    "validLeading": [
+      "leading-tight",
+      "leading-heading",
+      "leading-snug",
+      "leading-normal",
+      "leading-relaxed",
+      "leading-none"
+    ],
+    "validTracking": [
+      "tracking-tight",
+      "tracking-normal",
+      "tracking-wide"
+    ],
+    "validFontFamilies": [
+      "font-sans",
+      "font-heading",
+      "font-mono",
+      "font-display",
+      "font-caption",
+      "font-mondwest",
+      "font-joystix"
     ]
   },
   "textLikeInputTypes": [

package/generated/figma/contracts/app-window.contract.json

@@ -0,0 +1,82 @@
+{
+  "id": "app-window",
+  "name": "AppWindow",
+  "description": "Desktop-style application window with draggable chrome, optional resize handles, and mobile/fullscreen presentations.",
+  "sourcePath": "packages/radiants/components/core/AppWindow/AppWindow.tsx",
+  "schemaPath": "packages/radiants/components/core/AppWindow/AppWindow.schema.json",
+  "importPath": "@rdna/radiants/components/core",
+  "platforms": [
+    "web"
+  ],
+  "category": "layout",
+  "renderMode": "description-only",
+  "tags": [
+    "window",
+    "desktop",
+    "shell"
+  ],
+  "props": {
+    "id": {
+      "type": "string",
+      "description": "Stable window identifier used for aria and share-link behavior."
+    },
+    "title": {
+      "type": "string",
+      "description": "Window title shown in the title bar."
+    },
+    "open": {
+      "type": "boolean",
+      "default": true,
+      "description": "Whether the window is currently rendered."
+    },
+    "resizable": {
+      "type": "boolean",
+      "default": true,
+      "description": "Enables resize handles in desktop window presentation."
+    },
+    "presentation": {
+      "type": "enum",
+      "values": [
+        "window",
+        "fullscreen",
+        "mobile"
+      ],
+      "default": "window",
+      "description": "Selects windowed, fullscreen, or mobile shell presentation."
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Window content, usually an AppWindowBody or custom app layout."
+    }
+  },
+  "subcomponents": [
+    "AppWindow",
+    "AppWindowBody",
+    "AppWindowSplitView",
+    "AppWindowPane"
+  ],
+  "states": [],
+  "variants": [],
+  "exampleProps": {},
+  "controlledProps": [],
+  "examples": [
+    {
+      "name": "Desktop window shell",
+      "code": "<AppWindow id=\"about\" title=\"About\">\n  <AppWindowBody>Content</AppWindowBody>\n</AppWindow>"
+    },
+    {
+      "name": "Two-pane compare layout",
+      "code": "<AppWindow id=\"lab\" title=\"Control Surface Lab\">\n  <AppWindowSplitView>\n    <AppWindowPane>Legacy</AppWindowPane>\n    <AppWindowPane>RDNA</AppWindowPane>\n  </AppWindowSplitView>\n</AppWindow>"
+    }
+  ],
+  "tokens": {},
+  "tokenBindings": {},
+  "replaces": [],
+  "pixelCorners": false,
+  "shadowSystem": null,
+  "styleOwnership": [],
+  "structuralRules": [],
+  "wraps": null,
+  "a11y": null
+}

package/generated/figma/primitive/color.tokens.json

@@ -46,6 +46,15 @@
         }
       }
     },
+    "sky-blue-dark": {
+      "$type": "color",
+      "$value": "oklch(0.47 0.08 237)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#276182"
+        }
+      }
+    },
     "sunset-fuzz": {
       "$type": "color",
       "$value": "oklch(0.8546 0.1039 68.93)",

package/generated/figma/primitive/shape.tokens.json

@@ -126,10 +126,6 @@
     "comfortable": {
       "$type": "dimension",
       "$value": "48px"
-    },
-    "default": {
-      "$type": "dimension",
-      "$value": "{touchTarget.comfortable}"
     }
   },
   "breakpoint": {

package/generated/figma/primitive/typography.tokens.json

@@ -15,19 +15,31 @@
     },
     "lg": {
       "$type": "fontSize",
-      "$value": "1.25rem"
+      "$value": "1.333rem"
     },
     "xl": {
       "$type": "fontSize",
-      "$value": "1.5rem"
+      "$value": "1.777rem"
     },
     "2xl": {
       "$type": "fontSize",
-      "$value": "1.75rem"
+      "$value": "2.369rem"
     },
     "3xl": {
       "$type": "fontSize",
-      "$value": "2rem"
+      "$value": "3.157rem"
+    },
+    "4xl": {
+      "$type": "fontSize",
+      "$value": "4.209rem"
+    },
+    "5xl": {
+      "$type": "fontSize",
+      "$value": "5.61rem"
+    },
+    "display": {
+      "$type": "fontSize",
+      "$value": "5.61rem"
     }
   }
 }

package/generated/figma/rdna.tokens.json

@@ -48,6 +48,15 @@
             }
           }
         },
+        "sky-blue-dark": {
+          "$type": "color",
+          "$value": "oklch(0.47 0.08 237)",
+          "$extensions": {
+            "rdna": {
+              "srgb": "#276182"
+            }
+          }
+        },
         "sunset-fuzz": {
           "$type": "color",
           "$value": "oklch(0.8546 0.1039 68.93)",
@@ -254,10 +263,6 @@
         "comfortable": {
           "$type": "dimension",
           "$value": "48px"
-        },
-        "default": {
-          "$type": "dimension",
-          "$value": "{touchTarget.comfortable}"
         }
       },
       "breakpoint": {
@@ -367,19 +372,31 @@
         },
         "lg": {
           "$type": "fontSize",
-          "$value": "1.25rem"
+          "$value": "1.333rem"
         },
         "xl": {
           "$type": "fontSize",
-          "$value": "1.5rem"
+          "$value": "1.777rem"
         },
         "2xl": {
           "$type": "fontSize",
-          "$value": "1.75rem"
+          "$value": "2.369rem"
         },
         "3xl": {
           "$type": "fontSize",
-          "$value": "2rem"
+          "$value": "3.157rem"
+        },
+        "4xl": {
+          "$type": "fontSize",
+          "$value": "4.209rem"
+        },
+        "5xl": {
+          "$type": "fontSize",
+          "$value": "5.61rem"
+        },
+        "display": {
+          "$type": "fontSize",
+          "$value": "5.61rem"
         }
       }
     }
@@ -629,16 +646,16 @@
       },
       "link": {
         "$type": "color",
-        "$value": "{color.sky-blue}",
+        "$value": "{color.sky-blue-dark}",
         "$extensions": {
           "modes": {
-            "light": "{color.sky-blue}",
+            "light": "{color.sky-blue-dark}",
             "dark": "{color.sky-blue}"
           },
           "rdna": {
             "source": "--color-content-link",
             "srgb": {
-              "light": "#95bad2",
+              "light": "#276182",
               "dark": "#95bad2"
             }
           }

package/generated/figma/semantic/semantic.tokens.json

@@ -243,16 +243,16 @@
     },
     "link": {
       "$type": "color",
-      "$value": "{color.sky-blue}",
+      "$value": "{color.sky-blue-dark}",
       "$extensions": {
         "modes": {
-          "light": "{color.sky-blue}",
+          "light": "{color.sky-blue-dark}",
           "dark": "{color.sky-blue}"
         },
         "rdna": {
           "source": "--color-content-link",
           "srgb": {
-            "light": "#95bad2",
+            "light": "#276182",
             "dark": "#95bad2"
           }
         }

package/generated/figma/tokens.d.ts

@@ -1,6 +1,6 @@
 // AUTO-GENERATED — DO NOT EDIT
 // Generated by scripts/generate-figma-contracts.ts
 
-export type PrimitiveColorTokenName = 'color.cream' | 'color.error-red' | 'color.focus-state' | 'color.ink' | 'color.mint' | 'color.pure-black' | 'color.pure-white' | 'color.sky-blue' | 'color.success-mint' | 'color.sun-red' | 'color.sun-yellow' | 'color.sunset-fuzz' | 'color.warning-yellow';
+export type PrimitiveColorTokenName = 'color.cream' | 'color.error-red' | 'color.focus-state' | 'color.ink' | 'color.mint' | 'color.pure-black' | 'color.pure-white' | 'color.sky-blue' | 'color.sky-blue-dark' | 'color.success-mint' | 'color.sun-red' | 'color.sun-yellow' | 'color.sunset-fuzz' | 'color.warning-yellow';
 export type SemanticColorTokenName = '$description.0' | '$description.1' | '$description.10' | '$description.100' | '$description.101' | '$description.102' | '$description.103' | '$description.104' | '$description.105' | '$description.106' | '$description.107' | '$description.108' | '$description.109' | '$description.11' | '$description.110' | '$description.111' | '$description.112' | '$description.113' | '$description.114' | '$description.115' | '$description.116' | '$description.117' | '$description.12' | '$description.13' | '$description.14' | '$description.15' | '$description.16' | '$description.17' | '$description.18' | '$description.19' | '$description.2' | '$description.20' | '$description.21' | '$description.22' | '$description.23' | '$description.24' | '$description.25' | '$description.26' | '$description.27' | '$description.28' | '$description.29' | '$description.3' | '$description.30' | '$description.31' | '$description.32' | '$description.33' | '$description.34' | '$description.35' | '$description.36' | '$description.37' | '$description.38' | '$description.39' | '$description.4' | '$description.40' | '$description.41' | '$description.42' | '$description.43' | '$description.44' | '$description.45' | '$description.46' | '$description.47' | '$description.48' | '$description.49' | '$description.5' | '$description.50' | '$description.51' | '$description.52' | '$description.53' | '$description.54' | '$description.55' | '$description.56' | '$description.57' | '$description.58' | '$description.59' | '$description.6' | '$description.60' | '$description.61' | '$description.62' | '$description.63' | '$description.64' | '$description.65' | '$description.66' | '$description.67' | '$description.68' | '$description.69' | '$description.7' | '$description.70' | '$description.71' | '$description.72' | '$description.73' | '$description.74' | '$description.75' | '$description.76' | '$description.77' | '$description.78' | '$description.79' | '$description.8' | '$description.80' | '$description.81' | '$description.82' | '$description.83' | '$description.84' | '$description.85' | '$description.86' | '$description.87' | '$description.88' | '$description.89' | '$description.9' | '$description.90' | '$description.91' | '$description.92' | '$description.93' | '$description.94' | '$description.95' | '$description.96' | '$description.97' | '$description.98' | '$description.99' | 'action.accent' | 'action.accent-inv' | 'action.accent-soft' | 'action.danger' | 'action.destructive' | 'action.primary' | 'action.secondary' | 'content.flip' | 'content.head' | 'content.heading' | 'content.inverted' | 'content.link' | 'content.main' | 'content.mute' | 'content.muted' | 'content.primary' | 'content.secondary' | 'content.sub' | 'edge.focus' | 'edge.hover' | 'edge.line' | 'edge.line-hover' | 'edge.muted' | 'edge.primary' | 'edge.rule' | 'status.error' | 'status.info' | 'status.success' | 'status.warning' | 'surface.active' | 'surface.card' | 'surface.depth' | 'surface.hover' | 'surface.inv' | 'surface.page' | 'surface.tinted' | 'surface.window-chrome-from' | 'surface.window-chrome-to';
 export type RadiantsTokenName = PrimitiveColorTokenName | SemanticColorTokenName;

package/generated/figma/validation-report.json

@@ -1,7 +1,7 @@
 {
   "summary": {
     "semanticTokens": 46,
-    "primitiveColorTokens": 56,
+    "primitiveColorTokens": 57,
     "issues": 3
   },
   "issues": {

package/icons/DesktopIcons.tsx

@@ -12,7 +12,8 @@ export { ICON_SIZE, type IconSize } from './types';
 // Brand Icons
 // ============================================================================
 
-export function RadMarkIcon({ className = '', size = 65 }: IconProps) {
+export function RadMarkIcon({ className = '', size: sizeProp, large = false }: IconProps) {
+  const size = sizeProp ?? (large ? 24 : 16);
   return (
     <svg
       width={size}
@@ -35,8 +36,8 @@ export function RadMarkIcon({ className = '', size = 65 }: IconProps) {
 // Special non-SVG icons
 // ============================================================================
 
-export function FontAaIcon({ className = '', size = 16 }: IconProps) {
-  const numSize = typeof size === 'string' ? parseFloat(size) || 16 : Number(size);
+export function FontAaIcon({ className = '', size: sizeProp, large = false }: IconProps) {
+  const numSize = sizeProp ? (typeof sizeProp === 'string' ? parseFloat(sizeProp) || 16 : Number(sizeProp)) : (large ? 24 : 16);
   return (
     <span
       className={`font-mondwest font-bold ${className}`}

package/icons/Icon.tsx

@@ -8,8 +8,14 @@ import type { IconProps as SvgIconProps, IconSet } from './types';
 interface IconProps {
   /** Icon name (filename without .svg extension) */
   name: string;
-  /** Render size in pixels (applies to both width and height) */
+  /**
+   * Render size in pixels (applies to both width and height).
+   * Prefer using the `large` prop instead. When both are provided, `size` takes precedence.
+   * @deprecated Use `large` prop for 24px icons. Omit for default 16px.
+   */
   size?: number;
+  /** When true, renders at 24px (1.5rem) using the 24px icon set. Default: 16px (1rem). */
+  large?: boolean;
   /**
    * Which icon set to load from (16px pixel-art or 24px detailed).
    * Defaults based on size: ≤20 → 16, >20 → 24.
@@ -86,12 +92,14 @@ function renderPlaceholder(size: number, className: string, ariaLabel?: string)
  */
 function IconComponent({
   name,
-  size = 16,
+  size: sizeProp,
+  large = false,
   iconSet,
   className = '',
   'aria-label': ariaLabel,
   basePath = DEFAULT_ICON_BASE_PATH,
 }: IconProps) {
+  const size = sizeProp ?? (large ? 24 : 16);
   const [LoadedIcon, setLoadedIcon] = useState<LoadedIcon | null>(null);
   const [fetchedSvg, setFetchedSvg] = useState<string | null>(null);
 

package/icons/types.ts

@@ -11,8 +11,14 @@ import type { SVGProps } from 'react';
 export type IconSet = 16 | 24;
 
 export interface IconProps extends SVGProps<SVGSVGElement> {
-  /** Render size in pixels (applies to both width and height) */
+  /**
+   * Render size in pixels (applies to both width and height).
+   * Prefer using `large` prop instead. When both are provided, `size` takes precedence.
+   * @deprecated Use `large` prop for 24px icons. Omit for default 16px.
+   */
   size?: number | string;
+  /** When true, renders at 24px. Default: 16px. */
+  large?: boolean;
   /** Additional CSS classes */
   className?: string;
 }

package/meta/index.ts

@@ -3,6 +3,7 @@
 
 import { AlertMeta } from "../components/core/Alert/Alert.meta.ts";
 import { AlertDialogMeta } from "../components/core/AlertDialog/AlertDialog.meta.ts";
+import { AppWindowMeta } from "../components/core/AppWindow/AppWindow.meta.ts";
 import { AvatarMeta } from "../components/core/Avatar/Avatar.meta.ts";
 import { BadgeMeta } from "../components/core/Badge/Badge.meta.ts";
 import { BreadcrumbsMeta } from "../components/core/Breadcrumbs/Breadcrumbs.meta.ts";
@@ -53,6 +54,11 @@ export const componentMetaIndex = {
     sourcePath: "packages/radiants/components/core/AlertDialog/AlertDialog.tsx",
     schemaPath: "packages/radiants/components/core/AlertDialog/AlertDialog.schema.json",
   },
+  AppWindow: {
+    meta: AppWindowMeta,
+    sourcePath: "packages/radiants/components/core/AppWindow/AppWindow.tsx",
+    schemaPath: "packages/radiants/components/core/AppWindow/AppWindow.schema.json",
+  },
   Avatar: {
     meta: AvatarMeta,
     sourcePath: "packages/radiants/components/core/Avatar/Avatar.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdna/radiants",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Radiants theme package for DNA - retro pixel aesthetic",
   "publishConfig": {
     "access": "public"
@@ -48,8 +48,7 @@
     "components/",
     "icons/",
     "schemas/",
-    "fonts/Joystix.woff2",
-    "fonts/PixelCode*.woff2",
+    "fonts/",
     "assets/",
     "dna.config.json",
     "LICENSE",
@@ -102,6 +101,7 @@
     "test:components:watch": "vitest"
   },
   "devDependencies": {
+    "@rdna/preview": "workspace:*",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -109,7 +109,6 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@rdna/preview": "workspace:*",
     "culori": "^4.0.2",
     "eslint": "^9",
     "jsdom": "^28.1.0",
@@ -119,8 +118,10 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
+    "@chenglou/pretext": "^0.0.2",
     "class-variance-authority": "^0.7.1",
     "dialkit": "^1.1.0",
-    "motion": "^12.38.0"
+    "motion": "^12.38.0",
+    "react-draggable": "^4.5.0"
   }
 }