shopic 0.0.1

package/README.md

@@ -0,0 +1,160 @@
+# shopic
+
+Custom code bundle for the Shopic Webflow site. TypeScript, bundled with esbuild,
+published to npm and served to Webflow over the jsDelivr CDN.
+
+## How the code reaches the site
+
+```
+src/*.ts  →  esbuild  →  dist/*.js  →  npm publish  →  cdn.jsdelivr.net/npm/shopic@<version>/dist/index.js
+```
+
+npm stores the versions; jsDelivr is the CDN that serves them. The published package
+is public even though this repository is not — that is the price of a free CDN.
+
+## Local development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+`pnpm dev` serves the bundle at `http://localhost:3000` with live reload.
+
+Put this in **Site Settings → Custom Code → Footer** once, and leave it there. It
+loads the CDN build for everyone, and the local build only for a browser you have
+flipped into dev mode:
+
+```html
+<script>
+(() => {
+  const PROD = 'https://cdn.jsdelivr.net/npm/shopic@0.0.1/dist/index.js';
+  const DEV = 'http://localhost:3000/index.js';
+
+  const load = (src, fallback) => {
+    const s = document.createElement('script');
+    s.src = src;
+    if (fallback) s.onerror = fallback;
+    document.head.appendChild(s);
+  };
+
+  if (localStorage.getItem('shopic-dev') === 'on') load(DEV, () => load(PROD));
+  else load(PROD);
+})();
+</script>
+```
+
+Flip it on in the console on the staging domain, once:
+
+```js
+localStorage.setItem('shopic-dev', 'on');   // off: localStorage.removeItem('shopic-dev')
+```
+
+Without that gate every visitor's browser would probe your localhost. With it,
+only yours does, and it falls back to the CDN the moment `pnpm dev` is not running.
+
+Two things to know: Chrome and Firefox allow `http://localhost` from an HTTPS page,
+**Safari blocks it** — work in Chrome. And the dev URL has no `/dist` in it, because
+esbuild serves that directory as the root (`src/pages/home.ts` → `/pages/home.js`).
+
+## Releasing
+
+Every release is run by hand from this folder. There is no CI — the GitHub
+repository is history and backup, nothing publishes from it.
+
+```bash
+pnpm changeset            # describe the change, pick patch/minor/major
+pnpm changeset version    # bumps the version, writes CHANGELOG.md
+git commit -am "release: 0.0.1"
+
+npm publish --access public   # browser opens, confirm with the passkey
+git tag v0.0.1
+git push --follow-tags
+```
+
+**Publish with `npm`, not `pnpm changeset publish`.** Changesets detects the pnpm
+lockfile and hands the publish to `pnpm publish`, and its only 2FA path is a typed
+six-digit code (`Enter one-time password:`). This account uses a passkey, where no
+such code exists — the prompt is a dead end. `changeset version` still does the real
+work; `changeset publish` would only have added the git tag, which the command above
+does directly.
+
+This needs **npm CLI 11.9 or newer**; older versions cannot drive the WebAuthn
+browser hand-off and fall back to asking for a code that does not exist.
+
+`prepublishOnly` runs `check`, `lint` and `build` before npm packs anything, so a
+published tarball can never contain a stale `dist`. If any of the three fails, the
+publish stops.
+
+That guard matters because **npm versions are immutable**. You cannot replace a
+published version — a mistake costs you a new one.
+
+Provenance is off. npm only signs builds from public source repositories, and this
+one is private.
+
+**Always pin the version in the script tag.** jsDelivr caches unversioned and
+branch URLs for hours; `@latest` will serve stale code and cost you an afternoon.
+
+## Animations
+
+GSAP is **not bundled**. It loads from Webflow's native Site Settings toggle, and this
+bundle reads the global. `src/lib/gsap.ts` throws a named error if the toggle is off —
+a site transfer wipes Site Settings, and a silent failure would ship a site with no motion.
+
+Animations are driven by the `data-anim` attribute so the client can move markup around
+in the Designer without breaking motion:
+
+```html
+<div data-anim="hero-reveal">…</div>
+```
+
+Register the handler under the same name:
+
+```ts
+// src/anim/hero-reveal.ts
+import { registerAnimation } from '$anim/registry';
+
+registerAnimation('hero-reveal', (element, { gsap, reducedMotion }) => {
+  if (reducedMotion) return;
+  gsap.from(element, { autoAlpha: 0, y: 24, duration: 0.6 });
+});
+```
+
+Import the file in `src/anim/index.ts`. An unregistered `data-anim` value warns in the
+console instead of throwing.
+
+## Entry points
+
+- `src/index.ts` — ships on every page.
+- `src/pages/*.ts` — one file per page, picked up automatically, ships only where you
+  add its script tag.
+
+## Layout
+
+| Path | Contents |
+| --- | --- |
+| `src/lib` | Shared helpers — GSAP access, environment checks |
+| `src/anim` | `data-anim` registry and one file per animation |
+| `src/pages` | Per-page entry points |
+| `tests` | Playwright measurement specs (Chromium, one viewport) |
+
+## Commands
+
+| Command | Does |
+| --- | --- |
+| `pnpm dev` | Watch, rebuild, serve on :3000 with live reload |
+| `pnpm build` | Minified production build into `dist` |
+| `pnpm check` | TypeScript, no emit |
+| `pnpm lint` | ESLint + Prettier, read-only |
+| `pnpm lint:fix` | ESLint with `--fix` |
+| `pnpm format` | Prettier, writes |
+| `pnpm test` | Playwright measurement specs against `STAGING_URL` |
+| `pnpm test:ui` | The same specs in Playwright's UI runner |
+| `pnpm changeset` | Record a pending change and its version bump |
+| `pnpm changeset version` | Apply pending changesets, write `CHANGELOG.md` |
+| `npm publish` | Upload to npm (passkey in the browser) — see Releasing |
+
+`prepublishOnly` chains `check`, `lint` and `build`; it runs on publish, not by hand.
+
+The Playwright specs measure the published site, not the local dev server — set
+`STAGING_URL` or they fall back to `https://shopic.webflow.io`.

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";(()=>{var c=new Map;var i=(e,t=document)=>{let p=t.querySelectorAll("[data-anim]");for(let o of p){let r=o.dataset.anim;if(!r)continue;let n=c.get(r);if(!n){console.warn(`[shopic] No animation registered for data-anim="${r}".`,o);continue}n(o,e)}};var a=()=>{let{gsap:e,ScrollTrigger:t}=window;if(!e)throw new Error("[shopic] GSAP is not on the page. Enable it in Webflow \u2192 Site Settings \u2192 Custom Code \u2192 GSAP.");return t&&e.registerPlugin(t),{gsap:e,ScrollTrigger:t}},s=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;window.Webflow||(window.Webflow=[]);window.Webflow.push(()=>{let{gsap:e,ScrollTrigger:t}=a();i({gsap:e,ScrollTrigger:t,reducedMotion:s()})});})();

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "shopic",
+  "version": "0.0.1",
+  "description": "Custom code bundle for the Shopic Webflow site.",
+  "license": "UNLICENSED",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ./bin/build.js",
+    "build": "cross-env NODE_ENV=production node ./bin/build.js",
+    "prepublishOnly": "npm run check && npm run lint && npm run build",
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix",
+    "check": "tsc --noEmit",
+    "format": "prettier --write ./src",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "update": "pnpm update -i -L -r"
+  },
+  "devDependencies": {
+    "@changesets/changelog-git": "^0.2.0",
+    "@changesets/cli": "^2.27.12",
+    "@eslint/js": "^9.19.0",
+    "@finsweet/eslint-config": "^3.0.3",
+    "@finsweet/ts-utils": "^0.40.0",
+    "@finsweet/tsconfig": "^1.4.2",
+    "@playwright/test": "^1.50.1",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "gsap": "^3.13.0",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.23.0"
+  },
+  "engines": {
+    "pnpm": ">=10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wlrx/shopic.git"
+  },
+  "packageManager": "pnpm@11.5.3+sha512.7ac1c919341c213a34dc0d02afb7143c5c26ac26ee8c4782deea821b8ac64d2134a081fd8941dae6e29bbb48f58dfc2b7fbceeccc07cb2f09d219d342a4969ed"
+}