@fibery/ui-kit 2.1.0 → 2.1.1

package/src/palettes/neutral-arch.ts

@@ -1,8 +1,8 @@
-import {ThemePalette} from "../palette-generator";
-import {neutralBase} from "./neutral";
+import {neutralCore} from "./neutral";
+import type {ThemePalette} from "../design-system/types";
 
 export const neutralArchPalette: ThemePalette = {
-  ...neutralBase,
+  ...neutralCore,
   key: "neutral-arch",
   accent: [
     null,

package/src/palettes/neutral-user.ts

@@ -1,8 +1,8 @@
-import {ThemePalette} from "../palette-generator";
-import {neutralBase} from "./neutral";
+import {neutralCore} from "./neutral";
+import type {ThemePalette} from "../design-system/types";
 
 export const neutralUserPalette: ThemePalette = {
-  ...neutralBase,
+  ...neutralCore,
   key: "neutral-user",
   accent: [
     null,

package/src/palettes/neutral.ts

@@ -1,6 +1,8 @@
-import {ThemePalette} from "../palette-generator";
+import {common} from "./common";
+import type {ThemePaletteCore} from "../design-system/types";
 
-export const neutralBase: Omit<ThemePalette, "accent" | "accentDark" | "key"> = {
+export const neutralCore: ThemePaletteCore = {
+  ...common,
   // warm-dark no-applied:
   // "white": "rgb(255,252,247)",
   // "black": "rgb(5,4,4)",

package/src/palettes/warm-arch.ts

@@ -1,8 +1,8 @@
-import {ThemePalette} from "../palette-generator";
-import {warmBase} from "./warm";
+import {warmCore} from "./warm";
+import type {ThemePalette} from "../design-system/types";
 
 export const warmArchPalette: ThemePalette = {
-  ...warmBase,
+  ...warmCore,
   key: "warm-arch",
   accent: [
     null,

package/src/palettes/warm-user.ts

@@ -1,8 +1,8 @@
-import {ThemePalette} from "../palette-generator";
-import {warmBase} from "./warm";
+import {warmCore} from "./warm";
+import type {ThemePalette} from "../design-system/types";
 
 export const warmUserPalette: ThemePalette = {
-  ...warmBase,
+  ...warmCore,
   key: "warm-user",
   accent: [
     null,

package/src/palettes/warm.ts

@@ -1,7 +1,8 @@
-import {ThemePalette} from "../palette-generator";
+import {common} from "./common";
+import type {ThemePaletteCore} from "../design-system/types";
 
-export const warmBase: Omit<ThemePalette, "accent" | "accentDark" | "key"> = {
-  deneutralize: {sepia: 0.1, oklchL: 0.98},
+export const warmCore: ThemePaletteCore = {
+  ...common,
   white: "rgb(255,253,250)",
   whiteA: [
     null,

package/src/pretty-size.ts

@@ -2,7 +2,10 @@ 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 {
+export function prettySize(
+  sizeBytes: number | bigint,
+  unitDisplay: "short" | "long" | "narrow" | undefined = "narrow"
+): string {
   let size = Math.abs(Number(sizeBytes));
 
   let unitIdx = 0;
@@ -14,7 +17,7 @@ export function prettySize(sizeBytes: number | bigint): string {
   return new Intl.NumberFormat([], {
     style: "unit",
     unit: UNITS[unitIdx],
-    unitDisplay: "narrow",
+    unitDisplay,
     notation: "standard",
     maximumFractionDigits: 1,
   })

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

@@ -8,10 +8,10 @@ import {
   useThemeMode,
   useThemePreference,
 } from "./theme-provider";
-import {ThemePalette} from "./palette-generator";
 import {locateThemeBundle} from "./theme-styles";
 import {stylesFromTheme, themeFromPalette} from "./design-system";
 import {storeWarmPreference} from "./theme-settings";
+import type {ThemePalette} from "./design-system/types";
 
 const {
   palette,

package/src/scale-generator.ts

@@ -1,36 +1,5 @@
 import {fromOKLCH} from "./color-utils";
-import type {ColorScale} from "./palette-generator";
-
-export type OneBasedScale<T> = readonly [
-  base00: null,
-  step01: T,
-  step02: T,
-  step03: T,
-  step04: T,
-  step05: T,
-  step06: T,
-  step07: T,
-  step08: T,
-  step09: T,
-  step10: T,
-  step11: T,
-  step12: T,
-];
-
-export type ZeroBasedScale<T> = readonly [
-  step01: T,
-  step02: T,
-  step03: T,
-  step04: T,
-  step05: T,
-  step06: T,
-  step07: T,
-  step08: T,
-  step09: T,
-  step10: T,
-  step11: T,
-  step12: T,
-];
+import type {ColorScale, OneBasedScale, ZeroBasedScale} from "./design-system/types";
 
 export function zeroBasedFromOneBased<T>(scale: OneBasedScale<T>) {
   return scale.slice(1) as unknown as ZeroBasedScale<T>;

package/src/select/components/menu-list-virtua.tsx

@@ -0,0 +1,127 @@
+import compact from "lodash/compact";
+import {
+  Children,
+  ComponentType,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
+import {VList, VListHandle} from "virtua";
+import {GroupBase, ReactSelectRefContext} from "../util";
+import {isGroupChild, isReactElementWithProps} from "../reflection";
+
+const DEFAULT_ITEM_SIZE_ESTIMATE = 48;
+
+function flattenGroupChildren(
+  children: ReactNode,
+  renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
+): ReactNode[] {
+  return compact(
+    Children.toArray(children)
+      .map((child) => {
+        if (isReactElementWithProps(child) && isGroupChild(child)) {
+          const {props} = child;
+          const groupChildren = compact(Children.toArray(props.children));
+          if (!groupChildren.length) {
+            return [];
+          }
+          const heading = renderGroup(props.Heading, props.headingProps);
+          return [heading, ...groupChildren];
+        }
+        return child;
+      })
+      .flat()
+  );
+}
+
+/**
+ * Virtualized MenuList using virtua — supports dynamic item heights.
+ * Use with `virtualized={false}` + `components={{ MenuList: MenuListVirtua }}`.
+ */
+export function MenuListVirtua<
+  Option,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: MenuListProps<Option, IsMulti, Group>) {
+  const {children, focusedOption, maxHeight, getStyles, selectProps, cx, theme} = props;
+  const vlistRef = useRef<VListHandle>(null);
+  const select = useContext(ReactSelectRefContext);
+  const [initialized, setInitialized] = useState(false);
+
+  const renderGroup = useMemo(
+    () => (Component: ComponentType<GroupHeadingProps>, headingProps: GroupProps["headingProps"]) => {
+      const content = selectProps.formatGroupLabel
+        ? selectProps.formatGroupLabel(headingProps.data as Group)
+        : headingProps.data.label;
+      return content ? (
+        <Component
+          cx={cx}
+          selectProps={selectProps as unknown as GroupHeadingProps["selectProps"]}
+          theme={theme}
+          getStyles={getStyles}
+          {...headingProps}
+        >
+          {content}
+        </Component>
+      ) : null;
+    },
+    [cx, getStyles, selectProps, theme]
+  );
+
+  const items = useMemo(() => flattenGroupChildren(children, renderGroup), [children, renderGroup]);
+  const estimatedHeight = Math.min(items.length * DEFAULT_ITEM_SIZE_ESTIMATE, maxHeight);
+
+  const focusedIndex = useMemo(() => {
+    if (!focusedOption) {
+      return -1;
+    }
+    return items.findIndex((child) => {
+      return isReactElementWithProps(child) && "data" in child.props && child.props.data === focusedOption;
+    });
+  }, [focusedOption, items]);
+
+  useEffect(() => {
+    if (!select.current || !items.length || initialized) {
+      return;
+    }
+    let firstOption: unknown;
+    let selectedOption: unknown;
+    for (const child of items) {
+      if (isReactElementWithProps(child) && "type" in child.props && child.props.type === "option") {
+        if (!firstOption && "data" in child.props) {
+          firstOption = child.props.data;
+        }
+        if ("isSelected" in child.props && child.props.isSelected && "data" in child.props) {
+          selectedOption = child.props.data;
+          break;
+        }
+      }
+    }
+    const target = selectedOption || firstOption;
+    if (target) {
+      setInitialized(true);
+      select.current.setState({focusedOption: target});
+    }
+  }, [items, initialized, select]);
+
+  useEffect(() => {
+    if (focusedIndex >= 0 && vlistRef.current) {
+      vlistRef.current.scrollToIndex(focusedIndex, {align: "nearest"});
+    }
+  }, [focusedIndex]);
+
+  return (
+    <div style={{height: estimatedHeight, ...(getStyles("menuList", props) as CSSProperties), overflow: "hidden"}}>
+      <VList ref={vlistRef} style={{height: "100%"}} itemSize={DEFAULT_ITEM_SIZE_ESTIMATE}>
+        {items.map((child, i) => (
+          <div key={i}>{child}</div>
+        ))}
+      </VList>
+    </div>
+  );
+}

package/src/select/index.tsx

@@ -27,7 +27,7 @@ export type {
   SelectProps,
 } from "./select";
 
-export {components, MenuListVirtualized, createFilter} from "./select";
+export {components, MenuListVirtualized, MenuListVirtua, createFilter} from "./select";
 
 export {combineStyles} from "./select";
 

package/src/select/reflection.ts

@@ -0,0 +1,22 @@
+import isObject from "lodash/isObject";
+import {GroupBase} from "./util";
+import type {GroupProps} from "react-select/dist/declarations/src";
+import isFunction from "lodash/isFunction";
+
+type ReactElementWithProps<P = object> = {props: P};
+
+export function isReactElementWithProps(node: unknown): node is ReactElementWithProps {
+  return isObject(node) && "props" in node && isObject(node.props);
+}
+
+export function isGroupChild<Option, IsMulti extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  node: ReactElementWithProps
+): node is ReactElementWithProps<GroupProps<Option, IsMulti, Group>> {
+  return (
+    "options" in node.props &&
+    "Heading" in node.props &&
+    isFunction(node.props.Heading) &&
+    "headingProps" in node.props &&
+    isObject(node.props.headingProps)
+  );
+}

package/src/select/select.tsx

@@ -54,6 +54,7 @@ export type {
 };
 
 export {reactSelectComponents as components, MenuListVirtualized, createFilter};
+export {MenuListVirtua} from "./components/menu-list-virtua";
 
 function GroupVirtualized() {
   return null;

package/src/static-palettes.ts

@@ -1,4 +1,5 @@
-import {selectPalette, type ThemePalette} from "./palette-generator";
+import {selectPalette} from "./palette-generator";
+import type {ThemePalette} from "./design-system/types";
 
 export interface LabPalettes {
   make: () => ThemePalette;

package/src/thematic-color-picker.tsx

@@ -58,6 +58,11 @@ export const miniSwatchCss = css`
   height: 11px;
 `;
 
+export const tinySwatchCss = css`
+  width: 16px;
+  height: 16px;
+`;
+
 const splitSwatchCss = css`
   width: 22px;
   height: 22px;
@@ -107,6 +112,7 @@ export function SwatchWithPicker({
   splitBg,
   altColor,
   mini,
+  tiny,
   inspectChannel,
 }: {
   color: string;
@@ -118,9 +124,10 @@ export function SwatchWithPicker({
   splitBg?: boolean;
   altColor?: string;
   mini?: boolean;
+  tiny?: boolean;
   inspectChannel?: InspectChannel;
 }) {
-  const baseCls = mini ? miniSwatchCss : swatchCss;
+  const baseCls = tiny ? tinySwatchCss : mini ? miniSwatchCss : swatchCss;
   const splitCls = mini ? miniSplitSwatchCss : splitSwatchCss;
 
   const overlay = inspectChannel

package/src/thematic-constants.tsx

@@ -3,12 +3,14 @@ import type {ThemePreference} from "./theme-settings";
 import AppearanceLight from "./icons/react/AppearanceLight";
 import AppearanceDark from "./icons/react/AppearanceDark";
 import AppearanceAuto from "./icons/react/AppearanceAuto";
+import {common} from "./palettes/common";
 
 export const defaultPrefs: ThematicPrefs = {
   baseHue: 0,
   baseChroma: 0,
   accentHue: 264,
   accentChroma: 0.16,
+  highlight: common.highlight,
 };
 
 export const HIGHLIGHT_COLOR = "#ff00ff";

package/src/thematic-controls.tsx

@@ -219,6 +219,7 @@ export function Slider({
   color,
   onLabelHover,
   onLabelLeave,
+  onLabelClick,
 }: {
   label: string;
   value: number;
@@ -231,10 +232,17 @@ export function Slider({
   color?: string;
   onLabelHover?: () => void;
   onLabelLeave?: () => void;
+  onLabelClick?: () => void;
 }) {
   return (
     <div className={controlRowCss}>
-      <span className={controlLabelCss} onMouseEnter={onLabelHover} onMouseLeave={onLabelLeave}>
+      <span
+        className={controlLabelCss}
+        style={onLabelClick ? {cursor: "pointer"} : undefined}
+        onMouseEnter={onLabelHover}
+        onMouseLeave={onLabelLeave}
+        onClick={onLabelClick}
+      >
         {label}
       </span>
       <input

package/src/thematic-cvd.tsx

@@ -0,0 +1,73 @@
+import {useState} from "react";
+import {useThematicState} from "./thematic-state";
+import {sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
+import {Slider} from "./thematic-controls";
+import {cvdChannels} from "./color-filter";
+
+const types = [null, ...cvdChannels] as const;
+
+const activeKey = (dn: ReturnType<typeof useThematicState>["deneutralizeSpec"]) => {
+  for (const {key} of cvdChannels) {
+    if (dn?.[key]) {
+      return key;
+    }
+  }
+  return null;
+};
+
+export function CvdSection({state}: {state: ReturnType<typeof useThematicState>}) {
+  const dn = state.deneutralizeSpec;
+  const current = activeKey(dn);
+  const currentChannel = current ? cvdChannels.find((c) => c.key === current) : null;
+  const liveSeverity = current ? (dn?.[current] ?? 0) : 0;
+  const [savedAmount, setSavedAmount] = useState(0.8);
+
+  const amount = current ? liveSeverity : savedAmount;
+
+  if (liveSeverity > 0 && liveSeverity !== savedAmount) {
+    setSavedAmount(liveSeverity);
+  }
+
+  const onCycle = () => {
+    const currentIdx = current ? types.findIndex((t) => t && t.key === current) : 0;
+    const next = types[(currentIdx + 1) % types.length];
+
+    const update: Record<string, number> = {};
+    for (const {key} of cvdChannels) {
+      update[key] = 0;
+    }
+    if (next) {
+      update[next.key] = amount;
+    }
+    state.updateFilter(update);
+  };
+
+  return (
+    <>
+      <div className={sectionSeparatorCss} />
+      <div className={sectionLabelCss} style={{fontWeight: 700, cursor: "pointer"}} onClick={onCycle}>
+        cvd: {currentChannel?.label ?? "none"}
+      </div>
+      <Slider
+        label="amount"
+        value={amount}
+        min={0}
+        max={1}
+        step={0.05}
+        onChange={(v) => {
+          setSavedAmount(v);
+          if (current) {
+            state.updateFilter({[current]: v});
+          }
+        }}
+        onLabelClick={() => {
+          const next = amount > 0 ? 0 : 1;
+          setSavedAmount(next);
+          if (current) {
+            state.updateFilter({[current]: next});
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/thematic-highlights.tsx

@@ -0,0 +1,49 @@
+import {useThematicState} from "./thematic-state";
+import {sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
+import {Slider} from "./thematic-controls";
+
+export function HighlightSection({state}: {state: ReturnType<typeof useThematicState>}) {
+  const side = state.showDark ? 1 : 0;
+  const h = state.palette.highlight;
+
+  const update = ({bgLc, bgC, fgC, fgLc}: {bgLc?: number; bgC?: number; fgC?: number; fgLc?: number}) => {
+    const newBg = [...h.bg] as typeof h.bg;
+    const newFg = [...h.fg] as typeof h.fg;
+    if (bgLc !== undefined) {
+      newBg[side] = {...newBg[side], Lc: bgLc};
+    }
+    if (bgC !== undefined) {
+      newBg[side] = {...newBg[side], c: bgC};
+    }
+    if (fgC !== undefined) {
+      newFg[side] = {...newFg[side], c: fgC};
+    }
+    if (fgLc !== undefined) {
+      newFg[side] = {...newFg[side], Lc: fgLc};
+    }
+    state.updateHighlight({...h, bg: newBg, fg: newFg});
+  };
+  return (
+    <>
+      <div className={sectionSeparatorCss} />
+      <div className={sectionLabelCss} style={{fontWeight: 700}}>
+        highlight ({state.showDark ? "dark" : "light"})
+      </div>
+      <Slider
+        label="bg Lc"
+        value={h.bg[side].Lc}
+        min={0}
+        max={30}
+        step={0.01}
+        onChange={(bgLc) => {
+          // oxlint-disable-next-line no-console
+          console.log(`[slider] bgLc=${bgLc} t=${performance.now().toFixed(0)}`);
+          update({bgLc});
+        }}
+      />
+      <Slider label="bg Ch" value={h.bg[side].c} min={0} max={0.4} step={0.001} onChange={(bgC) => update({bgC})} />
+      <Slider label="fg Lc" value={h.fg[side].Lc} min={0} max={90} step={0.01} onChange={(fgLc) => update({fgLc})} />
+      <Slider label="fg Ch" value={h.fg[side].c} min={0} max={0.4} step={0.001} onChange={(fgC) => update({fgC})} />
+    </>
+  );
+}

package/src/thematic-scales.tsx

@@ -1,7 +1,6 @@
 import {css} from "@linaria/core";
-import {type ColorScale} from "./palette-generator";
 import {space, themeVars} from "./design-system";
-import {type InspectChannel, SwatchWithPicker, miniSwatchCss, swatchCss} from "./thematic-color-picker";
+import {type InspectChannel, SwatchWithPicker, miniSwatchCss, swatchCss, tinySwatchCss} from "./thematic-color-picker";
 
 export const scaleCss = css`
   display: flex;
@@ -42,9 +41,9 @@ const gridCss = css`
   overflow-x: auto;
 `;
 
-type ScaleEntry = {
+export type ScaleEntry = {
   name: string;
-  scale: ColorScale;
+  scale: readonly (string | null)[];
   onColorChange?: (index: number, color: string) => void;
   onHover?: (color: string, name: string) => void;
   onHoverEnd?: () => void;
@@ -52,6 +51,7 @@ type ScaleEntry = {
   splitBg?: boolean;
   altColors?: (string | null)[];
   mini?: boolean;
+  tiny?: boolean;
 };
 
 export function ScaleGrid({
@@ -64,11 +64,11 @@ export function ScaleGrid({
 }) {
   return (
     <div className={gridCss}>
-      {scales.map(({name, scale, onColorChange, onHover, onHoverEnd, extra, splitBg, altColors, mini}) => (
+      {scales.map(({name, scale, onColorChange, onHover, onHoverEnd, extra, splitBg, altColors, mini, tiny}) => (
         <div key={name} className={columnCss}>
           {scale.map((color, i) =>
             color === null ? null : (color as unknown) === SPACER ? (
-              <div key={i} className={`${mini ? miniSwatchCss : swatchCss} ${emptySwatchCss}`} />
+              <div key={i} className={`${tiny ? tinySwatchCss : mini ? miniSwatchCss : swatchCss} ${emptySwatchCss}`} />
             ) : (
               <SwatchWithPicker
                 key={i}
@@ -80,6 +80,7 @@ export function ScaleGrid({
                 splitBg={splitBg}
                 altColor={altColors?.[i] ?? undefined}
                 mini={mini}
+                tiny={tiny}
                 inspectChannel={inspectChannel}
               />
             )
@@ -92,6 +93,7 @@ export function ScaleGrid({
               onHover={onHover}
               onHoverEnd={onHoverEnd}
               mini={mini}
+              tiny={tiny}
               inspectChannel={inspectChannel}
             />
           )}