loadshape 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# loadshape
+
+## 0.2.0
+
+### Minor Changes
+
+- ff154bc: Add React 18 support alongside React 19, preserving forwarded refs, callback cleanup, and inert loading roots.
+- 6426e69: Add Skeleton.Repeat to render a placeholder template multiple times without extra DOM wrappers. The application keeps ownership of placeholder data, loading state, and layout.
+
+## 0.1.0
+
+### Minor Changes
+
+- Первый публичный Skeleton для React 19: Root и Static с render и ref, заглушка из настоящего компонента, inert и CSS-переменные. В поставку входят ES modules, TypeScript declarations, отдельный CSS в @layer loadshape, примеры подключения и лицензия MIT. Скилл интеграции поставляется в репозитории отдельно от npm-пакета.
+- b6e45b5: Добавлен RouteProgress с неопределённым прогрессом, общей задержкой появления и поддержкой reduced-motion. Отдельный импорт loadshape/tanstack-router подключает полосу к TanStack Router через optional peer; основной импорт библиотеки остаётся независимым от роутера.
+- fc1e157: Добавлен Spinner с размером и цветом из окружения, пропами render и label и поддержкой reduced-motion. Переменная --loadshape_delay задаёт общую задержку появления Skeleton и Spinner; частные --skeleton_delay и --spinner_delay сохраняют приоритет.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Semyon Surkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,270 @@
-# Temporary Holding Version
+# loadshape
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Loading states for React 18 and 19 that use your component's layout and your application's visual tokens.
+Skeleton paints the rendered content, Spinner inherits its size and color, and RouteProgress
+indicates navigation without inventing a percentage.
+
+## Install
+
+Requires React 18 or 19.
+
+```sh
+pnpm add loadshape
+```
+
+Import CSS once at the application entry:
+
+```tsx
+import 'loadshape/styles.css';
+```
+
+Styles live in `@layer loadshape`. There is no theme or runtime stylesheet injection.
+The core entry depends only on React; using it does not require TanStack Router.
+
+## Skeleton
+
+Render the same component in both states, using realistic placeholder data while loading:
+
+```tsx
+import { Skeleton } from 'loadshape';
+
+type Post = { id: string; title: string; excerpt: string };
+
+const PLACEHOLDER_POSTS: Post[] = [
+  { id: 'placeholder-1', title: 'A typical article title', excerpt: 'A representative summary.' },
+  { id: 'placeholder-2', title: 'Another article title', excerpt: 'A slightly longer summary.' },
+];
+
+export function PostList({ data, loading }: { data?: Post[]; loading: boolean }) {
+  const posts = data ?? PLACEHOLDER_POSTS;
+
+  return (
+    <section aria-busy={loading || undefined}>
+      <Skeleton.Root loading={loading}>
+        <Skeleton.Static render={<h2 />}>Recent posts</Skeleton.Static>
+        <ul>
+          {posts.map((post) => (
+            <li key={post.id}>
+              <h3>{post.title}</h3>
+              <p>{post.excerpt}</p>
+            </li>
+          ))}
+        </ul>
+      </Skeleton.Root>
+    </section>
+  );
+}
+```
+
+Keep the application's existing error and empty branches. Placeholder values must satisfy its
+real types and formatters, including dates and enums. With TanStack Query, provide placeholderData
+and pass isPlaceholderData to loading: placeholder data puts the query in success, so isPending
+is false. Preserve cached real data during background refresh and respect disabled queries.
+
+### Repeated placeholders
+
+`Skeleton.Repeat` repeats a render function without adding a DOM wrapper:
+
+```tsx
+const PLACEHOLDER_COUNT = 8;
+const PLACEHOLDER_POST = {
+  title: 'A representative article title',
+  excerpt: 'A typical summary with realistic length.',
+};
+
+<section aria-busy={loading || undefined}>
+  <Skeleton.Root loading={loading} render={<ul className={styles.list} />}>
+    {loading ? (
+      <Skeleton.Repeat count={PLACEHOLDER_COUNT}>
+        {(index) => (
+          <li>
+            <PostCard post={PLACEHOLDER_POST} position={index + 1} />
+          </li>
+        )}
+      </Skeleton.Repeat>
+    ) : (
+      posts.map((post) => (
+        <li key={post.id}>
+          <PostCard post={post} />
+        </li>
+      ))
+    )}
+  </Skeleton.Root>
+</section>;
+```
+
+`count` is a required non-negative safe integer. Zero renders nothing and does not call
+`children`; invalid counts throw `RangeError`. `children(index)` receives a zero-based index.
+Repeat supplies stable positional keys, so the returned placeholder needs no key.
+For real data, keep entity keys in your normal map.
+
+Repeat does not enable skeleton loading, choose data, create list elements, set `aria-busy`,
+or apply layout and spacing. Keep those in the application. If the repeated component already
+contains `Skeleton.Root`, pass its loading prop instead of adding another Root.
+
+### Root and Static
+
+| Component         | Props                                                                               | Default element                 |
+| ----------------- | ----------------------------------------------------------------------------------- | ------------------------------- |
+| `Skeleton.Root`   | Required `loading: boolean`, `render`, HTML attributes, `className`, `style`, `ref` | `div`                           |
+| `Skeleton.Static` | `render`, HTML attributes, `className`, `style`, `ref`                              | `span` with `display: contents` |
+
+Use render to apply the mechanism to an existing element:
+
+```tsx
+<Skeleton.Root loading={loading} render={<table className={styles.table} />}>
+  <Skeleton.Static render={<thead />}>
+    <tr>
+      <th>Name</th>
+      <th>Total</th>
+    </tr>
+  </Skeleton.Static>
+  <tbody>{rows}</tbody>
+</Skeleton.Root>
+```
+
+Supply valid elements inside tables, lists, and select; a default span is not a valid child there.
+Custom components passed through render must forward HTML attributes and ref to their DOM root.
+In React 18, wrap these components in forwardRef; React 19 also supports ref as a prop.
+Static preserves its whole subtree, so include only content known without the request. Put a
+dynamic value in its own element beside a static label. A static element anywhere inside a text
+block turns off that block's text lines, because an ancestor's underline would be drawn across it;
+keep Static a direct child of the block and wrap dynamic values in their own elements.
+
+Root becomes inert while loading. Place aria-busy on the application's container outside Root,
+since inert removes Root and its descendants from focus and the accessibility tree. Controls
+that remain usable, such as cancellation, belong outside Root even if they are visually static.
+
+### Attributes
+
+| Attribute                 | Meaning                                              |
+| ------------------------- | ---------------------------------------------------- |
+| `data-skeleton="loading"` | Enables the loading paint on Root                    |
+| `data-skeleton-static`    | Preserves a request-independent subtree              |
+| `data-skeleton-bone`      | Makes an intentionally empty element a bone          |
+| `data-skeleton-contents`  | Gives the default Static wrapper `display: contents` |
+
+Skeleton paints text lines, media, and controls. Container backgrounds, borders, spacing, and SVG
+icons remain visible. It preserves the rendered tree's geometry; it cannot predict unknown text
+length or the number of rows in a response.
+
+Reserve image dimensions or aspect-ratio in the component. Give inputs, selects, and buttons the
+application's styling: painting an unstyled native control can change its size in WebKit. A chart
+whose content is entirely SVG needs an application-owned loading representation.
+
+## Spinner
+
+```tsx
+import { Spinner } from 'loadshape';
+
+<Spinner />;
+<Spinner label="Loading the report" />;
+```
+
+Spinner defaults to span and accepts label, render, HTML attributes, className, style, and a forwarded
+ref. Its ring is 1em and currentColor; reserve its slot or match the replaced icon to preserve
+layout. It appears after the shared delay and slows rotation threefold under reduced-motion.
+
+Without label it is decorative (`aria-hidden`). With label it has role=status and a visually
+hidden text child. Mounting a live region with its initial text does not guarantee an announcement;
+keep an application status region mounted before updating its text when that is required.
+
+## RouteProgress
+
+Use the general component with any router or navigation loading signal:
+
+```tsx
+import { RouteProgress } from 'loadshape';
+
+<RouteProgress pending={pending} className={styles.progress} />;
+```
+
+It defaults to div and accepts required pending, render, HTML attributes, className, style, and
+forwarded ref. Keep it mounted in the navigation layout. The application owns positioning, width,
+stacking order, color, and accessible status. In normal flow it reserves its height while hidden.
+Completion and cancellation hide it immediately. Reduced-motion shows a stationary full-width bar.
+
+If a new operation replaces a pending operation without an intermediate false, give the general
+component a new React key to restart its appearance delay.
+
+### TanStack Router
+
+Install the optional peer `@tanstack/react-router` at a compatible `^1.170.41` version, then use
+the adapter inside RouterProvider's persistent root layout:
+
+```tsx
+import { Outlet } from '@tanstack/react-router';
+import { RouteProgress } from 'loadshape/tanstack-router';
+
+function RootLayout() {
+  return (
+    <>
+      <RouteProgress className={styles.progress} />
+      <Outlet />
+    </>
+  );
+}
+```
+
+The adapter owns pending and resets the delay when the destination href changes. Its remaining
+props match the general component. Both components are decorative; the application owns aria-busy
+and any accessible navigation status.
+
+## CSS variables
+
+Override variables using the application's tokens:
+
+```css
+.progress {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  color: var(--accent);
+  --route_progress_thickness: var(--spacing_half);
+}
+```
+
+| Variable                     | Default                                              |
+| ---------------------------- | ---------------------------------------------------- |
+| `--loadshape_delay`          | `150ms`                                              |
+| `--skeleton_delay`           | Shared delay                                         |
+| `--skeleton_color`           | `color-mix(in oklab, currentColor 14%, transparent)` |
+| `--skeleton_duration`        | `1.4s`                                               |
+| `--skeleton_shimmer_opacity` | `0.35`                                               |
+| `--spinner_delay`            | Shared delay                                         |
+| `--spinner_size`             | `1em`                                                |
+| `--spinner_thickness`        | `0.125em`                                            |
+| `--spinner_duration`         | `0.8s`                                               |
+| `--route_progress_delay`     | Shared delay                                         |
+| `--route_progress_thickness` | `0.125em`                                            |
+| `--route_progress_duration`  | `1.4s`                                               |
+
+Component delays override the shared delay. All three components wait before appearing, so short
+loads do not flash. Skeleton shimmer stops under reduced-motion. Variables starting with `--_`
+are internal implementation details.
+
+## Compatibility and scope
+
+ES modules and TypeScript declarations are supplied for both JavaScript entry points. CSS must
+be imported separately. CommonJS and legacy CSS engines are outside this release's scope.
+The styles use modern CSS including layers, :has(), color-mix(), masks, and the rotate property.
+Checks cover current Chromium and WebKit, without claiming every browser or screen reader version.
+
+loadshape provides loading paint and indicators. Fetching, error and empty states, visual tokens,
+and predicting unknown content remain application responsibilities.
+
+## Local checkout
+
+To try an unreleased build, pack the library and install the archive:
+
+```sh
+pnpm --filter loadshape build
+pnpm --filter loadshape pack --pack-destination /tmp
+# In the consuming application:
+pnpm add /tmp/loadshape-0.2.0.tgz
+```
+
+Use pnpm for the archive: npm does not apply `publishConfig.exports` and leaves `source` conditions
+and no license file in the tarball.
+
+License: MIT.

