@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/VirtualizerLayouts.ts

@@ -0,0 +1,280 @@
+/**
+ * Layout primitives for solidaria-components Virtualizer.
+ *
+ * These are lightweight parity contracts inspired by RAC virtualizer layout APIs.
+ */
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface LayoutInfo {
+  key: string | number;
+  index: number;
+  rect: Rect;
+}
+
+export interface VirtualizerVisibleRange {
+  start: number;
+  end: number;
+  offsetTop: number;
+  offsetBottom: number;
+}
+
+export interface VirtualizerRangeContext {
+  itemCount: number;
+  scrollOffset: number;
+  viewportSize: number;
+  overscan: number;
+  viewportWidth?: number;
+}
+
+export interface DefaultVirtualizerLayoutOptions {
+  itemSize?: number;
+  overscan?: number;
+  viewportSize?: number;
+}
+
+export interface GridLayoutOptions extends DefaultVirtualizerLayoutOptions {
+  rowHeight?: number;
+  columnCount?: number;
+  viewportWidth?: number;
+}
+
+export interface WaterfallLayoutOptions extends GridLayoutOptions {
+  minColumnWidth?: number;
+  viewportWidth?: number;
+  gap?: number;
+}
+
+export interface VirtualizerLayoutInfoContext {
+  viewportWidth: number;
+}
+
+export interface VirtualizerDropTarget {
+  type: "item" | "root";
+  index: number;
+  position: "before" | "on" | "after";
+  key?: string | number;
+  parentKey?: string | number | null;
+  level?: number;
+}
+
+function clampRange(
+  itemCount: number,
+  start: number,
+  end: number,
+  itemSize: number,
+): VirtualizerVisibleRange {
+  const safeStart = Math.max(0, Math.min(start, itemCount));
+  const safeEnd = Math.max(safeStart, Math.min(end, itemCount));
+  return {
+    start: safeStart,
+    end: safeEnd,
+    offsetTop: safeStart * itemSize,
+    offsetBottom: Math.max(0, (itemCount - safeEnd) * itemSize),
+  };
+}
+
+export function calculateLinearVisibleRange(
+  itemCount: number,
+  scrollOffset: number,
+  viewportSize: number,
+  itemSize: number,
+  overscan: number,
+): VirtualizerVisibleRange {
+  if (itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
+  const safeItemSize = Math.max(1, itemSize);
+  const safeViewport = Math.max(1, viewportSize);
+  const safeOverscan = Math.max(0, overscan);
+  const start = Math.floor(scrollOffset / safeItemSize) - safeOverscan;
+  const visibleCount = Math.ceil(safeViewport / safeItemSize) + safeOverscan * 2;
+  return clampRange(itemCount, start, start + visibleCount, safeItemSize);
+}
+
+export class ListLayout {
+  getVisibleRange(
+    ctx: VirtualizerRangeContext,
+    options?: DefaultVirtualizerLayoutOptions,
+  ): VirtualizerVisibleRange {
+    return calculateLinearVisibleRange(
+      ctx.itemCount,
+      ctx.scrollOffset,
+      ctx.viewportSize,
+      options?.itemSize ?? 40,
+      options?.overscan ?? ctx.overscan,
+    );
+  }
+
+  getLayoutInfo(
+    index: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: DefaultVirtualizerLayoutOptions,
+  ): LayoutInfo {
+    const itemHeight = Math.max(1, options?.itemSize ?? 40);
+    return {
+      key: String(index),
+      index,
+      rect: {
+        x: 0,
+        y: index * itemHeight,
+        width: Math.max(0, context.viewportWidth),
+        height: itemHeight,
+      },
+    };
+  }
+
+  getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: DefaultVirtualizerLayoutOptions,
+  ): VirtualizerDropTarget | null {
+    if (itemCount <= 0) return { type: "root", index: -1, position: "on" };
+    const itemHeight = Math.max(1, options?.itemSize ?? 40);
+    if (point.y < 0) {
+      return { type: "item", index: 0, position: "before" };
+    }
+    const totalHeight = itemCount * itemHeight;
+    if (point.y >= totalHeight) {
+      return { type: "item", index: itemCount - 1, position: "after" };
+    }
+    const rawIndex = Math.floor(point.y / itemHeight);
+    const index = Math.max(0, Math.min(rawIndex, itemCount - 1));
+    const offsetWithinItem = Math.max(0, point.y - index * itemHeight);
+    const threshold = itemHeight / 3;
+    const position: VirtualizerDropTarget["position"] =
+      offsetWithinItem < threshold ? "before" : offsetWithinItem > threshold * 2 ? "after" : "on";
+    return { type: "item", index, position };
+  }
+}
+
+export class TableLayout extends ListLayout {}
+
+export class GridLayout {
+  getVisibleRange(
+    ctx: VirtualizerRangeContext,
+    options?: GridLayoutOptions,
+  ): VirtualizerVisibleRange {
+    if (ctx.itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const safeViewport = Math.max(1, ctx.viewportSize);
+    const safeOverscan = Math.max(0, options?.overscan ?? ctx.overscan);
+
+    const startRow = Math.max(0, Math.floor(ctx.scrollOffset / rowHeight) - safeOverscan);
+    const visibleRows = Math.ceil(safeViewport / rowHeight) + safeOverscan * 2;
+    const endRow = startRow + visibleRows;
+
+    const start = startRow * columns;
+    const end = Math.min(ctx.itemCount, endRow * columns);
+
+    const totalRows = Math.ceil(ctx.itemCount / columns);
+    const clampedStartRow = Math.floor(start / columns);
+    const renderedRows = Math.ceil((end - start) / columns);
+    const offsetTop = clampedStartRow * rowHeight;
+    const offsetBottom = Math.max(0, (totalRows - clampedStartRow - renderedRows) * rowHeight);
+
+    return { start, end, offsetTop, offsetBottom };
+  }
+
+  getLayoutInfo(
+    index: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: GridLayoutOptions,
+  ): LayoutInfo {
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const width = Math.max(1, context.viewportWidth);
+    const cellWidth = Math.floor(width / columns);
+    return {
+      key: String(index),
+      index,
+      rect: {
+        x: col * cellWidth,
+        y: row * rowHeight,
+        width: cellWidth,
+        height: rowHeight,
+      },
+    };
+  }
+
+  getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: GridLayoutOptions,
+  ): VirtualizerDropTarget | null {
+    if (itemCount <= 0) return { type: "root", index: -1, position: "on" };
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const totalRows = Math.ceil(itemCount / columns);
+    const totalHeight = totalRows * rowHeight;
+    if (point.y < 0) {
+      return { type: "item", index: 0, position: "before" };
+    }
+    if (point.y >= totalHeight) {
+      return { type: "item", index: itemCount - 1, position: "after" };
+    }
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const cellWidth = width / columns;
+    const row = Math.max(0, Math.floor(point.y / rowHeight));
+    const col = Math.max(0, Math.min(columns - 1, Math.floor(Math.max(0, point.x) / cellWidth)));
+    const index = Math.max(0, Math.min(itemCount - 1, row * columns + col));
+    const withinRow = Math.max(0, point.y - row * rowHeight);
+    const threshold = rowHeight / 3;
+    const position: VirtualizerDropTarget["position"] =
+      withinRow < threshold ? "before" : withinRow > threshold * 2 ? "after" : "on";
+    return { type: "item", index, position };
+  }
+}
+
+export class WaterfallLayout extends GridLayout {
+  override getVisibleRange(
+    ctx: VirtualizerRangeContext,
+    options?: WaterfallLayoutOptions,
+  ): VirtualizerVisibleRange {
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getVisibleRange(ctx, { ...options, columnCount });
+  }
+
+  override getLayoutInfo(
+    index: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: WaterfallLayoutOptions,
+  ): LayoutInfo {
+    const width = Math.max(1, options?.viewportWidth ?? context.viewportWidth);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getLayoutInfo(index, context, { ...options, columnCount });
+  }
+
+  override getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: WaterfallLayoutOptions,
+  ): VirtualizerDropTarget | null {
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getDropTargetFromPoint(point, itemCount, { ...options, columnCount });
+  }
+}

package/src/VisuallyHidden.tsx

@@ -5,56 +5,50 @@
  * Port of react-aria's VisuallyHidden.
  */
 
-import { type JSX, type ParentProps, splitProps } from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+import { type JSX, type ParentProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createVisuallyHidden, mergeProps } from "@proyecto-viviana/solidaria";
 
-// ============================================
-// TYPES
-// ============================================
-
-export interface VisuallyHiddenProps extends ParentProps {
+export interface VisuallyHiddenProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
   /** The element type to render. @default 'span' */
   elementType?: keyof JSX.IntrinsicElements;
   /** Whether the element should be focusable when focused. */
   isFocusable?: boolean;
+  /** Inline style object merged with visually hidden styles. */
+  style?: JSX.CSSProperties;
 }
 
-// ============================================
-// STYLES
-// ============================================
-
-const visuallyHiddenStyles: JSX.CSSProperties = {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  'clip-path': 'inset(50%)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  'white-space': 'nowrap',
-};
-
-// ============================================
-// COMPONENT
-// ============================================
-
 /**
  * VisuallyHidden hides its children visually, while keeping content visible to screen readers.
  */
 export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
-  const [local, others] = splitProps(props, ['elementType', 'isFocusable']);
-
-  const elementType = () => local.elementType ?? 'span';
-
+  // Split children so the getter is not read once through `{...mergedProps()}`
+  // and again during explicit rendering. Hydration code is sensitive to that.
+  const [local, others] = splitProps(props, ["elementType", "isFocusable", "style", "children"]);
+  const { visuallyHiddenProps } = createVisuallyHidden(() => ({
+    style: local.style,
+    isFocusable: local.isFocusable,
+  }));
+
+  const mergedProps = () =>
+    mergeProps<Record<string, unknown>>(
+      others as unknown as Record<string, unknown>,
+      visuallyHiddenProps() as unknown as Record<string, unknown>,
+    );
+
+  // elementType is read once (structural, not reactive). The default `span` is
+  // rendered as a static element rather than via `<Dynamic>`: a reactive
+  // `<Dynamic>` desyncs Solid's hydration markers, leaving the registry dirty so
+  // a later sibling re-render throws "template is not a function" in prod (and a
+  // hard hydration crash under solid-refresh in dev). `<Dynamic>` is reserved for
+  // an explicit custom elementType.
+  const tag = local.elementType ?? "span";
+  if (tag === "span") {
+    return <span {...mergedProps()}>{local.children}</span>;
+  }
   return (
-    <Dynamic
-      component={elementType()}
-      style={visuallyHiddenStyles}
-      {...others}
-    >
-      {props.children}
+    <Dynamic component={tag} {...mergedProps()}>
+      {local.children}
     </Dynamic>
   );
 }

