synthos 0.8.0 → 0.9.0

package/static-files/recommended-frameworks.llmd

@@ -0,0 +1,81 @@
+@recommended_frameworks
+@d3
+Use when: You need bespoke / novel interactive viz (custom axes, geo, layouts, brushing, force, etc)
+CDN:
+-JS: https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js
+Globals: d3
+Synthos / FluentLM Notes:
+-Prefer D3 for one-off, highly custom viz; avoid for simple charts (use Chart.js)
+-Keep D3 code modular: one init(), one render(data), one cleanup()
+@chartjs
+Use when: Standard charts (line/bar/pie/scatter/radar) with tooltips/legends quickly
+CDN:
+-JS: https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js
+Globals: Chart
+Synthos / FluentLM Notes:
+-UMD build is easiest for <script>-only pages
+-Prefer a single <canvas> per chart and keep config in a plain object for easy model edits
+@marked
+Use when: Render markdown to HTML (read-only views)
+CDN:
+-JS: https://cdn.jsdelivr.net/npm/marked@17.0.2/lib/marked.umd.js
+Globals: marked
+Synthos / FluentLM Notes:
+-If you're allowing <script> in content, do NOT run untrusted user markdown through marked without a safety story
+-Use marked for app-authored docs/help panes; avoid for arbitrary external markdown unless sandboxed
+@toast_ui_editor
+Use when: WYSIWYG/markdown editing (notes apps, docs, CMS-like pages)
+CDN:
+-CSS: https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor.css
+-JS: https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor.js
+Globals: toastui
+Synthos / FluentLM Notes:
+-Editor is a "big" dependency; only load when needed (lazy load pattern if possible)
+-Keep editor container sizing explicit (height) to avoid layout churn in single-page flows
+@mermaid
+Use when: Diagrams from text (flowcharts, sequence, gantt, etc.)
+CDN:
+-JS: https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.12.0/mermaid.min.js
+Globals: mermaid
+Synthos / FluentLM Notes:
+-Provide a standard render helper: renderMermaid(code, el)
+-If theme switching matters, set Mermaid theme vars at init and re-render on theme change
+@html2canvas
+Use when: Screenshots/export of DOM regions (cards, reports, receipts)
+CDN:
+-JS: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
+Globals: html2canvas
+Synthos / FluentLM Notes:
+-Expect limitations: cross-origin images, some CSS effects, video/canvas nuances
+-Offer a canonical export function (png + optional scale)
+@gsap
+Use when: Complex UI animation timelines, micro-interactions, drag/FLIP-like transitions
+CDN:
+-JS: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js
+Globals: gsap
+Synthos / FluentLM Notes:
+-LLMs tend to generate GSAP correctly because the API is consistent and imperative
+-Prefer short, named timelines; avoid deeply nested callbacks
+@dayjs
+Use when: Date/time formatting + lightweight parsing (calendars, logs, dashboards)
+CDN:
+-JS: https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.18/dayjs.min.js
+Globals: dayjs
+Synthos / FluentLM Notes:
+-Add plugins only when needed (relativeTime, duration, timezone, etc.) to keep it light
+@sortablejs
+Use when: Drag-and-drop reordering lists (kanban columns, prioritized lists)
+CDN:
+-JS: https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js
+Globals: Sortable
+Synthos / FluentLM Notes:
+-Very LLM-friendly: new Sortable(el, { ... }) pattern is easy
+-Use data-ids and re-save ordering through synthos.data.*
+@interactjs
+Use when: Resizable/draggable/freeform gestures (split panes, resizable panels, canvas-like UIs)
+CDN:
+-JS: https://cdn.jsdelivr.net/npm/interactjs@1.10.27/dist/interact.min.js
+Globals: interact
+Synthos / FluentLM Notes:
+-Heavier + more stateful than Sortable; only include when you truly need resize/gestures
+-Standardize a makeResizable(el, opts) helper so the model doesn't reinvent physics each time

package/static-files/recommended-frameworks.md

