guardian/interactive-style-library
File Size
The distribution of size of files (measured in lines of code).
File Size Overall
  • There are 62 files with 5,131 lines of code.
    • 0 very long files (0 lines of code)
    • 1 long files (639 lines of code)
    • 3 medium size files (801 lines of code)
    • 11 small files (1,606 lines of code)
    • 47 very small files (2,085 lines of code)
0% | 12% | 15% | 31% | 40%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: grouped by folders | grouped by size | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
yaml0% | 70% | 0% | 29% | 0%
js0% | 0% | 23% | 23% | 52%
html0% | 0% | 89% | 0% | 10%
svelte0% | 0% | 0% | 50% | 49%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
src0% | 12% | 16% | 32% | 39%
scripts0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
figma-color-spec.yaml
in src/visuals
 639 -
font-faces.js
in src/source/generate
 393 9
headline-numeric.html
in src/components/preview
 205 -
charts-css-scss.js
in src/visuals/generate
 203 11
colors-css-scss.js
in src/visuals/generate
 200 10
svelte
Icon.svelte
in src/components/preview/playground
 195 -
svelte
ComponentPage.svelte
in src/components/preview/playground/lib
 159 -
svelte
App.svelte
in src/components/preview
 157 -
157 7
figma-chart-spec.yaml
in src/visuals
 151 -
svelte
Sidebar.svelte
in src/components/preview/playground/lib
 123 -
style-writer.js
in src/visuals
 119 7
svelte
ModifiersTable.svelte
in src/components/preview/playground/lib
 117 -
common.js
in src/components
 117 10
figma-party-spec.yaml
in src/visuals
 111 -
select.js
in src/components/generate
 91 1
icons.js
in src/components/generate
 90 1
colors-js.js
in src/visuals/generate
 89 10
svelte
Button.svelte
in src/components/preview/playground
 87 -
spinner.js
in src/components/generate
 86 1
svelte
ComponentPlayground.svelte
in src/components/preview/playground/lib
 83 -
77 4
75 2
svelte
Radio.svelte
in src/components/preview/playground
 70 -
utils.js
in src
 70 8
checkbox.js
in src/components/generate
 68 1
svelte
CodeBlock.svelte
in src/components/preview/playground/lib
 66 -
toggle.js
in src/components/generate
 64 1
svelte
TextInput.svelte
in src/components/preview/playground
 61 -
parties-css-scss.js
in src/visuals/generate
 59 4
svelte
Variant.svelte
in src/components/preview/playground/lib
 58 -
typography.js
in src/source/generate
 51 1
svelte
Select.svelte
in src/components/preview/playground
 49 -
button.js
in src/components/generate
 48 1
svelte
Label.svelte
in src/components/preview/playground
 48 -
build-watch.js
in scripts
 47 3
svelte
Toggle.svelte
in src/components/preview/playground
 43 -
svelte
Spinner.svelte
in src/components/preview/playground
 42 -
text-input.js
in src/components/generate
 41 1
radio.js
in src/components/generate
 41 1
charts-js.js
in src/visuals/generate
 41 3
svelte
Checkbox.svelte
in src/components/preview/playground
 40 -
common.js
in src/visuals
 36 4
common.js
in src/source
 35 4
parties-js.js
in src/visuals/generate
 33 2
palette.js
in src/source/generate
 32 1
breakpoints.js
in src/source/generate
 28 1
label.js
in src/components/generate
 28 1
svelte
ExternalLink.svelte
in src/components/preview/playground/lib
 27 -
index.html
in src/components/preview
 25 -
Large Files That Change Often (Top 20)
To change a file, an AI coding agent (or a person) has to read it: these files are read the most for the changes in the past year (lines × changes).
File# lines≈ tokens
to read		# changes
(1y)		≈ lines edited
per change		lines read per
line changed
colors-css-scss.js
in src/visuals/generate
 200 ~1k–3k 6 ~50 ~5
charts-css-scss.js
in src/visuals/generate
 203 ~1k–3k 5 ~50 ~3
