@chrono-os/image-editor-react 0.2.0

package/dist/badge.cjs

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/badge-overlay.tsx
+var BADGE_DEFAULT_POS = {
+  numero: { x: 6, y: 84 },
+  label: { x: 36, y: 88 }
+};
+var BADGE_BASE_CQW = { numero: 15, label: 3.5 };
+function BadgeOverlay({ badge }) {
+  if (!badge) return null;
+  const showNumero = !!badge.numero && badge.numeroEnabled !== false;
+  const showLabel = !!badge.label && badge.labelEnabled !== false;
+  if (!showNumero && !showLabel) return null;
+  const numSizeCqw = BADGE_BASE_CQW.numero * ((badge.numeroSize ?? 100) / 100);
+  const labelSizeCqw = BADGE_BASE_CQW.label * ((badge.labelSize ?? 100) / 100);
+  const numX = badge.numeroOffsetX ?? BADGE_DEFAULT_POS.numero.x;
+  const numY = badge.numeroOffsetY ?? BADGE_DEFAULT_POS.numero.y;
+  const labelX = badge.labelOffsetX ?? BADGE_DEFAULT_POS.label.x;
+  const labelY = badge.labelOffsetY ?? BADGE_DEFAULT_POS.label.y;
+  const numeroColor = badge.numeroColor || "var(--ie-accent, #556FFF)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showNumero && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-nowrap font-extrabold leading-none tracking-tight",
+        style: {
+          left: `${numX}%`,
+          top: `${numY}%`,
+          fontSize: `${numSizeCqw}cqw`,
+          color: numeroColor
+        },
+        children: badge.numero
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-pre-line font-semibold leading-tight text-white",
+        style: {
+          left: `${labelX}%`,
+          top: `${labelY}%`,
+          fontSize: `${labelSizeCqw}cqw`,
+          color: badge.labelColor || void 0
+        },
+        children: badge.label
+      }
+    )
+  ] });
+}
+
+exports.BadgeOverlay = BadgeOverlay;
+//# sourceMappingURL=badge.cjs.map
+//# sourceMappingURL=badge.cjs.map

