SUKU light mode compatibility improved

Configuration.json

@@ -5,5 +5,6 @@
     "RDoRUL39LEe9R81BSEJqwj52n0v1",
     "oMiJQcb4xqTI7XJlGZItEH2eKtm2"
   ],
+  "WORKFLOW_CONFIG_PROFILE_IDS": ["eePyy59w5KXLy0wkvqsv1iPmLUh1"],
   "DEEPLINK_PROTOCOL_NAME": "grid-editor"
 }

package.json

@@ -27,7 +27,6 @@
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.39.0",
-    "postcss": "^8.4.21",
     "postcss-import": "^16.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
@@ -42,7 +41,7 @@
   "type": "module",
   "dependencies": {
     "@intechstudio/grid-protocol": "1.20250305.1735",
-    "@intechstudio/grid-uikit": "1.20250929.2015",
+    "@intechstudio/grid-uikit": "1.20251020.1904",
     "@melt-ui/svelte": "^0.86.6",
     "@toast-ui/editor": "^3.2.2",
     "audit": "^0.0.6",

src/WebComponent.svelte

@@ -1,4 +1,4 @@
-<svelte:options customElement={{ tag: "WEB-COMPONENT-NAME" }} />
+<svelte:options customElement={{ tag: "WEB-COMPONENT-NAME", shadow: "none" }} />
 
 <script>
   import { onMount } from "svelte";
@@ -30,96 +30,15 @@
   });
 </script>
 
-<profile-cloud-web-component
-  class="dark bg-primary/100 text-white transition duration-200 h-full"
->
+<profile-cloud-web-component>
   {#if isEditorVersionCompatible}
     <EditorLayout />
   {:else}
     Incompatible Editor Version!
   {/if}
 </profile-cloud-web-component>
 
-<style global lang="postcss">
-  @import "./app.css";
-
-  /**
-	This is the global style for the scrollbar from the editor.
-	*/
-  ::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    @apply dark:rounded-md dark:bg-secondary bg-neutral-100;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply dark:rounded-md dark:bg-neutral-600 bg-neutral-400 dark:shadow;
-  }
-
-  ::-webkit-scrollbar-corner {
-    @apply dark:rounded-md dark:bg-secondary;
-  }
-
-  .splitpanes.modern-theme .splitpanes__pane {
-    /*  @apply bg-secondary; */
-    position: relative;
-    overflow: visible;
-  }
-
-  /*betty magic selector*/
-  .splitpanes.modern-theme .splitpanes__pane.leftPane {
-    overflow: hidden;
-  }
-
-  .splitpanes.modern-theme .splitpanes__splitter {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: opacity 0.3s;
-    background-color: #2db9d2;
-    width: 200;
-    opacity: 0;
-    z-index: 1;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter:hover:before {
-    opacity: 1;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter.splitpanes__splitter__active {
-    z-index: 2;
-    /* Fix an issue of overlap fighting with a near hovered splitter */
-  }
-  .modern-theme.splitpanes--vertical > .splitpanes__splitter:before {
-    left: -3px;
-    right: -3px;
-    height: 100%;
-    cursor: col-resize;
-  }
-  .modern-theme.splitpanes--horizontal > .splitpanes__splitter:before {
-    top: -3px;
-    bottom: -3px;
-    width: 100%;
-    cursor: row-resize;
-  }
-  .splitpanes.no-splitter .splitpanes__pane {
-    background-color: #0e100f;
-  }
-  .splitpanes.no-splitter .splitpanes__splitter {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  .no-splitter.splitpanes--horizontal > .splitpanes__splitter:before {
-    width: 0.05rem;
-    pointer-events: none;
-    cursor: none;
-  }
-  .no-splitter.splitpanes--vertical > .splitpanes__splitter:before {
-    height: 0.05rem;
-    pointer-events: none;
-    cursor: none;
+<style>
+  profile-cloud-web-component {
   }
 </style>

src/app.css

@@ -1,3 +1,46 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+*,
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e5e5; /* 2 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS
+  */
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+  tab-size: 4; /* 3 */
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Remove the margin in all browsers.
+  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+  */
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+  color: var(--foreground);
+  background-color: var(--background);
+}

src/lib/components/DataInput.svelte

@@ -7,37 +7,66 @@
   export let bold = false;
 
   const dispatch = createEventDispatcher();
-  let edited = false;
   let element: HTMLInputElement;
 
-  $: displayedText = edited ? value : value || placeholder;
+  $: displayedText = value.trim();
 
   function handleBlur() {
     window?.getSelection()?.removeAllRanges();
-    edited = false;
 
-    if (value !== displayedText) {
-      value = displayedText;
+    if (value !== displayedText.trim()) {
+      value = displayedText.trim();
       dispatch("change", { value });
     }
   }
 
-  function handleDblClick() {
-    edited = true;
+  function handleClick() {
+    if (disabled) {
+      return;
+    }
     element?.setSelectionRange(0, element.value.length);
   }
 </script>
 
 <input
   bind:this={element}
-  class="w-full mr-1 border bg-white dark:bg-transparent truncate dark:hover:bg-neutral-800 focus:outline-none {edited
-    ? 'border-emerald-500'
-    : 'border-transparent'}"
-  class:pointer-events-none={disabled}
-  class:font-bold={bold}
-  readonly={!edited}
+  style="color: var(--foreground)"
+  class:isdisabled={disabled}
+  class:isbold={bold}
   on:keydown={(e) => e.key == "Enter" && !e.shiftKey && element?.blur()}
   on:blur={handleBlur}
-  on:dblclick|stopPropagation|preventDefault={handleDblClick}
+  on:click|stopPropagation|preventDefault={handleClick}
   bind:value={displayedText}
+  {placeholder}
 />
+
+<style>
+  input {
+    background-color: transparent;
+    width: 100%;
+    margin-right: 1rem;
+    border: 1px solid transparent;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    outline-style: none;
+  }
+
+  input:hover {
+    background-color: var(--background-muted);
+  }
+
+  input.isbold {
+    font-weight: bold;
+    font-size: 110%;
+  }
+
+  input:focus {
+    background-color: var(--background-soft);
+    border-color: green;
+  }
+
+  input.isdisabled {
+    pointer-events: none;
+  }
+</style>