@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/utils/dateUtils.js

@@ -191,5 +191,15 @@ function getDaysBetween(a, b) {
     const end = toDate(b);
     return Math.round((end.getTime() - start.getTime()) / 86400000) + 1;
 }
+/**
+ * Get the ISO week number for a date.
+ */
+function getWeekNumber(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+    const yearStart = new Date(d.getFullYear(), 0, 1);
+    return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
 
-export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, getLastMonth, getLastWeek, getThisMonth, getThisWeek, isSameDay, isWeekend, toDate };
+export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, getLastMonth, getLastWeek, getThisMonth, getThisWeek, getWeekNumber, isSameDay, isWeekend, toDate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.26",
+  "version": "1.0.0-beta.29",
   "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",
   "main": "dist/index.js",
@@ -48,6 +48,14 @@
       "types": "./dist/components/ai/index.d.ts",
       "import": "./dist/components/ai/index.js"
     },
+    "./canvas": {
+      "types": "./dist/components/canvas/index.d.ts",
+      "import": "./dist/components/canvas/index.js"
+    },
+    "./generative": {
+      "types": "./dist/components/generative/index.d.ts",
+      "import": "./dist/components/generative/index.js"
+    },
     "./components/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -59,6 +67,9 @@
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./dist/shadcn-compat.css",
     "./theme.css": "./dist/theme.css",
