@reservi/theme 1.4.1-beta.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reservi/theme",
-  "version": "1.4.1-beta.1",
+  "version": "1.5.0",
   "description": "Tema de Reservi Calendar: design tokens (TailwindCSS 4 @theme) y estilos base.",
   "license": "MIT",
   "repository": {

package/src/components.css

@@ -600,12 +600,60 @@
   overflow: hidden;
   box-sizing: border-box;
   /* `borderColor` del evento si lo hay; si no, un tono del propio fondo. */
-  border: 1px solid
-    var(--rsv-event-border, color-mix(in oklch, var(--rsv-event-bg) 80%, black));
+  border: 1px solid var(--rsv-event-border, color-mix(in oklch, var(--rsv-event-bg) 80%, black));
   align-items: stretch;
   white-space: normal;
 }
 
+/**
+ * Arrastre de un evento en timeGrid.
+ *
+ * El `cursor: grab` solo existia para daygrid, asi que en las vistas de tiempo
+ * nada indicaba que la tarjeta se pudiera mover. Y durante el gesto no se
+ * pintaba nada: la tarjeta se quedaba quieta y saltaba a su nueva posicion solo
+ * al soltar. `drag-mirror` muestra donde va a caer, y la tarjeta de origen se
+ * atenua para leerse como "levantada".
+ */
+[data-rsv="tg-col"] [data-rsv="event"][data-editable="true"],
+[data-rsv="tg-col"] [data-rsv="event"]:has([data-rsv="resize-handle"]) {
+  cursor: grab;
+  touch-action: none;
+}
+[data-rsv="event"][data-rsv-dragging="true"] {
+  cursor: grabbing;
+  opacity: 0.55;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
+  z-index: 30;
+}
+
+/**
+ * Mes: el destino es una celda de dia entera, no una franja horaria, asi que
+ * en vez de un fantasma se resalta el dia bajo el puntero. La tarjeta de origen
+ * se eleva con la misma regla `[data-rsv-dragging]` que en timeGrid.
+ */
+[data-rsv="day"][data-rsv-drop="true"] {
+  outline: 2px dashed var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+  background: var(--color-rsv-selection, #e8e8ff);
+}
+[data-rsv="daygrid"] [data-rsv="event"][data-rsv-dragging="true"] {
+  cursor: grabbing;
+  opacity: 0.55;
+}
+
+/* Fantasma que sigue al puntero mientras se arrastra un evento. */
+[data-rsv="drag-mirror"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 25;
+  border: 1px dashed var(--color-rsv-primary, #4f46e5);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  background: var(--color-rsv-selection, #e8e8ff);
+  opacity: 0.85;
+}
+
 /* Fantasma del rango que se esta seleccionando (`selectMirror`). */
 [data-rsv="select-mirror"] {
   position: absolute;