@activecollab/components 2.0.368 → 2.0.370
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/cjs/components/StackedCard/Glyphs.js +86 -0
- package/dist/cjs/components/StackedCard/Glyphs.js.map +1 -0
- package/dist/cjs/components/StackedCard/Primitives.js +129 -0
- package/dist/cjs/components/StackedCard/Primitives.js.map +1 -0
- package/dist/cjs/components/StackedCard/StackedCard.js +103 -0
- package/dist/cjs/components/StackedCard/StackedCard.js.map +1 -0
- package/dist/cjs/components/StackedCard/Styles.js +192 -0
- package/dist/cjs/components/StackedCard/Styles.js.map +1 -0
- package/dist/cjs/components/StackedCard/constants.js +54 -0
- package/dist/cjs/components/StackedCard/constants.js.map +1 -0
- package/dist/cjs/components/StackedCard/index.js +50 -0
- package/dist/cjs/components/StackedCard/index.js.map +1 -0
- package/dist/cjs/components/index.js +11 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/presentation/shared/SourceCodeSection.js +183 -117
- package/dist/cjs/presentation/shared/SourceCodeSection.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/ImageCard.js +5 -6
- package/dist/cjs/presentation/stackedCard/content/ImageCard.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/LinkCard.js +28 -23
- package/dist/cjs/presentation/stackedCard/content/LinkCard.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/NoteCard.js +5 -5
- package/dist/cjs/presentation/stackedCard/content/NoteCard.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/SwatchCard.js +7 -8
- package/dist/cjs/presentation/stackedCard/content/SwatchCard.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/TaskCard.js +9 -10
- package/dist/cjs/presentation/stackedCard/content/TaskCard.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/content/shared.js +27 -7
- package/dist/cjs/presentation/stackedCard/content/shared.js.map +1 -1
- package/dist/cjs/presentation/stackedCard/storyScaffold.js +8 -6
- package/dist/cjs/presentation/stackedCard/storyScaffold.js.map +1 -1
- package/dist/esm/components/StackedCard/Glyphs.d.ts +19 -0
- package/dist/esm/components/StackedCard/Glyphs.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/Glyphs.js +72 -0
- package/dist/esm/components/StackedCard/Glyphs.js.map +1 -0
- package/dist/esm/components/StackedCard/Primitives.d.ts +91 -0
- package/dist/esm/components/StackedCard/Primitives.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/Primitives.js +122 -0
- package/dist/esm/components/StackedCard/Primitives.js.map +1 -0
- package/dist/esm/components/StackedCard/StackedCard.d.ts +74 -0
- package/dist/esm/components/StackedCard/StackedCard.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/StackedCard.js +95 -0
- package/dist/esm/components/StackedCard/StackedCard.js.map +1 -0
- package/dist/esm/components/StackedCard/Styles.d.ts +46 -0
- package/dist/esm/components/StackedCard/Styles.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/Styles.js +186 -0
- package/dist/esm/components/StackedCard/Styles.js.map +1 -0
- package/dist/esm/components/StackedCard/constants.d.ts +37 -0
- package/dist/esm/components/StackedCard/constants.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/constants.js +48 -0
- package/dist/esm/components/StackedCard/constants.js.map +1 -0
- package/dist/esm/components/StackedCard/index.d.ts +5 -0
- package/dist/esm/components/StackedCard/index.d.ts.map +1 -0
- package/dist/esm/components/StackedCard/index.js +5 -0
- package/dist/esm/components/StackedCard/index.js.map +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/presentation/shared/SourceCodeSection.d.ts.map +1 -1
- package/dist/esm/presentation/shared/SourceCodeSection.js +183 -116
- package/dist/esm/presentation/shared/SourceCodeSection.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/ImageCard.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/content/ImageCard.js +2 -3
- package/dist/esm/presentation/stackedCard/content/ImageCard.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/LinkCard.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/content/LinkCard.js +14 -9
- package/dist/esm/presentation/stackedCard/content/LinkCard.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/NoteCard.js +1 -1
- package/dist/esm/presentation/stackedCard/content/NoteCard.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/SwatchCard.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/content/SwatchCard.js +2 -3
- package/dist/esm/presentation/stackedCard/content/SwatchCard.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/TaskCard.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/content/TaskCard.js +1 -2
- package/dist/esm/presentation/stackedCard/content/TaskCard.js.map +1 -1
- package/dist/esm/presentation/stackedCard/content/shared.d.ts +15 -0
- package/dist/esm/presentation/stackedCard/content/shared.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/content/shared.js +22 -2
- package/dist/esm/presentation/stackedCard/content/shared.js.map +1 -1
- package/dist/esm/presentation/stackedCard/storyScaffold.d.ts +8 -6
- package/dist/esm/presentation/stackedCard/storyScaffold.d.ts.map +1 -1
- package/dist/esm/presentation/stackedCard/storyScaffold.js +8 -6
- package/dist/esm/presentation/stackedCard/storyScaffold.js.map +1 -1
- package/dist/index.js +1213 -686
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/presentation/stackedCard/primitives.js +0 -254
- package/dist/cjs/presentation/stackedCard/primitives.js.map +0 -1
- package/dist/cjs/presentation/stackedCard/shell.js +0 -165
- package/dist/cjs/presentation/stackedCard/shell.js.map +0 -1
- package/dist/esm/presentation/stackedCard/primitives.d.ts +0 -84
- package/dist/esm/presentation/stackedCard/primitives.d.ts.map +0 -1
- package/dist/esm/presentation/stackedCard/primitives.js +0 -241
- package/dist/esm/presentation/stackedCard/primitives.js.map +0 -1
- package/dist/esm/presentation/stackedCard/shell.d.ts +0 -46
- package/dist/esm/presentation/stackedCard/shell.d.ts.map +0 -1
- package/dist/esm/presentation/stackedCard/shell.js +0 -156
- package/dist/esm/presentation/stackedCard/shell.js.map +0 -1
|
@@ -10,10 +10,9 @@ var _shared = require("./shared");
|
|
|
10
10
|
var _unfurl = require("./unfurl");
|
|
11
11
|
var _Icons = require("../../../components/Icons");
|
|
12
12
|
var _Loaders = require("../../../components/Loaders");
|
|
13
|
+
var _StackedCard = require("../../../components/StackedCard");
|
|
13
14
|
var _Typography = require("../../../components/Typography");
|
|
14
15
|
var _Typography2 = require("../../../components/Typography/Typography");
|
|
15
|
-
var _primitives = require("../primitives");
|
|
16
|
-
var _shell = require("../shell");
|
|
17
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
17
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
19
18
|
/**
|
|
@@ -56,11 +55,14 @@ var StyledReunfurl = _styledComponents.default.button.withConfig({
|
|
|
56
55
|
componentId: "sc-qyea73-3"
|
|
57
56
|
})(["display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:3px 8px;border:1px solid var(--border-primary);border-radius:6px;background:var(--page-paper-main);color:var(--color-theme-800);font-size:11px;cursor:pointer;svg{width:12px;height:12px;}&:hover{background:var(--color-theme-200);border-color:var(--sc-selection-ring);}"]);
|
|
58
57
|
|
|
59
|
-
/* The error body — favicon + raw URL + retry, no media (per spec §5).
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
/* The error body — favicon + raw URL + retry, no media (per spec §5). It is a
|
|
59
|
+
column row like any other: the padding comes from the role, so the error
|
|
60
|
+
state lines up with the states it replaces instead of setting its own inset.
|
|
61
|
+
Only the gap is widened — three stacked blocks, not four text lines. */
|
|
62
|
+
var StyledErrorRow = (0, _styledComponents.default)(_StackedCard.StackedCardRow).withConfig({
|
|
63
|
+
displayName: "LinkCard__StyledErrorRow",
|
|
62
64
|
componentId: "sc-qyea73-4"
|
|
63
|
-
})(["
|
|
65
|
+
})(["gap:10px;.err-head{display:flex;align-items:center;gap:8px;color:var(--red-alert);}.err-head svg{width:16px;height:16px;flex:0 0 auto;}.err-url{display:flex;align-items:center;gap:8px;word-break:break-all;}"]);
|
|
64
66
|
var StyledRetry = _styledComponents.default.button.withConfig({
|
|
65
67
|
displayName: "LinkCard__StyledRetry",
|
|
66
68
|
componentId: "sc-qyea73-5"
|
|
@@ -86,7 +88,7 @@ var DisplayToggle = function DisplayToggle(_ref) {
|
|
|
86
88
|
return /*#__PURE__*/_react.default.createElement(StyledDisplayToggle, {
|
|
87
89
|
type: "button",
|
|
88
90
|
"data-fixed": true,
|
|
89
|
-
className:
|
|
91
|
+
className: _StackedCard.STACKED_CARD_CONTROL_CLASS,
|
|
90
92
|
"aria-label": "Switch display level",
|
|
91
93
|
onClick: onToggle
|
|
92
94
|
}, display === "compact" ? "Expand ▾" : "Compact ▴");
|
|
@@ -111,7 +113,10 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
111
113
|
|
|
112
114
|
// ── Error: favicon + raw URL + retry, no media ──────────────────
|
|
113
115
|
if (status === "error") {
|
|
114
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
116
|
+
return /*#__PURE__*/_react.default.createElement(StyledErrorRow, {
|
|
117
|
+
role: "custom",
|
|
118
|
+
direction: "column"
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
115
120
|
className: "err-head"
|
|
116
121
|
}, /*#__PURE__*/_react.default.createElement(_Icons.WarningTriangleIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
|
|
117
122
|
weight: "bold",
|
|
@@ -140,8 +145,8 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
140
145
|
// ── Expanded: hero + tinted footer band (title + domain) ────────
|
|
141
146
|
if (display === "expanded") {
|
|
142
147
|
var _data$heroColor, _data$faviconColor;
|
|
143
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
144
|
-
aspectRatio:
|
|
148
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
149
|
+
aspectRatio: _shared.COVER_RATIO_HERO,
|
|
145
150
|
centerSlot: hasFull && data.playable ? _shared.playControl : undefined,
|
|
146
151
|
topRightSlot: (0, _shared.coverManagement)()
|
|
147
152
|
}, hasFull ? /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
|
|
@@ -151,7 +156,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
151
156
|
width: "100%",
|
|
152
157
|
height: "100%"
|
|
153
158
|
}
|
|
154
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
159
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
155
160
|
role: "footer",
|
|
156
161
|
direction: "column",
|
|
157
162
|
background: "var(--color-theme-200)"
|
|
@@ -190,7 +195,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
190
195
|
height: 10,
|
|
191
196
|
width: "70%"
|
|
192
197
|
}
|
|
193
|
-
})), status === "stale" ? /*#__PURE__*/_react.default.createElement(
|
|
198
|
+
})), status === "stale" ? /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
194
199
|
role: "meta"
|
|
195
200
|
}, /*#__PURE__*/_react.default.createElement(StaleStrip, {
|
|
196
201
|
fetchedAt: fetchedAt,
|
|
@@ -199,8 +204,8 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
199
204
|
}
|
|
200
205
|
|
|
201
206
|
// ── Compact: cover + favicon/domain + title + chips ─────────────
|
|
202
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
203
|
-
aspectRatio:
|
|
207
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
208
|
+
aspectRatio: _StackedCard.STACKED_CARD_COVER_RATIO,
|
|
204
209
|
centerSlot: hasFull && data.playable ? _shared.playControl : undefined
|
|
205
210
|
}, hasFull ? /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
|
|
206
211
|
$color: (_data$heroColor2 = data.heroColor) !== null && _data$heroColor2 !== void 0 ? _data$heroColor2 : "#1D9E75"
|
|
@@ -209,7 +214,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
209
214
|
width: "100%",
|
|
210
215
|
height: "100%"
|
|
211
216
|
}
|
|
212
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
217
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
213
218
|
role: "custom"
|
|
214
219
|
}, /*#__PURE__*/_react.default.createElement(StyledDomainRow, null, hasBasic ? /*#__PURE__*/_react.default.createElement(_shared.StyledFavicon, {
|
|
215
220
|
$bg: (_data$faviconColor2 = data.faviconColor) !== null && _data$faviconColor2 !== void 0 ? _data$faviconColor2 : "#0F6E56",
|
|
@@ -232,7 +237,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
232
237
|
}), /*#__PURE__*/_react.default.createElement(DisplayToggle, {
|
|
233
238
|
display: display,
|
|
234
239
|
onToggle: toggle
|
|
235
|
-
}))), /*#__PURE__*/_react.default.createElement(
|
|
240
|
+
}))), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
236
241
|
role: "title"
|
|
237
242
|
}, hasBasic ? /*#__PURE__*/_react.default.createElement(_shared.StyledClamp, null, data.title) : /*#__PURE__*/_react.default.createElement("div", {
|
|
238
243
|
style: {
|
|
@@ -249,7 +254,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
249
254
|
width: "60%",
|
|
250
255
|
marginTop: 6
|
|
251
256
|
}
|
|
252
|
-
}))), /*#__PURE__*/_react.default.createElement(
|
|
257
|
+
}))), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
253
258
|
role: "custom"
|
|
254
259
|
}, /*#__PURE__*/_react.default.createElement(StyledChips, null, hasFull ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.kind ? /*#__PURE__*/_react.default.createElement(_shared.StyledChip, {
|
|
255
260
|
"data-fixed": true
|
|
@@ -261,7 +266,7 @@ var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
|
|
|
261
266
|
width: 96,
|
|
262
267
|
borderRadius: 10
|
|
263
268
|
}
|
|
264
|
-
}))), status === "stale" ? /*#__PURE__*/_react.default.createElement(
|
|
269
|
+
}))), status === "stale" ? /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
265
270
|
role: "meta"
|
|
266
271
|
}, /*#__PURE__*/_react.default.createElement(StaleStrip, {
|
|
267
272
|
fetchedAt: fetchedAt,
|
|
@@ -288,14 +293,14 @@ var StaleStrip = function StaleStrip(_ref3) {
|
|
|
288
293
|
/* Mirrors the compact anatomy row for row (this is the `resolving` render at
|
|
289
294
|
tier `url`), so a resolving link never reflows as it climbs the ladder. */
|
|
290
295
|
var LinkSkeleton = exports.LinkSkeleton = function LinkSkeleton() {
|
|
291
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
292
|
-
aspectRatio:
|
|
296
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
297
|
+
aspectRatio: _StackedCard.STACKED_CARD_COVER_RATIO
|
|
293
298
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
294
299
|
style: {
|
|
295
300
|
width: "100%",
|
|
296
301
|
height: "100%"
|
|
297
302
|
}
|
|
298
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
303
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
299
304
|
role: "custom"
|
|
300
305
|
}, /*#__PURE__*/_react.default.createElement(StyledDomainRow, null, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
301
306
|
"data-fixed": true,
|
|
@@ -309,7 +314,7 @@ var LinkSkeleton = exports.LinkSkeleton = function LinkSkeleton() {
|
|
|
309
314
|
height: 10,
|
|
310
315
|
width: "40%"
|
|
311
316
|
}
|
|
312
|
-
}))), /*#__PURE__*/_react.default.createElement(
|
|
317
|
+
}))), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
313
318
|
role: "title"
|
|
314
319
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
315
320
|
style: {
|
|
@@ -326,7 +331,7 @@ var LinkSkeleton = exports.LinkSkeleton = function LinkSkeleton() {
|
|
|
326
331
|
width: "60%",
|
|
327
332
|
marginTop: 6
|
|
328
333
|
}
|
|
329
|
-
}))), /*#__PURE__*/_react.default.createElement(
|
|
334
|
+
}))), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
330
335
|
role: "custom"
|
|
331
336
|
}, /*#__PURE__*/_react.default.createElement(StyledChips, null, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
332
337
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_unfurl","_Icons","_Loaders","_Typography","_Typography2","_primitives","_shell","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledDomainRow","styled","div","withConfig","displayName","componentId","StyledChips","StyledStaleStrip","StyledReunfurl","button","StyledErrorBody","StyledRetry","StyledFooterTitle","Body2","StyledDisplayToggle","DisplayToggle","_ref","display","onToggle","createElement","type","className","onClick","LinkCard","exports","_ref2","_data$heroColor2","_data$faviconColor2","unfurl","_ref2$display","onToggleDisplay","status","tier","data","fetchedAt","retry","reunfurl","WarningTriangleIcon","Caption1","weight","color","StyledFavicon","$bg","url","ArrowRefreshIcon","Typography","as","variant","hasBasic","hasFull","toggle","undefined","_data$heroColor","_data$faviconColor","Fragment","Cover","aspectRatio","COVER_RATIO_HERO","centerSlot","playable","playControl","topRightSlot","coverManagement","StyledColorCover","$color","heroColor","SkeletonLoader","style","width","height","StackRow","role","direction","background","faviconColor","borderRadius","domain","flex","title","description","StaleStrip","onReunfurl","COVER_RATIO","StyledClamp","marginTop","kind","StyledChip","duration","_ref3","formatFetchedAt","LinkSkeleton","LinkPlaceholder","props","Placeholder","icon","InsertLinkIcon","label"],"sources":["../../../../../src/presentation/stackedCard/content/LinkCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport {\n StyledChip,\n StyledClamp,\n StyledColorCover,\n StyledFavicon,\n coverManagement,\n playControl,\n Placeholder,\n} from \"./shared\";\nimport { UnfurlController, formatFetchedAt } from \"./unfurl\";\nimport {\n ArrowRefreshIcon,\n InsertLinkIcon,\n WarningTriangleIcon,\n} from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Body2, Caption1 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport { Cover, StackRow } from \"../primitives\";\nimport { COVER_RATIO, COVER_RATIO_HERO } from \"../shell\";\n\n/**\n * LinkCard — a link preview as a LIFECYCLE, not two static layouts.\n *\n * Data climbs a progressive ladder (url → basic → full); the anatomy is\n * CONSTANT at every tier, so each slot swaps a skeleton for real content in\n * place and the card never reflows on upgrade. Four statuses layer on top:\n * resolving — climbing the ladder, aspect + rows reserved by skeletons\n * resolved — the full card\n * stale — resolved, but past its cache window: shows `fetchedAt` and a\n * re-unfurl affordance\n * error — the unfurl failed: favicon + raw URL + retry, NO media\n *\n * Compact ↔ expanded is a user-switchable DISPLAY LEVEL on the same link\n * entity (the data lives in the controller, so switching never refetches or\n * loses it) — not two separate card types.\n */\n\nexport type LinkDisplay = \"compact\" | \"expanded\";\n\n/* ------------------------------------------------------------------ */\n/* Small building blocks */\n/* ------------------------------------------------------------------ */\n\nconst StyledDomainRow = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: 16px;\n`;\n\nconst StyledChips = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n min-height: 18px;\n`;\n\n/* The stale strip — a re-unfurl affordance with the fetch time. */\nconst StyledStaleStrip = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--color-theme-600);\n\n > span {\n flex: 1 1 auto;\n min-width: 0;\n }\n`;\n\nconst StyledReunfurl = styled.button`\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex: 0 0 auto;\n padding: 3px 8px;\n border: 1px solid var(--border-primary);\n border-radius: 6px;\n background: var(--page-paper-main);\n color: var(--color-theme-800);\n font-size: 11px;\n cursor: pointer;\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n &:hover {\n background: var(--color-theme-200);\n border-color: var(--sc-selection-ring);\n }\n`;\n\n/* The error body — favicon + raw URL + retry, no media (per spec §5). */\nconst StyledErrorBody = styled.div`\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 12px;\n\n .err-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--red-alert);\n }\n\n .err-head svg {\n width: 16px;\n height: 16px;\n flex: 0 0 auto;\n }\n\n .err-url {\n display: flex;\n align-items: center;\n gap: 8px;\n word-break: break-all;\n }\n`;\n\nconst StyledRetry = styled.button`\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 10px;\n border: 1px solid var(--border-primary);\n border-radius: 6px;\n background: var(--page-paper-main);\n color: var(--color-theme-800);\n cursor: pointer;\n\n svg {\n width: 14px;\n height: 14px;\n }\n\n &:hover {\n background: var(--color-theme-200);\n border-color: var(--sc-selection-ring);\n }\n`;\n\n/* The expanded footer band — tinted, holds the title + domain under the hero. */\nconst StyledFooterTitle = styled(Body2)`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\n/* ------------------------------------------------------------------ */\n/* The display-level switch — lives in the entity \"…\" slot */\n/* ------------------------------------------------------------------ */\n\nconst StyledDisplayToggle = styled.button`\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n background: var(--color-theme-200);\n color: var(--color-theme-700);\n font-size: 11px;\n cursor: pointer;\n white-space: nowrap;\n\n &:hover {\n background: var(--color-theme-300);\n }\n`;\n\nconst DisplayToggle = ({\n display,\n onToggle,\n}: {\n display: LinkDisplay;\n onToggle: () => void;\n}): ReactElement => (\n <StyledDisplayToggle\n type=\"button\"\n data-fixed\n className=\"sc-control\"\n aria-label=\"Switch display level\"\n onClick={onToggle}\n >\n {display === \"compact\" ? \"Expand ▾\" : \"Compact ▴\"}\n </StyledDisplayToggle>\n);\n\n/* ------------------------------------------------------------------ */\n/* LinkCard */\n/* ------------------------------------------------------------------ */\n\nexport interface LinkCardProps {\n unfurl: UnfurlController;\n display?: LinkDisplay;\n onToggleDisplay?: () => void;\n}\n\nexport const LinkCard = ({\n unfurl,\n display = \"compact\",\n onToggleDisplay,\n}: LinkCardProps): ReactElement => {\n const { status, tier, data, fetchedAt, retry, reunfurl } = unfurl;\n\n // ── Error: favicon + raw URL + retry, no media ──────────────────\n if (status === \"error\") {\n return (\n <StyledErrorBody>\n <div className=\"err-head\">\n <WarningTriangleIcon />\n <Caption1 weight=\"bold\" color=\"tertiary\">\n Couldn’t load a preview\n </Caption1>\n </div>\n <div className=\"err-url\">\n <StyledFavicon $bg=\"var(--color-theme-400)\" data-fixed />\n <Caption1 color=\"secondary\">{data.url}</Caption1>\n </div>\n <StyledRetry type=\"button\" onClick={retry}>\n <ArrowRefreshIcon />\n <Typography as=\"span\" variant=\"Caption 1\">\n Retry\n </Typography>\n </StyledRetry>\n </StyledErrorBody>\n );\n }\n\n const hasBasic = tier === \"basic\" || tier === \"full\";\n const hasFull = tier === \"full\";\n const toggle = onToggleDisplay ?? (() => undefined);\n\n // ── Expanded: hero + tinted footer band (title + domain) ────────\n if (display === \"expanded\") {\n return (\n <>\n <Cover\n aspectRatio={COVER_RATIO_HERO}\n centerSlot={hasFull && data.playable ? playControl : undefined}\n topRightSlot={coverManagement()}\n >\n {hasFull ? (\n <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n ) : (\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n )}\n </Cover>\n <StackRow\n role=\"footer\"\n direction=\"column\"\n background=\"var(--color-theme-200)\"\n >\n <StyledDomainRow>\n {hasBasic ? (\n <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n ) : (\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n )}\n {hasBasic ? (\n <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n ) : (\n <Caption1 color=\"tertiary\">{data.url}</Caption1>\n )}\n <span style={{ flex: \"1 1 auto\" }} />\n <DisplayToggle display={display} onToggle={toggle} />\n </StyledDomainRow>\n {hasBasic ? (\n <StyledFooterTitle weight=\"bold\">{data.title}</StyledFooterTitle>\n ) : (\n <SkeletonLoader style={{ height: 14, width: \"90%\" }} />\n )}\n {hasFull ? (\n <Caption1 color=\"tertiary\">{data.description}</Caption1>\n ) : (\n <SkeletonLoader style={{ height: 10, width: \"70%\" }} />\n )}\n </StackRow>\n {status === \"stale\" ? (\n <StackRow role=\"meta\">\n <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n </StackRow>\n ) : null}\n </>\n );\n }\n\n // ── Compact: cover + favicon/domain + title + chips ─────────────\n return (\n <>\n <Cover\n aspectRatio={COVER_RATIO}\n centerSlot={hasFull && data.playable ? playControl : undefined}\n >\n {hasFull ? (\n <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n ) : (\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n )}\n </Cover>\n\n <StackRow role=\"custom\">\n <StyledDomainRow>\n {hasBasic ? (\n <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n ) : (\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n )}\n {hasBasic ? (\n <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n ) : (\n <Caption1 color=\"tertiary\">{data.url}</Caption1>\n )}\n <span style={{ flex: \"1 1 auto\" }} />\n <DisplayToggle display={display} onToggle={toggle} />\n </StyledDomainRow>\n </StackRow>\n\n <StackRow role=\"title\">\n {hasBasic ? (\n <StyledClamp>{data.title}</StyledClamp>\n ) : (\n <div style={{ width: \"100%\" }}>\n <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n <SkeletonLoader\n style={{ height: 14, width: \"60%\", marginTop: 6 }}\n />\n </div>\n )}\n </StackRow>\n\n <StackRow role=\"custom\">\n <StyledChips>\n {hasFull ? (\n <>\n {data.kind ? (\n <StyledChip data-fixed>{data.kind}</StyledChip>\n ) : null}\n {data.duration ? (\n <StyledChip data-fixed>{data.duration}</StyledChip>\n ) : null}\n </>\n ) : (\n <SkeletonLoader\n style={{ height: 18, width: 96, borderRadius: 10 }}\n />\n )}\n </StyledChips>\n </StackRow>\n\n {status === \"stale\" ? (\n <StackRow role=\"meta\">\n <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n </StackRow>\n ) : null}\n </>\n );\n};\n\n/* The stale affordance — fetch time + a manual re-unfurl button. */\nconst StaleStrip = ({\n fetchedAt,\n onReunfurl,\n}: {\n fetchedAt: number | null;\n onReunfurl: () => void;\n}): ReactElement => (\n <StyledStaleStrip>\n <Typography as=\"span\" variant=\"Caption 1\" color=\"tertiary\">\n Preview may be out of date · fetched {formatFetchedAt(fetchedAt)}\n </Typography>\n <StyledReunfurl type=\"button\" onClick={onReunfurl}>\n <ArrowRefreshIcon />\n Re-unfurl\n </StyledReunfurl>\n </StyledStaleStrip>\n);\n\n/* ---- skeleton ---- */\n\n/* Mirrors the compact anatomy row for row (this is the `resolving` render at\n tier `url`), so a resolving link never reflows as it climbs the ladder. */\nexport const LinkSkeleton = (): ReactElement => (\n <>\n <Cover aspectRatio={COVER_RATIO}>\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n </Cover>\n <StackRow role=\"custom\">\n <StyledDomainRow>\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n <SkeletonLoader style={{ height: 10, width: \"40%\" }} />\n </StyledDomainRow>\n </StackRow>\n <StackRow role=\"title\">\n <div style={{ width: \"100%\" }}>\n <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n <SkeletonLoader style={{ height: 14, width: \"60%\", marginTop: 6 }} />\n </div>\n </StackRow>\n <StackRow role=\"custom\">\n <StyledChips>\n <SkeletonLoader style={{ height: 18, width: 96, borderRadius: 10 }} />\n </StyledChips>\n </StackRow>\n </>\n);\n\n/* ---- placeholder ---- */\n\nexport const LinkPlaceholder = (\n props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n <Placeholder icon={<InsertLinkIcon />} label=\"Add a link\" {...props} />\n);\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"LinkCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_unfurl","_Icons","_Loaders","_StackedCard","_Typography","_Typography2","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledDomainRow","styled","div","withConfig","displayName","componentId","StyledChips","StyledStaleStrip","StyledReunfurl","button","StyledErrorRow","StackRow","StyledRetry","StyledFooterTitle","Body2","StyledDisplayToggle","DisplayToggle","_ref","display","onToggle","createElement","type","className","STACKED_CARD_CONTROL_CLASS","onClick","LinkCard","exports","_ref2","_data$heroColor2","_data$faviconColor2","unfurl","_ref2$display","onToggleDisplay","status","tier","data","fetchedAt","retry","reunfurl","role","direction","WarningTriangleIcon","Caption1","weight","color","StyledFavicon","$bg","url","ArrowRefreshIcon","Typography","as","variant","hasBasic","hasFull","toggle","undefined","_data$heroColor","_data$faviconColor","Fragment","StackedCardCover","aspectRatio","COVER_RATIO_HERO","centerSlot","playable","playControl","topRightSlot","coverManagement","StyledColorCover","$color","heroColor","SkeletonLoader","style","width","height","StackedCardRow","background","faviconColor","borderRadius","domain","flex","title","description","StaleStrip","onReunfurl","COVER_RATIO","StyledClamp","marginTop","kind","StyledChip","duration","_ref3","formatFetchedAt","LinkSkeleton","LinkPlaceholder","props","Placeholder","icon","InsertLinkIcon","label"],"sources":["../../../../../src/presentation/stackedCard/content/LinkCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport {\n COVER_RATIO_HERO,\n StyledChip,\n StyledClamp,\n StyledColorCover,\n StyledFavicon,\n coverManagement,\n playControl,\n Placeholder,\n} from \"./shared\";\nimport { UnfurlController, formatFetchedAt } from \"./unfurl\";\nimport {\n ArrowRefreshIcon,\n InsertLinkIcon,\n WarningTriangleIcon,\n} from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport {\n STACKED_CARD_COVER_RATIO as COVER_RATIO,\n STACKED_CARD_CONTROL_CLASS,\n StackedCardCover as Cover,\n StackedCardRow as StackRow,\n} from \"../../../components/StackedCard\";\nimport { Body2, Caption1 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\n\n/**\n * LinkCard — a link preview as a LIFECYCLE, not two static layouts.\n *\n * Data climbs a progressive ladder (url → basic → full); the anatomy is\n * CONSTANT at every tier, so each slot swaps a skeleton for real content in\n * place and the card never reflows on upgrade. Four statuses layer on top:\n * resolving — climbing the ladder, aspect + rows reserved by skeletons\n * resolved — the full card\n * stale — resolved, but past its cache window: shows `fetchedAt` and a\n * re-unfurl affordance\n * error — the unfurl failed: favicon + raw URL + retry, NO media\n *\n * Compact ↔ expanded is a user-switchable DISPLAY LEVEL on the same link\n * entity (the data lives in the controller, so switching never refetches or\n * loses it) — not two separate card types.\n */\n\nexport type LinkDisplay = \"compact\" | \"expanded\";\n\n/* ------------------------------------------------------------------ */\n/* Small building blocks */\n/* ------------------------------------------------------------------ */\n\nconst StyledDomainRow = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: 16px;\n`;\n\nconst StyledChips = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n min-height: 18px;\n`;\n\n/* The stale strip — a re-unfurl affordance with the fetch time. */\nconst StyledStaleStrip = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--color-theme-600);\n\n > span {\n flex: 1 1 auto;\n min-width: 0;\n }\n`;\n\nconst StyledReunfurl = styled.button`\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex: 0 0 auto;\n padding: 3px 8px;\n border: 1px solid var(--border-primary);\n border-radius: 6px;\n background: var(--page-paper-main);\n color: var(--color-theme-800);\n font-size: 11px;\n cursor: pointer;\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n &:hover {\n background: var(--color-theme-200);\n border-color: var(--sc-selection-ring);\n }\n`;\n\n/* The error body — favicon + raw URL + retry, no media (per spec §5). It is a\n column row like any other: the padding comes from the role, so the error\n state lines up with the states it replaces instead of setting its own inset.\n Only the gap is widened — three stacked blocks, not four text lines. */\nconst StyledErrorRow = styled(StackRow)`\n gap: 10px;\n\n .err-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--red-alert);\n }\n\n .err-head svg {\n width: 16px;\n height: 16px;\n flex: 0 0 auto;\n }\n\n .err-url {\n display: flex;\n align-items: center;\n gap: 8px;\n word-break: break-all;\n }\n`;\n\nconst StyledRetry = styled.button`\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 10px;\n border: 1px solid var(--border-primary);\n border-radius: 6px;\n background: var(--page-paper-main);\n color: var(--color-theme-800);\n cursor: pointer;\n\n svg {\n width: 14px;\n height: 14px;\n }\n\n &:hover {\n background: var(--color-theme-200);\n border-color: var(--sc-selection-ring);\n }\n`;\n\n/* The expanded footer band — tinted, holds the title + domain under the hero. */\nconst StyledFooterTitle = styled(Body2)`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\n/* ------------------------------------------------------------------ */\n/* The display-level switch — lives in the entity \"…\" slot */\n/* ------------------------------------------------------------------ */\n\nconst StyledDisplayToggle = styled.button`\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border: 1px solid var(--border-primary);\n border-radius: 10px;\n background: var(--color-theme-200);\n color: var(--color-theme-700);\n font-size: 11px;\n cursor: pointer;\n white-space: nowrap;\n\n &:hover {\n background: var(--color-theme-300);\n }\n`;\n\nconst DisplayToggle = ({\n display,\n onToggle,\n}: {\n display: LinkDisplay;\n onToggle: () => void;\n}): ReactElement => (\n <StyledDisplayToggle\n type=\"button\"\n data-fixed\n className={STACKED_CARD_CONTROL_CLASS}\n aria-label=\"Switch display level\"\n onClick={onToggle}\n >\n {display === \"compact\" ? \"Expand ▾\" : \"Compact ▴\"}\n </StyledDisplayToggle>\n);\n\n/* ------------------------------------------------------------------ */\n/* LinkCard */\n/* ------------------------------------------------------------------ */\n\nexport interface LinkCardProps {\n unfurl: UnfurlController;\n display?: LinkDisplay;\n onToggleDisplay?: () => void;\n}\n\nexport const LinkCard = ({\n unfurl,\n display = \"compact\",\n onToggleDisplay,\n}: LinkCardProps): ReactElement => {\n const { status, tier, data, fetchedAt, retry, reunfurl } = unfurl;\n\n // ── Error: favicon + raw URL + retry, no media ──────────────────\n if (status === \"error\") {\n return (\n <StyledErrorRow role=\"custom\" direction=\"column\">\n <div className=\"err-head\">\n <WarningTriangleIcon />\n <Caption1 weight=\"bold\" color=\"tertiary\">\n Couldn’t load a preview\n </Caption1>\n </div>\n <div className=\"err-url\">\n <StyledFavicon $bg=\"var(--color-theme-400)\" data-fixed />\n <Caption1 color=\"secondary\">{data.url}</Caption1>\n </div>\n <StyledRetry type=\"button\" onClick={retry}>\n <ArrowRefreshIcon />\n <Typography as=\"span\" variant=\"Caption 1\">\n Retry\n </Typography>\n </StyledRetry>\n </StyledErrorRow>\n );\n }\n\n const hasBasic = tier === \"basic\" || tier === \"full\";\n const hasFull = tier === \"full\";\n const toggle = onToggleDisplay ?? (() => undefined);\n\n // ── Expanded: hero + tinted footer band (title + domain) ────────\n if (display === \"expanded\") {\n return (\n <>\n <Cover\n aspectRatio={COVER_RATIO_HERO}\n centerSlot={hasFull && data.playable ? playControl : undefined}\n topRightSlot={coverManagement()}\n >\n {hasFull ? (\n <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n ) : (\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n )}\n </Cover>\n <StackRow\n role=\"footer\"\n direction=\"column\"\n background=\"var(--color-theme-200)\"\n >\n <StyledDomainRow>\n {hasBasic ? (\n <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n ) : (\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n )}\n {hasBasic ? (\n <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n ) : (\n <Caption1 color=\"tertiary\">{data.url}</Caption1>\n )}\n <span style={{ flex: \"1 1 auto\" }} />\n <DisplayToggle display={display} onToggle={toggle} />\n </StyledDomainRow>\n {hasBasic ? (\n <StyledFooterTitle weight=\"bold\">{data.title}</StyledFooterTitle>\n ) : (\n <SkeletonLoader style={{ height: 14, width: \"90%\" }} />\n )}\n {hasFull ? (\n <Caption1 color=\"tertiary\">{data.description}</Caption1>\n ) : (\n <SkeletonLoader style={{ height: 10, width: \"70%\" }} />\n )}\n </StackRow>\n {status === \"stale\" ? (\n <StackRow role=\"meta\">\n <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n </StackRow>\n ) : null}\n </>\n );\n }\n\n // ── Compact: cover + favicon/domain + title + chips ─────────────\n return (\n <>\n <Cover\n aspectRatio={COVER_RATIO}\n centerSlot={hasFull && data.playable ? playControl : undefined}\n >\n {hasFull ? (\n <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n ) : (\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n )}\n </Cover>\n\n <StackRow role=\"custom\">\n <StyledDomainRow>\n {hasBasic ? (\n <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n ) : (\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n )}\n {hasBasic ? (\n <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n ) : (\n <Caption1 color=\"tertiary\">{data.url}</Caption1>\n )}\n <span style={{ flex: \"1 1 auto\" }} />\n <DisplayToggle display={display} onToggle={toggle} />\n </StyledDomainRow>\n </StackRow>\n\n <StackRow role=\"title\">\n {hasBasic ? (\n <StyledClamp>{data.title}</StyledClamp>\n ) : (\n <div style={{ width: \"100%\" }}>\n <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n <SkeletonLoader\n style={{ height: 14, width: \"60%\", marginTop: 6 }}\n />\n </div>\n )}\n </StackRow>\n\n <StackRow role=\"custom\">\n <StyledChips>\n {hasFull ? (\n <>\n {data.kind ? (\n <StyledChip data-fixed>{data.kind}</StyledChip>\n ) : null}\n {data.duration ? (\n <StyledChip data-fixed>{data.duration}</StyledChip>\n ) : null}\n </>\n ) : (\n <SkeletonLoader\n style={{ height: 18, width: 96, borderRadius: 10 }}\n />\n )}\n </StyledChips>\n </StackRow>\n\n {status === \"stale\" ? (\n <StackRow role=\"meta\">\n <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n </StackRow>\n ) : null}\n </>\n );\n};\n\n/* The stale affordance — fetch time + a manual re-unfurl button. */\nconst StaleStrip = ({\n fetchedAt,\n onReunfurl,\n}: {\n fetchedAt: number | null;\n onReunfurl: () => void;\n}): ReactElement => (\n <StyledStaleStrip>\n <Typography as=\"span\" variant=\"Caption 1\" color=\"tertiary\">\n Preview may be out of date · fetched {formatFetchedAt(fetchedAt)}\n </Typography>\n <StyledReunfurl type=\"button\" onClick={onReunfurl}>\n <ArrowRefreshIcon />\n Re-unfurl\n </StyledReunfurl>\n </StyledStaleStrip>\n);\n\n/* ---- skeleton ---- */\n\n/* Mirrors the compact anatomy row for row (this is the `resolving` render at\n tier `url`), so a resolving link never reflows as it climbs the ladder. */\nexport const LinkSkeleton = (): ReactElement => (\n <>\n <Cover aspectRatio={COVER_RATIO}>\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n </Cover>\n <StackRow role=\"custom\">\n <StyledDomainRow>\n <SkeletonLoader\n data-fixed\n style={{ width: 16, height: 16, borderRadius: 4 }}\n />\n <SkeletonLoader style={{ height: 10, width: \"40%\" }} />\n </StyledDomainRow>\n </StackRow>\n <StackRow role=\"title\">\n <div style={{ width: \"100%\" }}>\n <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n <SkeletonLoader style={{ height: 14, width: \"60%\", marginTop: 6 }} />\n </div>\n </StackRow>\n <StackRow role=\"custom\">\n <StyledChips>\n <SkeletonLoader style={{ height: 18, width: 96, borderRadius: 10 }} />\n </StyledChips>\n </StackRow>\n </>\n);\n\n/* ---- placeholder ---- */\n\nexport const LinkPlaceholder = (\n props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n <Placeholder icon={<InsertLinkIcon />} label=\"Add a link\" {...props} />\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,8 +9,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
9
9
|
var _shared = require("./shared");
|
|
10
10
|
var _Icons = require("../../../components/Icons");
|
|
11
11
|
var _Loaders = require("../../../components/Loaders");
|
|
12
|
+
var _StackedCard = require("../../../components/StackedCard");
|
|
12
13
|
var _Typography = require("../../../components/Typography");
|
|
13
|
-
var _primitives = require("../primitives");
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
16
16
|
/**
|
|
@@ -32,13 +32,13 @@ var NoteCard = exports.NoteCard = function NoteCard(_ref) {
|
|
|
32
32
|
title = _ref$title === void 0 ? "Kickoff notes" : _ref$title,
|
|
33
33
|
_ref$body = _ref.body,
|
|
34
34
|
body = _ref$body === void 0 ? SAMPLE_NOTE : _ref$body;
|
|
35
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
36
36
|
role: "title"
|
|
37
37
|
}, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
|
|
38
38
|
weight: "bold"
|
|
39
39
|
}, title), /*#__PURE__*/_react.default.createElement(_shared.EntityDots, {
|
|
40
40
|
"aria-label": "Note options"
|
|
41
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
41
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
42
42
|
role: "custom",
|
|
43
43
|
direction: "column"
|
|
44
44
|
}, /*#__PURE__*/_react.default.createElement(StyledNoteBody, {
|
|
@@ -57,14 +57,14 @@ var NotePlaceholder = exports.NotePlaceholder = function NotePlaceholder(props)
|
|
|
57
57
|
|
|
58
58
|
/* Skeleton mirrors the note anatomy: a title line, then several body lines. */
|
|
59
59
|
var NoteSkeleton = exports.NoteSkeleton = function NoteSkeleton() {
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
61
61
|
role: "title"
|
|
62
62
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
63
63
|
style: {
|
|
64
64
|
height: 14,
|
|
65
65
|
width: "50%"
|
|
66
66
|
}
|
|
67
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
67
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
68
68
|
role: "custom",
|
|
69
69
|
direction: "column"
|
|
70
70
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_Icons","_Loaders","
|
|
1
|
+
{"version":3,"file":"NoteCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_Icons","_Loaders","_StackedCard","_Typography","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledNoteBody","styled","Body2","withConfig","displayName","componentId","SAMPLE_NOTE","exports","NoteCard","_ref","_ref$title","title","_ref$body","body","createElement","Fragment","StackedCardRow","role","weight","EntityDots","direction","color","NotePlaceholder","props","Placeholder","icon","NoteIcon","label","NoteSkeleton","SkeletonLoader","style","height","width"],"sources":["../../../../../src/presentation/stackedCard/content/NoteCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { EntityDots, Placeholder } from \"./shared\";\nimport { NoteIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { StackedCardRow as StackRow } from \"../../../components/StackedCard\";\nimport { Body2 } from \"../../../components/Typography\";\n\n/**\n * NoteCard — the new fifth type. A multi-line text card (Milanote-style): a\n * title row that owns the \"…\" menu, then padded body rows. The body clamps at a\n * line limit and fades out; auto-height, so the card grows with its content.\n * Inline editing lands in task 4/8 — this is the read view + placeholder.\n */\n\n/* The body clamps at a max height and fades out with a mask so long notes end\n softly instead of hard-cropping. white-space: pre-line keeps authored breaks. */\nconst StyledNoteBody = styled(Body2)`\n display: block;\n max-height: 132px;\n overflow: hidden;\n white-space: pre-line;\n -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);\n mask-image: linear-gradient(180deg, #000 72%, transparent);\n`;\n\nexport const SAMPLE_NOTE = `Kickoff open questions before we lock the columns:\n\n• Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n• Confirm the outline-placeholder choreography reads the same in a scrolled column.\n• Do we ship the note type in v1, or defer inline editing?`;\n\nexport interface NoteCardProps {\n title?: string;\n body?: string;\n}\n\nexport const NoteCard = ({\n title = \"Kickoff notes\",\n body = SAMPLE_NOTE,\n}: NoteCardProps): ReactElement => (\n <>\n <StackRow role=\"title\">\n <Body2 weight=\"bold\">{title}</Body2>\n <EntityDots aria-label=\"Note options\" />\n </StackRow>\n <StackRow role=\"custom\" direction=\"column\">\n <StyledNoteBody color=\"secondary\">{body}</StyledNoteBody>\n </StackRow>\n </>\n);\n\n/* ---- placeholder + skeleton ---- */\n\nexport const NotePlaceholder = (\n props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n <Placeholder icon={<NoteIcon />} label=\"Write a note\" {...props} />\n);\n\n/* Skeleton mirrors the note anatomy: a title line, then several body lines. */\nexport const NoteSkeleton = (): ReactElement => (\n <>\n <StackRow role=\"title\">\n <SkeletonLoader style={{ height: 14, width: \"50%\" }} />\n </StackRow>\n <StackRow role=\"custom\" direction=\"column\">\n <SkeletonLoader style={{ height: 10, width: \"100%\" }} />\n <SkeletonLoader style={{ height: 10, width: \"96%\" }} />\n <SkeletonLoader style={{ height: 10, width: \"88%\" }} />\n <SkeletonLoader style={{ height: 10, width: \"70%\" }} />\n </StackRow>\n </>\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,9 +8,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _shared = require("./shared");
|
|
9
9
|
var _Icons = require("../../../components/Icons");
|
|
10
10
|
var _Loaders = require("../../../components/Loaders");
|
|
11
|
+
var _StackedCard = require("../../../components/StackedCard");
|
|
11
12
|
var _Typography = require("../../../components/Typography");
|
|
12
|
-
var _primitives = require("../primitives");
|
|
13
|
-
var _shell = require("../shell");
|
|
14
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
16
15
|
/**
|
|
@@ -25,11 +24,11 @@ var SwatchCard = exports.SwatchCard = function SwatchCard(_ref) {
|
|
|
25
24
|
name = _ref$name === void 0 ? "Teal" : _ref$name,
|
|
26
25
|
_ref$hex = _ref.hex,
|
|
27
26
|
hex = _ref$hex === void 0 ? "#1D9E75" : _ref$hex;
|
|
28
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
29
|
-
aspectRatio:
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
28
|
+
aspectRatio: _shared.COVER_RATIO_SWATCH
|
|
30
29
|
}, /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
|
|
31
30
|
$color: color
|
|
32
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
31
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
33
32
|
role: "title"
|
|
34
33
|
}, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, name), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
|
|
35
34
|
color: "tertiary",
|
|
@@ -49,14 +48,14 @@ var SwatchPlaceholder = exports.SwatchPlaceholder = function SwatchPlaceholder(p
|
|
|
49
48
|
}, props));
|
|
50
49
|
};
|
|
51
50
|
var SwatchSkeleton = exports.SwatchSkeleton = function SwatchSkeleton() {
|
|
52
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
53
|
-
aspectRatio:
|
|
51
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
52
|
+
aspectRatio: _shared.COVER_RATIO_SWATCH
|
|
54
53
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
55
54
|
style: {
|
|
56
55
|
width: "100%",
|
|
57
56
|
height: "100%"
|
|
58
57
|
}
|
|
59
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
58
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
60
59
|
role: "title"
|
|
61
60
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
62
61
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwatchCard.js","names":["_react","_interopRequireDefault","require","_shared","_Icons","_Loaders","
|
|
1
|
+
{"version":3,"file":"SwatchCard.js","names":["_react","_interopRequireDefault","require","_shared","_Icons","_Loaders","_StackedCard","_Typography","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","SwatchCard","exports","_ref","_ref$color","color","_ref$name","name","_ref$hex","hex","createElement","Fragment","StackedCardCover","aspectRatio","COVER_RATIO_SWATCH","StyledColorCover","$color","StackedCardRow","role","Body2","Caption1","style","fontFamily","SwatchPlaceholder","props","Placeholder","icon","ImageIcon","label","SwatchSkeleton","SkeletonLoader","width","height"],"sources":["../../../../../src/presentation/stackedCard/content/SwatchCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport { COVER_RATIO_SWATCH, StyledColorCover, Placeholder } from \"./shared\";\nimport { ImageIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport {\n StackedCardCover as Cover,\n StackedCardRow as StackRow,\n} from \"../../../components/StackedCard\";\nimport { Body2, Caption1 } from \"../../../components/Typography\";\n\n/**\n * SwatchCard — the cover IS the colour; a title row states its name and hex.\n * The swatch value is a literal data colour by design (not a theme token).\n */\n\nexport interface SwatchCardProps {\n color?: string;\n name?: string;\n hex?: string;\n}\n\nexport const SwatchCard = ({\n color = \"#1D9E75\",\n name = \"Teal\",\n hex = \"#1D9E75\",\n}: SwatchCardProps): ReactElement => (\n <>\n <Cover aspectRatio={COVER_RATIO_SWATCH}>\n <StyledColorCover $color={color} />\n </Cover>\n <StackRow role=\"title\">\n <Body2>{name}</Body2>\n <Caption1 color=\"tertiary\" data-fixed style={{ fontFamily: \"monospace\" }}>\n {hex}\n </Caption1>\n </StackRow>\n </>\n);\n\n/* ---- placeholder + skeleton ---- */\n\nexport const SwatchPlaceholder = (\n props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n <Placeholder icon={<ImageIcon />} label=\"Pick a colour\" {...props} />\n);\n\nexport const SwatchSkeleton = (): ReactElement => (\n <>\n <Cover aspectRatio={COVER_RATIO_SWATCH}>\n <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n </Cover>\n <StackRow role=\"title\">\n <SkeletonLoader style={{ height: 14, width: \"40%\" }} />\n <SkeletonLoader data-fixed style={{ height: 12, width: 60 }} />\n </StackRow>\n </>\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,11 +9,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
9
9
|
var _shared = require("./shared");
|
|
10
10
|
var _Icons = require("../../../components/Icons");
|
|
11
11
|
var _Loaders = require("../../../components/Loaders");
|
|
12
|
+
var _StackedCard = require("../../../components/StackedCard");
|
|
12
13
|
var _Typography = require("../../../components/Typography");
|
|
13
14
|
var _Typography2 = require("../../../components/Typography/Typography");
|
|
14
15
|
var _shared2 = require("../../shared");
|
|
15
|
-
var _primitives = require("../primitives");
|
|
16
|
-
var _shell = require("../shell");
|
|
17
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
18
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
18
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -118,8 +117,8 @@ var TaskCard = exports.TaskCard = function TaskCard(_ref4) {
|
|
|
118
117
|
var dateIsOverdue = overdue && !completed;
|
|
119
118
|
return /*#__PURE__*/_react.default.createElement(StyledBody, {
|
|
120
119
|
$completed: completed
|
|
121
|
-
}, cover ? /*#__PURE__*/_react.default.createElement(
|
|
122
|
-
aspectRatio:
|
|
120
|
+
}, cover ? /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
|
|
121
|
+
aspectRatio: _StackedCard.STACKED_CARD_COVER_RATIO,
|
|
123
122
|
centerSlot: playable ? _shared.playControl : undefined,
|
|
124
123
|
topRightSlot: coverControls ? (0, _shared.coverManagement)() : undefined
|
|
125
124
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -128,7 +127,7 @@ var TaskCard = exports.TaskCard = function TaskCard(_ref4) {
|
|
|
128
127
|
height: "100%",
|
|
129
128
|
background: "var(--color-theme-300)"
|
|
130
129
|
}
|
|
131
|
-
})) : null, /*#__PURE__*/_react.default.createElement(
|
|
130
|
+
})) : null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
132
131
|
role: "title"
|
|
133
132
|
}, /*#__PURE__*/_react.default.createElement(_shared.StyledClamp, null, showTaskId ? /*#__PURE__*/_react.default.createElement(_Typography2.Typography, {
|
|
134
133
|
as: "span",
|
|
@@ -136,7 +135,7 @@ var TaskCard = exports.TaskCard = function TaskCard(_ref4) {
|
|
|
136
135
|
color: "tertiary"
|
|
137
136
|
}, "#".concat(taskId, " ")) : null, title), completed ? null : /*#__PURE__*/_react.default.createElement(_shared.EntityDots, {
|
|
138
137
|
"aria-label": "Task options"
|
|
139
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
138
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
140
139
|
role: "meta"
|
|
141
140
|
}, /*#__PURE__*/_react.default.createElement(StyledMetaCluster, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
142
141
|
className: "sc-dots"
|
|
@@ -170,7 +169,7 @@ var TaskCard = exports.TaskCard = function TaskCard(_ref4) {
|
|
|
170
169
|
className: "sc-sep"
|
|
171
170
|
}, "\xB7"), /*#__PURE__*/_react.default.createElement(StyledHiddenBadge, {
|
|
172
171
|
title: "Hidden from clients"
|
|
173
|
-
}, /*#__PURE__*/_react.default.createElement(_Icons.EyeOffIcon, null))) : null)), /*#__PURE__*/_react.default.createElement(
|
|
172
|
+
}, /*#__PURE__*/_react.default.createElement(_Icons.EyeOffIcon, null))) : null)), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
174
173
|
role: "footer"
|
|
175
174
|
}, /*#__PURE__*/_react.default.createElement(StyledDate, {
|
|
176
175
|
$overdue: dateIsOverdue
|
|
@@ -197,21 +196,21 @@ var TaskPlaceholder = exports.TaskPlaceholder = function TaskPlaceholder(props)
|
|
|
197
196
|
|
|
198
197
|
/* Skeleton mirrors the task anatomy row for row: title, meta, footer. */
|
|
199
198
|
var TaskSkeleton = exports.TaskSkeleton = function TaskSkeleton() {
|
|
200
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
199
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
201
200
|
role: "title"
|
|
202
201
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
203
202
|
style: {
|
|
204
203
|
height: 14,
|
|
205
204
|
width: "90%"
|
|
206
205
|
}
|
|
207
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
206
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
208
207
|
role: "meta"
|
|
209
208
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
210
209
|
style: {
|
|
211
210
|
height: 10,
|
|
212
211
|
width: "55%"
|
|
213
212
|
}
|
|
214
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
213
|
+
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
|
|
215
214
|
role: "footer"
|
|
216
215
|
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
|
|
217
216
|
style: {
|