@abuzareal/contour-ui 0.1.0

package/dist/kit/overlays.css

@@ -0,0 +1,299 @@
+/* Kit — overlays: tooltip, dialog and drawer, dropdown menu, and popover. */
+
+.tooltip-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 40;
+  width: max-content;
+  max-width: 220px;
+  padding: 6px 10px;
+  background: var(--ink);
+  color: var(--paper);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--duration-fast),
+    transform var(--duration-fast) var(--ease),
+    visibility var(--duration-fast);
+}
+
+:root[data-theme="dark"] .tooltip {
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.tooltip.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tooltip-top {
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translate(-50%, 4px);
+}
+
+.tooltip-bottom {
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translate(-50%, -4px);
+}
+
+.tooltip-left {
+  right: calc(100% + 10px);
+  top: 50%;
+  transform: translate(4px, -50%);
+}
+
+.tooltip-right {
+  left: calc(100% + 10px);
+  top: 50%;
+  transform: translate(-4px, -50%);
+}
+
+.tooltip-top.is-open,
+.tooltip-bottom.is-open {
+  transform: translate(-50%, 0);
+}
+
+.tooltip-left.is-open,
+.tooltip-right.is-open {
+  transform: translate(0, -50%);
+}
+
+.dialog {
+  width: min(560px, calc(100vw - 32px));
+  max-width: none;
+  max-height: calc(100dvh - 48px);
+  padding: 0;
+  border: 0;
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: var(--shadow-floating);
+}
+
+.dialog::backdrop {
+  background: var(--overlay);
+  backdrop-filter: blur(6px);
+}
+
+.dialog[open] {
+  animation: dialog-in var(--duration-slow) var(--ease) both;
+}
+
+.dialog-panel {
+  display: grid;
+  gap: 24px;
+  padding: 32px;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-header h2 {
+  font-size: 32px;
+  line-height: 1.1;
+}
+
+.dialog-description {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.dialog-close {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-radius: 50%;
+  transition:
+    background var(--duration-fast),
+    transform var(--duration-base) var(--ease);
+}
+
+.dialog-close:hover {
+  background: var(--acid);
+  border-color: var(--acid);
+  color: var(--ink);
+  transform: rotate(90deg);
+}
+
+.dialog-body {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+.dialog-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* Drawers: full-height sheets from either edge. */
+.dialog-left,
+.dialog-right {
+  width: min(420px, calc(100vw - 48px));
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+}
+
+.dialog-right {
+  margin-left: auto;
+}
+
+.dialog-left[open] {
+  animation-name: drawer-from-left;
+}
+
+.dialog-right[open] {
+  animation-name: drawer-from-right;
+}
+
+.dialog-left .dialog-panel,
+.dialog-right .dialog-panel {
+  align-content: start;
+  min-height: 100%;
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.98);
+  }
+}
+
+@keyframes drawer-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes drawer-from-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+.menu,
+.popover {
+  position: relative;
+  display: inline-block;
+}
+
+.menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 40px;
+  padding-inline: 18px 14px;
+  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
+  border-radius: var(--radius-pill);
+  font-size: 13px;
+  transition:
+    background var(--duration-fast),
+    border-color var(--duration-fast);
+}
+
+.menu-trigger:hover {
+  border-color: var(--fg);
+}
+
+.menu-chevron {
+  transition: transform var(--duration-base) var(--ease);
+}
+
+.menu-trigger[aria-expanded="true"] .menu-chevron {
+  transform: rotate(180deg);
+}
+
+.menu-list,
+.popover-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  z-index: 30;
+  min-width: 220px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow-floating);
+  animation: menu-in var(--duration-base) var(--ease) both;
+}
+
+.menu-start .menu-list,
+.popover-start .popover-panel {
+  left: 0;
+}
+
+.menu-end .menu-list,
+.popover-end .popover-panel {
+  right: 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  text-align: left;
+  transition: background var(--duration-fast);
+}
+
+.menu-item:hover,
+.menu-item:focus-visible {
+  background: color-mix(in srgb, var(--fg) 7%, transparent);
+  outline: none;
+}
+
+.menu-item:focus-visible {
+  box-shadow: inset 2px 0 0 var(--fg);
+}
+
+.menu-item-danger {
+  color: var(--danger);
+}
+
+.popover-panel {
+  display: grid;
+  gap: 10px;
+  width: 300px;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.popover-panel[hidden] {
+  display: none;
+}
+
+.popover-title {
+  font: 500 18px / 1.3 var(--font-display);
+  color: var(--fg);
+}
+
+@keyframes menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}

package/dist/lib/a11y.d.ts

