@m1kapp/kit 0.0.24 → 0.0.26

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, CSSProperties, RefObject } from 'react';
+import React__default, { ReactNode, CSSProperties, RefObject, SyntheticEvent } from 'react';
 import { MetadataRoute, Viewport } from 'next';
 import { ClassValue } from 'clsx';
 
@@ -45,13 +45,19 @@ interface AppShellProps {
     maxWidth?: number;
     /** Max height of the shell. Default: 932px (iPhone 15 Pro Max) */
     maxHeight?: number;
+    /**
+     * Accent color (any CSS color) propagated to kit components as `--kit-accent`.
+     * Lets you re-skin the whole shell — Switch, SegmentedControl, ChatBubble,
+     * ActionCard, ListRow… — in one place. e.g. accent="#e2603f"
+     */
+    accent?: string;
     style?: CSSProperties;
 }
 /**
  * Mobile app-like container with rounded corners, shadow, and ring.
  * Centers content and constrains width for a phone-like viewport.
  */
-declare function AppShell({ children, className, maxWidth, maxHeight, style, }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ children, className, maxWidth, maxHeight, accent, style, }: AppShellProps): react_jsx_runtime.JSX.Element;
 interface AppShellHeaderProps {
     children: ReactNode;
     className?: string;
@@ -108,6 +114,12 @@ interface TabProps {
 }
 /**
  * Individual tab button for the TabBar.
+ *
+ * The active state is conveyed two ways so it works for BOTH `currentColor`
+ * SVG icons and full-color emoji icons (emoji ignore `color`): the inactive
+ * tab is dimmed (opacity + slight desaturation) with a muted label, while the
+ * active tab is full-strength with its label tinted `activeColor`. The icon is
+ * wrapped at a consistent size so mixed emoji/SVG icons line up.
  */
 declare function Tab({ active, onClick, icon, label, activeColor }: TabProps): react_jsx_runtime.JSX.Element;
 
@@ -202,6 +214,20 @@ interface WatermarkProps {
      * Default: false (badge is shown)
      */
     hidePoweredBy?: boolean;
+    /**
+     * m1k.app visitor-tracker slug, forwarded to the embedded PoweredByKit badge.
+     * Falls back to `NEXT_PUBLIC_M1K_SLUG`. No slug → no tracking (off by default).
+     */
+    trackSlug?: string;
+    /** Set false to disable the visitor beacon even when a slug is present */
+    track?: boolean;
+    /** Mark the site as claimed (인증됨). When tracking but not claimed, a "미인증" marker shows. */
+    claimed?: boolean;
+    /** Visitor counts for the footer ({ today, total }). Omit to auto-fetch from m1k.app. */
+    counts?: {
+        today?: number;
+        total?: number;
+    };
 }
 /**
  * Full-screen colored background with repeating animated text watermark pattern.
@@ -209,7 +235,7 @@ interface WatermarkProps {
  * Renders as a single SVG element with a <pattern> — zero extra DOM nodes per tile.
  * Sponsor tiles inside the pattern are clickable and support hover effects.
  */
-declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, }: WatermarkProps): react_jsx_runtime.JSX.Element;
+declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, trackSlug, track, claimed, counts, }: WatermarkProps): react_jsx_runtime.JSX.Element;
 
 declare const colors: {
     readonly blue: "#3b82f6";
@@ -670,6 +696,31 @@ interface PoweredByKitProps {
     version?: string;
     /** "default" for inside AppShell, "overlay" for on top of Watermark background */
     variant?: "default" | "overlay";
+    /**
+     * m1k.app visitor-tracker slug. When set (explicitly or via the
+     * `NEXT_PUBLIC_M1K_SLUG` env var) a tiny hidden beacon counts each page view.
+     * No slug → no tracking (off by default). Register one with `npx m1kkit track`.
+     */
+    slug?: string;
+    /** Tracker host. Default: "m1k.app" */
+    trackerHost?: string;
+    /** Set false to disable the visitor beacon even when a slug is present */
+    track?: boolean;
+    /**
+     * Whether the registered site has been claimed (귀속/인증) to an m1k.app account.
+     * When tracking is active but this is false, the badge shows a "미인증" marker.
+     * Set true after running `npx m1kkit claim`. Defaults to false.
+     */
+    claimed?: boolean;
+    /**
+     * Visitor counts to display ({ today, total }). If omitted, fetched from
+     * `https://<trackerHost>/api/sites/<slug>` (needs CORS). Pass explicitly to
+     * avoid the fetch (SSR, custom source, or cross-origin without CORS).
+     */
+    counts?: {
+        today?: number;
+        total?: number;
+    };
     className?: string;
 }
 /**
@@ -679,7 +730,571 @@ interface PoweredByKitProps {
  * Fetches /kit-stats.json (generated by `m1kkit stats`) on first open
  * to show real code analysis results.
  */
-declare function PoweredByKit({ statsUrl, version, variant, className }: PoweredByKitProps): react_jsx_runtime.JSX.Element;
+declare function PoweredByKit({ statsUrl, version, variant, slug, trackerHost, track, claimed, counts, className }: PoweredByKitProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    /** Whether the switch is on */
+    checked: boolean;
+    /** Called with the next value when toggled */
+    onChange: (next: boolean) => void;
+    disabled?: boolean;
+    /** On-state track color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Accessible label */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * On/off toggle switch. Pill track + sliding knob, adapts to dark mode.
+ * On-state color follows `--kit-accent` (set via `<AppShell accent>`) or the `accent` prop.
+ *
+ * @example
+ * <Switch checked={on} onChange={setOn} aria-label="알림" />
+ * <Switch checked={on} onChange={setOn} accent="#e2603f" />
+ */
+declare function Switch({ checked, onChange, disabled, accent, className, ...rest }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface FieldProps {
+    /** Label shown above (or beside, when `inline`) the input */
+    label: ReactNode;
+    value: string;
+    /** Omit to render a read-only display row */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** input type (text, email, tel…). Ignored when `multiline`. */
+    type?: string;
+    /** Render a textarea instead of an input */
+    multiline?: boolean;
+    rows?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Helper text under the field */
+    hint?: ReactNode;
+    /** Label beside the input on one line (settings-row style) instead of stacked */
+    inline?: boolean;
+    className?: string;
+}
+/**
+ * Labeled input row for forms. Stacked by default, or `inline` for a
+ * settings-style "label … value" row. Supports textarea via `multiline`.
+ *
+ * @example
+ * <Field label="이름" value={name} onChange={setName} placeholder="이름" />
+ * <Field label="메모" value={memo} onChange={setMemo} multiline rows={3} />
+ * <Field label="이메일" value={email} inline readOnly />
+ */
+declare function Field({ label, value, onChange, placeholder, type, multiline, rows, readOnly, disabled, hint, inline, className, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentOption<T extends string> {
+    value: T;
+    label: ReactNode;
+}
+interface SegmentedControlProps<T extends string> {
+    options: SegmentOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Active-segment label color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Inline segmented toggle (e.g. 오늘 / 이번 주). The active segment lifts onto a
+ * card; its label takes the accent color. For global bottom nav use `TabBar` instead.
+ *
+ * @example
+ * <SegmentedControl
+ *   value={view}
+ *   onChange={setView}
+ *   options={[{ value: "today", label: "오늘" }, { value: "week", label: "이번 주" }]}
+ * />
+ */
+declare function SegmentedControl<T extends string>({ options, value, onChange, accent, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
+
+type ChatRole = "user" | "assistant";
+interface ChatBubbleProps {
+    role: ChatRole;
+    children: ReactNode;
+    /** User-bubble background (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Chat message bubble. User messages align right with the accent color and a
+ * tail on the bottom-right; assistant messages align left on a neutral surface.
+ * Preserves newlines (`whitespace-pre-wrap`).
+ *
+ * @example
+ * <ChatBubble role="user">오늘 3시 회의 잡아줘</ChatBubble>
+ * <ChatBubble role="assistant">네, 잡아드릴게요.</ChatBubble>
+ */
+declare function ChatBubble({ role, children, accent, className }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+interface TypingIndicatorProps {
+    className?: string;
+}
+/**
+ * Three-dot "typing…" indicator on an assistant-style surface.
+ *
+ * @example
+ * {pending && <TypingIndicator />}
+ */
+declare function TypingIndicator({ className }: TypingIndicatorProps): react_jsx_runtime.JSX.Element;
+interface ChatMessage {
+    id?: string | number;
+    role: ChatRole;
+    content: ReactNode;
+    /** Epoch ms — required for day dividers */
+    timestamp?: number;
+}
+interface MessageListProps {
+    messages: ChatMessage[];
+    /** Insert a date divider when the day changes between messages */
+    dayDivider?: boolean;
+    /** User-bubble accent (forwarded to each ChatBubble) */
+    accent?: string;
+    /** Format a divider label from a timestamp. Defaults to a Korean date label. */
+    formatDay?: (ts: number) => string;
+    /** Rendered after the last message — e.g. a <TypingIndicator /> */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Renders a vertical list of chat messages as bubbles, optionally inserting a
+ * date divider when the calendar day changes (requires `timestamp` on messages).
+ *
+ * @example
+ * <MessageList messages={msgs} dayDivider>
+ *   {pending && <TypingIndicator />}
+ * </MessageList>
+ */
+declare function MessageList({ messages, dayDivider, accent, formatDay, children, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+
+type ActionCardState = "pending" | "loading" | "done" | "cancelled";
+interface ActionCardLabels {
+    /** Title shown while pending (defaults to `title`) */
+    pending?: string;
+    loading?: string;
+    done?: string;
+    cancelled?: string;
+    confirm?: string;
+    cancel?: string;
+}
+interface ActionCardProps {
+    /** Title shown in the pending state */
+    title?: string;
+    /** Lines of content (e.g. a proposed plan) */
+    items?: ReactNode[];
+    /** Free-form body rendered below items */
+    children?: ReactNode;
+    state?: ActionCardState;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    /** Accent (any CSS color) for the pending border/title/confirm button. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Override default Korean status labels */
+    labels?: ActionCardLabels;
+    className?: string;
+}
+/**
+ * Inline confirm card for the "propose → confirm → execute" pattern (LLM tool
+ * calls, etc.). Unlike `Dialog` it sits inside the message flow. Its color and
+ * affordances change with `state`; action buttons show only while `pending`.
+ *
+ * @example
+ * <ActionCard
+ *   title="이렇게 기록해둘까요?"
+ *   state={state}
+ *   items={["🗓 6/4 15:00 디자인리뷰"]}
+ *   onConfirm={commit}
+ *   onCancel={cancel}
+ * />
+ */
+declare function ActionCard({ title, items, children, state, onConfirm, onCancel, accent, labels, className, }: ActionCardProps): react_jsx_runtime.JSX.Element;
+
+interface ListRowProps {
+    /** Left color bar + active highlight tint. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Leading column, e.g. a time like "14:00" */
+    lead?: ReactNode;
+    /** Secondary leading line under `lead`, e.g. an end time */
+    leadSub?: ReactNode;
+    title: ReactNode;
+    /** Secondary line under the title */
+    sub?: ReactNode;
+    /** Trailing content, e.g. "● 지금" or a count badge */
+    trailing?: ReactNode;
+    /** Highlight as the current/active row */
+    active?: boolean;
+    /**
+     * Scale the row height in units (1 = base height, clamped 46–130px). Useful
+     * for any timeline where rows have different magnitudes.
+     * For a schedule, pass `durationMinutes / 30`.
+     */
+    heightScale?: number;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Timeline / list row: left color bar, a leading column (time), a title with an
+ * optional subtitle, and trailing content. Height can scale via `heightScale` —
+ * handy for schedules, to-dos, Gantt-style timelines, and time blocks.
+ *
+ * @example
+ * <ListRow accent="#7fc06a" lead="14:00" title="회의" sub="👥 김상훈" heightScale={2} onClick={open} />
+ * <ListRow lead="09:00" title="스탠드업" trailing="● 지금" active />
+ */
+declare function ListRow({ accent, lead, leadSub, title, sub, trailing, active, heightScale, onClick, className, }: ListRowProps): react_jsx_runtime.JSX.Element;
+
+interface LinkifiedTextProps {
+    children: string;
+    /** Link color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Also linkify bare domains with a path, e.g. `meet.google.com/abc`. Default: true */
+    linkifyBareDomains?: boolean;
+    className?: string;
+}
+/**
+ * Renders plain text with URLs auto-linked. Preserves newlines
+ * (`whitespace-pre-wrap`). Link color follows `--kit-accent` or the `accent` prop.
+ *
+ * @example
+ * <LinkifiedText>회의록: https://docs.google.com/… 그리고 meet.google.com/abc-def</LinkifiedText>
+ */
+declare function LinkifiedText({ children, accent, linkifyBareDomains, className, }: LinkifiedTextProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    label: ReactNode;
+    /** Optional icon/emoji shown in the badge while incomplete */
+    icon?: ReactNode;
+}
+interface StepperProps {
+    steps: Step[];
+    /** Active step index (0-based) */
+    current: number;
+    /** Last completed index (default: current - 1). Steps ≤ this show a check. */
+    completedThrough?: number;
+    /** Makes steps up to `current` clickable */
+    onStepClick?: (index: number) => void;
+    /** Active/complete color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Horizontal multi-step progress indicator with connectors. Steps before the
+ * cursor show a check, the current step is highlighted, the rest are muted.
+ * Great for wizards, multi-phase flows, and onboarding.
+ *
+ * @example
+ * <Stepper current={phase} onStepClick={setPhase} steps={[
+ *   { label: "분석", icon: "📝" },
+ *   { label: "준비", icon: "📸" },
+ *   { label: "생성", icon: "✨" },
+ * ]} />
+ */
+declare function Stepper({ steps, current, completedThrough, onStepClick, accent, className, }: StepperProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleProps {
+    title: ReactNode;
+    /** Subtitle shown only while collapsed */
+    subtitle?: ReactNode;
+    /** Small badge text shown only while collapsed */
+    badge?: ReactNode;
+    /** Leading marker — a step number, letter, or icon */
+    leading?: ReactNode;
+    open: boolean;
+    onToggle: () => void;
+    /** Show the leading marker as completed (accent + check) */
+    completed?: boolean;
+    /** Small "선택"-style optional tag next to the title */
+    optionalTag?: ReactNode;
+    /** Accent (any CSS color) for expanded ring / completed marker. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Collapsible card with a header (leading marker, title, optional subtitle/badge)
+ * and a body that shows when `open`. State-aware styling for expanded/completed.
+ * Good for step lists, accordions, and disclosure sections.
+ *
+ * @example
+ * <Collapsible leading={1} title="페르소나 분석" subtitle="스타일 파악"
+ *   open={open === 1} onToggle={() => setOpen(open === 1 ? null : 1)} completed>
+ *   <p>…</p>
+ * </Collapsible>
+ */
+declare function Collapsible({ title, subtitle, badge, leading, open, onToggle, completed, optionalTag, accent, children, className, }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Clipboard copy + feedback. `copied` is `true` (or the passed `key`) for
+ * `timeout` ms after a copy, so one hook can drive many copy targets.
+ *
+ * @example
+ * const { copied, copy } = useCopy();
+ * copy(text);            // copied === true
+ * copy(text, "row-3");   // copied === "row-3"  (multiple targets)
+ */
+declare function useCopy(timeout?: number): {
+    copied: string | boolean | null;
+    copy: (text: string, key?: string) => void;
+};
+interface CopyButtonProps {
+    /** Text to copy */
+    text: string;
+    /** Button label (default: "복사") */
+    children?: ReactNode;
+    /** Label shown briefly after copying (default: "복사됨!") */
+    copiedLabel?: ReactNode;
+    /** Accent (any CSS color) for the copied state. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    timeout?: number;
+    className?: string;
+}
+/**
+ * Button that copies `text` to the clipboard and flips its label to a confirmation.
+ *
+ * @example
+ * <CopyButton text="npm i @m1kapp/kit">설치 명령 복사</CopyButton>
+ */
+declare function CopyButton({ text, children, copiedLabel, accent, timeout, className, }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+
+type ImgStatus = "loading" | "loaded" | "failed";
+/**
+ * Tries an ordered list of image URLs, falling back to the next on error or
+ * when an image loads too small/broken. Handles already-cached images.
+ * Returns props to spread onto an `<img>`.
+ *
+ * @example
+ * const { status, url, refCallback, handleLoad, handleError } = useImageLoader([a, b]);
+ * if (status === "failed") return <Fallback />;
+ * return <img ref={refCallback} src={url!} onLoad={handleLoad} onError={handleError} />;
+ */
+declare function useImageLoader(urls: string[]): {
+    status: ImgStatus;
+    url: string | null;
+    refCallback: (el: HTMLImageElement | null) => void;
+    handleLoad: (e: SyntheticEvent<HTMLImageElement>) => void;
+    handleError: () => void;
+};
+interface ImgProps {
+    /** Single source, or use `candidates` for ordered fallback */
+    src?: string | null;
+    /** Ordered candidate URLs; first one that loads wins */
+    candidates?: string[];
+    /** Shown when all sources fail (or none given) */
+    fallback?: ReactNode;
+    alt?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * `<img>` with multi-URL fallback and a render fallback when every source fails.
+ *
+ * @example
+ * <Img candidates={[avatarUrl, gravatar]} fallback={<Avatar fallback="MH" />} alt="" className="h-10 w-10 rounded-full" />
+ */
+declare function Img({ src, candidates, fallback, alt, className, style }: ImgProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption<T extends string | number> {
+    value: T;
+    label: ReactNode;
+    /** Optional count shown on the right (e.g. number of matches) */
+    count?: number;
+    /** Disable selection (e.g. count === 0) */
+    disabled?: boolean;
+}
+interface SelectProps<T extends string | number> {
+    options: SelectOption<T>[];
+    value: T | null;
+    onChange: (value: T | null) => void;
+    /** Trigger text when nothing is selected (default: "전체") */
+    placeholder?: ReactNode;
+    /** Show a top "clear" row that sets value to null (default: true) */
+    allowClear?: boolean;
+    /** Label for the clear row (default: "전체") */
+    clearLabel?: ReactNode;
+    /** Accent (any CSS color) for the selected trigger. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Styled dropdown select: a trigger button + an anchored options list with
+ * optional count badges and disabled options. Closes on outside click / Escape.
+ *
+ * @example
+ * <Select value={cat} onChange={setCat} placeholder="카테고리"
+ *   options={[{ value: "a", label: "초급", count: 12 }, { value: "b", label: "고급", count: 0, disabled: true }]} />
+ */
+declare function Select<T extends string | number>({ options, value, onChange, placeholder, allowClear, clearLabel, accent, className, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    /** Selected color as a hex string (e.g. "#e2603f") */
+    value: string;
+    onChange: (hex: string) => void;
+    /** Preset swatches. Defaults to the kit `colors` palette. */
+    palette?: string[];
+    /** Allow picking an arbitrary color via the native color input (default: true) */
+    allowCustom?: boolean;
+    className?: string;
+}
+/**
+ * Color swatch picker — preset circles plus an optional custom color input.
+ * The selected swatch gets a ring. Any hex is allowed via the custom input.
+ *
+ * @example
+ * <ColorPicker value={color} onChange={setColor} />
+ * <ColorPicker value={color} onChange={setColor} palette={["#e2603f", "#3b82f6"]} />
+ */
+declare function ColorPicker({ value, onChange, palette, allowCustom, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    code: string;
+    /** Small uppercase label above the code (e.g. "bash", "install") */
+    label?: ReactNode;
+    /** Hint shown on the right while idle (default: "탭하여 복사") */
+    copyHint?: ReactNode;
+    /** Confirmation shown after copying (default: "복사됨!") */
+    copiedLabel?: ReactNode;
+    /** Accent (any CSS color) for the copied state. Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Tap-to-copy code block with a label and copy feedback.
+ *
+ * @example
+ * <CodeBlock label="install" code="npm i @m1kapp/kit" />
+ */
+declare function CodeBlock({ code, label, copyHint, copiedLabel, accent, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface InlineEditProps {
+    value: string;
+    /** Called with the trimmed value on commit (Enter or blur) */
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** Disable editing — renders as plain text */
+    readOnly?: boolean;
+    /** Text color (any CSS color), e.g. an entity's color */
+    color?: string;
+    /** Class applied to both the display and the input (for shared typography) */
+    className?: string;
+}
+/**
+ * Tap-to-edit text. Shows the value as text; clicking turns it into an
+ * autofocused input that commits on Enter/blur and cancels on Escape.
+ *
+ * @example
+ * <InlineEdit value={name} onChange={rename} placeholder="이름" className="text-lg font-bold" />
+ */
+declare function InlineEdit({ value, onChange, placeholder, readOnly, color, className, }: InlineEditProps): react_jsx_runtime.JSX.Element;
+
+interface BarListItem {
+    label: ReactNode;
+    value: number;
+    /** Optional link — the label becomes an anchor */
+    href?: string;
+}
+interface BarListProps {
+    items: BarListItem[];
+    /** Bar fill color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Format the trailing value (default: localized number) */
+    formatValue?: (value: number) => ReactNode;
+    /** Bars are sized relative to this. Default: sum of values. Pass the max for "share of peak". */
+    total?: number;
+    className?: string;
+}
+/**
+ * Horizontal bar list for ranked breakdowns (top pages, referrers, tags…).
+ * Each row is a labeled bar whose width is proportional to its value.
+ *
+ * @example
+ * <BarList items={[{ label: "/", value: 120 }, { label: "/about", value: 64, href: "/about" }]} />
+ */
+declare function BarList({ items, accent, formatValue, total, className }: BarListProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressRingProps {
+    /** Current value */
+    value: number;
+    /** Max value (default 1, so `value` is treated as a 0–1 fraction) */
+    max?: number;
+    /** Diameter in px (default 96) */
+    size?: number;
+    /** Stroke width in px (default 8) */
+    thickness?: number;
+    /** Progress stroke color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    /** Center content (e.g. the number). Defaults to a percentage. */
+    children?: ReactNode;
+    /** Animate the stroke from empty on mount (default: true) */
+    animate?: boolean;
+    className?: string;
+}
+/**
+ * Circular progress ring with a center slot. Good for scores, completion, and
+ * quota indicators.
+ *
+ * @example
+ * <ProgressRing value={7} max={10}><span className="text-2xl font-black">7</span></ProgressRing>
+ * <ProgressRing value={0.42} size={64} />
+ */
+declare function ProgressRing({ value, max, size, thickness, accent, children, animate, className, }: ProgressRingProps): react_jsx_runtime.JSX.Element;
+
+interface CountdownLabels {
+    days?: string;
+    hours?: string;
+    mins?: string;
+    secs?: string;
+}
+interface CountdownProps {
+    /** Target time — Date, epoch ms, or ISO/parseable date string */
+    to: Date | number | string;
+    /** Called once when the target is reached */
+    onComplete?: () => void;
+    /** Render when the target has passed. Default: a "+Nd" overdue line. */
+    renderOverdue?: (daysOverdue: number) => ReactNode;
+    /** Hide the days cell when 0 */
+    hideZeroDays?: boolean;
+    labels?: CountdownLabels;
+    /** Separator/label color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Live countdown to a target time (days/hours/mins/secs), ticking each second.
+ * Renders an SSR-safe placeholder on first paint and supports overdue display.
+ *
+ * @example
+ * <Countdown to="2026-12-31" onComplete={celebrate} />
+ * <Countdown to={deadline} hideZeroDays />
+ */
+declare function Countdown({ to, onComplete, renderOverdue, hideZeroDays, labels, accent, className, }: CountdownProps): react_jsx_runtime.JSX.Element | null;
+
+interface CarouselProps {
+    /** Total number of slides */
+    count: number;
+    /** Active slide index (controlled) */
+    index: number;
+    onChange: (index: number) => void;
+    /** Active slide content (the caller renders based on `index`) */
+    children: ReactNode;
+    /** Wrap around at the ends (default: true) */
+    loop?: boolean;
+    showArrows?: boolean;
+    showDots?: boolean;
+    /** Active dot color (any CSS color). Defaults to `var(--kit-accent)`. */
+    accent?: string;
+    className?: string;
+}
+/**
+ * Swipeable carousel with dot indicators and prev/next arrows. Controlled —
+ * you hold the index and render the active slide as children.
+ *
+ * @example
+ * <Carousel count={items.length} index={i} onChange={setI}>
+ *   <SlideView item={items[i]} />
+ * </Carousel>
+ */
+declare function Carousel({ count, index, onChange, children, loop, showArrows, showDots, accent, className, }: CarouselProps): react_jsx_runtime.JSX.Element;
 
 type PWAInstallState = "android-ready" | "ios-safari" | "installed" | "unsupported";
 interface UsePWAInstallReturn {
@@ -893,5 +1508,21 @@ declare function formatNumber(n: number): string;
 declare function formatPrice(amount: number, currency?: string, locale?: string): string;
 
 declare function cn(...inputs: ClassValue[]): string;
+declare function formatDuration(ms: number, opts?: {
+    style?: "short" | "clock";
+}): string;
+interface DayGroup<T> {
+    /** YYYY-MM-DD */
+    date: string;
+    /** 오늘 / 어제 / "M월 D일 (요일)" */
+    label: string;
+    items: T[];
+}
+/**
+ * Korean day label relative to today: "오늘" / "어제" / "4월 19일 (토)".
+ * Shared by `groupByDay` and `MessageList`'s day dividers.
+ */
+declare function formatDayLabel(time: number | string | Date): string;
+declare function groupByDay<T>(items: T[], getTime: (item: T) => number | string | Date): DayGroup<T>[];
 
-export { type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, type ColorName, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, InAppSheet, type InAppSheetProps, KitStyles, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatNumber, formatPrice, mobileViewport, relativeTime, svgIcon, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };
+export { ActionCard, type ActionCardLabels, type ActionCardProps, type ActionCardState, type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Button, type ButtonProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, type ChatRole, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, type ColorName, ColorPicker, type ColorPickerProps, CopyButton, type CopyButtonProps, Countdown, type CountdownLabels, type CountdownProps, type DayGroup, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, Field, type FieldProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, Img, type ImgProps, InAppSheet, type InAppSheetProps, InlineEdit, type InlineEditProps, KitStyles, LinkifiedText, type LinkifiedTextProps, ListRow, type ListRowProps, MessageList, type MessageListProps, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, ProgressRing, type ProgressRingProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, TypingIndicator, type TypingIndicatorProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatDayLabel, formatDuration, formatNumber, formatPrice, groupByDay, mobileViewport, relativeTime, svgIcon, useCopy, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useImageLoader, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };