ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/DS1/0-face/device.ts

@@ -164,3 +164,133 @@ if (typeof window !== "undefined") {
     }, 100);
   });
 }
+
+/**
+ * Disable double-tap to zoom in the browser (app-like behavior)
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
+ */
+export function applike(): void {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return;
+  }
+
+  // Set viewport meta tag to prevent zoom - this is the most important step
+  let viewport = document.querySelector('meta[name="viewport"]');
+  if (!viewport) {
+    viewport = document.createElement("meta");
+    viewport.setAttribute("name", "viewport");
+    document.head.appendChild(viewport);
+  }
+  viewport.setAttribute(
+    "content",
+    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+  );
+
+  // Apply touch-action: pan-x pan-y globally to prevent zoom but allow panning
+  const style = document.createElement("style");
+  style.id = "ds-one-applike-style";
+  style.textContent = `
+    * {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+    html, body {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+  `;
+  // Remove existing style if present
+  const existingStyle = document.getElementById("ds-one-applike-style");
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  document.head.appendChild(style);
+
+  // Track touch events to prevent double-tap zoom
+  let lastTouchEnd = 0;
+  let touchStartTime = 0;
+
+  const preventZoom = (event: TouchEvent | WheelEvent | Event) => {
+    // Prevent pinch zoom (two fingers)
+    if (event instanceof TouchEvent) {
+      if (event.touches.length > 1) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      const now = Date.now();
+
+      if (event.type === "touchstart") {
+        // If touchstart happens within 300ms of last touchend, it's likely a double-tap
+        if (now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        touchStartTime = now;
+      } else if (event.type === "touchend") {
+        const touchDuration = now - touchStartTime;
+        // If this is a quick tap (< 300ms) and happened soon after previous touchend, prevent it
+        if (touchDuration < 300 && now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        lastTouchEnd = now;
+      } else if (event.type === "touchmove") {
+        // Prevent any touchmove that might trigger zoom
+        if (event.touches.length > 1) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+
+    // Prevent wheel zoom with ctrl/cmd key (common on trackpads)
+    if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  };
+
+  // Use capture phase to catch events earlier
+  const options = { passive: false, capture: true };
+
+  // Prevent all zoom gestures - use capture phase
+  document.addEventListener("touchstart", preventZoom, options);
+  document.addEventListener("touchmove", preventZoom, options);
+  document.addEventListener("touchend", preventZoom, options);
+  document.addEventListener("touchcancel", preventZoom, options);
+
+  // Prevent wheel zoom
+  document.addEventListener("wheel", preventZoom, options);
+
+  // Prevent gesture events (iOS Safari) - use capture phase
+  document.addEventListener(
+    "gesturestart",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+  document.addEventListener(
+    "gesturechange",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+  document.addEventListener(
+    "gestureend",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+}

package/DS1/0-face/scaling.ts

@@ -0,0 +1,152 @@
+// scaling.ts
+// Responsive scaling utilities for the design system
+
+import { signal } from "@lit-labs/signals";
+
+export type ScalingMode = "auto" | "fixed" | "fluid";
+
+export interface ScalingConfig {
+  mode: ScalingMode;
+  baseWidth: number;
+  minScale: number;
+  maxScale: number;
+}
+
+const defaultConfig: ScalingConfig = {
+  mode: "auto",
+  baseWidth: 280,
+  minScale: 0.75,
+  maxScale: 2.0,
+};
+
+// Reactive scaling factor signal
+export const scalingFactor = signal<number>(1);
+
+// Current scaling configuration
+export const scalingConfig = signal<ScalingConfig>(defaultConfig);
+
+/**
+ * Calculate the scaling factor based on viewport width
+ * @param viewportWidth - Current viewport width in pixels
+ * @param config - Scaling configuration
+ * @returns The calculated scaling factor
+ */
+export function calculateScalingFactor(
+  viewportWidth: number,
+  config: ScalingConfig = scalingConfig.get()
+): number {
+  if (config.mode === "fixed") {
+    return 1;
+  }
+
+  const rawScale = viewportWidth / config.baseWidth;
+  const clampedScale = Math.max(
+    config.minScale,
+    Math.min(config.maxScale, rawScale)
+  );
+
+  return Number(clampedScale.toFixed(3));
+}
+
+/**
+ * Set the scaling configuration
+ * @param config - Partial scaling configuration to apply
+ */
+export function setScalingConfig(config: Partial<ScalingConfig>): void {
+  const currentConfig = scalingConfig.get();
+  const newConfig = { ...currentConfig, ...config };
+  scalingConfig.set(newConfig);
+
+  // Recalculate scaling factor if in browser
+  if (typeof window !== "undefined") {
+    updateScalingFactor();
+  }
+}
+
+/**
+ * Update the scaling factor based on current viewport
+ */
+export function updateScalingFactor(): void {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const config = scalingConfig.get();
+  const newFactor = calculateScalingFactor(viewportWidth, config);
+
+  scalingFactor.set(newFactor);
+
+  // Update CSS custom property
+  document.documentElement.style.setProperty("--sf", newFactor.toString());
+
+  // Dispatch event for components that need to react
+  window.dispatchEvent(
+    new CustomEvent("scaling-changed", {
+      detail: { scalingFactor: newFactor, config },
+    })
+  );
+}
+
+/**
+ * Get the current scaling factor
+ * @returns The current scaling factor
+ */
+export function getScalingFactor(): number {
+  return scalingFactor.get();
+}
+
+/**
+ * Convert a design pixel value to scaled pixels
+ * @param designPx - The design pixel value (based on 280px width)
+ * @returns The scaled pixel value
+ */
+export function scale(designPx: number): number {
+  return designPx * scalingFactor.get();
+}
+
+/**
+ * Convert a scaled pixel value back to design pixels
+ * @param scaledPx - The scaled pixel value
+ * @returns The design pixel value
+ */
+export function unscale(scaledPx: number): number {
+  const factor = scalingFactor.get();
+  return factor === 0 ? scaledPx : scaledPx / factor;
+}
+
+/**
+ * Initialize scaling system
+ * This is typically called automatically when the module loads
+ */
+export function initScaling(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  // Initial calculation
+  updateScalingFactor();
+
+  // Update on resize (debounced)
+  let resizeTimeout: ReturnType<typeof setTimeout>;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      updateScalingFactor();
+    }, 100);
+  });
+
+  // Update on orientation change
+  window.addEventListener("orientationchange", () => {
+    setTimeout(updateScalingFactor, 100);
+  });
+}
+
+// Auto-initialize when module loads in browser
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initScaling);
+  } else {
+    initScaling();
+  }
+}

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.5-alpha.17 */
+/* version 0.2.5-alpha.19 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800");
@@ -33,6 +33,7 @@ input {
   --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
+  --stealth: #554455;
   --black: #2a2a2a;
 
   /* Accent/[color]  */
