@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/utils/colorUtils.d.ts

@@ -4,21 +4,21 @@
  * Components with extra colors extend locally:
  *   export type SpinnerColor = SemanticColor | 'dark';
  */
-export type SemanticColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type SemanticColor = "mono" | "primary" | "success" | "warning" | "danger";
 /**
  * Background colors for semantic colors.
- * neutral uses neutral-400; others use their base variable.
+ * mono (the gray role) uses mono-400; others use their base variable.
  */
 export declare const semanticBgColors: Record<SemanticColor, string>;
 /**
  * Text colors for semantic colors.
- * neutral uses text-primary; others use their base variable.
+ * mono uses text-primary; others use their base variable.
  */
 export declare const semanticTextColors: Record<SemanticColor, string>;
 /**
  * Spinner border colors for semantic colors.
  * Each value is the atomic pair: border color + transparent top.
- * neutral uses --color-border; others use their base variable.
+ * mono uses --color-border; others use their base variable.
  */
 export declare const semanticSpinnerColors: Record<SemanticColor, string>;
 /** Which text tone reads best on a given background. */
@@ -45,8 +45,8 @@ export declare const relativeLuminance: (color: string) => number;
  * reverse.
  *
  * Returns a theme-agnostic tone — map it to your colors at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`
- * (the neutral scale is theme-stable, so the decision holds in light and dark).
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`
+ * (the mono scale is theme-stable, so the decision holds in light and dark).
  */
 export declare const contrastTone: (bg: string | string[], options?: {
     threshold?: number;

package/dist/utils/colorUtils.js

@@ -6,10 +6,10 @@
  */
 /**
  * Background colors for semantic colors.
- * neutral uses neutral-400; others use their base variable.
+ * mono (the gray role) uses mono-400; others use their base variable.
  */
 const semanticBgColors = {
-    neutral: "bg-[var(--color-neutral-400)]",
+    mono: "bg-[var(--color-mono-400)]",
     primary: "bg-[var(--color-primary)]",
     success: "bg-[var(--color-success)]",
     warning: "bg-[var(--color-warning)]",
@@ -17,10 +17,10 @@ const semanticBgColors = {
 };
 /**
  * Text colors for semantic colors.
- * neutral uses text-primary; others use their base variable.
+ * mono uses text-primary; others use their base variable.
  */
 const semanticTextColors = {
-    neutral: "text-[var(--color-text-primary)]",
+    mono: "text-[var(--color-text-primary)]",
     primary: "text-[var(--color-primary)]",
     success: "text-[var(--color-success)]",
     warning: "text-[var(--color-warning)]",
@@ -29,10 +29,10 @@ const semanticTextColors = {
 /**
  * Spinner border colors for semantic colors.
  * Each value is the atomic pair: border color + transparent top.
- * neutral uses --color-border; others use their base variable.
+ * mono uses --color-border; others use their base variable.
  */
 const semanticSpinnerColors = {
-    neutral: "border-[var(--color-border)] border-t-transparent",
+    mono: "border-[var(--color-border)] border-t-transparent",
     primary: "border-[var(--color-primary)] border-t-transparent",
     success: "border-[var(--color-success)] border-t-transparent",
     warning: "border-[var(--color-warning)] border-t-transparent",
@@ -75,8 +75,8 @@ const relativeLuminance = (color) => {
  * reverse.
  *
  * Returns a theme-agnostic tone — map it to your colors at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`
- * (the neutral scale is theme-stable, so the decision holds in light and dark).
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`
+ * (the mono scale is theme-stable, so the decision holds in light and dark).
  */
 const contrastTone = (bg, options = {}) => {
     const { threshold = 0.179 } = options;

package/dist/utils/index.d.ts

@@ -2,7 +2,6 @@ export { cn } from "./cn";
 export { debounce } from "./debounce";
 export { formatTimestamp, formatDate, formatTime, formatDateCustom, formatRelativeTime, isToday, isYesterday, isThisWeek, getLastNDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth, getThisYear, getLastYear, toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, type DateInput, type TimestampOptions, type DateRange, } from "./dateUtils";
 export { findNextMatchingOption, isValidTypeaheadChar, TYPEAHEAD_TIMEOUT_MS, type TypeaheadOption, type FindNextMatchingOptionParams, } from "./typeaheadUtils";
-export { timeToMinutes, minutesToTime, getEventDuration, getTotalTimeSlots, getTimeSlotIndex, getTimeSlotForIndex, calculateEventPosition, calculateEventHeight, eventsOverlap, findOverlappingEvents, groupOverlappingEvents, resolveOverlappingEvents, generateTimeGrid, filterEventsByDate, sortEventsByStartTime, separateAllDayEvents, isValidTimeFormat, isValidDateFormat, validateEvent, DEFAULT_GRID_CONFIGS, type CalendarEvent, type GridConfig, type EventPosition, type EventLayout, type TimeSlot, } from "./calendarUtils";
 export { parseOpenAI, parseAnthropic, parseGemini, parseSSELine, SSE_PARSERS, type SSEFormat, type SSEParser, } from "./sseFormatParsers";
 export { StreamingNetworkError, StreamingTimeoutError, StreamingParseError, StreamingAbortError, StreamingServerError, normalizeError, type StreamingError, } from "./streamingErrors";
 export { calculateRetryDelay, shouldRetry, type RetryConfig, } from "./retryUtils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.32",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "packageManager": "yarn@1.22.22",
@@ -9,6 +9,7 @@
   "types": "dist/index.d.ts",
   "sideEffects": [
     "./dist/styles.css",
+    "./dist/themes/*.css",
     "./src/global.scss",
     "./src/theme-plugin.css"
   ],
@@ -57,6 +58,10 @@
       "types": "./dist/components/generative/index.d.ts",
       "import": "./dist/components/generative/index.js"
     },
+    "./generative/ai-sdk": {
+      "types": "./dist/components/generative/ai-sdk/index.d.ts",
+      "import": "./dist/components/generative/ai-sdk/index.js"
+    },
     "./components/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -68,6 +73,7 @@
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./dist/shadcn-compat.css",
     "./theme.css": "./dist/theme.css",
+    "./themes/*": "./dist/themes/*",
     "./registry.json": "./dist/registry.json",
     "./generative.schema.json": "./dist/generative.schema.json",
     "./tools.json": "./dist/tools.json",
@@ -85,17 +91,31 @@
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
-    "build": "node scripts/audit-use-client.mjs && rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css && npm run build:registry && npm run build:generative",
+    "build": "rimraf dist && node scripts/audit-use-client.mjs && rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css && npm run build:registry && npm run build:generative",
     "build:assets": "cp -r public/bg dist/bg",
     "build:registry": "FLIKK_REGISTRY_OUT=dist/registry.json packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/extract.ts",
     "build:generative": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/generative.ts",
     "build:inventory": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/generateInventory.ts",
-    "build:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css",
+    "build:figma-tokens": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/figma-tokens.ts",
+    "build:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css && mkdir -p dist/themes && cp -r src/themes/. dist/themes/",
     "build:css": "tailwindcss -m -i ./src/tailwind-config.css -o ./dist/styles.css",
     "analyze": "ANALYZE=true rollup -c && open stats.html",
     "watch": "rollup -c -w",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
+    "verify": "node scripts/verify.mjs",
+    "verify:fast": "node scripts/verify.mjs --fast",
+    "verify:full": "node scripts/verify.mjs --full",
+    "verify:pack": "node scripts/smoke-package.mjs",
+    "test:stories": "node scripts/test-stories.mjs",
+    "test-storybook": "test-storybook",
+    "verify:drift": "yarn build:generative && yarn build:inventory && git diff --exit-code src/components/generative/schema.generated.ts && git diff --exit-code CLAUDE.md",
+    "prepare": "git config core.hooksPath .githooks || true",
+    "chromatic": "chromatic --build-script-name build-storybook --only-changed",
+    "changeset": "changeset",
+    "release:status": "changeset status --verbose",
+    "release:version": "changeset version && node scripts/normalize-changelog.mjs && yarn build:inventory",
+    "release:publish": "changeset publish",
     "clean": "rimraf dist",
     "prepublishOnly": "npm run clean && npm run test && npm run build",
     "dev": "concurrently \"npm run watch:css:dev\" \"storybook dev -p 6006\" \"npm --prefix apps/docs run dev\"",
@@ -128,9 +148,11 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "@heroicons/react": ">=2.0.0",
+    "@ai-sdk/react": ">=4.0.0",
+    "@phosphor-icons/react": ">=2.1.0",
     "@react-three/drei": ">=10.0.0",
     "@react-three/fiber": ">=9.0.0",
+    "ai": ">=7.0.0",
     "motion": ">=12.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -141,6 +163,12 @@
     "three": ">=0.170.0"
   },
   "peerDependenciesMeta": {
+    "ai": {
+      "optional": true
+    },
+    "@ai-sdk/react": {
+      "optional": true
+    },
     "react-markdown": {
       "optional": true
     },
@@ -164,10 +192,12 @@
     }
   },
   "devDependencies": {
+    "@ai-sdk/react": "^4.0.50",
+    "@changesets/cli": "^2.31.1",
     "@chromatic-com/storybook": "^5.0.0",
     "@emotion/is-prop-valid": "^1.4.0",
     "@eslint/js": "^9",
-    "@heroicons/react": "^2.2.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -181,6 +211,7 @@
     "@storybook/addon-themes": "^10.2.3",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
     "@storybook/react-webpack5": "^10.2.3",
+    "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/cli": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -192,7 +223,9 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^5.2.0",
+    "ai": "^7.0.47",
     "autoprefixer": "^10.4.24",
+    "chromatic": "^18.1.0",
     "concurrently": "^9.2.1",
     "eslint": "^9",
     "eslint-plugin-react-hooks": "^5.2.0",
@@ -208,7 +241,7 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1",
-    "rimraf": "^5.0.0",
+    "rimraf": "^6.1.3",
     "rollup": "^4.57.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-visualizer": "^7.0.1",

package/src/global.scss

@@ -398,12 +398,12 @@
     --ui-scrollbar-thumb-active: rgb(209 213 219);
   }
 
-  .scrollbar-thumb-\[var\(--color-neutral-300\)\] {
-    --ui-scrollbar-thumb-active: var(--color-neutral-300);
+  .scrollbar-thumb-\[var\(--color-mono-300\)\] {
+    --ui-scrollbar-thumb-active: var(--color-mono-300);
   }
 
-  .scrollbar-track-\[var\(--color-neutral-100\)\] {
-    --ui-scrollbar-track-active: var(--color-neutral-100);
+  .scrollbar-track-\[var\(--color-mono-100\)\] {
+    --ui-scrollbar-track-active: var(--color-mono-100);
   }
 
   .scrollbar-track-transparent {
@@ -822,6 +822,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+  }
+}
+
 /* Auto-fill input styling resets - fixes border-radius issues with auto-populated inputs */
 @layer base {
   /* Webkit browsers (Chrome, Safari, Edge) */
@@ -885,31 +891,14 @@ body {
   }
 }
 
-/* Heatmap flicker animation */
-@keyframes flicker {
-  0% {
-    opacity: 0;
-    transform: scale(1.05);
-  }
-  20% {
-    opacity: 0.3;
-    transform: scale(1.02);
-  }
-  40% {
-    opacity: 0.1;
-    transform: scale(1.03);
-  }
-  60% {
-    opacity: 0.7;
-    transform: scale(1.01);
-  }
-  80% {
-    opacity: 0.4;
-    transform: scale(1.02);
+/* InputOTP caret blink — CSS so the blink costs zero per-frame JS
+   (a motion keyframe loop would tick rAF the whole time the field is focused) */
+@keyframes flik-caret-blink {
+  0%, 100% {
+    opacity: 1;
   }
-  100% {
-    transform: scale(1);
-    /* No opacity at 100% - let inline styles control final opacity */
+  50% {
+    opacity: 0;
   }
 }
 
@@ -1012,3 +1001,18 @@ body {
     width: 33%;
   }
 }
+
+/*
+ * Segmented Progress indeterminate animation. Each cell runs the same pulse
+ * with a staggered animation-delay, which reads as a lit band travelling along
+ * the row — the discrete equivalent of the sweep above.
+ */
+@keyframes progress-segment-chase {
+  0%,
+  100% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 1;
+  }
+}