Add Rails backend: accounts via magic link, server documents, sharing

The app becomes a Rails 8 application; the Vue frontend moves to
app/frontend and is served through vite_rails.

- Without an account documents stay in the browser (IndexedDB). Sign-in
  is by magic link or the 6-digit code from the same mail; afterwards
  local documents can be uploaded into the account.
- Server documents (/d/<id>) with versioned saves and a single-editor
  lock per browser tab; others see them read-only and follow by polling.
- Sharing via link (works without an account) and via e-mail invitation,
  roles viewer/editor; the owner manages links and people.
- Store gains a read-only mode that blocks all content changes.
- Solid Queue, Cache and Cable share the one PostgreSQL database.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/frontend/composables/useFormulaAutocomplete.ts

@@ -0,0 +1,49 @@
+/**
+ * Function-name autocomplete for a formula editor (see FormulaBar.vue and
+ * TableGrid.vue's in-cell editor, which both wire this in the same way).
+ *
+ * Unlike useTheme.ts/useToasts.ts (module-level singletons), this factory
+ * creates fresh, independent state per call -- each formula editor gets its
+ * own dropdown/selection, since two editors are never showing suggestions
+ * for the same formula at once.
+ */
+import { ref } from 'vue';
+import { currentIdentifierAtCaret } from '../engine';
+import { useDocument } from '../store/document';
+import type { FnSuggestion } from '../store/types';
+
+export function useFormulaAutocomplete() {
+  const store = useDocument();
+  const suggestions = ref<FnSuggestion[]>([]);
+  const activeIndex = ref(0);
+
+  /** Recompute the dropdown for the current buffer + caret -- call this
+   *  after every edit to the text (an `input` handler). */
+  function update(text: string, caret: number) {
+    const hit = currentIdentifierAtCaret(text, caret);
+    suggestions.value = hit && hit.text ? store.functionSuggestions(hit.text) : [];
+    activeIndex.value = 0;
+  }
+  function close() {
+    suggestions.value = [];
+  }
+  /** Move the highlighted suggestion by `delta` (wraps). No-op while closed. */
+  function move(delta: number) {
+    const n = suggestions.value.length;
+    if (!n) return;
+    activeIndex.value = (activeIndex.value + delta + n) % n;
+  }
+  /** The replacement the caller should apply via its own `replace(start, end,
+   *  value)` (the same one point-mode already uses) to accept the currently
+   *  highlighted suggestion -- `null` when no dropdown is open, so the
+   *  caller falls through to its normal Tab/Enter handling. Appends "(" ,
+   *  ready for arguments, same as Excel/Sheets' own autocomplete. */
+  function accept(text: string, caret: number): { start: number; end: number; value: string } | null {
+    if (!suggestions.value.length) return null;
+    const hit = currentIdentifierAtCaret(text, caret);
+    if (!hit) return null;
+    return { start: hit.start, end: caret, value: suggestions.value[activeIndex.value].name + '(' };
+  }
+
+  return { suggestions, activeIndex, update, close, move, accept };
+}

app/frontend/composables/useKeyboardPointMode.ts