font-faces.js
in src/source/generate
 393 ~2k–7k 2 ~200 ~2
svelte
App.svelte
in src/components/preview
 157 ~1k–3k 5 ~50 ~3
77 ~500–1.5k 9 ~20 ~5
figma-color-spec.yaml
in src/visuals
 639 ~3k–10k 1 ~2 ~300
select.js
in src/components/generate
 91 ~500–1.5k 7 ~30 ~3
utils.js
in src
 70 ~300–1k 7 ~10 ~7
common.js
in src/components
 117 ~700–2k 4 ~70 ~2
figma-chart-spec.yaml
in src/visuals
 151 ~1k–3k 3 ~70 ~2
colors-js.js
in src/visuals/generate
 89 ~500–1.5k 5 ~30 ~3
headline-numeric.html
in src/components/preview
 205 ~1k–3k 2 ~100 ~2
svelte
Icon.svelte
in src/components/preview/playground
 195 ~1k–3k 2 ~100 ~2
75 ~500–1.5k 5 ~5 ~15
icons.js
in src/components/generate
 90 ~500–1.5k 4 ~50 ~2
svelte
Button.svelte
in src/components/preview/playground
 87 ~500–1.5k 4 ~30 ~2
spinner.js
in src/components/generate
 86 ~500–1.5k 4 ~30 ~3
checkbox.js
in src/components/generate
 68 ~300–1k 5 ~20 ~3
svelte
ComponentPage.svelte
in src/components/preview/playground/lib
 159 ~1k–3k 2 ~100 ~2
svelte
Select.svelte
in src/components/preview/playground
 49 under 1k 6 ~20 ~2

Tokens are lines × 7 to 14 (analysis.fileReadsForChanges). Lines edited per change are the file's lines added and deleted divided by its commits over the whole history. Agents read about 2,000 lines at a time: when a 17,000-line file was split into modules, the tokens an agent read for the same change fell by 83% (The Economic Benefit of Refactoring, 2026).

Files With Most Units (Top 32)
File# lines# units
charts-css-scss.js
in src/visuals/generate
 203 11
common.js
in src/components
 117 10
colors-css-scss.js
in src/visuals/generate
 200 10
colors-js.js
in src/visuals/generate
 89 10
font-faces.js
in src/source/generate
 393 9
utils.js
in src
 70 8
157 7
style-writer.js
in src/visuals
 119 7
77 4
common.js
in src/source
 35 4
parties-css-scss.js
in src/visuals/generate
 59 4
common.js
in src/visuals
 36 4
build-watch.js
in scripts
 47 3
charts-js.js
in src/visuals/generate
 41 3
75 2
parties-js.js
in src/visuals/generate
 33 2
palette.js
in src/source/generate
 32 1
mq-mixin.js
in src/source/generate
 23 1
typography.js
in src/source/generate
 51 1
breakpoints.js
in src/source/generate
 28 1
icons.js
in src/components/generate
 90 1
toggle.js
in src/components/generate
 64 1
spinner.js
in src/components/generate
 86 1
select.js
in src/components/generate
 91 1
checkbox.js
in src/components/generate
 68 1
button.js
in src/components/generate
 48 1
text-input.js
in src/components/generate
 41 1
radio.js
in src/components/generate
 41 1
label.js
in src/components/generate
 28 1
shiki.js
in src/components/preview/playground/lib
 19 1
vite.config.js
in src/components/preview
 16 1
cli.js
in src
 21 1
Files With Long Lines (Top 12)

There are 12 files with lines longer than 120 characters. In total, there are 24 long lines.

File# lines# units# long lines
spinner.js
in src/components/generate
 86 1 4
svelte
Toggle.svelte
in src/components/preview/playground
 43 - 3
svelte
TextInput.svelte
in src/components/preview/playground
 61 - 3
svelte
Select.svelte
in src/components/preview/playground
 49 - 2
svelte
Spinner.svelte
in src/components/preview/playground
 42 - 2
