nebula-cms 0.1.0

package/src/client/components/fields/StringField.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { isReadOnly, isNullable } from '../../js/utils/schema-utils';
+  import FieldWrapper from './FieldWrapper.svelte';
+
+  /**
+   * Props for the StringField component, which renders a text input or textarea for a JSON Schema string property.
+   */
+  interface Props {
+    // Field name used as the input id and label fallback
+    name: string;
+    // JSON Schema node describing this field
+    schema: SchemaNode;
+    // Current field value
+    value: unknown;
+    // Whether this field is required
+    required?: boolean;
+    // Callback fired when the value changes
+    onchange: (value: string | null) => void;
+    // When true, visually hides FieldWrapper chrome (label/help) for inline array contexts
+    inline?: boolean;
+  }
+
+  let {
+    name,
+    schema,
+    value,
+    required = false,
+    onchange,
+    inline = false,
+  }: Props = $props();
+
+  // Current string value for the input
+  const inputValue = $derived(typeof value === 'string' ? value : '');
+
+  // Max length constraint from schema, if any
+  const maxLength = $derived(schema['maxLength'] as number | undefined);
+
+  // Pattern constraint from schema, if any
+  const pattern = $derived(schema['pattern'] as string | undefined);
+
+  // Whether field is read-only
+  const readOnly = $derived(isReadOnly(schema));
+
+  // Whether empty input should emit null (nullable anyOf-unwrapped types)
+  const nullable = $derived(isNullable(schema));
+
+  // Whether to render as a textarea (widget: "textarea" in schema meta)
+  const isTextarea = $derived(schema['widget'] === 'textarea');
+
+  // Constraint text for the help line
+  const constraintText = $derived(
+    maxLength != null ? `max ${maxLength}` : undefined,
+  );
+
+  /**
+   * Handles input change, emitting null for empty nullable fields.
+   * @param {Event} e - The input or change event from the text input or textarea
+   * @return {void}
+   */
+  function handleChange(e: Event): void {
+    const raw = (e.target as HTMLInputElement | HTMLTextAreaElement).value;
+    onchange(nullable && raw === '' ? null : raw);
+  }
+</script>
+
+<FieldWrapper {name} {schema} {required} {constraintText} {inline}>
+  {#if isTextarea}
+    <textarea
+      id={name}
+      class="field-input field-input--textarea"
+      maxlength={maxLength}
+      readonly={readOnly}
+      rows={3}
+      oninput={handleChange}>{inputValue}</textarea
+    >
+  {:else}
+    <input
+      type="text"
+      id={name}
+      class="field-input field-input--text"
+      value={inputValue}
+      maxlength={maxLength}
+      {pattern}
+      readonly={readOnly}
+      oninput={handleChange}
+    />
+  {/if}
+</FieldWrapper>
+
+<style>
+  .field-input--text {
+    width: 100%;
+  }
+
+  /* Auto-grows with content; rows="3" sets minimum height */
+  .field-input--textarea {
+    width: 100%;
+    field-sizing: content;
+    resize: none;
+    font-family: inherit;
+    line-height: 1.5;
+  }
+</style>

package/src/client/components/sidebar/AdminSidebar.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+  import {
+    type SidebarItem,
+    type SortMode,
+    readSortMode,
+    createComparator,
+  } from '../../js/utils/sort';
+  import DraftChip from '../DraftChip.svelte';
+  import AdminSidebarSort from './AdminSidebarSort.svelte';
+  import { navigate, adminPath } from '../../js/state/router.svelte';
+  import { saveDraft } from '../../js/drafts/storage';
+  import { refreshDrafts, disconnect } from '../../js/state/state.svelte';
+  import ThemeToggle from '../ThemeToggle.svelte';
+
+  export type { SidebarItem };
+
+  // Props for the AdminSidebar component, which renders a filterable, sortable navigation list of collection items with a search input and optional sort popover.
+  interface Props {
+    // Heading text displayed at the top of the sidebar
+    title: string;
+    // Items to display in the sidebar list
+    items: SidebarItem[];
+    // href of the currently active item, highlighted with aria-current
+    activeItem?: string;
+    // Collection name for localStorage sort persistence (constructs key: cms-sort-{storageKey})
+    storageKey?: string;
+    // Whether items are currently loading
+    loading?: boolean;
+    // Error message to display instead of items
+    error?: string;
+    // Whether this collection has date fields, enabling sort controls
+    hasDates?: boolean;
+    // Collection name — used for the add button's navigation target
+    collection?: string;
+    // Whether to show the add button
+    showAdd?: boolean;
+    // Whether to show the logout footer at the bottom
+    showFooter?: boolean;
+  }
+
+  let {
+    title,
+    items,
+    activeItem,
+    storageKey,
+    loading = false,
+    error,
+    hasDates = false,
+    collection,
+    showAdd = false,
+    showFooter = false,
+  }: Props = $props();
+
+  // Search query for filtering items by label
+  let searchQuery = $state('');
+
+  // Current sort mode, initialized from localStorage if storageKey is provided
+  let sortMode = $state<SortMode>(
+    storageKey ? readSortMode(storageKey) : 'alpha',
+  );
+
+  // Re-read sort mode when storageKey changes (switching collections)
+  $effect(() => {
+    if (storageKey) {
+      sortMode = readSortMode(storageKey);
+    } else {
+      sortMode = 'alpha';
+    }
+  });
+
+  /**
+   * Creates a new empty draft in IndexedDB and navigates to it.
+   * @return {Promise<void>}
+   */
+  async function handleAdd(): Promise<void> {
+    if (!collection) return;
+    const id = crypto.randomUUID();
+    await saveDraft({
+      id,
+      collection,
+      filename: null,
+      isNew: true,
+      formData: {},
+      body: '',
+      snapshot: null,
+      createdAt: new Date().toISOString(),
+    });
+    /*
+     * Only refresh drafts — the live file list hasn't changed, so a full
+     * collection reload (which re-reads all files from disk/GitHub) is wasteful.
+     */
+    await refreshDrafts(collection);
+    navigate(adminPath(collection, `draft-${id}`));
+  }
+
+  /**
+   * Handles the logout button click by disconnecting the backend.
+   * @return {void}
+   */
+  function onLogout(): void {
+    disconnect();
+  }
+
+  // Items filtered by search query and sorted by current mode
+  const displayedItems = $derived.by(() => {
+    const query = searchQuery.toLowerCase();
+    const filtered = query
+      ? items.filter((item) => item.label.toLowerCase().includes(query))
+      : items;
+    return [...filtered].sort(createComparator(sortMode));
+  });
+</script>
+
+<nav class="sidebar" aria-label={title}>
+  <div class="sidebar-header">
+    <div class="sidebar-heading-row">
+      <h2 class="sidebar-heading">{title}</h2>
+      {#if showAdd}
+        <button
+          class="icon-btn add-btn"
+          title="New {title.toLowerCase()}"
+          onclick={handleAdd}
+        >
+          <span class="icon">add</span>
+        </button>
+      {/if}
+    </div>
+
+    <div class="toolbar" class:toolbar--search-only={!hasDates}>
+      <input
+        type="text"
+        class="search-input"
+        placeholder="Filter..."
+        bind:value={searchQuery}
+      />
+
+      {#if hasDates}
+        <AdminSidebarSort bind:sortMode {storageKey} />
+      {/if}
+    </div>
+  </div>
+
+  <div class="sidebar-items">
+    {#if loading}
+      <p class="status">Loading...</p>
+    {:else if error}
+      <p class="status status--error">{error}</p>
+    {:else if displayedItems.length === 0}
+      <p class="status">No items found.</p>
+    {:else}
+      <ul class="sidebar-list">
+        {#each displayedItems as item}
+          <li>
+            <a
+              href={item.href}
+              class="sidebar-link"
+              aria-current={activeItem === item.href ? 'page' : undefined}
+            >
+              <span class="item-label-row">
+                <span class="item-label-text">{item.label}</span>
+                {#if item.isDraft}
+                  <DraftChip variant="draft" />
+                {/if}
+                {#if item.isOutdated}
+                  <DraftChip variant="outdated" />
+                {/if}
+              </span>
+              {#if item.subtitle}
+                <span class="item-subtitle">{item.subtitle}</span>
+              {/if}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if showFooter}
+    <div class="sidebar-footer">
+      <button class="logout-btn" onclick={onLogout}>
+        <span class="icon">logout</span>
+        <span>Log out</span>
+      </button>
+      <ThemeToggle />
+    </div>
+  {/if}
+</nav>
+
+<style>
+  .sidebar {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100dvh;
+    border-right: 1px solid var(--cms-border);
+    position: sticky;
+    top: 0;
+  }
+
+  .sidebar-header {
+    padding: 1rem;
+  }
+
+  .sidebar-heading {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cms-muted);
+    margin-bottom: 0;
+  }
+
+  .toolbar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .toolbar--search-only {
+    grid-template-columns: 1fr;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    background: var(--cms-bg);
+    border: 1px solid var(--cms-border);
+    border-radius: 0.25rem;
+    color: var(--cms-fg);
+    font-size: 0.875rem;
+
+    &::placeholder {
+      color: var(--cms-muted);
+    }
+  }
+
+  .sidebar-items {
+    overflow-y: auto;
+    padding: 0 0 1rem;
+  }
+
+  .status {
+    color: var(--cms-muted);
+    font-size: 0.875rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .status--error {
+    color: var(--light-red);
+  }
+
+  .sidebar-list {
+    display: grid;
+  }
+
+  .sidebar-link {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--cms-fg);
+    text-decoration: none;
+    font-size: 1rem;
+    /* Override global link box-shadow underline — sidebar items use background highlight instead */
+    box-shadow: none;
+
+    &:hover {
+      background: var(--cms-border);
+    }
+
+    /*
+     * Active highlight extends to sidebar edges with no border-radius.
+     * Text is always white — --plum lacks sufficient contrast with
+     * both --cms-fg values (light-on-pink and dark-on-pink both fail WCAG AA).
+     */
+    &[aria-current='page'] {
+      background: var(--plum);
+      color: #fff;
+
+      .item-subtitle {
+        color: #fff;
+        opacity: 0.75;
+      }
+    }
+  }
+
+  .item-subtitle {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--cms-muted);
+    margin-top: 0.25rem;
+  }
+
+  .sidebar-heading-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+
+  .add-btn .icon {
+    font-size: 1rem;
+  }
+
+  /* Flex is appropriate here because chips need inline flow with wrapping */
+  .item-label-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+
+  .item-label-text {
+    /* Prevent long titles from pushing chips to a new line unnecessarily */
+    min-width: 0;
+  }
+
+  .sidebar-footer {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    border-top: 1px solid var(--cms-border);
+    padding: 0.75rem 1rem;
+  }
+
+  /* Flex is appropriate here for inline icon + text alignment */
+  .logout-btn {
+    background: none;
+    border: none;
+    color: var(--cms-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    padding: 0.25rem 0;
+
+    &:hover {
+      color: var(--cms-fg);
+    }
+  }
+</style>

package/src/client/components/sidebar/AdminSidebarSort.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import {
+    type SortMode,
+    SORT_MODES,
+    SORT_ORDER,
+    writeSortMode,
+  } from '../../js/utils/sort';
+
+  /**
+   * Sort control for the admin sidebar: shows the active sort mode as an icon button and a popover with the remaining options. Extracted to keep AdminSidebar under the 350-line limit.
+   */
+  interface Props {
+    // Bindable sort mode — updated when the user selects a new option
+    sortMode: SortMode;
+    // Collection name for localStorage persistence (constructs key: cms-sort-{storageKey})
+    storageKey?: string;
+  }
+
+  let { sortMode = $bindable(), storageKey }: Props = $props();
+
+  // Sort options available in the popover (all modes except the active one)
+  const popoverOptions = $derived(
+    SORT_ORDER.filter((mode) => mode !== sortMode),
+  );
+
+  // Unique ID for the sort popover element
+  const popoverId = $derived(`sort-popover-${storageKey ?? 'default'}`);
+
+  // Bound reference to the popover element for imperative hidePopover() calls
+  let popoverEl = $state<HTMLDivElement | null>(null);
+
+  /**
+   * Applies the selected sort mode and persists it to localStorage.
+   * @param {SortMode} mode - The sort mode to apply
+   * @return {void}
+   */
+  function selectSort(mode: SortMode): void {
+    sortMode = mode;
+    if (storageKey) {
+      writeSortMode(storageKey, mode);
+    }
+  }
+</script>
+
+<button
+  class="icon-btn sort-btn"
+  title={SORT_MODES[sortMode].label}
+  commandfor={popoverId}
+  command="toggle-popover"
+>
+  <span class="icon">
+    {SORT_MODES[sortMode].icon}
+  </span>
+</button>
+
+<div id={popoverId} class="sort-popover" popover="hint" bind:this={popoverEl}>
+  {#each popoverOptions as mode}
+    <button
+      class="sort-option"
+      onclick={() => {
+        selectSort(mode);
+        popoverEl?.hidePopover();
+      }}
+    >
+      <span class="icon">
+        {SORT_MODES[mode].icon}
+      </span>
+      {SORT_MODES[mode].label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  /* Shared icon size for sort button and popover options */
+  .icon {
+    font-size: 1.25rem;
+  }
+
+  .sort-btn {
+    anchor-name: --sort-btn;
+  }
+
+  /* display: grid is in :popover-open to avoid overriding the UA's display: none on hidden popovers */
+  .sort-popover {
+    position-anchor: --sort-btn;
+    position: fixed;
+    inset: unset;
+    top: anchor(bottom);
+    right: anchor(right);
+    margin-top: 0.25rem;
+    background: var(--cms-border);
+    border: 1px solid var(--cms-muted);
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+    /* Prevent width from changing when popover content changes */
+    min-width: 10rem;
+
+    &:popover-open {
+      display: grid;
+      gap: 0.25rem;
+    }
+  }
+
+  .sort-option {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--cms-fg);
+    background: none;
+    border: none;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--cms-muted);
+      color: var(--cms-bg);
+    }
+  }
+</style>

package/src/client/css/a11y.css

@@ -0,0 +1,14 @@
+/*
+ * Accessibility utilities.
+ */
+
+/* Visually hidden but remains in the DOM for screen readers. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/client/css/btn.css

@@ -0,0 +1,113 @@
+/*
+ * Buttons
+ */
+
+/* Base button reset and shared properties */
+
+.btn {
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: var(--cms-fg);
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+/* Gradient primary action (publish, confirm, connect) */
+
+.btn--primary {
+  background: var(--button-bg, var(--plum));
+  color: var(--button-color, var(--cms-fg));
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+  &:hover:not(:disabled) {
+    background: var(--button-hover-bg, var(--light-plum));
+  }
+}
+
+/* Large primary variant for full-width or hero actions (BackendPicker) */
+
+.btn--primary-lg {
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  padding: 0.75rem 1.5rem;
+}
+
+/* Neutral cancel / dismiss */
+
+.btn--cancel {
+  background: var(--cms-border);
+  color: var(--cms-fg);
+
+  &:hover {
+    background: var(--cms-muted);
+  }
+}
+
+/* Solid danger (delete draft in dialogs) */
+
+.btn--danger {
+  background: var(--light-red);
+  color: var(--cms-bg);
+
+  &:hover {
+    background: var(--red);
+  }
+}
+
+/* Outlined danger (delete draft in toolbar) */
+
+.btn--danger-outline {
+  background: none;
+  border-color: var(--light-red);
+  color: var(--light-red);
+
+  &:hover {
+    background: var(--light-red);
+    color: var(--cms-bg);
+  }
+}
+
+/* Compact variant for tight layouts like the editor toolbar */
+
+.btn--compact {
+  padding: 0.25rem 0.75rem;
+}
+
+/*
+ * Icon-only button for small icon triggers (add, sort, theme, info).
+ * Standalone class — not combined with .btn.
+ */
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--cms-muted);
+  padding: 0;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+
+  &:hover {
+    color: var(--cms-fg);
+  }
+}
+
+/* Outlined teal (save draft in toolbar) */
+
+.btn--save-outline {
+  background: none;
+  border-color: var(--light-teal);
+  color: var(--light-teal);
+
+  &:hover:not(:disabled) {
+    background: var(--light-teal);
+    color: var(--cms-bg);
+  }
+}