From a29e746aed67525f24565eedd2964fbab61e3440 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 13 Apr 2026 14:54:00 +0200
Subject: [PATCH 01/34] feat(modelStyles): add logic to color all
 model_component by type

---
 app/components/Viewer/ContextMenuItem.vue     |  3 +-
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 48 +++++++++++++++++--
 app/components/Viewer/TreeComponent.vue       |  5 +-
 app/stores/data_style.js                      | 11 ++++-
 app/stores/menu.js                            |  3 ++
 internal/database/base_database.js            |  2 +
 .../tables/model_component_type_datastyle.js  |  4 ++
 internal/stores/data_style/model/index.js     | 30 +++++++++++-
 internal/stores/data_style/state.js           | 39 ++++++++++++++-
 9 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 internal/database/tables/model_component_type_datastyle.js

diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index 46341c53..fe5826fe 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -96,8 +96,9 @@ function toggleOptions() {
         variant="panel"
         padding="pa-0"
         class="elevation-24"
+        style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-text class="pa-5">
+        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 7a3fe8d6..8d73bc92 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -3,9 +3,11 @@ import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/Color
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useDataStore } from "@ogw_front/stores/data";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const dataStore = useDataStore();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -14,6 +16,19 @@ const { itemProps } = defineProps({
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
 
+const component_type = ref(null);
+
+watchEffect(async () => {
+  if (itemProps.meta_data.viewer_type === "model_component_type") {
+    component_type.value = itemProps.meta_data.modelComponentType;
+  } else if (componentId.value && modelId.value) {
+    const type = await dataStore.meshComponentType(modelId.value, componentId.value);
+    component_type.value = type || null;
+  } else {
+    component_type.value = null;
+  }
+});
+
 const modelVisibility = computed({
   get: () => dataStyleStore.modelVisibility(modelId.value),
   set: (value) => {
@@ -27,13 +42,31 @@ const componentColor = computed({
     componentId.value
       ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
       : undefined,
-  set: async (newValue) => {
+  set: (newValue) => {
     if (componentId.value) {
-      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
+      dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
       hybridViewerStore.remoteRender();
     }
   },
 });
+
+const modelComponentTypeColor = computed({
+  get: () =>
+    component_type.value
+      ? dataStyleStore.getModelComponentTypeColor(modelId.value, component_type.value)
+      : undefined,
+  set: (newValue) => {
+    if (component_type.value) {
+      dataStyleStore.setModelComponentTypeColor(modelId.value, component_type.value, newValue);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const modelComponentTypeLabel = computed(() => {
+  if (!component_type.value) return "";
+  return `${component_type.value}s Options`;
+});
 </script>
 
 <template>
@@ -45,6 +78,14 @@ const componentColor = computed({
       </v-container>
     </div>
 
+    <div v-if="component_type" class="options-section mt-6">
+      <div class="section-badge">{{ modelComponentTypeLabel }}</div>
+      <v-container class="pa-2">
+        <div class="text-caption mb-1">Color</div>
+        <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
+      </v-container>
+    </div>
+
     <div v-if="componentId" class="options-section mt-6">
       <div class="section-badge">Component Options</div>
       <v-container class="pa-2">
@@ -57,7 +98,8 @@ const componentColor = computed({
 
 <style scoped>
 .model-style-card {
-  min-width: 280px;
+  padding-top: 20px;
+  overflow-x: hidden;
 }
 
 .options-section {
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index f3e06847..71a4b19e 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -127,9 +127,10 @@ async function onSelectionChange(current) {
         @contextmenu.prevent.stop="
           emit('show-menu', {
             event: $event,
-            itemId: item.id,
-            context_type: 'model_component',
+            itemId: item.category ? item.id : id,
+            context_type: item.category ? 'model_component' : 'model_component_type',
             modelId: id,
+            modelComponentType: item.category ? undefined : item.id,
           })
         "
       >
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 9b182e7b..d96ad7c5 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -45,12 +45,14 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     return {
       styles: dataStyleState.styles,
       componentStyles: dataStyleState.componentStyles,
+      modelComponentTypeStyles: dataStyleState.modelComponentTypeStyles,
     };
   }
 
   async function importStores(snapshot) {
     const stylesSnapshot = snapshot.styles;
     const componentStylesSnapshot = snapshot.componentStyles;
+    const modelComponentTypeStylesSnapshot = snapshot.modelComponentTypeStyles;
 
     await dataStyleState.clear();
 
@@ -60,8 +62,15 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
       database.model_component_datastyle.put(structuredClone(style)),
     );
+    const model_component_type_style_promises = Object.values(
+      modelComponentTypeStylesSnapshot,
+    ).map((style) => database.model_component_type_datastyle.put(structuredClone(style)));
 
-    await Promise.all([...style_promises, ...component_style_promises]);
+    await Promise.all([
+      ...style_promises,
+      ...component_style_promises,
+      ...model_component_type_style_promises,
+    ]);
   }
 
   function applyAllStylesFromState() {
diff --git a/app/stores/menu.js b/app/stores/menu.js
index 9ae06c7c..e112fc77 100644
--- a/app/stores/menu.js
+++ b/app/stores/menu.js
@@ -117,6 +117,9 @@ const menusData = {
     Section: Section_menu,
     StructuralModel: StructuralModel_menu,
   },
+  model_component_type: {
+    type: ModelComponent_menu,
+  },
   model_component: {
     component: ModelComponent_menu,
   },
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index c541657c..711fe493 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -1,6 +1,7 @@
 import { Dexie } from "dexie";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
+import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
 import { modelComponentsRelationTable } from "./tables/model_components_relation";
 import { modelComponentsTable } from "./tables/model_components";
@@ -12,6 +13,7 @@ export class BaseDatabase extends Dexie {
       [modelComponentsTable.name]: modelComponentsTable.schema,
       [dataStyleTable.name]: dataStyleTable.schema,
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
+      [modelComponentTypeDataStyleTable.name]: modelComponentTypeDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
     };
   }
diff --git a/internal/database/tables/model_component_type_datastyle.js b/internal/database/tables/model_component_type_datastyle.js
new file mode 100644
index 00000000..edb2734a
--- /dev/null
+++ b/internal/database/tables/model_component_type_datastyle.js
@@ -0,0 +1,4 @@
+export const modelComponentTypeDataStyleTable = {
+  name: "model_component_type_datastyle",
+  schema: "[id_model+type], id_model",
+};
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index c3c9c454..b49b3825 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -11,6 +11,7 @@ import { useModelPointsStyle } from "./points";
 import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
@@ -18,6 +19,14 @@ const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" },
 
 const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
+const brepDefaults = getDefaultStyle("BRep");
+const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
+  Corner: brepDefaults.corners.color,
+  Line: brepDefaults.lines.color,
+  Surface: brepDefaults.surfaces.color,
+  Block: brepDefaults.blocks.color,
+};
+
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
@@ -47,7 +56,7 @@ export function useModelStyle() {
       }
 
       const typeKey = `${type.toLowerCase()}s`;
-      const defaultVisibility = groupStyles[typeKey].visibility;
+      const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
 
       let allVisible = true;
       for (const component of typeComponents) {
@@ -126,6 +135,23 @@ export function useModelStyle() {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
 
+  function getModelComponentTypeColor(modelId, type) {
+    const style = dataStyleState.getModelComponentTypeStyle(modelId, type);
+    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type] || { r: 255, g: 255, b: 255 };
+  }
+
+  async function setModelComponentTypeColor(modelId, type, color) {
+    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color });
+    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+    const idsForType = allComponents
+      .filter((component) => component.type === type)
+      .map((component) => component.geode_id);
+    if (idsForType.length === 0) {
+      return;
+    }
+    return setModelComponentsColor(modelId, idsForType, color);
+  }
+
   async function setModelComponentsVisibility(modelId, componentIds, visibility) {
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const componentsMap = Object.fromEntries(
@@ -218,6 +244,8 @@ export function useModelStyle() {
     setModelVisibility,
     setModelComponentsVisibility,
     getModelComponentColor,
+    getModelComponentTypeColor,
+    setModelComponentTypeColor,
     setModelComponentsColor,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index d6270f7f..c9e70a96 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -33,6 +33,19 @@ export function useDataStyleState() {
     return selection;
   });
 
+  const modelComponentTypeStyles = useObservable(
+    liveQuery(async () => {
+      const all = await database.model_component_type_datastyle.toArray();
+      const accumulator = {};
+      for (const style of all) {
+        const key = `${style.id_model}_${style.type}`;
+        accumulator[key] = style;
+      }
+      return accumulator;
+    }),
+    { initialValue: {} },
+  );
+
   const componentStyles = useObservable(
     liveQuery(async () => {
       const all = await database.model_component_datastyle.toArray();
@@ -69,6 +82,21 @@ export function useDataStyleState() {
     });
   }
 
+  function getModelComponentTypeStyle(id_model, type) {
+    const key = `${id_model}_${type}`;
+    return modelComponentTypeStyles.value[key] || {};
+  }
+
+  function mutateModelComponentTypeStyle(id_model, type, values) {
+    return database.model_component_type_datastyle.get([id_model, type]).then((style) => {
+      const model_component_type_style = style || { id_model, type };
+      merge(model_component_type_style, values);
+      return database.model_component_type_datastyle.put(
+        structuredClone(toRaw(model_component_type_style)),
+      );
+    });
+  }
+
   function mutateComponentStyles(id_model, id_components, values) {
     return database.model_component_datastyle
       .where("id_model")
@@ -91,17 +119,24 @@ export function useDataStyleState() {
   }
 
   function clear() {
-    return Promise.all([database.data_style.clear(), database.model_component_datastyle.clear()]);
+    return Promise.all([
+      database.data_style.clear(),
+      database.model_component_datastyle.clear(),
+      database.model_component_type_datastyle.clear(),
+    ]);
   }
 
   return {
     getStyle,
-    mutateStyle,
     getComponentStyle,
+    getModelComponentTypeStyle,
+    mutateStyle,
     mutateComponentStyle,
+    mutateModelComponentTypeStyle,
     mutateComponentStyles,
     styles,
     componentStyles,
+    modelComponentTypeStyles,
     objectVisibility,
     selectedObjects,
     clear,

From d3a45eed0dbbef5577f448b655face2af3bc143a Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Mon, 13 Apr 2026 13:11:54 +0000
Subject: [PATCH 02/34] Apply prepare changes

---
 app/stores/data_style.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index d96ad7c5..0364bbbd 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -62,9 +62,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
       database.model_component_datastyle.put(structuredClone(style)),
     );
-    const model_component_type_style_promises = Object.values(
-      modelComponentTypeStylesSnapshot,
-    ).map((style) => database.model_component_type_datastyle.put(structuredClone(style)));
+    const model_component_type_style_promises = Object.values(modelComponentTypeStylesSnapshot).map(
+      (style) => database.model_component_type_datastyle.put(structuredClone(style)),
+    );
 
     await Promise.all([
       ...style_promises,

From 08de78df6caa5b1cd2c3e29bd710dcb2603c3c30 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 13 Apr 2026 15:19:25 +0200
Subject: [PATCH 03/34] oxlint

---
 .../Viewer/Generic/Model/ModelStyleCard.vue          | 12 +++++++-----
 internal/database/base_database.js                   |  2 +-
 internal/stores/data_style/model/index.js            |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 8d73bc92..b9acac3b 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -1,9 +1,9 @@
 <script setup>
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useDataStore } from "@ogw_front/stores/data";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -16,16 +16,16 @@ const { itemProps } = defineProps({
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
 
-const component_type = ref(null);
+const component_type = ref(undefined);
 
 watchEffect(async () => {
   if (itemProps.meta_data.viewer_type === "model_component_type") {
     component_type.value = itemProps.meta_data.modelComponentType;
   } else if (componentId.value && modelId.value) {
     const type = await dataStore.meshComponentType(modelId.value, componentId.value);
-    component_type.value = type || null;
+    component_type.value = type;
   } else {
-    component_type.value = null;
+    component_type.value = undefined;
   }
 });
 
@@ -64,7 +64,9 @@ const modelComponentTypeColor = computed({
 });
 
 const modelComponentTypeLabel = computed(() => {
-  if (!component_type.value) return "";
+  if (!component_type.value) {
+    return "";
+  }
   return `${component_type.value}s Options`;
 });
 </script>
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index 711fe493..79cb8118 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -3,8 +3,8 @@ import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
 import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
 import { modelComponentsTable } from "./tables/model_components";
+import { modelComponentsRelationTable } from "./tables/model_components_relation";
 
 export class BaseDatabase extends Dexie {
   static get initialStores() {
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index b49b3825..55cf0637 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,4 +1,5 @@
 import { database } from "@ogw_internal/database/database";
+import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -11,7 +12,6 @@ import { useModelPointsStyle } from "./points";
 import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 

From f3791f5609d7b92cf9b7452130c6c24352a3eb76 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 13 Apr 2026 17:16:00 +0200
Subject: [PATCH 04/34] fix reactive style for model_components

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 60 +++++++++++++++----
 internal/database/base_database.js            |  4 +-
 internal/stores/data_style/state.js           | 35 +++++------
 package.json                                  |  1 +
 4 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index b9acac3b..96d9006b 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -18,6 +18,10 @@ const componentId = computed(() => itemProps.meta_data.pickedComponentId);
 
 const component_type = ref(undefined);
 
+const modelCollapsed = ref(false);
+const typeCollapsed = ref(false);
+const componentCollapsed = ref(false);
+
 watchEffect(async () => {
   if (itemProps.meta_data.viewer_type === "model_component_type") {
     component_type.value = itemProps.meta_data.modelComponentType;
@@ -42,9 +46,9 @@ const componentColor = computed({
     componentId.value
       ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
       : undefined,
-  set: (newValue) => {
+  set: async (newValue) => {
     if (componentId.value) {
-      dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
+      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
       hybridViewerStore.remoteRender();
     }
   },
@@ -55,9 +59,13 @@ const modelComponentTypeColor = computed({
     component_type.value
       ? dataStyleStore.getModelComponentTypeColor(modelId.value, component_type.value)
       : undefined,
-  set: (newValue) => {
+  set: async (newValue) => {
     if (component_type.value) {
-      dataStyleStore.setModelComponentTypeColor(modelId.value, component_type.value, newValue);
+      await dataStyleStore.setModelComponentTypeColor(
+        modelId.value,
+        component_type.value,
+        newValue,
+      );
       hybridViewerStore.remoteRender();
     }
   },
@@ -74,23 +82,38 @@ const modelComponentTypeLabel = computed(() => {
 <template>
   <div class="model-style-card">
     <div class="options-section">
-      <div class="section-badge">Model Options</div>
-      <v-container class="pa-2">
+      <div class="section-badge" @click="modelCollapsed = !modelCollapsed">
+        Model Options
+        <v-icon class="collapse-icon" :class="{ rotated: modelCollapsed }" size="12">
+          mdi-chevron-down
+        </v-icon>
+      </div>
+      <v-container v-show="!modelCollapsed" class="pa-2">
         <VisibilitySwitch v-model="modelVisibility" />
       </v-container>
     </div>
 
     <div v-if="component_type" class="options-section mt-6">
-      <div class="section-badge">{{ modelComponentTypeLabel }}</div>
-      <v-container class="pa-2">
+      <div class="section-badge" @click="typeCollapsed = !typeCollapsed">
+        {{ modelComponentTypeLabel }}
+        <v-icon class="collapse-icon" :class="{ rotated: typeCollapsed }" size="12">
+          mdi-chevron-down
+        </v-icon>
+      </div>
+      <v-container v-show="!typeCollapsed" class="pa-2">
         <div class="text-caption mb-1">Color</div>
         <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
       </v-container>
     </div>
 
     <div v-if="componentId" class="options-section mt-6">
-      <div class="section-badge">Component Options</div>
-      <v-container class="pa-2">
+      <div class="section-badge" @click="componentCollapsed = !componentCollapsed">
+        Component Options
+        <v-icon class="collapse-icon" :class="{ rotated: componentCollapsed }" size="12">
+          mdi-chevron-down
+        </v-icon>
+      </div>
+      <v-container v-show="!componentCollapsed" class="pa-2">
         <div class="text-caption mb-1">Color</div>
         <ViewerOptionsColorPicker v-model="componentColor" />
       </v-container>
@@ -126,6 +149,23 @@ const modelComponentTypeLabel = computed(() => {
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.section-badge:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.collapse-icon {
+  transition: transform 0.2s ease;
+}
+
+.collapse-icon.rotated {
+  transform: rotate(-90deg);
 }
 
 .v-theme--light .options-section {
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index 79cb8118..81b72bc5 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -1,10 +1,10 @@
 import { Dexie } from "dexie";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
-import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
-import { modelComponentsTable } from "./tables/model_components";
+import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentsRelationTable } from "./tables/model_components_relation";
+import { modelComponentsTable } from "./tables/model_components";
 
 export class BaseDatabase extends Dexie {
   static get initialStores() {
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index c9e70a96..bf88856f 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -98,24 +98,25 @@ export function useDataStyleState() {
   }
 
   function mutateComponentStyles(id_model, id_components, values) {
-    return database.model_component_datastyle
-      .where("id_model")
-      .equals(id_model)
-      .toArray()
-      .then((all_styles) => {
-        const style_map = {};
-        for (const style of all_styles) {
-          style_map[style.id_component] = style;
-        }
-
-        const updates = id_components.map((id_component) => {
-          const style = style_map[id_component] || { id_model, id_component };
-          merge(style, values);
-          return toRaw(style);
-        });
-
-        return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .toArray();
+
+      const style_map = {};
+      for (const style of all_styles) {
+        style_map[style.id_component] = style;
+      }
+
+      const updates = id_components.map((id_component) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
       });
+
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
   }
 
   function clear() {
diff --git a/package.json b/package.json
index e7ed430c..af08fddf 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@vue/test-utils": "2.4.6",
     "happy-dom": "20.0.11",
     "msw": "2.11.1",
+    "oxlint": "^1.60.0",
     "playwright-core": "1.52.0",
     "resize-observer-polyfill": "1.5.1",
     "unplugin-auto-import": "20.0.0",

From 03a9b4493595576d1910c4aad97cb444fd1126e7 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 13 Apr 2026 17:16:59 +0200
Subject: [PATCH 05/34] rm this ?

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index af08fddf..e7ed430c 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "@vue/test-utils": "2.4.6",
     "happy-dom": "20.0.11",
     "msw": "2.11.1",
-    "oxlint": "^1.60.0",
     "playwright-core": "1.52.0",
     "resize-observer-polyfill": "1.5.1",
     "unplugin-auto-import": "20.0.0",

From 6c8bdc039a8f62ac407f436dcb2832f60430cf70 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 14 Apr 2026 12:49:22 +0200
Subject: [PATCH 06/34] harmonize transaction via Dexie

---
 internal/stores/data_style/state.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index bf88856f..4c538a75 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -88,7 +88,8 @@ export function useDataStyleState() {
   }
 
   function mutateModelComponentTypeStyle(id_model, type, values) {
-    return database.model_component_type_datastyle.get([id_model, type]).then((style) => {
+    return database.transaction("rw", database.model_component_type_datastyle, async () => {
+      const style = await database.model_component_type_datastyle.get([id_model, type]);
       const model_component_type_style = style || { id_model, type };
       merge(model_component_type_style, values);
       return database.model_component_type_datastyle.put(

From bb01773c6b22a3d1b6fb2c78a9ddb7a02c1e9654 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 14 Apr 2026 14:45:33 +0200
Subject: [PATCH 07/34] feat(modelStyleOptions): add visibility toggle for
 model_component_types and specifics model components

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 96d9006b..60838508 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -16,6 +16,8 @@ const { itemProps } = defineProps({
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
 
+const selection = dataStyleStore.visibleMeshComponents(modelId);
+
 const component_type = ref(undefined);
 
 const modelCollapsed = ref(false);
@@ -35,8 +37,24 @@ watchEffect(async () => {
 
 const modelVisibility = computed({
   get: () => dataStyleStore.modelVisibility(modelId.value),
-  set: (value) => {
-    dataStyleStore.setModelVisibility(modelId.value, value);
+  set: async (value) => {
+    await dataStyleStore.setModelVisibility(modelId.value, value);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const modelComponentTypeVisibility = computed({
+  get: () => selection.value.includes(component_type.value),
+  set: async (value) => {
+    await dataStyleStore.setModelComponentsVisibility(modelId.value, [component_type.value], value);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const componentVisibility = computed({
+  get: () => selection.value.includes(componentId.value),
+  set: async (value) => {
+    await dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], value);
     hybridViewerStore.remoteRender();
   },
 });
@@ -101,7 +119,8 @@ const modelComponentTypeLabel = computed(() => {
         </v-icon>
       </div>
       <v-container v-show="!typeCollapsed" class="pa-2">
-        <div class="text-caption mb-1">Color</div>
+        <VisibilitySwitch v-model="modelComponentTypeVisibility" />
+        <div class="text-caption mb-1 mt-2">Color</div>
         <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
       </v-container>
     </div>
@@ -114,7 +133,8 @@ const modelComponentTypeLabel = computed(() => {
         </v-icon>
       </div>
       <v-container v-show="!componentCollapsed" class="pa-2">
-        <div class="text-caption mb-1">Color</div>
+        <VisibilitySwitch v-model="componentVisibility" />
+        <div class="text-caption mb-1 mt-2">Color</div>
         <ViewerOptionsColorPicker v-model="componentColor" />
       </v-container>
     </div>

From 2d0749b725e5421ee63b2c26928ef42c8881faeb Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 14 Apr 2026 17:10:13 +0200
Subject: [PATCH 08/34] feat(modelStyleoptions): add a random options for
 colors taht can be use for both specific model components and groups of
 model_components

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 67 +++++++++++++++++--
 app/utils/color.js                            | 32 +++++++++
 .../stores/data_style/model/blocks/index.js   |  7 +-
 .../stores/data_style/model/corners/index.js  |  8 ++-
 internal/stores/data_style/model/index.js     | 56 +++++++++++++++-
 .../stores/data_style/model/lines/index.js    |  7 +-
 .../stores/data_style/model/surfaces/index.js |  7 +-
 7 files changed, 173 insertions(+), 11 deletions(-)
 create mode 100644 app/utils/color.js

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 60838508..5de5d2a0 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -89,6 +89,41 @@ const modelComponentTypeColor = computed({
   },
 });
 
+const colorModes = [
+  { title: "Default", value: "default" },
+  { title: "Random", value: "random" },
+];
+
+const modelComponentTypeColorMode = computed({
+  get: () =>
+    component_type.value
+      ? dataStyleStore.getModelComponentTypeColorMode(modelId.value, component_type.value)
+      : "default",
+  set: async (value) => {
+    if (component_type.value) {
+      await dataStyleStore.setModelComponentTypeColorMode(
+        modelId.value,
+        component_type.value,
+        value,
+      );
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const componentColorMode = computed({
+  get: () =>
+    componentId.value
+      ? dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value)
+      : "default",
+  set: async (value) => {
+    if (componentId.value) {
+      await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, value);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
 const modelComponentTypeLabel = computed(() => {
   if (!component_type.value) {
     return "";
@@ -120,8 +155,20 @@ const modelComponentTypeLabel = computed(() => {
       </div>
       <v-container v-show="!typeCollapsed" class="pa-2">
         <VisibilitySwitch v-model="modelComponentTypeVisibility" />
-        <div class="text-caption mb-1 mt-2">Color</div>
-        <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
+        <div class="text-caption mb-1 mt-2">Color Mode</div>
+        <v-select
+          v-model="modelComponentTypeColorMode"
+          :items="colorModes"
+          density="compact"
+          hide-details
+          class="mb-3"
+          variant="outlined"
+        />
+
+        <template v-if="modelComponentTypeColorMode === 'default' && modelComponentTypeColor">
+          <div class="text-caption mb-1">Color</div>
+          <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
+        </template>
       </v-container>
     </div>
 
@@ -134,8 +181,20 @@ const modelComponentTypeLabel = computed(() => {
       </div>
       <v-container v-show="!componentCollapsed" class="pa-2">
         <VisibilitySwitch v-model="componentVisibility" />
-        <div class="text-caption mb-1 mt-2">Color</div>
-        <ViewerOptionsColorPicker v-model="componentColor" />
+        <div class="text-caption mb-1 mt-2">Color Mode</div>
+        <v-select
+          v-model="componentColorMode"
+          :items="colorModes"
+          density="compact"
+          hide-details
+          class="mb-3"
+          variant="outlined"
+        />
+
+        <template v-if="componentColorMode === 'default' && componentColor">
+          <div class="text-caption mb-1">Color</div>
+          <ViewerOptionsColorPicker v-model="componentColor" />
+        </template>
       </v-container>
     </div>
   </div>
diff --git a/app/utils/color.js b/app/utils/color.js
new file mode 100644
index 00000000..2f060ca9
--- /dev/null
+++ b/app/utils/color.js
@@ -0,0 +1,32 @@
+export function getDeterministicColor(identifier) {
+  const CIRCLE_DEGREES = 360;
+  const HASH_PRIME = 31;
+  const DEGREES_PER_STEP = 30;
+  const STEPS_COUNT = 12;
+  const BASE_LIGHTNESS = 0.5;
+  const VIBRANCY_RANGE = 0.35;
+  const MIRROR_MAX = 9;
+  const RGB_MAX = 255;
+  const PHASE_GREEN = 8;
+
+  if (!identifier) {
+    return { r: 128, g: 128, b: 128 };
+  }
+  let hash_accumulator = 0;
+  for (let index = 0; index < identifier.length; index += 1) {
+    hash_accumulator = identifier.codePointAt(index) + hash_accumulator * HASH_PRIME;
+  }
+  const hue_angle = Math.abs(hash_accumulator % CIRCLE_DEGREES);
+
+  function to_component_value(phase_shift) {
+    const step = (phase_shift + hue_angle / DEGREES_PER_STEP) % STEPS_COUNT;
+    const intensity =
+      BASE_LIGHTNESS - VIBRANCY_RANGE * Math.max(Math.min(step - 3, MIRROR_MAX - step, 1), -1);
+    return Math.round(RGB_MAX * intensity);
+  }
+  return {
+    r: to_component_value(0),
+    g: to_component_value(PHASE_GREEN),
+    b: to_component_value(4),
+  };
+}
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index fad9dd8a..1f8a27f5 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -1,4 +1,5 @@
 // Local imports
+import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColorStyle } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
@@ -31,7 +32,11 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[vKey].push(block_id);
 
-      const cKey = JSON.stringify(style.color);
+      let { color } = style;
+      if (style.color_mode === "random") {
+        color = getDeterministicColor(block_id);
+      }
+      const cKey = JSON.stringify(color);
       if (!colorGroups[cKey]) {
         colorGroups[cKey] = [];
       }
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 63405075..5518d056 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -1,8 +1,10 @@
 // Local imports
+import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCornersColorStyle } from "./color";
 import { useModelCornersCommonStyle } from "./common";
 import { useModelCornersVisibilityStyle } from "./visibility";
+
 async function setModelCornersDefaultStyle(_id) {
   // Placeholder
 }
@@ -34,7 +36,11 @@ export function useModelCornersStyle() {
       visibilityGroups[vKey].push(corner_id);
 
       // Group by color
-      const cKey = JSON.stringify(style.color);
+      let { color } = style;
+      if (style.color_mode === "random") {
+        color = getDeterministicColor(corner_id);
+      }
+      const cKey = JSON.stringify(color);
       if (!colorGroups[cKey]) {
         colorGroups[cKey] = [];
       }
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 55cf0637..9f69f143 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,5 +1,6 @@
 import { database } from "@ogw_internal/database/database";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
+import { getDeterministicColor } from "@ogw_front/utils/color";
 import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -132,16 +133,34 @@ export function useModelStyle() {
   }
 
   function getModelComponentColor(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color;
+    const style = dataStyleState.getComponentStyle(modelId, componentId);
+    if (style.color_mode === "random") {
+      return getDeterministicColor(componentId);
+    }
+    return style.color;
+  }
+
+  function getModelComponentColorMode(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "default";
   }
 
   function getModelComponentTypeColor(modelId, type) {
     const style = dataStyleState.getModelComponentTypeStyle(modelId, type);
-    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type] || { r: 255, g: 255, b: 255 };
+    if (style.color_mode === "random") {
+      return { r: 128, g: 128, b: 128 };
+    }
+    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type];
+  }
+
+  function getModelComponentTypeColorMode(modelId, type) {
+    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "default";
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
-    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color });
+    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+      color,
+      color_mode: "default",
+    });
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const idsForType = allComponents
       .filter((component) => component.type === type)
@@ -152,6 +171,24 @@ export function useModelStyle() {
     return setModelComponentsColor(modelId, idsForType, color);
   }
 
+  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
+    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+    const idsForType = allComponents
+      .filter((component) => component.type === type)
+      .map((component) => component.geode_id);
+    if (idsForType.length === 0) {
+      return;
+    }
+    await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
+    return applyModelStyle(modelId);
+  }
+
+  async function setModelComponentColorMode(modelId, componentId, color_mode) {
+    await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+    return applyModelStyle(modelId);
+  }
+
   async function setModelComponentsVisibility(modelId, componentIds, visibility) {
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const componentsMap = Object.fromEntries(
@@ -185,6 +222,15 @@ export function useModelStyle() {
     const componentsMap = Object.fromEntries(
       allComponents.map((component) => [component.geode_id, component]),
     );
+
+    // If a color is explicitly provided, we ensure the mode is 'default' for these components
+    if (color) {
+      await dataStyleState.mutateComponentStyles(modelId, componentIds, {
+        color,
+        color_mode: "default",
+      });
+    }
+
     const handlers = {
       Corner: (ids) => modelCornersStyleStore.setModelCornersColor(modelId, ids, color),
       Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color),
@@ -246,7 +292,11 @@ export function useModelStyle() {
     getModelComponentColor,
     getModelComponentTypeColor,
     setModelComponentTypeColor,
+    setModelComponentTypeColorMode,
+    setModelComponentColorMode,
     setModelComponentsColor,
+    getModelComponentColorMode,
+    getModelComponentTypeColorMode,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...modelBlocksStyleStore,
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index d6913bb6..8a7ac7c7 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -1,4 +1,5 @@
 // Local imports
+import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelLinesColorStyle } from "./color";
 import { useModelLinesCommonStyle } from "./common";
@@ -32,7 +33,11 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[vKey].push(line_id);
 
-      const cKey = JSON.stringify(style.color);
+      let { color } = style;
+      if (style.color_mode === "random") {
+        color = getDeterministicColor(line_id);
+      }
+      const cKey = JSON.stringify(color);
       if (!colorGroups[cKey]) {
         colorGroups[cKey] = [];
       }
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 42014b67..6e7135ea 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -1,4 +1,5 @@
 // Local imports
+import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelSurfacesColorStyle } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
@@ -32,7 +33,11 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[vKey].push(surface_id);
 
-      const cKey = JSON.stringify(style.color);
+      let { color } = style;
+      if (style.color_mode === "random") {
+        color = getDeterministicColor(surface_id);
+      }
+      const cKey = JSON.stringify(color);
       if (!colorGroups[cKey]) {
         colorGroups[cKey] = [];
       }

From 9ba6b63fd09bb1bec5cbb59e3753502ca3d3fda6 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 15 Apr 2026 15:56:22 +0200
Subject: [PATCH 09/34] update

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 10 ++---
 .../stores/data_style/model/blocks/color.js   | 27 +++++-------
 .../stores/data_style/model/blocks/index.js   | 17 +++-----
 .../stores/data_style/model/corners/color.js  | 23 +++++-----
 .../stores/data_style/model/corners/index.js  | 18 +++-----
 internal/stores/data_style/model/index.js     | 43 +++++++++++--------
 .../stores/data_style/model/lines/color.js    | 29 +++++--------
 .../stores/data_style/model/lines/index.js    | 16 +++----
 .../stores/data_style/model/surfaces/color.js | 28 ++++++------
 .../stores/data_style/model/surfaces/index.js | 16 +++----
 10 files changed, 105 insertions(+), 122 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 5de5d2a0..d8bd001c 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -90,7 +90,7 @@ const modelComponentTypeColor = computed({
 });
 
 const colorModes = [
-  { title: "Default", value: "default" },
+  { title: "Constant", value: "constant" },
   { title: "Random", value: "random" },
 ];
 
@@ -98,7 +98,7 @@ const modelComponentTypeColorMode = computed({
   get: () =>
     component_type.value
       ? dataStyleStore.getModelComponentTypeColorMode(modelId.value, component_type.value)
-      : "default",
+      : "constant",
   set: async (value) => {
     if (component_type.value) {
       await dataStyleStore.setModelComponentTypeColorMode(
@@ -115,7 +115,7 @@ const componentColorMode = computed({
   get: () =>
     componentId.value
       ? dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value)
-      : "default",
+      : "constant",
   set: async (value) => {
     if (componentId.value) {
       await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, value);
@@ -165,7 +165,7 @@ const modelComponentTypeLabel = computed(() => {
           variant="outlined"
         />
 
-        <template v-if="modelComponentTypeColorMode === 'default' && modelComponentTypeColor">
+        <template v-if="modelComponentTypeColorMode === 'constant' && modelComponentTypeColor">
           <div class="text-caption mb-1">Color</div>
           <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
         </template>
@@ -191,7 +191,7 @@ const modelComponentTypeLabel = computed(() => {
           variant="outlined"
         />
 
-        <template v-if="componentColorMode === 'default' && componentColor">
+        <template v-if="componentColorMode === 'constant' && componentColor">
           <div class="text-caption mb-1">Color</div>
           <ViewerOptionsColorPicker v-model="componentColor" />
         </template>
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 6ecbec88..b1df99e2 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -18,29 +18,24 @@ export function useModelBlocksColorStyle() {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
   }
 
-  function setModelBlocksColor(id, block_ids, color) {
+  function setModelBlocksColor(id, block_ids, color, color_mode = "constant") {
     if (!block_ids || block_ids.length === 0) {
       return Promise.resolve();
     }
     return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
       if (!block_viewer_ids || block_viewer_ids.length === 0) {
-        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-          color,
-        });
+        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color, color_mode });
       }
-      return viewerStore.request(
-        model_blocks_schemas.color,
-        { id, block_ids: block_viewer_ids, color },
-        {
-          response_function: () =>
-            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color }),
-        },
-      );
+      const params = { id, block_ids: block_viewer_ids, color_mode };
+      if (color_mode === "constant") {
+        params.color = color;
+      }
+      return viewerStore.request(model_blocks_schemas.color, params, {
+        response_function: () =>
+          modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color, color_mode }),
+      });
     });
   }
 
-  return {
-    modelBlockColor,
-    setModelBlocksColor,
-  };
+  return { modelBlockColor, setModelBlocksColor };
 }
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 1f8a27f5..75db2f2b 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -1,9 +1,9 @@
 // Local imports
-import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColorStyle } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelBlocksVisibilityStyle } from "./visibility";
+
 async function setModelBlocksDefaultStyle(_id) {
   // Placeholder
 }
@@ -32,15 +32,12 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[vKey].push(block_id);
 
-      let { color } = style;
-      if (style.color_mode === "random") {
-        color = getDeterministicColor(block_id);
-      }
-      const cKey = JSON.stringify(color);
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
       if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
       }
-      colorGroups[cKey].push(block_id);
+      colorGroups[cKey].ids.push(block_id);
     }
 
     const promises = [];
@@ -51,8 +48,8 @@ export function useModelBlocksStyle() {
       );
     }
 
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelBlocksColorStyle.setModelBlocksColor(id, ids, JSON.parse(cValue)));
+    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
+      promises.push(modelBlocksColorStyle.setModelBlocksColor(id, ids, color, color_mode));
     }
 
     return Promise.all(promises);
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 750d3a8f..fe1ae3c0 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -18,22 +18,25 @@ export function useModelCornersColorStyle() {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
   }
 
-  function setModelCornersColor(id, corner_ids, color) {
+  function setModelCornersColor(id, corner_ids, color, color_mode = "constant") {
     if (!corner_ids || corner_ids.length === 0) {
       return Promise.resolve();
     }
     return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
       if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color });
+        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
+          color,
+          color_mode,
+        });
       }
-      return viewerStore.request(
-        model_corners_schemas.color,
-        { id, block_ids: corner_viewer_ids, color },
-        {
-          response_function: () =>
-            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color }),
-        },
-      );
+      const params = { id, block_ids: corner_viewer_ids, color_mode };
+      if (color_mode === "constant") {
+        params.color = color;
+      }
+      return viewerStore.request(model_corners_schemas.color, params, {
+        response_function: () =>
+          modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color, color_mode }),
+      });
     });
   }
 
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 5518d056..df546b10 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCornersColorStyle } from "./color";
 import { useModelCornersCommonStyle } from "./common";
@@ -35,16 +34,12 @@ export function useModelCornersStyle() {
       }
       visibilityGroups[vKey].push(corner_id);
 
-      // Group by color
-      let { color } = style;
-      if (style.color_mode === "random") {
-        color = getDeterministicColor(corner_id);
-      }
-      const cKey = JSON.stringify(color);
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
       if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
       }
-      colorGroups[cKey].push(corner_id);
+      colorGroups[cKey].ids.push(corner_id);
     }
 
     const promises = [];
@@ -56,9 +51,8 @@ export function useModelCornersStyle() {
       );
     }
 
-    // Apply color groups
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelCornersColorStyle.setModelCornersColor(id, ids, JSON.parse(cValue)));
+    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
+      promises.push(modelCornersColorStyle.setModelCornersColor(id, ids, color, color_mode));
     }
 
     return Promise.all(promises);
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 9f69f143..aada0f0c 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -141,7 +141,7 @@ export function useModelStyle() {
   }
 
   function getModelComponentColorMode(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "default";
+    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
   }
 
   function getModelComponentTypeColor(modelId, type) {
@@ -153,13 +153,13 @@ export function useModelStyle() {
   }
 
   function getModelComponentTypeColorMode(modelId, type) {
-    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "default";
+    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
     await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
       color,
-      color_mode: "default",
+      color_mode: "constant",
     });
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const idsForType = allComponents
@@ -181,11 +181,22 @@ export function useModelStyle() {
       return;
     }
     await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
-    return applyModelStyle(modelId);
+    const color =
+      color_mode === "constant"
+        ? dataStyleState.getModelComponentTypeStyle(modelId, type).color
+        : undefined;
+    return setModelComponentsColor(modelId, idsForType, color, color_mode);
   }
 
   async function setModelComponentColorMode(modelId, componentId, color_mode) {
-    await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+    const values = { color_mode };
+    if (color_mode === "constant") {
+      const style = dataStyleState.getComponentStyle(modelId, componentId);
+      if (!style.color) {
+        values.color = getDeterministicColor(componentId);
+      }
+    }
+    await dataStyleState.mutateComponentStyle(modelId, componentId, values);
     return applyModelStyle(modelId);
   }
 
@@ -217,25 +228,23 @@ export function useModelStyle() {
     );
   }
 
-  async function setModelComponentsColor(modelId, componentIds, color) {
+  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const componentsMap = Object.fromEntries(
       allComponents.map((component) => [component.geode_id, component]),
     );
 
-    // If a color is explicitly provided, we ensure the mode is 'default' for these components
-    if (color) {
-      await dataStyleState.mutateComponentStyles(modelId, componentIds, {
-        color,
-        color_mode: "default",
-      });
-    }
+    await dataStyleState.mutateComponentStyles(modelId, componentIds, {
+      ...(color ? { color } : {}),
+      color_mode,
+    });
 
     const handlers = {
-      Corner: (ids) => modelCornersStyleStore.setModelCornersColor(modelId, ids, color),
-      Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color),
-      Surface: (ids) => modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color),
-      Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color),
+      Corner: (ids) => modelCornersStyleStore.setModelCornersColor(modelId, ids, color, color_mode),
+      Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color, color_mode),
+      Surface: (ids) =>
+        modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color, color_mode),
+      Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color, color_mode),
     };
     return Promise.all(
       MESH_TYPES.map((type) => {
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 88cd9c4b..7d4a0fd9 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -18,31 +18,24 @@ export function useModelLinesColorStyle() {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
 
-  function setModelLinesColor(id, line_ids, color) {
+  function setModelLinesColor(id, line_ids, color, color_mode = "constant") {
     if (!line_ids || line_ids.length === 0) {
       return Promise.resolve();
     }
     return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
       if (!line_viewer_ids || line_viewer_ids.length === 0) {
-        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-          color,
-        });
+        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode });
       }
-      return viewerStore.request(
-        model_lines_schemas.color,
-        { id, block_ids: line_viewer_ids, color },
-        {
-          response_function: () =>
-            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-              color,
-            }),
-        },
-      );
+      const params = { id, block_ids: line_viewer_ids, color_mode };
+      if (color_mode === "constant") {
+        params.color = color;
+      }
+      return viewerStore.request(model_lines_schemas.color, params, {
+        response_function: () =>
+          modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode }),
+      });
     });
   }
 
-  return {
-    modelLineColor,
-    setModelLinesColor,
-  };
+  return { modelLineColor, setModelLinesColor };
 }
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 8a7ac7c7..89e5e71e 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelLinesColorStyle } from "./color";
 import { useModelLinesCommonStyle } from "./common";
@@ -33,15 +32,12 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[vKey].push(line_id);
 
-      let { color } = style;
-      if (style.color_mode === "random") {
-        color = getDeterministicColor(line_id);
-      }
-      const cKey = JSON.stringify(color);
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
       if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
       }
-      colorGroups[cKey].push(line_id);
+      colorGroups[cKey].ids.push(line_id);
     }
 
     const promises = [];
@@ -50,8 +46,8 @@ export function useModelLinesStyle() {
       promises.push(modelLinesVisibilityStyle.setModelLinesVisibility(id, ids, vValue === "true"));
     }
 
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelLinesColorStyle.setModelLinesColor(id, ids, JSON.parse(cValue)));
+    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
+      promises.push(modelLinesColorStyle.setModelLinesColor(id, ids, color, color_mode));
     }
 
     return Promise.all(promises);
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 449ac106..9a590169 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -18,27 +18,27 @@ export function useModelSurfacesColorStyle() {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
 
-  function setModelSurfacesColor(id, surface_ids, color) {
+  function setModelSurfacesColor(id, surface_ids, color, color_mode = "constant") {
     if (!surface_ids || surface_ids.length === 0) {
       return Promise.resolve();
     }
     return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
       if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color });
+        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
+          color,
+          color_mode,
+        });
       }
-      return viewerStore.request(
-        model_surfaces_schemas.color,
-        { id, block_ids: surface_viewer_ids, color },
-        {
-          response_function: () =>
-            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color }),
-        },
-      );
+      const params = { id, block_ids: surface_viewer_ids, color_mode };
+      if (color_mode === "constant") {
+        params.color = color;
+      }
+      return viewerStore.request(model_surfaces_schemas.color, params, {
+        response_function: () =>
+          modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color, color_mode }),
+      });
     });
   }
 
-  return {
-    modelSurfaceColor,
-    setModelSurfacesColor,
-  };
+  return { modelSurfaceColor, setModelSurfacesColor };
 }
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 6e7135ea..e5a108a2 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { getDeterministicColor } from "@ogw_front/utils/color";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelSurfacesColorStyle } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
@@ -33,15 +32,12 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[vKey].push(surface_id);
 
-      let { color } = style;
-      if (style.color_mode === "random") {
-        color = getDeterministicColor(surface_id);
-      }
-      const cKey = JSON.stringify(color);
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
       if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
       }
-      colorGroups[cKey].push(surface_id);
+      colorGroups[cKey].ids.push(surface_id);
     }
 
     const promises = [];
@@ -52,8 +48,8 @@ export function useModelSurfacesStyle() {
       );
     }
 
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelSurfacesColorStyle.setModelSurfacesColor(id, ids, JSON.parse(cValue)));
+    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
+      promises.push(modelSurfacesColorStyle.setModelSurfacesColor(id, ids, color, color_mode));
     }
 
     return Promise.all(promises);

From f9318775a4a70c060cd252f10c3bcc03966509fb Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 15 Apr 2026 16:55:37 +0200
Subject: [PATCH 10/34] refacto and add the loading bar with start/stop request

---
 .../stores/data_style/model/blocks/color.js   |   5 +-
 .../stores/data_style/model/corners/color.js  |   5 +-
 internal/stores/data_style/model/index.js     | 238 +++++++++++-------
 .../stores/data_style/model/lines/color.js    |   5 +-
 .../stores/data_style/model/surfaces/color.js |   5 +-
 5 files changed, 146 insertions(+), 112 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index b1df99e2..bc39c1d5 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -30,10 +30,7 @@ export function useModelBlocksColorStyle() {
       if (color_mode === "constant") {
         params.color = color;
       }
-      return viewerStore.request(model_blocks_schemas.color, params, {
-        response_function: () =>
-          modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color, color_mode }),
-      });
+      return viewerStore.request(model_blocks_schemas.color, params);
     });
   }
 
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index fe1ae3c0..057c6ca5 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -33,10 +33,7 @@ export function useModelCornersColorStyle() {
       if (color_mode === "constant") {
         params.color = color;
       }
-      return viewerStore.request(model_corners_schemas.color, params, {
-        response_function: () =>
-          modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color, color_mode }),
-      });
+      return viewerStore.request(model_corners_schemas.color, params);
     });
   }
 
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index aada0f0c..d031f488 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,6 +1,6 @@
 import { database } from "@ogw_internal/database/database";
