@fibery/ui-kit 2.0.1 → 2.1.0

package/src/preference-setting.test.ts

@@ -0,0 +1,223 @@
+import {createPreferenceSetting} from "./preference-setting";
+
+function dispatchStorageEvent() {
+  window.dispatchEvent(new StorageEvent("storage"));
+}
+
+function createTestSetting() {
+  return createPreferenceSetting({
+    key: "test-pref",
+    parse: (raw) => (raw === "a" || raw === "b" ? raw : undefined),
+    stringify: (v: "a" | "b") => v,
+    defaultValue: "a" as const,
+  });
+}
+
+function createBoolSetting() {
+  return createPreferenceSetting({
+    key: "test-bool",
+    parse: (raw) => (raw === "true" ? true : raw === "false" ? false : undefined),
+    stringify: (v: boolean) => JSON.stringify(v),
+    defaultValue: false,
+  });
+}
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+describe("createPreferenceSetting", () => {
+  describe("load", () => {
+    it("returns defaultValue when key is absent", () => {
+      const setting = createTestSetting();
+      expect(setting.load()).toBe("a");
+    });
+
+    it("parses stored value", () => {
+      localStorage.setItem("test-pref", "b");
+      const setting = createTestSetting();
+      expect(setting.load()).toBe("b");
+    });
+
+    it("returns defaultValue for invalid stored value", () => {
+      localStorage.setItem("test-pref", "garbage");
+      const setting = createTestSetting();
+      expect(setting.load()).toBe("a");
+    });
+  });
+
+  describe("has", () => {
+    it("returns false when key is absent", () => {
+      const setting = createTestSetting();
+      expect(setting.has()).toBe(false);
+    });
+
+    it("returns true when key is present", () => {
+      localStorage.setItem("test-pref", "b");
+      const setting = createTestSetting();
+      expect(setting.has()).toBe(true);
+    });
+
+    it("returns true even for invalid values", () => {
+      localStorage.setItem("test-pref", "garbage");
+      const setting = createTestSetting();
+      expect(setting.has()).toBe(true);
+    });
+  });
+
+  describe("store", () => {
+    it("writes stringified value to localStorage", () => {
+      const setting = createTestSetting();
+      setting.store("b");
+      expect(localStorage.getItem("test-pref")).toBe("b");
+    });
+
+    it("notifies subscribers", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      setting.store("b");
+      expect(cb).toHaveBeenCalledWith("b");
+    });
+  });
+
+  describe("notify", () => {
+    it("notifies subscribers without writing to localStorage", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      setting.notify("b");
+      expect(cb).toHaveBeenCalledWith("b");
+      expect(localStorage.getItem("test-pref")).toBeNull();
+    });
+  });
+
+  describe("subscribe", () => {
+    it("fires callback on storage event when value changed", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      localStorage.setItem("test-pref", "b");
+      dispatchStorageEvent();
+
+      expect(cb).toHaveBeenCalledWith("b");
+    });
+
+    it("does not fire callback on storage event when value unchanged", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      dispatchStorageEvent();
+      expect(cb).not.toHaveBeenCalled();
+    });
+
+    it("supports multiple subscribers", () => {
+      const setting = createTestSetting();
+      const cb1 = jest.fn();
+      const cb2 = jest.fn();
+      setting.subscribe(cb1);
+      setting.subscribe(cb2);
+
+      setting.store("b");
+      expect(cb1).toHaveBeenCalledWith("b");
+      expect(cb2).toHaveBeenCalledWith("b");
+    });
+
+    it("cleanup removes subscriber from in-tab notifications", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      const unsub = setting.subscribe(cb);
+
+      unsub();
+      setting.store("b");
+      expect(cb).not.toHaveBeenCalled();
+    });
+
+    it("cleanup removes storage event listener", () => {
+      const setting = createTestSetting();
+      const cb = jest.fn();
+      const unsub = setting.subscribe(cb);
+
+      unsub();
+      localStorage.setItem("test-pref", "b");
+      dispatchStorageEvent();
+      expect(cb).not.toHaveBeenCalled();
+    });
+
+    it("tracks prev through in-tab notify so cross-tab dedup works", () => {
+      const setting = createBoolSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      // in-tab change: false → true
+      setting.store(true);
+      expect(cb).toHaveBeenCalledWith(true);
+      cb.mockClear();
+
+      // cross-tab change: true → false (must fire, prev should be true after in-tab notify)
+      localStorage.setItem("test-bool", "false");
+      dispatchStorageEvent();
+      expect(cb).toHaveBeenCalledWith(false);
+    });
+
+    it("does not fire on cross-tab event when value matches prev set by in-tab notify", () => {
+      const setting = createBoolSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      // in-tab change: false → true
+      setting.store(true);
+      cb.mockClear();
+
+      // cross-tab event with same value (true) — should be deduped
+      dispatchStorageEvent();
+      expect(cb).not.toHaveBeenCalled();
+    });
+
+    it("reproduces the original bug scenario when prev is not tracked", () => {
+      // Scenario: in-tab store(true), then cross-tab sets back to false.
+      // Without the fix, prev stays at initial false, so false→false is deduped = BUG.
+      // With the fix, prev updates to true via tracked wrapper, so true→false fires.
+      const setting = createBoolSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      // 1. In-tab: false → true
+      setting.store(true);
+      expect(cb).toHaveBeenCalledWith(true);
+      cb.mockClear();
+
+      // 2. Cross-tab: true → false
+      localStorage.setItem("test-bool", "false");
+      dispatchStorageEvent();
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenCalledWith(false);
+    });
+
+    it("handles rapid alternating in-tab and cross-tab changes", () => {
+      const setting = createBoolSetting();
+      const cb = jest.fn();
+      setting.subscribe(cb);
+
+      setting.store(true); // in-tab: false → true
+      localStorage.setItem("test-bool", "false");
+      dispatchStorageEvent(); // cross-tab: true → false
+      setting.notify(true); // in-tab notify: false → true
+      localStorage.setItem("test-bool", "false");
+      dispatchStorageEvent(); // cross-tab: true → false
+
+      expect(cb.mock.calls.map(([v]) => v)).toMatchInlineSnapshot(`
+        [
+          true,
+          false,
+          true,
+          false,
+        ]
+      `);
+    });
+  });
+});

