src/shared/ui/ComboControl/ComboControl.stories.svelte

@@ -1,7 +1,7 @@
 <script module>
-import { createTypographyControl } from '$shared/lib';
 import { defineMeta } from '@storybook/addon-svelte-csf';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/ComboControl',
@@ -23,7 +23,7 @@ const { Story } = defineMeta({
         },
         control: {
             control: 'object',
-            description: 'TypographyControl instance managing the value and bounds',
+            description: 'NumericControl instance managing the value and bounds',
         },
     },
 });
@@ -31,7 +31,7 @@ const { Story } = defineMeta({
 
 <script lang="ts">
 import type { ComponentProps } from 'svelte';
-const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const horizontalControl = createNumericControlMock({ min: 0, max: 100, step: 1, value: 50 });
 </script>
 
 <Story

src/shared/ui/ComboControl/ComboControl.svelte.test.ts

@@ -1,4 +1,3 @@
-import { createTypographyControl } from '$shared/lib';
 import {
     fireEvent,
     render,
@@ -6,9 +5,10 @@ import {
     waitFor,
 } from '@testing-library/svelte';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 function makeControl(value: number, opts: { min?: number; max?: number; step?: number } = {}) {
-    return createTypographyControl({
+    return createNumericControlMock({
         value,
         min: opts.min ?? 0,
         max: opts.max ?? 100,

src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts

@@ -0,0 +1,47 @@
+/**
+ * Test/story mock implementing the NumericControl contract.
+ *
+ * Lives in shared/ui because ComboControl must be testable without importing
+ * the real typography factory (which sits in a feature, above shared).
+ */
+import type { NumericControl } from '../types';
+
+/**
+ * Build a reactive NumericControl mock with clamping and stepping.
+ */
+export function createNumericControlMock(
+    init: Pick<NumericControl, 'value' | 'min' | 'max' | 'step'>,
+): NumericControl {
+    let value = $state(init.value);
+    const clamp = (v: number) => Math.min(Math.max(v, init.min), init.max);
+
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = clamp(v);
+        },
+        get min() {
+            return init.min;
+        },
+        get max() {
+            return init.max;
+        },
+        get step() {
+            return init.step;
+        },
+        get isAtMin() {
+            return value <= init.min;
+        },
+        get isAtMax() {
+            return value >= init.max;
+        },
+        increase() {
+            value = clamp(value + init.step);
+        },
+        decrease() {
+            value = clamp(value - init.step);
+        },
+    };
+}