-import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { getDeterministicColor } from "@ogw_front/utils/color";
+import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -16,9 +16,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
-const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" }, { type: "Block" }];
-
-const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
+const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
 
 const brepDefaults = getDefaultStyle("BRep");
 const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
@@ -157,101 +155,143 @@ export function useModelStyle() {
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
-    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
-      color,
-      color_mode: "constant",
-    });
-    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-    const idsForType = allComponents
-      .filter((component) => component.type === type)
-      .map((component) => component.geode_id);
-    if (idsForType.length === 0) {
-      return;
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+        color,
+        color_mode: "constant",
+      });
+      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+      const idsForType = allComponents
+        .filter((component) => component.type === type)
+        .map((component) => component.geode_id);
+      if (idsForType.length === 0) {
+        return;
+      }
+      await setModelComponentsColor(modelId, idsForType, color);
+    } finally {
+      viewerStore.stop_request();
     }
-    return setModelComponentsColor(modelId, idsForType, color);
   }
 
   async function setModelComponentTypeColorMode(modelId, type, color_mode) {
-    await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
-    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-    const idsForType = allComponents
-      .filter((component) => component.type === type)
-      .map((component) => component.geode_id);
-    if (idsForType.length === 0) {
-      return;
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+      const idsForType = allComponents
+        .filter((component) => component.type === type)
+        .map((component) => component.geode_id);
+      if (idsForType.length === 0) {
+        return;
+      }
+
+      if (color_mode === "random") {
+        await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
+        return;
+      }
+
+      const storedTypeColor = dataStyleState.getModelComponentTypeStyle(modelId, type).color;
+      if (storedTypeColor) {
+        await setModelComponentsColor(modelId, idsForType, storedTypeColor, color_mode);
+        return;
+      }
+
+      await database.transaction("rw", database.model_component_datastyle, async () => {
+        const all_styles = await database.model_component_datastyle
+          .where("id_model")
+          .equals(modelId)
+          .toArray();
+        const style_map = Object.fromEntries(all_styles.map((s) => [s.id_component, s]));
+        const updates = idsForType.map((id_component) => {
+          const style = style_map[id_component] || { id_model: modelId, id_component };
+          style.color_mode = color_mode;
+          style.color = style.color ?? getDeterministicColor(id_component);
+          return structuredClone(style);
+        });
+        return database.model_component_datastyle.bulkPut(updates);
+      });
+    } finally {
+      viewerStore.stop_request();
     }
-    await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
-    const color =
-      color_mode === "constant"
-        ? dataStyleState.getModelComponentTypeStyle(modelId, type).color
-        : undefined;
-    return setModelComponentsColor(modelId, idsForType, color, color_mode);
   }
 
   async function setModelComponentColorMode(modelId, componentId, color_mode) {
-    const values = { color_mode };
-    if (color_mode === "constant") {
-      const style = dataStyleState.getComponentStyle(modelId, componentId);
-      if (!style.color) {
-        values.color = getDeterministicColor(componentId);
+    viewerStore.start_request();
+    try {
+      if (color_mode === "random") {
+        await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+        await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
+        return;
       }
+      const style = dataStyleState.getComponentStyle(modelId, componentId);
+      const color = style.color ?? getDeterministicColor(componentId);
+      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode, color });
+    } finally {
+      viewerStore.stop_request();
     }
-    await dataStyleState.mutateComponentStyle(modelId, componentId, values);
-    return applyModelStyle(modelId);
   }
 
   async function setModelComponentsVisibility(modelId, componentIds, visibility) {
-    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-    const componentsMap = Object.fromEntries(
-      allComponents.map((component) => [component.geode_id, component]),
-    );
+    viewerStore.start_request();
+    try {
+      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+      const componentsMap = Object.fromEntries(
+        allComponents.map((component) => [component.geode_id, component]),
+      );
 
-    return Promise.all(
-      MESH_TYPES.map(async (type) => {
-        const typeComponents = allComponents.filter((component) => component.type === type);
-        const isSelectedType = componentIds.includes(type);
-        const idsToUpdate = isSelectedType
-          ? typeComponents.map((component) => component.geode_id)
-          : componentIds.filter((id) => componentsMap[id]?.type === type);
-
-        if (idsToUpdate.length === 0) {
-          return;
-        }
+      return Promise.all(
+        MESH_TYPES.map(async (type) => {
+          const typeComponents = allComponents.filter((component) => component.type === type);
+          const isSelectedType = componentIds.includes(type);
+          const idsToUpdate = isSelectedType
+            ? typeComponents.map((component) => component.geode_id)
+            : componentIds.filter((id) => componentsMap[id]?.type === type);
 
-        const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
-        if (viewerIds.length > 0) {
-          const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
-          await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
-        }
-        return dataStyleState.mutateComponentStyles(modelId, idsToUpdate, { visibility });
-      }),
-    );
+          if (idsToUpdate.length === 0) {
+            return;
+          }
+
+          const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
+          if (viewerIds.length > 0) {
+            const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
+            await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
+          }
+          await dataStyleState.mutateComponentStyles(modelId, idsToUpdate, { visibility });
+        }),
+      );
+    } finally {
+      viewerStore.stop_request();
+    }
   }
 
   async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
-    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-    const componentsMap = Object.fromEntries(
-      allComponents.map((component) => [component.geode_id, component]),
-    );
+    viewerStore.start_request();
+    try {
+      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+      const componentsMap = Object.fromEntries(
+        allComponents.map((component) => [component.geode_id, component]),
+      );
 
-    await dataStyleState.mutateComponentStyles(modelId, componentIds, {
-      ...(color ? { color } : {}),
-      color_mode,
-    });
+      await dataStyleState.mutateComponentStyles(modelId, componentIds, { color, color_mode });
 
-    const handlers = {
-      Corner: (ids) => modelCornersStyleStore.setModelCornersColor(modelId, ids, color, color_mode),
-      Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color, color_mode),
-      Surface: (ids) =>
-        modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color, color_mode),
-      Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color, color_mode),
-    };
-    return Promise.all(
-      MESH_TYPES.map((type) => {
-        const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
-        return handlers[type](idsForType);
-      }),
-    );
+      const handlers = {
+        Corner: (ids) =>
+          modelCornersStyleStore.setModelCornersColor(modelId, ids, color, color_mode),
+        Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color, color_mode),
+        Surface: (ids) =>
+          modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color, color_mode),
+        Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color, color_mode),
+      };
+      await Promise.all(
+        MESH_TYPES.map((type) => {
+          const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
+          return handlers[type](idsForType);
+        }),
+      );
+    } finally {
+      viewerStore.stop_request();
+    }
   }
 
   function applyModelStyle(modelId) {
@@ -274,23 +314,29 @@ export function useModelStyle() {
   }
 
   function setModelMeshComponentsDefaultStyle(modelId) {
-    return dataStore.item(modelId).then((item) => {
-      if (!item) {
-        return [];
-      }
-      const { mesh_components } = item;
-      const handlers = {
-        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
-        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
-        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
-        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
-      };
-      return Promise.all(
-        Object.keys(mesh_components)
-          .filter((key) => handlers[key])
-          .map((key) => handlers[key]()),
-      );
-    });
+    viewerStore.start_request();
+    return dataStore
+      .item(modelId)
+      .then((item) => {
+        if (!item) {
+          return [];
+        }
+        const { mesh_components } = item;
+        const handlers = {
+          Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+          Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
+          Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
+          Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
+        };
+        return Promise.all(
+          Object.keys(mesh_components)
+            .filter((key) => handlers[key])
+            .map((key) => handlers[key]()),
+        );
+      })
+      .finally(() => {
+        viewerStore.stop_request();
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 7d4a0fd9..9707ad40 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -30,10 +30,7 @@ export function useModelLinesColorStyle() {
       if (color_mode === "constant") {
         params.color = color;
       }
-      return viewerStore.request(model_lines_schemas.color, params, {
-        response_function: () =>
-          modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode }),
-      });
+      return viewerStore.request(model_lines_schemas.color, params);
     });
   }
 
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 9a590169..514077a5 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -33,10 +33,7 @@ export function useModelSurfacesColorStyle() {
       if (color_mode === "constant") {
         params.color = color;
       }
-      return viewerStore.request(model_surfaces_schemas.color, params, {
-        response_function: () =>
-          modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color, color_mode }),
-      });
+      return viewerStore.request(model_surfaces_schemas.color, params);
     });
   }
 

From 1da7229aa6e064756398a8f9088026848b1b6dce Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 15 Apr 2026 17:07:17 +0200
Subject: [PATCH 11/34] adapt from next

---
 .../Viewer/ObjectTree/Views/ModelComponents.vue           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 31630a53..26946716 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -80,12 +80,14 @@ async function onSelectionChange(current) {
           :item="item"
           show-tooltip
           @contextmenu="
+            const actualItem = item.raw || item;
             emit('show-menu', {
               event: $event,
-              itemId: item.id,
-              context_type: 'model_component',
+              itemId: actualItem.category ? actualItem.id : viewId,
+              context_type: actualItem.category ? 'model_component' : 'model_component_type',
               modelId: viewId,
-            })
+              modelComponentType: actualItem.category ? undefined : actualItem.id,
+            });
           "
         />
       </template>

From 401dc84fab60e7c21dbb3fa46d4060995f8f3363 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 15 Apr 2026 17:21:37 +0200
Subject: [PATCH 12/34] oxlint

---
 .../ObjectTree/Views/ModelComponents.vue      |  22 +--
 internal/stores/data_style/model/constants.js |  13 ++
 internal/stores/data_style/model/index.js     | 133 ++++--------------
 internal/stores/data_style/model/selection.js |  76 ++++++++++
 4 files changed, 128 insertions(+), 116 deletions(-)
 create mode 100644 internal/stores/data_style/model/constants.js
 create mode 100644 internal/stores/data_style/model/selection.js

diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 26946716..dad89f89 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -51,6 +51,17 @@ async function onSelectionChange(current) {
   }
   hybridViewerStore.remoteRender();
 }
+
+function showContextMenu(event, item) {
+  const actualItem = item.raw || item;
+  emit("show-menu", {
+    event,
+    itemId: actualItem.category ? actualItem.id : viewId,
+    context_type: actualItem.category ? "model_component" : "model_component_type",
+    modelId: viewId,
+    modelComponentType: actualItem.category ? undefined : actualItem.id,
+  });
+}
 </script>
 
 <template>
@@ -79,16 +90,7 @@ async function onSelectionChange(current) {
         <ObjectTreeItemLabel
           :item="item"
           show-tooltip
-          @contextmenu="
-            const actualItem = item.raw || item;
-            emit('show-menu', {
-              event: $event,
-              itemId: actualItem.category ? actualItem.id : viewId,
-              context_type: actualItem.category ? 'model_component' : 'model_component_type',
-              modelId: viewId,
-              modelComponentType: actualItem.category ? undefined : actualItem.id,
-            });
-          "
+          @contextmenu="showContextMenu($event, item)"
         />
       </template>
     </v-treeview>
diff --git a/internal/stores/data_style/model/constants.js b/internal/stores/data_style/model/constants.js
new file mode 100644
index 00000000..c2be7c5c
--- /dev/null
+++ b/internal/stores/data_style/model/constants.js
@@ -0,0 +1,13 @@
+import { getDefaultStyle } from "@ogw_front/utils/default_styles";
+
+const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
+
+const brepDefaults = getDefaultStyle("BRep");
+const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
+  Corner: brepDefaults.corners.color,
+  Line: brepDefaults.lines.color,
+  Surface: brepDefaults.surfaces.color,
+  Block: brepDefaults.blocks.color,
+};
+
+export { MESH_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS };
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index d031f488..fa484ea7 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,7 +1,6 @@
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES } from "./constants";
 import { database } from "@ogw_internal/database/database";
 import { getDeterministicColor } from "@ogw_front/utils/color";
-import { getDefaultStyle } from "@ogw_front/utils/default_styles";
-import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -10,22 +9,13 @@ import { useModelCornersStyle } from "./corners";
 import { useModelEdgesStyle } from "./edges";
 import { useModelLinesStyle } from "./lines";
 import { useModelPointsStyle } from "./points";
+import { useModelSelection } from "./selection";
 import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
