@imfusion/web-ui 0.8.1-dev.2.g74f81c31 → 0.8.1-dev.20.g50b02289

package/src/llms/skills/imf-web-ui-user-profile/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: imf-web-ui-user-profile
+description:
+  "Read or create the person's profile: technical background, experience, how they want things explained, and how they like
+  to work. Invoke it first in every Web UI skill, and when the person asks to change their profile or how the agent explains
+  or paces work."
+user-invocable: false
+allowed-tools: Bash Read Write
+---
+
+# Fit the work to the person
+
+The profile records who the person is and how they learn, so every Web UI workflow explains what they need and paces the work
+the way they like. Read it once per session; later skills in the same session reuse what is already loaded.
+
+## Read the profile
+
+Resolve the profile path with the shell, then read that exact path:
+
+```sh
+printf '%s\n' "${XDG_CONFIG_HOME:-$HOME/.config}/imfusion/web-ui/consumer-profile.md"
+```
+
+The profile sits outside the project: it belongs to the person, never to the repository, so read-only promises such as the
+audit's still hold when this skill writes it.
+
+When the file exists, apply it and return to the calling workflow without comment. When it is missing, run the interview
+before the workflow starts. When the router skips companions for a small task, do the task first and offer the interview
+afterwards.
+
+## Interview
+
+Open with one question: may you ask six short questions and save the answers to the profile path, so every later workflow
+fits them and they are never asked again? Mention that they can decline any single question. On no, use the defaults below
+for this session and do not offer the interview again in it.
+
+On yes, ask one question per message, in plain prose, and wait for each answer:
+
+1. What is your name?
+2. What is your technical background: the languages and tools you work with?
+3. How much have you built for the web, for example with React, HTML, and CSS?
+4. Beyond Git, how comfortable are you with npm and the terminal?
+5. How much explanation do you want: just the results, a short gloss for new terms, or the reasoning behind each step?
+6. How do you like to work: pause after every step, pause after each finished piece, or work freely and stop only before a
+   commit?
+
+Derive the levels from the answers; ask a short follow-up only when an answer fits no level. The person can decline any
+question: its field stays out of the file, and its default applies: `some`, `comfortable`, `terms`, `slice`.
+
+## The file
+
+Show the profile below before writing it. The person can correct or remove any line, or reject the whole profile; on a
+rejection, save nothing and use the defaults for this session. After they confirm, write it and name its path so they can
+edit or delete it later:
+
+```markdown
+---
+name: <their name>
+frontend: none | some | seasoned
+tooling: new | comfortable
+explanation: results | terms | reasoning
+pace: step | slice | commit
+---
+
+## Background
+
+<their answer to question 2, in their words>
+
+## Notes
+
+- <lasting preferences learned later>
+```
+
+When the write fails, keep the answers for this session. When the person later states a lasting preference about how to work
+with them, such as a language, a term they want avoided, or a tool they already know, add it under `Notes` and tell them.
+When they ask to change their profile, run the interview again with the current answers as defaults.
+
+## Apply the profile
+
+The fields apply independently.
+
+- **Name**: address the person by name.
+- **Background**: explain by analogy to what they already know, such as a component compared to a class for a Java developer.
+- **Frontend `none` or `some`**: give a one-line gloss the first time a frontend term appears, such as component, prop,
+  design token, CSS layer, or Storybook. For `none`, also say what a finding means for the running app.
+- **Tooling `new`**: gloss tooling terms on first use, such as lockfile, dist-tag, prerelease, hook, harness, or the
+  `AGENTS.md` fence; say in one plain sentence what each command does before it runs, read-only checks included; and before
+  an approval question, say what yes changes and how to undo it.
+- **Explanation**: `results` adds nothing beyond what the experience levels call for; `terms` glosses every new term;
+  `reasoning` also says why each step happens, and after a report block, what happened and what comes next.
+- **Pace**: `step` ends the reply after each step or phase of the calling workflow and waits for a go-ahead; `slice` pauses
+  after each working piece; `commit` runs freely between the workflow's own approval points.
+
+Pace adds pauses on top of the calling workflow's approval gates and keeps every one of them. Put explanations around report
+blocks and approval questions, never inside them.

package/src/llms/skills/imf-web-ui-ux/SKILL.md

@@ -10,6 +10,8 @@ description:
 Use this skill for screen-level decisions. Verify component APIs with `imf-web-ui-components`; put code and styling rules in
 `imf-web-ui-conventions`.
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 The identity index marks components as stable or experimental. Experimental components are usable, but prefer wrapping one
 when it is used across many call sites so API movement stays local.
 

package/dist/tabs-BS6rqrrA.js

