@getv.design/embed 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,2 +1,2 @@
-/*! @getv.design/embed v0.1.1. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
-import{a as y}from"./chunks/chunk-BBJ6N4ZS.js";import"./chunks/chunk-Q6QQ2HGJ.js";var d=["view","edit","play"];async function l(a,i,e){let o=e?.mode;if(!d.includes(o))throw new TypeError(`mount: mode must be one of ${d.join(", ")}; got ${String(o)}.`);if(o==="edit"){let{edit:t}=await import("./edit.js");return t(a,i,e)}let{view:s}=await import("./view.js"),n=await s(a,i,e);if(o==="view")return n;let r;try{r=await n.play(e.page===void 0?{}:{page:e.page})}catch(t){throw n.destroy(),t}return{goTo:t=>r.goTo(t),destroy(){r.destroy(),n.destroy()}}}export{l as mount,y as version};
+/*! @getv.design/embed v0.1.3. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
+import{a as y}from"./chunks/chunk-ETXF3NVH.js";import"./chunks/chunk-FGXZYG3Y.js";var d=["view","edit","play"];async function l(a,i,e){let o=e?.mode;if(!d.includes(o))throw new TypeError(`mount: mode must be one of ${d.join(", ")}; got ${String(o)}.`);if(o==="edit"){let{edit:t}=await import("./edit.js");return t(a,i,e)}let{view:s}=await import("./view.js"),n=await s(a,i,e);if(o==="view")return n;let r;try{r=await n.play(e.page===void 0?{}:{page:e.page})}catch(t){throw n.destroy(),t}return{goTo:t=>r.goTo(t),destroy(){r.destroy(),n.destroy()}}}export{l as mount,y as version};

package/dist/static.js

@@ -1,2 +1,2 @@
-/*! @getv.design/embed v0.1.1. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
-import{a as g,c as h,e as b,f as v,g as f}from"./chunks/chunk-2H24PH2F.js";import{a as P,b as l}from"./chunks/chunk-BBJ6N4ZS.js";import{j as d,x as m}from"./chunks/chunk-QFL2QGB3.js";import"./chunks/chunk-Q6QQ2HGJ.js";function A(e){return g(e)}async function F(e,t={}){let o=t.fonts??"approximate";if(!S.includes(o))throw new TypeError(`renderSvg: fonts must be one of ${S.join(", ")}; got ${String(o)}.`);let n=o==="exact"?v(t.fontBase,w()):void 0,{document:c,blocks:x,problems:y}=await h(e),u=t.page===void 0?c:O(c,t.page),p=s=>{let r=x.get(s.hash);return r===void 0?void 0:d(s.type,r)},i=[...y],a;if(o==="exact")if(n===void 0)i.push(f([],"no fontBase was given and this build has no default"));else{let{exactSvg:s}=await import("./chunks/fonts.js"),r=await s(u,{base:n,resolveAsset:p});"svg"in r?a=r.svg:i.push(f(r.failures))}return a??=m(u,{ids:!1,resolveAsset:p}),t.onProblems?.(i),a}var S=["approximate","exact"];function w(){let e=import.meta.url,o=typeof globalThis.process?.getBuiltinModule=="function";return e.startsWith("file:")&&o?new URL("../fonts/",e).href:l}function O(e,t){let o=b(e,t);return{...e,root:{...e.root,children:e.root.children.map(n=>n===o?n:{...n,hidden:!0})}}}export{A as parse,F as renderSvg,P as version};
+/*! @getv.design/embed v0.1.3. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
+import{a as g,c as h,e as b,f as v,g as f}from"./chunks/chunk-3XUNDFDN.js";import{a as P,b as l}from"./chunks/chunk-ETXF3NVH.js";import{j as d,x as m}from"./chunks/chunk-KODHLOJV.js";import"./chunks/chunk-FGXZYG3Y.js";function A(e){return g(e)}async function F(e,t={}){let o=t.fonts??"approximate";if(!S.includes(o))throw new TypeError(`renderSvg: fonts must be one of ${S.join(", ")}; got ${String(o)}.`);let n=o==="exact"?v(t.fontBase,w()):void 0,{document:c,blocks:x,problems:y}=await h(e),u=t.page===void 0?c:O(c,t.page),p=s=>{let r=x.get(s.hash);return r===void 0?void 0:d(s.type,r)},i=[...y],a;if(o==="exact")if(n===void 0)i.push(f([],"no fontBase was given and this build has no default"));else{let{exactSvg:s}=await import("./chunks/fonts.js"),r=await s(u,{base:n,resolveAsset:p});"svg"in r?a=r.svg:i.push(f(r.failures))}return a??=m(u,{ids:!1,resolveAsset:p}),t.onProblems?.(i),a}var S=["approximate","exact"];function w(){let e=import.meta.url,o=typeof globalThis.process?.getBuiltinModule=="function";return e.startsWith("file:")&&o?new URL("../fonts/",e).href:l}function O(e,t){let o=b(e,t);return{...e,root:{...e.root,children:e.root.children.map(n=>n===o?n:{...n,hidden:!0})}}}export{A as parse,F as renderSvg,P as version};

package/dist/view.js

@@ -1,5 +1,5 @@
-/*! @getv.design/embed v0.1.1. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
-import{b as Qe,c as Ae,d as ee,e as ue,f as et,g as ye}from"./chunks/chunk-2H24PH2F.js";import{a as Ft,b as Re}from"./chunks/chunk-BBJ6N4ZS.js";import{a as Ve,b as $e,c as ge,d as Se,e as He,f as Be,g as je,h as Ue,j as We,k as Ke,m as Ee,n as me,o as Ge,p as ke,s as Ye,t as Ze,u as qe,v as Xe,w as Je}from"./chunks/chunk-QFL2QGB3.js";import"./chunks/chunk-Q6QQ2HGJ.js";var It=.8,Nt=.2;function Oe(e,t){let i=e.createElement("canvas").getContext("2d"),n=Ge(),l=new Map,c=new Map,m=new Set;function u(f){return`${f.italic?"italic ":""}${f.weight} ${f.size}px ${f.family}`}function y(){l.clear(),c.clear()}return{advance(f,p){if(!i)return n.advance(f,p);let A=u(p),S=`${A}\0${p.letterSpacing}\0${f}`,E=l.get(S);if(E!==void 0)return E;i.font=A;let x=i.measureText(f).width+p.letterSpacing*[...f].length;return l.set(S,x),x},metrics(f){if(!i)return n.metrics(f);let p=u(f),A=c.get(p);if(A)return A;i.font=p;let S=i.measureText("Hxg"),E=S.fontBoundingBoxAscent??f.size*It,x=S.fontBoundingBoxDescent??f.size*Nt,C={ascent:E,descent:x,lineGap:0};return c.set(p,C),C},load(f,p){let A=e.fonts;if(!A||typeof FontFace!="function")return!1;let S=!1;for(let E of Object.values(f.fonts))for(let x of zt(E)){let C=`${E.family}\0${x.src}\0${x.weight??400}\0${x.style??"normal"}`;if(m.has(C))continue;m.add(C);let O=x.src.startsWith("data:")?void 0:p?.(x.src),_={weight:String(x.weight??400),style:x.style??"normal"},N=$=>{let P=new FontFace(E.family,typeof $=="string"?`url(${$})`:Rt($),_);A.add(P),P.load().then(()=>{y(),t?.()},()=>{A.delete(P)})};O===void 0?N(x.src):(S=!0,O.then(N,()=>{}))}return S},invalidate:y,destroy(){y(),m.clear()}}}function zt(e){return e.faces??[]}function Rt(e){return e instanceof Uint8Array?e.buffer.slice(e.byteOffset,e.byteOffset+e.byteLength):e}var we={x:0,y:0,zoom:1},tt=.02,nt=64;function Me(e){return Number.isFinite(e)?Math.min(Math.max(e,tt),nt):1}function ve(e,t){return{x:(t.x-e.x)/e.zoom,y:(t.y-e.y)/e.zoom}}function Te(e,t){return{x:t.x*e.zoom+e.x,y:t.y*e.zoom+e.y}}function xe(e,t,r){let i=Me(e.zoom*r),n=ve(e,t);return{zoom:i,x:t.x-n.x*i,y:t.y-n.y*i}}function fe(e,t,r){return{...e,x:e.x+t,y:e.y+r}}function _e(e){return`translate(${e.x} ${e.y}) scale(${e.zoom})`}function oe(e,t,r){let i={width:Math.max(1,t.width-r*2),height:Math.max(1,t.height-r*2)};if(e.width<=0||e.height<=0)return we;let n=Me(Math.min(i.width/e.width,i.height/e.height));return{zoom:n,x:(t.width-e.width*n)/2-(e.x??0)*n,y:(t.height-e.height*n)/2-(e.y??0)*n}}var j="http://www.w3.org/2000/svg",rt="vd-viewer-styles",it=`
+/*! @getv.design/embed v0.1.3. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
+import{b as Qe,c as Ae,d as ee,e as ue,f as et,g as ye}from"./chunks/chunk-3XUNDFDN.js";import{a as Ft,b as Re}from"./chunks/chunk-ETXF3NVH.js";import{a as Ve,b as $e,c as ge,d as Se,e as He,f as Be,g as je,h as Ue,j as We,k as Ke,m as Ee,n as me,o as Ge,p as ke,s as Ye,t as Ze,u as qe,v as Xe,w as Je}from"./chunks/chunk-KODHLOJV.js";import"./chunks/chunk-FGXZYG3Y.js";var It=.8,Nt=.2;function Oe(e,t){let i=e.createElement("canvas").getContext("2d"),n=Ge(),l=new Map,c=new Map,m=new Set;function u(f){return`${f.italic?"italic ":""}${f.weight} ${f.size}px ${f.family}`}function y(){l.clear(),c.clear()}return{advance(f,p){if(!i)return n.advance(f,p);let A=u(p),S=`${A}\0${p.letterSpacing}\0${f}`,E=l.get(S);if(E!==void 0)return E;i.font=A;let x=i.measureText(f).width+p.letterSpacing*[...f].length;return l.set(S,x),x},metrics(f){if(!i)return n.metrics(f);let p=u(f),A=c.get(p);if(A)return A;i.font=p;let S=i.measureText("Hxg"),E=S.fontBoundingBoxAscent??f.size*It,x=S.fontBoundingBoxDescent??f.size*Nt,C={ascent:E,descent:x,lineGap:0};return c.set(p,C),C},load(f,p){let A=e.fonts;if(!A||typeof FontFace!="function")return!1;let S=!1;for(let E of Object.values(f.fonts))for(let x of zt(E)){let C=`${E.family}\0${x.src}\0${x.weight??400}\0${x.style??"normal"}`;if(m.has(C))continue;m.add(C);let O=x.src.startsWith("data:")?void 0:p?.(x.src),_={weight:String(x.weight??400),style:x.style??"normal"},N=$=>{let P=new FontFace(E.family,typeof $=="string"?`url(${$})`:Rt($),_);A.add(P),P.load().then(()=>{y(),t?.()},()=>{A.delete(P)})};O===void 0?N(x.src):(S=!0,O.then(N,()=>{}))}return S},invalidate:y,destroy(){y(),m.clear()}}}function zt(e){return e.faces??[]}function Rt(e){return e instanceof Uint8Array?e.buffer.slice(e.byteOffset,e.byteOffset+e.byteLength):e}var we={x:0,y:0,zoom:1},tt=.02,nt=64;function Me(e){return Number.isFinite(e)?Math.min(Math.max(e,tt),nt):1}function ve(e,t){return{x:(t.x-e.x)/e.zoom,y:(t.y-e.y)/e.zoom}}function Te(e,t){return{x:t.x*e.zoom+e.x,y:t.y*e.zoom+e.y}}function xe(e,t,r){let i=Me(e.zoom*r),n=ve(e,t);return{zoom:i,x:t.x-n.x*i,y:t.y-n.y*i}}function fe(e,t,r){return{...e,x:e.x+t,y:e.y+r}}function _e(e){return`translate(${e.x} ${e.y}) scale(${e.zoom})`}function oe(e,t,r){let i={width:Math.max(1,t.width-r*2),height:Math.max(1,t.height-r*2)};if(e.width<=0||e.height<=0)return we;let n=Me(Math.min(i.width/e.width,i.height/e.height));return{zoom:n,x:(t.width-e.width*n)/2-(e.x??0)*n,y:(t.height-e.height*n)/2-(e.y??0)*n}}var j="http://www.w3.org/2000/svg",rt="vd-viewer-styles",it=`
 .vd-viewer {
   position: relative;
   overflow: hidden;

package/edit.css

@@ -617,6 +617,256 @@
   }
 }
 
+/* --- thumbnail strip ------------------------------------------------------ */
+
+/*
+ * One row under the canvas (strip.ts). The height is STRIP_HEIGHT in
+ * strip-model.ts — 12 above, a 64 tile, 6, a 14 caption, 8 below — and the
+ * host shifts the camera by half of it, so change both or neither.
+ */
+.vd-strip {
+  box-sizing: border-box;
+  /* The drop line and the context menu are placed against it. */
+  position: relative;
+  display: flex;
+  flex: 0 0 104px;
+  height: 104px;
+  min-width: 0;
+  border-top: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  background: var(--vd-strip-bg, #ffffff);
+  color: var(--vd-ink, #1a1a1f);
+  font-family: var(--vd-font, system-ui, -apple-system, sans-serif);
+}
+
+.vd-strip__list {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 11px 16px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  outline: none;
+  scrollbar-width: thin;
+  /* A tile scrolled into view lands clear of the edge, outline and all. */
+  scroll-padding-inline: 16px;
+}
+
+.vd-strip__list[hidden],
+.vd-strip__blank[hidden],
+.vd-strip__drop[hidden] {
+  display: none;
+}
+
+/* No frames: what the strip is for, and the way to start one. */
+.vd-strip__blank {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 0 16px;
+}
+
+.vd-strip__empty {
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-strip__add {
+  flex: 0 0 auto;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--vd-rule, rgb(0 0 0 / 0.12));
+  border-radius: 6px;
+  background: none;
+  color: var(--vd-ink, #1a1a1f);
+  font: inherit;
+  font-size: 12px;
+  cursor: default;
+}
+
+.vd-strip__add:hover {
+  background: var(--vd-row-hover, rgb(0 0 0 / 0.06));
+}
+
+.vd-strip__add:focus-visible {
+  outline: 2px solid var(--vd-focus, var(--vd-accent, #3b82f6));
+  outline-offset: 2px;
+}
+
+/* Where a dragged tile lands: a line in the gap, the tile's height, level
+   with the pictures (the list's 11 px top padding). */
+.vd-strip__drop {
+  position: absolute;
+  top: 11px;
+  width: 2px;
+  height: 64px;
+  border-radius: 1px;
+  background: var(--vd-chosen, var(--vd-accent, #3b82f6));
+  pointer-events: none;
+}
+
+/* The tiles being dragged stay in place, faded, until the drop moves them. */
+.vd-strip__tile[data-dragging='true'] {
+  opacity: 0.35;
+}
+
+.vd-strip--dragging,
+.vd-strip--dragging * {
+  cursor: grabbing;
+}
+
+/* The picture under the pointer while dragging, with a count for several. */
+.vd-strip__ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.vd-strip__ghost .vd-strip__thumb {
+  outline: 2px solid var(--vd-chosen, var(--vd-accent, #3b82f6));
+  outline-offset: 1px;
+}
+
+.vd-strip__count {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 9px;
+  background: var(--vd-chosen, var(--vd-accent, #3b82f6));
+  color: var(--vd-on-chosen, #ffffff);
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+}
+
+/* Read by a screen reader, never seen. */
+.vd-strip__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The menu opens up over the canvas, so it sits above the canvas's chrome. */
+.vd-strip > .vd-menu {
+  z-index: 10;
+}
+
+.vd-strip__tile {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 6px;
+  cursor: default;
+  user-select: none;
+}
+
+.vd-strip__well {
+  display: flex;
+  align-items: center;
+  /* Left, so a narrow picture lines up with its number under it. */
+  justify-content: flex-start;
+  height: 64px;
+}
+
+.vd-strip__thumb {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 4px;
+  /* Its own variable, not the strip's rule: a dark slide on a dark strip
+     needs a stronger edge than a panel's hairline to be told apart. */
+  outline: 1px solid var(--vd-thumb-rule, var(--vd-rule, rgb(0 0 0 / 0.12)));
+  outline-offset: -1px;
+  background: var(--vd-thumb-bg, #f2f2f2);
+}
+
+.vd-strip__thumb svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* As on the canvas: text was measured against real faces, and drawn with
+     every space it was measured with. */
+  font-synthesis: none;
+}
+
+.vd-strip__thumb text {
+  white-space: pre;
+}
+
+.vd-strip__tile:hover .vd-strip__thumb {
+  outline-color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+/* Current: Ink in light, lime in dark, as a chosen card is. */
+.vd-strip__tile[aria-selected='true'] .vd-strip__thumb {
+  outline: 2px solid var(--vd-chosen, var(--vd-accent, #3b82f6));
+  outline-offset: 1px;
+}
+
+/* The keyboard's tile: a ring outside the current outline, so the two read
+   apart when they are on different tiles and stack when they are on one. */
+.vd-strip__list:focus-visible .vd-strip__tile[data-active='true'] .vd-strip__thumb {
+  box-shadow:
+    0 0 0 5px var(--vd-strip-bg, #ffffff),
+    0 0 0 7px var(--vd-focus, var(--vd-accent, #3b82f6));
+}
+
+.vd-strip__tile[data-state='hidden'] .vd-strip__thumb {
+  opacity: 0.4;
+}
+
+.vd-strip__caption {
+  display: flex;
+  align-items: center;
+  height: 14px;
+  overflow: hidden;
+  font-family: var(--vd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  line-height: 14px;
+  white-space: nowrap;
+  color: var(--vd-muted, rgb(0 0 0 / 0.55));
+}
+
+.vd-strip__tile[aria-selected='true'] .vd-strip__caption {
+  color: var(--vd-ink, #1a1a1f);
+}
+
+.vd-strip__tag {
+  padding: 0 4px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+.vd-strip__icon {
+  display: grid;
+  place-items: center;
+}
+
+.vd-strip__icon svg {
+  width: 12px;
+  height: 12px;
+}
+
 /* --- inspector ------------------------------------------------------------ */
 
 .vd-inspector {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getv.design/embed",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Render, present and edit vDesign (.vd) documents in any web page. Free to use.",
   "license": "SEE LICENSE IN LICENSE",
   "author": {

package/dist/chunks/chunk-BBJ6N4ZS.js

@@ -1,2 +0,0 @@
-/*! @getv.design/embed v0.1.1. Free to use under the vDesign Embed Licence. © 2026 Sagar Saini. https://getv.design/docs/licence/ */
-var _="0.1.1",e="https://cdn.jsdelivr.net/npm/@getv.design/embed@0.1.1/fonts/";export{_ as a,e as b};