@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/components/Workflow/Viewer.vue

@@ -0,0 +1,225 @@
+<script setup>
+import { ref, computed, markRaw, watch } from 'vue'
+import { VueFlow, Panel }                from '@vue-flow/core'
+import { Background }                    from '@vue-flow/background'
+import { Controls }                      from '@vue-flow/controls'
+import StepNode                          from './nodes/StepNode.vue'
+import TransitionEdge                    from './edges/TransitionEdge.vue'
+import { definitionToFlow }              from '~/composables/useWorkflowLayout.js'
+
+// ── Props & emits ─────────────────────────────────────────────────────────────
+const props = defineProps({
+  /** WorkflowDefinition.config — { steps:[], transitions:[] } */
+  definition:           { type: Object, required: true },
+  /** current_step key */
+  currentStep:          { type: String, default: null },
+  /** array de step keys disponibles para transicionar */
+  availableTransitions: { type: Array, default: () => [] },
+  /** array de { from_step, to_step, performed_by, performed_at, notes } */
+  history:              { type: Array, default: () => [] },
+  /** 'flow' | 'list' | 'history' */
+  defaultView:          { type: String, default: 'flow' },
+})
+
+const emit = defineEmits(['transition'])
+
+// ── Vue Flow types ────────────────────────────────────────────────────────────
+const nodeTypes = markRaw({ step: StepNode })
+const edgeTypes = markRaw({ transition: TransitionEdge })
+
+// ── Reactive nodes/edges — re-calculados cuando cambia currentStep o definition
+const flowNodes = ref([])
+const flowEdges = ref([])
+
+const rebuildFlow = () => {
+  const { nodes: n, edges: e } = definitionToFlow(props.definition)
+
+  flowNodes.value = n.map(node => ({
+    ...node,
+    selectable: false,
+    draggable:  false,
+    class: [
+      node.id === props.currentStep             ? 'vf-current'   : '',
+      props.availableTransitions.includes(node.id) ? 'vf-available' : '',
+    ].filter(Boolean).join(' '),
+    data: {
+      ...node.data,
+      isCurrent:   node.id === props.currentStep,
+      isAvailable: props.availableTransitions.includes(node.id),
+    },
+  }))
+
+  flowEdges.value = e
+}
+
+watch(
+  [() => props.definition, () => props.currentStep, () => props.availableTransitions],
+  rebuildFlow,
+  { immediate: true, deep: true },
+)
+
+// ── View mode ─────────────────────────────────────────────────────────────────
+const activeView = ref(props.defaultView)
+
+// ── List helpers ──────────────────────────────────────────────────────────────
+const STEP_TYPE_LABELS = {
+  start:          'Inicio',
+  in_progress:    'En progreso',
+  pause_internal: 'Pausa interna',
+  pause_external: 'Pausa externa',
+  finished:       'Finalizado',
+  cancelled:      'Cancelado',
+}
+
+const stepsWithState = computed(() =>
+  (props.definition.steps ?? []).map(step => ({
+    ...step,
+    isCurrent:   step.key === props.currentStep,
+    isAvailable: props.availableTransitions.includes(step.key),
+    isPast:      (props.history ?? []).some(h => h.to_step === step.key),
+  }))
+)
+
+const formatDate = (iso) =>
+  iso
+    ? new Date(iso).toLocaleString('es-CL', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })
+    : '—'
+</script>
+
+<template>
+  <div class="flex flex-col h-full min-h-0">
+
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between gap-3 px-3 py-2 border-b border-card-line bg-surface shrink-0">
+      <div class="inline-flex items-center rounded-control border border-card-line bg-card overflow-hidden">
+        <button
+          v-for="mode in [{ id: 'flow', label: 'Flujo' }, { id: 'list', label: 'Lista' }, { id: 'history', label: 'Historial' }]"
+          :key="mode.id"
+          type="button"
+          @click="activeView = mode.id"
+          :class="[
+            'px-3 py-1.5 text-xs font-medium transition-colors',
+            activeView === mode.id ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted-hover',
+          ]"
+        >
+          {{ mode.label }}
+        </button>
+      </div>
+
+      <div class="flex items-center gap-3 text-xs text-muted-foreground">
+        <span class="flex items-center gap-1.5">
+          <span class="w-2.5 h-2.5 rounded-full border-2 border-primary bg-primary/20" />
+          Actual
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span class="w-2.5 h-2.5 rounded-full border-2 border-emerald-400 bg-emerald-50 dark:bg-emerald-900/30" />
+          Disponible
+        </span>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-h-0 relative overflow-hidden">
+
+      <!-- ── FLOW VIEW ──────────────────────────────────────────────────────── -->
+      <div v-if="activeView === 'flow'" class="h-full">
+        <VueFlow
+          :nodes="flowNodes"
+          :edges="flowEdges"
+          :node-types="nodeTypes"
+          :edge-types="edgeTypes"
+          :nodes-draggable="false"
+          :nodes-connectable="false"
+          :elements-selectable="false"
+          fit-view-on-init
+          class="h-full bg-background"
+        >
+          <Background pattern-color="var(--color-card-line)" :gap="20" />
+          <Controls :show-interactive="false" />
+
+          <Panel position="bottom-center">
+            <div v-if="availableTransitions.length" class="flex items-center gap-2 flex-wrap justify-center pb-2">
+              <button
+                v-for="stepKey in availableTransitions"
+                :key="stepKey"
+                type="button"
+                @click="emit('transition', stepKey)"
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary-hover rounded-control shadow transition-colors"
+              >
+                Ir a {{ definition.steps?.find(s => s.key === stepKey)?.label ?? stepKey }}
+              </button>
+            </div>
+          </Panel>
+        </VueFlow>
+      </div>
+
+      <!-- ── LIST VIEW ──────────────────────────────────────────────────────── -->
+      <div v-if="activeView === 'list'" class="h-full overflow-y-auto p-4">
+        <div class="relative pl-6 space-y-1 before:absolute before:left-[7px] before:top-3 before:bottom-3 before:w-px before:bg-card-line">
+          <div
+            v-for="step in stepsWithState"
+            :key="step.key"
+            :class="[
+              'relative flex items-start gap-3 pl-4 py-3 rounded-card transition-colors',
+              step.isCurrent   ? 'bg-primary/5 border border-primary/20' : '',
+              step.isAvailable && !step.isCurrent ? 'bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-400/30' : '',
+              !step.isCurrent && !step.isAvailable ? 'opacity-60' : '',
+            ]"
+          >
+            <span
+              :class="[
+                'absolute -left-[3px] top-4 w-3 h-3 rounded-full border-2 shrink-0',
+                step.isCurrent   ? 'border-primary bg-primary' : '',
+                step.isAvailable && !step.isCurrent ? 'border-emerald-400 bg-emerald-50 dark:bg-emerald-900/50' : '',
+                !step.isCurrent && !step.isAvailable ? 'border-card-line bg-background' : '',
+              ]"
+            />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-medium text-foreground">{{ step.label }}</p>
+              <p class="text-xs text-muted-foreground font-mono">{{ step.key }} · {{ STEP_TYPE_LABELS[step.type] }}</p>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span v-if="step.isCurrent" class="text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded-badge bg-primary/10 text-primary">
+                Actual
+              </span>
+              <button
+                v-if="step.isAvailable && !step.isCurrent"
+                type="button"
+                @click="emit('transition', step.key)"
+                class="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-badge bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors"
+              >
+                Transicionar
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── HISTORY ────────────────────────────────────────────────────────── -->
+      <div v-if="activeView === 'history'" class="h-full overflow-y-auto p-4">
+        <div v-if="history.length" class="space-y-2">
+          <div
+            v-for="(entry, idx) in [...history].reverse()"
+            :key="idx"
+            class="flex items-start gap-3 bg-card rounded-card border border-card-line px-4 py-3"
+          >
+            <div class="w-2 h-2 rounded-full bg-primary/60 shrink-0 mt-1.5" />
+            <div class="flex-1 min-w-0">
+              <p class="text-xs text-foreground">
+                <span class="font-mono text-muted-foreground">{{ entry.from_step }}</span>
+                <span class="mx-1.5 text-muted-foreground-2">→</span>
+                <span class="font-mono font-medium">{{ entry.to_step }}</span>
+              </p>
+              <p v-if="entry.notes" class="text-xs text-muted-foreground mt-0.5 italic">{{ entry.notes }}</p>
+            </div>
+            <p class="text-[11px] text-muted-foreground shrink-0">{{ formatDate(entry.performed_at) }}</p>
+          </div>
+        </div>
+        <div v-else class="flex items-center justify-center py-12 text-sm text-muted-foreground">
+          Sin historial de transiciones
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>

