@iyulab/data-components 0.1.0

package/dist/components/data-view/UDataView.styles.js

@@ -0,0 +1,283 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .u-data-view-container {
+    width: 100%;
+  }
+
+  .layout-selector {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+
+    u-icon-button {
+      margin-left: 0.5rem;
+
+      &[current] {
+        color: var(--u-blue-600);
+      }
+    }
+  }
+
+  .u-data-view {
+    &.grid {
+      display: grid;
+      gap: var(--item-margin);
+      grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width), 1fr));
+    }
+
+    &.list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--item-margin);
+    }
+  }
+
+  .default-item {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    &.selected {
+      border: 2px solid #007bff;
+      box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
+    }
+  }
+
+  .u-data-view.list .default-item {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .u-data-view.list .default-item .default-image,
+  .u-data-view.list .default-item .placeholder-image {
+    width: 128px;
+    height: 128px;
+    min-width: 128px;
+    margin-right: 1rem;
+    margin-bottom: 0;
+    object-fit: cover;
+  }
+
+  .u-data-view.list .default-item .default-fields {
+    flex: 1;
+  }
+
+  .default-image {
+    width: 100%;
+    height: 128px;
+    object-fit: cover;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+
+    &.list-image {
+      width: 128px;
+      height: 128px;
+    }
+
+    &.table-image {
+      width: 64px;
+      height: 64px;
+      margin-bottom: 0;
+    }
+
+    &.placeholder-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2rem;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .default-fields {
+    .field {
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+
+      .field-title {
+        color: var(--u-neutral-600);
+        margin-right: 0.5rem;
+        flex: 0 0 30%;
+      }
+
+      .field-value {
+        font-weight: bold;
+        flex: 1;
+      }
+    }
+  }
+
+  .default-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th, td {
+      padding: 0.5em;
+      border: none;
+      border-bottom: 1px solid #eee;
+    }
+
+    th {
+      background-color: #f8f9fa;
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .image-cell {
+      width: 64px;
+      height: 64px;
+      padding: 0;
+      position: relative;
+
+      img, .placeholder-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .placeholder-image {
+        font-size: 1.5rem;
+      }
+    }
+
+    tr {
+      transition: all 0.3s ease;
+
+      &:hover {
+        background-color: rgba(0, 123, 255, 0.05);
+      }
+
+      &.selected {
+        background-color: rgba(0, 123, 255, 0.1);
+        box-shadow: 0 0 0 2px #007bff;
+        position: relative;
+        z-index: 1;
+
+        td:first-child {
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-top-right-radius: 8px;
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+  }
+
+  u-skeleton {
+    display: block;
+    width: 100%;
+    height: 1em;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+      animation: skeleton-loading 1.5s infinite;
+    }
+  }
+
+  @keyframes skeleton-loading {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .skeleton-item {
+    &.grid .skeleton-image,
+    &.list .skeleton-image {
+      width: 100%;
+      height: 128px;
+      margin-bottom: 1rem;
+    }
+
+    &.list {
+      display: flex;
+      align-items: flex-start;
+
+      .skeleton-image {
+        width: 128px;
+        height: 128px;
+        margin-right: 1rem;
+        margin-bottom: 0;
+      }
+
+      .skeleton-fields {
+        flex: 1;
+      }
+    }
+
+    .skeleton-field {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.5rem;
+
+      .skeleton-label {
+        width: 30%;
+        height: 1em;
+        margin-right: 0.5rem;
+      }
+
+      .skeleton-value {
+        width: 70%;
+        height: 1em;
+      }
+    }
+  }
+
+  .skeleton-table {
+    width: 100%;
+
+    .skeleton-row {
+      display: flex;
+      border-bottom: 1px solid #eee;
+      padding: 0.5em 0;
+
+      .skeleton-cell {
+        flex: 1;
+        height: 1em;
+        margin-right: 0.5em;
+
+        &:first-child {
+          width: 64px;
+          height: 64px;
+          flex: none;
+        }
+      }
+    }
+  }
+`;
+
+export { styles };

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { UDataGrid } from './data-grid/UDataGrid';
+export type { UDataGridColumn, UDataGridProps } from './data-grid/UDataGrid.types';
+export * from './data-view/UDataView';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { initShadowDomProtection, registerProtectedStylesheet } from './utils/shadowDomProtection.js';
+export { initDevExtremeCssInjection, injectCssToShadowDoms } from './utils/devExtremeCssInjection.js';
+export { UDataGrid } from './components/data-grid/UDataGrid.js';
+import './components/data-view/UDataView.js';
+export { UDataView } from './components/data-view/UDataView.component.js';

package/dist/styles/devextreme-overrides.css.js

@@ -0,0 +1,3 @@
+const devExtremeOverridesCssText = "/* ================================================================\r\n   DevExtreme Custom Styles for Shadow DOM\r\n   - 이 스타일들은 Shadow DOM에 주입되어 DataGrid 등에 적용됨\r\n   - dx.light.css와 함께 adoptedStyleSheets로 주입됨\r\n   ================================================================ */\r\n\r\n/* Prevent DevExtreme from using 100vw which ignores sidebar */\r\n.dx-widget {\r\n    max-width: 100% !important;\r\n}\r\n\r\n/* DevExtreme DataGrid 스타일 보정 */\r\n.dx-datagrid {\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n    background-color: #fff;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n}\r\n\r\n.dx-datagrid .dx-header-row {\r\n    background-color: #f8f9fa;\r\n    border-bottom: 2px solid #dee2e6;\r\n}\r\n\r\n.dx-datagrid .dx-header-row .dx-header-cell {\r\n    border-right: 1px solid #dee2e6;\r\n    padding: 12px 8px;\r\n    font-weight: 600;\r\n    color: #495057;\r\n}\r\n\r\n.dx-datagrid .dx-data-row {\r\n    border-bottom: 1px solid #dee2e6;\r\n}\r\n\r\n.dx-datagrid .dx-data-row .dx-cell {\r\n    border-right: 1px solid #f1f3f4;\r\n    padding: 10px 8px;\r\n}\r\n\r\n.dx-datagrid .dx-data-row:hover {\r\n    background-color: #f8f9fa;\r\n}\r\n\r\n.dx-datagrid .dx-data-row.dx-row-alt {\r\n    background-color: #fbfbfb;\r\n}\r\n\r\n.dx-datagrid .dx-data-row.dx-row-alt:hover {\r\n    background-color: #f5f5f5;\r\n}\r\n\r\n/* 그룹 패널 스타일 */\r\n.dx-datagrid .dx-group-panel {\r\n    background-color: #e9ecef;\r\n    border-bottom: 1px solid #dee2e6;\r\n    padding: 10px 15px;\r\n    min-height: 40px;\r\n}\r\n\r\n.dx-datagrid .dx-group-panel-message {\r\n    color: #6c757d;\r\n    font-style: italic;\r\n}\r\n\r\n/* 필터 행 스타일 */\r\n.dx-datagrid .dx-filter-row {\r\n    background-color: #fff;\r\n}\r\n\r\n.dx-datagrid .dx-filter-row .dx-cell {\r\n    border-bottom: 1px solid #dee2e6;\r\n    padding: 5px 8px;\r\n}\r\n\r\n/* 페이징 스타일 */\r\n.dx-datagrid .dx-pager {\r\n    background-color: #f8f9fa;\r\n    border-top: 1px solid #dee2e6;\r\n    padding: 10px;\r\n}\r\n\r\n/* 도구 모음 스타일 */\r\n.dx-datagrid .dx-toolbar {\r\n    background-color: #f8f9fa;\r\n    border-bottom: 1px solid #dee2e6;\r\n    padding: 8px 12px;\r\n}\r\n\r\n/* 로딩 패널 스타일 */\r\n.dx-loadpanel {\r\n    background-color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dx-loadpanel .dx-loadpanel-content {\r\n    border: 1px solid #dee2e6;\r\n    border-radius: 4px;\r\n    background-color: #fff;\r\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* 선택 체크박스 스타일 */\r\n.dx-datagrid .dx-select-checkbox {\r\n    margin: 0 auto;\r\n}\r\n\r\n/* 고정된 컬럼 스타일 */\r\n.dx-datagrid .dx-col-fixed {\r\n    background-color: #fff;\r\n    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* 상태별 컬럼 너비 조정 */\r\n.dx-datagrid .dx-command-select {\r\n    width: 50px !important;\r\n    min-width: 50px !important;\r\n}\r\n\r\n/* 반응형 디자인 */\r\n@media (max-width: 768px) {\r\n    .dx-datagrid .dx-cell {\r\n        padding: 8px 4px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    .dx-datagrid .dx-header-cell {\r\n        padding: 10px 4px;\r\n        font-size: 14px;\r\n    }\r\n}\r\n\r\n/* DevExtreme 아이콘 폰트 문제 해결 */\r\n.dx-icon {\r\n    font-family: 'DXIcons', 'Helvetica Neue', 'Segoe UI', sans-serif !important;\r\n}\r\n\r\n/* 버튼 스타일 개선 */\r\n.dx-button {\r\n    border-radius: 4px;\r\n}\r\n\r\n.dx-button.dx-button-normal {\r\n    background-color: #007bff;\r\n    border-color: #007bff;\r\n    color: #fff;\r\n}\r\n\r\n.dx-button.dx-button-normal:hover {\r\n    background-color: #0056b3;\r\n    border-color: #0056b3;\r\n}\r\n\r\n/* 입력 필드 스타일 */\r\n.dx-texteditor {\r\n    border-radius: 4px;\r\n}\r\n\r\n.dx-texteditor .dx-texteditor-input {\r\n    padding: 8px 12px;\r\n}\r\n\r\n/* 셀렉트박스 스타일 */\r\n.dx-selectbox {\r\n    border-radius: 4px;\r\n}\r\n\r\n/* 날짜 피커 스타일 */\r\n.dx-datebox {\r\n    border-radius: 4px;\r\n}\r\n";
+
+export { devExtremeOverridesCssText as default };

package/dist/utils/devExtremeCssInjection.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DevExtreme CSS Shadow DOM Injection
+ *
+ * DevExtreme components render inside Shadow DOM but their CSS is loaded
+ * in the Light DOM. Due to Shadow DOM encapsulation, Light DOM CSS doesn't
+ * apply to Shadow DOM content.
+ *
+ * This module:
+ * 1. Imports DevExtreme CSS as text (using Vite ?inline query)
+ * 2. Creates a CSSStyleSheet from the CSS text
+ * 3. Injects the stylesheet into all Shadow DOMs
+ * 4. Uses MutationObserver to detect and inject into new Shadow DOMs
+ */
+/**
+ * Initialize DevExtreme CSS injection
+ * Sets up MutationObserver to detect new Shadow DOMs
+ */
+export declare function initDevExtremeCssInjection(): void;
+/**
+ * Register and inject custom CSS into all Shadow DOMs (existing and future)
+ * Sets up automatic injection for new Shadow DOMs via MutationObserver
+ */
+export declare function injectCssToShadowDoms(cssText: string): CSSStyleSheet | null;

package/dist/utils/devExtremeCssInjection.js

@@ -0,0 +1,164 @@
+import devExtremeCssText from 'devextreme/dist/css/dx.light.css?inline';
+import devExtremeOverridesCssText from '../styles/devextreme-overrides.css.js';
+import { registerProtectedStylesheet } from './shadowDomProtection.js';
+
+let isInitialized = false;
+let devExtremeStyleSheet = null;
+let devExtremeOverridesStyleSheet = null;
+const injectedShadowRoots = /* @__PURE__ */ new WeakSet();
+function injectToShadowRoot(shadowRoot) {
+  if (!devExtremeStyleSheet || injectedShadowRoots.has(shadowRoot)) return;
+  try {
+    const currentSheets = [...shadowRoot.adoptedStyleSheets];
+    const sheetsToAdd = [];
+    if (!currentSheets.includes(devExtremeStyleSheet)) {
+      sheetsToAdd.push(devExtremeStyleSheet);
+    }
+    if (devExtremeOverridesStyleSheet && !currentSheets.includes(devExtremeOverridesStyleSheet)) {
+      sheetsToAdd.push(devExtremeOverridesStyleSheet);
+    }
+    if (sheetsToAdd.length > 0) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, ...sheetsToAdd];
+      injectedShadowRoots.add(shadowRoot);
+      if (process.env.NODE_ENV === "development") {
+        console.log("[data-components] DevExtreme CSS injected into Shadow DOM");
+      }
+    }
+  } catch (e) {
+    console.warn("[data-components] Failed to inject DevExtreme CSS:", e);
+  }
+}
+function injectToExistingShadowRoots() {
+  document.querySelectorAll("*").forEach((el) => {
+    if (el.shadowRoot) {
+      injectToShadowRoot(el.shadowRoot);
+    }
+  });
+}
+function initDevExtremeCssInjection() {
+  if (isInitialized) return;
+  if (typeof window === "undefined") return;
+  try {
+    devExtremeStyleSheet = new CSSStyleSheet();
+    devExtremeStyleSheet.replaceSync(devExtremeCssText || "");
+    if (process.env.NODE_ENV === "development") {
+      console.log("[data-components] DevExtreme base CSS stylesheet created");
+      console.log("[data-components] Base CSS length:", devExtremeCssText?.length || 0);
+    }
+  } catch (e) {
+    console.warn("[data-components] Failed to create DevExtreme base CSSStyleSheet:", e);
+    return;
+  }
+  try {
+    if (devExtremeOverridesCssText && devExtremeOverridesCssText.length > 0) {
+      devExtremeOverridesStyleSheet = new CSSStyleSheet();
+      devExtremeOverridesStyleSheet.replaceSync(devExtremeOverridesCssText);
+      registerProtectedStylesheet(devExtremeOverridesStyleSheet);
+      if (process.env.NODE_ENV === "development") {
+        console.log("[data-components] DevExtreme overrides CSS stylesheet created");
+        console.log("[data-components] Overrides CSS length:", devExtremeOverridesCssText.length);
+      }
+    }
+  } catch (e) {
+    console.warn("[data-components] Failed to create DevExtreme overrides CSSStyleSheet:", e);
+  }
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node instanceof Element) {
+          if (node.shadowRoot) {
+            injectToShadowRoot(node.shadowRoot);
+          }
+          node.querySelectorAll("*").forEach((el) => {
+            if (el.shadowRoot) {
+              injectToShadowRoot(el.shadowRoot);
+            }
+          });
+        }
+      });
+    });
+  });
+  const startObserving = () => {
+    injectToExistingShadowRoots();
+    observer.observe(document.body, { childList: true, subtree: true });
+    setTimeout(injectToExistingShadowRoots, 1e3);
+    setTimeout(injectToExistingShadowRoots, 3e3);
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", startObserving);
+  } else {
+    startObserving();
+  }
+  isInitialized = true;
+}
+const customStylesheets = [];
+function injectCustomStylesToShadowRoot(shadowRoot) {
+  if (customStylesheets.length === 0) return;
+  try {
+    const currentSheets = [...shadowRoot.adoptedStyleSheets];
+    const newSheets = customStylesheets.filter((sheet) => !currentSheets.includes(sheet));
+    if (newSheets.length > 0) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, ...newSheets];
+    }
+  } catch (e) {
+    console.warn("[data-components] Failed to inject custom styles:", e);
+  }
+}
+function injectCssToShadowDoms(cssText) {
+  if (typeof window === "undefined") return null;
+  try {
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(cssText || "");
+    registerProtectedStylesheet(stylesheet);
+    customStylesheets.push(stylesheet);
+    document.querySelectorAll("*").forEach((el) => {
+      if (el.shadowRoot) {
+        const currentSheets = [...el.shadowRoot.adoptedStyleSheets];
+        if (!currentSheets.includes(stylesheet)) {
+          el.shadowRoot.adoptedStyleSheets = [...currentSheets, stylesheet];
+        }
+      }
+    });
+    setupCustomStylesObserver();
+    if (process.env.NODE_ENV === "development") {
+      console.log("[data-components] Custom CSS registered for Shadow DOM injection");
+    }
+    return stylesheet;
+  } catch (e) {
+    console.warn("[data-components] Failed to inject custom CSS:", e);
+    return null;
+  }
+}
+let customStylesObserverInitialized = false;
+function setupCustomStylesObserver() {
+  if (customStylesObserverInitialized) return;
+  if (typeof window === "undefined") return;
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node instanceof Element) {
+          if (node.shadowRoot) {
+            injectCustomStylesToShadowRoot(node.shadowRoot);
+          }
+          node.querySelectorAll("*").forEach((el) => {
+            if (el.shadowRoot) {
+              injectCustomStylesToShadowRoot(el.shadowRoot);
+            }
+          });
+        }
+      });
+    });
+  });
+  const startObserving = () => {
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", startObserving);
+  } else {
+    startObserving();
+  }
+  customStylesObserverInitialized = true;
+}
+initDevExtremeCssInjection();
+
+export { initDevExtremeCssInjection, injectCssToShadowDoms };

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { initShadowDomProtection, registerProtectedStylesheet } from './shadowDomProtection';
+export { initDevExtremeCssInjection, injectCssToShadowDoms } from './devExtremeCssInjection';

package/dist/utils/shadowDomProtection.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shadow DOM Style Protection
+ *
+ * Protects Lit component styles from being overwritten by Vite HMR.
+ * When DevExtreme or other libraries load CSS, Vite HMR may clear/replace
+ * Shadow DOM's adoptedStyleSheets, causing Lit component styles to be lost.
+ *
+ * This module intercepts adoptedStyleSheets setter to:
+ * 1. Detect and save Lit styles (identified by :host selector)
+ * 2. Block HMR reset attempts that would clear Lit styles
+ * 3. Merge Lit styles with other styles (like DevExtreme)
+ * 4. Protect registered custom stylesheets from being lost during re-renders
+ */
+/**
+ * Register a custom stylesheet to be protected
+ * Protected stylesheets will always be preserved when adoptedStyleSheets changes
+ */
+export declare function registerProtectedStylesheet(stylesheet: CSSStyleSheet): void;
+/**
+ * Initialize Shadow DOM style protection
+ * Should be called before any Lit components are loaded
+ */
+export declare function initShadowDomProtection(): void;

package/dist/utils/shadowDomProtection.js

@@ -0,0 +1,82 @@
+let isInitialized = false;
+const protectedCustomStylesheets = /* @__PURE__ */ new Set();
+function registerProtectedStylesheet(stylesheet) {
+  protectedCustomStylesheets.add(stylesheet);
+}
+function isProtectedCustomStylesheet(sheet) {
+  return protectedCustomStylesheets.has(sheet);
+}
+function isLitStyleSheet(sheet) {
+  try {
+    if (!sheet.cssRules || sheet.cssRules.length === 0) return false;
+    const firstRule = sheet.cssRules[0];
+    return firstRule.cssText.startsWith(":host");
+  } catch {
+    return false;
+  }
+}
+function isEmptyOrHMRReset(sheets) {
+  if (!sheets || sheets.length === 0) return true;
+  return sheets.every((sheet) => {
+    try {
+      return !sheet.cssRules || sheet.cssRules.length === 0;
+    } catch {
+      return true;
+    }
+  });
+}
+function initShadowDomProtection() {
+  if (isInitialized) return;
+  if (typeof window === "undefined") return;
+  const originalDescriptor = Object.getOwnPropertyDescriptor(
+    ShadowRoot.prototype,
+    "adoptedStyleSheets"
+  );
+  if (!originalDescriptor) {
+    console.warn("[data-components] adoptedStyleSheets descriptor not found");
+    return;
+  }
+  const protectedLitStylesMap = /* @__PURE__ */ new WeakMap();
+  Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
+    get() {
+      return originalDescriptor.get?.call(this) ?? [];
+    },
+    set(sheets) {
+      const savedLitStyles = protectedLitStylesMap.get(this) || [];
+      const newLitStyles = sheets?.filter(isLitStyleSheet) || [];
+      const newNonLitStyles = sheets?.filter((s) => !isLitStyleSheet(s)) || [];
+      if (newLitStyles.length > 0) {
+        protectedLitStylesMap.set(this, [...newLitStyles]);
+      }
+      const protectedSheets = Array.from(protectedCustomStylesheets);
+      if (isEmptyOrHMRReset(sheets) && (savedLitStyles.length > 0 || protectedSheets.length > 0)) {
+        const preserved = [...savedLitStyles, ...protectedSheets.filter((s) => !savedLitStyles.includes(s))];
+        originalDescriptor.set?.call(this, preserved);
+        return;
+      }
+      if (savedLitStyles.length > 0 && newLitStyles.length === 0 && newNonLitStyles.length > 0) {
+        const nonProtectedNewStyles = newNonLitStyles.filter((s) => !isProtectedCustomStylesheet(s));
+        const mergedSheets = [
+          ...savedLitStyles,
+          ...protectedSheets.filter((s) => !savedLitStyles.includes(s)),
+          ...nonProtectedNewStyles.filter((s) => !protectedSheets.includes(s))
+        ];
+        originalDescriptor.set?.call(this, mergedSheets);
+        return;
+      }
+      const finalSheets = sheets ? [...sheets] : [];
+      protectedSheets.forEach((ps) => {
+        if (!finalSheets.includes(ps)) {
+          finalSheets.push(ps);
+        }
+      });
+      originalDescriptor.set?.call(this, finalSheets);
+    },
+    configurable: true,
+    enumerable: true
+  });
+  isInitialized = true;
+}
+initShadowDomProtection();
+
+export { initShadowDomProtection, registerProtectedStylesheet };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@iyulab/data-components",
+  "description": "iyulab data visualization components",
+  "version": "0.1.0",
+  "keywords": [
+    "iyulab",
+    "web-components",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-data-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./dist/*": {
+      "types": "./src/*.d.ts",
+      "import": "./src/*"
+    },
+    "./init": {
+      "types": "./src/init.d.ts",
+      "import": "./src/init.js"
+    }
+  },
+  "sideEffects": [
+    "./dist/utilities/shadowDomProtection.js",
+    "./dist/utilities/devExtremeCssInjection.js",
+    "./dist/components/data-grid/UDataGrid.js",
+    "./dist/components/data-view/UDataView.js",
+    "./dist/components/simple-sheet/USimpleSheet.js",
+    "./dist/init.js"
+  ],
+  "scripts": {
+    "start": "vite",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@iyulab/components": "^0.4.0",
+    "devextreme": "^25.2.4",
+    "devextreme-react": "^25.2.4",
+    "lit": "^3.3.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.3",
+    "@lit/react": "^1.0.8",
+    "@types/node": "^25.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}