matrix-design-system 1.0.0 → 1.1.1

package/README.md

@@ -17,11 +17,11 @@ would break.
 Everything in the root barrel works with just those installed. Three groups need heavier libraries,
 so they live behind their own entry points and you install a peer only if you import one:
 
-| Import from | Install | For |
-|---|---|---|
-| `matrix-design-system/chart` | `recharts` | `ChartPanel`, `ChartTooltip`, `DonutChart` |
-| `matrix-design-system/markdown` | `react-markdown`, `unified`, the remark/rehype plugins | `Markdown` |
-| `matrix-design-system/command-palette` | `cmdk` | `CommandPalette` and its items |
+| Import from                            | Install                                                | For                                        |
+| -------------------------------------- | ------------------------------------------------------ | ------------------------------------------ |
+| `matrix-design-system/chart`           | `recharts`                                             | `ChartPanel`, `ChartTooltip`, `DonutChart` |
+| `matrix-design-system/markdown`        | `react-markdown`, `unified`, the remark/rehype plugins | `Markdown`                                 |
+| `matrix-design-system/command-palette` | `cmdk`                                                 | `CommandPalette` and its items             |
 
 Nothing else is optional: the rain effect is part of the design system's identity — `BrandHeader`
 and the matrix backgrounds all render it — so `matrix-rain-webgpu` is a plain dependency and comes
@@ -50,12 +50,12 @@ components are near-invisible on white.
 Style your own layout with Tailwind utilities — they resolve against this theme, so use its names
 rather than stock Tailwind colours:
 
