willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-shared/src/floating.ts

@@ -0,0 +1,160 @@
+import { clampNumber } from "#shared/number";
+
+export type FloatingPanelSide = "top" | "right" | "bottom" | "left";
+export type FloatingPanelAlign = "start" | "center" | "end";
+
+export type FloatingPanelRect = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export type FloatingPanelPoint = {
+  x: number;
+  y: number;
+};
+
+export type FloatingPanelPosition = {
+  top: number;
+  left: number;
+  minWidth?: number;
+};
+
+export type FloatingPanelPositionOptions = {
+  anchorRect?: FloatingPanelRect;
+  anchorPoint?: FloatingPanelPoint;
+  floatingRect: Pick<FloatingPanelRect, "width" | "height">;
+  side?: FloatingPanelSide;
+  align?: FloatingPanelAlign;
+  offset?: number;
+  viewportWidth?: number;
+  viewportHeight?: number;
+  viewportPadding?: number;
+  matchAnchorMinWidth?: boolean;
+};
+
+export function getFloatingPanelPosition(
+  options: FloatingPanelPositionOptions,
+) {
+  const {
+    anchorRect,
+    anchorPoint,
+    floatingRect,
+    side = "bottom",
+    align = "start",
+    offset = 0,
+    viewportWidth,
+    viewportHeight,
+    viewportPadding = 8,
+    matchAnchorMinWidth = false,
+  } = options;
+  const resolvedViewportWidth =
+    viewportWidth ?? (typeof window === "undefined" ? 0 : window.innerWidth);
+  const resolvedViewportHeight =
+    viewportHeight ?? (typeof window === "undefined" ? 0 : window.innerHeight);
+  const floatingWidth = floatingRect.width;
+  const floatingHeight = floatingRect.height;
+  const basePosition = anchorPoint
+    ? {
+        top: anchorPoint.y,
+        left: anchorPoint.x,
+      }
+    : getAnchoredPanelPosition({
+        anchorRect: anchorRect ?? createPointRect({ x: 0, y: 0 }),
+        floatingRect,
+        side,
+        align,
+        offset,
+      });
+  const maxLeft = Math.max(
+    viewportPadding,
+    resolvedViewportWidth - floatingWidth - viewportPadding,
+  );
+  const maxTop = Math.max(
+    viewportPadding,
+    resolvedViewportHeight - floatingHeight - viewportPadding,
+  );
+  const position: FloatingPanelPosition = {
+    top: clampNumber(basePosition.top, viewportPadding, maxTop),
+    left: clampNumber(basePosition.left, viewportPadding, maxLeft),
+  };
+
+  if (anchorRect && matchAnchorMinWidth) {
+    position.minWidth = Math.min(
+      anchorRect.width,
+      resolvedViewportWidth - viewportPadding * 2,
+    );
+  }
+
+  return position;
+}
+
+const getAnchoredPanelPosition = (options: {
+  anchorRect: FloatingPanelRect;
+  floatingRect: Pick<FloatingPanelRect, "width" | "height">;
+  side: FloatingPanelSide;
+  align: FloatingPanelAlign;
+  offset: number;
+}) => {
+  const { anchorRect, floatingRect, side, align, offset } = options;
+  const centerLeft =
+    anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2;
+  const centerTop =
+    anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2;
+
+  if (side === "top" || side === "bottom") {
+    const top =
+      side === "top"
+        ? anchorRect.top - floatingRect.height - offset
+        : anchorRect.bottom + offset;
+    const left = getAlignedPosition({
+      start: anchorRect.left,
+      end: anchorRect.right,
+      size: floatingRect.width,
+      center: centerLeft,
+      align,
+    });
+
+    return { top, left };
+  }
+
+  const top = getAlignedPosition({
+    start: anchorRect.top,
+    end: anchorRect.bottom,
+    size: floatingRect.height,
+    center: centerTop,
+    align,
+  });
+  const left =
+    side === "left"
+      ? anchorRect.left - floatingRect.width - offset
+      : anchorRect.right + offset;
+
+  return { top, left };
+};
+
+const getAlignedPosition = (options: {
+  start: number;
+  end: number;
+  size: number;
+  center: number;
+  align: FloatingPanelAlign;
+}) => {
+  const { start, end, size, center, align } = options;
+
+  if (align === "start") return start;
+  if (align === "end") return end - size;
+  return center;
+};
+
+const createPointRect = (point: FloatingPanelPoint): FloatingPanelRect => ({
+  top: point.y,
+  right: point.x,
+  bottom: point.y,
+  left: point.x,
+  width: 0,
+  height: 0,
+});

