@hanzo/build 0.2.70 → 0.2.72

package/lib/summary.js

@@ -12,18 +12,21 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo, useState } from 'react';
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ListTodo } from '@hanzogui/lucide-icons-2';
+import { FilePlus2, ListTodo } from '@hanzogui/lucide-icons-2';
 import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
+/** A row's pitch and inset, px: the kit menu's, so this panel reads as every other one. */
+const ROW_H = 32;
+const ROW_PX = 8;
 /** A row of the summary: its mark and its name, one press from a tab. */
 function Line({ icon, children, detail, onPress, quiet = false }) {
-    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 13, color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, children: detail })) : null] })] }));
+    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", justify: "flex-start", gap: ROW_PX, px: ROW_PX, minH: ROW_H, width: "100%", rounded: 4, cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 14, color: quiet ? '$soft' : '$ink', numberOfLines: 1, style: { textAlign: 'left' }, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, style: { textAlign: 'left' }, children: detail })) : null] })] }));
 }
 /** A section's heading, with what it adds at its end. */
-const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
+const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: ROW_PX, minH: ROW_H, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
 /** One section's rows; `done` runs after a row is pressed (the popover puts itself away). */
 function Rows({ section, done, details = false }) {
     const { entries, empty, lead } = section;
-    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { quiet: true, onPress: () => {
+    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { icon: _jsx(FilePlus2, { size: 15, "aria-hidden": true }), onPress: () => {
                     done?.();
                     lead.run();
                 }, children: lead.title })) : null, entries.map((e) => (_jsx(Line, { icon: e.icon, detail: details ? e.detail : undefined, onPress: e.open
@@ -43,7 +46,7 @@ export function Summary({ sections, onOpen, label = 'Summary' }) {
         setOpen(false);
         onOpen?.();
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { gap: 1, children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", sideOffset: 8, p: 4, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: 4, mx: 4 }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
 }
 /** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
 export function kinds(sections, icons = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.70",
+  "version": "0.2.72",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",