@astronox/core 0.2.2 → 0.2.4

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

@@ -1,7 +1,17 @@
 import { getApps, initializeApp } from 'firebase/app';
-import { getFirestore } from 'firebase/firestore';
+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 =
@@ -10,3 +20,37 @@ export function createFirebaseClientFirestore(config: FirebaseClientConfig) {
 
   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/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';
@@ -308,6 +311,7 @@ type NavigationItemBase = {
   rel?: string;
   target?: '_blank' | '_self';
   hreflang?: string;
+  icon?: AstroComponent;
   media?: DisplayMedia;
   mediaFrame?: 'bordered';
   mediaShape?: 'circle' | 'rectangle';

package/src/layouts/BaseLayout.astro

@@ -9,6 +9,8 @@ import type { Tone } from '../theme/contracts';
 import PageSurface from './PageSurface.astro';
 import Breadcrumbs from '../components/navigation/Breadcrumbs/Breadcrumbs.astro';
 import ScrollToTop from '../components/actions/ScrollToTop/ScrollToTop.astro';
+import ThemeBootstrap from '../components/feedback/ThemeBootstrap/ThemeBootstrap.astro';
+import { defaultThemeStorageKey } from '../theme/storage';
 
 type Props = HTMLAttributes<'html'> & {
   meta: PageMeta;
@@ -16,13 +18,16 @@ type Props = HTMLAttributes<'html'> & {
   currentPath?: string;
   breadcrumbs?: readonly BreadcrumbItem[];
   breadcrumbLabel: string;
+  breadcrumbTone?: Tone;
   scrollToTopLabel?: string;
   structuredData?: readonly JsonLdNode[];
   tone?: Tone;
+  themeStorageKey?: string;
 };
 
 const {
   breadcrumbLabel,
+  breadcrumbTone,
   breadcrumbs,
   currentPath = Astro.url.pathname,
   'data-tone': dataTone,
@@ -31,6 +36,7 @@ const {
   site,
   structuredData,
   tone,
+  themeStorageKey = defaultThemeStorageKey,
   ...htmlAttrs
 } = Astro.props;
 const lang = meta.lang ?? site.defaultMeta.lang;
@@ -42,6 +48,7 @@ const resolvedTone = tone ?? dataTone;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <ThemeBootstrap storageKey={themeStorageKey} />
     <SeoHead
       breadcrumbs={breadcrumbs}
       meta={meta}
@@ -59,7 +66,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 +79,7 @@ const resolvedTone = tone ?? dataTone;
           </PageSurface>
         </div>
       </main>
+      <slot name="footer" />
     </div>
     {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
   </body>

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

@@ -155,12 +155,12 @@
   --map-viewport-cell-surface: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 38%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --map-viewport-cell-surface-hover: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 52%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --map-viewport-cell-background: color-mix(
     in srgb,
@@ -175,7 +175,7 @@
   --map-viewport-cell-border: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 74%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
 
   fill: var(--map-viewport-cell-background);

package/src/patterns/Table/TableBody.css

@@ -130,7 +130,7 @@
 }
 
 .table-body__row {
-  --table-primary-link-color: var(--nox-text);
+  --table-primary-link-color: var(--nox-content-link-color);
   --table-row-intrinsic-block-size: var(--table-row-min-block-size);
 
   display: grid;
@@ -173,7 +173,7 @@
 }
 
 .table-body__row[data-table-row-href]:focus-within {
-  --table-primary-link-color: var(--nox-link-hover);
+  --table-primary-link-color: var(--nox-content-link-color);
 }
 
 .table-body__cell {
@@ -253,7 +253,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-body__row[data-table-row-href]:hover {
-    --table-primary-link-color: var(--nox-link-hover);
+    --table-primary-link-color: var(--nox-content-link-color);
   }
 }
 

package/src/patterns/Table/TableCell.css

@@ -68,6 +68,10 @@
     var(--nox-motion-easing-standard);
 }
 
+.table-cell__link [data-text-weight='strong'] {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
 .table-cell__empty {
   color: var(--nox-text-muted);
   font-size: var(--nox-font-size-sm);
@@ -93,7 +97,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-cell__link:hover {
-    color: var(--nox-link-hover);
+    color: var(--nox-content-link-color);
   }
 }
 

package/src/styles/base.css

@@ -70,7 +70,20 @@ body {
 }
 
 a {
-  color: inherit;
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-font-weight);
+  text-decoration: none;
+  text-decoration-thickness: 0.0625rem;
+  text-underline-offset: 0.2em;
+}
+
+a[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+strong a,
+a strong {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
 }
 
 a:focus-visible,
@@ -83,6 +96,12 @@ button {
   font: inherit;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  a:where([href]:hover) {
+    text-decoration-line: underline;
+  }
+}
+
 img,
 svg,
 video {
@@ -104,7 +123,6 @@ p {
   overflow-y: auto;
   background: var(--nox-page-background);
   overscroll-behavior-y: contain;
-  scrollbar-gutter: stable both-edges;
 }
 
 .site-main {
@@ -113,18 +131,19 @@ p {
   display: grid;
   width: var(--nox-page-width);
   margin: 0 auto;
-  padding-block: var(--site-main-content-gap) var(--nox-space-7);
-  gap: var(--nox-layout-gap);
+  padding-block: var(--site-main-content-gap);
+  align-content: start;
 }
 
 .site-main__content {
   display: grid;
   min-width: 0;
+  align-content: start;
   gap: var(--site-main-content-gap);
 }
 
 .site-main:has(> .site-main__content > .breadcrumbs) {
-  padding-block-start: 0;
+  padding-block: 0 var(--site-main-content-gap);
 }
 
 .site-main__content:has(> .breadcrumbs) {
@@ -134,8 +153,6 @@ p {
 @media (width < 48rem) {
   .site-main {
     --site-main-content-gap: var(--nox-space-4);
-
-    padding-block-end: var(--nox-space-6);
   }
 }
 

package/src/styles/style.css

@@ -17,6 +17,7 @@
 @import '../components/actions/ActionListItem/ActionListItem.css'
   layer(components);
 @import '../components/actions/Button/Button.css' layer(components);
+@import '../components/actions/ThemeToggle/ThemeToggle.css' layer(components);
 @import '../components/actions/CardAction/CardAction.css'
   layer(components);
 @import '../components/actions/ScrollToTop/ScrollToTop.css'
@@ -60,6 +61,7 @@
 @import '../components/navigation/Breadcrumbs/Breadcrumbs.css'
   layer(components);
 @import '../components/navigation/Header.css' layer(components);
+@import '../components/navigation/Footer/Footer.css' layer(components);
 @import '../components/navigation/NavigationBrand.css' layer(components);
 @import '../components/navigation/NavigationControl.css' layer(components);
 @import '../components/navigation/NavigationMenuList.css' layer(components);

package/src/styles/tokens.css

@@ -9,6 +9,11 @@
   --nox-source-tone-warning: #d97706;
   --nox-source-tone-danger: #dc2626;
 
+  /* Shared textual-link recipe. */
+  --nox-content-link-color: var(--nox-source-tone-info);
+  --nox-content-link-font-weight: var(--nox-font-weight-regular);
+  --nox-content-link-emphasis-font-weight: var(--nox-font-weight-medium);
+
   /* Public map seeds. Component states derive their full treatment from these. */
   --nox-source-map-available: #00b86b;
   --nox-source-map-unavailable: #f43f5e;
@@ -22,6 +27,42 @@
   --nox-mix-light: #ffffff;
   --nox-mix-dark: #020617;
   --nox-tone-seed: var(--nox-source-tone-neutral);
+
+  /* Theme recipe anchors. Light mode preserves the original palette. */
+  --nox-theme-page-base: var(--nox-mix-light);
+  --nox-theme-surface-base: var(--nox-mix-light);
+  --nox-theme-text-base: var(--nox-mix-dark);
+  --nox-theme-text-disabled-base: var(--nox-mix-light);
+  --nox-theme-border-base: var(--nox-mix-light);
+  --nox-theme-inverse-base: var(--nox-mix-light);
+  --nox-theme-shadow-base: var(--nox-mix-dark);
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --nox-source-tone-neutral: #8f9bad;
+  --nox-source-tone-primary: #a78bfa;
+  --nox-source-tone-info: #73a4ff;
+  --nox-source-tone-success: #42d392;
+  --nox-source-tone-warning: #f0ad55;
+  --nox-source-tone-danger: #f47777;
+
+  --nox-source-map-available: #42d392;
+  --nox-source-map-unavailable: #fb7185;
+  --nox-source-map-field: #fbbf24;
+  --nox-source-map-grass: #84cc16;
+  --nox-source-map-mountain: #94a3b8;
+  --nox-source-map-water: #38bdf8;
+  --nox-source-map-range: #60a5fa;
+
+  --nox-theme-page-base: #0f1218;
+  --nox-theme-surface-base: #171b23;
+  --nox-theme-text-base: #f8fafc;
+  --nox-theme-text-disabled-base: #657184;
+  --nox-theme-border-base: #252b35;
+  --nox-theme-inverse-base: #0f1218;
+  --nox-theme-shadow-base: #000000;
 }
 
 :root,
@@ -30,51 +71,55 @@
   --nox-page-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 11%,
-    var(--nox-mix-light)
+    var(--nox-theme-page-base)
   );
   --nox-surface: color-mix(
     in srgb,
     var(--nox-tone-seed) 2%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-surface-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 8%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-surface-strong: color-mix(
     in srgb,
     var(--nox-tone-seed) 14%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 
-  --nox-text: color-mix(in srgb, var(--nox-tone-seed) 18%, var(--nox-mix-dark));
+  --nox-text: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 18%,
+    var(--nox-theme-text-base)
+  );
   --nox-text-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 52%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-text-subtle: color-mix(
     in srgb,
     var(--nox-tone-seed) 68%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-text-disabled: color-mix(
     in srgb,
     var(--nox-tone-seed) 36%,
-    var(--nox-mix-light)
+    var(--nox-theme-text-disabled-base)
   );
-  --nox-text-inverse: var(--nox-mix-light);
+  --nox-text-inverse: var(--nox-theme-inverse-base);
 
   --nox-border: color-mix(
     in srgb,
     var(--nox-tone-seed) 28%,
-    var(--nox-mix-light)
+    var(--nox-theme-border-base)
   );
   --nox-border-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 18%,
-    var(--nox-mix-light)
+    var(--nox-theme-border-base)
   );
 
   /* Tone interaction slots. */
@@ -84,12 +129,12 @@
   --nox-tone-hover-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-tone-active-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 20%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-tone-border: color-mix(
     in srgb,
@@ -99,13 +144,13 @@
   --nox-tone-text: color-mix(
     in srgb,
     var(--nox-tone-seed) 72%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-tone-focus-ring: var(--nox-tone-seed);
   --nox-tone-shadow: color-mix(
     in srgb,
     var(--nox-tone-seed) 24%,
-    var(--nox-mix-dark)
+    var(--nox-theme-shadow-base)
   );
 
   /* Shared framed-data surface slots. */

package/src/theme/contracts.ts

@@ -5,3 +5,5 @@ export type Tone =
   | 'success'
   | 'warning'
   | 'danger';
+
+export type ColorTheme = 'light' | 'dark';

package/src/theme/index.ts

@@ -1 +1,2 @@
 export * from './contracts';
+export * from './storage';

package/src/theme/storage.ts

@@ -0,0 +1 @@
+export const defaultThemeStorageKey = 'astronox:theme';