@synthex-engineers/refined-tech 0.0.0-stage → 1.0.0

package/dist/index.cjs

@@ -0,0 +1,910 @@
+'use strict';
+
+// tokens/index.ts
+var colors = {
+  charcoal: "#111111",
+  slateSurface: "#1E1E1E",
+  slateCard: "#1E1E1E",
+  slateBorder: "#2A2A2A",
+  pistachio: "#E0F9B5",
+  electric: "#CCF586",
+  snow: "#F4FDE4",
+  gold: "#D4AF37",
+  muted: "#8E8E93",
+  textPure: "#FFFFFF",
+  textDark: "#111111"
+};
+var fonts = {
+  display: "'Outfit', -apple-system, BlinkMacSystemFont, sans-serif",
+  body: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  sans: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  mono: "'JetBrains Mono', monospace"
+};
+var radii = {
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  squircle: "52px",
+  full: "9999px"
+};
+var spacing = {
+  "0.5": "2px",
+  "1": "4px",
+  "1.5": "6px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "5": "20px",
+  "6": "24px",
+  "8": "32px",
+  "10": "40px",
+  "12": "48px",
+  "16": "64px"
+};
+var heights = {
+  input: "44px",
+  btnPrimary: "44px",
+  btnSecondary: "36px",
+  btnMicro: "32px",
+  topbar: "64px",
+  sidebarWidth: "256px"
+};
+var shadows = {
+  subtle: "0 4px 14px rgba(0, 0, 0, 0.25)",
+  glowPistachio: "0 0 20px rgba(224, 249, 181, 0.15)",
+  glowElectric: "0 0 25px rgba(204, 245, 134, 0.20)"
+};
+var borders = {
+  thin: "1px solid #2A2A2A"
+};
+var tokens = {
+  colors,
+  fonts,
+  radii,
+  spacing,
+  heights,
+  shadows,
+  borders
+};
+var tokens_default = tokens;
+
+// registry/components.json
+var components_default = {
+  $schema: "http://json-schema.org/draft-07/schema#",
+  title: "SynthexComponentRegistry",
+  description: "Cat\xE1logo can\xF3nico de componentes Synthex Refined Tech con identificadores cruzados por framework y estado de disponibilidad",
+  version: "1.2.0",
+  updated_at: "2026-10-20",
+  components: [
+    {
+      id: "SRT-DRP-02",
+      slug: "animated-dropdown",
+      name: "Desplegable con Animaci\xF3n Suave",
+      category: "forms",
+      description: "Men\xFA desplegable con apertura fluida, transici\xF3n suave de escala, opacidad y traslaci\xF3n vertical (cubic-bezier), rotaci\xF3n animada de chevron y soporte para selecci\xF3n activa y cierre exterior.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<div class="relative inline-block w-64 font-sans text-left js-animated-dropdown">\n  <!-- Bot\xF3n Trigger con Chevron animado -->\n  <button\n    type="button"\n    class="w-full flex items-center justify-between gap-3 bg-charcoal border border-slateBorder hover:border-slateBorder-focus px-4 py-2.5 rounded-xl text-sm text-white focus:outline-none focus:border-pistachio transition-all cursor-pointer shadow-inner group"\n    aria-haspopup="listbox"\n    aria-expanded="false"\n  >\n    <div class="flex items-center gap-2 truncate">\n      <span class="w-2 h-2 rounded-full bg-pistachio shrink-0"></span>\n      <span class="truncate js-dropdown-label">Seleccionar opci\xF3n</span>\n    </div>\n    <svg\n      class="w-4 h-4 text-muted transition-transform duration-200 ease-out group-hover:text-white shrink-0 js-dropdown-chevron"\n      fill="none"\n      stroke="currentColor"\n      stroke-width="2"\n      viewBox="0 0 24 24"\n    >\n      <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" />\n    </svg>\n  </button>\n\n  <!-- Panel Desplegable Flotante con animaci\xF3n suave -->\n  <div\n    class="absolute left-0 mt-2 w-full bg-slateSurface-card border border-slateBorder rounded-xl shadow-2xl py-1.5 z-40 overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 pointer-events-none js-dropdown-panel"\n    role="listbox"\n  >\n    <div class="px-3.5 py-1.5 text-xs font-mono text-muted uppercase tracking-wider border-b border-slateBorder/50">\n      Opciones Disponibles\n    </div>\n    <button\n      type="button"\n      class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-white flex items-center justify-between text-xs transition-colors cursor-pointer js-dropdown-item"\n      data-value="opt-1"\n    >\n      <span class="font-medium text-white">Opci\xF3n Primaria A</span>\n      <span class="text-pistachio font-bold">\u2713</span>\n    </button>\n    <button\n      type="button"\n      class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-muted hover:text-white flex items-center justify-between text-xs transition-colors cursor-pointer js-dropdown-item"\n      data-value="opt-2"\n    >\n      <span>Opci\xF3n Secundaria B</span>\n    </button>\n    <button\n      type="button"\n      class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-muted hover:text-white flex items-center justify-between text-xs transition-colors cursor-pointer js-dropdown-item"\n      data-value="opt-3"\n    >\n      <span>Opci\xF3n Extendida C</span>\n    </button>\n  </div>\n</div>'
+        },
+        angular: {
+          available: true,
+          selector: "st-animated-dropdown",
+          import: "import { AnimatedDropdownComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-animated-dropdown [items]="opciones" [(value)]="seleccion" placeholder="Elegir entorno..." />'
+        },
+        react: {
+          available: true,
+          component: "AnimatedDropdown",
+          import: "import { AnimatedDropdown } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<AnimatedDropdown items={opciones} value={seleccion} onChange={setSeleccion} placeholder="Elegir entorno..." />'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: animated-dropdown | Angular: <st-animated-dropdown> | Style: Charcoal #111111 / Smooth Origin-Top Scale / Pistachio Accent #E0F9B5 / Chevron Rotation]"
+    },
+    {
+      id: "SRT-BDG-01",
+      slug: "badge-status",
+      name: "Badge de Estado T\xE9cnico",
+      category: "feedback",
+      description: "Etiqueta t\xE9cnica sobria para condiciones operativas (sellado, verificado, en cola) con tipograf\xEDa monospaced y alto contraste.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-badge-status",
+          import: "import { BadgeStatusComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-badge-status label="Ledger Sellado" status="success"></st-badge-status>'
+        },
+        react: {
+          available: true,
+          component: "BadgeStatus",
+          import: "import { BadgeStatus } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<BadgeStatus label="Ledger Sellado" status="success" />'
+        },
+        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">\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]"
+    },
+    {
+      id: "SRT-CRD-02",
+      slug: "bento-grid-card",
+      name: "Tarjeta Bento de Ingenier\xEDa",
+      category: "cards",
+      description: "Contenedor bento modular extra\xEDdo de la web corporativa, con micro-borde de 1px, acento pistacho y dise\xF1o t\xE9cnico sobrio.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-bento-card",
+          import: "import { BentoCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-bento-card title="Ciberseguridad" description="Encadenamiento SHA-256 e inmutabilidad"></st-bento-card>'
+        },
+        react: {
+          available: true,
+          component: "BentoGridCard",
+          import: "import { BentoGridCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<BentoGridCard title="Ciberseguridad" description="Encadenamiento SHA-256 e inmutabilidad" />'
+        },
+        html: {
+          available: true,
+          snippet: '<div class="p-5 rounded-2xl bg-slateSurface-card border border-slateBorder hover:border-pistachio/40 transition-all flex flex-col gap-2 w-64 font-sans">\n  <div class="w-7 h-7 rounded-lg bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">\n    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>\n  </div>\n  <h4 class="text-xs font-semibold text-white">Ciberseguridad y Criptograf\xEDa</h4>\n  <p class="text-xs text-muted leading-relaxed">Encadenamiento SHA-256 e inmutabilidad garantizada.</p>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: bento-grid-card | Angular: <st-bento-card> | React: <BentoGridCard> | Style: Bento Card #1A1A1A / Border #2A2A2A / Pistachio Icon Box]"
+    },
+    {
+      id: "SRT-BTN-03",
+      slug: "button-outline",
+      name: "Bot\xF3n Contorno T\xE9cnico",
+      category: "actions",
+      description: "Bot\xF3n de contorno transparente con micro-borde Verde Pistacho (#E0F9B5) y texto Pistacho sobre fondo oscuro.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-button-outline",
+          import: "import { ButtonOutlineComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-button-outline (onClick)="handleExport()">Exportar Ledger</st-button-outline>'
+        },
+        react: {
+          available: true,
+          component: "ButtonOutline",
+          import: "import { ButtonOutline } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<ButtonOutline />"
+        },
+        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">\r\n  Exportar Ledger\r\n</button>'
+        },
+        astro: {
+          available: true,
+          component: "ButtonOutline",
+          import: "import { ButtonOutline } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<ButtonOutline />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: button-outline | Angular: <st-button-outline> | Style: Transparent / Pistachio Border #E0F9B5]"
+    },
+    {
+      id: "SRT-BTN-01",
+      slug: "button-primary",
+      name: "Bot\xF3n Primario Pistacho",
+      category: "actions",
+      description: "Bot\xF3n de acci\xF3n principal con fondo Verde Pistacho (#E0F9B5), texto Negro Carb\xF3n (#111111) y micro-transici\xF3n suave.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-button-primary",
+          import: "import { ButtonPrimaryComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-button-primary (onClick)="handleSubmit()">Confirmar Acci\xF3n</st-button-primary>'
+        },
+        react: {
+          available: true,
+          component: "ButtonPrimary",
+          import: "import { ButtonPrimary } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<ButtonPrimary onClick={handleSubmit}>Confirmar Acci\xF3n</ButtonPrimary>"
+        },
+        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">\r\n  Confirmar Acci\xF3n\r\n</button>'
+        },
+        astro: {
+          available: true,
+          component: "ButtonPrimary",
+          import: "import { ButtonPrimary } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<ButtonPrimary />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: button-primary | Angular: <st-button-primary> | React: <ButtonPrimary> | Style: Pistachio #E0F9B5 / Charcoal #111111]"
+    },
+    {
+      id: "SRT-BTN-02",
+      slug: "button-secondary",
+      name: "Bot\xF3n Secundario Pizarra",
+      category: "actions",
+      description: "Bot\xF3n de acci\xF3n secundaria con fondo Gris Pizarra (#1E1E1E), micro-borde (#2A2A2A) y texto blanco.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-button-secondary",
+          import: "import { ButtonSecondaryComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-button-secondary (onClick)="handleCancel()">Cancelar</st-button-secondary>'
+        },
+        react: {
+          available: true,
+          component: "ButtonSecondary",
+          import: "import { ButtonSecondary } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<ButtonSecondary />"
+        },
+        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">\r\n  Cancelar\r\n</button>'
+        },
+        astro: {
+          available: true,
+          component: "ButtonSecondary",
+          import: "import { ButtonSecondary } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<ButtonSecondary />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: button-secondary | Angular: <st-button-secondary> | Style: Slate #1E1E1E / Border #2A2A2A]"
+    },
+    {
+      id: "SRT-CRD-05",
+      slug: "client-trust-card",
+      name: "Tarjeta de Confianza Institucional",
+      category: "cards",
+      description: "Tarjeta minimalista para acreditaci\xF3n de clientes institucionales con logotipo integrado con transparencia, raz\xF3n social destacada, pa\xEDs y enlace directo a la empresa.",
+      frameworks: {
+        html: {
+          available: true,
+          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,
+          selector: "st-client-trust-card",
+          import: "import { ClientTrustCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-client-trust-card clientName="SD-M GmbH" location="Alemania" href="https://sd-kpi.com/" logoSrc="/brand/sd-m-logo-dark.png"></st-client-trust-card>'
+        },
+        react: {
+          available: true,
+          component: "ClientTrustCard",
+          import: "import { ClientTrustCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<ClientTrustCard clientName="SD-M GmbH" location="Alemania" href="https://sd-kpi.com/" logoSrc="/brand/sd-m-logo-dark.png" />'
+        },
+        astro: {
+          available: true,
+          component: "ClientTrustCard",
+          import: "import { ClientTrustCard } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<ClientTrustCard />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: client-trust-card | Angular: <st-client-trust-card> | React: <ClientTrustCard> | Style: Slate Surface #1E1E1E / Border #2A2A2A / Pistachio Hover / Analytical Vector Logo]"
+    },
+    {
+      id: "SRT-CMD-01",
+      slug: "command-k-trigger",
+      name: "Disparador Command K",
+      category: "navigation",
+      description: "Bot\xF3n de cabecera con atajo de teclado integrado (Ctrl+K) para invocar la paleta de comandos de b\xFAsqueda sem\xE1ntica.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-command-k-trigger",
+          import: "import { CommandKTriggerComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-command-k-trigger (onOpen)="openPalette()"></st-command-k-trigger>'
+        },
+        react: {
+          available: true,
+          component: "CommandKTrigger",
+          import: "import { CommandKTrigger } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<CommandKTrigger onOpen={openPalette} />"
+        },
+        html: {
+          available: true,
+          snippet: '<button class="flex items-center justify-between gap-3 bg-slateSurface text-muted border border-slateBorder px-3 py-1.5 rounded-md text-xs hover:border-pistachio/40 transition-colors w-48 cursor-pointer">\n  <span class="flex items-center gap-1.5">\n    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>\n    <span>Buscar o ejecutar...</span>\n  </span>\n  <kbd class="bg-charcoal border border-slateBorder text-xs px-1.5 py-0.5 rounded text-white font-mono">Ctrl K</kbd>\n</button>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: command-k-trigger | Angular: <st-command-k-trigger> | React: <CommandKTrigger> | Style: Slate Container #1E1E1E / Muted Text / Keyboard Badge]"
+    },
+    {
+      id: "SRT-INP-02",
+      slug: "dropdown-select",
+      name: "Selector Desplegable Primario",
+      category: "forms",
+      description: "Selector desplegable primario con estilo oscuro SRT (bg-charcoal), borde sutil (border-slateBorder), foco pistacho (border-pistachio), icono chevron SVG y opciones tipogr\xE1ficas.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<div class="relative w-full max-w-xs font-sans text-left">\n  <!-- Bot\xF3n Trigger con Chevron animado -->\n  <button\n    type="button"\n    class="w-full flex items-center justify-between gap-3 bg-charcoal border border-slateBorder hover:border-slateBorder-focus px-4 py-2.5 rounded-xl text-sm text-white focus:outline-none focus:border-pistachio transition-all cursor-pointer shadow-inner group"\n    aria-haspopup="listbox"\n    aria-expanded="false"\n  >\n    <div class="flex items-center gap-2 truncate">\n      <span class="w-2 h-2 rounded-full bg-pistachio shrink-0"></span>\n      <span class="truncate">Synthex Ledger Core</span>\n    </div>\n    <svg\n      class="w-4 h-4 text-muted transition-transform duration-200 ease-out group-hover:text-white shrink-0"\n      fill="none"\n      stroke="currentColor"\n      stroke-width="2"\n      viewBox="0 0 24 24"\n    >\n      <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" />\n    </svg>\n  </button>\n\n  <!-- Panel Desplegable Flotante con animaci\xF3n suave -->\n  <div\n    class="absolute left-0 mt-2 w-full bg-slateSurface-card border border-slateBorder rounded-xl shadow-2xl py-1.5 z-40 overflow-hidden"\n    role="listbox"\n  >\n    <button type="button" class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-white flex items-center justify-between text-xs transition-colors cursor-pointer">\n      <span class="font-medium text-white">Synthex Ledger Core</span>\n      <span class="text-pistachio font-bold">\u2713</span>\n    </button>\n    <button type="button" class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-muted hover:text-white flex items-center justify-between text-xs transition-colors cursor-pointer">\n      <span>Synthex Gym ERP</span>\n    </button>\n    <button type="button" class="w-full text-left px-3.5 py-2.5 hover:bg-slateBorder text-muted hover:text-white flex items-center justify-between text-xs transition-colors cursor-pointer">\n      <span>Synthex Refined Tech</span>\n    </button>\n  </div>\n</div>'
+        },
+        angular: {
+          available: true,
+          selector: "st-dropdown-select",
+          import: "import { DropdownSelectComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-dropdown-select [options]="opciones" [(value)]="seleccionado" label="Proyecto" />'
+        },
+        react: {
+          available: true,
+          component: "DropdownSelect",
+          import: "import { DropdownSelect } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<DropdownSelect options={opciones} value={seleccionado} onChange={setSeleccionado} label="Proyecto" />'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: dropdown-select | Angular: <st-dropdown-select> | Style: Charcoal Container / Pistachio Focus #E0F9B5 / Chevron SVG]"
+    },
+    {
+      id: "SRT-GSAP-FBT01",
+      slug: "gsap-footer-bounce",
+      name: "Rebote El\xE1stico de Footer GSAP",
+      category: "animations",
+      description: "Animaci\xF3n cinem\xE1tica oficial de Synthex para curvas SVG de fondo con interpolaci\xF3n el\xE1stica (elastic.out) en scroll o disparador.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-footer-bounce",
+          import: "import { FooterBounceComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: `<st-footer-bounce [color]="'#E0F9B5'"></st-footer-bounce>`
+        },
+        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">\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 />"
+        }
+      },
+      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)]"
+    },
+    {
+      id: "SRT-GSAP-MAG01",
+      slug: "gsap-magnetic-button",
+      name: "Bot\xF3n con Atracci\xF3n Magn\xE9tica GSAP",
+      category: "animations",
+      description: "Componente interactivo con atracci\xF3n magn\xE9tica del cursor mediante interpolaci\xF3n suave GSAP quickTo.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-magnetic-button",
+          import: "import { MagneticButtonComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-magnetic-button [strength]="0.35" (onClick)="handleClick()">Im\xE1n GSAP</st-magnetic-button>'
+        },
+        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">\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,
+          component: "MagneticButton",
+          import: "import { MagneticButton } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<MagneticButton />"
+        }
+      },
+      ai_prompt_tag: "[SynthexAnimation: gsap-magnetic-button | Angular: <st-magnetic-button> | GSAP quickTo | Strength: 0.35]"
+    },
+    {
+      id: "SRT-GSAP-PRE01",
+      slug: "gsap-preloader",
+      name: "Preload Metamorfosis Geom\xE9trica GSAP",
+      category: "animations",
+      description: "Animaci\xF3n cinem\xE1tica oficial de Synthex con metamorfosis progresiva de pol\xEDgonos elementales (tri\xE1ngulos, rect\xE1ngulos, c\xEDrculos, cuadrados y rombos) hacia el logotipo oficial Synthex mediante GSAP MorphSVGPlugin.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-preloader",
+          import: "import { PreloaderComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-preloader (onFinish)="handleLoaded()"></st-preloader>'
+        },
+        html: {
+          available: true,
+          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 />"
+        }
+      },
+      ai_prompt_tag: "[SynthexAnimation: gsap-preloader | Angular: <st-preloader> | GSAP MorphSVGPlugin / Geometric Morph to Synthex Brand Identity]"
+    },
+    {
+      id: "SRT-TLP-01",
+      slug: "help-tooltip",
+      name: "Tooltip de Ayuda Flotante",
+      category: "feedback",
+      description: "Burbuja de ayuda contextual accesible con icono t\xE9cnico '?' discreto, despliegue flotante suave en hover/focus con micro-flecha, micro-borde SRT de 1px, fondo charcoal y tipograf\xEDa legible.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: `<div class="relative inline-flex items-center group/tooltip font-sans select-none js-help-tooltip">
+  <!-- Bot\xF3n Trigger Discreto con Icono '?' -->
+  <button
+    type="button"
+    class="w-5 h-5 rounded-full bg-slateSurface border border-slateBorder text-muted hover:text-pistachio hover:border-pistachio/50 flex items-center justify-center text-xs font-mono transition-colors cursor-help focus:outline-none focus:border-pistachio"
+    aria-label="M\xE1s informaci\xF3n"
+  >
+    ?
+  </button>
+
+  <!-- Burbuja Flotante de Ayuda Flotante (Tooltip) -->
+  <div
+    class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 rounded-xl bg-charcoal border border-slateBorder shadow-2xl text-xs text-white/90 whitespace-normal w-56 text-center opacity-0 scale-95 pointer-events-none group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100 group-focus-within/tooltip:opacity-100 group-focus-within/tooltip:scale-100 transition-all duration-200 ease-out z-50 origin-bottom"
+    role="tooltip"
+  >
+    <div class="flex items-center justify-center gap-1.5 mb-1 text-pistachio font-semibold font-mono text-xs">
+      <span class="w-1.5 h-1.5 rounded-full bg-pistachio"></span>
+      <span>Informaci\xF3n T\xE9cnica</span>
+    </div>
+    <p class="text-xs text-muted leading-relaxed">
+      Los registros sellados en el ledger garantizan inmutabilidad mediante firmas SHA-256 encadenadas.
+    </p>
+    <!-- Flecha indicadora inferior -->
+    <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-charcoal border-r border-b border-slateBorder rotate-45"></div>
+  </div>
+</div>`
+        },
+        angular: {
+          available: true,
+          selector: "st-help-tooltip",
+          import: "import { HelpTooltipComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-help-tooltip text="Firmas criptogr\xE1ficas SHA-256 encadenadas" title="Informaci\xF3n" />'
+        },
+        react: {
+          available: true,
+          component: "HelpTooltip",
+          import: "import { HelpTooltip } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<HelpTooltip text="Firmas criptogr\xE1ficas SHA-256 encadenadas" title="Informaci\xF3n" />'
+        },
+        astro: {
+          available: true,
+          component: "HelpTooltip",
+          import: "import { HelpTooltip } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<HelpTooltip />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: help-tooltip | Angular: <st-help-tooltip> | Style: Charcoal #111111 / Smooth Origin-Bottom / Slate Border #2A2A2A / Pistachio Accent #E0F9B5]"
+    },
+    {
+      id: "SRT-INP-01",
+      slug: "input-text",
+      name: "Campo de Entrada con Micro-Borde",
+      category: "inputs",
+      description: "Campo de formulario t\xE9cnico con fondo oscuro, micro-borde de 1px y anillo de enfoque Verde Pistacho.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-input-text",
+          import: "import { InputTextComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-input-text placeholder="B12345678" [(value)]="cif"></st-input-text>'
+        },
+        react: {
+          available: true,
+          component: "InputText",
+          import: "import { InputText } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<InputText placeholder="B12345678" value={cif} onChange={e => setCif(e.target.value)} />'
+        },
+        html: {
+          available: true,
+          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]"
+    },
+    {
+      id: "SRT-NAV-03",
+      slug: "language-selector-dropdown",
+      name: "Selector de Idioma Desplegable",
+      category: "navigation",
+      description: "Men\xFA desplegable estilizado para selecci\xF3n de idioma con bot\xF3n trigger, rotaci\xF3n de chevron, panel flotante animado y opciones accesibles.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<div class="relative inline-block text-left shrink-0 font-sans js-lang-dropdown">\n  <button\n    type="button"\n    class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-code font-medium text-white/80 hover:text-white bg-slateSurface hover:bg-slateBorder/80 border border-slateBorder hover:border-pistachio/50 transition-all cursor-pointer shadow-sm group select-none"\n    aria-haspopup="listbox"\n    aria-expanded="false"\n  >\n    <span class="w-1.5 h-1.5 rounded-full bg-pistachio shrink-0"></span>\n    <span class="tracking-wider uppercase text-pistachio font-bold">ES</span>\n    <svg class="w-3.5 h-3.5 text-white/50 transition-transform duration-200 ease-out group-hover:text-white shrink-0 group-aria-expanded:rotate-180" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n      <path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" />\n    </svg>\n  </button>\n  <div class="absolute right-0 mt-2 w-44 bg-charcoal border border-slateBorder rounded-xl shadow-2xl py-1.5 z-50 overflow-hidden" role="listbox">\n    <div class="px-3 py-1 text-xs font-mono text-muted uppercase tracking-wider border-b border-slateBorder/50">\n      Idioma / Language\n    </div>\n    <button type="button" class="w-full text-left px-3 py-2 hover:bg-slateBorder flex items-center justify-between text-xs font-code text-white">\n      <span class="font-medium text-white">Espa\xF1ol</span>\n      <span class="text-pistachio font-bold">\u2713</span>\n    </button>\n    <button type="button" class="w-full text-left px-3 py-2 hover:bg-slateBorder flex items-center justify-between text-xs font-code text-muted hover:text-white">\n      <span>English</span>\n    </button>\n  </div>\n</div>'
+        },
+        angular: {
+          available: true,
+          selector: "st-language-selector-dropdown",
+          import: "import { LanguageSelectorDropdownComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-language-selector-dropdown [currentLang]="lang" (langChange)="onLangChange($event)"></st-language-selector-dropdown>'
+        },
+        react: {
+          available: true,
+          component: "LanguageSelectorDropdown",
+          import: "import { LanguageSelectorDropdown } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<LanguageSelectorDropdown currentLang="es" onLangChange={(lang) => setLang(lang)} />'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: language-selector-dropdown | Angular: <st-language-selector-dropdown> | React: <LanguageSelectorDropdown> | Style: Charcoal #111111 / Smooth Origin-Top Scale / Pistachio Accent #E0F9B5 / Chevron Rotation]"
+    },
+    {
+      id: "SRT-NAV-02",
+      slug: "language-selector-pill",
+      name: "Selector de Idioma Inline Pill",
+      category: "navigation",
+      description: "Selector inline de idioma con toggle interactivo ES / EN, punto de acento pistacho y animaci\xF3n ripple radial.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<button\n  type="button"\n  class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-code font-medium text-white/80 hover:text-white bg-slateSurface hover:bg-slateBorder/80 border border-slateBorder hover:border-pistachio/50 transition-all cursor-pointer shadow-sm group active:scale-95 select-none"\n  aria-label="Cambiar idioma / Switch language"\n>\n  <span class="w-1.5 h-1.5 rounded-full bg-pistachio shrink-0"></span>\n  <span class="text-pistachio font-bold">ES</span>\n  <span class="text-white/30 font-light">/</span>\n  <span class="text-white/40 group-hover:text-white transition-colors">EN</span>\n</button>'
+        },
+        angular: {
+          available: true,
+          selector: "st-language-selector-pill",
+          import: "import { LanguageSelectorPillComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-language-selector-pill [currentLang]="lang" (langChange)="onLangChange($event)"></st-language-selector-pill>'
+        },
+        react: {
+          available: true,
+          component: "LanguageSelectorPill",
+          import: "import { LanguageSelectorPill } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<LanguageSelectorPill currentLang="es" onLangChange={(lang) => setLang(lang)} />'
+        },
+        astro: {
+          available: true,
+          component: "LanguageSelectorPill",
+          import: "import { LanguageSelectorPill } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<LanguageSelectorPill />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: language-selector-pill | Angular: <st-language-selector-pill> | React: <LanguageSelectorPill> | Style: Slate Rail #1E1E1E / Border #2A2A2A / Pistachio Dot #E0F9B5 / Inline Pill]"
+    },
+    {
+      id: "SRT-MLC-01",
+      slug: "magic-link-card",
+      name: "Tarjeta Acceso Magic Link",
+      category: "feedback",
+      description: "Tarjeta de acceso sin credenciales mediante enlace criptogr\xE1fico temporal para el portal de clientes de Synthex Ledger.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-magic-link-card",
+          import: "import { MagicLinkCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: `<st-magic-link-card [email]="'cliente@empresa.com'" (onResend)="handleResend()"></st-magic-link-card>`
+        },
+        react: {
+          available: true,
+          component: "MagicLinkCard",
+          import: "import { MagicLinkCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<MagicLinkCard />"
+        },
+        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">\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]"
+    },
+    {
+      id: "SRT-ICN-01",
+      slug: "manifesto-icon-box",
+      name: "Caja Isotipo Squircle",
+      category: "cards",
+      description: "Contenedor squircle oficial en Verde Pistacho (#E0F9B5) con el isotipo </> can\xF3nico de Synthex en Negro Carb\xF3n (#111111).",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-icon-box",
+          import: "import { ManifestoIconBoxComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-icon-box [size]="40"></st-icon-box>'
+        },
+        react: {
+          available: true,
+          component: "ManifestoIconBox",
+          import: "import { ManifestoIconBox } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<ManifestoIconBox size={40} />"
+        },
+        html: {
+          available: true,
+          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]"
+    },
+    {
+      id: "SRT-CRD-01",
+      slug: "metric-card",
+      name: "Tarjeta M\xE9trica Bento",
+      category: "data-display",
+      description: "Contenedor bento para KPIs, facturaci\xF3n o contabilidad con valor num\xE9rico grande, etiqueta y tendencia.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-metric-card",
+          import: "import { MetricCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-metric-card label="Facturaci\xF3n 3T" value="14.850 \u20AC" trend="+12.4% vs anterior"></st-metric-card>'
+        },
+        react: {
+          available: true,
+          component: "MetricCard",
+          import: "import { MetricCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<MetricCard label="Facturaci\xF3n 3T" value="14.850 \u20AC" trend="+12.4% vs anterior" />'
+        },
+        html: {
+          available: true,
+          snippet: '<div class="p-4 rounded-xl bg-slateSurface border border-slateBorder flex flex-col gap-1 w-56 font-sans">\n  <span class="text-xs text-muted uppercase font-mono tracking-wider">Facturaci\xF3n 3T</span>\n  <span class="text-2xl font-bold text-white font-mono">14.850 \u20AC</span>\n  <span class="text-xs text-pistachio font-mono">\u2191 +12.4% vs anterior</span>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: metric-card | Angular: <st-metric-card> | React: <MetricCard> | Style: Bento Card #1E1E1E / Border #2A2A2A / White Large Figure / Pistachio Trend]"
+    },
+    {
+      id: "SRT-MOD-01",
+      slug: "modal-dialog",
+      name: "Di\xE1logo Modal Accesible SRT",
+      category: "overlays",
+      description: "Di\xE1logo modal con cobertura total de viewport (fixed inset-0 w-screen h-screen), backdrop difuminado (bg-black/80 backdrop-blur-md), cierre al clic exterior, bot\xF3n de cierre 'X' SVG refinado y contenedor scrolleable.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<div class="fixed inset-0 w-screen h-screen z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md">\n  <div class="w-full max-w-lg bg-charcoal-card border border-slateBorder rounded-2xl p-6 sm:p-8 space-y-5 shadow-2xl relative">\n    <div class="flex items-center justify-between pb-3 border-b border-slateBorder/60">\n      <h2 class="text-xl font-bold text-white font-display">Confirmar Operaci\xF3n</h2>\n      <button class="w-8 h-8 rounded-lg text-muted hover:text-white hover:bg-slateSurface transition-colors flex items-center justify-center cursor-pointer">\n        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n          <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />\n        </svg>\n      </button>\n    </div>\n    <div class="text-sm text-white/80 leading-relaxed">\n      Contenido descriptivo del di\xE1logo modal con tipograf\xEDa refinada y micro-bordes can\xF3nicos.\n    </div>\n    <div class="flex items-center justify-end gap-3 pt-2">\n      <button class="px-4 py-2 rounded-lg text-xs font-mono text-muted bg-slateSurface border border-slateBorder hover:text-white transition-colors">\n        Cancelar\n      </button>\n      <button class="px-4 py-2 rounded-lg text-xs font-mono text-charcoal bg-pistachio hover:bg-pistachio-hover font-semibold transition-colors">\n        Confirmar\n      </button>\n    </div>\n  </div>\n</div>'
+        },
+        angular: {
+          available: true,
+          selector: "st-modal-dialog",
+          import: "import { ModalDialogComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: `<st-modal-dialog [visible]="abierto" [title]="'T\xEDtulo'" (closed)="abierto = false">
+  <p>Contenido</p>
+</st-modal-dialog>`
+        },
+        react: {
+          available: true,
+          component: "ModalDialog",
+          import: "import { ModalDialog } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<ModalDialog isOpen={abierto} onClose={() => setAbierto(false)} title="T\xEDtulo">\n  <p>Contenido</p>\n</ModalDialog>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: modal-dialog | Angular: <st-modal-dialog> | Backdrop: w-screen h-screen bg-black/80 backdrop-blur-md | Close: Backdrop Click + SVG X]"
+    },
+    {
+      id: "SRT-CRD-06",
+      slug: "process-step-card",
+      name: "Tarjeta de Proceso Numerada",
+      category: "cards",
+      description: "Tarjeta de proceso met\xF3dico en 3 pasos con n\xFAmero monospaced pistacho, contenedor de icono 32x32, t\xEDtulo t\xE9cnico, descripci\xF3n y badge inferior de garant\xEDa.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<article class="p-8 rounded-3xl bg-slateSurface/80 border border-slateBorder hover:border-pistachio/40 transition-all duration-300 flex flex-col justify-between group shadow-sm font-sans">\n  <div>\n    <div class="flex items-center justify-between mb-6">\n      <span class="text-2xl sm:text-3xl font-mono font-bold text-pistachio tracking-tight">01</span>\n      <div class="w-8 h-8 rounded-lg bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">\n        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />\n        </svg>\n      </div>\n    </div>\n    <h3 class="text-xl font-display font-bold text-white mb-3 group-hover:text-pistachio transition-colors">\n      Diagn\xF3stico y alcance cerrado\n    </h3>\n    <p class="text-sm text-muted font-sans leading-relaxed">\n      Evaluaci\xF3n de arquitectura t\xE9cnica y formulaci\xF3n de alcance preciso sin sorpresas ni costes ocultos.\n    </p>\n  </div>\n  <div class="mt-8 pt-4 border-t border-slateBorder/50 text-sm font-mono text-muted">\n    Presupuesto cerrado\n  </div>\n</article>'
+        },
+        angular: {
+          available: true,
+          selector: "st-process-step-card",
+          import: "import { ProcessStepCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-process-step-card stepNumber="01" title="Diagn\xF3stico y alcance cerrado" description="Evaluamos requerimientos y formulamos propuesta t\xE9cnica con presupuesto cerrado." badge="Presupuesto cerrado"></st-process-step-card>'
+        },
+        react: {
+          available: true,
+          component: "ProcessStepCard",
+          import: "import { ProcessStepCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<ProcessStepCard stepNumber="01" title="Diagn\xF3stico y alcance cerrado" description="Evaluamos requerimientos y formulamos propuesta t\xE9cnica con presupuesto cerrado." badge="Presupuesto cerrado" />'
+        },
+        astro: {
+          available: true,
+          component: "ProcessStepCard",
+          import: "import { ProcessStepCard } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<ProcessStepCard />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: process-step-card | Angular: <st-process-step-card> | React: <ProcessStepCard> | Style: Slate Surface #1E1E1E / Mono Pistachio Number / Icon Box 32x32 / Bottom Badge]"
+    },
+    {
+      id: "SRT-ROLE-01",
+      slug: "role-view-switcher",
+      name: "Selector de Perspectiva de Rol",
+      category: "navigation",
+      description: "Men\xFA desplegable refinado de cabecera para alternar la perspectiva de vista entre Administrador, Colaborador Laboral y Aut\xF3nomo/Socio.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-role-view-switcher",
+          import: "import { RoleViewSwitcherComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-role-view-switcher [activePerspective]="perspective()" (onPerspectiveChange)="changePerspective($event)"></st-role-view-switcher>'
+        },
+        react: {
+          available: true,
+          component: "RoleViewSwitcher",
+          import: "import { RoleViewSwitcher } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<RoleViewSwitcher activePerspective={perspective} onPerspectiveChange={changePerspective} />"
+        },
+        html: {
+          available: true,
+          snippet: '<div class="inline-flex items-center bg-charcoal-surface border border-slateBorder p-0.5 rounded-xl text-xs select-none shadow-xs">\n  <button type="button" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-pistachio text-charcoal font-semibold cursor-pointer">\n    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>\n    <span>Admin</span>\n  </button>\n  <button type="button" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-muted hover:text-white transition-colors cursor-pointer">\n    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>\n    <span>Colaborador</span>\n  </button>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: role-view-switcher | Angular: <st-role-view-switcher> | React: <RoleViewSwitcher> | Style: Dropdown #1E1E1E / Multi-Perspective Admin-Laboral-Autonomo / Pistachio Accent]"
+    },
+    {
+      id: "SRT-CRD-07",
+      slug: "solution-bento-card",
+      name: "Tarjeta Bento de Soluci\xF3n y Pilares T\xE9cnicos",
+      category: "cards",
+      description: "Tarjeta bento para pilares t\xE9cnicos con contenedor de icono 48x48, badge sem\xE1ntico de disciplina, lista de vi\xF1etas con vi\xF1etas pistacho y bot\xF3n CTA con chevron reactivo.",
+      frameworks: {
+        html: {
+          available: true,
+          snippet: '<article class="p-8 sm:p-10 rounded-3xl bg-slateSurface/80 border border-slateBorder hover:border-pistachio/40 transition-all duration-300 flex flex-col justify-between group shadow-sm font-sans">\n  <div>\n    <div class="flex items-center justify-between mb-6">\n      <div class="w-12 h-12 rounded-xl bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio group-hover:scale-105 transition-transform">\n        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n          <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />\n        </svg>\n      </div>\n      <span class="px-3 py-1 rounded-full bg-slateCard text-pistachio text-sm font-mono font-semibold border border-slateBorder">\n        Core Software\n      </span>\n    </div>\n\n    <h3 class="text-2xl sm:text-3xl font-display font-bold text-white mb-4 group-hover:text-pistachio transition-colors">\n      Ingenier\xEDa y Desarrollo de Software\n    </h3>\n\n    <p class="text-sm sm:text-base text-muted font-sans leading-relaxed mb-8">\n      Dise\xF1o e implementaci\xF3n de sistemas deterministas y aplicaciones web/m\xF3vil con arquitectura limpia y tipado estricto.\n    </p>\n\n    <ul class="space-y-3 mb-10 text-sm font-sans text-white/80">\n      <li class="flex items-start gap-3">\n        <span class="w-1.5 h-1.5 rounded-full bg-pistachio mt-2 shrink-0"></span>\n        <span>Arquitecturas modulares basadas en Clean Architecture y SOLID</span>\n      </li>\n      <li class="flex items-start gap-3">\n        <span class="w-1.5 h-1.5 rounded-full bg-pistachio mt-2 shrink-0"></span>\n        <span>Cobertura universal de pruebas automatizadas y ciclo TDD</span>\n      </li>\n      <li class="flex items-start gap-3">\n        <span class="w-1.5 h-1.5 rounded-full bg-pistachio mt-2 shrink-0"></span>\n        <span>Entrega completa de c\xF3digo fuente sin ataduras t\xE9cnicas</span>\n      </li>\n    </ul>\n  </div>\n\n  <div>\n    <a\n      href="/servicios/"\n      class="inline-flex items-center justify-between w-full px-5 py-3.5 rounded-xl bg-slateCard hover:bg-slateBorder/80 text-white hover:text-pistachio border border-slateBorder hover:border-pistachio/50 font-display font-semibold text-sm transition-all duration-200 group/btn"\n    >\n      <span>Explorar servicios y tarifas</span>\n      <svg class="w-4 h-4 text-pistachio transform group-hover/btn:translate-x-1 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />\n      </svg>\n    </a>\n  </div>\n</article>'
+        },
+        angular: {
+          available: true,
+          selector: "st-solution-bento-card",
+          import: "import { SolutionBentoCardComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-solution-bento-card title="Ingenier\xEDa y Desarrollo de Software" description="Arquitecturas escalables de alta disponibilidad." badge="Core Software" [bulletPoints]="puntos" ctaText="Ver Servicios" ctaHref="/servicios/"></st-solution-bento-card>'
+        },
+        react: {
+          available: true,
+          component: "SolutionBentoCard",
+          import: "import { SolutionBentoCard } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<SolutionBentoCard title="Ingenier\xEDa y Desarrollo de Software" description="Arquitecturas escalables de alta disponibilidad." badge="Core Software" bulletPoints={puntos} ctaText="Ver Servicios" ctaHref="/servicios/" />'
+        },
+        astro: {
+          available: true,
+          component: "SolutionBentoCard",
+          import: "import { SolutionBentoCard } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<SolutionBentoCard />"
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: solution-bento-card | Angular: <st-solution-bento-card> | React: <SolutionBentoCard> | Style: Slate Surface #1E1E1E / Border #2A2A2A / Icon Box 48x48 / Full-width SlateCard CTA]"
+    },
+    {
+      id: "SRT-TBL-01",
+      slug: "table-ledger-row",
+      name: "Fila de Ledger Criptogr\xE1fico",
+      category: "data-display",
+      description: "Fila t\xE9cnica de tabla para Synthex Ledger con hash SHA-256 truncado copiable, marca de tiempo y verificaci\xF3n de bloque.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-ledger-row",
+          import: "import { TableLedgerRowComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: `<st-ledger-row [index]="1042" [hash]="'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'" [timestamp]="'2026-09-29 12:30:00'" [verified]="true"></st-ledger-row>`
+        },
+        react: {
+          available: true,
+          component: "TableLedgerRow",
+          import: "import { TableLedgerRow } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<TableLedgerRow />"
+        },
+        html: {
+          available: true,
+          snippet: '<div class="flex items-center justify-between py-2 px-3 bg-charcoal hover:bg-charcoal-surface border-b border-slateBorder text-xs font-mono transition-colors">\n  <div class="flex items-center gap-3">\n    <span class="text-muted w-12 font-medium">#1042</span>\n    <button type="button" class="text-pistachio hover:underline cursor-pointer select-none font-medium">\n      e3b0c442...b855\n    </button>\n  </div>\n  <div class="flex items-center gap-4">\n    <span class="text-muted text-xs">2026-09-29 12:30:00</span>\n    <span class="inline-flex items-center gap-1.5 text-xs text-pistachio">\n      <span class="w-1.5 h-1.5 rounded-full bg-pistachio"></span>\n      Sellado\n    </span>\n  </div>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: table-ledger-row | Angular: <st-ledger-row> | Style: Mono Font / Charcoal Background / Pistachio Hash]"
+    },
+    {
+      id: "SRT-TMR-01",
+      slug: "timer-widget",
+      name: "Widget de Cron\xF3metro Monospace",
+      category: "data-display",
+      description: "Contador de tiempo en vivo de alta precisi\xF3n para control horario e imputaci\xF3n a proyectos en Synthex Ledger. Cero clich\xE9s de IA.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-timer-widget",
+          import: "import { TimerWidgetComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: `<st-timer-widget [time]="'01:42:18'" [active]="true" (onToggle)="toggleTimer()"></st-timer-widget>`
+        },
+        react: {
+          available: true,
+          component: "TimerWidget",
+          import: "import { TimerWidget } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<TimerWidget time="01:42:18" active={true} onToggle={toggleTimer} />'
+        },
+        html: {
+          available: true,
+          snippet: '<div class="inline-flex items-center gap-3 bg-charcoal border border-slateBorder px-3 py-1.5 rounded-lg font-mono text-xs">\n  <span class="w-2 h-2 rounded-full bg-pistachio"></span>\n  <span class="text-white font-bold tracking-wider">01:42:18</span>\n  <button class="text-xs text-pistachio hover:underline cursor-pointer font-mono">Pausar</button>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: timer-widget | Angular: <st-timer-widget> | React: <TimerWidget> | Style: Charcoal #111111 / Border #2A2A2A / Mono Font / Quiet Luxury]"
+    },
+    {
+      id: "SRT-TGL-01",
+      slug: "toggle-switch",
+      name: "Interruptor Toggle Booleano",
+      category: "inputs",
+      description: "Interruptor de activaci\xF3n r\xE1pida para opciones binarias (ej. Toggle de Env\xEDos de Correo Autom\xE1tico / Manual).",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-toggle-switch",
+          import: "import { ToggleSwitchComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-toggle-switch label="Activo" [(checked)]="isActive"></st-toggle-switch>'
+        },
+        react: {
+          available: true,
+          component: "ToggleSwitch",
+          import: "import { ToggleSwitch } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<ToggleSwitch label="Activo" checked={isActive} onChange={setIsActive} />'
+        },
+        html: {
+          available: true,
+          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>`
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: toggle-switch | Angular: <st-toggle-switch> | React: <ToggleSwitch> | Style: Slate Rail #2A2A2A / Checked Pistachio #E0F9B5]"
+    },
+    {
+      id: "SRT-GSAP-UND01",
+      slug: "wavy-underline-heading",
+      name: "Titular con Subrayado Ondulado Trazado",
+      category: "animations",
+      description: "Titular o texto destacado con trazado vectorial ondulado (SVG wavy path) animado con stroke-drawing continuo GSAP (strokeDashoffset) e interactividad con recarga.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-wavy-underline-heading",
+          import: "import { WavyUnderlineHeadingComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-wavy-underline-heading prefixText="Ingenier\xEDa con" highlightText="total transparencia." strokeColor="#E0F9B5"></st-wavy-underline-heading>'
+        },
+        html: {
+          available: true,
+          snippet: '<div class="w-full font-display text-center p-4 bg-charcoal border border-slateBorder rounded-xl flex flex-col items-center gap-4">\n  <h2 class="text-xl sm:text-2xl font-bold text-white tracking-tight">\n    <span>Ingenier\xEDa con</span>\n    <span class="relative inline-block text-pistachio ml-1.5">\n      <span class="relative z-10">total transparencia.</span>\n      <svg class="absolute left-0 -bottom-2 w-full h-3 overflow-visible pointer-events-none" viewBox="0 0 300 16" fill="none" preserveAspectRatio="none">\n        <path d="M2 10 Q 35 2, 75 9 T 150 9 T 225 9 T 298 9" stroke="#E0F9B5" stroke-width="3" stroke-linecap="round" style="stroke-dasharray: 450; stroke-dashoffset: 0;" />\n      </svg>\n    </span>\n  </h2>\n</div>'
+        },
+        react: {
+          available: true,
+          component: "WavyUnderlineHeading",
+          import: "import { WavyUnderlineHeading } from '@synthex-engineers/refined-tech/react';",
+          snippet: '<WavyUnderlineHeading prefixText="Ingenier\xEDa con" highlightText="total transparencia." strokeColor="#E0F9B5" />'
+        },
+        astro: {
+          available: true,
+          component: "WavyUnderlineHeading",
+          import: "import { WavyUnderlineHeading } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<WavyUnderlineHeading />"
+        }
+      },
+      ai_prompt_tag: "[SynthexAnimation: wavy-underline-heading | Angular: <st-wavy-underline-heading> | React: <WavyUnderlineHeading> | SVG Wavy Path: M2 10 Q 35 2, 75 9 T 150 9 T 225 9 T 298 9 | Ease: power2.inOut]"
+    },
+    {
+      id: "SRT-SWT-01",
+      slug: "workspace-switcher",
+      name: "Selector de Workspace Multi-Empresa",
+      category: "navigation",
+      description: "Men\xFA desplegable para alternar empresas propias en Synthex Ledger con isotipo vectorial squircle oficial.",
+      frameworks: {
+        angular: {
+          available: true,
+          selector: "st-workspace-switcher",
+          import: "import { WorkspaceSwitcherComponent } from '@synthex-engineers/refined-tech/angular';",
+          snippet: '<st-workspace-switcher [workspaces]="myWorkspaces" (onSelect)="changeOrg($event)"></st-workspace-switcher>'
+        },
+        react: {
+          available: true,
+          component: "WorkspaceSwitcher",
+          import: "import { WorkspaceSwitcher } from '@synthex-engineers/refined-tech/react';",
+          snippet: "<WorkspaceSwitcher />"
+        },
+        html: {
+          available: true,
+          snippet: '<div class="relative inline-block font-sans text-xs">\n  <button type="button" class="flex items-center gap-2 bg-charcoal border border-slateBorder hover:border-pistachio/40 px-3 py-1.5 rounded-lg text-white transition-colors cursor-pointer">\n    <div class="w-4 h-4 rounded bg-pistachio flex items-center justify-center">\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="12" height="12">\n        <g stroke="#111111" stroke-width="16" 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>\n    <span class="font-medium text-white">Synthex Matriz</span>\n    <span class="text-muted text-xs font-mono">\u25BE</span>\n  </button>\n</div>'
+        }
+      },
+      ai_prompt_tag: "[SynthexComponent: workspace-switcher | Angular: <st-workspace-switcher> | Style: Charcoal #111111 / Squircle Pistachio Logo #E0F9B5]"
+    }
+  ]
+};
+
+// src/index.ts
+var registry = components_default;
+
+exports.borders = borders;
+exports.colors = colors;
+exports.fonts = fonts;
+exports.heights = heights;
+exports.radii = radii;
+exports.registry = registry;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.tokens = tokens_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map