@fungi.computer/caps 0.2.0 → 0.3.1

package/dist/blocks/command-menu.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 /** Caller-provided command menu item data. */
 export type CommandMenuItem = {
     description?: string;
@@ -7,6 +7,8 @@ export type CommandMenuItem = {
     label: string;
     /** Key hint shown before the label, e.g. `z` in a which-key list. */
     shortcut?: string;
+    /** Decorative leading visual, such as a thumbnail, shown before the label. */
+    media?: ReactNode;
 };
 /** Props accepted by CommandMenu. */
 export type CommandMenuProps = Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
@@ -15,6 +17,12 @@ export type CommandMenuProps = Omit<HTMLAttributes<HTMLUListElement>, "children"
     onSelect: (id: string) => void;
     /** Caller-owned selected state; distinct from local keyboard focus. */
     selected?: string;
+    /**
+     * `end` (default) sets each description at the row's end. `inline` keeps the
+     * label at its own width and starts the description right after it,
+     * truncated, so long descriptions never push the row's text apart.
+     */
+    descriptionPlacement?: "end" | "inline";
 };
 /** A single-focus listbox with local navigation and caller-owned selection. */
 export declare const CommandMenu: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
@@ -23,4 +31,10 @@ export declare const CommandMenu: import("react").ForwardRefExoticComponent<Omit
     onSelect: (id: string) => void;
     /** Caller-owned selected state; distinct from local keyboard focus. */
     selected?: string;
+    /**
+     * `end` (default) sets each description at the row's end. `inline` keeps the
+     * label at its own width and starts the description right after it,
+     * truncated, so long descriptions never push the row's text apart.
+     */
+    descriptionPlacement?: "end" | "inline";
 } & import("react").RefAttributes<HTMLUListElement>>;

package/dist/blocks/command-menu.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useId, useCallback, useImperativeHandle, useRef,
 import { useGlide } from "../lib/glide.js";
 import { useSelectableCollection } from "../components/selectable.js";
 /** A single-focus listbox with local navigation and caller-owned selection. */
-export const CommandMenu = forwardRef(function CommandMenu({ className, items, onKeyDown, onSelect, selected, ...props }, ref) {
+export const CommandMenu = forwardRef(function CommandMenu({ className, descriptionPlacement = "end", items, onKeyDown, onSelect, selected, ...props }, ref) {
     const instanceId = useId();
     const list = useRef(null);
     useImperativeHandle(ref, () => list.current);
@@ -66,5 +66,11 @@ export const CommandMenu = forwardRef(function CommandMenu({ className, items, o
                 ].join(" "), "aria-keyshortcuts": item.shortcut, "data-search-option": item.id, id: optionId(item.id), onClick: () => {
                     if (!item.disabled)
                         onSelect(item.id);
-                }, role: "option", children: [item.shortcut ? (_jsx("kbd", { className: "kbd kbd-sm min-w-6 shrink-0", children: item.shortcut })) : null, _jsx("span", { className: "flex-1 truncate", children: item.label }), item.description ? (_jsx("span", { className: "text-xs text-base-content", children: item.description })) : null] }) }, item.id))) }));
+                }, role: "option", children: [item.shortcut ? (_jsx("kbd", { className: "kbd kbd-sm min-w-6 shrink-0", children: item.shortcut })) : null, item.media ? (_jsx("span", { "aria-hidden": "true", className: "flex shrink-0", children: item.media })) : null, _jsx("span", { className: descriptionPlacement === "inline"
+                            ? "max-w-[50%] shrink-0 truncate"
+                            : "flex-1 truncate", children: item.label }), item.description ? (_jsx("span", { className: descriptionPlacement === "inline"
+                            ? "min-w-0 flex-1 truncate text-xs text-base-content"
+                            : "text-xs text-base-content", title: descriptionPlacement === "inline"
+                            ? item.description
+                            : undefined, children: item.description })) : null] }) }, item.id))) }));
 });

package/dist/blocks/release-tag.d.ts

@@ -10,11 +10,13 @@ export type ReleaseTagProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
     title: readonly string[];
     /** A small accent strip under the title, such as "Update". */
     label?: ReactNode;
