ds-one 0.2.5-alpha.12 → 0.2.5-alpha.14

package/DS1/0-face/device.ts

@@ -104,6 +104,10 @@ export function initDeviceDetection(): DeviceInfo {
       scalingFactor.toFixed(3)
     );
 
+    // Add .mobile class to html element for CSS targeting
+    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)}`
     );
@@ -113,6 +117,10 @@ export function initDeviceDetection(): DeviceInfo {
       document.documentElement.style.setProperty("--sf", "1");
       // Also set --sf for backwards compatibility
       document.documentElement.style.setProperty("--sf", "1");
+
+      // Add .desktop class and remove .mobile class
+      document.documentElement.classList.add("desktop");
+      document.documentElement.classList.remove("mobile");
     }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.5-alpha.12 */
+/* version 0.2.5-alpha.14 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
 
@@ -28,7 +28,7 @@ input {
 
   --black: #2a2a2a;
   --white: rgb(255 255 255);
-  --slate: #bdbdbd;
+  --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
 
@@ -43,6 +43,8 @@ input {
   --yellow: #eaff00;
   --orange: #fec20d;
 
+  --accent-color: var(--apple-green);
+
   /* 4-page component colors */
 
   /* ds-grid color */
@@ -54,9 +56,14 @@ input {
   --typeface-regular: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
   --typeface-compressed: "GT-America-Compressed-Regular";
-  --typeface-regular-jp: "Noto Sans JP";
   --typeface-mono: "Iosevka";
 
+  /* language specific typefaces */
+
+  --typeface-regular-jp: "Noto Sans JP";
+
+  /* typefaces sizes and weight */
+
   --type-size-default: calc(14px * var(--sf));
   --type-size-small: calc(10px * var(--sf));
   --type-weight-default: 500;
@@ -73,6 +80,37 @@ input {
   --type-weight-book: 400;
   --type-lineheight-book: 15px;
 
+  /* ----------------------------------------------------------
+   SIZING SCALE
+   - Define a base unit ( --1 ) and derive all other sizes
+   - Larger sizes are simple multipliers (×2, ×3, ×4)
+   - Smaller sizes use fractional multipliers (0.1, 0.25, 0.8)
+   ---------------------------------------------------------- */
+
+  --01: calc(var(--1) * 0.1);
+  --025: calc(var(--1) * 0.25);
+  --05: calc(var(--1) * 0.5);
+  --08: calc(var(--1) * 0.8);
+  --1: 20px; /* SET BASE UNIT HERE FOR EXAMPLE 20px */
+  --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
+  --4: calc(var(--1) * 4);
+  --8: calc(var(--1) * 8);
+  --12: calc(var(--1) * 12);
+
+  /* Semantic sizing units */
+
+  --tenth: var(--01);
+  --quarter: var(--025);
+  --half: var(--05);
+  --eight-tenth: var(--08);
+  --unit: var(--1);
+  --double: var(--2);
+  --triple: var(--3);
+  --quad: var(--4);
+  --oct: var(--8);
+  --dozen: var(--12);
+
   /* size */
   --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));
   --outline-stroke-mobile: calc(1px * var(--sf)) solid
@@ -81,20 +119,6 @@ input {
   --item-height: calc(19px * var(--sf));
   --margin-correction: calc(1px * var(--sf));
 
-  /* SIZING */
-
-  /* main unit */
-  --1: 20px;
-  /* bigger sizes */
-  --2: calc(var(--1) * 2);
-  --3: calc(var(--1) * 3);
-  --4: calc(var(--1) * 4);
-
-  /* smaller sizes */
-  --01: calc(var(--1) * 0.1);
-  --025: calc(var(--1) * 0.25);
-  --08: calc(var(--1) * 0.8);
-
   /* button */
   --button-background-color-primary: var(--accent-color);
   --button-background-color-secondary: light-dark(

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

@@ -1,3 +1,196 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
 
+import { LitElement, html, css } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Banner extends LitElement {
+  static properties = {
+    textKey: { type: String, attribute: "text-key" },
+    actionKey: { type: String, attribute: "action-key" },
+    href: { type: String },
+    mailto: { type: String },
+    subjectKey: { type: String, attribute: "subject-key" },
+    describeKey: { type: String, attribute: "describe-key" },
+    appVersionKey: { type: String, attribute: "app-version-key" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+  };
+
+  textKey: string = "";
+  actionKey: string = "";
+  href: string = "";
+  mailto: string = "";
+  subjectKey: string = "";
+  describeKey: string = "";
+  appVersionKey: string = "";
+  variant: string = "warning"; // warning, info, success, error
+  version: string = "";
+  _showVersion: boolean = false;
+
+  private _boundUpdate = () => this.requestUpdate();
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for translations and language changes to rebuild mailto URL
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(var(--unit) * var(--sf, 1));
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 calc(var(--unit) * var(--sf, 1));
+      box-sizing: border-box;
+      z-index: 9999;
+    }
+
+    :host([variant="warning"]) {
+      background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+      --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+      --banner-action-color: var(--slate);
+    }
+
+    :host([variant="info"]) {
+      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="success"]) {
+      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="error"]) {
+      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--slate, #1e1e1e);
+    }
+
+    .text-wrapper {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .text-wrapper ds-text,
+    .text-wrapper .version {
+      color: var(--banner-text-color);
+    }
+
+    .action-wrapper {
+      font-size: calc(12px * var(--sf, 1));
+    }
+
+    .action-wrapper a {
+      color: var(--banner-action-color);
+      text-decoration: none;
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+    }
+
+    .action-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .action-wrapper ds-text {
+      color: var(--banner-action-color);
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      pointer-events: none;
+    }
+  `;
+
+  private _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+
+  private _getMailtoHref(): string {
+    // If a direct href is provided, use it
+    if (this.href && this.href !== "#") return this.href;
+
+    // If mailto is provided, build internationalized URL
+    if (this.mailto) {
+      try {
+        const subject = this.subjectKey
+          ? getText(this.subjectKey) || this.subjectKey
+          : "Issue report";
+        const describe = this.describeKey
+          ? getText(this.describeKey) || this.describeKey
+          : "Describe the issue:";
+        const appVersionLabel = this.appVersionKey
+          ? getText(this.appVersionKey) || this.appVersionKey
+          : "App version:";
+
+        const body = `${describe}\n\n\n${appVersionLabel} ${this.version || ""}`;
+
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        // Fallback if translations fail
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+
+    return "#";
+  }
+
+  render() {
+    const mailtoHref = this._getMailtoHref();
+
+    return html`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version
+          ? html`<ds-text default-value=${this.version}></ds-text>`
+          : html`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey
+        ? html`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          `
+        : ""}
+    `;
+  }
+}
+
+customElements.define("ds-banner", Banner);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-banner": Banner;
+  }
+}

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

@@ -56,10 +56,11 @@ export class Button extends LitElement {
   static styles = css`
     button {
       max-height: calc(var(--08) * var(--sf));
-      border: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--sf));
-      padding: 0 calc(1px * var(--sf));
+      padding: 0 calc(0.5px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -82,6 +83,19 @@ export class Button extends LitElement {
       font-family: var(--typeface-regular);
     }
 
+    button.text {
+      background-color: transparent;
+      color: var(--button-color, var(--button-text-color));
+      font-family: var(--typeface-regular);
+      padding: 0;
+      text-decoration: none;
+    }
+
+    button.text:hover {
+      opacity: 0.8;
+      text-decoration: none;
+    }
+
     button[bold] {
       font-weight: var(--type-weight-bold);
       font-family: var(--typeface-medium);

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

@@ -50,7 +50,7 @@ export class Text extends LitElement {
     :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/DS1/4-page/ds-container.ts

@@ -0,0 +1,60 @@
+// ds-container.ts
+// Container component with responsive width constraints
+
+import { LitElement, html, css } from "lit";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Container extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      max-width: 100%;
+      flex-direction: column;
+      background-color: var(--background-color);
+      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%;
+      }
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define("ds-container", Container);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-container": Container;
+  }
+}

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

@@ -2,6 +2,7 @@
 // Simple grid layout component
 
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/device";
 
 declare global {
   interface CustomElementRegistry {
@@ -16,6 +17,8 @@ export class Grid extends LitElement {
   };
 
   align?: string;
+  private resizeObserver?: () => void;
+  private resizeTimeout?: any;
 
   static styles = css`
     :host {
@@ -23,13 +26,13 @@ export class Grid extends LitElement {
       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%;
@@ -42,7 +45,7 @@ export class Grid extends LitElement {
     :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;
@@ -73,6 +76,43 @@ 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);
+    }
+  }
+
+  private 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``;
   }