@@ -0,0 +1,3 @@
+/** Accessibility id helpers shared by form controls. */
+/** aria-describedby value pointing at the message Field renders (error wins over hint). */
+export declare const fieldDescribedBy: (id: string, hint?: string, error?: string) => string | undefined;

package/dist/lib/a11y.js

@@ -0,0 +1,3 @@
+/** Accessibility id helpers shared by form controls. */
+/** aria-describedby value pointing at the message Field renders (error wins over hint). */
+export const fieldDescribedBy = (id, hint, error) => error ? `${id}-error` : hint ? `${id}-hint` : undefined;

package/dist/lib/classNames.d.ts

@@ -0,0 +1,6 @@
+/** Builds a className string from optional parts, skipping falsy values. */
+export declare const cx: (...parts: (string | false | null | undefined)[]) => string;
+export type ButtonVariant = "primary" | "accent" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+/** Button classes, shared so anchors can look like buttons without duplicating styles. */
+export declare const buttonClassName: (variant?: ButtonVariant, size?: ButtonSize, className?: string) => string;

package/dist/lib/classNames.js

@@ -0,0 +1,4 @@
+/** Builds a className string from optional parts, skipping falsy values. */
+export const cx = (...parts) => parts.filter(Boolean).join(" ");
+/** Button classes, shared so anchors can look like buttons without duplicating styles. */
+export const buttonClassName = (variant = "primary", size = "md", className) => cx("button", `button-${variant}`, `button-${size}`, className);

package/dist/lib/format.d.ts

@@ -0,0 +1,3 @@
+/** Small formatting helpers shared by UI components. */
+/** Formats a 1-based position as a two-digit index, e.g. 3 -> "03". */
+export declare const formatIndex: (value: number) => string;

package/dist/lib/format.js

@@ -0,0 +1,3 @@
+/** Small formatting helpers shared by UI components. */
+/** Formats a 1-based position as a two-digit index, e.g. 3 -> "03". */
+export const formatIndex = (value) => String(value).padStart(2, "0");

package/dist/lib/keyboard.d.ts

@@ -0,0 +1,8 @@
+/** Arrow-key helpers for composite widgets (tabs, segmented controls, menus). */
+type Orientation = "horizontal" | "vertical";
+/**
+ * Returns the index to move to for an arrow, Home, or End key press,
+ * wrapping at both ends, or null when the key is not a navigation key.
+ */
+export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation): number | null;
+export {};

package/dist/lib/keyboard.js

@@ -0,0 +1,22 @@
+/** Arrow-key helpers for composite widgets (tabs, segmented controls, menus). */
+const keysFor = (orientation) => orientation === "horizontal"
+    ? { previous: "ArrowLeft", next: "ArrowRight" }
+    : { previous: "ArrowUp", next: "ArrowDown" };
+/**
+ * Returns the index to move to for an arrow, Home, or End key press,
+ * wrapping at both ends, or null when the key is not a navigation key.
+ */
+export function nextIndexForKey(key, current, count, orientation = "horizontal") {
+    if (count <= 0)
+        return null;
+    const { previous, next } = keysFor(orientation);
+    if (key === next)
+        return (current + 1) % count;
+    if (key === previous)
+        return (current - 1 + count) % count;
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return count - 1;
+    return null;
+}

package/dist/lib/motion.d.ts

@@ -0,0 +1,3 @@
+/** Runtime motion checks for JavaScript-driven effects (CSS handles the rest in motion.css). */
+/** True when the visitor prefers reduced motion or the page's motion switch is off. */
+export declare const motionDisabledFor: (element: Element) => boolean;

package/dist/lib/motion.js

@@ -0,0 +1,4 @@
+/** Runtime motion checks for JavaScript-driven effects (CSS handles the rest in motion.css). */
+/** True when the visitor prefers reduced motion or the page's motion switch is off. */
+export const motionDisabledFor = (element) => window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    element.closest('[data-motion="off"]') !== null;

package/dist/lib/safeHref.d.ts

@@ -0,0 +1,2 @@
+/** Allows ordinary web/contact destinations and relative links, rejecting executable URLs. */
+export declare function safeHref(href: string | undefined): string | undefined;

package/dist/lib/safeHref.js