svelte
Checkbox.svelte
in src/components/preview/playground
 40 - 2
svelte
Label.svelte
in src/components/preview/playground
 48 - 2
svelte
Radio.svelte
in src/components/preview/playground
 70 - 2
typography.js
in src/source/generate
 51 1 1
select.js
in src/components/generate
 91 1 1
svelte
Copy.svelte
in src/components/preview/playground/lib/icons
 14 - 1
svelte
Moon.svelte
in src/components/preview/playground/lib/icons
 14 - 1
Correlations

File Size vs. Commits (all time): 61 points

src/vite/index.js x: 2 commits (all time) y: 5 lines of code src/vite/interactive-style-library.js x: 1 commits (all time) y: 157 lines of code scripts/build-indexes.js x: 9 commits (all time) y: 77 lines of code src/components/preview/headline-numeric.html x: 2 commits (all time) y: 205 lines of code src/components/preview/index.html x: 6 commits (all time) y: 25 lines of code src/source/generate/font-faces.js x: 2 commits (all time) y: 393 lines of code src/vite/purge-unused-css.js x: 5 commits (all time) y: 75 lines of code src/visuals/figma-party-spec.yaml x: 2 commits (all time) y: 111 lines of code src/source/generate/breakpoints.js x: 6 commits (all time) y: 28 lines of code src/source/generate/typography.js x: 5 commits (all time) y: 51 lines of code src/visuals/style-writer.js x: 2 commits (all time) y: 119 lines of code src/source/generate/palette.js x: 6 commits (all time) y: 32 lines of code src/components/preview/App.svelte x: 5 commits (all time) y: 157 lines of code src/components/preview/playground/lib/ComponentPage.svelte x: 2 commits (all time) y: 159 lines of code src/components/preview/playground/lib/ModifiersTable.svelte x: 2 commits (all time) y: 117 lines of code src/components/preview/playground/lib/Sidebar.svelte x: 2 commits (all time) y: 123 lines of code src/visuals/generate/charts-css-scss.js x: 5 commits (all time) y: 203 lines of code src/components/generate/toggle.js x: 3 commits (all time) y: 64 lines of code src/components/preview/playground/Button.svelte x: 4 commits (all time) y: 87 lines of code src/components/preview/playground/Checkbox.svelte x: 3 commits (all time) y: 40 lines of code src/components/preview/playground/Label.svelte x: 4 commits (all time) y: 48 lines of code src/components/preview/playground/Radio.svelte x: 3 commits (all time) y: 70 lines of code src/components/preview/playground/Select.svelte x: 6 commits (all time) y: 49 lines of code src/components/preview/playground/Spinner.svelte x: 3 commits (all time) y: 42 lines of code src/components/preview/playground/TextInput.svelte x: 4 commits (all time) y: 61 lines of code src/components/preview/playground/Toggle.svelte x: 4 commits (all time) y: 43 lines of code src/components/preview/playground/lib/CodeBlock.svelte x: 2 commits (all time) y: 66 lines of code src/components/preview/playground/lib/ExternalLink.svelte x: 1 commits (all time) y: 27 lines of code src/components/preview/playground/lib/Option.svelte x: 1 commits (all time) y: 25 lines of code src/components/preview/playground/lib/Variant.svelte x: 4 commits (all time) y: 58 lines of code src/components/preview/playground/lib/icons/Copy.svelte x: 1 commits (all time) y: 14 lines of code src/components/preview/vite.config.js x: 2 commits (all time) y: 16 lines of code src/visuals/generate/colors-css-scss.js x: 6 commits (all time) y: 200 lines of code src/visuals/generate/colors-js.js x: 5 commits (all time) y: 89 lines of code src/visuals/generate/parties-css-scss.js x: 1 commits (all time) y: 59 lines of code src/visuals/generate/parties-js.js x: 1 commits (all time) y: 33 lines of code src/components/preview/playground/lib/ComponentPlayground.svelte x: 3 commits (all time) y: 83 lines of code src/components/generate/select.js x: 7 commits (all time) y: 91 lines of code src/components/common.js x: 4 commits (all time) y: 117 lines of code src/components/generate/label.js x: 5 commits (all time) y: 28 lines of code src/components/generate/text-input.js x: 5 commits (all time) y: 41 lines of code src/components/preview/playground/Icon.svelte x: 2 commits (all time) y: 195 lines of code src/components/generate/checkbox.js x: 5 commits (all time) y: 68 lines of code src/components/preview/main.js x: 1 commits (all time) y: 3 lines of code src/components/preview/playground/lib/shiki.js x: 1 commits (all time) y: 19 lines of code scripts/build-watch.js x: 2 commits (all time) y: 47 lines of code src/components/generate/icons.js x: 4 commits (all time) y: 90 lines of code src/source/generate/mq-mixin.js x: 3 commits (all time) y: 23 lines of code src/visuals/generate/charts-js.js x: 4 commits (all time) y: 41 lines of code src/cli.js x: 1 commits (all time) y: 21 lines of code src/utils.js x: 7 commits (all time) y: 70 lines of code src/visuals/figma-chart-spec.yaml x: 3 commits (all time) y: 151 lines of code src/visuals/common.js x: 2 commits (all time) y: 36 lines of code src/visuals/constants.js x: 1 commits (all time) y: 2 lines of code src/visuals/figma-color-spec.yaml x: 1 commits (all time) y: 639 lines of code
639.0
lines of code
  min: 2.0
  average: 84.1
  25th percentile: 30.0
  median: 58.0
  75th percentile: 101.0
  max: 639.0