package/src/contexts.ts

@@ -5,70 +5,63 @@
  * Dialog, Modal, Popover, and Button components.
  */
 
-import { createContext, useContext } from 'solid-js'
-import type { OverlayTriggerState as StatelyOverlayTriggerState } from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// OVERLAY TRIGGER STATE CONTEXT
-// ============================================
+import { createContext, useContext } from "solid-js";
+import type { OverlayTriggerState as StatelyOverlayTriggerState } from "@proyecto-viviana/solid-stately";
 
 export interface OverlayTriggerState {
-  isOpen: boolean
-  open: () => void
-  close: () => void
-  toggle: () => void
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
 }
 
-export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null)
+export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);
 
 /**
  * Hook to access the overlay trigger state from context.
  */
 export function useOverlayTriggerState(): OverlayTriggerState | null {
-  return useContext(OverlayTriggerStateContext)
+  return useContext(OverlayTriggerStateContext);
 }
 
-// ============================================
-// DIALOG TRIGGER CONTEXT
-// ============================================
-
 export interface DialogTriggerContextValue {
-  state: StatelyOverlayTriggerState
-  triggerRef: () => HTMLElement | null
-  triggerId: string
+  state: StatelyOverlayTriggerState;
+  triggerRef: () => HTMLElement | null;
+  setTriggerRef: (el: HTMLElement | null) => void;
+  triggerId: string;
+  triggerProps?: Record<string, unknown>;
+  overlayProps?: Record<string, unknown>;
 }
 
-export const DialogTriggerContext = createContext<DialogTriggerContextValue | null>(null)
+export const DialogTriggerContext = createContext<DialogTriggerContextValue | null>(null);
 
 /**
  * Hook to access the dialog trigger state from context.
  */
 export function useDialogTrigger(): DialogTriggerContextValue | null {
-  return useContext(DialogTriggerContext)
+  return useContext(DialogTriggerContext);
 }
 
-// ============================================
-// POPOVER TRIGGER CONTEXT
-// ============================================
-
 export interface PopoverTriggerContextValue {
   state: {
-    isOpen: () => boolean
-    open: () => void
-    close: () => void
-    toggle: () => void
-  }
-  triggerRef: () => HTMLElement | null
-  setTriggerRef: (el: HTMLElement | null) => void
-  triggerId: string
-  trigger: string
+    isOpen: () => boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+  };
+  triggerRef: () => HTMLElement | null;
+  setTriggerRef: (el: HTMLElement | null) => void;
+  triggerId: string;
+  triggerProps?: Record<string, unknown>;
+  overlayProps?: Record<string, unknown>;
+  trigger: string;
 }
 
-export const PopoverTriggerContext = createContext<PopoverTriggerContextValue | null>(null)
+export const PopoverTriggerContext = createContext<PopoverTriggerContextValue | null>(null);
 
 /**
  * Hook to access the popover trigger state from context.
  */
 export function usePopoverTrigger(): PopoverTriggerContextValue | null {
-  return useContext(PopoverTriggerContext)
+  return useContext(PopoverTriggerContext);
 }