@bitstack/ng-boundary 14.0.1-alpha.2 → 14.0.1-alpha.3

package/README.md

@@ -1,63 +1,217 @@
-# MyLib
+# @bitstack/ng-boundary
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+A responsive boundary component for Angular applications with built-in orientation support and SCSS utilities for pixel-perfect responsive design.
 
-## Code scaffolding
+## Features
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+- Responsive boundary container with automatic aspect ratio management
+- Portrait and landscape orientation support with auto-detection
+- CSS custom properties for responsive sizing
+- Comprehensive SCSS utilities for responsive design
+- Standalone component architecture (Angular 14+)
+
+## Installation
 
 ```bash
-ng generate component component-name
+npm install @bitstack/ng-boundary
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
+## Usage
+
+### 1. Using the Component
+
+Import and use the `BsBoundary` component in your Angular application:
+
+```typescript
+import { Component } from '@angular/core';
+import { BsBoundary } from '@bitstack/ng-boundary';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [BsBoundary],
+  template: `
+    <bs-boundary
+      [isDebug]="false"
+      [bgColor]="'transparent'"
+      [contentClickable]="true"
+      [orientationMode]="'auto'"
+      (afterBoundaryInit)="onBoundaryInit($event)"
+      (orientationChange)="onOrientationChange($event)">
+      <!-- Your content here -->
+      <div class="my-content">
+        Hello World
+      </div>
+    </bs-boundary>
+  `
+})
+export class AppComponent {
+  onBoundaryInit(boundary: ElementRef<HTMLDivElement>) {
+    console.log('Boundary initialized:', boundary);
+  }
+
+  onOrientationChange(mode: 'portrait' | 'landscape') {
+    console.log('Orientation changed to:', mode);
+  }
+}
 ```
 
-## Building
+#### Component Inputs
 
-To build the library, run:
+- `isDebug`: (boolean) Enable debug mode with background color - default: `false`
+- `bgColor`: (string) Background color for the boundary
+- `contentClickable`: (boolean) Whether content is clickable - default: `true`
+- `orientationMode`: ('auto' | 'portrait' | 'landscape') Orientation mode - default: `'auto'`
+- `injectStyle`: (IInjectStyle) Custom styles to inject
 
-```bash
-ng build bitstack-ng-boundary
-```
+#### Component Outputs
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+- `afterBoundaryInit`: Emits after boundary initialization with ElementRef
+- `orientationChange`: Emits when orientation changes
 
-### Publishing the Library
+### 2. Using SCSS Utilities
 
-Once the project is built, you can publish your library by following these steps:
+The boundary component provides CSS custom properties that you can use with the included SCSS utilities:
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/bitstack-ng-boundary
-   ```
+#### Import SCSS Utilities
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+In your component SCSS file or global styles:
 