package/dist/RouteProgress-Cq28cihc.js

@@ -0,0 +1,81 @@
+import { cloneElement, forwardRef, useMemo, version } from "react";
+import { jsx } from "react/jsx-runtime";
+const IS_REACT_19 = Number.parseInt(version, 10) >= 19;
+//#endregion
+//#region src/utils/useRenderElement.ts
+const EVENT_HANDLER = /^on[A-Z]/;
+/**
+* Слитый ref возвращает общую очистку: колбэк-ref в React 19 может вернуть свою очистку, и без
+* этого подписка из него (например, observer.disconnect) копилась бы с каждым рендером.
+*/
+function mergeRefs(refs) {
+	let cleanups = [];
+	const cleanup = () => {
+		const pending = cleanups;
+		cleanups = [];
+		for (const dispose of pending) dispose();
+	};
+	return (node) => {
+		cleanup();
+		if (node === null) return;
+		cleanups = refs.flatMap((ref) => {
+			if (typeof ref === "function") {
+				const dispose = ref(node);
+				return [typeof dispose === "function" ? dispose : () => ref(null)];
+			}
+			if (ref) {
+				ref.current = node;
+				return [() => {
+					ref.current = null;
+				}];
+			}
+			return [];
+		});
+		if (IS_REACT_19) return cleanup;
+	};
+}
+function mergeHandlers(own, passed) {
+	if (typeof own !== "function" || typeof passed !== "function") return passed ?? own;
+	return (...args) => {
+		own(...args);
+		passed(...args);
+	};
+}
+/**
+* Рисует элемент из пропа render с пропами компонента, как render у Base UI: className и style
+* объединяются, обработчики событий вызываются оба, ref сливаются, остальные пропы компонента
+* перебивают пропы элемента. Атрибуты состояния передаются последними и перебивают всё: проект
+* не должен случайно снять data-skeleton или inert, передав свой атрибут с тем же именем.
+*/
+function useRenderElement(element, props, state = {}) {
+	const own = element.props;
+	const merged = { ...props };
+	for (const key of Object.keys(props)) if (EVENT_HANDLER.test(key)) merged[key] = mergeHandlers(own[key], props[key]);
+	const className = [own.className, props.className].filter(Boolean).join(" ");
+	const ownRef = IS_REACT_19 ? own.ref : element.ref;
+	const ref = useMemo(() => ownRef || props.ref ? mergeRefs([ownRef, props.ref]) : void 0, [ownRef, props.ref]);
+	return cloneElement(element, {
+		...merged,
+		...state,
+		className: className || void 0,
+		style: own.style || props.style ? {
+			...own.style,
+			...props.style
+		} : void 0,
+		ref,
+		children: state.children ?? props.children ?? own.children
+	});
+}
+//#endregion
+//#region src/route-progress/RouteProgress.tsx
+const RouteProgress = forwardRef(function RouteProgress({ pending, render = /* @__PURE__ */ jsx("div", {}), ...props }, ref) {
+	return useRenderElement(render, {
+		...props,
+		ref
+	}, {
+		"data-route-progress": pending ? "pending" : "",
+		"aria-hidden": true
+	});
+});
+//#endregion
+export { useRenderElement as n, IS_REACT_19 as r, RouteProgress as t };

