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/adapter/native/NativeButtonAdapter.vue.js

@@ -0,0 +1,43 @@
+const __VLS_props = withDefaults(defineProps(), { severity: 'primary', type: 'button', disabled: false, loading: false });
+const emit = defineEmits();
+const __VLS_defaults = { severity: 'primary', type: 'button', disabled: false, loading: false };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            return (__VLS_ctx.emit('activate', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ class: "ks-native-button" },
+    ...{ class: (`is-${__VLS_ctx.severity}`) },
+    type: (__VLS_ctx.type),
+    disabled: (__VLS_ctx.disabled || __VLS_ctx.loading),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-button']} */ ;
+if (__VLS_ctx.loading) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        'aria-hidden': "true",
+    });
+}
+var __VLS_0 = {};
+(__VLS_ctx.label);
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+// @ts-ignore
+[severity, type, disabled, loading, loading, label,];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/adapter/native/NativeCheckboxAdapter.vue.js

@@ -0,0 +1,38 @@
+const __VLS_props = defineProps();
+const emit = defineEmits();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+    ...{ onChange: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', $event.target.checked));
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-checkbox" },
+    type: "checkbox",
+    checked: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-checkbox']} */ ;
+// @ts-ignore
+[inputId, modelValue, disabled, invalid,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeDataGridAdapter.vue.js

@@ -0,0 +1,79 @@
+const __VLS_props = withDefaults(defineProps(), { loading: false, height: '32rem', rowSelection: 'single' });
+const emit = defineEmits();
+function value(row, field) { return typeof row === 'object' && row !== null ? row[field] : undefined; }
+const __VLS_defaults = { loading: false, height: '32rem', rowSelection: 'single' };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-native-grid" },
+    ...{ style: ({ maxHeight: __VLS_ctx.height }) },
+    'aria-busy': (__VLS_ctx.loading),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-grid']} */ ;
+if (__VLS_ctx.loading) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
+        role: "status",
+    });
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.table, __VLS_intrinsics.table)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.thead, __VLS_intrinsics.thead)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.tr, __VLS_intrinsics.tr)({});
+for (const [column] of __VLS_vFor((__VLS_ctx.columns))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.th, __VLS_intrinsics.th)({
+        key: (column.field),
+        scope: "col",
+        ...{ style: ({ width: column.width ? `${column.width}px` : undefined, minWidth: column.minWidth ? `${column.minWidth}px` : undefined }) },
+    });
+    (column.header);
+    // @ts-ignore
+    [height, loading, loading, columns,];
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.tbody, __VLS_intrinsics.tbody)({});
+for (const [row, index] of __VLS_vFor((__VLS_ctx.rows))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.tr, __VLS_intrinsics.tr)({
+        ...{ onClick: (...[$event]) => {
+                return (__VLS_ctx.emit('row-selected', row));
+                // @ts-ignore
+                [rows, emit,];
+            } },
+        ...{ onKeydown: (...[$event]) => {
+                return (__VLS_ctx.emit('row-selected', row));
+                // @ts-ignore
+                [emit,];
+            } },
+        key: (index),
+        tabindex: "0",
+    });
+    for (const [column] of __VLS_vFor((__VLS_ctx.columns))) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.td, __VLS_intrinsics.td)({
+            key: (column.field),
+        });
+        (column.formatter ? column.formatter(__VLS_ctx.value(row, column.field), row) : __VLS_ctx.value(row, column.field));
+        // @ts-ignore
+        [columns, value, value,];
+    }
+    // @ts-ignore
+    [];
+}
+if (!__VLS_ctx.loading && __VLS_ctx.rows.length === 0) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.tr, __VLS_intrinsics.tr)({});
+    __VLS_asFunctionalElement1(__VLS_intrinsics.td, __VLS_intrinsics.td)({
+        colspan: (__VLS_ctx.columns.length),
+    });
+}
+// @ts-ignore
+[loading, columns, rows,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeDateFieldAdapter.vue.js

@@ -0,0 +1,44 @@
+const __VLS_props = defineProps();
+const emit = defineEmits();
+function toDateValue(value) { if (!value)
+    return ''; if (value instanceof Date)
+    return value.toISOString().slice(0, 10); return value.slice(0, 10); }
+function boundary(value) { return value?.toISOString().slice(0, 10); }
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+    ...{ onInput: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', $event.target.value || null));
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-input" },
+    type: "date",
+    value: (__VLS_ctx.toDateValue(__VLS_ctx.modelValue)),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+    min: (__VLS_ctx.boundary(__VLS_ctx.min)),
+    max: (__VLS_ctx.boundary(__VLS_ctx.max)),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-input']} */ ;
+// @ts-ignore
+[inputId, toDateValue, modelValue, disabled, invalid, boundary, boundary, min, max,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeDialogAdapter.vue.js

@@ -0,0 +1,48 @@
+import { nextTick, ref, watch } from 'vue';
+const props = defineProps();
+const emit = defineEmits();
+const element = ref(null);
+watch(() => props.visible, async (visible) => { await nextTick(); const dialog = element.value; if (!dialog)
+    return; if (visible && !dialog.open)
+    props.modal === false ? dialog.show() : dialog.showModal(); if (!visible && dialog.open)
+    dialog.close(); }, { immediate: true });
+function close() { emit('update:visible', false); }
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.dialog, __VLS_intrinsics.dialog)({
+    ...{ onClose: (__VLS_ctx.close) },
+    ...{ onCancel: (__VLS_ctx.close) },
+    ref: "element",
+    ...{ class: "ks-native-dialog" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-dialog']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.header, __VLS_intrinsics.header)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.h2, __VLS_intrinsics.h2)({});
+(__VLS_ctx.title);
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (__VLS_ctx.close) },
+    type: "button",
+    'aria-label': "닫기",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.section, __VLS_intrinsics.section)({});
+var __VLS_0 = {};
+__VLS_asFunctionalElement1(__VLS_intrinsics.footer, __VLS_intrinsics.footer)({});
+var __VLS_2 = {};
+// @ts-ignore
+var __VLS_1 = __VLS_0, __VLS_3 = __VLS_2;
+// @ts-ignore
+[close, close, close, title,];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/adapter/native/NativeInlineMessageAdapter.vue.js

@@ -0,0 +1,46 @@
+const __VLS_props = withDefaults(defineProps(), { severity: 'info', dismissible: false });
+const emit = defineEmits();
+const __VLS_defaults = { severity: 'info', dismissible: false };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-inline-message" },
+    'data-severity': (__VLS_ctx.severity),
+    role: (__VLS_ctx.severity === 'danger' ? 'alert' : 'status'),
+});
+/** @type {__VLS_StyleScopedClasses['ks-inline-message']} */ ;
+if (__VLS_ctx.title) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
+    (__VLS_ctx.title);
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+(__VLS_ctx.message);
+if (__VLS_ctx.dismissible) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.dismissible))
+                    throw 0;
+                return (__VLS_ctx.emit('dismiss'));
+                // @ts-ignore
+                [severity, severity, title, title, message, dismissible, emit,];
+            } },
+        type: "button",
+        'aria-label': "메시지 닫기",
+    });
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeMultiSelectAdapter.vue.js

