@heyramzi/ui 2.23.0 → 3.0.0

package/src/ai/confirmation/ConfirmationAccepted.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationAcceptedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationAcceptedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "accepted"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}

package/src/ai/confirmation/ConfirmationFailed.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationFailedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationFailedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "failed"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}

package/src/ai/confirmation/ConfirmationRejected.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationRejectedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationRejectedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "rejected"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}

package/src/ai/index.ts

@@ -1,111 +0,0 @@
-// =========================
-// TYPING DOTS
-// =========================
-
-export { TypingDots, type TypingDotsProps } from "./typing-dots/index.js";
-
-// =========================
-// RESPONSE (markdown)
-// =========================
-
-export { Response, type ResponseProps } from "./response/index.js";
-
-// =========================
-// SUGGESTION
-// =========================
-
-export {
-  Suggestion,
-  Suggestions,
-  type SuggestionProps,
-  type SuggestionsProps,
-} from "./suggestion/index.js";
-
-// =========================
-// PROMPT INPUT
-// =========================
-
-export {
-  PromptInput,
-  PromptInputBody,
-  PromptInputToolbar,
-  PromptInputTextarea,
-  PromptInputSubmit,
-  type PromptInputProps,
-  type PromptInputBodyProps,
-  type PromptInputToolbarProps,
-  type PromptInputTextareaProps,
-  type PromptInputSubmitProps,
-  type PromptInputStatus,
-} from "./prompt-input/index.js";
-
-// =========================
-// CONFIRMATION
-// =========================
-
-export {
-  Confirmation,
-  ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
-  ConfirmationActions,
-  ConfirmationAction,
-  type ConfirmationProps,
-  type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
-  type ConfirmationActionsProps,
-  type ConfirmationActionProps,
-  type ConfirmationContextValue,
-  type ConfirmationState,
-} from "./confirmation/index.js";
-
-// =========================
-// THINKING DOTS
-// =========================
-
-export { ThinkingDots, type ThinkingDotsProps } from "./thinking-dots/index.js";
-
-// =========================
-// VOICE WAVEFORM
-// =========================
-
-export { VoiceWaveform, type VoiceWaveformProps } from "./voice-waveform/index.js";
-
-// =========================
-// REASONING
-// =========================
-
-export {
-  Reasoning,
-  ReasoningTrigger,
-  ReasoningContent,
-  type ReasoningProps,
-  type ReasoningTriggerProps,
-  type ReasoningContentProps,
-  type ReasoningContextValue,
-} from "./reasoning/index.js";
-
-// =========================
-// LOADING STATE
-// =========================
-
-export { PixelLoader, type PixelLoaderProps } from "./loading-state/index.js";
-
-// =========================
-// AI BUTTON
-// =========================
-
-export { AiButton, type AiButtonProps, type AiStatus } from "./ai-button/index.js";
-
-// =========================
-// GENERATION PROGRESS
-// =========================
-
-export {
-  GenerationProgress,
-  type GenerationProgressProps,
-  type GenerationSteps,
-} from "./generation-progress/index.js";