+    "./registry.json": "./dist/registry.json",
+    "./generative.schema.json": "./dist/generative.schema.json",
+    "./tools.json": "./dist/tools.json",
     "./bg/*": "./dist/bg/*"
   },
   "files": [
@@ -70,14 +81,16 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css",
+    "build": "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:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css",
     "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 --ext .ts,.tsx",
+    "lint": "eslint src",
     "clean": "rimraf dist",
     "prepublishOnly": "npm run clean && npm run build",
     "dev": "concurrently \"npm run watch:css:dev\" \"storybook dev -p 6006\" \"npm --prefix apps/docs run dev\"",
@@ -169,6 +182,7 @@
     "@types/three": "^0.182.0",
     "autoprefixer": "^10.4.24",
     "concurrently": "^9.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^10.2.7",
     "gsap": "^3.14.2",
     "motion": "^12.19.1",
@@ -184,7 +198,8 @@
     "storybook": "^10.2.3",
     "three": "^0.182.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.61.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",

package/src/global.scss

@@ -274,14 +274,9 @@
 
 /* Global overlay scrollbar styling */
 @layer base {
-  :root {
-    /* Scrollbar styling */
-    --ui-scrollbar-size: 4px;
-    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
-    --ui-scrollbar-thumb-active: rgb(209 213 219);
-    --ui-scrollbar-track-rest: transparent;
-    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
-  }
+  /* Scrollbar token defaults (light + .dark) live in styles/theme.css under
+     @layer theme so the dark override actually wins the cascade. See the note
+     there. The webkit/Firefox rules below just consume those vars. */
 
   * {
     /* Firefox - use thin scrollbar with custom colors */
@@ -344,79 +339,37 @@
   }
 }
 
-@layer utilities {
-  /* Shadow elevation utilities */
-  .shadow-real-sm {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.1px 3.6px 3.2px -4.1px rgba(0, 0, 0, 0.08);
-  }
-
-  .shadow-real-md {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.1px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
-      0.4px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
-  }
-
-  .shadow-real-lg {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.1px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
-      0.2px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
-      0.5px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
-      1.1px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
-      2.1px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
-  }
-
-  .shadow-real-xl {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.2px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
-      0.4px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
-      0.7px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
-      1.2px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
-      2px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
-      3.1px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
-      4.7px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
-      6.8px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
-  }
-
-  .shadow-real-2xl {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.3px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
-      0.6px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
-      1px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
-      1.6px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
-      2.5px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
-      3.7px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
-      5.4px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
-      7.6px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
-      10.4px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
-      14px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
-      18.4px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
-  }
-
-  .shadow-real-3xl {
-    box-shadow:
-      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
-      0.4px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
-      0.8px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
-      1.3px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
-      2px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
-      3px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
-      4.3px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
-      6px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
-      8.2px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
-      10.9px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
-      14.2px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
-      18.2px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
-      23px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
-      28.7px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
-      35.3px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
-  }
-}
+/* Shadow elevation utilities.
+   Registered as Tailwind @utility (NOT plain `@layer utilities` classes) so that
+   variant prefixes — hover:, group-hover:, focus:, dark: etc. — generate. In
+   Tailwind v4 a hand-written class inside `@layer utilities` is emitted as-is and
+   does NOT receive variant generation, so `hover:shadow-real-lg` produced no rule
+   (the base class worked, the hover variant silently didn't). @utility fixes that.
+   @utility must live at the top level — it cannot be nested inside @layer.
+
+   Values are tokenized as --elevation-real-* / --elevation-inner-real-* in
+   styles/theme.css (light source-of-truth + `.dark` overrides), so a single
+   class renders the right elevation in BOTH modes: light = faint multi-layer
+   black; dark = stronger black depth-pool + a 1px white top rim (faint black is
+   invisible on the near-black floor). Tokens are --elevation-* (NOT --shadow-*)
+   to avoid Tailwind v4 auto-generating a colliding shadow-* utility. The utility
+   stays single-class specificity, so `shadow-none` still cancels it in any mode. */
+@utility shadow-real-sm  { box-shadow: var(--elevation-real-sm); }
+@utility shadow-real-md  { box-shadow: var(--elevation-real-md); }
+@utility shadow-real-lg  { box-shadow: var(--elevation-real-lg); }
+@utility shadow-real-xl  { box-shadow: var(--elevation-real-xl); }
+@utility shadow-real-2xl { box-shadow: var(--elevation-real-2xl); }
+@utility shadow-real-3xl { box-shadow: var(--elevation-real-3xl); }
+
+/* Inset counterparts — recessed/sunken surfaces (input wells, code blocks, sunken
+   panels, pressed states). Light: top-down "well" (X zeroed, rim-hugging negative
+   spreads). Dark: stronger black inset + a 1px bottom-inner white lip. */
+@utility shadow-inner-real-sm  { box-shadow: var(--elevation-inner-real-sm); }
+@utility shadow-inner-real-md  { box-shadow: var(--elevation-inner-real-md); }
+@utility shadow-inner-real-lg  { box-shadow: var(--elevation-inner-real-lg); }
+@utility shadow-inner-real-xl  { box-shadow: var(--elevation-inner-real-xl); }
+@utility shadow-inner-real-2xl { box-shadow: var(--elevation-inner-real-2xl); }
+@utility shadow-inner-real-3xl { box-shadow: var(--elevation-inner-real-3xl); }
 
 @layer utilities {
   /* Overlay scrollbar utility classes */
@@ -631,76 +584,70 @@
 
   /* Image presets */
   .bg-image-1 {
-    --bg-image: url("/bg/1.jpg");
+    --bg-image: url("/bg/1.webp");
   }
   .bg-image-2 {
-    --bg-image: url("/bg/2.jpg");
+    --bg-image: url("/bg/2.webp");
   }
   .bg-image-3 {
-    --bg-image: url("/bg/3.jpg");
+    --bg-image: url("/bg/3.webp");
   }
   .bg-image-4 {
-    --bg-image: url("/bg/4.jpg");
+    --bg-image: url("/bg/4.webp");
   }
   .bg-image-5 {
-    --bg-image: url("/bg/5.jpg");
+    --bg-image: url("/bg/5.webp");
   }
   .bg-image-6 {
-    --bg-image: url("/bg/6.jpg");
+    --bg-image: url("/bg/6.webp");
   }
   .bg-image-7 {
-    --bg-image: url("/bg/7.jpg");
+    --bg-image: url("/bg/7.webp");
   }
   .bg-image-8 {
-    --bg-image: url("/bg/8.jpg");
+    --bg-image: url("/bg/8.webp");
   }
   .bg-image-9 {
-    --bg-image: url("/bg/9.jpg");
+    --bg-image: url("/bg/9.webp");
   }
   .bg-image-10 {
-    --bg-image: url("/bg/10.jpg");
+    --bg-image: url("/bg/10.webp");
   }
   .bg-image-11 {
-    --bg-image: url("/bg/11.jpg");
+    --bg-image: url("/bg/11.webp");
   }
   .bg-image-12 {
-    --bg-image: url("/bg/12.jpg");
+    --bg-image: url("/bg/12.webp");
   }
   .bg-image-13 {
-    --bg-image: url("/bg/13.jpg");
+    --bg-image: url("/bg/13.webp");
   }
   .bg-image-14 {
-    --bg-image: url("/bg/14.jpg");
+    --bg-image: url("/bg/14.webp");
   }
   .bg-image-15 {
-    --bg-image: url("/bg/15.jpg");
+    --bg-image: url("/bg/15.webp");
   }
   .bg-image-16 {
-    --bg-image: url("/bg/16.jpg");
+    --bg-image: url("/bg/16.webp");
   }
   .bg-image-17 {
-    --bg-image: url("/bg/17.jpg");
+    --bg-image: url("/bg/17.webp");
   }
   .bg-image-18 {
-    --bg-image: url("/bg/18.jpg");
+    --bg-image: url("/bg/18.webp");
   }
   .bg-image-19 {
-    --bg-image: url("/bg/19.jpg");
+    --bg-image: url("/bg/19.webp");
   }
   .bg-image-20 {
-    --bg-image: url("/bg/20.jpg");
+    --bg-image: url("/bg/20.webp");
   }
   .bg-image-21 {
-    --bg-image: url("/bg/21.jpg");
+    --bg-image: url("/bg/21.webp");
   }
   .bg-image-22 {
-    --bg-image: url("/bg/22.jpg");
-  }
-  .bg-image-23 {
-    --bg-image: url("/bg/23.jpg");
-  }
-  .bg-image-24 {
-    --bg-image: url("/bg/24.jpg");
+    --bg-image: url("/bg/22.webp");
   }
 
   /* Blur modifiers */
@@ -897,6 +844,32 @@ body {
   input[type="number"] {
     -moz-appearance: textfield;
   }
+
+  /* Style the native search clear (×) button to match the Tag dismiss icon —
+     muted by default, darkens on hover. Webkit only (Chrome/Safari/Edge);
+     Firefox doesn't render this pseudo-element. */
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.875rem;
+    width: 0.875rem;
+    margin-left: 0.25rem;
+    background-color: var(--color-text-muted);
+    cursor: pointer;
+    transition: background-color 200ms ease;
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+    -webkit-mask-size: contain;
+            mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button:hover {
+    background-color: var(--color-text-primary);
+  }
 }
 
 /* Heatmap flicker animation */