@ramme-io/ui 4.0.0 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/ui",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "The structural component library for the Ramme Framework.",
   "license": "MIT",
   "private": false,
@@ -31,16 +31,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "vite",
-    "generate:manifest": "node scripts/generate-manifest.js",
-    "generate:registry": "node scripts/generate-registry.js",
-    "generate": "npm run generate:manifest && npm run generate:registry",
-    "build": "npm run generate && vite build && tsc --declaration --emitDeclarationOnly --outDir dist --noEmit false",
-    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/storybook-static/**' --output 'ramme-ui-context.txt'",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "peerDependencies": {
     "ag-grid-community": ">=31.0.0",
     "ag-grid-react": ">=31.0.0",
@@ -53,7 +43,6 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.3",
-    "@ramme-io/shared": "workspace:*",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tippyjs/react": "^4.2.6",
     "class-variance-authority": "^0.7.1",
@@ -65,7 +54,8 @@
     "react-syntax-highlighter": "^15.6.6",
     "tailwind-merge": "^3.3.1",
     "tippy.js": "^6.3.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@ramme-io/shared": "3.1.1"
   },
   "devDependencies": {
     "@storybook/addon-links": "^10.5.9",
@@ -88,5 +78,15 @@
     "typescript": "^5.4.5",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "generate:manifest": "node scripts/generate-manifest.js",
+    "generate:registry": "node scripts/generate-registry.js",
+    "generate": "npm run generate:manifest && npm run generate:registry",
+    "build": "npm run generate && vite build && tsc --declaration --emitDeclarationOnly --outDir dist --noEmit false",
+    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/storybook-static/**' --output 'ramme-ui-context.txt'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}

package/src/index.css

@@ -1,335 +0,0 @@
-/* 1. LOAD THE FONTS (Critical for Theming) */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lato:wght@400;700&family=Merriweather:wght@300;700&family=Roboto+Mono:wght@400;500&family=Courier+Prime&display=swap');
-
-/* 2. Import styles for third-party libraries (MUST come before Tailwind) */
-/* AG Grid CSS is imported directly in the consuming app's main.tsx entry point */
-@import './styles/ag-theme-ramme.css';
-@import 'tippy.js/dist/tippy.css';
-
-/* TAY family — locally bundled display fonts used by TAY_DREAMBOAT_THEME.
-   Referenced via relative url() so Vite copies + hashes the actual font
-   file into every consuming app's build (and dev server) — a bare
-   font-family name with no matching @font-face silently falls back to the
-   next font in the stack, which is what was happening before this. */
-@font-face {
-  font-family: 'TAY Dreamboat';
-  src: url('./assets/fonts/TAYDreamboat.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'TAY Dreamboat Thin';
-  src: url('./assets/fonts/TAYDreamboat-Thin.otf') format('opentype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'TAY Kula';
-  src: url('./assets/fonts/TAYKula.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'TAY Birdie';
-  src: url('./assets/fonts/TAYBirdie.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* 3. Import Tailwind base styles */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* NEW: DYNAMIC OVERRIDES 
-   Place these here so they override Tailwind's base "Preflight" styles 
-*/
-body {
-  font-family: var(--app-font-sans);
-  color: rgb(var(--app-text-color));
-  background-color: rgb(var(--app-bg-color));
-  /* Smooth transition when the AI changes the theme */
-  transition: background-color 0.4s ease, color 0.2s ease;
-}
-
-h1, h2 {
-  font-family: var(--app-font-serif);
-}
-
-h3, h4, h5, h6 {
-  font-family: var(--app-font-sans);
-}
-
-/*
-==============================================
-RAMME THEME V2.2 - CSS VARIABLE DEFINITIONS
-==============================================
-*/
-
-:root {
-  /* === LAYER 1: BRAND IDENTITY === */
-/* Fallbacks for when the app first loads */
-  --app-font-sans: 'Inter', sans-serif;
-  --app-font-serif: 'Merriweather', serif;
-  --app-font-mono: 'Roboto Mono', monospace;
-
-  /* === LAYER 2: COLOR SYSTEM === */
-  --app-primary-color: 13 110 253; /* Blue-600 */
-  --app-primary-foreground-color: 255 255 255;
-  
-  --app-secondary-color: 108 117 125; /* Gray-500 */
-  --app-secondary-foreground-color: 255 255 255;
-  
-  --app-accent-color: 23 162 184; /* Cyan-600 */
-  --app-accent-foreground-color: 255 255 255;
-  
-  --app-danger-color: 220 53 69;
-  --app-danger-foreground-color: 255 255 255;
-
-  /* Base UI Colors */
-  --app-bg-color: 248 249 250;
-  --app-card-bg-color: 255 255 255;
-  --app-text-color: 33 37 41;
-  --app-border-color: 222 226 230;
-
-  /* Muted Surface */
-  --app-muted-bg: 241 245 249; 
-  --app-muted-text: 100 116 139; 
-
-  /* === LAYER 3: SHAPE & BORDERS === */
-  --app-border-radius-sm: 0.2rem;
-  --app-border-radius-md: 0.375rem;
-  --app-border-radius-lg: 0.5rem;
-  --app-border-radius-full: 9999px;
-  --app-border-width: 1px;
-
-  /* === LAYER 4: INTENT PRIMITIVES === */
-  --app-surface-base: var(--app-bg-color);
-  --app-surface-muted: var(--app-muted-bg);
-  --app-surface-card: var(--app-card-bg-color);
-  --app-surface-hover: 233 236 239;
-  --app-border-base: var(--app-border-color);
-  --app-fg-base: var(--app-text-color);
-  --app-fg-muted: var(--app-muted-text);
-  --app-ring-primary: var(--app-primary-color);
-
-  /* === LAYER 5: COMPONENT BRIDGE (DEPRECATED) === */
-  --app-input-bg-color: var(--app-surface-base);
-  --app-input-text-color: var(--app-fg-base);
-  --app-input-border-color: var(--app-border-base);
-  --app-input-focus-ring-color: var(--app-ring-primary);
-  --app-input-placeholder-color: var(--app-fg-muted);
-
-  --app-table-header-bg: var(--app-surface-muted);
-  --app-table-header-text: var(--app-fg-muted);
-  --app-table-row-hover-bg: var(--app-surface-hover);
-  --app-table-grid-line-color: var(--app-border-base);
-  --app-chart-grid-color: var(--app-border-base);
-
-  /* Notification Colors */
-  --app-info-color: 59 130 246; 
-  --app-info-foreground-color: 255 255 255;
-  --app-success-color: 34 197 94; 
-  --app-success-foreground-color: 255 255 255;
-  --app-warning-color: 245 158 11; 
-  --app-warning-foreground-color: 255 255 255;
-
-  /* Chart Colors (Synced with Brand) */
-  --app-chart-1: 13 110 253;  /* Primary (Blue) */
-  --app-chart-accent: 245 158 11; /* Amber — against Blue. Second series on dual-axis charts. */
-  --app-chart-2: 23 162 184;  /* Accent (Cyan) */
-  --app-chart-3: 102 16 242;  /* Indigo */
-  --app-chart-4: 255 193 7;   /* Amber */
-  --app-chart-5: 220 53 69;   /* Red */
-  
-  /* The Palette String used by JS Charts */
-  --app-chart-palette: 13 110 253, 23 162 184, 102 16 242, 255 193 7, 220 53 69;
-
-  /* === LAYER 6: LAYOUT DIMENSIONS === */
-  --app-header-height: 4rem;
-  --app-sidebar-width: 16rem;
-  --app-toolbar-height: 3.5rem;
-  --app-statusbar-height: 2rem;
-}
-
-/* --- Dark Theme --- */
-.dark {
-  color-scheme: dark; /* Helps browser native inputs */
-  --app-primary-color: 110 168 254; /* Blue-300 */
-  --app-primary-foreground-color: 5 20 40;
-  --app-secondary-color: 173 181 189;
-  --app-secondary-foreground-color: 5 20 40;
-  --app-accent-color: 77 189 207;
-  --app-accent-foreground-color: 5 20 40;
-  
-  --app-text-color: 233 236 239;
-  --app-bg-color: 11 17 23;
-  --app-card-bg-color: 26 35 46;
-  --app-border-color: 73 80 87;
-
-  --app-muted-bg: 30 41 59; 
-  --app-muted-text: 148 163 184;
-  
-  --app-surface-hover: 52 58 64;
-
-  --app-info-color: 59 130 246; 
-  --app-info-foreground-color: 255 255 255;
-  --app-success-color: 34 197 94; 
-  --app-success-foreground-color: 255 255 255;
-  --app-warning-color: 245 158 11; 
-  --app-warning-foreground-color: 255 255 255;
-
-  /* Chart Colors (Lighter for Dark Mode) */
-  --app-chart-1: 110 168 254; /* Primary (Light Blue) */
-  --app-chart-accent: 252 211 77; /* Soft Amber — against Light Blue. Second series on dual-axis charts. */
-  --app-chart-2: 77 189 207;  /* Accent (Cyan) */
-  --app-chart-3: 167 139 250; /* Violet */
-  --app-chart-4: 252 211 77;  /* Amber */
-  --app-chart-5: 252 165 165; /* Rose */
-
-  --app-chart-palette: 110 168 254, 77 189 207, 167 139 250, 252 211 77, 252 165 165;
-}
-
-/* --- Corporate Theme (Green/Professional) --- */
-.corporate {
-  --app-primary-color: 16 185 129; /* Emerald-500 */
-  --app-primary-foreground-color: 255 255 255;
-  --app-secondary-color: 245 158 11; /* Amber-500 */
-  --app-secondary-foreground-color: 255 255 255;
-  --app-accent-color: 59 130 246; /* Blue-500 */
-  --app-accent-foreground-color: 255 255 255;
-  
-  --app-text-color: 55 65 81;
-  --app-bg-color: 249 250 251;
-  --app-card-bg-color: 255 255 255;
-  --app-border-color: 209 213 219;
-
-  --app-muted-bg: 243 244 246;
-  --app-muted-text: 107 114 128;
-
-  --app-border-radius-md: 0.25rem;
-
-  --app-surface-hover: 229 231 235;
-
-  --app-info-color: 59 130 246;
-  --app-info-foreground-color: 255 255 255;
-  --app-success-color: 34 197 94;
-  --app-success-foreground-color: 255 255 255;
-  --app-warning-color: 245 158 11;
-  --app-warning-foreground-color: 255 255 255;
-
-  /* Chart Colors (Earth Tones) */
-  --app-chart-1: 16 185 129; /* Emerald */
-  --app-chart-accent: 245 158 11; /* Amber — against Emerald. Second series on dual-axis charts. */
-  --app-chart-2: 245 158 11; /* Amber */
-  --app-chart-3: 59 130 246; /* Blue */
-  --app-chart-4: 107 114 128; /* Gray */
-  --app-chart-5: 239 68 68;  /* Red */
-
-  --app-chart-palette: 16 185 129, 245 158 11, 59 130 246, 107 114 128, 239 68 68;
-}
-
-/* --- Midnight Theme (Deep Purple/Indigo) --- */
-.midnight {
-  color-scheme: dark;
-  --app-primary-color: 129 140 248; /* Indigo-400 */
-  --app-primary-foreground-color: 30 41 59;
-  --app-secondary-color: 192 132 252; /* Purple-400 */
-  --app-secondary-foreground-color: 30 41 59;
-  --app-accent-color: 99 102 241; /* Indigo-500 */
-  --app-accent-foreground-color: 255 255 255;
-  
-  --app-text-color: 226 232 240;
-  --app-bg-color: 15 23 42;
-  --app-card-bg-color: 30 41 59;
-  --app-border-color: 71 85 105;
-
-  --app-muted-bg: 30 41 59; 
-  --app-muted-text: 148 163 184;
-
-  --app-border-radius-md: 0.5rem;
-
-  --app-surface-hover: 71 85 105;
-
-  --app-info-color: 59 130 246;
-  --app-info-foreground-color: 255 255 255;
-  --app-success-color: 34 197 94;
-  --app-success-foreground-color: 255 255 255;
-  --app-warning-color: 245 158 11;
-  --app-warning-foreground-color: 255 255 255;
-
-  /* Chart Colors (Neon/Cyber) */
-  --app-chart-1: 129 140 248; /* Indigo */
-  --app-chart-accent: 250 204 21; /* Yellow — against Indigo. Second series on dual-axis charts. */
-  --app-chart-2: 192 132 252; /* Purple */
-  --app-chart-3: 45 212 191;  /* Teal */
-  --app-chart-4: 251 113 133; /* Rose */
-  --app-chart-5: 250 204 21;  /* Yellow */
-
-  --app-chart-palette: 129 140 248, 192 132 252, 45 212 191, 251 113 133, 250 204 21;
-}
-
-/* --- Blueprint Theme (Technical Blue) --- */
-.blueprint {
-  --app-primary-color: 0 123 255; /* Tech Blue */
-  --app-primary-foreground-color: 255 255 255;
-  --app-secondary-color: 108 117 125;
-  --app-secondary-foreground-color: 255 255 255;
-  --app-accent-color: 23 162 184;
-  --app-accent-foreground-color: 255 255 255;
-  
-  --app-text-color: 51 51 51;
-  --app-bg-color: 255 255 255;
-  --app-card-bg-color: 255 255 255;
-  --app-border-color: 0 123 255;
-
-  --app-muted-bg: 230 230 230;
-  --app-muted-text: 100 100 100;
-
-  --app-border-radius-md: 0rem;
-  --app-border-width: 2px;
-
-  --app-surface-hover: 230 230 230;
-  
-  --app-info-color: 59 130 246;
-  --app-info-foreground-color: 255 255 255;
-  --app-success-color: 34 197 94;
-  --app-success-foreground-color: 255 255 255;
-  --app-warning-color: 245 158 11;
-  --app-warning-foreground-color: 255 255 255;
-
-  /* Chart Colors (Blue Monochromatic) */
-  --app-chart-1: 0 123 255;   /* Primary Blue */
-  --app-chart-accent: 253 126 20; /* Orange — against Primary Blue. Second series on dual-axis charts. */
-  --app-chart-2: 23 162 184;  /* Cyan */
-  --app-chart-3: 108 117 125; /* Gray */
-  --app-chart-4: 253 126 20;  /* Orange (Warning) */
-  --app-chart-5: 220 53 69;   /* Red (Error) */
-
-  --app-chart-palette: 0 123 255, 23 162 184, 108 117 125, 253 126 20, 220 53 69;
-}
-
-/* === AG GRID THEME ===
-   The ag-theme-ramme class is defined in ./styles/ag-theme-ramme.css
-   and provides complete theme synchronization with Ramme's semantic tokens.
-   No overrides needed here - the custom theme handles everything.
-*/
-
-/* --- Custom Tippy.js Theme --- */
-.tippy-box[data-theme~='ramme'] {
-  background-color: rgb(var(--app-secondary-color));
-  color: rgb(var(--app-secondary-foreground-color));
-  border-radius: var(--app-border-radius-md);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
-}
-.tippy-box[data-theme~='ramme'][data-placement^='top'] > .tippy-arrow::before { border-top-color: rgb(var(--app-secondary-color)); }
-.tippy-box[data-theme~='ramme'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: rgb(var(--app-secondary-color)); }
-.tippy-box[data-theme~='ramme'][data-placement^='left'] > .tippy-arrow::before { border-left-color: rgb(var(--app-secondary-color)); }
-.tippy-box[data-theme~='ramme'][data-placement^='right'] > .tippy-arrow::before { border-right-color: rgb(var(--app-secondary-color)); }
-.tippy-content { padding: 0.5rem 0.75rem; }