@synthex-engineers/refined-tech 1.0.1 → 1.0.3

package/dist/index.js

@@ -56,7 +56,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-mono bg-slateSurface text-pistachio border border-slateBorder">\n  <span class="w-1.5 h-1.5 rounded-full bg-pistachio"></span>\n  Ledger Sellado\n</span>'
+          snippet: '<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-mono bg-slateSurface text-pistachio border border-slateBorder">\r\n  <span class="w-1.5 h-1.5 rounded-full bg-pistachio"></span>\r\n  Ledger Sellado\r\n</span>'
         }
       },
       ai_prompt_tag: "[SynthexComponent: badge-status | Angular: <st-badge-status> | React: <BadgeStatus> | Style: Dark Container #1E1E1E / Static Pistachio Dot #E0F9B5 / Mono Font]"
@@ -108,7 +108,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<button class="bg-transparent text-pistachio border border-pistachio/70 hover:bg-pistachio/10 hover:border-pistachio px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\n  Exportar Ledger\n</button>'
+          snippet: '<button class="bg-transparent text-pistachio border border-pistachio/70 hover:bg-pistachio/10 hover:border-pistachio px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\r\n  Exportar Ledger\r\n</button>'
         },
         astro: {
           available: true,
@@ -140,7 +140,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<button class="bg-pistachio text-charcoal hover:bg-pistachio-hover px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm active:scale-95 inline-flex items-center justify-center gap-1.5 cursor-pointer">\n  Confirmar Acci\xF3n\n</button>'
+          snippet: '<button class="bg-pistachio text-charcoal hover:bg-pistachio-hover px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm active:scale-95 inline-flex items-center justify-center gap-1.5 cursor-pointer">\r\n  Confirmar Acci\xF3n\r\n</button>'
         },
         astro: {
           available: true,
@@ -172,7 +172,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<button class="bg-slateSurface text-white border border-slateBorder hover:bg-slateBorder hover:border-slateBorder-focus px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\n  Cancelar\n</button>'
+          snippet: '<button class="bg-slateSurface text-white border border-slateBorder hover:bg-slateBorder hover:border-slateBorder-focus px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\r\n  Cancelar\r\n</button>'
         },
         astro: {
           available: true,
@@ -192,7 +192,7 @@ var components_default = {
       frameworks: {
         html: {
           available: true,
-          snippet: '<a\n  href="https://sd-kpi.com/"\n  target="_blank"\n  rel="noopener noreferrer"\n  class="group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans"\n  aria-label="SD-M GmbH - Alemania"\n>\n  <img\n    src="/brand/sd-m-logo-dark.png"\n    alt="SD-M GmbH"\n    class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"\n    width="120"\n    height="44"\n    loading="lazy"\n  />\n  <div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">\n    <span class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight">\n      SD-M GmbH\n    </span>\n    <span class="block text-sm font-sans text-muted leading-tight mt-0.5">\n      Alemania\n    </span>\n  </div>\n</a>'
+          snippet: '<a\r\n  href="https://sd-kpi.com/"\r\n  target="_blank"\r\n  rel="noopener noreferrer"\r\n  class="group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans"\r\n  aria-label="SD-M GmbH - Alemania"\r\n>\r\n  <img\r\n    src="/brand/sd-m-logo-dark.png"\r\n    alt="SD-M GmbH"\r\n    class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"\r\n    width="120"\r\n    height="44"\r\n    loading="lazy"\r\n  />\r\n  <div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">\r\n    <span class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight">\r\n      SD-M GmbH\r\n    </span>\r\n    <span class="block text-sm font-sans text-muted leading-tight mt-0.5">\r\n      Alemania\r\n    </span>\r\n  </div>\r\n</a>'
         },
         angular: {
           available: true,
@@ -282,13 +282,19 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<div class="w-full h-16 bg-charcoal border border-slateBorder rounded-xl overflow-hidden flex items-center justify-center cursor-pointer relative">\n  <svg class="w-full h-12" viewBox="0 0 1440 320" preserveAspectRatio="none">\n    <path fill="#E0F9B5" d="M 0,160 Q 720,160 1440,160 L 1440,320 L 0,320 Z"></path>\n  </svg>\n  <span class="absolute text-xs font-mono text-charcoal font-bold">\n    Rebote El\xE1stico GSAP\n  </span>\n</div>'
+          snippet: '<div class="w-full h-16 bg-charcoal border border-slateBorder rounded-xl overflow-hidden flex items-center justify-center cursor-pointer relative">\r\n  <svg class="w-full h-12" viewBox="0 0 1440 320" preserveAspectRatio="none">\r\n    <path fill="#E0F9B5" d="M 0,160 Q 720,160 1440,160 L 1440,320 L 0,320 Z"></path>\r\n  </svg>\r\n  <span class="absolute text-xs font-mono text-charcoal font-bold">\r\n    Rebote El\xE1stico GSAP\r\n  </span>\r\n</div>'
         },
         react: {
           available: true,
           component: "FooterBounce",
           import: "import { FooterBounce } from '@synthex-engineers/refined-tech/react';",
           snippet: "<FooterBounce />"
+        },
+        astro: {
+          available: true,
+          component: "FooterBounceCurve",
+          import: "import { FooterBounceCurve } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<FooterBounceCurve />"
         }
       },
       ai_prompt_tag: "[SynthexAnimation: gsap-footer-bounce | Angular: <st-footer-bounce> | GSAP Elastic Curve M 0,160 Q 720,160 | Ease: elastic.out(1.8, 0.22)]"
@@ -308,7 +314,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<button class="js-mag-btn px-4 py-2.5 rounded-lg bg-slateSurface text-white border border-slateBorder text-sm font-medium hover:border-pistachio transition-colors cursor-pointer select-none inline-flex items-center gap-2">\n  <span class="w-2 h-2 rounded-full bg-pistachio"></span>\n  <span>Im\xE1n GSAP</span>\n</button>'
+          snippet: '<button class="js-mag-btn px-4 py-2.5 rounded-lg bg-slateSurface text-white border border-slateBorder text-sm font-medium hover:border-pistachio transition-colors cursor-pointer select-none inline-flex items-center gap-2">\r\n  <span class="w-2 h-2 rounded-full bg-pistachio"></span>\r\n  <span>Im\xE1n GSAP</span>\r\n</button>'
         },
         react: {
           available: true,
@@ -334,13 +340,19 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<!-- Preloader Cinem\xE1tico Oficial Synthex (Metamorfosis Geom\xE9trica con MorphSVG) -->\n<div class="p-6 bg-charcoal border border-slateBorder rounded-xl flex flex-col items-center justify-center gap-4 w-full">\n  <svg\n    id="preloader-master-svg"\n    xmlns="http://www.w3.org/2000/svg"\n    viewBox="0 0 350 100"\n    class="w-full max-w-[420px] overflow-visible"\n  >\n    <defs>\n      <path id="target-bracket-left" d="M 40 29 L 18 50 L 40 71 L 44.5 66.5 L 27 50 L 44.5 33.5 Z" />\n      <path id="target-slash" d="M 50.5 70 L 64.5 30 L 68.5 31.5 L 54.5 71.5 Z" />\n      <path id="target-bracket-right" d="M 74 29 L 96 50 L 74 71 L 69.5 66.5 L 87 50 L 69.5 33.5 Z" />\n      <path id="target-char-s" d="M135.12 68.59L135.12 68.59Q130.42 68.59 127.02 67.08Q123.62 65.57 120.86 62.38L120.86 62.38L126.37 56.93Q128.21 59.09 130.42 60.22Q132.64 61.36 135.66 61.36L135.66 61.36Q138.36 61.36 139.84 60.39Q141.33 59.41 141.33 57.69L141.33 57.69Q141.33 55.90 140.03 54.82Q138.74 53.74 136.71 53.02Q134.69 52.29 132.39 51.45Q130.10 50.61 128.05 49.34Q125.99 48.07 124.72 45.97Q123.46 43.86 123.46 40.51L123.46 40.51Q123.46 37.00 125.16 34.49Q126.86 31.98 129.88 30.63Q132.91 29.28 136.85 29.28L136.85 29.28Q140.84 29.28 144.16 30.71Q147.49 32.14 149.65 34.52L149.65 34.52L144.14 39.97Q142.41 38.19 140.66 37.33Q138.90 36.46 136.69 36.46L136.69 36.46Q134.42 36.46 133.15 37.30Q131.88 38.14 131.88 39.70L131.88 39.70Q131.88 41.38 133.15 42.35Q134.42 43.32 136.47 44.05Q138.52 44.78 140.82 45.62Q143.11 46.45 145.14 47.78Q147.16 49.10 148.46 51.29Q149.75 53.47 149.75 56.93L149.75 56.93Q149.75 62.44 145.87 65.52Q141.98 68.59 135.12 68.59Z" />\n      <path id="target-char-y" d="M164.23 79.07L155.75 79.07L161.69 66.22L151.70 41.76L160.61 41.76L165.85 57.74L171.19 41.76L180.10 41.76L168.87 68.11L164.23 79.07Z" />\n      <path id="target-char-n" d="M191.50 68L183.23 68L183.23 41.76L191.50 41.76L191.50 43.86Q194.41 41.22 198.84 41.22L198.84 41.22Q201.70 41.22 203.97 42.59Q206.24 43.97 207.53 46.24Q208.83 48.51 208.83 51.21L208.83 51.21L208.83 68L200.57 68L200.57 53.04Q200.57 50.99 199.30 49.72Q198.03 48.45 196.09 48.45L196.09 48.45Q194.09 48.45 192.79 49.72Q191.50 50.99 191.50 53.04L191.50 53.04L191.50 68Z" />\n      <path id="target-char-t" d="M226.11 68L217.85 68L217.85 48.78L211.91 48.78L211.91 41.76L217.85 41.76L217.85 30.90L226.11 30.90L226.11 41.76L232.05 41.76L232.05 48.78L226.11 48.78L226.11 68Z" />\n      <path id="target-char-h" d="M243.93 68L235.67 68L235.67 28.80L243.93 28.80L243.93 43.70Q246.74 41.22 251.00 41.22L251.00 41.22Q254.03 41.22 256.35 42.48Q258.67 43.75 259.97 46.02Q261.26 48.29 261.26 51.21L261.26 51.21L261.26 68L253.00 68L253.00 53.04Q253.00 50.99 251.73 49.72Q250.46 48.45 248.52 48.45L248.52 48.45Q246.52 48.45 245.23 49.72Q243.93 50.99 243.93 53.04L243.93 53.04L243.93 68Z" />\n      <path id="target-char-e" d="M279.52 68.59L279.52 68.59Q275.25 68.59 271.93 66.84Q268.61 65.08 266.72 61.98Q264.83 58.87 264.83 54.88L264.83 54.88Q264.83 50.94 266.69 47.86Q268.55 44.78 271.74 42.97Q274.93 41.16 278.92 41.16L278.92 41.16Q282.76 41.16 285.75 42.86Q288.75 44.56 290.45 47.51Q292.15 50.45 292.15 54.28L292.15 54.28Q292.15 55.74 291.77 57.58L291.77 57.58L272.98 57.63Q273.63 59.85 275.30 61.03Q276.98 62.22 279.46 62.22L279.46 62.22Q283.40 62.22 285.73 59.52L285.73 59.52L290.26 64.06Q288.32 66.33 285.56 67.46Q282.81 68.59 279.52 68.59ZM278.98 47.48L278.98 47.48Q276.71 47.48 275.14 48.67Q273.58 49.86 272.98 51.96L272.98 51.96L284.43 51.91Q283.40 47.48 278.98 47.48Z" />\n      <path id="target-char-x" d="M302.52 68L293.50 68L302.90 54.61L293.99 41.76L303.65 41.76L308.03 48.88L312.46 41.76L321.42 41.76L312.67 54.45L321.96 68L312.40 68L307.54 60.17L302.52 68Z" />\n    </defs>\n    <g id="preloader-morph-group">\n      <path id="morph-shape-0" d="M 18 50 L 44 32 L 44 68 Z" fill="#E0F9B5" />\n      <path id="morph-shape-1" d="M 54 30 L 63 30 L 63 70 L 54 70 Z" fill="#E0F9B5" />\n      <path id="morph-shape-2" d="M 96 50 L 70 68 L 70 32 Z" fill="#E0F9B5" />\n      <path id="morph-shape-3" d="M 135 34 A 16 16 0 1 0 135 66 A 16 16 0 1 0 135 34 Z" fill="#FFFFFF" />\n      <path id="morph-shape-4" d="M 152 40 L 180 40 L 166 75 Z" fill="#FFFFFF" />\n      <path id="morph-shape-5" d="M 183 41 L 209 41 L 209 67 L 183 67 Z" fill="#FFFFFF" />\n      <path id="morph-shape-6" d="M 215 31 L 229 31 L 229 68 L 215 68 Z" fill="#FFFFFF" />\n      <path id="morph-shape-7" d="M 235 29 L 261 29 L 261 68 L 235 68 Z" fill="#FFFFFF" />\n      <path id="morph-shape-8" d="M 278 41 A 14 14 0 1 0 278 69 A 14 14 0 1 0 278 41 Z" fill="#FFFFFF" />\n      <path id="morph-shape-9" d="M 308 41 L 322 55 L 308 69 L 294 55 Z" fill="#FFFFFF" />\n    </g>\n  </svg>\n</div>'
+          snippet: '<!-- Preloader Cinem\xE1tico Oficial Synthex (Metamorfosis Geom\xE9trica con MorphSVG) -->\r\n<div class="p-6 bg-charcoal border border-slateBorder rounded-xl flex flex-col items-center justify-center gap-4 w-full">\r\n  <svg\r\n    id="preloader-master-svg"\r\n    xmlns="http://www.w3.org/2000/svg"\r\n    viewBox="0 0 350 100"\r\n    class="w-full max-w-[420px] overflow-visible"\r\n  >\r\n    <defs>\r\n      <path id="target-bracket-left" d="M 40 29 L 18 50 L 40 71 L 44.5 66.5 L 27 50 L 44.5 33.5 Z" />\r\n      <path id="target-slash" d="M 50.5 70 L 64.5 30 L 68.5 31.5 L 54.5 71.5 Z" />\r\n      <path id="target-bracket-right" d="M 74 29 L 96 50 L 74 71 L 69.5 66.5 L 87 50 L 69.5 33.5 Z" />\r\n      <path id="target-char-s" d="M135.12 68.59L135.12 68.59Q130.42 68.59 127.02 67.08Q123.62 65.57 120.86 62.38L120.86 62.38L126.37 56.93Q128.21 59.09 130.42 60.22Q132.64 61.36 135.66 61.36L135.66 61.36Q138.36 61.36 139.84 60.39Q141.33 59.41 141.33 57.69L141.33 57.69Q141.33 55.90 140.03 54.82Q138.74 53.74 136.71 53.02Q134.69 52.29 132.39 51.45Q130.10 50.61 128.05 49.34Q125.99 48.07 124.72 45.97Q123.46 43.86 123.46 40.51L123.46 40.51Q123.46 37.00 125.16 34.49Q126.86 31.98 129.88 30.63Q132.91 29.28 136.85 29.28L136.85 29.28Q140.84 29.28 144.16 30.71Q147.49 32.14 149.65 34.52L149.65 34.52L144.14 39.97Q142.41 38.19 140.66 37.33Q138.90 36.46 136.69 36.46L136.69 36.46Q134.42 36.46 133.15 37.30Q131.88 38.14 131.88 39.70L131.88 39.70Q131.88 41.38 133.15 42.35Q134.42 43.32 136.47 44.05Q138.52 44.78 140.82 45.62Q143.11 46.45 145.14 47.78Q147.16 49.10 148.46 51.29Q149.75 53.47 149.75 56.93L149.75 56.93Q149.75 62.44 145.87 65.52Q141.98 68.59 135.12 68.59Z" />\r\n      <path id="target-char-y" d="M164.23 79.07L155.75 79.07L161.69 66.22L151.70 41.76L160.61 41.76L165.85 57.74L171.19 41.76L180.10 41.76L168.87 68.11L164.23 79.07Z" />\r\n      <path id="target-char-n" d="M191.50 68L183.23 68L183.23 41.76L191.50 41.76L191.50 43.86Q194.41 41.22 198.84 41.22L198.84 41.22Q201.70 41.22 203.97 42.59Q206.24 43.97 207.53 46.24Q208.83 48.51 208.83 51.21L208.83 51.21L208.83 68L200.57 68L200.57 53.04Q200.57 50.99 199.30 49.72Q198.03 48.45 196.09 48.45L196.09 48.45Q194.09 48.45 192.79 49.72Q191.50 50.99 191.50 53.04L191.50 53.04L191.50 68Z" />\r\n      <path id="target-char-t" d="M226.11 68L217.85 68L217.85 48.78L211.91 48.78L211.91 41.76L217.85 41.76L217.85 30.90L226.11 30.90L226.11 41.76L232.05 41.76L232.05 48.78L226.11 48.78L226.11 68Z" />\r\n      <path id="target-char-h" d="M243.93 68L235.67 68L235.67 28.80L243.93 28.80L243.93 43.70Q246.74 41.22 251.00 41.22L251.00 41.22Q254.03 41.22 256.35 42.48Q258.67 43.75 259.97 46.02Q261.26 48.29 261.26 51.21L261.26 51.21L261.26 68L253.00 68L253.00 53.04Q253.00 50.99 251.73 49.72Q250.46 48.45 248.52 48.45L248.52 48.45Q246.52 48.45 245.23 49.72Q243.93 50.99 243.93 53.04L243.93 53.04L243.93 68Z" />\r\n      <path id="target-char-e" d="M279.52 68.59L279.52 68.59Q275.25 68.59 271.93 66.84Q268.61 65.08 266.72 61.98Q264.83 58.87 264.83 54.88L264.83 54.88Q264.83 50.94 266.69 47.86Q268.55 44.78 271.74 42.97Q274.93 41.16 278.92 41.16L278.92 41.16Q282.76 41.16 285.75 42.86Q288.75 44.56 290.45 47.51Q292.15 50.45 292.15 54.28L292.15 54.28Q292.15 55.74 291.77 57.58L291.77 57.58L272.98 57.63Q273.63 59.85 275.30 61.03Q276.98 62.22 279.46 62.22L279.46 62.22Q283.40 62.22 285.73 59.52L285.73 59.52L290.26 64.06Q288.32 66.33 285.56 67.46Q282.81 68.59 279.52 68.59ZM278.98 47.48L278.98 47.48Q276.71 47.48 275.14 48.67Q273.58 49.86 272.98 51.96L272.98 51.96L284.43 51.91Q283.40 47.48 278.98 47.48Z" />\r\n      <path id="target-char-x" d="M302.52 68L293.50 68L302.90 54.61L293.99 41.76L303.65 41.76L308.03 48.88L312.46 41.76L321.42 41.76L312.67 54.45L321.96 68L312.40 68L307.54 60.17L302.52 68Z" />\r\n    </defs>\r\n    <g id="preloader-morph-group">\r\n      <path id="morph-shape-0" d="M 18 50 L 44 32 L 44 68 Z" fill="#E0F9B5" />\r\n      <path id="morph-shape-1" d="M 54 30 L 63 30 L 63 70 L 54 70 Z" fill="#E0F9B5" />\r\n      <path id="morph-shape-2" d="M 96 50 L 70 68 L 70 32 Z" fill="#E0F9B5" />\r\n      <path id="morph-shape-3" d="M 135 34 A 16 16 0 1 0 135 66 A 16 16 0 1 0 135 34 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-4" d="M 152 40 L 180 40 L 166 75 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-5" d="M 183 41 L 209 41 L 209 67 L 183 67 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-6" d="M 215 31 L 229 31 L 229 68 L 215 68 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-7" d="M 235 29 L 261 29 L 261 68 L 235 68 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-8" d="M 278 41 A 14 14 0 1 0 278 69 A 14 14 0 1 0 278 41 Z" fill="#FFFFFF" />\r\n      <path id="morph-shape-9" d="M 308 41 L 322 55 L 308 69 L 294 55 Z" fill="#FFFFFF" />\r\n    </g>\r\n  </svg>\r\n</div>'
         },
         react: {
           available: true,
           component: "Preloader",
           import: "import { Preloader } from '@synthex-engineers/refined-tech/react';",
           snippet: "<Preloader />"
+        },
+        astro: {
+          available: true,
+          component: "Preloader",
+          import: "import { Preloader } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<Preloader />"
         }
       },
       ai_prompt_tag: "[SynthexAnimation: gsap-preloader | Angular: <st-preloader> | GSAP MorphSVGPlugin / Geometric Morph to Synthex Brand Identity]"
