@hearthscale/app-ui 0.2.0 → 0.2.2

package/dist/TOKENS.md

@@ -58,7 +58,7 @@ one family apart.
 | `--hov-page`               | `color-mix(in srgb, var(--card) 65%, var(--win))`                         |                                                                           | yes   | yes       |                                      |
 | `--plate`                  | `color-mix(in srgb, var(--card) 60%, var(--win))`                         |                                                                           | yes   | yes       |                                      |
 | `--hov-plate`              | `color-mix(in srgb, var(--text) 7%, var(--plate))`                        |                                                                           | yes   | yes       |                                      |
-| `--press`                  | `none`                                                                    |                                                                           | yes   | no        |                                      |
+| `--pressed`                | `color-mix(in srgb, var(--text) 14%, transparent)`                        |                                                                           | yes   | yes       |                                      |
 | `--act`                    | `rgba(158, 166, 182, 0.19)`                                               | `rgba(255, 255, 255, 0.55)`                                               | yes   | yes       |                                      |
 | `--accent`                 | `#ff9d2e`                                                                 |                                                                           | yes   | yes       |                                      |
 | `--link`                   | `var(--accent)`                                                           |                                                                           | yes   | yes       |                                      |
@@ -307,6 +307,7 @@ one family apart.
 | `--dur-arrive`             | `0.6s`                                                                    |                                                                           | yes   | no        | reduced motion: `0s`                 |
 | `--dur-glow`               | `0.35s`                                                                   |                                                                           | yes   | no        |                                      |
 | `--dur-scroll`             | `25ms`                                                                    |                                                                           | yes   | no        | reduced motion: `0s`                 |
+| `--press`                  | `none`                                                                    |                                                                           | yes   | no        |                                      |
 | `--press-fade`             | `1`                                                                       |                                                                           | yes   | no        |                                      |
 | `--hov-lift`               | `none`                                                                    |                                                                           | yes   | no        |                                      |
 | `--fs-mono-xs`             | `10.5px`                                                                  |                                                                           | yes   | no        |                                      |

package/dist/chunks/{chunk-E3RFTBRS.js → chunk-SFZCPZQD.js}

