@abuzareal/contour-ui 0.1.0

package/dist/reset.css

@@ -0,0 +1,180 @@
+/* Minimal reset, element defaults, and global layout utilities. */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border: 0 solid;
+  letter-spacing: 0;
+}
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+:root {
+  font-family: var(--font-sans);
+  color: var(--fg);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  line-height: inherit;
+}
+
+h1,
+h2,
+h3,
+p,
+dl,
+dd,
+figure {
+  margin: 0;
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--font-display);
+  font-size: inherit;
+  font-weight: 500;
+}
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+img,
+svg,
+canvas {
+  display: block;
+  vertical-align: middle;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+svg {
+  flex-shrink: 0;
+}
+
+summary {
+  display: list-item;
+}
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  text-transform: none;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+a:focus-visible,
+summary:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 6px;
+}
+
+::selection {
+  background: var(--acid);
+  color: var(--ink);
+}
+
+/* Anchor targets land flush below the fixed header. */
+section {
+  scroll-margin-top: 78px;
+}
+
+.site-shell {
+  overflow: clip;
+}
+
+.page-width {
+  width: calc(100% - 112px);
+  max-width: 1680px;
+  margin-inline: auto;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 12px;
+  left: 12px;
+  padding: 14px 24px;
+  background: var(--acid);
+  color: var(--ink);
+  transform: translateY(-150%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+/* Hidden visually but still announced by screen readers. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 1023px) {
+  .page-width {
+    width: calc(100% - 64px);
+  }
+}
+
+@media (max-width: 767px) {
+  section {
+    scroll-margin-top: 70px;
+  }
+
+  .page-width {
+    width: calc(100% - 40px);
+  }
+}

package/dist/scroll.d.ts

@@ -0,0 +1 @@
+export { default as useSmoothScroll } from "./hooks/useSmoothScroll.js";

package/dist/scroll.js

@@ -0,0 +1 @@
+export { default as useSmoothScroll } from "./hooks/useSmoothScroll.js";

package/dist/styles.css

@@ -0,0 +1,23 @@
+@import "./tokens.css";
+@import "./ui.css";
+@import "./kit/index.css";
+@import "./theme-toggle.css";
+@import "./motion.css";
+
+/* Shared accessibility and typography utilities also work with an application-owned reset. */
+.mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  line-height: 1.6;
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/theme-toggle.css

@@ -0,0 +1,38 @@
+.theme-toggle {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-radius: 50%;
+  overflow: hidden;
+  transition:
+    background 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.theme-toggle:hover {
+  background: var(--acid);
+  border-color: var(--acid);
+  color: var(--ink);
+}
+
+.theme-toggle svg {
+  grid-area: 1 / 1;
+  transition:
+    transform 700ms var(--ease),
+    opacity 400ms ease;
+}
+
+/* The icon for the theme you can switch to is shown; the other spins away. */
+.theme-icon-sun,
+:root[data-theme="dark"] .theme-icon-moon {
+  opacity: 0;
+  transform: rotate(-120deg) scale(0.3);
+}
+
+:root[data-theme="dark"] .theme-icon-sun {
+  opacity: 1;
+  transform: none;
+}

package/dist/three.d.ts

@@ -0,0 +1,8 @@
+export { default as Sculpture } from "./components/hero/Sculpture.js";
+export { default as ObjectStudy } from "./components/three/ObjectStudy.js";
+export { default as useThreeStage } from "./hooks/useThreeStage.js";
+export type * from "./hooks/useThreeStage.js";
+export type * from "./components/hero/Sculpture.js";
+export type * from "./components/three/ObjectStudy.js";
+export * from "./lib/threeMaterials.js";
+export * from "./lib/threeStudies.js";

package/dist/three.js

@@ -0,0 +1,5 @@
+export { default as Sculpture } from "./components/hero/Sculpture.js";
+export { default as ObjectStudy } from "./components/three/ObjectStudy.js";
+export { default as useThreeStage } from "./hooks/useThreeStage.js";
+export * from "./lib/threeMaterials.js";
+export * from "./lib/threeStudies.js";

package/dist/tokens.css

@@ -0,0 +1,127 @@
+/* Design tokens: palette, typography, and per-theme surface colours (light default, dark override). */
+
+:root {
+  /* Brand constants (identical in both themes). */
+  --ink: #171817;
+  --paper: #f2f3ee;
+  --white: #fcfcf9;
+  --acid: #d0f344;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --font-sans: "DM Sans Variable", "DM Sans", system-ui, sans-serif;
+  --font-display:
+    "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
+  --font-mono: "DM Mono", ui-monospace, monospace;
+
+  /* Shape and motion scales shared by every component. */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-pill: 999px;
+  --duration-fast: 160ms;
+  --duration-base: 300ms;
+  --duration-slow: 700ms;
+
+  /* Light theme: warm paper surfaces, olive-ink text, acid as the one accent. */
+  --bg: var(--paper);
+  --fg: var(--ink);
+  --muted: #63665f;
+  --line: #d6d8d0;
+  --line-strong: #b4b8ac;
+  --surface: #fbfbf8;
+  --surface-sunken: #e8e9e1;
+  --overlay: #171817b8;
+  --shadow-raised: 0 1px 2px #1718170d, 0 10px 28px #17181712;
+  --shadow-floating: 0 24px 56px #1718172e;
+  --olive: #75901a;
+  --signal: #4d7522;
+  --success: #3f6119;
+  --success-soft: #e4ecc9;
+  --info: #2f6a82;
+  --info-soft: #dbe8ec;
+  --warning: #7a5100;
+  --warning-soft: #f5e6c3;
+  --danger: #a8321c;
+  --danger-soft: #f7dcd3;
+  --invert-bg: var(--ink);
+  --invert-fg: var(--paper);
+  --header-bg: #f2f3eeef;
+  --header-bg-scrolled: #f2f3eee8;
+  --header-fg: var(--ink);
+  --header-link: #53574e;
+  --header-line: var(--line);
+  --header-dot: #75901a;
+  --header-underline: currentColor;
+  --menu-shadow: #00000012;
+  --focus-band-bg: var(--ink);
+  --focus-band-fg: var(--paper);
+  --focus-band-line: #353733;
+  --focus-band-icon: var(--acid);
+  --about-bg: #e4e5dc;
+  --experience-bg: var(--white);
+  --expertise-bg: #e7eacb;
+  --work-bg: var(--ink);
+  --footer-bg: var(--ink);
+
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  /* Dark theme: tinted near-blacks stepped by elevation, off-white text. */
+  --bg: #0f100d;
+  --fg: #eef0e6;
+  --muted: #9a9e90;
+  --line: #2a2d24;
+  --line-strong: #444939;
+  --surface: #171913;
+  --surface-sunken: #0a0b09;
+  --overlay: #050605cc;
+  --shadow-raised: 0 1px 2px #0000004d, 0 10px 28px #00000059;
+  --shadow-floating: 0 24px 56px #00000099;
+  --olive: #c2e042;
+  --signal: var(--acid);
+  --success: #b5d33f;
+  --success-soft: #222914;
+  --info: #8fc0d6;
+  --info-soft: #152227;
+  --warning: #f0c063;
+  --warning-soft: #2b2311;
+  --danger: #ff8a70;
+  --danger-soft: #2f1914;
+  --invert-bg: var(--paper);
+  --invert-fg: var(--ink);
+  --header-bg: #0f100deb;
+  --header-bg-scrolled: #0f100de0;
+  --header-fg: #eef0e6;
+  --header-link: #b4b8aa;
+  --header-line: #2a2d24;
+  --header-dot: var(--acid);
+  --header-underline: var(--acid);
+  --menu-shadow: #00000066;
+  --focus-band-bg: var(--paper);
+  --focus-band-fg: var(--ink);
+  --focus-band-line: #d6d8d0;
+  --focus-band-icon: #6b8412;
+  --about-bg: #1b1e16;
+  --experience-bg: #131511;
+  --expertise-bg: #21251a;
+  --work-bg: #080907;
+  --footer-bg: #080907;
+
+  color-scheme: dark;
+}
+
+:root {
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --space-104: 104px;
+  --text-body: 15px;
+  --text-small: 13px;
+  --text-label: 11px;
+  --text-lead: 24px;
+  --text-display: clamp(48px, 8vw, 116px);
+}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export type Section = {
+    id: string;
+    label: string;
+    title: string;
+    number: number;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui.css

@@ -0,0 +1,178 @@
+/* Shared UI patterns: brand mark, section scaffolding, links, disclosures, and reveal animations. */
+
+.brand {
+  font-family: var(--font-display);
+  font-size: 34px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.brand > span {
+  color: var(--olive);
+}
+
+.section-space {
+  padding-block: 104px;
+}
+
+.section-label {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  text-transform: uppercase;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--line);
+}
+
+.text-link {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-size: 12px;
+  border-bottom: 1px solid currentColor;
+  padding-block: 8px;
+  transition: gap 300ms var(--ease);
+}
+
+.text-link:hover {
+  gap: 26px;
+}
+
+/* Disclosure: native details/summary with a plus icon that rotates into a cross. */
+.disclosure > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.disclosure-icon {
+  transition: transform 300ms;
+}
+
+.disclosure[open] .disclosure-icon {
+  transform: rotate(45deg);
+}
+
+/* Two-column intro + content layout used by Experience and Expertise. */
+.split-layout {
+  display: grid;
+  grid-template-columns: 0.8fr 1.2fr;
+  gap: 90px;
+  padding-top: 52px;
+}
+
+.section-intro h2 {
+  font-size: 60px;
+  line-height: 1.07;
+}
+
+.section-intro h2 .type-accent {
+  color: var(--heading-soft);
+}
+
+.section-intro > p {
+  margin-top: 27px;
+  font-size: 14px;
+  color: var(--intro-text);
+  line-height: 1.8;
+}
+
+.section-intro > .text-link {
+  margin-top: 24px;
+}
+
+/* Reveal: content fades up once, and heading lines slide up inside a clip. */
+.reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity 700ms var(--ease),
+    transform 700ms var(--ease);
+}
+
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.type-line {
+  display: block;
+  overflow: clip;
+  padding-block: 0.09em;
+  margin-block: -0.09em;
+}
+
+.type-run {
+  display: block;
+  opacity: 0;
+  transform: translateY(105%);
+  transition:
+    transform 850ms var(--ease),
+    opacity 650ms ease;
+}
+
+.type-line:nth-child(2) .type-run {
+  transition-delay: 110ms;
+}
+
+.type-line:nth-child(3) .type-run {
+  transition-delay: 220ms;
+}
+
+.reveal.is-visible .type-run {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1023px) {
+  .split-layout {
+    gap: 45px;
+  }
+
+  .section-intro h2 {
+    font-size: 48px;
+  }
+}
+
+@media (max-width: 767px) {
+  .brand {
+    font-size: 30px;
+  }
+
+  .section-space {
+    padding-block: 64px;
+  }
+
+  .section-label {
+    padding-bottom: 19px;
+  }
+
+  .section-label > span:last-child {
+    display: none;
+  }
+
+  .split-layout {
+    grid-template-columns: 1fr;
+    gap: 35px;
+    padding-top: 33px;
+  }
+
+  .section-intro h2 {
+    font-size: 44px;
+  }
+}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@abuzareal/contour-ui",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Editorial React components, themes, restrained motion, and optional Three.js objects.",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "SECURITY.md",
+    "RELEASING.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./three": {
+      "types": "./dist/three.d.ts",
+      "import": "./dist/three.js"
+    },
+    "./scroll": {
+      "types": "./dist/scroll.d.ts",
+      "import": "./dist/scroll.js"
+    },
+    "./theme-bootstrap": {
+      "types": "./dist/lib/themeBootstrap.d.ts",
+      "import": "./dist/lib/themeBootstrap.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./reset.css": "./dist/reset.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "oxlint src --deny-warnings",
+    "test": "node --test tests/*.test.mjs",
+    "check:package": "node scripts/check-package.mjs",
+    "validate": "npm run typecheck && npm run lint && npm run build && npm test && npm run check:package",
+    "prepublishOnly": "npm run validate",
+    "test:consumer": "node scripts/test-consumer.mjs"
+  },
+  "dependencies": {
+    "@fontsource-variable/dm-sans": "^5.3.0",
+    "@fontsource-variable/space-grotesk": "^5.3.0",
+    "@fontsource/dm-mono": "^5.3.0",
+    "lucide-react": "^1.49.0"
+  },
+  "peerDependencies": {
+    "lenis": "^1.3.26",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.186.1"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    },
+    "lenis": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.186.0",
+    "jsdom": "^30.1.2",
+    "lenis": "^1.3.26",
+    "oxlint": "^1.81.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "three": "^0.186.1",
+    "typescript": "^5.5.3",
+    "vite": "^8.3.2"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abuzareal/contour-ui.git"
+  },
+  "homepage": "https://github.com/abuzareal/contour-ui#readme",
+  "bugs": {
+    "url": "https://github.com/abuzareal/contour-ui/issues"
+  }
+}