@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.4

package/ui/components/organisms/vc-sidebar/vc-sidebar.vue

@@ -29,7 +29,18 @@
           :aria-label="ariaDialogLabel"
           :aria-labelledby="ariaDialogLabelledBy"
           tabindex="-1"
+          @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
         >
+          <!-- Drag handle for bottom sheet -->
+          <div
+            v-if="dragHandle && isBottom"
+            class="vc-sidebar__handle"
+          >
+            <div class="vc-sidebar__handle-bar" />
+          </div>
+
           <slot
             v-if="hasHeader"
             name="header"
@@ -91,8 +102,8 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from "vue";
-import { VcIcon } from "../../atoms/vc-icon";
-import { useTeleportTarget } from "../../../composables";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { useTeleportTarget } from "@ui/composables";
 
 export type SidebarCloseReason = "overlay" | "escape" | "action";
 export type SidebarPosition = "left" | "right" | "bottom";
@@ -191,6 +202,12 @@ export interface Props {
   closeButton?: boolean;
   inset?: boolean;
   zIndex?: number;
+  /** Enable swipe-to-dismiss gesture (only for position="bottom") */
+  draggable?: boolean;
+  /** Show iOS-style drag handle bar at top of panel */
+  dragHandle?: boolean;
+  /** Fraction of panel height user must swipe to trigger close (0-1) */
+  closeThreshold?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -214,6 +231,9 @@ const props = withDefaults(defineProps<Props>(), {
   closeButton: true,
   inset: true,
   zIndex: 10_000,
+  draggable: false,
+  dragHandle: false,
+  closeThreshold: 0.3,
 });
 
 const emit = defineEmits<{
@@ -298,6 +318,7 @@ const panelClasses = computed(() => [
     "vc-sidebar__panel--with-header": hasHeader.value,
     "vc-sidebar__panel--with-footer": hasFooter.value,
     "vc-sidebar__panel--inset": props.inset && !isFullSize.value,
+    "vc-sidebar__panel--draggable": props.draggable && isBottom.value,
   },
 ]);
 
@@ -325,6 +346,55 @@ function handleOverlayClick() {
   closeByReason("overlay");
 }
 
+// --- Swipe-to-dismiss gesture (bottom position only) ---
+const touchStartY = ref(0);
+const isDragging = ref(false);
+
+function handleTouchStart(event: TouchEvent) {
+  if (!props.draggable || !isBottom.value) return;
+  touchStartY.value = event.touches[0].clientY;
+  isDragging.value = true;
+}
+
+function handleTouchMove(event: TouchEvent) {
+  if (!isDragging.value || !panelEl.value) return;
+
+  const delta = event.touches[0].clientY - touchStartY.value;
+
+  // Only allow dragging downward (positive delta)
+  if (delta > 0) {
+    panelEl.value.style.transform = `translateY(${delta}px)`;
+    panelEl.value.style.transition = "none";
+  }
+}
+
+function handleTouchEnd(event: TouchEvent) {
+  if (!isDragging.value || !panelEl.value) return;
+  isDragging.value = false;
+
+  const delta = event.changedTouches[0].clientY - touchStartY.value;
+  const panelHeight = panelEl.value.offsetHeight;
+  const threshold = panelHeight * props.closeThreshold;
+
+  if (delta > threshold) {
+    // Animate out then close
+    panelEl.value.style.transition = "transform 0.2s ease";
+    panelEl.value.style.transform = `translateY(${panelHeight}px)`;
+    setTimeout(() => {
+      closeByReason("action");
+    }, 200);
+  } else {
+    // Snap back
+    panelEl.value.style.transition = "transform 0.2s ease";
+    panelEl.value.style.transform = "";
+    setTimeout(() => {
+      if (panelEl.value) {
+        panelEl.value.style.transition = "";
+      }
+    }, 200);
+  }
+}
+
 function getFocusableElements() {
   if (!panelEl.value) {
     return [];
@@ -461,6 +531,13 @@ watch(
   () => props.modelValue,
   (opened) => {
     if (opened) {
+      // Reset any leftover drag transform when re-opening
+      nextTick(() => {
+        if (panelEl.value) {
+          panelEl.value.style.transform = "";
+          panelEl.value.style.transition = "";
+        }
+      });
       activateSideEffects();
       return;
     }
@@ -521,7 +598,7 @@ defineExpose({
       @apply tw-left-0 tw-right-0 tw-bottom-0 tw-top-auto;
       border-radius: var(--vc-sidebar-radius) var(--vc-sidebar-radius) 0 0;
       border-bottom-width: 0;
-      width: 100vw;
+      max-height: 96dvh;
     }
 
     &--size-full {
@@ -549,12 +626,16 @@ defineExpose({
       border-color: color-mix(in srgb, var(--neutrals-200) 86%, white 14%);
     }
 
+    &--draggable {
+      touch-action: none;
+    }
+
     &:focus {
       outline: none;
     }
 
     &:focus-visible {
-      @apply tw-ring-2 tw-ring-[color:var(--primary-500)] tw-ring-offset-2;
+      @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2;
     }
   }
 
@@ -612,14 +693,27 @@ defineExpose({
     @apply tw-text-[color:var(--vc-sidebar-close-color)];
 
     &:hover {
-      @apply tw-bg-[color:var(--neutrals-200)];
+      @apply tw-bg-neutrals-200;
     }
 
     &:focus-visible {
-      @apply tw-outline-none tw-ring-2 tw-ring-[color:var(--primary-500)] tw-ring-offset-1;
+      @apply tw-outline-none tw-ring-2 tw-ring-primary-500 tw-ring-offset-1;
+    }
+  }
+
+  &__handle {
+    @apply tw-flex tw-justify-center tw-py-3 tw-cursor-grab tw-shrink-0;
+
+    &:active {
+      @apply tw-cursor-grabbing;
     }
   }
 
+  &__handle-bar {
+    @apply tw-w-[100px] tw-h-1.5 tw-rounded-full;
+    background: var(--neutrals-300);
+  }
+
   &__content {
     @apply tw-flex tw-flex-col tw-flex-1 tw-relative tw-overflow-auto;
     min-height: 0;
@@ -648,14 +742,17 @@ defineExpose({
 .vc-sidebar-panel-right-enter-active,
 .vc-sidebar-panel-right-leave-active,
 .vc-sidebar-panel-left-enter-active,
-.vc-sidebar-panel-left-leave-active,
-.vc-sidebar-panel-bottom-enter-active,
-.vc-sidebar-panel-bottom-leave-active {
+.vc-sidebar-panel-left-leave-active {
   transition:
     transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 0.22s ease;
 }
 
+.vc-sidebar-panel-bottom-enter-active,
+.vc-sidebar-panel-bottom-leave-active {
+  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
 .vc-sidebar-panel-right-enter-from,
 .vc-sidebar-panel-right-leave-to {
   transform: translateX(24px);
@@ -670,8 +767,7 @@ defineExpose({
 
 .vc-sidebar-panel-bottom-enter-from,
 .vc-sidebar-panel-bottom-leave-to {
-  transform: translateY(24px);
-  opacity: 0;
+  transform: translateY(100%);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/ui/components/organisms/vc-table/VcDataTable.vue

@@ -291,6 +291,7 @@
     <!-- Pagination / Total counter (outside scroll area, works for both desktop and mobile) -->
     <div
       v-if="props.pagination"
+      ref="paginationRef"
       class="vc-data-table__pagination"
     >
       <span class="vc-data-table__page-info">{{ paginationRangeText }}</span>
@@ -305,6 +306,8 @@
           :pages="props.pagination.pages"
           :current-page="props.pagination.currentPage"
           :variant="props.pagination.variant"
+          :max-pages="paginationMaxPages"
+          :show-first-last="paginationShowFirstLast"
           @item-click="handlePaginationClick"
         />
       </slot>
@@ -323,6 +326,7 @@
  * Inspired by PrimeVue DataTable architecture.
  */
 import { ref, computed, provide, watch, onBeforeUnmount, toRef, useSlots, inject, type Ref, type VNode } from "vue";
+import { useElementSize } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import {
   Table,
@@ -338,8 +342,8 @@ import {
   TableAddRowButton,
   TableSearchHeader,
   TableSelectAllBar,
-} from "./components";
-import { VcPagination } from "../../molecules";
+} from "@ui/components/organisms/vc-table/components";
+import { VcPagination } from "@ui/components/molecules";
 import {
   useTableRowReorder,
   useTableColumnsResize,
@@ -354,9 +358,11 @@ import {
   useTableRowGrouping,
   useTableInlineEdit,
   useDataTableState,
-} from "./composables";
-import { ColumnCollector, type ColumnInstance } from "./utils/ColumnCollector";
-import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction } from "./types";
+} from "@ui/components/organisms/vc-table/composables";
+import { ColumnCollector, type ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import { ColumnCollectorKey, HasFlexColumnsKey } from "@ui/components/organisms/vc-table/keys";
+import { IsMobileKey } from "@framework/injection-keys";
+import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction } from "@ui/components/organisms/vc-table/types";
 
 const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
   items: () => [],
@@ -517,7 +523,7 @@ const paginationRangeText = computed(() => {
 // Mobile Responsive Detection
 // ============================================================================
 
-const isMobile = inject("isMobile", ref(false)) as Ref<boolean>;
+const isMobile = inject(IsMobileKey, ref(false));
 const isMobileView = computed(() => isMobile.value);
 
 // ============================================================================
@@ -598,7 +604,7 @@ const extractColumnsFromSlots = (): ColumnInstance[] => {
 
 // Also keep inject/provide for backward compatibility
 const columnCollector = new ColumnCollector();
-provide("$columns", columnCollector);
+provide(ColumnCollectorKey, columnCollector);
 
 const columnsVersion = ref(0);
 columnCollector.onUpdate(() => {
@@ -682,7 +688,7 @@ const selection = useTableSelectionV2({
   items: toRef(props, "items"),
   selection: toRef(props, "selection"),
   selectionMode: computed(() => effectiveSelectionMode.value),
-  isRowSelectable: props.isRowSelectable,
+  isRowSelectable: (item: T) => (props.isRowSelectable ? props.isRowSelectable(item) : true),
   dataKey: props.dataKey,
   getItemKey,
   totalCount: toRef(props, "totalCount") as Ref<number | undefined>,
@@ -1162,7 +1168,7 @@ const cols = useTableColumns({
 });
 
 // Provide hasFlexColumns for TableRow filler control
-provide("hasFlexColumns", cols.hasFlexColumns);
+provide(HasFlexColumnsKey, cols.hasFlexColumns);
 
 // ============================================================================
 // Column Switcher
@@ -1506,6 +1512,35 @@ const handleMobileRowAction = (
 
 const tableRootRef = ref<HTMLElement | null>(null);
 const tableContainerRef = ref<HTMLElement | null>(null);
+const paginationRef = ref<HTMLElement | null>(null);
+
+// ============================================================================
+// Adaptive Pagination
+// ============================================================================
+
+const { width: paginationWidth } = useElementSize(paginationRef);
+
+/** Pagination item width (29px) + gap (8px) = 37px per button */
+const PAGINATION_ITEM_SLOT = 37;
+/** Approximate width of the page-info text + padding */
+const PAGINATION_BASE_WIDTH = 140;
+
+const paginationMaxPages = computed(() => {
+  if (!props.pagination || paginationWidth.value === 0) return 5;
+  const available = paginationWidth.value - PAGINATION_BASE_WIDTH;
+  // prev + next buttons always shown = 2 slots
+  const slotsForPages = Math.floor((available - 2 * PAGINATION_ITEM_SLOT) / PAGINATION_ITEM_SLOT);
+  if (slotsForPages >= 7) return 5; // enough room for 5 pages + first/last
+  if (slotsForPages >= 3) return slotsForPages;
+  return 0;
+});
+
+const paginationShowFirstLast = computed(() => {
+  if (!props.pagination || paginationWidth.value === 0) return true;
+  const available = paginationWidth.value - PAGINATION_BASE_WIDTH;
+  // Need room for: first + prev + at least 1 page + next + last = 5 slots minimum
+  return available >= 5 * PAGINATION_ITEM_SLOT;
+});
 
 // Note: Click-outside handling is done via focusout on the editor wrapper in DataTableCellRenderer.
 // No need for a separate mousedown listener - focusout covers all cases.
@@ -1575,7 +1610,7 @@ onBeforeUnmount(() => {
   }
 
   &__loading {
-    @apply tw-flex tw-items-center tw-justify-center tw-p-8 tw-text-[color:var(--neutrals-500)];
+    @apply tw-flex tw-items-center tw-justify-center tw-p-8 tw-text-neutrals-500;
   }
 
   &__row--dragging {
@@ -1583,7 +1618,7 @@ onBeforeUnmount(() => {
   }
 
   &__expansion-row {
-    @apply tw-bg-[color:var(--neutrals-50)] tw-w-full tw-border-b tw-border-[color:var(--table-border-color)];
+    @apply tw-bg-neutrals-50 tw-w-full tw-border-b tw-border-[color:var(--table-border-color)];
   }
 
   &__expansion-content {
@@ -1614,7 +1649,7 @@ onBeforeUnmount(() => {
   }
 
   &__group-footer {
-    @apply tw-bg-[color:var(--neutrals-50)] tw-px-4 tw-py-2 tw-border-b;
+    @apply tw-bg-neutrals-50 tw-px-4 tw-py-2 tw-border-b;
     border-color: var(--table-border-color);
     font-size: 0.875rem;
     color: var(--neutrals-600);

package/ui/components/organisms/vc-table/VcTableAdapter.vue

@@ -196,13 +196,13 @@
 import { computed, ref, toValue, watch } from "vue";
 import type { Ref, MaybeRef } from "vue";
 import { useI18n } from "vue-i18n";
-import VcDataTable from "./VcDataTable.vue";
-import VcColumn from "./components/VcColumn.vue";
-import { GlobalFiltersButton } from "./components";
-import { VcDropdownPanel } from "../../molecules";
-import { VcIcon } from "../../atoms";
-import type { TableAction, TableEmptyAction, DataTablePagination, AddRowConfig } from "./types";
-import type { ITableColumns, IActionBuilderResult } from "../../../../core/types";
+import VcDataTable from "@ui/components/organisms/vc-table/VcDataTable.vue";
+import VcColumn from "@ui/components/organisms/vc-table/components/VcColumn.vue";
+import { GlobalFiltersButton } from "@ui/components/organisms/vc-table/components";
+import { VcDropdownPanel } from "@ui/components/molecules";
+import { VcIcon } from "@ui/components/atoms";
+import type { TableAction, TableEmptyAction, DataTablePagination, AddRowConfig } from "@ui/components/organisms/vc-table/types";
+import type { ITableColumns, IActionBuilderResult } from "@core/types";
 
 // ============================================================================
 // Props — mirrors old VcTable (TableProps) interface

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -71,8 +71,8 @@
 </template>
 
 <script lang="ts" setup>
-import VcTableFilter from "./../vc-table-filter/vc-table-filter.vue";
-import { VcInput } from "./../../../../molecules";
+import VcTableFilter from "@ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue";
+import { VcInput } from "@ui/components/molecules";
 
 export interface Props {
   searchValue?: string;

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -283,12 +283,12 @@ import moment from "moment";
 import * as _ from "lodash-es";
 import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
-import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
-import VcInput from "../../../../molecules/vc-input/vc-input.vue";
-import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
+import VcInputCurrency from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";
+import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
+import VcTooltip from "@ui/components/atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
-import type { TableItem } from "../../types";
-import { ITableColumns } from "../../../../../../core/types";
+import type { TableItem } from "@ui/components/organisms/vc-table/types";
+import { ITableColumns } from "@core/types";
 
 // Cache for sanitized HTML to avoid repeated DOMPurify calls across table cells
 const sanitizedHtmlCache = new Map<string, string>();

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -41,9 +41,9 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import { ITableColumns } from "./../../../../../../core/types";
-import { TableColPartial } from "../../types";
-import { VcDropdown } from "../../../../";
+import { ITableColumns } from "@core/types";
+import { TableColPartial } from "@ui/components/organisms/vc-table/types";
+import { VcDropdown } from "@ui/components";
 
 export interface Props {
   items: TableColPartial[];

package/ui/components/organisms/vc-table/_internal/vc-table-empty/vc-table-empty.vue

@@ -51,7 +51,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref } from "vue";
-import { TableEmptyAction } from "../../types";
+import { TableEmptyAction } from "@ui/components/organisms/vc-table/types";
 
 export interface Props {
   items: any[];

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -65,11 +65,12 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, inject, Ref } from "vue";
-import { VcButton } from "./../../../../atoms/vc-button";
-import { VcBadge } from "./../../../../atoms/vc-badge";
-import { VcTooltip } from "./../../../../atoms/vc-tooltip";
-import { VcSidebar } from "../../../../";
-import { useFloatingPosition } from "../../../../../composables";
+import { IsMobileKey } from "@framework/injection-keys";
+import { VcButton } from "@ui/components/atoms/vc-button";
+import { VcBadge } from "@ui/components/atoms/vc-badge";
+import { VcTooltip } from "@ui/components/atoms/vc-tooltip";
+import { VcSidebar } from "@ui/components";
+import { useFloatingPosition } from "@ui/composables";
 
 export interface Props {
   title?: string;
@@ -91,7 +92,7 @@ const props = withDefaults(defineProps<Props>(), {
 const isPanelVisible = ref(false);
 const filterToggle = ref<HTMLElement | null>();
 const filterPanel = ref<HTMLElement | null>();
-const isMobile = inject("isMobile") as Ref<boolean>;
+const isMobile = inject(IsMobileKey)!;
 const sidebarWrapperComponent = computed(() => (isMobile.value ? VcSidebar : "div"));
 
 const sidebarWrapperProps = computed<Record<string, unknown>>(() => {

package/ui/components/organisms/vc-table/base/BaseVcDataTable.ts

@@ -8,7 +8,7 @@ import type { PropType, ExtractPropTypes } from "vue";
 import type {
   SortMeta,
   DataTableRowActionItem,
-} from "../types";
+} from "@ui/components/organisms/vc-table/types";
 
 /**
  * DataTable variants for visual styling

package/ui/components/organisms/vc-table/components/ColumnFilter.vue

@@ -134,9 +134,9 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
-import { VcInput, VcSelect } from "../../../molecules";
-import { VcButton } from "../../../atoms";
-import type { FilterType, FilterOption, FilterValue } from "../types";
+import { VcInput, VcSelect } from "@ui/components/molecules";
+import { VcButton } from "@ui/components/atoms";
+import type { FilterType, FilterOption, FilterValue } from "@ui/components/organisms/vc-table/types";
 
 interface Props {
   /** Backend field name for this filter */
@@ -398,7 +398,7 @@ onBeforeUnmount(() => {
   }
 
   &__overlay {
-    @apply tw-fixed tw-z-[100] tw-bg-[color:var(--additional-50)] tw-rounded-lg tw-shadow-lg tw-border tw-border-[color:var(--neutrals-200)];
+    @apply tw-fixed tw-z-[100] tw-bg-additional-50 tw-rounded-lg tw-shadow-lg tw-border tw-border-neutrals-200;
     min-width: 200px;
     max-width: 300px;
   }
@@ -420,11 +420,11 @@ onBeforeUnmount(() => {
   }
 
   &__range-label {
-    @apply tw-block tw-text-xs tw-text-[color:var(--neutrals-500)];
+    @apply tw-block tw-text-xs tw-text-neutrals-500;
   }
 
   &__actions {
-    @apply tw-flex tw-justify-end tw-gap-2 tw-px-3 tw-py-2 tw-border-t tw-border-[color:var(--neutrals-200)] tw-bg-[color:var(--neutrals-50)] tw-rounded-b-lg;
+    @apply tw-flex tw-justify-end tw-gap-2 tw-px-3 tw-py-2 tw-border-t tw-border-neutrals-200 tw-bg-neutrals-50 tw-rounded-b-lg;
   }
 
 }

package/ui/components/organisms/vc-table/components/ColumnSwitcherButton.vue

@@ -16,7 +16,7 @@
  *
  * Shows a columns icon. Uses VcButton with secondary variant.
  */
-import { VcButton } from "../../../atoms";
+import { VcButton } from "@ui/components/atoms";
 
 withDefaults(
   defineProps<{

package/ui/components/organisms/vc-table/components/DataTableBody.vue

@@ -114,11 +114,11 @@
  * - Slots for actions, expansion, group header/footer
  */
 import { computed, TransitionGroup } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps } from "../types";
-import type { GroupedData } from "../composables/useTableRowGrouping";
-import DataTableRow from "./DataTableRow.vue";
-import TableEmpty from "./TableEmpty.vue";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
+import type { GroupedData } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
+import DataTableRow from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
+import TableEmpty from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
 
 /**
  * Base item type — actual generic enforcement happens in VcDataTable.
@@ -309,7 +309,7 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
 }
 
 .vc-data-table__loading {
-  @apply tw-p-4 tw-text-center tw-text-[color:var(--neutrals-500)];
+  @apply tw-p-4 tw-text-center tw-text-neutrals-500;
 }
 
 .vc-data-table__rows-container {
@@ -321,11 +321,11 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
 }
 
 .vc-data-table__group-count {
-  @apply tw-ml-1 tw-text-[color:var(--neutrals-500)];
+  @apply tw-ml-1 tw-text-neutrals-500;
 }
 
 .vc-data-table__group-footer {
-  @apply tw-px-4 tw-py-2 tw-bg-[color:var(--neutrals-50)];
+  @apply tw-px-4 tw-py-2 tw-bg-neutrals-50;
 }
 
 /* Row swap animation */

package/ui/components/organisms/vc-table/components/DataTableCellRenderer.vue

@@ -130,11 +130,11 @@
  */
 import { computed } from "vue";
 import * as _ from "lodash-es";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import TableCheckbox from "./TableCheckbox.vue";
-import { VcRadioButton } from "../../../molecules/vc-radio-button";
-import DynamicCellRenderer from "./cells/DynamicCellRenderer.vue";
-import { SlotProxy } from "./_internal/SlotProxy";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import TableCheckbox from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
+import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
+import DynamicCellRenderer from "@ui/components/organisms/vc-table/components/cells/DynamicCellRenderer.vue";
+import { SlotProxy } from "@ui/components/organisms/vc-table/components/_internal/SlotProxy";
 
 const props = defineProps<{
   /** Column instance from ColumnCollector */
@@ -342,23 +342,23 @@ const handleCellBlur = (_payload: { row: number | undefined; field: string }) =>
 
   &__default-editor {
     @apply tw-w-full tw-h-8 tw-px-2 tw-py-1 tw-text-sm tw-border tw-rounded;
-    @apply tw-border-[color:var(--primary-300)] tw-outline-none;
-    @apply focus:tw-border-[color:var(--primary-500)] focus:tw-ring-1 focus:tw-ring-[color:var(--primary-200)];
+    @apply tw-border-primary-300 tw-outline-none;
+    @apply focus:tw-border-primary-500 focus:tw-ring-1 focus:tw-ring-primary-200;
   }
 
   &__expander-btn {
     @apply tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded tw-cursor-pointer tw-transition-colors;
     @apply tw-bg-transparent tw-border-0;
-    @apply hover:tw-bg-[color:var(--neutrals-100)];
+    @apply hover:tw-bg-neutrals-100;
   }
 
   &__expander-icon {
-    @apply tw-text-[color:var(--neutrals-500)] tw-text-xs;
+    @apply tw-text-neutrals-500 tw-text-xs;
   }
 
   &__drag-handle {
-    @apply tw-cursor-grab tw-text-[color:var(--neutrals-400)];
-    @apply hover:tw-text-[color:var(--neutrals-600)];
+    @apply tw-cursor-grab tw-text-neutrals-400;
+    @apply hover:tw-text-neutrals-600;
   }
 
   &__row-editor {
@@ -369,26 +369,26 @@ const handleCellBlur = (_payload: { row: number | undefined; field: string }) =>
     @apply tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-cursor-pointer tw-transition-colors;
 
     &--edit {
-      @apply tw-border-[color:var(--neutrals-300)] tw-bg-[color:var(--additional-50)] tw-text-[color:var(--neutrals-600)];
+      @apply tw-border-neutrals-300 tw-bg-additional-50 tw-text-neutrals-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--neutrals-100)] tw-border-[color:var(--neutrals-400)];
+        @apply tw-bg-neutrals-100 tw-border-neutrals-400;
       }
     }
 
     &--save {
-      @apply tw-border-[color:var(--success-300)] tw-bg-[color:var(--success-50)] tw-text-[color:var(--success-600)];
+      @apply tw-border-success-300 tw-bg-success-50 tw-text-success-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--success-100)] tw-border-[color:var(--success-400)];
+        @apply tw-bg-success-100 tw-border-success-400;
       }
     }
 
     &--cancel {
-      @apply tw-border-[color:var(--danger-300)] tw-bg-[color:var(--danger-50)] tw-text-[color:var(--danger-600)];
+      @apply tw-border-danger-300 tw-bg-danger-50 tw-text-danger-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--danger-100)] tw-border-[color:var(--danger-400)];
+        @apply tw-bg-danger-100 tw-border-danger-400;
       }
     }
   }