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

package/dist/2-core/ds-text.js

@@ -29,6 +29,7 @@ export class Text extends LitElement {
             languageChanged: (() => {
                 console.log("Language changed event received in ds-text");
                 this._currentLanguage = currentLanguage.value;
+                this._updateLanguageAttribute();
                 this._loadText();
                 this.requestUpdate();
             }),
@@ -59,7 +60,9 @@ export class Text extends LitElement {
     }
     _updateLanguageAttribute() {
         const lang = this._currentLanguage || currentLanguage.value;
-        if (lang === "ja") {
+        // Check if language is Japanese (handles "ja", "ja-JP", etc.)
+        const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+        if (primaryLang === "ja") {
             this.setAttribute("data-language", "ja");
         }
         else {
@@ -69,6 +72,8 @@ export class Text extends LitElement {
     _loadText() {
         if (!this.key) {
             this._text = this.defaultValue || this.fallback || "";
+            this._updateLanguageAttribute();
+            this.requestUpdate();
             return;
         }
         try {
@@ -90,7 +95,7 @@ Text.styles = css `
     :host {
       display: inline;
       font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--sf));
+      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));

package/dist/4-page/ds-container.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+declare global {
+    interface CustomElementRegistry {
+        define(name: string, constructor: typeof LitElement): void;
+    }
+    var customElements: CustomElementRegistry;
+}
+export declare class Container extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-container": Container;
+    }
+}
+//# sourceMappingURL=ds-container.d.ts.map

package/dist/4-page/ds-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAgCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/4-page/ds-container.js

@@ -0,0 +1,42 @@
+// ds-container.ts
+// Container component with responsive width constraints
+import { LitElement, html, css } from "lit";
+export class Container extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Container.styles = css `
+    :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);

package/dist/4-page/ds-grid.d.ts

@@ -12,7 +12,12 @@ export declare class Grid extends LitElement {
         };
     };
     align?: string;
+    private resizeObserver?;
+    private resizeTimeout?;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateMobileClass;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/4-page/ds-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsDX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,aAAa,CAAC,CAAM;IAE5B,MAAM,CAAC,MAAM,0BAsDX;IAEF,iBAAiB;IAgBjB,oBAAoB;IAUpB,OAAO,CAAC,iBAAiB;IAWzB,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/4-page/ds-grid.js

@@ -1,7 +1,42 @@
 // ds-grid.ts
 // Simple grid layout component
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/device";
 export class Grid extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateMobileClass();
+        // Listen for resize events to update mobile class
+        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 html ``;
     }
@@ -15,13 +50,13 @@ Grid.styles = css `
       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%;
@@ -34,7 +69,7 @@ Grid.styles = css `
     :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;

package/dist/4-page/ds-layout.d.ts

@@ -13,13 +13,13 @@ export declare class Layout extends LitElement {
         align: {
             type: StringConstructor;
         };
-        debug: {
+        view: {
             type: BooleanConstructor;
         };
     };
     mode: string;
     align?: string;
-    debug?: boolean;
+    view?: boolean;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/4-page/ds-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAiNX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsNX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/4-page/ds-layout.js

@@ -1,5 +1,5 @@
 // ds-layout.ts
-// Simple grid layout component with debug mode
+// Simple grid layout component with view mode
 import { LitElement, html, css } from "lit";
 export class Layout extends LitElement {
     constructor() {
@@ -7,64 +7,64 @@ export class Layout extends LitElement {
         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 html `
       <slot></slot>
-      ${isDebug
+      ${isView
             ? html `
-            <div class="debug-overlay">
+            <div class="view-overlay">
               ${isApp
                 ? html `
-                    <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
                     ? html `
-                      <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
                         ? html `
-                        <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>
                       `
@@ -78,7 +78,7 @@ export class Layout extends LitElement {
 Layout.properties = {
     mode: { type: String },
     align: { type: String },
-    debug: { type: Boolean },
+    view: { type: Boolean },
 };
 Layout.styles = css `
     :host {
@@ -88,79 +88,103 @@ Layout.styles = css `
     }
 
     :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;
@@ -174,37 +198,7 @@ Layout.styles = css `
       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;
@@ -212,82 +206,93 @@ Layout.styles = css `
       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);