@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/_components/mobile-calendar.tsx.ejs

@@ -0,0 +1,277 @@
+'use client';
+
+import {
+  addDays,
+  addMonths,
+  eachDayOfInterval,
+  format,
+  isSameDay,
+  isSameMonth,
+  isToday,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+export type MobileCalendarEvent<TResource = unknown> = {
+  id?: number;
+  title: string;
+  start: Date;
+  end: Date;
+  resource: TResource;
+};
+
+type Anchor = { x: number; y: number };
+
+interface MobileCalendarProps<TResource = unknown> {
+  events: MobileCalendarEvent<TResource>[];
+  date: Date;
+  locale: string;
+  previousLabel: string;
+  nextLabel: string;
+  noEventsLabel: string;
+  onNavigate: (date: Date) => void;
+  onSelectEvent: (
+    event: MobileCalendarEvent<TResource>,
+    anchor: Anchor
+  ) => void;
+  onSelectDay?: (date: Date, anchor: Anchor) => void;
+  getEventColor?: (event: MobileCalendarEvent<TResource>) => string;
+}
+
+export function MobileCalendar<TResource = unknown>({
+  events,
+  date,
+  locale,
+  previousLabel,
+  nextLabel,
+  noEventsLabel,
+  onNavigate,
+  onSelectEvent,
+  onSelectDay,
+  getEventColor = () => '#3b82f6',
+}: MobileCalendarProps<TResource>) {
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null);
+  const dateLocale = locale.startsWith('pt') ? ptBR : enUS;
+  const monthStart = startOfMonth(date);
+  const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const days = eachDayOfInterval({
+    start: gridStart,
+    end: addDays(gridStart, 41),
+  });
+  const dayHeaders = locale.startsWith('pt')
+    ? ['S', 'T', 'Q', 'Q', 'S', 'S', 'D']
+    : ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+  const getEventsForDay = (day: Date) =>
+    events.filter((event) => isSameDay(event.start, day));
+
+  const selectedDayEvents = selectedDay ? getEventsForDay(selectedDay) : [];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3 rounded-2xl border border-border/70 bg-muted/20 px-3 py-2.5">
+        <button
+          type="button"
+          onClick={() => {
+            onNavigate(subMonths(date, 1));
+            setSelectedDay(null);
+          }}
+          aria-label={previousLabel}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <div className="min-w-0 text-center">
+          <p className="truncate text-sm font-semibold capitalize text-foreground">
+            {format(
+              date,
+              locale.startsWith('pt') ? "MMMM 'de' yyyy" : 'MMMM yyyy',
+              { locale: dateLocale }
+            )}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            onNavigate(addMonths(date, 1));
+            setSelectedDay(null);
+          }}
+          aria-label={nextLabel}
+          className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+
+      <div className="rounded-3xl border border-border/70 bg-card p-3 shadow-xs lg:p-4">
+        <div className="mb-2 grid grid-cols-7">
+          {dayHeaders.map((dayHeader, index) => (
+            <div
+              key={`${dayHeader}-${index}`}
+              className="py-1 text-center text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
+            >
+              {dayHeader}
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-1 lg:gap-2">
+          {days.map((day) => {
+            const dayEvents = getEventsForDay(day);
+            const isCurrentMonthDay = isSameMonth(day, date);
+            const isTodayDay = isToday(day);
+            const isSelectedDay =
+              selectedDay !== null && isSameDay(day, selectedDay);
+            const visibleDesktopEvents = dayEvents.slice(0, 3);
+            const hiddenDesktopEvents = Math.max(dayEvents.length - 3, 0);
+
+            return (
+              <div
+                key={day.toISOString()}
+                onClick={(e) => {
+                  setSelectedDay((current) =>
+                    current && isSameDay(current, day) ? null : day
+                  );
+                  if (isCurrentMonthDay) {
+                    onSelectDay?.(day, { x: e.clientX, y: e.clientY });
+                  }
+                }}
+                className={[
+                  'rounded-2xl border border-border/60 p-1.5 transition-colors lg:min-h-32 lg:p-2',
+                  isCurrentMonthDay
+                    ? 'cursor-pointer bg-background/90 hover:border-border hover:bg-muted/30'
+                    : 'bg-muted/20 opacity-30',
+                  isSelectedDay ? 'ring-1 ring-primary/35' : '',
+                ].join(' ')}
+              >
+                <div
+                  className={[
+                    'flex w-full rounded-xl transition-colors',
+                    'justify-center lg:justify-start',
+                  ].join(' ')}
+                >
+                  <span
+                    className={[
+                      'flex size-8 items-center justify-center rounded-full text-sm transition-colors lg:size-9',
+                      isTodayDay
+                        ? 'bg-primary font-semibold text-primary-foreground'
+                        : '',
+                      isSelectedDay && !isTodayDay
+                        ? 'bg-muted font-semibold text-foreground'
+                        : '',
+                      !isTodayDay && !isSelectedDay && isCurrentMonthDay
+                        ? 'text-foreground'
+                        : '',
+                    ].join(' ')}
+                  >
+                    {format(day, 'd')}
+                  </span>
+                </div>
+
+                <div className="mt-1 flex h-2 items-center justify-center gap-1 lg:hidden">
+                  {dayEvents.slice(0, 3).map((event, index) => (
+                    <span
+                      key={`${event.id ?? event.title}-${index}`}
+                      className="size-1.5 rounded-full"
+                      style={{ backgroundColor: getEventColor(event) }}
+                    />
+                  ))}
+                </div>
+
+                {isCurrentMonthDay && dayEvents.length > 0 && (
+                  <div className="mt-2 hidden space-y-1 lg:block">
+                    {visibleDesktopEvents.map((event, index) => (
+                      <button
+                        key={`${event.id ?? event.title}-${index}`}
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSelectEvent(event, { x: e.clientX, y: e.clientY });
+                        }}
+                        className="flex w-full cursor-pointer items-center rounded-md px-2 py-1 text-left text-[10px] font-medium text-white shadow-sm transition-opacity hover:opacity-90"
+                        style={{ backgroundColor: getEventColor(event) }}
+                        title={event.title}
+                      >
+                        <span className="truncate">{event.title}</span>
+                      </button>
+                    ))}
+
+                    {hiddenDesktopEvents > 0 && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedDay(day);
+                        }}
+                        className="flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed border-border/80 px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
+                      >
+                        +{hiddenDesktopEvents}
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {selectedDay && (
+        <div className="rounded-2xl border border-border/70 bg-card p-3">
+          <div className="mb-3 flex items-center justify-between gap-2 border-b border-border/60 pb-2">
+            <p className="text-sm font-semibold text-foreground">
+              {format(
+                selectedDay,
+                locale.startsWith('pt') ? "dd 'de' MMMM" : 'MMMM dd',
+                { locale: dateLocale }
+              )}
+            </p>
+            <span className="text-xs text-muted-foreground">
+              {selectedDayEvents.length}
+            </span>
+          </div>
+
+          {selectedDayEvents.length === 0 ? (
+            <p className="py-3 text-center text-sm text-muted-foreground">
+              {noEventsLabel}
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {selectedDayEvents.map((event) => (
+                <button
+                  key={
+                    event.id ?? `${event.title}-${event.start.toISOString()}`
+                  }
+                  type="button"
+                  onClick={(e) =>
+                    onSelectEvent(event, { x: e.clientX, y: e.clientY })
+                  }
+                  className="flex w-full cursor-pointer items-center gap-3 rounded-2xl border border-border/60 bg-muted/20 px-3 py-3 text-left transition-colors hover:bg-muted/50"
+                >
+                  <span
+                    className="size-2.5 shrink-0 rounded-full"
+                    style={{ backgroundColor: getEventColor(event) }}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {event.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {format(event.start, 'HH:mm')} -{' '}
+                      {format(event.end, 'HH:mm')}
+                    </p>
+                  </div>
+                  <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/hedhog/frontend/app/_lib/editor/canvasInstance.ts.ejs

@@ -0,0 +1,48 @@
+import { BackgroundFit, Template } from './types';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface CanvasAPI {
+  addObject: (
+    type: 'field' | 'staticText' | 'image' | 'shape',
+    opts?: { key?: string; shape?: 'rect' | 'line' }
+  ) => void;
+  /** Drop-aware: create at canvas-local point (already transformed) */
+  addObjectAt: (
+    type: 'field' | 'staticText' | 'image' | 'shape',
+    canvasX: number,
+    canvasY: number,
+    opts?: { key?: string; shape?: 'rect' | 'line' }
+  ) => void;
+  removeObject: (id: string) => void;
+  duplicateObject: (id: string) => void;
+  selectObject: (id: string) => void;
+  updateObjectProp: (id: string, fabricProps: Record<string, any>) => void;
+  setBackground: (dataUrl: string, fit?: BackgroundFit) => void;
+  lockObject: (id: string, locked: boolean) => void;
+  setObjectVisible: (id: string, visible: boolean) => void;
+  loadTemplate: (template: Template) => void;
+  setZoom: (zoom: number) => void;
+  reorderObject: (id: string, direction: 'up' | 'down') => void;
+  /** Set Fabric z-order by array of ids (bottom→top) */
+  reorderByIds: (ids: string[]) => void;
+  /** Convert client (page) coords to Fabric canvas coords */
+  clientToCanvas: (
+    clientX: number,
+    clientY: number
+  ) => { x: number; y: number } | null;
+  getCanvasElement: () => HTMLCanvasElement | null;
+}
+
+let api: CanvasAPI | null = null;
+
+export function registerCanvasAPI(a: CanvasAPI) {
+  api = a;
+}
+
+export function unregisterCanvasAPI() {
+  api = null;
+}
+
+export function getCanvasAPI(): CanvasAPI | null {
+  return api;
+}

package/hedhog/frontend/app/_lib/editor/pctHelpers.ts.ejs

@@ -0,0 +1,50 @@
+/**
+ * Pct <-> Px conversion helpers.
+ *
+ * Convention (documented):
+ *   - xPct, wPct, stroke widthPct, shadow xPct, blurPct → relative to CANVAS_W
+ *   - yPct, hPct, fontSizePct, shadow yPct                → relative to CANVAS_H
+ *
+ * All Pct values are 0-100 range (e.g. 50 = 50% of canvas dimension).
+ * Rounding: 6 decimal places to preserve fidelity on import/export.
+ */
+
+import { CANVAS_H, CANVAS_W } from './types';
+
+const PRECISION = 6;
+
+function r(n: number): number {
+  return parseFloat(n.toFixed(PRECISION));
+}
+
+/* ── X-axis (relative to CANVAS_W) ── */
+export function toPctX(px: number): number {
+  return r((px / CANVAS_W) * 100);
+}
+export function fromPctX(pct: number): number {
+  return (pct / 100) * CANVAS_W;
+}
+
+/* ── Y-axis (relative to CANVAS_H) ── */
+export function toPctY(px: number): number {
+  return r((px / CANVAS_H) * 100);
+}
+export function fromPctY(pct: number): number {
+  return (pct / 100) * CANVAS_H;
+}
+
+/* ── Width-axis sizes (stroke, shadow blur/offsetX — relative to CANVAS_W) ── */
+export function toPctW(px: number): number {
+  return r((px / CANVAS_W) * 100);
+}
+export function fromPctW(pct: number): number {
+  return (pct / 100) * CANVAS_W;
+}
+
+/* ── Height-axis sizes (fontSize, shadow offsetY — relative to CANVAS_H) ── */
+export function toPctH(px: number): number {
+  return r((px / CANVAS_H) * 100);
+}
+export function fromPctH(pct: number): number {
+  return (pct / 100) * CANVAS_H;
+}

package/hedhog/frontend/app/_lib/editor/templateSerializer.ts.ejs

@@ -0,0 +1,268 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  fromPctH,
+  fromPctW,
+  fromPctX,
+  fromPctY,
+  toPctH,
+  toPctW,
+  toPctX,
+  toPctY,
+} from './pctHelpers';
+import type { Template, TemplateObject, TextStyle } from './types';
+import { CANVAS_H, CANVAS_W, createDefaultTemplate } from './types';
+
+/* ────────────────────────────────────────────
+ *  Fabric Object → TemplateObject (partial)
+ *  Used during live drag/move to update position only.
+ * ──────────────────────────────────────────── */
+export function fabricObjToTemplatePartial(
+  fObj: any
+): Omit<TemplateObject, 'id' | 'type' | 'key' | 'shape' | 'text' | 'zIndex'> {
+  const left = fObj.left ?? 0;
+  const top = fObj.top ?? 0;
+  const w = (fObj.width ?? 0) * (fObj.scaleX ?? 1);
+  const h = (fObj.height ?? 0) * (fObj.scaleY ?? 1);
+
+  return {
+    xPct: toPctX(left),
+    yPct: toPctY(top),
+    wPct: toPctX(w),
+    hPct: toPctY(h),
+    rotation: parseFloat((fObj.angle ?? 0).toFixed(2)),
+    opacity: parseFloat((fObj.opacity ?? 1).toFixed(4)),
+    visible: fObj.visible !== false,
+    locked: fObj.lockMovementX === true,
+  };
+}
+
+/* ────────────────────────────────────────────
+ *  Fabric Object → full TemplateObject
+ * ──────────────────────────────────────────── */
+export function fabricObjToFull(fObj: any): TemplateObject {
+  const partial = fabricObjToTemplatePartial(fObj);
+  const id: string = fObj._tplId ?? crypto.randomUUID();
+  const type: TemplateObject['type'] = fObj._tplType ?? 'shape';
+  const key: string | undefined = fObj._tplKey;
+  const shape: 'rect' | 'line' | undefined = fObj._tplShape;
+
+  const obj: TemplateObject = {
+    ...partial,
+    id,
+    type,
+    key,
+    shape,
+    zIndex: 0,
+  };
+
+  /* text */
+  if (type === 'field' || type === 'staticText') {
+    obj.text = fObj.text ?? '';
+    obj.textStyle = {
+      fontFamily: fObj.fontFamily ?? 'Inter',
+      fontSizePct: toPctH(fObj.fontSize ?? 24),
+      fontWeight:
+        fObj.fontWeight === 'bold' ? 700 : Number(fObj.fontWeight) || 400,
+      italic: fObj.fontStyle === 'italic',
+      fill: typeof fObj.fill === 'string' ? fObj.fill : '#333333',
+      align: (fObj.textAlign as TextStyle['align']) ?? 'left',
+      lineHeight: fObj.lineHeight ?? 1.4,
+      letterSpacing: fObj.charSpacing ? fObj.charSpacing / 1000 : 0,
+    };
+
+    /* text stroke */
+    const hasStroke = fObj.stroke && fObj.strokeWidth && fObj.strokeWidth > 0;
+    const shadow = fObj.shadow;
+    if (hasStroke || shadow) {
+      obj.effects = {};
+      if (hasStroke) {
+        obj.effects.stroke = {
+          color: fObj.stroke,
+          widthPct: toPctW(fObj.strokeWidth),
+        };
+      }
+      if (shadow) {
+        obj.effects.shadow = {
+          xPct: toPctW(shadow.offsetX ?? 0),
+          yPct: toPctH(shadow.offsetY ?? 0),
+          blurPct: toPctW(shadow.blur ?? 0),
+          color: shadow.color ?? 'rgba(0,0,0,0.3)',
+        };
+      }
+    }
+  }
+
+  /* shape effects + fill */
+  if (type === 'shape') {
+    obj.fill = typeof fObj.fill === 'string' ? fObj.fill : '#cccccc';
+    obj.effects = {
+      stroke: {
+        color: fObj.stroke ?? '#999999',
+        widthPct: toPctW(fObj.strokeWidth ?? 1),
+      },
+    };
+  }
+
+  /* image */
+  if (type === 'image') {
+    obj.image = { src: fObj._tplImageSrc ?? '' };
+  }
+
+  return obj;
+}
+
+/* ────────────────────────────────────────────
+ *  Full canvas → Template JSON
+ * ──────────────────────────────────────────── */
+export function fabricToTemplateJSON(
+  canvas: any,
+  name: string,
+  backgroundSrc: string | null
+): Template {
+  const objects: TemplateObject[] = canvas
+    .getObjects()
+    .filter((fObj: any) => !fObj._isGuide)
+    .map((fObj: any, idx: number) => {
+      const o = fabricObjToFull(fObj);
+      o.zIndex = idx;
+      return o;
+    });
+
+  return {
+    version: 1,
+    name,
+    canvas: { width: CANVAS_W, height: CANVAS_H },
+    background: { src: backgroundSrc, fit: 'contain' },
+    objects,
+  };
+}
+
+/* ────────────────────────────────────────────
+ *  TemplateObject → Fabric Object creation
+ * ──────────────────────────────────────────── */
+export function createFabricFromTemplate(
+  tObj: TemplateObject,
+  fabric: any
+): any | null {
+  const left = fromPctX(tObj.xPct);
+  const top = fromPctY(tObj.yPct);
+  const w = fromPctX(tObj.wPct);
+  const h = fromPctY(tObj.hPct);
+
+  const common: Record<string, any> = {
+    left,
+    top,
+    angle: tObj.rotation,
+    opacity: tObj.opacity,
+    visible: tObj.visible,
+    lockMovementX: tObj.locked,
+    lockMovementY: tObj.locked,
+    lockRotation: tObj.locked,
+    lockScalingX: tObj.locked,
+    lockScalingY: tObj.locked,
+    hasControls: !tObj.locked,
+    selectable: !tObj.locked,
+  };
+
+  let fObj: any = null;
+
+  if (tObj.type === 'field' || tObj.type === 'staticText') {
+    const ts = tObj.textStyle;
+    const fabricProps: Record<string, any> = {
+      ...common,
+      width: w,
+      fontSize: ts ? fromPctH(ts.fontSizePct) : 24,
+      fontFamily: ts?.fontFamily ?? 'Inter',
+      fontWeight: String(ts?.fontWeight ?? 400),
+      fontStyle: ts?.italic ? 'italic' : 'normal',
+      fill: ts?.fill ?? '#333333',
+      textAlign: ts?.align ?? 'left',
+      lineHeight: ts?.lineHeight ?? 1.4,
+      charSpacing: ts?.letterSpacing ? ts.letterSpacing * 1000 : 0,
+    };
+
+    /* restore text stroke */
+    if (tObj.effects?.stroke) {
+      fabricProps.stroke = tObj.effects.stroke.color;
+      fabricProps.strokeWidth = fromPctW(tObj.effects.stroke.widthPct);
+    }
+
+    /* restore shadow */
+    if (tObj.effects?.shadow) {
+      const s = tObj.effects.shadow;
+      fabricProps.shadow = new fabric.Shadow({
+        offsetX: fromPctW(s.xPct),
+        offsetY: fromPctH(s.yPct),
+        blur: fromPctW(s.blurPct),
+        color: s.color,
+      });
+    }
+
+    fObj = new fabric.Textbox(tObj.text ?? '', fabricProps);
+  } else if (tObj.type === 'shape' && tObj.shape === 'rect') {
+    fObj = new fabric.Rect({
+      ...common,
+      width: w,
+      height: h,
+      fill: tObj.fill ?? '#cccccc',
+      stroke: tObj.effects?.stroke?.color ?? '#999999',
+      strokeWidth: tObj.effects?.stroke
+        ? fromPctW(tObj.effects.stroke.widthPct)
+        : 1,
+    });
+  } else if (tObj.type === 'shape' && tObj.shape === 'line') {
+    fObj = new fabric.Line([0, 0, w, 0], {
+      ...common,
+      stroke: tObj.effects?.stroke?.color ?? '#333333',
+      strokeWidth: tObj.effects?.stroke
+        ? fromPctW(tObj.effects.stroke.widthPct)
+        : 2,
+    });
+  } else if (tObj.type === 'image') {
+    fObj = new fabric.Rect({
+      ...common,
+      width: w || 150,
+      height: h || 150,
+      fill: '#e2e8f0',
+      stroke: '#cbd5e1',
+      strokeWidth: 1,
+      rx: 4,
+      ry: 4,
+    });
+    fObj._tplImageSrc = tObj.image?.src ?? '';
+  }
+
+  if (fObj) {
+    fObj._tplId = tObj.id;
+    fObj._tplType = tObj.type;
+    fObj._tplKey = tObj.key;
+    fObj._tplShape = tObj.shape;
+  }
+
+  return fObj;
+}
+
+/* ────────────────────────────────────────────
+ *  Load template onto a canvas
+ * ──────────────────────────────────────────── */
+export function templateJSONToFabric(
+  canvas: any,
+  template: Template,
+  fabric: any
+) {
+  /* remove all existing user objects (keep guides) */
+  const existing = canvas.getObjects().slice();
+  existing.forEach((o: any) => canvas.remove(o));
+  canvas.backgroundImage = undefined;
+
+  /* sorted by zIndex ascending (bottom first in fabric) */
+  const sorted = [...template.objects].sort((a, b) => a.zIndex - b.zIndex);
+  sorted.forEach((tObj) => {
+    const fObj = createFabricFromTemplate(tObj, fabric);
+    if (fObj) canvas.add(fObj);
+  });
+
+  canvas.requestRenderAll();
+}
+
+export { createDefaultTemplate };