@crewlethq/ui 0.33.0 → 0.34.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.
Files changed (70) hide show
  1. package/README.md +18 -0
  2. package/dist/ArtifactBar/index.js +6 -4
  3. package/dist/ArtifactCard/ArtifactCard.d.ts +51 -11
  4. package/dist/ArtifactCard/index.d.ts +2 -2
  5. package/dist/ArtifactCard/index.js +3 -1
  6. package/dist/ArtifactCard-XHRLAL7C.css +289 -0
  7. package/dist/ArtifactCover/index.js +4 -2
  8. package/dist/ArtifactIcon/index.js +4 -2
  9. package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts +53 -0
  10. package/dist/ArtifactKindIllustration/index.d.ts +3 -0
  11. package/dist/ArtifactKindIllustration/index.js +3 -0
  12. package/dist/ArtifactKindIllustration-4NG6IE3C.css +211 -0
  13. package/dist/Canvas/index.js +2 -2
  14. package/dist/CanvasBoard/index.js +4 -4
  15. package/dist/CanvasToolbar/index.js +3 -3
  16. package/dist/ChangeMark/index.js +3 -3
  17. package/dist/FactList/index.js +2 -2
  18. package/dist/LivePreview/LivePreview.d.ts +83 -0
  19. package/dist/LivePreview/budget.d.ts +50 -0
  20. package/dist/LivePreview/index.d.ts +5 -0
  21. package/dist/LivePreview/index.js +2 -0
  22. package/dist/LivePreview-SRO7KHO4.css +65 -0
  23. package/dist/OrgTable/index.js +1 -1
  24. package/dist/RichEditor/index.js +2 -2
  25. package/dist/SandboxedFrame/index.js +2 -2
  26. package/dist/Select/Select.d.ts +10 -0
  27. package/dist/Select/index.d.ts +1 -1
  28. package/dist/Select/index.js +1 -1
  29. package/dist/{Select-2P7AWUE4.css → Select-A54YS5EP.css} +29 -0
  30. package/dist/ShareDialog/index.js +2 -2
  31. package/dist/SheetGrid/SheetGrid.d.ts +4 -2
  32. package/dist/SheetGrid/index.js +4 -4
  33. package/dist/{SheetGrid-AKPUCK67.css → SheetGrid-GDPCCZ4V.css} +52 -11
  34. package/dist/SheetModel/index.js +1 -1
  35. package/dist/SheetModel/labels.d.ts +1 -1
  36. package/dist/Switcher/index.js +2 -2
  37. package/dist/TimeWindowPicker/index.js +2 -2
  38. package/dist/Tooltip/Tooltip.d.ts +12 -1
  39. package/dist/Tooltip/index.d.ts +1 -1
  40. package/dist/Tooltip/index.js +1 -1
  41. package/dist/TreeCanvas/index.js +3 -3
  42. package/dist/{chunk-22UEIXZE.js → chunk-3P4Y5RX6.js} +1 -1
  43. package/dist/{chunk-GLSOD5Z4.js → chunk-3Y56GQPM.js} +1 -1
  44. package/dist/{chunk-5FYPE5GL.js → chunk-6ZJ3N7QI.js} +5 -2
  45. package/dist/{chunk-2DHMVB5J.js → chunk-AORVEG5V.js} +1 -1
  46. package/dist/{chunk-UQGFHNDI.js → chunk-BQ7AKL2N.js} +3 -2
  47. package/dist/{chunk-ORT5IKHP.js → chunk-CCLNGVCM.js} +1 -1
  48. package/dist/{chunk-UNXLTJU7.js → chunk-CFAJP777.js} +1 -1
  49. package/dist/{chunk-G4ZW7A2W.js → chunk-EWAFN2IU.js} +33 -34
  50. package/dist/{chunk-7WHDPLVJ.js → chunk-HOIZ6MIS.js} +1 -1
  51. package/dist/{chunk-Z6GFMI2Z.js → chunk-IUD5VA2Z.js} +2 -2
  52. package/dist/chunk-KF6YGL4B.js +160 -0
  53. package/dist/{chunk-HH2GKAAE.js → chunk-PLDUNXAO.js} +1 -1
  54. package/dist/{chunk-ZNBLFCQS.js → chunk-SGHIAGPR.js} +2 -2
  55. package/dist/chunk-UDQW6UK7.js +129 -0
  56. package/dist/{chunk-4IJS5CPF.js → chunk-UHJQDFKQ.js} +1 -1
  57. package/dist/{chunk-J6ZSH3F5.js → chunk-VI5FWDZW.js} +2 -2
  58. package/dist/{chunk-MDNVHIB2.js → chunk-WPX6A5BV.js} +2 -2
  59. package/dist/chunk-XTOVADJU.js +170 -0
  60. package/dist/generated/index.d.ts +2 -0
  61. package/dist/generated/index.js +47 -45
  62. package/dist/index.js +47 -45
  63. package/dist/styles.css +544 -27
  64. package/package.json +3 -3
  65. package/dist/ArtifactCard-AS5Z4CVI.css +0 -124
  66. package/dist/chunk-DFZMYB5X.js +0 -108
  67. package/dist/{chunk-3U7S6ZUN.js → chunk-356JNSER.js} +1 -1
  68. package/dist/{chunk-MTMKIUWF.js → chunk-E4NNGC6X.js} +1 -1
  69. package/dist/{chunk-O37AQNLK.js → chunk-GMU6SQ6B.js} +1 -1
  70. /package/dist/{chunk-2JJIN6JN.js → chunk-YCARLYI6.js} +0 -0
