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

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.27",
   "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",
@@ -59,6 +59,7 @@
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./dist/shadcn-compat.css",
     "./theme.css": "./dist/theme.css",
+    "./registry.json": "./dist/registry.json",
     "./bg/*": "./dist/bg/*"
   },
   "files": [
@@ -70,8 +71,9 @@
   ],
   "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",
     "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: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",

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 */
@@ -897,6 +892,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 */

package/src/styles/theme.css

@@ -90,6 +90,9 @@
   /* generic colors */
   --color-border: oklch(93% 0 0);
   --color-border-secondary: oklch(87% 0 0);
+  /* Interaction border (hover/focus-adjacent) — darkens in light for a clear
+     edge, mirror of --color-surface-hover but on the border axis. */
+  --color-border-hover: oklch(80% 0 0);
   /* Surface elevation ladder: surface-sunken < background (floor) < surface < surface-raised < surface-overlay.
      In light mode raised surfaces are ~white (elevation via shadow + border); sunken is recessed below the floor. */
   --color-surface-sunken: oklch(94% 0 0);
@@ -390,9 +393,39 @@
    Tailwind's generated theme styles.
    ============================================ */
 @layer theme {
+  /* Scrollbar - light mode defaults.
+     These MUST live in @layer theme (not @layer base) alongside the .dark
+     override below. The layer order is `theme, base, ...`, so values in
+     @layer base win over @layer theme — if these defaults sat in base, the
+     .dark override here would never apply and the scrollbar would render with
+     the light (bright) thumb in dark mode. Keeping both in @layer theme means
+     the .dark block (later source order, equal specificity) wins. */
+  :root {
+    /* Tell the UA which palette to paint native chrome (scrollbars, form
+       controls, etc.). Our custom `::-webkit-scrollbar` track/thumb are mostly
+       transparent, so without this the browser composites its *default light*
+       scrollbar underneath — in dark mode the visible (active) track then reads
+       as an opaque white bar showing through the faint dark tint. `.dark` flips
+       this to `dark` below so the UA scrollbar matches the surface. */
+    color-scheme: light;
+    --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);
+  }
+
   .dark {
+    /* Paint native UA chrome (scrollbars, form controls) with the dark palette.
+       Pairs with `color-scheme: light` on :root — fixes the white native
+       scrollbar track that showed through our transparent custom track in dark
+       mode (Select, RichTextEditor dropdowns, any native-overflow surface). */
+    color-scheme: dark;
+
     /* Text colors - inverted for dark backgrounds */
 
+    /* Neutral text ramp (Linear's text reads essentially neutral off-white;
+       slate was too blue against the low-chroma surfaces). */
     --color-text-primary: var(--color-neutral-50);
     --color-text-secondary: var(--color-neutral-400);
     --color-text-placeholder: var(--color-neutral-600);
@@ -401,7 +434,7 @@
     --color-text-inverse: var(--color-neutral-950);
 
     /* Base theme colors */
-    --color-primary: var(--color-primary-600);
+    --color-primary: var(--color-primary-400);
     --color-success: var(--color-success-400);
     --color-warning: var(--color-warning-400);
     --color-danger: var(--color-danger-400);
@@ -416,12 +449,14 @@
 
     /* Background colors - dark equivalents */
     /* Surface elevation ladder: sunken sits below the floor; surface levels ascend so each reads as raised. */
-    --color-surface-sunken: oklch(13% 0 0);
-    --color-surface: oklch(18% 0 0);
-    --color-surface-raised: oklch(22% 0 0);
-    --color-surface-overlay: oklch(25% 0 0);
+    /* Linear-mapped: near-black floor with a *faint* cool tint (chroma ~0.004,
+       far subtler than slate — closest to Linear's #08090a / #1c1d20 grays). */
+    --color-surface-sunken: oklch(11% 0.004 255);
+    --color-surface: oklch(17% 0.004 255);
+    --color-surface-raised: oklch(20% 0.004 255);
+    --color-surface-overlay: oklch(23% 0.005 255);
     --color-surface-hover: oklch(100% 0 0 / 0.07);
-    --color-background: oklch(14.5% 0 0);
+    --color-background: oklch(12.5% 0.004 255);
     /* DEPRECATED (remove next major): alias of --color-surface. */
     --color-background-secondary: var(--color-surface);
     /* DEPRECATED (remove next major): migrate per-usage to --color-surface-sunken / surface ladder. */
@@ -431,11 +466,15 @@
     --color-background-disabled: var(--color-neutral-800);
 
     /* Scale backdrop */
-    --color-scale-background: oklch(8% 0 0);
-
-    /* Border - darker for dark mode */
-    --color-border: oklch(30% 0 0 / 0.8);
-    --color-border-secondary: oklch(35% 0 0 / 0.8);
+    --color-scale-background: oklch(8% 0.004 255);
+
+    /* Border - Linear-style subtle light hairline (a faint lift that catches
+       light on the dark surface, rather than a flat mid-gray line). */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.10);
+    /* Interaction border — lightens in dark (higher alpha) so an edge "lifts"
+       on hover, matching the --color-surface-hover lighten-in-dark behavior. */
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
     --color-chart-track: rgba(255, 255, 255, 0.05);
 
     /* Glass effect gradients - dark mode */
@@ -450,7 +489,7 @@
 
     /* Scrollbar - dark mode */
     --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
-    --ui-scrollbar-thumb-active: rgb(75 85 99);
+    --ui-scrollbar-thumb-active: rgb(75 85 99, 0.75);
     --ui-scrollbar-track-rest: transparent;
     --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);