@alkemdotdev/alkemist-components 1.0.0-beta.1

package/src/figure.css

@@ -0,0 +1,127 @@
+.alk-figure,
+.alk-figure *,
+.alk-figure *::before,
+.alk-figure *::after {
+  box-sizing: border-box;
+}
+/* Shared figure presentation; each medium keeps its own rendering lifecycle. */
+.alk-figure {
+  --alk-figure-gutter: clamp(0.85rem, 2vw, 1.15rem);
+  margin: 0;
+  min-width: 0;
+  border: 1px solid var(--alk-rule, #ccc);
+  border-radius: 6px;
+  background: var(--alk-paper, #fff);
+  color: var(--alk-ink, #111);
+}
+.alk-figure-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: var(--alk-figure-gutter);
+}
+.alk-figure-heading > div {
+  min-width: 0;
+}
+.alk-figure .alk-figure-label {
+  margin: 0 0 0.35rem;
+  color: var(--alk-muted, #5e5e5e);
+  font: 0.7rem/1.5 var(--alk-mono, ui-monospace, monospace);
+}
+.alk-figure .alk-figure-title {
+  margin: 0;
+  font: 500 1.08rem/1.35 var(--alk-sans, system-ui, sans-serif);
+  letter-spacing: -0.02em;
+  overflow-wrap: anywhere;
+}
+.alk-figure .alk-figure-description {
+  margin: 0.45rem 0 0;
+  max-width: 68ch;
+  color: var(--alk-muted, #5e5e5e);
+  font: 0.84rem/1.55 var(--alk-sans, system-ui, sans-serif);
+  overflow-wrap: anywhere;
+}
+.alk-figure-format {
+  flex: 0 0 auto;
+  color: var(--alk-muted, #5e5e5e);
+  font: 0.7rem/1.5 var(--alk-mono, ui-monospace, monospace);
+}
+.alk-figure-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem 1rem;
+  border-top: 1px solid var(--alk-rule, #ccc);
+  padding: 0.7rem var(--alk-figure-gutter);
+  font: 0.76rem/1.4 var(--alk-mono, ui-monospace, monospace);
+}
+.alk-figure-controls button {
+  min-height: 40px;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--alk-rule, #ccc);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--alk-ink, #111);
+  font: inherit;
+  cursor: pointer;
+}
+.alk-figure-controls button:hover:enabled {
+  background: var(--alk-field, #f2f2f2);
+  border-color: var(--alk-muted, #5e5e5e);
+}
+.alk-figure-controls button:disabled,
+.alk-figure-controls label:has(:disabled) {
+  opacity: 0.5;
+  cursor: default;
+}
+.alk-figure-controls button[hidden] {
+  display: none;
+}
+.alk-figure-controls :focus-visible,
+.alk-figure-footer a:focus-visible,
+.alk-chart-table summary:focus-visible {
+  outline: 2px solid var(--alk-ink-cobalt, #1982f2);
+  outline-offset: 3px;
+}
+.alk-figure-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.35rem 1rem;
+  padding: 0.5rem var(--alk-figure-gutter) 0.9rem;
+  color: var(--alk-muted, #5e5e5e);
+  font: 0.72rem/1.5 var(--alk-mono, ui-monospace, monospace);
+}
+.alk-figure-status {
+  margin: 0;
+  flex: 1 1 14rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.alk-figure-footer a {
+  flex: 0 0 auto;
+  padding-block: 0.3rem;
+}
+[data-state='error'] > .alk-figure .alk-figure-status {
+  color: var(--alk-ink, #111);
+  border-left: 2px solid var(--alk-ink-vermilion, #e25312);
+  padding-left: 0.65rem;
+}
+.alk-figure .alk-figure-caption {
+  margin: 0;
+  padding: 0 var(--alk-figure-gutter) 1rem;
+  color: var(--alk-muted, #5e5e5e);
+  font: 0.78rem/1.6 var(--alk-sans, system-ui, sans-serif);
+  overflow-wrap: anywhere;
+}
+@media print {
+  .alk-figure {
+    break-inside: avoid;
+  }
+  .alk-figure-controls,
+  .alk-figure-status {
+    display: none;
+  }
+}

package/src/header.css

@@ -0,0 +1,252 @@
+.alk-header {
+  max-width: 1320px;
+  margin: auto;
+  padding: 0.95rem 3rem;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: nowrap;
+  position: relative;
+  z-index: 30;
+  border-bottom: 1px solid var(--alk-rule);
+}
+.alk-brand {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 700 2rem var(--alk-sans);
+  letter-spacing: -0.06em;
+  text-decoration: none;
+  color: var(--alk-ink);
+}
+.alk-brand-detail {
+  font: 0.65rem var(--alk-mono);
+  letter-spacing: 0.02em;
+  color: var(--alk-muted);
+}
+.alk-desktop-nav {
+  display: flex;
+  flex-shrink: 0;
+  gap: 1.4rem;
+  margin-left: auto;
+  align-items: center;
+}
+.alk-desktop-nav a,
+.alk-more summary {
+  font-size: 0.85rem;
+  text-decoration: none;
+  color: var(--alk-muted);
+  padding: 0.35rem 0;
+}
+.alk-desktop-nav > a[aria-current],
+.alk-more summary[data-current] {
+  color: var(--alk-ink);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.4em;
+}
+.alk-header-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+}
+.alk-header [data-header-panel] {
+  position: relative;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.alk-header summary {
+  cursor: pointer;
+  list-style: none;
+  white-space: nowrap;
+}
+.alk-header summary::-webkit-details-marker {
+  display: none;
+}
+.alk-more summary svg {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 0.25rem;
+  vertical-align: -0.1em;
+  transform: rotate(90deg);
+}
+.alk-more[open] summary svg {
+  transform: rotate(270deg);
+}
+.alk-icon-button {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 7px;
+  color: var(--alk-muted);
+}
+.alk-icon-button svg,
+.alk-theme-choice svg {
+  display: block;
+  width: 21px;
+  height: 21px;
+}
+.alk-icon-button:hover,
+[open] > .alk-icon-button {
+  background: var(--alk-field);
+  color: var(--alk-ink);
+}
+.alk-header-panel {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 0.65rem);
+  right: 0;
+  min-width: 11rem;
+  margin: 0;
+  padding: 0.4rem;
+  border: 1px solid var(--alk-rule);
+  border-radius: 9px;
+  background: var(--alk-paper);
+  box-shadow: 0 0.7rem 1.5rem #0002;
+}
+.alk-more-links a {
+  display: block;
+  padding: 0.7rem;
+  border-radius: 5px;
+}
+.alk-more-links a:hover,
+.alk-more-links a[aria-current] {
+  background: var(--alk-field);
+  color: var(--alk-ink);
+}
+.alk-theme-panel {
+  top: calc(100% + 1rem);
+  width: 13rem;
+}
+.alk-theme-panel fieldset {
+  min-width: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+.alk-theme-panel legend {
+  padding: 0.45rem 0.65rem;
+  color: var(--alk-muted);
+  font: 0.75rem var(--alk-mono);
+}
+.alk-theme-choice {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-height: 44px;
+  padding: 0.6rem;
+  border-radius: 5px;
+  font-size: 0.85rem;
+  color: var(--alk-muted);
+  cursor: pointer;
+}
+.alk-theme-choice input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.alk-theme-choice:hover,
+.alk-theme-choice:has(input:checked) {
+  color: var(--alk-ink);
+  background: var(--alk-field);
+}
+.alk-theme-choice:has(input:focus-visible) {
+  outline: 2px solid var(--alk-ink);
+  outline-offset: -2px;
+}
+.alk-choice-check {
+  margin-left: auto;
+  visibility: hidden;
+}
+input:checked ~ .alk-choice-check {
+  visibility: visible;
+}
+[data-theme-icon] {
+  display: none;
+}
+:root:not([data-alk-theme]) [data-theme-icon='system'],
+:root[data-alk-theme='system'] [data-theme-icon='system'],
+:root[data-alk-theme='light'] [data-theme-icon='light'],
+:root[data-alk-theme='dark'] [data-theme-icon='dark'] {
+  display: block;
+}
+.alk-mobile-menu {
+  display: none;
+}
+@media (max-width: 900px) {
+  .alk-brand-detail {
+    display: none;
+  }
+}
+@media (max-width: 650px) {
+  .alk-header {
+    padding: 0.75rem 1.25rem;
+    gap: 0.5rem;
+  }
+  .alk-desktop-nav {
+    display: none;
+  }
+  .alk-header-actions {
+    margin-left: auto;
+  }
+  .alk-header .alk-mobile-menu {
+    display: block;
+    position: static;
+  }
+  .alk-mobile-links {
+    top: calc(100% + 0.5rem);
+    left: 1.25rem;
+    right: 1.25rem;
+    padding: 0.5rem;
+  }
+  .alk-mobile-links a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 48px;
+    padding: 0.65rem 0.85rem;
+    border-radius: 5px;
+    text-decoration: none;
+    color: var(--alk-ink);
+    font-size: 1rem;
+  }
+  .alk-mobile-links a svg {
+    width: 15px;
+    height: 15px;
+    color: var(--alk-muted);
+  }
+  .alk-mobile-links a:hover,
+  .alk-mobile-links a[aria-current] {
+    background: var(--alk-field);
+  }
+  .alk-mobile-links a[aria-current] span {
+    text-decoration: underline;
+    text-underline-offset: 0.25em;
+  }
+  .alk-mobile-secondary {
+    border-top: 1px solid var(--alk-rule);
+    margin-top: 0.4rem;
+    padding-top: 0.4rem;
+  }
+  .alk-mobile-secondary a {
+    color: var(--alk-muted);
+    font-size: 0.9rem;
+  }
+  .alk-menu-line {
+    transform-origin: center;
+    transition: transform 140ms ease;
+  }
+  [open] .alk-menu-line-top {
+    transform: rotate(45deg) translateY(4px);
+  }
+  [open] .alk-menu-line-bottom {
+    transform: rotate(-45deg) translateY(-4px);
+  }
+}

package/src/header.ts

@@ -0,0 +1,90 @@
+import {
+  getTheme,
+  initTheme,
+  setTheme,
+  type AlkTheme,
+} from '@alkemdotdev/alkemist-theme';
+
+const header = document.querySelector<HTMLElement>('.alk-header');
+if (header) {
+  const panels = [
+    ...header.querySelectorAll<HTMLDetailsElement>('[data-header-panel]'),
+  ];
+  const mobile = header.querySelector<HTMLDetailsElement>('.alk-mobile-menu');
+  const theme = header.querySelector<HTMLDetailsElement>('.alk-theme-menu');
+  const trigger = theme?.querySelector<HTMLElement>('summary');
+  const radios = [
+    ...header.querySelectorAll<HTMLInputElement>('input[name="alk-theme"]'),
+  ];
+  const labels = { system: 'System', light: 'Whiteboard', dark: 'Blackboard' };
+  const close = (panel: HTMLDetailsElement, restoreFocus = false) => {
+    panel.open = false;
+    if (restoreFocus) panel.querySelector('summary')?.focus();
+  };
+  const syncTheme = () => {
+    const selected = getTheme();
+    radios.forEach((input) => {
+      input.checked = input.value === selected;
+    });
+    trigger?.setAttribute('title', `Color theme: ${labels[selected]}`);
+    const label = trigger?.querySelector('[data-theme-label]');
+    if (label) label.textContent = `Color theme: ${labels[selected]}`;
+  };
+  window.addEventListener('alk:theme-change', syncTheme);
+  initTheme();
+  syncTheme();
+  if (theme) theme.hidden = false;
+  radios.forEach((input) => {
+    input.addEventListener('change', () => setTheme(input.value as AlkTheme));
+    input.addEventListener('click', (event) => {
+      // Arrow keys synthesize clicks on radios; keep that keyboard group open.
+      if (theme && event.detail > 0) close(theme, true);
+    });
+  });
+  panels.forEach((panel) => {
+    panel.addEventListener('toggle', () => {
+      if (panel.open)
+        panels.forEach((other) => {
+          if (other !== panel) close(other);
+        });
+    });
+    panel
+      .querySelectorAll('a')
+      .forEach((link) => link.addEventListener('click', () => close(panel)));
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    panels.forEach((panel) => {
+      if (panel.open) close(panel, true);
+    });
+  });
+  document.addEventListener('click', (event) => {
+    if (!(event.target instanceof Node)) return;
+    const target = event.target;
+    panels.forEach((panel) => {
+      if (panel.open && !panel.contains(target)) close(panel);
+    });
+  });
+  document.addEventListener('focusin', (event) => {
+    if (!(event.target instanceof Node)) return;
+    const target = event.target;
+    panels.forEach((panel) => {
+      if (panel.open && !panel.contains(target)) close(panel);
+    });
+  });
+  matchMedia('(max-width: 650px)').addEventListener('change', (event) => {
+    const active = document.activeElement;
+    if (!event.matches && mobile?.open) {
+      const hadFocus = active && mobile.contains(active);
+      close(mobile);
+      if (hadFocus)
+        header.querySelector<HTMLAnchorElement>('.alk-desktop-nav a')?.focus();
+    }
+    const more = header.querySelector<HTMLDetailsElement>('.alk-more');
+    if (event.matches && more?.open) {
+      const hadFocus = active && more.contains(active);
+      close(more);
+      if (hadFocus) mobile?.querySelector('summary')?.focus();
+    }
+  });
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export type {
+  AlkChartFieldType,
+  AlkChartInk,
+  AlkChartProps,
+  AlkChartRow,
+  AlkChartTheme,
+  AlkChartType,
+} from './charts';
+export type { AlkCodeOptions } from './code-theme';
+export type { AlkLayoutProps, AlkNavLink } from './AlkLayout.astro';
+export type { AlkMathProps } from './AlkMath.astro';
+export type { AlkCodeProps } from './AlkCode.astro';
+export type { AlkModelProps } from './AlkModel.astro';
+export type { AlkShaderProps } from './AlkShader.astro';

package/src/model.css

@@ -0,0 +1,108 @@
+alk-model.alk-model {
+  display: block;
+  min-width: 0;
+  margin: 1.5rem 0;
+}
+.alk-model-viewport {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  height: clamp(300px, 48vw, 570px);
+  overflow: hidden;
+  background: var(--alk-paper, #fff);
+}
+.alk-model canvas,
+.alk-model-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.alk-model canvas {
+  visibility: hidden;
+  position: absolute;
+  inset: 0;
+}
+.alk-model-poster {
+  object-fit: contain;
+  opacity: 0.8;
+}
+.alk-model[data-state='ready'] canvas {
+  visibility: visible;
+}
+.alk-model[data-state='ready'] .alk-model-poster {
+  visibility: hidden;
+}
+.alk-model-axis {
+  position: absolute;
+  right: var(--alk-figure-gutter);
+  bottom: 1rem;
+  display: flex;
+  gap: 0.6rem;
+  font: 0.7rem/1 var(--alk-mono, ui-monospace, monospace);
+  pointer-events: none;
+}
+.alk-model-axis span:nth-child(1) {
+  color: var(--alk-ink-vermilion, #e25312);
+}
+.alk-model-axis span:nth-child(2) {
+  color: var(--alk-ink-cobalt, #1982f2);
+}
+.alk-model-axis span:nth-child(3) {
+  color: var(--alk-ink-violet, #a464e3);
+}
+.alk-model-hint {
+  position: absolute;
+  left: var(--alk-figure-gutter);
+  bottom: 1rem;
+  margin: 0;
+  font: 0.7rem/1.4 var(--alk-mono, ui-monospace, monospace);
+  color: var(--alk-muted, #5e5e5e);
+  pointer-events: none;
+}
+.alk-model-presets,
+.alk-model-switches {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+}
+.alk-model-toolbar {
+  justify-content: space-between;
+}
+.alk-model-switches {
+  gap: 1rem;
+}
+.alk-model-switches label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 40px;
+}
+.alk-model-switches input {
+  accent-color: var(--alk-ink-cobalt, #1982f2);
+  width: 1rem;
+  height: 1rem;
+}
+.alk-model[data-state='error'] .alk-model-hint,
+.alk-model:not([data-state='ready']) .alk-model-axis {
+  display: none;
+}
+@media (max-width: 480px) {
+  .alk-model-hint {
+    font-size: 0.6rem;
+  }
+}
+@media print {
+  .alk-model canvas,
+  .alk-model-hint,
+  .alk-model-axis {
+    display: none;
+  }
+  .alk-model .alk-model-poster {
+    visibility: visible !important;
+    opacity: 1;
+  }
+  .alk-model-viewport {
+    height: 300px;
+  }
+}