@kernel4632/kima 0.0.0-stage → 0.6.0

package/dist/vue/utils/remote-options.js

@@ -0,0 +1,65 @@
+import { onBeforeUnmount as e, ref as t, watch as n } from "vue";
+// src/utils/remote-options.js
+function r(r, i, a, o, s) {
+	let c = t([]), l = t(!1), u = t(""), d = null, f = null, p = 0;
+	function m() {
+		clearTimeout(d), d = null, f?.abort(), f = null;
+	}
+	async function h(e, t) {
+		let n = r.value;
+		if (typeof n != "function") return;
+		f = new AbortController();
+		let i = f.signal;
+		l.value = !0, u.value = "", s?.("options-loading", { search: e });
+		let a = Math.max(0, Number(o.value) || 0) + 1;
+		try {
+			let r, o;
+			for (let s = 0; s < a; s += 1) {
+				if (i.aborted || t !== p) return;
+				try {
+					r = await n(e, { signal: i }), o = null;
+					break;
+				} catch (e) {
+					if (o = e, i.aborted || t !== p) return;
+				}
+			}
+			if (o) throw o;
+			if (i.aborted || t !== p) return;
+			let l = Array.isArray(r) ? r : Array.isArray(r?.items) ? r.items : [];
+			c.value = l, s?.("options-load", {
+				search: e,
+				items: l
+			});
+		} catch (n) {
+			if (i.aborted || t !== p) return;
+			u.value = n?.message || "选项加载失败", c.value = [], s?.("options-error", {
+				search: e,
+				error: n
+			});
+		} finally {
+			t === p && (l.value = !1, f = null);
+		}
+	}
+	function g(e = !1) {
+		if (m(), typeof r.value != "function") {
+			l.value = !1, u.value = "", c.value = [];
+			return;
+		}
+		let t = ++p, n = String(i.value ?? ""), o = e ? 0 : Math.max(0, Number(a.value) || 0);
+		d = setTimeout(() => {
+			d = null, h(n, t);
+		}, o);
+	}
+	function _() {
+		g(!0);
+	}
+	return n([r, i], () => g(), { immediate: !0 }), e(() => {
+		p += 1, m();
+	}), {
+		items: c,
+		loading: l,
+		error: u,
+		retry: _
+	};
+}
+export { r as useRemoteOptions };

package/dist/vue/utils/ripple.js

@@ -0,0 +1,20 @@
+import { onBeforeUnmount as e, onMounted as t } from "vue";
+// src/utils/ripple.js
+function n(n) {
+	let r = null;
+	function i(e) {
+		if (!r || e.button !== 0 || r.matches(":disabled, [aria-disabled='true']")) return;
+		let t = getComputedStyle(r).position;
+		if (t !== "relative" && t !== "absolute" && t !== "fixed") return;
+		let n = document.createElement("span");
+		n.className = "kima-ripple";
+		let i = () => {
+			n.getAnimations().some((e) => e.playState === "running") || n.remove();
+		};
+		n.addEventListener("animationend", i), setTimeout(i, 700), r.append(n);
+	}
+	t(() => {
+		r = n.value, r?.addEventListener("pointerdown", i);
+	}), e(() => r?.removeEventListener("pointerdown", i));
+}
+export { n as useRipple };

package/dist/vue/utils/scoped-slots.js

@@ -0,0 +1,22 @@
+import { getCurrentInstance as e, useHost as t } from "vue";
+// src/utils/scoped-slots.js
+function n() {
+	let n = !!e()?.ce, r = n ? t() : null, i = r ? Object.values(r._slots || {}).flat() : [];
+	if (r && !r.__kimaScopedOutlets) {
+		r.__kimaScopedOutlets = !0;
+		let e = r._getSlots;
+		r._getSlots = function() {
+			return e.call(this).filter((e) => {
+				for (let t = e.parentElement; t; t = t.parentElement) if (t.localName.startsWith("kima-")) return t === r;
+				return !1;
+			});
+		};
+	}
+	return {
+		native: n,
+		vOutlet: { mounted(e, t) {
+			for (let n of i) (n.nodeType === 1 && n.getAttribute("slot") || "default") === (t.value || "default") && e.append(n);
+		} }
+	};
+}
+export { n as useScopedSlots };

package/dist/vue/utils/shell.js