-## Running unit tests
+```scss
+@use '@bitstack/ng-boundary/styles' as boundary;
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+.my-component {
+  // Use the px2vw function for responsive sizing
+  // This automatically adapts to portrait/landscape mode
+  width: boundary.px2vw(100);
+  height: boundary.px2vw(200);
+  padding: boundary.px2vw(20);
 
-```bash
-ng test
+  // Or use mixins for specific properties
+  @include boundary.width(100);
+  @include boundary.height(200);
+  @include boundary.padding-left(20);
+}
 ```
 
-## Running end-to-end tests
+#### Available SCSS Functions
+
+- `px2vw($px)` - Converts px to responsive units based on boundary
+- `px2vw-unbounded($px)` - Converts px to viewport units (not bounded)
+- `vw($w)` - Returns viewport width unit (dvw or vw)
+- `vh($h)` - Returns viewport height unit (dvh or vh)
+
+#### Available SCSS Mixins
+
+**Responsive sizing mixins:**
+- `@include width($px)` - Set responsive width
+- `@include height($px)` - Set responsive height
+- `@include padding-left($px)` - Set responsive left padding
+- `@include padding-right($px)` - Set responsive right padding
+- `@include padding-top($px)` - Set responsive top padding
+- `@include padding-bottom($px)` - Set responsive bottom padding
+- `@include px2vw($property, $px)` - Set any property with responsive value
+
+**Utility mixins:**
+- `@include flexCenter` - Flex center alignment
+- `@include hideScrollbar` - Hide scrollbars
+- `@include bg-contain` - Background contain
+- `@include bg-cover` - Background cover
+- `@include text-center` - Center text
+- `@include text-shadow($color)` - Text shadow
+- `@include size($w, $h: $w)` - Set width and height
+
+**Responsive breakpoint mixins:**
+- `@include s { ... }` - Small devices and up
+- `@include landscape { ... }` - Mobile landscape
+- `@include portrait { ... }` - Mobile portrait
+- `@include pc_landscape { ... }` - PC landscape
+- `@include pc_portrait { ... }` - PC portrait
+
+#### CSS Custom Properties
+
+The boundary component sets these CSS variables that the SCSS utilities use:
+
+- `--boundary-width` - Current boundary width
+- `--boundary-height` - Current boundary height
+- `--design-base-width` - Design base width (portrait: 540, landscape: 960)
+- `--design-base-height` - Design base height (portrait: 960, landscape: 540)
+- `--px2vw-ratio` - Ratio for px to responsive unit conversion
+
+### 3. Complete Example
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { BsBoundary } from '@bitstack/ng-boundary';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [BsBoundary],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {}
+```
 
-For end-to-end (e2e) testing, run:
+```html
+<!-- app.component.html -->
+<bs-boundary [orientationMode]="'auto'">
+  <div class="game-container">
+    <h1 class="title">My Game</h1>
+    <button class="play-button">Play</button>
+  </div>
+</bs-boundary>
+```
 
-```bash
-ng e2e
+```scss
+// app.component.scss
+@use '@bitstack/ng-boundary/styles' as boundary;
+
+.game-container {
+  @include boundary.flexCenter;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: boundary.px2vw(20);
+}
+
+.title {
+  font-size: boundary.px2vw(48);
+  @include boundary.padding-top(40);
+}
+
+.play-button {
+  @include boundary.width(200);
+  @include boundary.height(60);
+  font-size: boundary.px2vw(24);
+  border-radius: boundary.px2vw(12);
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+## Design System
+
+The component is designed with these base dimensions:
+- Portrait mode: 540px × 960px
+- Landscape mode: 960px × 540px
+
+The `px2vw()` function automatically scales your design to fit within the boundary while maintaining aspect ratio.
+
+## Requirements
+
+- Angular 14.0.0 or higher
+- @angular/cdk 14.0.0 or higher
+- SCSS support in your Angular project
+
+## Building
+
+To build the library:
+
+```bash
+ng build bitstack-ng-boundary
+```
 
-## Additional Resources
+## License
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitstack/ng-boundary",
-  "version": "14.0.1-alpha.2",
+  "version": "14.0.1-alpha.3",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
@@ -29,4 +29,4 @@
       "default": "./fesm2020/bitstack-ng-boundary.mjs"
     }
   }
-}
+}

package/src/lib/_/_awd.scss

