@rigel-cms/rigel 0.0.0-stage → 0.1.0-beta.1

package/src/editor/lib/VisualEditor.svelte

@@ -0,0 +1,494 @@
+<script lang="ts">
+  import { mount, unmount, onDestroy, tick, type Snippet } from "svelte";
+  import BlockEditor from "./BlockEditor.svelte";
+  import editorStyles from "../styles.css?inline";
+  import type { ArticleBody } from "../../article-body";
+  import { patchPreview } from "../../preview";
+  import { anchorValue } from "../../preview";
+  import SchemaPanel from "./SchemaPanel.svelte";
+  import SidebarIcon from "./SidebarIcon.svelte";
+  import Icon from "./Icon.svelte";
+  import { fieldForPath, replaceAt, type SelectedField } from "./schema-edit";
+  import type { ContentDocument, DocumentDef, Schema } from "../../schema/types";
+
+  let {
+    docId, schema, docType, values, previewValues, documents = {}, previewPath, livePath = previewPath, body = "", bodyInline = false, onbody = () => {}, properties, creating, devMode, reloadToken = 0, onchange, oneditdocument = () => {},
+  }: {
+    docId: string;
+    schema?: Schema;
+    docType?: DocumentDef;
+    values: Record<string, unknown>;
+    previewValues?: Record<string, unknown>;
+    documents?: Record<string, Record<string, unknown>>;
+    previewPath: string | null;
+    livePath?: string | null;
+    body?: "" | import("../../article-body").ArticleBody;
+    properties?: Snippet<[SelectedField | null, number, boolean, () => void]>;
+    bodyInline?: boolean;
+    onbody?: (body: ArticleBody) => void;
+    creating: boolean;
+    devMode: boolean;
+    reloadToken?: number;
+    onchange: (next: Record<string, unknown>) => void;
+    oneditdocument?: (id: string) => void;
+  } = $props();
+
+  let frame: HTMLIFrameElement | undefined = $state();
+  let stage: HTMLDivElement;
+  let loaded = $state(false);
+  let bodyAvailable = $state(false);
+  const inlineBodyEnabled = $derived(bodyInline && loaded && bodyAvailable);
+  let bodyEditor: ReturnType<typeof mount> | undefined;
+  let bodyThemeObserver: MutationObserver | undefined;
+  let editingBody: HTMLElement | null = null;
+  let bodyContents: ChildNode[] = [];
+  let bodyAttributes: [string, string | null][] = [];
+  let bodyScope: HTMLElement | null = null;
+  let error = $state("");
+  let mode = $state<"browse" | "edit">("edit");
+  let panelOpen = $state(true);
+  let editorWidth = $state(0);
+  let requestedWidth = $state(340);
+  let resizing = $state(false);
+  let resizePointer: { element: HTMLElement; id: number } | null = null;
+  const panelMax = $derived(Math.max(280, Math.min(640, editorWidth - 328)));
+  const panelWidth = $derived(Math.max(280, Math.min(panelMax, requestedWidth)));
+  let selected = $state<SelectedField | null>(null);
+  let pending = $state<string[]>([]);
+  let focusToken = $state(0);
+  let highlighted: HTMLElement | null = null;
+  let hovered: HTMLElement | null = null;
+  let structureSignature = "";
+  let inline = $state<{ path: string; value: string; original: string; left: number; top: number; width: number; height: number; fontSize: string } | null>(null);
+  let inlineInput: HTMLInputElement | undefined = $state();
+  const documentList = $derived(Object.entries(documents).map(([id, data]) => ({
+    id,
+    type: id.slice(0, id.indexOf(":")),
+    slug: id.slice(id.indexOf(":") + 1),
+    data,
+  })) as ContentDocument[]);
+
+  function docElement(): Document | null {
+    try {
+      return frame?.contentDocument ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  function clearHighlight() {
+    highlighted?.style.removeProperty("outline");
+    highlighted?.style.removeProperty("outline-offset");
+    highlighted = null;
+  }
+
+  function clearHover() {
+    if (hovered && hovered !== highlighted) hovered.style.removeProperty("outline");
+    hovered = null;
+  }
+
+  function anchorSelector(path: string) {
+    const escaped = CSS.escape(path);
+    return `[data-rigel-text="${escaped}"],[data-rigel-richtext="${escaped}"],[data-rigel-image="${escaped}"],[data-rigel-alt="${escaped}"],[data-rigel-href="${escaped}"]`;
+  }
+
+  function applySelection(scroll = false) {
+    const doc = docElement();
+    if (!doc || !selected) return;
+    clearHighlight();
+    let element: HTMLElement | null = null;
+    if (selected.path) {
+      element = [...doc.querySelectorAll<HTMLElement>(anchorSelector(selected.path))].find(element => (element.getAttribute("data-rigel-doc") ?? docId) === selected?.docId) ?? null;
+    }
+    if (!element && selected.sectionKey) {
+      element = doc.querySelector<HTMLElement>(`[data-rigel-section][data-rigel-key="${selected.sectionKey}"][data-rigel-doc="${selected.docId}"]`);
+    }
+    if (element && element !== editingBody) {
+      element.style.setProperty("outline", "2px solid var(--accent, #005aa3)", "important");
+      element.style.setProperty("outline-offset", "3px", "important");
+      highlighted = element;
+      if (scroll) element.scrollIntoView({ block: "center" });
+    }
+  }
+
+  function applyStructure() {
+    const doc = docElement();
+    if (!doc) return;
+    const sections = Array.isArray(values.sections) ? (values.sections as Record<string, unknown>[]) : [];
+    const prepared = [...doc.querySelectorAll('[data-rigel-each="sections"]')].some(element => element.getAttribute("data-rigel-doc") === docId);
+    if (prepared) { pending = []; return; }
+    const elements = new Map<string, HTMLElement>();
+    for (const element of doc.querySelectorAll<HTMLElement>(`[data-rigel-section][data-rigel-doc="${docId}"]`)) {
+      const key = element.getAttribute("data-rigel-key");
+      if (key) elements.set(key, element);
+    }
+    for (const [key, element] of elements) {
+      if (!sections.some((section) => section._key === key)) {
+        element.remove();
+        elements.delete(key);
+      }
+    }
+    const parent = elements.values().next().value?.parentElement;
+    if (!parent) {
+      pending = sections.map((section) => String(section._key)).filter((key) => !elements.has(key));
+      return;
+    }
+    const onlySections = [...parent.children].every((child) => child.hasAttribute("data-rigel-section"));
+    if (!onlySections) {
+      pending = [];
+      return;
+    }
+    for (const section of sections) {
+      const element = elements.get(String(section._key));
+      if (element) parent.appendChild(element);
+    }
+    pending = sections.map((section) => String(section._key)).filter((key) => !elements.has(key));
+  }
+
+  function patch() {
+    const doc = docElement();
+    if (!doc) return;
+    patchPreview(doc, previewValues ?? values, body, { documents, primary: docId, editingBody });
+    const signature = (Array.isArray(values.sections) ? (values.sections as Record<string, unknown>[]) : [])
+      .map((section) => `${section._key}:${section._type}`)
+      .join(",");
+    if (signature !== structureSignature) {
+      structureSignature = signature;
+      applyStructure();
+    }
+    applySelection();
+  }
+
+  function fieldPathFrom(element: HTMLElement): { path: string; doc: string } | null {
+    for (const attr of ["data-rigel-text", "data-rigel-richtext", "data-rigel-image", "data-rigel-alt", "data-rigel-href"]) {
+      const value = element.getAttribute(attr);
+      if (value) return { path: value, doc: element.getAttribute("data-rigel-doc") ?? docId };
+    }
+    return null;
+  }
+
+  function selectFromElement(element: HTMLElement) {
+    const field = fieldPathFrom(element);
+    const section = element.closest<HTMLElement>("[data-rigel-section]");
+    const sectionKey = section?.getAttribute("data-rigel-key") ?? undefined;
+    if (field && field.doc !== docId && section?.getAttribute("data-rigel-doc") === docId) selected = { docId, path: "", sectionKey };
+    else if (field) selected = { docId: field.doc, path: field.path, sectionKey };
+    else if (sectionKey) selected = { docId: docId, path: "", sectionKey };
+    panelOpen = true;
+    focusToken++;
+    applySelection();
+  }
+
+  function eventElement(target: EventTarget | null): Element | null {
+    return target && (target as Element).nodeType === 1 ? (target as Element) : null;
+  }
+
+  function stopBodyEdit() {
+    if (!bodyEditor) return;
+    void unmount(bodyEditor); bodyEditor = undefined;
+    bodyThemeObserver?.disconnect(); bodyThemeObserver = undefined;
+    editingBody?.replaceChildren(...bodyContents);
+    for (const [name, value] of bodyAttributes) { if (value === null) editingBody?.removeAttribute(name); else editingBody?.setAttribute(name, value); }
+    bodyAttributes = []; bodyScope?.remove(); bodyScope = null;
+    editingBody = null; bodyContents = [];
+    patch();
+  }
+  async function startBodyEdit(element: HTMLElement, event?: MouseEvent) {
+    if (!body) return;
+    if (bodyEditor) { element.focus(); return; }
+    const doc = element.ownerDocument;
+    const blockIndex = event ? [...element.children].findIndex(child => child.contains(event.target as Node)) : 0;
+    const caret = event && doc.caretPositionFromPoint?.(event.clientX, event.clientY);
+    let offset = 0;
+    if (caret && element.children[blockIndex]?.contains(caret.offsetNode)) {
+      const range = doc.createRange(); range.selectNodeContents(element.children[blockIndex]); range.setEnd(caret.offsetNode, caret.offset); offset = range.toString().length;
+    }
+    let editorStyle = doc.querySelector<HTMLStyleElement>('style[data-rigel-editor-styles]');
+    if (!editorStyle) { editorStyle = doc.createElement("style"); editorStyle.dataset.rigelEditorStyles = ""; doc.head.append(editorStyle); }
+    if (editorStyle.textContent !== editorStyles) editorStyle.textContent = editorStyles;
+    clearHover(); clearHighlight();
+    editingBody = element; bodyContents = [...element.childNodes];
+    bodyAttributes = ["class", "style", "role", "aria-label", "aria-multiline", "aria-keyshortcuts", "contenteditable", "data-lexical-editor", "spellcheck"].map(name => [name, element.getAttribute(name)]);
+    const pre = doc.createElement("pre"), code = doc.createElement("code");
+    pre.append(code); pre.style.cssText = "position:absolute;visibility:hidden"; element.append(pre);
+    for (const [sample, properties] of [[pre, ["background-color", "padding", "margin", "border", "border-radius"]], [code, ["color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing"]]] as const) {
+      const style = doc.defaultView!.getComputedStyle(sample);
+      for (const property of properties) element.style.setProperty(`--rigel-code-${property}`, style.getPropertyValue(property));
+    }
+    pre.remove();
+    const scope = doc.createElement("div");
+    const syncTheme = () => { scope.dataset.theme = document.documentElement.dataset.theme; scope.dataset.contrast = document.documentElement.dataset.contrast; };
+    syncTheme();
+    const host = doc.createElement("div"); host.className = "rigel rigel-inline";
+    scope.append(host); doc.body.append(scope); bodyScope = scope;
+    bodyEditor = mount(BlockEditor, { target: host, props: { editableRoot: element, get value() { return body as ArticleBody; }, oninput: (next: ArticleBody) => onbody(next) } });
+    bodyThemeObserver = new MutationObserver(syncTheme);
+    bodyThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-contrast"] });
+    await tick();
+    const editable = element; editable.focus();
+    const block = editable?.children[Math.max(0, blockIndex)];
+    if (block) {
+      const range = doc.createRange(); range.selectNodeContents(block); range.collapse(true);
+      const walker = doc.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (offset <= (node.textContent?.length ?? 0)) { range.setStart(node, offset); range.collapse(true); break; }
+        offset -= node.textContent?.length ?? 0;
+      }
+      const selection = doc.defaultView?.getSelection(); selection?.removeAllRanges(); selection?.addRange(range);
+    }
+  }
+  function focusBody() {
+    const target = docElement()?.querySelector<HTMLElement>('[data-rigel-richtext="$body"]');
+    if (inlineBodyEnabled && target) { target.scrollIntoView({ block: "center" }); void startBodyEdit(target); }
+  }
+  $effect(() => { if (!inlineBodyEnabled || mode !== "edit") stopBodyEdit(); });
+  onDestroy(stopBodyEdit);
+
+  function onClick(event: MouseEvent) {
+    const target = eventElement(event.target);
+    if (target && (editingBody?.contains(target) || bodyScope?.contains(target))) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (mode !== "edit") return;
+    if (!target) return;
+    const articleBody = target.closest<HTMLElement>('[data-rigel-richtext="$body"]');
+    if (inlineBodyEnabled && articleBody) { void startBodyEdit(articleBody, event); return; }
+    const element = target.closest<HTMLElement>("[data-rigel-text],[data-rigel-richtext],[data-rigel-image],[data-rigel-alt],[data-rigel-href],[data-rigel-section]");
+    if (element) selectFromElement(element);
+  }
+
+  function onDoubleClick(event: MouseEvent) {
+    if (mode !== "edit" || !schema || !docType) return;
+    const target = eventElement(event.target);
+    if (!target) return;
+    const element = target.closest<HTMLElement>("[data-rigel-text]");
+    if (!element) return;
+    const field = fieldPathFrom(element);
+    if (!field || field.doc !== docId) return;
+    const def = fieldForPath(schema, docType, values, field.path);
+    if (!def || def.type !== "string") return;
+    event.preventDefault();
+    const doc = docElement();
+    const style = doc?.defaultView?.getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    const frameRect = frame?.getBoundingClientRect();
+    const stageRect = stage.getBoundingClientRect();
+    if (!frameRect) return;
+    const value = String(anchorValue(values, field.path).value ?? "");
+    inline = {
+      path: field.path,
+      value,
+      original: value,
+      left: frameRect.left - stageRect.left + rect.left,
+      top: frameRect.top - stageRect.top + rect.top,
+      width: Math.max(140, rect.width),
+      height: Math.max(28, rect.height),
+      fontSize: style?.fontSize ?? "16px",
+    };
+    queueMicrotask(() => inlineInput?.focus());
+  }
+
+  function closeInline(revert = false) {
+    if (!inline) return;
+    if (revert && inline.value !== inline.original) onchange(replaceAt(values, inline.path, inline.original));
+    const path = inline.path;
+    inline = null;
+    const doc = docElement();
+    const element = doc?.querySelector<HTMLElement>(`[data-rigel-text="${path}"][data-rigel-doc="${docId}"]`);
+    element?.setAttribute("tabindex", "-1");
+    queueMicrotask(() => element?.focus());
+  }
+
+  function onOver(event: MouseEvent) {
+    if (mode !== "edit") return;
+    const target = eventElement(event.target);
+    if (target && (editingBody?.contains(target) || bodyScope?.contains(target))) return;
+    if (!target) return;
+    const element = target.closest<HTMLElement>("[data-rigel-text],[data-rigel-richtext],[data-rigel-image],[data-rigel-alt],[data-rigel-href],[data-rigel-section]");
+    if (!element || element === highlighted) return;
+    if (hovered && hovered !== element) clearHover();
+    hovered = element;
+    element.style.setProperty("outline", "1px dashed var(--accent, #005aa3)", "important");
+  }
+
+  function onOut(event: MouseEvent) {
+    const target = eventElement(event.target);
+    if (!target) return;
+    const element = target.closest<HTMLElement>("[data-rigel-text],[data-rigel-richtext],[data-rigel-image],[data-rigel-alt],[data-rigel-href],[data-rigel-section]");
+    if (element && element === hovered) clearHover();
+  }
+
+  function onLoad() {
+    stopBodyEdit(); bodyAvailable = false;
+    loaded = false;
+    error = "";
+    clearHighlight();
+    hovered = null;
+    structureSignature = "";
+    const doc = docElement();
+    if (!doc) {
+      error = "The page could not be loaded in the preview.";
+      return;
+    }
+    try {
+      doc.addEventListener("click", onClick, true);
+      doc.addEventListener("contextmenu", event => { if (!devMode) event.preventDefault(); }, true);
+      doc.addEventListener("dblclick", onDoubleClick, true);
+      doc.addEventListener("mouseover", onOver, true);
+      doc.addEventListener("mouseout", onOut, true);
+      doc.addEventListener("submit", (event) => event.preventDefault(), true);
+      doc.defaultView?.addEventListener("scroll", () => closeInline(), { passive: true });
+      if (previewPath && new URL(doc.URL).pathname.replace(/\/$/, "") !== previewPath.replace(/\/$/, "")) throw new Error("The prepared page could not be loaded.");
+      if (!doc.querySelector(schema ? `[data-rigel-doc="${docId}"]` : "[data-rigel-text],[data-rigel-richtext],[data-rigel-image]")) throw new Error("This page isn’t set up for live editing. Changes won’t appear in this preview.");
+      loaded = true;
+      bodyAvailable = !schema && !!body && !!doc.querySelector('[data-rigel-richtext="$body"]');
+      patch();
+    } catch (cause) {
+      error = cause instanceof Error ? cause.message : "Preview unavailable";
+    }
+  }
+
+  function setMode(next: "browse" | "edit") {
+    mode = next;
+    panelOpen = next === "edit";
+    if (next === "browse") {
+      clearHighlight();
+      clearHover();
+      selected = null;
+      closeInline();
+    }
+  }
+
+  function endResize() {
+    const pointer = resizePointer;
+    resizePointer = null;
+    resizing = false;
+    if (pointer?.element.hasPointerCapture(pointer.id)) pointer.element.releasePointerCapture(pointer.id);
+  }
+
+  function startResize(event: PointerEvent) {
+    if (event.button !== 0 || resizePointer) return;
+    event.preventDefault();
+    closeInline();
+    const element = event.currentTarget as HTMLElement;
+    element.focus();
+    element.setPointerCapture(event.pointerId);
+    resizePointer = { element, id: event.pointerId };
+    resizing = true;
+  }
+
+  function moveResize(event: PointerEvent) {
+    if (resizePointer?.id !== event.pointerId) return;
+    const editor = resizePointer.element.parentElement!;
+    requestedWidth = Math.max(280, Math.min(panelMax, editor.getBoundingClientRect().right - event.clientX - 5));
+  }
+
+  function keyResize(event: KeyboardEvent) {
+    const width = { ArrowLeft: panelWidth + 20, ArrowRight: panelWidth - 20, Home: 280, End: panelMax }[event.key];
+    if (width === undefined) return;
+    event.preventDefault();
+    closeInline();
+    requestedWidth = Math.max(280, Math.min(panelMax, width));
+  }
+
+  $effect(() => {
+    if (!panelOpen) endResize();
+  });
+
+  $effect(() => {
+    void JSON.stringify(values);
+    void JSON.stringify(previewValues);
+    void body;
+    void loaded;
+    patch();
+  });
+
+  let lastDocId = "";
+  $effect(() => {
+    if (docId === lastDocId) return;
+    lastDocId = docId;
+    requestedWidth = 340;
+    endResize();
+    inline = null;
+    selected = null;
+    structureSignature = "";
+    pending = [];
+  });
+
+  function updateInline(value: string) {
+    if (!inline) return;
+    inline = { ...inline, value };
+    onchange(replaceAt(values, inline.path, value));
+  }
+</script>
+
+<svelte:window onkeydown={(event) => {
+  if (event.key === "Escape" && inline) { event.stopPropagation(); closeInline(true); }
+}} />
+
+<div class="visual-editor" bind:clientWidth={editorWidth} class:with-panel={panelOpen} class:resizing-properties={resizing} style={`--properties-width: ${panelWidth}px`}>
+  <div class="visual-canvas">
+    <div class="visual-toolbar">
+      <div class="mode-toggle" role="group" aria-label="Preview mode">
+        <button type="button" aria-pressed={mode === "browse"} onclick={() => setMode("browse")}>Browse</button>
+        <button type="button" aria-pressed={mode === "edit"} onclick={() => setMode("edit")}>Edit</button>
+      </div>
+      <span class="visual-hint">{mode === "edit" ? "Click a region to edit it. Scripts, forms and links stay disabled." : "Scripts, forms and links are disabled in this preview."}</span>
+      <div class="visual-actions">
+        {#if livePath}<a class="icon-btn visual-live" href={livePath} target="_blank" rel="noopener noreferrer" aria-label="View live page" title="View live page"><Icon name="external" size={18} /></a>{/if}
+        <button type="button" class="icon-btn" aria-pressed={panelOpen} aria-label="Toggle properties panel" title="Toggle properties panel" onclick={() => (panelOpen = !panelOpen)}>
+          <SidebarIcon name="square-half" />
+        </button>
+      </div>
+    </div>
+    <div class="canvas-stage" bind:this={stage} class:grabbing={mode === "edit"} data-ready={loaded}>
+      {#if error}
+        <p class="visual-error" role="status">{error}</p>
+      {/if}
+      {#if !previewPath}
+        <p class="visual-error" role="status">{creating ? "New page — Save writes the file. The route renders once the site has it." : "No preview URL is mapped to this document. Use the properties panel to edit."}</p>
+      {:else}
+        {#key `${previewPath}:${reloadToken}`}
+          <iframe bind:this={frame} title="Website page editor" sandbox="allow-same-origin" referrerpolicy="no-referrer" src={previewPath} onload={onLoad}></iframe>
+        {/key}
+      {/if}
+      {#if inline}
+        <input
+          class="inline-editor"
+          bind:this={inlineInput}
+          type="text"
+          aria-label="Edit text"
+          style={`left:${inline.left}px;top:${inline.top}px;width:${inline.width}px;height:${inline.height}px;font-size:${inline.fontSize}`}
+          value={inline.value}
+          oninput={(event) => updateInline(event.currentTarget.value)}
+          onkeydown={(event) => {
+            if (event.key === "Enter") { event.preventDefault(); closeInline(); }
+          }}
+          onblur={() => closeInline()}
+        />
+      {/if}
+    </div>
+  </div>
+  {#if panelOpen}
+    <div class="properties-divider" role="separator" tabindex="0" aria-label="Properties panel width" aria-orientation="vertical" aria-valuemin="280" aria-valuemax={panelMax} aria-valuenow={panelWidth} aria-valuetext={`${Math.round(panelWidth)} pixels`} onpointerdown={startResize} onpointermove={moveResize} onpointerup={endResize} onpointercancel={endResize} onlostpointercapture={endResize} onkeydown={keyResize}></div>
+  {/if}
+  {#if panelOpen && properties}
+    {@render properties(selected, focusToken, inlineBodyEnabled, focusBody)}
+  {:else if panelOpen && schema && docType}
+    <SchemaPanel
+      {schema}
+      {docType}
+      {values}
+      {docId}
+      {selected}
+      {creating}
+      {pending}
+      {focusToken}
+      {devMode}
+      documents={documentList}
+      onchange={onchange}
+      {oneditdocument}
+      onselect={async (next) => { selected = next; focusToken++; await tick(); if (selected?.docId === next?.docId && selected?.sectionKey === next?.sectionKey) applySelection(true); }}
+    />
+  {/if}
+</div>

package/src/editor/lib/calendar.ts

@@ -0,0 +1,55 @@
+const display = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
+export const months = Array.from({ length: 12 }, (_, month) => new Intl.DateTimeFormat("en-US", { month: "long", timeZone: "UTC" }).format(new Date(Date.UTC(2000, month, 1))));
+
+export function isoDate(date: Date): string {
+  return `${String(date.getUTCFullYear()).padStart(4, "0")}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
+}
+
+export function parseDate(value: string): Date | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || Number(value.slice(0, 4)) < 1) return null;
+  const date = new Date(0);
+  date.setUTCHours(12, 0, 0, 0);
+  date.setUTCFullYear(Number(value.slice(0, 4)), Number(value.slice(5, 7)) - 1, Number(value.slice(8, 10)));
+  return isoDate(date) === value ? date : null;
+}
+
+export function formatDate(value: string): string {
+  const date = parseDate(value);
+  return date ? display.format(date) : value;
+}
+
+export function todayDate(date = new Date()): string {
+  return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+export function moveMonth(value: string, delta: number): string {
+  const date = parseDate(value);
+  if (!date) return value;
+  const day = date.getUTCDate();
+  date.setUTCDate(1);
+  date.setUTCMonth(date.getUTCMonth() + delta);
+  if (date.getUTCFullYear() < 1 || date.getUTCFullYear() > 9999) return value;
+  const last = new Date(date);
+  last.setUTCMonth(last.getUTCMonth() + 1, 0);
+  date.setUTCDate(Math.min(day, last.getUTCDate()));
+  return isoDate(date);
+}
+
+export function moveDay(value: string, delta: number): string {
+  const date = parseDate(value);
+  if (!date) return value;
+  date.setUTCDate(date.getUTCDate() + delta);
+  return date.getUTCFullYear() < 1 || date.getUTCFullYear() > 9999 ? value : isoDate(date);
+}
+
+export function monthDays(value: string): ({ value: string; day: number } | null)[] {
+  const date = parseDate(value);
+  if (!date) return [];
+  date.setUTCDate(1);
+  const offset = date.getUTCDay(), month = date.getUTCMonth();
+  return Array.from({ length: 42 }, (_, index) => {
+    const cell = new Date(date);
+    cell.setUTCDate(index - offset + 1);
+    return cell.getUTCMonth() === month ? { value: isoDate(cell), day: cell.getUTCDate() } : null;
+  });
+}

package/src/editor/lib/github-auth.ts

@@ -0,0 +1,117 @@
+export interface GitHubAccess {
+  user: { login: string; avatar_url: string; html_url: string };
+  status: "ready" | "installation-required" | "read-only";
+  installUrl: string;
+  installation: { id: number; account: string; html_url: string } | null;
+  repository: { id: number; full_name: string; default_branch: string; permissions: { push: boolean } } | null;
+}
+
+export function startGitHubLogin(authOrigin: string): Promise<{ accessToken: string; expiresAt: number }> {
+  return new Promise((resolve, reject) => {
+    let origin: URL;
+    try {
+      origin = new URL(authOrigin);
+      if (origin.username || origin.password || origin.search || origin.hash || origin.pathname !== "/" || (origin.protocol !== "https:" && !(origin.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(origin.hostname)))) throw new Error();
+    } catch { reject(new Error("Invalid authentication gateway origin.")); return; }
+    const nonce = Array.from(crypto.getRandomValues(new Uint8Array(32)), byte => byte.toString(16).padStart(2, "0")).join("");
+    const url = new URL("/authorize", origin);
+    url.searchParams.set("origin", window.location.origin);
+    url.searchParams.set("nonce", nonce);
+    let popup: Window | null = null;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    const finish = (error?: string, result?: { accessToken: string; expiresAt: number }) => {
+      window.removeEventListener("message", receive);
+      clearInterval(timer);
+      clearTimeout(timeout);
+      try { popup?.close(); } catch {}
+      if (result) resolve(result);
+      else reject(new Error(error));
+    };
+    const receive = (event: MessageEvent) => {
+      const data = event.data;
+      if (!popup || event.source !== popup || event.origin !== origin.origin || !data || data.type !== "rigel:auth" || data.provider !== "github" || data.nonce !== nonce) return;
+      if (data.error) {
+        finish(data.error === "Authorization denied"
+          ? "GitHub authorization was denied. Sign in again and approve access to continue."
+          : data.error === "Token exchange failed"
+            ? "The auth gateway could not exchange GitHub's authorization code for a token. Repository access has not been checked."
+            : "GitHub login failed. Please try signing in again.");
+        return;
+      }
+      if (typeof data.access_token !== "string" || !/^ghu_[a-zA-Z0-9_]{1,4092}$/.test(data.access_token) || !Number.isInteger(data.expires_in) || data.expires_in <= 0 || data.expires_in > 86400) { finish("GitHub returned invalid or expired credentials. Please sign in again."); return; }
+      finish(undefined, { accessToken: data.access_token, expiresAt: Date.now() + data.expires_in * 1000 });
+    };
+    window.addEventListener("message", receive);
+    try { popup = window.open(url.href, "rigel-github-" + nonce, "popup,width=600,height=720"); }
+    catch { finish("Unable to open GitHub login. Allow popups and try again."); return; }
+    if (!popup) { finish("GitHub login popup was blocked. Allow popups and try again."); return; }
+    timer = setInterval(() => { if (popup?.closed) finish("GitHub login was cancelled. Please try again."); }, 250);
+    timeout = setTimeout(() => finish("GitHub login timed out. Please try again."), 120000);
+  });
+}
+
+export async function checkGitHubAccess(token: string, repo: string, appSlug: string): Promise<GitHubAccess> {
+  if (typeof token !== "string" || !/^ghu_[a-zA-Z0-9_]{1,4092}$/.test(token)) throw new Error("GitHub session is invalid. Please sign in again.");
+  if (typeof repo !== "string" || !/^[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\/[a-zA-Z0-9_.-]+$/.test(repo) || [".", ".."].includes(repo.split("/")[1]) || typeof appSlug !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(appSlug)) throw new Error("Invalid GitHub repository or app configuration.");
+  const get = async (endpoint: string) => {
+    let response: Response;
+    try {
+      response = await fetch("https://api.github.com" + endpoint, {
+        method: "GET", redirect: "error", credentials: "omit", cache: "no-store", signal: AbortSignal.timeout(15000),
+        headers: { Authorization: `Bearer ${token}`, Accept: "application/vnd.github+json", "X-GitHub-Api-Version": "2022-11-28" },
+      });
+    } catch { throw new Error("Unable to reach GitHub. Check your connection and try again."); }
+    if (!response.ok) {
+      if (response.status === 401) throw new Error("GitHub session expired or was revoked. Please sign in again.");
+      if (response.status === 429 || (response.status === 403 && (response.headers.get("x-ratelimit-remaining") === "0" || response.headers.has("retry-after")))) throw new Error("GitHub rate limit reached. Wait a few minutes and try again.");
+      if (response.status === 403) throw new Error("GitHub access denied. Check app permissions and organization approval, then sign in again.");
+      if (response.status === 404) throw new Error("GitHub repository or installation is unavailable. Check the repository name and app installation, then try again.");
+      throw new Error("GitHub could not verify access. Please try again later.");
+    }
+    try { return await response.json(); }
+    catch { throw new Error("GitHub returned an invalid access response. Please try again."); }
+  };
+  const list = async <T>(endpoint: string, key: string): Promise<T[]> => {
+    const entries: T[] = [];
+    for (let page = 1; page <= 100; page++) {
+      const data = await get(`${endpoint}?per_page=100&page=${page}`);
+      if (!data || !Array.isArray(data[key])) throw new Error("GitHub returned an invalid access response. Please try again.");
+      entries.push(...data[key]);
+      if (data[key].length < 100 && !(typeof data.total_count === "number" && entries.length < data.total_count)) return entries;
+      if (!data[key].length) break;
+    }
+    throw new Error("GitHub access listing is incomplete. Please try again or narrow the app's repository selection.");
+  };
+  const rawUser = await get("/user");
+  if (!rawUser || ![rawUser.login, rawUser.avatar_url, rawUser.html_url].every(value => typeof value === "string" && value)) throw new Error("GitHub returned an invalid user. Please sign in again.");
+  const user = { login: rawUser.login, avatar_url: rawUser.avatar_url, html_url: rawUser.html_url };
+  const installUrl = `https://github.com/apps/${appSlug}/installations/new`;
+  const result: GitHubAccess = { user, status: "installation-required", installUrl, installation: null, repository: null };
+  type Installation = { id: number; app_slug: string; account?: { login?: string }; html_url?: string; permissions?: { contents?: string }; suspended_at?: string | null };
+  const installations = await list<Installation>("/user/installations", "installations");
+  for (const installation of installations) {
+    if (!installation || installation.app_slug !== appSlug || !Number.isSafeInteger(installation.id) || installation.id <= 0 || typeof installation.account?.login !== "string") continue;
+    let configureUrl = installUrl;
+    try {
+      const url = new URL(installation.html_url ?? "");
+      if (url.origin === "https://github.com" && !url.username && !url.password && !url.search && !url.hash && new RegExp(`^/(?:settings|organizations/[a-zA-Z0-9-]+/settings)/installations/${installation.id}$`).test(url.pathname)) configureUrl = url.href;
+    } catch {}
+    const verifiedInstallation = { id: installation.id, account: installation.account.login, html_url: configureUrl };
+    if (installation.account.login.toLowerCase() === repo.split("/")[0].toLowerCase()) {
+      result.installUrl = configureUrl;
+      result.installation = verifiedInstallation;
+    }
+    const repositories = await list<NonNullable<GitHubAccess["repository"]>>(`/user/installations/${installation.id}/repositories`, "repositories");
+    const repository = repositories.find(repository => repository && typeof repository.full_name === "string" && repository.full_name.toLowerCase() === repo.toLowerCase());
+    if (!repository) continue;
+    if (!Number.isSafeInteger(repository.id) || repository.id <= 0 || typeof repository.default_branch !== "string" || !repository.default_branch) throw new Error("GitHub returned an invalid repository. Please try again.");
+    const push = repository.permissions?.push === true;
+    return {
+      user, status: push && installation.permissions?.contents === "write" && !installation.suspended_at ? "ready" : "read-only", installUrl: configureUrl,
+      installation: verifiedInstallation,
+      repository: { id: repository.id, full_name: repository.full_name, default_branch: repository.default_branch, permissions: { push } },
+    };
+  }
+  return result;
+}