craft-library 0.1.3 → 0.2.0

package/dist/cdn.js

@@ -1,3 +1,4 @@
-// the one-file build for a <script> tag: registers the three tags and exposes the mount functions
-import { mountLike, mountMagnet, mountGlassNav } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+// the one-file build for a <script> tag: registers the four tags and exposes the mount functions (the card's 3D scene
+// is fetched from next to this file the first time a card is mounted)
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon · <glass-nav>, <like-button>, <magnetic-icon> */
+/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -1309,6 +1309,52 @@
     };
   }
 
+  // src/card-load-cdn.js
+  var me = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base = me ? me.slice(0, me.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadCard = () => import(base + "card.cdn.js");
+
+  // dist/card-mount.js
+  var LABEL = "Credit card. Press to turn it over and see the back.";
+  var KEYS = ["name", "number", "expiry", "cvv", "logo", "size", "entrance", "interactive"];
+  function mountIridescentCard(host, o = {}) {
+    let card = null, gone = false;
+    const opts = { label: o.label || LABEL };
+    for (const k of KEYS) if (o[k] !== void 0 && o[k] !== null) opts[k] = o[k];
+    if (typeof opts.number === "string") opts.number = opts.number.trim().split(/\s+/);
+    const turned = (e) => {
+      if (o.onTurn) o.onTurn(e.detail.face);
+    };
+    host.addEventListener("cardturn", turned);
+    const ready = loadCard().then((m) => {
+      if (gone) return null;
+      if (!opts.logo && m.LOGO) opts.logo = m.LOGO;
+      card = m.mountCard(host, opts);
+      return card.ready.then(() => card);
+    });
+    return {
+      ready,
+      turn: (dir) => {
+        if (card) card.turn(dir);
+      },
+      show: (face) => {
+        if (card) card.show(face);
+      },
+      play: () => {
+        if (card) card.play();
+      },
+      get face() {
+        return card ? card.face : "front";
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("cardturn", turned);
+        if (card) card.destroy();
+        card = null;
+      }
+    };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1342,7 +1388,20 @@
       send(el, "select", { index });
     }
   }));
+  define("iridescent-card", (el, o) => {
+    css("craft-card-host", ":where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}");
+    return mountIridescentCard(el, o);
+  }, (el) => ({
+    name: el.getAttribute("name") || void 0,
+    number: el.getAttribute("number") || void 0,
+    expiry: el.getAttribute("expiry") || void 0,
+    cvv: el.getAttribute("cvv") || void 0,
+    logo: el.getAttribute("logo") || void 0,
+    size: el.getAttribute("size") ? +el.getAttribute("size") : void 0,
+    entrance: el.getAttribute("entrance") === "false" ? false : void 0,
+    label: el.getAttribute("label") || void 0
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };
 })();

package/dist/elements.js

@@ -1,8 +1,9 @@
-// <glass-nav>, <like-button> and <magnetic-icon>: the pieces as HTML tags, for pages without React.
+// <glass-nav>, <like-button>, <magnetic-icon> and <iridescent-card>: the pieces as HTML tags, for pages without React.
 // They render into the page itself (no shadow root), so the glass can blend with what is behind it.
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -33,4 +34,21 @@ define('glass-nav', mountGlassNav, (el) => ({
   onSelect: (index) => { el.setAttribute('active', index); send(el, 'select', { index }); }
 }));
 
-export { mountLike, mountMagnet, mountGlassNav };
+// the card fills the tag: a block, 100% wide (at least 300px, so a shrink-to-fit parent can't fold it) and 480px tall
+// unless the page sizes it (zero specificity, so any rule wins). Each turn bubbles up from inside as a "cardturn"
+// event, with e.detail.face.
+define('iridescent-card', (el, o) => {
+  css('craft-card-host', ':where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}');
+  return mountIridescentCard(el, o);
+}, (el) => ({
+  name: el.getAttribute('name') || undefined,
+  number: el.getAttribute('number') || undefined,
+  expiry: el.getAttribute('expiry') || undefined,
+  cvv: el.getAttribute('cvv') || undefined,
+  logo: el.getAttribute('logo') || undefined,
+  size: el.getAttribute('size') ? +el.getAttribute('size') : undefined,
+  entrance: el.getAttribute('entrance') === 'false' ? false : undefined,
+  label: el.getAttribute('label') || undefined
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };

package/dist/index.js

@@ -4,6 +4,7 @@ import { createElement, useEffect, useRef } from 'react';
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -40,4 +41,17 @@ export function GlassNav({ active = 2, labels, label, onSelect, className, style
   return createElement('span', { ref: host, className, style });
 }
 
-export { mountLike, mountMagnet, mountGlassNav };
+// The card fills the box it renders (100% wide and `height` tall, 480px by default) and sits centred in it. The box
+// keeps at least 300px of width, so a parent that shrinks to its content (a centring flex row) can't fold it to nothing.
+// It loads its 3D scene (three.js) the first time it mounts. onTurn reports each turn with the face now showing.
+export function IridescentCard({ height = 480, size, name, number, expiry, cvv, logo, entrance, label, onTurn, className, style }) {
+  const host = useRef(null), turn = useLatest(onTurn);
+  const num = Array.isArray(number) ? number.join(' ') : number;
+  useEffect(() => {
+    const m = mountIridescentCard(host.current, { size, name, number: num, expiry, cvv, logo, entrance, label, onTurn: (f) => turn.current && turn.current(f) });
+    return () => m.destroy();
+  }, [size, name, num, expiry, cvv, logo, entrance, label]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 300, height, ...style } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "craft-library",
-  "version": "0.1.3",
-  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart and a magnetic icon, for React or plain HTML",
+  "version": "0.2.0",
+  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart, a magnetic icon and an iridescent 3D card, for React or plain HTML",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -41,9 +41,15 @@
     "animation",
     "micro-interaction",
     "navbar",
-    "like-button"
+    "like-button",
+    "3d",
+    "three",
+    "credit-card"
   ],
   "author": "Sara Lobo",
   "license": "MIT",
-  "homepage": "https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR"
+  "homepage": "https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR",
+  "dependencies": {
+    "three": "0.169.0"
+  }
 }