@hanzo/ui 8.0.77 → 8.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/gallery.cjs +11 -1
- package/dist/gallery.d.ts.map +1 -1
- package/dist/gallery.js +11 -1
- package/dist/gallery.js.map +1 -1
- package/dist/glass.cjs +60 -6
- package/dist/glass.css +25 -0
- package/dist/glass.d.ts +49 -0
- package/dist/glass.d.ts.map +1 -1
- package/dist/glass.js +58 -5
- package/dist/glass.js.map +1 -1
- package/dist/product/Palette.cjs +1 -1
- package/dist/product/Palette.d.ts.map +1 -1
- package/dist/product/Palette.js +1 -1
- package/dist/product/Palette.js.map +1 -1
- package/dist/product/Workbench.cjs +97 -0
- package/dist/product/Workbench.d.ts +65 -0
- package/dist/product/Workbench.d.ts.map +1 -0
- package/dist/product/Workbench.js +94 -0
- package/dist/product/Workbench.js.map +1 -0
- package/dist/product/index.cjs +1 -0
- package/dist/product/index.d.ts +1 -0
- package/dist/product/index.d.ts.map +1 -1
- package/dist/product/index.js +1 -0
- package/dist/product/index.js.map +1 -1
- package/dist/styles.css +98 -0
- package/dist/theme.css +75 -0
- package/package.json +2 -2
package/dist/gallery.cjs
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.Gallery = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const Workbench_1 = require("./product/Workbench.cjs");
|
|
6
7
|
const gui_1 = require("./backends/gui/index.cjs");
|
|
7
8
|
/** A real <img> with real intrinsic pixels, inline so nothing hits the network.
|
|
8
9
|
* 120x40 on purpose: the wrong ratio for every box it goes in, so a frame that
|
|
@@ -31,6 +32,15 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
|
|
|
31
32
|
const el = document.querySelector('[data-palette-selected]');
|
|
32
33
|
if (el)
|
|
33
34
|
el.setAttribute('data-palette-selected', v);
|
|
34
|
-
}, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_1.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(gui_1.Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(gui_1.Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })
|
|
35
|
+
}, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_1.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(gui_1.Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(gui_1.Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: 880 }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "left" }) }] }, right: {
|
|
36
|
+
tabs: [
|
|
37
|
+
{ id: 'chat', title: 'Side chat', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "chat" }) },
|
|
38
|
+
{ id: 'browser', title: 'Browser', content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "browser" }) },
|
|
39
|
+
],
|
|
40
|
+
}, bottom: {
|
|
41
|
+
tabs: [
|
|
42
|
+
{ id: 'console', title: 'Console', closable: false, content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "console" }) },
|
|
43
|
+
],
|
|
44
|
+
}, children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "center" }) }) }) })] }));
|
|
35
45
|
exports.Gallery = Gallery;
|
|
36
46
|
exports.default = exports.Gallery;
|
package/dist/gallery.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AA6EA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CA0XnB,CAAA;AAED,eAAe,OAAO,CAAA"}
|
package/dist/gallery.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Workbench } from './product/Workbench.js';
|
|
3
4
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, RadioGroup, RadioGroupItem, ToggleGroup, ToggleGroupItem, AspectRatio, Avatar, AvatarFallback, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Grid, Section as PageSection, CardMedia, CommandDialog, } from './backends/gui/index.js';
|
|
4
5
|
/** A real <img> with real intrinsic pixels, inline so nothing hits the network.
|
|
5
6
|
* 120x40 on purpose: the wrong ratio for every box it goes in, so a frame that
|
|
@@ -28,6 +29,15 @@ export const Gallery = () => (_jsxs("div", { style: { display: 'flex', flexDirec
|
|
|
28
29
|
const el = document.querySelector('[data-palette-selected]');
|
|
29
30
|
if (el)
|
|
30
31
|
el.setAttribute('data-palette-selected', v);
|
|
31
|
-
}, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(AlertDialog, { open: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Alert title" }), _jsx(AlertDialogDescription, { children: "Alert description" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), _jsxs(HoverCard, { open: true, children: [_jsx(HoverCardTrigger, { children: "Hover card" }), _jsx(HoverCardContent, { children: "Hover card content" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { children: "Context menu" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuLabel, { children: "Label" }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { children: "Item" })] })] }), _jsx(Toaster, {})] }), _jsxs(Section, { name: "layout", children: [_jsx(Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => (_jsxs(Card, { children: [_jsx(CardMedia, { ratio: 16 / 10, children: _jsx("img", { src: SWATCH, alt: "" }) }), _jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Card ", i] }), _jsx(CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), _jsx(Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => (_jsx(Card, { children: _jsxs(CardContent, { children: ["cap ", i] }) }, i))) }), _jsxs(Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [_jsx(Card, { children: _jsx(CardContent, { children: "wide" }) }), _jsx(Card, { children: _jsx(CardContent, { children: "wide" }) })] }), _jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: _jsxs(Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [_jsx(Card, { children: _jsx(CardContent, { children: "short" }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: "short" }) })] }) }), _jsxs("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [_jsx(Card, { "data-card": "lean", children: _jsx(CardContent, { children: "one line" }) }), _jsxs(Card, { "data-card": "fat", children: [_jsx(CardContent, { children: "one line" }), _jsx(CardContent, { children: "two line" }), _jsx(CardContent, { children: "three line" }), _jsx(CardContent, { children: "four line" })] })] }), _jsx(Card, { interactive: true, "data-card": "interactive", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Interactive card" }) }) }), _jsx(PageSection, { maxWidth: 600, "data-section": "demo", children: _jsx(CardTitle, { children: "Section" }) }), _jsx(CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), _jsx(Button, { "data-button": "block-child", children: _jsx("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }
|
|
32
|
+
}, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(AlertDialog, { open: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Alert title" }), _jsx(AlertDialogDescription, { children: "Alert description" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), _jsxs(HoverCard, { open: true, children: [_jsx(HoverCardTrigger, { children: "Hover card" }), _jsx(HoverCardContent, { children: "Hover card content" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { children: "Context menu" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuLabel, { children: "Label" }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { children: "Item" })] })] }), _jsx(Toaster, {})] }), _jsxs(Section, { name: "layout", children: [_jsx(Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => (_jsxs(Card, { children: [_jsx(CardMedia, { ratio: 16 / 10, children: _jsx("img", { src: SWATCH, alt: "" }) }), _jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Card ", i] }), _jsx(CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), _jsx(Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => (_jsx(Card, { children: _jsxs(CardContent, { children: ["cap ", i] }) }, i))) }), _jsxs(Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [_jsx(Card, { children: _jsx(CardContent, { children: "wide" }) }), _jsx(Card, { children: _jsx(CardContent, { children: "wide" }) })] }), _jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: _jsxs(Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [_jsx(Card, { children: _jsx(CardContent, { children: "short" }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: "short" }) })] }) }), _jsxs("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [_jsx(Card, { "data-card": "lean", children: _jsx(CardContent, { children: "one line" }) }), _jsxs(Card, { "data-card": "fat", children: [_jsx(CardContent, { children: "one line" }), _jsx(CardContent, { children: "two line" }), _jsx(CardContent, { children: "three line" }), _jsx(CardContent, { children: "four line" })] })] }), _jsx(Card, { interactive: true, "data-card": "interactive", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Interactive card" }) }) }), _jsx(PageSection, { maxWidth: 600, "data-section": "demo", children: _jsx(CardTitle, { children: "Section" }) }), _jsx(CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), _jsx(Button, { "data-button": "block-child", children: _jsx("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), _jsx(Section, { name: "workbench", children: _jsx("div", { style: { display: 'flex', height: 220, width: 880 }, children: _jsx(Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: _jsx(CardTitle, { children: "left" }) }] }, right: {
|
|
33
|
+
tabs: [
|
|
34
|
+
{ id: 'chat', title: 'Side chat', content: _jsx(CardTitle, { children: "chat" }) },
|
|
35
|
+
{ id: 'browser', title: 'Browser', content: _jsx(CardTitle, { children: "browser" }) },
|
|
36
|
+
],
|
|
37
|
+
}, bottom: {
|
|
38
|
+
tabs: [
|
|
39
|
+
{ id: 'console', title: 'Console', closable: false, content: _jsx(CardTitle, { children: "console" }) },
|
|
40
|
+
],
|
|
41
|
+
}, children: _jsx(CardTitle, { children: "center" }) }) }) })] }));
|
|
32
42
|
export default Gallery;
|
|
33
43
|
//# sourceMappingURL=gallery.js.map
|
package/dist/gallery.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;
|
|
1
|
+
{"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"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"}
|
package/dist/glass.cjs
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.glass = void 0;
|
|
3
|
+
exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.sheet = exports.glass = void 0;
|
|
4
4
|
/**
|
|
5
5
|
* The chrome, as values — `@hanzo/ui/glass`.
|
|
6
6
|
*
|
|
7
7
|
* import { glass, panel, scrim } from '@hanzo/ui/glass'
|
|
8
8
|
* import '@hanzo/ui/glass.css' // or '@hanzo/ui/theme.css', which inlines it
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
10
|
+
* Ten recipes, because ten things were being spelled out by hand on every page
|
|
11
|
+
* and drifting apart every time: what a floating surface is made of, what a
|
|
12
|
+
* resting one is made of, how high a sheet of the workspace sits and what marks
|
|
13
|
+
* one that opens, what dims the page under a modal, how a set of rows is
|
|
14
|
+
* grouped, what one of those rows looks like, which item in a set is the
|
|
15
|
+
* current one, which control is the loud one, and what it means to fill the
|
|
15
16
|
* screen. Each is ONE value here and nowhere else.
|
|
16
17
|
*
|
|
17
18
|
* They are plain objects, spread onto any `@hanzo/gui` element:
|
|
@@ -67,6 +68,59 @@ const glass = (level = 2) => ({
|
|
|
67
68
|
borderColor: '$borderColor',
|
|
68
69
|
});
|
|
69
70
|
exports.glass = glass;
|
|
71
|
+
/**
|
|
72
|
+
* A sheet of paper, and how high off the workspace it sits.
|
|
73
|
+
*
|
|
74
|
+
* <YStack {...sheet(0)}> the workspace itself
|
|
75
|
+
* <YStack {...sheet(1)}> a tool you are using
|
|
76
|
+
* <YStack {...sheet(2)}> what it opened
|
|
77
|
+
*
|
|
78
|
+
* The rungs are `glass`'s rungs — `sheet(2)` and `glass(2)` stand at the same
|
|
79
|
+
* height, they are just cut from different material — so a screen mixing a
|
|
80
|
+
* transcript, a menu and a dialog still reads as ONE space. What differs is
|
|
81
|
+
* what the surface MEANS: glass is chrome floating over content, paper is the
|
|
82
|
+
* content's own structure, where the level says which thing you are working in.
|
|
83
|
+
*
|
|
84
|
+
* NO BORDER, deliberately, and this is the rule the recipe exists to enforce:
|
|
85
|
+
* if two surfaces need separating, RAISE one. A surface that is already a step
|
|
86
|
+
* above its neighbour and also wears a hairline is drawn twice, and a screen of
|
|
87
|
+
* those is the wireframe look — every pane in its own box, none of them saying
|
|
88
|
+
* which one you are in. Reach for `panel` when the thing genuinely is a card in
|
|
89
|
+
* the flow with a finished edge; reach for this when depth is the hierarchy.
|
|
90
|
+
*
|
|
91
|
+
* The fill is `--sheet-*` from @hanzo/design — an alpha wash, not an opaque
|
|
92
|
+
* step, so sheets STACK: one laid on another lands a shade lighter and the pile
|
|
93
|
+
* converges instead of blowing out. That is also why 0 is worth spelling: the
|
|
94
|
+
* ground is a value, not the absence of one, and a pane that means "workspace"
|
|
95
|
+
* should say so rather than inherit whatever is behind it.
|
|
96
|
+
*
|
|
97
|
+
* Rung 0 carries no `elevation-` class because nothing casts a shadow onto the
|
|
98
|
+
* thing it is lying on.
|
|
99
|
+
*/
|
|
100
|
+
const sheet = (level = 1) => ({
|
|
101
|
+
backgroundColor: SHEET_FILL[level],
|
|
102
|
+
...(level === 0 ? {} : { className: `elevation-${level}` }),
|
|
103
|
+
});
|
|
104
|
+
exports.sheet = sheet;
|
|
105
|
+
const SHEET_FILL = {
|
|
106
|
+
0: 'var(--sheet-0, #0a0a0a)',
|
|
107
|
+
1: 'var(--sheet-1, rgb(38 38 38 / .5))',
|
|
108
|
+
2: 'var(--sheet-2, rgb(38 38 38 / .75))',
|
|
109
|
+
};
|
|
110
|
+
/**
|
|
111
|
+
* The fold — a corner turned back, and the ONE mark that says an item opens.
|
|
112
|
+
*
|
|
113
|
+
* <YStack {...sheet(1)} {...fold}>
|
|
114
|
+
*
|
|
115
|
+
* Spend it only where the thing expands. A fold on a surface that does nothing
|
|
116
|
+
* is the same lie as a chevron that does not turn: it is an affordance, and an
|
|
117
|
+
* affordance that leads nowhere costs more than no mark at all.
|
|
118
|
+
*
|
|
119
|
+
* A `background-image` on the sheet itself, so it needs no extra element and no
|
|
120
|
+
* pseudo-element from the call site, and it squares that one corner — a folded
|
|
121
|
+
* corner is not round. `--fold-face` flips with the theme underneath.
|
|
122
|
+
*/
|
|
123
|
+
exports.fold = { className: 'fold' };
|
|
70
124
|
/**
|
|
71
125
|
* The scrim under anything modal — the dim that makes a floating panel read as
|
|
72
126
|
* floating rather than as more page.
|
package/dist/glass.css
CHANGED
|
@@ -219,6 +219,31 @@
|
|
|
219
219
|
var(--glass-shadow-3) !important;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
+
/* ── The fold — the one mark that means an item opens ────────────────────────
|
|
223
|
+
A corner turned back, painted onto the sheet itself. It is a class and not a
|
|
224
|
+
pair of style props because gui compiles those into atomic classes and a
|
|
225
|
+
background-image is not one of the properties it maps; and because a fold has
|
|
226
|
+
exactly one spelling, so the call site should not be able to invent a second
|
|
227
|
+
one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
|
|
228
|
+
that took this sheet without the token layer still gets a corner rather than
|
|
229
|
+
a silently-dropped declaration.
|
|
230
|
+
|
|
231
|
+
The corner is SQUARED, not rounded: a folded corner is a straight crease, and
|
|
232
|
+
a rounded one under a triangle reads as a rendering fault. That is also why
|
|
233
|
+
this carries !important — the radius it has to beat is a compiled style prop.
|
|
234
|
+
|
|
235
|
+
Spend it only where the thing expands. A fold on a surface that opens nothing
|
|
236
|
+
is a chevron that never turns. */
|
|
237
|
+
.fold {
|
|
238
|
+
background-image: var(--fold-face,
|
|
239
|
+
linear-gradient(315deg,
|
|
240
|
+
rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
|
|
241
|
+
rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
|
|
242
|
+
transparent 12px)) !important;
|
|
243
|
+
background-repeat: no-repeat !important;
|
|
244
|
+
border-bottom-right-radius: 0 !important;
|
|
245
|
+
}
|
|
246
|
+
|
|
222
247
|
/* ── The scrim ──────────────────────────────────────────────────────────────
|
|
223
248
|
The dim that makes a floating panel read as floating rather than as more
|
|
224
249
|
page. gui's overlay dims TWICE — a translucent ground under a further
|
package/dist/glass.d.ts
CHANGED
|
@@ -42,6 +42,55 @@ export declare const glass: (level?: Lift) => {
|
|
|
42
42
|
readonly backgroundColor: "$background";
|
|
43
43
|
readonly borderColor: "$borderColor";
|
|
44
44
|
};
|
|
45
|
+
/**
|
|
46
|
+
* A sheet of paper, and how high off the workspace it sits.
|
|
47
|
+
*
|
|
48
|
+
* <YStack {...sheet(0)}> the workspace itself
|
|
49
|
+
* <YStack {...sheet(1)}> a tool you are using
|
|
50
|
+
* <YStack {...sheet(2)}> what it opened
|
|
51
|
+
*
|
|
52
|
+
* The rungs are `glass`'s rungs — `sheet(2)` and `glass(2)` stand at the same
|
|
53
|
+
* height, they are just cut from different material — so a screen mixing a
|
|
54
|
+
* transcript, a menu and a dialog still reads as ONE space. What differs is
|
|
55
|
+
* what the surface MEANS: glass is chrome floating over content, paper is the
|
|
56
|
+
* content's own structure, where the level says which thing you are working in.
|
|
57
|
+
*
|
|
58
|
+
* NO BORDER, deliberately, and this is the rule the recipe exists to enforce:
|
|
59
|
+
* if two surfaces need separating, RAISE one. A surface that is already a step
|
|
60
|
+
* above its neighbour and also wears a hairline is drawn twice, and a screen of
|
|
61
|
+
* those is the wireframe look — every pane in its own box, none of them saying
|
|
62
|
+
* which one you are in. Reach for `panel` when the thing genuinely is a card in
|
|
63
|
+
* the flow with a finished edge; reach for this when depth is the hierarchy.
|
|
64
|
+
*
|
|
65
|
+
* The fill is `--sheet-*` from @hanzo/design — an alpha wash, not an opaque
|
|
66
|
+
* step, so sheets STACK: one laid on another lands a shade lighter and the pile
|
|
67
|
+
* converges instead of blowing out. That is also why 0 is worth spelling: the
|
|
68
|
+
* ground is a value, not the absence of one, and a pane that means "workspace"
|
|
69
|
+
* should say so rather than inherit whatever is behind it.
|
|
70
|
+
*
|
|
71
|
+
* Rung 0 carries no `elevation-` class because nothing casts a shadow onto the
|
|
72
|
+
* thing it is lying on.
|
|
73
|
+
*/
|
|
74
|
+
export declare const sheet: (level?: 0 | 1 | 2) => {
|
|
75
|
+
readonly className?: "elevation-1" | "elevation-2" | undefined;
|
|
76
|
+
readonly backgroundColor: "var(--sheet-0, #0a0a0a)" | "var(--sheet-1, rgb(38 38 38 / .5))" | "var(--sheet-2, rgb(38 38 38 / .75))";
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* The fold — a corner turned back, and the ONE mark that says an item opens.
|
|
80
|
+
*
|
|
81
|
+
* <YStack {...sheet(1)} {...fold}>
|
|
82
|
+
*
|
|
83
|
+
* Spend it only where the thing expands. A fold on a surface that does nothing
|
|
84
|
+
* is the same lie as a chevron that does not turn: it is an affordance, and an
|
|
85
|
+
* affordance that leads nowhere costs more than no mark at all.
|
|
86
|
+
*
|
|
87
|
+
* A `background-image` on the sheet itself, so it needs no extra element and no
|
|
88
|
+
* pseudo-element from the call site, and it squares that one corner — a folded
|
|
89
|
+
* corner is not round. `--fold-face` flips with the theme underneath.
|
|
90
|
+
*/
|
|
91
|
+
export declare const fold: {
|
|
92
|
+
readonly className: "fold";
|
|
93
|
+
};
|
|
45
94
|
/**
|
|
46
95
|
* The scrim under anything modal — the dim that makes a floating panel read as
|
|
47
96
|
* floating rather than as more page.
|
package/dist/glass.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,KAAK,GAAI,QAAO,IAAQ;;;;CAKxB,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,GAAI,QAAO,CAAC,GAAG,CAAC,GAAG,CAAK;;;CAI7B,CAAA;AAQb;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;;CAAiC,CAAA;AAElD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;;CAAwE,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI;;;;;;;CAIP,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,GAAG;;;;;;;CAON,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,GAAI,IAAI,OAAO;;;;;;CAGkC,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;;;;IAIjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;;;;;;CAGK,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;;;CAIT,CAAA"}
|
package/dist/glass.js
CHANGED
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
* import { glass, panel, scrim } from '@hanzo/ui/glass'
|
|
5
5
|
* import '@hanzo/ui/glass.css' // or '@hanzo/ui/theme.css', which inlines it
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
7
|
+
* Ten recipes, because ten things were being spelled out by hand on every page
|
|
8
|
+
* and drifting apart every time: what a floating surface is made of, what a
|
|
9
|
+
* resting one is made of, how high a sheet of the workspace sits and what marks
|
|
10
|
+
* one that opens, what dims the page under a modal, how a set of rows is
|
|
11
|
+
* grouped, what one of those rows looks like, which item in a set is the
|
|
12
|
+
* current one, which control is the loud one, and what it means to fill the
|
|
12
13
|
* screen. Each is ONE value here and nowhere else.
|
|
13
14
|
*
|
|
14
15
|
* They are plain objects, spread onto any `@hanzo/gui` element:
|
|
@@ -63,6 +64,58 @@ export const glass = (level = 2) => ({
|
|
|
63
64
|
backgroundColor: '$background',
|
|
64
65
|
borderColor: '$borderColor',
|
|
65
66
|
});
|
|
67
|
+
/**
|
|
68
|
+
* A sheet of paper, and how high off the workspace it sits.
|
|
69
|
+
*
|
|
70
|
+
* <YStack {...sheet(0)}> the workspace itself
|
|
71
|
+
* <YStack {...sheet(1)}> a tool you are using
|
|
72
|
+
* <YStack {...sheet(2)}> what it opened
|
|
73
|
+
*
|
|
74
|
+
* The rungs are `glass`'s rungs — `sheet(2)` and `glass(2)` stand at the same
|
|
75
|
+
* height, they are just cut from different material — so a screen mixing a
|
|
76
|
+
* transcript, a menu and a dialog still reads as ONE space. What differs is
|
|
77
|
+
* what the surface MEANS: glass is chrome floating over content, paper is the
|
|
78
|
+
* content's own structure, where the level says which thing you are working in.
|
|
79
|
+
*
|
|
80
|
+
* NO BORDER, deliberately, and this is the rule the recipe exists to enforce:
|
|
81
|
+
* if two surfaces need separating, RAISE one. A surface that is already a step
|
|
82
|
+
* above its neighbour and also wears a hairline is drawn twice, and a screen of
|
|
83
|
+
* those is the wireframe look — every pane in its own box, none of them saying
|
|
84
|
+
* which one you are in. Reach for `panel` when the thing genuinely is a card in
|
|
85
|
+
* the flow with a finished edge; reach for this when depth is the hierarchy.
|
|
86
|
+
*
|
|
87
|
+
* The fill is `--sheet-*` from @hanzo/design — an alpha wash, not an opaque
|
|
88
|
+
* step, so sheets STACK: one laid on another lands a shade lighter and the pile
|
|
89
|
+
* converges instead of blowing out. That is also why 0 is worth spelling: the
|
|
90
|
+
* ground is a value, not the absence of one, and a pane that means "workspace"
|
|
91
|
+
* should say so rather than inherit whatever is behind it.
|
|
92
|
+
*
|
|
93
|
+
* Rung 0 carries no `elevation-` class because nothing casts a shadow onto the
|
|
94
|
+
* thing it is lying on.
|
|
95
|
+
*/
|
|
96
|
+
export const sheet = (level = 1) => ({
|
|
97
|
+
backgroundColor: SHEET_FILL[level],
|
|
98
|
+
...(level === 0 ? {} : { className: `elevation-${level}` }),
|
|
99
|
+
});
|
|
100
|
+
const SHEET_FILL = {
|
|
101
|
+
0: 'var(--sheet-0, #0a0a0a)',
|
|
102
|
+
1: 'var(--sheet-1, rgb(38 38 38 / .5))',
|
|
103
|
+
2: 'var(--sheet-2, rgb(38 38 38 / .75))',
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* The fold — a corner turned back, and the ONE mark that says an item opens.
|
|
107
|
+
*
|
|
108
|
+
* <YStack {...sheet(1)} {...fold}>
|
|
109
|
+
*
|
|
110
|
+
* Spend it only where the thing expands. A fold on a surface that does nothing
|
|
111
|
+
* is the same lie as a chevron that does not turn: it is an affordance, and an
|
|
112
|
+
* affordance that leads nowhere costs more than no mark at all.
|
|
113
|
+
*
|
|
114
|
+
* A `background-image` on the sheet itself, so it needs no extra element and no
|
|
115
|
+
* pseudo-element from the call site, and it squares that one corner — a folded
|
|
116
|
+
* corner is not round. `--fold-face` flips with the theme underneath.
|
|
117
|
+
*/
|
|
118
|
+
export const fold = { className: 'fold' };
|
|
66
119
|
/**
|
|
67
120
|
* The scrim under anything modal — the dim that makes a floating panel read as
|
|
68
121
|
* floating rather than as more page.
|
package/dist/glass.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAc,CAAC,EAAE,EAAE,CACvC,CAAC;IACC,SAAS,EAAE,mBAAmB,KAAK,EAAE;IACrC,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,cAAc;CAC5B,CAAU,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAmB,CAAC,EAAE,EAAE,CAC5C,CAAC;IACC,eAAe,EAAE,UAAU,CAAC,KAAK,CAAC;IAClC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,EAAW,EAAE,CAAC;CACrE,CAAU,CAAA;AAEb,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,yBAAyB;IAC5B,CAAC,EAAE,oCAAoC;IACvC,CAAC,EAAE,qCAAqC;CAChC,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,SAAS,EAAE,MAAM,EAAW,CAAA;AAElD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,eAAe,EAAE,uCAAuC,EAAW,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,aAAa;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,KAAK;IACR,GAAG,IAAI,CAAC,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ;CACV,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,IAAI;IACT,iBAAiB,EAAE,IAAI;IACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAW,EAAE,EAAE,CACtC,EAAE;IACA,CAAC,CAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAY;IAC9D,CAAC,CAAE,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAY,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,SAAS;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,KAAK,EAAE,UAAU;IACjB,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;CACrD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CAChB,CAAA"}
|
package/dist/product/Palette.cjs
CHANGED
|
@@ -48,7 +48,7 @@ function Palette({ open, onOpenChange, ops, onRun, active, onActive, search: con
|
|
|
48
48
|
onSearch?.(s);
|
|
49
49
|
};
|
|
50
50
|
const groups = (0, react_1.useMemo)(() => (0, match_1.survivors)(ops, search, limit), [ops, search, limit]);
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(gui_2.CommandDialog, { open: open, onOpenChange: onOpenChange, title: title, description: placeholder, value: active, onValueChange: onActive, shouldFilter: false, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, { value: search, onValueChange: setSearch, placeholder: placeholder, color: "$color", placeholderTextColor: "$color11" }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { minH: height, children: [(0, jsx_runtime_1.jsxs)(gui_2.CommandList, { maxH: height, width: children ? "50%" : "100%", borderRightWidth: children ? 1 : 0, borderColor: "$borderColor",
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)(gui_2.CommandDialog, { open: open, onOpenChange: onOpenChange, title: title, description: placeholder, value: active, onValueChange: onActive, shouldFilter: false, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, { value: search, onValueChange: setSearch, placeholder: placeholder, color: "$color", placeholderTextColor: "$color11" }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { minH: height, children: [(0, jsx_runtime_1.jsxs)(gui_2.CommandList, { maxH: height, width: children ? "50%" : "100%", borderRightWidth: children ? 1 : 0, borderColor: "$borderColor", pt: "$1", pb: "$4", children: [groups.length === 0 && ((0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { color: "$color11", children: empty }) })), groups.map(([group, items]) => ((0, jsx_runtime_1.jsx)(gui_2.CommandGroup, { heading: group, children: items.map((op) => ((0, jsx_runtime_1.jsxs)(gui_2.CommandItem, { value: op.id, onSelect: () => onRun(op), gap: "$2", children: [op.icon, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, items: "center", gap: "$2", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { numberOfLines: 1, shrink: 0, children: op.label }), op.hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { numberOfLines: 1, flex: 1, fontSize: "$1", color: "$color11", children: op.hint })) : null] }), (0, jsx_runtime_1.jsx)(Method, { of: op }), op.end] }, op.id))) }, group)))] }), children ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "50%", children: children }) : null] }), footer ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: "$4", borderTopWidth: 1, borderColor: "$borderColor", px: "$3", py: "$2", children: footer })) : null] }));
|
|
52
52
|
}
|
|
53
53
|
/**
|
|
54
54
|
* The method, at the end of the row, for route commands only.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Palette.d.ts","sourceRoot":"","sources":["../../src/product/Palette.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWzD,OAAO,EAAmB,KAAK,EAAE,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,oEAAoE;IACpE,GAAG,EAAE,EAAE,EAAE,CAAA;IACT,0DAA0D;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,CAAA;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,WAAgC,EAChC,KAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAY,EACZ,KAAyB,GAC1B,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"Palette.d.ts","sourceRoot":"","sources":["../../src/product/Palette.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWzD,OAAO,EAAmB,KAAK,EAAE,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,oEAAoE;IACpE,GAAG,EAAE,EAAE,EAAE,CAAA;IACT,0DAA0D;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,CAAA;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,WAAgC,EAChC,KAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAY,EACZ,KAAyB,GAC1B,EAAE,YAAY,2CAuGd"}
|
package/dist/product/Palette.js
CHANGED
|
@@ -45,7 +45,7 @@ export function Palette({ open, onOpenChange, ops, onRun, active, onActive, sear
|
|
|
45
45
|
onSearch?.(s);
|
|
46
46
|
};
|
|
47
47
|
const groups = useMemo(() => survivors(ops, search, limit), [ops, search, limit]);
|
|
48
|
-
return (_jsxs(CommandDialog, { open: open, onOpenChange: onOpenChange, title: title, description: placeholder, value: active, onValueChange: onActive, shouldFilter: false, children: [_jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: placeholder, color: "$color", placeholderTextColor: "$color11" }), _jsxs(XStack, { minH: height, children: [_jsxs(CommandList, { maxH: height, width: children ? "50%" : "100%", borderRightWidth: children ? 1 : 0, borderColor: "$borderColor",
|
|
48
|
+
return (_jsxs(CommandDialog, { open: open, onOpenChange: onOpenChange, title: title, description: placeholder, value: active, onValueChange: onActive, shouldFilter: false, children: [_jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: placeholder, color: "$color", placeholderTextColor: "$color11" }), _jsxs(XStack, { minH: height, children: [_jsxs(CommandList, { maxH: height, width: children ? "50%" : "100%", borderRightWidth: children ? 1 : 0, borderColor: "$borderColor", pt: "$1", pb: "$4", children: [groups.length === 0 && (_jsx(CommandEmpty, { children: _jsx(SizableText, { color: "$color11", children: empty }) })), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((op) => (_jsxs(CommandItem, { value: op.id, onSelect: () => onRun(op), gap: "$2", children: [op.icon, _jsxs(XStack, { flex: 1, items: "center", gap: "$2", overflow: "hidden", children: [_jsx(SizableText, { numberOfLines: 1, shrink: 0, children: op.label }), op.hint ? (_jsx(SizableText, { numberOfLines: 1, flex: 1, fontSize: "$1", color: "$color11", children: op.hint })) : null] }), _jsx(Method, { of: op }), op.end] }, op.id))) }, group)))] }), children ? _jsx(YStack, { width: "50%", children: children }) : null] }), footer ? (_jsx(XStack, { items: "center", gap: "$4", borderTopWidth: 1, borderColor: "$borderColor", px: "$3", py: "$2", children: footer })) : null] }));
|
|
49
49
|
}
|
|
50
50
|
/**
|
|
51
51
|
* The method, at the end of the row, for route commands only.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Palette.js","sourceRoot":"","sources":["../../src/product/Palette.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAkB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAW,MAAM,SAAS,CAAA;AAiClD,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,KAAK,GAAG,mBAAmB,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,iBAAiB,GACZ;IACb,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClC,MAAM,MAAM,GAAG,UAAU,IAAI,GAAG,CAAA;IAChC,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE;QAC9B,MAAM,CAAC,CAAC,CAAC,CAAA;QACT,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;IACf,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjF,OAAO,CACL,MAAC,aAAa,IACZ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,KAAK,aAEnB,KAAC,YAAY,IACX,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAC,QAAQ,EACd,oBAAoB,EAAC,UAAU,GAC/B,EACF,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Palette.js","sourceRoot":"","sources":["../../src/product/Palette.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Dock = Dock;
|
|
5
|
+
exports.Workbench = Workbench;
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
/**
|
|
8
|
+
* Workbench — the shell a Hanzo surface runs inside: a center view with a dock
|
|
9
|
+
* on the left, the right and the bottom.
|
|
10
|
+
*
|
|
11
|
+
* A dock is a strip of tabs over one visible pane. The three sides differ only
|
|
12
|
+
* in where the strip sits and which edge drags, so they are ONE component given
|
|
13
|
+
* a side; a second implementation is how two docks drift apart.
|
|
14
|
+
*
|
|
15
|
+
* Tabs are data. A side chat, a browser and the developer console are all Tab
|
|
16
|
+
* values, so a surface adds one by pushing to an array rather than by teaching
|
|
17
|
+
* the shell a new kind. What a tab renders is the surface's business — the
|
|
18
|
+
* shell owns placement, activation and size, and nothing else.
|
|
19
|
+
*
|
|
20
|
+
* PAPER, NOT BOXES. Depth carries state: the workspace is the base sheet, a
|
|
21
|
+
* dock is a sheet raised above it, and the active tab is raised again. Light
|
|
22
|
+
* falls from the top, so every shadow points the same way and elevation reads
|
|
23
|
+
* as a stack rather than as decoration. Outlines appear only where two sheets
|
|
24
|
+
* meet edge-on — a hairline, never a border around a thing.
|
|
25
|
+
*
|
|
26
|
+
* The rungs come from `sheet()` (../glass), which reads @hanzo/design's
|
|
27
|
+
* `--sheet-*` / `--shadow-sheet-*`. gui's own `elevation` prop is a DIFFERENT
|
|
28
|
+
* idea wearing the same word: it synthesises a shadow from a number, carries no
|
|
29
|
+
* lit edge, and answers to nothing — so a dock lit that way and a menu lit by
|
|
30
|
+
* the ladder stand in two different rooms.
|
|
31
|
+
*/
|
|
32
|
+
const react_1 = require("react");
|
|
33
|
+
const gui_1 = require("@hanzo/gui");
|
|
34
|
+
const glass_1 = require("../glass.cjs");
|
|
35
|
+
const DEFAULT_SIZE = { left: 260, right: 380, bottom: 220 };
|
|
36
|
+
/** The edge facing the center carries the drag handle. */
|
|
37
|
+
const HANDLE_FIRST = { left: false, right: true, bottom: true };
|
|
38
|
+
function Dock({ side, tabs, activeId, defaultActiveId, onActivate, onClose, actions, size, onResize, minSize = 160, maxSize = 900, }) {
|
|
39
|
+
const [active, setActive] = (0, gui_1.useControllableState)({
|
|
40
|
+
prop: activeId,
|
|
41
|
+
defaultProp: defaultActiveId ?? tabs[0]?.id,
|
|
42
|
+
// A tab id is always a string when one activates; the hook's own
|
|
43
|
+
// signature admits undefined, so narrow rather than cast.
|
|
44
|
+
onChange: (id) => { if (id)
|
|
45
|
+
onActivate?.(id); },
|
|
46
|
+
});
|
|
47
|
+
const [extent, setExtent] = (0, gui_1.useControllableState)({
|
|
48
|
+
prop: size,
|
|
49
|
+
defaultProp: DEFAULT_SIZE[side],
|
|
50
|
+
onChange: onResize,
|
|
51
|
+
});
|
|
52
|
+
const horizontal = side !== 'bottom';
|
|
53
|
+
const origin = (0, react_1.useRef)(0);
|
|
54
|
+
const originExtent = (0, react_1.useRef)(0);
|
|
55
|
+
// Pointer capture, so a drag that leaves the handle still tracks.
|
|
56
|
+
const onDown = (0, react_1.useCallback)((e) => {
|
|
57
|
+
origin.current = horizontal ? e.clientX : e.clientY;
|
|
58
|
+
originExtent.current = extent ?? DEFAULT_SIZE[side];
|
|
59
|
+
e.currentTarget?.setPointerCapture?.(e.pointerId);
|
|
60
|
+
}, [horizontal, extent, side]);
|
|
61
|
+
const onMove = (0, react_1.useCallback)((e) => {
|
|
62
|
+
if (!e.currentTarget?.hasPointerCapture?.(e.pointerId))
|
|
63
|
+
return;
|
|
64
|
+
const delta = (horizontal ? e.clientX : e.clientY) - origin.current;
|
|
65
|
+
// Left grows rightward; right and bottom grow the other way.
|
|
66
|
+
const signed = side === 'left' ? delta : -delta;
|
|
67
|
+
setExtent(Math.min(maxSize, Math.max(minSize, originExtent.current + signed)));
|
|
68
|
+
}, [horizontal, side, minSize, maxSize, setExtent]);
|
|
69
|
+
if (!tabs.length)
|
|
70
|
+
return null;
|
|
71
|
+
const current = tabs.find((t) => t.id === active) ?? tabs[0];
|
|
72
|
+
// The seam between two sheets, and where the dock is resized.
|
|
73
|
+
const seam = ((0, jsx_runtime_1.jsx)(gui_1.YStack, { onPointerDown: onDown, onPointerMove: onMove, cursor: horizontal ? 'col-resize' : 'row-resize', width: horizontal ? 5 : undefined, height: horizontal ? undefined : 5, hoverStyle: { bg: '$color6' } }));
|
|
74
|
+
const dock = ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { overflow: "hidden", ...(0, glass_1.sheet)(1), ...(horizontal ? { width: extent } : { height: extent }), children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", px: "$2", pt: "$1.5", children: [tabs.map((t) => {
|
|
75
|
+
const on = t.id === current.id;
|
|
76
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", cursor: "pointer",
|
|
77
|
+
// The active tab is a raised sheet whose bottom corners stay
|
|
78
|
+
// square, so it reads as continuous with the pane beneath it —
|
|
79
|
+
// which is why both stand on rung 2 rather than merely looking
|
|
80
|
+
// similar. An inactive tab is not a sheet at all; it is the
|
|
81
|
+
// dock's own surface showing through.
|
|
82
|
+
rounded: "$3", ...(on ? (0, glass_1.sheet)(2) : { backgroundColor: 'transparent' }), hoverStyle: { bg: on ? undefined : '$color2' }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { onPress: () => setActive(t.id), children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", children: [t.icon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", numberOfLines: 1, opacity: on ? 1 : 0.7, children: t.title })] }) }), t.closable === false ? null : ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$1", chromeless: true, circular: true, "aria-label": `Close ${t.title}`, onPress: () => onClose?.(t.id), children: "\u00D7" }))] }, t.id));
|
|
83
|
+
}), actions] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { opacity: 0.4 }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, overflow: "hidden", ...(0, glass_1.sheet)(2), children: current.content })] }));
|
|
84
|
+
// Named rather than an array: a list of children needs keys, and two siblings
|
|
85
|
+
// that are not a list should not have to invent identities to sit beside
|
|
86
|
+
// each other.
|
|
87
|
+
const [first, second] = HANDLE_FIRST[side] ? [seam, dock] : [dock, seam];
|
|
88
|
+
const Row = horizontal ? gui_1.XStack : gui_1.YStack;
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)(Row, { children: [first, second] }));
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Left and right run the full height; the bottom spans the center column, so a
|
|
93
|
+
* console sits under the work and not under the navigation.
|
|
94
|
+
*/
|
|
95
|
+
function Workbench({ left, right, bottom, children }) {
|
|
96
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, overflow: "hidden", bg: "$color1", children: [left ? (0, jsx_runtime_1.jsx)(Dock, { side: "left", ...left }) : null, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, overflow: "hidden", children: children }), bottom ? (0, jsx_runtime_1.jsx)(Dock, { side: "bottom", ...bottom }) : null] }), right ? (0, jsx_runtime_1.jsx)(Dock, { side: "right", ...right }) : null] }));
|
|
97
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Workbench — the shell a Hanzo surface runs inside: a center view with a dock
|
|
3
|
+
* on the left, the right and the bottom.
|
|
4
|
+
*
|
|
5
|
+
* A dock is a strip of tabs over one visible pane. The three sides differ only
|
|
6
|
+
* in where the strip sits and which edge drags, so they are ONE component given
|
|
7
|
+
* a side; a second implementation is how two docks drift apart.
|
|
8
|
+
*
|
|
9
|
+
* Tabs are data. A side chat, a browser and the developer console are all Tab
|
|
10
|
+
* values, so a surface adds one by pushing to an array rather than by teaching
|
|
11
|
+
* the shell a new kind. What a tab renders is the surface's business — the
|
|
12
|
+
* shell owns placement, activation and size, and nothing else.
|
|
13
|
+
*
|
|
14
|
+
* PAPER, NOT BOXES. Depth carries state: the workspace is the base sheet, a
|
|
15
|
+
* dock is a sheet raised above it, and the active tab is raised again. Light
|
|
16
|
+
* falls from the top, so every shadow points the same way and elevation reads
|
|
17
|
+
* as a stack rather than as decoration. Outlines appear only where two sheets
|
|
18
|
+
* meet edge-on — a hairline, never a border around a thing.
|
|
19
|
+
*
|
|
20
|
+
* The rungs come from `sheet()` (../glass), which reads @hanzo/design's
|
|
21
|
+
* `--sheet-*` / `--shadow-sheet-*`. gui's own `elevation` prop is a DIFFERENT
|
|
22
|
+
* idea wearing the same word: it synthesises a shadow from a number, carries no
|
|
23
|
+
* lit edge, and answers to nothing — so a dock lit that way and a menu lit by
|
|
24
|
+
* the ladder stand in two different rooms.
|
|
25
|
+
*/
|
|
26
|
+
import { type ReactNode } from 'react';
|
|
27
|
+
export type Side = 'left' | 'right' | 'bottom';
|
|
28
|
+
export type Tab = {
|
|
29
|
+
id: string;
|
|
30
|
+
title: string;
|
|
31
|
+
icon?: ReactNode;
|
|
32
|
+
content: ReactNode;
|
|
33
|
+
/** Closable unless a surface says otherwise; the console usually is not. */
|
|
34
|
+
closable?: boolean;
|
|
35
|
+
};
|
|
36
|
+
export type DockProps = {
|
|
37
|
+
side: Side;
|
|
38
|
+
tabs: Tab[];
|
|
39
|
+
/** Controlled active tab; omit and the dock keeps its own. */
|
|
40
|
+
activeId?: string;
|
|
41
|
+
defaultActiveId?: string;
|
|
42
|
+
onActivate?: (id: string) => void;
|
|
43
|
+
onClose?: (id: string) => void;
|
|
44
|
+
/** End of the strip — the surface's own control, e.g. a new-tab menu. */
|
|
45
|
+
actions?: ReactNode;
|
|
46
|
+
/** Extent across the docked edge: width for left/right, height for bottom. */
|
|
47
|
+
size?: number;
|
|
48
|
+
onResize?: (size: number) => void;
|
|
49
|
+
minSize?: number;
|
|
50
|
+
maxSize?: number;
|
|
51
|
+
};
|
|
52
|
+
export declare function Dock({ side, tabs, activeId, defaultActiveId, onActivate, onClose, actions, size, onResize, minSize, maxSize, }: DockProps): import("react/jsx-runtime").JSX.Element | null;
|
|
53
|
+
export type WorkbenchProps = {
|
|
54
|
+
left?: Omit<DockProps, 'side'>;
|
|
55
|
+
right?: Omit<DockProps, 'side'>;
|
|
56
|
+
bottom?: Omit<DockProps, 'side'>;
|
|
57
|
+
/** The center view — the work itself, and the lowest sheet. */
|
|
58
|
+
children: ReactNode;
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Left and right run the full height; the bottom spans the center column, so a
|
|
62
|
+
* console sits under the work and not under the navigation.
|
|
63
|
+
*/
|
|
64
|
+
export declare function Workbench({ left, right, bottom, children }: WorkbenchProps): import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
//# sourceMappingURL=Workbench.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../src/product/Workbench.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3D,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9C,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAOD,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,UAAU,EACV,OAAO,EACP,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAa,EACb,OAAa,GACd,EAAE,SAAS,kDA8HX;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IAC/B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAa1E"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Workbench — the shell a Hanzo surface runs inside: a center view with a dock
|
|
5
|
+
* on the left, the right and the bottom.
|
|
6
|
+
*
|
|
7
|
+
* A dock is a strip of tabs over one visible pane. The three sides differ only
|
|
8
|
+
* in where the strip sits and which edge drags, so they are ONE component given
|
|
9
|
+
* a side; a second implementation is how two docks drift apart.
|
|
10
|
+
*
|
|
11
|
+
* Tabs are data. A side chat, a browser and the developer console are all Tab
|
|
12
|
+
* values, so a surface adds one by pushing to an array rather than by teaching
|
|
13
|
+
* the shell a new kind. What a tab renders is the surface's business — the
|
|
14
|
+
* shell owns placement, activation and size, and nothing else.
|
|
15
|
+
*
|
|
16
|
+
* PAPER, NOT BOXES. Depth carries state: the workspace is the base sheet, a
|
|
17
|
+
* dock is a sheet raised above it, and the active tab is raised again. Light
|
|
18
|
+
* falls from the top, so every shadow points the same way and elevation reads
|
|
19
|
+
* as a stack rather than as decoration. Outlines appear only where two sheets
|
|
20
|
+
* meet edge-on — a hairline, never a border around a thing.
|
|
21
|
+
*
|
|
22
|
+
* The rungs come from `sheet()` (../glass), which reads @hanzo/design's
|
|
23
|
+
* `--sheet-*` / `--shadow-sheet-*`. gui's own `elevation` prop is a DIFFERENT
|
|
24
|
+
* idea wearing the same word: it synthesises a shadow from a number, carries no
|
|
25
|
+
* lit edge, and answers to nothing — so a dock lit that way and a menu lit by
|
|
26
|
+
* the ladder stand in two different rooms.
|
|
27
|
+
*/
|
|
28
|
+
import { useCallback, useRef } from 'react';
|
|
29
|
+
import { Button, Separator, Text, XStack, YStack, useControllableState } from '@hanzo/gui';
|
|
30
|
+
import { sheet } from '../glass.js';
|
|
31
|
+
const DEFAULT_SIZE = { left: 260, right: 380, bottom: 220 };
|
|
32
|
+
/** The edge facing the center carries the drag handle. */
|
|
33
|
+
const HANDLE_FIRST = { left: false, right: true, bottom: true };
|
|
34
|
+
export function Dock({ side, tabs, activeId, defaultActiveId, onActivate, onClose, actions, size, onResize, minSize = 160, maxSize = 900, }) {
|
|
35
|
+
const [active, setActive] = useControllableState({
|
|
36
|
+
prop: activeId,
|
|
37
|
+
defaultProp: defaultActiveId ?? tabs[0]?.id,
|
|
38
|
+
// A tab id is always a string when one activates; the hook's own
|
|
39
|
+
// signature admits undefined, so narrow rather than cast.
|
|
40
|
+
onChange: (id) => { if (id)
|
|
41
|
+
onActivate?.(id); },
|
|
42
|
+
});
|
|
43
|
+
const [extent, setExtent] = useControllableState({
|
|
44
|
+
prop: size,
|
|
45
|
+
defaultProp: DEFAULT_SIZE[side],
|
|
46
|
+
onChange: onResize,
|
|
47
|
+
});
|
|
48
|
+
const horizontal = side !== 'bottom';
|
|
49
|
+
const origin = useRef(0);
|
|
50
|
+
const originExtent = useRef(0);
|
|
51
|
+
// Pointer capture, so a drag that leaves the handle still tracks.
|
|
52
|
+
const onDown = useCallback((e) => {
|
|
53
|
+
origin.current = horizontal ? e.clientX : e.clientY;
|
|
54
|
+
originExtent.current = extent ?? DEFAULT_SIZE[side];
|
|
55
|
+
e.currentTarget?.setPointerCapture?.(e.pointerId);
|
|
56
|
+
}, [horizontal, extent, side]);
|
|
57
|
+
const onMove = useCallback((e) => {
|
|
58
|
+
if (!e.currentTarget?.hasPointerCapture?.(e.pointerId))
|
|
59
|
+
return;
|
|
60
|
+
const delta = (horizontal ? e.clientX : e.clientY) - origin.current;
|
|
61
|
+
// Left grows rightward; right and bottom grow the other way.
|
|
62
|
+
const signed = side === 'left' ? delta : -delta;
|
|
63
|
+
setExtent(Math.min(maxSize, Math.max(minSize, originExtent.current + signed)));
|
|
64
|
+
}, [horizontal, side, minSize, maxSize, setExtent]);
|
|
65
|
+
if (!tabs.length)
|
|
66
|
+
return null;
|
|
67
|
+
const current = tabs.find((t) => t.id === active) ?? tabs[0];
|
|
68
|
+
// The seam between two sheets, and where the dock is resized.
|
|
69
|
+
const seam = (_jsx(YStack, { onPointerDown: onDown, onPointerMove: onMove, cursor: horizontal ? 'col-resize' : 'row-resize', width: horizontal ? 5 : undefined, height: horizontal ? undefined : 5, hoverStyle: { bg: '$color6' } }));
|
|
70
|
+
const dock = (_jsxs(YStack, { overflow: "hidden", ...sheet(1), ...(horizontal ? { width: extent } : { height: extent }), children: [_jsxs(XStack, { items: "center", gap: "$1", px: "$2", pt: "$1.5", children: [tabs.map((t) => {
|
|
71
|
+
const on = t.id === current.id;
|
|
72
|
+
return (_jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", cursor: "pointer",
|
|
73
|
+
// The active tab is a raised sheet whose bottom corners stay
|
|
74
|
+
// square, so it reads as continuous with the pane beneath it —
|
|
75
|
+
// which is why both stand on rung 2 rather than merely looking
|
|
76
|
+
// similar. An inactive tab is not a sheet at all; it is the
|
|
77
|
+
// dock's own surface showing through.
|
|
78
|
+
rounded: "$3", ...(on ? sheet(2) : { backgroundColor: 'transparent' }), hoverStyle: { bg: on ? undefined : '$color2' }, children: [_jsx(YStack, { onPress: () => setActive(t.id), children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [t.icon, _jsx(Text, { fontSize: "$2", numberOfLines: 1, opacity: on ? 1 : 0.7, children: t.title })] }) }), t.closable === false ? null : (_jsx(Button, { size: "$1", chromeless: true, circular: true, "aria-label": `Close ${t.title}`, onPress: () => onClose?.(t.id), children: "\u00D7" }))] }, t.id));
|
|
79
|
+
}), actions] }), _jsx(Separator, { opacity: 0.4 }), _jsx(YStack, { flex: 1, overflow: "hidden", ...sheet(2), children: current.content })] }));
|
|
80
|
+
// Named rather than an array: a list of children needs keys, and two siblings
|
|
81
|
+
// that are not a list should not have to invent identities to sit beside
|
|
82
|
+
// each other.
|
|
83
|
+
const [first, second] = HANDLE_FIRST[side] ? [seam, dock] : [dock, seam];
|
|
84
|
+
const Row = horizontal ? XStack : YStack;
|
|
85
|
+
return (_jsxs(Row, { children: [first, second] }));
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Left and right run the full height; the bottom spans the center column, so a
|
|
89
|
+
* console sits under the work and not under the navigation.
|
|
90
|
+
*/
|
|
91
|
+
export function Workbench({ left, right, bottom, children }) {
|
|
92
|
+
return (_jsxs(XStack, { flex: 1, overflow: "hidden", bg: "$color1", children: [left ? _jsx(Dock, { side: "left", ...left }) : null, _jsxs(YStack, { flex: 1, overflow: "hidden", children: [_jsx(YStack, { flex: 1, overflow: "hidden", children: children }), bottom ? _jsx(Dock, { side: "bottom", ...bottom }) : null] }), right ? _jsx(Dock, { side: "right", ...right }) : null] }));
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=Workbench.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../src/product/Workbench.tsx"],"names":[],"mappings":"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"}
|
package/dist/product/index.cjs
CHANGED
|
@@ -106,6 +106,7 @@ __exportStar(require("./Pagination.cjs"), exports);
|
|
|
106
106
|
__exportStar(require("./AnimatedLogo.cjs"), exports);
|
|
107
107
|
__exportStar(require("./brand.cjs"), exports);
|
|
108
108
|
__exportStar(require("./DataTable.cjs"), exports);
|
|
109
|
+
__exportStar(require("./Workbench.cjs"), exports);
|
|
109
110
|
__exportStar(require("./EmptyState.cjs"), exports);
|
|
110
111
|
__exportStar(require("./FadeIn.cjs"), exports);
|
|
111
112
|
__exportStar(require("./Field.cjs"), exports);
|
package/dist/product/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export * from './Pagination.js';
|
|
|
26
26
|
export * from './AnimatedLogo.js';
|
|
27
27
|
export * from './brand.js';
|
|
28
28
|
export * from './DataTable.js';
|
|
29
|
+
export * from './Workbench.js';
|
|
29
30
|
export * from './EmptyState.js';
|
|
30
31
|
export * from './FadeIn.js';
|
|
31
32
|
export * from './Field.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AASjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AAKvB,cAAc,QAAQ,CAAA;AAKtB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAK5B,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AAOzB,cAAc,cAAc,CAAA;AAK5B,cAAc,YAAY,CAAA;AAO1B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAI7B,cAAc,cAAc,CAAA;AAG5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAM5B,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAc7B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AASvB,cAAc,UAAU,CAAA;AAKxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AASjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AAKvB,cAAc,QAAQ,CAAA;AAKtB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAK5B,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AAOzB,cAAc,cAAc,CAAA;AAK5B,cAAc,YAAY,CAAA;AAO1B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAI7B,cAAc,cAAc,CAAA;AAG5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAM5B,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAc7B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AASvB,cAAc,UAAU,CAAA;AAKxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAA"}
|
package/dist/product/index.js
CHANGED
|
@@ -77,6 +77,7 @@ export * from './Pagination.js';
|
|
|
77
77
|
export * from './AnimatedLogo.js';
|
|
78
78
|
export * from './brand.js';
|
|
79
79
|
export * from './DataTable.js';
|
|
80
|
+
export * from './Workbench.js';
|
|
80
81
|
export * from './EmptyState.js';
|
|
81
82
|
export * from './FadeIn.js';
|
|
82
83
|
export * from './Field.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -590,6 +590,51 @@
|
|
|
590
590
|
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
|
|
591
591
|
--shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
|
|
592
592
|
--shadow-2xl:var(--shadow-floating);
|
|
593
|
+
|
|
594
|
+
/* ——— the paper ——— */
|
|
595
|
+
/* Depth carries STATE, not decoration: which sheet is the workspace, which is
|
|
596
|
+
the tool in use, which one opened. Reach for a level before a border — if
|
|
597
|
+
two surfaces need separating, RAISE one rather than outline both, and a
|
|
598
|
+
surface that is already raised does not also need a box drawn round it.
|
|
599
|
+
|
|
600
|
+
A level is a tint AND the light on it, published as a pair, because the
|
|
601
|
+
alternative — every component composing its own `--edge-highlight,
|
|
602
|
+
--shadow-*` — is how two panels on one screen end up lit from two
|
|
603
|
+
directions. Every rung here is pure vertical: a 1px inset line along the
|
|
604
|
+
top edge, a drop straight down. One origin, above and slightly in front.
|
|
605
|
+
|
|
606
|
+
The tints are the surface recipes rather than new values, so sheets stack
|
|
607
|
+
the way paper does: each is an alpha-white wash, one laid on another lands
|
|
608
|
+
a step lighter, and the stack converges on #262626 instead of blowing out.
|
|
609
|
+
|
|
610
|
+
Nothing here is restated in `.light`, deliberately: every part defers to a
|
|
611
|
+
token that already flips, so the ramp inverts with the theme for free. */
|
|
612
|
+
--sheet-0:var(--surface-page); /* the workspace ground */
|
|
613
|
+
--sheet-1:var(--surface-card); /* an active tool */
|
|
614
|
+
--sheet-2:var(--surface-card-emphasis); /* what opened, or what is inside */
|
|
615
|
+
/* The drops are spelled out rather than read from the t-shirt ramp above, and
|
|
616
|
+
that is the whole reason this ladder can be shared. `--shadow-sm` is a name
|
|
617
|
+
this package does not own — @hanzo/brand declares the same names at :root
|
|
618
|
+
with white-canvas alphas, and load order decides who wins — so a rung built
|
|
619
|
+
on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
|
|
620
|
+
alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
|
|
621
|
+
keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
|
|
622
|
+
one moves, move both. `--edge-highlight` stays deferred: it is role-named,
|
|
623
|
+
uncollided, and its `.light` zeroing is what makes one value work on both
|
|
624
|
+
canvases. */
|
|
625
|
+
--shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
|
|
626
|
+
--shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
|
|
627
|
+
|
|
628
|
+
/* The fold — a corner turned back, and the one mark that means THIS OPENS.
|
|
629
|
+
Ornament nowhere: a sheet that does not expand does not wear one.
|
|
630
|
+
It is a background-image, so it costs no element and no pseudo-element —
|
|
631
|
+
paint it on the sheet itself and square that corner
|
|
632
|
+
(`border-bottom-right-radius:0`), because a folded corner is not round.
|
|
633
|
+
The flap catches the light like every other surface; the crease is the
|
|
634
|
+
hairline; both defer, so both invert. */
|
|
635
|
+
--fold:12px;
|
|
636
|
+
--fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
|
|
637
|
+
|
|
593
638
|
/* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
|
|
594
639
|
--glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
|
|
595
640
|
--glow-hero-blur:120px;
|
|
@@ -622,6 +667,11 @@
|
|
|
622
667
|
costs nothing. */
|
|
623
668
|
.light, :root.t_light, .t_light{
|
|
624
669
|
--shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
|
|
670
|
+
/* On white the drop does all of it, so the paper rungs are restated here even
|
|
671
|
+
though check 4 does not demand it — their white is inside --edge-highlight,
|
|
672
|
+
which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
|
|
673
|
+
--shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
|
|
674
|
+
--shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
|
|
625
675
|
--shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
|
|
626
676
|
--edge-highlight:inset 0 0 0 0 transparent;
|
|
627
677
|
--bloom:0 6px 20px -4px rgb(0 0 0 / .18);
|
|
@@ -1329,6 +1379,31 @@
|
|
|
1329
1379
|
var(--glass-shadow-3) !important;
|
|
1330
1380
|
}
|
|
1331
1381
|
|
|
1382
|
+
/* ── The fold — the one mark that means an item opens ────────────────────────
|
|
1383
|
+
A corner turned back, painted onto the sheet itself. It is a class and not a
|
|
1384
|
+
pair of style props because gui compiles those into atomic classes and a
|
|
1385
|
+
background-image is not one of the properties it maps; and because a fold has
|
|
1386
|
+
exactly one spelling, so the call site should not be able to invent a second
|
|
1387
|
+
one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
|
|
1388
|
+
that took this sheet without the token layer still gets a corner rather than
|
|
1389
|
+
a silently-dropped declaration.
|
|
1390
|
+
|
|
1391
|
+
The corner is SQUARED, not rounded: a folded corner is a straight crease, and
|
|
1392
|
+
a rounded one under a triangle reads as a rendering fault. That is also why
|
|
1393
|
+
this carries !important — the radius it has to beat is a compiled style prop.
|
|
1394
|
+
|
|
1395
|
+
Spend it only where the thing expands. A fold on a surface that opens nothing
|
|
1396
|
+
is a chevron that never turns. */
|
|
1397
|
+
.fold {
|
|
1398
|
+
background-image: var(--fold-face,
|
|
1399
|
+
linear-gradient(315deg,
|
|
1400
|
+
rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
|
|
1401
|
+
rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
|
|
1402
|
+
transparent 12px)) !important;
|
|
1403
|
+
background-repeat: no-repeat !important;
|
|
1404
|
+
border-bottom-right-radius: 0 !important;
|
|
1405
|
+
}
|
|
1406
|
+
|
|
1332
1407
|
/* ── The scrim ──────────────────────────────────────────────────────────────
|
|
1333
1408
|
The dim that makes a floating panel read as floating rather than as more
|
|
1334
1409
|
page. gui's overlay dims TWICE — a translucent ground under a further
|
|
@@ -2385,6 +2460,7 @@
|
|
|
2385
2460
|
:root ._bg-background{background-color:var(--background);}
|
|
2386
2461
|
:root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
|
|
2387
2462
|
:root ._bg-borderColor{background-color:var(--borderColor);}
|
|
2463
|
+
:root ._bg-color1{background-color:var(--color1);}
|
|
2388
2464
|
:root ._bg-color12{background-color:var(--color12);}
|
|
2389
2465
|
:root ._bg-color2{background-color:var(--color2);}
|
|
2390
2466
|
:root ._bg-color3{background-color:var(--color3);}
|
|
@@ -2392,6 +2468,8 @@
|
|
|
2392
2468
|
:root ._bg-color5{background-color:var(--color5);}
|
|
2393
2469
|
:root ._bg-color6{background-color:var(--color6);}
|
|
2394
2470
|
:root ._bg-red9{background-color:var(--red9);}
|
|
2471
|
+
:root ._bg-sheet-1rgb31918056171{background-color:var(--sheet-1, rgb(38 38 38 / .5));}
|
|
2472
|
+
:root ._bg-sheet-2rgb3669803178{background-color:var(--sheet-2, rgb(38 38 38 / .75));}
|
|
2395
2473
|
:root ._bg-transparent{background-color:transparent;}
|
|
2396
2474
|
:root ._bls-solid._bls-solid{border-left-style:solid;}
|
|
2397
2475
|
:root:root:root ._borderBottomColor-0active-borderColor._borderBottomColor-0active-borderColor:active{border-bottom-color:var(--borderColor) !important;}
|
|
@@ -2408,6 +2486,7 @@
|
|
|
2408
2486
|
@media (hover) {:root:root ._borderBottomColor-0hover-color6._borderBottomColor-0hover-color6:hover{border-bottom-color:var(--color6) !important;}}
|
|
2409
2487
|
@media (hover) {:root:root ._borderBottomColor-0hover-color7._borderBottomColor-0hover-color7:hover{border-bottom-color:var(--color7) !important;}}
|
|
2410
2488
|
@media (hover) {:root:root ._borderBottomColor-0hover-color8._borderBottomColor-0hover-color8:hover{border-bottom-color:var(--color8) !important;}}
|
|
2489
|
+
@media (hover) {:root:root ._borderBottomColor-0hover-transparent._borderBottomColor-0hover-transparent:hover{border-bottom-color:transparent !important;}}
|
|
2411
2490
|
:root ._borderBottomColor-backgroundF3405682._borderBottomColor-backgroundF3405682{border-bottom-color:var(--backgroundFocus);}
|
|
2412
2491
|
:root ._borderBottomColor-borderColor._borderBottomColor-borderColor{border-bottom-color:var(--borderColor);}
|
|
2413
2492
|
:root ._borderBottomColor-color12._borderBottomColor-color12{border-bottom-color:var(--color12);}
|
|
@@ -2430,6 +2509,7 @@
|
|
|
2430
2509
|
@media (hover) {:root:root ._borderLeftColor-0hover-color6._borderLeftColor-0hover-color6:hover{border-left-color:var(--color6) !important;}}
|
|
2431
2510
|
@media (hover) {:root:root ._borderLeftColor-0hover-color7._borderLeftColor-0hover-color7:hover{border-left-color:var(--color7) !important;}}
|
|
2432
2511
|
@media (hover) {:root:root ._borderLeftColor-0hover-color8._borderLeftColor-0hover-color8:hover{border-left-color:var(--color8) !important;}}
|
|
2512
|
+
@media (hover) {:root:root ._borderLeftColor-0hover-transparent._borderLeftColor-0hover-transparent:hover{border-left-color:transparent !important;}}
|
|
2433
2513
|
:root ._borderLeftColor-backgroundF3405682._borderLeftColor-backgroundF3405682{border-left-color:var(--backgroundFocus);}
|
|
2434
2514
|
:root ._borderLeftColor-borderColor._borderLeftColor-borderColor{border-left-color:var(--borderColor);}
|
|
2435
2515
|
:root ._borderLeftColor-color12._borderLeftColor-color12{border-left-color:var(--color12);}
|
|
@@ -2452,6 +2532,7 @@
|
|
|
2452
2532
|
@media (hover) {:root:root ._brc-0hover-color6._brc-0hover-color6:hover{border-right-color:var(--color6) !important;}}
|
|
2453
2533
|
@media (hover) {:root:root ._brc-0hover-color7._brc-0hover-color7:hover{border-right-color:var(--color7) !important;}}
|
|
2454
2534
|
@media (hover) {:root:root ._brc-0hover-color8._brc-0hover-color8:hover{border-right-color:var(--color8) !important;}}
|
|
2535
|
+
@media (hover) {:root:root ._brc-0hover-transparent._brc-0hover-transparent:hover{border-right-color:transparent !important;}}
|
|
2455
2536
|
:root ._brc-backgroundF3405682._brc-backgroundF3405682{border-right-color:var(--backgroundFocus);}
|
|
2456
2537
|
:root ._brc-borderColor._brc-borderColor{border-right-color:var(--borderColor);}
|
|
2457
2538
|
:root ._brc-color12._brc-color12{border-right-color:var(--color12);}
|
|
@@ -2475,6 +2556,7 @@
|
|
|
2475
2556
|
@media (hover) {:root:root ._btc-0hover-color6._btc-0hover-color6:hover{border-top-color:var(--color6) !important;}}
|
|
2476
2557
|
@media (hover) {:root:root ._btc-0hover-color7._btc-0hover-color7:hover{border-top-color:var(--color7) !important;}}
|
|
2477
2558
|
@media (hover) {:root:root ._btc-0hover-color8._btc-0hover-color8:hover{border-top-color:var(--color8) !important;}}
|
|
2559
|
+
@media (hover) {:root:root ._btc-0hover-transparent._btc-0hover-transparent:hover{border-top-color:transparent !important;}}
|
|
2478
2560
|
:root ._btc-backgroundF3405682._btc-backgroundF3405682{border-top-color:var(--backgroundFocus);}
|
|
2479
2561
|
:root ._btc-borderColor._btc-borderColor{border-top-color:var(--borderColor);}
|
|
2480
2562
|
:root ._btc-color12._btc-color12{border-top-color:var(--color12);}
|
|
@@ -2502,6 +2584,7 @@
|
|
|
2502
2584
|
:root ._bts-solid._bts-solid{border-top-style:solid;}
|
|
2503
2585
|
:root ._btw-0px._btw-0px{border-top-width:0px;}
|
|
2504
2586
|
:root ._btw-1px._btw-1px{border-top-width:1px;}
|
|
2587
|
+
:root ._bxsh-0px0px0pxrg933189164{box-shadow:0px 0px 0px rgba(0, 0, 0, 0);}
|
|
2505
2588
|
:root:root:root ._col-0active-colorPress:active{color:var(--colorPress) !important;}
|
|
2506
2589
|
@media (hover) {:root:root ._col-0hover-color12:hover{color:var(--color12) !important;}}
|
|
2507
2590
|
:root ._col-color{color:var(--color);}
|
|
@@ -2515,6 +2598,7 @@
|
|
|
2515
2598
|
:root ._cur-inherit{cursor:inherit;}
|
|
2516
2599
|
:root ._cur-not-allowed{cursor:not-allowed;}
|
|
2517
2600
|
:root ._cur-pointer{cursor:pointer;}
|
|
2601
|
+
:root ._cur-row-resize{cursor:row-resize;}
|
|
2518
2602
|
:root ._direction-ltr{direction:ltr;}
|
|
2519
2603
|
:root ._dsp-flex{display:flex;}
|
|
2520
2604
|
:root ._dsp-inline-flex{display:inline-flex;}
|
|
@@ -2536,6 +2620,7 @@
|
|
|
2536
2620
|
:root ._fwr-nowrap{flex-wrap:nowrap;}
|
|
2537
2621
|
:root ._gap-24px{gap:24px;}
|
|
2538
2622
|
:root ._gap-2px{gap:2px;}
|
|
2623
|
+
:root ._gap-6px{gap:6px;}
|
|
2539
2624
|
:root ._gap-c-space-1{gap:var(--c-space-1);}
|
|
2540
2625
|
:root ._gap-c-space-1--53{gap:var(--c-space-1--5);}
|
|
2541
2626
|
:root ._gap-c-space-2{gap:var(--c-space-2);}
|
|
@@ -2546,16 +2631,19 @@
|
|
|
2546
2631
|
:root ._height-10037{height:100%;}
|
|
2547
2632
|
:root ._height-16px{height:16px;}
|
|
2548
2633
|
:root ._height-20px{height:20px;}
|
|
2634
|
+
:root ._height-220px{height:220px;}
|
|
2549
2635
|
:root ._height-32px{height:32px;}
|
|
2550
2636
|
:root ._height-36px{height:36px;}
|
|
2551
2637
|
:root ._height-40px{height:40px;}
|
|
2552
2638
|
:root ._height-44px{height:44px;}
|
|
2639
|
+
:root ._height-5px{height:5px;}
|
|
2553
2640
|
:root ._height-6px{height:6px;}
|
|
2554
2641
|
:root ._height-7px{height:7px;}
|
|
2555
2642
|
:root ._height-80px{height:80px;}
|
|
2556
2643
|
:root ._height-8px{height:8px;}
|
|
2557
2644
|
:root ._height-NaNpx{height:NaNpx;}
|
|
2558
2645
|
:root ._height-auto{height:auto;}
|
|
2646
|
+
:root ._height-c-size-1{height:var(--c-size-1);}
|
|
2559
2647
|
:root ._height-initial{height:initial;}
|
|
2560
2648
|
:root ._items-center{align-items:center;}
|
|
2561
2649
|
:root ._items-flex-start{align-items:flex-start;}
|
|
@@ -2579,12 +2667,14 @@
|
|
|
2579
2667
|
:root ._maxH-16px{max-height:16px;}
|
|
2580
2668
|
:root ._maxH-300px{max-height:300px;}
|
|
2581
2669
|
:root ._maxH-32px{max-height:32px;}
|
|
2670
|
+
:root ._maxH-c-size-1{max-height:var(--c-size-1);}
|
|
2582
2671
|
:root ._maxH-initial{max-height:initial;}
|
|
2583
2672
|
:root ._maxW-0px{max-width:0px;}
|
|
2584
2673
|
:root ._maxW-10037{max-width:100%;}
|
|
2585
2674
|
:root ._maxW-16px{max-width:16px;}
|
|
2586
2675
|
:root ._maxW-32px{max-width:32px;}
|
|
2587
2676
|
:root ._maxW-600px{max-width:600px;}
|
|
2677
|
+
:root ._maxW-c-size-1{max-width:var(--c-size-1);}
|
|
2588
2678
|
:root ._mb-0px{margin-bottom:0px;}
|
|
2589
2679
|
:root ._minH-16px{min-height:16px;}
|
|
2590
2680
|
:root ._minH-20px{min-height:20px;}
|
|
@@ -2594,20 +2684,24 @@
|
|
|
2594
2684
|
:root ._minH-40px{min-height:40px;}
|
|
2595
2685
|
:root ._minH-44px{min-height:44px;}
|
|
2596
2686
|
:root ._minH-64px{min-height:64px;}
|
|
2687
|
+
:root ._minH-c-size-1{min-height:var(--c-size-1);}
|
|
2597
2688
|
:root ._minW-0px{min-width:0px;}
|
|
2598
2689
|
:root ._minW-16px{min-width:16px;}
|
|
2599
2690
|
:root ._minW-220px{min-width:220px;}
|
|
2600
2691
|
:root ._minW-32px{min-width:32px;}
|
|
2601
2692
|
:root ._minW-36px{min-width:36px;}
|
|
2602
2693
|
:root ._minW-40px{min-width:40px;}
|
|
2694
|
+
:root ._minW-c-size-1{min-width:var(--c-size-1);}
|
|
2603
2695
|
:root ._ml-0px{margin-left:0px;}
|
|
2604
2696
|
:root ._ml-auto{margin-left:auto;}
|
|
2605
2697
|
:root ._mr-0px{margin-right:0px;}
|
|
2606
2698
|
:root ._mt--24px{margin-top:-24px;}
|
|
2607
2699
|
:root ._mt-0px{margin-top:0px;}
|
|
2608
2700
|
:root ._o-0{opacity:0;}
|
|
2701
|
+
:root ._o-0--4{opacity:0.4;}
|
|
2609
2702
|
:root ._o-0--5{opacity:0.5;}
|
|
2610
2703
|
:root ._o-0--6{opacity:0.6;}
|
|
2704
|
+
:root ._o-0--7{opacity:0.7;}
|
|
2611
2705
|
@media (hover) {:root:root ._o-0hover-0--8:hover{opacity:0.8 !important;}}
|
|
2612
2706
|
@media (hover) {:root:root ._o-0hover-0--9:hover{opacity:0.9 !important;}}
|
|
2613
2707
|
:root ._o-1{opacity:1;}
|
|
@@ -2714,11 +2808,15 @@
|
|
|
2714
2808
|
:root ._width-10px{width:10px;}
|
|
2715
2809
|
:root ._width-16px{width:16px;}
|
|
2716
2810
|
:root ._width-20037{width:200%;}
|
|
2811
|
+
:root ._width-260px{width:260px;}
|
|
2717
2812
|
:root ._width-32px{width:32px;}
|
|
2718
2813
|
:root ._width-36px{width:36px;}
|
|
2814
|
+
:root ._width-380px{width:380px;}
|
|
2719
2815
|
:root ._width-4px{width:4px;}
|
|
2816
|
+
:root ._width-5px{width:5px;}
|
|
2720
2817
|
:root ._width-8px{width:8px;}
|
|
2721
2818
|
:root ._width-auto{width:auto;}
|
|
2819
|
+
:root ._width-c-size-1{width:var(--c-size-1);}
|
|
2722
2820
|
:root ._ws-normal{white-space:normal;}
|
|
2723
2821
|
:root ._ws-nowrap{white-space:nowrap;}
|
|
2724
2822
|
:root ._ws-pre-wrap{white-space:pre-wrap;}
|
package/dist/theme.css
CHANGED
|
@@ -588,6 +588,51 @@
|
|
|
588
588
|
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
|
|
589
589
|
--shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
|
|
590
590
|
--shadow-2xl:var(--shadow-floating);
|
|
591
|
+
|
|
592
|
+
/* ——— the paper ——— */
|
|
593
|
+
/* Depth carries STATE, not decoration: which sheet is the workspace, which is
|
|
594
|
+
the tool in use, which one opened. Reach for a level before a border — if
|
|
595
|
+
two surfaces need separating, RAISE one rather than outline both, and a
|
|
596
|
+
surface that is already raised does not also need a box drawn round it.
|
|
597
|
+
|
|
598
|
+
A level is a tint AND the light on it, published as a pair, because the
|
|
599
|
+
alternative — every component composing its own `--edge-highlight,
|
|
600
|
+
--shadow-*` — is how two panels on one screen end up lit from two
|
|
601
|
+
directions. Every rung here is pure vertical: a 1px inset line along the
|
|
602
|
+
top edge, a drop straight down. One origin, above and slightly in front.
|
|
603
|
+
|
|
604
|
+
The tints are the surface recipes rather than new values, so sheets stack
|
|
605
|
+
the way paper does: each is an alpha-white wash, one laid on another lands
|
|
606
|
+
a step lighter, and the stack converges on #262626 instead of blowing out.
|
|
607
|
+
|
|
608
|
+
Nothing here is restated in `.light`, deliberately: every part defers to a
|
|
609
|
+
token that already flips, so the ramp inverts with the theme for free. */
|
|
610
|
+
--sheet-0:var(--surface-page); /* the workspace ground */
|
|
611
|
+
--sheet-1:var(--surface-card); /* an active tool */
|
|
612
|
+
--sheet-2:var(--surface-card-emphasis); /* what opened, or what is inside */
|
|
613
|
+
/* The drops are spelled out rather than read from the t-shirt ramp above, and
|
|
614
|
+
that is the whole reason this ladder can be shared. `--shadow-sm` is a name
|
|
615
|
+
this package does not own — @hanzo/brand declares the same names at :root
|
|
616
|
+
with white-canvas alphas, and load order decides who wins — so a rung built
|
|
617
|
+
on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
|
|
618
|
+
alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
|
|
619
|
+
keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
|
|
620
|
+
one moves, move both. `--edge-highlight` stays deferred: it is role-named,
|
|
621
|
+
uncollided, and its `.light` zeroing is what makes one value work on both
|
|
622
|
+
canvases. */
|
|
623
|
+
--shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
|
|
624
|
+
--shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
|
|
625
|
+
|
|
626
|
+
/* The fold — a corner turned back, and the one mark that means THIS OPENS.
|
|
627
|
+
Ornament nowhere: a sheet that does not expand does not wear one.
|
|
628
|
+
It is a background-image, so it costs no element and no pseudo-element —
|
|
629
|
+
paint it on the sheet itself and square that corner
|
|
630
|
+
(`border-bottom-right-radius:0`), because a folded corner is not round.
|
|
631
|
+
The flap catches the light like every other surface; the crease is the
|
|
632
|
+
hairline; both defer, so both invert. */
|
|
633
|
+
--fold:12px;
|
|
634
|
+
--fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
|
|
635
|
+
|
|
591
636
|
/* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
|
|
592
637
|
--glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
|
|
593
638
|
--glow-hero-blur:120px;
|
|
@@ -620,6 +665,11 @@
|
|
|
620
665
|
costs nothing. */
|
|
621
666
|
.light, :root.t_light, .t_light{
|
|
622
667
|
--shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
|
|
668
|
+
/* On white the drop does all of it, so the paper rungs are restated here even
|
|
669
|
+
though check 4 does not demand it — their white is inside --edge-highlight,
|
|
670
|
+
which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
|
|
671
|
+
--shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
|
|
672
|
+
--shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
|
|
623
673
|
--shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
|
|
624
674
|
--edge-highlight:inset 0 0 0 0 transparent;
|
|
625
675
|
--bloom:0 6px 20px -4px rgb(0 0 0 / .18);
|
|
@@ -1327,6 +1377,31 @@
|
|
|
1327
1377
|
var(--glass-shadow-3) !important;
|
|
1328
1378
|
}
|
|
1329
1379
|
|
|
1380
|
+
/* ── The fold — the one mark that means an item opens ────────────────────────
|
|
1381
|
+
A corner turned back, painted onto the sheet itself. It is a class and not a
|
|
1382
|
+
pair of style props because gui compiles those into atomic classes and a
|
|
1383
|
+
background-image is not one of the properties it maps; and because a fold has
|
|
1384
|
+
exactly one spelling, so the call site should not be able to invent a second
|
|
1385
|
+
one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
|
|
1386
|
+
that took this sheet without the token layer still gets a corner rather than
|
|
1387
|
+
a silently-dropped declaration.
|
|
1388
|
+
|
|
1389
|
+
The corner is SQUARED, not rounded: a folded corner is a straight crease, and
|
|
1390
|
+
a rounded one under a triangle reads as a rendering fault. That is also why
|
|
1391
|
+
this carries !important — the radius it has to beat is a compiled style prop.
|
|
1392
|
+
|
|
1393
|
+
Spend it only where the thing expands. A fold on a surface that opens nothing
|
|
1394
|
+
is a chevron that never turns. */
|
|
1395
|
+
.fold {
|
|
1396
|
+
background-image: var(--fold-face,
|
|
1397
|
+
linear-gradient(315deg,
|
|
1398
|
+
rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
|
|
1399
|
+
rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
|
|
1400
|
+
transparent 12px)) !important;
|
|
1401
|
+
background-repeat: no-repeat !important;
|
|
1402
|
+
border-bottom-right-radius: 0 !important;
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1330
1405
|
/* ── The scrim ──────────────────────────────────────────────────────────────
|
|
1331
1406
|
The dim that makes a floating panel read as floating rather than as more
|
|
1332
1407
|
page. gui's overlay dims TWICE — a translucent ground under a further
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.81",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
],
|
|
189
189
|
"dependencies": {
|
|
190
190
|
"@hanzo/appearance": "^0.1.4",
|
|
191
|
-
"@hanzo/design": "^0.5.
|
|
191
|
+
"@hanzo/design": "^0.5.3",
|
|
192
192
|
"@hanzo/logo": "^1.0.13",
|
|
193
193
|
"@hanzo/products": "^0.2.0",
|
|
194
194
|
"@hanzogui/lucide-icons-2": "^8.1.0",
|