@lacspace/logo 1.2.0 → 1.2.2

package/dist/index.cjs

@@ -370,19 +370,48 @@ function resolveSeed(seed, fallback) {
 }
 
 // src/text.ts
-var NARROW = new Set("iIl.,:;'|!ftrj()[]{} ".split(""));
-var WIDE = new Set("mwMW@%".split(""));
-var CAPS = new Set("ABCDEFGHKNOQRSUVXYZ".split(""));
+var ADVANCE = {
+  " ": 0.3,
+  i: 0.29,
+  j: 0.29,
+  l: 0.29,
+  I: 0.34,
+  ".": 0.3,
+  ",": 0.3,
+  ":": 0.3,
+  ";": 0.3,
+  "'": 0.24,
+  "!": 0.32,
+  "|": 0.26,
+  "(": 0.36,
+  ")": 0.36,
+  "[": 0.36,
+  "]": 0.36,
+  "{": 0.36,
+  "}": 0.36,
+  "-": 0.4,
+  "/": 0.4,
+  f: 0.38,
+  t: 0.4,
+  r: 0.44,
+  J: 0.5,
+  m: 0.92,
+  w: 0.86,
+  M: 0.98,
+  W: 0.98,
+  "@": 1,
+  "%": 0.95
+};
 function estimateTextWidth(text, fontSize, tracking = 0) {
   let em = 0;
   for (const ch of text) {
-    if (ch === " ") em += 0.3;
-    else if (NARROW.has(ch)) em += 0.3;
-    else if (WIDE.has(ch)) em += 0.92;
-    else if (CAPS.has(ch)) em += 0.7;
-    else em += 0.56;
+    const a = ADVANCE[ch];
+    if (a !== void 0) em += a;
+    else if (ch >= "A" && ch <= "Z") em += 0.72;
+    else if (ch >= "0" && ch <= "9") em += 0.58;
+    else em += 0.55;
   }
-  return em * fontSize + Math.max(0, text.length - 1) * tracking;
+  return em * fontSize * 1.04 + Math.max(0, text.length - 1) * tracking;
 }
 function initials(name, max = 2) {
   const words = name.replace(/[^\p{L}\p{N}\s]/gu, " ").split(/\s+/).filter(Boolean);
@@ -625,11 +654,12 @@ function fontImport(font) {
 function inkColor(spec) {
   return spec.background === "transparent" ? spec.palette.primary : spec.palette.on;
 }
-function wordmarkEl(spec, x, y, fontSize, anchor) {
+function wordmarkEl(spec, x, y, fontSize, anchor, textLen) {
   const isLuxe = spec.font.mood.includes("luxe") || spec.font.mood.includes("elegant");
   const tracking = isLuxe ? fontSize * 0.04 : 0;
   const ls = tracking ? ` letter-spacing="${nn2(tracking)}"` : "";
-  return `<text x="${nn2(x)}" y="${nn2(y)}" font-family="${spec.font.stack}" font-weight="${spec.font.weight}" font-size="${nn2(fontSize)}" fill="${inkColor(spec)}" text-anchor="${anchor}" dominant-baseline="middle"${ls}>${esc(spec.name)}</text>`;
+  const tl = textLen ? ` textLength="${nn2(textLen)}" lengthAdjust="spacingAndGlyphs"` : "";
+  return `<text x="${nn2(x)}" y="${nn2(y)}" font-family="${spec.font.stack}" font-weight="${spec.font.weight}" font-size="${nn2(fontSize)}" fill="${inkColor(spec)}" text-anchor="${anchor}" dominant-baseline="middle"${ls}${tl}>${esc(spec.name)}</text>`;
 }
 function background(spec, w, h, defsId) {
   if (spec.background === "transparent") return "";
@@ -657,7 +687,7 @@ function compose(spec, mark) {
     const w2 = Math.round(tw2 + pad * 2);
     const h2 = Math.round(fontSize2 * 1.5);
     const tick = `<rect x="${pad - Math.round(spec.size * 0.03)}" y="${Math.round(h2 / 2 - fontSize2 * 0.36)}" width="${Math.round(spec.size * 0.014)}" height="${Math.round(fontSize2 * 0.72)}" rx="2" fill="${spec.palette.primary}"/>`;
-    const body2 = tick + wordmarkEl(spec, pad, h2 / 2, fontSize2, "start");
+    const body2 = tick + wordmarkEl(spec, pad, h2 / 2, fontSize2, "start", tw2);
     return { svg: wrapSvg(spec, w2, h2, defs, body2), width: w2, height: h2 };
   }
   if (spec.layout === "icon-top" || spec.layout === "stacked") {
@@ -668,7 +698,7 @@ function compose(spec, mark) {
     const w2 = Math.round(Math.max(markSize2, tw2) + pad * 2);
     const h2 = Math.round(markSize2 + gap2 + fontSize2 * 1.3 + pad);
     const markX = (w2 - markSize2) / 2;
-    const body2 = `<g transform="translate(${nn2(markX)} ${pad})">${mark.svg}</g>` + wordmarkEl(spec, w2 / 2, pad + markSize2 + gap2 + fontSize2 * 0.5, fontSize2, "middle");
+    const body2 = `<g transform="translate(${nn2(markX)} ${pad})">${mark.svg}</g>` + wordmarkEl(spec, w2 / 2, pad + markSize2 + gap2 + fontSize2 * 0.5, fontSize2, "middle", tw2);
     return { svg: wrapSvg(spec, w2, h2, defs, body2), width: w2, height: h2 };
   }
   const markSize = spec.size;
@@ -677,7 +707,7 @@ function compose(spec, mark) {
   const tw = estimateTextWidth(spec.name, fontSize, spec.font.mood.includes("luxe") ? fontSize * 0.04 : 0);
   const w = Math.round(markSize + gap + tw + pad * 2);
   const h = Math.round(markSize + pad * 2);
-  const body = `<g transform="translate(${pad} ${pad})">${mark.svg}</g>` + wordmarkEl(spec, pad + markSize + gap, h / 2, fontSize, "start");
+  const body = `<g transform="translate(${pad} ${pad})">${mark.svg}</g>` + wordmarkEl(spec, pad + markSize + gap, h / 2, fontSize, "start", tw);
   return { svg: wrapSvg(spec, w, h, defs, body), width: w, height: h };
 }
 
@@ -866,12 +896,11 @@ function animateLogo(input, opts = {}) {
   const dur = opts.duration ?? 1500;
   const iter = opts.loop ? "infinite" : "1";
   const shimmer = opts.shimmer !== false;
-  const style = `<style>@keyframes lac-in{0%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}@keyframes lac-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes lac-shim{0%{transform:translateX(${(-w * 0.6).toFixed(0)}px) skewX(-16deg)}55%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}100%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}}.lac-root{transform-origin:50% 50%;animation:lac-in ${dur}ms cubic-bezier(.2,.75,.2,1) ${iter} both,lac-wipe ${Math.round(dur * 0.7)}ms cubic-bezier(.4,0,.2,1) ${iter} both}.lac-shim{animation:lac-shim ${Math.round(dur * 1.25)}ms ease ${iter} both;mix-blend-mode:overlay}@media(prefers-reduced-motion:reduce){.lac-root{animation:none;clip-path:none}.lac-shim{display:none}}</style>`;
+  const style = `<style>@keyframes lac-in{0%{opacity:0;transform:translateY(${Math.round(h * 0.03)}px) scale(.9)}55%{opacity:1}100%{opacity:1;transform:none}}@keyframes lac-shim{0%{transform:translateX(${(-w * 0.55).toFixed(0)}px) skewX(-14deg)}50%,100%{transform:translateX(${(w * 1.15).toFixed(0)}px) skewX(-14deg)}}.lac-in{transform-box:fill-box;transform-origin:center;animation:lac-in ${dur}ms cubic-bezier(.2,.8,.2,1) ${iter} both}.lac-shim{transform-box:fill-box;transform-origin:center;opacity:.9;mix-blend-mode:overlay;animation:lac-shim ${Math.round(dur * 1.2)}ms ease ${Math.round(dur * 0.35)}ms ${iter} both}@media(prefers-reduced-motion:reduce){.lac-in{animation:none;opacity:1;transform:none}.lac-shim{display:none}}</style>`;
   const shimDefs = shimmer ? `<linearGradient id="lac-shim-g" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".55"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>` : "";
   const shimRect = shimmer ? `<rect class="lac-shim" x="0" y="0" width="${(w * 0.4).toFixed(0)}" height="${h}" fill="url(#lac-shim-g)"/>` : "";
-  let svg = result.svg.replace(/^<svg /, `<svg class="lac-root" `);
-  svg = svg.replace(/(<svg\b[^>]*>)/, `$1${style}<defs>${shimDefs}</defs>`);
-  svg = svg.replace(/<\/svg>\s*$/, `${shimRect}</svg>`);
+  let svg = result.svg.replace(/(<svg\b[^>]*>)/, `$1${style}<defs>${shimDefs}</defs><g class="lac-in">`);
+  svg = svg.replace(/<\/svg>\s*$/, `</g>${shimRect}</svg>`);
   return svg;
 }