@@ -1,124 +0,0 @@
1
- /*
2
- * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
3
- * lines up whatever each preview is, then the title and up to three lines of
4
- * facts. `compact` is a row with the kind's glyph in place of the preview.
5
- */
6
-
7
- /*
8
- * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
9
- * class too. The two sheets meet at equal weight and the bundle orders them
10
- * by file name, which puts this one first: `.crewlet-card` and
11
- * `.crewlet-card--p-none` then won, and the compact row was drawn as a
12
- * padless column with its glyph on a line of its own.
13
- */
14
- .crewlet-card.crewlet-artifact-card {
15
- display: flex;
16
- flex-direction: column;
17
- min-width: 0;
18
- overflow: hidden;
19
- color: inherit;
20
- text-decoration: none;
21
- }
22
-
23
- .crewlet-card.crewlet-artifact-card--compact {
24
- flex-direction: row;
25
- align-items: flex-start;
26
- gap: var(--spacing-3);
27
- padding: var(--spacing-3);
28
- }
29
-
30
- .crewlet-artifact-card__preview {
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- aspect-ratio: 16 / 9;
35
- overflow: hidden;
36
- border-bottom: 1px solid var(--color-border-default);
37
- background: var(--color-surface-inset);
38
- color: var(--color-text-tertiary);
39
- }
40
-
41
- .crewlet-artifact-card__glyph {
42
- display: inline-flex;
43
- color: var(--color-text-tertiary);
44
- }
45
-
46
- .crewlet-artifact-card__glyph--compact {
47
- flex: none;
48
- align-items: center;
49
- justify-content: center;
50
- width: var(--size-control-md);
51
- height: var(--size-control-md);
52
- border-radius: var(--radius-md);
53
- background: var(--color-surface-inset);
54
- }
55
-
56
- .crewlet-artifact-card__body {
57
- display: flex;
58
- flex-direction: column;
59
- gap: var(--spacing-1);
60
- min-width: 0;
61
- padding: var(--spacing-3);
62
- }
63
-
64
- .crewlet-artifact-card--compact .crewlet-artifact-card__body {
65
- padding: 0;
66
- }
67
-
68
- .crewlet-artifact-card__title-row {
69
- display: flex;
70
- align-items: center;
71
- gap: var(--spacing-1);
72
- min-width: 0;
73
- }
74
-
75
- .crewlet-artifact-card__title {
76
- overflow: hidden;
77
- color: var(--color-text-primary);
78
- font-weight: var(--font-weight-semibold);
79
- text-overflow: ellipsis;
80
- white-space: nowrap;
81
- }
82
-
83
- .crewlet-artifact-card__pin {
84
- display: inline-flex;
85
- flex: none;
86
- color: var(--color-text-tertiary);
87
- }
88
-
89
- .crewlet-artifact-card__facts {
90
- display: flex;
91
- flex-direction: column;
92
- gap: var(--spacing-1);
93
- color: var(--color-text-tertiary);
94
- font-size: var(--font-size-xs);
95
- }
96
-
97
- .crewlet-artifact-card__line {
98
- display: flex;
99
- flex-wrap: wrap;
100
- align-items: center;
101
- gap: var(--spacing-1) var(--spacing-2);
102
- min-width: 0;
103
- }
104
-
105
- /* THE FACTS OF ONE LINE ARE A RUN, "Sheet · OPS · v12", each after the first
106
- opened by a quiet dot, so two short words never read as one phrase. */
107
- .crewlet-artifact-card__line > * + *::before {
108
- content: '·';
109
- margin-inline-end: var(--spacing-2);
110
- color: var(--color-text-tertiary);
111
- }
112
-
113
- .crewlet-artifact-card__owner,
114
- .crewlet-artifact-card__presence {
115
- display: inline-flex;
116
- align-items: center;
117
- gap: var(--spacing-1);
118
- min-width: 0;
119
- }
120
-
121
- .crewlet-artifact-card__changes {
122
- color: var(--color-text-secondary);
123
- font-weight: var(--font-weight-medium);
124
- }
@@ -1,108 +0,0 @@
1
- import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
2
- import { RelativeTime } from './chunk-3CZ7XAVY.js';
3
- import { Card } from './chunk-ACA27MZH.js';
4
- import { AvatarStack } from './chunk-5AQBPHZD.js';
5
- import { VisuallyHidden } from './chunk-BZFWDIV6.js';
6
- import { cx } from './chunk-ODEQTPFM.js';
7
- import './ArtifactCard-AS5Z4CVI.css';
8
- import { useId } from 'react';
9
- import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
10
- import { jsx, jsxs } from 'react/jsx-runtime';
11
-
12
- var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
13
- var KIND_GLYPHS = {
14
- html: FileCodeGlyph,
15
- doc: FileTextGlyph,
16
- slides: PresentationGlyph,
17
- design: PaletteGlyph,
18
- dashboard: LayoutDashboardGlyph,
19
- sheet: TableGlyph
20
- };
21
- function ArtifactKindGlyph({ kind, size = "md" }) {
22
- const Drawn = KIND_GLYPHS[kind];
23
- return /* @__PURE__ */ jsx(Drawn, { size });
24
- }
25
- function ArtifactPreviewGlyph({ kind }) {
26
- return /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) });
27
- }
28
- var LABELS = {
29
- kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
30
- pinned: "Pinned",
31
- version: (version) => `v${version}`,
32
- changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
33
- present: (count) => count === 1 ? "1 here now" : `${count} here now`,
34
- updated: "Updated",
35
- by: (name) => `by ${name}`
36
- };
37
- function ArtifactCard({
38
- title,
39
- kind,
40
- href,
41
- preview,
42
- owner,
43
- updatedAt,
44
- updatedBy,
45
- presence,
46
- changes,
47
- pinned = false,
48
- version,
49
- project,
50
- size = "card",
51
- className,
52
- now,
53
- labels
54
- }) {
55
- const text = { ...LABELS, ...labels, kinds: { ...LABELS.kinds, ...labels?.kinds } };
56
- const titleId = useId();
57
- const factsId = useId();
58
- const present = presence && presence.length > 0 ? presence : null;
59
- const changedBy = updatedBy && updatedBy !== owner?.name ? updatedBy : void 0;
60
- return /* @__PURE__ */ jsxs(
61
- Card,
62
- {
63
- href,
64
- variant: "subtle",
65
- padding: "none",
66
- className: cx("crewlet-artifact-card", `crewlet-artifact-card--${size}`, className),
67
- "aria-labelledby": titleId,
68
- "aria-describedby": factsId,
69
- children: [
70
- size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
71
- /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
72
- /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
73
- /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
74
- pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "xs" }) }) : null
75
- ] }),
76
- /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
77
- /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
78
- /* @__PURE__ */ jsx("span", { children: text.kinds[kind] }),
79
- project ? /* @__PURE__ */ jsx("span", { children: project }) : null,
80
- version !== void 0 ? /* @__PURE__ */ jsx("span", { children: text.version(version) }) : null,
81
- pinned ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text.pinned }) : null
82
- ] }),
83
- /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
84
- owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
85
- /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
86
- /* @__PURE__ */ jsx("span", { children: owner.name })
87
- ] }) : null,
88
- /* @__PURE__ */ jsxs("span", { children: [
89
- `${text.updated} `,
90
- /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now }),
91
- changedBy ? ` ${text.by(changedBy)}` : null
92
- ] })
93
- ] }),
94
- present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
95
- present ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__presence", children: [
96
- /* @__PURE__ */ jsx(AvatarStack, { members: present, max: 3, size: "xs", decorative: true }),
97
- /* @__PURE__ */ jsx("span", { children: text.present(present.length) })
98
- ] }) : null,
99
- changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__changes", children: text.changes(changes) }) : null
100
- ] }) : null
101
- ] })
102
- ] })
103
- ]
104
- }
105
- );
106
- }
107
-
108
- export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph, ArtifactPreviewGlyph };
@@ -1,6 +1,6 @@
1
- import { Skeleton } from './chunk-TEUQWOWZ.js';
2
1
  import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