-const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
-
-const brepDefaults = getDefaultStyle("BRep");
-const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
-  Corner: brepDefaults.corners.color,
-  Line: brepDefaults.lines.color,
-  Surface: brepDefaults.surfaces.color,
-  Block: brepDefaults.blocks.color,
-};
-
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
@@ -38,40 +28,6 @@ export function useModelStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-  function buildSelection(modelId, components, stylesMap) {
-    const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
-    for (const component of components) {
-      if (componentsByType[component.type]) {
-        componentsByType[component.type].push(component);
-      }
-    }
-
-    const groupStyles = dataStyleState.getStyle(modelId);
-    const selection = [];
-    for (const type of MESH_TYPES) {
-      const typeComponents = componentsByType[type];
-      if (typeComponents.length === 0) {
-        continue;
-      }
-
-      const typeKey = `${type.toLowerCase()}s`;
-      const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
-
-      let allVisible = true;
-      for (const component of typeComponents) {
-        const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
-        if (isVisible) {
-          selection.push(component.geode_id);
-        } else {
-          allVisible = false;
-        }
-      }
-      if (allVisible) {
-        selection.push(type);
-      }
-    }
-    return selection;
-  }
 
   function modelVisibility(modelId) {
     return dataStyleState.getStyle(modelId).visibility;
@@ -92,42 +48,7 @@ export function useModelStyle() {
   }
 
   function visibleMeshComponents(id_ref) {
-    const selection = ref([]);
-    watch(
-      () => unref(id_ref),
-      (modelId, _prev, onCleanup) => {
-        if (!modelId) {
-          selection.value = [];
-          return;
-        }
-        const observable = liveQuery(async () => {
-          const allComponents = await database.model_components
-            .where("id")
-            .equals(modelId)
-            .toArray();
-          if (allComponents.length === 0) {
-            return [];
-          }
-          const componentStyles = await database.model_component_datastyle
-            .where("id_model")
-            .equals(modelId)
-            .toArray();
-          const stylesMap = Object.fromEntries(
-            componentStyles.map((style) => [style.id_component, style]),
-          );
-          return buildSelection(modelId, allComponents, stylesMap);
-        });
-
-        const subscription = observable.subscribe({
-          next: (val) => {
-            selection.value = val;
-          },
-        });
-        onCleanup(() => subscription.unsubscribe());
-      },
-      { immediate: true },
-    );
-    return selection;
+    return useModelSelection(id_ref, dataStyleState);
   }
 
   function getModelComponentColor(modelId, componentId) {
@@ -202,7 +123,9 @@ export function useModelStyle() {
           .where("id_model")
           .equals(modelId)
           .toArray();
-        const style_map = Object.fromEntries(all_styles.map((s) => [s.id_component, s]));
+        const style_map = Object.fromEntries(
+          all_styles.map((style) => [style.id_component, style]),
+        );
         const updates = idsForType.map((id_component) => {
           const style = style_map[id_component] || { id_model: modelId, id_component };
           style.color_mode = color_mode;
@@ -313,30 +236,28 @@ export function useModelStyle() {
     );
   }
 
-  function setModelMeshComponentsDefaultStyle(modelId) {
+  async function setModelMeshComponentsDefaultStyle(modelId) {
     viewerStore.start_request();
-    return dataStore
-      .item(modelId)
-      .then((item) => {
-        if (!item) {
-          return [];
-        }
-        const { mesh_components } = item;
-        const handlers = {
-          Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
-          Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
-          Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
-          Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
-        };
-        return Promise.all(
-          Object.keys(mesh_components)
-            .filter((key) => handlers[key])
-            .map((key) => handlers[key]()),
-        );
-      })
-      .finally(() => {
-        viewerStore.stop_request();
-      });
+    try {
+      const item = await dataStore.item(modelId);
+      if (!item) {
+        return;
+      }
+      const { mesh_components } = item;
+      const handlers = {
+        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
+        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
+        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
+      };
+      return await Promise.all(
+        Object.keys(mesh_components)
+          .filter((key) => handlers[key])
+          .map((key) => handlers[key]()),
+      );
+    } finally {
+      viewerStore.stop_request();
+    }
   }
 
   return {
diff --git a/internal/stores/data_style/model/selection.js b/internal/stores/data_style/model/selection.js
new file mode 100644
index 00000000..527359e0
--- /dev/null
+++ b/internal/stores/data_style/model/selection.js
@@ -0,0 +1,76 @@
+import { MESH_TYPES } from "./constants";
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+
+function buildSelection(modelId, components, stylesMap, dataStyleState) {
+  const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+  for (const component of components) {
+    if (componentsByType[component.type]) {
+      componentsByType[component.type].push(component);
+    }
+  }
+
+  const groupStyles = dataStyleState.getStyle(modelId);
+  const selection = [];
+  for (const type of MESH_TYPES) {
+    const typeComponents = componentsByType[type];
+    if (typeComponents.length === 0) {
+      continue;
+    }
+
+    const typeKey = `${type.toLowerCase()}s`;
+    const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
+
+    let allVisible = true;
+    for (const component of typeComponents) {
+      const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
+      if (isVisible) {
+        selection.push(component.geode_id);
+      } else {
+        allVisible = false;
+      }
+    }
+    if (allVisible) {
+      selection.push(type);
+    }
+  }
+  return selection;
+}
+
+function useModelSelection(id_ref, dataStyleState) {
+  const selection = ref([]);
+  watch(
+    () => unref(id_ref),
+    (modelId, _prev, onCleanup) => {
+      if (!modelId) {
+        selection.value = [];
+        return;
+      }
+      const observable = liveQuery(async () => {
+        const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+        if (allComponents.length === 0) {
+          return [];
+        }
+        const componentStyles = await database.model_component_datastyle
+          .where("id_model")
+          .equals(modelId)
+          .toArray();
+        const stylesMap = Object.fromEntries(
+          componentStyles.map((style) => [style.id_component, style]),
+        );
+        return buildSelection(modelId, allComponents, stylesMap, dataStyleState);
+      });
+
+      const subscription = observable.subscribe({
+        next: (val) => {
+          selection.value = val;
+        },
+      });
+      onCleanup(() => subscription.unsubscribe());
+    },
+    { immediate: true },
+  );
+  return selection;
+}
+
+export { buildSelection, useModelSelection };

From 81fa66b96336ee673485059365d1170e1c0a2039 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 15 Apr 2026 15:22:21 +0000
Subject: [PATCH 13/34] Apply prepare changes

---
 internal/stores/data_style/model/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index fa484ea7..5567c1d3 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -28,7 +28,6 @@ export function useModelStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-
   function modelVisibility(modelId) {
     return dataStyleState.getStyle(modelId).visibility;
   }

From 0efdfea8e8aa0e736e61dc8bba8be32f75d25bca Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 13:57:49 +0200
Subject: [PATCH 14/34] refacto

---
 internal/database/database.js                 |   1 +
 .../stores/data_style/model/blocks/color.js   |  29 +-
 .../stores/data_style/model/blocks/index.js   |  44 ---
 .../data_style/model/blocks/visibility.js     |  33 +-
 internal/stores/data_style/model/color.js     | 118 +++++++
 .../stores/data_style/model/corners/color.js  |  32 +-
 .../stores/data_style/model/corners/index.js  |  47 ---
 .../data_style/model/corners/visibility.js    |  31 +-
 internal/stores/data_style/model/index.js     | 288 ++++--------------
 .../stores/data_style/model/lines/color.js    |  26 +-
 .../stores/data_style/model/lines/index.js    |  42 ---
 .../data_style/model/lines/visibility.js      |  38 ++-
 .../stores/data_style/model/surfaces/color.js |  32 +-
 .../stores/data_style/model/surfaces/index.js |  44 ---
 .../data_style/model/surfaces/visibility.js   |  36 ++-
 .../stores/data_style/model/visibility.js     | 104 +++++++
 internal/stores/data_style/state.js           | 110 ++++++-
 17 files changed, 507 insertions(+), 548 deletions(-)
 create mode 100644 internal/stores/data_style/model/color.js
 create mode 100644 internal/stores/data_style/model/visibility.js

diff --git a/internal/database/database.js b/internal/database/database.js
index a045ddda..05e83870 100644
--- a/internal/database/database.js
+++ b/internal/database/database.js
@@ -52,6 +52,7 @@ class Database extends BaseDatabase {
 }
 
 const databaseContainer = { instance: new Database() };
+databaseContainer.instance.clear();
 
 const database = new Proxy(
   {},
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index bc39c1d5..66d34a68 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelBlocksCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,25 +14,27 @@ export function useModelBlocksColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelBlockColor(id, block_id) {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
   }
 
   function setModelBlocksColor(id, block_ids, color, color_mode = "constant") {
-    if (!block_ids || block_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
-      if (!block_viewer_ids || block_viewer_ids.length === 0) {
-        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color, color_mode });
-      }
-      const params = { id, block_ids: block_viewer_ids, color_mode };
-      if (color_mode === "constant") {
-        params.color = color;
-      }
-      return viewerStore.request(model_blocks_schemas.color, params);
-    });
+    return dataStyleState
+      .setModelTypeColor(id, block_ids, color, color_mode, model_blocks_schemas.color, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
+            color,
+            color_mode,
+          });
+        }
+        return res;
+      });
   }
 
   return { modelBlockColor, setModelBlocksColor };
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 75db2f2b..6bba8d8e 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColorStyle } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelBlocksVisibilityStyle } from "./visibility";
@@ -9,54 +8,11 @@ async function setModelBlocksDefaultStyle(_id) {
 }
 
 export function useModelBlocksStyle() {
-  const dataStore = useDataStore();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
   const modelBlocksVisibilityStyle = useModelBlocksVisibilityStyle();
   const modelBlocksColorStyle = useModelBlocksColorStyle();
 
-  async function applyModelBlocksStyle(id) {
-    const block_ids = await dataStore.getBlocksGeodeIds(id);
-    if (block_ids.length === 0) {
-      return;
-    }
-
-    const visibilityGroups = {};
-    const colorGroups = {};
-
-    for (const block_id of block_ids) {
-      const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
-
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
-      }
-      visibilityGroups[vKey].push(block_id);
-
-      const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
-      }
-      colorGroups[cKey].ids.push(block_id);
-    }
-
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelBlocksVisibilityStyle.setModelBlocksVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
-      promises.push(modelBlocksColorStyle.setModelBlocksColor(id, ids, color, color_mode));
-    }
-
-    return Promise.all(promises);
-  }
-
   return {
-    applyModelBlocksStyle,
     setModelBlocksDefaultStyle,
     ...modelBlocksCommonStyle,
     ...modelBlocksVisibilityStyle,
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
index 382e320c..a86230d6 100644
--- a/internal/stores/data_style/model/blocks/visibility.js
+++ b/internal/stores/data_style/model/blocks/visibility.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelBlocksCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,6 +14,7 @@ export function useModelBlocksVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelBlockVisibility(id, block_id) {
     const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
@@ -20,24 +22,19 @@ export function useModelBlocksVisibilityStyle() {
   }
 
   function setModelBlocksVisibility(id, block_ids, visibility) {
-    if (!block_ids || block_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
-      if (!block_viewer_ids || block_viewer_ids.length === 0) {
-        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-          visibility,
-        });
-      }
-      return viewerStore.request(
-        model_blocks_schemas.visibility,
-        { id, block_ids: block_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { visibility }),
-        },
-      );
-    });
+    return dataStyleState
+      .setModelTypeVisibility(id, block_ids, visibility, model_blocks_schemas.visibility, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
+            visibility,
+          });
+        }
+        return res;
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
new file mode 100644
index 00000000..860e25d1
--- /dev/null
+++ b/internal/stores/data_style/model/color.js
@@ -0,0 +1,118 @@
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
+import { dispatchToComponentTypes } from "./visibility";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelBlocksStyle } from "./blocks";
+import { useModelCornersStyle } from "./corners";
+import { useModelLinesStyle } from "./lines";
+import { useModelSurfacesStyle } from "./surfaces";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export function useModelColorStyle() {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const viewerStore = useViewerStore();
+
+  const stores = {
+    Corner: useModelCornersStyle(),
+    Line: useModelLinesStyle(),
+    Surface: useModelSurfacesStyle(),
+    Block: useModelBlocksStyle(),
+  };
+
+  function getModelComponentColor(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color;
+  }
+
+  function getModelComponentColorMode(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
+  }
+
+  function getModelComponentTypeColor(modelId, type) {
+    const style = dataStyleState.getModelComponentTypeStyle(modelId, type);
+    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type];
+  }
+
+  function getModelComponentTypeColorMode(modelId, type) {
+    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
+  }
+
+  async function setModelComponentTypeColor(modelId, type, color) {
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+        color,
+        color_mode: "constant",
+      });
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      if (idsForType.length === 0) {
+        return;
+      }
+      await setModelComponentsColor(modelId, idsForType, color);
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
+  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      if (idsForType.length === 0) {
+        return;
+      }
+
+      if (color_mode === "random") {
+        await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
+        return;
+      }
+
+      await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
+  async function setModelComponentColorMode(modelId, componentId, color_mode) {
+    viewerStore.start_request();
+    try {
+      if (color_mode === "random") {
+        await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+        await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
+        return;
+      }
+      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
+  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateComponentStyles(modelId, componentIds, { color, color_mode });
+      return await dispatchToComponentTypes(
+        modelId,
+        componentIds,
+        "Color",
+        { dataStore, stores, viewerStore },
+        color,
+        color_mode,
+      );
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
+  return {
+    getModelComponentColor,
+    getModelComponentColorMode,
+    getModelComponentTypeColor,
+    getModelComponentTypeColorMode,
+    setModelComponentTypeColor,
+    setModelComponentTypeColorMode,
+    setModelComponentColorMode,
+    setModelComponentsColor,
+  };
+}
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 057c6ca5..58da05dc 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelCornersCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,28 +14,27 @@ export function useModelCornersColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelCornerColor(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
   }
 
   function setModelCornersColor(id, corner_ids, color, color_mode = "constant") {
-    if (!corner_ids || corner_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
-      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
-          color,
-          color_mode,
-        });
-      }
-      const params = { id, block_ids: corner_viewer_ids, color_mode };
-      if (color_mode === "constant") {
-        params.color = color;
-      }
-      return viewerStore.request(model_corners_schemas.color, params);
-    });
+    return dataStyleState
+      .setModelTypeColor(id, corner_ids, color, color_mode, model_corners_schemas.color, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
+            color,
+            color_mode,
+          });
+        }
+        return res;
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index df546b10..e03b5cc0 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCornersColorStyle } from "./color";
 import { useModelCornersCommonStyle } from "./common";
 import { useModelCornersVisibilityStyle } from "./visibility";
@@ -9,57 +8,11 @@ async function setModelCornersDefaultStyle(_id) {
 }
 
 export function useModelCornersStyle() {
-  const dataStore = useDataStore();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
   const modelCornersVisibilityStyle = useModelCornersVisibilityStyle();
   const modelCornersColorStyle = useModelCornersColorStyle();
 
-  async function applyModelCornersStyle(id) {
-    const corner_ids = await dataStore.getCornersGeodeIds(id);
-    if (corner_ids.length === 0) {
-      return;
-    }
-
-    // Group corners by their effective style to minimize RPC calls
-    const visibilityGroups = {};
-    const colorGroups = {};
-
-    for (const corner_id of corner_ids) {
-      const style = modelCornersCommonStyle.modelCornerStyle(id, corner_id);
-
-      // Group by visibility
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
-      }
-      visibilityGroups[vKey].push(corner_id);
-
-      const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
-      }
-      colorGroups[cKey].ids.push(corner_id);
-    }
-
-    const promises = [];
-
-    // Apply visibility groups
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelCornersVisibilityStyle.setModelCornersVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
-      promises.push(modelCornersColorStyle.setModelCornersColor(id, ids, color, color_mode));
-    }
-
-    return Promise.all(promises);
-  }
-
   return {
-    applyModelCornersStyle,
     setModelCornersDefaultStyle,
     ...modelCornersCommonStyle,
     ...modelCornersVisibilityStyle,
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
index 5e764c13..f21399b8 100644
--- a/internal/stores/data_style/model/corners/visibility.js
+++ b/internal/stores/data_style/model/corners/visibility.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelCornersCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,28 +14,26 @@ export function useModelCornersVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelCornerVisibility(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
   }
 
   function setModelCornersVisibility(id, corner_ids, visibility) {
-    if (!corner_ids || corner_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
-      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility });
-      }
-      return viewerStore.request(
-        model_corners_schemas.visibility,
-        { id, block_ids: corner_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility }),
-        },
-      );
-    });
+    return dataStyleState
+      .setModelTypeVisibility(id, corner_ids, visibility, model_corners_schemas.visibility, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
+            visibility,
+          });
+        }
+        return res;
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index fa484ea7..83752060 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,20 +1,54 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES } from "./constants";
-import { database } from "@ogw_internal/database/database";
-import { getDeterministicColor } from "@ogw_front/utils/color";
+import { MESH_TYPES } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelBlocksStyle } from "./blocks";
+import { useModelColorStyle } from "./color";
 import { useModelCornersStyle } from "./corners";
 import { useModelEdgesStyle } from "./edges";
 import { useModelLinesStyle } from "./lines";
 import { useModelPointsStyle } from "./points";
 import { useModelSelection } from "./selection";
 import { useModelSurfacesStyle } from "./surfaces";
+import { useModelVisibilityStyle } from "./visibility";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
+async function applyComponentTypeStyle(modelId, { getIds, getStyle, setVisibility, setColor }) {
+  const compIds = await getIds(modelId);
+  if (!compIds?.length) {
+    return;
+  }
+
+  const visibilityGroups = {};
+  const colorGroups = {};
+
+  for (const compId of compIds) {
+    const style = getStyle(modelId, compId);
+
+    const visibility = String(style.visibility);
+    if (!visibilityGroups[visibility]) {
+      visibilityGroups[visibility] = [];
+    }
+    visibilityGroups[visibility].push(compId);
+
+    const color_mode = style.color_mode || "constant";
+    const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
+    if (!colorGroups[cKey]) {
+      colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+    }
+    colorGroups[cKey].compIds.push(compId);
+  }
+
+  const promises = [
+    ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+      setVisibility(modelId, ids, visibility === "true"),
+    ),
+    ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+      setColor(modelId, ids, color, color_mode),
+    ),
+  ];
+
+  return Promise.all(promises);
+}
 
 export function useModelStyle() {
   const dataStore = useDataStore();
@@ -25,215 +59,38 @@ export function useModelStyle() {
   const modelLinesStyleStore = useModelLinesStyle();
   const modelPointsStyleStore = useModelPointsStyle();
   const modelSurfacesStyleStore = useModelSurfacesStyle();
-  const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
+  const modelColorStyle = useModelColorStyle();
+  const modelVisibilityStyle = useModelVisibilityStyle();
 
-  function modelVisibility(modelId) {
-    return dataStyleState.getStyle(modelId).visibility;
-  }
-
-  function setModelVisibility(modelId, visibility) {
-    return viewerStore.request(
-      model_schemas.visibility,
-      { id: modelId, visibility },
-      {
-        response_function: async () => {
-          await hybridViewerStore.setVisibility(modelId, visibility);
-          await dataStyleState.mutateStyle(modelId, { visibility });
-          return { id: modelId, visibility };
-        },
-      },
-    );
-  }
+  const stores = {
+    Corner: modelCornersStyleStore,
+    Line: modelLinesStyleStore,
+    Surface: modelSurfacesStyleStore,
+    Block: modelBlocksStyleStore,
+  };
 
   function visibleMeshComponents(id_ref) {
     return useModelSelection(id_ref, dataStyleState);
   }
 
-  function getModelComponentColor(modelId, componentId) {
-    const style = dataStyleState.getComponentStyle(modelId, componentId);
-    if (style.color_mode === "random") {
-      return getDeterministicColor(componentId);
-    }
-    return style.color;
-  }
-
-  function getModelComponentColorMode(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
-  }
-
-  function getModelComponentTypeColor(modelId, type) {
-    const style = dataStyleState.getModelComponentTypeStyle(modelId, type);
-    if (style.color_mode === "random") {
-      return { r: 128, g: 128, b: 128 };
-    }
-    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type];
-  }
-
-  function getModelComponentTypeColorMode(modelId, type) {
-    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
-  }
-
-  async function setModelComponentTypeColor(modelId, type, color) {
-    viewerStore.start_request();
-    try {
-      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
-        color,
-        color_mode: "constant",
-      });
-      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-      const idsForType = allComponents
-        .filter((component) => component.type === type)
-        .map((component) => component.geode_id);
-      if (idsForType.length === 0) {
-        return;
-      }
-      await setModelComponentsColor(modelId, idsForType, color);
-    } finally {
-      viewerStore.stop_request();
-    }
-  }
-
-  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
-    viewerStore.start_request();
-    try {
-      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
-      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-      const idsForType = allComponents
-        .filter((component) => component.type === type)
-        .map((component) => component.geode_id);
-      if (idsForType.length === 0) {
-        return;
-      }
-
-      if (color_mode === "random") {
-        await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
-        return;
-      }
-
-      const storedTypeColor = dataStyleState.getModelComponentTypeStyle(modelId, type).color;
-      if (storedTypeColor) {
-        await setModelComponentsColor(modelId, idsForType, storedTypeColor, color_mode);
-        return;
-      }
-
-      await database.transaction("rw", database.model_component_datastyle, async () => {
-        const all_styles = await database.model_component_datastyle
-          .where("id_model")
-          .equals(modelId)
-          .toArray();
-        const style_map = Object.fromEntries(
-          all_styles.map((style) => [style.id_component, style]),
-        );
-        const updates = idsForType.map((id_component) => {
-          const style = style_map[id_component] || { id_model: modelId, id_component };
-          style.color_mode = color_mode;
-          style.color = style.color ?? getDeterministicColor(id_component);
-          return structuredClone(style);
-        });
-        return database.model_component_datastyle.bulkPut(updates);
-      });
-    } finally {
-      viewerStore.stop_request();
-    }
-  }
-
-  async function setModelComponentColorMode(modelId, componentId, color_mode) {
-    viewerStore.start_request();
-    try {
-      if (color_mode === "random") {
-        await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
-        await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
-        return;
-      }
-      const style = dataStyleState.getComponentStyle(modelId, componentId);
-      const color = style.color ?? getDeterministicColor(componentId);
-      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode, color });
-    } finally {
-      viewerStore.stop_request();
-    }
-  }
-
-  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
-    viewerStore.start_request();
-    try {
-      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-      const componentsMap = Object.fromEntries(
-        allComponents.map((component) => [component.geode_id, component]),
-      );
-
-      return Promise.all(
-        MESH_TYPES.map(async (type) => {
-          const typeComponents = allComponents.filter((component) => component.type === type);
-          const isSelectedType = componentIds.includes(type);
-          const idsToUpdate = isSelectedType
-            ? typeComponents.map((component) => component.geode_id)
-            : componentIds.filter((id) => componentsMap[id]?.type === type);
-
-          if (idsToUpdate.length === 0) {
-            return;
-          }
-
-          const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
-          if (viewerIds.length > 0) {
-            const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
-            await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
-          }
-          await dataStyleState.mutateComponentStyles(modelId, idsToUpdate, { visibility });
-        }),
-      );
-    } finally {
-      viewerStore.stop_request();
-    }
-  }
-
-  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
-    viewerStore.start_request();
-    try {
-      const allComponents = await database.model_components.where("id").equals(modelId).toArray();
-      const componentsMap = Object.fromEntries(
-        allComponents.map((component) => [component.geode_id, component]),
-      );
-
-      await dataStyleState.mutateComponentStyles(modelId, componentIds, { color, color_mode });
-
-      const handlers = {
-        Corner: (ids) =>
-          modelCornersStyleStore.setModelCornersColor(modelId, ids, color, color_mode),
-        Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color, color_mode),
-        Surface: (ids) =>
-          modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color, color_mode),
-        Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color, color_mode),
-      };
-      await Promise.all(
-        MESH_TYPES.map((type) => {
-          const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
-          return handlers[type](idsForType);
-        }),
-      );
-    } finally {
-      viewerStore.stop_request();
-    }
-  }
-
   function applyModelStyle(modelId) {
     const style = dataStyleState.getStyle(modelId);
-    const handlers = {
-      visibility: () => setModelVisibility(modelId, style.visibility),
-      corners: () => modelCornersStyleStore.applyModelCornersStyle(modelId),
-      lines: () => modelLinesStyleStore.applyModelLinesStyle(modelId),
-      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
-      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(modelId),
-      points: () => modelPointsStyleStore.applyModelPointsStyle(modelId),
-      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(modelId),
-    };
 
-    return Promise.all(
-      Object.keys(style)
-        .filter((key) => handlers[key])
-        .map((key) => handlers[key]()),
-    );
+    return Promise.all([
+      modelVisibilityStyle.setModelVisibility(modelId, style.visibility),
+      ...MESH_TYPES.map((type) =>
+        applyComponentTypeStyle(modelId, {
+          getIds: dataStore[`get${type}sGeodeIds`],
+          getStyle: stores[type][`model${type}Style`],
+          setVisibility: stores[type][`setModel${type}sVisibility`],
+          setColor: stores[type][`setModel${type}sColor`],
+        }),
+      ),
+      modelPointsStyleStore.applyModelPointsStyle(modelId),
+      modelEdgesStyleStore.applyModelEdgesStyle(modelId),
+    ]);
   }
 
   async function setModelMeshComponentsDefaultStyle(modelId) {
@@ -244,16 +101,10 @@ export function useModelStyle() {
         return;
       }
       const { mesh_components } = item;
-      const handlers = {
-        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
-        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
-        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
-        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
-      };
       return await Promise.all(
         Object.keys(mesh_components)
-          .filter((key) => handlers[key])
-          .map((key) => handlers[key]()),
+          .filter((key) => stores[key])
+          .map((key) => stores[key][`setModel${key}sDefaultStyle`](modelId)),
       );
     } finally {
       viewerStore.stop_request();
@@ -261,20 +112,11 @@ export function useModelStyle() {
   }
 
   return {
-    modelVisibility,
     visibleMeshComponents,
-    setModelVisibility,
-    setModelComponentsVisibility,
-    getModelComponentColor,
-    getModelComponentTypeColor,
-    setModelComponentTypeColor,
-    setModelComponentTypeColorMode,
-    setModelComponentColorMode,
-    setModelComponentsColor,
-    getModelComponentColorMode,
-    getModelComponentTypeColorMode,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
+    ...modelColorStyle,
+    ...modelVisibilityStyle,
     ...modelBlocksStyleStore,
     ...modelCornersStyleStore,
     ...modelEdgesStyleStore,
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 9707ad40..8387f11e 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelLinesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,25 +14,24 @@ export function useModelLinesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelLineColor(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
 
   function setModelLinesColor(id, line_ids, color, color_mode = "constant") {
-    if (!line_ids || line_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
-      if (!line_viewer_ids || line_viewer_ids.length === 0) {
-        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode });
-      }
-      const params = { id, block_ids: line_viewer_ids, color_mode };
-      if (color_mode === "constant") {
-        params.color = color;
-      }
-      return viewerStore.request(model_lines_schemas.color, params);
-    });
+    return dataStyleState
+      .setModelTypeColor(id, line_ids, color, color_mode, model_lines_schemas.color, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode });
+        }
+        return res;
+      });
   }
 
   return { modelLineColor, setModelLinesColor };
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 89e5e71e..7aa10d4d 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelLinesColorStyle } from "./color";
 import { useModelLinesCommonStyle } from "./common";
 import { useModelLinesVisibilityStyle } from "./visibility";
@@ -9,52 +8,11 @@ async function setModelLinesDefaultStyle(_id) {
 }
 
 export function useModelLinesStyle() {
-  const dataStore = useDataStore();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
   const modelLinesVisibilityStyle = useModelLinesVisibilityStyle();
   const modelLinesColorStyle = useModelLinesColorStyle();
 
-  async function applyModelLinesStyle(id) {
-    const line_ids = await dataStore.getLinesGeodeIds(id);
-    if (line_ids.length === 0) {
-      return;
-    }
-
-    const visibilityGroups = {};
-    const colorGroups = {};
-
-    for (const line_id of line_ids) {
-      const style = modelLinesCommonStyle.modelLineStyle(id, line_id);
-
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
-      }
-      visibilityGroups[vKey].push(line_id);
-
-      const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
-      }
-      colorGroups[cKey].ids.push(line_id);
-    }
-
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(modelLinesVisibilityStyle.setModelLinesVisibility(id, ids, vValue === "true"));
-    }
-
-    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
-      promises.push(modelLinesColorStyle.setModelLinesColor(id, ids, color, color_mode));
-    }
-
-    return Promise.all(promises);
-  }
-
   return {
-    applyModelLinesStyle,
     setModelLinesDefaultStyle,
     ...modelLinesCommonStyle,
     ...modelLinesVisibilityStyle,
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
index 12cbdbb7..d93a142e 100644
--- a/internal/stores/data_style/model/lines/visibility.js
+++ b/internal/stores/data_style/model/lines/visibility.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelLinesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,31 +14,26 @@ export function useModelLinesVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const dataStyleState = useDataStyleState();
+
   function modelLineVisibility(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
   }
-  function setModelLinesVisibility(id, line_ids, visibility) {
-    if (!line_ids || line_ids.length === 0) {
-      return Promise.resolve();
-    }
 
-    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
-      if (!line_viewer_ids || line_viewer_ids.length === 0) {
-        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-          visibility,
-        });
-      }
-      return viewerStore.request(
-        model_lines_schemas.visibility,
-        { id, block_ids: line_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-              visibility,
-            }),
-        },
-      );
-    });
+  function setModelLinesVisibility(id, line_ids, visibility) {
+    return dataStyleState
+      .setModelTypeVisibility(id, line_ids, visibility, model_lines_schemas.visibility, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
+            visibility,
+          });
+        }
+        return res;
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 514077a5..69ed5c62 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelSurfacesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,28 +14,27 @@ export function useModelSurfacesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+  const dataStyleState = useDataStyleState();
 
   function modelSurfaceColor(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
 
   function setModelSurfacesColor(id, surface_ids, color, color_mode = "constant") {
-    if (!surface_ids || surface_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
-      if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
-          color,
-          color_mode,
-        });
-      }
-      const params = { id, block_ids: surface_viewer_ids, color_mode };
-      if (color_mode === "constant") {
-        params.color = color;
-      }
-      return viewerStore.request(model_surfaces_schemas.color, params);
-    });
+    return dataStyleState
+      .setModelTypeColor(id, surface_ids, color, color_mode, model_surfaces_schemas.color, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
+            color,
+            color_mode,
+          });
+        }
+        return res;
+      });
   }
 
   return { modelSurfaceColor, setModelSurfacesColor };
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index e5a108a2..407ff0ef 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -1,5 +1,4 @@
 // Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelSurfacesColorStyle } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
 import { useModelSurfacesVisibilityStyle } from "./visibility";
