bookish-press 0.7.4 → 0.8.2

package/dist/components/editor/QuoteEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type QuoteNode from '../../models/chapter/QuoteNode';
-declare const __propDef: {
-    props: {
-        quote: QuoteNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type QuoteEditorProps = typeof __propDef.props;
-export type QuoteEditorEvents = typeof __propDef.events;
-export type QuoteEditorSlots = typeof __propDef.slots;
-export default class QuoteEditor extends SvelteComponent<QuoteEditorProps, QuoteEditorEvents, QuoteEditorSlots> {
+interface Props {
+    quote: QuoteNode;
 }
-export {};
+declare const QuoteEditor: import("svelte").Component<Props, {}, "">;
+type QuoteEditor = ReturnType<typeof QuoteEditor>;
+export default QuoteEditor;

package/dist/components/editor/Switch.svelte

@@ -1,14 +1,16 @@
-<script>import Icon from './Icon.svelte';
-export let options;
-export let icons = undefined;
-export let value;
-export let enabled = undefined;
-export let edit;
+<script lang="ts">import Icon from "./Icon.svelte";
+let {
+  options,
+  icons = void 0,
+  value,
+  enabled = void 0,
+  edit
+} = $props();
 function handleClick(event) {
-    const newValue = event.currentTarget.dataset.value;
-    if (newValue && options.includes(newValue)) {
-        edit(newValue);
-    }
+  const newValue = event.currentTarget.dataset.value;
+  if (newValue && options.includes(newValue)) {
+    edit(newValue);
+  }
 }
 </script>
 
@@ -18,7 +20,10 @@ function handleClick(event) {
             class={`option ${value === option ? 'selected' : ''}`}
             data-value={option}
             disabled={enabled === false}
-            on:click|stopPropagation={handleClick}
+            onclick={(event) => {
+                event.stopPropagation();
+                handleClick(event);
+            }}
         >
             {#if icons && option in icons}
                 <Icon icon={icons[option]} />

package/dist/components/editor/Switch.svelte.d.ts

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        options: string[];
-        icons?: Record<string, string> | undefined;
-        value: string;
-        enabled?: boolean | undefined;
-        edit: (newValue: string) => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
+interface Props {
+    options: string[];
+    icons?: Record<string, string> | undefined;
+    value: string;
+    enabled?: boolean | undefined;
+    edit: (newValue: string) => void;
 }
-export {};
+declare const Switch: import("svelte").Component<Props, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/editor/TableEditor.svelte

@@ -1,6 +1,6 @@
-<script>import { getCaret } from '../page/Contexts';
-import PositionEditor from './PositionEditor.svelte';
-export let table;
+<script lang="ts">import { getCaret } from "../page/Contexts";
+import PositionEditor from "./PositionEditor.svelte";
+let { table } = $props();
 let caret = getCaret();
 </script>
 

package/dist/components/editor/TableEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type TableNode from '../../models/chapter/TableNode';
-declare const __propDef: {
-    props: {
-        table: TableNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableEditorProps = typeof __propDef.props;
-export type TableEditorEvents = typeof __propDef.events;
-export type TableEditorSlots = typeof __propDef.slots;
-export default class TableEditor extends SvelteComponent<TableEditorProps, TableEditorEvents, TableEditorSlots> {
+interface Props {
+    table: TableNode;
 }
-export {};
+declare const TableEditor: import("svelte").Component<Props, {}, "">;
+type TableEditor = ReturnType<typeof TableEditor>;
+export default TableEditor;

package/dist/components/editor/TextEditor.svelte

@@ -1,98 +1,85 @@
-<script>var Status;
-(function (Status) {
-    Status[Status["Viewing"] = 0] = "Viewing";
-    Status[Status["Editing"] = 1] = "Editing";
-})(Status || (Status = {}));
-export let text;
-export let label;
-export let placeholder;
-export let valid;
-export let save;
-export let saveOnExit = false;
-export let width = undefined;
-export let clip = false;
-export let move = undefined;
-let status = Status.Viewing;
-let field = null;
-let sizer = null;
-$: error = valid(text);
-// Grow the sizer when text or status changes.
-$: {
-    if (sizer) {
-        // Set the invisible sizer to the text to set the container's width.
-        // The browser strips trailing spaces, causing jitter after a space, so we replace
-        // them with non-breaking spaces.
-        const sizedText = showPlaceholder()
-            ? placeholder
-            : text.replace(/\s$/g, '\u00a0');
-        // Clip the text to prevent this editor from getting too long when editing. If it goes past one line,
-        // the measurements and layout are way off.
-        const trimmedText = width !== undefined &&
-            (clip === true || status === Status.Editing)
-            ? sizedText.substring(0, width) + '…'
-            : sizedText;
-        sizer.innerHTML = trimmedText;
-    }
-}
-// When status changes, focus or blur.
-$: {
-    if (field) {
-        if (status === Status.Editing) {
-            field.focus();
-        }
-        else {
-            field.blur();
-        }
-    }
-}
-// When text changes, save, unless we only save on exit.
-$: {
-    if (!saveOnExit)
-        saveText(text);
-}
+<script lang="ts">import { untrack } from "svelte";
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2[Status2["Viewing"] = 0] = "Viewing";
+  Status2[Status2["Editing"] = 1] = "Editing";
+  return Status2;
+})(Status || {});
+let {
+  text = $bindable(),
+  label,
+  placeholder,
+  valid,
+  save,
+  saveOnExit = false,
+  width = void 0,
+  clip = false,
+  move = void 0
+} = $props();
+let status = $state(0 /* Viewing */);
+let field = $state(null);
+let sizer = $state(null);
 function showPlaceholder() {
-    return text === '';
+  return text === "";
 }
 function startEditing() {
-    status = Status.Editing;
+  status = 1 /* Editing */;
 }
 function stopEditing() {
-    status = Status.Viewing;
-    if (saveOnExit)
-        saveText(text);
+  status = 0 /* Viewing */;
+  if (saveOnExit) saveText(text);
 }
 function edit() {
-    if (field) {
-        text = field.value;
-        if (saveOnExit === false)
-            saveText(text);
-    }
+  if (field) {
+    text = field.value;
+    if (saveOnExit === false) saveText(text);
+  }
 }
 function saveText(newText) {
-    if (validate(newText) === undefined) {
-        const revisedText = save(newText);
-        if (typeof revisedText === 'string') {
-            text = revisedText;
-        }
-        if (revisedText instanceof Promise)
-            revisedText.catch((err) => (error = err.message));
-    }
+  if (validate(newText) === void 0) {
+    const revisedText = save(newText);
+    if (typeof revisedText === "string") {
+      text = revisedText;
+    }
+    if (revisedText instanceof Promise)
+      revisedText.catch((err) => error = err.message);
+  }
 }
 function validate(value) {
-    return valid(value);
+  return valid(value);
 }
 function handleKeyPress(event) {
-    if (event.key === 'Enter')
-        status = Status.Viewing;
-    else if (event.key === 'ArrowUp' && move && field) {
-        event.preventDefault();
-        move(field, -1);
-    }
-    else if (event.key === 'ArrowDown' && move && field) {
-        event.preventDefault();
-        move(field, 1);
-    }
+  if (event.key === "Enter") status = 0 /* Viewing */;
+  else if (event.key === "ArrowUp" && move && field) {
+    event.preventDefault();
+    move(field, -1);
+  } else if (event.key === "ArrowDown" && move && field) {
+    event.preventDefault();
+    move(field, 1);
+  }
 }
+let error = $derived(valid(text));
+$effect(() => {
+  if (sizer) {
+    const sizedText = showPlaceholder() ? placeholder : text.replace(/\s$/g, "\xA0");
+    const trimmedText = width !== void 0 && (clip === true || status === 1 /* Editing */) ? sizedText.substring(0, width) + "\u2026" : sizedText;
+    sizer.innerHTML = trimmedText;
+  }
+});
+$effect(() => {
+  if (field) {
+    if (status === 1 /* Editing */) {
+      field.focus();
+    } else {
+      field.blur();
+    }
+  }
+});
+$effect(() => {
+  void text;
+  untrack(() => {
+    if (!saveOnExit) saveText(text);
+  });
+});
 </script>
 
 <span
@@ -104,8 +91,8 @@ function handleKeyPress(event) {
         class={`sizer ${error ? 'error' : ''}`}
         aria-hidden={true}
         bind:this={sizer}
-        on:click={startEditing}
-    />
+        onclick={startEditing}
+></span>
     <input
         type="text"
         bind:this={field}
@@ -115,10 +102,10 @@ function handleKeyPress(event) {
         aria-label={label}
         aria-placeholder={label}
         {placeholder}
-        on:change={edit}
-        on:keydown={handleKeyPress}
-        on:blur={stopEditing}
-        on:focus={startEditing}
+        onchange={edit}
+        onkeydown={handleKeyPress}
+        onblur={stopEditing}
+        onfocus={startEditing}
     />
     {#if error && status === Status.Editing}
         <span

package/dist/components/editor/TextEditor.svelte.d.ts

@@ -1,26 +1,14 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        label: string;
-        placeholder: string;
-        valid: (text: string) => string | undefined;
-        save: (text: string) => Promise<void> | undefined | void | string;
-        saveOnExit?: boolean;
-        width?: number | undefined;
-        clip?: boolean;
-        move?: ((el: HTMLElement, direction: -1 | 1) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TextEditorProps = typeof __propDef.props;
-export type TextEditorEvents = typeof __propDef.events;
-export type TextEditorSlots = typeof __propDef.slots;
-export default class TextEditor extends SvelteComponent<TextEditorProps, TextEditorEvents, TextEditorSlots> {
+interface Props {
+    text: string;
+    label: string;
+    placeholder: string;
+    valid: (text: string) => string | undefined;
+    save: (text: string) => Promise<void> | undefined | void | string;
+    saveOnExit?: boolean;
+    width?: number | undefined;
+    clip?: boolean;
+    move?: ((el: HTMLElement, direction: -1 | 1) => void) | undefined;
 }
-export {};
+declare const TextEditor: import("svelte").Component<Props, {}, "text">;
+type TextEditor = ReturnType<typeof TextEditor>;
+export default TextEditor;

package/dist/components/editor/Toggle.svelte

@@ -1,22 +1,19 @@
-<script>var Status;
-(function (Status) {
-    Status[Status["Viewing"] = 0] = "Viewing";
-    Status[Status["Saving"] = 1] = "Saving";
-    Status[Status["Error"] = 2] = "Error";
-})(Status || (Status = {}));
-export let on;
-export let save;
-let saving = Status.Viewing;
+<script lang="ts">var Status = /* @__PURE__ */ ((Status2) => {
+  Status2[Status2["Viewing"] = 0] = "Viewing";
+  Status2[Status2["Saving"] = 1] = "Saving";
+  Status2[Status2["Error"] = 2] = "Error";
+  return Status2;
+})(Status || {});
+let { on, save, children } = $props();
+let saving = $state(0 /* Viewing */);
 function toggle() {
-    saving = Status.Saving;
-    const promise = save(!on);
-    if (promise === undefined) {
-        saving = Status.Viewing;
-        return;
-    }
-    promise
-        .then(() => (saving = Status.Viewing))
-        .catch(() => (saving = Status.Error));
+  saving = 1 /* Saving */;
+  const promise = save(!on);
+  if (promise === void 0) {
+    saving = 0 /* Viewing */;
+    return;
+  }
+  promise.then(() => saving = 0 /* Viewing */).catch(() => saving = 2 /* Error */);
 }
 </script>
 
@@ -27,11 +24,11 @@ function toggle() {
     tabindex="0"
     role="switch"
     aria-checked={on}
-    on:keydown={(event) =>
+    onkeydown={(event) =>
         event.key === 'Enter' || event.key === 'Space' ? toggle() : undefined}
-    on:click={toggle}
+    onclick={toggle}
 >
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

package/dist/components/editor/Toggle.svelte.d.ts

@@ -1,21 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        on: boolean;
-        save: (set: boolean) => Promise<void> | void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToggleProps = typeof __propDef.props;
-export type ToggleEvents = typeof __propDef.events;
-export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+interface Props {
+    on: boolean;
+    save: (set: boolean) => Promise<void> | void;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Toggle: import("svelte").Component<Props, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;