@@ -1,398 +0,0 @@
-import { t as e } from "./chunk-DmhlhrBa.js";
-import { cva as t } from "class-variance-authority";
-import { jsx as n } from "react/jsx-runtime";
-import { Children as r, useCallback as i } from "react";
-import { Slider as a } from "@base-ui/react/slider";
-import { Switch as o } from "@base-ui/react/switch";
-import { Toggle as s } from "@base-ui/react/toggle";
-import { ToggleGroup as c } from "@base-ui/react/toggle-group";
-import { Tabs as l } from "@base-ui/react/tabs";
-//#region src/utils/resolve-state-props.ts
-function u(e, t) {
-	return e instanceof Function ? e(t) : e;
-}
-function d(e, t) {
-	return u(e, t);
-}
-function f(e, t) {
-	return u(e, t);
-}
-var p = {
-	control: "imf-ui-slider-module-control",
-	indicator: "imf-ui-slider-module-indicator",
-	label: "imf-ui-slider-module-label",
-	root: "imf-ui-slider-module-root",
-	thumb: "imf-ui-slider-module-thumb",
-	track: "imf-ui-slider-module-track",
-	value: "imf-ui-slider-module-value"
-}, m = /* @__PURE__ */ e({
-	Control: () => w,
-	Indicator: () => E,
-	Label: () => S,
-	Root: () => x,
-	Thumb: () => D,
-	Track: () => T,
-	Value: () => C
-}), ee = t(p.root), h = t(p.label), g = t(p.value), _ = t(p.control), v = t(p.track), y = t(p.indicator), b = t(p.thumb);
-function x({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: i, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: u = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, ...b }) {
-	return /* @__PURE__ */ n(a.Root, {
-		...b,
-		"data-imf-ui-component": "Slider.Root",
-		"data-orientation": p,
-		className: (e) => ee({ className: d(b.className, e) }),
-		value: e,
-		defaultValue: t,
-		onValueChange: r,
-		onValueCommitted: i,
-		min: o,
-		max: s,
-		step: c,
-		largeStep: l,
-		minStepsBetweenValues: u,
-		disabled: f,
-		orientation: p,
-		name: m,
-		form: h,
-		locale: g,
-		thumbAlignment: _,
-		thumbCollisionBehavior: v,
-		format: y
-	});
-}
-x.displayName = "Slider.Root";
-function S(e) {
-	return /* @__PURE__ */ n(a.Label, {
-		...e,
-		"data-imf-ui-component": "Slider.Label",
-		className: (t) => h({ className: d(e.className, t) })
-	});
-}
-S.displayName = "Slider.Label";
-function C({ children: e, ...t }) {
-	return /* @__PURE__ */ n(a.Value, {
-		...t,
-		"data-imf-ui-component": "Slider.Value",
-		className: (e) => g({ className: d(t.className, e) }),
-		children: e
-	});
-}
-C.displayName = "Slider.Value";
-function w(e) {
-	return /* @__PURE__ */ n(a.Control, {
-		...e,
-		"data-imf-ui-component": "Slider.Control",
-		className: (t) => _({ className: d(e.className, t) })
-	});
-}
-w.displayName = "Slider.Control";
-function T(e) {
-	return /* @__PURE__ */ n(a.Track, {
-		...e,
-		"data-imf-ui-component": "Slider.Track",
-		className: (t) => v({ className: d(e.className, t) })
-	});
-}
-T.displayName = "Slider.Track";
-function E(e) {
-	return /* @__PURE__ */ n(a.Indicator, {
-		...e,
-		"data-imf-ui-component": "Slider.Indicator",
-		className: (t) => y({ className: d(e.className, t) })
-	});
-}
-E.displayName = "Slider.Indicator";
-function D({ index: e, ...t }) {
-	return /* @__PURE__ */ n(a.Thumb, {
-		...t,
-		"data-imf-ui-component": "Slider.Thumb",
-		className: (e) => b({ className: d(t.className, e) }),
-		index: e
-	});
-}
-D.displayName = "Slider.Thumb";
-var O = {
-	root: "imf-ui-switch-module-root",
-	thumb: "imf-ui-switch-module-thumb"
-}, te = /* @__PURE__ */ e({
-	Root: () => A,
-	Thumb: () => j
-}), ne = t(O.root), k = t(O.thumb);
-function A(e) {
-	return /* @__PURE__ */ n(o.Root, {
-		...e,
-		"data-imf-ui-component": "Switch.Root",
-		className: (t) => ne({ className: d(e.className, t) })
-	});
-}
-A.displayName = "Switch.Root";
-function j(e) {
-	return /* @__PURE__ */ n(o.Thumb, {
-		...e,
-		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => k({ className: d(e.className, t) })
-	});
-}
-j.displayName = "Switch.Thumb";
-//#endregion
-//#region src/components/toggle/toggle.tsx
-var M = t({ root: "imf-ui-toggle-module-root" }.root), N = 2;
-function P(e) {
-	let t = 0;
-	return r.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += N);
-	}), t;
-}
-function F({ style: e, children: t, ...r }) {
-	let i = {
-		"--glyph-count": P(t),
-		"--max-glyphs": N
-	};
-	return /* @__PURE__ */ n(s, {
-		...r,
-		"data-imf-ui-component": "Toggle",
-		style: (t) => ({
-			...i,
-			...f(e, t)
-		}),
-		className: (e) => M({ className: d(r.className, e) }),
-		children: t
-	});
-}
-//#endregion
-//#region src/components/toggle-group/toggle-group.tsx
-var I = t({ root: "imf-ui-toggle-group-module-root" }.root);
-function L(e) {
-	return /* @__PURE__ */ n(c, {
-		...e,
-		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => I({ className: d(e.className, t) })
-	});
-}
-var R = {
-	alignCenter: "imf-ui-row-module-alignCenter",
-	alignEnd: "imf-ui-row-module-alignEnd",
-	alignStart: "imf-ui-row-module-alignStart",
-	alignStretch: "imf-ui-row-module-alignStretch",
-	gap1: "imf-ui-row-module-gap1",
-	gap10: "imf-ui-row-module-gap10",
-	gap2: "imf-ui-row-module-gap2",
-	gap3: "imf-ui-row-module-gap3",
-	gap4: "imf-ui-row-module-gap4",
-	gap5: "imf-ui-row-module-gap5",
-	gap6: "imf-ui-row-module-gap6",
-	gap7: "imf-ui-row-module-gap7",
-	gap8: "imf-ui-row-module-gap8",
-	gap9: "imf-ui-row-module-gap9",
-	justifyAround: "imf-ui-row-module-justifyAround",
-	justifyBetween: "imf-ui-row-module-justifyBetween",
-	justifyCenter: "imf-ui-row-module-justifyCenter",
-	justifyEnd: "imf-ui-row-module-justifyEnd",
-	justifyEvenly: "imf-ui-row-module-justifyEvenly",
-	justifyStart: "imf-ui-row-module-justifyStart",
-	root: "imf-ui-row-module-root",
-	wrap: "imf-ui-row-module-wrap"
-}, z = t(R.root, { variants: {
-	gap: {
-		1: R.gap1,
-		2: R.gap2,
-		3: R.gap3,
-		4: R.gap4,
-		5: R.gap5,
-		6: R.gap6,
-		7: R.gap7,
-		8: R.gap8,
-		9: R.gap9,
-		10: R.gap10
-	},
-	align: {
-		start: R.alignStart,
-		center: R.alignCenter,
-		end: R.alignEnd,
-		stretch: R.alignStretch
-	},
-	justify: {
-		start: R.justifyStart,
-		center: R.justifyCenter,
-		end: R.justifyEnd,
-		between: R.justifyBetween,
-		around: R.justifyAround,
-		evenly: R.justifyEvenly
-	},
-	wrap: {
-		true: R.wrap,
-		false: null
-	}
-} });
-function B({ gap: e = "2", align: t = "stretch", justify: r = "start", wrap: i = !1, ...a }) {
-	return /* @__PURE__ */ n("div", {
-		...a,
-		"data-imf-ui-component": "Row",
-		className: z({
-			gap: e,
-			align: t,
-			justify: r,
-			wrap: i,
-			className: a.className
-		})
-	});
-}
-var V = {
-	alignCenter: "imf-ui-stack-module-alignCenter",
-	alignEnd: "imf-ui-stack-module-alignEnd",
-	alignStart: "imf-ui-stack-module-alignStart",
-	alignStretch: "imf-ui-stack-module-alignStretch",
-	gap0: "imf-ui-stack-module-gap0",
-	gap1: "imf-ui-stack-module-gap1",
-	gap10: "imf-ui-stack-module-gap10",
-	gap2: "imf-ui-stack-module-gap2",
-	gap3: "imf-ui-stack-module-gap3",
-	gap4: "imf-ui-stack-module-gap4",
-	gap5: "imf-ui-stack-module-gap5",
-	gap6: "imf-ui-stack-module-gap6",
-	gap7: "imf-ui-stack-module-gap7",
-	gap8: "imf-ui-stack-module-gap8",
-	gap9: "imf-ui-stack-module-gap9",
-	justifyAround: "imf-ui-stack-module-justifyAround",
-	justifyBetween: "imf-ui-stack-module-justifyBetween",
-	justifyCenter: "imf-ui-stack-module-justifyCenter",
-	justifyEnd: "imf-ui-stack-module-justifyEnd",
-	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
-	justifyStart: "imf-ui-stack-module-justifyStart",
-	root: "imf-ui-stack-module-root"
-}, H = t(V.root, { variants: {
-	gap: {
-		0: V.gap0,
-		1: V.gap1,
-		2: V.gap2,
-		3: V.gap3,
-		4: V.gap4,
-		5: V.gap5,
-		6: V.gap6,
-		7: V.gap7,
-		8: V.gap8,
-		9: V.gap9,
-		10: V.gap10
-	},
-	align: {
-		start: V.alignStart,
-		center: V.alignCenter,
-		end: V.alignEnd,
-		stretch: V.alignStretch
-	},
-	justify: {
-		start: V.justifyStart,
-		center: V.justifyCenter,
-		end: V.justifyEnd,
-		between: V.justifyBetween,
-		around: V.justifyAround,
-		evenly: V.justifyEvenly
-	}
-} });
-function U({ gap: e = "4", align: t = "stretch", justify: r = "start", ...i }) {
-	return /* @__PURE__ */ n("div", {
-		...i,
-		"data-imf-ui-component": "Stack",
-		className: H({
-			gap: e,
-			align: t,
-			justify: r,
-			className: i.className
-		})
-	});
-}
-var W = {
-	indicator: "imf-ui-tabs-module-indicator",
-	list: "imf-ui-tabs-module-list",
-	listFill: "imf-ui-tabs-module-listFill",
-	panel: "imf-ui-tabs-module-panel",
-	panelViewport: "imf-ui-tabs-module-panelViewport",
-	root: "imf-ui-tabs-module-root",
-	tab: "imf-ui-tabs-module-tab"
-}, G = /* @__PURE__ */ e({
-	Indicator: () => Z,
-	List: () => Y,
-	Panel: () => $,
-	PanelViewport: () => Q,
-	Root: () => J,
-	Tab: () => X
-}), K = t(W.list, { variants: { fill: {
-	true: W.listFill,
-	false: null
-} } }), re = t(W.root), ie = t(W.tab), ae = t(W.indicator), oe = t(W.panelViewport), se = t(W.panel);
-function q(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-function ce(e) {
-	let t = new ResizeObserver(() => {
-		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
-		e.toggleAttribute("data-overflowing", t);
-	}), n = () => {
-		t.disconnect(), t.observe(e);
-		for (let n of e.children) t.observe(n);
-	}, r = new MutationObserver(n);
-	return r.observe(e, { childList: !0 }), n(), () => {
-		t.disconnect(), r.disconnect();
-	};
-}
-function J(e) {
-	return /* @__PURE__ */ n(l.Root, {
-		...e,
-		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => re({ className: d(e.className, t) })
-	});
-}
-J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, ref: t, ...r }) {
-	let a = i((e) => {
-		if (!e) return;
-		q(t, e);
-		let n = ce(e);
-		return () => {
-			n(), q(t, null);
-		};
-	}, [t]);
-	return /* @__PURE__ */ n(l.List, {
-		...r,
-		ref: a,
-		"data-imf-ui-component": "Tabs.List",
-		className: (t) => K({
-			fill: e,
-			className: d(r.className, t)
-		})
-	});
-}
-Y.displayName = "Tabs.List";
-function X(e) {
-	return /* @__PURE__ */ n(l.Tab, {
-		...e,
-		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => ie({ className: d(e.className, t) })
-	});
-}
-X.displayName = "Tabs.Tab";
-function Z(e) {
-	return /* @__PURE__ */ n(l.Indicator, {
-		...e,
-		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => ae({ className: d(e.className, t) })
-	});
-}
-Z.displayName = "Tabs.Indicator";
-function Q(e) {
-	return /* @__PURE__ */ n("div", {
-		...e,
-		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: oe({ className: e.className })
-	});
-}
-Q.displayName = "Tabs.PanelViewport";
-function $(e) {
-	return /* @__PURE__ */ n(l.Panel, {
-		...e,
-		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => se({ className: d(e.className, t) })
-	});
-}
-$.displayName = "Tabs.Panel";
-//#endregion
-export { d as C, m as S, S as _, J as a, T as b, U as c, F as d, A as f, E as g, w as h, Q as i, B as l, te as m, Y as n, X as o, j as p, $ as r, G as s, Z as t, L as u, x as v, C as x, D as y };