@@ -9,54 +8,11 @@ async function setModelSurfacesDefaultStyle(_id) {
 }
 
 export function useModelSurfacesStyle() {
-  const dataStore = useDataStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
   const modelSurfacesVisibilityStyle = useModelSurfacesVisibilityStyle();
   const modelSurfacesColorStyle = useModelSurfacesColorStyle();
 
-  async function applyModelSurfacesStyle(id) {
-    const surface_ids = await dataStore.getSurfacesGeodeIds(id);
-    if (surface_ids.length === 0) {
-      return;
-    }
-
-    const visibilityGroups = {};
-    const colorGroups = {};
-
-    for (const surface_id of surface_ids) {
-      const style = modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id);
-
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
-      }
-      visibilityGroups[vKey].push(surface_id);
-
-      const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, ids: [] };
-      }
-      colorGroups[cKey].ids.push(surface_id);
-    }
-
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelSurfacesVisibilityStyle.setModelSurfacesVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    for (const { color_mode, color, ids } of Object.values(colorGroups)) {
-      promises.push(modelSurfacesColorStyle.setModelSurfacesColor(id, ids, color, color_mode));
-    }
-
-    return Promise.all(promises);
-  }
-
   return {
-    applyModelSurfacesStyle,
     setModelSurfacesDefaultStyle,
     ...modelSurfacesCommonStyle,
     ...modelSurfacesVisibilityStyle,
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
index f1720a9b..0fea3ebf 100644
--- a/internal/stores/data_style/model/surfaces/visibility.js
+++ b/internal/stores/data_style/model/surfaces/visibility.js
@@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelSurfacesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,29 +14,26 @@ export function useModelSurfacesVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+  const dataStyleState = useDataStyleState();
+
   function modelSurfaceVisibility(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
   }
-  function setModelSurfacesVisibility(id, surface_ids, visibility) {
-    if (!surface_ids || surface_ids.length === 0) {
-      return Promise.resolve();
-    }
 
-    return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
-      if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { visibility });
-      }
-      return viewerStore.request(
-        model_surfaces_schemas.visibility,
-        { id, block_ids: surface_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
-              visibility,
-            }),
-        },
-      );
-    });
+  function setModelSurfacesVisibility(id, surface_ids, visibility) {
+    return dataStyleState
+      .setModelTypeVisibility(id, surface_ids, visibility, model_surfaces_schemas.visibility, {
+        dataStore,
+        viewerStore,
+      })
+      .then((res) => {
+        if (!res) {
+          return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
+            visibility,
+          });
+        }
+        return res;
+      });
   }
 
   return {
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
new file mode 100644
index 00000000..b889519d
--- /dev/null
+++ b/internal/stores/data_style/model/visibility.js
@@ -0,0 +1,104 @@
+import { MESH_TYPES } from "./constants";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useModelBlocksStyle } from "./blocks";
+import { useModelCornersStyle } from "./corners";
+import { useModelLinesStyle } from "./lines";
+import { useModelSurfacesStyle } from "./surfaces";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
+
+async function getModelComponentsMap(modelId, dataStore) {
+  const results = await Promise.all(
+    MESH_TYPES.map(async (type) => {
+      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      return geodeIds.map((geode_id) => ({ geode_id, type }));
+    }),
+  );
+  const allComponents = results.flat();
+  return {
+    allComponents,
+    componentsMap: Object.fromEntries(
+      allComponents.map((component) => [component.geode_id, component]),
+    ),
+  };
+}
+
+async function dispatchToComponentTypes(
+  modelId,
+  componentIds,
+  action,
+  { dataStore, stores },
+  ...args
+) {
+  const { componentsMap } = await getModelComponentsMap(modelId, dataStore);
+
+  return Promise.all(
+    MESH_TYPES.map((type) => {
+      const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
+      if (idsForType.length === 0) {
+        return undefined;
+      }
+      const handlerName = `setModel${type}s${action}`;
+      return stores[type][handlerName](modelId, idsForType, ...args);
+    }),
+  );
+}
+
+function useModelVisibilityStyle() {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const hybridViewerStore = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+
+  const stores = {
+    Corner: useModelCornersStyle(),
+    Line: useModelLinesStyle(),
+    Surface: useModelSurfacesStyle(),
+    Block: useModelBlocksStyle(),
+  };
+
+  function modelVisibility(modelId) {
+    return dataStyleState.getStyle(modelId).visibility;
+  }
+
+  function setModelVisibility(modelId, visibility) {
+    return viewerStore.request(
+      model_schemas.visibility,
+      { id: modelId, visibility },
+      {
+        response_function: async () => {
+          await hybridViewerStore.setVisibility(modelId, visibility);
+          await dataStyleState.mutateStyle(modelId, { visibility });
+          return { id: modelId, visibility };
+        },
+      },
+    );
+  }
+
+  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+    viewerStore.start_request();
+    try {
+      return await dispatchToComponentTypes(
+        modelId,
+        componentIds,
+        "Visibility",
+        { dataStore, stores, viewerStore },
+        visibility,
+      );
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
+  return {
+    modelVisibility,
+    setModelVisibility,
+    setModelComponentsVisibility,
+  };
+}
+
+export { getModelComponentsMap, dispatchToComponentTypes, useModelVisibilityStyle };
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index 4c538a75..877e14fb 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -63,10 +63,20 @@ export function useDataStyleState() {
     return { ...toRaw(styles.value[id]) };
   }
 
+  async function genericMutate(tableName, key, values) {
+    const table = database[tableName];
+    const entry = (await table.get(key)) || (Array.isArray(key) ? {} : { id: key });
+    if (tableName === "model_component_datastyle" && !entry.id_model) {
+      [entry.id_model, entry.id_component] = key;
+    } else if (tableName === "model_component_type_datastyle" && !entry.id_model) {
+      [entry.id_model, entry.type] = key;
+    }
+    merge(entry, values);
+    return table.put(structuredClone(toRaw(entry)));
+  }
+
   function mutateStyle(id, values) {
-    const style = getStyle(id);
-    merge(style, values);
-    return database.data_style.put(structuredClone({ id, ...toRaw(style) }));
+    return genericMutate("data_style", id, values);
   }
 
   function getComponentStyle(id_model, id_component) {
@@ -75,11 +85,7 @@ export function useDataStyleState() {
   }
 
   function mutateComponentStyle(id_model, id_component, values) {
-    return database.model_component_datastyle.get([id_model, id_component]).then((style) => {
-      const component_style = style || { id_model, id_component };
-      merge(component_style, values);
-      return database.model_component_datastyle.put(structuredClone(toRaw(component_style)));
-    });
+    return genericMutate("model_component_datastyle", [id_model, id_component], values);
   }
 
   function getModelComponentTypeStyle(id_model, type) {
@@ -88,14 +94,9 @@ export function useDataStyleState() {
   }
 
   function mutateModelComponentTypeStyle(id_model, type, values) {
-    return database.transaction("rw", database.model_component_type_datastyle, async () => {
-      const style = await database.model_component_type_datastyle.get([id_model, type]);
-      const model_component_type_style = style || { id_model, type };
-      merge(model_component_type_style, values);
-      return database.model_component_type_datastyle.put(
-        structuredClone(toRaw(model_component_type_style)),
-      );
-    });
+    return database.transaction("rw", database.model_component_type_datastyle, () =>
+      genericMutate("model_component_type_datastyle", [id_model, type], values),
+    );
   }
 
   function mutateComponentStyles(id_model, id_components, values) {
@@ -120,6 +121,80 @@ export function useDataStyleState() {
     });
   }
 
+  function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const component_ids = new Set(component_updates.map((update) => update.id_component));
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .and((style) => component_ids.has(style.id_component))
+        .toArray();
+      const style_map = Object.fromEntries(all_styles.map((style) => [style.id_component, style]));
+      const updates = component_updates.map(({ id_component, values }) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
+      });
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
+  }
+
+  async function setModelTypeColor(
+    id,
+    component_ids,
+    color,
+    color_mode,
+    schema,
+    { dataStore, viewerStore },
+  ) {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    const params = { id, block_ids: viewer_ids, color_mode };
+    if (color_mode === "constant") {
+      params.color = color;
+    }
+
+    const colors = await viewerStore.request(schema, params);
+    if (!colors?.length) {
+      return;
+    }
+
+    return bulkMutateComponentStylesPerComponent(
+      id,
+      colors.map(({ geode_id, color: color_value }) => ({
+        id_component: geode_id,
+        values: { color: color_value },
+      })),
+    );
+  }
+
+  async function setModelTypeVisibility(
+    id,
+    component_ids,
+    visibility,
+    schema,
+    { dataStore, viewerStore },
+  ) {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    await viewerStore.request(schema, { id, block_ids: viewer_ids, visibility });
+    return mutateComponentStyles(id, component_ids, { visibility });
+  }
+
   function clear() {
     return Promise.all([
       database.data_style.clear(),
@@ -136,11 +211,14 @@ export function useDataStyleState() {
     mutateComponentStyle,
     mutateModelComponentTypeStyle,
     mutateComponentStyles,
+    bulkMutateComponentStylesPerComponent,
     styles,
     componentStyles,
     modelComponentTypeStyles,
     objectVisibility,
     selectedObjects,
+    setModelTypeColor,
+    setModelTypeVisibility,
     clear,
   };
 }

From 6fd072a577114a7b27fe0102bd61849bbab255c1 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 14:57:00 +0200
Subject: [PATCH 15/34] refacto

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 136 ++++++++----------
 .../stores/data_style/model/blocks/color.js   |  41 ------
 .../stores/data_style/model/blocks/index.js   |  15 +-
 .../data_style/model/blocks/visibility.js     |  44 ------
 internal/stores/data_style/model/color.js     |  44 +++---
 .../stores/data_style/model/corners/color.js  |  44 ------
 .../stores/data_style/model/corners/index.js  |  15 +-
 .../data_style/model/corners/visibility.js    |  43 ------
 internal/stores/data_style/model/index.js     |   6 +-
 .../stores/data_style/model/lines/color.js    |  38 -----
 .../stores/data_style/model/lines/index.js    |  15 +-
 .../data_style/model/lines/visibility.js      |  43 ------
 .../stores/data_style/model/surfaces/color.js |  41 ------
 .../stores/data_style/model/surfaces/index.js |  15 +-
 .../data_style/model/surfaces/visibility.js   |  43 ------
 .../stores/data_style/model/visibility.js     |  56 +++++---
 16 files changed, 145 insertions(+), 494 deletions(-)
 delete mode 100644 internal/stores/data_style/model/blocks/color.js
 delete mode 100644 internal/stores/data_style/model/blocks/visibility.js
 delete mode 100644 internal/stores/data_style/model/corners/color.js
 delete mode 100644 internal/stores/data_style/model/corners/visibility.js
 delete mode 100644 internal/stores/data_style/model/lines/color.js
 delete mode 100644 internal/stores/data_style/model/lines/visibility.js
 delete mode 100644 internal/stores/data_style/model/surfaces/color.js
 delete mode 100644 internal/stores/data_style/model/surfaces/visibility.js

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index d8bd001c..fef98c12 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -15,9 +15,7 @@ const { itemProps } = defineProps({
 
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-
 const selection = dataStyleStore.visibleMeshComponents(modelId);
-
 const component_type = ref(undefined);
 
 const modelCollapsed = ref(false);
@@ -28,108 +26,86 @@ watchEffect(async () => {
   if (itemProps.meta_data.viewer_type === "model_component_type") {
     component_type.value = itemProps.meta_data.modelComponentType;
   } else if (componentId.value && modelId.value) {
-    const type = await dataStore.meshComponentType(modelId.value, componentId.value);
-    component_type.value = type;
+    component_type.value = await dataStore.meshComponentType(modelId.value, componentId.value);
   } else {
     component_type.value = undefined;
   }
 });
 
-const modelVisibility = computed({
-  get: () => dataStyleStore.modelVisibility(modelId.value),
-  set: async (value) => {
-    await dataStyleStore.setModelVisibility(modelId.value, value);
-    hybridViewerStore.remoteRender();
-  },
-});
+function styleComputed(getter, setter) {
+  return computed({
+    get: getter,
+    set: async (newValue) => {
+      await setter(newValue);
+      hybridViewerStore.remoteRender();
+    },
+  });
+}
 
-const modelComponentTypeVisibility = computed({
-  get: () => selection.value.includes(component_type.value),
-  set: async (value) => {
-    await dataStyleStore.setModelComponentsVisibility(modelId.value, [component_type.value], value);
-    hybridViewerStore.remoteRender();
-  },
-});
+const modelVisibility = styleComputed(
+  () => dataStyleStore.modelVisibility(modelId.value),
+  (isVisible) => dataStyleStore.setModelVisibility(modelId.value, isVisible),
+);
 
-const componentVisibility = computed({
-  get: () => selection.value.includes(componentId.value),
-  set: async (value) => {
-    await dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], value);
-    hybridViewerStore.remoteRender();
-  },
-});
+const modelComponentTypeVisibility = styleComputed(
+  () => selection.value.includes(component_type.value),
+  (isVisible) =>
+    dataStyleStore.setModelComponentTypeVisibility(modelId.value, component_type.value, isVisible),
+);
 
-const componentColor = computed({
-  get: () =>
+const componentVisibility = styleComputed(
+  () => selection.value.includes(componentId.value),
+  (isVisible) => dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], isVisible),
+);
+
+const componentColor = styleComputed(
+  () =>
     componentId.value
       ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
       : undefined,
-  set: async (newValue) => {
-    if (componentId.value) {
-      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
-      hybridViewerStore.remoteRender();
-    }
-  },
-});
+  (color) =>
+    componentId.value &&
+    dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], color),
+);
 
-const modelComponentTypeColor = computed({
-  get: () =>
+const modelComponentTypeColor = styleComputed(
+  () =>
     component_type.value
       ? dataStyleStore.getModelComponentTypeColor(modelId.value, component_type.value)
       : undefined,
-  set: async (newValue) => {
-    if (component_type.value) {
-      await dataStyleStore.setModelComponentTypeColor(
-        modelId.value,
-        component_type.value,
-        newValue,
-      );
-      hybridViewerStore.remoteRender();
-    }
-  },
-});
-
-const colorModes = [
-  { title: "Constant", value: "constant" },
-  { title: "Random", value: "random" },
-];
+  (color) =>
+    component_type.value &&
+    dataStyleStore.setModelComponentTypeColor(modelId.value, component_type.value, color),
+);
 
-const modelComponentTypeColorMode = computed({
-  get: () =>
+const modelComponentTypeColorMode = styleComputed(
+  () =>
     component_type.value
       ? dataStyleStore.getModelComponentTypeColorMode(modelId.value, component_type.value)
       : "constant",
-  set: async (value) => {
-    if (component_type.value) {
-      await dataStyleStore.setModelComponentTypeColorMode(
-        modelId.value,
-        component_type.value,
-        value,
-      );
-      hybridViewerStore.remoteRender();
-    }
-  },
-});
+  (colorMode) =>
+    component_type.value &&
+    dataStyleStore.setModelComponentTypeColorMode(modelId.value, component_type.value, colorMode),
+);
 
-const componentColorMode = computed({
-  get: () =>
+const componentColorMode = styleComputed(
+  () =>
     componentId.value
       ? dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value)
       : "constant",
-  set: async (value) => {
-    if (componentId.value) {
-      await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, value);
-      hybridViewerStore.remoteRender();
-    }
-  },
-});
+  (colorMode) =>
+    componentId.value &&
+    dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, colorMode),
+);
 
-const modelComponentTypeLabel = computed(() => {
-  if (!component_type.value) {
-    return "";
-  }
-  return `${component_type.value}s Options`;
-});
+const colorModes = [
+  { title: "Constant", value: "constant" },
+  { title: "Random", value: "random" },
+];
+
+const modelComponentTypeLabel = computed(() =>
+  component_type.value ? `${component_type.value}s Options` : "",
+);
 </script>
 
 <template>
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
deleted file mode 100644
index 66d34a68..00000000
--- a/internal/stores/data_style/model/blocks/color.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelBlocksCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks;
-
-export function useModelBlocksColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelBlockColor(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
-  }
-
-  function setModelBlocksColor(id, block_ids, color, color_mode = "constant") {
-    return dataStyleState
-      .setModelTypeColor(id, block_ids, color, color_mode, model_blocks_schemas.color, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-            color,
-            color_mode,
-          });
-        }
-        return res;
-      });
-  }
-
-  return { modelBlockColor, setModelBlocksColor };
-}
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 6bba8d8e..39ad4218 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -1,21 +1,16 @@
-// Local imports
-import { useModelBlocksColorStyle } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
-import { useModelBlocksVisibilityStyle } from "./visibility";
+import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
+import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
 
 async function setModelBlocksDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelBlocksStyle() {
-  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
-  const modelBlocksVisibilityStyle = useModelBlocksVisibilityStyle();
-  const modelBlocksColorStyle = useModelBlocksColorStyle();
-
   return {
     setModelBlocksDefaultStyle,
-    ...modelBlocksCommonStyle,
-    ...modelBlocksVisibilityStyle,
-    ...modelBlocksColorStyle,
+    ...useModelBlocksCommonStyle(),
+    ...useModelComponentVisibility("Block"),
+    ...useModelComponentColor("Block"),
   };
 }
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
deleted file mode 100644
index a86230d6..00000000
--- a/internal/stores/data_style/model/blocks/visibility.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelBlocksCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks;
-
-export function useModelBlocksVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelBlockVisibility(id, block_id) {
-    const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
-    return style.visibility ?? true;
-  }
-
-  function setModelBlocksVisibility(id, block_ids, visibility) {
-    return dataStyleState
-      .setModelTypeVisibility(id, block_ids, visibility, model_blocks_schemas.visibility, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-            visibility,
-          });
-        }
-        return res;
-      });
-  }
-
-  return {
-    modelBlockVisibility,
-    setModelBlocksVisibility,
-  };
-}
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 860e25d1..551324f1 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -2,24 +2,16 @@ import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelBlocksStyle } from "./blocks";
-import { useModelCornersStyle } from "./corners";
-import { useModelLinesStyle } from "./lines";
-import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-export function useModelColorStyle() {
+const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
+
+function useModelColorStyle(stores) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const viewerStore = useViewerStore();
 
-  const stores = {
-    Corner: useModelCornersStyle(),
-    Line: useModelLinesStyle(),
-    Surface: useModelSurfacesStyle(),
-    Block: useModelBlocksStyle(),
-  };
-
   function getModelComponentColor(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
@@ -29,8 +21,10 @@ export function useModelColorStyle() {
   }
 
   function getModelComponentTypeColor(modelId, type) {
-    const style = dataStyleState.getModelComponentTypeStyle(modelId, type);
-    return style.color || DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type];
+    return (
+      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
+      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
+    );
   }
 
   function getModelComponentTypeColorMode(modelId, type) {
@@ -67,7 +61,6 @@ export function useModelColorStyle() {
         await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
         return;
       }
-
       await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
     } finally {
       viewerStore.stop_request();
@@ -77,12 +70,10 @@ export function useModelColorStyle() {
   async function setModelComponentColorMode(modelId, componentId, color_mode) {
     viewerStore.start_request();
     try {
+      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
       if (color_mode === "random") {
-        await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
         await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
-        return;
       }
-      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
     } finally {
       viewerStore.stop_request();
     }
@@ -116,3 +107,20 @@ export function useModelColorStyle() {
     setModelComponentsColor,
   };
 }
+
+function useModelComponentColor(type) {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const viewerStore = useViewerStore();
+  const schema = model_schemas[`${type.toLowerCase()}s`].color;
+
+  return {
+    [`setModel${type}sColor`]: (modelId, componentIds, color, color_mode) =>
+      dataStyleState.setModelTypeColor(modelId, componentIds, color, color_mode, schema, {
+        dataStore,
+        viewerStore,
+      }),
+  };
+}
+
+export { useModelColorStyle, useModelComponentColor };
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
deleted file mode 100644
index 58da05dc..00000000
--- a/internal/stores/data_style/model/corners/color.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelCornersCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
-
-export function useModelCornersColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelCornersCommonStyle = useModelCornersCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelCornerColor(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
-  }
-
-  function setModelCornersColor(id, corner_ids, color, color_mode = "constant") {
-    return dataStyleState
-      .setModelTypeColor(id, corner_ids, color, color_mode, model_corners_schemas.color, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
-            color,
-            color_mode,
-          });
-        }
-        return res;
-      });
-  }
-
-  return {
-    modelCornerColor,
-    setModelCornersColor,
-  };
-}
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index e03b5cc0..c21df3c8 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -1,21 +1,16 @@
-// Local imports
-import { useModelCornersColorStyle } from "./color";
+import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
+import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
 import { useModelCornersCommonStyle } from "./common";
-import { useModelCornersVisibilityStyle } from "./visibility";
 
 async function setModelCornersDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelCornersStyle() {
-  const modelCornersCommonStyle = useModelCornersCommonStyle();
-  const modelCornersVisibilityStyle = useModelCornersVisibilityStyle();
-  const modelCornersColorStyle = useModelCornersColorStyle();
-
   return {
     setModelCornersDefaultStyle,
-    ...modelCornersCommonStyle,
-    ...modelCornersVisibilityStyle,
-    ...modelCornersColorStyle,
+    ...useModelCornersCommonStyle(),
+    ...useModelComponentVisibility("Corner"),
+    ...useModelComponentColor("Corner"),
   };
 }
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
deleted file mode 100644
index f21399b8..00000000
--- a/internal/stores/data_style/model/corners/visibility.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelCornersCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
-
-export function useModelCornersVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelCornersCommonStyle = useModelCornersCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelCornerVisibility(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
-  }
-
-  function setModelCornersVisibility(id, corner_ids, visibility) {
-    return dataStyleState
-      .setModelTypeVisibility(id, corner_ids, visibility, model_corners_schemas.visibility, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, {
-            visibility,
-          });
-        }
-        return res;
-      });
-  }
-
-  return {
-    modelCornerVisibility,
-    setModelCornersVisibility,
-  };
-}
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 83752060..f6f7930a 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -61,9 +61,6 @@ export function useModelStyle() {
   const modelSurfacesStyleStore = useModelSurfacesStyle();
   const viewerStore = useViewerStore();
 
-  const modelColorStyle = useModelColorStyle();
-  const modelVisibilityStyle = useModelVisibilityStyle();
-
   const stores = {
     Corner: modelCornersStyleStore,
     Line: modelLinesStyleStore,
@@ -71,6 +68,9 @@ export function useModelStyle() {
     Block: modelBlocksStyleStore,
   };
 
+  const modelColorStyle = useModelColorStyle(stores);
+  const modelVisibilityStyle = useModelVisibilityStyle(stores);
+
   function visibleMeshComponents(id_ref) {
     return useModelSelection(id_ref, dataStyleState);
   }
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
deleted file mode 100644
index 8387f11e..00000000
--- a/internal/stores/data_style/model/lines/color.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelLinesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines;
-
-export function useModelLinesColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelLinesCommonStyle = useModelLinesCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelLineColor(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
-  }
-
-  function setModelLinesColor(id, line_ids, color, color_mode = "constant") {
-    return dataStyleState
-      .setModelTypeColor(id, line_ids, color, color_mode, model_lines_schemas.color, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, { color, color_mode });
-        }
-        return res;
-      });
-  }
-
-  return { modelLineColor, setModelLinesColor };
-}
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 7aa10d4d..cc8f8e9d 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -1,21 +1,16 @@
-// Local imports
-import { useModelLinesColorStyle } from "./color";
+import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
+import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
 import { useModelLinesCommonStyle } from "./common";
-import { useModelLinesVisibilityStyle } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelLinesStyle() {
-  const modelLinesCommonStyle = useModelLinesCommonStyle();
-  const modelLinesVisibilityStyle = useModelLinesVisibilityStyle();
-  const modelLinesColorStyle = useModelLinesColorStyle();
-
   return {
     setModelLinesDefaultStyle,
-    ...modelLinesCommonStyle,
-    ...modelLinesVisibilityStyle,
-    ...modelLinesColorStyle,
+    ...useModelLinesCommonStyle(),
+    ...useModelComponentVisibility("Line"),
+    ...useModelComponentColor("Line"),
   };
 }
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
deleted file mode 100644
index d93a142e..00000000
--- a/internal/stores/data_style/model/lines/visibility.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelLinesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines;
-
-export function useModelLinesVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelLinesCommonStyle = useModelLinesCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelLineVisibility(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
-  }
-
-  function setModelLinesVisibility(id, line_ids, visibility) {
-    return dataStyleState
-      .setModelTypeVisibility(id, line_ids, visibility, model_lines_schemas.visibility, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-            visibility,
-          });
-        }
-        return res;
-      });
-  }
-
-  return {
-    modelLineVisibility,
-    setModelLinesVisibility,
-  };
-}
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
deleted file mode 100644
index 69ed5c62..00000000
--- a/internal/stores/data_style/model/surfaces/color.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelSurfacesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces;
-
-export function useModelSurfacesColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelSurfaceColor(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
-  }
-
-  function setModelSurfacesColor(id, surface_ids, color, color_mode = "constant") {
-    return dataStyleState
-      .setModelTypeColor(id, surface_ids, color, color_mode, model_surfaces_schemas.color, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
-            color,
-            color_mode,
-          });
-        }
-        return res;
-      });
-  }
-
-  return { modelSurfaceColor, setModelSurfacesColor };
-}
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 407ff0ef..f66a1632 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -1,21 +1,16 @@
-// Local imports
-import { useModelSurfacesColorStyle } from "./color";
+import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
+import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
 import { useModelSurfacesCommonStyle } from "./common";
-import { useModelSurfacesVisibilityStyle } from "./visibility";
 
 async function setModelSurfacesDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelSurfacesStyle() {
-  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
-  const modelSurfacesVisibilityStyle = useModelSurfacesVisibilityStyle();
-  const modelSurfacesColorStyle = useModelSurfacesColorStyle();
-
   return {
     setModelSurfacesDefaultStyle,
-    ...modelSurfacesCommonStyle,
-    ...modelSurfacesVisibilityStyle,
-    ...modelSurfacesColorStyle,
+    ...useModelSurfacesCommonStyle(),
+    ...useModelComponentVisibility("Surface"),
+    ...useModelComponentColor("Surface"),
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
deleted file mode 100644
index 0fea3ebf..00000000
--- a/internal/stores/data_style/model/surfaces/visibility.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useModelSurfacesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
-// Local constants
-const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces;
-
-export function useModelSurfacesVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
-  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
-  const dataStyleState = useDataStyleState();
-
-  function modelSurfaceVisibility(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
-  }
-
-  function setModelSurfacesVisibility(id, surface_ids, visibility) {
-    return dataStyleState
-      .setModelTypeVisibility(id, surface_ids, visibility, model_surfaces_schemas.visibility, {
-        dataStore,
-        viewerStore,
-      })
-      .then((res) => {
-        if (!res) {
-          return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
-            visibility,
-          });
-        }
-        return res;
-      });
-  }
-
-  return {
-    modelSurfaceVisibility,
-    setModelSurfacesVisibility,
-  };
-}
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index b889519d..4235f176 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -2,10 +2,6 @@ import { MESH_TYPES } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useModelBlocksStyle } from "./blocks";
-import { useModelCornersStyle } from "./corners";
-import { useModelLinesStyle } from "./lines";
-import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -35,32 +31,23 @@ async function dispatchToComponentTypes(
   ...args
 ) {
   const { componentsMap } = await getModelComponentsMap(modelId, dataStore);
-
   return Promise.all(
     MESH_TYPES.map((type) => {
       const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
       if (idsForType.length === 0) {
         return undefined;
       }
-      const handlerName = `setModel${type}s${action}`;
-      return stores[type][handlerName](modelId, idsForType, ...args);
+      return stores[type][`setModel${type}s${action}`](modelId, idsForType, ...args);
     }),
   );
 }
 
-function useModelVisibilityStyle() {
+function useModelVisibilityStyle(stores) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-  const stores = {
-    Corner: useModelCornersStyle(),
-    Line: useModelLinesStyle(),
-    Surface: useModelSurfacesStyle(),
-    Block: useModelBlocksStyle(),
-  };
-
   function modelVisibility(modelId) {
     return dataStyleState.getStyle(modelId).visibility;
   }
@@ -94,11 +81,48 @@ function useModelVisibilityStyle() {
     }
   }
 
+  async function setModelComponentTypeVisibility(modelId, type, visibility) {
+    viewerStore.start_request();
+    try {
+      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+        visibility,
+      });
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      if (idsForType.length === 0) {
+        return;
+      }
+      await setModelComponentsVisibility(modelId, idsForType, visibility);
+    } finally {
+      viewerStore.stop_request();
+    }
+  }
+
   return {
     modelVisibility,
     setModelVisibility,
     setModelComponentsVisibility,
+    setModelComponentTypeVisibility,
+  };
+}
+
+function useModelComponentVisibility(type) {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const viewerStore = useViewerStore();
+  const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
+
+  return {
+    [`setModel${type}sVisibility`]: (modelId, componentIds, visibility) =>
+      dataStyleState.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
+        dataStore,
+        viewerStore,
+      }),
   };
 }
 
-export { getModelComponentsMap, dispatchToComponentTypes, useModelVisibilityStyle };
+export {
+  getModelComponentsMap,
+  dispatchToComponentTypes,
+  useModelVisibilityStyle,
+  useModelComponentVisibility,
+};

From 4855444d43ccea7eedbc2c79add5a349d7e9b517 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 16 Apr 2026 12:57:45 +0000
Subject: [PATCH 16/34] Apply prepare changes

---
 app/components/Viewer/Generic/Model/ModelStyleCard.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index fef98c12..18d576f6 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -55,7 +55,8 @@ const modelComponentTypeVisibility = styleComputed(
 
 const componentVisibility = styleComputed(
   () => selection.value.includes(componentId.value),
-  (isVisible) => dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], isVisible),
+  (isVisible) =>
+    dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], isVisible),
 );
 
 const componentColor = styleComputed(

From 7bb38a88ff0d9b492680e59a218a50f2a00a4d22 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 15:59:42 +0200
Subject: [PATCH 17/34] trigger


From 5261593646c3a87fd0cc1cdc021bd318fffbf2b7 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 16:24:27 +0200
Subject: [PATCH 18/34] test

---
 .../stores/data_style/model/blocks/common.js  | 10 ++++-
 internal/stores/data_style/model/color.js     |  2 +-
 .../stores/data_style/model/corners/common.js | 10 +++++
 internal/stores/data_style/model/index.js     | 40 +++++++++++++++++++
 .../stores/data_style/model/lines/common.js   | 10 +++++
 .../data_style/model/surfaces/common.js       | 10 +++++
 internal/stores/data_style/state.js           |  2 +-
 .../data_style/model/blocks.nuxt.test.js      |  8 +---
 .../data_style/model/corners.nuxt.test.js     |  8 +---
 .../data_style/model/lines.nuxt.test.js       |  8 +---
 .../data_style/model/surfaces.nuxt.test.js    |  8 +---
 11 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index a1e8d9a5..b223c01a 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -18,13 +18,19 @@ export function useModelBlocksCommonStyle() {
     return dataStyleState.mutateComponentStyles(id, block_ids, values);
   }
 
-  function mutateModelBlockStyle(id, block_id, values) {
-    return dataStyleState.mutateComponentStyle(id, block_id, values);
+  function modelBlockVisibility(id, block_id) {
+    return modelBlockStyle(id, block_id).visibility;
+  }
+
+  function modelBlockColor(id, block_id) {
+    return modelBlockStyle(id, block_id).color;
   }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
+    modelBlockVisibility,
+    modelBlockColor,
     mutateModelBlocksStyle,
     mutateModelBlockStyle,
   };
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 551324f1..eab819bb 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -115,7 +115,7 @@ function useModelComponentColor(type) {
   const schema = model_schemas[`${type.toLowerCase()}s`].color;
 
   return {
-    [`setModel${type}sColor`]: (modelId, componentIds, color, color_mode) =>
+    [`setModel${type}sColor`]: (modelId, componentIds, color, color_mode = "constant") =>
       dataStyleState.setModelTypeColor(modelId, componentIds, color, color_mode, schema, {
         dataStore,
         viewerStore,
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index 7357fc5f..b5f5d116 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -22,9 +22,19 @@ export function useModelCornersCommonStyle() {
     return dataStyleState.mutateComponentStyle(id, corner_id, values);
   }
 
+  function modelCornerVisibility(id, corner_id) {
+    return modelCornerStyle(id, corner_id).visibility;
+  }
+
+  function modelCornerColor(id, corner_id) {
+    return modelCornerStyle(id, corner_id).color;
+  }
+
   return {
     modelCornersStyle,
     modelCornerStyle,
+    modelCornerVisibility,
+    modelCornerColor,
     mutateModelCornersStyle,
     mutateModelCornerStyle,
   };
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index f6f7930a..04187533 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -111,9 +111,49 @@ export function useModelStyle() {
     }
   }
 
+  function applyModelCornersStyle(modelId) {
+    return applyComponentTypeStyle(modelId, {
+      getIds: dataStore.getCornersGeodeIds,
+      getStyle: modelCornersStyleStore.modelCornerStyle,
+      setVisibility: modelCornersStyleStore.setModelCornersVisibility,
+      setColor: modelCornersStyleStore.setModelCornersColor,
+    });
+  }
+
+  function applyModelLinesStyle(modelId) {
+    return applyComponentTypeStyle(modelId, {
+      getIds: dataStore.getLinesGeodeIds,
+      getStyle: modelLinesStyleStore.modelLineStyle,
+      setVisibility: modelLinesStyleStore.setModelLinesVisibility,
+      setColor: modelLinesStyleStore.setModelLinesColor,
+    });
+  }
+
+  function applyModelSurfacesStyle(modelId) {
+    return applyComponentTypeStyle(modelId, {
+      getIds: dataStore.getSurfacesGeodeIds,
+      getStyle: modelSurfacesStyleStore.modelSurfaceStyle,
+      setVisibility: modelSurfacesStyleStore.setModelSurfacesVisibility,
+      setColor: modelSurfacesStyleStore.setModelSurfacesColor,
+    });
+  }
+
+  function applyModelBlocksStyle(modelId) {
+    return applyComponentTypeStyle(modelId, {
+      getIds: dataStore.getBlocksGeodeIds,
+      getStyle: modelBlocksStyleStore.modelBlockStyle,
+      setVisibility: modelBlocksStyleStore.setModelBlocksVisibility,
+      setColor: modelBlocksStyleStore.setModelBlocksColor,
+    });
+  }
+
   return {
     visibleMeshComponents,
     applyModelStyle,
+    applyModelCornersStyle,
+    applyModelLinesStyle,
+    applyModelSurfacesStyle,
+    applyModelBlocksStyle,
     setModelMeshComponentsDefaultStyle,
     ...modelColorStyle,
     ...modelVisibilityStyle,
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index d64fd062..d58f3824 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -22,9 +22,19 @@ export function useModelLinesCommonStyle() {
     return dataStyleState.mutateComponentStyle(id, line_id, values);
   }
 
+  function modelLineVisibility(id, line_id) {
+    return modelLineStyle(id, line_id).visibility;
+  }
+
+  function modelLineColor(id, line_id) {
+    return modelLineStyle(id, line_id).color;
+  }
+
   return {
     modelLinesStyle,
     modelLineStyle,
+    modelLineVisibility,
+    modelLineColor,
     mutateModelLinesStyle,
     mutateModelLineStyle,
   };
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index 15cb84da..aa0679a7 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -22,9 +22,19 @@ export function useModelSurfacesCommonStyle() {
     return dataStyleState.mutateComponentStyle(id, surface_id, values);
   }
 
+  function modelSurfaceVisibility(id, surface_id) {
+    return modelSurfaceStyle(id, surface_id).visibility;
+  }
+
+  function modelSurfaceColor(id, surface_id) {
+    return modelSurfaceStyle(id, surface_id).color;
+  }
+
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
+    modelSurfaceVisibility,
+    modelSurfaceColor,
     mutateModelSurfacesStyle,
     mutateModelSurfaceStyle,
   };
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index 877e14fb..a203d7e2 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -143,9 +143,9 @@ export function useDataStyleState() {
     id,
     component_ids,
     color,
-    color_mode,
     schema,
     { dataStore, viewerStore },
+    color_mode = "constant",
   ) {
     if (!component_ids?.length) {
       return;
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index c1bde1d5..35fd28c0 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -54,9 +54,6 @@ describe("Model blocks", () => {
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.visibility,
         { id, block_ids: block_viewer_ids, visibility },
-        {
-          response_function: expect.any(Function),
-        },
       );
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockVisibility(id, block_id)).toBe(visibility);
@@ -78,10 +75,7 @@ describe("Model blocks", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.color,
-        { id, block_ids: block_viewer_ids, color },
-        {
-          response_function: expect.any(Function),
-        },
+        { id, block_ids: block_viewer_ids, color, color_mode: "constant" },
       );
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockColor(id, block_id)).toStrictEqual(color);
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index d43b54a6..ae1206c0 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -54,9 +54,6 @@ describe("Model corners", () => {
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.visibility,
         { id, block_ids: corner_viewer_ids, visibility },
-        {
-          response_function: expect.any(Function),
-        },
       );
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerVisibility(id, corner_id)).toBe(visibility);
@@ -81,10 +78,7 @@ describe("Model corners", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.color,
-        { id, block_ids: corner_viewer_ids, color },
-        {
-          response_function: expect.any(Function),
-        },
+        { id, block_ids: corner_viewer_ids, color, color_mode: "constant" },
       );
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerColor(id, corner_id)).toStrictEqual(color);
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index 2bcbbd89..9dd0e237 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -54,9 +54,6 @@ describe("Model lines", () => {
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.visibility,
         { id, block_ids: lines_viewer_ids, visibility },
-        {
-          response_function: expect.any(Function),
-        },
       );
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineVisibility(id, line_id)).toBe(visibility);
@@ -81,10 +78,7 @@ describe("Model lines", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.color,
-        { id, block_ids: lines_viewer_ids, color },
-        {
-          response_function: expect.any(Function),
-        },
+        { id, block_ids: lines_viewer_ids, color, color_mode: "constant" },
       );
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineColor(id, line_id)).toStrictEqual(color);
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index af36e575..7e0d61ee 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -53,9 +53,6 @@ describe("model surfaces", () => {
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.visibility,
         { id, block_ids: surface_viewer_ids, visibility },
-        {
-          response_function: expect.any(Function),
-        },
       );
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceVisibility(id, surface_id)).toBe(visibility);
@@ -80,10 +77,7 @@ describe("model surfaces", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.color,
-        { id, block_ids: surface_viewer_ids, color },
-        {
-          response_function: expect.any(Function),
-        },
+        { id, block_ids: surface_viewer_ids, color, color_mode: "constant" },
       );
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(color);

From edd52fdd14eb7d586319e00e1b1147c5d6f57616 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 16 Apr 2026 14:25:16 +0000
Subject: [PATCH 19/34] Apply prepare changes

---
 .../data_style/model/blocks.nuxt.test.js      | 19 +++++++++++--------
 .../data_style/model/corners.nuxt.test.js     | 19 +++++++++++--------
 .../data_style/model/lines.nuxt.test.js       | 19 +++++++++++--------
 .../data_style/model/surfaces.nuxt.test.js    | 19 +++++++++++--------
 4 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index 35fd28c0..053f0a66 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -51,10 +51,11 @@ describe("Model blocks", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_blocks_schemas.visibility,
-        { id, block_ids: block_viewer_ids, visibility },
-      );
+      expect(spy).toHaveBeenCalledWith(model_blocks_schemas.visibility, {
+        id,
+        block_ids: block_viewer_ids,
+        visibility,
+      });
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockVisibility(id, block_id)).toBe(visibility);
       }
@@ -73,10 +74,12 @@ describe("Model blocks", () => {
       const spy = vi.spyOn(viewerStore, "request");
       await dataStyleStore.setModelBlocksColor(id, block_ids, color);
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_blocks_schemas.color,
-        { id, block_ids: block_viewer_ids, color, color_mode: "constant" },
-      );
+      expect(spy).toHaveBeenCalledWith(model_blocks_schemas.color, {
+        id,
+        block_ids: block_viewer_ids,
+        color,
+        color_mode: "constant",
+      });
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockColor(id, block_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index ae1206c0..5d2b0d4b 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -51,10 +51,11 @@ describe("Model corners", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_corners_schemas.visibility,
-        { id, block_ids: corner_viewer_ids, visibility },
-      );
+      expect(spy).toHaveBeenCalledWith(model_corners_schemas.visibility, {
+        id,
+        block_ids: corner_viewer_ids,
+        visibility,
+      });
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerVisibility(id, corner_id)).toBe(visibility);
       }
@@ -76,10 +77,12 @@ describe("Model corners", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_corners_schemas.color,
-        { id, block_ids: corner_viewer_ids, color, color_mode: "constant" },
-      );
+      expect(spy).toHaveBeenCalledWith(model_corners_schemas.color, {
+        id,
+        block_ids: corner_viewer_ids,
+        color,
+        color_mode: "constant",
+      });
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerColor(id, corner_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index 9dd0e237..e2bc2aee 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -51,10 +51,11 @@ describe("Model lines", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_lines_schemas.visibility,
-        { id, block_ids: lines_viewer_ids, visibility },
-      );
+      expect(spy).toHaveBeenCalledWith(model_lines_schemas.visibility, {
+        id,
+        block_ids: lines_viewer_ids,
+        visibility,
+      });
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineVisibility(id, line_id)).toBe(visibility);
       }
