@k2b/ui 0.11.0 → 0.13.0

package/README.md

@@ -61,7 +61,7 @@ See the [TextInput guide](https://cloud.k2b.dev/en/ui/input/text) for details.
 | Inputs | Text fields, selectors, date pickers, file inputs |
 | Layout | Panels, settings, split panes, floating windows |
 | Surfaces | Cards, avatars, badges, empty states |
-| Feedback | Dialogs, prompts, tooltips, toasts |
+| Feedback | Dialogs, prompts, tooltips, toasts, screen-reader announcements |
 | Content | Tables, charts, calendars, Markdown, file previews |
 | Chat | Timeline, messages, composer, context usage |
 | Widgets | Dashboard summaries, lists, statistics |

package/dist/browser/content/FileView.js

@@ -18,7 +18,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<a><i aria-hidden=true></i><span class=k2b
   _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__panel><div class=k2b-content-file-view__preview></div><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__truncated>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__excerpt>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__document>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__editor>`),
   _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__editor><div class=k2b-markdown-editor data-fill=true role=group><div class="k2b-markdown-editor__toolbar k2b-content-file-view__code-toolbar"><span class=k2b-content-file-view__code-language></span><span class=k2b-markdown-editor__trailing><!$><!/><!$><!/></span></div><div class=k2b-markdown-editor__surface><textarea class=k2b-content-file-view__code-input>`),
@@ -29,22 +29,25 @@ var _tmpl$ = /*#__PURE__*/_$template(`<a><i aria-hidden=true></i><span class=k2b
   _tmpl$13 = /*#__PURE__*/_$template(`<td>`),
   _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__pagination><!$><!/><span><!$><!/>–<!$><!/> / <!$><!/></span><!$><!/>`),
   _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media><img>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<object type=application/pdf class=k2b-content-file-view__pdf>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=audio><audio controls preload=metadata>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=video><video controls preload=metadata playsinline>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<a class=k2b-button data-variant=secondary data-size=sm download><i class="ti ti-download"aria-hidden=true></i><!$><!/>`);
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__pdf-viewer><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<object type=application/pdf class=k2b-content-file-view__pdf>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=audio><audio controls preload=metadata>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-content-file-view__media data-kind=video><video controls preload=metadata playsinline>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<a class=k2b-button data-variant=secondary data-size=sm download><i class="ti ti-download"aria-hidden=true></i><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div>`);
 /**
  * FileView — renders one file through a small renderer registry keyed by
  * media type / path. Editing is enabled purely by the presence of `save`;
  * without it every renderer is read-only. IDE-style chrome: editors reuse
  * the markdown editor's surface (toolbar with an in-toolbar save, Ctrl/Cmd+S),
  * previews are quiet paper panels with icon-only actions overlaid top-right.
+ * A plain preview drops the panel and sits on its host's surface instead.
  * Custom renderers are passed per instance, which keeps SSR requests and
  * independently mounted applications isolated.
  */
 
 import { mutation } from "@k2b/stdlib/solid";
-import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, onMount, Show, Switch, untrack } from "solid-js";
+import { createContext, createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, onMount, Show, Switch, untrack, useContext } from "solid-js";
 import { Button } from "../actions/Button";
 import { prompts } from "../feedback/prompts";
 import { Tooltip } from "../feedback/Tooltip";
@@ -57,9 +60,15 @@ import CodeDisplay from "./CodeDisplay";
 import { decodeDelimitedContent, readDelimitedPreferences } from "./delimited-preferences";
 import { fileViewExtension, getFileViewPreviewKind, parseDelimitedText } from "./file-view-preview";
 import MarkdownView from "./MarkdownView";
+import { leadingMarkdownTitle } from "./markdown-title";
 import PdfPreview from "./PdfPreview";
 import StructuredDataPreview from "./StructuredDataPreview";
 export { canPreviewFile, getFileViewPreviewKind } from "./file-view-preview";