package/packages/willa-shared/src/floatingLayer.ts

@@ -0,0 +1,310 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+
+import {
+  getFloatingPanelPosition,
+  type FloatingPanelAlign,
+  type FloatingPanelPoint,
+  type FloatingPanelPosition,
+  type FloatingPanelRect,
+  type FloatingPanelSide,
+} from "#shared/floating";
+
+export type FloatingLayerPosition = FloatingPanelPosition & {
+  anchorRect?: FloatingPanelRect;
+  width?: number;
+};
+
+export type UseFloatingLayerOptions = {
+  open: boolean;
+  triggerRef?: RefObject<HTMLElement | null>;
+  floatingRef: RefObject<HTMLElement | null>;
+  anchorRect?: FloatingPanelRect | null;
+  anchorPoint?: FloatingPanelPoint | null;
+  side?: FloatingPanelSide;
+  align?: FloatingPanelAlign;
+  offset?: number;
+  viewportPadding?: number;
+  minWidth?: number;
+  fallbackWidth?: number;
+  fallbackHeight?: number;
+  matchAnchorWidth?: boolean;
+  matchAnchorMinWidth?: boolean;
+  fullWidthBelow?: number;
+  applyResolvedWidth?: boolean;
+  flipToFit?: boolean;
+  outsideRefs?: Array<RefObject<HTMLElement | null>>;
+  closeOnOutsidePointerDown?: boolean;
+  restoreFocus?: boolean;
+  onClose?: () => void;
+  onOpenAutoFocus?: () => void;
+  getAnchorRect?: () => FloatingPanelRect | null;
+  getAnchorPoint?: () => FloatingPanelPoint | null;
+};
+
+export function useFloatingLayer(options: UseFloatingLayerOptions) {
+  const {
+    open,
+    triggerRef,
+    floatingRef,
+    anchorRect,
+    anchorPoint,
+    getAnchorRect,
+    getAnchorPoint,
+    side = "bottom",
+    align = "start",
+    offset = 0,
+    viewportPadding = 8,
+    minWidth,
+    fallbackWidth,
+    fallbackHeight = 0,
+    matchAnchorWidth = false,
+    matchAnchorMinWidth = false,
+    fullWidthBelow,
+    applyResolvedWidth = false,
+    flipToFit = false,
+    outsideRefs,
+    closeOnOutsidePointerDown = true,
+    restoreFocus = false,
+    onClose,
+    onOpenAutoFocus,
+  } = options;
+  const [position, setPosition] = useState<FloatingLayerPosition>();
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  const updatePosition = useCallback(() => {
+    const triggerElement = triggerRef?.current;
+    const floatingElement = floatingRef.current;
+    if (!floatingElement || typeof window === "undefined") return;
+
+    const resolvedAnchorRect =
+      getAnchorRect?.() ??
+      anchorRect ??
+      triggerElement?.getBoundingClientRect();
+    const resolvedAnchorPoint = getAnchorPoint?.() ?? anchorPoint ?? null;
+    const viewportWidth = window.innerWidth;
+    const maxWidth = Math.max(0, viewportWidth - viewportPadding * 2);
+    const rawFloatingWidth =
+      floatingElement.offsetWidth ||
+      resolvedAnchorRect?.width ||
+      fallbackWidth ||
+      0;
+    const floatingHeight = floatingElement.offsetHeight || fallbackHeight;
+    const resolvedSide =
+      flipToFit && resolvedAnchorRect && !resolvedAnchorPoint
+        ? getFloatingLayerFitSide({
+            anchorRect: resolvedAnchorRect,
+            floatingHeight,
+            side,
+            viewportHeight: window.innerHeight,
+            viewportPadding,
+          })
+        : side;
+    const floatingWidth = resolveFloatingLayerWidth({
+      anchorWidth: resolvedAnchorRect?.width,
+      floatingWidth: rawFloatingWidth,
+      fullWidthBelow,
+      matchAnchorWidth,
+      maxWidth,
+      minWidth,
+      viewportWidth,
+    });
+    const nextPosition = getFloatingPanelPosition({
+      anchorPoint: resolvedAnchorPoint ?? undefined,
+      anchorRect: resolvedAnchorPoint ? undefined : resolvedAnchorRect,
+      floatingRect: {
+        width: floatingWidth,
+        height: floatingHeight,
+      },
+      side: resolvedSide,
+      align,
+      offset,
+      viewportPadding,
+      matchAnchorMinWidth:
+        matchAnchorMinWidth && !matchAnchorWidth && !resolvedAnchorPoint,
+    });
+
+    setPosition({
+      ...nextPosition,
+      anchorRect: resolvedAnchorRect ?? undefined,
+      width:
+        applyResolvedWidth || matchAnchorWidth || minWidth !== undefined
+          ? floatingWidth
+          : undefined,
+    });
+  }, [
+    align,
+    anchorRect,
+    anchorPoint,
+    fallbackHeight,
+    fallbackWidth,
+    flipToFit,
+    floatingRef,
+    fullWidthBelow,
+    getAnchorRect,
+    getAnchorPoint,
+    matchAnchorMinWidth,
+    matchAnchorWidth,
+    minWidth,
+    offset,
+    applyResolvedWidth,
+    side,
+    triggerRef,
+    viewportPadding,
+  ]);
+
+  useEffect(() => {
+    if (!open || typeof window === "undefined") return;
+
+    const ownerDocument =
+      floatingRef.current?.ownerDocument ??
+      triggerRef?.current?.ownerDocument ??
+      document;
+    if (restoreFocus) {
+      previousFocusRef.current =
+        ownerDocument.activeElement instanceof HTMLElement
+          ? ownerDocument.activeElement
+          : null;
+    }
+
+    updatePosition();
+
+    const frame = window.requestAnimationFrame(updatePosition);
+    const focusTimer =
+      onOpenAutoFocus === undefined
+        ? undefined
+        : window.setTimeout(onOpenAutoFocus, 0);
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!closeOnOutsidePointerDown) return;
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (
+        containsPointerTarget(target, [
+          triggerRef,
+          floatingRef,
+          ...(outsideRefs ?? []),
+        ])
+      ) {
+        return;
+      }
+
+      onClose?.();
+    };
+
+    const handleWindowUpdate = () => {
+      updatePosition();
+    };
+
+    ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("resize", handleWindowUpdate);
+    window.addEventListener("scroll", handleWindowUpdate, true);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      if (focusTimer !== undefined) {
+        window.clearTimeout(focusTimer);
+      }
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("resize", handleWindowUpdate);
+      window.removeEventListener("scroll", handleWindowUpdate, true);
+
+      if (restoreFocus) {
+        previousFocusRef.current?.focus();
+        previousFocusRef.current = null;
+      }
+    };
+  }, [
+    closeOnOutsidePointerDown,
+    floatingRef,
+    onClose,
+    onOpenAutoFocus,
+    open,
+    outsideRefs,
+    restoreFocus,
+    triggerRef,
+    updatePosition,
+  ]);
+
+  useEffect(() => {
+    if (open) return;
+    setPosition(undefined);
+  }, [open]);
+
+  return {
+    position,
+    updatePosition,
+  };
+}
+
+const getFloatingLayerFitSide = (options: {
+  anchorRect: FloatingPanelRect;
+  floatingHeight: number;
+  side: FloatingPanelSide;
+  viewportHeight: number;
+  viewportPadding: number;
+}) => {
+  const { anchorRect, floatingHeight, side, viewportHeight, viewportPadding } =
+    options;
+
+  if (side !== "top" && side !== "bottom") return side;
+
+  const topSpace = anchorRect.top - viewportPadding;
+  const bottomSpace = viewportHeight - anchorRect.bottom - viewportPadding;
+
+  if (side === "top") {
+    return topSpace >= floatingHeight || topSpace >= bottomSpace
+      ? "top"
+      : "bottom";
+  }
+
+  return bottomSpace >= floatingHeight || bottomSpace >= topSpace
+    ? "bottom"
+    : "top";
+};
+
+const resolveFloatingLayerWidth = (options: {
+  anchorWidth?: number;
+  floatingWidth: number;
+  fullWidthBelow?: number;
+  matchAnchorWidth: boolean;
+  maxWidth: number;
+  minWidth?: number;
+  viewportWidth: number;
+}) => {
+  const {
+    anchorWidth,
+    floatingWidth,
+    fullWidthBelow,
+    matchAnchorWidth,
+    maxWidth,
+    minWidth,
+    viewportWidth,
+  } = options;
+
+  if (fullWidthBelow !== undefined && viewportWidth <= fullWidthBelow) {
+    return maxWidth;
+  }
+
+  if (matchAnchorWidth && anchorWidth !== undefined) {
+    return Math.min(Math.max(anchorWidth, minWidth ?? anchorWidth), maxWidth);
+  }
+
+  if (minWidth !== undefined) {
+    return Math.min(Math.max(floatingWidth, minWidth), maxWidth);
+  }
+
+  return floatingWidth;
+};
+
+const containsPointerTarget = (
+  target: Node,
+  refs: Array<RefObject<HTMLElement | null> | undefined>,
+) => {
+  return refs.some((ref) => ref?.current?.contains(target));
+};