@@ -0,0 +1,94 @@
+/**
+ * Keyboard-driven counterpart to the mouse "point mode" already in
+ * store.pointClick/pointDrag (click/drag a grid cell while editing a
+ * formula to insert its reference): arrow keys pick a cell/range the same
+ * way, without leaving the keyboard.
+ *
+ * Only takes over the arrow keys when the caret sits right after a token
+ * that expects a new operand -- the leading '=', an operator, '(', or the
+ * ';' argument separator -- exactly like Excel/Numbers decide the same
+ * thing. Anywhere else (mid-identifier, mid-number, ...) arrow keys keep
+ * moving the text caret as normal; editing an existing formula by hand
+ * still works.
+ *
+ * First press of a fresh chain steps one cell from `home` (the cell being
+ * edited) in the pressed direction. Further plain-arrow presses move that
+ * single cell on; holding Shift instead grows a range from the chain's
+ * first cell (its `anchor`) to wherever the focus has moved to, the same
+ * "collapse on a plain move, grow from the anchor on a extending one"
+ * convention TableGrid's own grid-cell navigate() already uses.
+ */
+import { useDocument } from '../store/document';
+
+const ARROW_DELTA: Record<string, [number, number]> = {
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+};
+
+const OPERAND_BOUNDARY = new Set(['=', '+', '-', '*', '/', '^', '&', '<', '>', '(', ';']);
+
+export function useKeyboardPointMode() {
+  const store = useDocument();
+  let anchor: { tableId: string; col: number; row: number } | null = null;
+  let focus: { col: number; row: number } | null = null;
+
+  /** Ends the current chain (if any) -- call whenever the editor's text is
+   *  typed into directly, the caret is repositioned by a mouse click, or a
+   *  new edit session begins, exactly the same triggers that already reset
+   *  the mouse point-mode's own "replace on next click" window
+   *  (store.noteFormulaTyped()). */
+  function reset() {
+    anchor = null;
+    focus = null;
+  }
+
+  function canStartAt(text: string, caret: number): boolean {
+    if (!text.startsWith('=')) return false;
+    const prev = text[caret - 1];
+    return prev !== undefined && OPERAND_BOUNDARY.has(prev);
+  }
+
+  /** Handles one ArrowUp/Down/Left/Right press (optionally Shift-extended).
+   *  Returns true if it took over the key (caller must preventDefault +
+   *  stopPropagation); false if normal caret movement should happen
+   *  instead. `home` is the cell being edited. */
+  function handleArrowKey(
+    e: KeyboardEvent,
+    tableId: string,
+    home: { col: number; row: number },
+    text: string,
+    caret: number,
+  ): boolean {
+    const delta = ARROW_DELTA[e.key];
+    if (!delta) return false;
+    const t = store.tableById(tableId);
+    if (!t) return false;
+    const clampC = (c: number) => Math.max(0, Math.min(t.cols - 1, c));
+    const clampR = (r: number) => Math.max(0, Math.min(t.rows - 1, r));
+
+    if (!anchor || anchor.tableId !== tableId) {
+      if (!canStartAt(text, caret)) return false;
+      const target = { col: clampC(home.col + delta[0]), row: clampR(home.row + delta[1]) };
+      anchor = { tableId, ...target };
+      focus = target;
+      store.pointClick(tableId, target.col, target.row);
+      return true;
+    }
+
+    const base = focus ?? anchor;
+    const next = { col: clampC(base.col + delta[0]), row: clampR(base.row + delta[1]) };
+    if (e.shiftKey) {
+      focus = next;
+      store.pointDrag(tableId, anchor.col, anchor.row, focus.col, focus.row);
+    } else {
+      anchor = { tableId, ...next };
+      focus = next;
+      store.pointClick(tableId, next.col, next.row);
+    }
+    return true;
+  }
+
+  return { handleArrowKey, reset };
+}

app/frontend/composables/useTheme.ts

@@ -0,0 +1,37 @@
+import { ref, watchEffect } from 'vue';
+
+type Mode = 'system' | 'light' | 'dark';
+
+const KEY = 'numolus:theme';
+/** Key used before the rename to numolus -- still read as a fallback. */
+const LEGACY_KEY = 'numbers-study:theme';
+const stored =
+  ((localStorage.getItem(KEY) ?? localStorage.getItem(LEGACY_KEY)) as Mode | null) ??
+  'system';
+const mode = ref<Mode>(stored);
+
+watchEffect(() => {
+  const root = document.documentElement;
+  if (mode.value === 'system') root.removeAttribute('data-theme');
+  else root.setAttribute('data-theme', mode.value);
+  try {
+    localStorage.setItem(KEY, mode.value);
+  } catch {
+    /* ignore */
+  }
+});
+
+/** True when the effective theme is dark (used to recolour Chart.js). */
+function isDarkNow(): boolean {
+  if (mode.value === 'dark') return true;
+  if (mode.value === 'light') return false;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+export function useTheme() {
+  function cycle() {
+    mode.value =
+      mode.value === 'system' ? 'light' : mode.value === 'light' ? 'dark' : 'system';
+  }
+  return { mode, cycle, isDarkNow };
+}

app/frontend/composables/useToasts.ts

@@ -0,0 +1,30 @@
+import { reactive } from 'vue';
+
+export interface Toast {
+  id: number;
+  kind: 'info' | 'success' | 'error';
+  message: string;
+}
+
+const state = reactive<{ items: Toast[] }>({ items: [] });
+let seq = 0;
+
+export function useToasts() {
+  function push(kind: Toast['kind'], message: string, ttl = 4000) {
+    const id = ++seq;
+    state.items.push({ id, kind, message });
+    if (ttl > 0) setTimeout(() => dismiss(id), ttl);
+    return id;
+  }
+  function dismiss(id: number) {
+    const i = state.items.findIndex((t) => t.id === id);
+    if (i >= 0) state.items.splice(i, 1);
+  }
+  return {
+    toasts: state.items,
+    info: (m: string) => push('info', m),
+    success: (m: string) => push('success', m),
+    error: (m: string) => push('error', m, 6000),
+    dismiss,
+  };
+}