PR 6: Database migration validation - fresh/upgrade test complete

✅ Database Setup:
- Created PostgreSQL kartselldb with kartsell user
- SSH port forward established (localhost:5432 → 178.104.200.7:5432)

✅ DbMigrator Fixes:
- Fixed migration path discovery (AppContext.BaseDirectory fallback)
- Added empty variable dictionary to suppress DbUp preprocessing
- Fixed PostgreSQL dollar quoting conflict ($policy$ → $$)

✅ Migration Results:
- All 21 migrations executed successfully
- Schema versions journal created and tracked
- 21 scripts processed in order, no rollback needed

Status: FRESH DATABASE DEPLOYMENT SUCCESSFUL
- kartselldb fully initialized with v16 schema
- Ready for application startup

Next: Deploy application and run integration tests

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/shared/ui/components/FieldShell.vue.js

@@ -0,0 +1,51 @@
+import { computed, useId } from 'vue';
+const props = defineProps();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`);
+const messageId = computed(() => props.error || props.help ? `${resolvedId.value}-message` : undefined);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field-shell" },
+    'data-invalid': (Boolean(__VLS_ctx.error) || undefined),
+});
+/** @type {__VLS_StyleScopedClasses['ks-field-shell']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+var __VLS_0 = {
+    inputId: (__VLS_ctx.resolvedId),
+    describedBy: (__VLS_ctx.messageId),
+    invalid: (Boolean(__VLS_ctx.error)),
+};
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        id: (__VLS_ctx.messageId),
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+        role: (__VLS_ctx.error ? 'alert' : undefined),
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+// @ts-ignore
+[error, error, error, error, error, error, resolvedId, resolvedId, label, required, messageId, messageId, help, help,];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/components/KsButton.vue.js

@@ -0,0 +1,56 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), {
+    severity: 'primary', type: 'button', disabled: false, loading: false
+});
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = {
+    severity: 'primary', type: 'button', disabled: false, loading: false
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.Button);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onActivate': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onActivate': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.activate} */
+    onActivate: (...[$event]) => {
+        return (__VLS_ctx.emit('click', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+const { default: __VLS_8 } = __VLS_3.slots;
+var __VLS_9 = {};
+// @ts-ignore
+[];
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+var __VLS_10 = __VLS_9;
+// @ts-ignore
+[];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/components/KsCheckbox.vue.js

@@ -0,0 +1,56 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-check-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    ...{ class: "ks-check" },
+    for: (__VLS_ctx.resolvedId),
+});
+/** @type {__VLS_StyleScopedClasses['ks-check']} */ ;
+const __VLS_0 = (__VLS_ctx.adapter.components.Checkbox);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, adapter, modelValue, disabled, emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+(__VLS_ctx.label);
+// @ts-ignore
+[label,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsCommandBar.vue.js

@@ -0,0 +1,58 @@
+import KsButton from './KsButton.vue';
+const __VLS_props = defineProps();
+const emit = defineEmits();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.nav, __VLS_intrinsics.nav)({
+    ...{ class: "ks-command-bar" },
+    'aria-label': (__VLS_ctx.ariaLabel ?? 'Page actions'),
+});
+/** @type {__VLS_StyleScopedClasses['ks-command-bar']} */ ;
+for (const [action] of __VLS_vFor((__VLS_ctx.actions))) {
+    const __VLS_0 = KsButton;
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+        ...{ 'onClick': {} },
+        key: (action.id),
+        label: (action.label),
+        severity: (action.severity),
+        disabled: (action.disabled),
+        loading: (action.busy),
+    }));
+    const __VLS_2 = __VLS_1({
+        ...{ 'onClick': {} },
+        key: (action.id),
+        label: (action.label),
+        severity: (action.severity),
+        disabled: (action.disabled),
+        loading: (action.busy),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    let __VLS_5;
+    const __VLS_6 = {
+        /** @type {typeof __VLS_5.click} */
+        onClick: (...[$event]) => {
+            return (__VLS_ctx.emit('execute', action.id));
+            // @ts-ignore
+            [ariaLabel, actions, emit,];
+        },
+    };
+    var __VLS_3;
+    var __VLS_4;
+    // @ts-ignore
+    [];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsDataContextHeader.vue.js

@@ -0,0 +1,68 @@
+import { computed } from 'vue';
+import EvidenceVersionSet from '../EvidenceVersionSet.vue';
+const props = defineProps();
+const versionSet = computed(() => ({
+    datasetId: props.datasetId,
+    dataHash: props.dataHash,
+    modelVersion: props.modelVersion,
+    configVersion: props.configVersion,
+    codeSha: props.codeSha,
+    contractVersion: props.contractVersion
+}));
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['ks-data-context']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.header, __VLS_intrinsics.header)({
+    ...{ class: "ks-data-context" },
+    'data-stale': (__VLS_ctx.stale || undefined),
+});
+/** @type {__VLS_StyleScopedClasses['ks-data-context']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.h1, __VLS_intrinsics.h1)({});
+(__VLS_ctx.title);
+__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({});
+(__VLS_ctx.asOf);
+if (__VLS_ctx.stale) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
+}
+const __VLS_0 = EvidenceVersionSet;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    value: (__VLS_ctx.versionSet),
+    compact: true,
+}));
+const __VLS_2 = __VLS_1({
+    value: (__VLS_ctx.versionSet),
+    compact: true,
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+if (__VLS_ctx.projectionVersion || __VLS_ctx.watermark || __VLS_ctx.correlationId) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.dl, __VLS_intrinsics.dl)({});
+    if (__VLS_ctx.projectionVersion) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dt, __VLS_intrinsics.dt)({});
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dd, __VLS_intrinsics.dd)({});
+        (__VLS_ctx.projectionVersion);
+    }
+    if (__VLS_ctx.watermark) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dt, __VLS_intrinsics.dt)({});
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dd, __VLS_intrinsics.dd)({});
+        (__VLS_ctx.watermark);
+    }
+    if (__VLS_ctx.correlationId) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dt, __VLS_intrinsics.dt)({});
+        __VLS_asFunctionalElement1(__VLS_intrinsics.dd, __VLS_intrinsics.dd)({});
+        (__VLS_ctx.correlationId);
+    }
+}
+// @ts-ignore
+[stale, stale, title, asOf, versionSet, projectionVersion, projectionVersion, projectionVersion, watermark, watermark, watermark, correlationId, correlationId, correlationId,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsDataGrid.vue.js

@@ -0,0 +1,45 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), { loading: false, height: '32rem', rowSelection: 'single' });
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = { loading: false, height: '32rem', rowSelection: 'single' };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.DataGrid);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onRowSelected': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onRowSelected': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.rowSelected} */
+    onRowSelected: (...[$event]) => {
+        return (__VLS_ctx.emit('rowSelected', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/components/KsDateField.vue.js

@@ -0,0 +1,88 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-date-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+const __VLS_0 = (__VLS_ctx.adapter.components.DateField);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    min: (__VLS_ctx.min),
+    max: (__VLS_ctx.max),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    min: (__VLS_ctx.min),
+    max: (__VLS_ctx.max),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, min, max, help, emit,];
+    },
+};
+const __VLS_7 = {
+    /** @type {typeof __VLS_5.blur} */
+    onBlur: (...[$event]) => {
+        return (__VLS_ctx.emit('blur', $event));
+        // @ts-ignore
+        [emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        id: (`${__VLS_ctx.resolvedId}-message`),
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+[resolvedId, error, error, error, help, help,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsDialog.vue.js

@@ -0,0 +1,56 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.Dialog);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:visible': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:visible': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:visible'} */
+    'onUpdate:visible': (...[$event]) => {
+        return (__VLS_ctx.emit('update:visible', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+const { default: __VLS_8 } = __VLS_3.slots;
+var __VLS_9 = {};
+{
+    const { footer: __VLS_11 } = __VLS_3.slots;
+    var __VLS_12 = {};
+    // @ts-ignore
+    [];
+}
+// @ts-ignore
+[];
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+var __VLS_10 = __VLS_9, __VLS_13 = __VLS_12;
+// @ts-ignore
+[];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/components/KsInlineMessage.vue.js

@@ -0,0 +1,45 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), { severity: 'info', dismissible: false });
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = { severity: 'info', dismissible: false };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.InlineMessage);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onDismiss': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onDismiss': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.dismiss} */
+    onDismiss: (...[$event]) => {
+        return (__VLS_ctx.emit('dismiss'));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/components/KsMultiSelect.vue.js

@@ -0,0 +1,45 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), { modelValue: () => [] });
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = { modelValue: () => [] };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.MultiSelect);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/components/KsNumberField.vue.js

@@ -0,0 +1,92 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-number-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+const __VLS_0 = (__VLS_ctx.adapter.components.NumberField);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    min: (__VLS_ctx.min),
+    max: (__VLS_ctx.max),
+    minFractionDigits: (__VLS_ctx.minFractionDigits),
+    maxFractionDigits: (__VLS_ctx.maxFractionDigits),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    min: (__VLS_ctx.min),
+    max: (__VLS_ctx.max),
+    minFractionDigits: (__VLS_ctx.minFractionDigits),
+    maxFractionDigits: (__VLS_ctx.maxFractionDigits),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, min, max, minFractionDigits, maxFractionDigits, help, emit,];
+    },
+};
+const __VLS_7 = {
+    /** @type {typeof __VLS_5.blur} */
+    onBlur: (...[$event]) => {
+        return (__VLS_ctx.emit('blur', $event));
+        // @ts-ignore
+        [emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        id: (`${__VLS_ctx.resolvedId}-message`),
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+[resolvedId, error, error, error, help, help,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsPaginator.vue.js

@@ -0,0 +1,45 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), { pageSizes: () => [20, 50, 100], disabled: false });
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = { pageSizes: () => [20, 50, 100], disabled: false };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.Paginator);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onPageChange': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onPageChange': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.pageChange} */
+    onPageChange: (...[$event]) => {
+        return (__VLS_ctx.emit('pageChange', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/components/KsSelect.vue.js

@@ -0,0 +1,85 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-select-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+const __VLS_0 = (__VLS_ctx.adapter.components.Select);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    options: (__VLS_ctx.options),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    placeholder: (__VLS_ctx.placeholder),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    options: (__VLS_ctx.options),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    placeholder: (__VLS_ctx.placeholder),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, label, required, adapter, modelValue, options, disabled, error, placeholder, emit,];
+    },
+};
+const __VLS_7 = {
+    /** @type {typeof __VLS_5.blur} */
+    onBlur: (...[$event]) => {
+        return (__VLS_ctx.emit('blur', $event));
+        // @ts-ignore
+        [emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+[error, error, error, help, help,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsStatusTag.vue.js

@@ -0,0 +1,28 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = defineProps();
+const adapter = useUiAdapter();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.StatusTag);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_5;
+var __VLS_3;
+// @ts-ignore
+[adapter, $props,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsTabs.vue.js

@@ -0,0 +1,60 @@
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const __VLS_props = withDefaults(defineProps(), { ariaLabel: '탭' });
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const __VLS_defaults = { ariaLabel: '탭' };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_0 = (__VLS_ctx.adapter.components.Tabs);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...(__VLS_ctx.$props),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...(__VLS_ctx.$props),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [adapter, $props, emit,];
+    },
+};
+var __VLS_7;
+const { default: __VLS_8 } = __VLS_3.slots;
+{
+    const { default: __VLS_9 } = __VLS_3.slots;
+    const [slotProps] = __VLS_vSlot(__VLS_9);
+    var __VLS_10 = {
+        activeId: (slotProps.activeId),
+    };
+    // @ts-ignore
+    [];
+}
+// @ts-ignore
+[];
+var __VLS_3;
+var __VLS_4;
+// @ts-ignore
+var __VLS_11 = __VLS_10;
+// @ts-ignore
+[];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/components/KsTextArea.vue.js

@@ -0,0 +1,85 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-area-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+const __VLS_0 = (__VLS_ctx.adapter.components.TextArea);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    rows: (__VLS_ctx.rows),
+    placeholder: (__VLS_ctx.placeholder),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    rows: (__VLS_ctx.rows),
+    placeholder: (__VLS_ctx.placeholder),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, rows, placeholder, emit,];
+    },
+};
+const __VLS_7 = {
+    /** @type {typeof __VLS_5.blur} */
+    onBlur: (...[$event]) => {
+        return (__VLS_ctx.emit('blur', $event));
+        // @ts-ignore
+        [emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+[error, error, error, help, help,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/KsTextField.vue.js

@@ -0,0 +1,86 @@
+import { computed, useId } from 'vue';
+import { useUiAdapter } from '../adapter/useUiAdapter';
+const props = defineProps();
+const emit = defineEmits();
+const adapter = useUiAdapter();
+const generatedId = useId();
+const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    for: (__VLS_ctx.resolvedId),
+});
+(__VLS_ctx.label);
+if (__VLS_ctx.required) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+const __VLS_0 = (__VLS_ctx.adapter.components.TextField);
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    placeholder: (__VLS_ctx.placeholder),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onUpdate:modelValue': {} },
+    ...{ 'onBlur': {} },
+    inputId: (__VLS_ctx.resolvedId),
+    modelValue: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    invalid: (Boolean(__VLS_ctx.error)),
+    placeholder: (__VLS_ctx.placeholder),
+    'aria-describedby': (__VLS_ctx.error || __VLS_ctx.help ? `${__VLS_ctx.resolvedId}-message` : undefined),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = {
+    /** @type {typeof __VLS_5.'update:modelValue'} */
+    'onUpdate:modelValue': (...[$event]) => {
+        return (__VLS_ctx.emit('update:modelValue', $event));
+        // @ts-ignore
+        [resolvedId, resolvedId, resolvedId, label, required, adapter, modelValue, disabled, error, error, placeholder, help, emit,];
+    },
+};
+const __VLS_7 = {
+    /** @type {typeof __VLS_5.blur} */
+    onBlur: (...[$event]) => {
+        return (__VLS_ctx.emit('blur', $event));
+        // @ts-ignore
+        [emit,];
+    },
+};
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.error || __VLS_ctx.help) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
+        id: (`${__VLS_ctx.resolvedId}-message`),
+        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
+    (__VLS_ctx.error ?? __VLS_ctx.help);
+}
+// @ts-ignore
+[resolvedId, error, error, error, help, help,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/components/index.js

@@ -0,0 +1,17 @@
+export { default as KsButton } from './KsButton.vue';
+export { default as KsTextField } from './KsTextField.vue';
+export { default as KsTextArea } from './KsTextArea.vue';
+export { default as KsSelect } from './KsSelect.vue';
+export { default as KsMultiSelect } from './KsMultiSelect.vue';
+export { default as KsCheckbox } from './KsCheckbox.vue';
+export { default as KsDateField } from './KsDateField.vue';
+export { default as KsNumberField } from './KsNumberField.vue';
+export { default as KsDialog } from './KsDialog.vue';
+export { default as KsStatusTag } from './KsStatusTag.vue';
+export { default as KsInlineMessage } from './KsInlineMessage.vue';
+export { default as KsPaginator } from './KsPaginator.vue';
+export { default as KsTabs } from './KsTabs.vue';
+export { default as KsDataGrid } from './KsDataGrid.vue';
+export { default as FieldShell } from './FieldShell.vue';
+export { default as KsDataContextHeader } from './KsDataContextHeader.vue';
+export { default as KsCommandBar } from './KsCommandBar.vue';