A four-state zoomable circle packing in hand-rolled SVG — front-chain sibling packing with a verified smallest enclosing circle, area strictly proportional to value, zoom as a re-projection rather than a re-layout, keyboard-walkable circles and an sr-only breakdown table.
Preview in your theme
Loading preview…
This component is part of Pro
The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.
status="ready" · 524.02 kB over 21 entries, 3 of 4 levels drawn. Vendor is 61% of the bundle, so its circle owns most of the frame; the 0.02 kB re-export shim inside App shell is 0.0038%, and because area is the value its radius is under a device pixel — arrow into it or read the table. Document model holds a fourth level behind a dashed ring. Last framed: nothing yet.
Bundle size by package · production buildClick a circle to frame it · arrows walk one level · Backspace goes back
524 kB total · 3 of 4 levels shown
Circle packing of All packages: 524 kB across 21 entries, drawn as 5 circles nested 3 levels deep. Area is proportional to value. Largest Vendor, 319.6 kB, 61% of All packages. Smallest Internationalisation, 20.1 kB, 3.8%. 10 circles are too small to carry a label. 1 circle holds levels deeper than the 3 drawn. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back. 1 circle keeps deeper levels behind a dashed ring. 10 circles are too small to label, 1 of them under a pixel wide — arrow into them, or read the table.
Every entry inside All packages, with its value, its share of the group that contains it, and its share of All packages.
Entry
Inside
Level
Value
Share of group
Share of All packages
Vendor
All packages
1
319.6 kB
61%
61%
React runtime
Vendor
2
129.5 kB
40.5%
24.7%
react-dom
React runtime
3
118.4 kB
91.4%
22.6%
react
React runtime
3
6.9 kB
5.3%
1.3%
scheduler
React runtime
3
4.2 kB
3.2%
0.8%
Charting library
Vendor
2
96.2 kB
30.1%
18.4%
Date and timezone tables
Vendor
2
71.5 kB
22.4%
13.6%
Icon set
Vendor
2
22.4 kB
7%
4.3%
Editor
All packages
1
102.6 kB
19.6%
19.6%
Core
Editor
2
58.7 kB
57.2%
11.2%
Document model
Core
3
33.9 kB
57.8%
6.5%
Tree
Document model
4
18.2 kB
53.7%
3.5%
Operations
Document model
4
9.6 kB
28.3%
1.8%
History
Document model
4
6.1 kB
18%
1.2%
Renderer
Core
3
24.8 kB
42.2%
4.7%
Plugins
Editor
2
31.4 kB
30.6%
6%
Language servers
Editor
2
12.5 kB
12.2%
2.4%
App shell
All packages
1
47.5 kB
9.1%
9.1%
Routes
App shell
2
27.3 kB
57.4%
5.2%
Layout
App shell
2
11.8 kB
24.8%
2.3%
Auth
App shell
2
8.4 kB
17.7%
1.6%
Deprecated re-export shim
App shell
2
0 kB
under 0.1%
under 0.1%
Design system
All packages
1
34.2 kB
6.5%
6.5%
Design system primitives (buttons, inputs, overlays)
Design system
2
18.4 kB
53.8%
3.5%
Tokens
Design system
2
9.6 kB
28.1%
1.8%
Motion
Design system
2
6.2 kB
18.1%
1.2%
Internationalisation
All packages
1
20.1 kB
3.8%
3.8%
Messages
Internationalisation
2
14.8 kB
73.6%
2.8%
Plural rules
Internationalisation
2
5.3 kB
26.4%
1%
status="empty" · the report ran and returned no rows — a different sentence from "still building".
Bundle size by package · production buildNo build analysed yet
Nothing to pack yet
A packing needs at least one entry with a value above zero.
status="loading" · four pulsing circles inside a quiet frame, aria-hidden, plus one sr-only status line. No timers.
Bundle size by package · production buildAnalysing the build
Loading breakdown
status="error" with onRetry · press Try again to swap to ready. Omit onRetry and the button never renders.
Bundle size by package · production buildBundle report timed out
Couldn't load this breakdown
The data source didn't respond.
Degenerate: every group holds exactly one child, so the figure is three concentric circles. A one-element front chain has no neighbour to be placed against, which is the case the packer short-circuits instead of dividing by zero.
Bundle size by package · nothing has been split yetOne package, one folder, one file
842.6 kB total · 3 of 3 levels shown
Circle packing of Whole build: 842.6 kB across 1 entry, drawn as 1 circle nested 3 levels deep. Area is proportional to value. Largest Monolith, 842.6 kB, 100% of Whole build. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back.
Every entry inside Whole build, with its value, its share of the group that contains it, and its share of Whole build.
Entry
Inside
Level
Value
Share of group
Share of Whole build
Monolith
Whole build
1
842.6 kB
100%
100%
src
Monolith
2
842.6 kB
100%
100%
index.js
src
3
842.6 kB
100%
100%
Degenerate: sixteen identical values. Every circle comes out the same size, so area encodes nothing and only labels, order and enclosure are left — and equal radii push the packer into its densest arrangement, where any rounding error would show as an overlap.
Headcount by squad · one seat per circleFour squads, four seats each
16 people total · 2 of 2 levels shown
Circle packing of Whole team: 16 people across 16 entries, drawn as 4 circles nested 2 levels deep. Area is proportional to value. Largest Growth, 4 people, 25% of Whole team. Smallest Growth, 4 people, 25%. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back.
Every entry inside Whole team, with its value, its share of the group that contains it, and its share of Whole team.
Entry
Inside
Level
Value
Share of group
Share of Whole team
Growth
Whole team
1
4 people
25%
25%
Analyst
Growth
2
1 people
25%
6.3%
Designer
Growth
2
1 people
25%
6.3%
Engineer
Growth
2
1 people
25%
6.3%
Manager
Growth
2
1 people
25%
6.3%
Payments
Whole team
1
4 people
25%
25%
Analyst
Payments
2
1 people
25%
6.3%
Designer
Payments
2
1 people
25%
6.3%
Engineer
Payments
2
1 people
25%
6.3%
Manager
Payments
2
1 people
25%
6.3%
Platform
Whole team
1
4 people
25%
25%
Analyst
Platform
2
1 people
25%
6.3%
Designer
Platform
2
1 people
25%
6.3%
Engineer
Platform
2
1 people
25%
6.3%
Manager
Platform
2
1 people
25%
6.3%
Support
Whole team
1
4 people
25%
25%
Analyst
Support
2
1 people
25%
6.3%
Designer
Support
2
1 people
25%
6.3%
Engineer
Support
2
1 people
25%
6.3%
Manager
Support
2
1 people
25%
6.3%
Degenerate: a negative credit note, a zero line, a NaN from an empty source column, a group whose children are all zero, and a 57-character label. Nothing unpaintable is folded in — it is dropped and counted in the footnote. The NaN would not survive schema.parse either; it is here because props reach a chart unparsed more often than anyone plans for.
Revenue by line · includes credits and retired linesExport includes credits and retired lines
8.1K USD total · 2 of 2 levels shown
Circle packing of Net revenue: 8.1K USD across 4 entries, drawn as 2 circles nested 2 levels deep. Area is proportional to value. Largest Hardware, 5.4K USD, 66.1% of Net revenue. Smallest Services, 2.7K USD, 33.9%. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back.
Left out of the figure: 1 negative entry, 4 at zero, unset or not a number, 1 empty group — area cannot be negative and a circle of nothing has no radius.
Every entry inside Net revenue, with its value, its share of the group that contains it, and its share of Net revenue.
Entry
Inside
Level
Value
Share of group
Share of Net revenue
Hardware
Net revenue
1
5.4K USD
66.1%
66.1%
Laptops
Hardware
2
4.2K USD
78.5%
51.9%
Monitors
Hardware
2
1.2K USD
21.5%
14.2%
Services
Net revenue
1
2.7K USD
33.9%
33.9%
Onboarding, migration and first-90-days success programme
Services
2
2K USD
72.3%
24.5%
Support
Services
2
760 USD
27.7%
9.4%
Degenerate: parent links form a loop (Platform → Runtime → Scheduler → Platform). Enclosure cannot express that, so the contract names the loop instead of drawing an empty frame.
Service ownership · parent links looped
This hierarchy can't be packed
Parent links loop through Platform → Runtime → Scheduler. Enclosure needs a tree: a circle cannot sit inside something it contains.
maxDepth={1} · only the five top-level packages, each with a dashed ring saying it holds more. The same data, read as a share-of-total picture instead of a structure one.
Bundle size by package · production buildOne level, the rest behind dashed rings
524 kB total · 1 of 4 levels shown
Circle packing of All packages: 524 kB across 21 entries, drawn as 5 circles nested 1 level deep. Area is proportional to value. Largest Vendor, 319.6 kB, 61% of All packages. Smallest Internationalisation, 20.1 kB, 3.8%. 5 circles hold levels deeper than the 1 drawn. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back. 5 circles keep deeper levels behind a dashed ring.
Every entry inside All packages, with its value, its share of the group that contains it, and its share of All packages.
Entry
Inside
Level
Value
Share of group
Share of All packages
Vendor
All packages
1
319.6 kB
61%
61%
React runtime
Vendor
2
129.5 kB
40.5%
24.7%
react-dom
React runtime
3
118.4 kB
91.4%
22.6%
react
React runtime
3
6.9 kB
5.3%
1.3%
scheduler
React runtime
3
4.2 kB
3.2%
0.8%
Charting library
Vendor
2
96.2 kB
30.1%
18.4%
Date and timezone tables
Vendor
2
71.5 kB
22.4%
13.6%
Icon set
Vendor
2
22.4 kB
7%
4.3%
Editor
All packages
1
102.6 kB
19.6%
19.6%
Core
Editor
2
58.7 kB
57.2%
11.2%
Document model
Core
3
33.9 kB
57.8%
6.5%
Tree
Document model
4
18.2 kB
53.7%
3.5%
Operations
Document model
4
9.6 kB
28.3%
1.8%
History
Document model
4
6.1 kB
18%
1.2%
Renderer
Core
3
24.8 kB
42.2%
4.7%
Plugins
Editor
2
31.4 kB
30.6%
6%
Language servers
Editor
2
12.5 kB
12.2%
2.4%
App shell
All packages
1
47.5 kB
9.1%
9.1%
Routes
App shell
2
27.3 kB
57.4%
5.2%
Layout
App shell
2
11.8 kB
24.8%
2.3%
Auth
App shell
2
8.4 kB
17.7%
1.6%
Deprecated re-export shim
App shell
2
0 kB
under 0.1%
under 0.1%
Design system
All packages
1
34.2 kB
6.5%
6.5%
Design system primitives (buttons, inputs, overlays)
Design system
2
18.4 kB
53.8%
3.5%
Tokens
Design system
2
9.6 kB
28.1%
1.8%
Motion
Design system
2
6.2 kB
18.1%
1.2%
Internationalisation
All packages
1
20.1 kB
3.8%
3.8%
Messages
Internationalisation
2
14.8 kB
73.6%
2.8%
Plural rules
Internationalisation
2
5.3 kB
26.4%
1%
order="input" · siblings keep contract order — here the alphabetical order a manifest lists them in — instead of being sorted big-to-small. Order is an input to the packer, not a paint choice, so the whole arrangement changes and small-first usually packs looser.
Bundle size by package · production buildContract order, not rank order
524 kB total · 3 of 4 levels shown
Circle packing of All packages: 524 kB across 21 entries, drawn as 5 circles nested 3 levels deep. Area is proportional to value. Largest Vendor, 319.6 kB, 61% of All packages. Smallest Internationalisation, 20.1 kB, 3.8%. 14 circles are too small to carry a label. 1 circle holds levels deeper than the 3 drawn. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back. 1 circle keeps deeper levels behind a dashed ring. 14 circles are too small to label, 1 of them under a pixel wide — arrow into them, or read the table.
Every entry inside All packages, with its value, its share of the group that contains it, and its share of All packages.
Entry
Inside
Level
Value
Share of group
Share of All packages
App shell
All packages
1
47.5 kB
9.1%
9.1%
Routes
App shell
2
27.3 kB
57.4%
5.2%
Layout
App shell
2
11.8 kB
24.8%
2.3%
Auth
App shell
2
8.4 kB
17.7%
1.6%
Deprecated re-export shim
App shell
2
0 kB
under 0.1%
under 0.1%
Design system
All packages
1
34.2 kB
6.5%
6.5%
Tokens
Design system
2
9.6 kB
28.1%
1.8%
Design system primitives (buttons, inputs, overlays)
Design system
2
18.4 kB
53.8%
3.5%
Motion
Design system
2
6.2 kB
18.1%
1.2%
Editor
All packages
1
102.6 kB
19.6%
19.6%
Core
Editor
2
58.7 kB
57.2%
11.2%
Document model
Core
3
33.9 kB
57.8%
6.5%
Tree
Document model
4
18.2 kB
53.7%
3.5%
Operations
Document model
4
9.6 kB
28.3%
1.8%
History
Document model
4
6.1 kB
18%
1.2%
Renderer
Core
3
24.8 kB
42.2%
4.7%
Plugins
Editor
2
31.4 kB
30.6%
6%
Language servers
Editor
2
12.5 kB
12.2%
2.4%
Internationalisation
All packages
1
20.1 kB
3.8%
3.8%
Messages
Internationalisation
2
14.8 kB
73.6%
2.8%
Plural rules
Internationalisation
2
5.3 kB
26.4%
1%
Vendor
All packages
1
319.6 kB
61%
61%
React runtime
Vendor
2
129.5 kB
40.5%
24.7%
react-dom
React runtime
3
118.4 kB
91.4%
22.6%
react
React runtime
3
6.9 kB
5.3%
1.3%
scheduler
React runtime
3
4.2 kB
3.2%
0.8%
Charting library
Vendor
2
96.2 kB
30.1%
18.4%
Date and timezone tables
Vendor
2
71.5 kB
22.4%
13.6%
Icon set
Vendor
2
22.4 kB
7%
4.3%
padding={8} · wide gaps make the nesting obvious at a glance and cost area: the same values are drawn smaller because the frame has to hold the whitespace too.
Bundle size by package · production buildAiry packing, smaller circles
524 kB total · 3 of 4 levels shown
Circle packing of All packages: 524 kB across 21 entries, drawn as 5 circles nested 3 levels deep. Area is proportional to value. Largest Vendor, 319.6 kB, 61% of All packages. Smallest Internationalisation, 20.1 kB, 3.8%. 15 circles are too small to carry a label. 1 circle holds levels deeper than the 3 drawn. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back. 1 circle keeps deeper levels behind a dashed ring. 15 circles are too small to label, 1 of them under a pixel wide — arrow into them, or read the table.
Every entry inside All packages, with its value, its share of the group that contains it, and its share of All packages.
Entry
Inside
Level
Value
Share of group
Share of All packages
Vendor
All packages
1
319.6 kB
61%
61%
React runtime
Vendor
2
129.5 kB
40.5%
24.7%
react-dom
React runtime
3
118.4 kB
91.4%
22.6%
react
React runtime
3
6.9 kB
5.3%
1.3%
scheduler
React runtime
3
4.2 kB
3.2%
0.8%
Charting library
Vendor
2
96.2 kB
30.1%
18.4%
Date and timezone tables
Vendor
2
71.5 kB
22.4%
13.6%
Icon set
Vendor
2
22.4 kB
7%
4.3%
Editor
All packages
1
102.6 kB
19.6%
19.6%
Core
Editor
2
58.7 kB
57.2%
11.2%
Document model
Core
3
33.9 kB
57.8%
6.5%
Tree
Document model
4
18.2 kB
53.7%
3.5%
Operations
Document model
4
9.6 kB
28.3%
1.8%
History
Document model
4
6.1 kB
18%
1.2%
Renderer
Core
3
24.8 kB
42.2%
4.7%
Plugins
Editor
2
31.4 kB
30.6%
6%
Language servers
Editor
2
12.5 kB
12.2%
2.4%
App shell
All packages
1
47.5 kB
9.1%
9.1%
Routes
App shell
2
27.3 kB
57.4%
5.2%
Layout
App shell
2
11.8 kB
24.8%
2.3%
Auth
App shell
2
8.4 kB
17.7%
1.6%
Deprecated re-export shim
App shell
2
0 kB
under 0.1%
under 0.1%
Design system
All packages
1
34.2 kB
6.5%
6.5%
Design system primitives (buttons, inputs, overlays)
Design system
2
18.4 kB
53.8%
3.5%
Tokens
Design system
2
9.6 kB
28.1%
1.8%
Motion
Design system
2
6.2 kB
18.1%
1.2%
Internationalisation
All packages
1
20.1 kB
3.8%
3.8%
Messages
Internationalisation
2
14.8 kB
73.6%
2.8%
Plural rules
Internationalisation
2
5.3 kB
26.4%
1%
Wide and deep: 8 areas, 33 folders, 134 files, 554,502 lines. Most circles cannot hold a label and the legend stops at 8 entries, so the readout, the tooltips and the sr-only table carry the rest.
Lines of code by folder · seeded snapshotSeeded snapshot, three levels
554.5K lines total · 3 of 3 levels shown
Circle packing of Whole repository: 554.5K lines across 134 entries, drawn as 8 circles nested 3 levels deep. Area is proportional to value. Largest web, 93.8K lines, 16.9% of Whole repository. Smallest api, 28.4K lines, 5.1%. 164 circles are too small to carry a label. Every value is listed in the table that follows.
Area is the value; nesting is containment. Click or press Enter to frame a group, Backspace to go back. 164 circles are too small to label, 3 of them under a pixel wide — arrow into them, or read the table.
Every entry inside Whole repository, with its value, its share of the group that contains it, and its share of Whole repository.
Zyeon UI