@astronox/core 0.2.1 → 0.2.2

package/src/components/forms/Textarea/Textarea.css

@@ -0,0 +1,54 @@
+.textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 28rem;
+  resize: vertical;
+  padding: var(--nox-field-control-padding-inline);
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  outline: 0;
+  background: var(--nox-field-background);
+  color: var(--nox-field-color);
+  font-family: inherit;
+  font-size: var(--nox-field-control-font-size);
+  font-weight: var(--nox-font-weight-regular);
+  letter-spacing: 0;
+  line-height: 1.5;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.textarea::placeholder {
+  color: var(--nox-field-placeholder);
+  opacity: 1;
+}
+
+.textarea:focus {
+  border-color: var(--nox-field-border-active);
+  box-shadow: var(--nox-field-focus-shadow);
+}
+
+.textarea[data-invalid] {
+  border-color: var(--nox-field-border-invalid);
+}
+
+.textarea:disabled {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .textarea:not(:disabled):not(:focus):not([data-invalid]):hover {
+    border-color: var(--nox-field-border-hover);
+  }
+}
+
+@media (width < 48rem), (hover: none) and (pointer: coarse) {
+  .textarea {
+    min-height: 20rem;
+    font-size: var(--nox-font-size-md);
+  }
+}

package/src/components/icons/BackIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M13 8 6 15l7 7M7 15h10c5 0 8 3 8 8"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/DeleteIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M9 10H23M13 10V7H19V10M11 10L12 25H20L21 10M14.5 14V21M17.5 14V21"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/StatusIndicatorIcon.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle cx="16" cy="16" r="8" fill="currentColor"></circle>
+</svg>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.astro';
 export { default as CardAction } from './actions/CardAction/CardAction.astro';
+export { default as IdentityProviderAction } from './actions/IdentityProviderAction/IdentityProviderAction.astro';
 export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
 export { default as ScrollToTop } from './actions/ScrollToTop/ScrollToTop.astro';
 export { default as CardBody } from './content/CardBody/CardBody.astro';
@@ -16,11 +17,16 @@ export { default as MetricTile } from './data-display/MetricTile/MetricTile.astr
 export { default as Tag } from './data-display/Tag/Tag.astro';
 export { default as TextPair } from './data-display/TextPair/TextPair.astro';
 export { default as Checkbox } from './forms/Checkbox/Checkbox.astro';
+export { default as ChoiceGroup } from './forms/ChoiceGroup/ChoiceGroup.astro';
+export type { ChoiceOption } from './forms/ChoiceGroup/contracts';
+export { default as DateTimeInput } from './forms/DateTimeInput/DateTimeInput.astro';
 export { default as FieldError } from './forms/FieldError/FieldError.astro';
 export { default as FieldGroup } from './forms/FieldGroup/FieldGroup.astro';
 export { default as FieldLabel } from './forms/FieldLabel/FieldLabel.astro';
 export { default as TextInput } from './forms/TextInput/TextInput.astro';
+export { default as Textarea } from './forms/Textarea/Textarea.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';
+export { default as PreferenceBootstrap } from './feedback/PreferenceBootstrap/PreferenceBootstrap.astro';
 export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
@@ -55,12 +61,15 @@ export { default as ArrowLeftIcon } from './icons/ArrowLeftIcon.astro';
 export { default as ArrowRightIcon } from './icons/ArrowRightIcon.astro';
 export { default as ArrowUpDownIcon } from './icons/ArrowUpDownIcon.astro';
 export { default as ArrowUpIcon } from './icons/ArrowUpIcon.astro';
+export { default as BackIcon } from './icons/BackIcon.astro';
 export { default as BulletIcon } from './icons/BulletIcon.astro';
 export { default as BurnIcon } from './icons/BurnIcon.astro';
