@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.3",
-  "description": "Elegant SwiftUI-inspired web components for ambitious web apps and web extensions.",
+  "version": "0.0.0-dev.5",
+  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
   },
@@ -43,7 +43,8 @@
       "default": "./generated/client/index.js"
     },
     "./styles.css": "./generated/styles.css",
-    "./scss": "./scss/index.scss"
+    "./scss": "./scss/index.scss",
+    "./scss/*": "./scss/*.scss"
   },
   "bin": {
     "swiftwc": "./generated/index.js"
@@ -51,8 +52,11 @@
   "scripts": {
     "prebuild": "rm -rf generated",
     "build": "npm run build:ts && npm run build:scss",
+    "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
-    "build:scss": "sass --no-source-map scss/index.scss generated/styles.css"
+    "build:scss": "sass --no-source-map scss/index.scss generated/styles.css",
+    "format:check": "prettier . --check",
+    "format:write": "prettier . --write"
   },
   "devDependencies": {
     "sass": "^1.97.2"

package/scss/_base.scss

@@ -0,0 +1,5 @@
+@forward 'base/root';
+
+@forward 'base/reboot';
+
+@forward 'base/layout';

package/scss/_components.scss

@@ -0,0 +1,39 @@
+@forward 'components/index';
+
+@forward 'components/v-keyboard';
+
+@forward 'components/disclosure-group';
+
+@forward 'components/body-view';
+
+@forward 'components/tab-view';
+
+@forward 'components/tab-bar';
+
+@forward 'components/tab-bar-stack';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/full-screen';
+
+@forward 'components/sheet-view';
+
+@forward 'components/navigation-stack';
+
+@forward 'components/navigation-split-view';
+
+@forward 'components/toolbars';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/scroll-view';
+
+@forward 'components/v-stack';
+
+@forward 'components/tool-bar';
+
+@forward 'components/tool-bar-item';
+
+@forward 'components/tool-bar-item-group';
+
+@forward 'components/borderless-button';

package/scss/_dev.scss

@@ -0,0 +1,68 @@
+@layer final {
+  #console {
+    position: fixed;
+    left: 30%;
+    bottom: 50%;
+    z-index: 999999999;
+  }
+
+  #tb {
+    position: fixed;
+    box-shadow: inset 0 0 0 12px greenyellow;
+    top: env(titlebar-area-y);
+    width: env(titlebar-area-width);
+    left: env(titlebar-area-x);
+    height: env(titlebar-area-height);
+    z-index: 999999999;
+  }
+
+  #sa {
+    position: fixed;
+    box-shadow: inset 0 0 0 10px green;
+    inset: env(safe-area-inset-top) env(safe-area-inset-right)
+      env(safe-area-inset-bottom) env(safe-area-inset-left);
+    z-index: 999999999;
+  }
+
+  #kb {
+    display: grid;
+    position: fixed;
+    box-shadow: inset 0 0 0 8px red;
+    background-color: rosybrown;
+    top: env(keyboard-inset-top, var(--keyboard-inset-top));
+    /* right: env(keyboard-inset-right, 0); */
+    left: env(keyboard-inset-left, 0);
+    /* bottom: env(keyboard-inset-bottom, 0px); */
+    height: env(keyboard-inset-height, var(--keyboard-inset-height));
+    width: env(keyboard-inset-width, 100lvw);
+    z-index: 999999999;
+  }
+
+  #dv {
+    position: fixed;
+    box-shadow: inset 0 0 0 6px blue;
+    top: 0vh;
+    left: 0vw;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999999999;
+  }
+  #sv {
+    position: fixed;
+    box-shadow: inset 0 0 0 4px magenta;
+    top: 0svh;
+    left: 0svw;
+    width: 100svw;
+    height: 100svh;
+    z-index: 999999999;
+  }
+  #lv {
+    position: fixed;
+    box-shadow: inset 0 0 0 2px maroon;
+    top: 0lvh;
+    left: 0lvw;
+    width: 100lvw;
+    height: 100lvh;
+    z-index: 999999999;
+  }
+}

package/scss/_functions.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use 'sass:string';
+
+@function subtract-tiny($value) {
+  @if math.unit($value) == 'px' {
+    @return $value - 0.01px;
+  } @else if math.unit($value) == 'rem' {
+    @return $value - 0.0001rem; // “very large” subtraction
+  } @else {
+    @warn "Unsupported unit: #{unit($value)}";
+    @return $value;
+  }
+}
+
+@function map-to-query($map) {
+  $parts: '';
+  @each $key, $value in $map {
+    $parts: string.insert($parts, '&#{$key}=#{$value}', 0);
+  }
+  @return string.slice($parts, 2);
+}

package/scss/_mixins.scss

