slexkit 0.2.0

package/src/components/svelte/layout/Row.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { renderChildren, text } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+  import { chooseBalancedColumns, createBalancedTileLayout } from "./balancedTiles";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  type RowRenderOptions = {
+    disabled: boolean;
+  };
+
+  function tileKind(children: Element[]): "stat" | "card" | null {
+    if (children.length < 2) return null;
+    if (children.every((child) => child.classList.contains("slex-stat"))) return "stat";
+    if (children.every((child) => child.classList.contains("slex-card"))) return "card";
+    return null;
+  }
+
+  function numericStyle(value: string, fallback: number): number {
+    const n = Number.parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+  }
+
+  function renderBalancedChildren(node: HTMLElement, options: RowRenderOptions) {
+    const children = renderChildren(node, ctx);
+    let current = options;
+    let pending = false;
+
+    const reset = () => {
+      node.classList.remove("slex-row--balanced-tiles");
+      node.removeAttribute("data-tile-kind");
+      node.style.removeProperty("--slex-balanced-cols");
+      node.style.removeProperty("--slex-balanced-tracks");
+      for (const child of Array.from(node.children)) {
+        if (child instanceof HTMLElement) child.style.removeProperty("grid-column");
+      }
+    };
+
+    const rebalance = () => {
+      pending = false;
+      reset();
+      if (current.disabled) return;
+
+      const directChildren = Array.from(node.children);
+      const kind = tileKind(directChildren);
+      if (!kind) return;
+
+      const styles = getComputedStyle(node);
+      const gap = numericStyle(styles.columnGap || styles.gap, 16);
+      const targetTileWidth = numericStyle(styles.getPropertyValue("--slex-balanced-tile-width"), 136);
+      const width = node.getBoundingClientRect().width || node.clientWidth;
+      const columns = chooseBalancedColumns({
+        itemCount: directChildren.length,
+        containerWidth: width,
+        targetTileWidth,
+        gap,
+      });
+
+      const layout = createBalancedTileLayout(directChildren.length, columns);
+      node.classList.add("slex-row--balanced-tiles");
+      node.dataset.tileKind = kind;
+      node.style.setProperty("--slex-balanced-cols", String(layout.columns));
+      node.style.setProperty("--slex-balanced-tracks", String(layout.tracks));
+      directChildren.forEach((child, index) => {
+        if (child instanceof HTMLElement) child.style.gridColumn = `span ${layout.spans[index]}`;
+      });
+    };
+
+    const schedule = () => {
+      if (pending) return;
+      pending = true;
+      queueMicrotask(rebalance);
+    };
+
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(node);
+    const mutationObserver = new MutationObserver(schedule);
+    mutationObserver.observe(node, { childList: true });
+    schedule();
+
+    return {
+      update(next: RowRenderOptions) {
+        current = next;
+        schedule();
+      },
+      destroy() {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+        children.destroy();
+      },
+    };
+  }
+</script>
+
+<div
+  class={`slex-row${p.class ? ` ${text(p.class)}` : ""}`}
+  id={p.id ? text(p.id) : undefined}
+  style:align-items={text(p.align)}
+  style:justify-content={text(p.justify)}
+  style:gap={text(p.gap)}
+  use:renderBalancedChildren={{ disabled: !!(p.align || p.justify) }}
+></div>

package/src/components/svelte/layout/balancedTiles.ts

