@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -0,0 +1,565 @@
+@layer components {
+  .immersive-landing {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    isolation: isolate;
+    background: transparent;
+  }
+
+  .immersive-landing__viewport {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing__page-layer {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing__overlay {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+  }
+
+  .immersive-landing__version-wrap {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 5rem;
+  }
+
+  .immersive-landing__version-label {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    font-size: clamp(0.75rem, 2vw, 1.25rem);
+    letter-spacing: 0.4em;
+  }
+
+  .immersive-landing-page {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: transparent;
+    transition-property: opacity;
+    transition-timing-function: ease-in-out;
+  }
+
+  .immersive-landing-page--active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .immersive-landing-page--inactive {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .immersive-landing-page__content {
+    position: relative;
+    z-index: 10;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .immersive-landing-arrows__button {
+    position: fixed;
+    top: 50%;
+    z-index: 40;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    min-height: 48px;
+    border-radius: 9999px;
+    border: 0;
+    background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    cursor: pointer;
+    touch-action: manipulation;
+    transform: translateY(-50%);
+    transition: background-color 160ms ease;
+  }
+
+  .immersive-landing-arrows__button:hover {
+    background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  }
+
+  .immersive-landing-arrows__button--prev {
+    left: 1rem;
+  }
+
+  .immersive-landing-arrows__button--next {
+    right: 1rem;
+  }
+
+  .immersive-landing-arrows__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-navigation {
+    position: fixed;
+    left: 50%;
+    z-index: 50;
+    width: auto;
+    padding-inline: 0.5rem;
+    transform: translateX(-50%);
+  }
+
+  .immersive-landing-navigation__shell {
+    border-radius: 9999px;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
+    padding: 0.375rem 0.5rem;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 12px 28px color-mix(in oklab, var(--color-base-content) 18%, transparent);
+  }
+
+  .immersive-landing-navigation__row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  .immersive-landing-navigation__mobile-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    border-radius: 9999px;
+    border: 0;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    background: transparent;
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .immersive-landing-navigation__mobile-arrow:hover {
+    background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+  }
+
+  .immersive-landing-navigation__mobile-arrow:active {
+    background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  }
+
+  .immersive-landing-navigation__mobile-arrow--disabled {
+    color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    cursor: not-allowed;
+  }
+
+  .immersive-landing-navigation__mobile-arrow--disabled:hover,
+  .immersive-landing-navigation__mobile-arrow--disabled:active {
+    background: transparent;
+  }
+
+  .immersive-landing-navigation__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .immersive-landing-navigation__dots {
+    display: none;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.5rem;
+  }
+
+  .immersive-landing-navigation__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    border: 0;
+    background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: transform 150ms ease, background-color 150ms ease;
+  }
+
+  .immersive-landing-navigation__dot:hover {
+    background: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+  }
+
+  .immersive-landing-navigation__dot--active {
+    background: var(--color-primary);
+    transform: scale(1.25);
+  }
+
+  .immersive-landing-navigation__counter {
+    min-width: 3ch;
+    text-align: center;
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  .immersive-landing-pwa,
+  .immersive-landing-firefox {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 51;
+    pointer-events: auto;
+    animation: immersive-landing-slide-up 220ms ease;
+  }
+
+  .immersive-landing-pwa__card,
+  .immersive-landing-firefox__card {
+    position: relative;
+    border: 1px solid var(--color-base-300);
+  }
+
+  .immersive-landing-pwa__close,
+  .immersive-landing-firefox__close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .immersive-landing-pwa__body,
+  .immersive-landing-firefox__body {
+    display: block;
+  }
+
+  .immersive-landing-pwa__media,
+  .immersive-landing-firefox__media {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .immersive-landing-pwa__app-icon-wrap,
+  .immersive-landing-firefox__icon-wrap {
+    display: flex;
+    width: 3.5rem;
+    height: 3.5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.75rem;
+    background: var(--color-base-200);
+    flex-shrink: 0;
+    padding: 0.5rem;
+  }
+
+  .immersive-landing-pwa__app-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing-firefox__browser-icon {
+    color: #f97316;
+  }
+
+  .immersive-landing-pwa__text-wrap,
+  .immersive-landing-firefox__text-wrap {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .immersive-landing-pwa__title,
+  .immersive-landing-firefox__title {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+  }
+
+  .immersive-landing-pwa__description,
+  .immersive-landing-firefox__description {
+    font-size: 0.875rem;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-pwa__footer,
+  .immersive-landing-firefox__footer {
+    margin-top: 0.25rem;
+  }
+
+  .immersive-landing-pwa__action,
+  .immersive-landing-firefox__action {
+    flex: 1;
+  }
+
+  .immersive-landing-cookie {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 52;
+    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    background: color-mix(in oklab, var(--color-base-300) 95%, transparent);
+    backdrop-filter: blur(8px);
+    transition: transform 300ms ease, opacity 300ms ease;
+    animation: immersive-landing-slide-up 220ms ease;
+  }
+
+  .immersive-landing-cookie--closing {
+    transform: translateY(100%);
+    opacity: 0;
+    animation: none;
+  }
+
+  .immersive-landing-cookie__container {
+    max-width: 80rem;
+    margin-inline: auto;
+    padding: 1rem;
+  }
+
+  .immersive-landing-cookie__row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .immersive-landing-cookie__message {
+    font-size: 0.875rem;
+    color: var(--color-base-content);
+    flex: 1;
+  }
+
+  .immersive-landing-cookie__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .immersive-landing-cookie__action-button {
+    width: 100%;
+  }
+
+  .immersive-landing-cookie__manage-button {
+    border: 0;
+    background: transparent;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    font-size: 0.875rem;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: color 150ms ease;
+  }
+
+  .immersive-landing-cookie__manage-button:hover {
+    color: var(--color-base-content);
+    text-decoration: none;
+  }
+
+  .immersive-landing-cookie__modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(4px);
+    padding: 1rem;
+    animation: immersive-landing-fade-in 200ms ease;
+  }
+
+  .immersive-landing-cookie__modal-card {
+    width: 100%;
+    max-width: 28rem;
+    border-radius: 0.5rem;
+    background: var(--color-base-100);
+    box-shadow: 0 20px 50px color-mix(in oklab, var(--color-base-content) 25%, transparent);
+    padding: 1.5rem;
+    animation: immersive-landing-scale-in 200ms ease;
+  }
+
+  .immersive-landing-cookie__modal-header {
+    margin-bottom: 1rem;
+  }
+
+  .immersive-landing-cookie__modal-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .immersive-landing-cookie__preferences {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .immersive-landing-cookie__preference-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+  }
+
+  .immersive-landing-cookie__preference-row:hover {
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-row--locked {
+    cursor: not-allowed;
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-row--locked:hover {
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .immersive-landing-cookie__preference-row--locked .immersive-landing-cookie__preference-label {
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-cookie__toggle {
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    appearance: none;
+    position: relative;
+    background: var(--color-base-200);
+    transition: background-color 150ms ease, border-color 150ms ease;
+  }
+
+  .immersive-landing-cookie__toggle::after {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: 9999px;
+    background: white;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+    transition: transform 150ms ease;
+  }
+
+  .immersive-landing-cookie__toggle:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .immersive-landing-cookie__toggle:checked::after {
+    transform: translateX(1rem);
+  }
+
+  .immersive-landing-cookie__toggle:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .immersive-landing-cookie__modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  .immersive-landing-cookie__save-button {
+    transition: transform 150ms ease;
+  }
+
+  .immersive-landing-cookie__save-button:hover {
+    transform: scale(1.02);
+  }
+
+  .immersive-landing-cookie__save-button:active {
+    transform: scale(0.98);
+  }
+
+  @media (min-width: 768px) {
+    .immersive-landing-arrows__button {
+      display: inline-flex;
+    }
+
+    .immersive-landing-navigation__shell {
+      padding: 0.5rem 0.75rem;
+    }
+
+    .immersive-landing-navigation__row {
+      gap: 0.75rem;
+    }
+
+    .immersive-landing-navigation__mobile-arrow {
+      display: none;
+    }
+
+    .immersive-landing-navigation__dots {
+      display: flex;
+    }
+
+    .immersive-landing-cookie__row {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .immersive-landing-cookie__actions {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .immersive-landing-cookie__action-button {
+      width: auto;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .immersive-landing-pwa,
+    .immersive-landing-firefox {
+      left: auto;
+      max-width: 24rem;
+    }
+  }
+
+  @keyframes immersive-landing-slide-up {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes immersive-landing-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes immersive-landing-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

package/dist/components/immersive-landing/ImmersiveLanding.d.ts

@@ -1,3 +1,4 @@
+import "./ImmersiveLanding.css";
 import { type Component } from "solid-js";
 import type { ImmersiveLandingProps } from "./types";
 declare const _default: Component<ImmersiveLandingProps> & {

package/dist/components/immersive-landing/ImmersiveLanding.js

@@ -1,6 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ImmersiveLanding.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__ from "./ImmersiveLanding.classes.js";
 import * as __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__ from "./useImmersiveLanding.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__ from "./ImmersiveLandingContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingPage_js_df221ed4__ from "./ImmersiveLandingPage.js";
@@ -9,7 +11,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingNavigation_js_3c874fb2__
 import * as __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__ from "./components/PWAInstallPrompt.js";
 import * as __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__ from "./components/FirefoxPWABanner.js";
 import * as __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__ from "./components/CookieConsent.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="relative h-full w-full"><div class="relative z-10 h-full w-full">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute bottom-20 right-6"aria-hidden=true><span class="font-mono text-base-content/20 text-[clamp(0.75rem,2vw,1.25rem)] tracking-[0.4em]">v'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pointer-events-none fixed inset-0 z-30">');
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span>v"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const ImmersiveLanding = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "pages",
@@ -59,7 +61,7 @@ const ImmersiveLanding = (props)=>{
     };
     const showNav = ()=>false !== local.showNavigation;
     const showArrowNav = ()=>false !== local.showArrows;
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("fixed inset-0 h-screen w-screen overflow-hidden bg-transparent relative isolate", local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.base, local.class, local.className);
     const renderChildren = ()=>"function" == typeof local.children ? local.children(contextValue) : local.children;
     const renderOverlay = ()=>"function" == typeof local.overlay ? local.overlay(contextValue) : local.overlay;
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.ImmersiveLandingContext.Provider, {
@@ -68,14 +70,19 @@ const ImmersiveLanding = (props)=>{
             return [
                 (()=>{
                     var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                        get ["class"] () {
-                            return classes();
-                        },
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: classes()
+                        }), {
                         get style () {
                             return local.style;
                         }
                     }, others), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.viewport
+                        })), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.pageLayer
+                        })), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, renderChildren);
                     return _el$;
                 })(),
@@ -85,6 +92,9 @@ const ImmersiveLanding = (props)=>{
                     },
                     get children () {
                         var _el$4 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.overlay
+                            })), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, renderOverlay, null);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                             get when () {
@@ -93,6 +103,14 @@ const ImmersiveLanding = (props)=>{
                             get children () {
                                 var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
                                 _el$6.firstChild;
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                        class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.versionWrap
+                                    }), {
+                                    "aria-hidden": "true"
+                                }), false, true);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                        class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.versionLabel
+                                    })), false, true);
                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.appVersion, null);
                                 return _el$5;
                             }