+export { default as CheckIcon } from './icons/CheckIcon.astro';
 export { default as ClearIcon } from './icons/ClearIcon.astro';
 export { default as CloseIcon } from './icons/CloseIcon.astro';
 export { default as CopyIcon } from './icons/CopyIcon.astro';
 export { default as DayIcon } from './icons/DayIcon.astro';
+export { default as DeleteIcon } from './icons/DeleteIcon.astro';
 export { default as DollarIcon } from './icons/DollarIcon.astro';
 export { default as DownloadIcon } from './icons/DownloadIcon.astro';
 export { default as EnterFullscreenIcon } from './icons/EnterFullscreenIcon.astro';
@@ -80,6 +89,7 @@ export { default as RibbonIcon } from './icons/RibbonIcon.astro';
 export { default as SlashIcon } from './icons/SlashIcon.astro';
 export { default as SlowIcon } from './icons/SlowIcon.astro';
 export { default as StarIcon } from './icons/StarIcon.astro';
+export { default as StatusIndicatorIcon } from './icons/StatusIndicatorIcon.astro';
 export { default as StunIcon } from './icons/StunIcon.astro';
 export { default as TableSortIcon } from './icons/TableSortIcon.astro';
 export { default as WaterIcon } from './icons/WaterIcon.astro';

package/src/components/media/CanvasFrame/CanvasFrame.astro

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type CanvasAspectRatio = '16/9' | '4/3';
 type CanvasActivation = 'immediate' | 'manual';
 type CanvasWheelInput = 'canvas' | 'page';
 
-type CanvasFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-};
-
 type Props = HTMLAttributes<'div'> & {
   activation?: CanvasActivation;
   activationLabel?: string;
   aspectRatio?: CanvasAspectRatio;
   canvasId?: string;
   frameId: string;
-  fullscreen?: CanvasFullscreen;
+  fullscreen?: boolean;
   loadingLabel: string;
   title: string;
   tone?: Tone;
@@ -95,16 +89,6 @@ const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
     role="alert"
     hidden
   ></span>
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-      />
-    ) : null
-  }
 </nox-canvas-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.astro

@@ -3,19 +3,12 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type EmbedAspectRatio = '16/9' | '4/3';
 type EmbedActivation = 'immediate' | 'manual';
 type EmbedLoading = 'eager' | 'lazy';
 type EmbedLoadingIndicator = 'none' | 'spinner';
 
-type EmbedFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-  overlayOffset?: 'default' | 'native-controls';
-};
-
 type Props = Omit<
   HTMLAttributes<'iframe'>,
   'height' | 'loading' | 'src' | 'title' | 'width'
@@ -24,7 +17,7 @@ type Props = Omit<
   activationLabel?: string;
   aspectRatio?: EmbedAspectRatio;
   frameId?: string;
-  fullscreen?: EmbedFullscreen;
+  fullscreen?: boolean;
   loading?: EmbedLoading;
   loadingIndicator?: EmbedLoadingIndicator;
   loadingLabel: string;
@@ -111,17 +104,6 @@ const resolvedTone = tone ?? dataTone;
       </span>
     ) : null
   }
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId ?? ''}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-        overlayOffset={fullscreen.overlayOffset}
-      />
-    ) : null
-  }
 </nox-embed-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.css

@@ -1,6 +1,4 @@
 .embed-frame {
-  --nox-fullscreen-native-controls-block-size: 2.5rem;
-
   position: relative;
   display: block;
   inline-size: 100%;

package/src/components/navigation/SubNavigation/SubNavigation.css

@@ -194,11 +194,6 @@
     row-gap: 0;
   }
 
-  .sub-navigation__visual--media {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
   .sub-navigation__label--with-visual {
     position: absolute;
     overflow: hidden;

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,6 +260,10 @@ export type TableCell = {
       kind: 'tags';
       tags: readonly DisplayTag[];
     }
+  | {
+      kind: 'actions';
+      actions: readonly TableAction[];
+    }
 );
 
 export type TableRow = {
@@ -256,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),
+  };
+}