package/packages/willa-shared/src/heading.ts

@@ -0,0 +1,69 @@
+import { isArray, isNil } from "aidly";
+import type { Heading } from "#shared/types";
+
+const toHeadingSlug = (value: string) => {
+  const normalized = value
+    .trim()
+    .replace(/\[[^\]]*\]\([^)]*\)/g, (m) => {
+      const match = /^\[([^\]]*)\]/.exec(m);
+      return match?.[1] ?? "";
+    })
+    .replace(/`+/g, "")
+    .replace(/[*_~]/g, "")
+    .replace(/<[^>]+>/g, "");
+
+  return normalized
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^\p{L}\p{N}-]+/gu, "")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+};
+
+export function flattenText(node: unknown): string {
+  if (isNil(node)) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (isArray(node)) return node.map(flattenText).join("");
+  if (typeof node === "object" && "props" in (node as any)) {
+    return flattenText((node as any).props?.children);
+  }
+  return "";
+}
+
+export function createHeadingIdFactory() {
+  const counts = new Map<string, number>();
+
+  return (text: string) => {
+    const base = toHeadingSlug(text) || "section";
+    const next = (counts.get(base) ?? 0) + 1;
+    counts.set(base, next);
+    return next === 1 ? base : `${base}-${next}`;
+  };
+}
+
+export function extractHeadings(source: string) {
+  const nextId = createHeadingIdFactory();
+  const headings: Array<Heading> = [];
+  const lines = source.split(/\r?\n/);
+
+  let inFence = false;
+  for (const line of lines) {
+    if (/^```/.test(line.trim())) {
+      inFence = !inFence;
+      continue;
+    }
+
+    if (inFence) continue;
+
+    const match = /^(#{2,3})\s+(.+?)\s*$/.exec(line);
+    if (!match) continue;
+
+    const level = match[1].length as 2 | 3;
+    const raw = match[2].replace(/\s+#+\s*$/, "").trim();
+    if (!raw) continue;
+
+    headings.push({ level, text: raw, id: nextId(raw) });
+  }
+
+  return headings;
+}