@@ -84,6 +84,7 @@ var REMIX = {
   link: "M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z",
   "lock-fill": "M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17ZM11 14V18H13V14H11Z",
   "lock-unlock-line": "M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z",
+  "logout-box-r-line": "M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z",
   "mail-line": "M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z",
   "menu-line": "M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z",
   "mic-fill": "M11.9998 1C14.7612 1 16.9998 3.23858 16.9998 6V10C16.9998 12.7614 14.7612 15 11.9998 15C9.23833 15 6.99976 12.7614 6.99976 10V6C6.99976 3.23858 9.23833 1 11.9998 1ZM3.05469 11H5.07065C5.55588 14.3923 8.47329 17 11.9998 17C15.5262 17 18.4436 14.3923 18.9289 11H20.9448C20.4837 15.1716 17.1714 18.4839 12.9998 18.9451V23H10.9998V18.9451C6.82814 18.4839 3.51584 15.1716 3.05469 11Z",
@@ -285,6 +286,7 @@ var TranslateGlyph = remix("translate", "translate-2");
 var LinkGlyph = remix("link", "link");
 var MailGlyph = remix("mail", "mail-line");
 var KeyGlyph = remix("key", "key-2-line");
+var SignOutGlyph = remix("sign-out", "logout-box-r-line");
 var RestartGlyph = remix("restart", "restart-line");
 var PROGRESS = [
   remix("progress-1", "progress-1-fill"),
@@ -319,6 +321,7 @@ var FolderAddGlyph = remix("folder-add", "folder-add-line");
 
 export {
   HelpGlyph,
+  TrashGlyph,
   ChevronRightGlyph,
   ChevronDownGlyph,
   CheckGlyph,

package/dist/index.d.ts

@@ -394,6 +394,7 @@ declare function useFloatingTips(placement?: TipPlacement): (key: string, text:
     hover: {
         onMouseEnter: (e: MouseEvent<HTMLElement>) => void;
         onMouseLeave: () => void;
+        onMouseDown: () => void;
     };
     tip: react.JSX.Element | null;
 };
@@ -406,13 +407,16 @@ interface ShellConfirmProps {
     /** The action's look: `danger` where the action destroys something,
      *  `primary` where it installs or buys. */
     tone?: 'danger' | 'primary';
+    /** The mark before the action's label. A `danger` action without one
+     *  carries the delete mark. */
+    icon?: ReactNode;
     onConfirm: () => void;
     onCancel: () => void;
 }
 /** A confirmation dialog styled by the theme, with presence and operability
  *  maintained by the guard layer. It asks the person while it shows.
  *  @category Overlays */
-declare function ShellConfirm({ title, body, action, tone, onConfirm, onCancel, }: ShellConfirmProps): react.JSX.Element;
+declare function ShellConfirm({ title, body, action, tone, icon, onConfirm, onCancel, }: ShellConfirmProps): react.JSX.Element;
 
 interface OverlayScrollProps {
     /** The scroller's own classes: its overflow, its padding and the gap

package/dist/index.js

@@ -8,8 +8,9 @@ import {
   ExternalGlyph,
   HelpGlyph,
   PackageGlyph,
-  SearchGlyph
-} from "./chunks/chunk-E3RFTBRS.js";
+  SearchGlyph,
+  TrashGlyph
+} from "./chunks/chunk-SFZCPZQD.js";
 
 // ../ui/dist/Button.js
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -422,9 +423,12 @@ function useFloatingTips(placement) {
   const [shown, setShown] = useState(null);
   const [hide] = useState(() => () => setShown(null));
   return (key, text, chip) => ({
+    // A press closes the tip until the pointer leaves, as the CSS tip does,
+    // so no tip stays under a menu its element opens.
     hover: {
       onMouseEnter: (e) => setShown({ key, anchor: e.currentTarget }),
-      onMouseLeave: () => setShown(null)
+      onMouseLeave: () => setShown(null),
+      onMouseDown: () => setShown(null)
     },
     tip: text && shown?.key === key && shown.anchor.isConnected ? _jsx5(FloatingTip, { anchor: shown.anchor, text, chip, ...placement && { placement }, onPress: hide }) : null
   });
@@ -434,7 +438,7 @@ function useFloatingTips(placement) {
 function Chip({ children, tone = "neutral", icon, title, selected, onClick }) {
   const tips = useFloatingTips();
   const { hover, tip } = tips("chip", title);
-  const content = _jsxs4(_Fragment2, { children: [icon && _jsx6("span", { className: "hs-chip-mark", children: icon }), _jsx6("span", { className: "hs-chip-text", children }), tip] });
+  const content = _jsxs4(_Fragment2, { children: [icon && _jsx6("span", { className: "hs-chip-mark", children: icon }), _jsx6("span", { className: "hs-chip-text", ...selected !== void 0 && typeof children === "string" && { "data-text": children }, children }), tip] });
   if (selected !== void 0) {
     return _jsx6("button", { type: "button", className: "hs-chip", "data-sel": selected ? "true" : "false", "aria-pressed": selected, onClick, ...hover, children: content });
   }
@@ -616,7 +620,7 @@ function useAsksPerson(on) {
 }
 
 // ../ui/dist/ShellConfirm.js
-function ShellConfirm({ title, body, action, tone = "danger", onConfirm, onCancel }) {
+function ShellConfirm({ title, body, action, tone = "danger", icon = tone === "danger" ? _jsx14(TrashGlyph, { size: 13 }) : void 0, onConfirm, onCancel }) {
   useAsksPerson(true);
   useEffect5(() => {
     const onKey = (e) => {
@@ -631,7 +635,7 @@ function ShellConfirm({ title, body, action, tone = "danger", onConfirm, onCance
   return _jsx14("div", { className: "hs-confirm", onClick: (e) => {
     e.stopPropagation();
     onCancel();
-  }, children: _jsxs8("div", { className: "hs-confirm-box", role: "dialog", onClick: (e) => e.stopPropagation(), children: [_jsx14("span", { className: "hs-confirm-title", children: title }), _jsx14("span", { className: "hs-confirm-body", children: body }), _jsxs8("div", { className: "hs-confirm-footer", children: [_jsx14(Button, { className: "hs-confirm-cancel", onClick: onCancel, children: "Cancel" }), _jsx14(Button, { className: "hs-confirm-action", variant: tone, onClick: onConfirm, children: action })] })] }) });
+  }, children: _jsxs8("div", { className: "hs-confirm-box", role: "dialog", onClick: (e) => e.stopPropagation(), children: [_jsx14("span", { className: "hs-confirm-title", children: title }), _jsx14("span", { className: "hs-confirm-body", children: body }), _jsxs8("div", { className: "hs-confirm-footer", children: [_jsx14(Button, { className: "hs-confirm-cancel", onClick: onCancel, children: "Cancel" }), _jsx14(Button, { className: "hs-confirm-action", variant: tone, icon, onClick: onConfirm, children: action })] })] }) });
 }
 
 // ../ui/dist/OverlayScroll.js

package/dist/markdown.js

@@ -1,6 +1,6 @@
 import {
   CopyGlyph
-} from "./chunks/chunk-E3RFTBRS.js";
+} from "./chunks/chunk-SFZCPZQD.js";
 
 // ../ui/dist/chat/markdown.js
 import { jsx as _jsx5, Fragment as _Fragment } from "react/jsx-runtime";

package/dist/ui.css

@@ -3670,6 +3670,17 @@
     align-items: center;
     gap: calc(var(--space) * 1.25);
   }
+  .hs-chip[data-sel] > .hs-chip-text[data-text] {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  .hs-chip[data-sel] > .hs-chip-text[data-text]::after {
+    content: attr(data-text);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: var(--fw-semi);
+  }
   .hs-chip[data-sel='true'] {
     background: var(--hov);
     border-color: var(--tipline);
@@ -3873,6 +3884,7 @@
     line-height: 1.15;
     color: var(--text);
     text-align: center;
+    text-wrap: balance;
   }
   .hs-walk-sub {
     margin-top: calc(var(--space) * 2);
@@ -5451,7 +5463,7 @@
     color: var(--text);
   }
   .hs-button:is( [data-variant='secondary'], [data-variant='danger'], [data-variant='ghost'] ):active:not(:disabled) {
-    background: var(--press);
+    background: var(--pressed);
   }
   .hs-button:focus-visible {
     outline: none;
@@ -5498,7 +5510,7 @@
     border: 0;
     border-radius: var(--r-ctl);
     background: transparent;
-    color: var(--dim);
+    color: var(--mut);
     cursor: pointer;
   }
   .hs-icon-button[data-size='sm'] {
@@ -5519,7 +5531,7 @@
     color: var(--text);
   }
   .hs-icon-button:active:not(:disabled) {
-    background: var(--press);
+    background: var(--pressed);
     color: var(--text);
   }
   .hs-icon-button:focus-visible {
@@ -10497,9 +10509,9 @@
     @supports (color: color-mix(in lab, red, red)) {
       --hov-plate: color-mix(in srgb, var(--text) 7%, var(--plate));
     }
-    --press: var(--text);
+    --pressed: var(--text);
     @supports (color: color-mix(in lab, red, red)) {
-      --press: color-mix(in srgb, var(--text) 14%, transparent);
+      --pressed: color-mix(in srgb, var(--text) 14%, transparent);
     }
     --act: rgba(158, 166, 182, 0.19);
     --accent: #ff9d2e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthscale/app-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "The UI kit of a Hearthscale app's view: the design system's tokens, hs-* classes and React parts, and the whole Remix Icon set.",
   "license": "MIT",
   "homepage": "https://hearthscale.com/docs/developers/views/kit",