package/src/preference-setting.ts

@@ -0,0 +1,71 @@
+export function createPreferenceSetting<T>({
+  key,
+  parse,
+  stringify,
+  defaultValue,
+}: {
+  key: string;
+  parse: (raw: string) => T | undefined;
+  stringify: (value: T) => string;
+  defaultValue: T;
+}) {
+  const listeners = new Set<(value: T) => void>();
+  function broadcast(value: T) {
+    listeners.forEach((cb) => cb(value));
+  }
+
+  function load(): T {
+    try {
+      const raw = localStorage.getItem(key);
+      if (raw !== null) {
+        const value = parse(raw);
+        if (value !== undefined) {
+          return value;
+        }
+      }
+      return defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  }
+
+  function has() {
+    try {
+      return localStorage.getItem(key) !== null;
+    } catch {
+      return false;
+    }
+  }
+
+  function store(value: T) {
+    try {
+      localStorage.setItem(key, stringify(value));
+    } catch {
+      // ignore
+    }
+    broadcast(value);
+  }
+
+  function subscribe(cb: (value: T) => void): () => void {
+    let prev = load();
+    const tracked = (value: T) => {
+      prev = value;
+      cb(value);
+    };
+    listeners.add(tracked);
+    const storageListener = () => {
+      const next = load();
+      if (prev !== next) {
+        prev = next;
+        cb(next);
+      }
+    };
+    window.addEventListener("storage", storageListener);
+    return () => {
+      window.removeEventListener("storage", storageListener);
+      listeners.delete(tracked);
+    };
+  }
+
+  return {load, has, store, notify: broadcast, subscribe};
+}

package/src/pretty-size.test.ts

@@ -0,0 +1,18 @@
+import {prettySize} from "./pretty-size";
+
+describe("pretty-size", () => {
+  test("converts bytes to human readable strings", () => {
+    expect(prettySize(0)).toEqual("0B");
+    expect(prettySize(0.4)).toEqual("0.4B");
+    expect(prettySize(0.704)).toEqual("0.7B");
+    expect(prettySize(10)).toEqual("10B");
+    expect(prettySize(10.3)).toEqual("10.3B");
+    expect(prettySize(999)).toEqual("999B");
+    expect(prettySize(1001)).toEqual("1KB");
+    expect(prettySize(1000 ** 2)).toEqual("1MB");
+    expect(prettySize(1000 ** 2 + 450 * 1000)).toEqual("1.5MB");
+    expect(prettySize(1000 ** 3)).toEqual("1GB");
+    expect(prettySize(1000 ** 4)).toEqual("1TB");
+    expect(prettySize(1e16)).toEqual("10PB");
+  });
+});

package/src/pretty-size.ts

@@ -0,0 +1,23 @@
+const UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+const BYTES_PER_KB = 1000;
+
+// ref: https://stackoverflow.com/a/72596863/4280642
+export function prettySize(sizeBytes: number | bigint): string {
+  let size = Math.abs(Number(sizeBytes));
+
+  let unitIdx = 0;
+  while (size >= BYTES_PER_KB && unitIdx < UNITS.length - 1) {
+    size /= BYTES_PER_KB;
+    ++unitIdx;
+  }
+
+  return new Intl.NumberFormat([], {
+    style: "unit",
+    unit: UNITS[unitIdx],
+    unitDisplay: "narrow",
+    notation: "standard",
+    maximumFractionDigits: 1,
+  })
+    .format(size)
+    .toUpperCase();
+}

package/src/reactions/reaction-button.tsx

@@ -13,7 +13,7 @@ import {getWordDivider} from "./get-word-divider";
 import {EmojiTooltipDescription, EmojiTooltipTitle} from "./tootltip";
 import {tabButton, TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import {AvatarImage} from "../avatar";
-import {getPopupContainerElement} from "../utils-dom";
+import {getPopupContainerElement} from "../dom-utils";
 
 export type Reaction = {
   count: number;
@@ -105,7 +105,7 @@ const tabNavRootWithShadow = css`
   scrollbar-width: none;
   position: relative;
   align-items: center;
-  border-bottom: 0.5px solid ${themeVars.separatorColor};
+  border-bottom: ${themeVars.borderSeparator};
   & > div {
     flex-grow: 1;
     top: ${space.s6}px;
@@ -146,11 +146,11 @@ const tabNavRootWithShadow = css`
       scroll-timeline: --scroll-timeline x;
     }
     &::before {
-      background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
+      background: linear-gradient(to right, ${themeVars.colorBgScrollFade}, transparent);
     }
 
     &::after {
-      background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
+      background: linear-gradient(to left, ${themeVars.colorBgScrollFade}, transparent);
       animation-direction: reverse;
       animation-range: calc(100% - 40px) calc(100% - 20px);
     }

package/src/reactions/reaction-picker.tsx

@@ -48,7 +48,7 @@ const popupCss = css`
       alignItems: "baseline",
     },
     ".ant-tabs-nav::before": {
-      borderBottom: `1px solid ${themeVars.separatorColor}`,
+      borderBottom: themeVars.borderSolidSeparator,
     },
     ".ant-tabs-nav-container": {
       marginLeft: 14,
@@ -105,7 +105,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
           </IconButton>
         )}
       </Tooltip>
-      <Popover.Root open={isOpen} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
+      <Popover.Root open={isOpen} onOpenChange={setOpen}>
         <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
         <Popover.Portal>
           <Popover.Content

package/src/rich-text-embed-error.tsx

@@ -20,7 +20,9 @@ export const richTextEmbedErrorStyle = css`
 `;
 
 const selectedStyle = css`
-  box-shadow: 0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus};
+  box-shadow:
+    0 0 0 1px ${themeVars.colorAccentStroke},
+    0 0 0 3px ${themeVars.colorAccentStroke};
 `;
 
 const textStyle = css`

package/src/root-theme-provider.test.tsx

@@ -8,16 +8,21 @@ import {
   useThemeMode,
   useThemePreference,
 } from "./theme-provider";
-import type {ThemePalette} from "./palette-generator";
-import {defaultDarkTheme, defaultLightTheme, defaultPalette} from "./theme-styles";
-import {createInlineStyles, getThemeColors} from "./design-system";
+import {ThemePalette} from "./palette-generator";
+import {locateThemeBundle} from "./theme-styles";
+import {stylesFromTheme, themeFromPalette} from "./design-system";
 import {storeWarmPreference} from "./theme-settings";
 
+const {
+  palette,
+  themes: [themeLight, themeDark],
+} = locateThemeBundle(false);
+
 function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
   const theme = useTheme();
   const mode = useThemeMode();
   return (
-    <div data-testid={testId} data-mode={mode} data-primary={theme.primary}>
+    <div data-testid={testId} data-mode={mode} data-primary={theme.colors.colorAccent}>
       {theme.key}
     </div>
   );
@@ -102,7 +107,7 @@ describe("RootThemeProvider", () => {
     it("sets light base context in light mode", () => {
       const {container} = render(
         <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
-          <ThemeProvider theme={defaultLightTheme}>
+          <ThemeProvider theme={themeLight}>
             <span data-testid="inner">inner</span>
           </ThemeProvider>
         </RootThemeProvider>
@@ -119,7 +124,7 @@ describe("RootThemeProvider", () => {
     it("sets dark base context in dark mode", () => {
       const {container} = render(
         <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
-          <ThemeProvider theme={defaultDarkTheme}>
+          <ThemeProvider theme={themeDark}>
             <span data-testid="inner">inner</span>
           </ThemeProvider>
         </RootThemeProvider>
@@ -135,7 +140,7 @@ describe("RootThemeProvider", () => {
     it("nested light ThemeProvider in dark RootThemeProvider produces diff", () => {
       const {container} = render(
         <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
-          <ThemeProvider theme={defaultLightTheme}>
+          <ThemeProvider theme={themeLight}>
             <span data-testid="inner">inner</span>
           </ThemeProvider>
         </RootThemeProvider>
@@ -198,9 +203,9 @@ describe("RootThemeProvider", () => {
 
   describe("diff optimization integrity", () => {
     it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
-      const lightStyles = createInlineStyles(defaultLightTheme);
-      const lightTheme = getThemeColors(null, "light", defaultPalette);
-      const actualStyles = createInlineStyles(lightTheme);
+      const lightStyles = stylesFromTheme(themeLight);
+      const lightTheme = themeFromPalette(palette, "light");
+      const actualStyles = stylesFromTheme(lightTheme);
 
       // Count expected diff (theme from getThemeColors vs defaultLightTheme)
       let expectedDiffCount = 0;
@@ -252,7 +257,7 @@ describe("RootThemeProvider", () => {
         const {setPalette} = useThematic();
         const theme = useTheme();
         capturedSetPalette = setPalette;
-        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+        return <div data-testid="capture" data-card-bg={theme.colors.cardBg} />;
       }
 
       render(
@@ -264,7 +269,7 @@ describe("RootThemeProvider", () => {
       const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
 
       // cardBg in light mode = white, so modify white
-      const newPalette = {...defaultPalette, key: "test-palette", white: "oklch(0.9 0.05 200)"};
+      const newPalette = {...palette, key: "test-palette", white: "oklch(0.9 0.05 200)"};
 
       act(() => capturedSetPalette(newPalette));
 
@@ -284,7 +289,7 @@ describe("RootThemeProvider", () => {
 
       function NestedTheme() {
         const theme = useTheme();
-        return <div data-testid="nested" data-card-bg={theme.cardBg} />;
+        return <div data-testid="nested" data-card-bg={theme.colors.cardBg} />;
       }
 
       render(
@@ -298,7 +303,7 @@ describe("RootThemeProvider", () => {
 
       const initialCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
 
-      const newPalette = {...defaultPalette, key: "test-palette-2", white: "oklch(0.8 0.02 100)"};
+      const newPalette = {...palette, key: "test-palette-2", white: "oklch(0.8 0.02 100)"};
 
       act(() => capturedSetPalette(newPalette));
 
@@ -314,7 +319,7 @@ describe("RootThemeProvider", () => {
         const {setPalette} = useThematic();
         const theme = useTheme();
         capturedSetPalette = setPalette;
-        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+        return <div data-testid="capture" data-card-bg={theme.colors.cardBg} />;
       }
 
       render(
@@ -325,7 +330,7 @@ describe("RootThemeProvider", () => {
 
       const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
 
-      const newPalette = {...defaultPalette, key: "test-override", white: "oklch(0.9 0.05 200)"};
+      const newPalette = {...palette, key: "test-override", white: "oklch(0.9 0.05 200)"};
       act(() => capturedSetPalette(newPalette));
       expect(screen.getByTestId("capture").getAttribute("data-card-bg")).toBe("oklch(0.9 0.05 200)");
 
@@ -348,7 +353,7 @@ describe("RootThemeProvider", () => {
         </RootThemeProvider>
       );
 
-      const overridePalette = {...defaultPalette, key: "custom-override"};
+      const overridePalette = {...palette, key: "custom-override"};
       act(() => capturedSetPalette(overridePalette));
       expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("custom-override");
 
@@ -374,7 +379,7 @@ describe("RootThemeProvider", () => {
           <PaletteKeyDisplay />
         </RootThemeProvider>
       );
-      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("default");
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("neutral-user");
     });
 
     it("uses warm palette when warm preference is stored", () => {
@@ -393,7 +398,7 @@ describe("RootThemeProvider", () => {
           <PaletteKeyDisplay />
         </RootThemeProvider>
       );
-      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("neutral-arch");
     });
 
     it("reacts to warm preference change at runtime", () => {
@@ -402,7 +407,7 @@ describe("RootThemeProvider", () => {
           <PaletteKeyDisplay />
         </RootThemeProvider>
       );
-      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("neutral-arch");
 
       act(() => storeWarmPreference(true));
       expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-arch");

package/src/select/components/group-heading.tsx

@@ -103,7 +103,7 @@ export function GroupSeparator<
       style={{margin: `${((props.data.separatorMargin || space.s8) - 1) / 2}px 0`}}
       className={css`
         border: none;
-        border-bottom: 1px solid ${themeVars.separatorColor};
+        border-bottom: ${themeVars.borderSolidSeparator};
       `}
     />
   );

package/src/select/index.tsx

@@ -4,7 +4,7 @@ import {combineStyles, SelectComponent} from "./select";
 import React, {ForwardedRef, forwardRef} from "react";
 import {SelectInPopover} from "./select-in-popover";
 import {makeSingleLineStyles} from "./styles";
-import {css} from "@linaria/core";
+import {css, cx} from "@linaria/core";
 import {$TSFixMe} from "../tsfixme";
 
 export type {
@@ -52,6 +52,7 @@ export const Select = forwardRef(function SelectInner<
     isSearchable,
     inline,
     menuPortalTarget,
+    mobileContainerClassName,
     ...restProps
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
@@ -69,10 +70,13 @@ export const Select = forwardRef(function SelectInner<
         isOptionDisabled={isOptionDisabled as ((option: T) => boolean) | undefined}
         trigger={
           <div
-            className={css`
-              display: block;
-              position: relative;
-            `}
+            className={cx(
+              css`
+                display: block;
+                position: relative;
+              `,
+              mobileContainerClassName
+            )}
           >
             <div
               className={css`

package/src/select/select.tsx

@@ -74,6 +74,7 @@ export type SelectProps<T = unknown, U extends boolean = boolean, V extends Grou
   forbidValuesClearInCollnMode?: boolean;
   inline?: boolean;
   placeholder?: string;
+  mobileContainerClassName?: string;
 };
 
 const FAST_OPTION_USAGE_THRESHOLD = 200;

package/src/select/styles.ts

@@ -114,7 +114,7 @@ export const makeComponentsStyles = <T, U extends boolean, V extends GroupBase<T
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
-  multiValueRemove: (base) => {
+  multiValueRemove: () => {
     return {};
   },
   control: makeControlStyle<T, U, V>({isSingleLine: false}).control,

package/src/static-palettes.ts

@@ -1,4 +1,4 @@
-import {makeDefaultPalette, selectPalette, type ThemePalette} from "./palette-generator";
+import {selectPalette, type ThemePalette} from "./palette-generator";
 
 export interface LabPalettes {
   make: () => ThemePalette;
@@ -217,9 +217,8 @@ export const StaticPalettes: LabPalettes[] = [
   },
   {
     make: () => {
-      const base = makeDefaultPalette();
       return {
-        ...base,
+        ...selectPalette(),
         key: "oops",
         base: [
           null,
@@ -286,9 +285,8 @@ export const StaticPalettes: LabPalettes[] = [
   },
   {
     make: () => {
-      const base = makeDefaultPalette();
       return {
-        ...base,
+        ...selectPalette(),
         key: "shmoops",
         base: [
           null,