package/dist/index-KGl0rvk4.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactElement, ReactNode, Ref, RefAttributes } from "react";
+//#region src/utils/useRenderElement.d.ts
+type ElementProps = Record<string, unknown> & {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  ref?: Ref<unknown>;
+};
+type RenderElement = ReactElement<ElementProps>;
+//#endregion
+//#region src/route-progress/RouteProgress.d.ts
+interface RouteProgressProps extends HTMLAttributes<HTMLElement> {
+  pending: boolean;
+  render?: RenderElement;
+  ref?: Ref<HTMLElement>;
+}
+declare const RouteProgress: ForwardRefExoticComponent<PropsWithoutRef<RouteProgressProps> & RefAttributes<HTMLElement>>;
+//#endregion
+export { RouteProgressProps as n, RenderElement as r, RouteProgress as t };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+import { n as RouteProgressProps, r as RenderElement, t as RouteProgress } from "./index-KGl0rvk4.js";
+import { ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactElement, ReactNode, Ref, RefAttributes } from "react";
+//#region src/skeleton/Root.d.ts
+interface RootProps extends HTMLAttributes<HTMLElement> {
+  /** Пока true, поддерево рисуется заглушкой той же геометрии. */
+  loading: boolean;
+  /** Элемент, которым рисуется корень вместо div, например render={<ul />}. */
+  render?: RenderElement;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * На время загрузки корень получает inert: заглушка не берёт фокус и не читается скринридером.
+ * inert убирает из дерева доступности и сам корень, поэтому aria-busy на нём никто бы не
+ * услышал; aria-busy ставит проект на свой контейнер вокруг корня.
+ */
+declare const Root: ForwardRefExoticComponent<PropsWithoutRef<RootProps> & RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/skeleton/Static.d.ts
+interface StaticProps extends HTMLAttributes<HTMLElement> {
+  /** Элемент, который помечается статичным вместо обёртки, например render={<h2 />}. */
+  render?: RenderElement;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Без render содержимое оборачивается в span с display: contents из styles.css: у такой обёртки
+ * нет своего бокса, поэтому в потоке и во флексе раскладка вокруг статичного не меняется, а
+ * className на ней задаёт только наследуемые свойства. Внутри table, thead, tbody, tr, ul и select
+ * span ребёнком быть не может, там нужен render с элементом этого уровня, например
+ * render={<thead />}.
+ */
+declare const Static: ForwardRefExoticComponent<PropsWithoutRef<StaticProps> & RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/skeleton/Repeat.d.ts
+interface RepeatProps {
+  /** Количество повторений; неотрицательное безопасное целое число. */
+  count: number;
+  /** Шаблон элемента. Получает индекс от нуля; данные и loading задаёт приложение. */
+  children: (index: number) => ReactNode;
+}
+/** Повторяет шаблон со стабильными ключами без дополнительных DOM-элементов. */
+declare function Repeat({ count, children }: RepeatProps): ReactElement;
+declare namespace index_d_exports {
+  export { Repeat, RepeatProps, Root, RootProps, Static, StaticProps };
+}
+//#endregion
+//#region src/spinner/Spinner.d.ts
+/**
+ * children не принимаются: с label содержимым элемента становится визуально скрытая подпись, и
+ * переданные children молча терялись бы.
+ */
+interface SpinnerProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** Подпись для скринридера; без неё спиннер декоративный. */
+  label?: string;
+  /** Элемент, которым рисуется спиннер вместо span. */
+  render?: RenderElement;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Без label спиннер скрыт от скринридера: обычно он стоит в кнопке или контейнере, где загрузку
+ * уже сообщает aria-busy, и второй сигнал был бы лишним. С label он становится role="status", а
+ * подпись лежит визуально скрытым текстом внутри, потому что живой регион озвучивает содержимое,
+ * а не aria-label. Смонтированный сразу с подписью регион скринридер может не объявить сам, тогда
+ * подпись служит именем при навигации; для гарантированного объявления регион статуса держат в
+ * разметке заранее.
+ */
+export declare const Spinner: ForwardRefExoticComponent<PropsWithoutRef<SpinnerProps> & RefAttributes<HTMLElement>>;
+//#endregion
+export { RouteProgress, type RouteProgressProps, index_d_exports as Skeleton, type SpinnerProps };

package/dist/index.js

@@ -0,0 +1,78 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { n as useRenderElement, r as IS_REACT_19, t as RouteProgress } from "./RouteProgress-Cq28cihc.js";
+import { Fragment, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/skeleton/Root.tsx
+const LOADING_STATE = {
+	"data-skeleton": "loading",
+	inert: IS_REACT_19 ? true : ""
+};
+/**
+* На время загрузки корень получает inert: заглушка не берёт фокус и не читается скринридером.
+* inert убирает из дерева доступности и сам корень, поэтому aria-busy на нём никто бы не
+* услышал; aria-busy ставит проект на свой контейнер вокруг корня.
+*/
+const Root = forwardRef(function Root({ loading, render = /* @__PURE__ */ jsx("div", {}), ...props }, ref) {
+	return useRenderElement(render, {
+		...props,
+		ref
+	}, loading ? LOADING_STATE : {});
+});
+//#endregion
+//#region src/skeleton/Static.tsx
+const STATIC_STATE = { "data-skeleton-static": "" };
+/**
+* Без render содержимое оборачивается в span с display: contents из styles.css: у такой обёртки
+* нет своего бокса, поэтому в потоке и во флексе раскладка вокруг статичного не меняется, а
+* className на ней задаёт только наследуемые свойства. Внутри table, thead, tbody, tr, ul и select
+* span ребёнком быть не может, там нужен render с элементом этого уровня, например
+* render={<thead />}.
+*/
+const Static = forwardRef(function Static({ render = /* @__PURE__ */ jsx("span", { "data-skeleton-contents": "" }), ...props }, ref) {
+	return useRenderElement(render, {
+		...props,
+		ref
+	}, STATIC_STATE);
+});
+//#endregion
+//#region src/skeleton/Repeat.tsx
+/** Повторяет шаблон со стабильными ключами без дополнительных DOM-элементов. */
+function Repeat({ count, children }) {
+	if (!Number.isSafeInteger(count) || count < 0) throw new RangeError("Skeleton.Repeat count must be a non-negative safe integer.");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Fragment, { children: children(index) }, index)) });
+}
+//#endregion
+//#region src/skeleton/index.ts
+var skeleton_exports = /* @__PURE__ */ __exportAll({
+	Repeat: () => Repeat,
+	Root: () => Root,
+	Static: () => Static
+});
+//#endregion
+//#region src/spinner/Spinner.tsx
+/**
+* Без label спиннер скрыт от скринридера: обычно он стоит в кнопке или контейнере, где загрузку
+* уже сообщает aria-busy, и второй сигнал был бы лишним. С label он становится role="status", а
+* подпись лежит визуально скрытым текстом внутри, потому что живой регион озвучивает содержимое,
+* а не aria-label. Смонтированный сразу с подписью регион скринридер может не объявить сам, тогда
+* подпись служит именем при навигации; для гарантированного объявления регион статуса держат в
+* разметке заранее.
+*/
+const Spinner = forwardRef(function Spinner({ label, render = /* @__PURE__ */ jsx("span", {}), ...props }, ref) {
+	return useRenderElement(render, {
+		...props,
+		ref
+	}, label ? {
+		"data-spinner": "",
+		role: "status",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-spinner-label": "",
+			children: label
+		})
+	} : {
+		"data-spinner": "",
+		"aria-hidden": true
+	});
+});
+//#endregion
+export { RouteProgress, skeleton_exports as Skeleton, Spinner };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/styles.css

