@rohal12/spindle 0.16.0 → 0.17.0

package/src/macros/register-builtins.ts

@@ -15,13 +15,10 @@ import '../components/macros/Stop';
 import '../components/macros/Type';
 import '../components/macros/Widget';
 import '../components/macros/StoryTitle';
-import '../components/macros/Back';
-import '../components/macros/Forward';
-import '../components/macros/Restart';
-import '../components/macros/QuickSave';
-import '../components/macros/QuickLoad';
-import '../components/macros/SettingsButton';
-import '../components/macros/Saves';
+import '../components/macros/MenubarButtons';
+import '../components/macros/Dialog';
+import '../components/macros/SaveManager';
+import '../components/macros/SettingsControls';
 import '../components/macros/Include';
 import '../components/macros/Goto';
 import '../components/macros/Unset';

package/src/markup/ast.ts

@@ -5,14 +5,6 @@ export interface TextNode {
   value: string;
 }
 
-export interface LinkNode {
-  type: 'link';
-  display: string;
-  target: string;
-  className?: string;
-  id?: string;
-}
-
 export interface VariableNode {
   type: 'variable';
   name: string;
@@ -45,7 +37,7 @@ export interface HtmlNode {
   children: ASTNode[];
 }
 
-export type ASTNode = TextNode | LinkNode | VariableNode | MacroNode | HtmlNode;
+export type ASTNode = TextNode | VariableNode | MacroNode | HtmlNode;
 
 /** Macros that require a closing tag and can contain children */
 const BLOCK_MACROS = new Set([
@@ -102,14 +94,16 @@ export function buildAST(tokens: Token[]): ASTNode[] {
         break;
 
       case 'link': {
-        const linkNode: LinkNode = {
-          type: 'link',
-          display: token.display,
-          target: token.target,
+        const rawArgs = `"${token.display}" "${token.target}"`;
+        const macroNode: MacroNode = {
+          type: 'macro',
+          name: 'link',
+          rawArgs,
+          children: [],
         };
-        if (token.className) linkNode.className = token.className;
-        if (token.id) linkNode.id = token.id;
-        current().push(linkNode);
+        if (token.className) macroNode.className = token.className;
+        if (token.id) macroNode.id = token.id;
+        current().push(macroNode);
         break;
       }
 

package/src/markup/render.tsx

@@ -1,5 +1,4 @@
 import { createContext } from 'preact';
-import { PassageLink } from '../components/PassageLink';
 import { VarDisplay } from '../components/macros/VarDisplay';
 import { WidgetInvocation } from '../components/macros/WidgetInvocation';
 import { getWidget } from '../widgets/widget-registry';
@@ -136,18 +135,6 @@ function renderSingleNode(
     case 'text':
       return node.value;
 
-    case 'link':
-      return (
-        <PassageLink
-          key={key}
-          target={node.target}
-          className={node.className}
-          id={node.id}
-        >
-          {node.display}
-        </PassageLink>
-      );
-
     case 'variable':
       return (
         <VarDisplay

package/src/story-api.ts

@@ -4,6 +4,8 @@ import { settings } from './settings';
 import type { SavePayload } from './saves/types';
 import { setTitleGenerator } from './saves/save-manager';
 import { registerClass } from './class-registry';
+import { defineMacro } from './define-macro';
+import type { MacroDefinition } from './define-macro';
 import {
   getActions,
   getAction,
@@ -53,6 +55,7 @@ export interface StoryAPI {
   readonly passage: string;
   readonly settings: typeof settings;
   registerClass(name: string, ctor: new (...args: any[]) => any): void;
+  defineMacro(config: MacroDefinition): void;
   readonly saves: {
     setTitleGenerator(fn: (payload: SavePayload) => string): void;
   };
@@ -179,6 +182,10 @@ function createStoryAPI(): StoryAPI {
       registerClass(name, ctor);
     },
 
+    defineMacro(config: MacroDefinition): void {
+      defineMacro(config);
+    },
+
     saves: {
       setTitleGenerator(fn: (payload: SavePayload) => string): void {
         setTitleGenerator(fn);

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>
-  );
-}