@cloudgrid-io/ui 0.30.0 → 0.31.1
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/README.md +82 -0
- package/dist/blocks/agent-prompt.d.ts.map +1 -1
- package/dist/blocks/agent-prompt.js +6 -1
- package/dist/blocks/agent-prompt.js.map +1 -1
- package/dist/blocks/cloudgrid-install.d.ts +67 -0
- package/dist/blocks/cloudgrid-install.d.ts.map +1 -0
- package/dist/blocks/cloudgrid-install.js +200 -0
- package/dist/blocks/cloudgrid-install.js.map +1 -0
- package/dist/blocks/command-field.d.ts +37 -6
- package/dist/blocks/command-field.d.ts.map +1 -1
- package/dist/blocks/command-field.js +43 -7
- package/dist/blocks/command-field.js.map +1 -1
- package/dist/blocks/empty-creations-previews.d.ts +6 -0
- package/dist/blocks/empty-creations-previews.d.ts.map +1 -0
- package/dist/blocks/empty-creations-previews.js +17 -0
- package/dist/blocks/empty-creations-previews.js.map +1 -0
- package/dist/blocks/empty-creations.d.ts +84 -0
- package/dist/blocks/empty-creations.d.ts.map +1 -0
- package/dist/blocks/empty-creations.js +106 -0
- package/dist/blocks/empty-creations.js.map +1 -0
- package/dist/blocks/entity-card.d.ts +81 -24
- package/dist/blocks/entity-card.d.ts.map +1 -1
- package/dist/blocks/entity-card.js +235 -126
- package/dist/blocks/entity-card.js.map +1 -1
- package/dist/blocks/icons.d.ts +10 -1
- package/dist/blocks/icons.d.ts.map +1 -1
- package/dist/blocks/icons.js +10 -1
- package/dist/blocks/icons.js.map +1 -1
- package/dist/blocks/install-content.d.ts +228 -0
- package/dist/blocks/install-content.d.ts.map +1 -0
- package/dist/blocks/install-content.js +464 -0
- package/dist/blocks/install-content.js.map +1 -0
- package/dist/blocks/logo.d.ts +70 -1
- package/dist/blocks/logo.d.ts.map +1 -1
- package/dist/blocks/logo.js +75 -2
- package/dist/blocks/logo.js.map +1 -1
- package/dist/blocks/phosphor-marks.d.ts +2 -0
- package/dist/blocks/phosphor-marks.d.ts.map +1 -1
- package/dist/blocks/phosphor-marks.js +3 -0
- package/dist/blocks/phosphor-marks.js.map +1 -1
- package/dist/blocks/prompt-block.d.ts +13 -5
- package/dist/blocks/prompt-block.d.ts.map +1 -1
- package/dist/blocks/prompt-block.js +29 -11
- package/dist/blocks/prompt-block.js.map +1 -1
- package/dist/blocks/stage-panel.d.ts +19 -0
- package/dist/blocks/stage-panel.d.ts.map +1 -1
- package/dist/blocks/stage-panel.js +2 -4
- package/dist/blocks/stage-panel.js.map +1 -1
- package/dist/blocks/step-item.d.ts.map +1 -1
- package/dist/blocks/step-item.js +1 -1
- package/dist/blocks/step-item.js.map +1 -1
- package/dist/blocks/tool-logo.d.ts.map +1 -1
- package/dist/blocks/tool-logo.js +10 -6
- package/dist/blocks/tool-logo.js.map +1 -1
- package/dist/blocks/tool-setup.d.ts +12 -6
- package/dist/blocks/tool-setup.d.ts.map +1 -1
- package/dist/blocks/tool-setup.js.map +1 -1
- package/dist/brand/creations/1.webp +0 -0
- package/dist/brand/creations/2.webp +0 -0
- package/dist/brand/creations/3.webp +0 -0
- package/dist/brand/creations/4.webp +0 -0
- package/dist/brand/mark-180.png +0 -0
- package/dist/brand/mark-192.png +0 -0
- package/dist/brand/mark-32.png +0 -0
- package/dist/brand/mark-512.png +0 -0
- package/dist/brand/mark-inverted-180.png +0 -0
- package/dist/brand/mark-inverted-192.png +0 -0
- package/dist/brand/mark-inverted-32.png +0 -0
- package/dist/brand/mark-inverted-512.png +0 -0
- package/dist/brand/mark-inverted.svg +8 -0
- package/dist/brand/mark.svg +7 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/package.json +7 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// GENERATED by scripts/generate-creation-previews.mjs from src/brand/creations/.
|
|
2
|
+
// Do not edit. Re-run the script after changing a file there.
|
|
3
|
+
/**
|
|
4
|
+
* The default thumbnails `EmptyCreations` fans out, left to right, as data URIs.
|
|
5
|
+
* The same bytes ship as files under `@cloudgrid-io/ui/brand/creations/*`.
|
|
6
|
+
*/
|
|
7
|
+
export const EMPTY_CREATIONS_PREVIEWS = [
|
|
8
|
+
// 1.webp
|
|
9
|
+
"data:image/webp;base64,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",
|
|
10
|
+
// 2.webp
|
|
11
|
+
"data:image/webp;base64,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",
|
|
12
|
+
// 3.webp
|
|
13
|
+
"data:image/webp;base64,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",
|
|
14
|
+
// 4.webp
|
|
15
|
+
"data:image/webp;base64,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",
|
|
16
|
+
];
|
|
17
|
+
//# sourceMappingURL=empty-creations-previews.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-creations-previews.js","sourceRoot":"","sources":["../../src/blocks/empty-creations-previews.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,8DAA8D;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB;IACzD,SAAS;IACT,y2MAAy2M;IACz2M,SAAS;IACT,qyHAAqyH;IACryH,SAAS;IACT,ioFAAioF;IACjoF,SAAS;IACT,qtIAAqtI;CACttI,CAAA"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { EMPTY_CREATIONS_PREVIEWS } from "./empty-creations-previews.js";
|
|
3
|
+
/**
|
|
4
|
+
* The new-user empty state for "My creations" (#276): a dashed box holding a fan
|
|
5
|
+
* of creation thumbnails around a dashed "+" tile, "No creations yet", one line
|
|
6
|
+
* of explanation and an Add button.
|
|
7
|
+
*
|
|
8
|
+
* Built from Figma file `5ouhISIL0mwYGHurvCGoEO`, frame "Home" `9757:16735`, the
|
|
9
|
+
* middle element `9757:16756`. The Figma is the layout reference; the type is
|
|
10
|
+
* this library's (founder, 2026-10-06): the display stack for the heading, the
|
|
11
|
+
* body face for the line, the UI face for the button.
|
|
12
|
+
*
|
|
13
|
+
* ## The fan
|
|
14
|
+
*
|
|
15
|
+
* Five tiles, no rotation, read off `9757:16757`: 66x38 picture, 82x47 picture,
|
|
16
|
+
* the 97x56 "+" tile, 82x47 picture, 66x38 picture. Neighbours overlap by 20px,
|
|
17
|
+
* and the stacking runs towards the middle: the "+" tile is on top, the inner
|
|
18
|
+
* pair under it, the outer pair lowest. Every tile carries Figma's "Elevation 1",
|
|
19
|
+
* which is `--cg-shadow-card` value for value.
|
|
20
|
+
*
|
|
21
|
+
* The overlap is drawn as margins on the side that faces the middle (`-mr-5` on
|
|
22
|
+
* the left pair, `-ml-5` on the right pair) rather than one direction throughout,
|
|
23
|
+
* so dropping the outer pair at narrow widths leaves the fan centred.
|
|
24
|
+
*
|
|
25
|
+
* ## Narrow widths: container queries, not viewport breakpoints
|
|
26
|
+
*
|
|
27
|
+
* The block is a section of someone else's page, so what decides its layout is
|
|
28
|
+
* the width it is GIVEN, not the window. The root is a named container. Below
|
|
29
|
+
* 24rem the padding steps from 80/32 to 48/16 and the heading from 38 to 30;
|
|
30
|
+
* below 22rem, where the five-tile fan (313px) plus that padding no longer fits,
|
|
31
|
+
* the outer pair drops and three tiles remain (221px).
|
|
32
|
+
*
|
|
33
|
+
* ## Surfaces
|
|
34
|
+
*
|
|
35
|
+
* Figma draws the dashed lines and the "+" in `--cg-slate-500`, which is a ramp
|
|
36
|
+
* rung declared at `:root` only and measures 1.71:1 on the purple panel. So the
|
|
37
|
+
* default scope paints exactly that, and inside `[data-cg-surface]` the lines
|
|
38
|
+
* move to `--cg-border-control` and the "+" to `--cg-text-muted`, both of which
|
|
39
|
+
* flip. The "+" tile's fill is the page ground in Figma (`--cg-neutral-25`), and
|
|
40
|
+
* it has to be opaque because it covers the inner pictures; on a surface it takes
|
|
41
|
+
* that surface's own ground, the pattern `Drawer` and `Popover` already use.
|
|
42
|
+
* The heading is `--cg-text-accent` (purple, white on the panel, lime on ink),
|
|
43
|
+
* the reason `PageHeading` gives. The line is `text-ink`, token based, so rule 3
|
|
44
|
+
* holds wherever this lands. The button is `cta`, which does not flip by design.
|
|
45
|
+
*
|
|
46
|
+
* ## Accessibility
|
|
47
|
+
*
|
|
48
|
+
* The fan is decoration: the whole row is `aria-hidden` and every picture has an
|
|
49
|
+
* empty `alt`. The heading is a real heading at `level` (default 2) and the
|
|
50
|
+
* button's name is its label. With `href` the control renders as a link through
|
|
51
|
+
* `linkComponent` (Next's `Link`, say) and keeps the link role; with only
|
|
52
|
+
* `onAdd` it is a button.
|
|
53
|
+
*
|
|
54
|
+
* ## Default pictures
|
|
55
|
+
*
|
|
56
|
+
* `EMPTY_CREATIONS_PREVIEWS`, four crops of the frame's own image fills. The same
|
|
57
|
+
* bytes ship as files under `@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp`.
|
|
58
|
+
* The component inlines them as data URIs because a package has no public path:
|
|
59
|
+
* see `scripts/generate-creation-previews.mjs`.
|
|
60
|
+
*/
|
|
61
|
+
/** The heading and the line, as the frame writes them. */
|
|
62
|
+
declare const EMPTY_CREATIONS_TITLE = "No creations yet";
|
|
63
|
+
declare const EMPTY_CREATIONS_DESCRIPTION = "Your creations will show up here, along with stats";
|
|
64
|
+
type EmptyCreationsProps = Omit<React.ComponentProps<"section">, "children"> & {
|
|
65
|
+
/** Called when Add is pressed. With `href` too, it runs before the navigation. */
|
|
66
|
+
onAdd?: React.MouseEventHandler<HTMLElement>;
|
|
67
|
+
/** Where Add goes. Renders the control as a link. */
|
|
68
|
+
href?: string;
|
|
69
|
+
/** The element a link renders through, for a router's own link (Next's `Link`). */
|
|
70
|
+
linkComponent?: React.ElementType;
|
|
71
|
+
/** The button's label, and so its accessible name. */
|
|
72
|
+
addLabel?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Picture sources, left to right. Four are drawn; a shorter list repeats, and
|
|
75
|
+
* an empty or missing one uses the library's defaults.
|
|
76
|
+
*/
|
|
77
|
+
previews?: readonly string[];
|
|
78
|
+
/** The heading level. Default 2; pass 3 when the block sits under a section's h2. */
|
|
79
|
+
level?: 2 | 3 | 4;
|
|
80
|
+
};
|
|
81
|
+
declare function EmptyCreations({ onAdd, href, linkComponent, addLabel, previews, level, className, ...props }: EmptyCreationsProps): React.JSX.Element;
|
|
82
|
+
export { EmptyCreations, EMPTY_CREATIONS_DESCRIPTION, EMPTY_CREATIONS_PREVIEWS, EMPTY_CREATIONS_TITLE };
|
|
83
|
+
export type { EmptyCreationsProps };
|
|
84
|
+
//# sourceMappingURL=empty-creations.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-creations.d.ts","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAA;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,0DAA0D;AAC1D,QAAA,MAAM,qBAAqB,qBAAqB,CAAA;AAChD,QAAA,MAAM,2BAA2B,uDAAuD,CAAA;AAoBxF,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC5C,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACjC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAClB,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,aAAa,EACb,QAAgB,EAChB,QAAQ,EACR,KAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAyGrB;AAED,OAAO,EAAE,cAAc,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,CAAA;AACvG,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Button } from "../ui/button.js";
|
|
4
|
+
import { PlusIcon } from "./icons.js";
|
|
5
|
+
import { cn } from "../lib/cloudgrid-cn.js";
|
|
6
|
+
import { EMPTY_CREATIONS_PREVIEWS } from "./empty-creations-previews.js";
|
|
7
|
+
/**
|
|
8
|
+
* The new-user empty state for "My creations" (#276): a dashed box holding a fan
|
|
9
|
+
* of creation thumbnails around a dashed "+" tile, "No creations yet", one line
|
|
10
|
+
* of explanation and an Add button.
|
|
11
|
+
*
|
|
12
|
+
* Built from Figma file `5ouhISIL0mwYGHurvCGoEO`, frame "Home" `9757:16735`, the
|
|
13
|
+
* middle element `9757:16756`. The Figma is the layout reference; the type is
|
|
14
|
+
* this library's (founder, 2026-10-06): the display stack for the heading, the
|
|
15
|
+
* body face for the line, the UI face for the button.
|
|
16
|
+
*
|
|
17
|
+
* ## The fan
|
|
18
|
+
*
|
|
19
|
+
* Five tiles, no rotation, read off `9757:16757`: 66x38 picture, 82x47 picture,
|
|
20
|
+
* the 97x56 "+" tile, 82x47 picture, 66x38 picture. Neighbours overlap by 20px,
|
|
21
|
+
* and the stacking runs towards the middle: the "+" tile is on top, the inner
|
|
22
|
+
* pair under it, the outer pair lowest. Every tile carries Figma's "Elevation 1",
|
|
23
|
+
* which is `--cg-shadow-card` value for value.
|
|
24
|
+
*
|
|
25
|
+
* The overlap is drawn as margins on the side that faces the middle (`-mr-5` on
|
|
26
|
+
* the left pair, `-ml-5` on the right pair) rather than one direction throughout,
|
|
27
|
+
* so dropping the outer pair at narrow widths leaves the fan centred.
|
|
28
|
+
*
|
|
29
|
+
* ## Narrow widths: container queries, not viewport breakpoints
|
|
30
|
+
*
|
|
31
|
+
* The block is a section of someone else's page, so what decides its layout is
|
|
32
|
+
* the width it is GIVEN, not the window. The root is a named container. Below
|
|
33
|
+
* 24rem the padding steps from 80/32 to 48/16 and the heading from 38 to 30;
|
|
34
|
+
* below 22rem, where the five-tile fan (313px) plus that padding no longer fits,
|
|
35
|
+
* the outer pair drops and three tiles remain (221px).
|
|
36
|
+
*
|
|
37
|
+
* ## Surfaces
|
|
38
|
+
*
|
|
39
|
+
* Figma draws the dashed lines and the "+" in `--cg-slate-500`, which is a ramp
|
|
40
|
+
* rung declared at `:root` only and measures 1.71:1 on the purple panel. So the
|
|
41
|
+
* default scope paints exactly that, and inside `[data-cg-surface]` the lines
|
|
42
|
+
* move to `--cg-border-control` and the "+" to `--cg-text-muted`, both of which
|
|
43
|
+
* flip. The "+" tile's fill is the page ground in Figma (`--cg-neutral-25`), and
|
|
44
|
+
* it has to be opaque because it covers the inner pictures; on a surface it takes
|
|
45
|
+
* that surface's own ground, the pattern `Drawer` and `Popover` already use.
|
|
46
|
+
* The heading is `--cg-text-accent` (purple, white on the panel, lime on ink),
|
|
47
|
+
* the reason `PageHeading` gives. The line is `text-ink`, token based, so rule 3
|
|
48
|
+
* holds wherever this lands. The button is `cta`, which does not flip by design.
|
|
49
|
+
*
|
|
50
|
+
* ## Accessibility
|
|
51
|
+
*
|
|
52
|
+
* The fan is decoration: the whole row is `aria-hidden` and every picture has an
|
|
53
|
+
* empty `alt`. The heading is a real heading at `level` (default 2) and the
|
|
54
|
+
* button's name is its label. With `href` the control renders as a link through
|
|
55
|
+
* `linkComponent` (Next's `Link`, say) and keeps the link role; with only
|
|
56
|
+
* `onAdd` it is a button.
|
|
57
|
+
*
|
|
58
|
+
* ## Default pictures
|
|
59
|
+
*
|
|
60
|
+
* `EMPTY_CREATIONS_PREVIEWS`, four crops of the frame's own image fills. The same
|
|
61
|
+
* bytes ship as files under `@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp`.
|
|
62
|
+
* The component inlines them as data URIs because a package has no public path:
|
|
63
|
+
* see `scripts/generate-creation-previews.mjs`.
|
|
64
|
+
*/
|
|
65
|
+
/** The heading and the line, as the frame writes them. */
|
|
66
|
+
const EMPTY_CREATIONS_TITLE = "No creations yet";
|
|
67
|
+
const EMPTY_CREATIONS_DESCRIPTION = "Your creations will show up here, along with stats";
|
|
68
|
+
/**
|
|
69
|
+
* The dashed hairline: the frame's slate on the default ground, a flipping
|
|
70
|
+
* border token on either surface.
|
|
71
|
+
*/
|
|
72
|
+
const DASHED_LINE = "border border-dashed border-steel in-data-[cg-surface=panel]:border-line in-data-[cg-surface=ink]:border-line";
|
|
73
|
+
/**
|
|
74
|
+
* The four picture slots, left to right, outside the "+" tile. `outer` slots
|
|
75
|
+
* are the ones that drop at narrow widths. The z-order rises towards the middle.
|
|
76
|
+
*/
|
|
77
|
+
const PICTURE_SLOTS = [
|
|
78
|
+
{ side: "left", outer: true, className: "z-10 h-9.5 w-16.5 -mr-5" },
|
|
79
|
+
{ side: "left", outer: false, className: "z-20 h-11.75 w-20.5 -mr-5" },
|
|
80
|
+
{ side: "right", outer: false, className: "z-20 h-11.75 w-20.5 -ml-5" },
|
|
81
|
+
{ side: "right", outer: true, className: "z-10 h-9.5 w-16.5 -ml-5" },
|
|
82
|
+
];
|
|
83
|
+
function EmptyCreations({ onAdd, href, linkComponent, addLabel = "Add", previews, level = 2, className, ...props }) {
|
|
84
|
+
const sources = previews && previews.length > 0 ? previews : EMPTY_CREATIONS_PREVIEWS;
|
|
85
|
+
const Heading = `h${level}`;
|
|
86
|
+
const Link = linkComponent ?? "a";
|
|
87
|
+
const picture = (index) => {
|
|
88
|
+
const slot = PICTURE_SLOTS[index];
|
|
89
|
+
return (_jsx("span", { "data-slot": "empty-creations-preview", "data-outer": slot.outer ? "" : undefined, className: cn("relative block shrink-0 overflow-hidden rounded-md bg-raised shadow-card", slot.className, slot.outer && "@max-[22rem]/empty-creations:hidden"), children: _jsx("img", { src: sources[index % sources.length], alt: "", decoding: "async", draggable: false, className: "block size-full object-cover" }) }, `${slot.side}-${index}`));
|
|
90
|
+
};
|
|
91
|
+
// Both the button and the link are the library Button, `cta`: the frame's
|
|
92
|
+
// teal pill with ink on it. The frame's control is 40 high, 20 across and
|
|
93
|
+
// rounded 16, which is `h-10 px-5 rounded-xl`; the label is the UI face, bold,
|
|
94
|
+
// at the 15px body-sm rung.
|
|
95
|
+
const buttonClass = "h-10 rounded-xl px-5 font-ui text-body-sm font-bold";
|
|
96
|
+
return (_jsx("section", { "data-slot": "empty-creations", className: cn("@container/empty-creations w-full rounded-md", DASHED_LINE, className), ...props, children: _jsxs("div", { className: "flex flex-col items-center gap-6 px-8 py-20 text-center @max-sm/empty-creations:px-4 @max-sm/empty-creations:py-12", children: [_jsxs("div", { "data-slot": "empty-creations-fan", "aria-hidden": "true", className: "flex items-center justify-center", children: [picture(0), picture(1), _jsx("span", { "data-slot": "empty-creations-add-tile", className: cn("relative z-30 flex h-14 w-24.25 shrink-0 items-center justify-center rounded-md shadow-card", "bg-page in-data-[cg-surface=panel]:bg-panel in-data-[cg-surface=ink]:bg-code", DASHED_LINE), children: _jsx(PlusIcon, { className: "size-5 text-steel in-data-[cg-surface=panel]:text-faint in-data-[cg-surface=ink]:text-faint" }) }), picture(2), picture(3)] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsx(Heading, { "data-slot": "empty-creations-title", className: "m-0 font-display font-heavy uppercase text-balance text-display-md leading-display tracking-display text-(--cg-text-accent) @max-sm/empty-creations:text-display-sm", children: EMPTY_CREATIONS_TITLE }), _jsx("p", { "data-slot": "empty-creations-description", className: "m-0 font-body text-body-sm text-pretty text-ink", children: EMPTY_CREATIONS_DESCRIPTION })] }), href !== undefined ? (
|
|
97
|
+
/*
|
|
98
|
+
A real link rather than a click handler. Base UI's Button warns when
|
|
99
|
+
the rendered element is not a <button>, hence `nativeButton={false}`,
|
|
100
|
+
and it stamps role="button" on a non-native target, put back to
|
|
101
|
+
`link` because this one navigates. Same shape as SignInOptions.
|
|
102
|
+
*/
|
|
103
|
+
_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, render: _jsx(Link, { href: href }), nativeButton: false, role: "link", onClick: onAdd, children: addLabel })) : (_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, type: "button", onClick: onAdd, children: addLabel }))] }) }));
|
|
104
|
+
}
|
|
105
|
+
export { EmptyCreations, EMPTY_CREATIONS_DESCRIPTION, EMPTY_CREATIONS_PREVIEWS, EMPTY_CREATIONS_TITLE };
|
|
106
|
+
//# sourceMappingURL=empty-creations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-creations.js","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":"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"}
|
|
@@ -140,10 +140,29 @@ import * as React from "react";
|
|
|
140
140
|
* an `sr-only` span, because "agent" is information and a decorative mark is not
|
|
141
141
|
* a way to convey it.
|
|
142
142
|
*
|
|
143
|
+
* ## A click opens the details page (#268)
|
|
144
|
+
*
|
|
145
|
+
* Founder, 2026-10-05: *clicking an app card on any page opens the app's page
|
|
146
|
+
* in the console*, not the live app. So when `dashboardHref` is set, the
|
|
147
|
+
* DETAILS link owns the card's one stretched hit area — the whole card,
|
|
148
|
+
* thumbnail included — whether or not the entity is live, and the live link is
|
|
149
|
+
* the small secondary arrow, still `target="_blank"`, named "Open live app".
|
|
150
|
+
* The details link is named "Details" and wears `EntityDetailsIcon`
|
|
151
|
+
* (`list-magnifying-glass`); it renders through `linkComponent` when one is
|
|
152
|
+
* passed, so a router can navigate client-side.
|
|
153
|
+
*
|
|
154
|
+
* Two things did not change. With no `dashboardHref` the live link owns the
|
|
155
|
+
* click as it always did, and `primaryAction="live"` restores the whole
|
|
156
|
+
* pre-#268 model for a consumer that wants it. Much of the history below
|
|
157
|
+
* describes the live link as "Open" and the details link as "Dashboard"; those
|
|
158
|
+
* are the same two doors under their old names, and every rule about them — the
|
|
159
|
+
* new tab, the `rel`, the #171 gating of whichever door is secondary, the #193
|
|
160
|
+
* disabled state — carries over unchanged.
|
|
161
|
+
*
|
|
143
162
|
* ## The panel, and the rule it supersedes
|
|
144
163
|
*
|
|
145
164
|
* `reveal` puts a WHITE panel over the bottom of the card carrying the title,
|
|
146
|
-
* the state dot, two real links (
|
|
165
|
+
* the state dot, two real links (details and live), the description, the
|
|
147
166
|
* creator and the card's own controls. It shows on hover and on `:focus-within`,
|
|
148
167
|
* and it respects `prefers-reduced-motion` by arriving without the fade rather
|
|
149
168
|
* than not at all.
|
|
@@ -154,16 +173,18 @@ import * as React from "react";
|
|
|
154
173
|
* laid over the lower half of the picture, the type is the page's own ink, and
|
|
155
174
|
* the picture above it stays a picture.
|
|
156
175
|
*
|
|
157
|
-
* **The
|
|
176
|
+
* **The details action is not a gear.** Founder direction
|
|
158
177
|
* 2026-09-08 (#182). The door it opens is the entity's page in the console,
|
|
159
178
|
* which shows analytics and what runs under the hood — so what it promises is
|
|
160
179
|
* "look inside", and a gear promises "change how this is configured". Those are
|
|
161
180
|
* different pages and a reader who takes one for the other has been misled by
|
|
162
|
-
* the icon rather than by the label. The mark
|
|
181
|
+
* the icon rather than by the label. The mark was `EntityDashboardIcon`
|
|
163
182
|
* (Phosphor `chart-line-up` since #221 — `gauge` at #182, `engine` at #200, and
|
|
164
183
|
* each was unpicked by looking at it: a dial reads as a speed, an engine reads
|
|
165
|
-
* as machinery, and neither is the number a person opened the page for)
|
|
166
|
-
*
|
|
184
|
+
* as machinery, and neither is the number a person opened the page for), and
|
|
185
|
+
* since #268 it is `EntityDetailsIcon`, a list under a lens, because the page
|
|
186
|
+
* is findings rather than a chart. `SettingsIcon` is still exported for the
|
|
187
|
+
* surfaces that really are settings.
|
|
167
188
|
*
|
|
168
189
|
* The prop is `dashboardHref`. `settingsHref` is kept as a deprecated alias for
|
|
169
190
|
* this minor and maps straight to it, so no caller breaks on the rename — see
|
|
@@ -233,19 +254,23 @@ import * as React from "react";
|
|
|
233
254
|
* instead of on a wrapper, because an `<a>` inside an `<a>` is invalid HTML and
|
|
234
255
|
* browsers repair it by closing the outer one — which silently unlinks the card
|
|
235
256
|
* and leaves the actions where the parser decides to put them. The panel is the
|
|
236
|
-
* link surface instead:
|
|
237
|
-
*
|
|
238
|
-
*
|
|
239
|
-
*
|
|
240
|
-
*
|
|
241
|
-
* reveal
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
*
|
|
245
|
-
*
|
|
246
|
-
*
|
|
247
|
-
*
|
|
248
|
-
*
|
|
257
|
+
* link surface instead: the door that owns the click (details since #268,
|
|
258
|
+
* live without a `dashboardHref`) stretches across the whole card with an
|
|
259
|
+
* `::after`, and the other door sits above it. Until #268 that stretch covered
|
|
260
|
+
* only the panel, so the top of the thumbnail was dead; the panel now sits in a
|
|
261
|
+
* transparent full-card layer, which is what the stretch sizes to. Every
|
|
262
|
+
* existing caller is unaffected — `reveal` defaults off and the wrapper behaves
|
|
263
|
+
* exactly as it did. (With no `href` at all, the live link is disabled — see
|
|
264
|
+
* "The reveal never depends on data" below.)
|
|
265
|
+
*
|
|
266
|
+
* **The panel stays clickable while it is invisible — except the secondary
|
|
267
|
+
* door.** `opacity-0` is a paint state, not a pointer state, so a touch user
|
|
268
|
+
* with no hover at all still gets the card's door by tapping the thumbnail.
|
|
269
|
+
* Gating the stretched link's pointer events on hover would make the card do
|
|
270
|
+
* nothing on a phone.
|
|
271
|
+
*
|
|
272
|
+
* The secondary door (Dashboard, below, before #268; the live arrow since) is
|
|
273
|
+
* the one exception, and it has to be. It is `relative`, so it
|
|
249
274
|
* stacks above Open's stretched hit area; live at rest, that made a pill-sized
|
|
250
275
|
* region of an invisible panel go to that link on a tap — different from every
|
|
251
276
|
* pixel around it, and impossible to see (#171). So it carries
|
|
@@ -445,7 +470,7 @@ declare function EntityKindBadge({ kind, size, className, ...props }: Omit<React
|
|
|
445
470
|
kind: EntityKind;
|
|
446
471
|
size?: "sm" | "md";
|
|
447
472
|
}): React.JSX.Element;
|
|
448
|
-
declare function EntityCard({ title, slug, description, size, titleLines, descriptionLines, status, statusDot, headerActions, stats, seed, previewUrl, kind, reveal, openDisabledReason, dashboardHref, settingsHref, creator, panelMeta, href, ariaLabel, meta, footer, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "title"> & {
|
|
473
|
+
declare function EntityCard({ title, slug, description, size, titleLines, descriptionLines, status, statusDot, headerActions, stats, seed, previewUrl, kind, reveal, openDisabledReason, dashboardHref, settingsHref, primaryAction, linkComponent, creator, panelMeta, href, ariaLabel, meta, footer, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "title"> & {
|
|
449
474
|
title: string;
|
|
450
475
|
/** The entity's address, in the mono utility face. */
|
|
451
476
|
slug?: string;
|
|
@@ -551,13 +576,17 @@ declare function EntityCard({ title, slug, description, size, titleLines, descri
|
|
|
551
576
|
*/
|
|
552
577
|
openDisabledReason?: React.ReactNode;
|
|
553
578
|
/**
|
|
554
|
-
* The
|
|
555
|
-
*
|
|
579
|
+
* The details action's target: the entity's page in the console — Overview,
|
|
580
|
+
* insights, and what runs under the hood.
|
|
581
|
+
*
|
|
582
|
+
* Since #268 this is the card's CLICK. When it is set, the details link owns
|
|
583
|
+
* the stretched hit area, so a click or tap anywhere on the card, thumbnail
|
|
584
|
+
* included, goes here; the live entity becomes the small secondary icon. See
|
|
585
|
+
* `primaryAction` for the one way to keep the old live-first behaviour.
|
|
556
586
|
*
|
|
557
587
|
* Read wherever the action pair renders — the panel on a stacked card, the end
|
|
558
|
-
* of the cluster on a `row` (#182).
|
|
559
|
-
*
|
|
560
|
-
* takes the stretched hit area (#193).
|
|
588
|
+
* of the cluster on a `row` (#182). The prop keeps its #182 name: renaming it
|
|
589
|
+
* would break every caller for a word, and what it points at did not move.
|
|
561
590
|
*/
|
|
562
591
|
dashboardHref?: string;
|
|
563
592
|
/**
|
|
@@ -569,6 +598,34 @@ declare function EntityCard({ title, slug, description, size, titleLines, descri
|
|
|
569
598
|
* next major; the fix is one word at each call site.
|
|
570
599
|
*/
|
|
571
600
|
settingsHref?: string;
|
|
601
|
+
/**
|
|
602
|
+
* Which door the card's click opens. `"details"` by default (#268, founder
|
|
603
|
+
* 2026-10-05): a click on an entity card opens its page in the console, and
|
|
604
|
+
* the live entity is the secondary icon, still opening in a new tab.
|
|
605
|
+
*
|
|
606
|
+
* `"live"` restores the pre-#268 model for a consumer that needs it: the live
|
|
607
|
+
* link owns the stretched hit area and the details link is the lifted
|
|
608
|
+
* secondary. The console does not pass it.
|
|
609
|
+
*
|
|
610
|
+
* Only a preference between two doors that both exist. With no
|
|
611
|
+
* `dashboardHref` the live link owns the click whatever this says, and with
|
|
612
|
+
* no `href` the details link does (#193), because a card's one stretched
|
|
613
|
+
* layer always belongs to a door that can be opened.
|
|
614
|
+
*/
|
|
615
|
+
primaryAction?: "details" | "live";
|
|
616
|
+
/**
|
|
617
|
+
* The element the DETAILS link renders as. A plain `<a>` by default.
|
|
618
|
+
*
|
|
619
|
+
* Pass your router's link — Next's `Link`, for the console — so a card click
|
|
620
|
+
* navigates client-side instead of reloading the page. It receives `href`,
|
|
621
|
+
* `className`, `data-*` attributes and children, which is the anchor subset
|
|
622
|
+
* every router link forwards to the `<a>` it renders.
|
|
623
|
+
*
|
|
624
|
+
* Only the details link. The live link stays a plain `<a target="_blank">`:
|
|
625
|
+
* it leaves for a tenant's own app in a new tab, which no client router can
|
|
626
|
+
* or should handle.
|
|
627
|
+
*/
|
|
628
|
+
linkComponent?: React.ElementType;
|
|
572
629
|
/**
|
|
573
630
|
* Who made it, shown on the reveal panel. `avatar` is a node so a consumer can
|
|
574
631
|
* pass its own image, initials tile or `EntityIdentity`; this card does not
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B
|
|
1
|
+
{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-card.tsx"],"names":[],"mappings":"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"}
|