@@ -0,0 +1,43 @@
+import { computed as e, getCurrentInstance as t, onBeforeUnmount as n, onMounted as r, ref as i, shallowRef as a, useHost as o, watch as s } from "vue";
+// src/utils/shell.js
+function c(n, r, i) {
+	let c = t(), l = c?.ce ? o() : null, u = a(n[r]), d = r.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), f = () => !l && (Object.hasOwn(c.vnode.props || {}, r) || Object.hasOwn(c.vnode.props || {}, d));
+	s(() => n[r], (e) => {
+		u.value = e;
+	});
+	let p = e(() => f() ? n[r] : u.value);
+	function m(e) {
+		Object.is(p.value, e) || (f() || (u.value = e), l && (l[r] = e), i(`update:${r}`, e));
+	}
+	return [p, m];
+}
+function l(e, t) {
+	let [n, r] = c(e, "checked", t);
+	function i(e, i) {
+		let a = e.type === "radio" ? e.group || "default" : e.value, o = {
+			...n.value,
+			[a]: i
+		};
+		r(o), t("check", o, e);
+	}
+	return {
+		checked: n,
+		check: i
+	};
+}
+function u(e, t, a = !1) {
+	let o = i(!1), c;
+	return r(() => {
+		let n = a ? e.value.closest("kima-sidebar")?.parentElement || e.value.parentElement : e.value, r = () => {
+			o.value = n.getBoundingClientRect().width < Number(t());
+		};
+		c = new ResizeObserver(r), c.observe(n), r();
+	}), s(t, () => {
+		e.value && (o.value = e.value.getBoundingClientRect().width < Number(t()));
+	}), n(() => c?.disconnect()), o;
+}
+var d = (e) => String(e.value ?? e.href ?? e.label);
+function f(e, t) {
+	return d(e) === t || (e.children || []).some((e) => f(e, t));
+}
+export { f as navContains, d as navKey, l as useMenuChecks, u as useNarrow, c as useShellModel };

package/dist/vue/utils/theme.js