@@ -0,0 +1,58 @@
+const props = withDefaults(defineProps(), { modelValue: () => [] });
+const emit = defineEmits();
+function update(event) {
+    const selected = Array.from(event.target.selectedOptions).map(x => {
+        const option = props.options[Number(x.value)];
+        return option?.value ?? null;
+    });
+    emit('update:modelValue', selected);
+}
+const __VLS_defaults = { modelValue: () => [] };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
+    ...{ class: "ks-field" },
+});
+/** @type {__VLS_StyleScopedClasses['ks-field']} */ ;
+if (__VLS_ctx.label) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+    (__VLS_ctx.label);
+    if (__VLS_ctx.required) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.b, __VLS_intrinsics.b)({
+            'aria-hidden': "true",
+        });
+    }
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.select, __VLS_intrinsics.select)({
+    ...{ onChange: (__VLS_ctx.update) },
+    multiple: true,
+    disabled: (__VLS_ctx.disabled),
+    required: (__VLS_ctx.required),
+});
+for (const [option, index] of __VLS_vFor((__VLS_ctx.options))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
+        key: (`${index}:${option.label}`),
+        value: (index),
+        disabled: (option.disabled),
+        selected: (__VLS_ctx.modelValue.includes(option.value)),
+    });
+    (option.label);
+    // @ts-ignore
+    [label, label, required, required, update, disabled, options, modelValue,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeNumberFieldAdapter.vue.js

@@ -0,0 +1,43 @@
+const __VLS_props = defineProps();
+const emit = defineEmits();
+function parse(raw) { if (raw.trim() === '')
+    return null; const value = Number(raw); return Number.isFinite(value) ? value : null; }
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+    ...{ onInput: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', __VLS_ctx.parse($event.target.value)));
+            // @ts-ignore
+            [emit, parse,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-input" },
+    type: "number",
+    value: (__VLS_ctx.modelValue ?? ''),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+    min: (__VLS_ctx.min),
+    max: (__VLS_ctx.max),
+    step: (__VLS_ctx.maxFractionDigits ? 1 / 10 ** __VLS_ctx.maxFractionDigits : 1),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-input']} */ ;
+// @ts-ignore
+[inputId, modelValue, disabled, invalid, min, max, maxFractionDigits, maxFractionDigits,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativePaginatorAdapter.vue.js

@@ -0,0 +1,66 @@
+const props = withDefaults(defineProps(), { pageSizes: () => [20, 50, 100], disabled: false });
+const emit = defineEmits();
+const pageCount = () => Math.max(1, Math.ceil(props.total / props.pageSize));
+function move(page) { emit('pageChange', { page: Math.min(Math.max(1, page), pageCount()), pageSize: props.pageSize }); }
+function size(event) { emit('pageChange', { page: 1, pageSize: Number(event.target.value) }); }
+const __VLS_defaults = { pageSizes: () => [20, 50, 100], disabled: false };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.nav, __VLS_intrinsics.nav)({
+    ...{ class: "ks-paginator" },
+    'aria-label': "목록 페이지",
+});
+/** @type {__VLS_StyleScopedClasses['ks-paginator']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            return (__VLS_ctx.move(__VLS_ctx.page - 1));
+            // @ts-ignore
+            [move, page,];
+        } },
+    type: "button",
+    disabled: (__VLS_ctx.disabled || __VLS_ctx.page <= 1),
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+(__VLS_ctx.page);
+(__VLS_ctx.pageCount());
+(__VLS_ctx.total);
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            return (__VLS_ctx.move(__VLS_ctx.page + 1));
+            // @ts-ignore
+            [move, page, page, page, disabled, pageCount, total,];
+        } },
+    type: "button",
+    disabled: (__VLS_ctx.disabled || __VLS_ctx.page >= __VLS_ctx.pageCount()),
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.select, __VLS_intrinsics.select)({
+    ...{ onChange: (__VLS_ctx.size) },
+    value: (__VLS_ctx.pageSize),
+    disabled: (__VLS_ctx.disabled),
+});
+for (const [item] of __VLS_vFor((__VLS_ctx.pageSizes))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
+        key: (item),
+        value: (item),
+    });
+    (item);
+    // @ts-ignore
+    [page, disabled, disabled, pageCount, size, pageSize, pageSizes,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeSelectAdapter.vue.js

@@ -0,0 +1,56 @@
+const props = defineProps();
+const emit = defineEmits();
+function encode(value) { return JSON.stringify(value); }
+function decode(raw) { const option = props.options.find(x => encode(x.value) === raw); return option?.value ?? null; }
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.select, __VLS_intrinsics.select)({
+    ...{ onChange: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', __VLS_ctx.decode($event.target.value)));
+            // @ts-ignore
+            [emit, decode,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-input" },
+    value: (__VLS_ctx.encode(__VLS_ctx.modelValue)),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-input']} */ ;
+if (__VLS_ctx.placeholder) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
+        value: "",
+        disabled: true,
+    });
+    (__VLS_ctx.placeholder);
+}
+for (const [option] of __VLS_vFor((__VLS_ctx.options))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
+        key: (__VLS_ctx.encode(option.value)),
+        value: (__VLS_ctx.encode(option.value)),
+        disabled: (option.disabled),
+    });
+    (option.label);
+    // @ts-ignore
+    [inputId, encode, encode, encode, modelValue, disabled, invalid, placeholder, placeholder, options,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeStatusTagAdapter.vue.js

@@ -0,0 +1,23 @@
+const __VLS_props = withDefaults(defineProps(), { severity: 'info' });
+const __VLS_defaults = { severity: 'info' };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+    ...{ class: "ks-native-tag" },
+    ...{ class: (`is-${__VLS_ctx.severity}`) },
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-tag']} */ ;
+(__VLS_ctx.value);
+// @ts-ignore
+[severity, value,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeTabsAdapter.vue.js

@@ -0,0 +1,58 @@
+const __VLS_props = withDefaults(defineProps(), { ariaLabel: '탭' });
+const emit = defineEmits();
+const __VLS_defaults = { ariaLabel: '탭' };
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "ks-tabs" },
+    role: "tablist",
+    'aria-label': (__VLS_ctx.ariaLabel),
+});
+/** @type {__VLS_StyleScopedClasses['ks-tabs']} */ ;
+for (const [item] of __VLS_vFor((__VLS_ctx.items))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                return (__VLS_ctx.emit('update:modelValue', item.id));
+                // @ts-ignore
+                [ariaLabel, items, emit,];
+            } },
+        key: (item.id),
+        type: "button",
+        role: "tab",
+        'aria-selected': (__VLS_ctx.modelValue === item.id),
+        disabled: (item.disabled),
+    });
+    (item.label);
+    if (item.badge) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({});
+        (item.badge);
+    }
+    // @ts-ignore
+    [modelValue,];
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    role: "tabpanel",
+});
+var __VLS_0 = {
+    activeId: (__VLS_ctx.modelValue),
+};
+// @ts-ignore
+var __VLS_1 = __VLS_0;
+// @ts-ignore
+[modelValue,];
+const __VLS_base = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+    props: {},
+});
+const __VLS_export = {};
+export default {};