package/dist/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge-overlay.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAgBA,IAAM,iBAAA,GAAoB;AAAA,EACxB,MAAA,EAAQ,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,EAAA,EAAG;AAAA,EACtB,KAAA,EAAO,EAAE,CAAA,EAAG,EAAA,EAAI,GAAG,EAAA;AACrB,CAAA;AASA,IAAM,cAAA,GAAiB,EAAE,MAAA,EAAQ,EAAA,EAAI,OAAO,GAAA,EAAI;AAOzC,SAAS,YAAA,CAAa,EAAE,KAAA,EAAM,EAAsB;AACzD,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,EAAA,MAAM,aAAa,CAAC,CAAC,KAAA,CAAM,MAAA,IAAU,MAAM,aAAA,KAAkB,KAAA;AAC7D,EAAA,MAAM,YAAY,CAAC,CAAC,KAAA,CAAM,KAAA,IAAS,MAAM,YAAA,KAAiB,KAAA;AAC1D,EAAA,IAAI,CAAC,UAAA,IAAc,CAAC,SAAA,EAAW,OAAO,IAAA;AAItC,EAAA,MAAM,UAAA,GAAa,cAAA,CAAe,MAAA,IAAA,CAAW,KAAA,CAAM,cAAc,GAAA,IAAO,GAAA,CAAA;AACxE,EAAA,MAAM,YAAA,GAAe,cAAA,CAAe,KAAA,IAAA,CAAU,KAAA,CAAM,aAAa,GAAA,IAAO,GAAA,CAAA;AACxE,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,aAAA,IAAiB,iBAAA,CAAkB,MAAA,CAAO,CAAA;AAC7D,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,aAAA,IAAiB,iBAAA,CAAkB,MAAA,CAAO,CAAA;AAC7D,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,YAAA,IAAgB,iBAAA,CAAkB,KAAA,CAAM,CAAA;AAC7D,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,YAAA,IAAgB,iBAAA,CAAkB,KAAA,CAAM,CAAA;AAE7D,EAAA,MAAM,WAAA,GACJ,MAAM,WAAA,IAAe,2BAAA;AACvB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,UAAA,oBACCC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,gGAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,GAAG,IAAI,CAAA,CAAA,CAAA;AAAA,UACb,GAAA,EAAK,GAAG,IAAI,CAAA,CAAA,CAAA;AAAA,UACZ,QAAA,EAAU,GAAG,UAAU,CAAA,GAAA,CAAA;AAAA,UACvB,KAAA,EAAO;AAAA,SACT;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,KACT;AAAA,IAED,SAAA,oBACCA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,8FAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,GAAG,MAAM,CAAA,CAAA,CAAA;AAAA,UACf,GAAA,EAAK,GAAG,MAAM,CAAA,CAAA,CAAA;AAAA,UACd,QAAA,EAAU,GAAG,YAAY,CAAA,GAAA,CAAA;AAAA,UACzB,KAAA,EAAO,MAAM,UAAA,IAAc;AAAA,SAC7B;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA;AACT,GAAA,EAEJ,CAAA;AAEJ","file":"badge.cjs","sourcesContent":["'use client'\n\n/**\n * Replica visual do badge (número + label) sobreposto a uma foto. Renderer\n * de produção pode estar em outro pacote (ex `@chrono-os/lp-react/hero`);\n * aqui usamos pra preview no admin/editor.\n *\n * Defaults em % (top-left do span dentro do container 3:4 da foto):\n *   numero: left ~6% (24px em 400px W) · top ~84%\n *   label: depois do numero (~36% W) · top ~88%\n *\n * Tamanho via container-query (cqw) — pai precisa `containerType:'inline-size'`.\n */\n\nimport type { BadgeData } from './types'\n\nconst BADGE_DEFAULT_POS = {\n  numero: { x: 6, y: 84 },\n  label: { x: 36, y: 88 },\n}\n\n/**\n * Tamanho base em % do container width (cqw). Casam com o renderer real:\n *   numero: 60px em container 400px = 15% W\n *   label:  14px em container 400px = 3.5% W\n * Slider 50-500% multiplica esses bases — assim qualquer tamanho de preview\n * (sm 128px, md 200px, prod 400px+) renderiza visualmente proporcional.\n */\nconst BADGE_BASE_CQW = { numero: 15, label: 3.5 }\n\nexport interface BadgeOverlayProps {\n  badge?: BadgeData\n  size?: 'sm' | 'md'\n}\n\nexport function BadgeOverlay({ badge }: BadgeOverlayProps) {\n  if (!badge) return null\n  const showNumero = !!badge.numero && badge.numeroEnabled !== false\n  const showLabel = !!badge.label && badge.labelEnabled !== false\n  if (!showNumero && !showLabel) return null\n  // Font-size em cqw (% da width do container) — requer parent com\n  // `containerType: 'inline-size'`. Proporcionalidade idêntica entre admin\n  // e produção sem precisar de fator de escala.\n  const numSizeCqw = BADGE_BASE_CQW.numero * ((badge.numeroSize ?? 100) / 100)\n  const labelSizeCqw = BADGE_BASE_CQW.label * ((badge.labelSize ?? 100) / 100)\n  const numX = badge.numeroOffsetX ?? BADGE_DEFAULT_POS.numero.x\n  const numY = badge.numeroOffsetY ?? BADGE_DEFAULT_POS.numero.y\n  const labelX = badge.labelOffsetX ?? BADGE_DEFAULT_POS.label.x\n  const labelY = badge.labelOffsetY ?? BADGE_DEFAULT_POS.label.y\n  // Default color: usa CSS var `--ie-accent` (consumer overrida via theme.css).\n  const numeroColor =\n    badge.numeroColor || 'var(--ie-accent, #556FFF)'\n  return (\n    <>\n      {showNumero && (\n        <span\n          className=\"pointer-events-none absolute z-10 whitespace-nowrap font-extrabold leading-none tracking-tight\"\n          style={{\n            left: `${numX}%`,\n            top: `${numY}%`,\n            fontSize: `${numSizeCqw}cqw`,\n            color: numeroColor,\n          }}\n        >\n          {badge.numero}\n        </span>\n      )}\n      {showLabel && (\n        <span\n          className=\"pointer-events-none absolute z-10 whitespace-pre-line font-semibold leading-tight text-white\"\n          style={{\n            left: `${labelX}%`,\n            top: `${labelY}%`,\n            fontSize: `${labelSizeCqw}cqw`,\n            color: badge.labelColor || undefined,\n          }}\n        >\n          {badge.label}\n        </span>\n      )}\n    </>\n  )\n}\n"]}

package/dist/badge.d.cts

@@ -0,0 +1,3 @@
+export { B as BadgeData, a as BadgeOverlay } from './badge-BRjFgV8X.cjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/badge.d.ts

@@ -0,0 +1,3 @@
+export { B as BadgeData, a as BadgeOverlay } from './badge-BRjFgV8X.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/badge.js

@@ -0,0 +1,4 @@
+"use client";
+export { BadgeOverlay } from './chunk-P77DHS6Z.js';
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"badge.js"}