@@ -52,7 +53,7 @@ input {
 
   /* ds-grid color */
   --grid-color: light-dark(var(--grid-color-light), var(--grid-color-dark));
-  --grid-color-light: var(--slate);
+  --grid-color-light: #1e1e1e2b;
   --grid-color-dark: var(--white);
 
   /* typefaces */
@@ -103,6 +104,7 @@ input {
   --4: calc(var(--1) * 4);
   --8: calc(var(--1) * 8);
   --12: calc(var(--1) * 12);
+  --20: calc(var(--1) * 20);
 
   /* Semantic sizing units */
 
@@ -116,15 +118,50 @@ input {
   --quad: var(--4);
   --oct: var(--8);
   --dozen: var(--12);
+  --twenty: var(--20);
+
+  /* Layouts */
+
+  /* App layout (used for app) */
+  --app-layout: 
+
+
+  /* Home layout (used for lists) */ --home-layout: calc(
+      var(--unit) * var(--sf)
+    )
+    calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--unit) * var(--sf)) calc(var(--oct) * var(--sf))
+    calc(var(--oct) * var(--sf)) calc(var(--quad) * var(--sf))
+    calc(var(--double) * var(--sf));
+  --home-layout-areas: "banner" "." "header" "." "message" "lists" "." "footer";
+
+  /* App layout */
+  --app-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf))
+    calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf))
+    calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));
+  --app-layout-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";
 
   /* size */
