ds-one 0.3.0-alpha.1 → 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,48 +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();
+  }
+}
+
 /**
- * Initialize device detection and log to console
+ * 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();
+}
+
+/**
+ * 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;
+  }
 
-    // Add .mobile class to html element for CSS targeting
+  // 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");
-
-      // 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})`
     );
@@ -136,6 +272,7 @@ export function initDeviceDetection(): DeviceInfo {
       isDesktop: deviceInfo.isDesktop,
       isTouchCapable: deviceInfo.isTouchCapable,
       viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
+      scalingFactor: factor,
       userAgent: deviceInfo.userAgent,
     });
   }
@@ -155,16 +292,25 @@ 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

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.1 */
+/* 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");

package/DS1/index.ts

@@ -23,7 +23,6 @@ export * from "./0-face/device";
 export * from "./0-face/i18n";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
-export * from "./0-face/scaling";
 export * from "./0-face/theme";
 
 // ============================================================================

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.3.0-alpha.1)
+# DS one (0.3.0-alpha.2)
 
 A plug and play design system
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
 
 ```
 
-**Note**: Currently published as alpha version `0.3.0-alpha.1`
+**Note**: Currently published as alpha version `0.3.0-alpha.2`
 
 ## Quick Start
 

package/dist/0-face/device.d.ts

@@ -9,6 +9,17 @@ export interface DeviceInfo {
     screenWidth: number;
     screenHeight: number;
 }
+export type ScalingMode = "auto" | "fixed" | "fluid";
+export interface ScalingConfig {
+    mode: ScalingMode;
+    baseWidth: number;
+    minScale: number;
+    maxScale: number;
+}
+/** Reactive scaling factor signal */
+export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
+/** Current scaling configuration */
+export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
 /**
  * Comprehensive mobile device detection
  * Combines user agent detection, touch capability, and viewport size
@@ -19,7 +30,42 @@ export declare function detectMobileDevice(): boolean;
  */
 export declare function getDeviceInfo(): DeviceInfo;
 /**
- * Initialize device detection and log to console
+ * 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 declare function calculateScalingFactor(viewportWidth: number, config?: ScalingConfig): number;
+/**
+ * Set the scaling configuration
+ * @param config - Partial scaling configuration to apply
+ */
+export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
+/**
+ * Update the scaling factor based on current viewport
+ * Desktop always uses factor 1; mobile uses computed factor
+ */
+export declare function updateScalingFactor(): void;
+/**
+ * Get the current scaling factor
+ * @returns The current scaling factor
+ */
+export declare function getScalingFactor(): number;
+/**
+ * Convert a design pixel value to scaled pixels
+ * @param designPx - The design pixel value (based on 280px width)
+ * @returns The scaled pixel value
+ */
+export declare function scale(designPx: number): number;
+/**
+ * Convert a scaled pixel value back to design pixels
+ * @param scaledPx - The scaled pixel value
+ * @returns The design pixel value
+ */
+export declare function unscale(scaledPx: number): number;
+/**
+ * Initialize device detection and scaling
+ * Sets CSS classes (.mobile/.desktop) and --sf custom property
  */
 export declare function initDeviceDetection(): DeviceInfo;
 /**

package/dist/0-face/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA0DhD;AAwBD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAaD,qCAAqC;AACrC,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAE/C,oCAAoC;AACpC,eAAO,MAAM,aAAa,yDAA8C,CAAC;AAMzE;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAMD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAYR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAiC1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD;AAiCD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}

package/dist/0-face/device.js

@@ -1,5 +1,22 @@
-// 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";
+// ============================================================================
+// Configuration & Signals
+// ============================================================================
+const defaultScalingConfig = {
+    mode: "auto",
+    baseWidth: 280,
+    minScale: 0.75,
+    maxScale: 2.0,
+};
+/** Reactive scaling factor signal */
+export const scalingFactor = signal(1);
+/** Current scaling configuration */
+export const scalingConfig = signal(defaultScalingConfig);
+// ============================================================================
+// Device Detection
+// ============================================================================
 /**
  * Comprehensive mobile device detection
  * Combines user agent detection, touch capability, and viewport size
@@ -50,36 +67,118 @@ export function getDeviceInfo() {
         screenHeight,
     };
 }
+// ============================================================================
+// Scaling
+// ============================================================================
 /**
- * Initialize device detection and log to console
+ * 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, config = scalingConfig.get()) {
+    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) {
+    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() {
+    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() {
+    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) {
+    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) {
+    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() {
     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));
-        // Add .mobile class to html element for CSS targeting
+    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");
-        console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.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");
-            // Add .desktop class and remove .mobile class
-            document.documentElement.classList.add("desktop");
-            document.documentElement.classList.remove("mobile");
-        }
+        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: ${factor.toFixed(2)}`);
+    }
+    else {
         console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
     }
     // Log additional details in development mode
@@ -91,6 +190,7 @@ export function initDeviceDetection() {
             isDesktop: deviceInfo.isDesktop,
             isTouchCapable: deviceInfo.isTouchCapable,
             viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
+            scalingFactor: factor,
             userAgent: deviceInfo.userAgent,
         });
     }
@@ -108,7 +208,7 @@ if (typeof window !== "undefined") {
         // DOM is already ready
         initDeviceDetection();
     }
-    // Recalculate on resize (debounced)
+    // Single debounced resize handler for both device detection + scaling
     let resizeTimeout;
     window.addEventListener("resize", () => {
         clearTimeout(resizeTimeout);
@@ -116,7 +216,14 @@ if (typeof window !== "undefined") {
             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