@@ -0,0 +1,137 @@
+## D3
+**Use when:** You need bespoke / novel interactive viz (custom axes, geo, layouts, brushing, force, etc).
+
+**CDN:**
+- JS: `https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js`
+
+**Globals:** `d3`
+
+**Synthos / FluentLM Notes:**
+- Prefer D3 for one-off, highly custom viz; avoid for simple charts (use Chart.js).
+- Keep D3 code modular: one `init()`, one `render(data)`, one `cleanup()`.
+
+---
+
+## Chart.js
+**Use when:** Standard charts (line/bar/pie/scatter/radar) with tooltips/legends quickly.
+
+**CDN:**
+- JS: `https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js`
+
+**Globals:** `Chart`
+
+**Synthos / FluentLM Notes:**
+- UMD build is easiest for `<script>`-only pages.
+- Prefer a single `<canvas>` per chart and keep config in a plain object for easy model edits.
+
+---
+
+## Marked
+**Use when:** Render markdown to HTML (read-only views).
+
+**CDN:**
+- JS: `https://cdn.jsdelivr.net/npm/marked@17.0.2/lib/marked.umd.js`
+
+**Globals:** `marked`
+
+**Synthos / FluentLM Notes:**
+- If you're allowing `<script>` in content, do NOT run untrusted user markdown through marked without a safety story.
+- Use marked for app-authored docs/help panes; avoid for arbitrary external markdown unless sandboxed.
+
+---
+
+## Toast UI Editor
+**Use when:** WYSIWYG/markdown editing (notes apps, docs, CMS-like pages).
+
+**CDN:**
+- CSS: `https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor.css`
+- JS: `https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor.js`
+
+**Globals:** `toastui`
+
+**Synthos / FluentLM Notes:**
+- Editor is a "big" dependency; only load when needed (lazy load pattern if possible).
+- Keep editor container sizing explicit (height) to avoid layout churn in single-page flows.
+
+---
+
+## Mermaid
+**Use when:** Diagrams from text (flowcharts, sequence, gantt, etc.).
+
+**CDN:**
+- JS: `https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.12.0/mermaid.min.js`
+
+**Globals:** `mermaid`
+
+**Synthos / FluentLM Notes:**
+- Provide a standard render helper: `renderMermaid(code, el)`.
+- If theme switching matters, set Mermaid theme vars at init and re-render on theme change.
+
+---
+
+## html2canvas
+**Use when:** Screenshots/export of DOM regions (cards, reports, receipts).
+
+**CDN:**
+- JS: `https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js`
+
+**Globals:** `html2canvas`
+
+**Synthos / FluentLM Notes:**
+- Expect limitations: cross-origin images, some CSS effects, video/canvas nuances.
+- Offer a canonical export function (png + optional scale).
+
+---
+
+## GSAP
+**Use when:** Complex UI animation timelines, micro-interactions, drag/FLIP-like transitions.
+
+**CDN:**
+- JS: `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js`
+
+**Globals:** `gsap`
+
+**Synthos / FluentLM Notes:**
+- LLMs tend to generate GSAP correctly because the API is consistent and imperative.
+- Prefer short, named timelines; avoid deeply nested callbacks.
+
+---
+
+## Day.js
+**Use when:** Date/time formatting + lightweight parsing (calendars, logs, dashboards).
+
+**CDN:**
+- JS: `https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.18/dayjs.min.js`
+
+**Globals:** `dayjs`
+
+**Synthos / FluentLM Notes:**
+- Add plugins only when needed (relativeTime, duration, timezone, etc.) to keep it light.
+
+---
+
+## SortableJS
+**Use when:** Drag-and-drop reordering lists (kanban columns, prioritized lists).
+
+**CDN:**
+- JS: `https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js`
+
+**Globals:** `Sortable`
+
+**Synthos / FluentLM Notes:**
+- Very LLM-friendly: `new Sortable(el, { … })` pattern is easy.
+- Use data-ids and re-save ordering through `synthos.data.*`.
+
+---
+
+## Interact.js
+**Use when:** Resizable/draggable/freeform gestures (split panes, resizable panels, canvas-like UIs).
+
+**CDN:**
+- JS: `https://cdn.jsdelivr.net/npm/interactjs@1.10.27/dist/interact.min.js`
+
+**Globals:** `interact`
+
+**Synthos / FluentLM Notes:**
+- Heavier + more stateful than Sortable; only include when you truly need resize/gestures.
+- Standardize a `makeResizable(el, opts)` helper so the model doesn't reinvent physics each time.