@@ -0,0 +1,14 @@
+/** Allows ordinary web/contact destinations and relative links, rejecting executable URLs. */
+export function safeHref(href) {
+    if (href === undefined)
+        return undefined;
+    try {
+        const url = new URL(href, "https://contour.invalid/");
+        return ["https:", "http:", "mailto:", "tel:"].includes(url.protocol)
+            ? href
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/lib/storage.d.ts

@@ -0,0 +1,10 @@
+/** Web Storage helpers that tolerate blocked or throwing storage (private mode, sandboxed frames). */
+export declare const storageKeys: {
+    readonly openingSeen: "aa-opening-seen";
+    readonly theme: "aa-theme";
+};
+type StorageArea = "local" | "session";
+export declare function readStorage(area: StorageArea, key: string): string | null;
+/** Returns false when the value could not be persisted. */
+export declare function writeStorage(area: StorageArea, key: string, value: string): boolean;
+export {};

package/dist/lib/storage.js

@@ -0,0 +1,25 @@
+/** Web Storage helpers that tolerate blocked or throwing storage (private mode, sandboxed frames). */
+export const storageKeys = {
+    openingSeen: "aa-opening-seen",
+    // Also read by the inline theme script in index.html.
+    theme: "aa-theme",
+};
+const getArea = (area) => area === "local" ? window.localStorage : window.sessionStorage;
+export function readStorage(area, key) {
+    try {
+        return getArea(area).getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/** Returns false when the value could not be persisted. */
+export function writeStorage(area, key, value) {
+    try {
+        getArea(area).setItem(key, value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/lib/themeBootstrap.d.ts

@@ -0,0 +1,6 @@
+/** Browser UI colours; keep in sync with `--bg` in styles/tokens.css. */
+export declare const themeColors: {
+    readonly light: "#f2f3ee";
+    readonly dark: "#0f100d";
+};
+export declare const themeBootstrapScript: string;

package/dist/lib/themeBootstrap.js

@@ -0,0 +1,19 @@
+/** Pre-paint theme script, injected inline into every HTML page by vite.config.ts to avoid a light/dark flash. */
+// Explicit extension: this file is also loaded by vite.config.ts.
+import { storageKeys } from "./storage.js";
+/** Browser UI colours; keep in sync with `--bg` in styles/tokens.css. */
+export const themeColors = {
+    light: "#f2f3ee",
+    dark: "#0f100d",
+};
+export const themeBootstrapScript = `(function () {
+  var theme = "light";
+  try {
+    var stored = localStorage.getItem("${storageKeys.theme}");
+    if (stored === "light" || stored === "dark") theme = stored;
+    else if (matchMedia("(prefers-color-scheme: dark)").matches) theme = "dark";
+  } catch (error) {}
+  document.documentElement.dataset.theme = theme;
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute("content", theme === "dark" ? "${themeColors.dark}" : "${themeColors.light}");
+})();`;

package/dist/lib/threeMaterials.d.ts

@@ -0,0 +1,9 @@
+/** Brand materials and the rounded-link geometry shared by every Three.js stage. */
+import * as THREE from "three";
+export declare const createChrome: () => THREE.MeshStandardMaterial;
+export declare const createLime: () => THREE.MeshStandardMaterial;
+export declare const createInk: () => THREE.MeshStandardMaterial;
+/** Lime-tinted glass: attenuation gives the body colour so it reads on pale backgrounds. */
+export declare const createGlass: () => THREE.MeshPhysicalMaterial;
+/** The bevelled, rounded-square link that forms the hero sculpture. */
+export declare function createLinkGeometry(): THREE.ExtrudeGeometry;

package/dist/lib/threeMaterials.js

@@ -0,0 +1,62 @@
+/** Brand materials and the rounded-link geometry shared by every Three.js stage. */
+import * as THREE from "three";
+export const createChrome = () => new THREE.MeshStandardMaterial({
+    color: 0xd8dfdf,
+    metalness: 1,
+    roughness: 0.19,
+    envMapIntensity: 1.8,
+});
+export const createLime = () => new THREE.MeshStandardMaterial({
+    color: 0xccff00,
+    metalness: 0.25,
+    roughness: 0.26,
+    envMapIntensity: 1.2,
+});
+export const createInk = () => new THREE.MeshStandardMaterial({
+    color: 0x1d1f1b,
+    metalness: 0.1,
+    roughness: 0.62,
+    envMapIntensity: 0.9,
+});
+/** Lime-tinted glass: attenuation gives the body colour so it reads on pale backgrounds. */
+export const createGlass = () => new THREE.MeshPhysicalMaterial({
+    color: 0xffffff,
+    metalness: 0,
+    roughness: 0.1,
+    transmission: 1,
+    thickness: 1.4,
+    ior: 1.5,
+    attenuationColor: 0x9cc21f,
+    attenuationDistance: 1.1,
+    clearcoat: 1,
+    envMapIntensity: 1.6,
+});
+function roundedSquare(size, radius) {
+    const shape = new THREE.Shape();
+    shape.moveTo(-size + radius, -size);
+    shape.lineTo(size - radius, -size);
+    shape.quadraticCurveTo(size, -size, size, -size + radius);
+    shape.lineTo(size, size - radius);
+    shape.quadraticCurveTo(size, size, size - radius, size);
+    shape.lineTo(-size + radius, size);
+    shape.quadraticCurveTo(-size, size, -size, size - radius);
+    shape.lineTo(-size, -size + radius);
+    shape.quadraticCurveTo(-size, -size, -size + radius, -size);
+    return shape;
+}
+/** The bevelled, rounded-square link that forms the hero sculpture. */
+export function createLinkGeometry() {
+    const shape = roundedSquare(1.25, 0.48);
+    shape.holes.push(new THREE.Path(roundedSquare(0.79, 0.29).getPoints(24)));
+    const geometry = new THREE.ExtrudeGeometry(shape, {
+        depth: 0.34,
+        bevelEnabled: true,
+        bevelSegments: 5,
+        steps: 1,
+        bevelSize: 0.12,
+        bevelThickness: 0.12,
+        curveSegments: 24,
+    });
+    geometry.center();
+    return geometry;
+}

package/dist/lib/threeStudies.d.ts

@@ -0,0 +1,16 @@
+/** Object sets for the design system's 3D studies, built from the brand materials. */
+import * as THREE from "three";
+export type ObjectSet = {
+    objects: THREE.Object3D[];
+    dispose: () => void;
+};
+/** The hero link rendered in each brand material. */
+export declare function createMaterialSet(): ObjectSet;
+/** Primitive forms that share the sculpture's materials and lighting. */
+export declare function createGeometrySet(): ObjectSet;
+/** Named sets, so callers can choose one without importing Three.js themselves. */
+export declare const objectStudies: {
+    materials: typeof createMaterialSet;
+    geometry: typeof createGeometrySet;
+};
+export type ObjectStudyKind = keyof typeof objectStudies;

package/dist/lib/threeStudies.js

@@ -0,0 +1,39 @@
+/** Object sets for the design system's 3D studies, built from the brand materials. */
+import * as THREE from "three";
+import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { createChrome, createGlass, createInk, createLime, createLinkGeometry, } from "./threeMaterials.js";
+/** The hero link rendered in each brand material. */
+export function createMaterialSet() {
+    const geometry = createLinkGeometry();
+    const materials = [createChrome(), createLime(), createInk(), createGlass()];
+    return {
+        objects: materials.map((material) => new THREE.Mesh(geometry, material)),
+        dispose: () => {
+            geometry.dispose();
+            materials.forEach((material) => material.dispose());
+        },
+    };
+}
+/** Primitive forms that share the sculpture's materials and lighting. */
+export function createGeometrySet() {
+    const geometries = [
+        new THREE.TorusKnotGeometry(0.82, 0.28, 180, 24),
+        new THREE.IcosahedronGeometry(1.15, 0),
+        new RoundedBoxGeometry(1.7, 1.7, 1.7, 6, 0.32),
+        new THREE.CapsuleGeometry(0.62, 1.1, 12, 32),
+    ];
+    const materials = [createChrome(), createLime(), createInk(), createChrome()];
+    materials[1].flatShading = true;
+    return {
+        objects: geometries.map((geometry, index) => new THREE.Mesh(geometry, materials[index])),
+        dispose: () => {
+            geometries.forEach((geometry) => geometry.dispose());
+            materials.forEach((material) => material.dispose());
+        },
+    };
+}
+/** Named sets, so callers can choose one without importing Three.js themselves. */
+export const objectStudies = {
+    materials: createMaterialSet,
+    geometry: createGeometrySet,
+};

package/dist/motion.css

@@ -0,0 +1,59 @@
+/* Motion policy: theme transitions, the in-page motion switch, and the reduced-motion preference. */
+
+/* Theme switch via the View Transitions API (see hooks/useTheme.ts). */
+::view-transition {
+  background: #050605;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* Cross-fade fallback for browsers without view transitions. */
+.theme-fading *,
+.theme-fading *::before,
+.theme-fading *::after {
+  transition:
+    background-color 450ms ease,
+    color 450ms ease,
+    border-color 450ms ease !important;
+}
+
+/* "Motion off" toggle in the hero. */
+[data-motion="off"] *,
+[data-motion="off"] *::before,
+[data-motion="off"] *::after {
+  animation: none !important;
+  transition: none !important;
+  scroll-behavior: auto !important;
+}
+
+[data-motion="off"] :is(.reveal, .type-run, .hero-letter) {
+  opacity: 1;
+  transform: none;
+}
+
+[data-motion="off"] .opening-sequence {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+
+  :is(.reveal, .type-run, .hero-letter) {
+    opacity: 1;
+    transform: none;
+  }
+
+  .opening-sequence {
+    display: none;
+  }
+}