frontend/src/shared/ui/adapter/native/NativeTextAreaAdapter.vue.js

@@ -0,0 +1,39 @@
+const __VLS_props = defineProps();
+const emit = defineEmits();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.textarea)({
+    ...{ onInput: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', $event.target.value));
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-input" },
+    value: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+    rows: (__VLS_ctx.rows ?? 4),
+    placeholder: (__VLS_ctx.placeholder),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-input']} */ ;
+// @ts-ignore
+[inputId, modelValue, disabled, invalid, rows, placeholder,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/NativeTextFieldAdapter.vue.js

@@ -0,0 +1,39 @@
+const __VLS_props = defineProps();
+const emit = defineEmits();
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+    ...{ onInput: (...[$event]) => {
+            return (__VLS_ctx.emit('update:modelValue', $event.target.value));
+            // @ts-ignore
+            [emit,];
+        } },
+    ...{ onBlur: (...[$event]) => {
+            return (__VLS_ctx.emit('blur', $event));
+            // @ts-ignore
+            [emit,];
+        } },
+    id: (__VLS_ctx.inputId),
+    ...{ class: "ks-native-input" },
+    type: "text",
+    value: (__VLS_ctx.modelValue),
+    disabled: (__VLS_ctx.disabled),
+    'aria-invalid': (__VLS_ctx.invalid || undefined),
+    placeholder: (__VLS_ctx.placeholder),
+});
+/** @type {__VLS_StyleScopedClasses['ks-native-input']} */ ;
+// @ts-ignore
+[inputId, modelValue, disabled, invalid, placeholder,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

frontend/src/shared/ui/adapter/native/index.js

@@ -0,0 +1,22 @@
+import Button from './NativeButtonAdapter.vue';
+import TextField from './NativeTextFieldAdapter.vue';
+import TextArea from './NativeTextAreaAdapter.vue';
+import Select from './NativeSelectAdapter.vue';
+import MultiSelect from './NativeMultiSelectAdapter.vue';
+import Checkbox from './NativeCheckboxAdapter.vue';
+import DateField from './NativeDateFieldAdapter.vue';
+import NumberField from './NativeNumberFieldAdapter.vue';
+import Dialog from './NativeDialogAdapter.vue';
+import StatusTag from './NativeStatusTagAdapter.vue';
+import InlineMessage from './NativeInlineMessageAdapter.vue';
+import Paginator from './NativePaginatorAdapter.vue';
+import Tabs from './NativeTabsAdapter.vue';
+import DataGrid from './NativeDataGridAdapter.vue';
+const capabilities = new Set([
+    'button', 'text-field', 'text-area', 'select', 'multi-select', 'checkbox', 'date-field', 'number-field',
+    'dialog', 'status-tag', 'inline-message', 'paginator', 'tabs', 'data-grid'
+]);
+export const nativeUiAdapter = Object.freeze({
+    descriptor: Object.freeze({ id: 'native-accessible', version: '2.0.0', contractVersion: '4.0', vendor: 'HTML platform primitives', capabilities, productionEligible: false, accessibilityBaseline: 'WCAG_2_2_AA_TARGET' }),
+    components: Object.freeze({ Button, TextField, TextArea, Select, MultiSelect, Checkbox, DateField, NumberField, Dialog, StatusTag, InlineMessage, Paginator, Tabs, DataGrid })
+});

frontend/src/shared/ui/adapter/native/installNativeAdapter.js

@@ -0,0 +1,7 @@
+import { installUiAdapter } from '../useUiAdapter';
+import { nativeUiAdapter } from './index';
+import './native.css';
+export const nativeUiProvider = {
+    id: 'native-accessible',
+    install(app) { installUiAdapter(app, nativeUiAdapter); }
+};