@youcan/celeste 0.13.1 → 0.14.0

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.13.1",
-  "generatedAt": "2026-09-09T15:33:52.703Z",
+  "version": "0.14.0",
+  "generatedAt": "2026-09-14T14:40:49.235Z",
   "components": {
     "Alert": {
       "name": "Alert",
@@ -4261,6 +4261,53 @@
       "story": "src/components/button/stories/link-button.stories.ts",
       "hasStory": true
     },
+    "Mochi": {
+      "name": "Mochi",
+      "group": "mochi",
+      "file": "src/components/mochi/mochi.vue",
+      "import": "@youcan/celeste",
+      "props": [
+        {
+          "name": "animate",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "class",
+          "type": "ClassValue",
+          "required": false
+        },
+        {
+          "name": "idle",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "default": "40"
+        },
+        {
+          "name": "thinking",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "update:idle",
+          "type": "[value: boolean]"
+        }
+      ],
+      "slots": [],
+      "siblings": [],
+      "story": "src/components/mochi/stories/mochi.stories.ts",
+      "hasStory": true
+    },
     "Modal": {
       "name": "Modal",
       "group": "modal",

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Celeste Component Registry
 
-> Generated from source for `@youcan/celeste@0.13.1`. Do not edit.
+> Generated from source for `@youcan/celeste@0.14.0`. Do not edit.
 > Regenerate with `pnpm --filter @youcan/celeste codegen:registry`.
 
 Every component below is imported from `@youcan/celeste`:
@@ -9,7 +9,7 @@ Every component below is imported from `@youcan/celeste`:
 import { Badge, Button } from '@youcan/celeste';
 ```
 
-**146 components** in 39 groups.
+**147 components** in 40 groups.
 
 This file describes what each component _accepts_. For which component to
 reach for when several look similar, see the `celeste-ui` skill.
@@ -1386,6 +1386,28 @@ reach for when several look similar, see the `celeste-ui` skill.
 
 ---
 
+## mochi
+
+### Mochi
+
+**Props**
+
+- `animate`: `boolean` — default `false`
+- `class`: `ClassValue`
+- `idle`: `boolean` — default `false`
+- `size`: `number` — default `40`
+- `thinking`: `boolean` — default `false`
+
+**Events**
+
+- `update:idle`: `[value: boolean]`
+
+**Source:** `src/components/mochi/mochi.vue`
+
+**Example:** `src/components/mochi/stories/mochi.stories.ts`
+
+---
+
 ## modal
 
 ### Modal

package/ai/icons.md

@@ -1,6 +1,6 @@
 # Celeste Icons
 
-> Generated from `@youcan/celeste-icons@0.13.1`. Do not edit.
+> Generated from `@youcan/celeste-icons@0.14.0`. Do not edit.
 
 **3148 icons.** Render one as a class, not a component:
 

package/ai/tokens.md

@@ -1,6 +1,6 @@
 # Celeste Design Tokens
 
-> Generated from `@youcan/celeste-tokens@0.13.1`. Do not edit.
+> Generated from `@youcan/celeste-tokens@0.14.0`. Do not edit.
 
 **352 tokens.** Use them as CSS custom properties: `var(--color-text-sub-600)`.
 

package/dist/celeste.css

@@ -4615,6 +4615,219 @@ to {
 .celeste-label[aria-disabled=true][data-v-5ae119db]::after, .celeste-label[aria-disabled=true][data-v-5ae119db] >  a,
 .celeste-label[aria-disabled=true] .celeste-sublabel[data-v-5ae119db] {
   color: inherit;
+}.celeste-mochi[data-v-ce7048d3] {
+  --mochi-size: var(--v51b30026);
+  --mochi-rotate: var(--v54792142);
+  position: relative;
+  flex: none;
+  width: var(--mochi-size);
+  height: var(--mochi-size);
+  overflow: hidden;
+  border-radius: calc(var(--mochi-size) * 0.2222);
+  background: linear-gradient(180deg, var(--color-brand-300) 0%, #f90171 100%);
+  isolation: isolate;
+}
+.celeste-mochi[data-v-ce7048d3]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 max(1px, var(--mochi-size) * 0.0278) var(--color-brand-200);
+  pointer-events: none;
+}
+.celeste-mochi[data-v-ce7048d3] > * {
+  position: absolute;
+}
+.celeste-mochi-stage[data-v-ce7048d3] {
+  inset: 0;
+  transform: rotate(var(--mochi-rotate));
+}
+.celeste-mochi-chan[data-v-ce7048d3] {
+  position: absolute;
+  top: 24%;
+  left: -15%;
+  width: 129.4%;
+  height: 140.9%;
+  transition: transform 0.38s cubic-bezier(0.3, -0.4, 0.7, 0.2);
+}
+.celeste-mochi-body[data-v-ce7048d3] {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--color-brand-400);
+  box-shadow: inset 0 calc(var(--mochi-size) * 0.242) calc(var(--mochi-size) * 0.4015) rgba(255, 255, 255, 0.8), inset 0 calc(var(--mochi-size) * 0.363) calc(var(--mochi-size) * 0.2826) var(--color-brand-300);
+}
+.celeste-mochi-eyes[data-v-ce7048d3] {
+  --eye-top: 12.8%;
+  --eye-h: 19.4%;
+  position: absolute;
+  transform-origin: 50% calc(var(--eye-top) + var(--eye-h) / 2);
+  transition: transform 0.7s ease-in-out;
+  pointer-events: none;
+  inset: 0;
+}
+.celeste-mochi-eye[data-v-ce7048d3] {
+  position: absolute;
+  top: var(--eye-top);
+  width: 13.6%;
+  height: var(--eye-h);
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: linear-gradient(180deg, var(--color-static-white) 0%, rgba(255, 255, 255, 0.6) 100%);
+  filter: drop-shadow(0 calc(var(--mochi-size) * 0.0305) calc(var(--mochi-size) * 0.0153) var(--color-pink-500));
+}
+.celeste-mochi-eye-l[data-v-ce7048d3] {
+  left: 31.5%;
+}
+.celeste-mochi-eye-r[data-v-ce7048d3] {
+  right: 31.5%;
+}
+.celeste-mochi-peek-drop .celeste-mochi-eye[data-v-ce7048d3],
+.celeste-mochi-peek-hidden .celeste-mochi-eye[data-v-ce7048d3],
+.celeste-mochi-peek-out .celeste-mochi-eye[data-v-ce7048d3] {
+  height: calc(var(--eye-h) * 80 / 112);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.celeste-mochi-peek-drop .celeste-mochi-eye[data-v-ce7048d3] {
+  animation: celeste-mochi-squint-ce7048d3 0.25s ease-in-out 1s both;
+}
+.celeste-mochi[data-anim=blink-twice] .celeste-mochi-eye[data-v-ce7048d3],
+.celeste-mochi[data-anim=look-blink-twice] .celeste-mochi-eye[data-v-ce7048d3] {
+  animation: celeste-mochi-blink-twice-ce7048d3 3.5s linear both;
+}
+.celeste-mochi[data-anim=blink-once] .celeste-mochi-eye[data-v-ce7048d3],
+.celeste-mochi[data-anim=look-blink-once] .celeste-mochi-eye[data-v-ce7048d3] {
+  animation: celeste-mochi-blink-once-ce7048d3 3.5s linear both;
+}
+.celeste-mochi[data-anim=look-blink-twice] .celeste-mochi-eyes[data-v-ce7048d3] {
+  animation: celeste-mochi-look-after-blink-twice-ce7048d3 3.5s linear both;
+}
+.celeste-mochi[data-anim=look-blink-once] .celeste-mochi-eyes[data-v-ce7048d3] {
+  animation: celeste-mochi-look-after-blink-once-ce7048d3 3.5s linear both;
+}
+.celeste-mochi-thinking .celeste-mochi-eyes[data-v-ce7048d3] {
+  transform: translate(3.77%, -3.118%) rotate(-7deg);
+  transition: transform 0.6s ease-out;
+}
+.celeste-mochi-thinking .celeste-mochi-eye[data-v-ce7048d3] {
+  animation: celeste-mochi-blink-twice-ce7048d3 3.5s linear 1s infinite;
+}
+.celeste-mochi-peek-drop .celeste-mochi-chan[data-v-ce7048d3] {
+  animation: celeste-mochi-drop-ce7048d3 2.01s linear both;
+}
+.celeste-mochi-peek-hidden .celeste-mochi-chan[data-v-ce7048d3] {
+  transform: translateY(calc(var(--mochi-size) * 0.754));
+}
+.celeste-mochi-peek-out .celeste-mochi-chan[data-v-ce7048d3] {
+  transform: translateY(calc(var(--mochi-size) * 0.295));
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.celeste-mochi-peek-home .celeste-mochi-chan[data-v-ce7048d3] {
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+.celeste-mochi[data-v-ce7048d3] * {
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+}
+}
+@keyframes celeste-mochi-blink-twice-ce7048d3 {
+0%, 4.57%, 8% {
+    top: var(--eye-top);
+    height: var(--eye-h);
+    animation-timing-function: ease-in;
+}
+2.29%, 10.29% {
+    top: calc(var(--eye-top) + var(--eye-h) / 2);
+    height: 0;
+    animation-timing-function: ease-out;
+}
+12.57%, 100% {
+    top: var(--eye-top);
+    height: var(--eye-h);
+}
+}
+@keyframes celeste-mochi-blink-once-ce7048d3 {
+0% {
+    top: var(--eye-top);
+    height: var(--eye-h);
+    animation-timing-function: ease-in;
+}
+2.29% {
+    top: calc(var(--eye-top) + var(--eye-h) / 2);
+    height: 0;
+    animation-timing-function: ease-out;
+}
+4.57%, 100% {
+    top: var(--eye-top);
+    height: var(--eye-h);
+}
+}
+@keyframes celeste-mochi-look-after-blink-twice-ce7048d3 {
+0%, 14.29% {
+    transform: translate(0, 0);
+    animation-timing-function: ease-out;
+}
+22.86%, 42.86% {
+    transform: translate(3.393%, 1.386%);
+    animation-timing-function: ease-in-out;
+}
+54.29%, 74.29% {
+    transform: translate(-3.393%, 1.386%);
+    animation-timing-function: ease-in-out;
+}
+85.71%, 100% {
+    transform: translate(0, 0);
+}
+}
+@keyframes celeste-mochi-look-after-blink-once-ce7048d3 {
+0%, 8.57% {
+    transform: translate(0, 0);
+    animation-timing-function: ease-out;
+}
+17.14%, 37.14% {
+    transform: translate(3.393%, 1.386%);
+    animation-timing-function: ease-in-out;
+}
+48.57%, 68.57% {
+    transform: translate(-3.393%, 1.386%);
+    animation-timing-function: ease-in-out;
+}
+80%, 100% {
+    transform: translate(0, 0);
+}
+}
+@keyframes celeste-mochi-squint-ce7048d3 {
+from {
+    height: var(--eye-h);
+    border-bottom-right-radius: var(--radius-full);
+    border-bottom-left-radius: var(--radius-full);
+}
+to {
+    height: calc(var(--eye-h) * 80 / 112);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+}
+@keyframes celeste-mochi-drop-ce7048d3 {
+0% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0.43, -0.3, 0.74, 0.33);
+}
+21.4% {
+    transform: translateY(calc(var(--mochi-size) * -0.0082));
+    animation-timing-function: cubic-bezier(0.3, -0.05, 0.7, -0.5);
+}
+44.28%, 68.15% {
+    transform: translateY(calc(var(--mochi-size) * 0.754));
+    animation-timing-function: linear(0, 0.048, 0.168, 0.326, 0.497, 0.66, 0.804, 0.921, 1.009, 1.068, 1.103, 1.118, 1.118, 1.107, 1.089, 1.069, 1.049, 1.031, 1.015, 1.003, 0.995, 0.989, 0.986, 0.986, 0.987, 0.988, 0.991, 0.993, 0.995, 0.997, 0.999, 1, 1.001, 1.002, 1.002, 1.002, 1.001, 1.001, 1.001, 1.001, 1);
+}
+100% {
+    transform: translateY(calc(var(--mochi-size) * 0.295));
+}
 }.celeste-modal-body[data-v-8872ed90] {
   padding: var(--spacing-16);
 }

package/dist/cjs/chunks/components.cjs

@@ -91,6 +91,7 @@ const require_tooltip_provider = require("./tooltip-provider.cjs");
 const require_tooltip_root = require("./tooltip-root.cjs");
 const require_tooltip = require("./tooltip.cjs");
 const require_label = require("./label2.cjs");
+const require_mochi = require("./mochi.cjs");
 const require_modal_body = require("./modal-body.cjs");
 const require_modal_close = require("./modal-close.cjs");
 const require_modal_content = require("./modal-content.cjs");
@@ -222,6 +223,7 @@ var components_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	HueSlider: () => require_hue_slider.hue_slider_default,
 	Label: () => require_label.label_default,
 	LinkButton: () => require_link_button.link_button_default,
+	Mochi: () => require_mochi.mochi_default,
 	Modal: () => require_modal.modal_default,
 	ModalBody: () => require_modal_body.modal_body_default,
 	ModalClose: () => require_modal_close.modal_close_default,

package/dist/cjs/chunks/mochi.cjs

@@ -0,0 +1,168 @@
+const require_clsx = require("./clsx.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+let vue = require("vue");
+//#region src/components/mochi/mochi.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-anim"];
+var DROP_DURATION = 2010;
+var HIDE_DURATION = 420;
+var SETTLE_DURATION = 500;
+var mochi_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "mochi",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		size: { default: 40 },
+		animate: {
+			type: Boolean,
+			default: false
+		},
+		thinking: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"idle": {
+			type: Boolean,
+			default: false
+		},
+		"idleModifiers": {}
+	}),
+	emits: ["update:idle"],
+	setup(__props) {
+		(0, vue.useCssVars)((_ctx) => ({
+			"v51b30026": sizePx.value,
+			"v54792142": rotate.value
+		}));
+		const props = __props;
+		const idle = (0, vue.useModel)(__props, "idle");
+		const durations = {
+			"blink-twice": 440,
+			"blink-once": 160,
+			"look-blink-twice": 3e3,
+			"look-blink-once": 2800
+		};
+		const weights = [
+			["blink-twice", 35],
+			["blink-once", 35],
+			["look-blink-twice", 15],
+			["look-blink-once", 15]
+		];
+		const rotation = {
+			bottom: "0deg",
+			right: "-90deg",
+			top: "180deg",
+			left: "90deg"
+		};
+		const order = [
+			"bottom",
+			"right",
+			"top",
+			"left"
+		];
+		const anim = (0, vue.ref)("");
+		const peek = (0, vue.ref)("");
+		const peekSide = (0, vue.ref)("bottom");
+		const sizePx = (0, vue.computed)(() => `${props.size}px`);
+		const rotate = (0, vue.computed)(() => rotation[peekSide.value]);
+		let retired = false;
+		let frame;
+		let timer;
+		let peekTimer;
+		function pick() {
+			let r = Math.random() * 100;
+			for (const [name, weight] of weights) {
+				r -= weight;
+				if (r <= 0) return name;
+			}
+			return "blink-twice";
+		}
+		function cycle() {
+			clearTimeout(timer);
+			cancelAnimationFrame(frame ?? 0);
+			anim.value = "";
+			if (!props.animate || peek.value) return;
+			frame = requestAnimationFrame(() => {
+				const next = pick();
+				anim.value = next;
+				timer = setTimeout(cycle, durations[next] + 800 + Math.random() * 1600);
+			});
+		}
+		function later(fn, ms) {
+			clearTimeout(peekTimer);
+			peekTimer = setTimeout(fn, ms);
+		}
+		function drop() {
+			peekSide.value = "bottom";
+			peek.value = "drop";
+			cycle();
+			later(() => {
+				peek.value = "out";
+			}, DROP_DURATION);
+		}
+		function settle() {
+			peekSide.value = "bottom";
+			peek.value = "home";
+			later(() => {
+				peek.value = "";
+				cycle();
+			}, SETTLE_DURATION);
+		}
+		function hop() {
+			peek.value = "hidden";
+			later(() => {
+				const next = order[(order.indexOf(peekSide.value) + 1) % order.length];
+				if (next === "bottom") {
+					retired = true;
+					settle();
+					idle.value = false;
+					return;
+				}
+				peekSide.value = next;
+				peek.value = "out";
+			}, HIDE_DURATION);
+		}
+		function poke() {
+			if (peek.value === "out") hop();
+			else if (!peek.value && props.animate && !retired) idle.value = true;
+		}
+		(0, vue.watch)(() => idle.value && props.animate, (active) => {
+			if (active && !retired && !peek.value) drop();
+			else if (!active && peek.value && peek.value !== "home") {
+				peek.value = "hidden";
+				later(settle, HIDE_DURATION);
+			}
+		}, { immediate: true });
+		(0, vue.watch)(() => props.animate, cycle);
+		(0, vue.onMounted)(cycle);
+		(0, vue.onBeforeUnmount)(() => {
+			cancelAnimationFrame(frame ?? 0);
+			clearTimeout(timer);
+			clearTimeout(peekTimer);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)("celeste-mochi", peek.value && `celeste-mochi-peek-${peek.value}`, props.thinking && "celeste-mochi-thinking", props.class)),
+				"data-anim": anim.value || void 0,
+				"aria-hidden": "true"
+			}, [(0, vue.createElementVNode)("div", { class: "celeste-mochi-stage" }, [(0, vue.createElementVNode)("div", { class: "celeste-mochi-chan" }, [(0, vue.createElementVNode)("div", {
+				class: "celeste-mochi-body",
+				onClick: poke
+			}), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("div", { class: "celeste-mochi-eyes" }, [(0, vue.createElementVNode)("div", { class: "celeste-mochi-eye celeste-mochi-eye-l" }), (0, vue.createElementVNode)("div", { class: "celeste-mochi-eye celeste-mochi-eye-r" })], -1))])])], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/components/mochi/mochi.vue
+var mochi_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(mochi_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ce7048d3"]]);
+//#endregion
+Object.defineProperty(exports, "mochi_default", {
+	enumerable: true,
+	get: function() {
+		return mochi_default;
+	}
+});

package/dist/cjs/index.cjs

@@ -99,6 +99,7 @@ const require_tooltip_provider = require("./chunks/tooltip-provider.cjs");
 const require_tooltip_root = require("./chunks/tooltip-root.cjs");
 const require_tooltip = require("./chunks/tooltip.cjs");
 const require_label = require("./chunks/label2.cjs");
+const require_mochi = require("./chunks/mochi.cjs");
 const require_modal_body = require("./chunks/modal-body.cjs");
 const require_modal_close = require("./chunks/modal-close.cjs");
 const require_modal_content = require("./chunks/modal-content.cjs");
@@ -281,6 +282,7 @@ exports.HintText = require_hint_text.hint_text_default;
 exports.HueSlider = require_hue_slider.hue_slider_default;
 exports.Label = require_label.label_default;
 exports.LinkButton = require_link_button.link_button_default;
+exports.Mochi = require_mochi.mochi_default;
 exports.Modal = require_modal.modal_default;
 exports.ModalBody = require_modal_body.modal_body_default;
 exports.ModalClose = require_modal_close.modal_close_default;

package/dist/cjs/mochi.cjs

@@ -0,0 +1,2 @@
+const require_mochi = require("./chunks/mochi.cjs");
+module.exports = require_mochi.mochi_default;

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './dropdown-menu';
 export * from './file-upload';
 export * from './hint-text';
 export * from './label';
+export * from './mochi';
 export * from './modal';
 export * from './pagination';
 export * from './popover';

package/dist/components/mochi/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mochi';
+export { default as Mochi } from './mochi';

package/dist/components/mochi/mochi.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    size?: number;
+    animate?: boolean;
+    thinking?: boolean;
+};
+type __VLS_ModelProps = {
+    'idle'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:idle": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:idle"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: number;
+    animate: boolean;
+    thinking: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/es/chunks/components.js

@@ -91,6 +91,7 @@ import { t as tooltip_provider_default } from "./tooltip-provider.js";
 import { t as tooltip_root_default } from "./tooltip-root.js";
 import { t as tooltip_default } from "./tooltip.js";
 import { t as label_default } from "./label2.js";
+import { t as mochi_default } from "./mochi.js";
 import { t as modal_body_default } from "./modal-body.js";
 import { t as modal_close_default } from "./modal-close.js";
 import { t as modal_content_default } from "./modal-content.js";
@@ -222,6 +223,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	HueSlider: () => hue_slider_default,
 	Label: () => label_default,
 	LinkButton: () => link_button_default,
+	Mochi: () => mochi_default,
 	Modal: () => modal_default,
 	ModalBody: () => modal_body_default,
 	ModalClose: () => modal_close_default,