@valcis/brand 2.0.0

package/dist/index.mjs

@@ -0,0 +1,419 @@
+// src/logo/paths.ts
+var BRACKET_LEFT_PATH = "M17.8 37.1L5.0 31.5L5.0 28.5L17.8 22.8L17.8 25.2L6.8 30.1L6.8 29.8L17.8 34.7Z";
+var BRACKET_RIGHT_PATH = "M47.0 37.1L47.0 34.7L58.0 29.8L58.0 30.1L47.0 25.2L47.0 22.8L59.8 28.5L59.8 31.5Z";
+var V_CALLIGRAPHIC_PATH = "M28 44.3Q27.3 44.3 26.1 43.9Q25 43.6 24 42.7Q23 41.8 22.8 40Q22.7 38.6 23.1 36.4Q23.4 34.4 24.1 31.8Q24.7 29.3 25.3 26.3Q25.8 23.3 26.1 20.1Q26.4 16.9 26.1 13.6Q25.9 11.9 25.4 10.7Q25 9.3 24.4 8.6Q23.6 8 22.4 8Q21.1 8 20.2 8.6Q19.4 9.3 19 10.6Q18.6 11.7 18.3 12.9Q18.2 14.1 18.3 15.3Q18.4 16 18.7 16.8Q18.9 17.5 19.4 18.3Q17 18.3 15.7 17.2Q14.5 16.2 14.4 14.5Q14.2 13.1 14.8 11.6Q15.4 10 16.6 8.8Q17.8 7.5 19.5 6.7Q21.1 6 23.2 6Q26.6 6 28.6 8.3Q30.6 10.7 31 14.7Q31.3 17.4 30.9 20.2Q30.6 23 30 25.9Q29.5 28.8 28.8 31.5Q28.1 34.2 27.8 36.5Q27.4 38.8 27.6 40.5Q27.7 41.2 27.9 41.7Q28.1 42.1 29 42.1Q30.4 42.1 32 40.8Q33.8 39.6 35.4 37.3Q37.2 35.2 38.8 32.4Q40.3 29.6 41.5 26.5Q42.7 23.4 43.2 20.5Q43.8 17.5 43.6 14.9Q43.3 12.5 42.1 11.1Q41 9.8 39.6 9.3Q40.1 7.9 41.1 7.3Q42 6.6 42.8 6.6Q44.2 6.6 45.6 8.2Q46.9 9.9 47.2 12.8Q47.5 15.4 46.8 18.6Q46.2 22 44.7 25.4Q43.3 29 41.4 32.4Q39.5 35.8 37.2 38.4Q35 41 32.7 42.7Q30.3 44.3 28 44.3Z";
+var CHEVRON_RIGHT_FULL_PATH = "M72 33V119L466 295V283L72 459V545L528 342V236Z";
+var A_PATH = "M230 -12Q180 -12 140.0 6.0Q100 24 77.0 56.5Q54 89 54 132Q54 200 94.5 237.5Q135 275 222 292L400 328Q400 396 369.5 429.0Q339 462 282 462Q227 462 196.0 437.5Q165 413 153 367L64 374Q79 449 135.5 495.5Q192 542 282 542Q378 542 431.0 484.5Q484 427 484 326V106Q484 88 492.0 81.0Q500 74 516 74H550V0Q544 -1 531.0 -1.5Q518 -2 506 -2Q472 -2 448.5 9.0Q425 20 413.0 44.5Q401 69 400 108H416Q409 74 382.5 46.5Q356 19 316.0 3.5Q276 -12 230 -12ZM238 62Q292 62 328.0 80.5Q364 99 382.0 132.5Q400 166 400 210V256L238 224Q184 214 163.0 193.5Q142 173 142 140Q142 103 167.5 82.5Q193 62 238 62Z";
+var L_PATH = "M273 0V568Q273 600 255.0 618.0Q237 636 205 636H80V710H209Q282 710 319.5 672.5Q357 635 357 562V0ZM60 0V74H540V0Z";
+var C_PATH = "M314 -12Q240 -12 185.0 22.0Q130 56 100.0 118.5Q70 181 70 265Q70 349 100.0 411.0Q130 473 185.0 507.5Q240 542 314 542Q373 542 419.0 520.5Q465 499 495.0 458.0Q525 417 536 358L448 352Q436 405 400.5 433.5Q365 462 314 462Q241 462 199.5 409.5Q158 357 158 265Q158 173 199.5 120.5Q241 68 314 68Q365 68 402.5 98.0Q440 128 452 188L540 182Q529 123 498.0 79.5Q467 36 420.0 12.0Q373 -12 314 -12Z";
+var I_PATH = "M293 0V530H377V0ZM80 0V74H560V0ZM90 456V530H377V456ZM285 613V711H373V613Z";
+var S_PATH = "M310 -12Q241 -12 191.0 12.0Q141 36 112.5 76.5Q84 117 80 167L168 173Q176 124 211.5 96.0Q247 68 310 68Q369 68 401.5 85.0Q434 102 434 138Q434 161 423.0 176.0Q412 191 382.0 201.5Q352 212 294 222Q217 236 173.5 256.5Q130 277 112.0 308.0Q94 339 94 382Q94 428 117.0 464.0Q140 500 185.0 521.0Q230 542 295 542Q361 542 405.5 518.5Q450 495 476.0 456.5Q502 418 510 372L422 366Q416 394 399.5 415.5Q383 437 356.5 449.5Q330 462 294 462Q236 462 208.0 439.0Q180 416 180 382Q180 355 193.0 339.0Q206 323 235.0 313.5Q264 304 312 296Q394 283 439.0 262.5Q484 242 502.0 212.0Q520 182 520 138Q520 91 492.5 57.5Q465 24 417.5 6.0Q370 -12 310 -12Z";
+var CURSOR_PATH = "M260 -110V750H340V-110Z";
+var V_CALLIGRAPHIC_FULL_TRANSFORM = "translate(47, 0) scale(15.2, -13.84) translate(-14.2, -44.3)";
+var FULL_GLYPH_OFFSETS = [0, 600, 1200, 1800, 2400, 3e3, 3600, 4200];
+var VIEWBOXES = {
+  icon: "3 5 58 41",
+  full: "0 -130 4545 920"
+};
+var ASPECT_RATIOS = {
+  icon: 58 / 41,
+  full: 4545 / 920
+};
+
+// src/logo/Logo.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SIZE_MAP = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48
+};
+function resolveSize(size) {
+  return typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+}
+var Logo = ({
+  variant = "icon",
+  size = 24,
+  animated = false,
+  accentColor,
+  textColor,
+  className,
+  style,
+  ariaLabel
+}) => {
+  const px = resolveSize(size);
+  const viewBox = VIEWBOXES[variant] ?? VIEWBOXES.icon;
+  const ratio = ASPECT_RATIOS[variant] ?? ASPECT_RATIOS.icon;
+  const width = px * (variant === "full" ? ratio : 1);
+  const height = px * (variant === "full" ? 1 : 1 / ratio);
+  const accent = accentColor ?? "var(--valcis-logo-accent, var(--primary, currentColor))";
+  const text = textColor ?? "var(--valcis-logo-text, currentColor)";
+  const isDecorative = !ariaLabel;
+  const cursorAnimation = animated && variant === "full" ? `
+@keyframes valcis-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .valcis-cursor-blink { animation: valcis-cursor-blink 1s step-end infinite; }
+}
+` : void 0;
+  const pulseAnimation = animated && variant === "icon" ? `
+@keyframes valcis-logo-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .valcis-logo-animated { animation: valcis-logo-pulse 2s ease-in-out infinite; }
+}
+` : void 0;
+  const animationStyle = cursorAnimation ?? pulseAnimation;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    animationStyle && /* @__PURE__ */ jsx("style", { children: animationStyle }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox,
+        fill: "none",
+        width,
+        height,
+        className: [animated && variant === "icon" ? "valcis-logo-animated" : "", className].filter(Boolean).join(" ") || void 0,
+        style,
+        role: "img",
+        "aria-hidden": isDecorative ? true : void 0,
+        "aria-label": ariaLabel ?? void 0,
+        children: [
+          variant === "icon" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("path", { d: BRACKET_LEFT_PATH, fill: accent }),
+            /* @__PURE__ */ jsx("path", { d: BRACKET_RIGHT_PATH, fill: accent }),
+            /* @__PURE__ */ jsx("path", { d: V_CALLIGRAPHIC_PATH, fill: text })
+          ] }),
+          variant === "full" && /* @__PURE__ */ jsxs("g", { transform: "scale(1,-1) translate(0,-640)", children: [
+            /* @__PURE__ */ jsx("g", { transform: "translate(0,0)", children: /* @__PURE__ */ jsx("path", { d: CHEVRON_RIGHT_FULL_PATH, fill: accent }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(600,0)", children: /* @__PURE__ */ jsx("g", { transform: V_CALLIGRAPHIC_FULL_TRANSFORM, children: /* @__PURE__ */ jsx("path", { d: V_CALLIGRAPHIC_PATH, fill: text }) }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(1200,0)", children: /* @__PURE__ */ jsx("path", { d: A_PATH, fill: text }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(1800,0)", children: /* @__PURE__ */ jsx("path", { d: L_PATH, fill: text }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(2400,0)", children: /* @__PURE__ */ jsx("path", { d: C_PATH, fill: text }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(3000,0)", children: /* @__PURE__ */ jsx("path", { d: I_PATH, fill: text }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(3600,0)", children: /* @__PURE__ */ jsx("path", { d: S_PATH, fill: text }) }),
+            /* @__PURE__ */ jsx("g", { transform: "translate(4200,0)", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: CURSOR_PATH,
+                fill: accent,
+                className: animated ? "valcis-cursor-blink" : void 0
+              }
+            ) })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/footer/Footer.tsx
+import React from "react";
+
+// src/shared/hooks/useDevInfo.ts
+import { useState, useEffect } from "react";
+
+// src/footer/constants.ts
+var DEFAULT_DEV_INFO = {
+  version: 1,
+  brand: "valcis",
+  contact: "contacto@valcis.es",
+  website: "https://valcis.es",
+  year: (/* @__PURE__ */ new Date()).getFullYear()
+};
+var DEV_INFO_URL = "https://valcis.es/api/dev-info.json";
+var FETCH_TIMEOUT = 2e3;
+var CACHE_DURATION = 1e3 * 60 * 60;
+var CACHE_KEY = "valcis-brand-dev-info";
+
+// src/shared/hooks/useDevInfo.ts
+function useDevInfo(initialData, customUrl) {
+  const [devInfo, setDevInfo] = useState(initialData ?? DEFAULT_DEV_INFO);
+  useEffect(() => {
+    if (initialData) return;
+    const fetchDevInfo = async () => {
+      try {
+        const cached = localStorage.getItem(CACHE_KEY);
+        if (cached) {
+          const { data, timestamp } = JSON.parse(cached);
+          const isValid = Date.now() - timestamp < CACHE_DURATION;
+          if (isValid) {
+            setDevInfo(data);
+            return;
+          }
+        }
+      } catch {
+      }
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+      try {
+        const url = customUrl || DEV_INFO_URL;
+        const response = await fetch(url, {
+          signal: controller.signal,
+          cache: "no-store",
+          headers: { "Accept": "application/json" }
+        });
+        if (!response.ok) throw new Error("Fetch failed");
+        const data = await response.json();
+        setDevInfo(data);
+        try {
+          const cacheData = { data, timestamp: Date.now() };
+          localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
+        } catch {
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name !== "AbortError") {
+          console.warn("[valcis-brand] Client fetch failed, using fallback");
+        }
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    };
+    fetchDevInfo();
+  }, [initialData, customUrl]);
+  return devInfo;
+}
+
+// src/footer/Footer.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PADDING_MAP = {
+  compact: { x: "1rem", y: "0.5rem" },
+  normal: { x: "1rem", y: "1rem" },
+  spacious: { x: "1.5rem", y: "2rem" }
+};
+var LOGO_COLORS = {
+  light: { accent: "#2563EB", text: "#1E293B" },
+  dark: { accent: "#60A5FA", text: "#F1F5F9" }
+};
+function getCopyPrefix(mode, year, showYear) {
+  switch (mode) {
+    case "owner":
+      return showYear ? `\xA9 ${year}` : "\xA9";
+    case "designer":
+      return showYear ? `\xA9 ${year} \xB7 Dise\xF1ado por` : "Dise\xF1ado por";
+    case "partner":
+      return "Powered by";
+  }
+}
+var Footer = ({
+  initialDevInfo,
+  devInfoUrl,
+  theme = "light",
+  accentColor,
+  backgroundColor,
+  textColor,
+  border = "top",
+  padding = "normal",
+  align = "center",
+  position = "sticky",
+  mode = "designer",
+  showYear = true,
+  showContact = true,
+  animatedLogo = true,
+  variant = "inline",
+  className = "",
+  as: Tag = "div"
+}) => {
+  const devInfo = useDevInfo(initialDevInfo, devInfoUrl);
+  const currentYear = devInfo.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const styleHash = React.useId().replace(/:/g, "");
+  const linkClass = `__vf-link-${styleHash}`;
+  const palette = {
+    light: {
+      bg: "transparent",
+      text: "#6b7280",
+      link: "#1e293b",
+      linkHover: "rgba(0,0,0,0.05)",
+      focusRing: "#3b82f6",
+      border: "#e5e7eb"
+    },
+    dark: {
+      bg: "transparent",
+      text: "#9ca3af",
+      link: "#f1f5f9",
+      linkHover: "rgba(255,255,255,0.1)",
+      focusRing: "#60a5fa",
+      border: "#374151"
+    }
+  };
+  const c = palette[theme];
+  const finalBg = backgroundColor ?? c.bg;
+  const finalText = textColor ?? c.text;
+  const finalAccent = accentColor ?? c.link;
+  const logoColors = LOGO_COLORS[theme];
+  const pad = typeof padding === "string" ? PADDING_MAP[padding] : { x: padding.x ?? "1rem", y: padding.y ?? "1rem" };
+  const borderColor = c.border;
+  const borderTop = border === true || border === "top" || border === "both" ? `1px solid ${borderColor}` : "none";
+  const borderBottom = border === "bottom" || border === "both" ? `1px solid ${borderColor}` : "none";
+  const positionStyles = {};
+  if (position === "sticky") {
+    positionStyles.position = "sticky";
+    positionStyles.bottom = 0;
+    positionStyles.zIndex = 10;
+  } else if (position === "fixed") {
+    positionStyles.position = "fixed";
+    positionStyles.bottom = 0;
+    positionStyles.left = 0;
+    positionStyles.right = 0;
+    positionStyles.zIndex = 50;
+  }
+  const baseStyles = {
+    ...positionStyles,
+    padding: `${pad.y} ${pad.x}`,
+    textAlign: align,
+    fontSize: "0.75rem",
+    lineHeight: 1.5,
+    borderTop,
+    borderBottom,
+    backgroundColor: finalBg,
+    color: finalText
+  };
+  const linkStyles = {
+    color: finalAccent,
+    textDecoration: "none",
+    padding: "0.35rem 0.5rem",
+    minHeight: "44px",
+    minWidth: "44px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "4px",
+    transition: "background-color 0.2s, outline 0.2s"
+  };
+  const dynamicStyles = `
+    .${linkClass}:hover {
+      background-color: ${c.linkHover};
+    }
+    .${linkClass}:focus {
+      outline: none;
+    }
+    .${linkClass}:focus-visible {
+      outline: 2px solid ${accentColor ?? c.focusRing};
+      outline-offset: 2px;
+    }
+  `;
+  const isStacked = variant === "stacked";
+  const contentStyles = {
+    margin: 0,
+    display: "flex",
+    flexDirection: isStacked ? "column" : "row",
+    flexWrap: "wrap",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    alignItems: "center",
+    gap: isStacked ? "0.25rem" : "0.35rem"
+  };
+  const prefix = getCopyPrefix(mode, currentYear, showYear);
+  const logoElement = /* @__PURE__ */ jsx2(
+    Logo,
+    {
+      variant: "full",
+      size: 14,
+      animated: animatedLogo,
+      accentColor: logoColors.accent,
+      textColor: logoColors.text
+    }
+  );
+  const brandContent = devInfo.website ? /* @__PURE__ */ jsx2(
+    "a",
+    {
+      href: devInfo.website,
+      className: linkClass,
+      style: { ...linkStyles, gap: "0.35rem", fontWeight: 500 },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `Visitar sitio web de ${devInfo.brand} (abre en nueva pesta\xF1a)`,
+      children: logoElement
+    }
+  ) : /* @__PURE__ */ jsx2("span", { style: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "0.35rem 0.5rem"
+  }, children: logoElement });
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("style", { children: dynamicStyles }),
+    /* @__PURE__ */ jsx2(
+      Tag,
+      {
+        style: baseStyles,
+        className,
+        ...Tag === "footer" ? { role: "contentinfo" } : {},
+        children: /* @__PURE__ */ jsx2("nav", { "aria-label": "Informaci\xF3n del desarrollador", children: /* @__PURE__ */ jsxs2("p", { style: contentStyles, children: [
+          prefix && /* @__PURE__ */ jsx2("span", { style: { color: finalAccent }, children: prefix }),
+          brandContent,
+          showContact && devInfo.contact && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            !isStacked && /* @__PURE__ */ jsx2("span", { style: { color: finalAccent, margin: "0 0.25rem" }, "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsx2(
+              "a",
+              {
+                href: `mailto:${devInfo.contact}`,
+                className: linkClass,
+                style: linkStyles,
+                "aria-label": `Contactar al desarrollador: ${devInfo.contact}`,
+                children: devInfo.contact
+              }
+            )
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+};
+
+// src/shared/utils/getDevInfo.ts
+async function getDevInfo(customUrl) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+  try {
+    const url = customUrl || DEV_INFO_URL;
+    const response = await fetch(url, {
+      signal: controller.signal,
+      headers: { "Accept": "application/json" }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    const data = await response.json();
+    return {
+      version: data.version ?? 1,
+      brand: data.brand ?? DEFAULT_DEV_INFO.brand,
+      contact: data.contact ?? DEFAULT_DEV_INFO.contact,
+      website: data.website,
+      year: data.year ?? (/* @__PURE__ */ new Date()).getFullYear()
+    };
+  } catch (error) {
+    console.warn("[valcis-brand] SSR fetch failed, using fallback:", error);
+    return DEFAULT_DEV_INFO;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+export {
+  ASPECT_RATIOS,
+  A_PATH,
+  BRACKET_LEFT_PATH,
+  BRACKET_RIGHT_PATH,
+  CACHE_DURATION,
+  CACHE_KEY,
+  CHEVRON_RIGHT_FULL_PATH,
+  CURSOR_PATH,
+  C_PATH,
+  DEFAULT_DEV_INFO,
+  DEV_INFO_URL,
+  FETCH_TIMEOUT,
+  FULL_GLYPH_OFFSETS,
+  Footer,
+  I_PATH,
+  L_PATH,
+  Logo,
+  S_PATH,
+  VIEWBOXES,
+  V_CALLIGRAPHIC_FULL_TRANSFORM,
+  V_CALLIGRAPHIC_PATH,
+  getDevInfo,
+  useDevInfo
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@valcis/brand",
+  "version": "2.0.0",
+  "description": "Componentes de marca valcis: Logo SVG y Footer React con soporte SSR",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "assets"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/valcis/branding_valcis.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "keywords": [
+    "brand",
+    "logo",
+    "footer",
+    "react",
+    "component",
+    "ssr",
+    "nextjs",
+    "accessible"
+  ],
+  "author": "valcis",
+  "license": "MIT"
+}