@astronox/core 0.2.1 → 0.2.3

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

@@ -104,10 +104,13 @@ type DisplayCardLinkContent = {
   compactContent?: 'text' | 'media';
   compactText?: DisplayTextValue;
   compactVisual?: 'show' | 'hide';
+  density?: 'default' | 'relaxed';
   iconTone?: Tone;
-  label: string;
+  label?: string;
   title: string;
   meta?: DisplayTextValue;
+  textLayout?: TextPairLayout;
+  textTreatment?: 'default' | 'heading';
   media?: DisplayMedia;
   mediaPosition?: 'start' | 'end';
   mediaSize?: 'default' | 'compact' | 'small';
@@ -190,11 +193,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,6 +263,10 @@ export type TableCell = {
       kind: 'tags';
       tags: readonly DisplayTag[];
     }
+  | {
+      kind: 'actions';
+      actions: readonly TableAction[];
+    }
 );
 
 export type TableRow = {
@@ -256,6 +285,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/layouts/BaseLayout.astro

@@ -16,6 +16,7 @@ type Props = HTMLAttributes<'html'> & {
   currentPath?: string;
   breadcrumbs?: readonly BreadcrumbItem[];
   breadcrumbLabel: string;
+  breadcrumbTone?: Tone;
   scrollToTopLabel?: string;
   structuredData?: readonly JsonLdNode[];
   tone?: Tone;
@@ -23,6 +24,7 @@ type Props = HTMLAttributes<'html'> & {
 
 const {
   breadcrumbLabel,
+  breadcrumbTone,
   breadcrumbs,
   currentPath = Astro.url.pathname,
   'data-tone': dataTone,
@@ -59,7 +61,11 @@ const resolvedTone = tone ?? dataTone;
         <div class="site-main__content">
           {
             breadcrumbs?.length ? (
-              <Breadcrumbs items={breadcrumbs} label={breadcrumbLabel} />
+              <Breadcrumbs
+                items={breadcrumbs}
+                label={breadcrumbLabel}
+                tone={breadcrumbTone}
+              />
             ) : null
           }
 
@@ -68,6 +74,7 @@ const resolvedTone = tone ?? dataTone;
           </PageSurface>
         </div>
       </main>
+      <slot name="footer" />
     </div>
     {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
   </body>

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">
     {

package/src/patterns/Combobox/comboboxController.ts

@@ -17,6 +17,13 @@ export type ComboboxNumberBounds = {
   max: number;
 };
 
+export type DynamicComboboxOption = {
+  description?: string;
+  disabled?: boolean;
+  label: string;
+  value: string;
+};
+
 type NumberBounds = {
   min: number;
   max: number;
@@ -159,6 +166,68 @@ export function clearCombobox(
   root.dispatchEvent(new Event('combobox:clear'));
 }
 
+export function setComboboxOptions(
+  root: HTMLElement,
+  options: readonly DynamicComboboxOption[],
+  selectedValues: readonly string[] = [],
+): void {
+  if (root.dataset.comboboxMode === 'number') return;
+  const optionsRoot = root.querySelector<HTMLElement>('[data-combobox-options]');
+  const empty = root.querySelector<HTMLElement>('[data-combobox-empty]');
+  if (!optionsRoot || !empty) return;
+
+  optionsRoot.querySelectorAll('[data-combobox-option]').forEach((node) => node.remove());
+  root.querySelectorAll('template[data-combobox-tag-template]').forEach((node) => node.remove());
+
+  options.forEach((option, index) => {
+    const button = document.createElement('button');
+    button.className = 'combobox__option';
+    button.id = `${root.id}-option-${index}`;
+    button.type = 'button';
+    button.role = 'option';
+    button.tabIndex = -1;
+    button.disabled = option.disabled === true;
+    button.setAttribute('aria-selected', 'false');
+    if (option.disabled) button.setAttribute('aria-disabled', 'true');
+    button.dataset.comboboxOption = option.value;
+    button.dataset.comboboxSearchText = [option.label, option.description ?? ''].join(' ');
+    button.dataset.interactionAccent = 'start';
+
+    const content = document.createElement('span');
+    content.className = 'combobox__option-content';
+    const label = document.createElement('span');
+    label.className = 'combobox__option-label';
+    label.textContent = option.label;
+    content.append(label);
+    if (option.description) {
+      const description = document.createElement('span');
+      description.className = 'combobox__option-description';
+      description.textContent = option.description;
+      content.append(description);
+    }
+    button.append(content);
+    optionsRoot.insertBefore(button, empty);
+
+    const template = document.createElement('template');
+    template.dataset.comboboxTagTemplate = option.value;
+    const tag = document.createElement('span');
+    tag.className = 'tag';
+    tag.dataset.widget = 'tag';
+    tag.dataset.size = 'sm';
+    tag.dataset.comboboxTag = option.value;
+    const tagLabel = document.createElement('span');
+    tagLabel.className = 'tag__label';
+    tagLabel.dataset.tagLabel = '';
+    tagLabel.textContent = option.label;
+    tag.append(tagLabel);
+    template.content.append(tag);
+    root.append(template);
+  });
+
+  empty.hidden = options.length > 0;
+  setComboboxValues(root, selectedValues);
+}
+
 export function setComboboxNumberValue(
   root: HTMLElement,
   requestedValue: number,

package/src/patterns/Fullscreen/FullscreenControl.astro

@@ -6,8 +6,6 @@ import EnterFullscreenIcon from '../../components/icons/EnterFullscreenIcon.astr
 import ExitFullscreenIcon from '../../components/icons/ExitFullscreenIcon.astro';
 import ExternalLinkIcon from '../../components/icons/ExternalLinkIcon.astro';
 
-type FullscreenControlPlacement = 'inline' | 'overlay';
-type FullscreenOverlayOffset = 'default' | 'native-controls';
 type FullscreenUnsupportedFallback = {
   href: string;
   label: string;
@@ -17,8 +15,6 @@ type FullscreenUnsupportedFallback = {
 type Props = Omit<HTMLAttributes<'button'>, 'aria-controls' | 'type'> & {
   enterLabel: string;
   exitLabel: string;
-  overlayOffset?: FullscreenOverlayOffset;
-  placement?: FullscreenControlPlacement;
   targetId: string;
   tone?: Tone;
   unsupportedFallback?: FullscreenUnsupportedFallback;
@@ -28,8 +24,6 @@ const {
   class: className,
   enterLabel,
   exitLabel,
-  overlayOffset = 'default',
-  placement = 'inline',
   targetId,
   tone,
   unsupportedFallback,
@@ -44,10 +38,9 @@ const resolvedClass = ['fullscreen-control', className]
   {...attrs}
   class={resolvedClass}
   type="button"
-  borderless={placement === 'inline'}
-  full={placement === 'inline'}
+  borderless
+  full
   iconOnly
-  size={placement === 'overlay' ? 'md' : undefined}
   tone={tone}
   aria-controls={targetId}
   aria-label={enterLabel}
@@ -56,8 +49,6 @@ const resolvedClass = ['fullscreen-control', className]
   data-fullscreen-control
   data-fullscreen-enter-label={enterLabel}
   data-fullscreen-exit-label={exitLabel}
-  data-fullscreen-overlay-offset={overlayOffset}
-  data-fullscreen-placement={placement}
   data-fullscreen-target={targetId}
 >
   <span class="fullscreen-control__icon" data-fullscreen-enter-icon>
@@ -73,10 +64,9 @@ const resolvedClass = ['fullscreen-control', className]
     <Button
       href={unsupportedFallback.href}
       target={unsupportedFallback.target ?? '_blank'}
-      borderless={placement === 'inline'}
-      full={placement === 'inline'}
+      borderless
+      full
       iconOnly
-      size={placement === 'overlay' ? 'md' : undefined}
       tone={tone}
       aria-label={unsupportedFallback.label}
       title={unsupportedFallback.label}

package/src/patterns/Fullscreen/FullscreenControl.css

@@ -15,32 +15,6 @@
   display: grid;
 }
 
-.fullscreen-control[data-fullscreen-placement='overlay'].nox-button {
-  position: absolute;
-  z-index: 2;
-  display: none;
-  inset-inline-end: var(--nox-space-3);
-  inset-block-end: var(--nox-space-3);
-  inline-size: var(--nox-section-responsive-block-size);
-  block-size: var(--nox-section-responsive-block-size);
-  min-block-size: 0;
-  border-radius: var(--nox-radius-md);
-  box-shadow: var(--nox-shadow-surface);
-}
-
-[data-fullscreen-region]:fullscreen
-  .fullscreen-control[data-fullscreen-placement='overlay'].nox-button {
-  display: inline-flex;
-}
-
-[data-fullscreen-region]:fullscreen
-  .fullscreen-control[data-fullscreen-placement='overlay'][data-fullscreen-overlay-offset='native-controls'].nox-button {
-  inset-block-end: calc(
-    var(--nox-fullscreen-native-controls-block-size, 2.5rem) +
-      var(--nox-space-3)
-  );
-}
-
 [data-fullscreen-region]:fullscreen {
   inline-size: 100vw;
   block-size: 100vh;

package/src/patterns/Modal/Modal.astro

@@ -4,7 +4,7 @@ import type { Tone } from '../../theme/contracts';
 import ModalClose from './ModalClose.astro';
 
 type ModalCloseControl = 'default' | 'delegated';
-type ModalSizing = 'content' | 'viewport';
+type ModalSizing = 'adaptive' | 'confirmation' | 'content' | 'viewport';
 
 type Props = HTMLAttributes<'dialog'> & {
   id: string;

package/src/patterns/Modal/Modal.css

@@ -48,6 +48,33 @@ html:has(.modal[open]) [data-site-viewport] {
   overflow: auto;
 }
 
+.modal[data-sizing='confirmation'] .modal__content {
+  inline-size: min(42rem, 100%);
+  block-size: auto;
+  max-block-size: 100%;
+  align-self: center;
+  overflow: auto;
+}
+
+.modal[data-sizing='adaptive'] .modal__content {
+  display: flex;
+  block-size: 100%;
+  min-block-size: 0;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.modal[data-sizing='adaptive']
+  .modal__content
+  > [data-composition='surface-group'] {
+  inline-size: 100%;
+  min-block-size: 0;
+  max-block-size: 100%;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
 .modal__default-close {
   position: absolute;
   z-index: 1;
@@ -81,7 +108,17 @@ html:has(.modal[open]) [data-site-viewport] {
     padding-inline: 0;
   }
 
-  .modal__content [data-surface] {
+  .modal:not(
+      [data-sizing='adaptive'],
+      [data-sizing='confirmation']
+    )
+    .modal__content
+    [data-surface] {
     border-radius: 0;
   }
+
+  .modal:is([data-sizing='adaptive'], [data-sizing='confirmation'])
+    .modal__content {
+    padding: var(--nox-space-2);
+  }
 }