@rohal12/spindle 0.16.1 → 0.18.1

package/src/styles.css

@@ -44,25 +44,6 @@ tw-storydata {
   }
 }
 
-.passage-link {
-  color: #64b5f6;
-  text-decoration: none;
-  border-bottom: 1px solid rgba(100, 181, 246, 0.3);
-  transition:
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-}
-
-.passage-link:hover {
-  color: #90caf9;
-  border-bottom-color: #90caf9;
-}
-
-.passage-link:active {
-  color: #42a5f5;
-}
-
 .macro-button {
   background: rgba(100, 181, 246, 0.15);
   color: #64b5f6;
@@ -154,9 +135,9 @@ tw-storydata {
   background: transparent;
 }
 
-/* Settings dialog */
+/* Generic dialog */
 
-.settings-overlay {
+.dialog-overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
@@ -166,28 +147,33 @@ tw-storydata {
   background: rgba(0, 0, 0, 0.6);
 }
 
-.settings-panel {
+.dialog-panel {
   background: #16213e;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   width: 90%;
-  max-width: 400px;
+  max-width: 500px;
   max-height: 80vh;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
   color: #e0e0e0;
   font-family: system-ui, sans-serif;
+  position: relative;
 }
 
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1em 1.25em;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  font-weight: 600;
+.dialog-saves {
+  max-width: 550px;
 }
 
-.settings-close {
+.dialog-settings {
+  max-width: 400px;
+}
+
+.dialog-close {
+  position: absolute;
+  top: 0.75em;
+  right: 0.75em;
+  z-index: 1;
   background: transparent;
   border: none;
   color: #9e9e9e;
@@ -197,11 +183,19 @@ tw-storydata {
   line-height: 1;
 }
 
-.settings-close:hover {
+.dialog-close:hover {
   color: #e0e0e0;
 }
 
-.settings-body {
+.dialog-body {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Settings controls */
+
+.settings-controls {
   padding: 1em 1.25em;
   display: flex;
   flex-direction: column;
@@ -235,29 +229,13 @@ tw-storydata {
   height: 1.1em;
 }
 
-/* Saves dialog */
-
-.saves-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.6);
-}
+/* Save manager */
 
-.saves-panel {
-  background: #16213e;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  width: 90%;
-  max-width: 550px;
-  max-height: 80vh;
+.save-manager {
   display: flex;
   flex-direction: column;
-  color: #e0e0e0;
-  font-family: system-ui, sans-serif;
+  flex: 1;
+  min-height: 0;
 }
 
 .saves-header {
@@ -265,6 +243,7 @@ tw-storydata {
   align-items: center;
   justify-content: space-between;
   padding: 1em 1.25em;
+  padding-right: 3em;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   font-weight: 600;
   flex-shrink: 0;
@@ -307,20 +286,6 @@ tw-storydata {
   color: #e0e0e0;
 }
 
-.saves-close {
-  background: transparent;
-  border: none;
-  color: #9e9e9e;
-  font-size: 1.1em;
-  cursor: pointer;
-  padding: 0.25em;
-  line-height: 1;
-}
-
-.saves-close:hover {
-  color: #e0e0e0;
-}
-
 .saves-body {
   padding: 0.75em 1.25em;
   overflow-y: auto;
@@ -560,6 +525,10 @@ tw-storydata {
   border-bottom-color: #90caf9;
 }
 
+.macro-link:active {
+  color: #42a5f5;
+}
+
 /* Macro: form inputs */
 
 .macro-textbox,

package/src/components/PassageLink.tsx

@@ -1,49 +0,0 @@
-import { useStoryStore } from '../store';
-import { useAction } from '../hooks/use-action';
-import { useInterpolate } from '../hooks/use-interpolate';
-
-interface PassageLinkProps {
-  target: string;
-  className?: string;
-  id?: string;
-  children: preact.ComponentChildren;
-}
-
-export function PassageLink({
-  target,
-  className,
-  id,
-  children,
-}: PassageLinkProps) {
-  const navigate = useStoryStore((s) => s.navigate);
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-
-  const handleClick = (e: MouseEvent) => {
-    e.preventDefault();
-    navigate(target);
-  };
-
-  useAction({
-    type: 'link',
-    key: target,
-    authorId: id,
-    label: typeof children === 'string' ? children : target,
-    target,
-    perform: () => navigate(target),
-  });
-
-  const cls = className ? `passage-link ${className}` : 'passage-link';
-
-  return (
-    <a
-      href="#"
-      id={id}
-      class={cls}
-      onClick={handleClick}
-    >
-      {children}
-    </a>
-  );
-}

package/src/components/SaveLoadDialog.tsx

@@ -1,408 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
-import { useStoryStore } from '../store';
-import { isSaveExport, type SaveRecord } from '../saves/types';
-import {
-  getSavesGrouped,
-  createSave,
-  overwriteSave,
-  deleteSaveById,
-  renameSave,
-  exportSave,
-  importSave,
-  type PlaythroughGroup,
-} from '../saves/save-manager';
-
-interface SaveLoadDialogProps {
-  onClose: () => void;
-}
-
-function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const secs = Math.floor(diff / 1000);
-  if (secs < 60) return 'just now';
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString();
-}
-
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-}
-
-export function SaveLoadDialog({ onClose }: SaveLoadDialogProps) {
-  const [mode, setMode] = useState<'save' | 'load'>('load');
-  const [groups, setGroups] = useState<PlaythroughGroup[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [status, setStatus] = useState<{
-    text: string;
-    type: 'success' | 'error';
-  } | null>(null);
-  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
-  const [renamingId, setRenamingId] = useState<string | null>(null);
-  const [renameValue, setRenameValue] = useState('');
-  const renameInputRef = useRef<HTMLInputElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const storyData = useStoryStore((s) => s.storyData);
-  const playthroughId = useStoryStore((s) => s.playthroughId);
-  const getSavePayload = useStoryStore((s) => s.getSavePayload);
-  const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
-  const ifid = storyData?.ifid ?? '';
-
-  const refresh = useCallback(async () => {
-    if (!ifid) return;
-    const data = await getSavesGrouped(ifid);
-    setGroups(data);
-    setLoading(false);
-  }, [ifid]);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  useEffect(() => {
-    if (renamingId && renameInputRef.current) {
-      renameInputRef.current.focus();
-      renameInputRef.current.select();
-    }
-  }, [renamingId]);
-
-  const statusTimer = useRef<number>();
-  const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
-    clearTimeout(statusTimer.current);
-    setStatus({ text, type });
-    statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
-  };
-
-  const toggleCollapse = (id: string) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const handleNewSave = async () => {
-    if (!ifid || !playthroughId) return;
-    try {
-      const payload = getSavePayload();
-      await createSave(ifid, playthroughId, payload);
-      showStatus('Save created');
-      await refresh();
-    } catch {
-      showStatus('Failed to create save', 'error');
-    }
-  };
-
-  const handleOverwrite = async (saveId: string) => {
-    try {
-      const payload = getSavePayload();
-      await overwriteSave(saveId, payload);
-      showStatus('Save overwritten');
-      await refresh();
-    } catch {
-      showStatus('Failed to overwrite save', 'error');
-    }
-  };
-
-  const handleLoad = async (save: SaveRecord) => {
-    try {
-      loadFromPayload(save.payload);
-      showStatus('Game loaded');
-      setTimeout(onClose, 500);
-    } catch {
-      showStatus('Failed to load save', 'error');
-    }
-  };
-
-  const handleDelete = async (saveId: string) => {
-    if (!confirm('Delete this save?')) return;
-    try {
-      await deleteSaveById(saveId);
-      showStatus('Save deleted');
-      await refresh();
-    } catch {
-      showStatus('Failed to delete save', 'error');
-    }
-  };
-
-  const handleRenameStart = (save: SaveRecord) => {
-    setRenamingId(save.meta.id);
-    setRenameValue(save.meta.title);
-  };
-
-  const handleRenameConfirm = async () => {
-    if (!renamingId || !renameValue.trim()) return;
-    try {
-      await renameSave(renamingId, renameValue.trim());
-      setRenamingId(null);
-      showStatus('Save renamed');
-      await refresh();
-    } catch {
-      showStatus('Failed to rename', 'error');
-    }
-  };
-
-  const handleRenameKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') handleRenameConfirm();
-    else if (e.key === 'Escape') setRenamingId(null);
-  };
-
-  const handleExport = async (saveId: string) => {
-    try {
-      const data = await exportSave(saveId);
-      if (!data) return;
-      const blob = new Blob([JSON.stringify(data, null, 2)], {
-        type: 'application/json',
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `save-${data.save.meta.title.replace(/[^a-z0-9]/gi, '_')}.json`;
-      a.click();
-      URL.revokeObjectURL(url);
-      showStatus('Save exported');
-    } catch {
-      showStatus('Failed to export save', 'error');
-    }
-  };
-
-  const handleImport = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileSelected = async (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (!file) return;
-    input.value = '';
-
-    try {
-      const text = await file.text();
-      const data = JSON.parse(text);
-      if (!isSaveExport(data)) {
-        throw new Error('Invalid save file format');
-      }
-      await importSave(data, ifid);
-      showStatus('Save imported');
-      await refresh();
-    } catch (err) {
-      showStatus(
-        err instanceof Error ? err.message : 'Failed to import save',
-        'error',
-      );
-    }
-  };
-
-  const handleBackdrop = (e: MouseEvent) => {
-    if ((e.target as HTMLElement).classList.contains('saves-overlay')) {
-      onClose();
-    }
-  };
-
-  const totalSaves = groups.reduce((n, g) => n + g.saves.length, 0);
-
-  return (
-    <div
-      class="saves-overlay"
-      onClick={handleBackdrop}
-    >
-      <div class="saves-panel">
-        <div class="saves-header">
-          <div class="saves-header-left">
-            <div class="saves-mode-toggle">
-              <button
-                class={mode === 'save' ? 'active' : ''}
-                onClick={() => setMode('save')}
-              >
-                Save
-              </button>
-              <button
-                class={mode === 'load' ? 'active' : ''}
-                onClick={() => setMode('load')}
-              >
-                Load
-              </button>
-            </div>
-          </div>
-          <button
-            class="saves-close"
-            onClick={onClose}
-          >
-            ✕
-          </button>
-        </div>
-
-        <div class="saves-toolbar">
-          <button
-            class="saves-toolbar-button"
-            onClick={handleImport}
-          >
-            Import
-          </button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept=".json"
-            style="display:none"
-            onChange={handleFileSelected}
-          />
-        </div>
-
-        <div class="saves-body">
-          {loading ? (
-            <div class="saves-empty">Loading...</div>
-          ) : totalSaves === 0 && mode === 'load' ? (
-            <div class="saves-empty">No saves yet</div>
-          ) : (
-            groups.map((group) => {
-              const isCollapsed = collapsed.has(group.playthrough.id);
-              const isCurrentPt = group.playthrough.id === playthroughId;
-
-              // Save mode: only show current playthrough
-              // Load mode: hide empty non-current playthroughs (irrecoverable)
-              if (mode === 'save' && !isCurrentPt) return null;
-              if (mode === 'load' && group.saves.length === 0 && !isCurrentPt)
-                return null;
-
-              return (
-                <div
-                  class="playthrough-group"
-                  key={group.playthrough.id}
-                >
-                  <div
-                    class="playthrough-header"
-                    onClick={() => toggleCollapse(group.playthrough.id)}
-                  >
-                    <span
-                      class={`playthrough-chevron ${isCollapsed ? '' : 'open'}`}
-                    >
-                      ▶
-                    </span>
-                    <span class="playthrough-label">
-                      {group.playthrough.label}
-                      {isCurrentPt ? ' (current)' : ''}
-                    </span>
-                    <span class="playthrough-date">
-                      {formatDate(group.playthrough.createdAt)}
-                    </span>
-                  </div>
-
-                  {!isCollapsed && (
-                    <div class="playthrough-saves">
-                      {group.saves.map((save) => (
-                        <div
-                          class="save-slot"
-                          key={save.meta.id}
-                        >
-                          <div class="save-slot-info">
-                            {renamingId === save.meta.id ? (
-                              <input
-                                ref={renameInputRef}
-                                class="save-rename-input"
-                                value={renameValue}
-                                onInput={(e) =>
-                                  setRenameValue(
-                                    (e.target as HTMLInputElement).value,
-                                  )
-                                }
-                                onKeyDown={handleRenameKeyDown}
-                                onBlur={handleRenameConfirm}
-                              />
-                            ) : (
-                              <div class="save-slot-title">
-                                {save.meta.title}
-                              </div>
-                            )}
-                            <div class="save-slot-meta">
-                              <span>{save.meta.passage}</span>
-                              <span>{relativeTime(save.meta.updatedAt)}</span>
-                            </div>
-                          </div>
-                          <div class="save-slot-actions">
-                            {mode === 'save' ? (
-                              <button
-                                class="save-slot-action primary"
-                                onClick={() => handleOverwrite(save.meta.id)}
-                              >
-                                Save Here
-                              </button>
-                            ) : (
-                              <button
-                                class="save-slot-action primary"
-                                onClick={() => handleLoad(save)}
-                              >
-                                Load
-                              </button>
-                            )}
-                            <button
-                              class="save-slot-action"
-                              onClick={() => handleRenameStart(save)}
-                            >
-                              Rename
-                            </button>
-                            <button
-                              class="save-slot-action"
-                              onClick={() => handleExport(save.meta.id)}
-                            >
-                              Export
-                            </button>
-                            <button
-                              class="save-slot-action danger"
-                              onClick={() => handleDelete(save.meta.id)}
-                            >
-                              Delete
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-
-                      {mode === 'save' && isCurrentPt && (
-                        <button
-                          class="save-slot-new"
-                          onClick={handleNewSave}
-                        >
-                          + New Save
-                        </button>
-                      )}
-                    </div>
-                  )}
-                </div>
-              );
-            })
-          )}
-
-          {mode === 'save' &&
-            !loading &&
-            !groups.some((g) => g.playthrough.id === playthroughId) && (
-              <div class="playthrough-group">
-                <div class="playthrough-saves">
-                  <button
-                    class="save-slot-new"
-                    onClick={handleNewSave}
-                  >
-                    + New Save
-                  </button>
-                </div>
-              </div>
-            )}
-        </div>
-
-        {status && (
-          <div class={`saves-status ${status.type === 'error' ? 'error' : ''}`}>
-            {status.text}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/macros/Back.tsx

@@ -1,32 +0,0 @@
-import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
-
-export function Back({ className, id }: MacroProps) {
-  const goBack = useStoryStore((s) => s.goBack);
-  const canGoBack = useStoryStore((s) => s.historyIndex > 0);
-  const cls = className ? `menubar-button ${className}` : 'menubar-button';
-
-  useAction({
-    type: 'back',
-    key: 'back',
-    authorId: id,
-    label: 'Back',
-    disabled: !canGoBack,
-    perform: () => goBack(),
-  });
-
-  return (
-    <button
-      id={id}
-      class={cls}
-      onClick={goBack}
-      disabled={!canGoBack}
-    >
-      ← Back
-    </button>
-  );
-}
-
-registerMacro('back', Back);

package/src/components/macros/Forward.tsx

@@ -1,34 +0,0 @@
-import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
-
-export function Forward({ className, id }: MacroProps) {
-  const goForward = useStoryStore((s) => s.goForward);
-  const canGoForward = useStoryStore(
-    (s) => s.historyIndex < s.history.length - 1,
-  );
-  const cls = className ? `menubar-button ${className}` : 'menubar-button';
-
-  useAction({
-    type: 'forward',
-    key: 'forward',
-    authorId: id,
-    label: 'Forward',
-    disabled: !canGoForward,
-    perform: () => goForward(),
-  });
-
-  return (
-    <button
-      id={id}
-      class={cls}
-      onClick={goForward}
-      disabled={!canGoForward}
-    >
-      Forward →
-    </button>
-  );
-}
-
-registerMacro('forward', Forward);