ds-one 0.2.5-alpha.1 → 0.2.5-alpha.11

package/dist/ds-one.bundle.js

@@ -38,11 +38,13 @@ function initDeviceDetection() {
     const designWidth = 280;
     const actualWidth = deviceInfo.screenWidth;
     const scalingFactor = actualWidth / designWidth;
-    document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
+    document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
+    document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
     console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
   } else {
     if (typeof document !== "undefined") {
-      document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
+      document.documentElement.style.setProperty("--sf", "1");
+      document.documentElement.style.setProperty("--sf", "1");
     }
     console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
   }
@@ -80,41 +82,41 @@ if (typeof window !== "undefined") {
 var translationKeys = {};
 var LANGUAGE_PRIORITY_ORDER = [
   "da",
-  "nb",
-  "sv",
-  "pt",
+  "de",
+  "en",
   "es",
-  "zh",
-  "ko",
+  "fr",
+  "it",
   "ja",
-  "en",
-  "de"
+  "pt",
+  "sv",
+  "zh"
 ];
 var LANGUAGE_PRIORITY_LOOKUP = new Map(LANGUAGE_PRIORITY_ORDER.map((code, index) => [code, index]));
 var FALLBACK_LANGUAGE_NAMES = {
   da: "Danish",
   "da-dk": "Danish",
-  nb: "Norwegian",
-  "nb-no": "Norwegian",
-  sv: "Swedish",
-  "sv-se": "Swedish",
   de: "German",
   "de-de": "German",
   en: "English",
   "en-us": "English",
-  pt: "Portuguese",
-  "pt-pt": "Portuguese",
-  "pt-br": "Portuguese (Brazil)",
   es: "Spanish",
   "es-es": "Spanish",
-  "es-mx": "Spanish (Mexico)",
-  zh: "Chinese",
-  "zh-hans": "Chinese (Simplified)",
-  "zh-hant": "Chinese (Traditional)",
+  fr: "French",
+  "fr-fr": "French",
+  it: "Italian",
+  "it-it": "Italian",
   ja: "Japanese",
   "ja-jp": "Japanese",
-  ko: "Korean",
-  "ko-kr": "Korean"
+  pt: "Portuguese",
+  "pt-pt": "Portuguese",
+  sv: "Swedish",
+  "sv-se": "Swedish",
+  zh: "Chinese",
+  "zh-cn": "Chinese",
+  "zh-tw": "Chinese",
+  "zh-hans": "Chinese",
+  "zh-hant": "Chinese"
 };
 var DISPLAY_NAME_CACHE = /* @__PURE__ */ new Map();
 var displayNameFallbackWarningShown = false;
@@ -230,7 +232,6 @@ function getTranslationData() {
   return translationKeys;
 }
 var translationData = getTranslationData();
-var notionStore = /* @__PURE__ */ new Map();
 var defaultLanguage = "en";
 function extractPrimarySubtag(code) {
   if (!code) {
@@ -334,33 +335,30 @@ function getLanguageDisplayName(code, options = {}) {
 var BROWSER_LANGUAGE_PREFERENCES = {
   da: "da",
   "da-dk": "da",
-  no: "nb",
-  nb: "nb",
-  "nb-no": "nb",
-  nn: "nn",
-  "nn-no": "nn",
-  sv: "sv",
-  "sv-se": "sv",
-  pt: "pt",
-  "pt-pt": "pt",
-  "pt-br": "pt",
+  de: "de",
+  "de-de": "de",
+  en: "en",
+  "en-us": "en",
+  "en-gb": "en",
   es: "es",
   "es-es": "es",
   "es-mx": "es",
+  fr: "fr",
+  "fr-fr": "fr",
+  it: "it",
+  "it-it": "it",
+  ja: "ja",
+  "ja-jp": "ja",
+  pt: "pt",
+  "pt-pt": "pt",
+  "pt-br": "pt",
+  sv: "sv",
+  "sv-se": "sv",
   zh: "zh",
   "zh-cn": "zh",
   "zh-hans": "zh",
   "zh-tw": "zh",
-  "zh-hant": "zh",
-  ko: "ko",
-  "ko-kr": "ko",
-  ja: "ja",
-  "ja-jp": "ja",
-  en: "en",
-  "en-us": "en",
-  "en-gb": "en",
-  de: "de",
-  "de-de": "de"
+  "zh-hant": "zh"
 };
 function resolvePreferredLanguage(languageTag) {
   if (!languageTag) {
@@ -425,7 +423,6 @@ if (typeof window !== "undefined") {
   window.addEventListener("translations-ready", () => {
     translationData = getTranslationData();
     window.dispatchEvent(new CustomEvent("translations-loaded"));
-    window.notionDataLoaded = true;
     const currentLang = currentLanguage.value;
     window.dispatchEvent(new CustomEvent("language-changed", {
       detail: { language: currentLang },
@@ -436,7 +433,6 @@ if (typeof window !== "undefined") {
 }
 setTimeout(() => {
   window.dispatchEvent(new CustomEvent("translations-loaded"));
-  window.notionDataLoaded = true;
   const currentLang = currentLanguage.value;
   window.dispatchEvent(new CustomEvent("language-changed", {
     detail: { language: currentLang },
@@ -452,7 +448,7 @@ function translate(key) {
   if (lang !== defaultLanguage && translationData?.[defaultLanguage]?.[key]) {
     return translationData[defaultLanguage][key];
   }
-  console.warn(`[translate] No translation found for key "${key}"`);
+  console.warn(`[DS one (Internationalization)] No translation found for key "${key}"`);
   return key;
 }
 function hasTranslation(key, language = currentLanguage.value) {
@@ -471,34 +467,6 @@ function hasTranslation(key, language = currentLanguage.value) {
 function getText(key) {
   return translate(key);
 }
-async function getNotionText(key, language = currentLanguage.value) {
-  if (!key) {
-    return null;
-  }
-  if (!translationData || !translationData[language]) {
-    return null;
-  }
-  const text = translationData[language][key];
-  if (text) {
-    return text;
-  }
-  if (language !== defaultLanguage && translationData[defaultLanguage]?.[key]) {
-    return translationData[defaultLanguage][key];
-  }
-  return null;
-}
-function setNotionText(key, value, language = currentLanguage.value) {
-  if (!key)
-    return;
-  const bucket = getLanguageBucket(language);
-  bucket.set(key, value);
-}
-function getLanguageBucket(language) {
-  if (!notionStore.has(language)) {
-    notionStore.set(language, /* @__PURE__ */ new Map());
-  }
-  return notionStore.get(language);
-}
 function getAvailableLanguages() {
   const currentData = getTranslationData();
   if (currentData && Object.keys(currentData).length > 0) {
@@ -1851,14 +1819,13 @@ var Button = class extends i6 {
     this.bold = false;
     this["no-background"] = false;
     this.blank = false;
-    this.notionKey = null;
     this.key = "";
     this.fallback = "";
     this.language = "en-US";
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._notionText = null;
+    this._text = null;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1880,9 +1847,9 @@ var Button = class extends i6 {
    */
   _updateText() {
     if (this.key) {
-      this._notionText = getText(this.key);
+      this._text = getText(this.key);
     } else {
-      this._notionText = this.defaultText || this.fallback || null;
+      this._text = this.defaultText || this.fallback || null;
     }
     this.requestUpdate();
   }
@@ -1895,7 +1862,7 @@ var Button = class extends i6 {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._notionText ? this._notionText : x`<slot></slot>`}
+        ${this._text ? this._text : x`<slot></slot>`}
       </button>
     `;
   }
@@ -1927,24 +1894,23 @@ Button.properties = {
     attribute: "no-background"
   },
   blank: { type: Boolean, reflect: true },
-  notionKey: { type: String, attribute: "notion-key" },
   key: { type: String },
   fallback: { type: String },
   language: { type: String },
   defaultText: { type: String, attribute: "default-text" },
   href: { type: String },
   _loading: { type: Boolean, state: true },
-  _notionText: { type: String, state: true }
+  _text: { type: String, state: true }
 };
 Button.styles = i4`
     button {
-      max-height: calc(var(--08) * var(--scaling-factor));
+      max-height: calc(var(--08) * var(--sf));
       border: none;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
+      font-size: calc(var(--type-size-default) * var(--sf));
+      padding: 0 calc(1px * var(--sf));
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.title {
@@ -1956,13 +1922,13 @@ Button.styles = i4`
       background-color: var(--accent-color);
       color: var(--button-text-color);
       text-decoration-line: none;
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.secondary {
       background-color: var(--button-background-color-secondary);
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button[bold] {
@@ -2247,8 +2213,8 @@ Icon.styles = i4`
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     svg {
@@ -2265,8 +2231,8 @@ Icon.styles = i4`
       display: flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     /* Notes style color variable for future implementation */
@@ -2297,12 +2263,104 @@ Icon.iconNameToSvgMap = (() => {
 customElements.define("ds-icon", Icon);
 console.log("Icon component registered with custom elements registry");
 
+// dist/2-core/ds-text.js
+var Text = class extends i6 {
+  static get properties() {
+    return {
+      key: { type: String, reflect: true },
+      defaultValue: { type: String, reflect: true, attribute: "default-value" },
+      fallback: { type: String, reflect: true },
+      // Kept for backward compatibility
+      _text: { type: String, state: true }
+    };
+  }
+  constructor() {
+    super();
+    this.key = "";
+    this.defaultValue = "";
+    this.fallback = "";
+    this._text = "";
+    this._currentLanguage = currentLanguage.value;
+    this.boundHandlers = {
+      languageChanged: (() => {
+        console.log("Language changed event received in ds-text");
+        this._currentLanguage = currentLanguage.value;
+        this._loadText();
+        this.requestUpdate();
+      })
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._currentLanguage = currentLanguage.value;
+    this._updateLanguageAttribute();
+    this._loadText();
+    window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+    window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+    window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
+      this._loadText();
+    }
+  }
+  _updateLanguageAttribute() {
+    const lang = this._currentLanguage || currentLanguage.value;
+    if (lang === "ja") {
+      this.setAttribute("data-language", "ja");
+    } else {
+      this.removeAttribute("data-language");
+    }
+  }
+  _loadText() {
+    if (!this.key) {
+      this._text = this.defaultValue || this.fallback || "";
+      return;
+    }
+    try {
+      const text = getText(this.key);
+      this._text = text || this.defaultValue || this.fallback || this.key;
+    } catch (error) {
+      console.error("Error loading text for key:", this.key, error);
+      this._text = this.defaultValue || this.fallback || this.key;
+    }
+    this._updateLanguageAttribute();
+    this.requestUpdate();
+  }
+  render() {
+    return x`<span>${this._text || this.defaultValue || this.key}</span>`;
+  }
+};
+Text.styles = i4`
+    :host {
+      display: inline;
+      font-family: var(--typeface-regular);
+      font-size: calc(var(--type-size-default) * var(--sf));
+      font-weight: var(--type-weight-default);
+      line-height: calc(var(--type-lineheight-default) * var(--sf));
+      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
+      text-align: var(--text-align-default);
+      text-transform: var(--text-transform-default);
+      text-decoration: var(--text-decoration-default);
+    }
+
+    :host([data-language="ja"]) {
+      font-family: var(--typeface-regular-jp);
+    }
+  `;
+customElements.define("ds-text", Text);
+
 // dist/2-core/ds-cycle.js
 var saveAccentColor = (color) => {
   localStorage.setItem("accentColor", color);
 };
 var getAccentColor = () => {
-  return localStorage.getItem("accentColor") || "--blue";
+  return localStorage.getItem("accentColor") || "--sharp-blue";
 };
 var applyAccentColor = () => {
   const color = getAccentColor();
@@ -2375,19 +2433,18 @@ var Cycle = class extends i6 {
       this.label = this.getLabel();
     } else if (this.type === "accent-color") {
       this.values = [
-        "--light-green",
-        "--green",
-        "--light-blue",
-        "--blue",
+        "--apple-green",
+        "--every-green",
+        "--zenith-blue",
+        "--sharp-blue",
         "--pink",
-        "--red",
+        "--tuned-red",
         "--orange",
         "--yellow"
       ];
       const currentAccentColor = getAccentColor();
       this.currentValue = currentAccentColor;
       applyAccentColor();
-      this.label = this.getLabel();
     } else if (this.type === "notes-style-medium") {
       this.values = ["default", "big", "gallery"];
       const currentNotesStyle = getNotesStyleMedium();
@@ -2435,7 +2492,6 @@ var Cycle = class extends i6 {
       const currentAccentColor = getAccentColor();
       this.currentValue = currentAccentColor;
       applyAccentColor();
-      this.label = this.getLabel();
     } else if (this.type === "notes-style-medium") {
       const currentNotesStyle = getNotesStyleMedium();
       this.currentValue = currentNotesStyle;
@@ -2546,8 +2602,8 @@ var Cycle = class extends i6 {
       });
     } else if (this.type === "theme") {
       if (this.translationsReady) {
-        const translatedName = translate(`themes.${value}`);
-        if (translatedName && translatedName !== `themes.${value}`) {
+        const translatedName = translate(value);
+        if (translatedName && translatedName !== value) {
           return translatedName;
         }
       }
@@ -2574,15 +2630,28 @@ var Cycle = class extends i6 {
     }
     return value;
   }
+  getColorKey(colorVar) {
+    const colorMap = {
+      "--tuned-red": "red",
+      "--orange": "orange",
+      "--yellow": "yellow",
+      "--apple-green": "appleGreen",
+      "--every-green": "green",
+      "--zenith-blue": "lightBlue",
+      "--sharp-blue": "blue",
+      "--pink": "pink"
+    };
+    return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+  }
   getColorName(colorVar) {
     const colorMap = {
-      "--red": "red",
+      "--tuned-red": "red",
       "--orange": "orange",
       "--yellow": "yellow",
-      "--light-green": "lightGreen",
-      "--green": "green",
-      "--light-blue": "lightBlue",
-      "--blue": "blue",
+      "--apple-green": "appleGreen",
+      "--every-green": "green",
+      "--zenith-blue": "lightBlue",
+      "--sharp-blue": "blue",
       "--pink": "pink"
     };
     const languageKey = colorMap[colorVar];
@@ -2657,7 +2726,19 @@ var Cycle = class extends i6 {
   render() {
     return x`
       <div class="cycle-container">
-        ${this.type !== "icon-only" ? x`<span class="cycle-label">${this.label}</span>` : ""}
+        ${this.type !== "icon-only" ? x`${this.type === "language" ? x`<ds-text
+                  key="language"
+                  default-value="Language"
+                  class="cycle-label"
+                ></ds-text>` : this.type === "theme" ? x`<ds-text
+                    key="theme"
+                    default-value="Theme"
+                    class="cycle-label"
+                  ></ds-text>` : this.type === "accent-color" ? x`<ds-text
+                      key="accentColor"
+                      default-value="Accent color"
+                      class="cycle-label"
+                    ></ds-text>` : x`<span class="cycle-label">${this.label}</span>`}` : ""}
         <div
           style="display: flex; align-items: center; ${this.type === "icon-only" ? "justify-content: center;" : ""}"
         >
@@ -2669,7 +2750,18 @@ var Cycle = class extends i6 {
             ${this.type === "notes-style-medium" || this.type === "icon-only" ? x`<span
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
-                >` : x`<span>${this.getValueDisplay(this.currentValue)}</span>`}
+                >` : this.type === "theme" ? x`<ds-text
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
+                  ></ds-text>` : this.type === "accent-color" ? x`<ds-text
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>` : this.type === "page-style" ? x`<ds-text
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
+                      ></ds-text>` : x`<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
           </ds-button>
           ${this.type === "accent-color" ? x`
                 <div
@@ -2735,76 +2827,6 @@ Cycle.styles = i4`
   `;
 customElements.define("ds-cycle", Cycle);
 
-// dist/2-core/ds-text.js
-var Text = class extends i6 {
-  static get properties() {
-    return {
-      key: { type: String, reflect: true },
-      defaultValue: { type: String, reflect: true, attribute: "default-value" },
-      fallback: { type: String, reflect: true },
-      // Kept for backward compatibility
-      _text: { type: String, state: true }
-    };
-  }
-  constructor() {
-    super();
-    this.key = "";
-    this.defaultValue = "";
-    this.fallback = "";
-    this._text = "";
-    this.boundHandlers = {
-      languageChanged: (() => {
-        console.log("Language changed event received in ds-text");
-        this._loadText();
-      })
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadText();
-    window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-    window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
-    window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
-      this._loadText();
-    }
-  }
-  _loadText() {
-    if (!this.key) {
-      this._text = this.defaultValue || this.fallback || "";
-      return;
-    }
-    try {
-      const text = getText(this.key);
-      this._text = text || this.defaultValue || this.fallback || this.key;
-    } catch (error) {
-      console.error("Error loading text for key:", this.key, error);
-      this._text = this.defaultValue || this.fallback || this.key;
-    }
-    this.requestUpdate();
-  }
-  render() {
-    return x`<span>${this._text || this.defaultValue || this.key}</span>`;
-  }
-};
-Text.styles = i4`
-    :host {
-      display: inline;
-    }
-
-    .loading {
-      opacity: 0.6;
-    }
-  `;
-customElements.define("ds-text", Text);
-
 // dist/2-core/ds-tooltip.js
 var Tooltip = class extends i6 {
   constructor() {
@@ -2864,19 +2886,13 @@ var Tooltip = class extends i6 {
       this._loadText();
     }
   }
-  async _loadText() {
+  _loadText() {
     if (!this.key) {
       this._text = this.defaultValue || "";
       this.requestUpdate();
       return;
     }
     try {
-      const notionText = await getNotionText(this.key);
-      if (notionText) {
-        this._text = notionText;
-        this.requestUpdate();
-        return;
-      }
       const t5 = translate(this.key);
       this._text = t5 && t5 !== this.key ? t5 : this.defaultValue || this.key;
     } catch (err) {
@@ -2917,10 +2933,10 @@ Tooltip.styles = i4`
       position: absolute;
       left: 50%;
       bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--scaling-factor)));
+      transform: translate(-50%, calc(-2px * var(--sf)));
       z-index: 1000;
       pointer-events: none;
-      height: calc(var(--08) * var(--scaling-factor));
+      height: calc(var(--08) * var(--sf));
       opacity: 0;
       transition:
         opacity 120ms ease,
@@ -2929,9 +2945,9 @@ Tooltip.styles = i4`
       color: light-dark(var(--white), var(--black));
       border-radius: 0;
       font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--scaling-factor));
+      padding: 0px calc(1px * var(--sf));
       font-family: var(
-        --typeface,
+        --typeface-regular,
         -apple-system,
         BlinkMacSystemFont,
         "Segoe UI",
@@ -2959,7 +2975,7 @@ var DateComponent = class extends i6 {
 DateComponent.styles = i4`
     :host {
       display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
+      font-family: var(--typeface-regular, var(--typeface-regular-regular));
       font-size: inherit;
       color: inherit;
     }
@@ -2999,18 +3015,18 @@ Row.styles = i4`
     :host {
       display: flex;
       align-items: end;
-      width: calc(240px * var(--scaling-factor));
+      width: calc(240px * var(--sf));
     }
 
     :host([type="fill"]) {
       justify-content: space-between;
-      height: calc(var(--1) * var(--scaling-factor));
+      height: calc(var(--1) * var(--sf));
     }
 
     :host([type="centered"]) {
       justify-content: center;
-      height: calc(var(--1) * var(--scaling-factor));
-      gap: calc(var(--025) * var(--scaling-factor));
+      height: calc(var(--1) * var(--sf));
+      gap: calc(var(--025) * var(--sf));
     }
   `;
 customElements.define("ds-row", Row);
@@ -3027,7 +3043,6 @@ var DsTable = class extends i6 {
     return x`
       <div class="table-container">
         <div class="table-header">
-        
           <div class="header-cell product-cell">Product</div>
           <div class="header-cell users-cell">Users</div>
           <div class="header-cell retention-cell">Retention</div>
@@ -3083,8 +3098,8 @@ DsTable.styles = i4`
       display: flex;
       align-items: center;
       justify-content: left;
-      padding:  0 2px;
-      font-family: var(--typeface);
+      padding: 0 2px;
+      font-family: var(--typeface-regular);
       font-size: var(--type-size-default);
       font-weight: var(--type-weight-default);
       line-height: var(--type-lineheight-default);
@@ -3098,10 +3113,10 @@ DsTable.styles = i4`
       display: flex;
       align-items: center;
       justify-content: left;
-    
+
       outline: 1px solid var(--black);
 
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
       font-size: var(--type-size-default);
       font-weight: var(--type-weight-default);
       line-height: var(--type-lineheight-default);
@@ -3110,7 +3125,7 @@ DsTable.styles = i4`
     }
 
     .status-cell {
-      background-color: var(--light-green);
+      background-color: var(--apple-green);
     }
 
     .product-cell {
@@ -3140,43 +3155,12 @@ customElements.define("ds-table", DsTable);
 
 // dist/4-page/ds-grid.js
 var Grid = class extends i6 {
-  constructor() {
-    super(...arguments);
-    this._isMobile = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._isMobile = detectMobileDevice();
-    console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
-    if (this._isMobile) {
-      this.classList.add("mobile");
-      console.log(`[ds-grid] Mobile class added`);
-    }
-    if (this._isMobile && typeof window !== "undefined") {
-      const screenWidth = window.innerWidth;
-      const columns = 14;
-      const gap = 0.5;
-      const totalGapWidth = (columns - 1) * gap;
-      const columnSize = (screenWidth - totalGapWidth) / columns;
-      console.log(`[ds-grid] Mobile grid: ${columns} columns \xD7 ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`);
-      this.style.setProperty("--mobile-column-size", `${columnSize}px`);
-      this.style.setProperty("--mobile-gap", `${gap}px`);
-    }
-  }
-  updated() {
-    if (this._isMobile) {
-      this.classList.add("mobile");
-    } else {
-      this.classList.remove("mobile");
-    }
-  }
   render() {
     return x``;
   }
 };
 Grid.properties = {
-  align: { type: String },
-  _isMobile: { type: Boolean, state: true }
+  align: { type: String }
 };
 Grid.styles = i4`
     :host {
@@ -3184,17 +3168,13 @@ Grid.styles = i4`
       margin-left: 0.5px !important;
       display: grid;
       width: 1440px;
-      height: 100%;
+      height: 360px;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
-      row-rule: calc(1px * var(--scaling-factor)) solid
-        light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
-      column-rule: calc(1px * var(--scaling-factor)) solid
-        light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
-      outline:
-        1px solid light-dark(rgb(147, 147, 147)),
-        rgb(147, 147, 147);
+      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
+      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
+      outline: 1px solid black;
       position: fixed;
       top: 0;
       left: 50%;
@@ -3205,21 +3185,20 @@ Grid.styles = i4`
 
     /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
     :host(.mobile) {
-      outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
-      width: calc(100% - calc(1px * var(--scaling-factor)));
+      width: calc(100% - calc(1px * var(--sf)));
       max-width: 100vw;
       margin-left: 0 !important;
       margin-top: 0 !important;
       box-sizing: border-box;
       position: fixed;
-      top: calc(0.5px * var(--scaling-factor));
+      top: calc(0.5px * var(--sf));
       left: 50%;
       transform: translateX(-50%);
       pointer-events: none;
       z-index: 300;
-      gap: calc(1px * var(--scaling-factor));
-      grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
+      gap: calc(1px * var(--sf));
+      grid-template-columns: repeat(14, calc(19px * var(--sf)));
+      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
     }
 
     :host([align="left"]) {
@@ -3242,26 +3221,66 @@ customElements.define("ds-grid", Grid);
 
 // dist/4-page/ds-layout.js
 var Layout = class extends i6 {
+  constructor() {
+    super(...arguments);
+    this.mode = "portfolio";
+  }
   render() {
     const isDebug = this.debug || this.mode === "debug";
+    const isPortfolio = this.mode === "portfolio";
     const isCompany = this.mode === "company";
+    const isApp = this.mode === "app";
     return x`
       <slot></slot>
       ${isDebug ? x`
             <div class="debug-overlay">
-              ${isCompany ? x`
-                    <div class="debug-area debug-header">header</div>
-                    <div class="debug-area debug-content">content</div>
-                    <div class="debug-area debug-footer">footer</div>
-                  ` : x`
-                    <div class="debug-area debug-square">square</div>
-                    <div class="debug-area debug-title">title</div>
-                    <div class="debug-area debug-header">header</div>
-                    <div class="debug-area debug-projects">projects</div>
-                    <div class="debug-area debug-bio">bio</div>
-                    <div class="debug-area debug-nav">nav</div>
-                    <div class="debug-area debug-footer">footer</div>
-                  `}
+              ${isApp ? x`
+                    <div class="debug-area debug-banner">
+                      <ds-text key="banner">banner</ds-text>
+                    </div>
+                    <div class="debug-area debug-header">
+                      <ds-text key="header">header</ds-text>
+                    </div>
+
+                    <div class="debug-area debug-main">
+                      <ds-text key="main">main</ds-text>
+                    </div>
+                    <div class="debug-area debug-footer-app">
+                      <ds-text key="footer">footer</ds-text>
+                    </div>
+                  ` : isCompany ? x`
+                      <div class="debug-area debug-header">
+                        <ds-text key="header">header</ds-text>
+                      </div>
+                      <div class="debug-area debug-content">
+                        <ds-text key="content">content</ds-text>
+                      </div>
+                      <div class="debug-area debug-footer">
+                        <ds-text key="footer">footer</ds-text>
+                      </div>
+                    ` : isPortfolio ? x`
+                        <div class="debug-area debug-square">
+                          <ds-text key="square">square</ds-text>
+                        </div>
+                        <div class="debug-area debug-title">
+                          <ds-text key="title">title</ds-text>
+                        </div>
+                        <div class="debug-area debug-header">
+                          <ds-text key="header">header</ds-text>
+                        </div>
+                        <div class="debug-area debug-projects">
+                          <ds-text key="projects">projects</ds-text>
+                        </div>
+                        <div class="debug-area debug-bio">
+                          <ds-text key="bio">bio</ds-text>
+                        </div>
+                        <div class="debug-area debug-nav">
+                          <ds-text key="nav">nav</ds-text>
+                        </div>
+                        <div class="debug-area debug-footer">
+                          <ds-text key="footer">footer</ds-text>
+                        </div>
+                      ` : ""}
             </div>
           ` : ""}
     `;
@@ -3275,6 +3294,11 @@ Layout.properties = {
 Layout.styles = i4`
     :host {
       display: grid;
+      position: relative;
+      width: 100%;
+    }
+
+    :host([mode="portfolio"]) {
       grid-template-columns: 120px 480px 40px;
       grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
       grid-template-areas:
@@ -3291,8 +3315,6 @@ Layout.styles = i4`
         ". . .";
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
-      position: relative;
-      width: 100%;
       max-width: 640px;
       margin: 0 auto;
     }
@@ -3326,6 +3348,29 @@ Layout.styles = i4`
       justify-self: end;
     }
 
+    /* App mode - Base */
+    :host([mode="app"]) {
+      grid-template-columns: 1fr;
+      grid-template-rows: calc(var(--1) * var(--sf)) 20px 1fr auto;
+      grid-template-areas:
+        "banner"
+        "main"
+        "footer";
+      min-height: 100vh;
+      background-color: transparent;
+      width: 100%;
+      margin: 0 auto;
+      gap: 0;
+    }
+
+    /* App mode - with scaling factor */
+    :host([mode="app"]) {
+      max-width: calc(400px * var(--sf, 1));
+      padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
+        calc(9.751px * var(--sf, 1));
+      gap: calc(28px * var(--sf, 1));
+    }
+
     .debug-overlay {
       position: absolute;
       margin-left: -1px;
@@ -3338,6 +3383,9 @@ Layout.styles = i4`
       display: grid;
       font-size: 18px;
       font-weight: bold;
+    }
+
+    :host([mode="portfolio"]) .debug-overlay {
       grid-template-columns: 120px 480px;
       grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
       grid-template-areas:
@@ -3373,7 +3421,7 @@ Layout.styles = i4`
       justify-content: center;
       font-size: 10px;
       font-weight: var(--type-weight-default);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
       color: var(--black);
       border: 1px solid red;
       opacity: 1;
@@ -3409,13 +3457,49 @@ Layout.styles = i4`
 
     .debug-footer {
       grid-area: footer;
-      border-color: #ffa500;
+      border-color: rgb(24, 147, 73);
+      background-color: rgba(127, 123, 11, 0.1);
     }
 
     .debug-content {
       grid-area: content;
       border-color: rgba(71, 231, 71, 0.63);
     }
+
+    :host([mode="app"]) .debug-overlay {
+      grid-template-columns: 1fr;
+      grid-template-rows:
+        calc(var(--1) * var(--sf))
+        calc(var(--2) * var(--sf))
+        calc(var(--4) * var(--sf))
+        calc(var(--1) * var(--sf));
+      grid-template-areas:
+        "banner"
+        "header"
+        "main"
+        "footer";
+    }
+
+    .debug-banner {
+      grid-area: banner;
+      border-color: #daed09;
+    }
+
+    .debug-header {
+      grid-area: header;
+      border-color: #0000ff;
+      background-color: rgba(127, 123, 11, 0.5);
+    }
+
+    .debug-main {
+      grid-area: main;
+      border-color: #0000ff;
+    }
+
+    .debug-footer-app {
+      grid-area: footer;
+      border-color: #ffa500;
+    }
   `;
 customElements.define("ds-layout", Layout);
 export {
@@ -3438,7 +3522,6 @@ export {
   getBrowserLanguage,
   getDeviceInfo,
   getLanguageDisplayName,
-  getNotionText,
   getPriceLabel,
   getText,
   hasTranslation,
@@ -3446,7 +3529,6 @@ export {
   loadTranslations,
   savePreferences,
   setLanguage,
-  setNotionText,
   setTheme,
   translate
 };