package/components/Workflow/edges/TransitionEdge.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed }                                   from 'vue'
+import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@vue-flow/core'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  id:              String,
+  sourceX:         Number,
+  sourceY:         Number,
+  targetX:         Number,
+  targetY:         Number,
+  sourcePosition:  String,
+  targetPosition:  String,
+  data:            { type: Object, default: () => ({}) },
+  label:           { type: String, default: '' },
+  selected:        { type: Boolean, default: false },
+  markerEnd:       String,
+})
+
+// ── Path reactivo — recalculado cuando cambian las posiciones ─────────────────
+const pathData = computed(() =>
+  getBezierPath({
+    sourceX:        props.sourceX,
+    sourceY:        props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX:        props.targetX,
+    targetY:        props.targetY,
+    targetPosition: props.targetPosition,
+  })
+)
+
+const edgePath = computed(() => pathData.value[0])
+const labelX   = computed(() => pathData.value[1])
+const labelY   = computed(() => pathData.value[2])
+
+const hasRestrictions = computed(() => (props.data?.restrictions?.length ?? 0) > 0)
+const displayLabel    = computed(() => props.label || props.data?.label || '')
+const isBackEdge      = computed(() => props.data?.isBackEdge === true)
+</script>
+
+<template>
+  <BaseEdge
+    :id="id"
+    :path="edgePath"
+    :marker-end="markerEnd"
+    :style="{
+      stroke:           selected ? 'var(--color-primary)' : isBackEdge ? 'var(--color-muted-foreground)' : 'var(--color-card-line)',
+      strokeWidth:      selected ? 2 : 1.5,
+      strokeDasharray:  isBackEdge ? '5 3' : 'none',
+      opacity:          isBackEdge && !selected ? 0.65 : 1,
+    }"
+  />
+
+  <EdgeLabelRenderer v-if="displayLabel || hasRestrictions">
+    <div
+      :style="{
+        transform:     `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+        pointerEvents: 'all',
+      }"
+      class="absolute nodrag nopan"
+    >
+      <div
+        :class="[
+          'flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border transition-colors',
+          selected
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'bg-card text-foreground border-card-line hover:border-primary/50',
+        ]"
+      >
+        <span v-if="displayLabel">{{ displayLabel }}</span>
+        <span
+          v-if="hasRestrictions"
+          :class="[
+            'inline-flex items-center justify-center w-4 h-4 rounded-full text-[9px] font-bold',
+            selected ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-muted text-muted-foreground',
+          ]"
+        >
+          {{ data.restrictions.length }}
+        </span>
+      </div>
+    </div>
+  </EdgeLabelRenderer>
+</template>

package/components/Workflow/nodes/StepNode.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed }         from 'vue'
+import { Handle, Position } from '@vue-flow/core'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  data:     { type: Object, required: true },
+  selected: { type: Boolean, default: false },
+})
+
+const STEP_CONFIG = {
+  start:          { label: 'Inicio',      color: 'emerald',  dot: 'bg-emerald-500',    border: 'border-emerald-400 dark:border-emerald-600',    bg: 'bg-emerald-50 dark:bg-emerald-900/30'  },
+  in_progress:    { label: 'En progreso', color: 'blue',     dot: 'bg-blue-500',       border: 'border-blue-400 dark:border-blue-600',          bg: 'bg-blue-50 dark:bg-blue-900/30'        },
+  pause_internal: { label: 'Pausa int.',  color: 'amber',    dot: 'bg-amber-500',      border: 'border-amber-400 dark:border-amber-600',        bg: 'bg-amber-50 dark:bg-amber-900/30'      },
+  pause_external: { label: 'Pausa ext.',  color: 'orange',   dot: 'bg-orange-500',     border: 'border-orange-400 dark:border-orange-600',      bg: 'bg-orange-50 dark:bg-orange-900/30'    },
+  finished:       { label: 'Finalizado',  color: 'violet',   dot: 'bg-violet-500',     border: 'border-violet-400 dark:border-violet-600',      bg: 'bg-violet-50 dark:bg-violet-900/30'    },
+  cancelled:      { label: 'Cancelado',   color: 'red',      dot: 'bg-red-500',        border: 'border-red-400 dark:border-red-600',            bg: 'bg-red-50 dark:bg-red-900/30'          },
+}
+
+const cfg = computed(() => STEP_CONFIG[props.data.type] ?? STEP_CONFIG.in_progress)
+const isStart    = computed(() => props.data.type === 'start')
+const isTerminal = computed(() => ['finished', 'cancelled'].includes(props.data.type))
+</script>
+
+<template>
+  <div
+    :class="[
+      'relative flex flex-col gap-1 rounded-lg border-2 px-3 py-2.5 w-52 bg-card shadow-sm transition-shadow',
+      cfg.border,
+      selected ? 'shadow-md ring-2 ring-primary/50 ring-offset-1' : 'hover:shadow-md',
+    ]"
+  >
+    <!-- Handles invisibles en Top — para rutear back-edges por encima del nodo -->
+    <Handle
+      id="top-target"
+      type="target"
+      :position="Position.Top"
+      style="opacity:0; pointer-events:none; width:6px; height:6px;"
+    />
+    <Handle
+      id="top-source"
+      type="source"
+      :position="Position.Top"
+      style="opacity:0; pointer-events:none; width:6px; height:6px;"
+    />
+
+    <!-- Target handle (no mostrar para nodo start) -->
+    <Handle
+      v-if="!isStart"
+      type="target"
+      :position="Position.Left"
+      class="!bg-card-line !border-card-line !w-3 !h-3 hover:!bg-primary transition-colors"
+    />
+
+    <!-- Header: dot + type badge -->
+    <div class="flex items-center gap-2">
+      <span :class="['w-2 h-2 rounded-full shrink-0', cfg.dot]" />
+      <span
+        :class="[
+          'text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded-full',
+          cfg.bg, 'text-foreground',
+        ]"
+      >
+        {{ cfg.label }}
+      </span>
+    </div>
+
+    <!-- Label -->
+    <p class="text-sm font-medium text-foreground leading-tight truncate">{{ data.label }}</p>
+
+    <!-- Key -->
+    <p class="text-[11px] text-muted-foreground font-mono truncate">{{ data.key }}</p>
+
+    <!-- Description (if present) -->
+    <p v-if="data.description" class="text-[11px] text-muted-foreground leading-tight line-clamp-2 mt-0.5">
+      {{ data.description }}
+    </p>
+
+    <!-- Source handle (no mostrar para terminales) -->
+    <Handle
+      v-if="!isTerminal"
+      type="source"
+      :position="Position.Right"
+      class="!bg-card-line !border-card-line !w-3 !h-3 hover:!bg-primary transition-colors"
+    />
+  </div>
+</template>

package/composables/useAuth.js

@@ -14,7 +14,7 @@ export function useAuth() {
    */
   async function performLogin(context, email, password, remember = false) {
     authStore.rememberUser = remember
-    const data = await api.post(`${context}/auth/login`, { email, password, app: context })
+    const data = await api.post(`${context}/auth/login`, { email, password, context })
     authStore.saveToken(data.token ?? data.access_token)
     authStore.setCurrentContext(context)
     queryClient.clear()

package/composables/useClipboard.js

@@ -0,0 +1,79 @@
+/**
+ * useClipboard — Wrapper sobre navigator.clipboard con estado reactivo
+ * `copied` que vuelve a false después de `timeout` ms.
+ *
+ * Hace fallback a un truco con `document.execCommand('copy')` cuando la
+ * Clipboard API no está disponible (HTTP, iframes restringidos, etc.).
+ *
+ * ```js
+ * const { copy, copied, supported } = useClipboard({ timeout: 1500 })
+ *
+ * <button @click="copy('hola mundo')">
+ *   {{ copied ? '¡Copiado!' : 'Copiar' }}
+ * </button>
+ * ```
+ *
+ * También expone `text` para usar como modelo si querés bindear automáticamente
+ * un valor que cambia (ej. un input controlado).
+ */
+export function useClipboard(options = {}) {
+  const timeout = options.timeout ?? 1500
+
+  const text     = ref('')
+  const copied   = ref(false)
+  const error    = ref(null)
+  const supported = computed(() => {
+    if (typeof navigator === 'undefined') return false
+    return !!(navigator.clipboard && navigator.clipboard.writeText)
+  })
+
+  let timeoutId = null
+
+  const _resetSoon = () => {
+    if (timeoutId) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      copied.value = false
+      error.value  = null
+    }, timeout)
+  }
+
+  const _legacy = (value) => {
+    if (typeof document === 'undefined') return false
+    const el = document.createElement('textarea')
+    el.value = value
+    el.setAttribute('readonly', '')
+    el.style.position = 'fixed'
+    el.style.opacity = '0'
+    document.body.appendChild(el)
+    el.select()
+    let ok = false
+    try { ok = document.execCommand('copy') } catch (_) { ok = false }
+    document.body.removeChild(el)
+    return ok
+  }
+
+  /** Copia el string al clipboard. Retorna Promise<boolean>. */
+  const copy = async (value) => {
+    const str = String(value ?? '')
+    text.value = str
+    error.value = null
+
+    try {
+      if (supported.value) {
+        await navigator.clipboard.writeText(str)
+      } else {
+        const ok = _legacy(str)
+        if (!ok) throw new Error('No se pudo copiar')
+      }
+      copied.value = true
+      _resetSoon()
+      return true
+    } catch (e) {
+      error.value  = e?.message ?? 'Error al copiar'
+      copied.value = false
+      return false
+    }
+  }
+
+  return { copy, copied, error, text, supported }
+}

package/composables/useConfetti.js

@@ -0,0 +1,194 @@
+/**
+ * useConfetti — Animación de confetti zero-deps en canvas overlay.
+ *
+ * ```js
+ * const { burst, fireworks, cannon, schoolPride, stop } = useConfetti()
+ *
+ * burst()                                // explosión simple en el centro
+ * burst({ origin: { x: 0.5, y: 0.3 } })  // explosión desde un punto (0-1)
+ * burst({ colors: ['#ff0', '#0f0'] })    // colores custom
+ * fireworks({ duration: 3000 })          // fuegos artificiales 3s
+ * cannon({ angle: 60, spread: 55 })      // un solo "cañon"
+ * schoolPride(['#ff0066', '#33ccff'])    // dos cañones laterales
+ * ```
+ *
+ * El canvas se monta una sola vez en <body>, full-screen, pointer-events: none,
+ * z-index altísimo. Se limpia automáticamente cuando no hay partículas.
+ */
+
+const DEFAULT_COLORS = ['#FF3E7F', '#FFC23C', '#3CDBFF', '#7B61FF', '#27D67B', '#FF7A45']
+const GRAVITY = 0.18
+const DRAG = 0.012
+
+let canvas = null
+let ctx = null
+let particles = []
+let rafId = null
+let resizeHandler = null
+
+function ensureCanvas() {
+  if (typeof window === 'undefined') return null
+  if (canvas) return canvas
+  canvas = document.createElement('canvas')
+  canvas.setAttribute('data-innertia-confetti', '')
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: '99999',
+  })
+  document.body.appendChild(canvas)
+  ctx = canvas.getContext('2d')
+  resize()
+  resizeHandler = () => resize()
+  window.addEventListener('resize', resizeHandler)
+  return canvas
+}
+
+function resize() {
+  if (!canvas) return
+  const dpr = window.devicePixelRatio || 1
+  canvas.width  = window.innerWidth  * dpr
+  canvas.height = window.innerHeight * dpr
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+}
+
+function destroyCanvas() {
+  if (!canvas) return
+  canvas.remove()
+  canvas = null
+  ctx = null
+  if (resizeHandler) window.removeEventListener('resize', resizeHandler)
+  resizeHandler = null
+}
+
+function spawnParticles({
+  origin = { x: 0.5, y: 0.5 },
+  count = 80,
+  spread = 70,
+  angle = 90,        // 90 = arriba, 0 = derecha, 180 = izquierda
+  velocity = 18,
+  colors = DEFAULT_COLORS,
+  shapes = ['square', 'circle', 'rect'],
+  ticks = 200,       // vida en frames
+  scalar = 1,
+} = {}) {
+  ensureCanvas()
+  if (!ctx) return
+
+  const radSpread = (spread * Math.PI) / 180
+  const radAngle  = (angle  * Math.PI) / 180
+  const ox = origin.x * window.innerWidth
+  const oy = origin.y * window.innerHeight
+
+  for (let i = 0; i < count; i++) {
+    const a = radAngle - radSpread / 2 + Math.random() * radSpread
+    const v = velocity * (0.5 + Math.random() * 0.7)
+    particles.push({
+      x: ox,
+      y: oy,
+      vx:  Math.cos(a) * v,
+      vy: -Math.sin(a) * v,
+      rot: Math.random() * Math.PI * 2,
+      vrot: (Math.random() - 0.5) * 0.3,
+      size: (5 + Math.random() * 6) * scalar,
+      color: colors[(Math.random() * colors.length) | 0],
+      shape: shapes[(Math.random() * shapes.length) | 0],
+      life: 0,
+      maxLife: ticks * (0.7 + Math.random() * 0.6),
+      wobble: Math.random() * 2 * Math.PI,
+      wobbleSpeed: 0.05 + Math.random() * 0.05,
+    })
+  }
+
+  if (!rafId) tick()
+}
+
+function tick() {
+  if (!ctx) { rafId = null; return }
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const p = particles[i]
+    p.vx *= 1 - DRAG
+    p.vy = p.vy * (1 - DRAG) + GRAVITY
+    p.x += p.vx
+    p.y += p.vy
+    p.rot += p.vrot
+    p.wobble += p.wobbleSpeed
+    p.life++
+
+    if (p.life >= p.maxLife || p.y > window.innerHeight + 40) {
+      particles.splice(i, 1)
+      continue
+    }
+
+    const alpha = Math.max(0, 1 - p.life / p.maxLife)
+    ctx.save()
+    ctx.globalAlpha = alpha
+    ctx.translate(p.x + Math.cos(p.wobble) * 2, p.y)
+    ctx.rotate(p.rot)
+    ctx.fillStyle = p.color
+
+    if (p.shape === 'circle') {
+      ctx.beginPath()
+      ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2)
+      ctx.fill()
+    } else if (p.shape === 'rect') {
+      ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2)
+    } else {
+      ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size)
+    }
+    ctx.restore()
+  }
+
+  if (particles.length) {
+    rafId = requestAnimationFrame(tick)
+  } else {
+    rafId = null
+    // Mantener el canvas montado — limpiarlo es opcional. Lo dejamos para no
+    // recrear elementos en bursts repetidos.
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+  }
+}
+
+export function useConfetti() {
+  /** Explosión simple. */
+  const burst = (opts = {}) => spawnParticles({ count: 90, spread: 70, velocity: 22, ...opts })
+
+  /** Un "cañón" direccional (ej. desde una esquina). */
+  const cannon = (opts = {}) => spawnParticles({ count: 60, spread: 30, velocity: 25, ...opts })
+
+  /** Dos cañones laterales con colores propios. */
+  const schoolPride = (colors = DEFAULT_COLORS, opts = {}) => {
+    spawnParticles({ origin: { x: 0,  y: 0.7 }, angle: 60,  spread: 55, count: 50, colors, velocity: 25, ...opts })
+    spawnParticles({ origin: { x: 1,  y: 0.7 }, angle: 120, spread: 55, count: 50, colors, velocity: 25, ...opts })
+  }
+
+  /** Fuegos artificiales repetidos durante `duration` ms. */
+  const fireworks = ({ duration = 3000, interval = 250, ...opts } = {}) => {
+    const end = Date.now() + duration
+    const iv  = setInterval(() => {
+      if (Date.now() >= end) { clearInterval(iv); return }
+      spawnParticles({
+        origin: { x: 0.2 + Math.random() * 0.6, y: 0.3 + Math.random() * 0.3 },
+        count: 40,
+        spread: 360,
+        velocity: 18,
+        ...opts,
+      })
+    }, interval)
+    return () => clearInterval(iv)
+  }
+
+  /** Limpia todas las partículas activas y destruye el canvas. */
+  const stop = () => {
+    particles = []
+    if (rafId) { cancelAnimationFrame(rafId); rafId = null }
+    destroyCanvas()
+  }
+
+  return { burst, cannon, schoolPride, fireworks, stop }
+}