package/packages/willa-shared/src/index.ts

@@ -0,0 +1,88 @@
+export { formatCssSize } from "#shared/css";
+export { copyToClipboard } from "#shared/clipboard";
+export {
+  useControllableState,
+  type ControllableStateOptions,
+} from "#shared/controllableState";
+export {
+  isMobile,
+  isMobileViewport,
+  MOBILE_BREAKPOINT,
+} from "#shared/viewport";
+export {
+  useCopyToClipboard,
+  type CopyStatus,
+  type CopyToClipboardActionOptions,
+  type CopyToClipboardOptions,
+} from "#shared/copy";
+export {
+  parseCodeMeta,
+  highlightCodeToHtml,
+  normalizeHljsLanguage,
+  createCodeHighlightLines,
+} from "#shared/codeHighlight";
+export { getFocusableElements } from "#shared/dom";
+export {
+  getFloatingPanelPosition,
+  type FloatingPanelAlign,
+  type FloatingPanelPoint,
+  type FloatingPanelPosition,
+  type FloatingPanelPositionOptions,
+  type FloatingPanelRect,
+  type FloatingPanelSide,
+} from "#shared/floating";
+export {
+  useFloatingLayer,
+  type FloatingLayerPosition,
+  type UseFloatingLayerOptions,
+} from "#shared/floatingLayer";
+export { isMediaOnlyParagraph } from "#shared/nodes";
+export { assignRef, composeRefs } from "#shared/refs";
+export { clampNumber, createNumberRange } from "#shared/number";
+export {
+  type MediaContextProps,
+  resolveMediaAsset,
+  resolveMediaVolume,
+} from "#shared/media";
+export {
+  canOpenFilePreviewDialog,
+  createObjectFileItem,
+  formatFileSize,
+  getFileCodeLanguage,
+  getFileExtension,
+  normalizeFileProgress,
+  resolveFileKind,
+  resolveFileKindLabel,
+  resolveFilePreviewType,
+  resolveFilePreviewMode,
+  type FileItemKind,
+  type FileItemStatus,
+  type FilePreviewMode,
+  type FilePreviewType,
+  type ObjectFileItem,
+  type ResolveFilePreviewTypeOptions,
+} from "#shared/file";
+export {
+  type RequestJsonOptions,
+  isAbortError,
+  requestJson,
+} from "#shared/request";
+export {
+  flattenText,
+  extractHeadings,
+  createHeadingIdFactory,
+} from "#shared/heading";
+export {
+  type VirtualScrollOptions,
+  type VirtualScrollWindow,
+  getVirtualScrollWindow,
+  useVirtualScrollWindow,
+} from "#shared/virtualScroll";
+export type { CodeHighlightMeta, HighlightedCode } from "#shared/codeHighlight";
+export type {
+  Heading,
+  LightboxImage,
+  LightboxState,
+  OpenLightbox,
+  ResolveAssetUrl,
+} from "#shared/types";

