From 84f66e9faed22f3fb0cadbf6ece43867d9b201b1 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Mon, 20 Jul 2026 18:26:39 +0200 Subject: [PATCH] style: apply current biome formatting across untouched files Pure formatting churn (tabs, import order, line wrapping) produced by `bunx biome check --write` under the currently-pinned biome version. No behavior changes. Co-Authored-By: Claude Fable 5 --- src/animate-number.tsx | 3 +- src/animation/provider.tsx | 12 +---- src/animation/use-responsive-hover.ts | 6 +-- src/button.stories.tsx | 9 +++- src/form/checkbox.tsx | 2 +- src/form/select.tsx | 10 +++- src/material/use-specular.ts | 10 +++- src/sound/default-theme.ts | 67 +++++++++++++++++++++++++++ src/sound/player.ts | 4 +- src/styles/globals.css | 38 +++++++-------- src/styles/page-transition.css | 28 +++++------ src/styles/theme.css | 5 +- src/styles/timing-functions.css | 42 ++++++++--------- src/toast.stories.tsx | 5 +- src/toast.tsx | 12 +++-- tsdown.config.ts | 5 +- 16 files changed, 165 insertions(+), 93 deletions(-) create mode 100644 src/sound/default-theme.ts diff --git a/src/animate-number.tsx b/src/animate-number.tsx index ad25fc6..0457c4e 100644 --- a/src/animate-number.tsx +++ b/src/animate-number.tsx @@ -284,8 +284,7 @@ export const AnimateNumber: FC = ({ // Compare to previous render's value to derive scroll direction. Updated // in an effect so Strict Mode's double-render doesn't desync the ref. const prevValueRef = useRef(children); - const direction: Direction = - children >= prevValueRef.current ? "up" : "down"; + const direction: Direction = children >= prevValueRef.current ? "up" : "down"; useEffect(() => { prevValueRef.current = children; }, [children]); diff --git a/src/animation/provider.tsx b/src/animation/provider.tsx index 97a866f..b391a1e 100644 --- a/src/animation/provider.tsx +++ b/src/animation/provider.tsx @@ -1,10 +1,5 @@ "use client"; -import { - createContext, - type ReactNode, - useContext, - useMemo, -} from "react"; +import { createContext, type ReactNode, useContext, useMemo } from "react"; import { defaultAnimationTheme } from "./defaults"; import { mergeTheme } from "./merge"; import type { AnimationTheme, PartialAnimationTheme } from "./types"; @@ -16,10 +11,7 @@ export type AnimationProviderProps = { children: ReactNode; }; -export function AnimationProvider({ - theme, - children, -}: AnimationProviderProps) { +export function AnimationProvider({ theme, children }: AnimationProviderProps) { const parent = useContext(AnimationContext); const merged = useMemo(() => mergeTheme(parent, theme), [parent, theme]); return ( diff --git a/src/animation/use-responsive-hover.ts b/src/animation/use-responsive-hover.ts index 03a0b34..97128ff 100644 --- a/src/animation/use-responsive-hover.ts +++ b/src/animation/use-responsive-hover.ts @@ -11,11 +11,7 @@ export function useResponsiveHover( useLayoutEffect(() => { const node = ref.current; if (!config || !node || typeof ResizeObserver === "undefined") return; - const { - minScale = 1.01, - maxScale = 1.05, - referenceWidth = 80, - } = config; + const { minScale = 1.01, maxScale = 1.05, referenceWidth = 80 } = config; const maxDelta = maxScale - 1; const minDelta = minScale - 1; diff --git a/src/button.stories.tsx b/src/button.stories.tsx index e421222..34954f4 100644 --- a/src/button.stories.tsx +++ b/src/button.stories.tsx @@ -8,7 +8,14 @@ const meta: Meta = { argTypes: { variant: { control: "select", - options: ["default", "destructive", "outline", "secondary", "ghost", "link"], + options: [ + "default", + "destructive", + "outline", + "secondary", + "ghost", + "link", + ], }, size: { control: "select", diff --git a/src/form/checkbox.tsx b/src/form/checkbox.tsx index 80e4312..c063721 100644 --- a/src/form/checkbox.tsx +++ b/src/form/checkbox.tsx @@ -2,8 +2,8 @@ import { motion } from "motion/react"; import { Checkbox as CheckboxPrimitive } from "radix-ui"; -import { forwardRef } from "react"; import type * as React from "react"; +import { forwardRef } from "react"; import { useAnimation } from "@/animation/provider"; import { useControllableState } from "@/hooks/useControllableState"; import { cn } from "@/lib/utils"; diff --git a/src/form/select.tsx b/src/form/select.tsx index b5c985f..916847d 100644 --- a/src/form/select.tsx +++ b/src/form/select.tsx @@ -56,7 +56,10 @@ function SelectTrigger({ data-material={mat.enabled ? "neutral" : undefined} style={ mat.enabled - ? ({ "--mat-base": "var(--neutral)", ...style } as React.CSSProperties) + ? ({ + "--mat-base": "var(--neutral)", + ...style, + } as React.CSSProperties) : style } className={cn( @@ -96,7 +99,10 @@ function SelectContent({ data-material={mat.enabled ? "neutral" : undefined} style={ mat.enabled - ? ({ "--mat-base": "var(--neutral)", ...style } as React.CSSProperties) + ? ({ + "--mat-base": "var(--neutral)", + ...style, + } as React.CSSProperties) : style } className={cn( diff --git a/src/material/use-specular.ts b/src/material/use-specular.ts index 80365c7..aa4bf4f 100644 --- a/src/material/use-specular.ts +++ b/src/material/use-specular.ts @@ -34,8 +34,14 @@ export function useSpecular(enabled = true) { onPointerMove: (e: PointerEvent) => { const el = e.currentTarget; const r = el.getBoundingClientRect(); - el.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`); - el.style.setProperty("--my", `${((e.clientY - r.top) / r.height) * 100}%`); + el.style.setProperty( + "--mx", + `${((e.clientX - r.left) / r.width) * 100}%`, + ); + el.style.setProperty( + "--my", + `${((e.clientY - r.top) / r.height) * 100}%`, + ); }, onPointerLeave: (e: PointerEvent) => { const el = e.currentTarget; diff --git a/src/sound/default-theme.ts b/src/sound/default-theme.ts new file mode 100644 index 0000000..e589055 --- /dev/null +++ b/src/sound/default-theme.ts @@ -0,0 +1,67 @@ +import type { SoundDef, SoundTheme } from "./types"; + +const buttonsSrc = new URL( + "../assets/sounds/762132__ienba__ui-buttons.wav", + import.meta.url, +).href; +const uiSetSrc = new URL( + "../assets/sounds/842498__newlocknew__uimvmt_game-user-interface-sound-set.mp3", + import.meta.url, +).href; + +const buttonsSpriteMap = { + click1: [0, 1000], + click2: [2750, 1000], + click3: [5200, 1000], + click4: [7700, 1000], +} satisfies Record; + +const uiSetSpriteMap = { + smooth1: [0, 1200], + smooth2: [7800, 1400], + lobbyCreated: [53800, 3500], + gameStart: [62000, 4000], +} satisfies Record; + +const fromButtons = ( + sprite: keyof typeof buttonsSpriteMap, + extra?: Partial, +): SoundDef => ({ + src: buttonsSrc, + sprite, + spriteMap: buttonsSpriteMap, + ...extra, +}); + +const fromUiSet = ( + sprite: keyof typeof uiSetSpriteMap, + extra?: Partial, +): SoundDef => ({ + src: uiSetSrc, + sprite, + spriteMap: uiSetSpriteMap, + ...extra, +}); + +export const defaultSoundTheme: SoundTheme = { + volume: 1, + muted: false, + custom: {}, + tokens: { + click: fromButtons("click1", { pool: 4, interrupt: true }), + hover: fromButtons("click2", { pool: 4, interrupt: true, volume: 0.6 }), + toggle: fromButtons("click2", { pool: 2 }), + focus: fromButtons("click2", { pool: 1, volume: 0.5 }), + selectOpen: fromButtons("click3"), + selectClose: fromButtons("click4"), + lobbyCreated: fromUiSet("lobbyCreated"), + gameStart: fromUiSet("gameStart"), + gameWon: fromUiSet("gameStart"), + roundSuccess: fromUiSet("smooth1"), + userJoined: fromUiSet("smooth1", { volume: 0.7 }), + userLeft: fromUiSet("smooth2", { volume: 0.7 }), + error: fromButtons("click4", { volume: 0.8 }), + submit: fromButtons("click3"), + vote: fromButtons("click2"), + }, +}; diff --git a/src/sound/player.ts b/src/sound/player.ts index 80e1285..e4955b1 100644 --- a/src/sound/player.ts +++ b/src/sound/player.ts @@ -24,9 +24,7 @@ export function getHowl(def: SoundDef): Promise { ({ Howl }) => new Howl({ src: typeof def.src === "string" ? [def.src] : def.src, - sprite: def.spriteMap as - | Record - | undefined, + sprite: def.spriteMap as Record | undefined, preload: true, pool: def.pool ?? 1, }), diff --git a/src/styles/globals.css b/src/styles/globals.css index ea978d5..36cc423 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -7,28 +7,28 @@ @source "./**/*.{js,mjs}"; :root { - --main: oklch(0.26% 0 0); - --accent: oklch(0.73 0.2 350.45); - --primary: oklch(0.56 0.17 253.49); - --brand: oklch(0.56 0.17 253.49); - --neutral: oklch(0.9 0.07 346.02); - --neutral-accent: oklch(0.92% 0.13 152.01); - --neutral-highlight: oklch(0.7448% 0.1823 50.477); - --highlight: oklch(0.7 0.23 352.23); - --success: oklch(91.1% 0.1605 148.89); - --error: oklch(65.7% 0.22923 26.238); + --main: oklch(0.26% 0 0); + --accent: oklch(0.73 0.2 350.45); + --primary: oklch(0.56 0.17 253.49); + --brand: oklch(0.56 0.17 253.49); + --neutral: oklch(0.9 0.07 346.02); + --neutral-accent: oklch(0.92% 0.13 152.01); + --neutral-highlight: oklch(0.7448% 0.1823 50.477); + --highlight: oklch(0.7 0.23 352.23); + --success: oklch(91.1% 0.1605 148.89); + --error: oklch(65.7% 0.22923 26.238); - --font-display: "Integral CF", ui-sans-serif, system-ui, sans-serif; - --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; - --font-mono: - Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; + --font-display: "Integral CF", ui-sans-serif, system-ui, sans-serif; + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; + --font-mono: + Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; - --radius: 0.625rem; - /* Floor for the nested-card border radius — see card.tsx. Each + --radius: 0.625rem; + /* Floor for the nested-card border radius — see card.tsx. Each theme can tune this independently of the base `--radius` to keep deeply-nested cards visibly rounded. */ - --radius-card-min: var(--radius); + --radius-card-min: var(--radius); } @theme inline static { @@ -231,4 +231,4 @@ @apply mb-4 mt-6; } } -} \ No newline at end of file +} diff --git a/src/styles/page-transition.css b/src/styles/page-transition.css index 386c77d..ef4ed25 100644 --- a/src/styles/page-transition.css +++ b/src/styles/page-transition.css @@ -1,18 +1,18 @@ @keyframes pageEnter { - from { - transform: translateY(40px); - opacity: 0; - } - to { - opacity: 1; - transform: translateY(0); - } + from { + transform: translateY(40px); + opacity: 0; + } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes pageLeave { - from { - opacity: 1; - } - to { - opacity: 0; - } + from { + opacity: 1; + } + to { + opacity: 0; + } } diff --git a/src/styles/theme.css b/src/styles/theme.css index bc0d95d..03af96e 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -28,8 +28,9 @@ --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Courier New", monospace; + --font-mono: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", + monospace; --radius: 0.625rem; /* Floor for the nested-card border radius — see card.tsx. Each diff --git a/src/styles/timing-functions.css b/src/styles/timing-functions.css index 4378f75..1987958 100644 --- a/src/styles/timing-functions.css +++ b/src/styles/timing-functions.css @@ -1,23 +1,23 @@ @theme { - --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); - --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); - --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); - --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); - --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); - --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); - --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); - --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); - --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); - --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); - --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); - --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); - --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); - --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); - --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); - --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); + --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); + --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); + --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); + --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); + --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); + --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); + --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); + --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); + --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); + --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); + --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); + --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); + --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); + --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); + --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); + --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); + --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); + --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); } diff --git a/src/toast.stories.tsx b/src/toast.stories.tsx index f3711ac..cd44f27 100644 --- a/src/toast.stories.tsx +++ b/src/toast.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { Button } from "./button"; -import { toast, Toaster } from "./toast"; +import { Toaster, toast } from "./toast"; const meta: Meta = { title: "toast/Toast", @@ -87,8 +87,7 @@ export const Promise: Story = { ), { loading: "Uploading...", - success: (data) => - `${(data as { name: string }).name} uploaded`, + success: (data) => `${(data as { name: string }).name} uploaded`, error: "Upload failed", }, ) diff --git a/src/toast.tsx b/src/toast.tsx index cfd2d0d..dcab4cb 100644 --- a/src/toast.tsx +++ b/src/toast.tsx @@ -71,14 +71,17 @@ function invoke(method: string | null, args: unknown[]): void { if (!p) return; void p.then((m) => { const target = - method === null ? m.toast : (m.toast as unknown as Record)[method]; + method === null + ? m.toast + : (m.toast as unknown as Record)[method]; if (typeof target === "function") { (target as (...a: unknown[]) => unknown)(...args); } }); } -const toastImpl = ((...args: unknown[]) => invoke(null, args)) as unknown as ToastFn; +const toastImpl = ((...args: unknown[]) => + invoke(null, args)) as unknown as ToastFn; for (const method of [ "success", "error", @@ -90,8 +93,9 @@ for (const method of [ "custom", "promise", ] as const) { - (toastImpl as unknown as Record)[method] = (...args: unknown[]) => - invoke(method, args); + (toastImpl as unknown as Record)[method] = ( + ...args: unknown[] + ) => invoke(method, args); } const toast = toastImpl; diff --git a/tsdown.config.ts b/tsdown.config.ts index c610785..3939768 100644 --- a/tsdown.config.ts +++ b/tsdown.config.ts @@ -2,10 +2,7 @@ import { defineConfig } from "tsdown"; export default defineConfig({ fixedExtension: false, - entry: [ - "./src/**/*.(ts|tsx)", - "!./src/**/*.stories.(ts|tsx)", - ], + entry: ["./src/**/*.(ts|tsx)", "!./src/**/*.stories.(ts|tsx)"], format: "esm", copy: [ {