@crewlethq/ui 0.52.2 → 0.53.0

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 (117) hide show
  1. package/README.md +14 -0
  2. package/dist/AgentHandoffPanel/index.js +8 -8
  3. package/dist/AppShell/index.js +3 -3
  4. package/dist/ArrangeFrame/index.js +2 -2
  5. package/dist/ArrangeList/index.js +6 -6
  6. package/dist/ArtifactBar/index.js +8 -8
  7. package/dist/ArtifactCard/index.js +6 -6
  8. package/dist/ArtifactMakeRow/index.js +2 -2
  9. package/dist/AvatarPicker/index.js +9 -9
  10. package/dist/Canvas/index.js +3 -3
  11. package/dist/CanvasBoard/index.js +5 -5
  12. package/dist/CanvasToolbar/index.js +4 -4
  13. package/dist/CharacterPicker/index.js +2 -2
  14. package/dist/Checkbox/index.js +5 -5
  15. package/dist/ColorField/index.js +5 -5
  16. package/dist/Combobox/index.js +6 -6
  17. package/dist/CommandPalette/index.js +9 -9
  18. package/dist/CommentThread/index.js +8 -8
  19. package/dist/Composer/index.js +6 -6
  20. package/dist/ConfirmField/index.js +5 -5
  21. package/dist/ContrastHelp/index.js +1 -1
  22. package/dist/DataGrid/index.js +7 -7
  23. package/dist/DataTable/index.js +9 -9
  24. package/dist/DataView/index.js +13 -13
  25. package/dist/DatasetSource/index.js +1 -1
  26. package/dist/DateTimePicker/index.js +2 -2
  27. package/dist/DocTabsEditor/index.js +7 -7
  28. package/dist/{Editor-FEKMRFBK.js → Editor-RAUVEXLG.js} +7 -7
  29. package/dist/FolderTile/FolderTile.d.ts +20 -13
  30. package/dist/FolderTile/index.d.ts +1 -1
  31. package/dist/FolderTile/index.js +1 -1
  32. package/dist/{FolderTile-MIUEB7SO.css → FolderTile-NM7CRTVH.css} +168 -29
  33. package/dist/HuePicker/index.js +6 -6
  34. package/dist/InlineEditor/index.js +1 -1
  35. package/dist/Input/index.js +4 -4
  36. package/dist/LinkInterstitial/index.js +4 -4
  37. package/dist/ListInput/index.js +7 -7
  38. package/dist/MarkdownEditor/index.js +6 -6
  39. package/dist/Menu/index.js +2 -2
  40. package/dist/MergeConflicts/index.js +6 -6
  41. package/dist/Modal/index.js +3 -3
  42. package/dist/OrgTable/index.js +2 -2
  43. package/dist/PeopleRail/index.js +2 -2
  44. package/dist/PresenterView/index.js +1 -1
  45. package/dist/PrincipalPicker/index.js +7 -7
  46. package/dist/RichEditor/index.js +1 -1
  47. package/dist/SegmentedControl/index.js +5 -5
  48. package/dist/SelectionBar/index.js +2 -2
  49. package/dist/SetupWizard/index.js +2 -2
  50. package/dist/ShareDialog/index.js +4 -4
  51. package/dist/SheetColumnEditor/index.js +13 -13
  52. package/dist/SheetGrid/index.js +6 -6
  53. package/dist/SlideFilmstrip/index.js +5 -5
  54. package/dist/Switcher/index.js +7 -7
  55. package/dist/TableCells/index.js +1 -1
  56. package/dist/Tabs/index.js +4 -4
  57. package/dist/TagsInput/index.js +3 -3
  58. package/dist/ThemeSwitcher/index.js +6 -6
  59. package/dist/TimeWindowPicker/index.js +6 -6
  60. package/dist/TreeCanvas/index.js +4 -4
  61. package/dist/TreeGrid/index.js +1 -1
  62. package/dist/VersionCompare/index.js +8 -8
  63. package/dist/{chunk-PGYIDNGG.js → chunk-362TAJUQ.js} +2 -2
  64. package/dist/{chunk-U3LNU4B2.js → chunk-4QW6K7RK.js} +1 -1
  65. package/dist/{chunk-2GIWL7IS.js → chunk-55H7REZK.js} +1 -1
  66. package/dist/{chunk-6FVGSWLS.js → chunk-5FB6DGGC.js} +2 -2
  67. package/dist/{chunk-SQ4JFHO7.js → chunk-5UEANIIW.js} +1 -1
  68. package/dist/{chunk-RQI43UJ7.js → chunk-5WJAH6JG.js} +1 -1
  69. package/dist/{chunk-6VQA2LZC.js → chunk-5Z4DAS53.js} +2 -2
  70. package/dist/{chunk-GPZXBJFU.js → chunk-AQCJKX5R.js} +3 -3
  71. package/dist/{chunk-G5SUSCWL.js → chunk-ATRRLHLU.js} +1 -1
  72. package/dist/{chunk-VP2ODUCC.js → chunk-B424UBV3.js} +2 -2
  73. package/dist/{chunk-34RMTXDZ.js → chunk-BIRR4RKZ.js} +1 -1
  74. package/dist/{chunk-SSHDQBHR.js → chunk-CPOD27EG.js} +1 -1
  75. package/dist/{chunk-NMR7AJSB.js → chunk-FAHAJWZR.js} +4 -4
  76. package/dist/{chunk-SEPSXOGJ.js → chunk-HTEQFRDI.js} +1 -1
  77. package/dist/{chunk-ILFEWRLG.js → chunk-I4Q6PACO.js} +2 -2
  78. package/dist/{chunk-VN47PYUF.js → chunk-JFKPOVDA.js} +3 -3
  79. package/dist/{chunk-5WYPSVRX.js → chunk-JIMTX2X3.js} +1 -1
  80. package/dist/{chunk-XS2FJVMT.js → chunk-JV4G7LH3.js} +1 -1
  81. package/dist/{chunk-7PE56HHD.js → chunk-K3UA2GJF.js} +2 -2
  82. package/dist/{chunk-CAVWDJF4.js → chunk-LP6EDXO5.js} +1 -1
  83. package/dist/{chunk-EZ43L6T7.js → chunk-LZDTH436.js} +2 -2
  84. package/dist/{chunk-D6MTBXAJ.js → chunk-M7MMWXKE.js} +1 -1
  85. package/dist/{chunk-FNPZ3LLQ.js → chunk-N3MM67K4.js} +2 -2
  86. package/dist/{chunk-WXOYHVWG.js → chunk-NC3Z6MM3.js} +2 -2
  87. package/dist/{chunk-CQEYF3UW.js → chunk-ROXAHDMA.js} +3 -3
  88. package/dist/{chunk-FXHWOXGD.js → chunk-TFIINTEU.js} +17 -9
  89. package/dist/{chunk-3NXWH5NC.js → chunk-TNGIFWDG.js} +1 -1
  90. package/dist/{chunk-X4NIE7CI.js → chunk-UM5LMW5X.js} +1 -1
  91. package/dist/{chunk-GRKGLZFM.js → chunk-V3M7V5SO.js} +5 -5
  92. package/dist/{chunk-VVOPDWLX.js → chunk-VYVW24VC.js} +1 -1
  93. package/dist/{chunk-CUL5XV6O.js → chunk-WCIJW2SA.js} +1 -1
  94. package/dist/{chunk-UJ4VVK7R.js → chunk-WIYTIJF6.js} +1 -1
  95. package/dist/{chunk-C6Z3MLSA.js → chunk-WO4W5FTB.js} +1 -1
  96. package/dist/{chunk-3QSKDZR5.js → chunk-XFZ7JWBJ.js} +2 -2
  97. package/dist/{chunk-J53T2QAH.js → chunk-XSHA74LN.js} +4 -4
  98. package/dist/{chunk-SS4XCUUJ.js → chunk-Z2SK4MPL.js} +2 -2
  99. package/dist/{chunk-5O72FSOK.js → chunk-ZXQXEP2S.js} +3 -3
  100. package/dist/{chunk-RFPCHMSX.js → chunk-ZZL54LEO.js} +1 -1
  101. package/dist/generated/index.js +79 -79
  102. package/dist/index.js +79 -79
  103. package/dist/styles.css +169 -30
  104. package/dist/utils/index.js +1 -1
  105. package/package.json +3 -3
  106. package/dist/{chunk-TMM32U7D.js → chunk-3JIZ2A6K.js} +1 -1
  107. package/dist/{chunk-DTSZUH6H.js → chunk-4C5CZT4D.js} +1 -1
  108. package/dist/{chunk-3RCHEFIL.js → chunk-DEBVNLFJ.js} +1 -1
  109. package/dist/{chunk-OCRVY42T.js → chunk-F6CKQX5D.js} +1 -1
  110. package/dist/{chunk-ZFM5L7M4.js → chunk-I6NNUIIT.js} +1 -1
  111. package/dist/{chunk-VWYT3GVV.js → chunk-LKBZV5IT.js} +1 -1
  112. package/dist/{chunk-D7Q5MQRF.js → chunk-MXBDOQA5.js} +2 -2
  113. package/dist/{chunk-R3BA3C4Y.js → chunk-RFK4ROA7.js} +1 -1
  114. package/dist/{chunk-SXBJMBSV.js → chunk-RRHB5WWN.js} +2 -2
  115. package/dist/{chunk-YCC2S7DF.js → chunk-SFG7TS4Q.js} +1 -1
  116. package/dist/{chunk-LJHH4WWB.js → chunk-TN22R6LW.js} +3 -3
  117. package/dist/{chunk-SNQRGH4A.js → chunk-VZICPYGR.js} +1 -1
