legacy.css 0.1.0

package/src/alerts.css

@@ -0,0 +1,21 @@
+.alert {
+  background: var(--legacy-info-bg);
+  border: 1px solid var(--legacy-info-border);
+  margin: 0 0 var(--legacy-space-4);
+  padding: var(--legacy-space-3);
+}
+
+.alert-success {
+  background: var(--legacy-success-bg);
+  border-color: var(--legacy-success-border);
+}
+
+.alert-warning {
+  background: var(--legacy-warning-bg);
+  border-color: var(--legacy-warning-border);
+}
+
+.alert-danger {
+  background: var(--legacy-danger-bg);
+  border-color: var(--legacy-danger-border);
+}

package/src/badges.css

@@ -0,0 +1,39 @@
+.badge {
+  background: var(--legacy-info-bg);
+  border: 1px solid var(--legacy-info-border);
+  border-radius: var(--legacy-radius);
+  color: var(--legacy-text);
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1.2;
+  padding: 0.12rem 0.35rem;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.badge-info {
+  background: var(--legacy-info-bg);
+  border-color: var(--legacy-info-border);
+}
+
+.badge-success {
+  background: var(--legacy-success-bg);
+  border-color: var(--legacy-success-border);
+}
+
+.badge-warning {
+  background: var(--legacy-warning-bg);
+  border-color: var(--legacy-warning-border);
+}
+
+.badge-danger {
+  background: var(--legacy-danger-bg);
+  border-color: var(--legacy-danger-border);
+}
+
+.badge-muted {
+  background: var(--legacy-surface);
+  border-color: var(--legacy-border);
+  color: var(--legacy-muted);
+}

package/src/base.css

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--legacy-page-bg);
+  color: var(--legacy-text);
+  font-family: var(--legacy-font-sans);
+  font-size: var(--legacy-font-size);
+  line-height: var(--legacy-line-height);
+}
+
+body {
+  margin: 0 auto;
+  max-width: 1120px;
+  min-height: 100vh;
+  padding: var(--legacy-space-4);
+}
+
+main {
+  background: var(--legacy-surface);
+  border: 1px solid var(--legacy-border);
+  padding: var(--legacy-space-4);
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--legacy-border);
+  margin: var(--legacy-space-4) 0;
+}
+
+img,
+svg,
+video {
+  max-width: 100%;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--legacy-font-mono);
+}

package/src/buttons.css

@@ -0,0 +1,40 @@
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  background: linear-gradient(
+    var(--legacy-button-bg-top),
+    var(--legacy-button-bg-bottom)
+  );
+  border: 1px solid var(--legacy-button-border);
+  border-radius: var(--legacy-radius);
+  color: var(--legacy-text);
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--legacy-font-sans);
+  font-size: 0.92rem;
+  font-weight: 400;
+  line-height: 1.2;
+  min-height: 1.75rem;
+  padding: 0.16rem 0.55rem;
+  text-align: center;
+  width: auto;
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover {
+  background: linear-gradient(
+    var(--legacy-button-bg-top),
+    var(--legacy-button-hover-bottom)
+  );
+  border-color: var(--legacy-primary);
+}
+
+button:active,
+input[type="button"]:active,
+input[type="reset"]:active,
+input[type="submit"]:active {
+  background: var(--legacy-button-active-bg);
+}

package/src/dragdrop.css

@@ -0,0 +1,49 @@
+.dragdrop {
+  align-items: stretch;
+  display: grid;
+  gap: var(--legacy-space-3);
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  margin: 0 0 var(--legacy-space-4);
+}
+
+.dragdrop-column {
+  background: var(--legacy-surface);
+  border: 1px solid var(--legacy-border);
+  min-height: 8rem;
+  padding: var(--legacy-space-2);
+}
+
+.dragdrop-column > header {
+  background: var(--legacy-header-bg);
+  border: 1px solid var(--legacy-border);
+  color: var(--legacy-primary-dark);
+  font-weight: 700;
+  margin: 0 0 var(--legacy-space-2);
+  padding: var(--legacy-space-2);
+}
+
+.dragdrop-column.is-drag-over {
+  background: var(--legacy-info-bg);
+  outline: 2px solid var(--legacy-info-border);
+  outline-offset: -2px;
+}
+
+.dragdrop-item,
+[data-dragdrop-item] {
+  background: var(--legacy-surface-raised);
+  border: 1px solid var(--legacy-border-dark);
+  cursor: move;
+  margin: 0 0 var(--legacy-space-2);
+  padding: var(--legacy-space-2);
+}
+
+.dragdrop-item:focus,
+[data-dragdrop-item]:focus {
+  outline: 2px solid var(--legacy-focus);
+  outline-offset: 1px;
+}
+
+.dragdrop-item.is-dragging,
+[data-dragdrop-item].is-dragging {
+  opacity: 0.55;
+}