-  --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));
-  --outline-stroke-mobile: calc(1px * var(--sf)) solid
-    light-dark(var(--black), var(--slate-dark));
+  --outline-stroke: 1px solid var(--slate-light);
+  --outline-stroke-mobile: 2px solid var(--sharp-blue);
   --item-width: calc(79px * var(--sf));
   --item-height: calc(19px * var(--sf));
   --margin-correction: calc(1px * var(--sf));
 
+  --column-width: calc(var(--quad) * var(--sf));
+
+  --column-header-height: calc(var(--unit) * var(--sf));
+  --column-header-width: calc(var(--quad) * var(--sf));
+
+  /* ----------------------------------------------------------
+   SURFACE COLORS
+   - 
+   ---------------------------------------------------------- */
+
+  --background: light-dark(var(--white), var(--black));
+  --dialog-background: var(--background);
+
   /* button */
   --button-background-color-primary: var(--accent-color);
   --button-background-color-secondary: light-dark(
@@ -138,7 +175,7 @@ input {
   );
 
   /* text-color */
-  --text-color-primary: light-dark(var(--black), var(--white));
+  --text-color: light-dark(var(--black), var(--white));
   --text-color-dimmed: light-dark(var(--slate), var(--slate-light));
 
   /* icon colors */
@@ -183,7 +220,6 @@ body {
 
 .matrix__board {
   position: relative;
-  top: calc(21.5px * var(--sf));
   left: calc(-20px * var(--sf));
   width: calc(240px * var(--sf));
   display: flex;
@@ -224,28 +260,22 @@ body {
   height: var(--item-height);
   margin-right: var(--margin-correction);
   margin-bottom: var(--margin-correction);
-  outline: var(--outline-stroke);
   background-color: light-dark(var(--white), var(--black));
 }
 
 .matrix__row-header {
   position: relative;
-  top: calc(0.5px * var(--sf));
+  /* top: calc(0.5px * var(--sf)); */
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(19px * var(--sf));
-  height: var(--item-height);
-  margin-right: var(--margin-correction);
-  margin-bottom: var(--margin-correction);
-  outline: var(--outline-stroke);
+  width: calc(var(--unit) * var(--sf));
+  height: calc(var(--unit) * var(--sf));
+  /* margin-right: var(--margin-correction);
+  margin-bottom: var(--margin-correction); */
   background-color: light-dark(rgb(220 241 213), var(--slate-dark));
 }
 
-.mobile .matrix__row-header {
-  outline: var(--outline-stroke-mobile);
-}
-
 .matrix__column-content {
   display: flex;
   flex-direction: column;

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

@@ -1,10 +1,11 @@
 // ds-banner.ts
 // Fixed banner component for notifications/alerts
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n.js";
 import "./ds-text.js";
 import "./ds-button.js";
+import styles from "./styles/ds-banner.css?inline";
 
 declare global {
   interface CustomElementRegistry {
@@ -53,82 +54,7 @@ export class Banner extends LitElement {
     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;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   private _toggleVersion() {
     if (this.version) {

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

@@ -1,8 +1,9 @@
 // ds-button.ts
 // Core button component
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import "./ds-text";
+import styles from "./styles/ds-button.css?inline";
 
 export class Button extends LitElement {
   static properties = {
@@ -53,72 +54,7 @@ export class Button extends LitElement {
     this._loading = false;
   }
 
-  static styles = css`
-    button {
-      max-height: calc(var(--08) * var(--sf));
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      cursor: pointer;
-      padding: 0 calc(0.5px * var(--sf));
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
-    }
-
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-    }
-
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface-regular);
-    }
-
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      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);
-    }
-
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
-      padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    button[no-background][bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    .loading {
-      opacity: 0.7;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();