-| Family | Names |
-|---|---|
-| Brand | `primary` (#00FF41), `primary-dark`, `secondary`, `accent` (#39FF14) |
+| Family   | Names                                                                        |
+| -------- | ---------------------------------------------------------------------------- |
+| Brand    | `primary` (#00FF41), `primary-dark`, `secondary`, `accent` (#39FF14)         |
 | Surfaces | `general-background` (#001100), `general-background-light`, `black`, `white` |
-| Text | `primary-text` (#E8FFE8), `secondary-text`, `text-above-primary` |
-| Fonts | `font-sans` → Open Sans · `font-mono` → Courier Prime |
+| Text     | `primary-text` (#E8FFE8), `secondary-text`, `text-above-primary`             |
+| Fonts    | `font-sans` → Open Sans · `font-mono` → Courier Prime                        |
 
 **The breakpoint scale is overridden**: `xs` 576 · `sm` 768 · `md` 992 · `lg` 1200 · `xl` 1600 ·
 `2xl` 2000 (px). So `md:` starts at 992px, not 768px — the most common way a layout built with this
@@ -93,3 +93,19 @@ custom properties, and the two global preferences (motion, glassmorphism variant
 ## License
 
 MIT © Fabrizio Duroni
+
+## Claude Design sync
+
+`.design-sync/` and `.ds-sync/` in this folder are the [claude.ai/design](https://claude.ai/design)
+converter. It reads the Storybook stories beside each component — there are no hand-authored
+previews, so a story is the only place a component's example lives.
+
+**Run `/design-sync` from a session rooted at this package, not at the repository root.** Every path
+the converter uses is resolved from its working directory and it does no upward search, so a
+root-level run fails with `[CONFIG] … ENOENT`. Rooting the session here also keeps the skill
+consistent with itself, since it stages `.ds-sync/` relative to the session root.
+
+The two folders must stay siblings: the fork in `.design-sync/overrides/` imports `../.ds-sync/lib/`,
+and `.design-sync/node_modules` symlinks to `../.ds-sync/node_modules`.
+
+`.design-sync/NOTES.md` has the full invocation and the re-sync watch-list.

package/dist/atoms/animation/motion-div/motion-div.d.mts

@@ -2,6 +2,5 @@ import { HTMLMotionProps } from "framer-motion";
 import { FC } from "react";
 //#region src/atoms/animation/motion-div/motion-div.d.ts
 type MotionDivProps = HTMLMotionProps<"div">;
-declare const MotionDiv: FC<MotionDivProps>;
-//#endregion
-export { MotionDiv };
+export declare const MotionDiv: FC<MotionDivProps>;
+//#endregion

package/dist/atoms/buttons/button/button.d.mts

@@ -3,6 +3,5 @@ import React, { FC, PropsWithChildren } from "react";
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren & {
   className?: string;
 };
-declare const Button: FC<ButtonProps>;
-//#endregion
-export { Button };
+export declare const Button: FC<ButtonProps>;
+//#endregion

package/dist/atoms/buttons/button/button.mjs

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/atoms/buttons/button/button.tsx
 const Button = ({ className, children, ...props }) => {
 	return /* @__PURE__ */ jsx("button", {
-		className: `glow-container bg-transparent p-3 text-primary-text cursor-pointer text-left flex items-center gap-3${className ? ` ${className}` : ""}`,
+		className: `glow-container text-primary-text flex cursor-pointer items-center bg-transparent p-3 text-left gap-3${className ? ` ${className}` : ""}`,
 		...props,
 		children
 	});

package/dist/atoms/buttons/switch/switch.d.mts

@@ -5,6 +5,5 @@ interface SwitchProps {
   onChange: (v: boolean) => void;
   label?: string;
 }
-declare const Switch: FC<SwitchProps>;
-//#endregion
-export { Switch };
+export declare const Switch: FC<SwitchProps>;
+//#endregion

package/dist/atoms/buttons/switch/switch.mjs

@@ -8,8 +8,8 @@ const Switch = (t0) => {
 	const { checked, onChange, label } = t0;
 	const { effects } = useSwitchStore(checked, onChange);
 	const { onToggle } = effects;
-	const t1 = `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors duration-150 cursor-pointer ${checked ? "border-accent bg-accent/20 shadow-[0_0_8px_var(--color-accent-alpha-50)]" : "border-accent/30 bg-transparent"}`;
-	const t2 = `pointer-events-none inline-block h-3.5 w-3.5 rounded-full transition-transform duration-150 ${checked ? "translate-x-[18px] bg-accent shadow-[0_0_6px_var(--color-accent)]" : "translate-x-[3px] bg-accent/40"}`;
+	const t1 = `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors duration-150 ${checked ? "border-accent bg-accent/20 shadow-[0_0_8px_var(--color-accent-alpha-50)]" : "border-accent/30 bg-transparent"}`;
+	const t2 = `pointer-events-none inline-block h-3.5 w-3.5 rounded-full transition-transform duration-150 ${checked ? "bg-accent translate-x-[18px] shadow-[0_0_6px_var(--color-accent)]" : "bg-accent/40 translate-x-[3px]"}`;
 	let t3;
 	if ($[0] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", { className: t2 });

package/dist/atoms/call-to-actions/call-to-action-external-with-tracking/call-to-action-external-with-tracking.d.mts

@@ -8,6 +8,5 @@ type CallToActionExternalWithTrackingProps = {
   children?: ReactNode;
   onClick?: () => void;
 };
-declare const CallToActionExternalWithTracking: FC<CallToActionExternalWithTrackingProps>;
-//#endregion
-export { CallToActionExternalWithTracking };
+export declare const CallToActionExternalWithTracking: FC<CallToActionExternalWithTrackingProps>;
+//#endregion

package/dist/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.d.mts

@@ -2,13 +2,12 @@ import { LinkComponent } from "../../links/anchor-link/anchor-link.mjs";
 import "../../links/anchor-link/index.mjs";
 import { FC, ReactNode } from "react";
 //#region src/atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.d.ts
-type CallToActionInternalWithTrackingProps = {
+export type CallToActionInternalWithTrackingProps = {
   to: string;
   linkComponent?: LinkComponent;
   className?: string;
   children?: ReactNode;
   onClick?: () => void;
 };
-declare const CallToActionInternalWithTracking: FC<CallToActionInternalWithTrackingProps>;
-//#endregion
-export { CallToActionInternalWithTracking, CallToActionInternalWithTrackingProps };
+export declare const CallToActionInternalWithTracking: FC<CallToActionInternalWithTrackingProps>;
+//#endregion

package/dist/atoms/chip/chip.d.mts

@@ -1,10 +1,9 @@
 import { FC, ReactNode } from "react";
 //#region src/atoms/chip/chip.d.ts
-interface ChipProps {
+export interface ChipProps {
   children: ReactNode;
   big?: boolean;
   className?: string;
 }
-declare const Chip: FC<ChipProps>;
-//#endregion
-export { Chip, ChipProps };
+export declare const Chip: FC<ChipProps>;
+//#endregion

package/dist/atoms/chip/chip.mjs

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/atoms/chip/chip.tsx
 const Chip = ({ children, big = false, className }) => {
 	return /* @__PURE__ */ jsx("span", {
-		className: `glow-container text-shadow-sm p-2 block text-primary-text ${big ? "text-2xl" : "text-sm"} leading-none${className ? ` ${className}` : ""}`,
+		className: `glow-container text-primary-text block p-2 text-shadow-sm ${big ? "text-2xl" : "text-sm"} leading-none${className ? ` ${className}` : ""}`,
 		children
 	});
 };

package/dist/atoms/effects/glassmorphism-background/glassmorphism-background.d.mts

@@ -3,6 +3,5 @@ import { FC, PropsWithChildren } from "react";
 interface GlassmorphismBackgroundProps {
   className?: string;
 }
-declare const GlassmorphismBackground: FC<PropsWithChildren<GlassmorphismBackgroundProps>>;
-//#endregion
-export { GlassmorphismBackground };
+export declare const GlassmorphismBackground: FC<PropsWithChildren<GlassmorphismBackgroundProps>>;
+//#endregion

package/dist/atoms/effects/image-glow/image-glow.d.mts

@@ -2,11 +2,10 @@ import { ImageComponent, ImageComponentProps } from "../plain-image/plain-image.
 import "../plain-image/index.mjs";
 import { FC } from "react";
 //#region src/atoms/effects/image-glow/image-glow.d.ts
-interface ImageGlowProps extends ImageComponentProps {
+export interface ImageGlowProps extends ImageComponentProps {
   className?: string;
   noPlaceholder?: boolean;
   imageComponent?: ImageComponent;
 }
-declare const ImageGlow: FC<ImageGlowProps>;
-//#endregion
-export { ImageGlow, ImageGlowProps };
+export declare const ImageGlow: FC<ImageGlowProps>;
+//#endregion

package/dist/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.d.mts

@@ -1,6 +1,5 @@
 import { ImagePlaceholder } from "../plain-image/plain-image.mjs";
 import "../plain-image/index.mjs";
 //#region src/atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.d.ts
-declare const imageShimmerPlaceholder: ImagePlaceholder;
-//#endregion
-export { imageShimmerPlaceholder };
+export declare const imageShimmerPlaceholder: ImagePlaceholder;
+//#endregion

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-rain.d.mts

@@ -1,5 +1,4 @@
 import React from "react";
 //#region src/atoms/effects/matrix-rain/matrix-rain/matrix-rain.d.ts
-declare const MatrixRain: React.NamedExoticComponent<{}>;
-//#endregion
-export { MatrixRain };
+export declare const MatrixRain: React.NamedExoticComponent<{}>;
+//#endregion

package/dist/atoms/effects/overlay/overlay.d.mts

@@ -1,11 +1,10 @@
 import { FC, ReactNode } from "react";
 //#region src/atoms/effects/overlay/overlay.d.ts
-interface OverlayProps {
+export interface OverlayProps {
   delay: number;
   onClick?: () => void;
   children?: ReactNode;
   className?: string;
 }
-declare const Overlay: FC<OverlayProps>;
-//#endregion
-export { Overlay, OverlayProps };
+export declare const Overlay: FC<OverlayProps>;
+//#endregion

package/dist/atoms/effects/overlay/overlay.mjs

@@ -10,7 +10,7 @@ const Overlay = (t0) => {
 	const delay = t1 === void 0 ? 0 : t1;
 	const className = t2 === void 0 ? "" : t2;
 	useOverlayStore();
-	const t3 = `fixed top-0 left-0 w-full h-full bg-black-alpha-75 backdrop-blur-sm z-40 ${className}`;
+	const t3 = `bg-black-alpha-75 fixed top-0 left-0 z-40 h-full w-full backdrop-blur-sm ${className}`;
 	let t4;
 	let t5;
 	let t6;

package/dist/atoms/effects/pills/pills.d.mts

@@ -1,10 +1,9 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/atoms/effects/pills/pills.d.ts
-declare const RedPillNoReflection: FC<PropsWithChildren<{
+export declare const RedPillNoReflection: FC<PropsWithChildren<{
   pillBodyClassName?: string;
   pillLabelClassName?: string;
 }>>;
-declare const RedPill: FC<PropsWithChildren>;
-declare const BluePill: FC<PropsWithChildren>;
-//#endregion
-export { BluePill, RedPill, RedPillNoReflection };
+export declare const RedPill: FC<PropsWithChildren>;
+export declare const BluePill: FC<PropsWithChildren>;
+//#endregion

package/dist/atoms/effects/plain-image/plain-image.d.mts

@@ -1,18 +1,18 @@
 import { CSSProperties, FC, ImgHTMLAttributes, ReactEventHandler } from "react";
 //#region src/atoms/effects/plain-image/plain-image.d.ts
-type ImagePlaceholder = "blur" | "empty" | `data:image/${string}`;
+export type ImagePlaceholder = "blur" | "empty" | `data:image/${string}`;
 /**
  * A plain URL, or the object shape every bundler's static image import produces (Next, Vite and
  * webpack all emit at least `src`). Accepting both keeps the design system usable with or without a
  * build step that understands image imports.
  */
-type ImageSource = string | {
+export type ImageSource = string | {
   src: string;
   width: number;
   height: number;
   blurDataURL?: string;
 };
-interface ImageComponentProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "placeholder" | "width" | "height" | "loading"> {
+export interface ImageComponentProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "placeholder" | "width" | "height" | "loading"> {
   src: ImageSource;
   alt: string;
   width?: number | `${number}`;
@@ -33,13 +33,12 @@ interface ImageComponentProps extends Omit<ImgHTMLAttributes<HTMLImageElement>,
  * What the design system needs from an image renderer. Consumers inject an optimising implementation
  * (`next/image`, and so on); without one, components fall back to {@link PlainImage}.
  */
-type ImageComponent = FC<ImageComponentProps>;
+export type ImageComponent = FC<ImageComponentProps>;
 /**
  * The framework-free default: a real `<img>`. It reproduces the `next/image` behaviours design-system
  * layouts depend on — `fill` positioning, a placeholder painted behind the image until it loads, and
  * lazy loading unless the caller marks the image as priority. Optimisation-only props are
  * destructured away instead of spread onto the DOM, where React would warn about them.
  */
-declare const PlainImage: ImageComponent;
-//#endregion
-export { ImageComponent, ImageComponentProps, ImagePlaceholder, ImageSource, PlainImage };
+export declare const PlainImage: ImageComponent;
+//#endregion

package/dist/atoms/icons/chat-icon/chat-icon.d.mts

@@ -1,4 +1,3 @@
 //#region src/atoms/icons/chat-icon/chat-icon.d.ts
-declare const ChatIcon: () => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { ChatIcon };
+export declare const ChatIcon: () => import("react").JSX.Element;
+//#endregion

package/dist/atoms/icons/chat-icon/chat-icon.mjs

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { BiChat } from "react-icons/bi";
 //#region src/atoms/icons/chat-icon/chat-icon.tsx
 const ChatIcon = () => /* @__PURE__ */ jsx(RoundedIcon, {
-	className: "animate-pulse flex items-center justify-center text-text-above-primary",
+	className: "text-text-above-primary flex animate-pulse items-center justify-center",
 	children: /* @__PURE__ */ jsx(BiChat, {
 		className: "size-5 md:size-7",
 		"aria-hidden": "true"

package/dist/atoms/icons/copy-icon/copy-icon.d.mts

@@ -1,6 +1,5 @@
 //#region src/atoms/icons/copy-icon/copy-icon.d.ts
-declare const CopyIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const CopiedIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const CopyErrorIcon: () => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { CopiedIcon, CopyErrorIcon, CopyIcon };
+export declare const CopyIcon: () => import("react").JSX.Element;
+export declare const CopiedIcon: () => import("react").JSX.Element;
+export declare const CopyErrorIcon: () => import("react").JSX.Element;
+//#endregion

package/dist/atoms/icons/rounded-icon/rounded-icon.d.mts

@@ -3,6 +3,5 @@ import { FC, PropsWithChildren } from "react";
 interface RoundedIconProps extends PropsWithChildren {
   className?: string;
 }
-declare const RoundedIcon: FC<RoundedIconProps>;
-//#endregion
-export { RoundedIcon };
+export declare const RoundedIcon: FC<RoundedIconProps>;
+//#endregion

package/dist/atoms/links/anchor-link/anchor-link.d.mts

@@ -10,8 +10,8 @@ import { AnchorHTMLAttributes, FC, ReactNode } from "react";
  *   the odds any one link gets clicked.
  * - `"never"`: no prefetching at all.
  */
-type PrefetchStrategy = "viewport" | "hover" | "never";
-interface LinkComponentProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+export type PrefetchStrategy = "viewport" | "hover" | "never";
+export interface LinkComponentProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
   href: string;
   children?: ReactNode;
   prefetch?: PrefetchStrategy;
@@ -20,12 +20,11 @@ interface LinkComponentProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement
  * What the design system needs from a link renderer. Consumers inject a router-aware implementation
  * (`next/link`, a framework `<Link>`, and so on); without one, links fall back to {@link AnchorLink}.
  */
-type LinkComponent = FC<LinkComponentProps>;
+export type LinkComponent = FC<LinkComponentProps>;
 /**
  * The framework-free default: a real `<a>`, which navigates correctly everywhere but without
  * client-side routing. `prefetch` is destructured away rather than spread, since it is not a DOM
  * attribute and React would warn about it.
  */
-declare const AnchorLink: LinkComponent;
-//#endregion
-export { AnchorLink, LinkComponent, LinkComponentProps, PrefetchStrategy };
+export declare const AnchorLink: LinkComponent;
+//#endregion

package/dist/atoms/links/external-link/external-link.d.mts

@@ -8,6 +8,5 @@ type ExternalLinkProps = {
   className?: string;
   onClick?: () => void;
 };
-declare const ExternalLink: FC<ExternalLinkProps>;
-//#endregion
-export { ExternalLink };
+export declare const ExternalLink: FC<ExternalLinkProps>;
+//#endregion

package/dist/atoms/links/internal-link/internal-link.d.mts

@@ -2,7 +2,7 @@ import { LinkComponent, PrefetchStrategy } from "../anchor-link/anchor-link.mjs"
 import "../anchor-link/index.mjs";
 import { FC, ReactNode } from "react";
 //#region src/atoms/links/internal-link/internal-link.d.ts
-interface InternalLinkProps {
+export interface InternalLinkProps {
   to: string;
   className?: string;
   children?: ReactNode;
@@ -10,6 +10,5 @@ interface InternalLinkProps {
   onClick?: () => void;
   linkComponent?: LinkComponent;
 }
-declare const InternalLink: FC<InternalLinkProps>;
-//#endregion
-export { InternalLink, InternalLinkProps };
+export declare const InternalLink: FC<InternalLinkProps>;
+//#endregion

package/dist/atoms/loader/loader/loader.d.mts

@@ -5,6 +5,5 @@ interface LoaderProps {
   className?: string;
   label?: string;
 }
-declare const Loader: FC<LoaderProps>;
-//#endregion
-export { Loader };
+export declare const Loader: FC<LoaderProps>;
+//#endregion

package/dist/atoms/loader/loader/loader.mjs

@@ -38,7 +38,7 @@ const Loader = (t0) => {
 				delay: i * .15,
 				ease: "easeInOut"
 			},
-			className: `${sizeClasses[size]} rounded-full bg-accent`
+			className: `${sizeClasses[size]} bg-accent rounded-full`
 		}, i));
 		$[0] = size;
 		$[1] = t4;

package/dist/atoms/typography/input-field/input-field.d.mts

@@ -4,6 +4,5 @@ interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
   ref?: RefObject<HTMLInputElement | null>;
 }
-declare const InputField: FC<InputFieldProps>;
-//#endregion
-export { InputField };
+export declare const InputField: FC<InputFieldProps>;
+//#endregion

package/dist/atoms/typography/label/label.d.mts

@@ -1,9 +1,8 @@
 import { FC, InputHTMLAttributes, ReactElement } from "react";
 //#region src/atoms/typography/label/label.d.ts
-interface LabelProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "className"> {
+export interface LabelProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "className"> {
   value: string;
   icon?: ReactElement;
 }
-declare const Label: FC<LabelProps>;
-//#endregion
-export { Label, LabelProps };
+export declare const Label: FC<LabelProps>;
+//#endregion

package/dist/atoms/typography/markdown/markdown.d.mts

@@ -1,7 +1,6 @@
 //#region src/atoms/typography/markdown/markdown.d.ts
-declare const Markdown: import("react").MemoExoticComponent<({ content, id }: {
+export declare const Markdown: import("react").MemoExoticComponent<({ content, id }: {
   content: string;
   id: string;
-}) => import("react/jsx-runtime").JSX.Element[]>;
-//#endregion
-export { Markdown };
+}) => import("react").JSX.Element[]>;
+//#endregion

package/dist/atoms/typography/terminal-blocks/terminal-blocks.d.mts

@@ -1,13 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/atoms/typography/terminal-blocks/terminal-blocks.d.ts
-type TerminalLineSize = "sm" | "md" | "lg";
-declare const TerminalLine: FC<PropsWithChildren<{
+export type TerminalLineSize = "sm" | "md" | "lg";
+export declare const TerminalLine: FC<PropsWithChildren<{
   size?: TerminalLineSize;
 }>>;
-declare const TerminalQuoteLine: FC<PropsWithChildren>;
-declare const Cursor: FC<PropsWithChildren>;
-declare const ErrorText: FC<PropsWithChildren>;
-declare const SuccessText: FC<PropsWithChildren>;
-declare const QuoteText: FC<PropsWithChildren>;
-//#endregion
-export { Cursor, ErrorText, QuoteText, SuccessText, TerminalLine, TerminalLineSize, TerminalQuoteLine };
+export declare const TerminalQuoteLine: FC<PropsWithChildren>;
+export declare const Cursor: FC<PropsWithChildren>;
+export declare const ErrorText: FC<PropsWithChildren>;
+export declare const SuccessText: FC<PropsWithChildren>;
+export declare const QuoteText: FC<PropsWithChildren>;
+//#endregion

package/dist/atoms/typography/terminal-blocks/terminal-blocks.mjs

@@ -12,13 +12,13 @@ const TERMINAL_LINE_SIZE_CLASS = {
 };
 const TerminalLine = ({ children, size = "sm" }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: `text-shadow-md mb-2 font-mono font-bold leading-tight text-accent break-words ${TERMINAL_LINE_SIZE_CLASS[size]}`,
+		className: `text-accent mb-2 font-mono leading-tight font-bold break-words text-shadow-md ${TERMINAL_LINE_SIZE_CLASS[size]}`,
 		children
 	});
 };
 const TerminalQuoteLine = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: "my-2 leading-tight break-words text-xs sm:text-sm text-center",
+		className: "my-2 text-center text-xs leading-tight break-words sm:text-sm",
 		children
 	});
 };
@@ -35,7 +35,7 @@ const SuccessText = ({ children }) => /* @__PURE__ */ jsx("span", {
 	children
 });
 const QuoteText = ({ children }) => /* @__PURE__ */ jsx("span", {
-	className: "w-full text-center font-bold text-accent italic m-6 font-mono",
+	className: "text-accent m-6 w-full text-center font-mono font-bold italic",
 	children
 });
 //#endregion

package/dist/atoms/typography/textarea/textarea.d.mts

@@ -4,6 +4,5 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   className?: string;
   ref?: RefObject<HTMLTextAreaElement | null>;
 }
-declare const Textarea: FC<TextareaProps>;
-//#endregion
-export { Textarea };
+export declare const Textarea: FC<TextareaProps>;
+//#endregion

package/dist/hooks/use-clipboard-available.d.mts

@@ -1,4 +1,3 @@
 //#region src/hooks/use-clipboard-available.d.ts
-declare const useClipboardAvailable: () => boolean;
-//#endregion
-export { useClipboardAvailable };
+export declare const useClipboardAvailable: () => boolean;
+//#endregion

package/dist/hooks/use-device-capabilities.d.mts

@@ -5,6 +5,5 @@ interface DeviceCapabilities {
   saveData: boolean;
   isLowEnd: boolean;
 }
-declare function useDeviceCapabilities(): DeviceCapabilities;
-//#endregion
-export { useDeviceCapabilities };
+export declare function useDeviceCapabilities(): DeviceCapabilities;
+//#endregion

package/dist/hooks/use-glassmorphism.d.mts

@@ -3,8 +3,7 @@ interface UseGlassmorphismOptions {
   noScale?: boolean;
   increaseContrast?: boolean;
 }
-declare const useGlassmorphism: ({ noScale, increaseContrast }?: UseGlassmorphismOptions) => {
+export declare const useGlassmorphism: ({ noScale, increaseContrast }?: UseGlassmorphismOptions) => {
   glassmorphismClass: string;
 };
-//#endregion
-export { useGlassmorphism };
+//#endregion

package/dist/hooks/use-in-view-list.d.mts

@@ -2,6 +2,5 @@
 interface UseInViewListOptions {
   rootMargin: string;
 }
-declare const useInViewList: <T extends HTMLElement = HTMLDivElement>({ rootMargin }: UseInViewListOptions) => [(el: T | null) => void, boolean];
-//#endregion
-export { useInViewList };
+export declare const useInViewList: <T extends HTMLElement = HTMLDivElement>({ rootMargin }: UseInViewListOptions) => [(el: T | null) => void, boolean];
+//#endregion

package/dist/hooks/use-in-view.d.mts

@@ -4,6 +4,5 @@ interface UseInViewOptions {
   rootMargin?: string;
   triggerOnce?: boolean;
 }
-declare const useInView: <T extends HTMLElement = HTMLDivElement>(options?: UseInViewOptions) => [element: React.RefObject<T | null>, boolean];
-//#endregion
-export { useInView };
+export declare const useInView: <T extends HTMLElement = HTMLDivElement>(options?: UseInViewOptions) => [element: React.RefObject<T | null>, boolean];
+//#endregion

package/dist/hooks/use-is-ios.d.mts

@@ -1,4 +1,3 @@
 //#region src/hooks/use-is-ios.d.ts
-declare const useIsIOS: () => boolean;
-//#endregion
-export { useIsIOS };
+export declare const useIsIOS: () => boolean;
+//#endregion

package/dist/hooks/use-lock-body-scroll.d.mts

@@ -1,4 +1,3 @@
 //#region src/hooks/use-lock-body-scroll.d.ts
-declare const useLockBodyScroll: () => void;
-//#endregion
-export { useLockBodyScroll };
+export declare const useLockBodyScroll: () => void;
+//#endregion

package/dist/hooks/use-matrix-settings-store.d.mts

@@ -1,5 +1,4 @@
 import { MatrixRainSettings } from "../state/matrix-rain/matrix-settings.mjs";
 //#region src/hooks/use-matrix-settings-store.d.ts
-declare const useMatrixSettingsStore: () => MatrixRainSettings;
-//#endregion
-export { useMatrixSettingsStore };
+export declare const useMatrixSettingsStore: () => MatrixRainSettings;
+//#endregion

package/dist/hooks/use-motion-store.d.mts

@@ -8,6 +8,5 @@
  * - New tabs: Automatically read from localStorage on mount
  * - SSR: Defaults to enabled to prevent hydration mismatches
  */
-declare const useMotionStore: () => boolean;
-//#endregion
-export { useMotionStore };
+export declare const useMotionStore: () => boolean;
+//#endregion

package/dist/hooks/use-os-modifier-key.d.mts

@@ -1,5 +1,4 @@
 //#region src/hooks/use-os-modifier-key.d.ts
-type OsModifierKey = "meta" | "ctrl";
-declare const useOsModifierKey: () => OsModifierKey | null;
-//#endregion
-export { OsModifierKey, useOsModifierKey };
+export type OsModifierKey = "meta" | "ctrl";
+export declare const useOsModifierKey: () => OsModifierKey | null;
+//#endregion

package/dist/hooks/use-reading-progress.d.mts

@@ -1,8 +1,7 @@
 //#region src/hooks/use-reading-progress.d.ts
-declare function useReadingProgress(targetId: string): {
+export declare function useReadingProgress(targetId: string): {
   percentage: number;
   started: boolean;
   status: "uploading" | "complete";
 };
-//#endregion
-export { useReadingProgress };
+//#endregion

package/dist/hooks/use-reduced-motions.d.mts

@@ -1,4 +1,3 @@
 //#region src/hooks/use-reduced-motions.d.ts
-declare function useReducedMotions(): boolean;
-//#endregion
-export { useReducedMotions };
+export declare function useReducedMotions(): boolean;
+//#endregion