@@ -423,7 +435,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<input\n  type="text"\n  class="bg-charcoal border border-slateBorder focus:border-pistachio focus:outline-none focus:ring-1 focus:ring-pistachio text-white px-3 py-1.5 rounded-md text-xs font-mono transition-all w-48 placeholder-muted"\n  placeholder="B12345678"\n/>'
+          snippet: '<input\r\n  type="text"\r\n  class="bg-charcoal border border-slateBorder focus:border-pistachio focus:outline-none focus:ring-1 focus:ring-pistachio text-white px-3 py-1.5 rounded-md text-xs font-mono transition-all w-48 placeholder-muted"\r\n  placeholder="B12345678"\r\n/>'
         }
       },
       ai_prompt_tag: "[SynthexComponent: input-text | Angular: <st-input-text> | React: <InputText> | Style: Charcoal #111111 / Border #2A2A2A / Focus Pistachio #E0F9B5]"
@@ -507,7 +519,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<div class="p-6 rounded-2xl bg-slateSurface-card border border-slateBorder max-w-sm w-full text-center flex flex-col items-center gap-3 font-sans">\n  <div class="w-10 h-10 rounded-xl bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">\n    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n      <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>\n    </svg>\n  </div>\n  <h3 class="text-sm font-semibold text-white">Revisa tu bandeja de entrada</h3>\n  <p class="text-xs text-muted leading-relaxed">\n    Hemos enviado un enlace de acceso seguro a <span class="text-white font-mono">cliente@empresa.com</span>.\n  </p>\n  <button type="button" class="mt-2 text-xs text-pistachio hover:underline cursor-pointer">\n    Reenviar enlace de acceso\n  </button>\n</div>'
+          snippet: '<div class="p-6 rounded-2xl bg-slateSurface-card border border-slateBorder max-w-sm w-full text-center flex flex-col items-center gap-3 font-sans">\r\n  <div class="w-10 h-10 rounded-xl bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">\r\n    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\r\n      <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>\r\n    </svg>\r\n  </div>\r\n  <h3 class="text-sm font-semibold text-white">Revisa tu bandeja de entrada</h3>\r\n  <p class="text-xs text-muted leading-relaxed">\r\n    Hemos enviado un enlace de acceso seguro a <span class="text-white font-mono">cliente@empresa.com</span>.\r\n  </p>\r\n  <button type="button" class="mt-2 text-xs text-pistachio hover:underline cursor-pointer">\r\n    Reenviar enlace de acceso\r\n  </button>\r\n</div>'
         }
       },
       ai_prompt_tag: "[SynthexComponent: magic-link-card | Angular: <st-magic-link-card> | Style: Slate Card #1A1A1A / Border #2A2A2A / Pistachio Verification Accent]"
