feat: Variables programáticas en templates

Permite definir variables en templates con sintaxis {{nombre🏷️default}}
- Auto-detección de variables al guardar templates
- Drawer para completar valores al cargar template con variables
- Badge mostrando cantidad de variables en tarjeta de template
- Resolución de variables antes de cargar en cola

app/composables/useTemplates.ts

@@ -1,14 +1,40 @@
 import type { Operation } from './usePrintQueue'
 
+export interface TemplateVariable {
+  name: string
+  label?: string
+  defaultValue?: string
+}
+
 export interface PrintTemplate {
   id: string
   name: string
   description?: string
   operations: Operation[]
+  variables: TemplateVariable[]
   createdAt: string
   updatedAt: string
 }
 
+// Regex para detectar variables en templates
+const VARIABLE_REGEX = /\{\{(\w+)(?::([^:}]+))?(?::([^}]+))?\}\}/g
+
+// Resolver variables en operaciones
+export function resolveVariables(
+  operations: Operation[],
+  values: Record<string, string>
+): Operation[] {
+  return JSON.parse(JSON.stringify(operations)).map((op: Operation) => {
+    for (const [key, val] of Object.entries(op)) {
+      if (typeof val === 'string') {
+        // Reemplazar {{nombre:label:default}} con el valor proporcionado
+        op[key] = val.replace(VARIABLE_REGEX, (_, name) => values[name] ?? '')
+      }
+    }
+    return op
+  })
+}
+
 export function useTemplates() {
   const templates = useState<PrintTemplate[]>('templates', () => [])
   const loading = useState('templatesLoading', () => false)
@@ -119,6 +145,7 @@ export function useTemplates() {
     updateTemplate,
     deleteTemplate,
     loadTemplate,
-    duplicateTemplate
+    duplicateTemplate,
+    resolveVariables
   }
 }