@@ -0,0 +1,109 @@
+// check support device-vh
+@use "sass:math";
+@use "variables";
+@use "responsive";
+
+// Import required mixins from responsive
+@mixin supports-dv {
+  @supports (width: 100dvh) {
+    @content;
+  }
+}
+@mixin not-supports-dv {
+  @supports not (width: 100dvh) {
+    @content;
+  }
+}
+
+// Import and re-export functions from responsive
+@function responsive-size-by-px($px, $unit: 'v', $isLandscape: false, $isMax: false) {
+  $w: math.div($px, 5.4);
+  @return responsive.responsive-size-by-vw($w, $unit, $isLandscape, $isMax);
+}
+
+// Note: responsive-size-by-vw is provided by the responsive module
+// and should be accessed via @use "responsive"
+
+
+
+// use vw, vh or dvw, dvh
+@function vw($w) {
+    @return #{$w}#{variables.$vw-unit};
+}
+@function vh($h) {
+    @return #{$h}#{variables.$vh-unit};
+}
+
+
+
+@mixin setProperty($property, $value) {
+  @include supports-dv {
+    #{$property}: responsive-size-by-px($value, 'dv');
+  }
+  @include not-supports-dv {
+    #{$property}: responsive-size-by-px($value, 'v');
+  }
+}
+
+// 響應式尺寸 mixin 版本 (包含 supports-dv 判斷)
+@mixin px2vw($property, $px) {
+  $layout-width-num: variables.$design-width;  // 375
+  $layout-height-num: variables.$design-height;  // 667
+
+  $vw-value: math.div($px, $layout-width-num) * 100;   // 70/375*100
+  $vh-value: math.div($px, $layout-height-num) * 100;  // 70/667*100
+
+  @include supports-dv {
+    #{$property}: min(#{$vw-value}dvw, #{$vh-value}dvh);
+  }
+  @include not-supports-dv {
+    #{$property}: min(#{$vw-value}vw, #{$vh-value}vh);
+  }
+}
+
+// 單一屬性響應式 mixin (你想要的語法)
+@mixin height($px) {
+  @include px2vw(height, $px);
+}
+
+@mixin width($px) {
+  @include px2vw(width, $px);
+}
+
+@mixin padding-left($px) {
+  @include px2vw(padding-left, $px);
+}
+
+@mixin padding-right($px) {
+  @include px2vw(padding-right, $px);
+}
+
+@mixin padding-top($px) {
+  @include px2vw(padding-top, $px);
+}
+
+@mixin padding-bottom($px) {
+  @include px2vw(padding-bottom, $px);
+}
+
+// 響應式尺寸函數 (自動適應直式/橫式)
+// 使用 CSS 變數來獲取當前模式下的設計基準寬度
+// Portrait: --design-base-width = 375
+// Landscape: --design-base-width = 667
+@function px2vw($px) {
+  @return calc(#{$px} * var(--px2vw-ratio));
+}
+
+// 原始的 px2vw 函數 (不受 boundary 限制，直接基於 viewport)
+@function px2vw-unbounded($px) {
+  $layout-width-num: variables.$design-width;   // 375
+  $layout-height-num: variables.$design-height; // 667
+
+  $vw-value: math.div($px, $layout-width-num) * 100;   // 70/375*100 = 18.666667
+  $vh-value: math.div($px, $layout-height-num) * 100;  // 70/667*100 = 10.494948
+
+  @return unquote("min(#{$vw-value}#{variables.$vw-unit}, #{$vh-value}#{variables.$vw-unit})");
+}
+
+
+

package/src/lib/_/_fonts.scss

@@ -0,0 +1,33 @@
+/* 字體定義 */
+@font-face {
+    font-family: 'MicrosoftYaHei';
+    src: url('/assets/fonts/msyh.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Myanmar MN';
+    src: url('/assets/fonts/myanmar-mn.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Myanmar MN';
+    src: url('/assets/fonts/myanmar-mn-bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Prompt';
+    src: url('/assets/fonts/prompt-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+

package/src/lib/_/_mixin.scss

@@ -0,0 +1,107 @@
+@use "responsive";
+
+
+/* Small devices (portrait tablets and large phones, 376px and up) */
+@mixin s {
+    @media only screen and (min-width: 481px) and (min-height: 746px) {
+        @content;
+    }
+}
+
+// only mobile
+@mixin landscape {
+    @media only screen and (orientation: landscape) and (any-pointer: coarse) {
+        @content;
+    }
+}
+
+@mixin portrait {
+    @media only screen and (orientation: portrait) and (any-pointer: coarse) {
+        @content;
+    }
+}
+
+@mixin pc_landscape {
+    @media only screen and (orientation: landscape) {
+        @content;
+    }
+}
+
+@mixin pc_portrait {
+    @media only screen and (orientation: portrait) {
+        @content;
+    }
+}
+
+
+@mixin text-center {
+    text-align: center;
+}
+
+@mixin text-shadow($color) {
+    text-shadow: -1px 0 $color, 0 1px $color, 1px 0 $color, 0 -1px $color;
+}
+
+@mixin size($w, $h: $w) {
+    width: $w;
+    height: $h;
+}
+
+@mixin hideScrollbar {
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+@mixin flexCenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin bg-contain {
+    background: center / contain no-repeat;
+}
+
+@mixin bg-cover {
+    background: center / cover no-repeat;
+}
+
+@mixin devBorder($color: aqua) {
+    box-shadow: inset 0 0 0 1px $color;
+}
+
+// WebP 圖片支持 mixin - 自動生成 WebP fallback
+// 使用方法: @include bg-image-webp("/assets/images/_common/img-support/img.png");
+@mixin bg-image-webp($png-path) {
+    $webp-path: str-replace($png-path, '.png', '.webp');
+
+    @supports (background-image: image-set(url("x.webp") type("image/webp"))){
+        background-image: image-set(
+                url($webp-path) type("image/webp"),
+                url($png-path) type("image/png")
+        );
+    }
+    @supports not (background-image: image-set(url("x.webp") type("image/webp"))){
+        background-image: url($png-path);
+    }
+}
+
+// 辅助函数：字符串替换
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+    @return $string;
+}
+
+.scale-btn {
+  cursor: pointer;
+  transition: transform 0.1s;
+  &:active {
+    transform: scale(0.9);
+  }
+}

package/src/lib/_/_responsive.scss

@@ -0,0 +1,698 @@
+// check support device-vh
+@use "sass:math";
+@use "variables";
+
+
+
+@mixin supports-dv {
+    @supports (width: 100dvh) {
+        @content;
+    }
+}
+@mixin not-supports-dv {
+    @supports not (width: 100dvh) {
+        @content;
+    }
+}
+
+
+
+/**
+ * 主要尺寸轉換方法
+ * 將設計稿的 px 轉為AWD的 vw
+ */
+@function responsive-size-by-vw($w, $unit: 'v', $isLandscape: false, $isMax: false) {
+    @if ($isLandscape) {
+        @if ($isMax) {
+            @return max(vw($w, $unit), vh($w, $unit) * variables.$design-height / variables.$design-width);
+        } @else {
+            @return min(vw($w, $unit), vh($w, $unit) * variables.$design-height / variables.$design-width);
+        }
+    } @else {
+        @if ($isMax) {
+            @return max(vw($w, $unit), vh($w, $unit) * variables.$design-width / variables.$design-height);
+        } @else {
+            @return min(vw($w, $unit), vh($w, $unit) * variables.$design-width / variables.$design-height);
+        }
+    }
+}
+@function responsive-size-by-vh($h, $unit: 'v', $isLandscape: false, $isMax: false) {
+    @if ($isLandscape) {
+        @if ($isMax) {
+            @return max(vw($h, $unit) * variables.$design-width / variables.$design-height, vh($h, $unit));
+        } @else {
+            @return min(vw($h, $unit) * variables.$design-width / variables.$design-height, vh($h, $unit));
+        }
+    } @else {
+        @if ($isMax) {
+            @return max(vw($h, $unit) * variables.$design-height / variables.$design-width, vh($h, $unit));
+        } @else {
+            @return min(vw($h, $unit) * variables.$design-height / variables.$design-width, vh($h, $unit));
+        }
+    }
+}
+@function responsive-size-by-px($px, $unit: 'v', $isLandscape: false, $isMax: false) {
+    $w: math.div($px, 5.4);
+    @return responsive-size-by-vw($w, $unit, $isLandscape, $isMax);
+}
+
+// responsive width/height by vw
+@mixin width-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        width: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        width: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin height-by-vw($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        height: responsive-size-by-vw($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        height: responsive-size-by-vw($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin size-by-vw($w, $h: $w, $isLandscape: false, $isMax: false) {
+    @include width-by-vw($w, $isLandscape, $isMax);
+    @include height-by-vw($h, $isLandscape, $isMax);
+}
+// responsive width/height by vh
+@mixin width-by-vh($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        width: responsive-size-by-vh($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        width: responsive-size-by-vh($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin height-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        height: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        height: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin size-by-vh($w, $h: $w, $isLandscape: false, $isMax: false) {
+    @include width-by-vh($w, $isLandscape, $isMax);
+    @include height-by-vh($h, $isLandscape, $isMax);
+}
+// responsive width/height by px
+@mixin width-by-px($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        width: responsive-size-by-px($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        width: responsive-size-by-px($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin height-by-px($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        height: responsive-size-by-px($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        height: responsive-size-by-px($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin size-by-px($w, $h: $w, $isLandscape: false, $isMax: false) {
+    @include width-by-px($w, $isLandscape, $isMax);
+    @include height-by-px($h, $isLandscape, $isMax);
+}
+
+@mixin responsive-min-height-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        min-height: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        min-height: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+
+@mixin responsive-max-height-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        max-height: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        max-height: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+
+// responsive font-size
+@mixin responsive-font-size($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        font-size: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        font-size: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-font-size-by-vh($w, $isLandscape: false) {
+    @include supports-dv {
+        font-size: responsive-size-by-vh($w, 'dv', $isLandscape);
+    }
+    @include not-supports-dv {
+        font-size: responsive-size-by-vh($w, 'v', $isLandscape);
+    }
+}
+@mixin responsive-font-size-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        font-size: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        font-size: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+
+// responsive line-height
+@mixin responsive-line-height($w) {
+    @include supports-dv {
+        line-height: responsive-size-by-vw($w, 'dv');
+    }
+    @include not-supports-dv {
+        line-height: responsive-size-by-vw($w, 'v');
+    }
+}
+@mixin responsive-line-height-by-vh($h) {
+    @include supports-dv {
+        line-height: responsive-size-by-vh($h, 'dv');
+    }
+    @include not-supports-dv {
+        line-height: responsive-size-by-vh($h, 'v');
+    }
+}
+@mixin responsive-line-height-by-px($px) {
+    @include supports-dv {
+        line-height: responsive-size-by-px($px, 'dv');
+    }
+    @include not-supports-dv {
+        line-height: responsive-size-by-px($px, 'v');
+    }
+}
+
+// responsive letter-spacing
+@mixin responsive-letter-spacing($w) {
+    @include supports-dv() {
+        letter-spacing: responsive-size-by-vw($w, 'dv');
+    }
+    @include not-supports-dv() {
+        letter-spacing: responsive-size-by-vw($w, 'v');
+    }
+}
+@mixin responsive-letter-spacing-by-vh($h) {
+    @include supports-dv() {
+        letter-spacing: responsive-size-by-vh($h, 'dv');
+    }
+    @include not-supports-dv() {
+        letter-spacing: responsive-size-by-vh($h, 'v');
+    }
+}
+@mixin responsive-letter-spacing-by-px($px) {
+    @include supports-dv() {
+        letter-spacing: responsive-size-by-px($px, 'dv');
+    }
+    @include not-supports-dv() {
+        letter-spacing: responsive-size-by-px($px, 'v');
+    }
+}
+
+// responsive stroke width
+@mixin responsive-stroke-width-by-vw($w) {
+    @include supports-dv {
+        stroke-width: responsive-size-by-vw($w, 'dv');
+    }
+    @include not-supports-dv {
+        stroke-width: responsive-size-by-vw($w, 'v');
+    }
+}
+@mixin responsive-stroke-width-by-vh($h) {
+    @include supports-dv {
+        stroke-width: responsive-size-by-vh($h, 'dv');
+    }
+    @include not-supports-dv {
+        stroke-width: responsive-size-by-vh($h, 'v');
+    }
+}
+@mixin responsive-stroke-width-by-px($px) {
+    @include supports-dv {
+        stroke-width: responsive-size-by-px($px, 'dv');
+    }
+    @include not-supports-dv {
+        stroke-width: responsive-size-by-px($px, 'v');
+    }
+}
+
+// responsive text stroke
+@mixin responsive-text-stroke-by-vw($w, $color) {
+    @include supports-dv {
+        -webkit-text-stroke: responsive-size-by-vw($w, 'dv') $color;
+    }
+    @include not-supports-dv {
+        -webkit-text-stroke: responsive-size-by-vw($w, 'v') $color;
+    }
+}
+@mixin responsive-text-stroke-by-vh($w, $color) {
+    @include supports-dv {
+        -webkit-text-stroke: responsive-size-by-vh($w, 'dv') $color;
+    }
+    @include not-supports-dv {
+        -webkit-text-stroke: responsive-size-by-vh($w, 'v') $color;
+    }
+}
+@mixin responsive-text-stroke-by-px($px, $color) {
+    @include supports-dv {
+        -webkit-text-stroke: responsive-size-by-px($px, 'dv') $color;
+    }
+    @include not-supports-dv {
+        -webkit-text-stroke: responsive-size-by-px($px, 'v') $color;
+    }
+}
+
+// responsive border-radius
+@mixin responsive-border-radius-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        border-radius: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        border-radius: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-border-radius-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        border-radius: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        border-radius: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-border-radius-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        border-radius: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        border-radius: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+
+// responsive margin
+@mixin responsive-margin-top-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-top: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-top: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-bottom-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-bottom: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-bottom: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-left-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-left: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-left: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-right-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-right: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-right: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include responsive-margin-top-by-vw($w, $isLandscape, $isMax);
+    @include responsive-margin-bottom-by-vw($w, $isLandscape, $isMax);
+    @include responsive-margin-left-by-vw($w, $isLandscape, $isMax);
+    @include responsive-margin-right-by-vw($w, $isLandscape, $isMax);
+}
+
+@mixin responsive-margin-top-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-top: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-top: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-bottom-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-bottom: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-bottom: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-left-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-left: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-left: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-right-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-right: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-right: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include responsive-margin-top-by-vh($h, $isLandscape, $isMax);
+    @include responsive-margin-bottom-by-vh($h, $isLandscape, $isMax);
+    @include responsive-margin-left-by-vh($h, $isLandscape, $isMax);
+    @include responsive-margin-right-by-vh($h, $isLandscape, $isMax);
+}
+
+@mixin responsive-margin-top-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-top: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-top: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-bottom-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-bottom: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-bottom: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-left-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-left: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        margin-left: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-right-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        margin-right: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        right: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-margin-by-px($px, $isLandscape: false, $isMax: false) {
+    @include responsive-margin-top-by-px($px, $isLandscape, $isMax);
+    @include responsive-margin-bottom-by-px($px, $isLandscape, $isMax);
+    @include responsive-margin-left-by-px($px, $isLandscape, $isMax);
+    @include responsive-margin-right-by-px($px, $isLandscape, $isMax);
+}
+
+// responsive padding
+@mixin responsive-padding-top-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-top: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-top: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-bottom-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-bottom: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-bottom: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-left-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-left: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-left: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-right-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-right: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-right: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-by-vw($w, $isLandscape: false, $isMax: false) {
+    @include responsive-padding-top-by-vw($w, $isLandscape, $isMax);
+    @include responsive-padding-bottom-by-vw($w, $isLandscape, $isMax);
+    @include responsive-padding-left-by-vw($w, $isLandscape, $isMax);
+    @include responsive-padding-right-by-vw($w, $isLandscape, $isMax);
+}
+
+@mixin responsive-padding-top-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-top: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-top: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-bottom-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-bottom: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-bottom: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-left-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-left: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-left: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-right-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-right: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-right: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-by-vh($h, $isLandscape: false, $isMax: false) {
+    @include responsive-padding-top-by-vh($h, $isLandscape, $isMax);
+    @include responsive-padding-bottom-by-vh($h, $isLandscape, $isMax);
+    @include responsive-padding-left-by-vh($h, $isLandscape, $isMax);
+    @include responsive-padding-right-by-vh($h, $isLandscape, $isMax);
+}
+
+@mixin responsive-padding-top-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-top: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-top: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-bottom-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-bottom: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-bottom: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-left-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-left: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-left: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-right-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-right: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-right: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}
+@mixin responsive-padding-by-px($px, $isLandscape: false, $isMax: false) {
+    @include responsive-padding-top-by-px($px, $isLandscape, $isMax);
+    @include responsive-padding-bottom-by-px($px, $isLandscape, $isMax);
+    @include responsive-padding-left-by-px($px, $isLandscape, $isMax);
+    @include responsive-padding-right-by-px($px, $isLandscape, $isMax);
+}
+
+// responsive position
+@mixin responsive-position-by-vw($vw: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
+    $top: if(map-has-key($vw, top), map-get($vw, top), "");
+    $right: if(map-has-key($vw, right), map-get($vw, right), "");
+    $bottom: if(map-has-key($vw, bottom), map-get($vw, bottom), "");
+    $left: if(map-has-key($vw, left), map-get($vw, left), "");
+
+    @include supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-vw($top, 'dv', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-vw($right, 'dv', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-vw($bottom, 'dv', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-vw($left, 'dv', $isLandscape, $isMax);
+        }
+    }
+    @include not-supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-vw($top, 'v', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-vw($right, 'v', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-vw($bottom, 'v', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-vw($left, 'v', $isLandscape, $isMax);
+        }
+    }
+}
+@mixin responsive-position-by-vh($vh: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
+    $top: if(map-has-key($vh, top), map-get($vh, top), "");
+    $right: if(map-has-key($vh, right), map-get($vh, right), "");
+    $bottom: if(map-has-key($vh, bottom), map-get($vh, bottom), "");
+    $left: if(map-has-key($vh, left), map-get($vh, left), "");
+    @include supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-vh($top, 'dv', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-vh($right, 'dv', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-vh($bottom, 'dv', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-vh($left, 'dv', $isLandscape, $isMax);
+        }
+    }
+    @include not-supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-vh($top, 'v', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-vh($right, 'v', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-vh($bottom, 'v', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-vh($left, 'v', $isLandscape, $isMax);
+        }
+    }
+}
+@mixin responsive-position-by-px($px: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
+    $top: if(map-has-key($px, top), map-get($px, top), "");
+    $right: if(map-has-key($px, right), map-get($px, right), "");
+    $bottom: if(map-has-key($px, bottom), map-get($px, bottom), "");
+    $left: if(map-has-key($px, left), map-get($px, left), "");
+    @include supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-px($top, 'dv', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-px($right, 'dv', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-px($bottom, 'dv', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-px($left, 'dv', $isLandscape, $isMax);
+        }
+    }
+    @include not-supports-dv {
+        @if ($top != "") {
+            top: responsive-size-by-px($top, 'v', $isLandscape, $isMax);
+        }
+        @if ($right != "") {
+            right: responsive-size-by-px($right, 'v', $isLandscape, $isMax);
+        }
+        @if ($bottom != "") {
+            bottom: responsive-size-by-px($bottom, 'v', $isLandscape, $isMax);
+        }
+        @if ($left != "") {
+            left: responsive-size-by-px($left, 'v', $isLandscape, $isMax);
+        }
+    }
+}
+
+@mixin responsive-letter-border($color, $w, $h: $w) {
+    $vw: $w + 'vw';
+    $vh: $h + 'vh';
+    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
+    $minusUnit: calc(-1 * $unit);
+
+    text-shadow:
+        $unit 0 $color, /* 筆畫顏色，水平偏移 */
+        $minusUnit 0 $color, /* 筆畫顏色，水平偏移 */
+        0 $unit $color, /* 筆畫顏色，垂直偏移 */
+        0 $minusUnit $color, /* 筆畫顏色，垂直偏移 */
+        $unit $unit $color, /* 斜向右下 */
+        $minusUnit $minusUnit $color, /* 斜向左上 */
+        $unit $minusUnit $color, /* 斜向右上 */
+        $minusUnit $unit $color; /* 斜向左下 */
+}
+
+@mixin responsive-letter-shadow($color, $w, $h: $w) {
+    $vw: $w + 'vw';
+    $vh: $h + 'vh';
+    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
+
+    text-shadow: $unit $unit $unit $color; /* 陰影顏色 */
+}
+
+@mixin responsive-letter-border-shadow($colorBorder, $colorShadow, $w, $h: $w) {
+    $vw: $w + 'vw';
+    $vh: $h + 'vh';
+    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
+    $minusUnit: calc(-1 * $unit);
+    $shadow: calc(2 * $unit);
+
+    text-shadow:
+        $unit 0 $colorBorder, /* 筆畫顏色，水平偏移 */
+        $minusUnit 0 $colorBorder, /* 筆畫顏色，水平偏移 */
+        0 $unit $colorBorder, /* 筆畫顏色，垂直偏移 */
+        0 $minusUnit $colorBorder, /* 筆畫顏色，垂直偏移 */
+        $unit $unit $colorBorder, /* 斜向右下 */
+        $minusUnit $minusUnit $colorBorder, /* 斜向左上 */
+        $unit $minusUnit $colorBorder, /* 斜向右上 */
+        $minusUnit $unit $colorBorder, /* 斜向左下 */
+        $shadow $shadow $shadow $colorShadow; /* 陰影顏色 */
+}
+
+@mixin responsive-border-by-px($px, $color, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        border: responsive-size-by-px($px, 'dv', $isLandscape, $isMax) solid $color;
+    }
+    @include not-supports-dv {
+        border: responsive-size-by-px($px, 'v', $isLandscape, $isMax) solid $color;
+    }
+}
+
+@mixin responsive-padding-inline-start-by-px($px, $isLandscape: false, $isMax: false) {
+    @include supports-dv {
+        padding-inline-start: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
+    }
+    @include not-supports-dv {
+        padding-inline-start: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
+    }
+}

package/src/lib/_/_variables.scss

@@ -0,0 +1,29 @@
+@use "sass:math";
+
+// 基礎尺寸 (無單位數值)
+$design-width: 540;
+$design-height: 960;
+
+// 帶單位的版本 (當需要 px 單位時使用)
+$design-width-px: #{$design-width}px;
+$design-height-px: #{$design-height}px;
+
+$landscape-ratio: math.div($design-width, $design-height);
+$portrait-ratio: math.div($design-height, $design-width);
+
+// Portrait 模式的設計基準
+$layout-portrait-width: $design-width; // 375
+$layout-portrait-height: $design-height; // 667
+
+// Landscape 模式的設計基準
+$layout-landscape-width: $design-height; // 667
+$layout-landscape-height: $design-width; // 375
+
+$vw-unit: dvw !default;
+$vh-unit: dvh !default;
+
+@supports not (width: 100dvh) {
+    $vw-unit: vw;
+    $vh-unit: vh;
+}
+

package/src/styles/index.scss

@@ -0,0 +1,20 @@
+/**
+ * Public SCSS API for @bitstack/ng-boundary
+ *
+ * This file exports all SCSS utilities, functions, and mixins
+ * for use in consumer projects.
+ *
+ * Usage:
+ * @use '@bitstack/ng-boundary/styles' as boundary;
+ *
+ * .my-component {
+ *   width: boundary.px2vw(100);
+ *   height: boundary.px2vw(200);
+ * }
+ */
+
+// Export all utilities
+// Note: _awd already includes _responsive internally, so we don't need to forward _responsive separately
+@forward '../lib/_/_variables';
+@forward '../lib/_/_awd';
+@forward '../lib/_/_mixin';

package/styles.scss

@@ -0,0 +1,8 @@
+/**
+ * Main entry point for @bitstack/ng-boundary styles
+ *
+ * Usage:
+ * @use '@bitstack/ng-boundary/styles' as boundary;
+ */
+
+@forward 'src/styles/index';