{ "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json", "aka": [ "Multi-select preview" ], "animated": false, "apis": [ { "name": "ctx.ui.custom", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "Image", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image" }, { "name": "ctx.ui.setWidget", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user" }, { "name": "Component", "url": null }, { "name": "Text", "url": null } ], "applicability": [ "Use this when a picker stages several images before confirmation." ], "category": "lists", "categoryLabel": "Lists and pickers", "consequences": [ "Inspection can change without changing the selected set.", "Loading, missing sources and staged-widget cleanup remain separate work." ], "family": "behavioral", "familyLabel": "Behavioral", "id": "preview-basket", "implementation": [ "Handle unavailable images without changing selection.", "Clear the staged preview widget when dismissed." ], "intent": "Keep selection separate from thumbnail loading and zoom inspection.", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.json", "kind": "component", "knownUses": [ { "example": "screenshot-multi-image-picker", "moreRefs": 0, "refs": [ { "file": "extensions/screenshots-picker/index.ts", "lines": "800-830", "sha": "17cce138", "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/screenshots-picker/index.ts#L800-L830" } ], "repo": "dot314", "repoUrl": "https://github.com/nicobailon/dot314", "title": "Select and preview multiple screenshots in a custom picker" } ], "linkedFrom": [ { "how": "uses image-backed staged inspection", "id": "image-parachute", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/image-parachute.json", "mdUrl": "https://pi-tui.ratstack.sh/patterns/image-parachute.md", "name": "Image Parachute", "url": "https://pi-tui.ratstack.sh/patterns/image-parachute/" } ], "links": { "agentGuide": "https://pi-tui.ratstack.sh/llms.txt", "index": "https://pi-tui.ratstack.sh/patterns.md", "skill": "https://pi-tui.ratstack.sh/skills/build-pi-tui-component.md" }, "mdUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.md", "motivation": "Dot314's screenshot picker needs staged selections alongside thumbnail and zoom inspection.", "name": "Preview Basket", "participants": [ { "name": "ctx.ui.custom", "role": "Mounts one interaction and resolves through done.", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "Image", "role": "Renders an inline image or unsupported-terminal placeholder.", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image" }, { "name": "ctx.ui.setWidget", "role": "Mounts, replaces or clears one near-editor widget.", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user" }, { "name": "Staged set", "role": "Retains selected items independently of zoom inspection.", "url": null } ], "pi": "1.0.3", "related": [ { "how": "handles preview capability limits", "id": "image-parachute", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/image-parachute.json", "mdUrl": "https://pi-tui.ratstack.sh/patterns/image-parachute.md", "name": "Image Parachute", "url": "https://pi-tui.ratstack.sh/patterns/image-parachute/" } ], "sampleCode": { "code": "// Preview Basket: keep staging independent of zoom and source availability.\nimport { Image, Text, getCapabilities, setCapabilities } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nimport { syntheticPreview } from \"../../fixtures/synthetic-images.ts\";\nconst images = [\"task-list.png\", \"patch-preview.png\", \"missing.png\"];\ntype Inspection = { mode: \"thumbnails\" } | { mode: \"zoom\"; name: string } | { mode: \"missing\"; name: string };\n\nexport const story: PatternStory = {\n id: \"preview-basket\", title: \"Preview Basket\", kind: \"component\",\n apis: [\"Image\", \"Component\", \"Text\"], rows: 16,\n states: [\n { id: \"selected\", label: \"Staged images\" },\n { id: \"zoom\", label: \"Zoom inspection\", steps: [{ type: \"action\", name: \"zoom\" }] },\n { id: \"missing\", label: \"Unavailable image\", steps: [{ type: \"action\", name: \"missing\" }] },\n ],\n setup({ tui, theme, action }) {\n const previous = getCapabilities();\n setCapabilities({ ...previous, images: \"kitty\" });\n const staged = new Set(images.slice(0, 2));\n let inspection: Inspection = { mode: \"thumbnails\" };\n const previews = new Map(images.slice(0, 2).map(name => [name, new Image(\n syntheticPreview(name === images[0] ? \"tasks\" : \"patch\"), \"image/png\", { fallbackColor: text => theme.fg(\"muted\", text) },\n { filename: name, maxWidthCells: 24, maxHeightCells: 3 },\n )]));\n const zoom = new Image(syntheticPreview(\"tasks\"), \"image/png\", { fallbackColor: text => theme.fg(\"muted\", text) },\n { filename: images[0], maxWidthCells: 48, maxHeightCells: 7 });\n function inspect(next: Inspection) { inspection = next; tui.requestRender(); }\n action(\"zoom\", () => inspect({ mode: \"zoom\", name: images[0]! }));\n action(\"missing\", () => inspect({ mode: \"missing\", name: images[2]! }));\n function toggle(name: string) {\n if (staged.has(name)) staged.delete(name); else staged.add(name);\n tui.requestRender();\n }\n return {\n invalidate() { for (const image of previews.values()) image.invalidate(); zoom.invalidate(); },\n dispose() { staged.clear(); previews.clear(); setCapabilities(previous); },\n handleInput(data) { if (data === \" \") toggle(images[0]!); },\n render(width) {\n const lines = new Text(theme.fg(\"accent\", \"Stage screenshots · \" + staged.size + \" selected\"), 0, 0).render(width);\n for (const name of images) lines.push(...new Text(theme.fg(\n staged.has(name) ? \"success\" : \"muted\", (staged.has(name) ? \"[x] \" : \"[ ] \") + name,\n ), 0, 0).render(width));\n lines.push(\"\", ...new Text(theme.fg(\"accent\",\n inspection.mode === \"thumbnails\" ? \"Staged previews\" : \"Inspect · \" + inspection.name,\n ), 0, 0).render(width));\n if (inspection.mode === \"thumbnails\") {\n for (const name of staged) lines.push(...(previews.get(name)?.render(width) ?? []));\n } else if (inspection.mode === \"zoom\") {\n lines.push(...zoom.render(width));\n lines.push(...new Text(theme.fg(\"muted\", \"Zoom leaves both staged items selected\"), 0, 0).render(width));\n } else {\n lines.push(...new Text(theme.fg(\"warning\", \"Source unavailable · selection unchanged\"), 0, 0).render(width));\n }\n lines.push(\"\", ...new Text(theme.fg(\"dim\", \"PNG previews · staging preserved\"), 0, 0).render(width));\n return lines;\n },\n };\n },\n};\n", "lang": "ts", "path": "stories/patterns/behavioral/preview-basket.ts" }, "states": [ { "dont": false, "expectFail": [], "frames": [ { "alt": "Preview Basket, Staged images state, 40 columns, dark theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-40-dark.ba793af42fec.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Preview Basket, Staged images state, 40 columns, light theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-40-light.0c229652a015.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Preview Basket, Staged images state, 60 columns, dark theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-60-dark.3cd55c92f79e.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Staged images state, 60 columns, light theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-60-light.c87e32c9c5de.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Staged images state, 80 columns, dark theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-80-dark.4489f710839d.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Staged images state, 80 columns, light theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-80-light.954d4ac4b278.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Staged images state, 120 columns, dark theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-120-dark.c0e2ad058cfb.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Preview Basket, Staged images state, 120 columns, light theme, 14 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 616, "rows": 14, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/selected-120-light.a789bc51fbaa.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Mark two synthetic images and show their staged previews.", "id": "selected", "label": "Staged images", "problems": [] }, { "dont": false, "expectFail": [], "frames": [ { "alt": "Preview Basket, Zoom inspection state, 40 columns, dark theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-40-dark.30cb7fede234.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Preview Basket, Zoom inspection state, 40 columns, light theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-40-light.f4161d20d0c6.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Preview Basket, Zoom inspection state, 60 columns, dark theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-60-dark.56e398f4b6ad.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Zoom inspection state, 60 columns, light theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-60-light.130c33afab24.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Zoom inspection state, 80 columns, dark theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-80-dark.05986c65b771.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Zoom inspection state, 80 columns, light theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-80-light.42df02506241.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Zoom inspection state, 120 columns, dark theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-120-dark.becf3bc11e14.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Preview Basket, Zoom inspection state, 120 columns, light theme, 16 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 704, "rows": 16, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/zoom-120-light.af4a60a4d4d3.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Inspect one image without changing the staged set.", "id": "zoom", "label": "Zoom inspection", "problems": [] }, { "dont": false, "expectFail": [], "frames": [ { "alt": "Preview Basket, Unavailable image state, 40 columns, dark theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-40-dark.dee663b227a5.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Preview Basket, Unavailable image state, 40 columns, light theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-40-light.3618377df719.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Preview Basket, Unavailable image state, 60 columns, dark theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-60-dark.37a705e35f4f.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Unavailable image state, 60 columns, light theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-60-light.e2ac9ca5eee5.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Preview Basket, Unavailable image state, 80 columns, dark theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-80-dark.aa273da2fa94.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Unavailable image state, 80 columns, light theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-80-light.0399cfae9bf8.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Preview Basket, Unavailable image state, 120 columns, dark theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-120-dark.ed88367e51c9.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Preview Basket, Unavailable image state, 120 columns, light theme, 9 rows", "animated": false, "animation": null, "checks": [ { "evidence": [], "name": "width", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "style-leak", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "hard-coded-colour", "status": "pass", "verdict": "pass" }, { "evidence": [], "name": "height", "status": "pass", "verdict": "pass" } ], "h": 396, "rows": 9, "still": "https://pi-tui.ratstack.sh/frames/preview-basket/missing-120-light.ec2b377ad6ba.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Show a text placeholder for an unavailable source.", "id": "missing", "label": "Unavailable image", "problems": [] } ], "structure": "selected set -> staged widget\ncurrent item -> thumbnail / zoom", "thumbnails": { "dark": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/preview-basket/dark.55ef0475983c.webp" }, "light": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/preview-basket/light.11c922218405.webp" } }, "url": "https://pi-tui.ratstack.sh/patterns/preview-basket/", "widths": [ 40, 60, 80, 120 ] }