{@render children?.(font)}
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 0cf1834..c0b6f45 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -3,58 +3,57 @@
- Renders a virtualized list of fonts
- Handles font registration with the manager
-->
-
-{#key isLoading}
-
- {#if isLoading}
-
- {#snippet children(scope)}
- {@render children(scope)}
- {/snippet}
-
- {/if}
-
-{/key}
+
- {#each Array(5) as _, i}
-
- {:else}
-
-
- {/each}
-
-
-
+ {#if skeleton && isLoading && unifiedFontStore.fonts.length === 0}
+
+
+ {#snippet children(scope)}
+ {@render children(scope)}
+ {/snippet}
+
+ {/if}
+
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index d1a41ed..0e43da1 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -36,12 +36,7 @@ interface Props {
letterSpacing?: number;
}
-let {
- font,
- text = $bindable(),
- index = 0,
- ...restProps
-}: Props = $props();
+let { font, text = $bindable(), index = 0, ...restProps }: Props = $props();
const fontWeight = $derived(controlManager.weight);
const fontSize = $derived(controlManager.renderedSize);
@@ -53,22 +48,22 @@ const letterSpacing = $derived(controlManager.spacing);
class="
w-full h-full rounded-xl sm:rounded-2xl
flex flex-col
- backdrop-blur-md bg-white/80
- border border-gray-300/50
+ bg-background-80
+ border border-border-muted
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
relative overflow-hidden
"
style:font-weight={fontWeight}
>
-
+ {@render skeleton()}
+
+ {:else}
+
+
+
typeface_{String(index).padStart(3, '0')}
-
-
+
+
;
diff --git a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
new file mode 100644
index 0000000..4a98ca8
--- /dev/null
+++ b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
@@ -0,0 +1,130 @@
+import { Spring } from 'svelte/motion';
+
+export interface PerspectiveConfig {
+ /**
+ * How many px to move back per level
+ */
+ depthStep?: number;
+ /**
+ * Scale reduction per level
+ */
+ scaleStep?: number;
+ /**
+ * Blur amount per level
+ */
+ blurStep?: number;
+ /**
+ * Opacity reduction per level
+ */
+ opacityStep?: number;
+ /**
+ * Parallax intensity per level
+ */
+ parallaxIntensity?: number;
+ /**
+ * Horizontal offset for each plan (x-axis positioning)
+ * Positive = right, Negative = left
+ */
+ horizontalOffset?: number;
+ /**
+ * Layout mode: 'center' (default) or 'split' for Swiss-style side-by-side
+ */
+ layoutMode?: 'center' | 'split';
+}
+
+/**
+ * Manages perspective state with a simple boolean flag.
+ *
+ * Drastically simplified from the complex camera/index system.
+ * Just manages whether content is in "back" or "front" state.
+ *
+ * @example
+ * ```typescript
+ * const perspective = createPerspectiveManager({
+ * depthStep: 100,
+ * scaleStep: 0.5,
+ * blurStep: 4,
+ * });
+ *
+ * // Toggle back/front
+ * perspective.toggle();
+ *
+ * // Check state
+ * const isBack = perspective.isBack; // reactive boolean
+ * ```
+ */
+export class PerspectiveManager {
+ /**
+ * Spring for smooth back/front transitions
+ */
+ spring = new Spring(0, {
+ stiffness: 0.2,
+ damping: 0.8,
+ });
+
+ /**
+ * Reactive boolean: true when in back position (blurred, scaled down)
+ */
+ isBack = $derived(this.spring.current > 0.5);
+
+ /**
+ * Reactive boolean: true when in front position (fully visible, interactive)
+ */
+ isFront = $derived(this.spring.current < 0.5);
+
+ /**
+ * Configuration values for style computation
+ */
+ private config: Required;
+
+ constructor(config: PerspectiveConfig = {}) {
+ this.config = {
+ depthStep: config.depthStep ?? 100,
+ scaleStep: config.scaleStep ?? 0.5,
+ blurStep: config.blurStep ?? 4,
+ opacityStep: config.opacityStep ?? 0.5,
+ parallaxIntensity: config.parallaxIntensity ?? 0,
+ horizontalOffset: config.horizontalOffset ?? 0,
+ layoutMode: config.layoutMode ?? 'center',
+ };
+ }
+
+ /**
+ * Toggle between front (0) and back (1) positions.
+ * Smooth spring animation handles the transition.
+ */
+ toggle = () => {
+ const target = this.spring.current < 0.5 ? 1 : 0;
+ this.spring.target = target;
+ };
+
+ /**
+ * Force to back position
+ */
+ setBack = () => {
+ this.spring.target = 1;
+ };
+
+ /**
+ * Force to front position
+ */
+ setFront = () => {
+ this.spring.target = 0;
+ };
+
+ /**
+ * Get configuration for style computation
+ * @internal
+ */
+ getConfig = () => this.config;
+}
+
+/**
+ * Factory function to create a PerspectiveManager instance.
+ *
+ * @param config - Configuration options
+ * @returns Configured PerspectiveManager instance
+ */
+export function createPerspectiveManager(config: PerspectiveConfig = {}) {
+ return new PerspectiveManager(config);
+}
diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index 4b92eb3..9b8ea6a 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -3,6 +3,7 @@
*
* Used to render visible items with absolute positioning based on computed offsets.
*/
+
export interface VirtualItem {
/**
* Index of the item in the data array
@@ -120,9 +121,11 @@ export function createVirtualizer(
// By wrapping the getter in $derived, we track everything inside it
const options = $derived(optionsGetter());
- // This derivation now tracks: count, measuredSizes, AND the data array itself
+ // This derivation now tracks: count, _version (for measuredSizes updates), AND the data array itself
const offsets = $derived.by(() => {
const count = options.count;
+ // Implicit dependency on version signal
+ const v = _version;
const result = new Float64Array(count);
let accumulated = 0;
for (let i = 0; i < count; i++) {
@@ -130,6 +133,7 @@ export function createVirtualizer(
// Accessing measuredSizes here creates the subscription
accumulated += measuredSizes[i] ?? options.estimateSize(i);
}
+
return result;
});
@@ -144,6 +148,8 @@ export function createVirtualizer(
// We MUST read options.data here so Svelte knows to re-run
// this derivation when the items array is replaced!
const { count, data } = options;
+ // Implicit dependency
+ const v = _version;
if (count === 0 || containerHeight === 0 || !data) return [];
const overscan = options.overscan ?? 5;
@@ -185,10 +191,13 @@ export function createVirtualizer(
const isFullyVisible = itemStart >= scrollOffset && itemEnd <= viewportEnd;
// Proximity calculation: 1.0 at center, 0.0 at edges
+ // Guard against division by zero (containerHeight can be 0 on initial render)
const itemCenter = itemStart + (itemSize / 2);
const distanceToCenter = Math.abs(viewportCenter - itemCenter);
const maxDistance = containerHeight / 2;
- const proximity = Math.max(0, 1 - (distanceToCenter / maxDistance));
+ const proximity = maxDistance > 0
+ ? Math.max(0, 1 - (distanceToCenter / maxDistance))
+ : 0;
result.push({
index: i,
@@ -202,16 +211,6 @@ export function createVirtualizer(
});
}
- // console.log('🎯 Virtual Items Calculation:', {
- // scrollOffset,
- // containerHeight,
- // viewportEnd,
- // startIdx,
- // endIdx,
- // withOverscan: { start, end },
- // itemCount: end - start,
- // });
-
return result;
});
// Svelte Actions (The DOM Interface)
@@ -252,25 +251,19 @@ export function createVirtualizer(
scrollOffset = scrolledPastTop;
rafId = null;
});
-
- // 🔍 DIAGNOSTIC
- // console.log('📜 Scroll Event:', {
- // windowScrollY: window.scrollY,
- // elementRectTop: rect.top,
- // scrolledPastTop,
- // containerHeight
- // });
};
const handleResize = () => {
containerHeight = window.innerHeight;
- cachedOffsetTop = getElementOffset();
+ elementOffsetTop = getElementOffset();
+ cachedOffsetTop = elementOffsetTop;
handleScroll();
};
// Initial setup
requestAnimationFrame(() => {
- cachedOffsetTop = getElementOffset();
+ elementOffsetTop = getElementOffset();
+ cachedOffsetTop = elementOffsetTop;
handleScroll();
});
@@ -289,6 +282,11 @@ export function createVirtualizer(
cancelAnimationFrame(rafId);
rafId = null;
}
+ // Disconnect shared ResizeObserver
+ if (sharedResizeObserver) {
+ sharedResizeObserver.disconnect();
+ sharedResizeObserver = null;
+ }
elementRef = null;
},
};
@@ -310,6 +308,11 @@ export function createVirtualizer(
destroy() {
node.removeEventListener('scroll', handleScroll);
resizeObserver.disconnect();
+ // Disconnect shared ResizeObserver
+ if (sharedResizeObserver) {
+ sharedResizeObserver.disconnect();
+ sharedResizeObserver = null;
+ }
elementRef = null;
},
};
@@ -318,44 +321,67 @@ export function createVirtualizer(
let measurementBuffer: Record = {};
let frameId: number | null = null;
+ // Signal to trigger updates when mutating measuredSizes in place
+ let _version = $state(0);
+
+ // Single shared ResizeObserver for all items (performance optimization)
+ let sharedResizeObserver: ResizeObserver | null = null;
+
/**
* Svelte action to measure individual item elements for dynamic height support.
*
- * Attaches a ResizeObserver to track actual element height and updates
- * measured sizes when dimensions change. Requires `data-index` attribute on the element.
+ * Uses a single shared ResizeObserver for all items to track actual element heights.
+ * Requires `data-index` attribute on the element.
*
* @param node - The DOM element to measure (should have `data-index` attribute)
* @returns Object with destroy method for cleanup
*/
function measureElement(node: HTMLElement) {
- const resizeObserver = new ResizeObserver(([entry]) => {
- if (!entry) return;
- const index = parseInt(node.dataset.index || '', 10);
- const height = entry.borderBoxSize[0]?.blockSize ?? node.offsetHeight;
+ // Initialize shared observer on first use
+ if (!sharedResizeObserver) {
+ sharedResizeObserver = new ResizeObserver(entries => {
+ // Process all entries in a single batch
+ for (const entry of entries) {
+ const target = entry.target as HTMLElement;
+ const index = parseInt(target.dataset.index || '', 10);
+ const height = entry.borderBoxSize[0]?.blockSize ?? target.offsetHeight;
- if (!isNaN(index)) {
- const oldHeight = measuredSizes[index];
- // Only update if the height difference is significant (> 0.5px)
- // This prevents "jitter" from focus rings or sub-pixel border changes
- if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
- // Stuff the measurement into a temporary buffer
- measurementBuffer[index] = height;
+ if (!isNaN(index)) {
+ const oldHeight = measuredSizes[index];
- // Schedule a single update for the next animation frame
- if (frameId === null) {
- frameId = requestAnimationFrame(() => {
- measuredSizes = { ...measuredSizes, ...measurementBuffer };
- // Reset the buffer
- measurementBuffer = {};
- frameId = null;
- });
+ // Only update if the height difference is significant (> 0.5px)
+ if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
+ measurementBuffer[index] = height;
+ }
}
}
- }
- });
- resizeObserver.observe(node);
- return { destroy: () => resizeObserver.disconnect() };
+ // Schedule a single update for the next animation frame
+ if (frameId === null && Object.keys(measurementBuffer).length > 0) {
+ frameId = requestAnimationFrame(() => {
+ // Mutation in place for performance
+ Object.assign(measuredSizes, measurementBuffer);
+
+ // Trigger reactivity
+ _version += 1;
+
+ // Reset buffer
+ measurementBuffer = {};
+ frameId = null;
+ });
+ }
+ });
+ }
+
+ // Observe this element with the shared observer
+ sharedResizeObserver.observe(node);
+
+ // Return cleanup that only unobserves this specific element
+ return {
+ destroy: () => {
+ sharedResizeObserver?.unobserve(node);
+ },
+ };
}
// Programmatic Scroll
@@ -395,6 +421,28 @@ export function createVirtualizer(
}
}
+ /**
+ * Scrolls the container to a specific pixel offset.
+ * Used for preserving scroll position during data updates.
+ *
+ * @param offset - The scroll offset in pixels
+ * @param behavior - Scroll behavior: 'auto' for instant, 'smooth' for animated
+ *
+ * @example
+ * ```ts
+ * virtualizer.scrollToOffset(1000, 'auto'); // Instant scroll to 1000px
+ * ```
+ */
+ function scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto') {
+ const { useWindowScroll } = optionsGetter();
+
+ if (useWindowScroll) {
+ window.scrollTo({ top: offset + elementOffsetTop, behavior });
+ } else if (elementRef) {
+ elementRef.scrollTo({ top: offset, behavior });
+ }
+ }
+
return {
get scrollOffset() {
return scrollOffset;
@@ -416,6 +464,8 @@ export function createVirtualizer(
measureElement,
/** Programmatic scroll method to scroll to a specific item */
scrollToIndex,
+ /** Programmatic scroll method to scroll to a specific pixel offset */
+ scrollToOffset,
};
}
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 41139b0..d37eb5b 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -28,6 +28,7 @@ export {
} from './createEntityStore/createEntityStore.svelte';
export {
+ type CharacterComparison,
createCharacterComparison,
type LineData,
} from './createCharacterComparison/createCharacterComparison.svelte';
@@ -42,3 +43,8 @@ export {
type ResponsiveManager,
responsiveManager,
} from './createResponsiveManager/createResponsiveManager.svelte';
+
+export {
+ createPerspectiveManager,
+ type PerspectiveManager,
+} from './createPerspectiveManager/createPerspectiveManager.svelte';
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 99ade48..dc62fee 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -1,4 +1,5 @@
export {
+ type CharacterComparison,
type ControlDataModel,
type ControlModel,
createCharacterComparison,
@@ -6,6 +7,7 @@ export {
createEntityStore,
createFilter,
createPersistentStore,
+ createPerspectiveManager,
createResponsiveManager,
createTypographyControl,
createVirtualizer,
@@ -15,6 +17,7 @@ export {
type FilterModel,
type LineData,
type PersistentStore,
+ type PerspectiveManager,
type Property,
type ResponsiveManager,
responsiveManager,
@@ -24,7 +27,16 @@ export {
type VirtualizerOptions,
} from './helpers';
-export { splitArray } from './utils';
+export {
+ buildQueryString,
+ clampNumber,
+ debounce,
+ getDecimalPlaces,
+ roundToStepPrecision,
+ smoothScroll,
+ splitArray,
+ throttle,
+} from './utils';
export { springySlideFade } from './transitions';
diff --git a/src/shared/lib/utils/index.ts b/src/shared/lib/utils/index.ts
index 08a788f..904d58c 100644
--- a/src/shared/lib/utils/index.ts
+++ b/src/shared/lib/utils/index.ts
@@ -11,4 +11,6 @@ export { clampNumber } from './clampNumber/clampNumber';
export { debounce } from './debounce/debounce';
export { getDecimalPlaces } from './getDecimalPlaces/getDecimalPlaces';
export { roundToStepPrecision } from './roundToStepPrecision/roundToStepPrecision';
+export { smoothScroll } from './smoothScroll/smoothScroll';
export { splitArray } from './splitArray/splitArray';
+export { throttle } from './throttle/throttle';
diff --git a/src/shared/lib/utils/smoothScroll/smoothScroll.ts b/src/shared/lib/utils/smoothScroll/smoothScroll.ts
new file mode 100644
index 0000000..9f3c616
--- /dev/null
+++ b/src/shared/lib/utils/smoothScroll/smoothScroll.ts
@@ -0,0 +1,32 @@
+/**
+ * Smoothly scrolls to the target element when an anchor element is clicked.
+ * @param node - The anchor element to listen for clicks on.
+ */
+export function smoothScroll(node: HTMLAnchorElement) {
+ const handleClick = (event: MouseEvent) => {
+ event.preventDefault();
+
+ const hash = node.getAttribute('href');
+ if (!hash || hash === '#') return;
+
+ const targetElement = document.querySelector(hash);
+
+ if (targetElement) {
+ targetElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ });
+
+ // Update URL hash without jumping
+ history.pushState(null, '', hash);
+ }
+ };
+
+ node.addEventListener('click', handleClick);
+
+ return {
+ destroy() {
+ node.removeEventListener('click', handleClick);
+ },
+ };
+}
diff --git a/src/shared/lib/utils/throttle/throttle.ts b/src/shared/lib/utils/throttle/throttle.ts
new file mode 100644
index 0000000..4bb0c90
--- /dev/null
+++ b/src/shared/lib/utils/throttle/throttle.ts
@@ -0,0 +1,32 @@
+/**
+ * Throttle function execution to a maximum frequency.
+ *
+ * @param fn Function to throttle.
+ * @param wait Maximum time between function calls.
+ * @returns Throttled function.
+ */
+export function throttle any>(
+ fn: T,
+ wait: number,
+): (...args: Parameters) => void {
+ let lastCall = 0;
+ let timeoutId: ReturnType | null = null;
+
+ return (...args: Parameters) => {
+ const now = Date.now();
+ const timeSinceLastCall = now - lastCall;
+
+ if (timeSinceLastCall >= wait) {
+ lastCall = now;
+ fn(...args);
+ } else {
+ // Schedule for end of wait period
+ if (timeoutId) clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => {
+ lastCall = Date.now();
+ fn(...args);
+ timeoutId = null;
+ }, wait - timeSinceLastCall);
+ }
+ };
+}
diff --git a/src/shared/shadcn/ui/slider/slider.svelte b/src/shared/shadcn/ui/slider/slider.svelte
index 49e30bc..c3c0de4 100644
--- a/src/shared/shadcn/ui/slider/slider.svelte
+++ b/src/shared/shadcn/ui/slider/slider.svelte
@@ -44,7 +44,7 @@ let {
diff --git a/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte b/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte
new file mode 100644
index 0000000..ceb200e
--- /dev/null
+++ b/src/shared/ui/PerspectivePlan/PerspectivePlan.svelte
@@ -0,0 +1,83 @@
+
+
+
+
diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index f8fa12c..9d0c7fd 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -14,6 +14,10 @@ import {
import { Footnote } from '..';
interface Props extends Omit
{font.name}
-
+
-
+
{#snippet icon({ className })}
-
+
{#snippet icon({ className })}
Comparator {/snippet} -
-
+
{#snippet icon({ className })}
Module {/snippet} -
-
+
{#snippet icon({ className })}
Set {/snippet} -
diff --git a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
index 8abb64c..d3d426d 100644
--- a/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
+++ b/src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts
@@ -2,7 +2,13 @@
* Interface representing a line of text with its measured width.
*/
export interface LineData {
+ /**
+ * Line's text
+ */
text: string;
+ /**
+ * It's width
+ */
width: number;
}
@@ -80,16 +86,23 @@ export function createCharacterComparison<
container: HTMLElement | undefined,
measureCanvas: HTMLCanvasElement | undefined,
) {
- if (!container || !measureCanvas || !fontA() || !fontB()) return;
+ if (!container || !measureCanvas || !fontA() || !fontB()) {
+ return;
+ }
- const rect = container.getBoundingClientRect();
- containerWidth = rect.width;
+ // Use offsetWidth instead of getBoundingClientRect() to avoid CSS transform scaling issues
+ // getBoundingClientRect() returns transformed dimensions, which causes incorrect line breaking
+ // when PerspectivePlan applies scale() transforms (e.g., scale(0.5) in settings mode)
+ const width = container.offsetWidth;
+ containerWidth = width;
// Padding considerations - matches the container padding
const padding = window.innerWidth < 640 ? 48 : 96;
- const availableWidth = rect.width - padding;
+ const availableWidth = width - padding;
const ctx = measureCanvas.getContext('2d');
- if (!ctx) return;
+ if (!ctx) {
+ return;
+ }
const controlledFontSize = size();
const fontSize = getFontSize();
@@ -276,3 +289,5 @@ export function createCharacterComparison<
getCharState,
};
}
+
+export type CharacterComparison = ReturnType
+
{/snippet}
- Comparator {/snippet} -
+
+ {/snippet}
Module {/snippet} -
+
+ {/snippet}
Set {/snippet} -
+
+ {/snippet}
+ {@render children({ className: isVisible ? 'visible' : 'hidden' })}
+
diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index caf91ac..9af1cd5 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -35,5 +35,10 @@ let {
+
{#if icon}
- {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1 opacity-60' })}
-
+ {@render icon({
+ className: 'size-3 sm:size-4 stroke-foreground stroke-1 opacity-60',
+})}
+
{/if}
+
{#if description}
{#snippet render({ class: className })}
@@ -113,10 +166,14 @@ $effect(() => {
{#if title}
{@render title({
className:
- 'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-gray-900 leading-[0.9]',
+ 'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-foreground leading-[0.9]',
})}
{/if}
- {@render children?.()}
+ {@render content?.({
+ className: stickyTitle
+ ? 'row-start-2 col-start-2'
+ : 'row-start-2 col-start-2',
+})}
diff --git a/src/shared/ui/SidebarMenu/SidebarMenu.svelte b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
new file mode 100644
index 0000000..0d7b5b7
--- /dev/null
+++ b/src/shared/ui/SidebarMenu/SidebarMenu.svelte
@@ -0,0 +1,99 @@
+
+
+
+
+ {@render action?.()}
+ {#if visible}
+
diff --git a/src/shared/ui/Skeleton/Skeleton.stories.svelte b/src/shared/ui/Skeleton/Skeleton.stories.svelte
index 426efb8..24c3635 100644
--- a/src/shared/ui/Skeleton/Skeleton.stories.svelte
+++ b/src/shared/ui/Skeleton/Skeleton.stories.svelte
@@ -30,7 +30,7 @@ const { Story } = defineMeta({
}}
>
+ {@render children?.()}
+
+
+
+
+
+ {/if}
+
-
+
& {
- /**
- * Slider value, numeric.
- */
- value: number;
- /**
- * A callback function called when the value changes.
- * @param newValue - number
- */
- onValueChange?: (newValue: number) => void;
- /**
- * A callback function called when the user stops dragging the thumb and the value is committed.
- * @param newValue - number
- */
- onValueCommit?: (newValue: number) => void;
-};
+type Props =
+ & Omit<
+ SliderRootProps,
+ 'type' | 'onValueChange' | 'onValueCommit'
+ >
+ & {
+ /**
+ * Slider value, numeric.
+ */
+ value: number;
+ /**
+ * Optional label displayed inline on the track before the filled range.
+ */
+ label?: string;
+ /**
+ * A callback function called when the value changes.
+ * @param newValue - number
+ */
+ onValueChange?: (newValue: number) => void;
+ /**
+ * A callback function called when the user stops dragging the thumb and the value is committed.
+ * @param newValue - number
+ */
+ onValueCommit?: (newValue: number) => void;
+ };
-let { value = $bindable(), orientation = 'horizontal', class: className, ...rest }: Props = $props();
+let {
+ value = $bindable(),
+ orientation = 'horizontal',
+ class: className,
+ label,
+ ...rest
+}: Props = $props();
{#snippet children(props)}
+ {#if label && orientation === 'horizontal'}
+
+ {label}
+
+ {/if}
-
-
-
{#snippet renderLine(line: LineData, index: number)}
+ {@const pos = sliderPos}
+ {@const element = lineElements[index]}
- {#each line.text.split('') as char, charIndex}
- {@const { proximity, isPast } = charComparison.getCharState(charIndex, sliderPos, lineElements[index], container)}
+ {#each line.text.split('') as char, index}
+ {@const { proximity, isPast } = charComparison.getCharState(index, pos, element, container)}
{#if fontA && fontB}
-
@@ -176,59 +199,80 @@ $effect(() => {
-
-
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
index 3f174f1..3c6ce24 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte
@@ -3,8 +3,6 @@
Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
-->
{#if fontA && fontB}
@@ -67,13 +38,18 @@ $effect(() => {
style:font-weight={typography.weight}
style:font-size={`${typography.renderedSize}px`}
style:transform="
- scale({1 + proximity * 0.3})
- translateY({-proximity * 12}px)
- rotateY({proximity * 25 * (isPast ? -1 : 1)}deg)
- "
- style:filter="brightness({1 + proximity * 0.2}) contrast({1 + proximity * 0.1})"
- style:text-shadow={proximity > 0.5 ? '0 0 15px rgba(99,102,241,0.3)' : 'none'}
- style:will-change={proximity > 0 ? 'transform, font-family, color' : 'auto'}
+ scale({1 + proximity * 0.3}) translateY({-proximity * 12}px) rotateY({proximity *
+ 25 *
+ (isPast ? -1 : 1)}deg)
+ "
+ style:filter="brightness({1 + proximity * 0.2}) contrast({1 +
+ proximity * 0.1})"
+ style:text-shadow={proximity > 0.5
+ ? '0 0 15px rgba(99,102,241,0.3)'
+ : 'none'}
+ style:will-change={proximity > 0
+ ? 'transform, font-family, color'
+ : 'auto'}
>
{char === ' ' ? '\u00A0' : char}
@@ -82,9 +58,9 @@ $effect(() => {
-
- {#if isLoading}
-
+
+
+
-
- {:else}
+
+
+ {#if isLoading}
+
-
-
+
+ {:else}
+
+
- {#each charComparison.lines as line, lineIndex}
-
+
- {@render renderLine(line, lineIndex)}
-
- {/each}
-
+ {#each charComparison.lines as line, lineIndex}
+
-
+ {@render renderLine(line, lineIndex)}
+
+ {/each}
+