@x33025/sveltely 0.1.23 → 0.1.25

package/dist/style/layout.d.ts

@@ -1,43 +1,22 @@
 type StringWithAutocomplete<T extends string> = T | (string & {});
-export declare const LayoutSize: {
-    readonly full: "full";
-    readonly fit: "fit";
+export declare const Axis: {
+    readonly X: "x";
+    readonly Y: "y";
 };
-export declare const LayoutAlignment: {
-    readonly start: "start";
-    readonly center: "center";
-    readonly end: "end";
-    readonly stretch: "stretch";
-    readonly baseline: "baseline";
+export declare const LayoutDimension: {
+    readonly infinity: "infinity";
 };
-export declare const LayoutJustification: {
-    readonly start: "start";
-    readonly center: "center";
-    readonly end: "end";
-    readonly between: "between";
-    readonly around: "around";
-    readonly evenly: "evenly";
-};
-export type LayoutSizeValue = (typeof LayoutSize)[keyof typeof LayoutSize];
-export type LayoutAlignmentValue = (typeof LayoutAlignment)[keyof typeof LayoutAlignment];
-export type LayoutJustificationValue = (typeof LayoutJustification)[keyof typeof LayoutJustification];
-export type LayoutSize = StringWithAutocomplete<LayoutSizeValue> | number;
-export type LayoutAlignment = LayoutAlignmentValue;
-export type LayoutJustification = LayoutJustificationValue;
+export type AxisValue = (typeof Axis)[keyof typeof Axis];
+export type LayoutDimensionValue = (typeof LayoutDimension)[keyof typeof LayoutDimension];
+export type Axis = AxisValue;
+export type LayoutAxis = Axis | Axis[];
+export type LayoutAxisBehavior = boolean | LayoutAxis;
+export type LayoutDimension = StringWithAutocomplete<LayoutDimensionValue> | number;
 export type LayoutProps = {
-    size?: LayoutSize;
-    width?: number | string;
-    height?: number | string;
-    minWidth?: number | string;
-    minHeight?: number | string;
-    maxWidth?: number | string;
-    maxHeight?: number | string;
-    grow?: boolean | number;
-    shrink?: boolean | number;
-    basis?: number | string;
-    border?: boolean | string;
-    align?: LayoutAlignment;
-    justify?: LayoutJustification;
+    grow?: LayoutAxisBehavior;
+    fit?: LayoutAxisBehavior;
+    width?: LayoutDimension;
+    height?: LayoutDimension;
 };
 export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
     layoutProps: Partial<LayoutProps>;

package/dist/style/layout.js

@@ -1,71 +1,41 @@
-export const LayoutSize = {
-    full: 'full',
-    fit: 'fit'
+export const Axis = {
+    X: 'x',
+    Y: 'y'
 };
-export const LayoutAlignment = {
-    start: 'start',
-    center: 'center',
-    end: 'end',
-    stretch: 'stretch',
-    baseline: 'baseline'
+export const LayoutDimension = {
+    infinity: 'infinity'
 };
-export const LayoutJustification = {
-    start: 'start',
-    center: 'center',
-    end: 'end',
-    between: 'between',
-    around: 'around',
-    evenly: 'evenly'
-};
-const LAYOUT_PROP_KEYS = new Set([
-    'size',
-    'width',
-    'height',
-    'minWidth',
-    'minHeight',
-    'maxWidth',
-    'maxHeight',
-    'grow',
-    'shrink',
-    'basis',
-    'border',
-    'align',
-    'justify'
-]);
+const LAYOUT_PROP_KEYS = new Set(['grow', 'fit', 'width', 'height']);
 const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
-const toSize = (value) => {
-    if (value === 'full')
+const toDimension = (value) => {
+    if (value === 'infinity')
         return '100%';
-    if (value === 'fit')
-        return 'fit-content';
     return toRem(value);
 };
+const axisHas = (value, axis) => {
+    if (value === undefined || value === false)
+        return false;
+    if (value === true)
+        return true;
+    if (Array.isArray(value))
+        return value.includes(axis);
+    return value === axis;
+};
+const pushAxisDeclarations = (declarations, styles, axis, properties) => {
+    if (axisHas(styles.grow, axis)) {
+        declarations.push(`${properties.size}: 100%;`);
+        declarations.push(`${properties.minSize}: 0;`);
+    }
+    if (axisHas(styles.fit, axis)) {
+        declarations.push(`${properties.size}: fit-content;`);
+    }
+};
 const pushDeclaration = (declarations, name, value) => {
-    const resolved = toRem(value);
+    const resolved = toDimension(value);
     if (resolved === undefined)
         return;
     declarations.push(`${name}: ${resolved};`);
 };
-const pushFlexValue = (declarations, name, value) => {
-    if (value === undefined)
-        return;
-    declarations.push(`${name}: ${value === true ? 1 : value === false ? 0 : value};`);
-};
-const alignValues = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-    baseline: 'baseline'
-};
-const justifyValues = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    between: 'space-between',
-    around: 'space-around',
-    evenly: 'space-evenly'
-};
 export const extractLayoutProps = (props) => {
     const layoutProps = {};
     const restProps = {};
@@ -85,33 +55,15 @@ export const layoutStyle = (styles) => {
     if (!styles)
         return '';
     const declarations = [];
-    const resolvedSize = toSize(styles.size);
-    if (resolvedSize !== undefined) {
-        declarations.push(`width: ${resolvedSize};`, `height: ${resolvedSize};`);
-    }
+    pushAxisDeclarations(declarations, styles, Axis.X, {
+        size: 'width',
+        minSize: 'min-width'
+    });
+    pushAxisDeclarations(declarations, styles, Axis.Y, {
+        size: 'height',
+        minSize: 'min-height'
+    });
     pushDeclaration(declarations, 'width', styles.width);
     pushDeclaration(declarations, 'height', styles.height);
-    pushDeclaration(declarations, 'min-width', styles.minWidth);
-    pushDeclaration(declarations, 'min-height', styles.minHeight);
-    pushDeclaration(declarations, 'max-width', styles.maxWidth);
-    pushDeclaration(declarations, 'max-height', styles.maxHeight);
-    pushFlexValue(declarations, 'flex-grow', styles.grow);
-    pushFlexValue(declarations, 'flex-shrink', styles.shrink);
-    pushDeclaration(declarations, 'flex-basis', styles.basis);
-    if (styles.border === true) {
-        declarations.push('border: 1px solid var(--sveltely-border-color);');
-    }
-    else if (typeof styles.border === 'string') {
-        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
-            ? styles.border
-            : `1px solid ${styles.border}`;
-        declarations.push(`border: ${borderValue};`);
-    }
-    if (styles.align !== undefined) {
-        declarations.push(`align-items: ${alignValues[styles.align]};`);
-    }
-    if (styles.justify !== undefined) {
-        declarations.push(`justify-content: ${justifyValues[styles.justify]};`);
-    }
     return declarations.join(' ');
 };

package/dist/style/surface.d.ts

@@ -5,6 +5,7 @@ export type StyleProps = {
     gap?: number;
     borderRadius?: number;
     inset?: number;
+    border?: boolean | string;
     background?: string;
     borderColor?: string;
     color?: string;

package/dist/style/surface.js

@@ -5,6 +5,7 @@ const STYLE_PROP_KEYS = new Set([
     'gap',
     'borderRadius',
     'inset',
+    'border',
     'background',
     'borderColor',
     'color'
@@ -45,6 +46,15 @@ export const surfaceStyle = (styles, prefix = 'surface') => {
     pushVar(declarations, `--${prefix}-gap`, styles.gap);
     pushVar(declarations, `--${prefix}-border-radius`, styles.borderRadius);
     pushVar(declarations, `--${prefix}-inset`, styles.inset);
+    if (styles.border === true) {
+        declarations.push('border: 1px solid var(--sveltely-border-color);');
+    }
+    else if (typeof styles.border === 'string') {
+        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
+            ? styles.border
+            : `1px solid ${styles.border}`;
+        declarations.push(`border: ${borderValue};`);
+    }
     if (styles.background !== undefined) {
         declarations.push(`background: ${styles.background};`);
     }

package/dist/style.css

@@ -24,8 +24,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-sm: 24rem;
-    --container-md: 28rem;
     --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -289,9 +287,6 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
   .h-full {
     height: 100%;
   }
@@ -313,30 +308,15 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-md {
-    max-width: var(--container-md);
-  }
-  .max-w-sm {
-    max-width: var(--container-sm);
-  }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
   .flex-1 {
     flex: 1;
   }
   .flex-shrink {
     flex-shrink: 1;
   }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
@@ -379,30 +359,15 @@
   .items-center {
     align-items: center;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -473,9 +438,6 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-zinc-100 {
     background-color: var(--color-zinc-100);
   }
@@ -771,16 +733,6 @@
       opacity: 50%;
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:grid-cols-\[minmax\(0\,18rem\)_minmax\(8rem\,1fr\)\] {
-    @media (width >= 48rem) {
-      grid-template-columns: minmax(0,18rem) minmax(8rem,1fr);
-    }
-  }
 }
 @layer base {
   :root {
@@ -850,13 +802,13 @@
     justify-content: center;
   }
   .vstack {
-    display: flex;
+    display: inline-flex;
     min-height: calc(var(--spacing) * 0);
     min-width: calc(var(--spacing) * 0);
     flex-direction: column;
   }
   .hstack {
-    display: flex;
+    display: inline-flex;
     min-height: calc(var(--spacing) * 0);
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;
@@ -865,7 +817,7 @@
     flex-shrink: 0;
   }
 }
-.overflow-auto > .vstack, .overflow-auto > .hstack, .overflow-auto > .grid {
+.overflow-auto > .vstack, .overflow-auto > .hstack {
   flex-shrink: 0;
 }
 @property --tw-rotate-x {

package/dist/viewport/geometry.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutRange, ViewportGeometry, ViewportOverscan, ViewportRect, ViewportSize } from './types';
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const range: (start: number, end: number) => LayoutRange;
+export declare const rectsIntersect: (first: ViewportRect, second: ViewportRect) => boolean;
+export declare const overscanRect: (geometry: ViewportGeometry, overscan?: ViewportOverscan) => ViewportRect;
+export declare const fixedRange: (offset: number, viewportSize: number, itemSize: number, count: number, gap?: number, overscan?: number) => LayoutRange;
+export declare const sumSizes: (sizes: number[], gap?: number) => number;
+export declare const emptySize: ViewportSize;

package/dist/viewport/geometry.js

@@ -0,0 +1,43 @@
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const range = (start, end) => ({
+    start: Math.max(0, start),
+    end: Math.max(start, end)
+});
+export const rectsIntersect = (first, second) => first.x < second.x + second.width &&
+    first.x + first.width > second.x &&
+    first.y < second.y + second.height &&
+    first.y + first.height > second.y;
+export const overscanRect = (geometry, overscan = 0) => {
+    const resolved = typeof overscan === 'number'
+        ? {
+            top: overscan,
+            right: overscan,
+            bottom: overscan,
+            left: overscan
+        }
+        : {
+            top: overscan.top ?? overscan.y ?? 0,
+            right: overscan.right ?? overscan.x ?? 0,
+            bottom: overscan.bottom ?? overscan.y ?? 0,
+            left: overscan.left ?? overscan.x ?? 0
+        };
+    return {
+        x: Math.max(0, geometry.offset.x - resolved.left),
+        y: Math.max(0, geometry.offset.y - resolved.top),
+        width: geometry.viewport.width + resolved.left + resolved.right,
+        height: geometry.viewport.height + resolved.top + resolved.bottom
+    };
+};
+export const fixedRange = (offset, viewportSize, itemSize, count, gap = 0, overscan = 0) => {
+    if (count <= 0 || itemSize <= 0)
+        return range(0, 0);
+    const stride = itemSize + gap;
+    const start = clamp(Math.floor((offset - overscan) / stride), 0, count);
+    const end = clamp(Math.ceil((offset + viewportSize + overscan) / stride), start, count);
+    return range(start, end);
+};
+export const sumSizes = (sizes, gap = 0) => sizes.reduce((total, size) => total + size, 0) + Math.max(0, sizes.length - 1) * gap;
+export const emptySize = {
+    width: 0,
+    height: 0
+};

package/dist/viewport/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './geometry';
+export * from './placement';
+export * from './layout';

package/dist/viewport/index.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './geometry';
+export * from './placement';
+export * from './layout';

package/dist/viewport/layout.d.ts

@@ -0,0 +1,4 @@
+import type { FixedGridLayoutOptions, FixedListLayoutOptions, LayoutResult, TableViewportLayout, TableViewportLayoutOptions } from './types';
+export declare const fixedListLayout: <T>({ items, viewport, itemSize, gap, overscan, key }: FixedListLayoutOptions<T>) => LayoutResult<T>;
+export declare const fixedGridLayout: <T>({ items, viewport, columnWidth, rowHeight, columns, columnGap, rowGap, overscan, key }: FixedGridLayoutOptions<T>) => LayoutResult<T>;
+export declare const tableViewportLayout: <T>({ rows, columns, viewport, rowHeight, headerHeight, overscan, rowKey }: TableViewportLayoutOptions<T>) => TableViewportLayout<T>;

package/dist/viewport/layout.js

@@ -0,0 +1,138 @@
+import { fixedRange, rectsIntersect, sumSizes, overscanRect } from './geometry';
+const defaultKey = (_item, index) => index;
+const itemKey = (item, index, key) => String((key ?? defaultKey)(item, index));
+export const fixedListLayout = ({ items, viewport, itemSize, gap = 0, overscan = 0, key }) => {
+    const visibleRange = fixedRange(viewport.offset.y, viewport.viewport.height, itemSize, items.length, gap, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const contentHeight = items.length * itemSize + Math.max(0, items.length - 1) * gap;
+    const visible = [];
+    for (let index = visibleRange.start; index < visibleRange.end; index += 1) {
+        const item = items[index];
+        visible.push({
+            key: itemKey(item, index, key),
+            item,
+            index,
+            rect: {
+                x: 0,
+                y: index * (itemSize + gap),
+                width: viewport.viewport.width,
+                height: itemSize
+            }
+        });
+    }
+    return {
+        content: {
+            width: viewport.viewport.width,
+            height: contentHeight
+        },
+        visible
+    };
+};
+export const fixedGridLayout = ({ items, viewport, columnWidth, rowHeight, columns, columnGap = 0, rowGap = 0, overscan = 0, key }) => {
+    const columnCount = Math.max(1, columns);
+    const rowCount = Math.ceil(items.length / columnCount);
+    const visibleRows = fixedRange(viewport.offset.y, viewport.viewport.height, rowHeight, rowCount, rowGap, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const visibleRect = overscanRect(viewport, overscan);
+    const visible = [];
+    for (let row = visibleRows.start; row < visibleRows.end; row += 1) {
+        for (let column = 0; column < columnCount; column += 1) {
+            const index = row * columnCount + column;
+            const item = items[index];
+            if (item === undefined)
+                continue;
+            const rect = {
+                x: column * (columnWidth + columnGap),
+                y: row * (rowHeight + rowGap),
+                width: columnWidth,
+                height: rowHeight
+            };
+            if (!rectsIntersect(rect, visibleRect))
+                continue;
+            visible.push({
+                key: itemKey(item, index, key),
+                item,
+                index,
+                rect
+            });
+        }
+    }
+    return {
+        content: {
+            width: columnCount * columnWidth + Math.max(0, columnCount - 1) * columnGap,
+            height: rowCount * rowHeight + Math.max(0, rowCount - 1) * rowGap
+        },
+        visible
+    };
+};
+export const tableViewportLayout = ({ rows, columns, viewport, rowHeight, headerHeight = 0, overscan = 0, rowKey }) => {
+    const columnWidths = columns.map((column) => column.width);
+    const columnOffsets = columns.map((_, index) => index === 0 ? 0 : sumSizes(columnWidths.slice(0, index)));
+    const contentWidth = sumSizes(columnWidths);
+    const contentHeight = headerHeight + rows.length * rowHeight;
+    const visibleRect = overscanRect(viewport, overscan);
+    const rowRange = fixedRange(Math.max(0, viewport.offset.y - headerHeight), viewport.viewport.height, rowHeight, rows.length, 0, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const header = [];
+    const visibleRows = [];
+    const cells = [];
+    for (const [columnIndex, column] of columns.entries()) {
+        const rect = {
+            x: columnOffsets[columnIndex],
+            y: 0,
+            width: column.width,
+            height: headerHeight
+        };
+        if (headerHeight > 0 && rectsIntersect(rect, visibleRect)) {
+            header.push({
+                key: column.key,
+                item: column,
+                index: columnIndex,
+                rect
+            });
+        }
+    }
+    for (let rowIndex = rowRange.start; rowIndex < rowRange.end; rowIndex += 1) {
+        const row = rows[rowIndex];
+        const rowRect = {
+            x: 0,
+            y: headerHeight + rowIndex * rowHeight,
+            width: contentWidth,
+            height: rowHeight
+        };
+        const resolvedRowKey = itemKey(row, rowIndex, rowKey);
+        visibleRows.push({
+            key: resolvedRowKey,
+            item: row,
+            index: rowIndex,
+            rect: rowRect
+        });
+        for (const [columnIndex, column] of columns.entries()) {
+            const rect = {
+                x: columnOffsets[columnIndex],
+                y: rowRect.y,
+                width: column.width,
+                height: rowHeight
+            };
+            if (!rectsIntersect(rect, visibleRect))
+                continue;
+            cells.push({
+                key: `${resolvedRowKey}:${column.key}`,
+                index: cells.length,
+                item: {
+                    row,
+                    column,
+                    rowIndex,
+                    columnIndex
+                },
+                rect
+            });
+        }
+    }
+    return {
+        content: {
+            width: contentWidth,
+            height: contentHeight
+        },
+        header,
+        rows: visibleRows,
+        cells
+    };
+};

package/dist/viewport/placement.d.ts

@@ -0,0 +1,4 @@
+import type { ViewportRect, ViewportSize } from './types';
+export declare const px: (value: number) => string;
+export declare const placementStyle: (rect: ViewportRect) => string;
+export declare const contentStyle: (size: ViewportSize) => string;

package/dist/viewport/placement.js

@@ -0,0 +1,14 @@
+export const px = (value) => `${Math.max(0, value)}px`;
+export const placementStyle = (rect) => [
+    'position: absolute;',
+    `width: ${px(rect.width)};`,
+    `height: ${px(rect.height)};`,
+    `transform: translate3d(${rect.x}px, ${rect.y}px, 0);`
+].join(' ');
+export const contentStyle = (size) => [
+    'position: relative;',
+    `width: ${px(size.width)};`,
+    `height: ${px(size.height)};`,
+    'min-width: 100%;',
+    'min-height: 100%;'
+].join(' ');

package/dist/viewport/types.d.ts

@@ -0,0 +1,81 @@
+export type ViewportPoint = {
+    x: number;
+    y: number;
+};
+export type ViewportSize = {
+    width: number;
+    height: number;
+};
+export type ViewportRect = ViewportPoint & ViewportSize;
+export type ViewportGeometry = {
+    offset: ViewportPoint;
+    viewport: ViewportSize;
+};
+export type ViewportOverscan = number | {
+    x?: number;
+    y?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export type LayoutContentSize = ViewportSize;
+export type PlacedItem<T> = {
+    key: string;
+    item: T;
+    rect: ViewportRect;
+    index: number;
+};
+export type LayoutResult<T> = {
+    content: LayoutContentSize;
+    visible: PlacedItem<T>[];
+};
+export type LayoutKey<T> = (item: T, index: number) => string | number;
+export type LayoutRange = {
+    start: number;
+    end: number;
+};
+export type FixedListLayoutOptions<T> = {
+    items: T[];
+    viewport: ViewportGeometry;
+    itemSize: number;
+    gap?: number;
+    overscan?: ViewportOverscan;
+    key?: LayoutKey<T>;
+};
+export type FixedGridLayoutOptions<T> = {
+    items: T[];
+    viewport: ViewportGeometry;
+    columnWidth: number;
+    rowHeight: number;
+    columns: number;
+    columnGap?: number;
+    rowGap?: number;
+    overscan?: ViewportOverscan;
+    key?: LayoutKey<T>;
+};
+export type TableColumnLayout = {
+    key: string;
+    width: number;
+};
+export type TableCellPlacement<T> = {
+    row: T;
+    column: TableColumnLayout;
+    rowIndex: number;
+    columnIndex: number;
+};
+export type TableViewportLayoutOptions<T> = {
+    rows: T[];
+    columns: TableColumnLayout[];
+    viewport: ViewportGeometry;
+    rowHeight: number;
+    headerHeight?: number;
+    overscan?: ViewportOverscan;
+    rowKey?: LayoutKey<T>;
+};
+export type TableViewportLayout<T> = {
+    content: LayoutContentSize;
+    header: PlacedItem<TableColumnLayout>[];
+    rows: PlacedItem<T>[];
+    cells: PlacedItem<TableCellPlacement<T>>[];
+};

package/dist/viewport/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.23",
+	"version": "0.1.25",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",