package/dist/chunk-P77DHS6Z.js

@@ -0,0 +1,53 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/badge-overlay.tsx
+var BADGE_DEFAULT_POS = {
+  numero: { x: 6, y: 84 },
+  label: { x: 36, y: 88 }
+};
+var BADGE_BASE_CQW = { numero: 15, label: 3.5 };
+function BadgeOverlay({ badge }) {
+  if (!badge) return null;
+  const showNumero = !!badge.numero && badge.numeroEnabled !== false;
+  const showLabel = !!badge.label && badge.labelEnabled !== false;
+  if (!showNumero && !showLabel) return null;
+  const numSizeCqw = BADGE_BASE_CQW.numero * ((badge.numeroSize ?? 100) / 100);
+  const labelSizeCqw = BADGE_BASE_CQW.label * ((badge.labelSize ?? 100) / 100);
+  const numX = badge.numeroOffsetX ?? BADGE_DEFAULT_POS.numero.x;
+  const numY = badge.numeroOffsetY ?? BADGE_DEFAULT_POS.numero.y;
+  const labelX = badge.labelOffsetX ?? BADGE_DEFAULT_POS.label.x;
+  const labelY = badge.labelOffsetY ?? BADGE_DEFAULT_POS.label.y;
+  const numeroColor = badge.numeroColor || "var(--ie-accent, #556FFF)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showNumero && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-nowrap font-extrabold leading-none tracking-tight",
+        style: {
+          left: `${numX}%`,
+          top: `${numY}%`,
+          fontSize: `${numSizeCqw}cqw`,
+          color: numeroColor
+        },
+        children: badge.numero
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute z-10 whitespace-pre-line font-semibold leading-tight text-white",
+        style: {
+          left: `${labelX}%`,
+          top: `${labelY}%`,
+          fontSize: `${labelSizeCqw}cqw`,
+          color: badge.labelColor || void 0
+        },
+        children: badge.label
+      }
+    )
+  ] });
+}
+
+export { BadgeOverlay };
+//# sourceMappingURL=chunk-P77DHS6Z.js.map
+//# sourceMappingURL=chunk-P77DHS6Z.js.map

