create-dalila 1.2.0 → 1.2.1

package/template/src/components/ui/dropzone/index.ts

@@ -1,114 +0,0 @@
-import { signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Dropzone, DropzoneOptions } from "../ui-types.js";
-import { validateDropzoneOptions } from "../validate.js";
-
-export function createDropzone(options: DropzoneOptions = {}): Dropzone {
-  validateDropzoneOptions(options as Record<string, unknown>);
-  const { accept, multiple = true, maxFiles, maxSize } = options;
-
-  const dragging = signal(false);
-  const files = signal<File[]>([]);
-
-  let inputEl: HTMLInputElement | null = null;
-
-  const filterFiles = (fileList: File[]): File[] => {
-    let result = fileList;
-
-    if (accept) {
-      const types = accept.split(",").map((t) => t.trim().toLowerCase());
-      result = result.filter((f) => {
-        const ext = "." + f.name.split(".").pop()?.toLowerCase();
-        const mime = f.type.toLowerCase();
-        return types.some(
-          (t) => t === ext || t === mime || (t.endsWith("/*") && mime.startsWith(t.slice(0, -1)))
-        );
-      });
-    }
-
-    if (maxSize) {
-      result = result.filter((f) => f.size <= maxSize);
-    }
-
-    if (maxFiles) {
-      result = result.slice(0, maxFiles);
-    }
-
-    return result;
-  };
-
-  const addFiles = (newFiles: File[]) => {
-    const filtered = filterFiles(newFiles);
-    if (multiple) {
-      files.update((current) => {
-        const combined = [...current, ...filtered];
-        return maxFiles ? combined.slice(0, maxFiles) : combined;
-      });
-    } else {
-      files.set(filtered.slice(0, 1));
-    }
-  };
-
-  const browse = () => {
-    inputEl?.click();
-  };
-
-  const handleClick = () => browse();
-
-  const handleDragover = (ev: DragEvent) => {
-    ev.preventDefault();
-    dragging.set(true);
-  };
-
-  const handleDragleave = () => {
-    dragging.set(false);
-  };
-
-  const handleDrop = (ev: DragEvent) => {
-    ev.preventDefault();
-    dragging.set(false);
-    if (ev.dataTransfer?.files) {
-      addFiles(Array.from(ev.dataTransfer.files));
-    }
-  };
-
-  const _attachTo = (el: HTMLElement) => {
-    const scope = getCurrentScope();
-
-    // ARIA
-    el.setAttribute("role", "button");
-    el.setAttribute("tabindex", "0");
-
-    inputEl = el.querySelector<HTMLInputElement>('input[type="file"]');
-
-    if (inputEl) {
-      if (accept) inputEl.accept = accept;
-      inputEl.multiple = multiple;
-
-      const onInputChange = () => {
-        if (inputEl?.files) {
-          addFiles(Array.from(inputEl.files));
-          inputEl.value = "";
-        }
-      };
-      inputEl.addEventListener("change", onInputChange);
-
-      if (scope) {
-        scope.onCleanup(() => {
-          inputEl?.removeEventListener("change", onInputChange);
-        });
-      }
-    }
-  };
-
-  return {
-    dragging,
-    files,
-    browse,
-    handleClick,
-    handleDragover,
-    handleDragleave,
-    handleDrop,
-    _attachTo,
-  };
-}

package/template/src/components/ui/env.ts

@@ -1,4 +0,0 @@
-// ── Environment Detection ───────────────────────────────────────────
-
-export const isBrowser =
-  typeof window !== "undefined" && typeof document !== "undefined";

package/template/src/components/ui/index.ts

@@ -1,13 +0,0 @@
-export * from "./ui-types.js";
-export { createDialog, _attachDialogBehavior } from "./dialog/index.js";
-export { createDrawer } from "./drawer/index.js";
-export { createToast, toastIcon } from "./toast/index.js";
-export { createTabs, tabBindings } from "./tabs/index.js";
-export { createDropdown } from "./dropdown/index.js";
-export { createCombobox } from "./combobox/index.js";
-export { createAccordion } from "./accordion/index.js";
-export { createCalendar } from "./calendar/index.js";
-export { createDropzone } from "./dropzone/index.js";
-export { createPopover } from "./popover/index.js";
-export { mountUI } from "./runtime.js";
-export type { MountUIOptions } from "./runtime.js";

package/template/src/components/ui/popover/index.ts