@@ -0,0 +1,50 @@
+import { Hct as e, MaterialDynamicColors as t, SchemeMonochrome as n, SchemeNeutral as r, SchemeTonalSpot as i, argbFromHex as a, hexFromArgb as o } from "@material/material-color-utilities";
+// src/utils/theme.js
+var s = "#61afef", c = "tonal-spot", l = [
+	["surface", "页面背景"],
+	["surfaceContainerLowest", "最低层容器"],
+	["surfaceContainerLow", "低层容器"],
+	["surfaceContainer", "主容器"],
+	["surfaceContainerHigh", "高层容器"],
+	["surfaceContainerHighest", "最高层容器"],
+	["onSurface", "主文字"],
+	["onSurfaceVariant", "次要文字"],
+	["outline", "强描边"],
+	["outlineVariant", "弱描边"],
+	["primary", "主操作"],
+	["onPrimary", "主操作上的文字"],
+	["primaryContainer", "柔和主操作"],
+	["onPrimaryContainer", "柔和主操作上的文字"],
+	["secondaryContainer", "次操作"],
+	["onSecondaryContainer", "次操作上的文字"],
+	["tertiaryContainer", "强调色"],
+	["onTertiaryContainer", "强调色上的文字"],
+	["error", "危险操作"],
+	["onError", "危险操作上的文字"],
+	["errorContainer", "危险柔和"],
+	["onErrorContainer", "危险柔和上的文字"],
+	["inverseSurface", "反色表面（提示条）"],
+	["inverseOnSurface", "反色表面上的文字"],
+	["scrim", "抽屉背后的遮罩"]
+], u = {
+	"tonal-spot": i,
+	monochrome: n,
+	neutral: r
+};
+function d(e) {
+	return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+function f(n, { isDark: r = !0, variant: s = c } = {}) {
+	let f = new (u[s] || i)(e.fromInt(a(n)), r, 0), p = {};
+	for (let [e] of l) p[d(e)] = o(t[e].getArgb(f));
+	return p;
+}
+function p(e, { isDark: t = !0, variant: n = c, target: r } = {}) {
+	let i = f(e, {
+		isDark: t,
+		variant: n
+	}), a = r || document.documentElement;
+	for (let [e, t] of Object.entries(i)) a.style.setProperty(`--kima-color-${e}`, t);
+	return i;
+}
+export { p as applyPalette, d as cssName, s as defaultSeed, c as defaultVariant, f as generatePalette, l as paletteRoles };

package/dist/vue/utils/utility-choice.js

@@ -0,0 +1,56 @@
+import { useInteractionModel as e, useInteractionReset as t } from "./interaction.js";
+import { computed as n, nextTick as r, ref as i, useId as a, watch as o } from "vue";
+// src/utils/utility-choice.js
+function s(s, c, l, u) {
+	let [d, f] = e(s, "modelValue", c), p = i(""), m = i(-1), h = `kima-choice-${a()}`, g = n(() => s.options.map((e, t) => typeof e == "object" && e ? {
+		...e,
+		index: t
+	} : {
+		value: e,
+		label: String(e),
+		index: t
+	})), _ = n(() => g.value.filter((e) => String(e.label ?? e.value).toLocaleLowerCase().includes(p.value.toLocaleLowerCase()))), v = n(() => _.value.flatMap((e, t) => e.disabled ? [] : [t])), y = (e) => s.multiple ? (Array.isArray(d.value) ? d.value : []).includes(e.value) : Object.is(d.value, e.value);
+	function b(e) {
+		if (!e || e.disabled || s.disabled) return;
+		let t = Array.isArray(d.value) ? d.value : [];
+		f(s.multiple ? y(e) ? t.filter((t) => !Object.is(t, e.value)) : [...t, e.value] : e.value), c("change", d.value);
+	}
+	let x = n(() => s.multiple ? Array.isArray(d.value) ? d.value : [] : d.value == null || d.value === "" ? [] : [d.value]);
+	function S(e, t = !1) {
+		if (s.disabled || e.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = v.value;
+		if (["Enter", " "].includes(e.key)) {
+			e.preventDefault(), b(_.value[m.value]);
+			return;
+		}
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let i = n.indexOf(m.value), a = e.key === "ArrowUp" ? -1 : 1;
+		m.value = e.key === "Home" ? n[0] ?? -1 : e.key === "End" ? n.at(-1) ?? -1 : n[i < 0 ? a > 0 ? 0 : n.length - 1 : (i + a + n.length) % n.length] ?? -1, t && r(() => l.value?.querySelector(`[id="${h}-${m.value}"]`)?.focus());
+	}
+	return o(_, () => {
+		let e = _.value.findIndex((e) => !e.disabled && y(e));
+		m.value = e >= 0 ? e : v.value[0] ?? -1;
+	}, { immediate: !0 }), t(l, d, f, () => {
+		p.value = "", u?.();
+	}), {
+		value: d,
+		values: x,
+		update: f,
+		query: p,
+		active: m,
+		id: h,
+		options: g,
+		filtered: _,
+		enabled: v,
+		selected: y,
+		choose: b,
+		move: S
+	};
+}
+export { s as useUtilityChoice };

package/package.json

@@ -1,6 +1,101 @@
 {
   "name": "@kernel4632/kima",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.0",
+  "description": "KIMA (Kinetic, Interaction, Motion, Alive) - a Material 3 style Web UI design system and component library.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kernel4632/kima.git"
+  },
+  "homepage": "https://github.com/kernel4632/kima#readme",
+  "bugs": {
+    "url": "https://github.com/kernel4632/kima/issues"
+  },
+  "keywords": [
+    "vue",
+    "web-components",
+    "design-system",
+    "kima"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/kima.js",
+  "module": "./dist/kima.js",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/kima.js",
+      "default": "./dist/kima.js"
+    },
+    "./elements": {
+      "import": "./dist/kima-elements.js",
+      "default": "./dist/kima-elements.js"
+    },
+    "./elements/core": {
+      "import": "./dist/kima-elements-core.js",
+      "default": "./dist/kima-elements-core.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./theme": "./dist/kima-theme.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "./dist/kima-elements.js",
+    "./dist/kima-elements-core.js"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "node scripts/build-lib.js",
+    "verify:lib": "node scripts/verify-package.js",
+    "verify:install": "node scripts/verify-install.js",
+    "release:check": "pnpm build:lib && pnpm verify:lib && pnpm verify:install",
+    "prepublishOnly": "pnpm release:check",
+    "shots": "playwright test --config playwright.shots.config.js",
+    "prepack": "pnpm build:lib",
+    "preview": "vite preview --outDir site-dist",
+    "test": "playwright test",
+    "test:ssr": "node --test tests/*.ssr.test.js"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.4",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@hugeicons/core-free-icons": "^4.3.5",
+    "@hugeicons/vue": "^1.0.8",
+    "@lezer/highlight": "^1.2.5",
+    "@material/material-color-utilities": "^0.3.0",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-placeholder": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "qrcode-generator": "^2.0.4",
+    "reka-ui": "^2.11.0",
+    "xss": "^1.0.16"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.63.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "sass": "^1.105.1",
+    "vite": "^8.3.5",
+    "vue": "^3.5.42"
+  }
+}