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

package/dist/ds-one.bundle.js

@@ -40,11 +40,15 @@ function initDeviceDetection() {
     const scalingFactor = actualWidth / designWidth;
     document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
     document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
+    document.documentElement.classList.add("mobile");
+    document.documentElement.classList.remove("desktop");
     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("--sf", "1");
       document.documentElement.style.setProperty("--sf", "1");
+      document.documentElement.classList.add("desktop");
+      document.documentElement.classList.remove("mobile");
     }
     console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
   }
@@ -1807,13 +1811,106 @@ var o7 = s5.litElementPolyfillSupport;
 o7?.({ LitElement: i6 });
 (s5.litElementVersions ?? (s5.litElementVersions = [])).push("4.2.1");
 
+// 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._updateLanguageAttribute();
+        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;
+    const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+    if (primaryLang === "ja") {
+      this.setAttribute("data-language", "ja");
+    } else {
+      this.removeAttribute("data-language");
+    }
+  }
+  _loadText() {
+    if (!this.key) {
+      this._text = this.defaultValue || this.fallback || "";
+      this._updateLanguageAttribute();
+      this.requestUpdate();
+      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: var(--type-size-default);
+      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-button.js
 var Button = class extends i6 {
   constructor() {
     super();
-    this._handleLanguageChange = () => {
-      this._updateText();
-    };
     this.variant = "title";
     this.disabled = false;
     this.bold = false;
@@ -1825,35 +1922,12 @@ var Button = class extends i6 {
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._text = null;
   }
   connectedCallback() {
     super.connectedCallback();
-    this._updateText();
-    window.addEventListener("language-changed", this._handleLanguageChange);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this._handleLanguageChange);
-  }
-  updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("key") || changedProps.has("defaultText")) {
-      this._updateText();
-    }
-  }
-  /**
-   * Update text from translations (synchronous like Portfolio)
-   */
-  _updateText() {
-    if (this.key) {
-      this._text = getText(this.key);
-    } else {
-      this._text = this.defaultText || this.fallback || null;
-    }
-    this.requestUpdate();
   }
   render() {
+    const hasTextProps = this.key || this.defaultText || this.fallback;
     return x`
       <button
         class=${this.variant}
@@ -1862,7 +1936,11 @@ var Button = class extends i6 {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._text ? this._text : x`<slot></slot>`}
+        ${hasTextProps ? x`<ds-text
+              .key=${this.key}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>` : x`<slot></slot>`}
       </button>
     `;
   }
@@ -1899,16 +1977,14 @@ Button.properties = {
   language: { type: String },
   defaultText: { type: String, attribute: "default-text" },
   href: { type: String },
-  _loading: { type: Boolean, state: true },
-  _text: { type: String, state: true }
+  _loading: { type: Boolean, state: true }
 };
 Button.styles = i4`
     button {
       max-height: calc(var(--08) * var(--sf));
       border: none;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--sf));
-      padding: 0 calc(1px * var(--sf));
+      padding: 0 calc(2px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -2263,98 +2339,6 @@ 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);
@@ -2750,18 +2734,20 @@ 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
-                >` : 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>`}
+                >` : this.type === "language" ? x`<ds-text
+                    default-value=${this.getValueDisplay(this.currentValue)}
+                  ></ds-text>` : 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
@@ -3153,8 +3139,81 @@ DsTable.styles = i4`
   `;
 customElements.define("ds-table", DsTable);
 
+// dist/4-page/ds-container.js
+var Container = class extends i6 {
+  render() {
+    return x`<slot></slot>`;
+  }
+};
+Container.styles = i4`
+    :host {
+      display: flex;
+      width: 100%;
+      max-width: 100%;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+
+    /* Ensure children don't overflow */
+    :host ::slotted(*) {
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Mobile: 100% width */
+    @media (max-width: 820px) {
+      :host {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+
+    /* Desktop: max-width 1000px, centered */
+    @media (min-width: 821px) {
+      :host {
+        max-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
+  `;
+customElements.define("ds-container", Container);
+
 // dist/4-page/ds-grid.js
 var Grid = class extends i6 {
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateMobileClass();
+    this.resizeObserver = () => {
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      this.resizeTimeout = setTimeout(() => {
+        this.updateMobileClass();
+      }, 100);
+    };
+    window.addEventListener("resize", this.resizeObserver);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizeObserver) {
+      window.removeEventListener("resize", this.resizeObserver);
+    }
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+    }
+  }
+  updateMobileClass() {
+    const isMobile = detectMobileDevice();
+    if (isMobile) {
+      this.classList.add("mobile");
+      this.classList.remove("desktop");
+    } else {
+      this.classList.add("desktop");
+      this.classList.remove("mobile");
+    }
+  }
   render() {
     return x``;
   }
