@homecode/ui 5.20.20 → 5.20.22

package/dist/esm/index.js

@@ -24,12 +24,13 @@ export { Flex } from './src/components/Flex/Flex.js';
 export { FoldedLine } from './src/components/FoldedLine/FoldedLine.js';
 export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister } from './src/components/FoldedLine/FoldedLineActionsContext.js';
 export { Form } from './src/components/Form/Form.js';
-export { FormattedText } from './src/components/FormattedText/FormattedText.js';
+export { FormattedText, findJsonEndExclusive } from './src/components/FormattedText/FormattedText.js';
 export { Gap } from './src/components/Gap/Gap.js';
 export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.js';
 export { GridLayout } from './src/components/GridLayout/GridLayout.js';
 export { Heading } from './src/components/Heading/Heading.js';
 export { Icon } from './src/components/Icon/Icon.js';
+export { Img } from './src/components/Img/Img.js';
 export { Input } from './src/components/Input/Input.js';
 export { InputFile } from './src/components/InputFile/InputFile.js';
 export { Label } from './src/components/Label/Label.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -64,6 +64,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
 import '@tiptap/core';

package/dist/esm/src/components/FormattedText/FormattedText.js

@@ -108,7 +108,24 @@ function applyInjectors(text, injectors) {
     });
     return result;
 }
-function FormattedText({ text, className, onButtonClick, }) {
+function FormattedText({ text, className, onButtonClick, quotes, injectors, breaks = true, }) {
+    // Without `<br>`s the text keeps its own newlines (pre-wrap), so a block, such
+    // as a table, swallows the blank lines after it instead of showing them.
+    const blankLinesAfter = (content, from) => breaks ? 0 : content.slice(from).match(/^\s*/)[0].length;
+    /** A run of `> ` lines, grayed with a bar down its left side. */
+    const injectQuote = (content) => {
+        const matches = content.match(/(?:^|\n)(>[^\n]*(?:\n>[^\n]*)*)(?:\n|$)/);
+        if (!matches)
+            return null;
+        const lines = matches[1]
+            .split('\n')
+            .map(line => line.replace(/^>[ \t]?/, ''));
+        return {
+            elem: (jsx("div", { className: S.quote, "data-quote": true, children: lines.join('\n') })),
+            index: matches.index,
+            length: matches[0].length,
+        };
+    };
     const injectLines = (content) => {
         const matches = content.match(/(^|\n)---[ \t]*(?:\n|$)/);
         if (!matches)
@@ -266,6 +283,7 @@ function FormattedText({ text, className, onButtonClick, }) {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const processCellContent = (value, depth = 0) => applyInjectors(value, [
         injectCodeBlock,
+        ...(injectors ?? []),
         injectPrettyJson,
         ...(depth === 0
             ? [
@@ -291,7 +309,10 @@ function FormattedText({ text, className, onButtonClick, }) {
         injectButtons,
     ]);
     const injectHeading = (content) => {
-        const matches = content.match(/(^|\n)(#{1,6})\s+([^\n]+)/);
+        // Without `<br>`s the text keeps its own newlines (pre-wrap), so a heading,
+        // which is a block, swallows the blank lines around it instead of leaving
+        // an extra empty line.
+        const matches = content.match(breaks ? /(^|\n)(#{1,6})\s+([^\n]+)/ : /(^|\n+)(#{1,6})[ \t]+([^\n]+)\n*/);
         if (!matches)
             return null;
         const Tag = headingTags[Math.min(matches[2].length, 6) - 1];
@@ -350,13 +371,18 @@ function FormattedText({ text, className, onButtonClick, }) {
         return {
             elem: (jsx(Table, { size: "s", variant: "plain", columns: columns, data: tableData, className: S.table })),
             index: matches.index + (matches[1]?.length || 0),
-            length: matches[0].length - (matches[1]?.length || 0),
+            length: matches[0].length -
+                (matches[1]?.length || 0) +
+                blankLinesAfter(content, matches.index + matches[0].length),
         };
     };
     return (jsx("div", { className: className, children: applyInjectors(text, [
             injectTables,
             injectCodeBlock,
+            ...(injectors ?? []),
             injectPrettyJson,
+            // After code, so a `> ` line inside a code block stays code.
+            ...(quotes ? [injectQuote] : []),
             injectHeading,
             injectLines,
             injectLinks,
@@ -365,8 +391,8 @@ function FormattedText({ text, className, onButtonClick, }) {
             injectBullet,
             injectNumbered,
             injectButtons,
-            injectBreaks,
+            ...(breaks ? [injectBreaks] : []),
         ]) }));
 }
 
-export { FormattedText, hrefForFormattedLink };
+export { FormattedText, findJsonEndExclusive, hrefForFormattedLink };

package/dist/esm/src/components/FormattedText/FormattedText.styl.js

@@ -1,5 +1,5 @@
-var css_248z = ".FormattedText_bullet__vbqlq{display:inline-block;margin-bottom:2px;margin-left:var(--p-2);margin-right:2px}.FormattedText_bullet__vbqlq:before{background-color:var(--accent-color);border-radius:50%;content:\"\";display:block;height:6px;margin:0 4px;width:6px}.FormattedText_numberedIndex__rZ6Kt{font-feature-settings:\"tnum\";color:var(--accent-color);display:inline-block;font-variant-numeric:tabular-nums;margin-left:var(--p-2);margin-right:6px;min-width:1.25em}.FormattedText_line__c2bmE{background-color:var(--accent-color-alpha-200);border-radius:2px;height:2px;margin:var(--p-2) 0;width:100%}.FormattedText_codeBlock__Xrbvn,.FormattedText_codeInline__jCbNL{background-color:var(--decent-color-alpha-400);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--decent-color-alpha-500);font-family:monospace;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_codeInline__jCbNL{border-radius:3px;display:inline;font-size:90%;padding:0 4px}.FormattedText_codeBlock__Xrbvn,.FormattedText_jsonPre__qOGmo{display:block;font-size:90%;margin:var(--p-2) 0;overflow-x:auto;padding:var(--p-2);white-space:pre-wrap}.FormattedText_jsonPre__qOGmo{background-color:var(--decent-color-alpha-300);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--accent-color-alpha-50);font-family:monospace;max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_table__ipMMS{margin-bottom:10px}";
-var S = {"bullet":"FormattedText_bullet__vbqlq","numberedIndex":"FormattedText_numberedIndex__rZ6Kt","line":"FormattedText_line__c2bmE","codeInline":"FormattedText_codeInline__jCbNL","codeBlock":"FormattedText_codeBlock__Xrbvn","jsonPre":"FormattedText_jsonPre__qOGmo","table":"FormattedText_table__ipMMS"};
+var css_248z = ".FormattedText_bullet__vbqlq{display:inline-block;margin-bottom:2px;margin-left:var(--p-2);margin-right:2px}.FormattedText_bullet__vbqlq:before{background-color:var(--accent-color);border-radius:50%;content:\"\";display:block;height:6px;margin:0 4px;width:6px}.FormattedText_numberedIndex__rZ6Kt{font-feature-settings:\"tnum\";color:var(--accent-color);display:inline-block;font-variant-numeric:tabular-nums;margin-left:var(--p-2);margin-right:6px;min-width:1.25em}.FormattedText_quote__BBm-M{color:var(--accent-color-alpha-600);font-size:85%;margin:0 0 var(--p-1);padding:2px 0 2px calc(4px + var(--p-2));position:relative;white-space:pre-wrap}.FormattedText_quote__BBm-M:before{background-color:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";left:2px;opacity:.3;position:absolute;top:2px;width:4px}.FormattedText_line__c2bmE{background-color:var(--accent-color-alpha-200);border-radius:2px;height:2px;margin:var(--p-2) 0;width:100%}.FormattedText_codeBlock__Xrbvn,.FormattedText_codeInline__jCbNL{background-color:var(--decent-color-alpha-400);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--decent-color-alpha-500);font-family:monospace;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_codeInline__jCbNL{border-radius:3px;display:inline;font-size:90%;padding:0 4px}.FormattedText_codeBlock__Xrbvn,.FormattedText_jsonPre__qOGmo{display:block;font-size:90%;margin:var(--p-2) 0;overflow-x:auto;padding:var(--p-2);white-space:pre-wrap}.FormattedText_jsonPre__qOGmo{background-color:var(--decent-color-alpha-300);border-radius:var(--p-2);box-shadow:0 1px 1px var(--accent-color-alpha-50),inset 0 1px 1px var(--accent-color-alpha-50);font-family:monospace;max-width:100%;-webkit-user-select:text;-moz-user-select:text;user-select:text}.FormattedText_table__ipMMS{margin-bottom:10px}";
+var S = {"bullet":"FormattedText_bullet__vbqlq","numberedIndex":"FormattedText_numberedIndex__rZ6Kt","quote":"FormattedText_quote__BBm-M","line":"FormattedText_line__c2bmE","codeInline":"FormattedText_codeInline__jCbNL","codeBlock":"FormattedText_codeBlock__Xrbvn","jsonPre":"FormattedText_jsonPre__qOGmo","table":"FormattedText_table__ipMMS"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

package/dist/esm/src/components/Img/Img.js

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState } from 'react';
+import { Icon } from '../Icon/Icon.js';
+import S from './Img.styl.js';
+
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+function Img({ src, alt = '', fallback, fallbackClassName, className, onError, ...rest }) {
+    const [failedSrc, setFailedSrc] = useState(null);
+    // Keyed by src, so a new src gets a fresh attempt.
+    const isFailed = !src || failedSrc === src;
+    if (isFailed) {
+        if (fallback !== undefined)
+            return jsx(Fragment, { children: fallback });
+        return (jsx("span", { className: cn(S.fallback, className, fallbackClassName), role: "img", "aria-label": alt || undefined, children: jsx(Icon, { type: "brokenImage", className: S.fallbackIcon }) }));
+    }
+    return (jsx("img", { ...rest, src: src, alt: alt, className: className, onError: event => {
+            setFailedSrc(src);
+            onError?.(event);
+        } }));
+}
+
+export { Img };

package/dist/esm/src/components/Img/Img.styl.js

@@ -0,0 +1,20 @@
+var css_248z = ".Img_fallback__crzoQ{align-items:center;color:currentColor;display:inline-flex;justify-content:center}.Img_fallbackIcon__oyxkV{height:50%;max-height:48px;max-width:48px;opacity:.4;width:50%}";
+var S = {"fallback":"Img_fallback__crzoQ","fallbackIcon":"Img_fallbackIcon__oyxkV"};
+            if (typeof document !== 'undefined') {
+              var __uilibHead = document.head || document.getElementsByTagName('head')[0];
+              if (__uilibHead) {
+                var __uilibStyle = document.createElement('style');
+                __uilibStyle.setAttribute('data-uilib-css', '');
+                __uilibStyle.appendChild(document.createTextNode(css_248z));
+                var __uilibLink = __uilibHead.querySelector('link[rel="stylesheet"]');
+                var __uilibInline = __uilibHead.querySelector('style:not([data-uilib-css])');
+                var __uilibAnchor = __uilibLink || __uilibInline;
+                if (__uilibLink && __uilibInline && (__uilibLink.compareDocumentPosition(__uilibInline) & 4) === 0) {
+                  __uilibAnchor = __uilibInline;
+                }
+                if (__uilibAnchor) __uilibHead.insertBefore(__uilibStyle, __uilibAnchor);
+                else __uilibHead.appendChild(__uilibStyle);
+              }
+            }
+
+export { S as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -66,6 +66,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../LightBox/LightBox.styl.js';
 import '../NestedMenu/NestedMenu.js';
 import '../Notifications/store.js';

package/dist/esm/src/components/PromptComposer/promptComposerPlaceholder.js

@@ -0,0 +1,10 @@
+/**
+ * Placeholder text for the composer's empty paragraphs. Only a wholly empty
+ * composer shows it: a quote or list with an empty line after it already is
+ * content, so it keeps no hint.
+ */
+function promptComposerPlaceholder(text) {
+    return ({ editor }) => (editor.isEmpty ? text : '');
+}
+
+export { promptComposerPlaceholder };

package/dist/esm/src/components/PromptComposer/usePromptComposerEditor.js

@@ -3,6 +3,7 @@ import { Placeholder } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import S from './PromptComposer.styl.js';
+import { promptComposerPlaceholder } from './promptComposerPlaceholder.js';
 import { createPromptBlocksExtension, isInPromptBlock } from '../../tiptap/prompt-blocks/createPromptBlocksExtension.js';
 import { promptBlocksDoc } from '../../tiptap/prompt-blocks/promptBlocksText.js';
 import { createLinkHighlightExtension } from '../../tiptap/link-highlight/createLinkHighlightExtension.js';
@@ -110,7 +111,7 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, sla
             }),
             NonInclusiveLink,
             Placeholder.configure({
-                placeholder: placeholderText,
+                placeholder: promptComposerPlaceholder(placeholderText),
                 showOnlyWhenEditable: true,
                 emptyNodeClass: S.promptComposerEmptyNode,
             }),

package/dist/esm/types/src/components/FormattedText/FormattedText.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { FormattedTextProps } from './FormattedText.types';
 export declare function hrefForFormattedLink(url: string): string;
-export declare function FormattedText({ text, className, onButtonClick, }: FormattedTextProps): React.JSX.Element;
+export declare function findJsonEndExclusive(content: string, start: number): number;
+export declare function FormattedText({ text, className, onButtonClick, quotes, injectors, breaks, }: FormattedTextProps): React.JSX.Element;

package/dist/esm/types/src/components/FormattedText/FormattedText.types.d.ts

@@ -1,3 +1,10 @@
+import type React from 'react';
+export type InjectionResult = {
+    elem: React.ReactNode;
+    index: number;
+    length: number;
+} | null;
+export type Injector = (content: string) => InjectionResult;
 export type FormattedTextProps = {
     text: string;
     className?: string;
@@ -5,4 +12,7 @@ export type FormattedTextProps = {
         text: string;
         [name: string]: string;
     }) => void;
+    quotes?: boolean;
+    injectors?: Injector[];
+    breaks?: boolean;
 };

package/dist/esm/types/src/components/FormattedText/index.d.ts

@@ -1,2 +1,2 @@
-export { FormattedText } from './FormattedText';
-export type { FormattedTextProps } from './FormattedText.types';
+export { FormattedText, findJsonEndExclusive } from './FormattedText';
+export type { FormattedTextProps, InjectionResult, Injector, } from './FormattedText.types';

package/dist/esm/types/src/components/Img/Img.d.ts

@@ -0,0 +1,7 @@
+import * as T from './Img.types';
+export type ImgProps = T.Props;
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+export declare function Img({ src, alt, fallback, fallbackClassName, className, onError, ...rest }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/Img/Img.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Img/Img.types.d.ts

@@ -0,0 +1,10 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+export type Props = ImgHTMLAttributes<HTMLImageElement> & {
+    /**
+     * Rendered instead of the image when it fails to load. Defaults to a
+     * broken-image icon. Pass `null` to render nothing.
+     */
+    fallback?: ReactNode;
+    /** Class for the default fallback wrapper. */
+    fallbackClassName?: string;
+};

package/dist/esm/types/src/components/PromptComposer/promptComposerPlaceholder.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * Placeholder text for the composer's empty paragraphs. Only a wholly empty
+ * composer shows it: a quote or list with an empty line after it already is
+ * content, so it keeps no hint.
+ */
+export declare function promptComposerPlaceholder(text: string): ({ editor }: {
+    editor: Editor;
+}) => string;

package/dist/esm/types/src/components/PromptComposer/promptComposerPlaceholder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './Gallery/Gallery';
 export * from './GridLayout/GridLayout';
 export * from './Heading/Heading';
 export * from './Icon/Icon';
+export * from './Img/Img';
 export * from './Input/Input';
 export * from './InputFile/InputFile';
 export * from './Label/Label';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.20",
+  "version": "5.20.22",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",