st-core.fscss now automates setup in the FSCSS IDE

Enabling st-core in the browser IDE no longer means hunting docs and pasting imports by hand. One terminal flow checks the package, installs helper snippets, drops a working line-chart + spider demo, compiles, and opens the preview.

Repo: fscss-ttr/st-core.fscss

Enable script: xfcmds/enable.xfcmd

Package config: package.json

IDE: fscss.devtem.org/ide · xfcmds guide

Enabling st-core in the browser IDE no longer means hunting docs and pasting imports by hand. One terminal flow checks the package, installs helper snippets, drops a working line-chart + spider demo, compiles, and opens the preview.

---

How it’s wired

In package.json:

"xfcmd": {
  "enable": "./xfcmds/enable.xfcmd",
  "disable": "./xfcmds/disable.xfcmd"
}

Plus the usual module metadata:

• name: st-core, version: 2
• fscss_version: >=1.2.3
• file.modules / remote: ./[e-mail]
• file.usage.directive: st-*
• Long helpers list (root, container, phone, chart*, spider*, stat-card, …)

When you run libon st-core (or libck st-core → yes), the IDE loads enable.xfcmd from the package and runs it top to bottom.

---

What enable.xfcmd does

1. Announce — {name}@{version}, required FSCSS range, import line
2. add snippets for helpers — one editor snippet per helper in package.json
3. Extra snippets
   • st-data — sample @arr series[...]
   • st-chart-block — chart shell + @st-chart-points
   • st-spider-block — spider shell + @st-spider-points
4. Create demo project under st-core-demo/
   • Line chart FSCSS (@st-root, sales array, fill/line/dots/grid/axis)
   • Spider / radar FSCSS (skills array, grid/spokes/fill/line/dots)
   • index.html linking both + minimal markup
5. Open → compile → preview and print next steps in the terminal

Disable only removes snippets and prints a note; it does not delete st-core-demo/ (you remove that folder yourself if you want).

---

Try it in the IDE

Ctrl+`                 # terminal
libck st-core          # report + checks
yes                    # or: libon st-core

Expect:

• Snippets for st-root, st-chart-fill, st-spider-points, …
• Files under st-core-demo/
• Preview with a weekly-style chart and a spider chart side by side

Then in any .fscss tab, type a helper name (e.g. st-chart-fill) to insert the snippet.

Selective import still works the usual way:

@import((
  st-root as root,
  st-chart-fill as area,
  st-chart-line as stroke,
  st-chart-points as points
) from st-core@v2)

---

Why this matters

Before	After
Read README, copy import, build HTML by hand	libck → yes
Guess helper names	Snippets from the real helper list
Empty workspace	Runnable chart + spider demo

Same xfcmd model any package can use: point package.json → enable / disable scripts, ship demos under a dedicated folder, keep liboff non-destructive.

---

Related

• st-core.fscss
• enable.xfcmd · package.json
• FSCSS IDE · xfcmds guide · org xfcmds

---

How it’s wired

In package.json:

"xfcmd": {
  "enable": "./xfcmds/enable.xfcmd",
  "disable": "./xfcmds/disable.xfcmd"
}

Plus the usual module metadata:

• name: st-core, version: 2
• fscss_version: >=1.2.3
• file.modules / remote: ./[e-mail]
• file.usage.directive: st-*
• Long helpers list (root, container, phone, chart*, spider*, stat-card, …)

When you run libon st-core (or libck st-core → yes), the IDE loads enable.xfcmd from the package and runs it top to bottom.

---

What enable.xfcmd does

1. Announce — {name}@{version}, required FSCSS range, import line
2. add snippets for helpers — one editor snippet per helper in package.json
3. Extra snippets
   • st-data — sample @arr series[...]
   • st-chart-block — chart shell + @st-chart-points
   • st-spider-block — spider shell + @st-spider-points
4. Create demo project under st-core-demo/
   • Line chart FSCSS (@st-root, sales array, fill/line/dots/grid/axis)
   • Spider / radar FSCSS (skills array, grid/spokes/fill/line/dots)
   • index.html linking both + minimal markup
5. Open → compile → preview and print next steps in the terminal

Disable only removes snippets and prints a note; it does not delete st-core-demo/ (you remove that folder yourself if you want).

---

Try it in the IDE

Ctrl+`                 # terminal
libck st-core          # report + checks
yes                    # or: libon st-core

Expect:

• Snippets for st-root, st-chart-fill, st-spider-points, …
• Files under st-core-demo/
• Preview with a weekly-style chart and a spider chart side by side

Then in any .fscss tab, type a helper name (e.g. st-chart-fill) to insert the snippet.

Selective import still works the usual way:

@import((
  st-root as root,
  st-chart-fill as area,
  st-chart-line as stroke,
  st-chart-points as points
) from st-core@v2)

---

Why this matters

Before	After
Read README, copy import, build HTML by hand	libck → yes
Guess helper names	Snippets from the real helper list
Empty workspace	Runnable chart + spider demo

Same xfcmd model any package can use: point package.json → enable / disable scripts, ship demos under a dedicated folder, keep liboff non-destructive.

---

Related

• st-core.fscss
• enable.xfcmd · package.json
• FSCSS IDE · xfcmds guide · org xfcmds

Open the IDE, run libck st-core, type yes, and you should land on a compiled pure-CSS chart demo without leaving the browser.