@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/feedback/empty/empty-media.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { EmptyMediaVariant } from './empty-variants.js';
+/**
+ * `icon` is a ringed circle on the page's own surface rather than a filled
+ * square: a frame around the glyph, which keeps a large empty panel from
+ * looking like a broken card.
+ */
+export type EmptyMediaProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: EmptyMediaVariant;
+};
+declare const EmptyMedia: import("svelte").Component<EmptyMediaProps, {}, "ref">;
+type EmptyMedia = ReturnType<typeof EmptyMedia>;
+export default EmptyMedia;

package/dist/components/feedback/empty/empty-title.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`EmptyTitle`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type EmptyTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: EmptyTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-title"
+  class={cn('font-heading text-base font-medium', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/empty/empty-title.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type EmptyTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const EmptyTitle: import("svelte").Component<EmptyTitleProps, {}, "ref">;
+type EmptyTitle = ReturnType<typeof EmptyTitle>;
+export default EmptyTitle;

package/dist/components/feedback/empty/empty-variants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Origin: the React package 2.23.0 `empty.tsx` (`emptyMediaVariants`), itself shadcn/ui new-york `empty`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type EmptyMediaVariant = NonNullable<VariantProps<typeof emptyMediaVariants>['variant']>;

package/dist/components/feedback/empty/empty-variants.js

@@ -0,0 +1,20 @@
+/**
+ * Origin: the React package 2.23.0 `empty.tsx` (`emptyMediaVariants`), itself shadcn/ui new-york `empty`
+ * Diverged: split out of the component file, as badge-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const emptyMediaVariants = cva('flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            // A ringed circle on the page's own surface, not a filled square. The
+            // chip reads as a frame around the glyph rather than as a tile, which
+            // is what keeps a large empty panel from looking like a broken card.
+            icon: "bg-background text-muted-foreground ring-border flex size-14 shrink-0 items-center justify-center rounded-full ring-1 [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});

package/dist/components/feedback/empty/empty.svelte

@@ -0,0 +1,36 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`Empty`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A dashed panel for nothing-here-yet. `border` as well as `border-dashed`:
+   * Tailwind's `border-dashed` sets only the style, so without a width the
+   * panel drew no edge at all.
+   */
+  export type EmptyProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: EmptyProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty"
+  class={cn(
+    'flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed p-8 text-center text-balance',
+    'bg-muted/30',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/empty/empty.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A dashed panel for nothing-here-yet. `border` as well as `border-dashed`:
+ * Tailwind's `border-dashed` sets only the style, so without a width the
+ * panel drew no edge at all.
+ */
+export type EmptyProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const Empty: import("svelte").Component<EmptyProps, {}, "ref">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/feedback/empty/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Empty, type EmptyProps } from './empty.svelte';
+export { default as EmptyContent, type EmptyContentProps } from './empty-content.svelte';
+export { default as EmptyDescription, type EmptyDescriptionProps } from './empty-description.svelte';
+export { default as EmptyHeader, type EmptyHeaderProps } from './empty-header.svelte';
+export { default as EmptyMedia, type EmptyMediaProps } from './empty-media.svelte';
+export { default as EmptyTitle, type EmptyTitleProps } from './empty-title.svelte';
+export { type EmptyMediaVariant, emptyMediaVariants } from './empty-variants.js';

package/dist/components/feedback/empty/index.js

@@ -0,0 +1,7 @@
+export { default as Empty } from './empty.svelte';
+export { default as EmptyContent } from './empty-content.svelte';
+export { default as EmptyDescription } from './empty-description.svelte';
+export { default as EmptyHeader } from './empty-header.svelte';
+export { default as EmptyMedia } from './empty-media.svelte';
+export { default as EmptyTitle } from './empty-title.svelte';
+export { emptyMediaVariants } from './empty-variants.js';

package/dist/components/feedback/empty-state/empty-state.svelte

@@ -0,0 +1,45 @@
+<!--
+  Origin: the React package 2.23.0 `empty-state.tsx`
+  Diverged: `icon` and `actions` are snippets, as R3-4 has a ReactNode prop.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  /**
+   * The default "nothing here yet" panel, for a list that came back empty when
+   * the screen has nothing more specific to say. `Empty` and its parts stay
+   * exported for the cases that do. The fallback wording is honest anywhere,
+   * which is also the signal that a screen has not been given its own.
+   */
+  export interface EmptyStateProps {
+    /** Rendered in `EmptyMedia`'s icon chip. */
+    icon: Snippet
+    title?: string
+    description?: string
+    /** Buttons offering a way out of the empty state, laid out in a row. */
+    actions?: Snippet
+    class?: string
+  }
+</script>
+
+<script lang="ts">
+  import Empty from '../empty/empty.svelte'
+  import EmptyContent from '../empty/empty-content.svelte'
+  import EmptyDescription from '../empty/empty-description.svelte'
+  import EmptyHeader from '../empty/empty-header.svelte'
+  import EmptyMedia from '../empty/empty-media.svelte'
+  import EmptyTitle from '../empty/empty-title.svelte'
+
+  let { icon, title, description, actions, class: className }: EmptyStateProps = $props()
+</script>
+
+<Empty class={className}>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">{@render icon()}</EmptyMedia>
+    <EmptyTitle>{title || 'No Data'}</EmptyTitle>
+    <EmptyDescription>{description || 'There is no data available.'}</EmptyDescription>
+  </EmptyHeader>
+  {#if actions}
+    <EmptyContent class="flex-row justify-center gap-2">{@render actions()}</EmptyContent>
+  {/if}
+</Empty>

package/dist/components/feedback/empty-state/empty-state.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+/**
+ * The default "nothing here yet" panel, for a list that came back empty when
+ * the screen has nothing more specific to say. `Empty` and its parts stay
+ * exported for the cases that do. The fallback wording is honest anywhere,
+ * which is also the signal that a screen has not been given its own.
+ */
+export interface EmptyStateProps {
+    /** Rendered in `EmptyMedia`'s icon chip. */
+    icon: Snippet;
+    title?: string;
+    description?: string;
+    /** Buttons offering a way out of the empty state, laid out in a row. */
+    actions?: Snippet;
+    class?: string;
+}
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/feedback/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState, type EmptyStateProps } from './empty-state.svelte';

package/dist/components/feedback/empty-state/index.js

@@ -0,0 +1 @@
+export { default as EmptyState } from './empty-state.svelte';

package/dist/components/feedback/error-state/error-state.svelte

@@ -0,0 +1,102 @@
+<!--
+  Origin: the React package 2.23.0 `error-page.tsx`
+  Diverged: React's ErrorPage, renamed to sit beside EmptyState and
+    LoadingState (round 8 plan, R8-3). `icon`, `homeLink` and `actions` are
+    snippets; `homeLink` is the caller's own link, drawn as given (a `Button`
+    with `href`, or the router's link in one), where React wrapped a node in
+    `Button asChild`. Spreads the rest onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * The full-page stop: not found, forbidden, or something that threw.
+   *
+   * Three lines and a button, sitting high on the page rather than centred in
+   * it, near where a reader's eye already is. The description is given room to
+   * stay on one line: clamped to the width the empty states use, a sentence
+   * explaining what happened breaks into three ragged lines.
+   *
+   * The action names its destination ("Back to transfers"), and a refusal
+   * explains the rule, not the mechanism.
+   */
+  export type ErrorStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /** HTTP status, above the title. Omit it and nothing is shown. */
+    status?: number
+    title: string
+    description: string
+    /**
+     * A glyph above the title. Most error pages read better without one: the
+     * sentence already says what happened.
+     */
+    icon?: Snippet
+    /** The way home: a `Button` with `href`, or the router's link styled as one. */
+    homeLink?: Snippet
+    /**
+     * A `history.back()` button ahead of `homeLink`. Off by default: one obvious
+     * way forward is easier to act on, and Back is right only when the reader
+     * arrived by navigating rather than by URL.
+     */
+    showBackButton?: boolean
+    /** Extra buttons, ahead of Back and Home: Try again, for a thrown error. */
+    actions?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Empty from '../empty/empty.svelte'
+  import EmptyContent from '../empty/empty-content.svelte'
+  import EmptyDescription from '../empty/empty-description.svelte'
+  import EmptyHeader from '../empty/empty-header.svelte'
+  import EmptyMedia from '../empty/empty-media.svelte'
+  import EmptyTitle from '../empty/empty-title.svelte'
+
+  let {
+    status,
+    title,
+    description,
+    icon,
+    homeLink,
+    showBackButton = false,
+    actions,
+    class: className,
+    ...rest
+  }: ErrorStateProps = $props()
+
+  const hasActions = $derived(Boolean(actions || showBackButton || homeLink))
+</script>
+
+<div
+  data-slot="error-state"
+  class={cn(
+    'flex min-h-[calc(30vh-var(--header-height,0px))] w-full items-center justify-center p-6',
+    className,
+  )}
+  {...rest}
+>
+  <Empty class="gap-3 border-none">
+    <EmptyHeader class="max-w-2xl gap-2">
+      {#if icon}
+        <EmptyMedia variant="icon">{@render icon()}</EmptyMedia>
+      {/if}
+      {#if status !== undefined}
+        <span class="text-muted-foreground text-xs font-medium tracking-widest">{status}</span>
+      {/if}
+      <EmptyTitle class="font-semibold">{title}</EmptyTitle>
+      <EmptyDescription>{description}</EmptyDescription>
+    </EmptyHeader>
+
+    {#if hasActions}
+      <EmptyContent class="max-w-2xl flex-row justify-center gap-2">
+        {@render actions?.()}
+        {#if showBackButton}
+          <Button variant="outline" onclick={() => window.history.back()}>Go Back</Button>
+        {/if}
+        {@render homeLink?.()}
+      </EmptyContent>
+    {/if}
+  </Empty>
+</div>

package/dist/components/feedback/error-state/error-state.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * The full-page stop: not found, forbidden, or something that threw.
+ *
+ * Three lines and a button, sitting high on the page rather than centred in
+ * it, near where a reader's eye already is. The description is given room to
+ * stay on one line: clamped to the width the empty states use, a sentence
+ * explaining what happened breaks into three ragged lines.
+ *
+ * The action names its destination ("Back to transfers"), and a refusal
+ * explains the rule, not the mechanism.
+ */
+export type ErrorStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /** HTTP status, above the title. Omit it and nothing is shown. */
+    status?: number;
+    title: string;
+    description: string;
+    /**
+     * A glyph above the title. Most error pages read better without one: the
+     * sentence already says what happened.
+     */
+    icon?: Snippet;
+    /** The way home: a `Button` with `href`, or the router's link styled as one. */
+    homeLink?: Snippet;
+    /**
+     * A `history.back()` button ahead of `homeLink`. Off by default: one obvious
+     * way forward is easier to act on, and Back is right only when the reader
+     * arrived by navigating rather than by URL.
+     */
+    showBackButton?: boolean;
+    /** Extra buttons, ahead of Back and Home: Try again, for a thrown error. */
+    actions?: Snippet;
+};
+declare const ErrorState: import("svelte").Component<ErrorStateProps, {}, "">;
+type ErrorState = ReturnType<typeof ErrorState>;
+export default ErrorState;

package/dist/components/feedback/error-state/index.d.ts

@@ -0,0 +1 @@
+export { default as ErrorState, type ErrorStateProps } from './error-state.svelte';

package/dist/components/feedback/error-state/index.js

@@ -0,0 +1 @@
+export { default as ErrorState } from './error-state.svelte';

package/dist/components/feedback/feature-preview/feature-preview.svelte

@@ -0,0 +1,102 @@
+<!--
+  Origin: the React package 2.23.0 `feature-preview.tsx`
+  Diverged: generic, per the round 5 triage (round 8 plan, R8-8): the React
+    comments and stories pitched a pricing tier; here it is a preview of
+    anything not yet available to the reader. `preview` and the actions are
+    snippets. Lucide's lock. Spreads the rest onto the section, as every
+    component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * The page a reader lands on when a feature is not open to them yet, in
+   * place of an error, so a locked page still says what it would do and how
+   * to get it.
+   *
+   * `LockedOverlay` at page scale, so a locked page and a locked widget speak
+   * one language: the real screen's shape, blurred and inert, full width, with
+   * the pitch in a card centred over it. Not a modal behind a button: the
+   * reader navigated here on purpose, and the pitch is the only thing on the
+   * page. Every word comes from the caller; the component owns the layout.
+   */
+  export type FeaturePreviewProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** The feature's name, as the page would title it: "Purchase orders". */
+    title: string
+    /** What the feature does, in one line. */
+    headline: string
+    /** Two or three concrete benefits. More turns the pitch into a manual. */
+    benefits: readonly string[]
+    /**
+     * A static sample of the real screen, from made-up data, laid out as the
+     * page would be. Blurred, inert and hidden from assistive technology: a
+     * picture of the feature, never a working copy.
+     */
+    preview: Snippet
+    /** The way in: "Turn on purchase orders". */
+    primaryAction: Snippet
+    /** Usually "Learn more". */
+    secondaryAction?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import LockIcon from '@lucide/svelte/icons/lock'
+
+  import { cn } from '../../../utils/cn.js'
+  import Card from '../../layout/card/card.svelte'
+  import CardContent from '../../layout/card/card-content.svelte'
+  import CardDescription from '../../layout/card/card-description.svelte'
+  import CardFooter from '../../layout/card/card-footer.svelte'
+  import CardHeader from '../../layout/card/card-header.svelte'
+  import CardTitle from '../../layout/card/card-title.svelte'
+
+  let {
+    title,
+    headline,
+    benefits,
+    preview,
+    primaryAction,
+    secondaryAction,
+    class: className,
+    ...rest
+  }: FeaturePreviewProps = $props()
+</script>
+
+<section data-slot="feature-preview" class={cn('grid', className)} {...rest}>
+  <div
+    aria-hidden="true"
+    inert
+    data-slot="feature-preview-sample"
+    class="pointer-events-none col-start-1 row-start-1 self-start select-none opacity-60 blur-sm"
+  >
+    {@render preview()}
+  </div>
+  <div class="relative col-start-1 row-start-1 flex items-center justify-center p-4">
+    <Card class="w-full max-w-lg">
+      <CardHeader class="justify-items-center text-center">
+        <span
+          class="bg-foreground/[0.07] text-muted-foreground flex size-10 items-center justify-center rounded-full"
+        >
+          <LockIcon class="size-5" />
+        </span>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{headline}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ul
+          class="text-muted-foreground marker:text-muted-foreground/60 flex list-disc flex-col gap-2 pl-5 text-sm"
+        >
+          {#each benefits as benefit (benefit)}
+            <li>{benefit}</li>
+          {/each}
+        </ul>
+      </CardContent>
+      <CardFooter class="flex-wrap justify-center gap-2">
+        {@render primaryAction()}
+        {@render secondaryAction?.()}
+      </CardFooter>
+    </Card>
+  </div>
+</section>

package/dist/components/feedback/feature-preview/feature-preview.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * The page a reader lands on when a feature is not open to them yet, in
+ * place of an error, so a locked page still says what it would do and how
+ * to get it.
+ *
+ * `LockedOverlay` at page scale, so a locked page and a locked widget speak
+ * one language: the real screen's shape, blurred and inert, full width, with
+ * the pitch in a card centred over it. Not a modal behind a button: the
+ * reader navigated here on purpose, and the pitch is the only thing on the
+ * page. Every word comes from the caller; the component owns the layout.
+ */
+export type FeaturePreviewProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** The feature's name, as the page would title it: "Purchase orders". */
+    title: string;
+    /** What the feature does, in one line. */
+    headline: string;
+    /** Two or three concrete benefits. More turns the pitch into a manual. */
+    benefits: readonly string[];
+    /**
+     * A static sample of the real screen, from made-up data, laid out as the
+     * page would be. Blurred, inert and hidden from assistive technology: a
+     * picture of the feature, never a working copy.
+     */
+    preview: Snippet;
+    /** The way in: "Turn on purchase orders". */
+    primaryAction: Snippet;
+    /** Usually "Learn more". */
+    secondaryAction?: Snippet;
+};
+declare const FeaturePreview: import("svelte").Component<FeaturePreviewProps, {}, "">;
+type FeaturePreview = ReturnType<typeof FeaturePreview>;
+export default FeaturePreview;

package/dist/components/feedback/feature-preview/index.d.ts

@@ -0,0 +1 @@
+export { default as FeaturePreview, type FeaturePreviewProps } from './feature-preview.svelte';

package/dist/components/feedback/feature-preview/index.js

@@ -0,0 +1 @@
+export { default as FeaturePreview } from './feature-preview.svelte';

package/dist/components/feedback/loading-state/index.d.ts

@@ -0,0 +1 @@
+export { default as LoadingState, type LoadingStateProps } from './loading-state.svelte';

package/dist/components/feedback/loading-state/index.js

@@ -0,0 +1 @@
+export { default as LoadingState } from './loading-state.svelte';

package/dist/components/feedback/loading-state/loading-state.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `loading-state.tsx`
+  Diverged: `actions` is a snippet, as R3-4 has a ReactNode prop.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  /**
+   * The panel that says work is under way, when the shape of what is coming is
+   * not known yet. The mirror of `EmptyState`, on the same `Empty` parts, so a
+   * list that flips from loading to empty does not move; the border is solid
+   * because something is coming. Reach for it last: where the layout is known,
+   * a `Skeleton` holds it.
+   */
+  export interface LoadingStateProps {
+    title?: string
+    description?: string
+    /** Something to do instead of waiting, usually "Continue in background". */
+    actions?: Snippet
+    class?: string
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Empty from '../empty/empty.svelte'
+  import EmptyContent from '../empty/empty-content.svelte'
+  import EmptyDescription from '../empty/empty-description.svelte'
+  import EmptyHeader from '../empty/empty-header.svelte'
+  import EmptyMedia from '../empty/empty-media.svelte'
+  import EmptyTitle from '../empty/empty-title.svelte'
+  import Spinner from '../spinner/spinner.svelte'
+
+  let { title, description, actions, class: className }: LoadingStateProps = $props()
+</script>
+
+<Empty class={cn('border-solid', className)}>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Spinner class="size-6" /></EmptyMedia>
+    <EmptyTitle>{title || 'Loading'}</EmptyTitle>
+    {#if description}
+      <EmptyDescription>{description}</EmptyDescription>
+    {/if}
+  </EmptyHeader>
+  {#if actions}
+    <EmptyContent class="flex-row justify-center gap-2">{@render actions()}</EmptyContent>
+  {/if}
+</Empty>

package/dist/components/feedback/loading-state/loading-state.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * The panel that says work is under way, when the shape of what is coming is
+ * not known yet. The mirror of `EmptyState`, on the same `Empty` parts, so a
+ * list that flips from loading to empty does not move; the border is solid
+ * because something is coming. Reach for it last: where the layout is known,
+ * a `Skeleton` holds it.
+ */
+export interface LoadingStateProps {
+    title?: string;
+    description?: string;
+    /** Something to do instead of waiting, usually "Continue in background". */
+    actions?: Snippet;
+    class?: string;
+}
+declare const LoadingState: import("svelte").Component<LoadingStateProps, {}, "">;
+type LoadingState = ReturnType<typeof LoadingState>;
+export default LoadingState;

package/dist/components/feedback/locked-overlay/index.d.ts

@@ -0,0 +1 @@
+export { default as LockedOverlay, type LockedOverlayProps } from './locked-overlay.svelte';

package/dist/components/feedback/locked-overlay/index.js

@@ -0,0 +1 @@
+export { default as LockedOverlay } from './locked-overlay.svelte';