@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/brand/generate.js

@@ -0,0 +1,409 @@
+import { findGlyph, GLYPH_IDS } from "./glyphs.js";
+import { getInitials } from "./initials.js";
+import {
+  BRAND_PALETTES,
+  contentColor,
+  findPalette,
+  safeColor
+} from "./palettes.js";
+import { createRng, hashString, pick } from "./rng.js";
+const MARK_SHAPES = [
+  "circle",
+  "squircle",
+  "shield",
+  "hexagon",
+  "badge",
+  "ribbon",
+  "none"
+];
+const MARK_LAYOUTS = ["icon", "horizontal", "stacked"];
+const MARK_FILLS = ["solid", "gradient", "outline"];
+const FONT_STACK = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+const num = (n) => Number(n.toFixed(2));
+function badgePath() {
+  const points = [];
+  for (let i = 0; i < 32; i += 1) {
+    const radius = i % 2 === 0 ? 47 : 41.5;
+    const angle = Math.PI * 2 * i / 32 - Math.PI / 2;
+    points.push(`${num(50 + radius * Math.cos(angle))} ${num(50 + radius * Math.sin(angle))}`);
+  }
+  return `M${points.join("L")}Z`;
+}
+const SHAPE_PATHS = {
+  circle: "M50 4a46 46 0 1 0 0 92a46 46 0 1 0 0-92Z",
+  squircle: "M50 4C82 4 96 18 96 50S82 96 50 96 4 82 4 50 18 4 50 4Z",
+  shield: "M50 4L90 16V48C90 72 72 88 50 96C28 88 10 72 10 48V16Z",
+  hexagon: "M50 4L90 27V73L50 96L10 73V27Z",
+  badge: badgePath(),
+  ribbon: "M10 6H90V94L50 76L10 94Z"
+};
+const CONTENT_Y = {
+  circle: 50,
+  squircle: 50,
+  shield: 46,
+  hexagon: 50,
+  badge: 50,
+  ribbon: 42,
+  none: 50
+};
+function stripInvalidXml(value) {
+  let out = "";
+  for (const char of value) {
+    const code = char.codePointAt(0) ?? 0;
+    const control = code < 32 && code !== 9 && code !== 10 && code !== 13;
+    if (!control && code !== 65534 && code !== 65535) out += char;
+  }
+  return out;
+}
+function escapeXml(value) {
+  return stripInvalidXml(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function resolvePalette(palette) {
+  const base = typeof palette === "object" && palette !== null ? palette : findPalette(palette ?? "coral");
+  const fallback = findPalette("coral");
+  return {
+    id: base.id,
+    label: base.label,
+    primary: safeColor(base.primary, fallback.primary),
+    secondary: safeColor(base.secondary, fallback.secondary),
+    ink: safeColor(base.ink, fallback.ink)
+  };
+}
+function gradient(id, angle, from, to, extent) {
+  const rad = angle * Math.PI / 180;
+  const dx = Math.cos(rad) / 2;
+  const dy = Math.sin(rad) / 2;
+  const scale = extent ?? 1;
+  const attrs = {
+    id,
+    x1: num((0.5 - dx) * scale),
+    y1: num((0.5 - dy) * scale),
+    x2: num((0.5 + dx) * scale),
+    y2: num((0.5 + dy) * scale)
+  };
+  if (extent) attrs.gradientUnits = "userSpaceOnUse";
+  return {
+    tag: "linearGradient",
+    attrs,
+    children: [
+      { tag: "stop", attrs: { offset: 0, "stop-color": from } },
+      { tag: "stop", attrs: { offset: 1, "stop-color": to } }
+    ]
+  };
+}
+function resolveLook(options) {
+  const palette = resolvePalette(options.palette);
+  const seed = Math.trunc(options.seed ?? 0);
+  const rng = createRng(hashString(`${seed}:${options.name}`));
+  const angle = pick(rng, [135, 0, 45, 90, 180, 225, 270, 315]);
+  const tilt = pick(rng, [0, -8, -4, 4, 8]);
+  const ringRoll = rng();
+  const swap = rng() < 0.5;
+  const varied = seed !== 0;
+  return {
+    palette,
+    shape: options.shape ?? "circle",
+    fill: options.fill ?? "solid",
+    angle: varied ? angle : 135,
+    tilt: varied ? tilt : 0,
+    ring: options.ring ?? (varied && ringRoll < 0.4),
+    from: varied && swap ? palette.secondary : palette.primary,
+    to: varied && swap ? palette.primary : palette.secondary
+  };
+}
+function buildIcon(options, look, gid) {
+  const { palette, shape, fill, from, to } = look;
+  const defs = [];
+  const nodes = [];
+  const hasShape = shape !== "none";
+  const gradientFill = fill === "gradient";
+  if (gradientFill) defs.push(gradient(gid, look.angle, from, to));
+  const filled = fill !== "outline";
+  const content = hasShape && filled ? contentColor(gradientFill ? [from, to] : [palette.primary], palette.ink) : null;
+  if (hasShape) {
+    const d = SHAPE_PATHS[shape];
+    nodes.push(
+      filled ? { tag: "path", attrs: { d, fill: gradientFill ? `url(#${gid})` : palette.primary } } : {
+        tag: "path",
+        attrs: {
+          d,
+          fill: "none",
+          stroke: palette.primary,
+          "stroke-width": 5,
+          "stroke-linejoin": "round"
+        }
+      }
+    );
+    if (look.ring) {
+      nodes.push({
+        tag: "path",
+        attrs: {
+          d,
+          transform: "translate(9 9) scale(.82)",
+          fill: "none",
+          stroke: content ?? palette.primary,
+          "stroke-width": 2.4,
+          "stroke-opacity": 0.55,
+          "stroke-linejoin": "round"
+        }
+      });
+    }
+  }
+  const cy = CONTENT_Y[shape];
+  const monogram = options.monogram ?? "initials";
+  const count = options.initialsCount ?? 2;
+  const letters = (options.initials ?? getInitials(options.name, count)).slice(0, 3);
+  const useGlyph = monogram === "glyph" || letters.length === 0;
+  const glyph = findGlyph(
+    options.glyph ?? (useGlyph && monogram === "initials" ? "star" : GLYPH_IDS[0])
+  );
+  const plain = content ?? palette.primary;
+  if (useGlyph) {
+    const size = hasShape ? 50 : 76;
+    const scale = size / 24;
+    let paint = plain;
+    if (!hasShape && gradientFill) {
+      const gradId = `${gid}g`;
+      defs.push(gradient(gradId, look.angle, from, to, 24));
+      paint = `url(#${gradId})`;
+    }
+    const parts = glyph.parts.map(
+      (part) => part.kind === "fill" ? { tag: "path", attrs: { d: part.d, fill: paint } } : {
+        tag: "path",
+        attrs: {
+          d: part.d,
+          fill: "none",
+          stroke: paint,
+          "stroke-width": 2,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      }
+    );
+    nodes.push({
+      tag: "g",
+      attrs: {
+        transform: `translate(50 ${cy}) rotate(${look.tilt}) scale(${num(scale)}) translate(-12 -12)`
+      },
+      children: parts
+    });
+  } else {
+    const size = hasShape ? [54, 42, 32][letters.length - 1] : [80, 62, 46][letters.length - 1];
+    nodes.push({
+      tag: "text",
+      attrs: {
+        x: 50,
+        y: cy,
+        dy: "0.35em",
+        "text-anchor": "middle",
+        "font-family": FONT_STACK,
+        "font-size": size ?? 42,
+        "font-weight": 800,
+        "letter-spacing": letters.length > 1 ? "-0.02em" : "0",
+        transform: look.tilt ? `rotate(${look.tilt} 50 ${cy})` : void 0,
+        fill: !hasShape && gradientFill ? `url(#${gid})` : plain
+      },
+      text: letters
+    });
+  }
+  for (const node of nodes) {
+    if (node.attrs.transform === void 0) delete node.attrs.transform;
+  }
+  return { defs, nodes };
+}
+function textWidth(text, size, weight, tracking, upper) {
+  const factor = 0.56 + (weight - 400) / 400 * 0.08 + (upper ? 0.1 : 0);
+  return text.length * size * (factor + tracking);
+}
+function generateMark(options) {
+  const name = (options.name ?? "").trim().slice(0, 60);
+  const tagline = (options.tagline ?? "").trim().slice(0, 80);
+  const resolved = { ...options, name };
+  const look = resolveLook(resolved);
+  const layout = options.layout ?? "icon";
+  const gid = `lf${hashString(
+    JSON.stringify([
+      name,
+      look.shape,
+      look.fill,
+      look.palette,
+      look.angle,
+      look.tilt,
+      look.ring,
+      options.glyph,
+      options.monogram,
+      options.initials,
+      options.initialsCount
+    ])
+  ).toString(36)}`;
+  const icon = buildIcon(resolved, look, gid);
+  const wm = options.wordmark ?? {};
+  const weight = wm.weight ?? 700;
+  const tracking = Math.max(-0.05, Math.min(0.4, wm.tracking ?? 0.04));
+  const upper = wm.uppercase ?? true;
+  const shown = upper ? name.toLocaleUpperCase("es") : name;
+  const ink = safeColor(options.wordmarkColor, look.palette.ink);
+  const pad = options.background ? 14 : 0;
+  let width = 100;
+  let height = 100;
+  const body = [];
+  const iconGroup = { tag: "g", attrs: {}, children: icon.nodes };
+  const hasText = layout !== "icon" && shown.length > 0;
+  if (!hasText) {
+    body.push(iconGroup);
+  } else if (layout === "horizontal") {
+    const maxWidth = 280;
+    const natural = textWidth(shown, 30, weight, tracking, upper);
+    const size = Math.max(14, Math.min(30, 30 * maxWidth / natural));
+    const nameWidth = textWidth(shown, size, weight, tracking, upper);
+    const tagSize = Math.max(10, Math.min(13, size * 0.45));
+    const tagWidth = textWidth(tagline, tagSize, 500, 0.02, false);
+    const x = 100 + 18;
+    width = x + Math.max(nameWidth, tagWidth) + 6;
+    body.push(iconGroup, {
+      tag: "text",
+      attrs: {
+        x,
+        y: tagline ? 46 : 50,
+        dy: tagline ? "0" : "0.35em",
+        "font-family": FONT_STACK,
+        "font-size": num(size),
+        "font-weight": weight,
+        "letter-spacing": `${tracking}em`,
+        fill: ink
+      },
+      text: shown
+    });
+    if (tagline) {
+      body.push({
+        tag: "text",
+        attrs: {
+          x,
+          y: 46 + tagSize * 1.7,
+          "font-family": FONT_STACK,
+          "font-size": num(tagSize),
+          "font-weight": 500,
+          "letter-spacing": "0.02em",
+          fill: ink,
+          "fill-opacity": 0.72
+        },
+        text: tagline
+      });
+    }
+  } else {
+    const maxWidth = 300;
+    const natural = textWidth(shown, 28, weight, tracking, upper);
+    const size = Math.max(14, Math.min(28, 28 * maxWidth / natural));
+    const nameWidth = textWidth(shown, size, weight, tracking, upper);
+    const tagSize = Math.max(10, Math.min(13, size * 0.46));
+    const tagWidth = textWidth(tagline, tagSize, 500, 0.02, false);
+    width = Math.max(100, nameWidth, tagWidth) + 8;
+    const cx = width / 2;
+    const nameY = 100 + 14 + size / 2;
+    height = nameY + size / 2 + 4;
+    body.push(
+      { tag: "g", attrs: { transform: `translate(${num(cx - 50)} 0)` }, children: icon.nodes },
+      {
+        tag: "text",
+        attrs: {
+          x: num(cx + tracking * size / 2),
+          y: num(nameY),
+          dy: "0.35em",
+          "text-anchor": "middle",
+          "font-family": FONT_STACK,
+          "font-size": num(size),
+          "font-weight": weight,
+          "letter-spacing": `${tracking}em`,
+          fill: ink
+        },
+        text: shown
+      }
+    );
+    if (tagline) {
+      const tagY = nameY + size / 2 + 6 + tagSize / 2;
+      height = tagY + tagSize / 2 + 4;
+      body.push({
+        tag: "text",
+        attrs: {
+          x: num(cx),
+          y: num(tagY),
+          dy: "0.35em",
+          "text-anchor": "middle",
+          "font-family": FONT_STACK,
+          "font-size": num(tagSize),
+          "font-weight": 500,
+          "letter-spacing": "0.02em",
+          fill: ink,
+          "fill-opacity": 0.72
+        },
+        text: tagline
+      });
+    }
+  }
+  width = num(width + pad * 2);
+  height = num(height + pad * 2);
+  const label = tagline ? `${name} - ${tagline}` : name || "Logo";
+  const nodes = [{ tag: "title", attrs: {}, text: label }];
+  if (icon.defs.length > 0) nodes.push({ tag: "defs", attrs: {}, children: icon.defs });
+  if (options.background) {
+    nodes.push({
+      tag: "rect",
+      attrs: { width, height, rx: 10, fill: safeColor(options.background, "#ffffff") }
+    });
+  }
+  nodes.push(
+    pad ? { tag: "g", attrs: { transform: `translate(${pad} ${pad})` }, children: body } : { tag: "g", attrs: {}, children: body }
+  );
+  return { viewBox: `0 0 ${width} ${height}`, width, height, label, nodes };
+}
+const TAGS = /* @__PURE__ */ new Set([
+  "title",
+  "defs",
+  "linearGradient",
+  "stop",
+  "g",
+  "path",
+  "rect",
+  "text"
+]);
+const ATTR_NAME = /^[a-zA-Z][a-zA-Z0-9:-]*$/;
+function serializeNode(node) {
+  if (!TAGS.has(node.tag)) throw new Error(`Unsupported mark tag: ${node.tag}`);
+  const attrs = Object.entries(node.attrs).filter(([key, value]) => value !== void 0 && ATTR_NAME.test(key) && !/^on/i.test(key)).map(([key, value]) => ` ${key}="${escapeXml(String(value))}"`).join("");
+  const inner = (node.children ?? []).map(serializeNode).join("") + escapeXml(node.text ?? "");
+  return inner ? `<${node.tag}${attrs}>${inner}</${node.tag}>` : `<${node.tag}${attrs}/>`;
+}
+function serializeMark(mark) {
+  const nodes = mark.nodes.map(serializeNode).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${escapeXml(mark.viewBox)}" width="${mark.width}" height="${mark.height}" role="img" aria-label="${escapeXml(mark.label)}">${nodes}</svg>`;
+}
+const VARIATION_SHAPES = MARK_SHAPES.filter((s) => s !== "none");
+function generateVariations(base, count = 12, page = 0) {
+  const variants = [];
+  for (let i = 0; i < count; i += 1) {
+    const seed = page * count + i + 1;
+    const rng = createRng(hashString(`v${seed}:${base.name}`));
+    const fillRoll = rng();
+    variants.push({
+      ...base,
+      seed,
+      ring: void 0,
+      shape: rng() < 0.08 ? "none" : pick(rng, VARIATION_SHAPES),
+      monogram: rng() < 0.5 ? "initials" : "glyph",
+      glyph: pick(rng, GLYPH_IDS),
+      palette: pick(rng, BRAND_PALETTES).id,
+      fill: fillRoll < 0.4 ? "solid" : fillRoll < 0.8 ? "gradient" : "outline"
+    });
+  }
+  return variants;
+}
+export {
+  FONT_STACK,
+  MARK_FILLS,
+  MARK_LAYOUTS,
+  MARK_SHAPES,
+  escapeXml,
+  generateMark,
+  generateVariations,
+  serializeMark
+};

package/dist/brand/glyphs.d.ts

@@ -0,0 +1,16 @@
+export type GlyphId = "scissors" | "comb" | "razor" | "pole" | "star" | "leaf" | "bolt" | "crown" | "mustache";
+export interface GlyphPart {
+    d: string;
+    /** `fill` parts are solid; `stroke` parts are 2-unit round-capped lines. */
+    kind: "fill" | "stroke";
+}
+export interface Glyph {
+    id: GlyphId;
+    label: string;
+    /** Paths drawn in a 24 x 24 box. */
+    parts: GlyphPart[];
+}
+/** Our own simple geometric paths; no third-party icon data. */
+export declare const GLYPHS: readonly Glyph[];
+export declare const GLYPH_IDS: readonly GlyphId[];
+export declare function findGlyph(id: GlyphId): Glyph;

package/dist/brand/glyphs.js

@@ -0,0 +1,91 @@
+const GLYPHS = [
+  {
+    id: "scissors",
+    label: "Tijeras",
+    parts: [
+      { kind: "stroke", d: "M9 18a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z" },
+      { kind: "stroke", d: "M21 18a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z" },
+      { kind: "stroke", d: "M8.1 15.9L19 4" },
+      { kind: "stroke", d: "M15.9 15.9L5 4" }
+    ]
+  },
+  {
+    id: "comb",
+    label: "Peine",
+    parts: [
+      { kind: "fill", d: "M3 4h18v6H3z" },
+      { kind: "stroke", d: "M5 10v10M8.5 10v10M12 10v10M15.5 10v10M19 10v10" }
+    ]
+  },
+  {
+    id: "razor",
+    label: "Navaja",
+    parts: [
+      { kind: "fill", d: "M3 6h13l5 5H3z" },
+      { kind: "stroke", d: "M3 16h18" },
+      { kind: "stroke", d: "M3 20h10" }
+    ]
+  },
+  {
+    id: "pole",
+    label: "Poste",
+    parts: [
+      { kind: "fill", d: "M7 2h10v3H7z" },
+      { kind: "fill", d: "M7 19h10v3H7z" },
+      { kind: "stroke", d: "M8.5 5v14M15.5 5v14" },
+      { kind: "stroke", d: "M8.5 8.5l7-3M8.5 13.5l7-3M8.5 18.5l7-3" }
+    ]
+  },
+  {
+    id: "star",
+    label: "Estrella",
+    parts: [
+      {
+        kind: "fill",
+        d: "M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z"
+      }
+    ]
+  },
+  {
+    id: "leaf",
+    label: "Hoja",
+    parts: [
+      {
+        kind: "fill",
+        d: "M20 4C10 4 4 9 4 15c0 2 1 4 2.5 5C6 15 9 11 14 9c-4 3-6 6-6.5 11.5C16 20 20 13 20 4z"
+      }
+    ]
+  },
+  {
+    id: "bolt",
+    label: "Rayo",
+    parts: [{ kind: "fill", d: "M13 2L4 14h6l-1 8 9-12h-6z" }]
+  },
+  {
+    id: "crown",
+    label: "Corona",
+    parts: [
+      { kind: "fill", d: "M3 18l-1-11 5 4 5-7 5 7 5-4-1 11z" },
+      { kind: "fill", d: "M4 20h16v2H4z" }
+    ]
+  },
+  {
+    id: "mustache",
+    label: "Bigote",
+    parts: [
+      {
+        kind: "fill",
+        d: "M12 9.5C10 7.5 6 7.5 3 10c.5 4 5 6 9 3.5 4 2.5 8.5.5 9-3.5-3-2.5-7-2.5-9-.5z"
+      }
+    ]
+  }
+];
+const GLYPH_IDS = GLYPHS.map((g) => g.id);
+function findGlyph(id) {
+  return GLYPHS.find((g) => g.id === id) ?? GLYPHS[0];
+}
+export {
+  GLYPHS,
+  GLYPH_IDS,
+  findGlyph
+};

package/dist/brand/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./export.js";
+export * from "./generate.js";
+export * from "./glyphs.js";
+export * from "./initials.js";
+export * from "./logo-forge.js";
+export * from "./logo-mark.js";
+export * from "./palettes.js";
+export * from "./rng.js";

package/dist/brand/index.js

@@ -0,0 +1,8 @@
+export * from "./export.js";
+export * from "./generate.js";
+export * from "./glyphs.js";
+export * from "./initials.js";
+export * from "./logo-forge.js";
+export * from "./logo-mark.js";
+export * from "./palettes.js";
+export * from "./rng.js";

package/dist/brand/initials.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Initials of a business name: first letter of each significant word, accents removed
+ * (the Ñ is kept), articles and prepositions skipped. When the name has fewer words than
+ * `count`, the first word lends its next letters ("Don Lucho" with 3 gives "DLO").
+ */
+export declare function getInitials(name: string, count?: number): string;

package/dist/brand/initials.js

@@ -0,0 +1,41 @@
+const STOPWORDS = /* @__PURE__ */ new Set([
+  "de",
+  "del",
+  "la",
+  "las",
+  "los",
+  "el",
+  "y",
+  "e",
+  "the",
+  "of",
+  "and",
+  "&"
+]);
+function firstLetter(word) {
+  const first = [...word.normalize("NFC")][0] ?? "";
+  if (first.toLowerCase() === "\xF1") return "\xD1";
+  return (first.normalize("NFD")[0] ?? "").toLocaleUpperCase("es");
+}
+function stripMarks(word) {
+  return [...word.normalize("NFC")].map(
+    (char) => char.toLowerCase() === "\xF1" ? char : char.normalize("NFD").replace(/\p{M}/gu, "")
+  ).join("");
+}
+function getInitials(name, count = 2) {
+  const limit = Math.max(1, Math.min(3, Math.floor(count)));
+  const words = name.split(/[^\p{L}\p{N}]+/u).filter(Boolean);
+  const significant = words.filter((w) => !STOPWORDS.has(w.toLowerCase()));
+  const pool = significant.length > 0 ? significant : words;
+  const letters = pool.map(firstLetter).filter((l) => /[\p{L}\p{N}]/u.test(l)).slice(0, limit);
+  const head = pool[0] ? stripMarks(pool[0]).toLocaleUpperCase("es") : "";
+  let extra = 1;
+  while (letters.length > 0 && letters.length < limit && extra < head.length) {
+    letters.push(head[extra] ?? "");
+    extra += 1;
+  }
+  return letters.join("");
+}
+export {
+  getInitials
+};

package/dist/brand/logo-forge.d.ts

@@ -0,0 +1,42 @@
+import { type MarkFill, type MarkLayout, type MarkMonogram, type MarkOptions, type MarkShape } from "./generate.js";
+import { type GlyphId } from "./glyphs.js";
+type Background = "none" | "light" | "dark";
+export interface LogoForgeValue {
+    name: string;
+    tagline: string;
+    shape: MarkShape;
+    monogram: MarkMonogram;
+    glyph: GlyphId;
+    initialsCount: 1 | 2 | 3;
+    layout: MarkLayout;
+    fill: MarkFill;
+    /** A palette id or "custom" (uses `custom`). */
+    paletteId: string;
+    custom: {
+        primary: string;
+        secondary: string;
+        ink: string;
+    };
+    ring: boolean | undefined;
+    seed: number;
+    weight: 400 | 600 | 700 | 800;
+    tracking: number;
+    uppercase: boolean;
+    background: Background;
+}
+export declare const DEFAULT_FORGE_VALUE: LogoForgeValue;
+/** Turns the editor state into generator options. */
+export declare function forgeOptions(value: LogoForgeValue): MarkOptions;
+export interface LogoForgeProps {
+    defaultValue?: Partial<LogoForgeValue>;
+    /** Called with the generator options each time the editor changes. */
+    onChange?: (options: MarkOptions) => void;
+    className?: string;
+}
+/**
+ * Interactive brand-mark editor: pick a shape, monogram, palette and layout, browse twelve
+ * seeded variations, then download SVG or PNG or copy the SVG source. The chrome follows
+ * `data-style` and the active theme; the marks keep their own palettes.
+ */
+export declare function LogoForge({ defaultValue, onChange, className }: LogoForgeProps): import("react").JSX.Element;
+export {};