nebula-cms 0.1.0

package/src/client/components/BackendPicker.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+  import {
+    backend,
+    content,
+    pickDirectory,
+    requestPermission,
+    connectGitHub,
+  } from '../js/state/state.svelte';
+
+  // Whether the stored FSA handle needs re-authorization
+  const needsReauth = $derived(
+    backend.type === 'fsa' && backend.permission === 'prompt',
+  );
+
+  // GitHub form state
+  let token = $state('');
+  let repo = $state('');
+  let connecting = $state(false);
+  let githubError = $state<string | null>(null);
+
+  /**
+   * Handles the GitHub connect form submission.
+   * @return {Promise<void>}
+   */
+  async function handleGitHubConnect(): Promise<void> {
+    if (!token || !repo) return;
+    connecting = true;
+    githubError = null;
+    try {
+      await connectGitHub(token, repo);
+    } catch (err) {
+      githubError = err instanceof Error ? err.message : String(err);
+    } finally {
+      connecting = false;
+    }
+  }
+</script>
+
+{#if needsReauth}
+  <div class="picker">
+    <p>This folder requires re-authorization to continue.</p>
+    <button class="btn btn--primary btn--primary-lg" onclick={requestPermission}
+      >Re-authorize folder</button
+    >
+  </div>
+{:else}
+  <div class="picker">
+    <h2 class="picker-title">Connect to your project</h2>
+
+    <div class="picker-options">
+      <div class="picker-option">
+        <h3>Local Folder</h3>
+        <p>Select your project folder on this device.</p>
+        <button class="btn btn--primary btn--primary-lg" onclick={pickDirectory}
+          >Choose project folder</button
+        >
+      </div>
+
+      <div class="picker-option">
+        <h3>GitHub Repository</h3>
+        <p>Connect using a Personal Access Token.</p>
+        <form
+          onsubmit={(e) => {
+            e.preventDefault();
+            handleGitHubConnect();
+          }}
+        >
+          <label>
+            <span class="field-label">
+              Personal Access Token
+              <button
+                class="icon-btn info-btn"
+                type="button"
+                title="Required permissions"
+                interestfor="pat-info"
+                commandfor="pat-info"
+                command="toggle-popover"
+              >
+                <span class="icon">info</span>
+              </button>
+            </span>
+            <input type="password" bind:value={token} placeholder="ghp_..." />
+          </label>
+          <div id="pat-info" class="pat-tooltip" popover="hint" role="tooltip">
+            <p class="pat-tooltip-heading">
+              Create a <a
+                href="https://github.com/settings/personal-access-tokens"
+                target="_blank"
+                rel="noopener noreferrer">fine-grained PAT</a
+              > with:
+            </p>
+            <dl class="pat-permissions">
+              <div class="pat-permission">
+                <dt>Contents</dt>
+                <dd>Read and write</dd>
+              </div>
+              <div class="pat-permission">
+                <dt>Metadata</dt>
+                <dd>
+                  Read-only <span class="pat-note">(included by default)</span>
+                </dd>
+              </div>
+            </dl>
+          </div>
+          <label>
+            <span class="field-label">Repository</span>
+            <input type="text" bind:value={repo} placeholder="owner/repo" />
+          </label>
+          <button
+            class="btn btn--primary btn--primary-lg"
+            type="submit"
+            disabled={!token || !repo || connecting}
+          >
+            {connecting ? 'Connecting...' : 'Connect'}
+          </button>
+        </form>
+        {#if githubError}
+          <p class="error">{githubError}</p>
+        {/if}
+      </div>
+    </div>
+
+    {#if content.error}
+      <p class="error">{content.error}</p>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .picker {
+    display: grid;
+    place-items: center;
+    gap: 1rem;
+    padding: var(--spacing);
+    min-height: 50vh;
+    text-align: center;
+  }
+
+  .picker-title {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .picker-options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    max-width: 40rem;
+    width: 100%;
+  }
+
+  .picker-option {
+    display: grid;
+    /* auto rows for content, last row (button/form) aligns to bottom */
+    grid-template-rows: auto auto 1fr;
+    align-items: start;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    border: 1px solid var(--cms-border);
+    border-radius: 0.5rem;
+    text-align: left;
+
+    h3 {
+      font-size: 1.25rem;
+      margin: 0;
+    }
+
+    p {
+      font-size: 0.875rem;
+      color: var(--cms-muted);
+      margin: 0;
+    }
+
+    /* Align the last child (button or form) to the bottom of the card */
+    > :last-child {
+      align-self: end;
+    }
+  }
+
+  form {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  label {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  /* Flex to align label text and info icon inline */
+  .field-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--cms-muted);
+  }
+
+  /* Anchor positioning and icon size for the PAT info tooltip trigger */
+  .info-btn {
+    anchor-name: --pat-info-btn;
+    interest-delay: 0s;
+    border-radius: 0;
+
+    .icon {
+      font-size: 1rem;
+    }
+  }
+
+  .pat-tooltip {
+    position-anchor: --pat-info-btn;
+    position: fixed;
+    inset: unset;
+    top: anchor(bottom);
+    right: anchor(right);
+    margin-top: 0.25rem;
+    background: var(--cms-bg);
+    border: 1px solid var(--cms-border);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    max-width: 16rem;
+    text-align: left;
+    font-size: 0.75rem;
+
+    /* Invisible bridge so hover interest isn't broken by the gap */
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      right: 0;
+      height: 0.25rem;
+    }
+  }
+
+  /* Higher specificity to override .picker-option p { color: var(--cms-muted) } */
+  .pat-tooltip .pat-tooltip-heading {
+    color: var(--cms-fg);
+    margin: 0 0 0.25rem;
+    font-size: 0.75rem;
+
+    a {
+      color: var(--cms-fg);
+      text-decoration: underline;
+    }
+  }
+
+  .pat-permissions {
+    margin: 0;
+  }
+
+  .pat-permission {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+
+    dt {
+      color: var(--cms-fg);
+      font-weight: 600;
+    }
+
+    dd {
+      margin: 0;
+      color: var(--cms-fg);
+    }
+  }
+
+  .pat-note {
+    color: var(--cms-muted);
+  }
+
+  input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    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);
+    }
+  }
+
+  .error {
+    color: var(--light-red);
+    font-size: 0.875rem;
+  }
+</style>