@@ -76,10 +77,12 @@ describe("Model lines", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_lines_schemas.color,
-        { id, block_ids: lines_viewer_ids, color, color_mode: "constant" },
-      );
+      expect(spy).toHaveBeenCalledWith(model_lines_schemas.color, {
+        id,
+        block_ids: lines_viewer_ids,
+        color,
+        color_mode: "constant",
+      });
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineColor(id, line_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index 7e0d61ee..d1ed49d9 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -50,10 +50,11 @@ describe("model surfaces", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_surfaces_schemas.visibility,
-        { id, block_ids: surface_viewer_ids, visibility },
-      );
+      expect(spy).toHaveBeenCalledWith(model_surfaces_schemas.visibility, {
+        id,
+        block_ids: surface_viewer_ids,
+        visibility,
+      });
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceVisibility(id, surface_id)).toBe(visibility);
       }
@@ -75,10 +76,12 @@ describe("model surfaces", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(
-        model_surfaces_schemas.color,
-        { id, block_ids: surface_viewer_ids, color, color_mode: "constant" },
-      );
+      expect(spy).toHaveBeenCalledWith(model_surfaces_schemas.color, {
+        id,
+        block_ids: surface_viewer_ids,
+        color,
+        color_mode: "constant",
+      });
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(color);
       }

From e5557962bb19b0e77c6d22431b8baf5a0f1fd8c3 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 16:33:13 +0200
Subject: [PATCH 20/34] common

---
 internal/stores/data_style/model/blocks/common.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index b223c01a..9a4b13ac 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -18,6 +18,10 @@ export function useModelBlocksCommonStyle() {
     return dataStyleState.mutateComponentStyles(id, block_ids, values);
   }
 
+  function mutateModelBlockStyle(id, block_id, values) {
+    return dataStyleState.mutateComponentStyle(id, block_id, values);
+  }
+
   function modelBlockVisibility(id, block_id) {
     return modelBlockStyle(id, block_id).visibility;
   }

From 46e8bb494475587d4e46ecc71791d280c5aa5a36 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 16:45:03 +0200
Subject: [PATCH 21/34] color

---
 internal/stores/data_style/model/color.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index eab819bb..ce9d35cb 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -116,10 +116,17 @@ function useModelComponentColor(type) {
 
   return {
     [`setModel${type}sColor`]: (modelId, componentIds, color, color_mode = "constant") =>
-      dataStyleState.setModelTypeColor(modelId, componentIds, color, color_mode, schema, {
-        dataStore,
-        viewerStore,
-      }),
+      dataStyleState.setModelTypeColor(
+        modelId,
+        componentIds,
+        color,
+        schema,
+        {
+          dataStore,
+          viewerStore,
+        },
+        color_mode,
+      ),
   };
 }
 

From 518fb4e8badb68469334e827dd205cc44a31fc10 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 16 Apr 2026 23:12:32 +0200
Subject: [PATCH 22/34] mutateStyle

---
 internal/stores/data_style/state.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index a203d7e2..2358e1cb 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -76,7 +76,9 @@ export function useDataStyleState() {
   }
 
   function mutateStyle(id, values) {
-    return genericMutate("data_style", id, values);
+    const style = getStyle(id);
+    merge(style, values);
+    return database.data_style.put(structuredClone({ id, ...toRaw(style) }));
   }
 
   function getComponentStyle(id_model, id_component) {

From e6eda860788007b84aa1c0d7494d41d10d3cb1fd Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 00:04:02 +0200
Subject: [PATCH 23/34] visibility fixed

---
 app/stores/data_style.js                      |  2 +-
 internal/stores/data_style/model/index.js     |  9 +++---
 internal/stores/data_style/model/selection.js | 21 +++++++++-----
 .../stores/data_style/model/visibility.js     | 29 ++++++++++++++-----
 4 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 0364bbbd..da805e20 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -74,7 +74,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles);
+    const ids = Object.keys(dataStyleState.styles.value);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
       const viewerType = meta.viewer_type;
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 04187533..f942cc5b 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,4 +1,4 @@
-import { MESH_TYPES } from "./constants";
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelBlocksStyle } from "./blocks";
@@ -50,7 +50,7 @@ async function applyComponentTypeStyle(modelId, { getIds, getStyle, setVisibilit
   return Promise.all(promises);
 }
 
-export function useModelStyle() {
+function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const modelCornersStyleStore = useModelCornersStyle();
@@ -128,7 +128,6 @@ export function useModelStyle() {
       setColor: modelLinesStyleStore.setModelLinesColor,
     });
   }
-
   function applyModelSurfacesStyle(modelId) {
     return applyComponentTypeStyle(modelId, {
       getIds: dataStore.getSurfacesGeodeIds,
@@ -137,7 +136,6 @@ export function useModelStyle() {
       setColor: modelSurfacesStyleStore.setModelSurfacesColor,
     });
   }
-
   function applyModelBlocksStyle(modelId) {
     return applyComponentTypeStyle(modelId, {
       getIds: dataStore.getBlocksGeodeIds,
@@ -146,7 +144,6 @@ export function useModelStyle() {
       setColor: modelBlocksStyleStore.setModelBlocksColor,
     });
   }
-
   return {
     visibleMeshComponents,
     applyModelStyle,
@@ -165,3 +162,5 @@ export function useModelStyle() {
     ...modelSurfacesStyleStore,
   };
 }
+
+export { MESH_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, useModelStyle };
diff --git a/internal/stores/data_style/model/selection.js b/internal/stores/data_style/model/selection.js
index 527359e0..caed076a 100644
--- a/internal/stores/data_style/model/selection.js
+++ b/internal/stores/data_style/model/selection.js
@@ -2,7 +2,7 @@ import { MESH_TYPES } from "./constants";
 import { database } from "@ogw_internal/database/database";
 import { liveQuery } from "dexie";
 
-function buildSelection(modelId, components, stylesMap, dataStyleState) {
+function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyleState) {
   const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
   for (const component of components) {
     if (componentsByType[component.type]) {
@@ -19,7 +19,8 @@ function buildSelection(modelId, components, stylesMap, dataStyleState) {
     }
 
     const typeKey = `${type.toLowerCase()}s`;
-    const defaultVisibility = groupStyles[typeKey]?.visibility ?? true;
+    const typeStyle = typeStylesMap[type];
+    const defaultVisibility = typeStyle?.visibility ?? groupStyles[typeKey]?.visibility ?? true;
 
     let allVisible = true;
     for (const component of typeComponents) {
@@ -47,18 +48,22 @@ function useModelSelection(id_ref, dataStyleState) {
         return;
       }
       const observable = liveQuery(async () => {
-        const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+        const [allComponents, componentStyles, typeStyles] = await Promise.all([
+          database.model_components.where("id").equals(modelId).toArray(),
+          database.model_component_datastyle.where("id_model").equals(modelId).toArray(),
+          database.model_component_type_datastyle.where("id_model").equals(modelId).toArray(),
+        ]);
+
         if (allComponents.length === 0) {
           return [];
         }
-        const componentStyles = await database.model_component_datastyle
-          .where("id_model")
-          .equals(modelId)
-          .toArray();
+
         const stylesMap = Object.fromEntries(
           componentStyles.map((style) => [style.id_component, style]),
         );
-        return buildSelection(modelId, allComponents, stylesMap, dataStyleState);
+        const typeStylesMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
+
+        return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
       });
 
       const subscription = observable.subscribe({
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 4235f176..78abc91d 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -1,4 +1,4 @@
-import { MESH_TYPES } from "./constants";
+import { MESH_TYPES } from "@ogw_internal/stores/data_style/model";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -69,13 +69,26 @@ function useModelVisibilityStyle(stores) {
   async function setModelComponentsVisibility(modelId, componentIds, visibility) {
     viewerStore.start_request();
     try {
-      return await dispatchToComponentTypes(
-        modelId,
-        componentIds,
-        "Visibility",
-        { dataStore, stores, viewerStore },
-        visibility,
-      );
+      const typeIds = componentIds.filter((id) => MESH_TYPES.includes(id));
+      const individualIds = componentIds.filter((id) => !MESH_TYPES.includes(id));
+
+      const promises = [];
+      for (const typeId of typeIds) {
+        promises.push(setModelComponentTypeVisibility(modelId, typeId, visibility));
+      }
+
+      if (individualIds.length > 0) {
+        promises.push(
+          dispatchToComponentTypes(
+            modelId,
+            individualIds,
+            "Visibility",
+            { dataStore, stores, viewerStore },
+            visibility,
+          ),
+        );
+      }
+      return await Promise.all(promises);
     } finally {
       viewerStore.stop_request();
     }

From 22e5515ffd8971ffcb1e02b5a287d1260b2afb23 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 10:55:41 +0200
Subject: [PATCH 24/34] refacto

---
 app/utils/local/scripts.js                    |  27 +++-
 .../stores/data_style/model/blocks/color.js   |  29 ++++
 .../stores/data_style/model/blocks/common.js  |   6 +-
 .../stores/data_style/model/blocks/index.js   |  55 +++++++-
 .../data_style/model/blocks/visibility.js     |  21 +++
 internal/stores/data_style/model/color.js     |  39 ++----
 internal/stores/data_style/model/common.js    | 127 ++++++++++++++++++
 .../stores/data_style/model/corners/color.js  |  28 ++++
 .../stores/data_style/model/corners/common.js |   6 +-
 .../stores/data_style/model/corners/index.js  |  55 +++++++-
 .../data_style/model/corners/visibility.js    |  21 +++
 internal/stores/data_style/model/index.js     |  99 ++------------
 .../stores/data_style/model/lines/color.js    |  28 ++++
 .../stores/data_style/model/lines/common.js   |   6 +-
 .../stores/data_style/model/lines/index.js    |  55 +++++++-
 .../data_style/model/lines/visibility.js      |  21 +++
 .../stores/data_style/model/surfaces/color.js |  28 ++++
 .../data_style/model/surfaces/common.js       |   6 +-
 .../stores/data_style/model/surfaces/index.js |  55 +++++++-
 .../data_style/model/surfaces/visibility.js   |  22 +++
 .../stores/data_style/model/visibility.js     |  86 +++++++-----
 internal/stores/data_style/state.js           | 124 -----------------
 22 files changed, 638 insertions(+), 306 deletions(-)
 create mode 100644 internal/stores/data_style/model/blocks/color.js
 create mode 100644 internal/stores/data_style/model/blocks/visibility.js
 create mode 100644 internal/stores/data_style/model/common.js
 create mode 100644 internal/stores/data_style/model/corners/color.js
 create mode 100644 internal/stores/data_style/model/corners/visibility.js
 create mode 100644 internal/stores/data_style/model/lines/color.js
 create mode 100644 internal/stores/data_style/model/lines/visibility.js
 create mode 100644 internal/stores/data_style/model/surfaces/color.js
 create mode 100644 internal/stores/data_style/model/surfaces/visibility.js

diff --git a/app/utils/local/scripts.js b/app/utils/local/scripts.js
index 84459372..2f9b8808 100644
--- a/app/utils/local/scripts.js
+++ b/app/utils/local/scripts.js
@@ -8,9 +8,32 @@ import { appMode } from "./app_mode.js";
 
 function commandExistsSync(execName) {
   const envPath = process.env.PATH || "";
-  return envPath.split(path.delimiter).some((dir) => {
+  const paths = envPath.split(path.delimiter);
+
+  let currentDir = process.cwd();
+  while (currentDir !== path.parse(currentDir).root) {
+    const venvScripts = path.join(
+      currentDir,
+      ".venv",
+      process.platform === "win32" ? "Scripts" : "bin",
+    );
+    if (fs.existsSync(venvScripts)) {
+      paths.unshift(venvScripts);
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+
+  return paths.some((dir) => {
     const filePath = path.join(dir, execName);
-    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) return true;
+    if (process.platform === "win32") {
+      return [".exe", ".cmd", ".bat", ".ps1"].some((ext) => {
+        const withExt = `${filePath}${ext}`;
+        return fs.existsSync(withExt) && fs.statSync(withExt).isFile();
+      });
+    }
+    return false;
   });
 }
 
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
new file mode 100644
index 00000000..7c36aa8b
--- /dev/null
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -0,0 +1,29 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
+
+export function useModelBlocksColor() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelBlocksColor(modelId, componentIds, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(
+      modelId,
+      componentIds,
+      color,
+      schema,
+      {
+        dataStore,
+        viewerStore,
+      },
+      color_mode,
+    );
+  }
+
+  return { setModelBlocksColor };
+}
diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index 9a4b13ac..8d2d3365 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelBlocksCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelBlocksStyle(id) {
     return dataStyleState.getStyle(id).blocks;
@@ -15,11 +17,11 @@ export function useModelBlocksCommonStyle() {
   }
 
   function mutateModelBlocksStyle(id, block_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, block_ids, values);
+    return modelCommonStyle.mutateComponentStyles(id, block_ids, values);
   }
 
   function mutateModelBlockStyle(id, block_id, values) {
-    return dataStyleState.mutateComponentStyle(id, block_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, block_id, values);
   }
 
   function modelBlockVisibility(id, block_id) {
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 39ad4218..0754e073 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -1,16 +1,61 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelBlocksColor } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
-import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
-import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
+import { useModelBlocksVisibility } from "./visibility";
 
 async function setModelBlocksDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelBlocksStyle() {
+  const dataStore = useDataStore();
+  const commonStyle = useModelBlocksCommonStyle();
+  const visibilityStyle = useModelBlocksVisibility();
+  const colorStyle = useModelBlocksColor();
+
+  async function applyModelBlocksStyle(modelId) {
+    const compIds = await dataStore.getBlocksGeodeIds(modelId);
+    if (!compIds?.length) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const compId of compIds) {
+      const style = commonStyle.modelBlockStyle(modelId, compId);
+
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
+      }
+      visibilityGroups[visibility].push(compId);
+
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      }
+      colorGroups[cKey].compIds.push(compId);
+    }
+
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        visibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+        colorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
+      ),
+    ];
+
+    return Promise.all(promises);
+  }
+
   return {
+    applyModelBlocksStyle,
     setModelBlocksDefaultStyle,
-    ...useModelBlocksCommonStyle(),
-    ...useModelComponentVisibility("Block"),
-    ...useModelComponentColor("Block"),
+    ...commonStyle,
+    ...visibilityStyle,
+    ...colorStyle,
   };
 }
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
new file mode 100644
index 00000000..6864744c
--- /dev/null
+++ b/internal/stores/data_style/model/blocks/visibility.js
@@ -0,0 +1,21 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.visibility;
+
+export function useModelBlocksVisibility() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelBlocksVisibility(modelId, componentIds, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
+      dataStore,
+      viewerStore,
+    });
+  }
+
+  return { setModelBlocksVisibility };
+}
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index ce9d35cb..4ec31515 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -2,15 +2,14 @@ import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
 function useModelColorStyle(stores) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
 
   function getModelComponentColor(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
@@ -34,7 +33,7 @@ function useModelColorStyle(stores) {
   async function setModelComponentTypeColor(modelId, type, color) {
     viewerStore.start_request();
     try {
-      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
         color,
         color_mode: "constant",
       });
@@ -51,7 +50,7 @@ function useModelColorStyle(stores) {
   async function setModelComponentTypeColorMode(modelId, type, color_mode) {
     viewerStore.start_request();
     try {
-      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode });
       const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
       if (idsForType.length === 0) {
         return;
@@ -61,7 +60,7 @@ function useModelColorStyle(stores) {
         await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
         return;
       }
-      await dataStyleState.mutateComponentStyles(modelId, idsForType, { color_mode });
+      await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode });
     } finally {
       viewerStore.stop_request();
     }
@@ -70,7 +69,7 @@ function useModelColorStyle(stores) {
   async function setModelComponentColorMode(modelId, componentId, color_mode) {
     viewerStore.start_request();
     try {
-      await dataStyleState.mutateComponentStyle(modelId, componentId, { color_mode });
+      await modelCommonStyle.mutateComponentStyle(modelId, componentId, { color_mode });
       if (color_mode === "random") {
         await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
       }
@@ -82,7 +81,7 @@ function useModelColorStyle(stores) {
   async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
     viewerStore.start_request();
     try {
-      await dataStyleState.mutateComponentStyles(modelId, componentIds, { color, color_mode });
+      await modelCommonStyle.mutateComponentStyles(modelId, componentIds, { color, color_mode });
       return await dispatchToComponentTypes(
         modelId,
         componentIds,
@@ -108,26 +107,4 @@ function useModelColorStyle(stores) {
   };
 }
 
-function useModelComponentColor(type) {
-  const dataStore = useDataStore();
-  const dataStyleState = useDataStyleState();
-  const viewerStore = useViewerStore();
-  const schema = model_schemas[`${type.toLowerCase()}s`].color;
-
-  return {
-    [`setModel${type}sColor`]: (modelId, componentIds, color, color_mode = "constant") =>
-      dataStyleState.setModelTypeColor(
-        modelId,
-        componentIds,
-        color,
-        schema,
-        {
-          dataStore,
-          viewerStore,
-        },
-        color_mode,
-      ),
-  };
-}
-
-export { useModelColorStyle, useModelComponentColor };
+export { useModelColorStyle };
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
new file mode 100644
index 00000000..fc46d3c1
--- /dev/null
+++ b/internal/stores/data_style/model/common.js
@@ -0,0 +1,127 @@
+import { database } from "@ogw_internal/database/database";
+import merge from "lodash/merge";
+
+export function useModelCommonStyle() {
+  async function mutateComponentStyle(id_model, id_component, values) {
+    const table = database.model_component_datastyle;
+    const key = [id_model, id_component];
+    const entry = (await table.get(key)) || { id_model, id_component };
+    merge(entry, values);
+    return table.put(structuredClone(toRaw(entry)));
+  }
+
+  function mutateModelComponentTypeStyle(id_model, type, values) {
+    return database.transaction("rw", database.model_component_type_datastyle, async () => {
+      const table = database.model_component_type_datastyle;
+      const key = [id_model, type];
+      const entry = (await table.get(key)) || { id_model, type };
+      merge(entry, values);
+      return table.put(structuredClone(toRaw(entry)));
+    });
+  }
+
+  function mutateComponentStyles(id_model, id_components, values) {
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .toArray();
+
+      const style_map = {};
+      for (const style of all_styles) {
+        style_map[style.id_component] = style;
+      }
+
+      const updates = id_components.map((id_component) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
+      });
+
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
+  }
+
+  function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const component_ids = new Set(component_updates.map((update) => update.id_component));
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .and((style) => component_ids.has(style.id_component))
+        .toArray();
+      const style_map = Object.fromEntries(all_styles.map((style) => [style.id_component, style]));
+      const updates = component_updates.map(({ id_component, values }) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
+      });
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
+  }
+
+  async function setModelTypeColor(
+    id,
+    component_ids,
+    color,
+    schema,
+    { dataStore, viewerStore },
+    color_mode = "constant",
+  ) {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    const params = { id, block_ids: viewer_ids, color_mode };
+    if (color_mode === "constant") {
+      params.color = color;
+    }
+
+    const colors = await viewerStore.request(schema, params);
+    if (!colors?.length) {
+      return;
+    }
+
+    return bulkMutateComponentStylesPerComponent(
+      id,
+      colors.map(({ geode_id, color: color_value }) => ({
+        id_component: geode_id,
+        values: { color: color_value },
+      })),
+    );
+  }
+
+  async function setModelTypeVisibility(
+    id,
+    component_ids,
+    visibility,
+    schema,
+    { dataStore, viewerStore },
+  ) {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    await viewerStore.request(schema, { id, block_ids: viewer_ids, visibility });
+    return mutateComponentStyles(id, component_ids, { visibility });
+  }
+
+  return {
+    mutateComponentStyle,
+    mutateModelComponentTypeStyle,
+    mutateComponentStyles,
+    bulkMutateComponentStylesPerComponent,
+    setModelTypeColor,
+    setModelTypeVisibility,
+  };
+}
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
new file mode 100644
index 00000000..99622b28
--- /dev/null
+++ b/internal/stores/data_style/model/corners/color.js
@@ -0,0 +1,28 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
+
+export function useModelCornersColor() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelCornersColor(modelId, componentIds, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(
+      modelId,
+      componentIds,
+      color,
+      schema,
+      {
+        dataStore,
+        viewerStore,
+      },
+      color_mode,
+    );
+  }
+
+  return { setModelCornersColor };
+}
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index b5f5d116..74103ea6 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelCornersCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelCornersStyle(id) {
     return dataStyleState.getStyle(id).corners;
@@ -15,11 +17,11 @@ export function useModelCornersCommonStyle() {
   }
 
   function mutateModelCornersStyle(id, corner_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, corner_ids, values);
+    return modelCommonStyle.mutateComponentStyles(id, corner_ids, values);
   }
 
   function mutateModelCornerStyle(id, corner_id, values) {
-    return dataStyleState.mutateComponentStyle(id, corner_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
   }
 
   function modelCornerVisibility(id, corner_id) {
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index c21df3c8..9e22644f 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -1,16 +1,61 @@
-import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
-import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCornersColor } from "./color";
 import { useModelCornersCommonStyle } from "./common";
+import { useModelCornersVisibility } from "./visibility";
 
 async function setModelCornersDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelCornersStyle() {
+  const dataStore = useDataStore();
+  const commonStyle = useModelCornersCommonStyle();
+  const visibilityStyle = useModelCornersVisibility();
+  const colorStyle = useModelCornersColor();
+
+  async function applyModelCornersStyle(modelId) {
+    const compIds = await dataStore.getCornersGeodeIds(modelId);
+    if (!compIds?.length) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const compId of compIds) {
+      const style = commonStyle.modelCornerStyle(modelId, compId);
+
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
+      }
+      visibilityGroups[visibility].push(compId);
+
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      }
+      colorGroups[cKey].compIds.push(compId);
+    }
+
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        visibilityStyle.setModelCornersVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+        colorStyle.setModelCornersColor(modelId, ids, color, color_mode),
+      ),
+    ];
+
+    return Promise.all(promises);
+  }
+
   return {
+    applyModelCornersStyle,
     setModelCornersDefaultStyle,
-    ...useModelCornersCommonStyle(),
-    ...useModelComponentVisibility("Corner"),
-    ...useModelComponentColor("Corner"),
+    ...commonStyle,
+    ...visibilityStyle,
+    ...colorStyle,
   };
 }
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
new file mode 100644
index 00000000..bbc984cb
--- /dev/null
+++ b/internal/stores/data_style/model/corners/visibility.js
@@ -0,0 +1,21 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.corners.visibility;
+
+export function useModelCornersVisibility() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelCornersVisibility(modelId, componentIds, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
+      dataStore,
+      viewerStore,
+    });
+  }
+
+  return { setModelCornersVisibility };
+}
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index f942cc5b..401c8b40 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -12,44 +12,6 @@ import { useModelSurfacesStyle } from "./surfaces";
 import { useModelVisibilityStyle } from "./visibility";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-async function applyComponentTypeStyle(modelId, { getIds, getStyle, setVisibility, setColor }) {
-  const compIds = await getIds(modelId);
-  if (!compIds?.length) {
-    return;
-  }
-
-  const visibilityGroups = {};
-  const colorGroups = {};
-
-  for (const compId of compIds) {
-    const style = getStyle(modelId, compId);
-
-    const visibility = String(style.visibility);
-    if (!visibilityGroups[visibility]) {
-      visibilityGroups[visibility] = [];
-    }
-    visibilityGroups[visibility].push(compId);
-
-    const color_mode = style.color_mode || "constant";
-    const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-    if (!colorGroups[cKey]) {
-      colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
-    }
-    colorGroups[cKey].compIds.push(compId);
-  }
-
-  const promises = [
-    ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
-      setVisibility(modelId, ids, visibility === "true"),
-    ),
-    ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
-      setColor(modelId, ids, color, color_mode),
-    ),
-  ];
-
-  return Promise.all(promises);
-}
-
 function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
@@ -80,14 +42,10 @@ function useModelStyle() {
 
     return Promise.all([
       modelVisibilityStyle.setModelVisibility(modelId, style.visibility),
-      ...MESH_TYPES.map((type) =>
-        applyComponentTypeStyle(modelId, {
-          getIds: dataStore[`get${type}sGeodeIds`],
-          getStyle: stores[type][`model${type}Style`],
-          setVisibility: stores[type][`setModel${type}sVisibility`],
-          setColor: stores[type][`setModel${type}sColor`],
-        }),
-      ),
+      modelBlocksStyleStore.applyModelBlocksStyle(modelId),
+      modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
+      modelLinesStyleStore.applyModelLinesStyle(modelId),
+      modelCornersStyleStore.applyModelCornersStyle(modelId),
       modelPointsStyleStore.applyModelPointsStyle(modelId),
       modelEdgesStyleStore.applyModelEdgesStyle(modelId),
     ]);
@@ -100,57 +58,20 @@ function useModelStyle() {
       if (!item) {
         return;
       }
-      const { mesh_components } = item;
-      return await Promise.all(
-        Object.keys(mesh_components)
-          .filter((key) => stores[key])
-          .map((key) => stores[key][`setModel${key}sDefaultStyle`](modelId)),
-      );
+      return await Promise.all([
+        modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
+        modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
+        modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
+        modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+      ]);
     } finally {
       viewerStore.stop_request();
     }
   }
 