package/dist/chunk-P77DHS6Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge-overlay.tsx"],"names":[],"mappings":";;;AAgBA,IAAM,iBAAA,GAAoB;AAAA,EACxB,MAAA,EAAQ,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,EAAA,EAAG;AAAA,EACtB,KAAA,EAAO,EAAE,CAAA,EAAG,EAAA,EAAI,GAAG,EAAA;AACrB,CAAA;AASA,IAAM,cAAA,GAAiB,EAAE,MAAA,EAAQ,EAAA,EAAI,OAAO,GAAA,EAAI;AAOzC,SAAS,YAAA,CAAa,EAAE,KAAA,EAAM,EAAsB;AACzD,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,EAAA,MAAM,aAAa,CAAC,CAAC,KAAA,CAAM,MAAA,IAAU,MAAM,aAAA,KAAkB,KAAA;AAC7D,EAAA,MAAM,YAAY,CAAC,CAAC,KAAA,CAAM,KAAA,IAAS,MAAM,YAAA,KAAiB,KAAA;AAC1D,EAAA,IAAI,CAAC,UAAA,IAAc,CAAC,SAAA,EAAW,OAAO,IAAA;AAItC,EAAA,MAAM,UAAA,GAAa,cAAA,CAAe,MAAA,IAAA,CAAW,KAAA,CAAM,cAAc,GAAA,IAAO,GAAA,CAAA;AACxE,EAAA,MAAM,YAAA,GAAe,cAAA,CAAe,KAAA,IAAA,CAAU,KAAA,CAAM,aAAa,GAAA,IAAO,GAAA,CAAA;AACxE,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,aAAA,IAAiB,iBAAA,CAAkB,MAAA,CAAO,CAAA;AAC7D,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,aAAA,IAAiB,iBAAA,CAAkB,MAAA,CAAO,CAAA;AAC7D,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,YAAA,IAAgB,iBAAA,CAAkB,KAAA,CAAM,CAAA;AAC7D,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,YAAA,IAAgB,iBAAA,CAAkB,KAAA,CAAM,CAAA;AAE7D,EAAA,MAAM,WAAA,GACJ,MAAM,WAAA,IAAe,2BAAA;AACvB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,UAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,gGAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,GAAG,IAAI,CAAA,CAAA,CAAA;AAAA,UACb,GAAA,EAAK,GAAG,IAAI,CAAA,CAAA,CAAA;AAAA,UACZ,QAAA,EAAU,GAAG,UAAU,CAAA,GAAA,CAAA;AAAA,UACvB,KAAA,EAAO;AAAA,SACT;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,KACT;AAAA,IAED,SAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,8FAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,GAAG,MAAM,CAAA,CAAA,CAAA;AAAA,UACf,GAAA,EAAK,GAAG,MAAM,CAAA,CAAA,CAAA;AAAA,UACd,QAAA,EAAU,GAAG,YAAY,CAAA,GAAA,CAAA;AAAA,UACzB,KAAA,EAAO,MAAM,UAAA,IAAc;AAAA,SAC7B;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA;AACT,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-P77DHS6Z.js","sourcesContent":["'use client'\n\n/**\n * Replica visual do badge (número + label) sobreposto a uma foto. Renderer\n * de produção pode estar em outro pacote (ex `@chrono-os/lp-react/hero`);\n * aqui usamos pra preview no admin/editor.\n *\n * Defaults em % (top-left do span dentro do container 3:4 da foto):\n *   numero: left ~6% (24px em 400px W) · top ~84%\n *   label: depois do numero (~36% W) · top ~88%\n *\n * Tamanho via container-query (cqw) — pai precisa `containerType:'inline-size'`.\n */\n\nimport type { BadgeData } from './types'\n\nconst BADGE_DEFAULT_POS = {\n  numero: { x: 6, y: 84 },\n  label: { x: 36, y: 88 },\n}\n\n/**\n * Tamanho base em % do container width (cqw). Casam com o renderer real:\n *   numero: 60px em container 400px = 15% W\n *   label:  14px em container 400px = 3.5% W\n * Slider 50-500% multiplica esses bases — assim qualquer tamanho de preview\n * (sm 128px, md 200px, prod 400px+) renderiza visualmente proporcional.\n */\nconst BADGE_BASE_CQW = { numero: 15, label: 3.5 }\n\nexport interface BadgeOverlayProps {\n  badge?: BadgeData\n  size?: 'sm' | 'md'\n}\n\nexport function BadgeOverlay({ badge }: BadgeOverlayProps) {\n  if (!badge) return null\n  const showNumero = !!badge.numero && badge.numeroEnabled !== false\n  const showLabel = !!badge.label && badge.labelEnabled !== false\n  if (!showNumero && !showLabel) return null\n  // Font-size em cqw (% da width do container) — requer parent com\n  // `containerType: 'inline-size'`. Proporcionalidade idêntica entre admin\n  // e produção sem precisar de fator de escala.\n  const numSizeCqw = BADGE_BASE_CQW.numero * ((badge.numeroSize ?? 100) / 100)\n  const labelSizeCqw = BADGE_BASE_CQW.label * ((badge.labelSize ?? 100) / 100)\n  const numX = badge.numeroOffsetX ?? BADGE_DEFAULT_POS.numero.x\n  const numY = badge.numeroOffsetY ?? BADGE_DEFAULT_POS.numero.y\n  const labelX = badge.labelOffsetX ?? BADGE_DEFAULT_POS.label.x\n  const labelY = badge.labelOffsetY ?? BADGE_DEFAULT_POS.label.y\n  // Default color: usa CSS var `--ie-accent` (consumer overrida via theme.css).\n  const numeroColor =\n    badge.numeroColor || 'var(--ie-accent, #556FFF)'\n  return (\n    <>\n      {showNumero && (\n        <span\n          className=\"pointer-events-none absolute z-10 whitespace-nowrap font-extrabold leading-none tracking-tight\"\n          style={{\n            left: `${numX}%`,\n            top: `${numY}%`,\n            fontSize: `${numSizeCqw}cqw`,\n            color: numeroColor,\n          }}\n        >\n          {badge.numero}\n        </span>\n      )}\n      {showLabel && (\n        <span\n          className=\"pointer-events-none absolute z-10 whitespace-pre-line font-semibold leading-tight text-white\"\n          style={{\n            left: `${labelX}%`,\n            top: `${labelY}%`,\n            fontSize: `${labelSizeCqw}cqw`,\n            color: badge.labelColor || undefined,\n          }}\n        >\n          {badge.label}\n        </span>\n      )}\n    </>\n  )\n}\n"]}