package/packages/willa-shared/src/media.ts

@@ -0,0 +1,23 @@
+import { clampNumber } from "#shared/number";
+import type { ResolveAssetUrl } from "#shared/types";
+
+export type MediaContextProps = {
+  articleSourcePath?: string;
+  resolveAssetUrl?: ResolveAssetUrl;
+};
+
+export function resolveMediaAsset(
+  props: MediaContextProps,
+  assetPath?: string,
+) {
+  if (!assetPath) return undefined;
+  return props.resolveAssetUrl
+    ? props.resolveAssetUrl(props.articleSourcePath ?? "", assetPath)
+    : assetPath;
+}
+
+export function resolveMediaVolume(volume?: number) {
+  if (volume === undefined) return undefined;
+  if (!Number.isFinite(volume)) return undefined;
+  return clampNumber(volume, 0, 1);
+}

package/packages/willa-shared/src/nodes.ts

@@ -0,0 +1,24 @@
+import { isArray, isNil, isString } from "aidly";
+import { isValidElement, type ReactNode } from "react";
+
+type MediaElementType = {
+  __willaMediaElement?: boolean;
+};
+
+const toNodeArray = (children: ReactNode) => {
+  const list = isArray(children) ? children : [children];
+  return list.filter((item) => {
+    if (isNil(item) || typeof item === "boolean") return false;
+    if (isString(item)) return item.trim().length > 0;
+    return true;
+  });
+};
+
+export function isMediaOnlyParagraph(children: ReactNode) {
+  const nodes = toNodeArray(children);
+  if (nodes.length !== 1) return false;
+  const node = nodes[0];
+  if (!isValidElement(node)) return false;
+  if (node.type === "img") return true;
+  return Boolean((node.type as MediaElementType).__willaMediaElement);
+}

package/packages/willa-shared/src/number.ts

@@ -0,0 +1,9 @@
+export function clampNumber(value: number, min: number, max: number) {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+export function createNumberRange(start: number, end: number) {
+  if (end < start) return [];
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}

package/packages/willa-shared/src/refs.ts

@@ -0,0 +1,16 @@
+import type { Ref } from "react";
+
+export function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+
+export function composeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (value: T | null) => {
+    refs.forEach((ref) => assignRef(ref, value));
+  };
+}