-  function applyModelCornersStyle(modelId) {
-    return applyComponentTypeStyle(modelId, {
-      getIds: dataStore.getCornersGeodeIds,
-      getStyle: modelCornersStyleStore.modelCornerStyle,
-      setVisibility: modelCornersStyleStore.setModelCornersVisibility,
-      setColor: modelCornersStyleStore.setModelCornersColor,
-    });
-  }
-
-  function applyModelLinesStyle(modelId) {
-    return applyComponentTypeStyle(modelId, {
-      getIds: dataStore.getLinesGeodeIds,
-      getStyle: modelLinesStyleStore.modelLineStyle,
-      setVisibility: modelLinesStyleStore.setModelLinesVisibility,
-      setColor: modelLinesStyleStore.setModelLinesColor,
-    });
-  }
-  function applyModelSurfacesStyle(modelId) {
-    return applyComponentTypeStyle(modelId, {
-      getIds: dataStore.getSurfacesGeodeIds,
-      getStyle: modelSurfacesStyleStore.modelSurfaceStyle,
-      setVisibility: modelSurfacesStyleStore.setModelSurfacesVisibility,
-      setColor: modelSurfacesStyleStore.setModelSurfacesColor,
-    });
-  }
-  function applyModelBlocksStyle(modelId) {
-    return applyComponentTypeStyle(modelId, {
-      getIds: dataStore.getBlocksGeodeIds,
-      getStyle: modelBlocksStyleStore.modelBlockStyle,
-      setVisibility: modelBlocksStyleStore.setModelBlocksVisibility,
-      setColor: modelBlocksStyleStore.setModelBlocksColor,
-    });
-  }
   return {
     visibleMeshComponents,
     applyModelStyle,
-    applyModelCornersStyle,
-    applyModelLinesStyle,
-    applyModelSurfacesStyle,
-    applyModelBlocksStyle,
     setModelMeshComponentsDefaultStyle,
     ...modelColorStyle,
     ...modelVisibilityStyle,
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
new file mode 100644
index 00000000..440e54c3
--- /dev/null
+++ b/internal/stores/data_style/model/lines/color.js
@@ -0,0 +1,28 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
+
+export function useModelLinesColor() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelLinesColor(modelId, componentIds, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(
+      modelId,
+      componentIds,
+      color,
+      schema,
+      {
+        dataStore,
+        viewerStore,
+      },
+      color_mode,
+    );
+  }
+
+  return { setModelLinesColor };
+}
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index d58f3824..2b2621e0 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelLinesCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelLinesStyle(id) {
     return dataStyleState.getStyle(id).lines;
@@ -15,11 +17,11 @@ export function useModelLinesCommonStyle() {
   }
 
   function mutateModelLinesStyle(id, line_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, line_ids, values);
+    return modelCommonStyle.mutateComponentStyles(id, line_ids, values);
   }
 
   function mutateModelLineStyle(id, line_id, values) {
-    return dataStyleState.mutateComponentStyle(id, line_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, line_id, values);
   }
 
   function modelLineVisibility(id, line_id) {
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index cc8f8e9d..afec4c7b 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -1,16 +1,61 @@
-import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
-import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelLinesColor } from "./color";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesVisibility } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelLinesStyle() {
+  const dataStore = useDataStore();
+  const commonStyle = useModelLinesCommonStyle();
+  const visibilityStyle = useModelLinesVisibility();
+  const colorStyle = useModelLinesColor();
+
+  async function applyModelLinesStyle(modelId) {
+    const compIds = await dataStore.getLinesGeodeIds(modelId);
+    if (!compIds?.length) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const compId of compIds) {
+      const style = commonStyle.modelLineStyle(modelId, compId);
+
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
+      }
+      visibilityGroups[visibility].push(compId);
+
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      }
+      colorGroups[cKey].compIds.push(compId);
+    }
+
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        visibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+        colorStyle.setModelLinesColor(modelId, ids, color, color_mode),
+      ),
+    ];
+
+    return Promise.all(promises);
+  }
+
   return {
+    applyModelLinesStyle,
     setModelLinesDefaultStyle,
-    ...useModelLinesCommonStyle(),
-    ...useModelComponentVisibility("Line"),
-    ...useModelComponentColor("Line"),
+    ...commonStyle,
+    ...visibilityStyle,
+    ...colorStyle,
   };
 }
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
new file mode 100644
index 00000000..01b7de92
--- /dev/null
+++ b/internal/stores/data_style/model/lines/visibility.js
@@ -0,0 +1,21 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.visibility;
+
+export function useModelLinesVisibility() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelLinesVisibility(modelId, componentIds, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
+      dataStore,
+      viewerStore,
+    });
+  }
+
+  return { setModelLinesVisibility };
+}
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
new file mode 100644
index 00000000..6a4282dc
--- /dev/null
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -0,0 +1,28 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
+
+export function useModelSurfacesColor() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelSurfacesColor(modelId, componentIds, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(
+      modelId,
+      componentIds,
+      color,
+      schema,
+      {
+        dataStore,
+        viewerStore,
+      },
+      color_mode,
+    );
+  }
+
+  return { setModelSurfacesColor };
+}
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index aa0679a7..f96c341c 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelSurfacesCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelSurfacesStyle(id) {
     return dataStyleState.getStyle(id).surfaces;
@@ -15,11 +17,11 @@ export function useModelSurfacesCommonStyle() {
   }
 
   function mutateModelSurfacesStyle(id, surface_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, surface_ids, values);
+    return modelCommonStyle.mutateComponentStyles(id, surface_ids, values);
   }
 
   function mutateModelSurfaceStyle(id, surface_id, values) {
-    return dataStyleState.mutateComponentStyle(id, surface_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
   }
 
   function modelSurfaceVisibility(id, surface_id) {
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index f66a1632..6374f8bc 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -1,16 +1,61 @@
-import { useModelComponentColor } from "@ogw_internal/stores/data_style/model/color";
-import { useModelComponentVisibility } from "@ogw_internal/stores/data_style/model/visibility";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelSurfacesColor } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useModelSurfacesVisibility } from "./visibility";
 
 async function setModelSurfacesDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelSurfacesStyle() {
+  const dataStore = useDataStore();
+  const commonStyle = useModelSurfacesCommonStyle();
+  const visibilityStyle = useModelSurfacesVisibility();
+  const colorStyle = useModelSurfacesColor();
+
+  async function applyModelSurfacesStyle(modelId) {
+    const compIds = await dataStore.getSurfacesGeodeIds(modelId);
+    if (!compIds?.length) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const compId of compIds) {
+      const style = commonStyle.modelSurfaceStyle(modelId, compId);
+
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
+      }
+      visibilityGroups[visibility].push(compId);
+
+      const color_mode = style.color_mode || "constant";
+      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      }
+      colorGroups[cKey].compIds.push(compId);
+    }
+
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        visibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+        colorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
+      ),
+    ];
+
+    return Promise.all(promises);
+  }
+
   return {
+    applyModelSurfacesStyle,
     setModelSurfacesDefaultStyle,
-    ...useModelSurfacesCommonStyle(),
-    ...useModelComponentVisibility("Surface"),
-    ...useModelComponentColor("Surface"),
+    ...commonStyle,
+    ...visibilityStyle,
+    ...colorStyle,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
new file mode 100644
index 00000000..08d0f0ed
--- /dev/null
+++ b/internal/stores/data_style/model/surfaces/visibility.js
@@ -0,0 +1,22 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.visibility;
+
+export function useModelSurfacesVisibility() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function setModelSurfacesVisibility(modelId, componentIds, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
+      dataStore,
+      viewerStore,
+    });
+  }
+
+  return { setModelSurfacesVisibility };
+}
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 78abc91d..3d99f062 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -1,7 +1,8 @@
-import { MESH_TYPES } from "@ogw_internal/stores/data_style/model";
+import { MESH_TYPES } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -31,15 +32,55 @@ async function dispatchToComponentTypes(
   ...args
 ) {
   const { componentsMap } = await getModelComponentsMap(modelId, dataStore);
-  return Promise.all(
-    MESH_TYPES.map((type) => {
-      const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
-      if (idsForType.length === 0) {
-        return undefined;
-      }
-      return stores[type][`setModel${type}s${action}`](modelId, idsForType, ...args);
-    }),
-  );
+
+  const idsByComponent = {
+    Block: [],
+    Surface: [],
+    Line: [],
+    Corner: [],
+  };
+
+  for (const id of componentIds) {
+    const type = componentsMap[id]?.type;
+    if (type && idsByComponent[type]) {
+      idsByComponent[type].push(id);
+    }
+  }
+
+  const promises = [];
+  if (action === "Visibility") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(stores.Block.setModelBlocksVisibility(modelId, idsByComponent.Block, ...args));
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(
+        stores.Surface.setModelSurfacesVisibility(modelId, idsByComponent.Surface, ...args),
+      );
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(stores.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args));
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(
+        stores.Corner.setModelCornersVisibility(modelId, idsByComponent.Corner, ...args),
+      );
+    }
+  } else if (action === "Color") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(stores.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args));
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(stores.Surface.setModelSurfacesColor(modelId, idsByComponent.Surface, ...args));
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(stores.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args));
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(stores.Corner.setModelCornersColor(modelId, idsByComponent.Corner, ...args));
+    }
+  }
+
+  return Promise.all(promises);
 }
 
 function useModelVisibilityStyle(stores) {
@@ -47,6 +88,7 @@ function useModelVisibilityStyle(stores) {
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelVisibility(modelId) {
     return dataStyleState.getStyle(modelId).visibility;
@@ -97,7 +139,7 @@ function useModelVisibilityStyle(stores) {
   async function setModelComponentTypeVisibility(modelId, type, visibility) {
     viewerStore.start_request();
     try {
-      await dataStyleState.mutateModelComponentTypeStyle(modelId, type, {
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
         visibility,
       });
       const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
@@ -118,24 +160,4 @@ function useModelVisibilityStyle(stores) {
   };
 }
 
-function useModelComponentVisibility(type) {
-  const dataStore = useDataStore();
-  const dataStyleState = useDataStyleState();
-  const viewerStore = useViewerStore();
-  const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
-
-  return {
-    [`setModel${type}sVisibility`]: (modelId, componentIds, visibility) =>
-      dataStyleState.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
-        dataStore,
-        viewerStore,
-      }),
-  };
-}
-
-export {
-  getModelComponentsMap,
-  dispatchToComponentTypes,
-  useModelVisibilityStyle,
-  useModelComponentVisibility,
-};
+export { getModelComponentsMap, dispatchToComponentTypes, useModelVisibilityStyle };
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index 2358e1cb..62f762d0 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -63,18 +63,6 @@ export function useDataStyleState() {
     return { ...toRaw(styles.value[id]) };
   }
 
-  async function genericMutate(tableName, key, values) {
-    const table = database[tableName];
-    const entry = (await table.get(key)) || (Array.isArray(key) ? {} : { id: key });
-    if (tableName === "model_component_datastyle" && !entry.id_model) {
-      [entry.id_model, entry.id_component] = key;
-    } else if (tableName === "model_component_type_datastyle" && !entry.id_model) {
-      [entry.id_model, entry.type] = key;
-    }
-    merge(entry, values);
-    return table.put(structuredClone(toRaw(entry)));
-  }
-
   function mutateStyle(id, values) {
     const style = getStyle(id);
     merge(style, values);
@@ -86,117 +74,11 @@ export function useDataStyleState() {
     return componentStyles.value[key] || {};
   }
 
-  function mutateComponentStyle(id_model, id_component, values) {
-    return genericMutate("model_component_datastyle", [id_model, id_component], values);
-  }
-
   function getModelComponentTypeStyle(id_model, type) {
     const key = `${id_model}_${type}`;
     return modelComponentTypeStyles.value[key] || {};
   }
 
-  function mutateModelComponentTypeStyle(id_model, type, values) {
-    return database.transaction("rw", database.model_component_type_datastyle, () =>
-      genericMutate("model_component_type_datastyle", [id_model, type], values),
-    );
-  }
-
-  function mutateComponentStyles(id_model, id_components, values) {
-    return database.transaction("rw", database.model_component_datastyle, async () => {
-      const all_styles = await database.model_component_datastyle
-        .where("id_model")
-        .equals(id_model)
-        .toArray();
-
-      const style_map = {};
-      for (const style of all_styles) {
-        style_map[style.id_component] = style;
-      }
-
-      const updates = id_components.map((id_component) => {
-        const style = style_map[id_component] || { id_model, id_component };
-        merge(style, values);
-        return toRaw(style);
-      });
-
-      return database.model_component_datastyle.bulkPut(structuredClone(updates));
-    });
-  }
-
-  function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
-    return database.transaction("rw", database.model_component_datastyle, async () => {
-      const component_ids = new Set(component_updates.map((update) => update.id_component));
-      const all_styles = await database.model_component_datastyle
-        .where("id_model")
-        .equals(id_model)
-        .and((style) => component_ids.has(style.id_component))
-        .toArray();
-      const style_map = Object.fromEntries(all_styles.map((style) => [style.id_component, style]));
-      const updates = component_updates.map(({ id_component, values }) => {
-        const style = style_map[id_component] || { id_model, id_component };
-        merge(style, values);
-        return toRaw(style);
-      });
-      return database.model_component_datastyle.bulkPut(structuredClone(updates));
-    });
-  }
-
-  async function setModelTypeColor(
-    id,
-    component_ids,
-    color,
-    schema,
-    { dataStore, viewerStore },
-    color_mode = "constant",
-  ) {
-    if (!component_ids?.length) {
-      return;
-    }
-
-    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
-    if (!viewer_ids?.length) {
-      return;
-    }
-
-    const params = { id, block_ids: viewer_ids, color_mode };
-    if (color_mode === "constant") {
-      params.color = color;
-    }
-
-    const colors = await viewerStore.request(schema, params);
-    if (!colors?.length) {
-      return;
-    }
-
-    return bulkMutateComponentStylesPerComponent(
-      id,
-      colors.map(({ geode_id, color: color_value }) => ({
-        id_component: geode_id,
-        values: { color: color_value },
-      })),
-    );
-  }
-
-  async function setModelTypeVisibility(
-    id,
-    component_ids,
-    visibility,
-    schema,
-    { dataStore, viewerStore },
-  ) {
-    if (!component_ids?.length) {
-      return;
-    }
-
-    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
-    if (!viewer_ids?.length) {
-      return;
-    }
-
-    await viewerStore.request(schema, { id, block_ids: viewer_ids, visibility });
-    return mutateComponentStyles(id, component_ids, { visibility });
-  }
-
   function clear() {
     return Promise.all([
       database.data_style.clear(),
@@ -210,17 +92,11 @@ export function useDataStyleState() {
     getComponentStyle,
     getModelComponentTypeStyle,
     mutateStyle,
-    mutateComponentStyle,
-    mutateModelComponentTypeStyle,
-    mutateComponentStyles,
-    bulkMutateComponentStylesPerComponent,
     styles,
     componentStyles,
     modelComponentTypeStyles,
     objectVisibility,
     selectedObjects,
-    setModelTypeColor,
-    setModelTypeVisibility,
     clear,
   };
 }

From 8730d042d9b96074be42d3e3c2d74aedbfaffff3 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 10:58:09 +0200
Subject: [PATCH 25/34] revert

---
 app/utils/local/scripts.js | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/app/utils/local/scripts.js b/app/utils/local/scripts.js
index 2f9b8808..84459372 100644
--- a/app/utils/local/scripts.js
+++ b/app/utils/local/scripts.js
@@ -8,32 +8,9 @@ import { appMode } from "./app_mode.js";
 
 function commandExistsSync(execName) {
   const envPath = process.env.PATH || "";
-  const paths = envPath.split(path.delimiter);
-
-  let currentDir = process.cwd();
-  while (currentDir !== path.parse(currentDir).root) {
-    const venvScripts = path.join(
-      currentDir,
-      ".venv",
-      process.platform === "win32" ? "Scripts" : "bin",
-    );
-    if (fs.existsSync(venvScripts)) {
-      paths.unshift(venvScripts);
-      break;
-    }
-    currentDir = path.dirname(currentDir);
-  }
-
-  return paths.some((dir) => {
+  return envPath.split(path.delimiter).some((dir) => {
     const filePath = path.join(dir, execName);
-    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) return true;
-    if (process.platform === "win32") {
-      return [".exe", ".cmd", ".bat", ".ps1"].some((ext) => {
-        const withExt = `${filePath}${ext}`;
-        return fs.existsSync(withExt) && fs.statSync(withExt).isFile();
-      });
-    }
-    return false;
+    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
   });
 }
 

From 169bf73d41d1cd2a84b7ac7e5a3b163d69fd9f6a Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 11:08:14 +0200
Subject: [PATCH 26/34] modelComponentTypeStyle

---
 internal/stores/data_style/model/color.js     |  4 +-
 internal/stores/data_style/model/index.js     | 58 +++++++++----------
 .../stores/data_style/model/visibility.js     | 50 ++++++++++++----
 3 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 4ec31515..b57b9b94 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -5,7 +5,7 @@ import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-function useModelColorStyle(stores) {
+function useModelColorStyle(componentStyleFunctions) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const viewerStore = useViewerStore();
@@ -86,7 +86,7 @@ function useModelColorStyle(stores) {
         modelId,
         componentIds,
         "Color",
-        { dataStore, stores, viewerStore },
+        { dataStore, componentStyleFunctions, viewerStore },
         color,
         color_mode,
       );
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 401c8b40..a1cc7477 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -15,23 +15,23 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
-  const modelCornersStyleStore = useModelCornersStyle();
-  const modelBlocksStyleStore = useModelBlocksStyle();
-  const modelEdgesStyleStore = useModelEdgesStyle();
-  const modelLinesStyleStore = useModelLinesStyle();
-  const modelPointsStyleStore = useModelPointsStyle();
-  const modelSurfacesStyleStore = useModelSurfacesStyle();
+  const modelCornersStyle = useModelCornersStyle();
+  const modelBlocksStyle = useModelBlocksStyle();
+  const modelEdgesStyle = useModelEdgesStyle();
+  const modelLinesStyle = useModelLinesStyle();
+  const modelPointsStyle = useModelPointsStyle();
+  const modelSurfacesStyle = useModelSurfacesStyle();
   const viewerStore = useViewerStore();
 
-  const stores = {
-    Corner: modelCornersStyleStore,
-    Line: modelLinesStyleStore,
-    Surface: modelSurfacesStyleStore,
-    Block: modelBlocksStyleStore,
+  const componentStyleFunctions = {
+    Corner: modelCornersStyle,
+    Line: modelLinesStyle,
+    Surface: modelSurfacesStyle,
+    Block: modelBlocksStyle,
   };
 
-  const modelColorStyle = useModelColorStyle(stores);
-  const modelVisibilityStyle = useModelVisibilityStyle(stores);
+  const modelColorStyle = useModelColorStyle(componentStyleFunctions);
+  const modelVisibilityStyle = useModelVisibilityStyle(componentStyleFunctions);
 
   function visibleMeshComponents(id_ref) {
     return useModelSelection(id_ref, dataStyleState);
@@ -42,12 +42,12 @@ function useModelStyle() {
 
     return Promise.all([
       modelVisibilityStyle.setModelVisibility(modelId, style.visibility),
-      modelBlocksStyleStore.applyModelBlocksStyle(modelId),
-      modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
-      modelLinesStyleStore.applyModelLinesStyle(modelId),
-      modelCornersStyleStore.applyModelCornersStyle(modelId),
-      modelPointsStyleStore.applyModelPointsStyle(modelId),
-      modelEdgesStyleStore.applyModelEdgesStyle(modelId),
+      modelBlocksStyle.applyModelBlocksStyle(modelId),
+      modelSurfacesStyle.applyModelSurfacesStyle(modelId),
+      modelLinesStyle.applyModelLinesStyle(modelId),
+      modelCornersStyle.applyModelCornersStyle(modelId),
+      modelPointsStyle.applyModelPointsStyle(modelId),
+      modelEdgesStyle.applyModelEdgesStyle(modelId),
     ]);
   }
 
@@ -59,10 +59,10 @@ function useModelStyle() {
         return;
       }
       return await Promise.all([
-        modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
-        modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
-        modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
-        modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+        modelBlocksStyle.setModelBlocksDefaultStyle(modelId),
+        modelSurfacesStyle.setModelSurfacesDefaultStyle(modelId),
+        modelLinesStyle.setModelLinesDefaultStyle(modelId),
+        modelCornersStyle.setModelCornersDefaultStyle(modelId),
       ]);
     } finally {
       viewerStore.stop_request();
@@ -75,12 +75,12 @@ function useModelStyle() {
     setModelMeshComponentsDefaultStyle,
     ...modelColorStyle,
     ...modelVisibilityStyle,
-    ...modelBlocksStyleStore,
-    ...modelCornersStyleStore,
-    ...modelEdgesStyleStore,
-    ...modelLinesStyleStore,
-    ...modelPointsStyleStore,
-    ...modelSurfacesStyleStore,
+    ...modelBlocksStyle,
+    ...modelCornersStyle,
+    ...modelEdgesStyle,
+    ...modelLinesStyle,
+    ...modelPointsStyle,
+    ...modelSurfacesStyle,
   };
 }
 
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 3d99f062..62540c8a 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -28,7 +28,7 @@ async function dispatchToComponentTypes(
   modelId,
   componentIds,
   action,
-  { dataStore, stores },
+  { dataStore, componentStyleFunctions },
   ...args
 ) {
   const { componentsMap } = await getModelComponentsMap(modelId, dataStore);
@@ -50,40 +50,68 @@ async function dispatchToComponentTypes(
   const promises = [];
   if (action === "Visibility") {
     if (idsByComponent.Block.length > 0) {
-      promises.push(stores.Block.setModelBlocksVisibility(modelId, idsByComponent.Block, ...args));
+      promises.push(
+        componentStyleFunctions.Block.setModelBlocksVisibility(
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
+      );
     }
     if (idsByComponent.Surface.length > 0) {
       promises.push(
-        stores.Surface.setModelSurfacesVisibility(modelId, idsByComponent.Surface, ...args),
+        componentStyleFunctions.Surface.setModelSurfacesVisibility(
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Line.length > 0) {
-      promises.push(stores.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args));
+      promises.push(
+        componentStyleFunctions.Line.setModelLinesVisibility( modelId, idsByComponent.Line, ...args),
+      );
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        stores.Corner.setModelCornersVisibility(modelId, idsByComponent.Corner, ...args),
+        componentStyleFunctions.Corner.setModelCornersVisibility(
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
       );
     }
   } else if (action === "Color") {
     if (idsByComponent.Block.length > 0) {
-      promises.push(stores.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args));
+      promises.push(
+        componentStyleFunctions.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args),
+      );
     }
     if (idsByComponent.Surface.length > 0) {
-      promises.push(stores.Surface.setModelSurfacesColor(modelId, idsByComponent.Surface, ...args));
+      promises.push(
+        componentStyleFunctions.Surface.setModelSurfacesColor(
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
+      );
     }
     if (idsByComponent.Line.length > 0) {
-      promises.push(stores.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args));
+      promises.push(
+        componentStyleFunctions.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args),
+      );
     }
     if (idsByComponent.Corner.length > 0) {
-      promises.push(stores.Corner.setModelCornersColor(modelId, idsByComponent.Corner, ...args));
+      promises.push(
+        componentStyleFunctions.Corner.setModelCornersColor(modelId, idsByComponent.Corner, ...args),
+      );
     }
   }
 
   return Promise.all(promises);
 }
 
-function useModelVisibilityStyle(stores) {
+function useModelVisibilityStyle(componentStyleFunctions) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
@@ -125,7 +153,7 @@ function useModelVisibilityStyle(stores) {
             modelId,
             individualIds,
             "Visibility",
-            { dataStore, stores, viewerStore },
+            { dataStore, componentStyleFunctions, viewerStore },
             visibility,
           ),
         );

From e356fed93afb1b8a05d9b51169729ce2302bd067 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 17 Apr 2026 09:09:01 +0000
Subject: [PATCH 27/34] Apply prepare changes

---
 internal/stores/data_style/model/visibility.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 62540c8a..4bd9d227 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -69,7 +69,7 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Line.length > 0) {
       promises.push(
-        componentStyleFunctions.Line.setModelLinesVisibility( modelId, idsByComponent.Line, ...args),
+        componentStyleFunctions.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args),
       );
     }
     if (idsByComponent.Corner.length > 0) {
@@ -103,7 +103,11 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        componentStyleFunctions.Corner.setModelCornersColor(modelId, idsByComponent.Corner, ...args),
+        componentStyleFunctions.Corner.setModelCornersColor(
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
       );
     }
   }

From fa392f362e7044aa7d893351771b0daaa773e56f Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 11:35:15 +0200
Subject: [PATCH 28/34] fix

---
 app/components/Viewer/Generic/Model/ModelStyleCard.vue | 10 +++++++---
 internal/stores/data_style/model/color.js              |  9 +++++++++
 internal/stores/data_style/model/common.js             |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 18d576f6..df30a4ae 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -62,7 +62,11 @@ const componentVisibility = styleComputed(
 const componentColor = styleComputed(
   () =>
     componentId.value
-      ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
+      ? dataStyleStore.getModelComponentEffectiveColor(
+          modelId.value,
+          componentId.value,
+          component_type.value,
+        )
       : undefined,
   (color) =>
     componentId.value &&
@@ -142,7 +146,7 @@ const modelComponentTypeLabel = computed(() =>
           variant="outlined"
         />
 
-        <template v-if="modelComponentTypeColorMode === 'constant' && modelComponentTypeColor">
+        <template v-if="modelComponentTypeColorMode === 'constant'">
           <div class="text-caption mb-1">Color</div>
           <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
         </template>
@@ -168,7 +172,7 @@ const modelComponentTypeLabel = computed(() =>
           variant="outlined"
         />
 
-        <template v-if="componentColorMode === 'constant' && componentColor">
+        <template v-if="componentColorMode === 'constant'">
           <div class="text-caption mb-1">Color</div>
           <ViewerOptionsColorPicker v-model="componentColor" />
         </template>
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index b57b9b94..95a5725e 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -15,6 +15,14 @@ function useModelColorStyle(componentStyleFunctions) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
 
+  function getModelComponentEffectiveColor(modelId, componentId, type) {
+    const individualColor = getModelComponentColor(modelId, componentId);
+    if (individualColor !== undefined) {
+      return individualColor;
+    }
+    return getModelComponentTypeColor(modelId, type);
+  }
+
   function getModelComponentColorMode(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
   }
@@ -97,6 +105,7 @@ function useModelColorStyle(componentStyleFunctions) {
 
   return {
     getModelComponentColor,
+    getModelComponentEffectiveColor,
     getModelComponentColorMode,
     getModelComponentTypeColor,
     getModelComponentTypeColorMode,
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index fc46d3c1..86f883d5 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -78,7 +78,7 @@ export function useModelCommonStyle() {
     }
 
     const params = { id, block_ids: viewer_ids, color_mode };
-    if (color_mode === "constant") {
+    if (color_mode === "constant" && color !== undefined) {
       params.color = color;
     }
 

From d2de9a1203fd155bdf1836886b0c89467d80c900 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 14:26:07 +0200
Subject: [PATCH 29/34] refacto and fixes

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 297 +++++++-----------
 .../Viewer/Options/OptionsSection.vue         |  74 +++++
 app/stores/data.js                            |  30 +-
 app/utils/color.js                            |  32 --
 app/utils/default_styles.js                   |  11 +-
 .../tables/model_component_type_datastyle.js  |   2 +-
 internal/database/tables/model_components.js  |   2 +-
 .../stores/data_style/model/blocks/color.js   |  17 +-
 .../data_style/model/blocks/visibility.js     |  17 +-
 internal/stores/data_style/model/color.js     |  32 +-
 internal/stores/data_style/model/common.js    |  28 +-
 internal/stores/data_style/model/constants.js |  13 -
 .../stores/data_style/model/corners/color.js  |  16 +-
 .../data_style/model/corners/visibility.js    |  17 +-
 internal/stores/data_style/model/index.js     |   3 +-
 .../stores/data_style/model/lines/color.js    |  16 +-
 .../data_style/model/lines/visibility.js      |  17 +-
 internal/stores/data_style/model/selection.js |  24 +-
 .../stores/data_style/model/surfaces/color.js |  16 +-
 .../data_style/model/surfaces/visibility.js   |  18 +-
 .../stores/data_style/model/visibility.js     |  29 +-
 internal/stores/data_style/state.js           |   6 +-
 22 files changed, 338 insertions(+), 379 deletions(-)
 create mode 100644 app/components/Viewer/Options/OptionsSection.vue
 delete mode 100644 app/utils/color.js
 delete mode 100644 internal/stores/data_style/model/constants.js

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index df30a4ae..390775d9 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -16,92 +17,103 @@ const { itemProps } = defineProps({
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
 const selection = dataStyleStore.visibleMeshComponents(modelId);
-const component_type = ref(undefined);
-
-const modelCollapsed = ref(false);
-const typeCollapsed = ref(false);
-const componentCollapsed = ref(false);
+const componentType = ref(undefined);
 
 watchEffect(async () => {
   if (itemProps.meta_data.viewer_type === "model_component_type") {
-    component_type.value = itemProps.meta_data.modelComponentType;
+    componentType.value = itemProps.meta_data.modelComponentType;
   } else if (componentId.value && modelId.value) {
-    component_type.value = await dataStore.meshComponentType(modelId.value, componentId.value);
+    componentType.value = await dataStore.meshComponentType(modelId.value, componentId.value);
   } else {
-    component_type.value = undefined;
+    componentType.value = undefined;
   }
 });
 
-function styleComputed(getter, setter) {
-  return computed({
-    get: getter,
-    set: async (newValue) => {
-      await setter(newValue);
-      hybridViewerStore.remoteRender();
-    },
-  });
-}
-
-const modelVisibility = styleComputed(
-  () => dataStyleStore.modelVisibility(modelId.value),
-  (isVisible) => dataStyleStore.setModelVisibility(modelId.value, isVisible),
-);
+const modelVisibility = computed({
+  get: () => dataStyleStore.modelVisibility(modelId.value),
+  set: async (isVisible) => {
+    await dataStyleStore.setModelVisibility(modelId.value, isVisible);
+    hybridViewerStore.remoteRender();
+  },
+});
 
-const modelComponentTypeVisibility = styleComputed(
-  () => selection.value.includes(component_type.value),
-  (isVisible) =>
-    dataStyleStore.setModelComponentTypeVisibility(modelId.value, component_type.value, isVisible),
-);
+const modelComponentTypeVisibility = computed({
+  get: () => selection.value.includes(componentType.value),
+  set: async (isVisible) => {
+    await dataStyleStore.setModelComponentTypeVisibility(
+      modelId.value,
+      componentType.value,
+      isVisible,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 
-const componentVisibility = styleComputed(
-  () => selection.value.includes(componentId.value),
-  (isVisible) =>
-    dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], isVisible),
-);
+const componentVisibility = computed({
+  get: () => selection.value.includes(componentId.value),
+  set: async (isVisible) => {
+    await dataStyleStore.setModelComponentsVisibility(
+      modelId.value,
+      [componentId.value],
+      isVisible,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 
-const componentColor = styleComputed(
-  () =>
+const componentColor = computed({
+  get: () =>
     componentId.value
       ? dataStyleStore.getModelComponentEffectiveColor(
           modelId.value,
           componentId.value,
-          component_type.value,
+          componentType.value,
         )
       : undefined,
-  (color) =>
-    componentId.value &&
-    dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], color),
-);
+  set: async (color) => {
+    if (componentId.value) {
+      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
 
-const modelComponentTypeColor = styleComputed(
-  () =>
-    component_type.value
-      ? dataStyleStore.getModelComponentTypeColor(modelId.value, component_type.value)
+const modelComponentTypeColor = computed({
+  get: () =>
+    componentType.value
+      ? dataStyleStore.getModelComponentTypeColor(modelId.value, componentType.value)
       : undefined,
-  (color) =>
-    component_type.value &&
-    dataStyleStore.setModelComponentTypeColor(modelId.value, component_type.value, color),
-);
+  set: async (color) => {
+    if (componentType.value) {
+      await dataStyleStore.setModelComponentTypeColor(modelId.value, componentType.value, color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
 
-const modelComponentTypeColorMode = styleComputed(
-  () =>
-    component_type.value
-      ? dataStyleStore.getModelComponentTypeColorMode(modelId.value, component_type.value)
-      : "constant",
-  (colorMode) =>
-    component_type.value &&
-    dataStyleStore.setModelComponentTypeColorMode(modelId.value, component_type.value, colorMode),
-);
+const modelComponentTypeColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId.value, componentType.value),
+  set: async (colorMode) => {
+    if (componentType.value) {
+      await dataStyleStore.setModelComponentTypeColorMode(
+        modelId.value,
+        componentType.value,
+        colorMode,
+      );
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
 
-const componentColorMode = styleComputed(
-  () =>
-    componentId.value
-      ? dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value)
-      : "constant",
-  (colorMode) =>
-    componentId.value &&
-    dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, colorMode),
-);
+const componentColorMode = computed({
+  get: () => dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value),
+  set: async (colorMode) => {
+    if (componentId.value) {
+      await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
 
 const colorModes = [
   { title: "Constant", value: "constant" },
@@ -109,75 +121,51 @@ const colorModes = [
 ];
 
 const modelComponentTypeLabel = computed(() =>
-  component_type.value ? `${component_type.value}s Options` : "",
+  componentType.value ? `${componentType.value}s Options` : "",
 );
 </script>
 
 <template>
   <div class="model-style-card">
-    <div class="options-section">
-      <div class="section-badge" @click="modelCollapsed = !modelCollapsed">
-        Model Options
-        <v-icon class="collapse-icon" :class="{ rotated: modelCollapsed }" size="12">
-          mdi-chevron-down
-        </v-icon>
-      </div>
-      <v-container v-show="!modelCollapsed" class="pa-2">
-        <VisibilitySwitch v-model="modelVisibility" />
-      </v-container>
-    </div>
-
-    <div v-if="component_type" class="options-section mt-6">
-      <div class="section-badge" @click="typeCollapsed = !typeCollapsed">
-        {{ modelComponentTypeLabel }}
-        <v-icon class="collapse-icon" :class="{ rotated: typeCollapsed }" size="12">
-          mdi-chevron-down
-        </v-icon>
-      </div>
-      <v-container v-show="!typeCollapsed" class="pa-2">
-        <VisibilitySwitch v-model="modelComponentTypeVisibility" />
-        <div class="text-caption mb-1 mt-2">Color Mode</div>
-        <v-select
-          v-model="modelComponentTypeColorMode"
-          :items="colorModes"
-          density="compact"
-          hide-details
-          class="mb-3"
-          variant="outlined"
-        />
-
-        <template v-if="modelComponentTypeColorMode === 'constant'">
-          <div class="text-caption mb-1">Color</div>
-          <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
-        </template>
-      </v-container>
-    </div>
-
-    <div v-if="componentId" class="options-section mt-6">
-      <div class="section-badge" @click="componentCollapsed = !componentCollapsed">
-        Component Options
-        <v-icon class="collapse-icon" :class="{ rotated: componentCollapsed }" size="12">
-          mdi-chevron-down
-        </v-icon>
-      </div>
-      <v-container v-show="!componentCollapsed" class="pa-2">
-        <VisibilitySwitch v-model="componentVisibility" />
-        <div class="text-caption mb-1 mt-2">Color Mode</div>
-        <v-select
-          v-model="componentColorMode"
-          :items="colorModes"
-          density="compact"
-          hide-details
-          class="mb-3"
-          variant="outlined"
-        />
-
-        <template v-if="componentColorMode === 'constant'">
-          <div class="text-caption mb-1">Color</div>
-          <ViewerOptionsColorPicker v-model="componentColor" />
-        </template>
-      </v-container>
-    </div>
+    <OptionsSection title="Model Options">
+      <VisibilitySwitch v-model="modelVisibility" />
+    </OptionsSection>
+
+    <OptionsSection v-if="componentType" :title="modelComponentTypeLabel" class="mt-6">
+      <VisibilitySwitch v-model="modelComponentTypeVisibility" />
+      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-select
+        v-model="modelComponentTypeColorMode"
+        :items="colorModes"
+        density="compact"
+        hide-details
+        class="mb-3"
+        variant="outlined"
+      />
+
+      <template v-if="modelComponentTypeColorMode === 'constant'">
+        <div class="text-caption mb-1">Color</div>
+        <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
+      </template>
+    </OptionsSection>
+
+    <OptionsSection v-if="componentId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="componentVisibility" />
+      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-select
+        v-model="componentColorMode"
+        :items="colorModes"
+        density="compact"
+        hide-details
+        class="mb-3"
+        variant="outlined"
+      />
+
+      <template v-if="componentColorMode === 'constant'">
+        <div class="text-caption mb-1">Color</div>
+        <ViewerOptionsColorPicker v-model="componentColor" />
+      </template>
+    </OptionsSection>
   </div>
 </template>
 
@@ -186,55 +174,4 @@ const modelComponentTypeLabel = computed(() =>
   padding-top: 20px;
   overflow-x: hidden;
 }
-
-.options-section {
-  position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  padding: 12px 8px 8px 8px;
-}
-
-.section-badge {
-  position: absolute;
-  top: -12px;
-  left: 16px;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  padding: 2px 12px;
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.section-badge:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.collapse-icon {
-  transition: transform 0.2s ease;
-}
-
-.collapse-icon.rotated {
-  transform: rotate(-90deg);
-}
-
-.v-theme--light .options-section {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-
-.v-theme--light .section-badge {
-  background-color: white;
-  color: #444;
-  border-color: rgba(0, 0, 0, 0.12);
-}
 </style>
diff --git a/app/components/Viewer/Options/OptionsSection.vue b/app/components/Viewer/Options/OptionsSection.vue
new file mode 100644
index 00000000..094b7e98
--- /dev/null
+++ b/app/components/Viewer/Options/OptionsSection.vue
@@ -0,0 +1,74 @@
+<script setup>
+const { title } = defineProps({
+  title: { type: String, required: true },
+});
+
+const isCollapsed = ref(false);
+</script>
+
+<template>
+  <div class="options-section">
+    <div class="section-badge" @click="isCollapsed = !isCollapsed">
+      {{ title }}
+      <v-icon class="collapse-icon" :class="{ rotated: isCollapsed }" size="12">
+        mdi-chevron-down
+      </v-icon>
+    </div>
+    <v-container v-show="!isCollapsed" class="pa-2">
+      <slot />
+    </v-container>
+  </div>
+</template>
+
+<style scoped>
+.options-section {
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px 8px 8px 8px;
+}
+
+.section-badge {
+  position: absolute;
+  top: -12px;
+  left: 16px;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  padding: 2px 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.section-badge:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.collapse-icon {
+  transition: transform 0.2s ease;
+}
+
+.collapse-icon.rotated {
+  transform: rotate(-90deg);
+}
+
+.v-theme--light .options-section {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+.v-theme--light .section-badge {
+  background-color: white;
+  color: #444;
+  border-color: rgba(0, 0, 0, 0.12);
+}
+</style>
diff --git a/app/stores/data.js b/app/stores/data.js
index 4fe00717..2f0f4484 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -45,23 +45,23 @@ export const useDataStore = defineStore("data", () => {
 
     const componentsByType = {};
     for (const component_item of items) {
-      if (componentTitles[component_item.type]) {
-        if (!componentsByType[component_item.type]) {
-          componentsByType[component_item.type] = [];
+      if (componentTitles[component_item.componentType]) {
+        if (!componentsByType[component_item.componentType]) {
+          componentsByType[component_item.componentType] = [];
         }
-        componentsByType[component_item.type].push(component_item);
+        componentsByType[component_item.componentType].push(component_item);
       }
     }
 
     return Object.keys(componentTitles)
-      .filter((type) => componentsByType[type])
-      .map((type) => ({
-        id: type,
-        title: componentTitles[type],
-        children: componentsByType[type].map((meshComponent) => ({
+      .filter((componentType) => componentsByType[componentType])
+      .map((componentType) => ({
+        id: componentType,
+        title: componentTitles[componentType],
+        children: componentsByType[componentType].map((meshComponent) => ({
           id: meshComponent.geode_id,
           title: meshComponent.name,
-          category: meshComponent.type,
+          category: meshComponent.componentType,
           is_active: meshComponent.is_active,
         })),
       }));
@@ -82,7 +82,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .equals([modelId, geode_id])
       .first();
-    return component?.type;
+    return component?.componentType;
   }
 
   async function registerObject(id) {
@@ -113,7 +113,7 @@ export const useDataStore = defineStore("data", () => {
         allComponents.push({
           id: new_item.id,
           geode_id: component.geode_id,
-          type: component.type,
+          componentType: component.type,
           viewer_id: component.viewer_id,
           name: component.name,
           is_active: component.is_active,
@@ -184,10 +184,10 @@ export const useDataStore = defineStore("data", () => {
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
-  async function getMeshComponentGeodeIds(modelId, component_type) {
+  async function getMeshComponentGeodeIds(modelId, componentType) {
     const components = await database.model_components
-      .where("[id+type]")
-      .equals([modelId, component_type])
+      .where("[id+componentType]")
+      .equals([modelId, componentType])
       .toArray();
     return components.map((component) => component.geode_id);
   }
diff --git a/app/utils/color.js b/app/utils/color.js
deleted file mode 100644
index 2f060ca9..00000000
--- a/app/utils/color.js
+++ /dev/null
@@ -1,32 +0,0 @@
-export function getDeterministicColor(identifier) {
-  const CIRCLE_DEGREES = 360;
-  const HASH_PRIME = 31;
-  const DEGREES_PER_STEP = 30;
-  const STEPS_COUNT = 12;
-  const BASE_LIGHTNESS = 0.5;
-  const VIBRANCY_RANGE = 0.35;
-  const MIRROR_MAX = 9;
-  const RGB_MAX = 255;
-  const PHASE_GREEN = 8;
-
-  if (!identifier) {
-    return { r: 128, g: 128, b: 128 };
-  }
-  let hash_accumulator = 0;
-  for (let index = 0; index < identifier.length; index += 1) {
-    hash_accumulator = identifier.codePointAt(index) + hash_accumulator * HASH_PRIME;
-  }
-  const hue_angle = Math.abs(hash_accumulator % CIRCLE_DEGREES);
-
-  function to_component_value(phase_shift) {
-    const step = (phase_shift + hue_angle / DEGREES_PER_STEP) % STEPS_COUNT;
-    const intensity =
-      BASE_LIGHTNESS - VIBRANCY_RANGE * Math.max(Math.min(step - 3, MIRROR_MAX - step, 1), -1);
-    return Math.round(RGB_MAX * intensity);
-  }
-  return {
-    r: to_component_value(0),
-    g: to_component_value(PHASE_GREEN),
-    b: to_component_value(4),
-  };
-}
diff --git a/app/utils/default_styles.js b/app/utils/default_styles.js
index d2690611..1e175457 100644
--- a/app/utils/default_styles.js
+++ b/app/utils/default_styles.js
@@ -21,6 +21,15 @@ const surfaces_defaultColor = { r: 255, g: 255, b: 255 };
 const blocks_defaultVisibility = true;
 const blocks_defaultColor = { r: 255, g: 255, b: 255 };
 
+const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
+  Corner: corners_defaultColor,
+  Line: lines_defaultColor,
+  Surface: surfaces_defaultColor,
+  Block: blocks_defaultColor,
+};
+
+const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
+
 // Mesh functions
 function meshPointsDefaultStyle(
   visibility = points_defaultVisibility,
@@ -315,4 +324,4 @@ function getDefaultStyle(type) {
   return default_styles()[type];
 }
 
-export { getDefaultStyle };
+export { getDefaultStyle, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES };
diff --git a/internal/database/tables/model_component_type_datastyle.js b/internal/database/tables/model_component_type_datastyle.js
index edb2734a..9a3f6d04 100644
--- a/internal/database/tables/model_component_type_datastyle.js
+++ b/internal/database/tables/model_component_type_datastyle.js
@@ -1,4 +1,4 @@
 export const modelComponentTypeDataStyleTable = {
   name: "model_component_type_datastyle",
-  schema: "[id_model+type], id_model",
+  schema: "[id_model+componentType], id_model",
 };
diff --git a/internal/database/tables/model_components.js b/internal/database/tables/model_components.js
index 76966d91..7f864c93 100644
--- a/internal/database/tables/model_components.js
+++ b/internal/database/tables/model_components.js
@@ -1,4 +1,4 @@
 export const modelComponentsTable = {
   name: "model_components",
-  schema: "[id+geode_id], [id+type], viewer_id, name, is_active",
+  schema: "[id+geode_id], [id+componentType], viewer_id, name, is_active",
 };
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 7c36aa8b..c372dc74 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -1,15 +1,16 @@
-import { useDataStore } from "@ogw_front/stores/data";
+import { useModelBlocksCommonStyle } from "./common";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 
 export function useModelBlocksColor() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+
+  function modelBlockColor(id, block_id) {
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
+  }
 
   function setModelBlocksColor(modelId, componentIds, color, color_mode = "constant") {
     return modelCommonStyle.setModelTypeColor(
@@ -17,13 +18,9 @@ export function useModelBlocksColor() {
       componentIds,
       color,
       schema,
-      {
-        dataStore,
-        viewerStore,
-      },
       color_mode,
     );
   }
 
-  return { setModelBlocksColor };
+  return { setModelBlocksColor, modelBlockColor };
 }
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
index 6864744c..bbae4166 100644
--- a/internal/stores/data_style/model/blocks/visibility.js
+++ b/internal/stores/data_style/model/blocks/visibility.js
@@ -1,21 +1,20 @@
-import { useDataStore } from "@ogw_front/stores/data";
+import { useModelBlocksCommonStyle } from "./common";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.visibility;
 
 export function useModelBlocksVisibility() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+
+  function modelBlockVisibility(id, block_id) {
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).visibility;
+  }
 
   function setModelBlocksVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
-      dataStore,
-      viewerStore,
-    });
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
   }
 
-  return { setModelBlocksVisibility };
+  return { setModelBlocksVisibility, modelBlockVisibility };
 }
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 95a5725e..9255710a 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -1,4 +1,4 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "@ogw_front/utils/default_styles";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -15,37 +15,39 @@ function useModelColorStyle(componentStyleFunctions) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
 
-  function getModelComponentEffectiveColor(modelId, componentId, type) {
+  function getModelComponentEffectiveColor(modelId, componentId, componentType) {
     const individualColor = getModelComponentColor(modelId, componentId);
     if (individualColor !== undefined) {
       return individualColor;
     }
-    return getModelComponentTypeColor(modelId, type);
+    return getModelComponentTypeColor(modelId, componentType);
   }
 
   function getModelComponentColorMode(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
   }
 
-  function getModelComponentTypeColor(modelId, type) {
+  function getModelComponentTypeColor(modelId, componentType) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
-      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
+      dataStyleState.getModelComponentTypeStyle(modelId, componentType).color ||
+      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[componentType]
     );
   }
 
-  function getModelComponentTypeColorMode(modelId, type) {
-    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
+  function getModelComponentTypeColorMode(modelId, componentType) {
+    return (
+      dataStyleState.getModelComponentTypeStyle(modelId, componentType).color_mode || "constant"
+    );
   }
 
-  async function setModelComponentTypeColor(modelId, type, color) {
+  async function setModelComponentTypeColor(modelId, componentType, color) {
     viewerStore.start_request();
     try {
-      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
         color,
         color_mode: "constant",
       });
-      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
       if (idsForType.length === 0) {
         return;
       }
@@ -55,11 +57,11 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
+  async function setModelComponentTypeColorMode(modelId, componentType, color_mode) {
     viewerStore.start_request();
     try {
-      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode });
-      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, { color_mode });
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
       if (idsForType.length === 0) {
         return;
       }
@@ -94,7 +96,7 @@ function useModelColorStyle(componentStyleFunctions) {
         modelId,
         componentIds,
         "Color",
-        { dataStore, componentStyleFunctions, viewerStore },
+        { componentStyleFunctions },
         color,
         color_mode,
       );
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index 86f883d5..846392b4 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -1,7 +1,12 @@
 import { database } from "@ogw_internal/database/database";
 import merge from "lodash/merge";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useViewerStore } from "@ogw_front/stores/viewer";
 
 export function useModelCommonStyle() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+
   async function mutateComponentStyle(id_model, id_component, values) {
     const table = database.model_component_datastyle;
     const key = [id_model, id_component];
@@ -10,11 +15,11 @@ export function useModelCommonStyle() {
     return table.put(structuredClone(toRaw(entry)));
   }
 
-  function mutateModelComponentTypeStyle(id_model, type, values) {
+  function mutateModelComponentTypeStyle(id_model, componentType, values) {
     return database.transaction("rw", database.model_component_type_datastyle, async () => {
       const table = database.model_component_type_datastyle;
-      const key = [id_model, type];
-      const entry = (await table.get(key)) || { id_model, type };
+      const key = [id_model, componentType];
+      const entry = (await table.get(key)) || { id_model, componentType };
       merge(entry, values);
       return table.put(structuredClone(toRaw(entry)));
     });
@@ -60,14 +65,7 @@ export function useModelCommonStyle() {
     });
   }
 
-  async function setModelTypeColor(
-    id,
-    component_ids,
-    color,
-    schema,
-    { dataStore, viewerStore },
-    color_mode = "constant",
-  ) {
+  async function setModelTypeColor(id, component_ids, color, schema, color_mode = "constant") {
     if (!component_ids?.length) {
       return;
     }
@@ -96,13 +94,7 @@ export function useModelCommonStyle() {
     );
   }
 
-  async function setModelTypeVisibility(
-    id,
-    component_ids,
-    visibility,
-    schema,
-    { dataStore, viewerStore },
-  ) {
+  async function setModelTypeVisibility(id, component_ids, visibility, schema) {
     if (!component_ids?.length) {
       return;
     }
diff --git a/internal/stores/data_style/model/constants.js b/internal/stores/data_style/model/constants.js
deleted file mode 100644
index c2be7c5c..00000000
--- a/internal/stores/data_style/model/constants.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getDefaultStyle } from "@ogw_front/utils/default_styles";
-
-const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
-
-const brepDefaults = getDefaultStyle("BRep");
-const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
-  Corner: brepDefaults.corners.color,
-  Line: brepDefaults.lines.color,
-  Surface: brepDefaults.surfaces.color,
-  Block: brepDefaults.blocks.color,
-};
-
-export { MESH_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS };
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 99622b28..60c5c168 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -1,14 +1,16 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelCornersCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
 
 export function useModelCornersColor() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelCornersCommonStyle = useModelCornersCommonStyle();
+
+  function modelCornerColor(id, corner_id) {
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
+  }
 
   function setModelCornersColor(modelId, componentIds, color, color_mode = "constant") {
     return modelCommonStyle.setModelTypeColor(
@@ -16,13 +18,9 @@ export function useModelCornersColor() {
       componentIds,
       color,
       schema,
-      {
-        dataStore,
-        viewerStore,
-      },
       color_mode,
     );
   }
 
-  return { setModelCornersColor };
+  return { setModelCornersColor, modelCornerColor };
 }
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
index bbc984cb..a23877aa 100644
--- a/internal/stores/data_style/model/corners/visibility.js
+++ b/internal/stores/data_style/model/corners/visibility.js
@@ -1,21 +1,20 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelCornersCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.visibility;
 
 export function useModelCornersVisibility() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelCornersCommonStyle = useModelCornersCommonStyle();
+
+  function modelCornerVisibility(id, corner_id) {
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
+  }
 
   function setModelCornersVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
-      dataStore,
-      viewerStore,
-    });
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
   }
 
-  return { setModelCornersVisibility };
+  return { setModelCornersVisibility, modelCornerVisibility };
 }
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index a1cc7477..065a10cf 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,4 +1,3 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES } from "./constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelBlocksStyle } from "./blocks";
@@ -84,4 +83,4 @@ function useModelStyle() {
   };
 }
 
-export { MESH_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, useModelStyle };
+export { useModelStyle };
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 440e54c3..69be6bb4 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -1,14 +1,16 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelLinesCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
 
 export function useModelLinesColor() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+
+  function modelLineColor(id, line_id) {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
+  }
 
   function setModelLinesColor(modelId, componentIds, color, color_mode = "constant") {
     return modelCommonStyle.setModelTypeColor(
@@ -16,13 +18,9 @@ export function useModelLinesColor() {
       componentIds,
       color,
       schema,
-      {
-        dataStore,
-        viewerStore,
-      },
       color_mode,
     );
   }
 
-  return { setModelLinesColor };
+  return { setModelLinesColor, modelLineColor };
 }
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
index 01b7de92..39e45992 100644
--- a/internal/stores/data_style/model/lines/visibility.js
+++ b/internal/stores/data_style/model/lines/visibility.js
@@ -1,21 +1,20 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelLinesCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.visibility;
 
 export function useModelLinesVisibility() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+
+  function modelLineVisibility(id, line_id) {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
+  }
 
   function setModelLinesVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
-      dataStore,
-      viewerStore,
-    });
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
   }
 
-  return { setModelLinesVisibility };
+  return { setModelLinesVisibility, modelLineVisibility };
 }
diff --git a/internal/stores/data_style/model/selection.js b/internal/stores/data_style/model/selection.js
index caed076a..063423af 100644
--- a/internal/stores/data_style/model/selection.js
+++ b/internal/stores/data_style/model/selection.js
@@ -1,25 +1,27 @@
-import { MESH_TYPES } from "./constants";
+import { MESH_TYPES } from "@ogw_front/utils/default_styles";
 import { database } from "@ogw_internal/database/database";
 import { liveQuery } from "dexie";
 
 function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyleState) {
-  const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+  const componentsByType = Object.fromEntries(
+    MESH_TYPES.map((componentType) => [componentType, []]),
+  );
   for (const component of components) {
-    if (componentsByType[component.type]) {
-      componentsByType[component.type].push(component);
+    if (componentsByType[component.componentType]) {
+      componentsByType[component.componentType].push(component);
     }
   }
 
   const groupStyles = dataStyleState.getStyle(modelId);
   const selection = [];
-  for (const type of MESH_TYPES) {
-    const typeComponents = componentsByType[type];
+  for (const componentType of MESH_TYPES) {
+    const typeComponents = componentsByType[componentType];
     if (typeComponents.length === 0) {
       continue;
     }
 
-    const typeKey = `${type.toLowerCase()}s`;
-    const typeStyle = typeStylesMap[type];
+    const typeKey = `${componentType.toLowerCase()}s`;
+    const typeStyle = typeStylesMap[componentType];
     const defaultVisibility = typeStyle?.visibility ?? groupStyles[typeKey]?.visibility ?? true;
 
     let allVisible = true;
@@ -32,7 +34,7 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
       }
     }
     if (allVisible) {
-      selection.push(type);
+      selection.push(componentType);
     }
   }
   return selection;
@@ -61,7 +63,9 @@ function useModelSelection(id_ref, dataStyleState) {
         const stylesMap = Object.fromEntries(
           componentStyles.map((style) => [style.id_component, style]),
         );
-        const typeStylesMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
+        const typeStylesMap = Object.fromEntries(
+          typeStyles.map((style) => [style.componentType, style]),
+        );
 
         return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
       });
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 6a4282dc..3f09f13d 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -1,14 +1,16 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelSurfacesCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
 
 export function useModelSurfacesColor() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
+  function modelSurfaceColor(id, surface_id) {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
+  }
 
   function setModelSurfacesColor(modelId, componentIds, color, color_mode = "constant") {
     return modelCommonStyle.setModelTypeColor(
@@ -16,13 +18,9 @@ export function useModelSurfacesColor() {
       componentIds,
       color,
       schema,
-      {
-        dataStore,
-        viewerStore,
-      },
       color_mode,
     );
   }
 
-  return { setModelSurfacesColor };
+  return { setModelSurfacesColor, modelSurfaceColor };
 }
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
index 08d0f0ed..5d6ae867 100644
--- a/internal/stores/data_style/model/surfaces/visibility.js
+++ b/internal/stores/data_style/model/surfaces/visibility.js
@@ -1,22 +1,20 @@
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-
+import { useModelSurfacesCommonStyle } from "./common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.visibility;
 
 export function useModelSurfacesVisibility() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
+  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
+  function modelSurfaceVisibility(id, surface_id) {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
+  }
 
   function setModelSurfacesVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema, {
-      dataStore,
-      viewerStore,
-    });
+    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
   }
 
-  return { setModelSurfacesVisibility };
+  return { setModelSurfacesVisibility, modelSurfaceVisibility };
 }
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 4bd9d227..62ddcbf3 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -1,4 +1,4 @@
-import { MESH_TYPES } from "./constants";
+import { MESH_TYPES } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -8,11 +8,12 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
-async function getModelComponentsMap(modelId, dataStore) {
+async function getModelComponentsMap(modelId) {
+  const dataStore = useDataStore();
   const results = await Promise.all(
-    MESH_TYPES.map(async (type) => {
-      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
-      return geodeIds.map((geode_id) => ({ geode_id, type }));
+    MESH_TYPES.map(async (componentType) => {
+      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
+      return geodeIds.map((geode_id) => ({ geode_id, componentType }));
     }),
   );
   const allComponents = results.flat();
@@ -28,10 +29,10 @@ async function dispatchToComponentTypes(
   modelId,
   componentIds,
   action,
-  { dataStore, componentStyleFunctions },
+  { componentStyleFunctions },
   ...args
 ) {
-  const { componentsMap } = await getModelComponentsMap(modelId, dataStore);
+  const { componentsMap } = await getModelComponentsMap(modelId);
 
   const idsByComponent = {
     Block: [],
@@ -41,9 +42,9 @@ async function dispatchToComponentTypes(
   };
 
   for (const id of componentIds) {
-    const type = componentsMap[id]?.type;
-    if (type && idsByComponent[type]) {
-      idsByComponent[type].push(id);
+    const componentType = componentsMap[id]?.componentType;
+    if (componentType && idsByComponent[componentType]) {
+      idsByComponent[componentType].push(id);
     }
   }
 
@@ -157,7 +158,7 @@ function useModelVisibilityStyle(componentStyleFunctions) {
             modelId,
             individualIds,
             "Visibility",
-            { dataStore, componentStyleFunctions, viewerStore },
+            { componentStyleFunctions },
             visibility,
           ),
         );
@@ -168,13 +169,13 @@ function useModelVisibilityStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentTypeVisibility(modelId, type, visibility) {
+  async function setModelComponentTypeVisibility(modelId, componentType, visibility) {
     viewerStore.start_request();
     try {
-      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
         visibility,
       });
-      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
       if (idsForType.length === 0) {
         return;
       }
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index 62f762d0..d8d15880 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -38,7 +38,7 @@ export function useDataStyleState() {
       const all = await database.model_component_type_datastyle.toArray();
       const accumulator = {};
       for (const style of all) {
-        const key = `${style.id_model}_${style.type}`;
+        const key = `${style.id_model}_${style.componentType}`;
         accumulator[key] = style;
       }
       return accumulator;
@@ -74,8 +74,8 @@ export function useDataStyleState() {
     return componentStyles.value[key] || {};
   }
 
-  function getModelComponentTypeStyle(id_model, type) {
-    const key = `${id_model}_${type}`;
+  function getModelComponentTypeStyle(id_model, componentType) {
+    const key = `${id_model}_${componentType}`;
     return modelComponentTypeStyles.value[key] || {};
   }
 

From 3b0de45aff1484f5f7c694edbea69343f1ca057b Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:26:50 +0000
Subject: [PATCH 30/34] Apply prepare changes

---
 internal/stores/data_style/model/blocks/color.js   | 8 +-------
 internal/stores/data_style/model/corners/color.js  | 8 +-------
 internal/stores/data_style/model/lines/color.js    | 8 +-------
 internal/stores/data_style/model/surfaces/color.js | 8 +-------
 4 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index c372dc74..31ecbd7e 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -13,13 +13,7 @@ export function useModelBlocksColor() {
   }
 
   function setModelBlocksColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(
-      modelId,
-      componentIds,
-      color,
-      schema,
-      color_mode,
-    );
+    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
   }
 
   return { setModelBlocksColor, modelBlockColor };
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 60c5c168..4febedc9 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -13,13 +13,7 @@ export function useModelCornersColor() {
   }
 
   function setModelCornersColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(
-      modelId,
-      componentIds,
-      color,
-      schema,
-      color_mode,
-    );
+    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
   }
 
   return { setModelCornersColor, modelCornerColor };
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 69be6bb4..e798e738 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -13,13 +13,7 @@ export function useModelLinesColor() {
   }
 
   function setModelLinesColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(
-      modelId,
-      componentIds,
-      color,
-      schema,
-      color_mode,
-    );
+    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
   }
 
   return { setModelLinesColor, modelLineColor };
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 3f09f13d..7e171406 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -13,13 +13,7 @@ export function useModelSurfacesColor() {
   }
 
   function setModelSurfacesColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(
-      modelId,
-      componentIds,
-      color,
-      schema,
-      color_mode,
-    );
+    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
   }
 
   return { setModelSurfacesColor, modelSurfaceColor };

From be059f4ae893a9f280cd9f2fc8c52b7e37e5a30b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 14:45:56 +0200
Subject: [PATCH 31/34] no longer return consstant color

---
 internal/stores/data_style/model/common.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index 846392b4..d420433c 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -81,6 +81,11 @@ export function useModelCommonStyle() {
     }
 
     const colors = await viewerStore.request(schema, params);
+
+    if (color_mode === "constant" && color !== undefined) {
+      return mutateComponentStyles(id, component_ids, { color });
+    }
+
     if (!colors?.length) {
       return;
     }

From fd6d4d630307fdeea04c76d4b4f64f8ea41a69cb Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 16:47:43 +0200
Subject: [PATCH 32/34] renames and refacto

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 16 +++---
 app/stores/data.js                            | 30 +++++------
 app/utils/local/scripts.js                    | 27 +++++++++-
 .../tables/model_component_type_datastyle.js  |  2 +-
 internal/database/tables/model_components.js  |  2 +-
 .../stores/data_style/model/blocks/color.js   |  4 +-
 .../stores/data_style/model/blocks/common.js  | 13 +----
 .../stores/data_style/model/blocks/index.js   | 20 +++----
 .../data_style/model/blocks/visibility.js     |  4 +-
 internal/stores/data_style/model/color.js     | 28 +++++-----
 internal/stores/data_style/model/common.js    | 52 +++++++++++--------
 .../stores/data_style/model/corners/color.js  |  4 +-
 .../stores/data_style/model/corners/common.js | 13 +----
 .../stores/data_style/model/corners/index.js  | 20 +++----
 .../data_style/model/corners/visibility.js    |  4 +-
 .../stores/data_style/model/lines/color.js    |  4 +-
 .../stores/data_style/model/lines/common.js   | 14 +----
 .../stores/data_style/model/lines/index.js    | 20 +++----
 .../data_style/model/lines/visibility.js      |  4 +-
 internal/stores/data_style/model/selection.js |  6 +--
 .../stores/data_style/model/surfaces/color.js |  4 +-
 .../data_style/model/surfaces/common.js       | 13 +----
 .../stores/data_style/model/surfaces/index.js | 20 +++----
 .../data_style/model/surfaces/visibility.js   |  4 +-
 .../stores/data_style/model/visibility.js     | 12 ++---
 internal/stores/data_style/state.js           |  6 +--
 .../data_style/model/blocks.nuxt.test.js      | 34 ++++++++----
 .../data_style/model/corners.nuxt.test.js     | 34 ++++++++----
 .../data_style/model/lines.nuxt.test.js       | 34 ++++++++----
 .../data_style/model/surfaces.nuxt.test.js    | 34 ++++++++----
 30 files changed, 259 insertions(+), 223 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 390775d9..5e0f737f 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -31,19 +31,19 @@ watchEffect(async () => {
 
 const modelVisibility = computed({
   get: () => dataStyleStore.modelVisibility(modelId.value),
-  set: async (isVisible) => {
-    await dataStyleStore.setModelVisibility(modelId.value, isVisible);
+  set: async (newValue) => {
+    await dataStyleStore.setModelVisibility(modelId.value, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
 const modelComponentTypeVisibility = computed({
   get: () => selection.value.includes(componentType.value),
-  set: async (isVisible) => {
+  set: async (newValue) => {
     await dataStyleStore.setModelComponentTypeVisibility(
       modelId.value,
       componentType.value,
-      isVisible,
+      newValue,
     );
     hybridViewerStore.remoteRender();
   },
@@ -51,12 +51,8 @@ const modelComponentTypeVisibility = computed({
 
 const componentVisibility = computed({
   get: () => selection.value.includes(componentId.value),
-  set: async (isVisible) => {
-    await dataStyleStore.setModelComponentsVisibility(
-      modelId.value,
-      [componentId.value],
-      isVisible,
-    );
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], newValue);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/stores/data.js b/app/stores/data.js
index 2f0f4484..724d312f 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -45,23 +45,23 @@ export const useDataStore = defineStore("data", () => {
 
     const componentsByType = {};
     for (const component_item of items) {
-      if (componentTitles[component_item.componentType]) {
-        if (!componentsByType[component_item.componentType]) {
-          componentsByType[component_item.componentType] = [];
+      if (componentTitles[component_item.type]) {
+        if (!componentsByType[component_item.type]) {
+          componentsByType[component_item.type] = [];
         }
-        componentsByType[component_item.componentType].push(component_item);
+        componentsByType[component_item.type].push(component_item);
       }
     }
 
     return Object.keys(componentTitles)
-      .filter((componentType) => componentsByType[componentType])
-      .map((componentType) => ({
-        id: componentType,
-        title: componentTitles[componentType],
-        children: componentsByType[componentType].map((meshComponent) => ({
+      .filter((type) => componentsByType[type])
+      .map((type) => ({
+        id: type,
+        title: componentTitles[type],
+        children: componentsByType[type].map((meshComponent) => ({
           id: meshComponent.geode_id,
           title: meshComponent.name,
-          category: meshComponent.componentType,
+          category: meshComponent.type,
           is_active: meshComponent.is_active,
         })),
       }));
@@ -82,7 +82,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .equals([modelId, geode_id])
       .first();
-    return component?.componentType;
+    return component?.type;
   }
 
   async function registerObject(id) {
@@ -113,7 +113,7 @@ export const useDataStore = defineStore("data", () => {
         allComponents.push({
           id: new_item.id,
           geode_id: component.geode_id,
-          componentType: component.type,
+          type: component.type,
           viewer_id: component.viewer_id,
           name: component.name,
           is_active: component.is_active,
@@ -184,10 +184,10 @@ export const useDataStore = defineStore("data", () => {
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
-  async function getMeshComponentGeodeIds(modelId, componentType) {
+  async function getMeshComponentGeodeIds(modelId, type) {
     const components = await database.model_components
-      .where("[id+componentType]")
-      .equals([modelId, componentType])
+      .where("[id+type]")
+      .equals([modelId, type])
       .toArray();
     return components.map((component) => component.geode_id);
   }
diff --git a/app/utils/local/scripts.js b/app/utils/local/scripts.js
index 84459372..2f9b8808 100644
--- a/app/utils/local/scripts.js
+++ b/app/utils/local/scripts.js
@@ -8,9 +8,32 @@ import { appMode } from "./app_mode.js";
 
 function commandExistsSync(execName) {
   const envPath = process.env.PATH || "";
-  return envPath.split(path.delimiter).some((dir) => {
+  const paths = envPath.split(path.delimiter);
+
+  let currentDir = process.cwd();
+  while (currentDir !== path.parse(currentDir).root) {
+    const venvScripts = path.join(
+      currentDir,
+      ".venv",
+      process.platform === "win32" ? "Scripts" : "bin",
+    );
+    if (fs.existsSync(venvScripts)) {
+      paths.unshift(venvScripts);
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+
+  return paths.some((dir) => {
     const filePath = path.join(dir, execName);
-    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) return true;
+    if (process.platform === "win32") {
+      return [".exe", ".cmd", ".bat", ".ps1"].some((ext) => {
+        const withExt = `${filePath}${ext}`;
+        return fs.existsSync(withExt) && fs.statSync(withExt).isFile();
+      });
+    }
+    return false;
   });
 }
 
diff --git a/internal/database/tables/model_component_type_datastyle.js b/internal/database/tables/model_component_type_datastyle.js
index 9a3f6d04..edb2734a 100644
--- a/internal/database/tables/model_component_type_datastyle.js
+++ b/internal/database/tables/model_component_type_datastyle.js
@@ -1,4 +1,4 @@
 export const modelComponentTypeDataStyleTable = {
   name: "model_component_type_datastyle",
-  schema: "[id_model+componentType], id_model",
+  schema: "[id_model+type], id_model",
 };
diff --git a/internal/database/tables/model_components.js b/internal/database/tables/model_components.js
index 7f864c93..76966d91 100644
--- a/internal/database/tables/model_components.js
+++ b/internal/database/tables/model_components.js
@@ -1,4 +1,4 @@
 export const modelComponentsTable = {
   name: "model_components",
-  schema: "[id+geode_id], [id+componentType], viewer_id, name, is_active",
+  schema: "[id+geode_id], [id+type], viewer_id, name, is_active",
 };
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 31ecbd7e..eca644fa 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -12,8 +12,8 @@ export function useModelBlocksColor() {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
   }
 
-  function setModelBlocksColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
+  function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
   }
 
   return { setModelBlocksColor, modelBlockColor };
diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index 8d2d3365..0e84faa1 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -16,27 +16,18 @@ export function useModelBlocksCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelBlocksStyle(id, block_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, block_ids, values);
+  function mutateModelBlocksStyle(id, blocks_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, values);
   }
 
   function mutateModelBlockStyle(id, block_id, values) {
     return modelCommonStyle.mutateComponentStyle(id, block_id, values);
   }
 
-  function modelBlockVisibility(id, block_id) {
-    return modelBlockStyle(id, block_id).visibility;
-  }
-
-  function modelBlockColor(id, block_id) {
-    return modelBlockStyle(id, block_id).color;
-  }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
-    modelBlockVisibility,
-    modelBlockColor,
     mutateModelBlocksStyle,
     mutateModelBlockStyle,
   };
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 0754e073..ce6b4f5b 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -14,36 +14,36 @@ export function useModelBlocksStyle() {
   const colorStyle = useModelBlocksColor();
 
   async function applyModelBlocksStyle(modelId) {
-    const compIds = await dataStore.getBlocksGeodeIds(modelId);
-    if (!compIds?.length) {
+    const blocks_ids = await dataStore.getBlocksGeodeIds(modelId);
+    if (!blocks_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const compId of compIds) {
-      const style = commonStyle.modelBlockStyle(modelId, compId);
+    for (const block_id of blocks_ids) {
+      const style = commonStyle.modelBlockStyle(modelId, block_id);
 
       const visibility = String(style.visibility);
       if (!visibilityGroups[visibility]) {
         visibilityGroups[visibility] = [];
       }
-      visibilityGroups[visibility].push(compId);
+      visibilityGroups[visibility].push(block_id);
 
       const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, blocks_ids: [] };
       }
-      colorGroups[cKey].compIds.push(compId);
+      colorGroups[color_key].blocks_ids.push(block_id);
     }
 
     const promises = [
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         visibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+      ...Object.values(colorGroups).map(({ color_mode, color, blocks_ids: ids }) =>
         colorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
       ),
     ];
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
index bbae4166..43cf3c8d 100644
--- a/internal/stores/data_style/model/blocks/visibility.js
+++ b/internal/stores/data_style/model/blocks/visibility.js
@@ -12,8 +12,8 @@ export function useModelBlocksVisibility() {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).visibility;
   }
 
-  function setModelBlocksVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
+  function setModelBlocksVisibility(modelId, blocks_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, blocks_ids, visibility, schema);
   }
 
   return { setModelBlocksVisibility, modelBlockVisibility };
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 9255710a..5b4d3287 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -15,39 +15,37 @@ function useModelColorStyle(componentStyleFunctions) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
 
-  function getModelComponentEffectiveColor(modelId, componentId, componentType) {
+  function getModelComponentEffectiveColor(modelId, componentId, type) {
     const individualColor = getModelComponentColor(modelId, componentId);
     if (individualColor !== undefined) {
       return individualColor;
     }
-    return getModelComponentTypeColor(modelId, componentType);
+    return getModelComponentTypeColor(modelId, type);
   }
 
   function getModelComponentColorMode(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
   }
 
-  function getModelComponentTypeColor(modelId, componentType) {
+  function getModelComponentTypeColor(modelId, type) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, componentType).color ||
-      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[componentType]
+      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
+      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
     );
   }
 
-  function getModelComponentTypeColorMode(modelId, componentType) {
-    return (
-      dataStyleState.getModelComponentTypeStyle(modelId, componentType).color_mode || "constant"
-    );
+  function getModelComponentTypeColorMode(modelId, type) {
+    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
   }
 
-  async function setModelComponentTypeColor(modelId, componentType, color) {
+  async function setModelComponentTypeColor(modelId, type, color) {
     viewerStore.start_request();
     try {
-      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
         color,
         color_mode: "constant",
       });
-      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
       if (idsForType.length === 0) {
         return;
       }
@@ -57,11 +55,11 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentTypeColorMode(modelId, componentType, color_mode) {
+  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
     viewerStore.start_request();
     try {
-      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, { color_mode });
-      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
+      await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+      const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
       if (idsForType.length === 0) {
         return;
       }
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index d420433c..37998766 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -15,11 +15,11 @@ export function useModelCommonStyle() {
     return table.put(structuredClone(toRaw(entry)));
   }
 
-  function mutateModelComponentTypeStyle(id_model, componentType, values) {
+  function mutateModelComponentTypeStyle(id_model, type, values) {
     return database.transaction("rw", database.model_component_type_datastyle, async () => {
       const table = database.model_component_type_datastyle;
-      const key = [id_model, componentType];
-      const entry = (await table.get(key)) || { id_model, componentType };
+      const key = [id_model, type];
+      const entry = (await table.get(key)) || { id_model, type };
       merge(entry, values);
       return table.put(structuredClone(toRaw(entry)));
     });
@@ -80,23 +80,26 @@ export function useModelCommonStyle() {
       params.color = color;
     }
 
-    const colors = await viewerStore.request(schema, params);
-
-    if (color_mode === "constant" && color !== undefined) {
-      return mutateComponentStyles(id, component_ids, { color });
-    }
-
-    if (!colors?.length) {
-      return;
-    }
-
-    return bulkMutateComponentStylesPerComponent(
-      id,
-      colors.map(({ geode_id, color: color_value }) => ({
-        id_component: geode_id,
-        values: { color: color_value },
-      })),
-    );
+    return viewerStore.request(schema, params, {
+      response_function: async (colors) => {
+        if (color_mode === "constant" && color !== undefined) {
+          await mutateComponentStyles(id, component_ids, { color });
+          return;
+        }
+
+        if (!colors?.length) {
+          return;
+        }
+
+        await bulkMutateComponentStylesPerComponent(
+          id,
+          colors.map(({ geode_id, color: color_value }) => ({
+            id_component: geode_id,
+            values: { color: color_value },
+          })),
+        );
+      },
+    });
   }
 
   async function setModelTypeVisibility(id, component_ids, visibility, schema) {
@@ -109,8 +112,13 @@ export function useModelCommonStyle() {
       return;
     }
 
-    await viewerStore.request(schema, { id, block_ids: viewer_ids, visibility });
-    return mutateComponentStyles(id, component_ids, { visibility });
+    return viewerStore.request(
+      schema,
+      { id, block_ids: viewer_ids, visibility },
+      {
+        response_function: () => mutateComponentStyles(id, component_ids, { visibility }),
+      },
+    );
   }
 
   return {
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 4febedc9..f78d5453 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -12,8 +12,8 @@ export function useModelCornersColor() {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
   }
 
-  function setModelCornersColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
+  function setModelCornersColor(modelId, corners_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
   }
 
   return { setModelCornersColor, modelCornerColor };
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index 74103ea6..4b5bd782 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -16,27 +16,18 @@ export function useModelCornersCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelCornersStyle(id, corner_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, corner_ids, values);
+  function mutateModelCornersStyle(id, corners_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, corners_ids, values);
   }
 
   function mutateModelCornerStyle(id, corner_id, values) {
     return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
   }
 
-  function modelCornerVisibility(id, corner_id) {
-    return modelCornerStyle(id, corner_id).visibility;
-  }
-
-  function modelCornerColor(id, corner_id) {
-    return modelCornerStyle(id, corner_id).color;
-  }
 
   return {
     modelCornersStyle,
     modelCornerStyle,
-    modelCornerVisibility,
-    modelCornerColor,
     mutateModelCornersStyle,
     mutateModelCornerStyle,
   };
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 9e22644f..c81e9a5c 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -14,36 +14,36 @@ export function useModelCornersStyle() {
   const colorStyle = useModelCornersColor();
 
   async function applyModelCornersStyle(modelId) {
-    const compIds = await dataStore.getCornersGeodeIds(modelId);
-    if (!compIds?.length) {
+    const corners_ids = await dataStore.getCornersGeodeIds(modelId);
+    if (!corners_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const compId of compIds) {
-      const style = commonStyle.modelCornerStyle(modelId, compId);
+    for (const corner_id of corners_ids) {
+      const style = commonStyle.modelCornerStyle(modelId, corner_id);
 
       const visibility = String(style.visibility);
       if (!visibilityGroups[visibility]) {
         visibilityGroups[visibility] = [];
       }
-      visibilityGroups[visibility].push(compId);
+      visibilityGroups[visibility].push(corner_id);
 
       const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
       }
-      colorGroups[cKey].compIds.push(compId);
+      colorGroups[color_key].corners_ids.push(corner_id);
     }
 
     const promises = [
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         visibilityStyle.setModelCornersVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+      ...Object.values(colorGroups).map(({ color_mode, color, corners_ids: ids }) =>
         colorStyle.setModelCornersColor(modelId, ids, color, color_mode),
       ),
     ];
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
index a23877aa..44677be0 100644
--- a/internal/stores/data_style/model/corners/visibility.js
+++ b/internal/stores/data_style/model/corners/visibility.js
@@ -12,8 +12,8 @@ export function useModelCornersVisibility() {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
   }
 
-  function setModelCornersVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
+  function setModelCornersVisibility(modelId, corners_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, corners_ids, visibility, schema);
   }
 
   return { setModelCornersVisibility, modelCornerVisibility };
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index e798e738..70d95421 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -12,8 +12,8 @@ export function useModelLinesColor() {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
 
-  function setModelLinesColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
+  function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
   }
 
   return { setModelLinesColor, modelLineColor };
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index 2b2621e0..4576a645 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -16,27 +16,17 @@ export function useModelLinesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelLinesStyle(id, line_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, line_ids, values);
+  function mutateModelLinesStyle(id, lines_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, lines_ids, values);
   }
 
   function mutateModelLineStyle(id, line_id, values) {
     return modelCommonStyle.mutateComponentStyle(id, line_id, values);
   }
 
-  function modelLineVisibility(id, line_id) {
-    return modelLineStyle(id, line_id).visibility;
-  }
-
-  function modelLineColor(id, line_id) {
-    return modelLineStyle(id, line_id).color;
-  }
-
   return {
     modelLinesStyle,
     modelLineStyle,
-    modelLineVisibility,
-    modelLineColor,
     mutateModelLinesStyle,
     mutateModelLineStyle,
   };
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index afec4c7b..97913ddd 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -14,36 +14,36 @@ export function useModelLinesStyle() {
   const colorStyle = useModelLinesColor();
 
   async function applyModelLinesStyle(modelId) {
-    const compIds = await dataStore.getLinesGeodeIds(modelId);
-    if (!compIds?.length) {
+    const lines_ids = await dataStore.getLinesGeodeIds(modelId);
+    if (!lines_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const compId of compIds) {
-      const style = commonStyle.modelLineStyle(modelId, compId);
+    for (const line_id of lines_ids) {
+      const style = commonStyle.modelLineStyle(modelId, line_id);
 
       const visibility = String(style.visibility);
       if (!visibilityGroups[visibility]) {
         visibilityGroups[visibility] = [];
       }
-      visibilityGroups[visibility].push(compId);
+      visibilityGroups[visibility].push(line_id);
 
       const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
       }
-      colorGroups[cKey].compIds.push(compId);
+      colorGroups[color_key].lines_ids.push(line_id);
     }
 
     const promises = [
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         visibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+      ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
         colorStyle.setModelLinesColor(modelId, ids, color, color_mode),
       ),
     ];
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
index 39e45992..29f84d50 100644
--- a/internal/stores/data_style/model/lines/visibility.js
+++ b/internal/stores/data_style/model/lines/visibility.js
@@ -12,8 +12,8 @@ export function useModelLinesVisibility() {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
   }
 
-  function setModelLinesVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
+  function setModelLinesVisibility(modelId, lines_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, lines_ids, visibility, schema);
   }
 
   return { setModelLinesVisibility, modelLineVisibility };
diff --git a/internal/stores/data_style/model/selection.js b/internal/stores/data_style/model/selection.js
index 063423af..c42b1cd7 100644
--- a/internal/stores/data_style/model/selection.js
+++ b/internal/stores/data_style/model/selection.js
@@ -7,8 +7,8 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
     MESH_TYPES.map((componentType) => [componentType, []]),
   );
   for (const component of components) {
-    if (componentsByType[component.componentType]) {
-      componentsByType[component.componentType].push(component);
+    if (componentsByType[component.type]) {
+      componentsByType[component.type].push(component);
     }
   }
 
@@ -64,7 +64,7 @@ function useModelSelection(id_ref, dataStyleState) {
           componentStyles.map((style) => [style.id_component, style]),
         );
         const typeStylesMap = Object.fromEntries(
-          typeStyles.map((style) => [style.componentType, style]),
+          typeStyles.map((style) => [style.type, style]),
         );
 
         return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 7e171406..f76cd4e8 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -12,8 +12,8 @@ export function useModelSurfacesColor() {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
 
-  function setModelSurfacesColor(modelId, componentIds, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, componentIds, color, schema, color_mode);
+  function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
   }
 
   return { setModelSurfacesColor, modelSurfaceColor };
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index f96c341c..ef537df1 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -16,27 +16,18 @@ export function useModelSurfacesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelSurfacesStyle(id, surface_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, surface_ids, values);
+  function mutateModelSurfacesStyle(id, surfaces_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, values);
   }
 
   function mutateModelSurfaceStyle(id, surface_id, values) {
     return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
   }
 
-  function modelSurfaceVisibility(id, surface_id) {
-    return modelSurfaceStyle(id, surface_id).visibility;
-  }
-
-  function modelSurfaceColor(id, surface_id) {
-    return modelSurfaceStyle(id, surface_id).color;
-  }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
-    modelSurfaceVisibility,
-    modelSurfaceColor,
     mutateModelSurfacesStyle,
     mutateModelSurfaceStyle,
   };
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 6374f8bc..c533ef99 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -14,36 +14,36 @@ export function useModelSurfacesStyle() {
   const colorStyle = useModelSurfacesColor();
 
   async function applyModelSurfacesStyle(modelId) {
-    const compIds = await dataStore.getSurfacesGeodeIds(modelId);
-    if (!compIds?.length) {
+    const surfaces_ids = await dataStore.getSurfacesGeodeIds(modelId);
+    if (!surfaces_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const compId of compIds) {
-      const style = commonStyle.modelSurfaceStyle(modelId, compId);
+    for (const surfaces_id of surfaces_ids) {
+      const style = commonStyle.modelSurfaceStyle(modelId, surfaces_id);
 
       const visibility = String(style.visibility);
       if (!visibilityGroups[visibility]) {
         visibilityGroups[visibility] = [];
       }
-      visibilityGroups[visibility].push(compId);
+      visibilityGroups[visibility].push(surfaces_id);
 
       const color_mode = style.color_mode || "constant";
-      const cKey = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = { color_mode, color: style.color, compIds: [] };
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, surfaces_ids: [] };
       }
-      colorGroups[cKey].compIds.push(compId);
+      colorGroups[color_key].surfaces_ids.push(surfaces_id);
     }
 
     const promises = [
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         visibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, compIds: ids }) =>
+      ...Object.values(colorGroups).map(({ color_mode, color, surfaces_ids: ids }) =>
         colorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
       ),
     ];
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
index 5d6ae867..fd644f5d 100644
--- a/internal/stores/data_style/model/surfaces/visibility.js
+++ b/internal/stores/data_style/model/surfaces/visibility.js
@@ -12,8 +12,8 @@ export function useModelSurfacesVisibility() {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
   }
 
-  function setModelSurfacesVisibility(modelId, componentIds, visibility) {
-    return modelCommonStyle.setModelTypeVisibility(modelId, componentIds, visibility, schema);
+  function setModelSurfacesVisibility(modelId, surfaces_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, surfaces_ids, visibility, schema);
   }
 
   return { setModelSurfacesVisibility, modelSurfaceVisibility };
diff --git a/internal/stores/data_style/model/visibility.js b/internal/stores/data_style/model/visibility.js
index 62ddcbf3..5b22eca6 100644
--- a/internal/stores/data_style/model/visibility.js
+++ b/internal/stores/data_style/model/visibility.js
@@ -11,9 +11,9 @@ const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 async function getModelComponentsMap(modelId) {
   const dataStore = useDataStore();
   const results = await Promise.all(
-    MESH_TYPES.map(async (componentType) => {
-      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
-      return geodeIds.map((geode_id) => ({ geode_id, componentType }));
+    MESH_TYPES.map(async (type) => {
+      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      return geodeIds.map((geode_id) => ({ geode_id, type }));
     }),
   );
   const allComponents = results.flat();
@@ -42,9 +42,9 @@ async function dispatchToComponentTypes(
   };
 
   for (const id of componentIds) {
-    const componentType = componentsMap[id]?.componentType;
-    if (componentType && idsByComponent[componentType]) {
-      idsByComponent[componentType].push(id);
+    const type = componentsMap[id]?.type;
+    if (type && idsByComponent[type]) {
+      idsByComponent[type].push(id);
     }
   }
 
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index d8d15880..62f762d0 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -38,7 +38,7 @@ export function useDataStyleState() {
       const all = await database.model_component_type_datastyle.toArray();
       const accumulator = {};
       for (const style of all) {
-        const key = `${style.id_model}_${style.componentType}`;
+        const key = `${style.id_model}_${style.type}`;
         accumulator[key] = style;
       }
       return accumulator;
@@ -74,8 +74,8 @@ export function useDataStyleState() {
     return componentStyles.value[key] || {};
   }
 
-  function getModelComponentTypeStyle(id_model, componentType) {
-    const key = `${id_model}_${componentType}`;
+  function getModelComponentTypeStyle(id_model, type) {
+    const key = `${id_model}_${type}`;
     return modelComponentTypeStyles.value[key] || {};
   }
 
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index 053f0a66..e2349c38 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -51,11 +51,17 @@ describe("Model blocks", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_blocks_schemas.visibility, {
-        id,
-        block_ids: block_viewer_ids,
-        visibility,
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_blocks_schemas.visibility,
+        {
+          id,
+          block_ids: block_viewer_ids,
+          visibility,
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockVisibility(id, block_id)).toBe(visibility);
       }
@@ -74,12 +80,18 @@ describe("Model blocks", () => {
       const spy = vi.spyOn(viewerStore, "request");
       await dataStyleStore.setModelBlocksColor(id, block_ids, color);
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_blocks_schemas.color, {
-        id,
-        block_ids: block_viewer_ids,
-        color,
-        color_mode: "constant",
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_blocks_schemas.color,
+        {
+          id,
+          block_ids: block_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const block_id of block_ids) {
         expect(dataStyleStore.modelBlockColor(id, block_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index 5d2b0d4b..c69faa22 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -51,11 +51,17 @@ describe("Model corners", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_corners_schemas.visibility, {
-        id,
-        block_ids: corner_viewer_ids,
-        visibility,
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_corners_schemas.visibility,
+        {
+          id,
+          block_ids: corner_viewer_ids,
+          visibility,
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerVisibility(id, corner_id)).toBe(visibility);
       }
@@ -77,12 +83,18 @@ describe("Model corners", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_corners_schemas.color, {
-        id,
-        block_ids: corner_viewer_ids,
-        color,
-        color_mode: "constant",
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_corners_schemas.color,
+        {
+          id,
+          block_ids: corner_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const corner_id of corner_ids) {
         expect(dataStyleStore.modelCornerColor(id, corner_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index e2bc2aee..8ab3df87 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -51,11 +51,17 @@ describe("Model lines", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_lines_schemas.visibility, {
-        id,
-        block_ids: lines_viewer_ids,
-        visibility,
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_lines_schemas.visibility,
+        {
+          id,
+          block_ids: lines_viewer_ids,
+          visibility,
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineVisibility(id, line_id)).toBe(visibility);
       }
@@ -77,12 +83,18 @@ describe("Model lines", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_lines_schemas.color, {
-        id,
-        block_ids: lines_viewer_ids,
-        color,
-        color_mode: "constant",
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_lines_schemas.color,
+        {
+          id,
+          block_ids: lines_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const line_id of line_ids) {
         expect(dataStyleStore.modelLineColor(id, line_id)).toStrictEqual(color);
       }
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index d1ed49d9..ff8caa99 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -50,11 +50,17 @@ describe("model surfaces", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_surfaces_schemas.visibility, {
-        id,
-        block_ids: surface_viewer_ids,
-        visibility,
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_surfaces_schemas.visibility,
+        {
+          id,
+          block_ids: surface_viewer_ids,
+          visibility,
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceVisibility(id, surface_id)).toBe(visibility);
       }
@@ -76,12 +82,18 @@ describe("model surfaces", () => {
       expect(result).toBeInstanceOf(Promise);
       await result;
       await sleep(SLEEP_MS);
-      expect(spy).toHaveBeenCalledWith(model_surfaces_schemas.color, {
-        id,
-        block_ids: surface_viewer_ids,
-        color,
-        color_mode: "constant",
-      });
+      expect(spy).toHaveBeenCalledWith(
+        model_surfaces_schemas.color,
+        {
+          id,
+          block_ids: surface_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      );
       for (const surface_id of surface_ids) {
         expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(color);
       }

From 417da1e2230c5b6d4c34d253f1fac0fbe357a557 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 17 Apr 2026 14:48:21 +0000
Subject: [PATCH 33/34] Apply prepare changes

---
 internal/stores/data_style/model/blocks/common.js   | 1 -
 internal/stores/data_style/model/corners/common.js  | 1 -
 internal/stores/data_style/model/selection.js       | 4 +---
 internal/stores/data_style/model/surfaces/common.js | 1 -
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index 0e84faa1..c297f837 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -24,7 +24,6 @@ export function useModelBlocksCommonStyle() {
     return modelCommonStyle.mutateComponentStyle(id, block_id, values);
   }
 
-
   return {
     modelBlocksStyle,
     modelBlockStyle,
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index 4b5bd782..c426c084 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -24,7 +24,6 @@ export function useModelCornersCommonStyle() {
     return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
   }
 
-
   return {
     modelCornersStyle,
     modelCornerStyle,
diff --git a/internal/stores/data_style/model/selection.js b/internal/stores/data_style/model/selection.js
index c42b1cd7..f8020341 100644
--- a/internal/stores/data_style/model/selection.js
+++ b/internal/stores/data_style/model/selection.js
@@ -63,9 +63,7 @@ function useModelSelection(id_ref, dataStyleState) {
         const stylesMap = Object.fromEntries(
           componentStyles.map((style) => [style.id_component, style]),
         );
-        const typeStylesMap = Object.fromEntries(
-          typeStyles.map((style) => [style.type, style]),
-        );
+        const typeStylesMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
 
         return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
       });
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index ef537df1..5fc3e229 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -24,7 +24,6 @@ export function useModelSurfacesCommonStyle() {
     return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
   }
 
-
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,

From 3c2334e489a988062f81af035cba23f297fddbd0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 17 Apr 2026 16:48:34 +0200
Subject: [PATCH 34/34] revert

---
 app/utils/local/scripts.js | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/app/utils/local/scripts.js b/app/utils/local/scripts.js
index 2f9b8808..84459372 100644
--- a/app/utils/local/scripts.js
+++ b/app/utils/local/scripts.js
@@ -8,32 +8,9 @@ import { appMode } from "./app_mode.js";
 
 function commandExistsSync(execName) {
   const envPath = process.env.PATH || "";
-  const paths = envPath.split(path.delimiter);
-
-  let currentDir = process.cwd();
-  while (currentDir !== path.parse(currentDir).root) {
-    const venvScripts = path.join(
-      currentDir,
-      ".venv",
-      process.platform === "win32" ? "Scripts" : "bin",
-    );
-    if (fs.existsSync(venvScripts)) {
-      paths.unshift(venvScripts);
-      break;
-    }
-    currentDir = path.dirname(currentDir);
-  }
-
-  return paths.some((dir) => {
+  return envPath.split(path.delimiter).some((dir) => {
     const filePath = path.join(dir, execName);
-    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) return true;
-    if (process.platform === "win32") {
-      return [".exe", ".cmd", ".bat", ".ps1"].some((ext) => {
-        const withExt = `${filePath}${ext}`;
-        return fs.existsSync(withExt) && fs.statSync(withExt).isFile();
-      });
-    }
-    return false;
+    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
   });
 }