@@ -0,0 +1,172 @@
+@use 'vars';
+
+@mixin span-all {
+  grid-column: 1 / -1; // span all columns
+  grid-row: 1 / -1; // span all rows
+}
+
+@mixin make-scrollable {
+  & > * {
+    @include span-all;
+    // grid-column: 1 / -1; // span all columns
+    // grid-row: 1 / -1; // span all rows
+  }
+
+  &::before {
+    @include span-all;
+    // grid-column: 1 / -1; // span all columns
+    // grid-row: 1 / -1; // span all rows
+    content: '';
+    display: block;
+    height: calc(100% + 1px); /* creates overflow */
+    // background-color: red;
+    z-index: -1;
+    pointer-events: none;
+  }
+}
+
+@mixin contain-overscroll() {
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin reset-dialog {
+  // position: absolute;
+  inset-inline: 0px;
+  inset-block: 0px; //inset-inline-start: 0px;
+  // width: fit-content;
+  // height: fit-content;
+  margin: 0px; //margin-top: auto;
+  border: none; //border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;
+  padding: 0px; //padding-top: 1em;
+  background-color: transparent; //background-color: canvas;
+  color: var(--primary-text); //color: canvastext;
+  // display: none;
+
+  // dialog:modal {
+  // position: fixed;
+  // overflow-x: auto;
+  // overflow-y: auto;
+  // inset-block-start: 0px;
+  max-width: 100lvw; //max-width: calc(100% - 2em - 6px);
+  max-height: 100lvh; //max-height: calc(100% - 2em - 6px);
+  // visibility: visible;
+  // }
+
+  outline: none;
+}
+
+@mixin make-navbar($dir: bottom) {
+  &:before,
+  &:after {
+    backface-visibility: hidden;
+
+    content: '';
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+
+    z-index: -1;
+  }
+
+  &:before {
+    backdrop-filter: blur(2px);
+    mask-image: linear-gradient(to #{$dir}, #000 50%, #0000 100%);
+  }
+
+  &:after {
+    background-image: linear-gradient(
+      to #{$dir},
+      var(--canvas-bg) 0,
+      #0000 100%
+    );
+  }
+}
+
+@mixin vt-toolbar-item-offscreen-keyframe($important: false) {
+  @if $important {
+    transform: scale(
+      var(--view-transition-toolbar-cell-offscreen-scale)
+    ) !important;
+    filter: blur(10px) !important;
+    opacity: 0 !important;
+  } @else {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    filter: blur(10px);
+    opacity: 0;
+  }
+}
+
+@mixin vt-toolbar-item-onscreen-keyframe($important: false) {
+  @if $important {
+    transform: scale(
+      var(--view-transition-toolbar-cell-onscreen-scale)
+    ) !important;
+    filter: none !important;
+    opacity: 1 !important;
+  } @else {
+    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
+    filter: none;
+    opacity: 1;
+  }
+}
+
+@mixin toolbar-item-vt-state($transform, $filter, $opacity) {
+  transform: $transform;
+  filter: $filter;
+  opacity: $opacity;
+}
+
+@mixin if-iphone-landscape {
+  @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin if-iphone-portrait {
+  @media (max-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin if-ipad-landscape {
+  @media (min-width: #{vars.$ipad-landscape-bp-min}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin if-ipad-portrait {
+  @media (min-width: #{vars.$ipad-portrait-bp-min}) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin if-ipad-sheet-fits {
+  @media (min-width: #{vars.$ipad-sheet-view-width}) and (min-height: #{vars.$ipad-sheet-view-height}) {
+    @content;
+  }
+}
+
+@mixin if-2col-split-view-fits {
+  @media (min-width: #{vars.$nav-split-view-2col-bp-min}) {
+    @content;
+  }
+}
+
+@mixin if-3col-split-view-fits {
+  @media (min-width: #{vars.$nav-split-view-3col-bp-min}) {
+    @content;
+  }
+}
+
+@mixin ifnot-2col-split-view-fits {
+  @media (max-width: #{vars.$nav-split-view-2col-bp-max}) {
+    @content;
+  }
+}
+
+@mixin ifnot-3col-split-view-fits {
+  @media (max-width: #{vars.$nav-split-view-3col-bp-max}) {
+    @content;
+  }
+}

package/scss/_transitions.scss

@@ -0,0 +1,11 @@
+@forward 'transitions/index';
+
+@forward 'transitions/fwd';
+
+@forward 'transitions/bwd';
+
+@forward 'transitions/fwd.navbar';
+
+@forward 'transitions/bwd.navbar';
+
+@forward 'transitions/dialog';

package/scss/_vars.scss

@@ -1,3 +1,60 @@
+@use 'functions';
+@use 'sass:math';
+
 $base-layer: base !default;
 $components-layer: components !default;
+$colors-layer: colors !default;
+$ui-layer: actions !default;
 $transitions-layer: transitions !default;
+$final-layer: final !default;
+
+$vt-fwd-class-name: fwd !default;
+
+$disclosure-group-contents-height-css-prop: --disclosure-group-contents-height !default;
+$disclosure-group-animation-duration-css-prop: --disclosure-group-animation-duration !default;
+$disclosure-group-animation-close-class: close !default;
+
+$nav-split-view-2col-bp: 43rem !default;
+$nav-split-view-3col-bp: 56rem !default;
+
+// $ipad-sheet-view-width: 12rem !default;
+$ipad-sheet-view-width: 37rem !default;
+
+$ipad-sheet-view-aspect-ratio: math.div(4, 3) !default;
+
+$sidebar-transition-duration: 250ms !default;
+
+// $ipad-portrait-bp: 20rem !default;
+$ipad-portrait-bp: 43rem !default;
+
+// $ipad-landscape-bp: 30rem !default;
+$ipad-landscape-bp: 68rem !default;
+
+// computed
+
+$ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};
+$ipad-portrait-bp-min: $ipad-portrait-bp;
+$ipad-landscape-bp-max: #{functions.subtract-tiny($ipad-landscape-bp)};
+$ipad-landscape-bp-min: $ipad-landscape-bp;
+
+$ipad-sheet-view-height: math.div(
+  $ipad-sheet-view-width,
+  $ipad-sheet-view-aspect-ratio
+); //4/3
+
+$nav-split-view-2col-bp-max: #{functions.subtract-tiny($nav-split-view-2col-bp)};
+$nav-split-view-2col-bp-min: $nav-split-view-2col-bp;
+$nav-split-view-3col-bp-max: #{functions.subtract-tiny($nav-split-view-3col-bp)};
+$nav-split-view-3col-bp-min: $nav-split-view-3col-bp;
+
+@debug $ipad-portrait-bp-max;
+
+// checks
+
+@if ($ipad-portrait-bp < $ipad-sheet-view-width) {
+  @warn "$ipad-sheet-view-width should not be larger than $ipad-portrait-bp! Breaks centering";
+}
+
+@if ($nav-split-view-3col-bp < $nav-split-view-2col-bp) {
+  @warn "$nav-split-view-2col-bp should not be larger than $nav-split-view-3col-bp!";
+}

package/scss/base/_layout.scss

@@ -0,0 +1,40 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  body-view,
+  navigation-stack,
+  navigation-split-view,
+  dialog[is='full-screen'],
+  dialog[is='sheet-view'] {
+    position: relative;
+
+    grid-auto-flow: column;
+
+    grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
+    grid-template-rows: minmax(0, 1fr);
+
+    & > *:not([slot]) {
+      @include mixins.span-all;
+    }
+  }
+
+  navigation-stack:has(> navigation-stack:not([hidden])),
+  navigation-stack:has(> body-view),
+  navigation-split-view:has(> body-view),
+  dialog:has(> body-view),
+  // body-view:has(> dialog),
+  body-view:has(> body-view) {
+    & > scroll-view,
+    [is='sidebar-view'] > scroll-view {
+      transform: translateX(var(--view-transition-leading-x));
+    }
+
+    & > navigation-bar > tool-bar-item,
+    & > bottom-bar > tool-bar-item,
+    & > navigation-bar > tool-bar-item-group,
+    & > bottom-bar > tool-bar-item-group {
+      transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    }
+  }
+}

package/scss/base/_reboot.scss

@@ -0,0 +1,55 @@
+@use '../vars';
+@use '../functions';
+
+@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+
+@layer #{vars.$base-layer} {
+  // html,
+  // body {
+  //   overflow: auto;
+  // }
+
+  :root {
+    interpolate-size: allow-keywords;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // dialog {
+  //   margin: 0;
+  // }
+
+  body {
+    background-color: var(--primary-bg);
+  }
+
+  body {
+    display: grid;
+
+    position: absolute;
+    inset: 0;
+
+    margin: 0;
+    padding: 0;
+
+    touch-action: none !important;
+  }
+
+  $CONFIG: (
+    vt-fwd-class-name: vars.$vt-fwd-class-name,
+    disclosure-group-contents-height-css-prop: vars.$disclosure-group-contents-height-css-prop,
+    disclosure-group-animation-duration-css-prop: vars.$disclosure-group-animation-duration-css-prop,
+    disclosure-group-animation-close-class: vars.$disclosure-group-animation-close-class,
+  );
+
+@debug functions.map-to-query($CONFIG);
+
+html::before {
+  content: '#{functions.map-to-query($CONFIG)}';
+  display: none;
+}
+}

package/scss/base/_root.scss

@@ -0,0 +1,69 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  :root {
+    // --ipad-bp: #{vars.$ipad-portrait-bp};
+
+    // --edge-inset-inline-start: 10px;
+    // --edge-inset-inline-end: 10px;
+    // --edge-inset-block-start: 10px;
+    // --edge-inset-block-end: 10px;
+
+    // tabview adds extra to these
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+
+    --tool-bar-height: 4rem;
+
+    --tab-bar-iphone-max-width: 90svw;
+    --tab-bar-iphone-height: var(--tool-bar-height);
+    --tab-bar-iphone-border-radius: 9999px;
+
+    --tab-bar-ipad-width: 21rem;
+    --tab-bar-ipad-height: 3rem;
+    --tab-bar-ipad-border-radius: 9999px;
+
+    --tab-bar-sidebar-width: 20rem;
+    --tab-bar-sidebar-border-radius: 1rem;
+    --tab-bar-sidebar-spacing: 1rem;
+
+    --navigation-bar-height: 4rem;
+
+    --nav-split-view-sidebar-width: 20rem;
+    --nav-split-view-content-width: 25rem;
+
+    --primary-text: black;
+    --primary-bg: aliceblue;
+    --secondary-bg: burlywood;
+
+    --view-transition-leading-x: -50%;
+    --view-transition-principal-x: 0%;
+    --view-transition-trailing-x: 100%;
+
+    --view-transition-toolbar-cell-onscreen-scale: 1;
+    --view-transition-toolbar-cell-offscreen-scale: 0;
+
+    --view-transition-dialog-onscreen-y: 0lvh;
+    --view-transition-dialog-onscreen-backdrop-bg: rgb(0 0 0 / 25%);
+    --view-transition-dialog-offscreen-y: 100lvh;
+
+    --view-transition-duration: 500ms;
+    // --view-transition-duration: 5s;
+
+    --pill-border-radius: 99999px;
+
+    --toolbar-col-gap: 0.6rem;
+    --toolbar-cell-bg: white;
+    --toolbar-cell-inline-padding: 0.3rem;
+    --toolbar-cell-block-padding: 0.3rem;
+    --toolbar-cell-border-radius: var(--pill-border-radius);
+
+    --toolbar-cell-focus-bg: lightpink;
+    --toolbar-cell-active-bg: gray;
+
+    #{vars.$disclosure-group-animation-duration-css-prop}: 500ms;
+    --disclosure-group-animation-easing: ease-out;
+  }
+}

package/scss/colors/_index.scss

@@ -0,0 +1,99 @@
+@use '../vars';
+
+@layer #{vars.$colors-layer} {
+  navigation-stack,
+  navigation-split-view,
+  body-view {
+    --canvas-bg: var(--primary-bg);
+  }
+
+  [is='sheet-view'],
+  [is='full-screen'] {
+    --canvas-bg: var(--secondary-bg);
+  }
+
+  body-view {
+    --primary-bg: oklch(0.984 0.019 200.873);
+    --secondary-bg: oklch(0.984 0.019 200.873);
+  }
+
+  body-view > body-view {
+    --primary-bg: oklch(0.956 0.045 203.388);
+    --secondary-bg: oklch(0.956 0.045 203.388);
+  }
+
+  body-view > body-view > body-view {
+    --primary-bg: oklch(0.917 0.08 205.041);
+    --secondary-bg: oklch(0.917 0.08 205.041);
+  }
+
+  body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.865 0.127 207.078);
+    --secondary-bg: oklch(0.865 0.127 207.078);
+  }
+
+  body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.789 0.154 211.53);
+    --secondary-bg: oklch(0.789 0.154 211.53);
+  }
+
+  body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.715 0.143 215.221);
+    --secondary-bg: oklch(0.715 0.143 215.221);
+  }
+
+  body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.609 0.126 221.723);
+    --secondary-bg: oklch(0.609 0.126 221.723);
+  }
+
+  body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view {
+    --primary-bg: oklch(0.52 0.105 223.128);
+    --secondary-bg: oklch(0.52 0.105 223.128);
+  }
+
+  body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view {
+    --primary-bg: oklch(0.45 0.085 224.283);
+    --secondary-bg: oklch(0.45 0.085 224.283);
+  }
+
+  body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view {
+    --primary-bg: oklch(0.398 0.07 227.392);
+    --secondary-bg: oklch(0.398 0.07 227.392);
+  }
+
+  body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view
+    > body-view {
+    --primary-bg: oklch(0.302 0.056 229.695);
+    --secondary-bg: oklch(0.302 0.056 229.695);
+  }
+}

package/scss/components/_body-view.scss

@@ -0,0 +1,8 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  body-view {
+    // pointer-events: none;
+  }
+}

package/scss/components/_borderless-button.scss

@@ -0,0 +1,14 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  [is='borderless-button'] {
+    display: grid;
+
+    place-items: center;
+    place-content: center;
+
+    // background-color: transparent;
+    // color: blue;
+    // border: none;
+  }
+}