+/** Instance options that reach the built-in renderers without widening the public renderer props. */
+const FileViewHost = createContext({
+  plain: false,
+  liftTitle: false
+});
 const codeLanguage = path => {
   const extension = fileViewExtension(path);
   if (extension === "ts" || extension === "mts" || extension === "cts") return "ts";
@@ -274,36 +283,51 @@ function TextExcerpt(props) {
   const lines = createMemo(() => props.text.replace(/\r\n?/g, "\n").replace(/\n$/, "").split("\n"));
   const limit = () => props.renderer.previewLines === undefined ? lines().length : Math.max(1, props.renderer.previewLines);
   const text = () => lines().slice(0, limit()).join("\n");
-  return [(() => {
-    var _el$11 = _$getNextElement(_tmpl$7);
-    _$insert(_el$11, _$createComponent(Show, {
-      get when() {
-        return props.markdown;
-      },
-      get fallback() {
-        return _$createComponent(CodeDisplay, {
-          get code() {
-            return text();
-          },
-          get language() {
-            return codeLanguage(props.renderer.file.path);
-          }
-        });
-      },
-      get children() {
-        return _$createComponent(MarkdownView, {
-          get markdown() {
-            return text();
-          },
-          get headingScale() {
-            return props.renderer.headingScale ?? "compact";
-          }
-        });
-      }
-    }));
-    _$effect(() => _el$11.classList.toggle("k2b-content-file-view__excerpt", !!(props.renderer.previewLines !== undefined)));
-    return _el$11;
-  })(), _$createComponent(MoreLines, {
+  const host = useContext(FileViewHost);
+  // A plain preview has no code box: the host frames the file and owns its copy action.
+  const content = () => _$createComponent(Show, {
+    get when() {
+      return props.markdown;
+    },
+    get fallback() {
+      return _$createComponent(CodeDisplay, {
+        get code() {
+          return text();
+        },
+        get language() {
+          return codeLanguage(props.renderer.file.path);
+        },
+        get copy() {
+          return host.plain ? false : undefined;
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(MarkdownView, {
+        get markdown() {
+          return text();
+        },
+        get headingScale() {
+          return props.renderer.headingScale ?? "compact";
+        }
+      });
+    }
+  });
+  // Only an excerpt needs a clipping box; a complete preview keeps its content
+  // a direct child of the preview frame, which the frame's styles expect.
+  return [_$createComponent(Show, {
+    get when() {
+      return props.renderer.previewLines !== undefined;
+    },
+    get fallback() {
+      return content();
+    },
+    get children() {
+      var _el$11 = _$getNextElement(_tmpl$7);
+      _$insert(_el$11, content);
+      return _el$11;
+    }
+  }), _$createComponent(MoreLines, {
     get count() {
       return lines().length - limit();
     },
@@ -314,7 +338,12 @@ function TextExcerpt(props) {
 }
 function MarkdownRenderer(props) {
   const messages = useUiMessages();
+  const host = useContext(FileViewHost);
   const [editing, setEditing] = createSignal(false);
+  const markdown = () => {
+    const text = stripFrontmatter(props.editor?.draft() ?? props.content.content);
+    return host.liftTitle ? leadingMarkdownTitle(text)?.body ?? text : text;
+  };
   return _$createComponent(Show, {
     get when() {
       return _$memo(() => !!props.editor)() && editing();
@@ -342,7 +371,7 @@ function MarkdownRenderer(props) {
           _$insert(_el$12, _$createComponent(TextExcerpt, {
             renderer: props,
             get text() {
-              return stripFrontmatter(props.editor?.draft() ?? props.content.content);
+              return markdown();
             },
             markdown: true
           }));
@@ -895,29 +924,40 @@ function PdfRenderer(props) {
             }
           });
         },
-        children: pdf => _$createComponent(PdfPreview, {
+        children: pdf => // Composed without the standalone heading: the host already names the file, and the frame keeps the
+        // file name as its accessible title.
+        _$createComponent(PdfPreview, {
           autoLoad: true,
           get title() {
             return props.file.path.slice(props.file.path.lastIndexOf("/") + 1);
           },
           request: async () => pdf,
-          "class": "k2b-content-file-view__pdf"
+          children: parts => (() => {
+            var _el$63 = _$getNextElement(_tmpl$16),
+              _el$64 = _el$63.firstChild,
+              [_el$65, _co$12] = _$getNextMarker(_el$64.nextSibling),
+              _el$66 = _el$65.nextSibling,
+              [_el$67, _co$13] = _$getNextMarker(_el$66.nextSibling);
+            _$insert(_el$63, () => parts.actions, _el$65, _co$12);
+            _$insert(_el$63, () => parts.content, _el$67, _co$13);
+            return _el$63;
+          })()
         })
       });
     },
     children: href => (() => {
-      var _el$63 = _$getNextElement(_tmpl$16);
+      var _el$68 = _$getNextElement(_tmpl$17);
       _$effect(_p$ => {
         var _v$9 = href(),
           _v$0 = props.file.path;
-        _v$9 !== _p$.e && _$setAttribute(_el$63, "data", _p$.e = _v$9);
-        _v$0 !== _p$.t && _$setAttribute(_el$63, "aria-label", _p$.t = _v$0);
+        _v$9 !== _p$.e && _$setAttribute(_el$68, "data", _p$.e = _v$9);
+        _v$0 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$0);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$63;
+      return _el$68;
     })()
   });
 }
@@ -928,24 +968,24 @@ function AudioRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$64 = _$getNextElement(_tmpl$17),
-        _el$65 = _el$64.firstChild;
-      _$addEventListener(_el$65, "error", props.onPreviewError);
-      _$insert(_el$65, () => messages().audioUnsupported);
+      var _el$69 = _$getNextElement(_tmpl$18),
+        _el$70 = _el$69.firstChild;
+      _$addEventListener(_el$70, "error", props.onPreviewError);
+      _$insert(_el$70, () => messages().audioUnsupported);
       _$effect(_p$ => {
         var _v$1 = props.crossOrigin,
           _v$10 = mediaSource(props),
           _v$11 = props.file.path;
-        _v$1 !== _p$.e && _$setAttribute(_el$65, "crossorigin", _p$.e = _v$1);
-        _v$10 !== _p$.t && _$setAttribute(_el$65, "src", _p$.t = _v$10);
-        _v$11 !== _p$.a && _$setAttribute(_el$65, "aria-label", _p$.a = _v$11);
+        _v$1 !== _p$.e && _$setAttribute(_el$70, "crossorigin", _p$.e = _v$1);
+        _v$10 !== _p$.t && _$setAttribute(_el$70, "src", _p$.t = _v$10);
+        _v$11 !== _p$.a && _$setAttribute(_el$70, "aria-label", _p$.a = _v$11);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined
       });
-      return _el$64;
+      return _el$69;
     }
   });
 }
@@ -956,24 +996,24 @@ function VideoRenderer(props) {
       return _$createComponent(DownloadAction, props);
     },
     get children() {
-      var _el$66 = _$getNextElement(_tmpl$18),
-        _el$67 = _el$66.firstChild;
-      _$addEventListener(_el$67, "error", props.onPreviewError);
-      _$insert(_el$67, () => messages().videoUnsupported);
+      var _el$71 = _$getNextElement(_tmpl$19),
+        _el$72 = _el$71.firstChild;
+      _$addEventListener(_el$72, "error", props.onPreviewError);
+      _$insert(_el$72, () => messages().videoUnsupported);
       _$effect(_p$ => {
         var _v$12 = props.crossOrigin,
           _v$13 = mediaSource(props),
           _v$14 = props.file.path;
-        _v$12 !== _p$.e && _$setAttribute(_el$67, "crossorigin", _p$.e = _v$12);
-        _v$13 !== _p$.t && _$setAttribute(_el$67, "src", _p$.t = _v$13);
-        _v$14 !== _p$.a && _$setAttribute(_el$67, "aria-label", _p$.a = _v$14);
+        _v$12 !== _p$.e && _$setAttribute(_el$72, "crossorigin", _p$.e = _v$12);
+        _v$13 !== _p$.t && _$setAttribute(_el$72, "src", _p$.t = _v$13);
+        _v$14 !== _p$.a && _$setAttribute(_el$72, "aria-label", _p$.a = _v$14);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined
       });
-      return _el$66;
+      return _el$71;
     }
   });
 }
@@ -993,13 +1033,13 @@ function BinaryRenderer(props) {
           return props.downloadHref;
         },
         children: href => (() => {
-          var _el$68 = _$getNextElement(_tmpl$19),
-            _el$69 = _el$68.firstChild,
-            _el$70 = _el$69.nextSibling,
-            [_el$71, _co$12] = _$getNextMarker(_el$70.nextSibling);
-          _$insert(_el$68, () => messages().download, _el$71, _co$12);
-          _$effect(() => _$setAttribute(_el$68, "href", href()));
-          return _el$68;
+          var _el$73 = _$getNextElement(_tmpl$20),
+            _el$74 = _el$73.firstChild,
+            _el$75 = _el$74.nextSibling,
+            [_el$76, _co$14] = _$getNextMarker(_el$75.nextSibling);
+          _$insert(_el$73, () => messages().download, _el$76, _co$14);
+          _$effect(() => _$setAttribute(_el$73, "href", href()));
+          return _el$73;
         })()
       });
     }