0 9.0
commits (all time)
min: 1.0 | average: 3.26 | 25th percentile: 2.0 | median: 3.0 | 75th percentile: 5.0 | max: 9.0

File Size vs. Contributors (all time): 61 points

src/vite/index.js x: 1 contributors (all time) y: 5 lines of code src/vite/interactive-style-library.js x: 1 contributors (all time) y: 157 lines of code scripts/build-indexes.js x: 1 contributors (all time) y: 77 lines of code src/components/preview/headline-numeric.html x: 1 contributors (all time) y: 205 lines of code src/components/preview/index.html x: 1 contributors (all time) y: 25 lines of code src/source/generate/font-faces.js x: 1 contributors (all time) y: 393 lines of code src/vite/purge-unused-css.js x: 1 contributors (all time) y: 75 lines of code src/visuals/figma-party-spec.yaml x: 1 contributors (all time) y: 111 lines of code src/source/generate/breakpoints.js x: 1 contributors (all time) y: 28 lines of code src/source/generate/typography.js x: 1 contributors (all time) y: 51 lines of code src/visuals/style-writer.js x: 1 contributors (all time) y: 119 lines of code src/source/generate/palette.js x: 1 contributors (all time) y: 32 lines of code src/components/preview/playground/lib/ComponentPage.svelte x: 1 contributors (all time) y: 159 lines of code src/components/preview/playground/lib/ModifiersTable.svelte x: 1 contributors (all time) y: 117 lines of code src/components/preview/playground/lib/Sidebar.svelte x: 1 contributors (all time) y: 123 lines of code src/visuals/generate/charts-css-scss.js x: 1 contributors (all time) y: 203 lines of code src/components/generate/toggle.js x: 1 contributors (all time) y: 64 lines of code src/components/preview/playground/Button.svelte x: 1 contributors (all time) y: 87 lines of code src/components/preview/playground/Checkbox.svelte x: 1 contributors (all time) y: 40 lines of code src/components/preview/playground/Label.svelte x: 1 contributors (all time) y: 48 lines of code src/components/preview/playground/Radio.svelte x: 1 contributors (all time) y: 70 lines of code src/components/preview/playground/Spinner.svelte x: 1 contributors (all time) y: 42 lines of code src/components/preview/playground/TextInput.svelte x: 1 contributors (all time) y: 61 lines of code src/components/preview/playground/Toggle.svelte x: 1 contributors (all time) y: 43 lines of code src/components/preview/playground/lib/CodeBlock.svelte x: 1 contributors (all time) y: 66 lines of code src/components/preview/playground/lib/ExternalLink.svelte x: 1 contributors (all time) y: 27 lines of code src/components/preview/playground/lib/Variant.svelte x: 1 contributors (all time) y: 58 lines of code src/components/preview/playground/lib/icons/Copy.svelte x: 1 contributors (all time) y: 14 lines of code src/components/preview/vite.config.js x: 1 contributors (all time) y: 16 lines of code src/visuals/generate/colors-css-scss.js x: 1 contributors (all time) y: 200 lines of code src/visuals/generate/colors-js.js x: 1 contributors (all time) y: 89 lines of code src/visuals/generate/parties-js.js x: 1 contributors (all time) y: 33 lines of code src/components/preview/playground/lib/ComponentPlayground.svelte x: 1 contributors (all time) y: 83 lines of code src/components/generate/select.js x: 1 contributors (all time) y: 91 lines of code src/components/preview/playground/Icon.svelte x: 1 contributors (all time) y: 195 lines of code src/components/preview/playground/lib/shiki.js x: 1 contributors (all time) y: 19 lines of code scripts/build-watch.js x: 1 contributors (all time) y: 47 lines of code src/cli.js x: 1 contributors (all time) y: 21 lines of code src/visuals/figma-chart-spec.yaml x: 1 contributors (all time) y: 151 lines of code src/visuals/common.js x: 1 contributors (all time) y: 36 lines of code src/visuals/constants.js x: 1 contributors (all time) y: 2 lines of code src/visuals/figma-color-spec.yaml x: 1 contributors (all time) y: 639 lines of code
639.0
lines of code
  min: 2.0
  average: 84.1
  25th percentile: 30.0
  median: 58.0
  75th percentile: 101.0
  max: 639.0