@@ -17,14 +17,17 @@ export interface FolderContentsLabels {
17
17
  nothing: string;
18
18
  }
19
19
  /**
20
- * The line a folder's tile and its list row say about what is inside: "12
21
- * artifacts · 2 folders", one part alone when the other is none, and "Nothing
22
- * you can open yet" for neither.
20
+ * What a folder's tile and its list row say about what is inside, as its
21
+ * parts: "12 artifacts" and "2 folders", one part alone when the other is
22
+ * none, and "Nothing you can open yet" for neither.
23
23
  *
24
24
  * ONE PHRASING, EXPORTED, so the grid's tile and the list's name cell
25
- * (`ArtifactNameCell kind="folder"`, whose `detail` takes this) never say the
26
- * same count two ways.
25
+ * (`ArtifactNameCell kind="folder"`, whose `detail` takes
26
+ * `describeFolderContents`) never say the same count two ways. The tile draws
27
+ * the parts with its own separator between them.
27
28
  */
29
+ export declare function folderContentsParts(contents: FolderContents, labels?: Partial<FolderContentsLabels>): string[];
30
+ /** The same parts as one line: "12 artifacts · 2 folders". */
28
31
  export declare function describeFolderContents(contents: FolderContents, labels?: Partial<FolderContentsLabels>): string;
29
32
  export type FolderTileSize = 'tile' | 'row';
