ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/DS1/2-core/{ds-year.ts → ds-date.ts}

@@ -3,13 +3,13 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for displaying the current year
  *
- * @element ds-year
+ * @element ds-date
  */
-export class Year extends LitElement {
+export class DateComponent extends LitElement {
   static styles = css`
     :host {
       display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
+      font-family: var(--typeface-regular, var(--typeface-regular-regular));
       font-size: inherit;
       color: inherit;
     }
@@ -21,11 +21,10 @@ export class Year extends LitElement {
   }
 }
 
-customElements.define("ds-year", Year);
+customElements.define("ds-date", DateComponent);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ds-year": Year;
+    "ds-date": DateComponent;
   }
 }
-

package/DS1/2-core/ds-icon.ts

@@ -26,8 +26,8 @@ export class Icon extends LitElement {
       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 {
@@ -44,8 +44,8 @@ export class Icon extends LitElement {
       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 */

package/DS1/2-core/ds-input.ts

@@ -0,0 +1 @@
+// here should be an input component

package/DS1/2-core/ds-text.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
+import { getText, currentLanguage } from "../0-face/i18n";
 
 /**
  * A component for displaying text from translations
@@ -23,6 +23,7 @@ export class Text extends LitElement {
   declare defaultValue: string;
   declare fallback: string;
   declare _text: string;
+  declare _currentLanguage: string;
   private boundHandlers: { languageChanged: EventListener };
 
   constructor() {
@@ -31,12 +32,15 @@ export class Text extends LitElement {
     this.defaultValue = "";
     this.fallback = "";
     this._text = "";
+    this._currentLanguage = currentLanguage.value;
 
     // Create bound event handlers for proper cleanup
     this.boundHandlers = {
       languageChanged: (() => {
         console.log("Language changed event received in ds-text");
+        this._currentLanguage = currentLanguage.value;
         this._loadText();
+        this.requestUpdate();
       }) as EventListener,
     };
   }
@@ -44,15 +48,25 @@ export class Text extends LitElement {
   static styles = css`
     :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);
     }
 
-    .loading {
-      opacity: 0.6;
+    :host([data-language="ja"]) {
+      font-family: var(--typeface-regular-jp);
     }
   `;
 
   connectedCallback() {
     super.connectedCallback();
+    this._currentLanguage = currentLanguage.value;
+    this._updateLanguageAttribute();
     this._loadText();
 
     // Listen for language changes
@@ -91,6 +105,15 @@ export class Text extends LitElement {
     }
   }
 
+  _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 || "";
@@ -104,6 +127,7 @@ export class Text extends LitElement {
       console.error("Error loading text for key:", this.key, error);
       this._text = this.defaultValue || this.fallback || this.key;
     }
+    this._updateLanguageAttribute();
     this.requestUpdate();
   }
 

package/DS1/2-core/ds-tooltip.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { translate, getNotionText } from "../utils/language";
+import { translate } from "../0-face/i18n";
 
 export class Tooltip extends LitElement {
   static properties = {
@@ -79,19 +79,21 @@ export class Tooltip extends LitElement {
       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, transform 120ms ease;
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
       background-color: light-dark(var(--black), var(--white));
       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",
@@ -150,7 +152,7 @@ export class Tooltip extends LitElement {
     }
   }
 
-  async _loadText(): Promise<void> {
+  _loadText(): void {
     if (!this.key) {
       this._text = this.defaultValue || "";
       this.requestUpdate();
@@ -158,12 +160,6 @@ export class Tooltip extends LitElement {
     }
 
     try {
-      const notionText = await getNotionText(this.key);
-      if (notionText) {
-        this._text = notionText;
-        this.requestUpdate();
-        return;
-      }
       const t = translate(this.key);
       this._text = t && t !== this.key ? t : this.defaultValue || this.key;
     } catch (err) {
@@ -192,4 +188,3 @@ declare global {
     "ds-tooltip": Tooltip;
   }
 }
-

package/DS1/3-unit/ds-list.ts

@@ -1,3 +1,10 @@
+// ds-banner.ts
+// Unit component that
+// can be used to show a list of items consiting of compoentnts from core
+
+
+
+
 import { LitElement, html, css } from "lit";
 
 export class List extends LitElement {

package/DS1/3-unit/ds-row.ts

@@ -23,18 +23,18 @@ export class Row extends LitElement {
     :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));
     }
   `;
 
@@ -50,4 +50,3 @@ declare global {
     "ds-row": Row;
   }
 }