@@ -1128,7 +1168,8 @@ export default function FileView(props) {
     });
     if (unregister) onCleanup(unregister);
   });
-  const resolvedContent = createMemo(() => browserPreviewContent() ?? content());
+  // An errored resource throws when read; the error state below shows it instead.
+  const resolvedContent = createMemo(() => browserPreviewContent() ?? (content.error ? undefined : content()));
   const renderer = createMemo(() => {
     const loaded = resolvedContent();
     if (!loaded) return null;
@@ -1151,96 +1192,122 @@ export default function FileView(props) {
     saving: saveMutation.loading,
     save
   } : null;
+
+  // Undefined while loading; the host keeps its own placeholder until the shown file decides.
+  const documentTitle = createMemo(() => {
+    if (!props.onDocumentTitle) return undefined;
+    if (content.error) return null;
+    const loaded = resolvedContent();
+    if (!loaded) return undefined;
+    if (renderer()?.component !== MarkdownRenderer) return null;
+    return leadingMarkdownTitle(stripFrontmatter(editor()?.draft() ?? loaded.content))?.title ?? null;
+  });
+  createEffect(() => {
+    const title = documentTitle();
+    if (title !== undefined) props.onDocumentTitle?.(title);
+  });
   return (() => {
-    var _el$72 = _$getNextElement(_tmpl$7);
-    _$insert(_el$72, _$createComponent(Switch, {
+    var _el$77 = _$getNextElement(_tmpl$21);
+    _$insert(_el$77, _$createComponent(FileViewHost.Provider, {
+      value: {
+        get plain() {
+          return props.variant === "plain";
+        },
+        get liftTitle() {
+          return Boolean(props.onDocumentTitle);
+        }
+      },
       get children() {
-        return [_$createComponent(Match, {
-          get when() {
-            return _$memo(() => !!content.loading)() && content() === undefined;
-          },
-          get children() {
-            return _$createComponent(Placeholder, {
-              icon: "ti ti-loader-2",
-              get title() {
-                return messages().loading;
-              }
-            });
-          }
-        }), _$createComponent(Match, {
-          get when() {
-            return content.error;
-          },
+        return _$createComponent(Switch, {
           get children() {
-            return _$createComponent(Placeholder, {
-              icon: "ti ti-alert-circle",
-              get title() {
-                return messages().failedLoadFile;
+            return [_$createComponent(Match, {
+              get when() {
+                return _$memo(() => !!content.loading)() && content() === undefined;
               },
-              get description() {
-                return String(content.error?.message ?? "");
+              get children() {
+                return _$createComponent(Placeholder, {
+                  icon: "ti ti-loader-2",
+                  get title() {
+                    return messages().loading;
+                  }
+                });
               }
-            });
-          }
-        }), _$createComponent(Match, {
-          get when() {
-            return _$memo(() => !!resolvedContent())() && renderer();
-          },
-          children: active => {
-            const Renderer = active().component;
-            return _$createComponent(Renderer, {
-              get previewLines() {
-                return props.previewLines;
-              },
-              get onExpandPreview() {
-                return props.onExpandPreview;
-              },
-              get headingScale() {
-                return props.headingScale;
-              },
-              get previewPreferencesKey() {
-                return props.previewPreferencesKey;
+            }), _$createComponent(Match, {
+              get when() {
+                return content.error;
               },
-              get file() {
-                return props.file;
-              },
-              get content() {
-                return resolvedContent();
-              },
-              get previewHref() {
-                return nativePreviewHref();
-              },
-              get crossOrigin() {
-                return props.crossOrigin;
-              },
-              get onPreviewError() {
-                return props.onPreviewError;
-              },
-              get downloadHref() {
-                return props.downloadHref ?? null;
+              get children() {
+                return _$createComponent(Placeholder, {
+                  icon: "ti ti-alert-circle",
+                  get title() {
+                    return messages().failedLoadFile;
+                  },
+                  get description() {
+                    return String(content.error?.message ?? "");
+                  }
+                });
+              }
+            }), _$createComponent(Match, {
+              get when() {
+                return _$memo(() => !!resolvedContent())() && renderer();
               },
-              get editor() {
-                return editor();
+              children: active => {
+                const Renderer = active().component;
+                return _$createComponent(Renderer, {
+                  get previewLines() {
+                    return props.previewLines;
+                  },
+                  get onExpandPreview() {
+                    return props.onExpandPreview;
+                  },
+                  get headingScale() {
+                    return props.headingScale;
+                  },
+                  get previewPreferencesKey() {
+                    return props.previewPreferencesKey;
+                  },
+                  get file() {
+                    return props.file;
+                  },
+                  get content() {
+                    return resolvedContent();
+                  },
+                  get previewHref() {
+                    return nativePreviewHref();
+                  },
+                  get crossOrigin() {
+                    return props.crossOrigin;
+                  },
+                  get onPreviewError() {
+                    return props.onPreviewError;
+                  },
+                  get downloadHref() {
+                    return props.downloadHref ?? null;
+                  },
+                  get editor() {
+                    return editor();
+                  }
+                });
               }
-            });
+            })];
           }
-        })];
+        });
       }
     }));
     _$effect(_p$ => {
       var _v$15 = `k2b-content-file-view ${props.class ?? ""}`,
         _v$16 = props.variant,
         _v$17 = props.previewLines !== undefined ? "true" : undefined;
-      _v$15 !== _p$.e && _$className(_el$72, _p$.e = _v$15);
-      _v$16 !== _p$.t && _$setAttribute(_el$72, "data-variant", _p$.t = _v$16);
-      _v$17 !== _p$.a && _$setAttribute(_el$72, "data-excerpt", _p$.a = _v$17);
+      _v$15 !== _p$.e && _$className(_el$77, _p$.e = _v$15);
+      _v$16 !== _p$.t && _$setAttribute(_el$77, "data-variant", _p$.t = _v$16);
+      _v$17 !== _p$.a && _$setAttribute(_el$77, "data-excerpt", _p$.a = _v$17);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$72;
+    return _el$77;
   })();
 }
 _$delegateEvents(["keydown", "input"]);