@@ -533,7 +545,7 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: '<div class="w-10 h-10 rounded-xl bg-pistachio flex items-center justify-center shadow-sm">\n  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="24" height="24">\n    <g stroke="#111111" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="translate(41, 56)">\n      <polyline points="40,24 14,46 40,68" />\n      <line x1="53" y1="72" x2="69" y2="20" />\n      <polyline points="82,24 108,46 82,68" />\n    </g>\n  </svg>\n</div>'
+          snippet: '<div class="w-10 h-10 rounded-xl bg-pistachio flex items-center justify-center shadow-sm">\r\n  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="24" height="24">\r\n    <g stroke="#111111" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="translate(41, 56)">\r\n      <polyline points="40,24 14,46 40,68" />\r\n      <line x1="53" y1="72" x2="69" y2="20" />\r\n      <polyline points="82,24 108,46 82,68" />\r\n    </g>\r\n  </svg>\r\n</div>'
         }
       },
       ai_prompt_tag: "[SynthexComponent: manifesto-icon-box | Squircle Pistachio #E0F9B5 / Official Pure SVG Logo #111111]"
@@ -755,10 +767,10 @@ var components_default = {
         },
         html: {
           available: true,
-          snippet: `<label class="inline-flex items-center gap-2 cursor-pointer font-sans">
-  <input type="checkbox" checked class="sr-only peer">
-  <div class="w-8 h-4 bg-slateBorder rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-charcoal after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-pistachio relative"></div>
-  <span class="text-xs text-white font-medium">Activo</span>
+          snippet: `<label class="inline-flex items-center gap-2 cursor-pointer font-sans">\r
+  <input type="checkbox" checked class="sr-only peer">\r
+  <div class="w-8 h-4 bg-slateBorder rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-charcoal after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-pistachio relative"></div>\r
+  <span class="text-xs text-white font-medium">Activo</span>\r
 </label>`
         }
       },