@maple-kit/ui 0.4.0 → 0.6.0

package/dist/composer/badge.d.ts

@@ -7,7 +7,17 @@ export interface MapleContextProps extends AsChildProps {
   readonly className?: string;
   /** A captured page, or a stored comment's context. Both render identically. */
   readonly context?: CommentContext | PageContext;
+  /**
+   * Whether it can be folded away. Off keeps it open and draws no control,
+   * which is what a stored comment wants: nothing is being typed beside it.
+   */
+  readonly collapsible?: boolean;
 }
-/** Labels muted, values aligned, two columns. */
+/** What the disclosure is called, in both states. */
+export declare const CONTEXT_LABELS: {
+  closed: string;
+  open: string;
+};
+/** Labels muted, values aligned, two columns — folded to its first row. */
 export declare const MapleContextBadge: import("react").ForwardRefExoticComponent<MapleContextProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion

package/dist/composer/badge.js

@@ -1,25 +1,46 @@
 import { Slot } from "../slot.js";
 import { Fragment, createElement, forwardRef } from "react";
 import { contextRows } from "@maple-kit/core/overlay";
-import { useMaple } from "@maple-kit/react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/composer/badge.ts
+const CONTEXT_LABELS = {
+	closed: "Show what was captured",
+	open: "Hide what was captured"
+};
 const MapleContextBadge = forwardRef(function MapleContextBadge(props, ref) {
 	const { composer, detail } = useMaple();
+	const client = useMapleClient();
 	const context = props.context ?? composer.target?.context;
-	const Element = props.asChild ? Slot : "dl";
+	const Element = props.asChild ? Slot : "section";
 	if (!context) return null;
-	const className = [
-		"mk-composer-row",
-		"mk-ctx",
-		props.className
-	].filter(Boolean).join(" ");
+	const rows = contextRows(context, detail);
+	const collapsible = props.collapsible !== false && composer.viewing === void 0;
+	const open = !collapsible || composer.contextOpen;
 	return createElement(Element, {
 		ref,
-		className
-	}, ...contextRows(context, detail).map(row));
+		className: [
+			"mk-composer-row",
+			"mk-ctx-card",
+			props.className
+		].filter(Boolean).join(" "),
+		"data-mk-open": String(open)
+	}, collapsible ? head(rows, open, () => client.setContextOpen(!open)) : null, createElement("dl", { className: "mk-ctx" }, ...rows.map(row)));
 });
+function head(rows, open, toggle) {
+	const first = rows[0];
+	return createElement("button", {
+		type: "button",
+		className: "mk-ctx-head mk-press",
+		"aria-expanded": open,
+		"aria-label": open ? CONTEXT_LABELS.open : CONTEXT_LABELS.closed,
+		onClick: toggle
+	}, createElement("span", { className: "mk-ctx-sum" }, first === void 0 ? "Page" : first.value), createElement("span", {
+		className: "mk-ctx-caret",
+		"aria-hidden": "true"
+	}));
+}
 function row(one) {
 	return createElement(Fragment, { key: one.label }, createElement("dt", null, one.label), createElement("dd", one.mono === true ? { className: "mk-mono" } : null, one.value, one.note === void 0 ? null : createElement("em", null, ` · ${one.note}`)));
 }
 //#endregion
-export { MapleContextBadge };
+export { CONTEXT_LABELS, MapleContextBadge };

package/dist/composer/css.js

@@ -184,22 +184,107 @@ function emojiCss() {
 }
 `.trim();
 }
-function contextAndShots() {
+function scoreCard() {
 	return `