30
33
  export interface FolderTileLabels extends FolderContentsLabels {
@@ -60,24 +63,28 @@ export interface FolderTileProps {
60
63
  dropTarget?: boolean | undefined;
61
64
  /**
62
65
  * `tile` is a gallery's (a grid of them, a few across); `row` is the full
63
- * width, 44px row a phone takes. A tile takes the row's shape on its own
64
- * under the phone breakpoint.
66
+ * width row a phone takes, at least 44px tall. A tile takes the row's shape
67
+ * on its own under the phone breakpoint.
65
68
  */
66
69
  size?: FolderTileSize | undefined;
67
70
  className?: string | undefined;
68
71
  labels?: Partial<FolderTileLabels> | undefined;
69
72
  }
70
73
  /**
71
- * A folder in a gallery: the folder glyph on a neutral tint, the name on one
72
- * line, who can see it and what is inside, and a More menu.
74
+ * A folder in a gallery: the folder glyph on a neutral tint with the More
75
+ * menu level with it, the name on one line, and one quiet run of facts (who
76
+ * can see it, then what is inside).
73
77
  *
74
78
  * SHORTER THAN AN ARTIFACT'S CARD AND WITH NO PREVIEW, so a folder and an
75
79
  * artifact never look alike and the kind's badge keeps its meaning. The tint
76
- * is neutral for the same reason: a folder is not a kind.
80
+ * is neutral for the same reason: a folder is not a kind. Everything else is
81
+ * the card's: its inset, its corner, its type steps and its hover.
77
82
  *
78
- * THE FACTS ARE NEVER CUT. Who can see the folder and what is inside wrap
79
- * onto a second line where the tile is narrow; only the name, which carries
80
- * its whole self on hover, is cut to one line.
83
+ * THE FACTS ARE ONE RUN, NEVER CUT. Each fact after the first is opened by
84
+ * the card's quiet dot. Where the tile is narrow the run breaks between who
85
+ * can see the folder and what is inside, the count holding together, and a
86
+ * line that breaks never opens on a dot. Only the name, which carries its
87
+ * whole self on hover, is cut to one line.
81
88
  *
82
89
  * THE WHOLE TILE IS ONE LINK, named by the folder's name alone and described
83
90
  * by the rest, so a reader moving by link hears "Q3 launch" and then, if they
@@ -1,3 +1,3 @@
1
1
  import './FolderTile.css';
2
- export { FolderTile, describeFolderContents } from './FolderTile.js';
2
+ export { FolderTile, describeFolderContents, folderContentsParts } from './FolderTile.js';
3
3
  export type { FolderContents, FolderContentsLabels, FolderTileLabels, FolderTileProps, FolderTileSize } from './FolderTile.js';
@@ -1,4 +1,4 @@
1
- export { FolderTile, describeFolderContents } from '../chunk-FXHWOXGD.js';
1
+ export { FolderTile, describeFolderContents, folderContentsParts } from '../chunk-TFIINTEU.js';
2
2
  import '../chunk-INHXF2CL.js';
3
3
  import '../chunk-AV2DXAEL.js';
4
4
  import '../chunk-BHHIIK3M.js';
@@ -1,8 +1,8 @@
1
1
  /*
2
2
  * A folder in a gallery: a short tile on Card (no preview), the folder glyph
3
- * on a neutral tint over the name and one quiet line, and a More menu in the
4
- * top corner outside the link. `row` is the full width, 44px row a phone
5
- * takes, and a tile becomes one under the phone breakpoint.
3
+ * on a neutral tint over the name and one quiet run of facts, and a More menu
4
+ * level with the glyph, outside the link. `row` is the full width row a phone
5
+ * takes (44px at least), and a tile becomes one under the phone breakpoint.
6
6
  *
7
7
  * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
8
8
  * class too: the two sheets meet at equal weight and the bundle orders them by
@@ -10,10 +10,11 @@
10
10
  */
11
11
 
12
12
  /*
13
- * THE ARTIFACT CARD'S CORNER, so a folder tile and the cards below it read as
14
- * one gallery, and Card's own hover step (the hairline darkens, nothing
15
- * lifts). The chosen state is Card's (`selected`): the selected edge over the
16
- * selected fill.
13
+ * THE ARTIFACT CARD'S CORNER AND HOVER, so a folder tile and the cards below
14
+ * it read as one gallery: under the pointer the hairline darkens and a
15
+ * hairline shadow settles under the tile, quickly and with the standard ease,
16
+ * exactly as a card's does. Nothing lifts or moves. The chosen state is
17
+ * Card's (`selected`): the selected edge over the selected fill.
17
18
  */
18
19
  .crewlet-card.crewlet-folder-tile {
19
20
  /*
@@ -26,6 +27,7 @@
26
27
  --crewlet-folder-tile-pad-inline: var(--spacing-4);
27
28
  --crewlet-folder-tile-floor: auto;
28
29
  --crewlet-folder-tile-glyph: 40px;
30
+ --crewlet-folder-tile-glyph-icon: 20px;
29
31
  --crewlet-folder-tile-glyph-radius: var(--radius-md);
30
32
  /*
31
33
  * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
@@ -54,13 +56,36 @@
54
56
  --crewlet-folder-tile-actions-shift: 0;
55
57
  --crewlet-folder-tile-reserve-link: 0px;
56
58
 
59
+ /*
60
+ * THE CARD'S SEPARATOR between two facts, a quiet dot with a step of air on
61
+ * each side: the width each fact after the first opens with.
62
+ */
63
+ --crewlet-folder-tile-separator: var(--spacing-5);
64
+ /* Who can see it is a glyph and its word; the row keeps the glyph alone. */
65
+ --crewlet-folder-tile-word-position: static;
66
+ --crewlet-folder-tile-word-size: auto;
67
+ --crewlet-folder-tile-word-clip: none;
68
+
57
69
  flex-direction: row;
58
70
  align-items: stretch;
59
71
  min-width: 0;
60
72
  border-radius: var(--crewlet-folder-tile-radius);
61
73
  }
62
74
 
63
- /* ---- the row: a phone's, full width at 44px ---- */
75
+ /* The card's quick step, over Card's slower interactive one. */
76
+ .crewlet-card.crewlet-folder-tile.is-interactive {
77
+ transition:
78
+ border-color var(--motion-duration-fast) var(--motion-easing-out),
79
+ box-shadow var(--motion-duration-fast) var(--motion-easing-out);
80
+ }
81
+
82
+ .crewlet-card.crewlet-folder-tile:hover {
83
+ box-shadow: var(--shadow-xs);
84
+ }
85
+
86
+ /* ---- the row: a phone's, full width and 44px at least ----
87
+ The glyph and its tint keep the tile's proportion (the glyph half the
88
+ tint), at the list name cell's 32px tint. */
64
89
 
65
90
  .crewlet-card.crewlet-folder-tile--row {
66
91
  --crewlet-folder-tile-radius: var(--radius-lg);
@@ -68,8 +93,9 @@
68
93
  --crewlet-folder-tile-pad-block: var(--spacing-1);
69
94
  --crewlet-folder-tile-pad-inline: var(--spacing-3);
70
95
  --crewlet-folder-tile-floor: var(--size-control-lg);
71
- --crewlet-folder-tile-glyph: 28px;
72
- --crewlet-folder-tile-glyph-radius: var(--radius-sm);
96
+ --crewlet-folder-tile-glyph: 32px;
97
+ --crewlet-folder-tile-glyph-icon: 16px;
98
+ --crewlet-folder-tile-glyph-radius: var(--radius-md);
73
99
  --crewlet-folder-tile-words-gap: 2px;
74
100
  --crewlet-folder-tile-actions-inset: var(--spacing-2);
75
101
  --crewlet-folder-tile-direction: row;
@@ -77,6 +103,9 @@
77
103
  --crewlet-folder-tile-actions-top: 50%;
78
104
  --crewlet-folder-tile-actions-shift: -50%;
79
105
  --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
106
+ --crewlet-folder-tile-word-position: absolute;
107
+ --crewlet-folder-tile-word-size: 1px;
108
+ --crewlet-folder-tile-word-clip: inset(50%);
80
109
  }
81
110
 
82
111
  /* UNDER THE PHONE BREAKPOINT A TILE IS THE ROW, strictly under, as the
@@ -88,8 +117,9 @@
88
117
  --crewlet-folder-tile-pad-block: var(--spacing-1);
89
118
  --crewlet-folder-tile-pad-inline: var(--spacing-3);
90
119
  --crewlet-folder-tile-floor: var(--size-control-lg);
91
- --crewlet-folder-tile-glyph: 28px;
92
- --crewlet-folder-tile-glyph-radius: var(--radius-sm);
120
+ --crewlet-folder-tile-glyph: 32px;
121
+ --crewlet-folder-tile-glyph-icon: 16px;
122
+ --crewlet-folder-tile-glyph-radius: var(--radius-md);
93
123
  --crewlet-folder-tile-words-gap: 2px;
94
124
  --crewlet-folder-tile-actions-inset: var(--spacing-2);
95
125
  --crewlet-folder-tile-direction: row;
@@ -97,19 +127,41 @@
97
127
  --crewlet-folder-tile-actions-top: 50%;
98
128
  --crewlet-folder-tile-actions-shift: -50%;
99
129
  --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
130
+ --crewlet-folder-tile-word-position: absolute;
131
+ --crewlet-folder-tile-word-size: 1px;
132
+ --crewlet-folder-tile-word-clip: inset(50%);
100
133
  }
101
134
  }
102
135
 
136
+ /*
137
+ * THE STATES OUTLAST THE POINTER. Card's hover step darkens the hairline at
138
+ * the same weight as a state's edge, and Card's sheet comes after this one, so
139
+ * each state restates its edge under the pointer too: a chosen tile keeps the
140
+ * selected edge, and a drop target, which is under the pointer by definition,
141
+ * keeps its accent.
142
+ */
143
+ .crewlet-card.crewlet-folder-tile.is-selected,
144
+ .crewlet-card.crewlet-folder-tile.is-selected:hover {
145
+ border-color: var(--color-border-selected);
146
+ }
147
+
103
148
  /*
104
149
  * SOMETHING HELD OVER IT WOULD LAND IN IT: the accent edge over the accent's
105
150
  * soft fill, the same pair a file drop target takes while files are over it,
106
- * so "let go here" reads one way across the package.
151
+ * so "let go here" reads one way across the package. The glyph's tint takes
152
+ * the accent's hairline and ink, so the folder itself says it is open to it.
107
153
  */
108
- .crewlet-card.crewlet-folder-tile.is-drop-target {
154
+ .crewlet-card.crewlet-folder-tile.is-drop-target,
155
+ .crewlet-card.crewlet-folder-tile.is-drop-target:hover {
109
156
  border-color: var(--color-brand-accent);
110
157
  background-color: var(--color-brand-accent-soft);
111
158
  }
112
159
 
160
+ .crewlet-folder-tile.is-drop-target .crewlet-folder-tile__glyph {
161
+ box-shadow: inset 0 0 0 1px var(--color-brand-accent);
162
+ color: var(--color-brand-accent-ink);
163
+ }
164
+
113
165
  .crewlet-card.crewlet-folder-tile:has(.crewlet-folder-tile__link:focus-visible) {
114
166
  outline: 2px solid var(--color-focus);
115
167
  outline-offset: var(--size-focus-ring-inset-offset);
@@ -140,7 +192,11 @@
140
192
  padding-inline-end: calc(var(--crewlet-folder-tile-pad-inline) + var(--crewlet-folder-tile-reserve-link));
141
193
  }
142
194
 
143
- /* A NEUTRAL TINT, never a kind's: a folder is not a kind. */
195
+ /*
196
+ * A NEUTRAL TINT, never a kind's: a folder is not a kind. Its hairline steps
197
+ * up with the tile's under the pointer, as a folder's mark does on a list
198
+ * row, so the one drawn thing on the tile answers too.
199
+ */
144
200
  .crewlet-folder-tile__glyph {
145
201
  display: inline-flex;
146
202
  flex: none;
@@ -153,6 +209,17 @@
153
209
  background: var(--color-surface-inset);
154
210
  box-shadow: inset 0 0 0 1px var(--color-border-default);
155
211
  color: var(--color-text-secondary);
212
+ transition: box-shadow var(--motion-duration-fast) var(--motion-easing-out);
213
+ }
214
+
215
+ .crewlet-folder-tile:hover .crewlet-folder-tile__glyph {
216
+ box-shadow: inset 0 0 0 1px var(--color-border-hover);
217
+ }
218
+
219
+ /* The glyph is drawn at the shape's size, whatever size the markup asks. */
220
+ .crewlet-folder-tile__glyph > svg {
221
+ width: var(--crewlet-folder-tile-glyph-icon);
222
+ height: var(--crewlet-folder-tile-glyph-icon);
156
223
  }
157
224
 
158
225
  .crewlet-folder-tile__body {
@@ -174,35 +241,105 @@
174
241
  }
175
242
 
176
243
  /*
177
- * THE FACTS WRAP, NEVER CUT. "Everyone" and "Nothing you can open yet" are
178
- * both things a reader has to read, and four tiles across a laptop's page do
179
- * not have room for them on one line: the count moves under who can see the
180
- * folder rather than losing its end to an ellipsis. The two are told apart by
181
- * the visibility glyph and the gap between them, not by a separator, so a
182
- * line that breaks never opens on a stray dot.
244
+ * THE FACTS ARE ONE RUN, WRAPPED AND NEVER CUT. "Everyone · 12 artifacts · 2
245
+ * folders" is the card's run: each fact after the first opens with the card's
246
+ * quiet dot. Four tiles across a laptop's page have no room for "Only you ·
247
+ * Nothing you can open yet" on one line, so the run breaks between who can
248
+ * see the folder and what is inside rather than losing its end to an
249
+ * ellipsis, and the count moves as one.
250
+ *
251
+ * A LINE NEVER OPENS ON A DOT. Every fact carries its dot in the separator's
252
+ * width before it, and the run is drawn that width to the left of the facts'
253
+ * own edge, which clips the overhang: the first fact of every line, the very
254
+ * first and any the run broke onto a new line, lays its dot in the clipped
255
+ * strip. The clip is horizontal only, so nothing above or below is cut.
256
+ *
257
+ * ONE QUIET INK for the run: who can see the folder takes the facts' tertiary
258
+ * step rather than the access label's stronger word, so the line reads as one
259
+ * calm caption beside the name, as a card's facts do.
183
260
  */
184
261
  .crewlet-folder-tile__facts {
185
- display: flex;
186
- flex-wrap: wrap;
187
- align-items: center;
188
- gap: 2px var(--spacing-3);
262
+ display: block;
189
263
  min-width: 0;
264
+ overflow-x: clip;
190
265
  color: var(--color-text-tertiary);
191
266
  font-size: var(--crewlet-folder-tile-facts);
192
267
  line-height: 1.35;
193
268
  }
194
269
 
195
- .crewlet-folder-tile__visibility {
196
- display: inline-flex;
197
- flex: none;
270
+ .crewlet-folder-tile__run {
271
+ display: flex;
272
+ flex-wrap: wrap;
198
273
  align-items: center;
274
+ row-gap: 2px;
275
+ min-width: 0;
276
+ margin-inline-start: calc(-1 * var(--crewlet-folder-tile-separator));
199
277
  }
200
278
 
201
- .crewlet-folder-tile__contents {
279
+ .crewlet-folder-tile__fact {
280
+ position: relative;
281
+ display: block;
202
282
  min-width: 0;
283
+ max-width: 100%;
284
+ padding-inline-start: var(--crewlet-folder-tile-separator);
203
285
  overflow-wrap: anywhere;
204
286
  }
205
287
 
288
+ .crewlet-folder-tile__fact::before {
289
+ position: absolute;
290
+ inset-inline-start: 0;
291
+ width: var(--crewlet-folder-tile-separator);
292
+ text-align: center;
293
+ }
294
+
295
+ .crewlet-folder-tile__fact::before,
296
+ .crewlet-folder-tile__count-dot::before {
297
+ content: '·';
298
+ content: '·' / '';
299
+ }
300
+
301
+ /*
302
+ * INSIDE THE COUNT the same dot in the same width, carried at the end of the
303
+ * part before it. Each part is one piece on the line, so "3 artifacts · 3
304
+ * folders" moves to its own line as one fact, a count too long even for that
305
+ * breaks only after a dot, and a part wraps within itself only when it alone
306
+ * is wider than the tile.
307
+ */
308
+ .crewlet-folder-tile__count-part {
309
+ display: inline-block;
310
+ max-width: 100%;
311
+ }
312
+
313
+ .crewlet-folder-tile__count-dot {
314
+ display: inline;
315
+ padding-inline: calc((var(--crewlet-folder-tile-separator) - 0.3em) / 2);
316
+ }
317
+
318
+ .crewlet-folder-tile__visibility {
319
+ display: flex;
320
+ align-items: center;
321
+ }
322
+
323
+ .crewlet-folder-tile__visibility > .crewlet-artifact-access {
324
+ color: inherit;
325
+ }
326
+
327
+ /*
328
+ * ON A ROW, WHO CAN SEE IT IS ITS GLYPH, as a gallery card's facts draw an
329
+ * artifact's access: a phone's row has room for one line of facts, and "Only
330
+ * you · Nothing you can open yet" beside a glyph and a menu broke onto a
331
+ * second, leaving rows of two heights. The word is still there, hidden from
332
+ * the eye only (the package's visually hidden recipe, switched by the shape),
333
+ * so the tile's description keeps saying "Everyone", and the label's title
334
+ * names it under the pointer.
335
+ */
336
+ .crewlet-folder-tile__visibility .crewlet-artifact-access__word {
337
+ position: var(--crewlet-folder-tile-word-position);
338
+ width: var(--crewlet-folder-tile-word-size);
339
+ height: var(--crewlet-folder-tile-word-size);
340
+ clip-path: var(--crewlet-folder-tile-word-clip);
341
+ }
342
+
206
343
  /*
207
344
  * THE TILE'S OWN CONTROLS, at its trailing edge and outside the link: hidden
208
345
  * until the tile is hovered or holds focus, so a gallery rests as names, and
@@ -232,6 +369,8 @@
232
369
  }
233
370
 
234
371
  @media (prefers-reduced-motion: reduce) {
372
+ .crewlet-card.crewlet-folder-tile.is-interactive,
373
+ .crewlet-folder-tile__glyph,
235
374
  .crewlet-folder-tile__actions {
236
375
  transition: none;
237
376
  }
@@ -1,17 +1,17 @@
1
1
  import '../chunk-FFMCMSJB.js';
2
- export { HuePicker, HueSwatch } from '../chunk-34RMTXDZ.js';
2
+ export { HuePicker, HueSwatch } from '../chunk-BIRR4RKZ.js';
3
3
  import '../chunk-AYKXMIOR.js';
4
- import '../chunk-6FVGSWLS.js';
5
- import '../chunk-ILFEWRLG.js';
4
+ import '../chunk-5FB6DGGC.js';
5
+ import '../chunk-I4Q6PACO.js';
6
6
  import '../chunk-WIATRXEJ.js';
7
7
  import '../chunk-EGMQURBR.js';
8
- import '../chunk-BHHIIK3M.js';
9
- import '../chunk-TMM32U7D.js';
8
+ import '../chunk-3JIZ2A6K.js';
10
9
  import '../chunk-OMV5W53A.js';
11
10
  import '../chunk-2YTOOH3A.js';
12
11
  import '../chunk-OG6CL3EB.js';
13
12
  import '../chunk-H5XTJ7GJ.js';
14
- import '../chunk-LACA4JGC.js';
15
13
  import '../chunk-NUZHC6MM.js';
14
+ import '../chunk-BHHIIK3M.js';
15
+ import '../chunk-LACA4JGC.js';
16
16
  import '../chunk-BZFWDIV6.js';
17
17
  import '../chunk-ODEQTPFM.js';
@@ -2,8 +2,8 @@ export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-6RMZH7P7.js';
2
2
  import '../chunk-EJWPYEG4.js';
3
3
  import '../chunk-3CZ7XAVY.js';
4
4
  import '../chunk-EUCC37WY.js';
5
- import '../chunk-SMBKXWML.js';
6
5
  import '../chunk-OMV5W53A.js';
6
+ import '../chunk-SMBKXWML.js';
7
7
  import '../chunk-OG6CL3EB.js';
8
8
  import '../chunk-H5XTJ7GJ.js';
9
9
  import '../chunk-NUZHC6MM.js';
@@ -1,9 +1,9 @@
1
- export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-LJHH4WWB.js';
1
+ export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea, foldLineBreaks } from '../chunk-TN22R6LW.js';
2
2
  import '../chunk-XCUUI7E7.js';
3
- import '../chunk-PQADV6P6.js';
4
- import '../chunk-RSAQOKH3.js';
5
3
  import '../chunk-H5XTJ7GJ.js';
6
- import '../chunk-LACA4JGC.js';
7
4
  import '../chunk-NUZHC6MM.js';
5
+ import '../chunk-PQADV6P6.js';
6
+ import '../chunk-LACA4JGC.js';
7
+ import '../chunk-RSAQOKH3.js';
8
8
  import '../chunk-BZFWDIV6.js';
9
9
  import '../chunk-ODEQTPFM.js';
@@ -1,12 +1,12 @@
1
- export { LinkInterstitial, openExternal } from '../chunk-U3LNU4B2.js';
2
- import '../chunk-YCC2S7DF.js';
1
+ export { LinkInterstitial, openExternal } from '../chunk-4QW6K7RK.js';
2
+ import '../chunk-SFG7TS4Q.js';
3
3
  import '../chunk-5CLW2CXT.js';
4
4
  import '../chunk-BPCY7ZID.js';
5
- import '../chunk-PQADV6P6.js';
6
5
  import '../chunk-OMV5W53A.js';
7
6
  import '../chunk-OG6CL3EB.js';
8
7
  import '../chunk-H5XTJ7GJ.js';
9
- import '../chunk-LACA4JGC.js';
10
8
  import '../chunk-NUZHC6MM.js';
9
+ import '../chunk-PQADV6P6.js';
10
+ import '../chunk-LACA4JGC.js';
11
11
  import '../chunk-BZFWDIV6.js';
12
12
  import '../chunk-ODEQTPFM.js';
@@ -1,14 +1,14 @@
1
- export { ListInput, withDraft } from '../chunk-CQEYF3UW.js';
1
+ export { ListInput, withDraft } from '../chunk-ROXAHDMA.js';
2
2
  import '../chunk-XJ2QEBMM.js';
3
- import '../chunk-SMBKXWML.js';
4
- import '../chunk-LJHH4WWB.js';
5
- import '../chunk-XCUUI7E7.js';
6
- import '../chunk-PQADV6P6.js';
7
- import '../chunk-RSAQOKH3.js';
8
3
  import '../chunk-OMV5W53A.js';
4
+ import '../chunk-TN22R6LW.js';
5
+ import '../chunk-XCUUI7E7.js';
6
+ import '../chunk-SMBKXWML.js';
9
7
  import '../chunk-OG6CL3EB.js';
10
8
  import '../chunk-H5XTJ7GJ.js';
11
- import '../chunk-LACA4JGC.js';
12
9
  import '../chunk-NUZHC6MM.js';
10
+ import '../chunk-PQADV6P6.js';
11
+ import '../chunk-LACA4JGC.js';
12
+ import '../chunk-RSAQOKH3.js';
13
13
  import '../chunk-BZFWDIV6.js';
14
14
  import '../chunk-ODEQTPFM.js';
@@ -1,17 +1,17 @@
1
- export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-SS4XCUUJ.js';
1
+ export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-Z2SK4MPL.js';
2
2
  import '../chunk-NR4CPM4T.js';
3
3
  import '../chunk-OOC7Q67K.js';
4
- import '../chunk-6FVGSWLS.js';
5
- import '../chunk-ILFEWRLG.js';
4
+ import '../chunk-5FB6DGGC.js';
5
+ import '../chunk-I4Q6PACO.js';
6
6
  import '../chunk-WIATRXEJ.js';
7
7
  import '../chunk-EGMQURBR.js';
8
- import '../chunk-BHHIIK3M.js';
9
- import '../chunk-TMM32U7D.js';
8
+ import '../chunk-3JIZ2A6K.js';
10
9
  import '../chunk-OMV5W53A.js';
11
10
  import '../chunk-2YTOOH3A.js';
12
11
  import '../chunk-OG6CL3EB.js';
13
12
  import '../chunk-H5XTJ7GJ.js';
14
- import '../chunk-LACA4JGC.js';
15
13
  import '../chunk-NUZHC6MM.js';
14
+ import '../chunk-BHHIIK3M.js';
15
+ import '../chunk-LACA4JGC.js';
16
16
  import '../chunk-BZFWDIV6.js';
17
17
  import '../chunk-ODEQTPFM.js';
@@ -1,8 +1,8 @@
1
- export { Menu } from '../chunk-TMM32U7D.js';
1
+ export { Menu } from '../chunk-3JIZ2A6K.js';
2
2
  import '../chunk-OMV5W53A.js';
3
3
  import '../chunk-OG6CL3EB.js';
4
4
  import '../chunk-H5XTJ7GJ.js';
5
- import '../chunk-LACA4JGC.js';
6
5
  import '../chunk-NUZHC6MM.js';
6
+ import '../chunk-LACA4JGC.js';
7
7
  import '../chunk-BZFWDIV6.js';
8
8
  import '../chunk-ODEQTPFM.js';
@@ -1,16 +1,16 @@
1
- export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-XS2FJVMT.js';
1
+ export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-JV4G7LH3.js';
2
2
  import '../chunk-OOC7Q67K.js';
3
- import '../chunk-6FVGSWLS.js';
4
- import '../chunk-ILFEWRLG.js';
3
+ import '../chunk-5FB6DGGC.js';
4
+ import '../chunk-I4Q6PACO.js';
5
5
  import '../chunk-WIATRXEJ.js';
6
6
  import '../chunk-EGMQURBR.js';
7
- import '../chunk-BHHIIK3M.js';
8
- import '../chunk-TMM32U7D.js';
7
+ import '../chunk-3JIZ2A6K.js';
9
8
  import '../chunk-OMV5W53A.js';
10
9
  import '../chunk-2YTOOH3A.js';
11
10
  import '../chunk-OG6CL3EB.js';
12
11
  import '../chunk-H5XTJ7GJ.js';
13
- import '../chunk-LACA4JGC.js';
14
12
  import '../chunk-NUZHC6MM.js';
13
+ import '../chunk-BHHIIK3M.js';
14
+ import '../chunk-LACA4JGC.js';
15
15
  import '../chunk-BZFWDIV6.js';
16
16
  import '../chunk-ODEQTPFM.js';
@@ -1,9 +1,9 @@
1
- export { ConfirmModal, Modal } from '../chunk-YCC2S7DF.js';
2
- import '../chunk-PQADV6P6.js';
1
+ export { ConfirmModal, Modal } from '../chunk-SFG7TS4Q.js';
3
2
  import '../chunk-OMV5W53A.js';
4
3
  import '../chunk-OG6CL3EB.js';
5
4
  import '../chunk-H5XTJ7GJ.js';
6
- import '../chunk-LACA4JGC.js';
7
5
  import '../chunk-NUZHC6MM.js';
6
+ import '../chunk-PQADV6P6.js';
7
+ import '../chunk-LACA4JGC.js';
8
8
  import '../chunk-BZFWDIV6.js';
9
9
  import '../chunk-ODEQTPFM.js';
@@ -5,10 +5,10 @@ import '../chunk-ONQKKHON.js';
5
5
  import '../chunk-LM3ISVJA.js';
6
6
  import '../chunk-5AQBPHZD.js';
7
7
  import '../chunk-PZKHBB7D.js';
8
- import '../chunk-TROLVEZY.js';
9
8
  import '../chunk-OMV5W53A.js';
9
+ import '../chunk-TROLVEZY.js';
10
10
  import '../chunk-H5XTJ7GJ.js';
11
- import '../chunk-LACA4JGC.js';
12
11
  import '../chunk-NUZHC6MM.js';
12
+ import '../chunk-LACA4JGC.js';
13
13
  import '../chunk-BZFWDIV6.js';
14
14
  import '../chunk-ODEQTPFM.js';
@@ -1,11 +1,11 @@
1
- export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-3RCHEFIL.js';
1
+ export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-DEBVNLFJ.js';
2
2
  import '../chunk-CENOOTAV.js';
3
3
  import '../chunk-Z7JYG5TF.js';
4
4
  import '../chunk-AYKXMIOR.js';
5
5
  import '../chunk-5AQBPHZD.js';
6
6
  import '../chunk-PZKHBB7D.js';
7
- import '../chunk-PQADV6P6.js';
8
7
  import '../chunk-OG6CL3EB.js';
8
+ import '../chunk-PQADV6P6.js';
9
9
  import '../chunk-LACA4JGC.js';
10
10
  import '../chunk-BZFWDIV6.js';
11
11
  import '../chunk-ODEQTPFM.js';
@@ -5,7 +5,7 @@ import '../chunk-RK4XPHVG.js';
5
5
  import '../chunk-OMV5W53A.js';
6
6
  import '../chunk-OG6CL3EB.js';
7
7
  import '../chunk-H5XTJ7GJ.js';
8
- import '../chunk-LACA4JGC.js';
9
8
  import '../chunk-NUZHC6MM.js';
9
+ import '../chunk-LACA4JGC.js';
10
10
  import '../chunk-BZFWDIV6.js';
11
11
  import '../chunk-ODEQTPFM.js';
@@ -1,16 +1,16 @@
1
- export { PrincipalPicker } from '../chunk-G5SUSCWL.js';
2
- import '../chunk-C6Z3MLSA.js';
1
+ export { PrincipalPicker } from '../chunk-ATRRLHLU.js';
2
+ import '../chunk-WO4W5FTB.js';
3
3
  import '../chunk-7KHM2FZH.js';
4
4
  import '../chunk-CI3VPIJN.js';
5
5
  import '../chunk-5AQBPHZD.js';
6
6
  import '../chunk-PZKHBB7D.js';
7
- import '../chunk-LJHH4WWB.js';
8
- import '../chunk-XCUUI7E7.js';
9
- import '../chunk-PQADV6P6.js';
10
- import '../chunk-RSAQOKH3.js';
11
7
  import '../chunk-2YTOOH3A.js';
8
+ import '../chunk-TN22R6LW.js';
9
+ import '../chunk-XCUUI7E7.js';
12
10
  import '../chunk-H5XTJ7GJ.js';
13
- import '../chunk-LACA4JGC.js';
14
11
  import '../chunk-NUZHC6MM.js';
12
+ import '../chunk-PQADV6P6.js';
13
+ import '../chunk-LACA4JGC.js';
14
+ import '../chunk-RSAQOKH3.js';
15
15
  import '../chunk-BZFWDIV6.js';
16
16
  import '../chunk-ODEQTPFM.js';
@@ -1,4 +1,4 @@
1
- export { RichEditor, preloadRichEditor } from '../chunk-VVOPDWLX.js';
1
+ export { RichEditor, preloadRichEditor } from '../chunk-VYVW24VC.js';
2
2
  export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
3
3
  import '../chunk-BAKPMH3S.js';
4
4
  import '../chunk-BPCY7ZID.js';
@@ -1,15 +1,15 @@
1
1
  import '../chunk-OOC7Q67K.js';
2
- export { SegmentedControl } from '../chunk-6FVGSWLS.js';
3
- import '../chunk-ILFEWRLG.js';
2
+ export { SegmentedControl } from '../chunk-5FB6DGGC.js';
3
+ import '../chunk-I4Q6PACO.js';
4
4
  import '../chunk-WIATRXEJ.js';
5
5
  import '../chunk-EGMQURBR.js';
6
- import '../chunk-BHHIIK3M.js';
7
- import '../chunk-TMM32U7D.js';
6
+ import '../chunk-3JIZ2A6K.js';
8
7
  import '../chunk-OMV5W53A.js';
9
8
  import '../chunk-2YTOOH3A.js';
10
9
  import '../chunk-OG6CL3EB.js';
11
10
  import '../chunk-H5XTJ7GJ.js';
12
- import '../chunk-LACA4JGC.js';
13
11
  import '../chunk-NUZHC6MM.js';
12
+ import '../chunk-BHHIIK3M.js';
13
+ import '../chunk-LACA4JGC.js';
14
14
  import '../chunk-BZFWDIV6.js';
15
15
  import '../chunk-ODEQTPFM.js';
@@ -1,9 +1,9 @@
1
- export { SelectionBar } from '../chunk-OCRVY42T.js';
1
+ export { SelectionBar } from '../chunk-F6CKQX5D.js';
2
2
  import '../chunk-NR4CPM4T.js';
3
- import '../chunk-RSAQOKH3.js';
4
3
  import '../chunk-OMV5W53A.js';
5
4
  import '../chunk-OG6CL3EB.js';
6
5
  import '../chunk-H5XTJ7GJ.js';
7
6
  import '../chunk-NUZHC6MM.js';
7
+ import '../chunk-RSAQOKH3.js';
8
8
  import '../chunk-BZFWDIV6.js';
9
9
  import '../chunk-ODEQTPFM.js';