@@ -0,0 +1,85 @@
+type BalancedColumnsInput = {
+  itemCount: number;
+  containerWidth: number;
+  targetTileWidth?: number;
+  gap?: number;
+};
+
+type BalancedTileLayout = {
+  columns: number;
+  tracks: number;
+  spans: number[];
+};
+
+export function chooseBalancedColumns({
+  itemCount,
+  containerWidth,
+  targetTileWidth = 136,
+  gap = 16,
+}: BalancedColumnsInput): number {
+  if (!Number.isFinite(itemCount) || itemCount <= 1) return Math.max(1, Math.floor(itemCount || 1));
+
+  const usableWidth = Number.isFinite(containerWidth) && containerWidth > 0 ? containerWidth : Infinity;
+  const target = Math.max(80, targetTileWidth);
+  const spacing = Math.max(0, gap);
+  const maxFit = Number.isFinite(usableWidth)
+    ? Math.max(1, Math.min(itemCount, Math.floor((usableWidth + spacing) / (target + spacing))))
+    : itemCount;
+
+  if (maxFit >= itemCount) return itemCount;
+
+  let bestColumns = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+
+  for (let columns = 1; columns <= maxFit; columns += 1) {
+    const rows = Math.ceil(itemCount / columns);
+    const lastRowCount = itemCount - columns * (rows - 1);
+    const orphanPenalty = rows > 1 && lastRowCount === 1 ? 100 : 0;
+    const balancePenalty = rows > 1 ? ((columns - lastRowCount) / columns) * 10 : 0;
+    const rowPenalty = rows;
+    const widthPenalty = (maxFit - columns) * 0.05;
+    const score = orphanPenalty + balancePenalty + rowPenalty + widthPenalty;
+
+    if (score < bestScore) {
+      bestScore = score;
+      bestColumns = columns;
+    }
+  }
+
+  return bestColumns;
+}
+
+export function createBalancedTileLayout(itemCount: number, columns: number): BalancedTileLayout {
+  const count = Math.max(0, Math.floor(itemCount));
+  const safeColumns = Math.max(1, Math.min(count || 1, Math.floor(columns)));
+  const rows = Math.ceil(count / safeColumns);
+  const lastRowCount = count - safeColumns * (rows - 1);
+  const hasPartialLastRow = rows > 1 && lastRowCount > 0 && lastRowCount < safeColumns;
+  const tracks = hasPartialLastRow ? lcm(safeColumns, lastRowCount) : safeColumns;
+  const fullRowSpan = Math.max(1, tracks / safeColumns);
+  const lastRowSpan = hasPartialLastRow ? Math.max(1, tracks / lastRowCount) : fullRowSpan;
+
+  return {
+    columns: safeColumns,
+    tracks,
+    spans: Array.from({ length: count }, (_, index) => {
+      const isLastPartialRow = hasPartialLastRow && Math.floor(index / safeColumns) === rows - 1;
+      return isLastPartialRow ? lastRowSpan : fullRowSpan;
+    }),
+  };
+}
+
+function gcd(a: number, b: number): number {
+  let x = Math.abs(Math.floor(a));
+  let y = Math.abs(Math.floor(b));
+  while (y > 0) {
+    const next = x % y;
+    x = y;
+    y = next;
+  }
+  return x || 1;
+}
+
+function lcm(a: number, b: number): number {
+  return Math.max(1, Math.abs(Math.floor((a * b) / gcd(a, b))));
+}

package/src/components/svelte/tooling/CodeMirror.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import { Compartment } from "@codemirror/state";
+  import { EditorView, type ViewUpdate } from "@codemirror/view";
+  import type { Extension, Transaction } from "@codemirror/state";
+
+  type Props = {
+    doc?: string;
+    extensions?: Extension;
+    class?: string;
+    onChange?: (value: string, view: EditorView, transactions: readonly Transaction[]) => void;
+    onEditorView?: (view: EditorView) => void;
+  };
+
+  let {
+    doc = "",
+    extensions = [],
+    class: className = "",
+    onChange,
+    onEditorView,
+  }: Props = $props();
+
+  let dom: HTMLDivElement;
+  let view: EditorView | null = null;
+  let lastDoc = doc;
+  let measureFrame = 0;
+  const extensionsCompartment = new Compartment();
+
+  function scheduleMeasure() {
+    if (!view || measureFrame) return;
+    measureFrame = window.requestAnimationFrame(() => {
+      measureFrame = 0;
+      view?.requestMeasure();
+    });
+  }
+
+  onMount(() => {
+    view = new EditorView({
+      doc,
+      parent: dom,
+      extensions: [
+        extensionsCompartment.of(extensions),
+        EditorView.updateListener.of((update: ViewUpdate) => {
+          if (!update.docChanged || !view) return;
+          lastDoc = update.state.doc.toString();
+          onChange?.(lastDoc, view, update.transactions);
+        }),
+      ],
+    });
+    onEditorView?.(view);
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    resizeObserver.observe(dom);
+    scheduleMeasure();
+
+    return () => {
+      resizeObserver.disconnect();
+      if (measureFrame) {
+        window.cancelAnimationFrame(measureFrame);
+        measureFrame = 0;
+      }
+    };
+  });
+
+  $effect(() => {
+    if (!view) return;
+    view.dispatch({
+      effects: extensionsCompartment.reconfigure(extensions),
+    });
+    scheduleMeasure();
+  });
+
+  $effect(() => {
+    if (!view || doc === lastDoc) return;
+    lastDoc = doc;
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: doc,
+      },
+    });
+    scheduleMeasure();
+  });
+
+  onDestroy(() => {
+    view?.destroy();
+    view = null;
+  });
+</script>
+
+<div class={`codemirror ${className}`} bind:this={dom}></div>