@farcaster/snap 1.14.0 → 1.15.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.
- package/dist/react/components/cell-grid.js +9 -4
- package/dist/react/index.js +8 -5
- package/dist/react-native/index.js +1 -1
- package/dist/ui/catalog.d.ts +1 -0
- package/dist/ui/cell-grid.d.ts +1 -0
- package/dist/ui/cell-grid.js +1 -0
- package/llms.txt +1 -0
- package/package.json +1 -1
- package/src/react/components/cell-grid.tsx +8 -4
- package/src/react/index.tsx +19 -18
- package/src/react-native/index.tsx +1 -1
- package/src/ui/cell-grid.ts +1 -0
|
@@ -16,6 +16,7 @@ export function SnapCellGrid({ element: { props }, }) {
|
|
|
16
16
|
const gap = String(props.gap ?? "sm");
|
|
17
17
|
const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
|
|
18
18
|
const gapPx = gapMap[gap] ?? 1;
|
|
19
|
+
const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
|
|
19
20
|
const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
|
|
20
21
|
const tapPath = `/inputs/${name}`;
|
|
21
22
|
const tapRaw = get(tapPath);
|
|
@@ -62,9 +63,9 @@ export function SnapCellGrid({ element: { props }, }) {
|
|
|
62
63
|
handleTap(r, c);
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
|
-
: undefined, className: cn("flex
|
|
66
|
+
: undefined, className: cn("flex items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
|
|
67
|
+
height: rowHeight,
|
|
66
68
|
background: bg,
|
|
67
|
-
// Two-layer ring: 1px white/black inner + 2px accent outer
|
|
68
69
|
boxShadow: selected
|
|
69
70
|
? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
|
|
70
71
|
: undefined,
|
|
@@ -74,9 +75,13 @@ export function SnapCellGrid({ element: { props }, }) {
|
|
|
74
75
|
const selectionLabel = interactive && selectedSet.size > 0
|
|
75
76
|
? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
|
|
76
77
|
: null;
|
|
77
|
-
return (_jsxs("div", { children: [_jsx("div", {
|
|
78
|
-
|
|
78
|
+
return (_jsxs("div", { children: [_jsx("div", { style: {
|
|
79
|
+
display: "grid",
|
|
80
|
+
width: "100%",
|
|
81
|
+
gridTemplateColumns: `repeat(${cols}, 1fr)`,
|
|
79
82
|
gap: gapPx,
|
|
83
|
+
padding: 4,
|
|
84
|
+
borderRadius: 8,
|
|
80
85
|
backgroundColor: colors.muted,
|
|
81
86
|
}, children: cellEls }), selectionLabel && (_jsx("div", { className: "mt-1.5 truncate text-xs font-mono", style: { color: colors.textMuted }, children: selectionLabel }))] }));
|
|
82
87
|
}
|
package/dist/react/index.js
CHANGED
|
@@ -174,7 +174,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
|
|
|
174
174
|
break;
|
|
175
175
|
}
|
|
176
176
|
}, [handlers]);
|
|
177
|
-
return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}),
|
|
177
|
+
return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), _jsx("div", { style: {
|
|
178
178
|
position: "absolute",
|
|
179
179
|
inset: 0,
|
|
180
180
|
display: "flex",
|
|
@@ -182,10 +182,13 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
|
|
|
182
182
|
justifyContent: "center",
|
|
183
183
|
zIndex: 10,
|
|
184
184
|
fontSize: 14,
|
|
185
|
-
color: "
|
|
186
|
-
background: "
|
|
187
|
-
backdropFilter: "blur(
|
|
188
|
-
|
|
185
|
+
color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
|
|
186
|
+
background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
|
|
187
|
+
backdropFilter: loading ? "blur(8px)" : "blur(0px)",
|
|
188
|
+
opacity: loading ? 1 : 0,
|
|
189
|
+
pointerEvents: loading ? "auto" : "none",
|
|
190
|
+
transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
|
|
191
|
+
}, children: "Loading..." }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
|
|
189
192
|
applyStatePaths(stateRef.current, changes);
|
|
190
193
|
}, onAction: handleAction }, pageKey) }) })] }));
|
|
191
194
|
}
|
|
@@ -133,7 +133,7 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
|
|
|
133
133
|
return (_jsxs(View, { style: styles.container, children: [loading && (_jsx(View, { style: [
|
|
134
134
|
styles.overlay,
|
|
135
135
|
{
|
|
136
|
-
backgroundColor: mode === "dark" ? "rgba(0,0,0,0.
|
|
136
|
+
backgroundColor: mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
|
|
137
137
|
},
|
|
138
138
|
], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })), _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
|
|
139
139
|
applyStatePaths(stateRef.current, changes);
|
package/dist/ui/catalog.d.ts
CHANGED
package/dist/ui/cell-grid.d.ts
CHANGED
package/dist/ui/cell-grid.js
CHANGED
|
@@ -14,6 +14,7 @@ export const cellGridProps = z
|
|
|
14
14
|
rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
|
|
15
15
|
cells: z.array(cellGridCellSchema),
|
|
16
16
|
gap: z.enum(GRID_GAP_VALUES).optional(),
|
|
17
|
+
rowHeight: z.number().int().min(8).max(64).optional(),
|
|
17
18
|
select: z.enum(["off", "single", "multiple"]).optional(),
|
|
18
19
|
})
|
|
19
20
|
.superRefine((val, ctx) => {
|
package/llms.txt
CHANGED
|
@@ -88,6 +88,7 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
|
|
|
88
88
|
- `rows` (number, required, 2–16)
|
|
89
89
|
- `cells` (array, required): sparse list of `{ row, col, color?: PaletteColor, content?: string }`
|
|
90
90
|
- `gap` (optional): `"none"` (0px) | `"sm"` (1px) | `"md"` (2px) | `"lg"` (4px). Default: `"sm"`
|
|
91
|
+
- `rowHeight` (number, optional, 8–64): pixel height per row. Default: 28. Grid height = rows × rowHeight
|
|
91
92
|
- `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
|
|
92
93
|
|
|
93
94
|
### Container Components
|
package/package.json
CHANGED
|
@@ -22,6 +22,7 @@ export function SnapCellGrid({
|
|
|
22
22
|
const gap = String(props.gap ?? "sm");
|
|
23
23
|
const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
|
|
24
24
|
const gapPx = gapMap[gap] ?? 1;
|
|
25
|
+
const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
|
|
25
26
|
|
|
26
27
|
const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
|
|
27
28
|
const tapPath = `/inputs/${name}`;
|
|
@@ -81,12 +82,12 @@ export function SnapCellGrid({
|
|
|
81
82
|
: undefined
|
|
82
83
|
}
|
|
83
84
|
className={cn(
|
|
84
|
-
"flex
|
|
85
|
+
"flex items-center justify-center rounded text-xs font-semibold",
|
|
85
86
|
interactive ? "cursor-pointer select-none" : "cursor-default",
|
|
86
87
|
)}
|
|
87
88
|
style={{
|
|
89
|
+
height: rowHeight,
|
|
88
90
|
background: bg,
|
|
89
|
-
// Two-layer ring: 1px white/black inner + 2px accent outer
|
|
90
91
|
boxShadow: selected
|
|
91
92
|
? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
|
|
92
93
|
: undefined,
|
|
@@ -105,10 +106,13 @@ export function SnapCellGrid({
|
|
|
105
106
|
return (
|
|
106
107
|
<div>
|
|
107
108
|
<div
|
|
108
|
-
className="grid w-full rounded-lg p-1"
|
|
109
109
|
style={{
|
|
110
|
-
|
|
110
|
+
display: "grid",
|
|
111
|
+
width: "100%",
|
|
112
|
+
gridTemplateColumns: `repeat(${cols}, 1fr)`,
|
|
111
113
|
gap: gapPx,
|
|
114
|
+
padding: 4,
|
|
115
|
+
borderRadius: 8,
|
|
112
116
|
backgroundColor: colors.muted,
|
|
113
117
|
}}
|
|
114
118
|
>
|
package/src/react/index.tsx
CHANGED
|
@@ -283,24 +283,25 @@ export function SnapView({
|
|
|
283
283
|
return (
|
|
284
284
|
<div style={{ position: "relative", width: "100%" }}>
|
|
285
285
|
{showConfetti && <ConfettiOverlay />}
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
286
|
+
<div
|
|
287
|
+
style={{
|
|
288
|
+
position: "absolute",
|
|
289
|
+
inset: 0,
|
|
290
|
+
display: "flex",
|
|
291
|
+
alignItems: "center",
|
|
292
|
+
justifyContent: "center",
|
|
293
|
+
zIndex: 10,
|
|
294
|
+
fontSize: 14,
|
|
295
|
+
color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
|
|
296
|
+
background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
|
|
297
|
+
backdropFilter: loading ? "blur(8px)" : "blur(0px)",
|
|
298
|
+
opacity: loading ? 1 : 0,
|
|
299
|
+
pointerEvents: loading ? "auto" : "none",
|
|
300
|
+
transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
|
|
301
|
+
}}
|
|
302
|
+
>
|
|
303
|
+
Loading...
|
|
304
|
+
</div>
|
|
304
305
|
|
|
305
306
|
<div style={previewSurfaceStyle}>
|
|
306
307
|
<SnapPreviewAccentProvider pageAccent={snap.theme?.accent}>
|
package/src/ui/cell-grid.ts
CHANGED
|
@@ -22,6 +22,7 @@ export const cellGridProps = z
|
|
|
22
22
|
rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
|
|
23
23
|
cells: z.array(cellGridCellSchema),
|
|
24
24
|
gap: z.enum(GRID_GAP_VALUES).optional(),
|
|
25
|
+
rowHeight: z.number().int().min(8).max(64).optional(),
|
|
25
26
|
select: z.enum(["off", "single", "multiple"]).optional(),
|
|
26
27
|
})
|
|
27
28
|
.superRefine((val, ctx) => {
|