@astronox/core 0.2.0 → 0.2.2

package/src/composition/Grid/Grid.css

@@ -8,6 +8,7 @@
   min-width: 0;
   align-items: var(--grid-align-items);
   gap: var(--grid-gap);
+  grid-auto-flow: var(--grid-flow);
   justify-items: var(--grid-justify-items);
 }
 
@@ -300,7 +301,58 @@
 
 @container (width < 24rem) {
   .grid[data-compact-columns] {
+    grid-auto-flow: var(--grid-compact-flow);
     grid-template-columns: repeat(var(--grid-compact-columns), minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='1'] {
+    grid-column: span 1;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='2'] {
+    grid-column: span 2;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='3'] {
+    grid-column: span 3;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='4'] {
+    grid-column: span 4;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='1'] {
+    grid-row: span 1;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='2'] {
+    grid-row: span 2;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='3'] {
+    grid-row: span 3;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='4'] {
+    grid-row: span 4;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
   }
 
   .grid[data-last-row='fill'][data-compact-columns] > * {

package/src/composition/GridItem/GridItem.astro

@@ -14,8 +14,11 @@ type Props = Omit<GridItemAttributes, 'class' | 'style'> & {
   alignSelf?: GridItemAlignment;
   class?: string;
   collapseOrder?: GridItemCollapseOrder;
+  compactRowSpan?: GridItemSpan;
+  compactSpan?: GridItemSpan;
   justifySelf?: GridItemAlignment;
   position?: GridItemPosition;
+  rowSpan?: GridItemSpan;
   sizing?: GridItemSizing;
   span?: GridItemSpan;
 };
@@ -25,8 +28,11 @@ const {
   alignSelf = 'auto',
   class: className,
   collapseOrder = 'preserve',
+  compactRowSpan,
+  compactSpan,
   justifySelf = 'auto',
   position = 'static',
+  rowSpan = 1,
   sizing = 'auto',
   span = 1,
   ...attrs
@@ -39,8 +45,11 @@ const {
   data-composition="grid-item"
   data-align-self={alignSelf}
   data-collapse-order={collapseOrder}
+  data-compact-row-span={compactRowSpan}
+  data-compact-span={compactSpan}
   data-justify-self={justifySelf}
   data-position={position}
+  data-row-span={rowSpan}
   data-sizing={sizing}
   data-span={span}
 >

package/src/composition/GridItem/GridItem.css

@@ -69,6 +69,18 @@
   grid-column: span 4;
 }
 
+.grid-item[data-row-span='2'] {
+  grid-row: span 2;
+}
+
+.grid-item[data-row-span='3'] {
+  grid-row: span 3;
+}
+
+.grid-item[data-row-span='4'] {
+  grid-row: span 4;
+}
+
 .grid-item[data-sizing='fill-track'] {
   --grid-item-fill-track-contain: size layout;
   --grid-item-fill-track-content-block-size: 100%;

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -34,34 +34,48 @@
   content: '';
 }
 
+.surface-group:has(> [data-sticky-surface]):not(
+    [data-sticky-measured]
+  )::before,
 .surface-group[data-sticky-active]::before {
   visibility: visible;
 }
 
-.surface-group > [data-surface] {
+.surface-group > [data-surface]:not([hidden]) {
   flex: 0 0 auto;
   min-width: 0;
 }
 
 .surface-group
-  > [data-surface]:not(
-    :has(~ [data-surface]),
+  > [data-surface]:not([hidden]):not(
+    :has(~ [data-surface]:not([hidden])),
     [data-surface-sizing='content']
   ),
 .surface-group
-  > [data-surface]:has(
-    + [data-surface][data-surface-sizing='content']
+  > [data-surface]:not([hidden]):not(
+    [data-surface-sizing='content']
+  ):has(
+    ~ [data-surface]:not([hidden])[data-surface-sizing='content']
+  ):not(
+    :has(
+      ~ [data-surface]:not([hidden]):not(
+          [data-surface-sizing='content']
+        )
+    )
   ) {
   flex: 1 1 auto;
   min-height: 0;
 }
 
-.surface-group > [data-surface]:has(+ [data-surface]) {
+.surface-group
+  > [data-surface]:not([hidden]):has(~ [data-surface]:not([hidden])) {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
 
-.surface-group > [data-surface] + [data-surface] {
+.surface-group
+  > [data-surface]:not([hidden])
+  ~ [data-surface]:not([hidden]) {
   border-block-start-width: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -42,6 +42,7 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
   const observe = () => {
     resizeFrame = 0;
     observer?.disconnect();
+    root.removeAttribute('data-sticky-measured');
 
     const stickyOffset =
       Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
@@ -54,6 +55,7 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
           'data-sticky-active',
           entry.boundingClientRect.top <= activationBoundary + 0.5,
         );
+        root.setAttribute('data-sticky-measured', 'true');
       },
       {
         root: scrollParent instanceof Window ? null : scrollParent,
@@ -85,5 +87,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
     root.removeAttribute('data-sticky-active');
     root.removeAttribute('data-sticky-initialized');
+    root.removeAttribute('data-sticky-measured');
   };
 };

package/src/data/firestore/client/contracts.ts

@@ -0,0 +1,55 @@
+import type { Firestore } from 'firebase/firestore';
+
+export type ClientFirestorePage<TItem> = {
+  items: readonly TItem[];
+  nextCursor?: string;
+};
+
+export type ClientFirestoreOrder = {
+  direction?: 'asc' | 'desc';
+  field: string;
+};
+
+export type ClientFirestoreCursor<TDocument> = {
+  serialize(input: { document: TDocument; id: string }): string;
+  toQueryValues(cursor: string): readonly unknown[];
+};
+
+export type ClientFirestoreDocumentMapper<
+  TItem,
+  TCreateInput,
+  TUpdateInput,
+> = {
+  fromDocument(id: string, value: unknown): TItem;
+  toCreate(input: TCreateInput): Record<string, unknown>;
+  toUpdate(input: TUpdateInput): Record<string, unknown>;
+};
+
+export type ClientFirestoreSchema<TDocument> = {
+  parse(input: unknown): TDocument;
+};
+
+export type ClientFirestoreRepository<TItem, TCreateInput, TUpdateInput> = {
+  getIndex(input?: {
+    cursor?: string;
+    limit?: number;
+  }): Promise<ClientFirestorePage<TItem>>;
+  getDetail(input: { id: string }): Promise<TItem | null>;
+  create(input: TCreateInput): Promise<TItem>;
+  update(input: { id: string; value: TUpdateInput }): Promise<TItem>;
+  delete(input: { id: string }): Promise<void>;
+};
+
+export type ClientFirestoreRepositoryConfig<
+  TDocument,
+  TItem,
+  TCreateInput,
+  TUpdateInput,
+> = {
+  collection: string;
+  cursor?: ClientFirestoreCursor<TDocument>;
+  database: Firestore;
+  mapper: ClientFirestoreDocumentMapper<TItem, TCreateInput, TUpdateInput>;
+  orderBy?: readonly ClientFirestoreOrder[];
+  schema: ClientFirestoreSchema<TDocument>;
+};

package/src/data/firestore/client/firebase.ts

@@ -0,0 +1,12 @@
+import { getApps, initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+
+import type { FirebaseClientConfig } from '../../../auth/firebase/contracts';
+
+export function createFirebaseClientFirestore(config: FirebaseClientConfig) {
+  const app =
+    getApps().find((candidate) => candidate.name === config.projectId) ??
+    initializeApp(config, config.projectId);
+
+  return getFirestore(app);
+}

package/src/data/firestore/client/index.ts

@@ -0,0 +1,3 @@
+export * from './contracts';
+export * from './firebase';
+export * from './repository';

package/src/data/firestore/client/repository.ts

@@ -0,0 +1,111 @@
+import {
+  addDoc,
+  collection,
+  deleteDoc,
+  doc,
+  documentId,
+  getDoc,
+  getDocs,
+  limit as limitQuery,
+  orderBy as orderByQuery,
+  query,
+  startAfter,
+  updateDoc,
+  type QueryConstraint,
+} from 'firebase/firestore';
+
+import type {
+  ClientFirestoreRepository,
+  ClientFirestoreRepositoryConfig,
+} from './contracts';
+
+const defaultPageSize = 25;
+const maximumPageSize = 100;
+
+export function createClientFirestoreRepository<
+  TDocument,
+  TItem,
+  TCreateInput,
+  TUpdateInput = TCreateInput,
+>({
+  collection: collectionName,
+  cursor: cursorConfig,
+  database,
+  mapper,
+  orderBy = [],
+  schema,
+}: ClientFirestoreRepositoryConfig<
+  TDocument,
+  TItem,
+  TCreateInput,
+  TUpdateInput
+>): ClientFirestoreRepository<TItem, TCreateInput, TUpdateInput> {
+  const documents = collection(database, collectionName);
+  const read = (id: string, value: unknown): TItem =>
+    mapper.fromDocument(id, schema.parse(value));
+
+  return {
+    async getIndex({ cursor, limit = defaultPageSize } = {}) {
+      const pageSize = Math.min(
+        maximumPageSize,
+        Math.max(1, Math.floor(limit)),
+      );
+      const constraints: QueryConstraint[] = orderBy.map((order) =>
+        orderByQuery(order.field, order.direction ?? 'asc'),
+      );
+      constraints.push(orderByQuery(documentId(), 'asc'));
+
+      if (cursor && cursorConfig) {
+        constraints.push(startAfter(...cursorConfig.toQueryValues(cursor)));
+      } else if (cursor) {
+        const cursorDocument = await getDoc(doc(documents, cursor));
+        if (cursorDocument.exists()) {
+          constraints.push(startAfter(cursorDocument));
+        }
+      }
+      constraints.push(limitQuery(pageSize));
+
+      const snapshot = await getDocs(query(documents, ...constraints));
+      const results = snapshot.docs.map((document) => ({
+        document: schema.parse(document.data()),
+        id: document.id,
+      }));
+      const items = results.map(({ document, id }) =>
+        mapper.fromDocument(id, document),
+      );
+      const lastResult = results.at(-1);
+
+      return {
+        items,
+        nextCursor:
+          snapshot.size === pageSize && lastResult
+            ? cursorConfig
+              ? cursorConfig.serialize(lastResult)
+              : lastResult.id
+            : undefined,
+      };
+    },
+
+    async getDetail({ id }) {
+      const snapshot = await getDoc(doc(documents, id));
+      return snapshot.exists() ? read(snapshot.id, snapshot.data()) : null;
+    },
+
+    async create(input) {
+      const reference = await addDoc(documents, mapper.toCreate(input));
+      const snapshot = await getDoc(reference);
+      return read(snapshot.id, snapshot.data());
+    },
+
+    async update({ id, value }) {
+      const reference = doc(documents, id);
+      await updateDoc(reference, mapper.toUpdate(value));
+      const snapshot = await getDoc(reference);
+      return read(snapshot.id, snapshot.data());
+    },
+
+    async delete({ id }) {
+      await deleteDoc(doc(documents, id));
+    },
+  };
+}

package/src/display/contracts.ts

@@ -190,11 +190,33 @@ export type TableColumn = {
   sizing?: 'content' | 'fill';
   wrap?: boolean;
   sort?: {
+    firstDirection?: 'ascending' | 'descending';
     type: 'number' | 'text';
     tieBreaker?: string;
   };
 };
 
+type TableActionBase = {
+  borderless?: boolean;
+  hoverTone?: Tone;
+  icon: AstroComponent;
+  iconTone?: Tone;
+  label: string;
+  tone?: Tone;
+};
+
+export type TableAction = TableActionBase &
+  (
+    | {
+        href: string;
+        modalTargetId?: never;
+      }
+    | {
+        href?: never;
+        modalTargetId: string;
+      }
+  );
+
 export type TableCell = {
   tooltip?: string;
 } & (
@@ -238,10 +260,15 @@ export type TableCell = {
       kind: 'tags';
       tags: readonly DisplayTag[];
     }
+  | {
+      kind: 'actions';
+      actions: readonly TableAction[];
+    }
 );
 
 export type TableRow = {
   key?: string;
+  disabled?: boolean;
   href?: string;
   hidden?: boolean;
   filters?: Readonly<Record<string, readonly string[]>>;
@@ -255,6 +282,20 @@ export type TablePaginationModel = {
   nextHref?: string;
 };
 
+export type TableProgressiveEntry = {
+  key: string;
+  source?: string;
+  filters?: TableRow['filters'];
+  sortValues?: TableRow['sortValues'];
+};
+
+export type TableProgressiveModel = {
+  entries: readonly TableProgressiveEntry[];
+  sources?: Readonly<Record<string, string>>;
+  batchSize?: number;
+  initialOffset?: number;
+};
+
 type NavigationItemBase = {
   active?: boolean;
   id?: string;

package/src/display/index.ts

@@ -1,2 +1,3 @@
 export * from './contracts';
 export * from './responsiveMedia';
+export * from './tableProgressive';

package/src/display/tableProgressive.ts

@@ -0,0 +1,62 @@
+import type {
+  TablePaginationModel,
+  TableProgressiveModel,
+  TableRow,
+} from './contracts';
+
+export const tableProgressiveBatchSize = 25;
+
+export type PagedTablePresentation = {
+  pagination: TablePaginationModel;
+  progressive: TableProgressiveModel;
+  rows: readonly TableRow[];
+};
+
+export function createPagedTablePresentation(
+  allRows: readonly TableRow[],
+  page: number,
+  getPageHref: (page: number) => string,
+  batchSize: number = tableProgressiveBatchSize,
+): PagedTablePresentation {
+  const resolvedBatchSize = Math.max(1, Math.floor(batchSize));
+  const totalPages = Math.max(1, Math.ceil(allRows.length / resolvedBatchSize));
+  if (!Number.isInteger(page) || page < 1 || page > totalPages) {
+    throw new RangeError(`Invalid table page: ${page}`);
+  }
+
+  const normalizedRows = allRows.map((row, index): TableRow => ({
+    ...row,
+    key: row.key ?? `table-row-${index + 1}`,
+  }));
+  const keys = new Set(normalizedRows.map((row) => row.key));
+  if (keys.size !== normalizedRows.length) {
+    throw new Error('Progressive table rows require unique keys');
+  }
+  const sources = Object.fromEntries(
+    Array.from({ length: totalPages }, (_, index) => {
+      const sourcePage = index + 1;
+      return [String(sourcePage), getPageHref(sourcePage)];
+    }),
+  );
+  const start = (page - 1) * resolvedBatchSize;
+
+  return {
+    pagination: {
+      page,
+      totalPages,
+      nextHref: page < totalPages ? getPageHref(page + 1) : undefined,
+    },
+    progressive: {
+      batchSize: resolvedBatchSize,
+      entries: normalizedRows.map((row, index) => ({
+        key: row.key!,
+        source: String(Math.floor(index / resolvedBatchSize) + 1),
+        filters: row.filters,
+        sortValues: row.sortValues,
+      })),
+      initialOffset: start,
+      sources,
+    },
+    rows: normalizedRows.slice(start, start + resolvedBatchSize),
+  };
+}

package/src/patterns/Combobox/Combobox.astro

@@ -1,5 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type {
+  PreferenceBinding,
+  PreferenceNumberBounds,
+} from '../../client/preferences';
 import type { Tone } from '../../theme/contracts';
 import type {
   ComboboxOption,
@@ -15,6 +19,7 @@ type SharedProps = Omit<HTMLAttributes<'div'>, 'id'> & {
   id: string;
   label: string;
   disabled?: boolean;
+  preference?: PreferenceBinding;
   size?: ComboboxSize;
   tone?: Tone;
   width?: 'auto' | 'fill';
@@ -41,6 +46,7 @@ type NumberProps = SharedProps & {
   value: number;
   decrementLabel: string;
   incrementLabel: string;
+  preferenceBounds?: PreferenceNumberBounds;
 };
 
 type Props = OptionsProps | NumberProps;
@@ -130,6 +136,8 @@ if (mode === 'number') {
     'max',
     'min',
     'mode',
+    'preference',
+    'preferenceBounds',
     'size',
     'step',
     'tone',
@@ -185,6 +193,7 @@ if (mode === 'number') {
     'mode',
     'options',
     'placeholder',
+    'preference',
     'removeLabel',
     'searchPlaceholder',
     'selectionMode',
@@ -233,6 +242,20 @@ const searchId = `${props.id}-search`;
   data-combobox-number-step={step}
   data-disabled={disabled ? true : undefined}
   data-tone={resolvedTone}
+  data-preference-id={props.preference?.id}
+  data-preference-path={props.preference?.path}
+  data-preference-control={
+    props.preference
+      ? mode === 'number'
+        ? 'combobox-number'
+        : 'combobox-options'
+      : undefined
+  }
+  data-preference-number-bounds={
+    mode === 'number' && (props as NumberProps).preferenceBounds
+      ? JSON.stringify((props as NumberProps).preferenceBounds)
+      : undefined
+  }
 >
   <span class="combobox__sizer" aria-hidden="true">
     {