ds-one 0.2.5-alpha.9 → 0.3.0-alpha.2

package/DS1/0-face/device.ts

@@ -1,5 +1,11 @@
-// 2025-04-23-device.ts
-// Device detection and context utilities
+// device.ts
+// Device detection, context utilities, and responsive scaling
+
+import { signal } from "@lit-labs/signals";
+
+// ============================================================================
+// Types
+// ============================================================================
 
 export type DeviceType = "mobile" | "tablet" | "desktop";
 
@@ -14,6 +20,36 @@ export interface DeviceInfo {
   screenHeight: number;
 }
 
+export type ScalingMode = "auto" | "fixed" | "fluid";
+
+export interface ScalingConfig {
+  mode: ScalingMode;
+  baseWidth: number;
+  minScale: number;
+  maxScale: number;
+}
+
+// ============================================================================
+// Configuration & Signals
+// ============================================================================
+
+const defaultScalingConfig: 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>(defaultScalingConfig);
+
+// ============================================================================
+// Device Detection
+// ============================================================================
+
 /**
  * Comprehensive mobile device detection
  * Combines user agent detection, touch capability, and viewport size
@@ -80,40 +116,148 @@ export function getDeviceInfo(): DeviceInfo {
   };
 }
 
+// ============================================================================
+// Scaling
+// ============================================================================
+
+/**
+ * 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
+ * Desktop always uses factor 1; mobile uses computed factor
+ */
+export function updateScalingFactor(): void {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+
+  const isMobile = detectMobileDevice();
+
+  // Desktop: always use factor 1
+  if (!isMobile) {
+    const factor = 1;
+    scalingFactor.set(factor);
+    document.documentElement.style.setProperty("--sf", factor.toString());
+    window.dispatchEvent(
+      new CustomEvent("scaling-changed", {
+        detail: { scalingFactor: factor, config: scalingConfig.get() },
+      })
+    );
+    return;
+  }
+
+  // Mobile: compute scaling based on viewport
+  const viewportWidth = document.documentElement.clientWidth;
+  const config = scalingConfig.get();
+  const newFactor = calculateScalingFactor(viewportWidth, config);
+
+  scalingFactor.set(newFactor);
+  document.documentElement.style.setProperty("--sf", newFactor.toString());
+
+  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();
+}
+
 /**
- * Initialize device detection and log to console
+ * 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;
+}
+
+// ============================================================================
+// Unified Initialization
+// ============================================================================
+
+/**
+ * Initialize device detection and scaling
+ * Sets CSS classes (.mobile/.desktop) and --sf custom property
  */
 export function initDeviceDetection(): DeviceInfo {
   const deviceInfo = getDeviceInfo();
 
-  // Calculate and set scaling factor for mobile
-  if (deviceInfo.isMobile && typeof document !== "undefined") {
-    // Design width: 280px (14 columns × 20px)
-    const designWidth = 280;
-    const actualWidth = deviceInfo.screenWidth;
-    const scalingFactor = actualWidth / designWidth;
-
-    // Set CSS custom property for scaling on html element
-    document.documentElement.style.setProperty(
-      "--sf",
-      scalingFactor.toFixed(3)
-    );
-    // Also set --sf for backwards compatibility
-    document.documentElement.style.setProperty(
-      "--sf",
-      scalingFactor.toFixed(3)
-    );
+  if (typeof document === "undefined") {
+    return deviceInfo;
+  }
 
+  // Set device class on html element
+  if (deviceInfo.isMobile) {
+    document.documentElement.classList.add("mobile");
+    document.documentElement.classList.remove("desktop");
+  } else {
+    document.documentElement.classList.add("desktop");
+    document.documentElement.classList.remove("mobile");
+  }
+
+  // Update scaling factor (handles --sf CSS property)
+  updateScalingFactor();
+
+  // Log device info
+  const factor = scalingFactor.get();
+  if (deviceInfo.isMobile) {
     console.log(
-      `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`
+      `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${factor.toFixed(2)}`
     );
   } else {
-    // Desktop - no scaling
-    if (typeof document !== "undefined") {
-      document.documentElement.style.setProperty("--sf", "1");
-      // Also set --sf for backwards compatibility
-      document.documentElement.style.setProperty("--sf", "1");
-    }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
     );
@@ -128,6 +272,7 @@ export function initDeviceDetection(): DeviceInfo {
       isDesktop: deviceInfo.isDesktop,
       isTouchCapable: deviceInfo.isTouchCapable,
       viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
+      scalingFactor: factor,
       userAgent: deviceInfo.userAgent,
     });
   }
@@ -147,12 +292,151 @@ if (typeof window !== "undefined") {
     initDeviceDetection();
   }
 
-  // Recalculate on resize (debounced)
-  let resizeTimeout: any;
+  // Single debounced resize handler for both device detection + scaling
+  let resizeTimeout: ReturnType<typeof setTimeout>;
   window.addEventListener("resize", () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(() => {
       initDeviceDetection();
     }, 100);
   });