package/src/client/components/DraftChip.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * A small colored badge for indicating draft or outdated status in the sidebar.
+   */
+  interface Props {
+    // The chip variant — "draft" is yellow, "outdated" is red
+    variant: 'draft' | 'outdated';
+  }
+
+  let { variant }: Props = $props();
+</script>
+
+<span
+  class="chip"
+  class:chip--draft={variant === 'draft'}
+  class:chip--outdated={variant === 'outdated'}
+>
+  {variant === 'draft' ? 'draft' : 'outdated'}
+</span>
+
+<style>
+  /*
+   * Visually sized closer to the subtitle than the main label text —
+   * exempt from font size scale and .25rem padding-block rule per CLAUDE.md.
+   */
+  .chip {
+    font-size: 0.6rem;
+    font-weight: normal;
+    text-transform: lowercase;
+    padding-inline: 0.25rem;
+    padding-block: 0.15rem;
+    border-radius: 5rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .chip--draft {
+    background: var(--gold);
+    color: var(--cms-bg);
+  }
+
+  .chip--outdated {
+    background: var(--light-red);
+    color: var(--cms-fg);
+  }
+</style>

package/src/client/components/MetadataForm.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { SchemaNode } from '../js/utils/schema-utils';
+  import {
+    getFieldsForTab,
+    getProperties,
+    getRequiredFields,
+  } from '../js/utils/schema-utils';
+  import { editor, updateFormField } from '../js/editor/editor.svelte';
+  import SchemaField from './fields/SchemaField.svelte';
+
+  /**
+   * Props for the MetadataForm component, which renders the set of schema fields assigned to a given editor tab (or all fields when no tab is specified).
+   */
+  interface Props {
+    // The JSON Schema for the collection
+    schema: SchemaNode;
+    // Tab name to filter by, or null for Metadata (all fields)
+    tab?: string | null;
+  }
+
+  let { schema, tab = null }: Props = $props();
+
+  // List of property names to render for this tab
+  const fieldNames = $derived(getFieldsForTab(schema, tab));
+
+  // Schema properties map
+  const properties = $derived(getProperties(schema) ?? {});
+
+  // Required field names
+  const requiredFields = $derived(getRequiredFields(schema));
+</script>
+
+<div class="metadata-form">
+  {#each fieldNames as fieldName}
+    {@const fieldSchema = properties[fieldName]}
+    {#if fieldSchema}
+      <SchemaField
+        name={fieldName}
+        schema={fieldSchema}
+        value={editor.data[fieldName]}
+        required={requiredFields.includes(fieldName)}
+        onchange={(v) => updateFormField([fieldName], v)}
+      />
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .metadata-form {
+    display: grid;
+    gap: 1.25rem;
+    padding: 1.5rem;
+    max-width: 80ch;
+    margin: 0 auto;
+  }
+</style>

package/src/client/components/ThemeToggle.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  /* Tri-state theme toggle that cycles through auto / light / dark preferences. */
+  import { cycleTheme, theme } from '../js/state/theme.svelte';
+</script>
+
+<button
+  class="icon-btn theme-toggle"
+  aria-label="Theme: {theme.label}"
+  onclick={cycleTheme}
+>
+  <span class="icon">{theme.icon}</span>
+</button>
+
+<style>
+  .theme-toggle .icon {
+    font-size: 1.25rem;
+  }
+</style>

package/src/client/components/dialogs/DeleteDraftDialog.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  /**
+   * Confirmation dialog for deleting a draft, using native <dialog> with modal backdrop.
+   */
+  interface Props {
+    // Called when the user confirms deletion
+    onConfirm: () => void;
+    // Called when the user cancels
+    onCancel: () => void;
+  }
+
+  let { onConfirm, onCancel }: Props = $props();
+
+  // Dialog element ref
+  let dialogEl = $state<HTMLDialogElement | null>(null);
+
+  // Open the dialog on mount
+  $effect(() => {
+    dialogEl?.showModal();
+  });
+</script>
+
+<dialog class="dialog confirm-dialog" bind:this={dialogEl} onclose={onCancel}>
+  <h2 class="dialog__title">Delete Draft?</h2>
+  <p class="dialog__message">This cannot be undone.</p>
+  <div class="dialog__actions">
+    <button class="btn btn--cancel" type="button" onclick={onCancel}
+      >Cancel</button
+    >
+    <button class="btn btn--danger" type="button" onclick={onConfirm}
+      >Delete</button
+    >
+  </div>
+</dialog>
+
+<style>
+  .confirm-dialog {
+    min-width: 18rem;
+  }
+
+  /* Tighter title spacing for the short confirmation dialog */
+  .dialog__title {
+    margin-bottom: 0.5rem;
+  }
+
+  .dialog__message {
+    font-size: 0.875rem;
+    color: var(--cms-muted);
+    margin-bottom: 1.25rem;
+  }
+</style>

package/src/client/components/dialogs/FilenameDialog.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { slugify } from '../../js/utils/slug';
+
+  /**
+   * Props for the FilenameDialog, a native <dialog> that prompts the user to set a filename before publishing.
+   */
+  interface Props {
+    // The title from formData, used to pre-populate the slug suggestion
+    title: string;
+    // Existing filenames (both live and draft) to validate uniqueness against
+    existingFilenames: string[];
+    // Called with the chosen filename (including .md extension) when confirmed
+    onConfirm: (filename: string) => void;
+    // Called when the dialog is cancelled
+    onCancel: () => void;
+  }
+
+  let { title, existingFilenames, onConfirm, onCancel }: Props = $props();
+
+  // The dialog element ref for imperative showModal/close
+  let dialogEl = $state<HTMLDialogElement | null>(null);
+
+  // The slug input value, initialized from slugified title
+  let slug = $state(slugify(title));
+
+  // Validation error message
+  const error = $derived.by(() => {
+    if (!slug.trim()) return 'Filename cannot be empty';
+    const full = `${slug}.md`;
+    if (existingFilenames.includes(full)) {
+      return 'A file with this name already exists';
+    }
+    return null;
+  });
+
+  // Open the dialog on mount
+  $effect(() => {
+    dialogEl?.showModal();
+  });
+
+  /**
+   * Handles the confirm action — calls onConfirm with the full filename.
+   * @return {void}
+   */
+  function handleConfirm(): void {
+    if (error) return;
+    onConfirm(`${slug}.md`);
+  }
+
+  /**
+   * Handles the cancel action — closes the dialog and calls onCancel.
+   * @return {void}
+   */
+  function handleCancel(): void {
+    dialogEl?.close();
+    onCancel();
+  }
+</script>
+
+<dialog
+  class="dialog filename-dialog"
+  bind:this={dialogEl}
+  onclose={handleCancel}
+>
+  <h2 class="dialog__title">Set Filename</h2>
+  <div class="input-row">
+    <input
+      class="slug-input"
+      type="text"
+      bind:value={slug}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' && !error) handleConfirm();
+      }}
+    />
+    <span class="extension">.md</span>
+  </div>
+  {#if error}
+    <p class="error">{error}</p>
+  {/if}
+  <div class="dialog__actions">
+    <button class="btn btn--cancel" type="button" onclick={handleCancel}
+      >Cancel</button
+    >
+    <button
+      class="btn btn--primary"
+      type="button"
+      disabled={!!error}
+      onclick={handleConfirm}>Confirm</button
+    >
+  </div>
+</dialog>
+
+<style>
+  .filename-dialog {
+    min-width: 20rem;
+  }
+
+  .input-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .slug-input {
+    width: 100%;
+    padding: 0.5rem;
+    background: var(--cms-bg);
+    border: 1px solid var(--cms-border);
+    border-radius: 0.25rem;
+    color: var(--cms-fg);
+    font-size: 1rem;
+  }
+
+  .extension {
+    color: var(--cms-muted);
+    font-size: 1rem;
+  }
+
+  .error {
+    color: var(--light-red);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+  }
+
+  .dialog__actions {
+    margin-top: 1.25rem;
+  }
+</style>