@@ -3168,13 +3227,13 @@ Grid.styles = i4`
       margin-left: 0.5px !important;
       display: grid;
       width: 1440px;
-      height: 360px;
+      height: 1280px;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
       row-rule: calc(1px * var(--sf)) solid var(--grid-color);
       column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: 1px solid black;
+      outline: calc(1px * var(--sf)) solid var(--yellow);
       position: fixed;
       top: 0;
       left: 50%;
@@ -3187,7 +3246,7 @@ Grid.styles = i4`
     :host(.mobile) {
       width: calc(100% - calc(1px * var(--sf)));
       max-width: 100vw;
-      margin-left: 0 !important;
+      margin-left: 0.5px !important;
       margin-top: 0 !important;
       box-sizing: border-box;
       position: fixed;
@@ -3226,58 +3285,58 @@ var Layout = class extends i6 {
     this.mode = "portfolio";
   }
   render() {
-    const isDebug = this.debug || this.mode === "debug";
+    const isView = this.view || this.mode === "view";
     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">
+      ${isView ? x`
+            <div class="view-overlay">
               ${isApp ? x`
-                    <div class="debug-area debug-banner">
+                    <div class="view-area view-banner">
                       <ds-text key="banner">banner</ds-text>
                     </div>
-                    <div class="debug-area debug-header">
+                    <div class="view-area view-header">
                       <ds-text key="header">header</ds-text>
                     </div>
 
-                    <div class="debug-area debug-main">
+                    <div class="view-area view-main">
                       <ds-text key="main">main</ds-text>
                     </div>
-                    <div class="debug-area debug-footer-app">
+                    <div class="view-area view-footer">
                       <ds-text key="footer">footer</ds-text>
                     </div>
                   ` : isCompany ? x`
-                      <div class="debug-area debug-header">
+                      <div class="view-area view-header">
                         <ds-text key="header">header</ds-text>
                       </div>
-                      <div class="debug-area debug-content">
+                      <div class="view-area view-content">
                         <ds-text key="content">content</ds-text>
                       </div>
-                      <div class="debug-area debug-footer">
+                      <div class="view-area view-footer">
                         <ds-text key="footer">footer</ds-text>
                       </div>
                     ` : isPortfolio ? x`
-                        <div class="debug-area debug-square">
+                        <div class="view-area view-square">
                           <ds-text key="square">square</ds-text>
                         </div>
-                        <div class="debug-area debug-title">
+                        <div class="view-area view-title">
                           <ds-text key="title">title</ds-text>
                         </div>
-                        <div class="debug-area debug-header">
+                        <div class="view-area view-header">
                           <ds-text key="header">header</ds-text>
                         </div>
-                        <div class="debug-area debug-projects">
+                        <div class="view-area view-projects">
                           <ds-text key="projects">projects</ds-text>
                         </div>
-                        <div class="debug-area debug-bio">
+                        <div class="view-area view-bio">
                           <ds-text key="bio">bio</ds-text>
                         </div>
-                        <div class="debug-area debug-nav">
+                        <div class="view-area view-nav">
                           <ds-text key="nav">nav</ds-text>
                         </div>
-                        <div class="debug-area debug-footer">
+                        <div class="view-area view-footer">
                           <ds-text key="footer">footer</ds-text>
                         </div>
                       ` : ""}
@@ -3289,7 +3348,7 @@ var Layout = class extends i6 {
 Layout.properties = {
   mode: { type: String },
   align: { type: String },
-  debug: { type: Boolean }
+  view: { type: Boolean }
 };
 Layout.styles = i4`
     :host {
@@ -3299,79 +3358,103 @@ Layout.styles = i4`
     }
 
     :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:
-        "square . ."
-        ". title ."
-        ". header ."
-        ". projects ."
-        ". . ."
-        ". bio ."
-        ". . ."
-        ". nav ."
-        ". . ."
-        ". footer ."
-        ". . .";
+      --portfolio-cols: 120px 480px 40px;
+      --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
+      --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
+        ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
+      --portfolio-overlay-cols: 120px 480px;
+      --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
+        ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
+      grid-template-columns: var(--portfolio-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-areas);
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
       max-width: 640px;
-      margin: 0 auto;
+      margin: 0;
+    }
+
+    :host([mode="portfolio"]) .view-overlay {
+      grid-template-columns: var(--portfolio-overlay-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-overlay-areas);
     }
 
     :host([mode="company"]) {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
+      --company-cols: auto 400px auto;
+      --company-rows: 80px 20px 20px 120px 20px 120px;
+      --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
         ". footer .";
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
       gap: 0;
       max-width: 100%;
     }
 
-    :host([align="left"]) {
+    :host([mode="company"]) .view-overlay {
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
+      gap: 0;
+    }
+
+    :host([align="left"]),
+    :host([mode="portfolio"][align="left"]),
+    :host([mode="company"][align="left"]),
+    :host([mode="app"][align="left"]) {
       margin: 0;
       justify-self: start;
     }
 
-    :host([align="center"]) {
+    :host([align="center"]),
+    :host([mode="portfolio"][align="center"]),
+    :host([mode="company"][align="center"]),
+    :host([mode="app"][align="center"]) {
       margin: 0 auto;
       justify-self: center;
     }
 
-    :host([align="right"]) {
+    :host([align="right"]),
+    :host([mode="portfolio"][align="right"]),
+    :host([mode="company"][align="right"]),
+    :host([mode="app"][align="right"]) {
       margin: 0 0 0 auto;
       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";
+      --app-cols: calc(var(--double) * var(--sf));
+      --app-rows: calc(var(--unit) * var(--sf)) calc(var(--2) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf));
+      --app-areas: "1" "." "2" "." "3";
+      --app-overlay-cols: calc(var(--oct) * var(--sf));
+      --app-overlay-rows: calc(var(--unit) * var(--sf))
+        calc(var(--double) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf));
+      --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
+      grid-template-columns: var(--app-cols);
+      grid-template-rows: var(--app-rows);
+      grid-template-areas: var(--app-areas);
       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 {
+    :host([mode="app"]) .view-overlay {
+      grid-template-columns: var(--app-overlay-cols);
+      grid-template-rows: var(--app-overlay-rows);
+      grid-template-areas: var(--app-overlay-areas);
+    }
+
+    .view-overlay {
       position: absolute;
       margin-left: -1px;
       top: 0;
@@ -3385,37 +3468,7 @@ Layout.styles = i4`
       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:
-        "square ."
-        ". title"
-        ". header"
-        ". projects"
-        ". ."
-        ". bio"
-        ". ."
-        ". nav"
-        ". ."
-        ". footer"
-        ". .";
-    }
-
-    :host([mode="company"]) .debug-overlay {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
-        ". footer .";
-      gap: 0;
-    }
-
-    .debug-area {
+    .view-area {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -3423,87 +3476,99 @@ Layout.styles = i4`
       font-weight: var(--type-weight-default);
       font-family: var(--typeface-regular);
       color: var(--black);
-      border: 1px solid red;
+      border: 1px solid;
       opacity: 1;
     }
 
-    .debug-square {
+    :host([mode="portfolio"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(4) {
+      border-color: var(--apple-green);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(5) {
+      border-color: var(--pink);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(6) {
+      border-color: var(--orange);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(7) {
+      border-color: var(--zenith-blue);
+    }
+
+    :host([mode="company"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+
+    :host([mode="app"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(4) {
+      border-color: var(--apple-green);
+    }
+
+    .view-square {
       grid-area: square;
     }
 
-    .debug-title {
+    .view-title {
       grid-area: title;
     }
 
-    .debug-header {
+    .view-header {
       grid-area: header;
-      border-color: #0000ff;
     }
 
-    .debug-projects {
+    .view-projects {
       grid-area: projects;
-      border-color: #ffff00;
     }
 
-    .debug-bio {
+    .view-bio {
       grid-area: bio;
-      border-color: #ff00ff;
     }
 
-    .debug-nav {
+    .view-nav {
       grid-area: nav;
-      border-color: #00ffff;
     }
 
-    .debug-footer {
+    .view-footer {
       grid-area: footer;
-      border-color: rgb(24, 147, 73);
-      background-color: rgba(127, 123, 11, 0.1);
     }
 
-    .debug-content {
+    .view-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 {
+    .view-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 {
+    .view-main {
       grid-area: main;
-      border-color: #0000ff;
-    }
-
-    .debug-footer-app {
-      grid-area: footer;
-      border-color: #ffa500;
     }
   `;
 customElements.define("ds-layout", Layout);
 export {
   Button,
+  Container,
   Cycle,
   DateComponent,
   DsTable,