@k8o/arte-odyssey 8.0.3 → 9.1.0

package/dist/components/overlays/tooltip/tooltip.mjs

@@ -1,21 +1,33 @@
 "use client";
 import { usePlacement, usePopoverContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/popover.mjs";
-import { useMemo } from "react";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/tooltip/tooltip.tsx
+const HOVER_QUERY = "(hover: hover)";
+const useCanHover = () => {
+	return useSyncExternalStore(useCallback((cb) => {
+		const mql = window.matchMedia(HOVER_QUERY);
+		mql.addEventListener("change", cb);
+		return () => {
+			mql.removeEventListener("change", cb);
+		};
+	}, []), () => window.matchMedia(HOVER_QUERY).matches, () => true);
+};
+const noop = () => {};
 const useTooltipTriggerProps = () => {
 	const popover = usePopoverContext();
+	const canHover = useCanHover();
 	return useMemo(() => ({
 		ref: popover.setTriggerRef,
-		onMouseEnter: popover.onOpen,
-		onMouseLeave: popover.onClose,
+		onMouseEnter: canHover ? popover.onOpen : noop,
+		onMouseLeave: canHover ? popover.onClose : noop,
 		onFocus: (e) => {
 			if (e.target.matches(":focus-visible")) popover.onOpen();
 		},
 		onBlur: popover.onClose,
 		"aria-describedby": popover.isOpen ? `${popover.rootId}_list` : void 0
-	}), [popover]);
+	}), [popover, canHover]);
 };
 const Root = ({ children, placement = "bottom" }) => /* @__PURE__ */ jsx(Popover.Root, {
 	closeOnClickAway: false,
@@ -28,6 +40,7 @@ const Trigger = ({ renderItem }) => renderItem(useTooltipTriggerProps());
 const Content = ({ children }) => {
 	const placement = usePlacement();
 	const popover = usePopoverContext();
+	const canHover = useCanHover();
 	const translate = {
 		top: { translateY: 5 },
 		bottom: { translateY: -5 },
@@ -55,8 +68,8 @@ const Content = ({ children }) => {
 			id,
 			onBlur: popover.onClose,
 			onFocus: popover.onOpen,
-			onMouseEnter: popover.onOpen,
-			onMouseLeave: popover.onClose,
+			onMouseEnter: canHover ? popover.onOpen : noop,
+			onMouseLeave: canHover ? popover.onClose : noop,
 			ref,
 			role: "tooltip",
 			children

package/dist/helpers/chain.d.mts

@@ -0,0 +1,5 @@
+//#region src/helpers/chain.d.ts
+type AnyFunction = (...args: never[]) => unknown;
+declare const chain: <T extends AnyFunction>(...callbacks: Array<T | undefined>) => (...args: Parameters<T>) => void;
+//#endregion
+export { chain };

package/dist/helpers/chain.mjs

@@ -0,0 +1,29 @@
+//#region src/helpers/chain.ts
+const chain = (...callbacks) => (...args) => {
+	for (const callback of callbacks) callback?.(...args);
+};
+if (import.meta.vitest) describe("chain", () => {
+	it("渡されたコールバックを順番に呼び出す", () => {
+		const calls = [];
+		chain(() => calls.push(1), () => calls.push(2), () => calls.push(3))();
+		expect(calls).toEqual([
+			1,
+			2,
+			3
+		]);
+	});
+	it("引数を全てのコールバックに渡す", () => {
+		const fn1 = vi.fn();
+		const fn2 = vi.fn();
+		chain(fn1, fn2)("a", 1);
+		expect(fn1).toHaveBeenCalledWith("a", 1);
+		expect(fn2).toHaveBeenCalledWith("a", 1);
+	});
+	it("undefinedのコールバックはスキップする", () => {
+		const fn = vi.fn();
+		chain(void 0, fn, void 0)();
+		expect(fn).toHaveBeenCalledOnce();
+	});
+});
+//#endregion
+export { chain };

package/dist/helpers/create-safe-context.d.mts

@@ -0,0 +1,7 @@
+import { Context } from "react";
+
+//#region src/helpers/create-safe-context.d.ts
+type CreateSafeContextReturn<T> = readonly [Context<T | null>, () => T];
+declare const createSafeContext: <T>(errorMessage: string) => CreateSafeContextReturn<T>;
+//#endregion
+export { createSafeContext };

package/dist/helpers/create-safe-context.mjs

@@ -0,0 +1,13 @@
+import { createContext, use } from "react";
+//#region src/helpers/create-safe-context.ts
+const createSafeContext = (errorMessage) => {
+	const Context = createContext(null);
+	const useSafeContext = () => {
+		const value = use(Context);
+		if (value === null) throw new Error(errorMessage);
+		return value;
+	};
+	return [Context, useSafeContext];
+};
+//#endregion
+export { createSafeContext };

package/dist/helpers/index.d.mts

@@ -1,9 +1,6 @@
+import { chain } from "./chain.mjs";
 import { cn } from "./cn.mjs";
-import { findAllColors } from "./color/find-all-colors.mjs";
-import { isInternalRoute } from "./is-internal-route.mjs";
-import { between } from "./number/between.mjs";
-import { cast } from "./number/cast.mjs";
-import { commalize } from "./number/commalize.mjs";
-import { toPrecision } from "./number/to-precision.mjs";
-import { uuidV4 } from "./uuid-v4.mjs";
-export { between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, uuidV4 };
+import { createSafeContext } from "./create-safe-context.mjs";
+import { mergeProps } from "./merge-props.mjs";
+import { mergeRefs } from "./merge-refs.mjs";
+export { chain, cn, createSafeContext, mergeProps, mergeRefs };

package/dist/helpers/index.mjs

@@ -1,9 +1,6 @@
 import { cn } from "./cn.mjs";
-import { uuidV4 } from "./uuid-v4.mjs";
-import { findAllColors } from "./color/find-all-colors.mjs";
-import { between } from "./number/between.mjs";
-import { toPrecision } from "./number/to-precision.mjs";
-import { cast } from "./number/cast.mjs";
-import { commalize } from "./number/commalize.mjs";
-import { isInternalRoute } from "./is-internal-route.mjs";
-export { between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, uuidV4 };
+import { createSafeContext } from "./create-safe-context.mjs";
+import { chain } from "./chain.mjs";
+import { mergeRefs } from "./merge-refs.mjs";
+import { mergeProps } from "./merge-props.mjs";
+export { chain, cn, createSafeContext, mergeProps, mergeRefs };

package/dist/helpers/merge-props.d.mts

@@ -0,0 +1,6 @@
+//#region src/helpers/merge-props.d.ts
+type Props = Record<string, unknown>;
+type MergedProps<A, B> = Omit<A, keyof B> & B;
+declare const mergeProps: <A extends Props, B extends Props>(base: A, override: B) => MergedProps<A, B>;
+//#endregion
+export { mergeProps };

package/dist/helpers/merge-props.mjs

@@ -0,0 +1,56 @@
+import { cn } from "./cn.mjs";
+import { chain } from "./chain.mjs";
+//#region src/helpers/merge-props.ts
+const isEventHandler = (key, value) => typeof value === "function" && key.startsWith("on") && key.length > 2 && key[2] === (key[2]?.toUpperCase() ?? "");
+const mergeProps = (base, override) => {
+	const result = { ...base };
+	for (const key of Object.keys(override)) {
+		const baseValue = base[key];
+		const overrideValue = override[key];
+		if (key === "className") result[key] = cn(baseValue, overrideValue);
+		else if (key === "style") result[key] = {
+			...baseValue,
+			...overrideValue
+		};
+		else if (isEventHandler(key, baseValue) && isEventHandler(key, overrideValue)) result[key] = chain(baseValue, overrideValue);
+		else if (overrideValue !== void 0) result[key] = overrideValue;
+	}
+	return result;
+};
+if (import.meta.vitest) describe("mergeProps", () => {
+	it("classNameをcnでマージする", () => {
+		const merged = mergeProps({ className: "p-2 text-fg-base" }, { className: "text-fg-mute" });
+		expect(merged.className).toBe("p-2 text-fg-mute");
+	});
+	it("styleを浅くマージする", () => {
+		const merged = mergeProps({ style: {
+			color: "red",
+			fontSize: 12
+		} }, { style: { color: "blue" } });
+		expect(merged.style).toEqual({
+			color: "blue",
+			fontSize: 12
+		});
+	});
+	it("onClickなどのイベントハンドラを連結する", () => {
+		const calls = [];
+		mergeProps({ onClick: () => calls.push("a") }, { onClick: () => calls.push("b") }).onClick();
+		expect(calls).toEqual(["a", "b"]);
+	});
+	it("それ以外のpropsは後勝ちで上書きする", () => {
+		const merged = mergeProps({
+			id: "a",
+			disabled: true
+		}, { id: "b" });
+		expect(merged).toEqual({
+			id: "b",
+			disabled: true
+		});
+	});
+	it("overrideがundefinedの場合はbaseの値を保持する", () => {
+		const merged = mergeProps({ id: "a" }, { id: void 0 });
+		expect(merged.id).toBe("a");
+	});
+});
+//#endregion
+export { mergeProps };

package/dist/hooks/click-away/index.mjs

@@ -9,7 +9,7 @@ const useClickAway = (ref, callback, enabled = true) => {
 			if (element && e.target instanceof Node && !element.contains(e.target)) callback(e);
 		};
 		document.addEventListener("mousedown", handler);
-		document.addEventListener("touchstart", handler);
+		document.addEventListener("touchstart", handler, { passive: true });
 		return () => {
 			document.removeEventListener("mousedown", handler);
 			document.removeEventListener("touchstart", handler);

package/dist/hooks/index.d.mts

@@ -20,4 +20,5 @@ import { useStep } from "./step/index.mjs";
 import { useTimeout } from "./timeout/index.mjs";
 import { useWindowResize } from "./window-resize/index.mjs";
 import { useWindowSize } from "./window-size/index.mjs";
-export { useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useWindowResize, useWindowSize };
+import { WritingMode, useWritingMode } from "./writing-mode/index.mjs";
+export { type WritingMode, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useWindowResize, useWindowSize, useWritingMode };

package/dist/hooks/index.mjs

@@ -1,4 +1,5 @@
 import { useDisclosure } from "./disclosure/index.mjs";
+import { useWritingMode } from "./writing-mode/index.mjs";
 import { useTimeout } from "./timeout/index.mjs";
 import { useClickAway } from "./click-away/index.mjs";
 import { useClient } from "./client/index.mjs";
@@ -20,4 +21,4 @@ import { useSessionStorage } from "./session-storage/index.mjs";
 import { useStep } from "./step/index.mjs";
 import { useWindowResize } from "./window-resize/index.mjs";
 import { useWindowSize } from "./window-size/index.mjs";
-export { useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useWindowResize, useWindowSize };
+export { useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useWindowResize, useWindowSize, useWritingMode };

package/dist/hooks/writing-mode/index.d.mts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+
+//#region src/hooks/writing-mode/index.d.ts
+type WritingMode = 'horizontal' | 'vertical';
+declare const useWritingMode: (ref: RefObject<Element | null>) => WritingMode;
+//#endregion
+export { WritingMode, useWritingMode };

package/dist/hooks/writing-mode/index.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/hooks/writing-mode/index.ts
+const getServerSnapshot = () => "horizontal";
+const resolve = (value) => value.startsWith("vertical") || value.startsWith("sideways") ? "vertical" : "horizontal";
+const useWritingMode = (ref) => {
+	return useSyncExternalStore(useCallback((onChange) => {
+		const el = ref.current;
+		if (!el) return () => {};
+		const observer = new ResizeObserver(onChange);
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+		};
+	}, [ref]), useCallback(() => {
+		const el = ref.current;
+		if (!el) return "horizontal";
+		return resolve(getComputedStyle(el).writingMode);
+	}, [ref]), getServerSnapshot);
+};
+//#endregion
+export { useWritingMode };

package/dist/index.d.mts

@@ -36,9 +36,10 @@ import { Textarea } from "./components/form/textarea/textarea.mjs";
 import { ArteOdyssey } from "./components/icons/arte-odyssey.mjs";
 import { GitHubIcon } from "./components/icons/github-mark.mjs";
 import { Logo, LogoIcon } from "./components/icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
 import { QiitaIcon } from "./components/icons/qiita.mjs";
 import { TwitterIcon } from "./components/icons/twitter.mjs";
+import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
 import { ScrollLinked } from "./components/layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./components/layout/separator/separator.mjs";
 import { Anchor } from "./components/navigation/anchor/anchor.mjs";
@@ -54,14 +55,11 @@ import { useOpenContext } from "./components/overlays/popover/hooks.mjs";
 import { Popover } from "./components/overlays/popover/popover.mjs";
 import { ArteOdysseyProvider } from "./components/providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
+import { chain } from "./helpers/chain.mjs";
 import { cn } from "./helpers/cn.mjs";
-import { findAllColors } from "./helpers/color/find-all-colors.mjs";
-import { isInternalRoute } from "./helpers/is-internal-route.mjs";
-import { between } from "./helpers/number/between.mjs";
-import { cast } from "./helpers/number/cast.mjs";
-import { commalize } from "./helpers/number/commalize.mjs";
-import { toPrecision } from "./helpers/number/to-precision.mjs";
-import { uuidV4 } from "./helpers/uuid-v4.mjs";
+import { createSafeContext } from "./helpers/create-safe-context.mjs";
+import { mergeProps } from "./helpers/merge-props.mjs";
+import { mergeRefs } from "./helpers/merge-refs.mjs";
 import { useBreakpoint } from "./hooks/breakpoint/index.mjs";
 import { useClickAway } from "./hooks/click-away/index.mjs";
 import { useClient } from "./hooks/client/index.mjs";
@@ -84,4 +82,5 @@ import { useStep } from "./hooks/step/index.mjs";
 import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+import { WritingMode, useWritingMode } from "./hooks/writing-mode/index.mjs";
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, WritingMode, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/index.mjs

@@ -2,14 +2,16 @@ import { cn } from "./helpers/cn.mjs";
 import { Spinner } from "./components/feedback/spinner/spinner.mjs";
 import { Button } from "./components/buttons/button/button.mjs";
 import { useDisclosure } from "./hooks/disclosure/index.mjs";
-import { uuidV4 } from "./helpers/uuid-v4.mjs";
+import { useWritingMode } from "./hooks/writing-mode/index.mjs";
+import { createSafeContext } from "./helpers/create-safe-context.mjs";
 import { useToast } from "./components/feedback/toast/context.mjs";
 import { ArteOdyssey } from "./components/icons/arte-odyssey.mjs";
 import { GitHubIcon } from "./components/icons/github-mark.mjs";
 import { Logo, LogoIcon } from "./components/icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
 import { QiitaIcon } from "./components/icons/qiita.mjs";
 import { TwitterIcon } from "./components/icons/twitter.mjs";
+import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
 import { Alert } from "./components/feedback/alert/alert.mjs";
 import { useTimeout } from "./hooks/timeout/index.mjs";
 import { ToastProvider } from "./components/feedback/toast/provider.mjs";
@@ -19,6 +21,8 @@ import { useClickAway } from "./hooks/click-away/index.mjs";
 import { useOpenContext } from "./components/overlays/popover/hooks.mjs";
 import { Popover } from "./components/overlays/popover/popover.mjs";
 import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
+import { chain } from "./helpers/chain.mjs";
+import { mergeRefs } from "./helpers/merge-refs.mjs";
 import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
 import { Accordion } from "./components/data-display/accordion/index.mjs";
 import { Avatar } from "./components/data-display/avatar/avatar.mjs";
@@ -27,14 +31,9 @@ import { useClient } from "./hooks/client/index.mjs";
 import { BaselineStatus } from "./components/data-display/baseline-status/baseline-status.mjs";
 import { Card } from "./components/data-display/card/card.mjs";
 import { InteractiveCard } from "./components/data-display/card/interactive-card.mjs";
-import { findAllColors } from "./helpers/color/find-all-colors.mjs";
 import { Code } from "./components/data-display/code/code.mjs";
 import { Heading } from "./components/data-display/heading/heading.mjs";
 import { Table } from "./components/data-display/table/table.mjs";
-import { between } from "./helpers/number/between.mjs";
-import { toPrecision } from "./helpers/number/to-precision.mjs";
-import { cast } from "./helpers/number/cast.mjs";
-import { commalize } from "./helpers/number/commalize.mjs";
 import { Progress } from "./components/feedback/progress/progress.mjs";
 import { Skeleton } from "./components/feedback/skeleton/skeleton.mjs";
 import { useControllableState } from "./hooks/controllable-state/index.mjs";
@@ -57,7 +56,6 @@ import { TextField } from "./components/form/text-field/text-field.mjs";
 import { Textarea } from "./components/form/textarea/textarea.mjs";
 import { ScrollLinked } from "./components/layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./components/layout/separator/separator.mjs";
-import { isInternalRoute } from "./helpers/is-internal-route.mjs";
 import { Anchor } from "./components/navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./components/navigation/breadcrumb/breadcrumb.mjs";
 import { Pagination } from "./components/navigation/pagination/pagination.mjs";
@@ -67,6 +65,7 @@ import { Modal } from "./components/overlays/modal/modal.mjs";
 import { Drawer } from "./components/overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./components/overlays/list-box/list-box.mjs";
+import { mergeProps } from "./helpers/merge-props.mjs";
 import { useClipboard } from "./hooks/clipboard/index.mjs";
 import { useDebouncedTransition } from "./hooks/debounced-transition/index.mjs";
 import { useHash } from "./hooks/hash/index.mjs";
@@ -83,4 +82,4 @@ import { useSessionStorage } from "./hooks/session-storage/index.mjs";
 import { useStep } from "./hooks/step/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/internal/clamp.d.mts

@@ -0,0 +1,4 @@
+//#region src/internal/clamp.d.ts
+declare const clamp: (value: number, min: number, max: number) => number;
+//#endregion
+export { clamp };

package/dist/internal/clamp.mjs

@@ -0,0 +1,15 @@
+//#region src/internal/clamp.ts
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+if (import.meta.vitest) describe("clamp", () => {
+	it("minとmaxの間の値の場合はそのまま返す", () => {
+		expect(clamp(5, 0, 10)).toBe(5);
+	});
+	it("minより小さい場合はminを返す", () => {
+		expect(clamp(-5, 0, 10)).toBe(0);
+	});
+	it("maxより大きい場合はmaxを返す", () => {
+		expect(clamp(15, 0, 10)).toBe(10);
+	});
+});
+//#endregion
+export { clamp };

package/dist/{helpers/number → internal}/to-precision.d.mts

@@ -1,4 +1,4 @@
-//#region src/helpers/number/to-precision.d.ts
+//#region src/internal/to-precision.d.ts
 declare const toPrecision: (value: number, precision?: number) => number;
 //#endregion
 export { toPrecision };

package/dist/{helpers/number → internal}/to-precision.mjs

@@ -1,4 +1,4 @@
-//#region src/helpers/number/to-precision.ts
+//#region src/internal/to-precision.ts
 const toPrecision = (value, precision) => {
 	const scaleFactor = 10 ** (precision ?? 10);
 	return Math.round(value * scaleFactor) / scaleFactor;

package/dist/styles/index.css

@@ -73,6 +73,11 @@
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant light (&:where(.light, .light *));
 
+/* 縦書きモード。`.writing-v` 配下に適用し、`.writing-h` 配下のアイランドでは無効化する */
+@custom-variant vertical (
+  &:where(.writing-v, .writing-v *):not(.writing-h, .writing-h *)
+);
+
 :root {
   --white: oklch(1 0 0);
 
@@ -253,6 +258,10 @@
 
   --back-drop: rgb(0, 0, 0, 0.5);
 
+  --z-overlay: 1000;
+  --z-modal: 1300;
+  --z-toast: 1500;
+
   /* TODO: 上の変数の一環として使えるようにする */
   --group-primary: var(--teal-800);
   --group-secondary: var(--cyan-800);
@@ -467,3 +476,31 @@
     minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
   );
 }
+
+@utility writing-h {
+  writing-mode: horizontal-tb;
+}
+
+@utility writing-v {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  text-underline-position: under left;
+  line-break: strict;
+  word-break: normal;
+}
+
+@utility writing-sideways-rl {
+  writing-mode: sideways-rl;
+}
+
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+
+@utility z-modal {
+  z-index: var(--z-modal);
+}
+
+@utility z-toast {
+  z-index: var(--z-toast);
+}

package/dist/styles/tokens.d.mts

@@ -80,5 +80,16 @@ type Breakpoint = {
   px: string;
 };
 declare const BREAKPOINTS: readonly Breakpoint[];
+/**
+ * オーバーレイ系コンポーネントの重なり順を定義する 3 層スケール。
+ *
+ *   overlay (1000) — trigger に紐付く浮遊 UI (Popover / DropdownMenu / ListBox / Tooltip)
+ *   modal   (1300) — Modal / Drawer。`<dialog>` top-layer により実質はネイティブ制御だが、
+ *                     stacking context を持つ非ネイティブ実装に切り替えても破綻しないよう明示
+ *   toast   (1500) — Toast。モーダルや浮遊 UI より上に必ず表示される
+ *
+ * 同層内の同時表示はサポート外。新たな層が必要になったら間に挿入する。
+ */
+declare const Z_INDICES: readonly NamedScale[];
 //#endregion
-export { BACK_DROP, BG_TOKENS, BORDER_TOKENS, BREAKPOINTS, Breakpoint, FG_TOKENS, FONT_FAMILIES, FONT_WEIGHTS, GROUP_TOKENS, INSET_SHADOWS, LETTER_SPACINGS, LINE_HEIGHTS, NamedScale, PALETTE, PALETTE_PREFIXES, PRIMARY_TOKENS, PaletteFamily, PalettePrefix, RADII, SECONDARY_TOKENS, SHADES, SHADOWS, SPACING_BASE, SPACING_SCALE, SemanticToken, Shade, ShadeRef, SpacingStep, TEXT_SIZES, TextSize, WHITE, lineHeightToNumber };
+export { BACK_DROP, BG_TOKENS, BORDER_TOKENS, BREAKPOINTS, Breakpoint, FG_TOKENS, FONT_FAMILIES, FONT_WEIGHTS, GROUP_TOKENS, INSET_SHADOWS, LETTER_SPACINGS, LINE_HEIGHTS, NamedScale, PALETTE, PALETTE_PREFIXES, PRIMARY_TOKENS, PaletteFamily, PalettePrefix, RADII, SECONDARY_TOKENS, SHADES, SHADOWS, SPACING_BASE, SPACING_SCALE, SemanticToken, Shade, ShadeRef, SpacingStep, TEXT_SIZES, TextSize, WHITE, Z_INDICES, lineHeightToNumber };

package/dist/styles/tokens.mjs

@@ -748,5 +748,29 @@ const BREAKPOINTS = [
 		px: "1536px"
 	}
 ];
+/**
+* オーバーレイ系コンポーネントの重なり順を定義する 3 層スケール。
+*
+*   overlay (1000) — trigger に紐付く浮遊 UI (Popover / DropdownMenu / ListBox / Tooltip)
+*   modal   (1300) — Modal / Drawer。`<dialog>` top-layer により実質はネイティブ制御だが、
+*                     stacking context を持つ非ネイティブ実装に切り替えても破綻しないよう明示
+*   toast   (1500) — Toast。モーダルや浮遊 UI より上に必ず表示される
+*
+* 同層内の同時表示はサポート外。新たな層が必要になったら間に挿入する。
+*/
+const Z_INDICES = [
+	{
+		name: "overlay",
+		value: "1000"
+	},
+	{
+		name: "modal",
+		value: "1300"
+	},
+	{
+		name: "toast",
+		value: "1500"
+	}
+];
 //#endregion
-export { BACK_DROP, BG_TOKENS, BORDER_TOKENS, BREAKPOINTS, FG_TOKENS, FONT_FAMILIES, FONT_WEIGHTS, GROUP_TOKENS, INSET_SHADOWS, LETTER_SPACINGS, LINE_HEIGHTS, PALETTE, PALETTE_PREFIXES, PRIMARY_TOKENS, RADII, SECONDARY_TOKENS, SHADES, SHADOWS, SPACING_BASE, SPACING_SCALE, TEXT_SIZES, WHITE, lineHeightToNumber };
+export { BACK_DROP, BG_TOKENS, BORDER_TOKENS, BREAKPOINTS, FG_TOKENS, FONT_FAMILIES, FONT_WEIGHTS, GROUP_TOKENS, INSET_SHADOWS, LETTER_SPACINGS, LINE_HEIGHTS, PALETTE, PALETTE_PREFIXES, PRIMARY_TOKENS, RADII, SECONDARY_TOKENS, SHADES, SHADOWS, SPACING_BASE, SPACING_SCALE, TEXT_SIZES, WHITE, Z_INDICES, lineHeightToNumber };

package/docs/references/typography.md

@@ -72,6 +72,35 @@ import { Heading } from '@k8o/arte-odyssey';
 <Heading type="h3">サブセクション</Heading>
 ```
 
+## 縦書きモード
+
+縦書き表示には専用のユーティリティと variant を用意している。
+
+### ユーティリティ
+
+| Tailwind クラス | 用途                                                                                                        |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
+| `writing-h`     | 横書き (`writing-mode: horizontal-tb`) に戻す。縦書きツリー内の図表・コードブロック・置換要素などで使う。   |
+| `writing-v`     | 縦書き (`writing-mode: vertical-rl`) を適用し、`text-orientation: mixed` などの推奨初期値も一括で設定する。 |
+
+### `vertical:` variant
+
+`.writing-v` 子孫で活性化し、`.writing-h` 子孫では無効化する Tailwind variant。横書きデフォルトに対する上書きを宣言的に書ける。
+
+```tsx
+<div className="writing-v">
+  <p className="my-4 vertical:my-0">
+    {/* 横書き時のみ縦マージン、縦書きでは外す */}
+  </p>
+</div>
+```
+
+### 注意点
+
+- 画像・iframe などの置換要素は `vertical-rl` で大きさが想定通りにならないことがある。`<img className="vertical:writing-h" />` のように要素自体は横書きに戻す。
+- `-webkit-line-clamp` (`line-clamp-*`) は Safari で `writing-mode` と干渉する。縦書きでは `block-size` 上限 + `overflow: hidden` に置き換える。
+- KaTeX など内部で水平レイアウトを前提とするライブラリは、必要箇所だけ `writing-h` を上書きする。
+
 ## やってはいけないこと
 
 - 3種類以上のフォントウェイトを1画面で使う

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "8.0.3",
+  "version": "9.1.0",
   "description": "k8o's react ui library",
   "keywords": [
     "components",
@@ -68,7 +68,7 @@
     "@vitest/browser-playwright": "4.1.5",
     "@vitest/coverage-v8": "4.1.5",
     "@vitest/ui": "4.1.5",
-    "postcss": "8.5.13",
+    "postcss": "8.5.14",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "storybook": "10.3.6",

package/dist/helpers/is-internal-route.d.mts

@@ -1,4 +0,0 @@
-//#region src/helpers/is-internal-route.d.ts
-declare const isInternalRoute: (href: string) => boolean;
-//#endregion
-export { isInternalRoute };

package/dist/helpers/is-internal-route.mjs

@@ -1,12 +0,0 @@
-//#region src/helpers/is-internal-route.ts
-const isInternalRoute = (href) => !href.startsWith("http");
-if (import.meta.vitest) {
-	it("httpから始まるhrefはexternalなものとして判定する", () => {
-		expect(isInternalRoute("https://k8o.me/dummy")).toBe(false);
-	});
-	it("httpから始まらないhrefはexternalなものとして判定する", () => {
-		expect(isInternalRoute("/dummy")).toBe(true);
-	});
-}
-//#endregion
-export { isInternalRoute };

package/dist/helpers/number/between.d.mts

@@ -1,4 +0,0 @@
-//#region src/helpers/number/between.d.ts
-declare const between: (value: number, min: number, max: number) => number;
-//#endregion
-export { between };