package/src/ai/thinking-dots/ThinkingDots.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-
-	import { cn } from "../../lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import TypingDots from "../typing-dots/TypingDots.svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-
-	export interface ThinkingDotsProps extends HTMLAttributes<HTMLDivElement> {
-		label?: string;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-
-	let { label = "Thinking", class: className, ...rest }: ThinkingDotsProps = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-
-<!-- WHY: the dots animation is the shared chat TypingDots primitive; this only
-     adds the AI "thinking" label so there is a single source for the dots. -->
-<div
-	class={cn(
-		"inline-flex items-center gap-2 text-sm text-[color:var(--ai-thinking-fg,inherit)]",
-		className,
-	)}
-	role="status"
-	{...rest}
->
-	{#if label}<span>{label}</span>{/if}
-	<TypingDots />
-</div>

package/src/ai/thinking-dots/index.ts

@@ -1,5 +0,0 @@
-import ThinkingDots from "./ThinkingDots.svelte";
-import type { ThinkingDotsProps } from "./ThinkingDots.svelte";
-
-export { ThinkingDots, type ThinkingDotsProps };
-export default ThinkingDots;

package/src/charts/dashboard/dashboard-empty.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { cn } from "../../lib/utils.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Not list-page's `EmptyState`: that one takes exactly one action, and a
-		// dashboard can be empty for reasons (nothing connected, nothing synced)
-		// that need two buttons.
-
-		// The dashed edge marks truly empty, not loading.
-		icon?: PhosphorIcon;
-		title: string;
-		description?: string;
-		/** One or two buttons. Omit where there is nothing the reader can do. */
-		actions?: Snippet;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: Icon, title, description, actions, class: className }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div
-	class={cn(
-		"rounded-xl border-2 border-dashed border-border bg-transparent p-10 text-center",
-		className,
-	)}
->
-	<div class="mx-auto flex max-w-md flex-col items-center gap-4">
-		{#if Icon}
-			<Icon class="size-10 text-muted-foreground" aria-hidden="true" />
-		{/if}
-		<div class="space-y-1.5">
-			<h2 class="font-heading text-lg font-semibold">{title}</h2>
-			{#if description}
-				<p class="text-sm text-muted-foreground">{description}</p>
-			{/if}
-		</div>
-		{#if actions}
-			<div class="flex flex-wrap justify-center gap-2">{@render actions()}</div>
-		{/if}
-	</div>
-</div>

package/src/charts/dashboard/data-panel.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { cn } from "../../lib/utils.js";
-	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-	import { SectionLabel } from "../../components/section-header/index.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		/** What this section of the dashboard is. Drawn as the app's one panel label. */
-		label: string;
-		labelIcon?: PhosphorIcon;
-		/**
-		 * A row count, total or freshness stamp. It's a prop, not an action,
-		 * because hand-placed hints ended up at three type sizes on one screen.
-		 */
-		hint?: string;
-		/** Controls that act on this panel. Pinned right, after the hint. */
-		actions?: Snippet;
-		/** A line under the label, for the scope a number was measured over. */
-		sublabel?: string;
-		/** Off for a body that supplies its own padding: a table, a full-bleed list. */
-		pad?: boolean;
-		/**
-		 * The body scrolls sideways rather than squeezing. For a wide table, which is
-		 * every table on a dashboard once the window is narrower than its columns.
-		 */
-		scroll?: boolean;
-		children: Snippet;
-		class?: string;
-		bodyClass?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		label,
-		labelIcon,
-		hint,
-		actions,
-		sublabel,
-		pad = true,
-		scroll = false,
-		children,
-		class: className,
-		bodyClass,
-	}: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<section class={cn(panelShellClass, className)}>
-	<div class={panelHeaderClass}>
-		<div class="flex min-w-0 flex-col gap-0.5">
-			<SectionLabel icon={labelIcon}>{label}</SectionLabel>
-			{#if sublabel}
-				<span class="truncate text-xs text-muted-foreground">{sublabel}</span>
-			{/if}
-		</div>
-		{#if hint || actions}
-			<div class="flex min-w-0 shrink-0 items-center gap-3">
-				{#if hint}
-					<span class="text-xs tabular-nums text-muted-foreground">{hint}</span>
-				{/if}
-				{#if actions}
-					{@render actions()}
-				{/if}
-			</div>
-		{/if}
-	</div>
-	<div class={cn(pad && "p-4", scroll && "overflow-x-auto", bodyClass)}>
-		{@render children()}
-	</div>
-</section>

package/src/charts/dashboard/data-sort-head.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	/*
-	 * A column head that sorts the table under it. Sort buttons above a table
-	 * never say which column they rank, and read as filter tabs.
-	 */
-
-	// Every sortable head shows its caret, at 40%, solid on the active column.
-	// Hover-only makes people hunt, and it shifts the label under the pointer.
-
-	// No padding of its own: it comes from the skin classes, so heads and cells
-	// stay in line when a dense table tightens both.
-
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { CaretDown, CaretUp } from "phosphor-svelte";
-	import { cn } from "../../lib/utils.js";
-	import { dataThClass, dataThNumClass } from "./data-table.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		/** True when the table is currently ranked by this column. */
-		active: boolean;
-		/** Which way the active column runs. Ignored while inactive. */
-		descending: boolean;
-		/** Called on click and on Enter/Space. Toggling direction is the caller's. */
-		onSort: () => void;
-		/** Numbers right-align to their digits, so their caret leads the label. */
-		numeric?: boolean;
-		/** The long form of an abbreviated head, as the browser tooltip. */
-		title?: string;
-		class?: string;
-		children: Snippet;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		active,
-		descending,
-		onSort,
-		numeric = false,
-		title,
-		class: className,
-		children,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	const ariaSort = $derived(active ? (descending ? "descending" : "ascending") : "none");
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			onSort();
-		}
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<th
-	scope="col"
-	{title}
-	tabindex="0"
-	aria-sort={ariaSort}
-	onclick={onSort}
-	onkeydown={handleKeydown}
-	class={cn(
-		numeric ? dataThNumClass : dataThClass,
-		"cursor-pointer select-none transition-colors hover:text-foreground",
-		active && "text-foreground",
-		className,
-	)}
->
-	<span class="inline-flex items-center gap-0.5 whitespace-nowrap">
-		{#if numeric}
-			{@render caret()}{@render children()}
-		{:else}
-			{@render children()}{@render caret()}
-		{/if}
-	</span>
-</th>
-
-{#snippet caret()}
-	{#if active && !descending}
-		<CaretUp class="size-3 shrink-0" weight="bold" />
-	{:else if active}
-		<CaretDown class="size-3 shrink-0" weight="bold" />
-	{:else}
-		<CaretDown class="size-3 shrink-0 text-muted-foreground/40" />
-	{/if}
-{/snippet}

package/src/components/icon/icon.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		icon: PhosphorIcon;
-		size?: number;
-		class?: string;
-		weight?: IconWeight;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: IconComp, size = 24, class: className = "", weight }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<IconComp {size} class={className} {weight} />

package/src/components/icon/index.ts

@@ -1 +0,0 @@
-export { default as Icon } from "./icon.svelte";

package/src/components/list-page/detail-empty.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import EmptyState from "./empty-state.svelte";
-	import { cn } from "../../lib/utils.js";
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Shown when nothing is picked or the board is empty. It sits on the white
-		// panel with no frame of its own: a dashed edge drew a box round nothing.
-		icon?: PhosphorIcon;
-		iconWeight?: IconWeight;
-		title: string;
-		description?: string;
-		actionLabel?: string;
-		actionHref?: string;
-		onAction?: () => void;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		icon,
-		iconWeight,
-		title,
-		description,
-		actionLabel,
-		actionHref,
-		onAction,
-		class: className,
-	}: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div class={cn("flex h-full items-center justify-center rounded-xl bg-card", className)}>
-	<EmptyState {icon} {iconWeight} {title} {description} {actionLabel} {actionHref} {onAction} />
-</div>

package/src/components/list-page/detail-panel.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import SectionLabel from "../section-header/section-label.svelte";
-	import { cn } from "../../lib/utils.js";
-	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// One panel per idea in a detail pane. Hand-rolled copies drifted between
-		// 8px and 12px corners, so rounded-xl lives here once.
-		label?: string;
-		labelIcon?: PhosphorIcon;
-		// A mark the icon set does not carry (a platform logo), drawn ahead of the
-		// label at the same optical size.
-		labelLead?: Snippet;
-		// The right side of the header bar: a count, a hint, a button cluster.
-		actions?: Snippet;
-		// WHY: a panel whose body is a media grid or a full-bleed list supplies its
-		// own padding, so the shell must be able to step out of the way.
-		pad?: boolean;
-		// Takes the height the panels above it did not use, inside a `fill` stack.
-		// One panel per stack, and it is the one the reader works in.
-		grow?: boolean;
-		children: Snippet;
-		class?: string;
-		bodyClass?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		label,
-		labelIcon,
-		labelLead,
-		actions,
-		pad = true,
-		grow = false,
-		children,
-		class: className,
-		bodyClass,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	let hasHeader = $derived(Boolean(label || labelLead || actions));
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<section class={cn(panelShellClass, grow && "flex min-h-0 flex-1 flex-col", className)}>
-	{#if hasHeader}
-		<div class={panelHeaderClass}>
-			{#if label || labelLead}
-				<SectionLabel icon={labelIcon}>
-					{#if labelLead}
-						{@render labelLead()}
-					{/if}
-					{label}
-				</SectionLabel>
-			{:else}
-				<span></span>
-			{/if}
-			{#if actions}
-				<div class="flex min-w-0 flex-wrap items-center justify-end gap-2">
-					{@render actions()}
-				</div>
-			{/if}
-		</div>
-	{/if}
-	<div class={cn(pad && "p-4", grow && "flex min-h-0 flex-1 flex-col", bodyClass)}>
-		{@render children()}
-	</div>
-</section>

package/src/components/list-page/rail-empty.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { cn } from "../../lib/utils.js";
-	import * as Empty from "../../shadcn/empty/index.js";
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Not `EmptyState`, which has a 48px icon and an action. This says a filter
-		// came back empty, in one sentence that fits a 280px rail.
-		icon?: PhosphorIcon;
-		iconWeight?: IconWeight;
-		iconClass?: string;
-		title: string;
-		hint?: string;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: Icon, iconWeight, iconClass, title, hint, class: className }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<Empty.Root class={cn("h-full gap-2 px-6 py-12", className)}>
-	{#if Icon}
-		<Icon
-			weight={iconWeight}
-			class={cn("size-6", iconClass ?? "text-muted-foreground")}
-			aria-hidden="true"
-		/>
-	{/if}
-	<Empty.Title>{title}</Empty.Title>
-	{#if hint}
-		<Empty.Description class="max-w-56 text-xs leading-relaxed">{hint}</Empty.Description>
-	{/if}
-</Empty.Root>

package/src/components/locale-switch/index.ts

@@ -1 +0,0 @@
-export { default as LocaleSwitch } from "./locale-switch.svelte";