+
+  // Also handle orientation change
+  window.addEventListener("orientationchange", () => {
+    setTimeout(initDeviceDetection, 100);
+  });
+}
+
+// ============================================================================
+// App-like Behavior
+// ============================================================================
+
+/**
+ * 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/1-root/one.css

@@ -1,57 +1,76 @@
-/* version 0.2.5-alpha.9 */
+/* version 0.3.0-alpha.2 */
+
+@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");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@800");
+
+@font-face {
+  font-family: GT-America-Standard-Regular;
+  src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GT-America-Standard-Medium;
+  src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GT-America-Compressed-Regular;
+  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
+}
 
 input {
   padding: 0;
 }
 
 :root {
-  /* colors */
-  --black: #2a2a2a;
+  /* DS one colors */
+
+  /* Base/[color]  */
+
   --white: rgb(255 255 255);
-  --slate: #bdbdbd;
+  --light-grey: #e8e8e8;
+  --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
-  --light-green: #99ff73;
-  --green: #979441;
-  --light-blue: #ccccff;
-  --blue: #594dff;
+  --stealth: #554455;
+  --black: #2a2a2a;
+
+  /* Accent/[color]  */
+  --tuned-red: #ff5f5f;
   --pink: #f5aad1;
-  --red: #ff5f5f;
+  --sharp-blue: #594dff;
+  --zenith-blue: #ccccff;
+  --every-green: #979441;
+  --apple-green: #99ff73;
+  --chartreuse-green: #ccff4d;
+  --yellow: #eaff00;
   --orange: #fec20d;
-  --yellow: #ffff00;
-
-  /* DS1 Documentation Colors */
-  --ds1-docs-header-bg: light-dark(#f5f5f5, #232323);
-  --ds1-docs-header-border: light-dark(#e0e0e0, #000000);
-  --ds1-docs-header-text: light-dark(#2a2a2a, #f1f1f1);
-  --ds1-docs-header-text-secondary: light-dark(#666666, #cdcdcd);
-  --ds1-docs-accent-green: #72ff3d;
-  --ds1-docs-sidebar-bg: light-dark(#fafafa, #1f1f1f);
-  --ds1-docs-content-bg: light-dark(#ffffff, #171717);
-  --ds1-docs-search-bg: light-dark(#f0f0f0, #171717);
-  --ds1-docs-divider: light-dark(#e0e0e0, #000000);
+
+  --accent-color: var(--apple-green);
 
   /* 4-page component colors */
 
   /* 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);
 
-  /* ds-layout colors */
-
-  --layout-color: light-dark(
-    var(--layout-color-light),
-    var(--layout-color-dark)
-  );
-
   /* typefaces */
-  --typeface: "GT-America-Standard-Regular";
+  --typeface-regular: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
   --typeface-compressed: "GT-America-Compressed-Regular";
-  --typeface-japanese: "Noto Sans JP";
   --typeface-mono: "Iosevka";
 
+  /* language specific typefaces */
+
+  --typeface-regular-jp: "Noto Sans JP";
+  --typeface-regular-zh-hans: "Noto Sans SC";
+  --typeface-regular-zh-hant: "Noto Sans TC";
+  --typeface-regular-zh: var(--typeface-regular-zh-hant);
+
+  /* typefaces sizes and weight */
+
   --type-size-default: calc(14px * var(--sf));
   --type-size-small: calc(10px * var(--sf));
   --type-weight-default: 500;
@@ -68,27 +87,80 @@ 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);
+  --20: calc(var(--1) * 20);
+
+  /* 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);
+  --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));
 
-  /* SIZING */
+  --column-width: calc(var(--quad) * var(--sf));
 
-  /* main unit */
-  --1: 20px;
-  /* bigger sizes */
-  --2: calc(var(--1) * 2);
-  --3: calc(var(--1) * 3);
-  --4: calc(var(--1) * 4);
+  --column-header-height: calc(var(--unit) * var(--sf));
+  --column-header-width: calc(var(--quad) * var(--sf));
 
-  /* smaller sizes */
-  --01: calc(var(--1) * 0.1);
-  --025: calc(var(--1) * 0.25);
-  --08: calc(var(--1) * 0.8);
+  /* ----------------------------------------------------------
+   SURFACE COLORS
+   - 
+   ---------------------------------------------------------- */
+
+  --background: light-dark(var(--white), var(--black));
+  --dialog-background: var(--background);
 
   /* button */
   --button-background-color-primary: var(--accent-color);
@@ -103,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 */
@@ -141,24 +213,6 @@ input {
   navigation: auto;
 }
 
-@font-face {
-  font-family: GT-America-Standard-Regular;
-  src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Standard-Medium;
-  src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Compressed-Regular;
-  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -166,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;
@@ -207,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;
@@ -438,7 +485,7 @@ table {
 }
 
 tr {
-  background-color: var(--light-green);
+  background-color: var(--apple-green);
 }
 
 td {