@compilr-dev/sdk 0.17.9 → 0.17.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -47,12 +47,14 @@ export const canvasSkill = defineSkill({
|
|
|
47
47
|
- Make it look intentional: a clear grid, strong type scale, generous spacing. Use \`var(--canvas-accent)\` sparingly for emphasis. Prefer inline SVG for shapes/charts/icons (fill/stroke with the theme vars).
|
|
48
48
|
- For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
|
|
49
49
|
|
|
50
|
-
3. **Add a Tweaks controls manifest when it helps** (the \`controls\` argument). Each control is \`{ type, param, label, default, …type config }\` where type ∈ slider | number | toggle | select | color | text.
|
|
51
|
-
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
3. **Add a Tweaks controls manifest when it helps** (the \`controls\` argument). Each control is \`{ type, param, label, default, …type config }\` where type ∈ slider | number | toggle | select | color | text.
|
|
51
|
+
- **⚠️ EVERY control you declare MUST be bound in the HTML — a declared-but-unbound control is a dead knob that visibly does nothing when the user drags it. Declaring the control is only half the job; you MUST also reference its param.** Bind each param one of these ways:
|
|
52
|
+
- CSS custom property (most common): use \`var(--param)\` directly in your styles — e.g. a \`headline\` slider means \`font-size: var(--headline)\` (NOT a literal \`48px\`), an \`accent\` color means \`color: var(--accent)\`. The host sets \`--param\` on the root and updates it live. Include a unit in the CSS if the raw value is a number: \`font-size: calc(var(--headline) * 1px)\`.
|
|
53
|
+
- Text binding: \`<span data-bind="param"></span>\` — its text is replaced with the value.
|
|
54
|
+
- Visibility: \`[data-show="param"]\` — shown/hidden by a toggle's value.
|
|
55
|
+
- Computed: define \`window.applyParams(values)\` in a \`<script>\` and read \`values.param\` for anything the three declarative ways can't express.
|
|
56
|
+
- Give every canvas at least 2–4 sensible controls (accent color, a headline size slider, a toggle to show/hide a section). Seed \`default\` values that MATCH what you authored (a slider default of 48 means the HTML's initial \`var(--headline)\` should read 48).
|
|
57
|
+
- **Before finishing, re-check: is each control's \`param\` actually referenced in the HTML?** If not, either bind it or drop the control — never ship a dead knob.
|
|
56
58
|
|
|
57
59
|
4. **To EDIT an existing canvas, do NOT re-send the whole document.** First call \`canvas_get\` with \`outline=true\` (or a \`startLine\`/\`maxLines\` slice) to find the exact snippet, then \`canvas_edit\` with \`operation=str_replace\` (old_str must be unique — include surrounding context — or set replace_all=true), or append/prepend. Reserve \`canvas_write\` with \`canvas_id\` for a full intentional rewrite.
|
|
58
60
|
|