@dosgato/dialog 0.0.53 → 0.0.54

package/dist/FieldChooserLink.svelte

@@ -34,7 +34,7 @@ const store = new ChooserStore(chooserClient);
 const descid = randomid();
 let modalshown = false;
 async function show() {
-    if (selectedAsset && selectedAsset.type !== 'raw')
+    if (selectedAsset && selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken')
         store.setPreview(selectedAsset);
     modalshown = true;
 }
@@ -84,27 +84,23 @@ async function userUrlEntryDebounced() {
     }
     if (!found) {
         try {
-            const _ = new URL(url);
             selectedAsset = {
                 type: 'raw',
-                id: chooserClient.urlToValue?.(url) ?? url,
+                id: urlToValueCache[url] ?? chooserClient.urlToValue?.(new URL(url).toString()),
                 url
             };
         }
-        catch (e) {
+        catch {
             // here we "select" a raw url so that we do not interrupt the users' typing, but
             // we set its id to 'undefined' so that nothing makes it into the form until it's
             // a valid URL
-            selectedAsset = {
-                type: 'raw',
-                id: undefined,
-                url
-            };
+            selectedAsset = { type: 'raw', url, id: undefined };
         }
     }
     formStore.setField(finalPath, selectedAsset?.id);
     formStore.dirtyField(finalPath);
 }
+const urlToValueCache = {};
 async function updateSelected(..._) {
     if ($value && selectedAsset?.id !== $value) {
         const valueBeforeFind = $value;
@@ -113,8 +109,16 @@ async function updateSelected(..._) {
             return;
         selectedAsset = asset;
         try {
-            if (!selectedAsset)
-                selectedAsset = { type: 'raw', id: $value, url: chooserClient.valueToUrl?.($value) ?? $value };
+            if (!selectedAsset) {
+                const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value;
+                try {
+                    selectedAsset = { type: 'raw', id: $value, url: new URL(urlFromValue).toString() };
+                }
+                catch {
+                    selectedAsset = { type: 'broken', id: $value, url: $value };
+                }
+            }
+            urlToValueCache[selectedAsset.url] = $value;
         }
         catch (e) {
             console.error(e);

package/dist/FieldChooserLink.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type RawURL } from './chooser';
+import { type BrokenURL, type RawURL } from './chooser';
 import type { AnyItem } from './chooser/ChooserAPI';
 declare const __propDef: {
     props: {
@@ -19,7 +19,7 @@ declare const __propDef: {
         related?: number | true | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;
-        selectedAsset?: AnyItem | RawURL | undefined;
+        selectedAsset?: AnyItem | RawURL | BrokenURL | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/ChooserAPI.d.ts

@@ -9,11 +9,22 @@ export interface Client<F = any> {
     findByUrl?: (url: string) => Promise<AnyItem | undefined>;
     urlToValue?: (url: string) => string;
     /**
-     * If the form is preloaded with a raw URL, findById returns undefined, and the client implements
-     * urlToValue, we will need a way to decode/reverse what urlToValue does. This function should
-     * do that.
+     * If the form is preloaded with an id for which findById returns undefined (e.g. it's a raw URL or
+     * an id that points at a temporarily unavailable resource), we need to show something in
+     * the urlEntry field to signify that there is a value we are keeping around. This function
+     * should do that as well as it can based on the id passed to it.
+     *
+     * For instance, if the id looks like an asset, valueToUrl could return /.assets/{id}, which
+     * would communicate to the user that an asset is currently selected, even though they can't see
+     * its preview at the moment. If they save the form, their selection will be preserved in case
+     * the resource comes back at some point (or maybe they just didn't have permission to see it).
+     *
+     * If the id means nothing you can return undefined and the input will show it directly.
+     *
+     * Note: If urlToValue was provided, at minimum this function should be able to recognize and
+     * undo values it generates.
      */
-    valueToUrl?: (value: string) => string;
+    valueToUrl?: (value: string) => string | undefined;
     upload: (source: string, path: string, files: FileList) => Promise<void>;
 }
 export interface Source {
@@ -77,6 +88,7 @@ export interface Asset extends Item {
         height: number;
         thumbnailUrl?: string;
         previewUrl?: string;
+        tinyUrl?: string;
     };
 }
 export {};

package/dist/chooser/ChooserStore.d.ts

@@ -9,6 +9,11 @@ export interface RawURL {
     id: string | undefined;
     url: string;
 }
+export interface BrokenURL {
+    type: 'broken';
+    id: string;
+    url: string;
+}
 export type AnyUIItem = TypedTreeItem<Page | Asset | Folder>;
 export interface IAssetStore {
     sources?: {

package/dist/chooser/Details.svelte

@@ -3,16 +3,21 @@ export let item;
 </script>
 
 <dl class="dialog-chooser-info" aria-live="polite">
-  {#if item.type !== 'raw'}
-    <div class="top-row">
-      <dt>Name:</dt>
-      <dd>{item.path}</dd>
-    </div>
-  {:else if item.id}
+  {#if item.type === 'raw' && item.id}
     <div>
       <dt>External Link:</dt>
       <dd>{item.url}</dd>
     </div>
+  {:else if item.type === 'broken'}
+    <div>
+      <dt>Unknown Link (this resource may have been deleted):</dt>
+      <dd>{item.url}</dd>
+    </div>
+  {:else if item.type !== 'raw'}
+    <div class="top-row">
+      <dt>Name:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {/if}
   {#if item.type === 'asset'}
     <div class="horizontal-group">

package/dist/chooser/Details.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AnyItem } from './ChooserAPI';
-import { type RawURL } from './ChooserStore';
+import { type BrokenURL, type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyItem | RawURL;
+        item: AnyItem | RawURL | BrokenURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Thumbnail.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AnyItem } from './ChooserAPI';
-import type { RawURL } from './ChooserStore';
+import type { BrokenURL, RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyItem | RawURL;
+        item: AnyItem | RawURL | BrokenURL;
         larger?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",