-/* Two pairs to a row: seven facts one per line ran the card down half the
-   panel. Labels keep their own column, so every value still lines up. */
-.mk-ctx {
+/* The judgement, in the slot the context card folded out of. Rows are laid out
+   first and filled second, so nothing below moves as they land. */
+.mk-score {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 7px 10px;
+  grid-template-columns: auto 68px minmax(0, 1fr);
+  align-items: center;
+  gap: 6px 9px;
   margin: 2px 16px 4px;
-  padding: 11px 13px;
+  padding: 10px 11px;
   border: 1px solid var(--mk-line);
   border-radius: var(--mk-r-sm);
   background: var(--mk-sunk);
 }
 
-.mk-ctx dt {
+/* The same line box empty as full: the rung arrives after the bar, and a row
+   that grows when its words land moves the field somebody is typing in. */
+.mk-score-rung {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mk-fg);
+  font-size: 11px;
+  line-height: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* One slot per rung, each filled by the probability it took. Equal widths keep
+   *which* rung readable and the fill carries how sure it was, which is why the
+   bar needs no key beside it: three pale slots are visibly a shrug. */
+.mk-score-bar {
+  display: flex;
+  gap: 2px;
+  height: 5px;
+  margin: 5px 0;
+}
+
+.mk-score-bar i {
+  flex: 1;
+  border-radius: 999px;
+  background: color-mix(
+    in oklab,
+    var(--mk-accent) calc(var(--mk-p, 0) * 100%),
+    var(--mk-line-firm)
+  );
+  transition: background-color var(--mk-dur-swap) var(--mk-ease-swap);
+}
+
+/* Judging is the rows present and empty: a spinner per pillar is five things
+   moving beside a field somebody is typing in. */
+.mk-score[data-mk-status="judging"] .mk-score-bar i {
+  background: var(--mk-line);
+}
+
+`.trim();
+}
+function kindChip() {
+	return `
+/* The select covers the pill, so the whole chip is the hit area. */
+.mk-kind {
+  position: relative;
+  grid-column: 1 / -1;
+  justify-self: start;
+  margin-bottom: 3px;
+  border-radius: var(--mk-r-xs);
+  background: var(--mk-accent-sub);
+  color: var(--mk-accent);
+}
+
+.mk-kind-word {
+  display: block;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.mk-kind[data-mk-chosen="true"] {
+  background: var(--mk-accent);
+  color: var(--mk-accent-ink);
+}
+
+.mk-kind-pick {
+  position: absolute;
+  inset: -6px -4px;
+  width: calc(100% + 8px);
+  border: 0;
+  opacity: 0;
+  font: inherit;
+  cursor: pointer;
+  appearance: none;
+}
+
+.mk-kind:has(.mk-kind-pick:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-ctx dt,
+.mk-score-name {
   align-self: baseline;
   color: var(--mk-faint);
   font-size: 9px;
@@ -293,6 +378,72 @@ function contextAndShots() {
   color: color-mix(in oklab, var(--mk-maple) 78%, var(--mk-muted));
   font-weight: 450;
 }
+`.trim();
+}
+function contextAndShots() {
+	return `
+/* It folds rather than vanishes: the width is the one fact read off it, so
+   the summary keeps that line in both states. */
+.mk-ctx-card {
+  margin: 2px 16px 4px;
+  border: 1px solid var(--mk-line);
+  border-radius: var(--mk-r-sm);
+  background: var(--mk-sunk);
+  overflow: hidden;
+}
+
+.mk-ctx-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 11px;
+  border: 0;
+  background: none;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.mk-ctx-head:hover {
+  color: var(--mk-fg);
+}
+
+/* Two borders rather than an icon: one control does not earn a second svg. */
+.mk-ctx-caret {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(1px) rotate(-135deg);
+  transition: transform var(--mk-dur-swap) var(--mk-ease-surface);
+}
+
+.mk-ctx-card[data-mk-open="false"] .mk-ctx-caret {
+  transform: translateY(-1px) rotate(45deg);
+}
+
+.mk-ctx-card[data-mk-open="false"] .mk-ctx {
+  display: none;
+}
+
+/* Two pairs to a row: seven facts one per line ran the card down half the
+   panel. Labels keep their own column, so every value still lines up. */
+.mk-ctx {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 7px 10px;
+  padding: 11px;
+}
+
+.mk-ctx-head + .mk-ctx {
+  padding-top: 3px;
+}
+
 `.trim();
 }
 function partsCss() {
@@ -406,6 +557,10 @@ ${emojiCss()}
 
 ${contextAndShots()}
 
+${scoreCard()}
+
+${kindChip()}
+
 .mk-leave {
   position: absolute;
   top: 12px;

package/dist/composer/index.d.ts

@@ -1,7 +1,7 @@
 import { SHEET_BREAKPOINT_PX } from "../tokens.js";
 import { CANCEL_LABEL, MapleActions, MapleActionsProps, SEND_LABEL } from "./actions.js";
 import { ATTACH_WORDS, MapleAttachments, MapleAttachmentsProps } from "./attachments.js";
-import { MapleContextBadge, MapleContextProps } from "./badge.js";
+import { CONTEXT_LABELS, MapleContextBadge, MapleContextProps } from "./badge.js";
 import { COMPOSER_PLACEHOLDER, MapleBody, MapleBodyProps } from "./body.js";
 import { LeaveAsk, createLeaveAsk } from "./leave.js";
 import { ComposerScopeError, SheetDetent } from "./scope.js";
@@ -11,5 +11,6 @@ import { EmojiChoice, REVIEW_EMOJI, SHORTCODE_LIMIT, Shortcode, Written, appende
 import { peeks } from "./peek.js";
 import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNAMED_TARGET, leaveMessage, quotedText, targetName, targetPhrase } from "./phrase.js";
 import { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, EmojiGridProps, MapleEmoji, MapleEmojiProps } from "./picker-emoji.js";
+import { KIND_AUTO, KIND_LABEL, MapleScoreCard, MapleScoreProps, SCORE_LABEL } from "./score.js";
 import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget, MapleTargetProps } from "./target.js";
-export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, type EmojiChoice, EmojiGrid, type EmojiGridProps, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, type LeaveAsk, MapleActions, type MapleActionsProps, MapleAttachments, type MapleAttachmentsProps, MapleBody, type MapleBodyProps, MapleComposer, type MapleComposerProps, MapleContextBadge, type MapleContextProps, MapleDetail, type MapleDetailProps, MapleEmoji, type MapleEmojiProps, MapleTarget, type MapleTargetProps, QUOTE_LIMIT, REVIEW_EMOJI, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, type SheetDetent, type Shortcode, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, type Written, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, type EmojiChoice, EmojiGrid, type EmojiGridProps, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, type LeaveAsk, MapleActions, type MapleActionsProps, MapleAttachments, type MapleAttachmentsProps, MapleBody, type MapleBodyProps, MapleComposer, type MapleComposerProps, MapleContextBadge, type MapleContextProps, MapleDetail, type MapleDetailProps, MapleEmoji, type MapleEmojiProps, MapleScoreCard, type MapleScoreProps, MapleTarget, type MapleTargetProps, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, type SheetDetent, type Shortcode, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, type Written, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/index.js

@@ -2,7 +2,7 @@ import { SHEET_BREAKPOINT_PX } from "../tokens.js";
 import { ComposerScopeError } from "./scope.js";
 import { CANCEL_LABEL, MapleActions, SEND_LABEL } from "./actions.js";
 import { ATTACH_WORDS, MapleAttachments } from "./attachments.js";
-import { MapleContextBadge } from "./badge.js";
+import { CONTEXT_LABELS, MapleContextBadge } from "./badge.js";
 import { REVIEW_EMOJI, SHORTCODE_LIMIT, appended, searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
 import { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, MapleEmoji } from "./picker-emoji.js";
 import { COMPOSER_PLACEHOLDER, MapleBody } from "./body.js";
@@ -11,5 +11,6 @@ import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNA
 import { COMPOSER_LABEL, DETENT_LABELS, MapleComposer } from "./composer.js";
 import { MapleDetail, detailRows } from "./detail.js";
 import { createLeaveAsk } from "./leave.js";
+import { KIND_AUTO, KIND_LABEL, MapleScoreCard, SCORE_LABEL } from "./score.js";
 import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget } from "./target.js";
-export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleTarget, QUOTE_LIMIT, REVIEW_EMOJI, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleScoreCard, MapleTarget, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/score.d.ts

@@ -0,0 +1,16 @@
+import { AsChildProps } from "../slot.js";
+//#region src/composer/score.d.ts
+/** The card. It draws nothing at all until something has been judged. */
+export interface MapleScoreProps extends AsChildProps {
+  readonly className?: string;
+  /** The chip that lets a reviewer overrule the guess. On unless asked otherwise. */
+  readonly kind?: boolean;
+}
+/** What the card calls itself, and what the kind control is called. */
+export declare const SCORE_LABEL = "How this comment reads";
+export declare const KIND_LABEL = "What kind of comment this is";
+/** The option that hands the kind back to the classifier. */
+export declare const KIND_AUTO = "auto";
+/** The card. Renders from `ComposerState` and holds nothing of its own. */
+export declare const MapleScoreCard: import("react").ForwardRefExoticComponent<MapleScoreProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/composer/score.js

@@ -0,0 +1,87 @@
+import { Slot } from "../slot.js";
+import { Fragment, createElement, forwardRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+import { COMMENT_KINDS, FALLBACK_KIND } from "@maple-kit/core/connectors";
+//#region src/composer/score.ts
+const SCORE_LABEL = "How this comment reads";
+const KIND_LABEL = "What kind of comment this is";
+const KIND_AUTO = "auto";
+const RUNNER_UP = .5;
+const MapleScoreCard = forwardRef(function MapleScoreCard(props, ref) {
+	const { assist, composer } = useMaple();
+	const { scores, status } = composer.assist;
+	const Element = props.asChild ? Slot : "section";
+	if (!assist || status === "idle" || composer.viewing !== void 0) return null;
+	return createElement(Element, {
+		ref,
+		className: [
+			"mk-composer-row",
+			"mk-score",
+			props.className
+		].filter(Boolean).join(" "),
+		"data-mk-status": status,
+		"aria-label": SCORE_LABEL,
+		"aria-busy": status === "judging"
+	}, props.kind === false ? null : createElement(KindChip), ...assist.pillars.map((pillar) => pillarRow(pillar, find(scores, pillar.id))));
+});
+function pillarRow(pillar, score) {
+	const level = score?.level;
+	const reached = level === void 0 ? void 0 : pillar.levels[level];
+	return createElement(Fragment, { key: pillar.id }, createElement("span", { className: "mk-score-name" }, pillar.id), createElement("span", {
+		className: "mk-score-bar",
+		role: "img",
+		"aria-label": legend(pillar, score)
+	}, ...pillar.levels.map((_, index) => segment(index, score?.distribution[index]))), createElement("span", {
+		className: "mk-score-rung",
+		title: reached?.description
+	}, reached?.label ?? ""));
+}
+function segment(index, share) {
+	const fill = Math.round((share ?? 0) * 1e3) / 1e3;
+	return createElement("i", {
+		key: index,
+		style: { "--mk-p": fill }
+	});
+}
+function legend(pillar, score) {
+	if (score === void 0) return `${pillar.id}: not judged yet`;
+	const sure = Math.round(score.confidence * 100);
+	return `${pillar.id}: ${pillar.levels[score.level]?.label ?? ""}, ${String(sure)}% confident`;
+}
+function KindChip() {
+	const { composer } = useMaple();
+	const client = useMapleClient();
+	const { chosenKind, kind } = composer.assist;
+	return createElement("span", {
+		className: "mk-kind",
+		"data-mk-chosen": String(chosenKind !== void 0)
+	}, createElement("span", {
+		className: "mk-kind-word",
+		"aria-hidden": "true"
+	}, word(kind, chosenKind)), createElement("select", {
+		className: "mk-kind-pick",
+		"aria-label": KIND_LABEL,
+		value: chosenKind ?? "auto",
+		onChange: (event) => client.setKind(event.target.value === "auto" ? void 0 : event.target.value)
+	}, createElement("option", {
+		key: KIND_AUTO,
+		value: KIND_AUTO
+	}, guessed(kind)), ...COMMENT_KINDS.map((one) => createElement("option", {
+		key: one,
+		value: one
+	}, one))));
+}
+function word(kind, chosen) {
+	if (chosen !== void 0) return chosen;
+	if (kind === null) return "…";
+	const [next, share] = COMMENT_KINDS.filter((one) => one !== kind.kind).map((one) => [one, kind.distribution[one] ?? 0]).reduce((best, one) => one[1] > best[1] ? one : best, [FALLBACK_KIND, 0]);
+	return share >= (kind.distribution[kind.kind] ?? 1) * RUNNER_UP ? `${kind.kind} or ${next}` : kind.kind;
+}
+function guessed(kind) {
+	return kind === null ? "auto" : `auto (${kind.kind})`;
+}
+function find(scores, id) {
+	return scores.find((score) => score.pillar === id);
+}
+//#endregion
+export { KIND_AUTO, KIND_LABEL, MapleScoreCard, SCORE_LABEL };

package/dist/maple.js

@@ -5,6 +5,7 @@ import { MapleContextBadge } from "./composer/badge.js";
 import { MapleBody } from "./composer/body.js";
 import { MapleComposer } from "./composer/composer.js";
 import { MapleDetail } from "./composer/detail.js";
+import { MapleScoreCard } from "./composer/score.js";
 import { MapleTarget } from "./composer/target.js";
 import { PICK_ORDER } from "./island/language.js";
 import { IslandContent } from "./island/content.js";
@@ -53,7 +54,7 @@ function composer(leave, shots) {
 	return createElement(MapleComposer, {
 		key: "composer",
 		...leave === void 0 ? {} : { leave }
-	}, createElement(MapleTarget, { key: "target" }), createElement(MapleBody, { key: "body" }), createElement(MapleDetail, { key: "detail" }), createElement(MapleContextBadge, { key: "context" }), createElement(MapleAttachments, {
+	}, createElement(MapleTarget, { key: "target" }), createElement(MapleBody, { key: "body" }), createElement(MapleDetail, { key: "detail" }), createElement(MapleScoreCard, { key: "score" }), createElement(MapleContextBadge, { key: "context" }), createElement(MapleAttachments, {
 		key: "attachments",
 		...shots
 	}), createElement(MapleNotice, {

package/dist/tokens.js

@@ -166,6 +166,7 @@ const REDUCED_MOTION_TOKENS = {
 	"--mk-icon-blur": "0px"
 };
 const RUNTIME_TOKENS = [
+	"--mk-p",
 	"--mk-slot",
 	"--mk-slot-ink",
 	"--mk-pin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Maple's composed reviewer parts: the marks, the island and the composer",
   "license": "Apache-2.0",
   "type": "module",
@@ -32,8 +32,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@maple-kit/core": "0.4.0",
-    "@maple-kit/react": "0.4.0"
+    "@maple-kit/core": "0.6.0",
+    "@maple-kit/react": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",