@astronox/core 0.2.1 → 0.2.3

package/src/components/navigation/Breadcrumbs/Breadcrumbs.css

@@ -1,7 +1,7 @@
 .breadcrumbs {
   min-width: 0;
   overflow: hidden;
-  color: var(--nox-text-muted);
+  color: var(--nox-tone-color);
   font-size: var(--nox-font-size-sm);
   font-weight: var(--nox-font-weight-medium);
   line-height: 1.35;
@@ -25,7 +25,7 @@
 .breadcrumbs__item {
   display: inline-flex;
   flex: 0 0 auto;
-  align-items: stretch;
+  align-items: center;
   min-width: 0;
 }
 
@@ -39,15 +39,13 @@
   align-items: center;
 }
 
-.breadcrumbs__item + .breadcrumbs__item::before {
-  display: inline-flex;
-  align-items: center;
+.breadcrumbs__separator {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: 0 0 auto;
   margin-inline: var(--nox-space-2);
-  color: color-mix(in srgb, var(--nox-tone-color) 55%, var(--nox-text-subtle));
-  content: '›';
-  font-size: var(--nox-font-size-md);
-  font-weight: var(--nox-font-weight-strong);
-  line-height: 1;
+  color: var(--nox-tone-color);
 }
 
 .breadcrumbs a {
@@ -56,7 +54,8 @@
   align-items: center;
   align-self: stretch;
   border-radius: var(--nox-radius-sm);
-  color: inherit;
+  color: var(--nox-tone-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
   margin-inline: -0.1875rem;
   padding-inline: 0.1875rem;
   text-decoration: none;
@@ -71,19 +70,15 @@
 
 @media (hover: hover) and (pointer: fine) {
   .breadcrumbs a:hover {
-    color: var(--nox-tone-text);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
   }
 }
 
 .breadcrumbs a:focus-visible {
-  color: var(--nox-tone-text);
-  text-decoration-line: underline;
-  text-decoration-thickness: 0.125rem;
+  color: var(--nox-tone-color);
 }
 
 .breadcrumbs [aria-current='page'] {
-  color: var(--nox-tone-text);
+  color: var(--nox-tone-color);
   font-weight: var(--nox-font-weight-strong);
 }

package/src/components/navigation/Footer/Footer.astro

@@ -0,0 +1,102 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import type { FooterGroup, FooterItem } from './contracts';
+import ArrowRightIcon from '../../icons/ArrowRightIcon.astro';
+
+type Props = HTMLAttributes<'footer'> & {
+  columnSeparator?: 'divider' | 'none';
+  columns?: 1 | 2;
+  groups: readonly FooterGroup[];
+  label: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  columnSeparator = 'none',
+  columns = 1,
+  'data-tone': dataTone,
+  groups,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const visibleGroups = groups.filter(({ items }) => items.length > 0);
+const resolveRel = (target: FooterItem['target'], rel?: FooterItem['rel']) =>
+  rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
+---
+
+<footer
+  {...attrs}
+  class:list={['site-footer', className]}
+  data-tone={resolvedTone}
+  data-widget="site-footer"
+>
+  <nav
+    class="site-footer__content"
+    aria-label={label}
+    data-footer-columns={columns}
+    data-footer-column-separator={columnSeparator}
+  >
+    {
+      visibleGroups.map(({ items }) => (
+        <span class="site-footer__group">
+          {items.map(
+            (
+              {
+                href,
+                label: itemLabel,
+                marker,
+                prefix,
+                rel,
+                separator = 'divider',
+                target,
+                tone: itemTone,
+              },
+              index,
+            ) => (
+              <>
+                {index > 0 ? (
+                  separator === 'divider' ? (
+                    <span class="site-footer__separator" aria-hidden="true">
+                      |
+                    </span>
+                  ) : (
+                    <span class="site-footer__spacer" aria-hidden="true" />
+                  )
+                ) : null}
+                <span class="site-footer__item">
+                  {prefix ? (
+                    <span class="site-footer__prefix">{prefix}</span>
+                  ) : null}
+                  {href ? (
+                    <a
+                      href={href}
+                      rel={resolveRel(target, rel)}
+                      target={target}
+                      data-tone={itemTone}
+                    >
+                      {marker === 'arrow' ? (
+                        <ArrowRightIcon class="site-footer__marker" />
+                      ) : null}
+                      <span>{itemLabel}</span>
+                    </a>
+                  ) : (
+                    <span class="site-footer__label" data-tone={itemTone}>
+                      {marker === 'arrow' ? (
+                        <ArrowRightIcon class="site-footer__marker" />
+                      ) : null}
+                      <span>{itemLabel}</span>
+                    </span>
+                  )}
+                </span>
+              </>
+            ),
+          )}
+        </span>
+      ))
+    }
+  </nav>
+</footer>

package/src/components/navigation/Footer/Footer.css

@@ -0,0 +1,155 @@
+.site-footer {
+  color: var(--nox-text-muted);
+}
+
+.site-footer__content {
+  --site-footer-item-gap: var(--nox-space-2);
+  --site-footer-marker-gap: 0.0625rem;
+
+  display: grid;
+  width: var(--nox-page-width);
+  margin-inline: auto;
+  justify-items: center;
+  gap: var(--nox-space-1);
+  padding-block-end: calc(
+    var(--nox-section-compact-block-size) + var(--nox-space-7)
+  );
+  font-size: var(--nox-font-size-sm);
+  line-height: 1.25;
+  text-align: center;
+}
+
+.site-footer__group {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.site-footer__content[data-footer-columns='2'] {
+  grid-template-columns: repeat(2, max-content);
+  justify-content: center;
+  column-gap: var(--nox-space-4);
+}
+
+.site-footer__content[data-footer-columns='2'][
+  data-footer-column-separator='divider'
+] {
+  column-gap: 0;
+}
+
+.site-footer__content[data-footer-columns='2'][
+  data-footer-column-separator='divider'
+]
+  > .site-footer__group:nth-child(even)::before {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  content: '|';
+  line-height: 1;
+}
+
+.site-footer__content[data-footer-columns='2']
+  > .site-footer__group:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+.site-footer__item {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0;
+}
+
+.site-footer__separator {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  line-height: 1;
+}
+
+.site-footer__spacer {
+  width: var(--site-footer-item-gap);
+  flex: 0 0 auto;
+}
+
+.site-footer__prefix + :is(a, .site-footer__label) {
+  margin-inline-start: var(--nox-space-1);
+}
+
+.site-footer a,
+.site-footer__label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--site-footer-marker-gap);
+}
+
+.site-footer__marker {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: 0 0 auto;
+  color: var(--nox-text-muted);
+}
+
+.site-footer a {
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+  text-decoration: none;
+}
+
+.site-footer a[data-tone],
+.site-footer__label[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.site-footer a:focus-visible {
+  border-radius: var(--nox-radius-sm);
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+  color: var(--nox-content-link-color);
+}
+
+.site-footer a[data-tone]:focus-visible {
+  color: var(--nox-tone-color);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .site-footer a:hover {
+    color: var(--nox-content-link-color);
+    text-decoration-line: underline;
+  }
+
+  .site-footer a[data-tone]:hover {
+    color: var(--nox-tone-color);
+  }
+}
+
+@media (width < 48rem) {
+  .site-footer__content[data-footer-columns='2'] {
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: 0;
+  }
+
+  .site-footer__content[data-footer-columns='2']
+    > .site-footer__group:last-child:nth-child(odd) {
+    grid-column: auto;
+  }
+
+  .site-footer__content[data-footer-columns='2'][
+    data-footer-column-separator='divider'
+  ]
+    > .site-footer__group:nth-child(even)::before {
+    content: none;
+  }
+}

package/src/components/navigation/Footer/contracts.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+export type FooterItem = {
+  href?: HTMLAttributes<'a'>['href'];
+  label: string;
+  marker?: 'arrow';
+  prefix?: string;
+  rel?: HTMLAttributes<'a'>['rel'];
+  separator?: 'divider' | 'none';
+  target?: HTMLAttributes<'a'>['target'];
+  tone?: Tone;
+};
+
+export type FooterGroup = {
+  items: readonly FooterItem[];
+};

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/Grid/Grid.css

@@ -115,6 +115,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='sm'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -163,6 +167,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='md'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -211,6 +219,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='lg'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -259,6 +271,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='xl'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']

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,78 @@
+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>;
+};
+
+export type ClientFirestoreBatchOperation =
+  | {
+      collection: string;
+      id?: string;
+      kind: 'create';
+      value: Record<string, unknown>;
+    }
+  | {
+      collection: string;
+      id: string;
+      kind: 'update';
+      value: Record<string, unknown>;
+    }
+  | {
+      collection: string;
+      id: string;
+      kind: 'delete';
+    };
+
+export type ClientFirestoreBatchResult = {
+  createdIds: readonly string[];
+};

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

@@ -0,0 +1,56 @@
+import { getApps, initializeApp } from 'firebase/app';
+import {
+  collection,
+  doc,
+  getFirestore,
+  serverTimestamp,
+  writeBatch,
+} from 'firebase/firestore';
+
+import type { FirebaseClientConfig } from '../../../auth/firebase/contracts';
+import type {
+  ClientFirestoreBatchOperation,
+  ClientFirestoreBatchResult,
+} from './contracts';
+
+export function createFirebaseClientFirestore(config: FirebaseClientConfig) {
+  const app =
+    getApps().find((candidate) => candidate.name === config.projectId) ??
+    initializeApp(config, config.projectId);
+
+  return getFirestore(app);
+}
+
+export function createClientFirestoreServerTimestamp() {
+  return serverTimestamp();
+}
+
+export async function commitClientFirestoreBatch(
+  database: ReturnType<typeof createFirebaseClientFirestore>,
+  operations: readonly ClientFirestoreBatchOperation[],
+): Promise<ClientFirestoreBatchResult> {
+  const batch = writeBatch(database);
+  const createdIds: string[] = [];
+
+  for (const operation of operations) {
+    const documents = collection(database, operation.collection);
+    if (operation.kind === 'create') {
+      const reference = operation.id
+        ? doc(documents, operation.id)
+        : doc(documents);
+      batch.set(reference, operation.value);
+      createdIds.push(reference.id);
+      continue;
+    }
+
+    const reference = doc(documents, operation.id);
+    if (operation.kind === 'update') {
+      batch.update(reference, operation.value);
+    } else {
+      batch.delete(reference);
+    }
+  }
+
+  await batch.commit();
+  return { createdIds };
+}

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

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