-

package/DS1/3-unit/ds-table.ts

@@ -59,8 +59,8 @@ export class DsTable extends LitElement {
       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);
@@ -74,10 +74,10 @@ export class DsTable extends LitElement {
       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);
@@ -86,7 +86,7 @@ export class DsTable extends LitElement {
     }
 
     .status-cell {
-      background-color: var(--light-green);
+      background-color: var(--apple-green);
     }
 
     .product-cell {
@@ -117,7 +117,6 @@ export class DsTable extends LitElement {
     return html`
       <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>

package/DS1/4-page/ds-grid.ts

@@ -2,7 +2,6 @@
 // Simple grid layout component
 
 import { LitElement, html, css } from "lit";
-import { detectMobileDevice } from "../0-face/2025-04-23-device";
 
 declare global {
   interface CustomElementRegistry {
@@ -14,44 +13,9 @@ declare global {
 export class Grid extends LitElement {
   static properties = {
     align: { type: String },
-    _isMobile: { type: Boolean, state: true },
   };
 
   align?: string;
-  _isMobile: boolean = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._isMobile = detectMobileDevice();
-    console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
-
-    // Apply mobile class immediately
-    if (this._isMobile) {
-      this.classList.add("mobile");
-      console.log(`[ds-grid] Mobile class added`);
-    }
-
-    // Calculate mobile grid dimensions to fit screen
-    if (this._isMobile && typeof window !== "undefined") {
-      const screenWidth = window.innerWidth;
-      const columns = 14;
-      const gap = 0.5;
-
-      // Calculate column size accounting for gaps between columns
-      // Total width = (columns * columnSize) + ((columns - 1) * gap)
-      // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
-      const totalGapWidth = (columns - 1) * gap;
-      const columnSize = (screenWidth - totalGapWidth) / columns;
-
-      console.log(
-        `[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`
-      );
-
-      // Set custom property for this grid instance
-      this.style.setProperty("--mobile-column-size", `${columnSize}px`);
-      this.style.setProperty("--mobile-gap", `${gap}px`);
-    }
-  }
 
   static styles = css`
     :host {
@@ -59,17 +23,13 @@ export class Grid extends LitElement {
       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%;
@@ -80,21 +40,20 @@ export class Grid extends LitElement {
 
     /* 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"]) {
@@ -114,15 +73,6 @@ export class Grid extends LitElement {
     }
   `;
 
-  updated() {
-    // Apply mobile class if detected as mobile device
-    if (this._isMobile) {
-      this.classList.add("mobile");
-    } else {
-      this.classList.remove("mobile");
-    }
-  }
-
   render() {
     return html``;
   }

package/DS1/4-page/ds-layout.ts

@@ -17,13 +17,18 @@ export class Layout extends LitElement {
     debug: { type: Boolean },
   };
 
-  mode?: string;
+  mode: string = "portfolio";
   align?: string;
   debug?: boolean;
 
   static styles = css`
     :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:
@@ -40,8 +45,6 @@ export class Layout extends LitElement {
         ". . .";
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
-      position: relative;
-      width: 100%;
       max-width: 640px;
       margin: 0 auto;
     }
@@ -75,6 +78,29 @@ export class Layout extends LitElement {
       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;
@@ -87,6 +113,9 @@ export class Layout extends LitElement {
       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:
@@ -122,7 +151,7 @@ export class Layout extends LitElement {
       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;
@@ -158,39 +187,115 @@ export class Layout extends LitElement {
 
     .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;
+    }
   `;
 
   render() {
     const isDebug = this.debug || this.mode === "debug";
+    const isPortfolio = this.mode === "portfolio";
     const isCompany = this.mode === "company";
+    const isApp = this.mode === "app";
 
     return html`
       <slot></slot>
       ${isDebug
         ? html`
             <div class="debug-overlay">
-              ${isCompany
+              ${isApp
                 ? html`
-                    <div class="debug-area debug-header">header</div>
-                    <div class="debug-area debug-content">content</div>
-                    <div class="debug-area debug-footer">footer</div>
+                    <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>
                   `
-                : html`
-                    <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>
-                  `}
+                : isCompany
+                  ? html`
+                      <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
+                    ? html`
+                        <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>
           `
         : ""}