3
2
  import { Callout } from './chunk-SZZRIHGT.js';
3
+ import { Skeleton } from './chunk-TEUQWOWZ.js';
4
4
  import { Button } from './chunk-OG6CL3EB.js';
5
5
  import { cx } from './chunk-ODEQTPFM.js';
6
6
  import './SandboxedFrame-P5NASXB7.css';
@@ -1,6 +1,6 @@
1
1
  import { richEditorLabels } from './chunk-4B6LSFDS.js';
2
- import { Skeleton } from './chunk-TEUQWOWZ.js';
3
2
  import { Callout } from './chunk-SZZRIHGT.js';
3
+ import { Skeleton } from './chunk-TEUQWOWZ.js';
4
4
  import { Button } from './chunk-OG6CL3EB.js';
5
5
  import './RichEditor-NPD2KAPS.css';
6
6
  import { forwardRef, useState, useEffect } from 'react';
@@ -1,9 +1,9 @@
1
- import { Skeleton } from './chunk-TEUQWOWZ.js';
2
1
  import { Modal } from './chunk-XEGZHHRH.js';
3
2
  import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
4
3
  import { Popover } from './chunk-K3IJQNB7.js';
5
4
  import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
6
5
  import { Input } from './chunk-6QFAK2WV.js';
6
+ import { Skeleton } from './chunk-TEUQWOWZ.js';
7
7
  import { useMediaMatch } from './chunk-RTPQDNW3.js';
8
8
  import { focusables, isComposing } from './chunk-R25RGPUB.js';
9
9
  import { announce } from './chunk-RSAQOKH3.js';
File without changes