package/src/features/dragdrop.ts

@@ -0,0 +1,273 @@
+import { currentTargetElement, eventTargetElement, isElement, isLegacyCollection, listen } from "../internal";
+import type { LegacyDragdropOptions, LegacyDragdropPayload, LegacyDragdropState, LegacyRequiredApi, LegacyTarget } from "../internal";
+const wiredDragdropBoards = new WeakSet<Element>();
+const dragdropOptions = new WeakMap<Element, LegacyDragdropOptions>();
+const dragdropBoardSelector = "[data-dragdrop], .dragdrop";
+const dragdropColumnSelector = "[data-dragdrop-column], .dragdrop-column";
+const dragdropItemSelector = "[data-dragdrop-item], .dragdrop-item";
+let dragdropState: LegacyDragdropState | null = null;
+
+export function installDragdrop(legacy: LegacyRequiredApi): void {
+  function resolveDragdropBoard(target: LegacyTarget): Element | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveDragdropBoard(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+
+    if (isElement(target)) {
+      if (target.matches(dragdropBoardSelector)) {
+        return target;
+      }
+
+      return target.closest(dragdropBoardSelector);
+    }
+
+    return null;
+  }
+
+  function getDragdropItems(column: Element): Element[] {
+    return Array.from(column.querySelectorAll(dragdropItemSelector)).filter(
+      (item) => item.closest(dragdropColumnSelector) === column
+    );
+  }
+
+  function getDragdropColumnId(column: Element): string | null {
+    return column.getAttribute("data-column") || column.id || null;
+  }
+
+  function getDragdropIndex(item: Element, column: Element): number {
+    return getDragdropItems(column).indexOf(item);
+  }
+
+  function getDragdropInsertBefore(column: Element, clientY: number): Element | null {
+    return getDragdropItems(column)
+      .filter((item) => !item.classList.contains("is-dragging"))
+      .reduce(
+        (closest, item) => {
+          const rect = item.getBoundingClientRect();
+          const offset = clientY - rect.top - rect.height / 2;
+
+          if (offset < 0 && offset > closest.offset) {
+            return { offset, item };
+          }
+
+          return closest;
+        },
+        { offset: Number.NEGATIVE_INFINITY, item: null as Element | null }
+      ).item;
+  }
+
+  function createDragdropPayload(originalEvent: Event, toColumn: Element | null): LegacyDragdropPayload | null {
+    /* v8 ignore next -- payload creation is only called after drag state has been established */
+    if (!dragdropState) {
+      return null;
+    }
+
+    /* v8 ignore next -- drop handlers pass an explicit destination column */
+    const destinationColumn = toColumn || dragdropState.item.closest(dragdropColumnSelector);
+
+    return {
+      board: dragdropState.board,
+      item: dragdropState.item,
+      fromColumn: dragdropState.fromColumn,
+      toColumn: destinationColumn,
+      fromColumnId: getDragdropColumnId(dragdropState.fromColumn),
+      /* v8 ignore next -- destination is established by validated dragover/drop targets */
+      toColumnId: destinationColumn ? getDragdropColumnId(destinationColumn) : null,
+      fromIndex: dragdropState.fromIndex,
+      /* v8 ignore next -- destination is established by validated dragover/drop targets */
+      toIndex: destinationColumn ? getDragdropIndex(dragdropState.item, destinationColumn) : -1,
+      originalEvent,
+    };
+  }
+
+  function callDragdropCallback(
+    board: Element,
+    name: keyof LegacyDragdropOptions,
+    payload: LegacyDragdropPayload | null
+  ): void {
+    /* v8 ignore next -- setup always initializes an options object for wired boards */
+    const options = dragdropOptions.get(board) || {};
+    const callback = options[name];
+
+    if (typeof callback === "function") {
+      callback.call(board, payload as LegacyDragdropPayload);
+    }
+  }
+
+  function clearDragdropState(): void {
+    /* v8 ignore next -- cleanup is shared by active and already-cleared drag paths */
+    if (dragdropState) {
+      dragdropState.item.classList.remove("is-dragging");
+      dragdropState.board
+        .querySelectorAll(".is-drag-over")
+        .forEach((column) => column.classList.remove("is-drag-over"));
+    }
+
+    dragdropState = null;
+  }
+
+  function handleDragdropStart(event: DragEvent): void {
+    const target = eventTargetElement(event);
+    /* v8 ignore next -- browser drag events provide element targets */
+    const item = target ? target.closest(dragdropItemSelector) : null;
+    const board = resolveDragdropBoard(currentTargetElement(event));
+
+    if (!item || !board || !board.contains(item)) {
+      return;
+    }
+
+    const fromColumn = item.closest(dragdropColumnSelector);
+
+    if (!fromColumn || !board.contains(fromColumn)) {
+      return;
+    }
+
+    dragdropState = {
+      board,
+      item,
+      fromColumn,
+      fromIndex: getDragdropIndex(item, fromColumn),
+    };
+
+    item.classList.add("is-dragging");
+
+    /* v8 ignore next -- jsdom tests cover both event payloads and no-payload drag events */
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", item.getAttribute("data-id") || item.id || "");
+    }
+
+    callDragdropCallback(board, "onDrag", createDragdropPayload(event, fromColumn));
+  }
+
+  function handleDragdropOver(event: DragEvent): void {
+    if (!dragdropState) {
+      return;
+    }
+
+    const target = eventTargetElement(event);
+    /* v8 ignore next -- browser dragover events provide element targets */
+    const column = target ? target.closest(dragdropColumnSelector) : null;
+
+    if (!column || !dragdropState.board.contains(column)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+
+    dragdropState.board
+      .querySelectorAll(".is-drag-over")
+      .forEach((currentColumn) => {
+        /* v8 ignore next -- class cleanup depends on prior hover column */
+        if (currentColumn !== column) {
+          currentColumn.classList.remove("is-drag-over");
+        }
+      });
+
+    column.classList.add("is-drag-over");
+
+    const insertBefore = getDragdropInsertBefore(column, event.clientY);
+    column.insertBefore(dragdropState.item, insertBefore);
+  }
+
+  function handleDragdropDrop(event: DragEvent): void {
+    if (!dragdropState) {
+      return;
+    }
+
+    const target = eventTargetElement(event);
+    /* v8 ignore next -- browser drop events provide element targets */
+    const column = target ? target.closest(dragdropColumnSelector) : null;
+
+    if (!column || !dragdropState.board.contains(column)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const payload = createDragdropPayload(event, column);
+
+    /* v8 ignore next -- guarded by dragdropState check before payload creation */
+    if (!payload) {
+      return;
+    }
+
+    const changedColumn = payload.fromColumn !== payload.toColumn;
+    const changedIndex = payload.fromIndex !== payload.toIndex;
+
+    /* v8 ignore next -- no-op same-position drops are intentionally silent */
+    if (changedColumn || changedIndex) {
+      callDragdropCallback(payload.board, "onDrop", payload);
+
+      if (changedColumn) {
+        callDragdropCallback(payload.board, "onChangeColumn", payload);
+      }
+    }
+
+    clearDragdropState();
+  }
+
+  function handleDragdropEnd(): void {
+    clearDragdropState();
+  }
+
+  function setupDragdrop(target: LegacyTarget, options?: LegacyDragdropOptions): Element | null {
+    const board = resolveDragdropBoard(target);
+
+    if (!board) {
+      return null;
+    }
+
+    /* v8 ignore next 6 -- option setup supports explicit, merged, and default branches */
+    if (options !== undefined) {
+      /* v8 ignore next -- option merging tolerates absent prior options and null updates */
+      dragdropOptions.set(board, Object.assign({}, dragdropOptions.get(board), options || {}));
+    } else if (!dragdropOptions.has(board)) {
+      dragdropOptions.set(board, {});
+    }
+
+    board.querySelectorAll(dragdropItemSelector).forEach((item) => {
+      if (!item.hasAttribute("draggable")) {
+        item.setAttribute("draggable", "true");
+      }
+    });
+
+    if (wiredDragdropBoards.has(board)) {
+      return board;
+    }
+
+    wiredDragdropBoards.add(board);
+    listen(board, "dragstart", handleDragdropStart as EventListener);
+    listen(board, "dragover", handleDragdropOver as EventListener);
+    listen(board, "drop", handleDragdropDrop as EventListener);
+    listen(board, "dragend", handleDragdropEnd);
+
+    return board;
+  }
+
+  legacy.dragdrop = {
+    setup(target, options) {
+      return setupDragdrop(target, options);
+    },
+  };
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(dragdropBoardSelector).forEach((board) => {
+      setupDragdrop(board);
+    });
+  });
+
+
+}