-    entries: readonly ReleaseTagEntry[];
+    /** Names and versions ruled under the page; omit for a tag with none. */
+    entries?: readonly ReleaseTagEntry[];
 };
 /**
  * A release badge: a torn-off calendar page with binder rings, a stacked
- * title, one accent strip and a ruled list of names and versions below.
+ * title, one accent strip and an optional ruled list of names and versions
+ * below.
  * Presentation only; the caller supplies every word.
  */
 export declare function ReleaseTag({ className, entries, label, title, ...props }: ReleaseTagProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/release-tag.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 /**
  * A release badge: a torn-off calendar page with binder rings, a stacked
- * title, one accent strip and a ruled list of names and versions below.
+ * title, one accent strip and an optional ruled list of names and versions
+ * below.
  * Presentation only; the caller supplies every word.
  */
-export function ReleaseTag({ className, entries, label, title, ...props }) {
-    return (_jsxs("aside", { ...props, className: cn("caps-release-tag", className), children: [_jsxs("div", { className: "caps-release-tag-page", children: [_jsxs("span", { "aria-hidden": "true", className: "caps-release-tag-rings", children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("p", { className: "caps-release-tag-title", children: title.map((line) => (_jsx("span", { children: line }, line))) }), label ? _jsx("p", { className: "caps-release-tag-label", children: label }) : null] }), _jsx("dl", { className: "caps-release-tag-entries", children: entries.map((entry) => (_jsxs("div", { children: [_jsx("dt", { children: entry.name }), _jsx("dd", { children: entry.version })] }, entry.name))) })] }));
+export function ReleaseTag({ className, entries = [], label, title, ...props }) {
+    return (_jsxs("aside", { ...props, className: cn("caps-release-tag", className), children: [_jsxs("div", { className: "caps-release-tag-page", children: [_jsxs("span", { "aria-hidden": "true", className: "caps-release-tag-rings", children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("p", { className: "caps-release-tag-title", children: title.map((line) => (_jsx("span", { children: line }, line))) }), label ? _jsx("p", { className: "caps-release-tag-label", children: label }) : null] }), entries.length > 0 ? (_jsx("dl", { className: "caps-release-tag-entries", children: entries.map((entry) => (_jsxs("div", { children: [_jsx("dt", { children: entry.name }), _jsx("dd", { children: entry.version })] }, entry.name))) })) : null] }));
 }

package/dist/styles.css

@@ -5947,6 +5947,9 @@
   .max-w-\[48rem\] {
     max-width: 48rem;
   }
+  .max-w-\[50\%\] {
+    max-width: 50%;
+  }
   .max-w-\[60rem\] {
     max-width: 60rem;
   }

package/docs/api/blocks/command-menu.md

@@ -52,6 +52,14 @@ optional shortcut?: string;
 
 Key hint shown before the label, e.g. `z` in a which-key list.
 
+##### media?
+
+```ts
+optional media?: ReactNode;
+```
+
+Decorative leading visual, such as a thumbnail, shown before the label.
+
 ---
 
 ### CommandMenuProps
@@ -68,11 +76,12 @@ Props accepted by CommandMenu.
 
 #### Type Declaration
 
-| Name         | Type                                             | Description                                                      |
-| ------------ | ------------------------------------------------ | ---------------------------------------------------------------- |
-| `items`      | readonly [`CommandMenuItem`](#commandmenuitem)[] | -                                                                |
-| `onSelect()` | (`id`) => `void`                                 | Called after a non-disabled item is selected.                    |
-| `selected?`  | `string`                                         | Caller-owned selected state; distinct from local keyboard focus. |
+| Name                    | Type                                             | Description                                                                                                                                                                                                   |
+| ----------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`                 | readonly [`CommandMenuItem`](#commandmenuitem)[] | -                                                                                                                                                                                                             |
+| `onSelect()`            | (`id`) => `void`                                 | Called after a non-disabled item is selected.                                                                                                                                                                 |
+| `selected?`             | `string`                                         | Caller-owned selected state; distinct from local keyboard focus.                                                                                                                                              |
+| `descriptionPlacement?` | `"end"` \| `"inline"`                            | `end` (default) sets each description at the row's end. `inline` keeps the label at its own width and starts the description right after it, truncated, so long descriptions never push the row's text apart. |
 
 ## Variables
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -372,6 +372,8 @@
     },
     "./fonts.css": "./src/fonts.css",
     "./fonts-sans.css": "./src/fonts-sans.css",
+    "./fonts-display.css": "./src/fonts-display.css",
+    "./fonts-mono.css": "./src/fonts-mono.css",
     "./blocks/section-heading": {
       "types": "./dist/blocks/section-heading.d.ts",
       "import": "./dist/blocks/section-heading.js"
@@ -460,6 +462,8 @@
     "README.md",
     "src/fonts.css",
     "src/fonts-sans.css",
+    "src/fonts-display.css",
+    "src/fonts-mono.css",
     "src/status-tray.css",
     "src/app-status-bar.css"
   ],

package/src/fonts-display.css

@@ -0,0 +1 @@
+@import "@fungi.computer/stipe/fonts-display.css";

package/src/fonts-mono.css

@@ -0,0 +1 @@
+@import "@fungi.computer/stipe/fonts-mono.css";