@@ -0,0 +1,173 @@
+@layer loadshape {
+  [data-skeleton="loading"] {
+    -webkit-text-fill-color: transparent !important;
+  }
+
+  [data-skeleton="loading"] :where(:not([data-skeleton-static], [data-skeleton-static] *)) {
+    text-underline-offset: -.62em !important;
+    text-decoration-skip-ink: none !important;
+    text-decoration-line: none !important;
+    text-decoration-thickness: .72em !important;
+  }
+
+  [data-skeleton="loading"]:where(:not(:has( > :not(a, abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, img, input, ins, kbd, label, mark, output, q, ruby, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr), [data-skeleton-static])):not(:empty, img, svg, video, canvas, picture, input, select, textarea, button, [role="button"], [data-skeleton-bone], [data-skeleton-static], [data-skeleton-static] *)), [data-skeleton="loading"] :where(:not(:has( > :not(a, abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, img, input, ins, kbd, label, mark, output, q, ruby, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr), [data-skeleton-static])):not(:is([data-skeleton="loading"], [data-skeleton="loading"] *):not(:has( > :not(a, abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, img, input, ins, kbd, label, mark, output, q, ruby, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr), [data-skeleton-static])) > *):not(:empty, img, svg, video, canvas, picture, input, select, textarea, button, [role="button"], [data-skeleton-bone], [data-skeleton-static], [data-skeleton-static] *)) {
+    --_skeleton_paint: var(--skeleton_color, color-mix(in oklab, currentColor 14%, transparent));
+    text-decoration-line: underline !important;
+    text-decoration-style: solid !important;
+    text-decoration-color: var(--_skeleton_paint) !important;
+    text-underline-offset: -.62em !important;
+    text-decoration-skip-ink: none !important;
+    animation: skeleton_delay 0s var(--skeleton_delay, var(--loadshape_delay, .15s)) backwards !important;
+    text-decoration-thickness: .72em !important;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: skeleton_delay 0s var(--skeleton_delay, var(--loadshape_delay, .15s)) backwards,
+        skeleton_shimmer var(--skeleton_duration, 1.4s) linear var(--skeleton_delay, var(--loadshape_delay, .15s)) infinite !important;
+    }
+  }
+
+  [data-skeleton="loading"]:where(img, video, canvas, input, select, textarea, button, [role="button"], [data-skeleton-bone]), [data-skeleton="loading"] :where(img, video, canvas, input, select, textarea, button, [role="button"], [data-skeleton-bone]):where(:not([data-skeleton-static], [data-skeleton-static] *)) {
+    --_skeleton_paint: var(--skeleton_color, color-mix(in oklab, currentColor 14%, transparent));
+    color: inherit !important;
+    background: var(--_skeleton_paint) !important;
+    object-position: -100000px 0 !important;
+    resize: none !important;
+    animation: skeleton_delay 0s var(--skeleton_delay, var(--loadshape_delay, .15s)) backwards !important;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: skeleton_delay 0s var(--skeleton_delay, var(--loadshape_delay, .15s)) backwards,
+        skeleton_shimmer var(--skeleton_duration, 1.4s) linear var(--skeleton_delay, var(--loadshape_delay, .15s)) infinite !important;
+    }
+  }
+
+  [data-skeleton="loading"]:where(button, [role="button"], [data-skeleton-bone]) > :not([data-skeleton-static], [data-skeleton-static] *), [data-skeleton="loading"] :where(button, [role="button"], [data-skeleton-bone]):where(:not([data-skeleton-static], [data-skeleton-static] *)) > :not([data-skeleton-static], [data-skeleton-static] *) {
+    visibility: hidden !important;
+  }
+
+  [data-skeleton-contents] {
+    display: contents;
+  }
+
+  [data-skeleton="loading"] [data-skeleton-static] {
+    -webkit-text-fill-color: currentcolor !important;
+  }
+
+  [data-spinner] {
+    box-sizing: border-box;
+    inline-size: var(--spinner_size, 1em);
+    block-size: var(--spinner_size, 1em);
+    vertical-align: -.125em;
+    border: var(--spinner_thickness, .125em) solid
+      color-mix(in oklab, currentColor 25%, transparent);
+    animation: spinner_delay 0s var(--spinner_delay, var(--loadshape_delay, .15s)) backwards,
+      spinner_rotate var(--spinner_duration, .8s) linear infinite;
+    border-block-start-color: currentColor;
+    border-radius: 50%;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-spinner] {
+      animation-duration: 0s, calc(var(--spinner_duration, .8s) * 3);
+    }
+  }
+
+  @keyframes spinner_rotate {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  [data-spinner-label] {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @keyframes spinner_delay {
+    from, to {
+      opacity: 0;
+    }
+  }
+
+  [data-route-progress] {
+    block-size: var(--route_progress_thickness, .125em);
+    opacity: 0;
+    pointer-events: none;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-route-progress]:before {
+    content: "";
+    background: currentColor;
+    inline-size: 40%;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+
+  [data-route-progress="pending"] {
+    opacity: 1;
+    animation: route_progress_delay 0s var(--route_progress_delay, var(--loadshape_delay, .15s))
+      backwards;
+  }
+
+  [data-route-progress="pending"]:before {
+    animation: route_progress_slide var(--route_progress_duration, 1.4s) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-route-progress="pending"]:before {
+      inline-size: 100%;
+      animation: none;
+    }
+  }
+
+  @keyframes route_progress_delay {
+    from, to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes route_progress_slide {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(250%);
+    }
+  }
+
+  @keyframes skeleton_shimmer {
+    from {
+      mask-image: linear-gradient(90deg,
+        #000 0 35%,
+        rgb(0 0 0 / var(--skeleton_shimmer_opacity, .35)) 50%,
+        #000 65% 100%);
+      mask-position: 100% 0;
+      mask-size: 300% 100%;
+    }
+
+    to {
+      mask-image: linear-gradient(90deg,
+        #000 0 35%,
+        rgb(0 0 0 / var(--skeleton_shimmer_opacity, .35)) 50%,
+        #000 65% 100%);
+      mask-position: 0 0;
+      mask-size: 300% 100%;
+    }
+  }
+
+  @keyframes skeleton_delay {
+    from, to {
+      --_skeleton_paint: transparent;
+    }
+  }
+}

package/dist/tanstack-router.d.ts

@@ -0,0 +1,6 @@
+import { n as RouteProgressProps$1 } from "./index-KGl0rvk4.js";
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+//#region src/tanstack-router.d.ts
+export type RouteProgressProps = Omit<RouteProgressProps$1, "pending">;
+export declare const RouteProgress: ForwardRefExoticComponent<PropsWithoutRef<RouteProgressProps> & RefAttributes<HTMLElement>>;
+//#endregion

package/dist/tanstack-router.js

@@ -0,0 +1,16 @@
+import { t as RouteProgress$1 } from "./RouteProgress-Cq28cihc.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRouterState } from "@tanstack/react-router";
+//#region src/tanstack-router.tsx
+const RouteProgress = forwardRef(function RouteProgress(props, ref) {
+	const pending = useRouterState({ select: (state) => state.status === "pending" });
+	const destination = useRouterState({ select: (state) => state.location.href });
+	return /* @__PURE__ */ jsx(RouteProgress$1, {
+		...props,
+		ref,
+		pending
+	}, destination);
+});
+//#endregion
+export { RouteProgress };

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "loadshape",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Состояния загрузки для React: скелетон из самого компонента, спиннер и полоса перехода",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tanstack-router": {
+      "types": "./dist/tanstack-router.d.ts",
+      "default": "./dist/tanstack-router.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "^1.170.41",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.170.41",
+    "@tsdown/css": "^0.23.0",
+    "@types/react": "^19.3.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "react": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/semyonsurkov/loadshape.git",
+    "directory": "packages/loadshape"
+  },
+  "homepage": "https://github.com/semyonsurkov/loadshape#readme",
+  "bugs": {
+    "url": "https://github.com/semyonsurkov/loadshape/issues"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit"
+  }
 }