@@ -1,185 +0,0 @@
-import { signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Popover, PopoverOptions, PopoverPlacement } from "../ui-types.js";
-import { validatePopoverOptions } from "../validate.js";
-import { isBrowser } from "../env.js";
-
-let popoverUid = 0;
-
-function computePosition(
-  trigger: HTMLElement,
-  popoverEl: HTMLElement,
-  placement: PopoverPlacement,
-  gap: number,
-  viewportPadding: number
-): { top: number; left: number } {
-  const triggerRect = trigger.getBoundingClientRect();
-  const popRect = popoverEl.getBoundingClientRect();
-  const vw = isBrowser ? window.innerWidth : 1024;
-  const vh = isBrowser ? window.innerHeight : 768;
-
-  // ── Flip when not enough space ──
-  let effective = placement as string;
-
-  if (effective.startsWith("bottom") && triggerRect.bottom + gap + popRect.height > vh - viewportPadding) {
-    if (triggerRect.top - gap - popRect.height >= viewportPadding) {
-      effective = effective.replace("bottom", "top");
-    }
-  } else if (effective.startsWith("top") && triggerRect.top - gap - popRect.height < viewportPadding) {
-    if (triggerRect.bottom + gap + popRect.height <= vh - viewportPadding) {
-      effective = effective.replace("top", "bottom");
-    }
-  } else if (effective === "left" && triggerRect.left - gap - popRect.width < viewportPadding) {
-    if (triggerRect.right + gap + popRect.width <= vw - viewportPadding) {
-      effective = "right";
-    }
-  } else if (effective === "right" && triggerRect.right + gap + popRect.width > vw - viewportPadding) {
-    if (triggerRect.left - gap - popRect.width >= viewportPadding) {
-      effective = "left";
-    }
-  }
-
-  let top = 0;
-  let left = 0;
-
-  switch (effective) {
-    case "bottom":
-      top = triggerRect.bottom + gap;
-      left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
-      break;
-    case "bottom-start":
-      top = triggerRect.bottom + gap;
-      left = triggerRect.left;
-      break;
-    case "top":
-      top = triggerRect.top - popRect.height - gap;
-      left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
-      break;
-    case "top-start":
-      top = triggerRect.top - popRect.height - gap;
-      left = triggerRect.left;
-      break;
-    case "left":
-      top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
-      left = triggerRect.left - popRect.width - gap;
-      break;
-    case "right":
-      top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
-      left = triggerRect.right + gap;
-      break;
-  }
-
-  // Viewport clamping
-  const maxLeft = vw - popRect.width - viewportPadding;
-  left = Math.min(Math.max(viewportPadding, left), Math.max(viewportPadding, maxLeft));
-
-  const maxTop = vh - popRect.height - viewportPadding;
-  top = Math.min(Math.max(viewportPadding, top), Math.max(viewportPadding, maxTop));
-
-  return { top, left };
-}
-
-export function createPopover(options: PopoverOptions = {}): Popover {
-  validatePopoverOptions(options as Record<string, unknown>);
-  const {
-    placement: initialPlacement = "bottom",
-    gap = 8,
-    viewportPadding = 12,
-  } = options;
-
-  const open = signal(false);
-  const placement = signal<PopoverPlacement>(initialPlacement);
-
-  const show = () => open.set(true);
-  const hide = () => open.set(false);
-  const toggle = () => open.update((v) => !v);
-
-  const position = (trigger: HTMLElement, popoverEl: HTMLElement) => {
-    const { top, left } = computePosition(
-      trigger,
-      popoverEl,
-      placement(),
-      gap,
-      viewportPadding
-    );
-    popoverEl.style.position = "fixed";
-    popoverEl.style.top = `${top}px`;
-    popoverEl.style.left = `${left}px`;
-  };
-
-  const _attachTo = (trigger: HTMLElement, popoverEl: HTMLElement) => {
-    const scope = getCurrentScope();
-
-    // Ensure popover attribute for native API
-    if (!popoverEl.hasAttribute("popover")) {
-      popoverEl.setAttribute("popover", "manual");
-    }
-
-    const reposition = () => {
-      try {
-        if (!popoverEl.matches(":popover-open")) return;
-      } catch {
-        return;
-      }
-      position(trigger, popoverEl);
-    };
-
-    // Sync open signal → native popover
-    const unsub = open.on((isOpen) => {
-      try {
-        const isNativeOpen = popoverEl.matches(":popover-open");
-        if (isOpen && !isNativeOpen) {
-          popoverEl.showPopover();
-          reposition();
-        } else if (!isOpen && isNativeOpen) {
-          popoverEl.hidePopover();
-        }
-      } catch {
-        // Popover API not supported or element not connected
-      }
-    });
-
-    // Sync native toggle → signal
-    const onToggle = (ev: Event) => {
-      const state = (ev as ToggleEvent).newState;
-      if (state === "open") {
-        if (!open.peek()) open.set(true);
-        reposition();
-      } else {
-        if (open.peek()) open.set(false);
-      }
-    };
-    popoverEl.addEventListener("toggle", onToggle);
-
-    // Reposition on scroll/resize
-    if (isBrowser) {
-      window.addEventListener("resize", reposition);
-      window.addEventListener("scroll", reposition, { passive: true });
-    }
-
-    // ARIA
-    const popoverId = popoverEl.id || `d-popover-${++popoverUid}`;
-    if (!popoverEl.id) popoverEl.id = popoverId;
-    trigger.setAttribute("aria-controls", popoverId);
-    trigger.setAttribute("aria-expanded", "false");
-    trigger.setAttribute("aria-haspopup", "true");
-
-    const unsubAria = open.on((isOpen) => {
-      trigger.setAttribute("aria-expanded", String(isOpen));
-    });
-
-    if (scope) {
-      scope.onCleanup(() => {
-        unsub();
-        unsubAria();
-        popoverEl.removeEventListener("toggle", onToggle);
-        if (isBrowser) {
-          window.removeEventListener("resize", reposition);
-          window.removeEventListener("scroll", reposition);
-        }
-      });
-    }
-  };
-
-  return { open, show, hide, toggle, placement, position, _attachTo };
-}