0 1.0
contributors (all time)
min: 1.0 | average: 1.0 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.0 | max: 1.0

File Size vs. Commits (30 days): 0 points

No data for "commits (30d)" vs. "lines of code".

File Size vs. Contributors (30 days): 0 points

No data for "contributors (30d)" vs. "lines of code".

File Size vs. Commits (90 days): 7 points

src/vite/index.js x: 1 commits (90d) y: 5 lines of code src/vite/interactive-style-library.js x: 1 commits (90d) y: 157 lines of code scripts/build-indexes.js x: 1 commits (90d) y: 77 lines of code src/components/preview/headline-numeric.html x: 1 commits (90d) y: 205 lines of code src/components/preview/index.html x: 1 commits (90d) y: 25 lines of code src/source/generate/font-faces.js x: 1 commits (90d) y: 393 lines of code src/vite/purge-unused-css.js x: 1 commits (90d) y: 75 lines of code
393.0
lines of code
  min: 5.0
  average: 133.86
  25th percentile: 25.0
  median: 77.0
  75th percentile: 205.0
  max: 393.0
0 1.0
commits (90d)
min: 1.0 | average: 1.0 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.0 | max: 1.0

File Size vs. Contributors (90 days): 7 points

src/vite/index.js x: 1 contributors (90d) y: 5 lines of code src/vite/interactive-style-library.js x: 1 contributors (90d) y: 157 lines of code scripts/build-indexes.js x: 1 contributors (90d) y: 77 lines of code src/components/preview/headline-numeric.html x: 1 contributors (90d) y: 205 lines of code src/components/preview/index.html x: 1 contributors (90d) y: 25 lines of code src/source/generate/font-faces.js x: 1 contributors (90d) y: 393 lines of code src/vite/purge-unused-css.js x: 1 contributors (90d) y: 75 lines of code
393.0
lines of code
  min: 5.0
  average: 133.86
  25th percentile: 25.0
  median: 77.0
  75th percentile: 205.0
  max: 393.0
0 1.0
contributors (90d)
min: 1.0 | average: 1.0 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.0 | max: 1.0
About This Analysis
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...