@pathscale/ui 1.2.0 → 1.2.2

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

@@ -0,0 +1,84 @@
+const CLASSES = {
+    landing: {
+        base: "immersive-landing",
+        viewport: "immersive-landing__viewport",
+        pageLayer: "immersive-landing__page-layer",
+        overlay: "immersive-landing__overlay",
+        versionWrap: "immersive-landing__version-wrap",
+        versionLabel: "immersive-landing__version-label"
+    },
+    page: {
+        base: "immersive-landing-page",
+        active: "immersive-landing-page--active",
+        inactive: "immersive-landing-page--inactive",
+        content: "immersive-landing-page__content"
+    },
+    arrows: {
+        button: "immersive-landing-arrows__button",
+        prev: "immersive-landing-arrows__button--prev",
+        next: "immersive-landing-arrows__button--next",
+        icon: "immersive-landing-arrows__icon"
+    },
+    navigation: {
+        base: "immersive-landing-navigation",
+        shell: "immersive-landing-navigation__shell",
+        row: "immersive-landing-navigation__row",
+        mobileArrow: "immersive-landing-navigation__mobile-arrow",
+        mobileArrowDisabled: "immersive-landing-navigation__mobile-arrow--disabled",
+        dots: "immersive-landing-navigation__dots",
+        dot: "immersive-landing-navigation__dot",
+        dotActive: "immersive-landing-navigation__dot--active",
+        counter: "immersive-landing-navigation__counter",
+        icon: "immersive-landing-navigation__icon"
+    },
+    pwaPrompt: {
+        dialog: "immersive-landing-pwa",
+        card: "immersive-landing-pwa__card",
+        closeButton: "immersive-landing-pwa__close",
+        body: "immersive-landing-pwa__body",
+        media: "immersive-landing-pwa__media",
+        appIconWrap: "immersive-landing-pwa__app-icon-wrap",
+        appIcon: "immersive-landing-pwa__app-icon",
+        textWrap: "immersive-landing-pwa__text-wrap",
+        title: "immersive-landing-pwa__title",
+        description: "immersive-landing-pwa__description",
+        footer: "immersive-landing-pwa__footer",
+        action: "immersive-landing-pwa__action"
+    },
+    firefoxBanner: {
+        dialog: "immersive-landing-firefox",
+        card: "immersive-landing-firefox__card",
+        closeButton: "immersive-landing-firefox__close",
+        body: "immersive-landing-firefox__body",
+        media: "immersive-landing-firefox__media",
+        iconWrap: "immersive-landing-firefox__icon-wrap",
+        browserIcon: "immersive-landing-firefox__browser-icon",
+        textWrap: "immersive-landing-firefox__text-wrap",
+        title: "immersive-landing-firefox__title",
+        description: "immersive-landing-firefox__description",
+        footer: "immersive-landing-firefox__footer",
+        action: "immersive-landing-firefox__action"
+    },
+    cookie: {
+        banner: "immersive-landing-cookie",
+        bannerClosing: "immersive-landing-cookie--closing",
+        container: "immersive-landing-cookie__container",
+        row: "immersive-landing-cookie__row",
+        message: "immersive-landing-cookie__message",
+        actions: "immersive-landing-cookie__actions",
+        actionButton: "immersive-landing-cookie__action-button",
+        manageButton: "immersive-landing-cookie__manage-button",
+        modalBackdrop: "immersive-landing-cookie__modal-backdrop",
+        modalCard: "immersive-landing-cookie__modal-card",
+        modalHeader: "immersive-landing-cookie__modal-header",
+        modalTitle: "immersive-landing-cookie__modal-title",
+        preferences: "immersive-landing-cookie__preferences",
+        preferenceRow: "immersive-landing-cookie__preference-row",
+        preferenceRowLocked: "immersive-landing-cookie__preference-row--locked",
+        preferenceLabel: "immersive-landing-cookie__preference-label",
+        toggle: "immersive-landing-cookie__toggle",
+        modalFooter: "immersive-landing-cookie__modal-footer",
+        saveButton: "immersive-landing-cookie__save-button"
+    }
+};
+export { CLASSES };

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> & {