@stealthscale/component-feedback 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stealth Scale B.V.
+
+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

@@ -0,0 +1,101 @@
+# @stealthscale/component-feedback
+
+Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.
+Every component binds a recipe and draws nothing of its own, so a theme restyles all of them by
+extending the recipe. The preset under `./theme` registers the recipes with an application's
+compiler.
+
+Every value a theme can change on a component is an axis of its recipe, so a caller sets it as a
+prop and writes no style. A caller changes the element a component draws with `as`.
+
+## Install
+
+```bash
+pnpm add @stealthscale/component-feedback
+```
+
+The package peers on `react` and `@stealthscale/theme`. An application lists the preset under
+`./theme` among the presets its compiler installs.
+
+## Skeleton
+
+Stands in for content that has not arrived. It wraps that content rather than replacing it, so a
+caller writes one tree and sets one prop, and the stand-in comes out the size of the thing it stands
+in for without anybody stating a width. While it waits it hides everything inside it. Once the
+content arrives the stand-in fades out and the content is shown.
+
+```tsx
+import { Skeleton } from "@stealthscale/component-feedback";
+
+<Skeleton loading={pending}>
+  <Avatar src={person.photo} />
+</Skeleton>;
+<Skeleton motion="shimmer" radius="full" />;
+```
+
+| Axis      | Values                     | Default |
+| --------- | -------------------------- | ------- |
+| `loading` | `true`, `false`            | `true`  |
+| `motion`  | `none`, `pulse`, `shimmer` | `pulse` |
+| `radius`  | `l1`, `l2`, `l3`, `full`   | `l2`    |
+
+The element carries no role. A reader learns more from being told the region is busy than from being
+told each box is, so a page states `aria-busy` on whatever is waiting and each bar announces nothing
+of its own.
+
+## SkeletonText
+
+Stands in for a paragraph of text. Every length is read off the line it stands in for, so a bar is
+one line tall and the space between two is half a line. Place it where text is read and it comes out
+the size of that text, so the page does not jump when the real words replace it.
+
+```tsx
+import { SkeletonText } from "@stealthscale/component-feedback";
+
+<SkeletonText />;
+<SkeletonText lines={5} motion="shimmer" />;
+```
+
+The last bar of several is short, because a paragraph rarely fills its final line and a block of
+bars all one width reads as a table rather than as writing. `lines` defaults to three and never
+draws fewer than one. Draw this while the text is loading and draw the text itself once it arrives,
+so nothing here takes a loading state.
+
+## EmptyState
+
+Draws the panel a page shows where there is nothing to show, composed as `EmptyState.Root` holding a
+mark, a heading and a line saying what would be here.
+
+```tsx
+import { EmptyState } from "@stealthscale/component-feedback";
+
+<EmptyState.Root size="lg">
+  <EmptyState.Content>
+    <EmptyState.Indicator aria-hidden>
+      <InboxIcon />
+    </EmptyState.Indicator>
+    <EmptyState.Title>No invoices yet</EmptyState.Title>
+    <EmptyState.Description>Send your first one to get started.</EmptyState.Description>
+  </EmptyState.Content>
+</EmptyState.Root>;
+```
+
+| Axis   | Values                                            | Default |
+| ------ | ------------------------------------------------- | ------- |
+| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` | `md`    |
+
+One axis sets four parts together. The room inside the panel, the gap in the content, the box of the
+mark and the size of the title each read the scale of that name, so a small panel in a sidebar and a
+large one filling a page are one name apart. The description holds its size, because a line of
+explanation is read at the size the rest of the page is read at however big the panel is.
+
+The mark fills whatever box its size states, so a caller passes a glyph without sizing it. Hide it
+with `aria-hidden`, since the title beneath says the same thing in words. The title is an `h2`,
+which suits a panel standing in for a section's content. A page whose outline puts it deeper states
+its own level with `as`.
+
+The root carries no role. A page of empty panels would otherwise be a page of landmarks.
+
+## Licence
+
+MIT. See [LICENSE](LICENSE).

package/dist/cyclonedx/bom.json

@@ -0,0 +1 @@
+{"$schema":"http://cyclonedx.org/schema/bom-1.7.schema.json","bomFormat":"CycloneDX","specVersion":"1.7","version":1,"metadata":{"lifecycles":[{"phase":"build"}],"tools":{"components":[{"type":"application","name":"rolldown","version":"1.2.7"},{"type":"application","name":"vite","version":"8.2.2"},{"type":"library","name":"core","group":"@arethetypeswrong","version":"0.18.5","bom-ref":"pkg:npm/%40arethetypeswrong/core@0.18.5","author":"Andrew Branch","description":"The API behind arethetypeswrong.github.io","hashes":[{"alg":"SHA-512","content":"f72b63cc6c318e6f54cfb23d6af7dbb79be542deae93db914444b3263aabce797a58abc8e9dc184e8faf277534d96aeafe64778aa97f3f386f1e129d2480230d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40arethetypeswrong/core@0.18.5","externalReferences":[{"url":"https://github.com/arethetypeswrong/arethetypeswrong.github.io.git#packages/core","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20"}]},{"type":"library","name":"theme","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/theme@0.3.0","description":"Publishes the foundation every recipe is written against, the runtime every component binds its recipe with, and the vocabulary a theme is written in.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/theme@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#foundations/theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/foundations/theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-react","group":"@stealthscale","version":"0.8.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","description":"Adds the JSX transform, the React lint rules, a test document and an MDX compiler to a package that renders.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-react@0.8.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-react#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-theme","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","description":"Adds the runtime generator to a design-system package and the stylesheet compiler to an application.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-theme@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-theme","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-theme#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config-typescript","group":"@stealthscale","version":"0.3.0","bom-ref":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","description":"Sets the TypeScript options every stealthscale package compiles with.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config-typescript@0.3.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config-typescript","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config-typescript#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"vite-config","group":"@stealthscale","version":"0.6.0","bom-ref":"pkg:npm/%40stealthscale/vite-config@0.6.0","description":"Configures a package from five Vite+ tiers and a named layer for every block.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/vite-config@0.6.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#packages/vite-config","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/packages/vite-config#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}]},{"type":"library","name":"react","group":"@testing-library","version":"16.3.3","bom-ref":"pkg:npm/%40testing-library/react@16.3.3","author":"Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)","description":"Simple and complete React DOM testing utilities that encourage good testing practices.","hashes":[{"alg":"SHA-512","content":"528d7ddcd8106cf333ea5aeb86d45040570c0ba45efc42cb15b6ee54bdf4583959c65a597fdfe53074c05713d12f0d6ad62bbd389991d5cd812e210d46cb5d06"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40testing-library/react@16.3.3","externalReferences":[{"url":"https://github.com/testing-library/react-testing-library/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/testing-library/react-testing-library","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://github.com/testing-library/react-testing-library#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=18"}]},{"type":"library","name":"react-dom","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react-dom@19.3.0","description":"TypeScript definitions for react-dom","hashes":[{"alg":"SHA-512","content":"648edb538da66575ca1e7fea34b130d88adb888354ed7e7ebdf81d8b10479023696165e32a07d0fcffaec866f90a338b07d51c9d37a0debca542d5768729b8e1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","group":"@types","version":"19.3.0","bom-ref":"pkg:npm/%40types/react@19.3.0","description":"TypeScript definitions for react","hashes":[{"alg":"SHA-512","content":"374ac50ae1fd628c46f7f9bad65f4c7e924a7e62ce554d1e9bb8a9233e9346049292f45e2c1f6f2fce4607ecabf01b3995eaa9be0f7a252c05e194b5b38be242"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40types/react@19.3.0","externalReferences":[{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped.git#types/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"babel-plugin-react-compiler","version":"1.0.0","bom-ref":"pkg:npm/babel-plugin-react-compiler@1.0.0","description":"Babel plugin for React Compiler.","hashes":[{"alg":"SHA-512","content":"2319bcb457e828a20f61d0822984ecaaff85778209d0342a3321229a8fa9c5438c511f5c54f9704eb16df40beefb771be99a77980ce5fadd4cac6d9fc712acc7"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/babel-plugin-react-compiler@1.0.0","externalReferences":[{"url":"git+https://github.com/facebook/react.git#compiler/packages/babel-plugin-react-compiler","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""}]},{"type":"library","name":"happy-dom","version":"20.14.5","bom-ref":"pkg:npm/happy-dom@20.14.5","author":"David Ortner","description":"Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.","hashes":[{"alg":"SHA-512","content":"c7f47392958ee346d38c8a13df4890b6deb814b2e61ff89171408dd97fff6cbc7b1f789f91d7cf5f2aacae8fce62dab32008622cc300ee69a2391f42dcd38a8d"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/happy-dom@20.14.5","externalReferences":[{"url":"https://github.com/capricorn86/happy-dom","type":"vcs","comment":"as detected from PackageJson property \"repository\""},{"url":"https://github.com/capricorn86/happy-dom","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=20.0.0"}]},{"type":"library","name":"oxc-transform-react","version":"0.149.0","bom-ref":"pkg:npm/oxc-transform-react@0.149.0","author":"Boshen and oxc contributors","description":"Oxc React Compiler Node API","hashes":[{"alg":"SHA-512","content":"69bdddc5c3ed90349f211f6d35dc4752d9a974bd258479ddb010fd214014e41c6d26dc061bff39367473b367f62b0a2e3641e5edc692b3030b41e52fc3714447"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/oxc-transform-react@0.149.0","externalReferences":[{"url":"https://github.com/oxc-project/oxc/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/oxc-project/oxc.git#napi/transform-react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://oxc.rs","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.19.0 || >=22.12.0"}]},{"type":"library","name":"react-dom","version":"19.3.0","bom-ref":"pkg:npm/react-dom@19.3.0","description":"React package for working with the DOM.","hashes":[{"alg":"SHA-512","content":"24393c76089fe753a31680c4ef4f8e4fd202c98afeebd1e59a284dc29d7e36c7db9dadede6c22209af59264b43990e3fd5bfeb9f6ea1200476b985c332be6bd1"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react-dom@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/react/react.git#packages/react-dom","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}]},{"type":"library","name":"react","version":"19.3.0","bom-ref":"pkg:npm/react@19.3.0","description":"React is a JavaScript library for building user interfaces.","hashes":[{"alg":"SHA-512","content":"13c2d471bb415addb46db9766281dfc7864305dc554df38ab42667f5c0d227897afe7ba8029729201723e3bb76c19a155fc836647b8c1db892860091d53e52a2"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/react@19.3.0","externalReferences":[{"url":"https://github.com/react/react/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"https://github.com/react/react.git#packages/react","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://react.dev/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=0.10.0"}]},{"type":"library","name":"typescript","version":"7.0.2","bom-ref":"pkg:npm/typescript@7.0.2","author":"Microsoft Corp.","description":"TypeScript is a language for application scale JavaScript development","hashes":[{"alg":"SHA-512","content":"f0561abbdea8dcd28e85b8ca8bfa8dbc6fd6e63873c646dd9b9b23f406d9ff94f9b16aa7de12602df1b1dbbb11299593bf2cc23fc74b4414dfe6d05349155434"}],"licenses":[{"license":{"id":"Apache-2.0"}}],"purl":"pkg:npm/typescript@7.0.2","externalReferences":[{"url":"https://github.com/microsoft/TypeScript/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"https://github.com/microsoft/TypeScript.git","type":"vcs","comment":"as detected from PackageJson property \"repository.url\""},{"url":"https://www.typescriptlang.org/","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=16.20.0"}]},{"type":"library","name":"vitest","version":"4.1.11","bom-ref":"pkg:npm/vitest@4.1.11","author":"Anthony Fu <anthonyfu117@hotmail.com>","description":"Next generation testing framework powered by Vite","hashes":[{"alg":"SHA-512","content":"7e1002acd5d489d21b19206be4595bb8190eed5582d59c8b9740cee025360eb42800fc57f3862cc6cf877864298a2e656565754388016534eee3d985f80e8477"}],"licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/vitest@4.1.11","externalReferences":[{"url":"https://github.com/vitest-dev/vitest/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs.url\""},{"url":"git+https://github.com/vitest-dev/vitest.git#packages/vitest","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://vitest.dev","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":"^20.0.0 || ^22.0.0 || >=24.0.0"}]}]},"component":{"type":"library","name":"component-feedback","group":"@stealthscale","version":"0.1.0","bom-ref":"pkg:npm/%40stealthscale/component-feedback@0.1.0","description":"Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.","licenses":[{"license":{"id":"MIT"}}],"purl":"pkg:npm/%40stealthscale/component-feedback@0.1.0","externalReferences":[{"url":"https://github.com/stealth-scale/config/issues","type":"issue-tracker","comment":"as detected from PackageJson property \"bugs\""},{"url":"git+https://github.com/stealth-scale/config.git#components/feedback","type":"vcs","comment":"as detected from PackageJson property \"repository.url\" and \"repository.directory\""},{"url":"https://github.com/stealth-scale/config/tree/main/components/feedback#readme","type":"website","comment":"as detected from PackageJson property \"homepage\""}],"properties":[{"name":"cdx:npm:package:constraint:engine:node","value":">=26.0.0"}],"evidence":{"licenses":[{"license":{"name":"file: LICENSE","text":{"content":"TUlUIExpY2Vuc2UKCkNvcHlyaWdodCAoYykgMjAyNiBTdGVhbHRoIFNjYWxlIEIuVi4KClBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHkKb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgIlNvZnR3YXJlIiksIHRvIGRlYWwKaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0cwp0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsCmNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpcwpmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOgoKVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW4gYWxsCmNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuCgpUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgIkFTIElTIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUgpJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSwKRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFCkFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVIKTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSwKT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTiBUSEUKU09GVFdBUkUuCg==","contentType":"text/plain","encoding":"base64"}}}]}},"supplier":{"name":"Stealth Scale B.V.","url":["https://stealthscale.io"]}},"components":[],"dependencies":[{"ref":"pkg:npm/%40stealthscale/component-feedback@0.1.0"}]}

package/dist/index.d.ts

@@ -0,0 +1,142 @@
+import { ComponentProps, ReactElement } from "react";
+//#region src/empty-state/content.d.ts
+/**
+ * Centres what it holds, in a column, at the gap its size states.
+ */
+declare const Content: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes what the content takes.
+ */
+type ContentProps = ComponentProps<typeof Content>;
+//#endregion
+//#region src/empty-state/description.d.ts
+/**
+ * Draws the explanation, quieter than the title and at one size whatever the panel's is.
+ */
+declare const Description: import("@stealthscale/theme").StyledComponent<"p", {}>;
+/**
+ * Describes what the description takes.
+ */
+type DescriptionProps = ComponentProps<typeof Description>;
+//#endregion
+//#region src/empty-state/indicator.d.ts
+/**
+ * Draws the mark at the box its size states.
+ */
+declare const Indicator: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes what the indicator takes.
+ */
+type IndicatorProps = ComponentProps<typeof Indicator>;
+//#endregion
+//#region src/empty-state/root.d.ts
+/**
+ * Draws the panel and sets the size every part below it reads.
+ */
+declare const Root: import("@stealthscale/theme").StyledComponent<"div", {
+  readonly size?: "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs";
+}>;
+/**
+ * Describes what the panel takes.
+ */
+type RootProps = ComponentProps<typeof Root>;
+//#endregion
+//#region src/empty-state/title.d.ts
+/**
+ * Draws the title at the size the panel states.
+ */
+declare const Title: import("@stealthscale/theme").StyledComponent<"h2", {}>;
+/**
+ * Describes what the title takes.
+ */
+type TitleProps = ComponentProps<typeof Title>;
+declare namespace index_d_exports {
+  export { Content, ContentProps, Description, DescriptionProps, Indicator, IndicatorProps, Root, RootProps, Title, TitleProps };
+}
+//#endregion
+//#region src/skeleton-text/context.d.ts
+/**
+ * Binds the skeleton paragraph's recipe to the element that draws it.
+ *
+ * @remarks
+ *   Apart from the recipe, because an application's compiler reads the recipe at build time and
+ *   the binding needs the runtime.
+ */
+/**
+ * Binds the recipe once, for the column the bars are drawn in.
+ */
+declare const PropsProvider$1: import("react").Provider<import("@stealthscale/theme").DataAttrs & Partial<{}>>, withContext$1: <Tag extends import("react").ElementType>(Component: Tag, options?: import("@stealthscale/theme").JsxFactoryOptions<import("@stealthscale/theme").ComponentProps<Tag> & Partial<{}>> | undefined) => import("@stealthscale/theme").StyledComponent<Tag, {}>;
+//#endregion
+//#region src/skeleton/skeleton.d.ts
+/**
+ * Stands in for content that has not arrived, taking the box of whatever it wraps.
+ */
+export declare const Skeleton: import("@stealthscale/theme").StyledComponent<"div", {
+  readonly loading?: boolean;
+  readonly motion?: "none" | "pulse" | "shimmer";
+  readonly radius?: import("@stealthscale/theme/authoring").Corner;
+}>;
+/**
+ * Describes what a skeleton takes: the variants its recipe offers, and everything a styled div
+ * takes.
+ */
+type SkeletonProps = ComponentProps<typeof Skeleton>;
+//#endregion
+//#region src/skeleton-text/skeleton-text.d.ts
+/**
+ * Draws the column the bars sit in.
+ */
+declare const Column: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes what a paragraph of skeleton takes.
+ */
+interface SkeletonTextProps extends ComponentProps<typeof Column> {
+  /**
+   * How many lines of text it stands in for.
+   */
+  readonly lines?: number | undefined;
+  /**
+   * How each bar moves while it waits, which every bar takes together.
+   */
+  readonly motion?: SkeletonProps["motion"] | undefined;
+  /**
+   * The corner each bar is drawn with.
+   */
+  readonly radius?: SkeletonProps["radius"] | undefined;
+}
+/**
+ * Stands in for a paragraph of text that has not arrived.
+ *
+ * @param props - The column's own, plus the count and what each bar is drawn like.
+ * @returns The column, holding one bar per line.
+ */
+export declare function SkeletonText({ lines, motion, radius, ...rest }: SkeletonTextProps): ReactElement;
+//#endregion
+//#region src/skeleton/context.d.ts
+/**
+ * Binds the skeleton's recipe to the element that draws it.
+ *
+ * @remarks
+ *   Apart from the recipe, because an application's compiler reads the recipe at build time and
+ *   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+ *   every compiler configuration that reads it.
+ */
+/**
+ * Binds the recipe once, for the skeleton, for the lines a paragraph of them draws, and for
+ * whatever sets their variants from above.
+ */
+declare const PropsProvider: import("react").Provider<import("@stealthscale/theme").DataAttrs & Partial<{
+  readonly loading?: boolean;
+  readonly motion?: "none" | "pulse" | "shimmer";
+  readonly radius?: import("@stealthscale/theme/authoring").Corner;
+}>>, withContext: <Tag extends import("react").ElementType>(Component: Tag, options?: import("@stealthscale/theme").JsxFactoryOptions<import("@stealthscale/theme").ComponentProps<Tag> & Partial<{
+  readonly loading?: boolean;
+  readonly motion?: "none" | "pulse" | "shimmer";
+  readonly radius?: import("@stealthscale/theme/authoring").Corner;
+}>> | undefined) => import("@stealthscale/theme").StyledComponent<Tag, {
+  readonly loading?: boolean;
+  readonly motion?: "none" | "pulse" | "shimmer";
+  readonly radius?: import("@stealthscale/theme/authoring").Corner;
+}>;
+//#endregion
+export { index_d_exports as EmptyState, type SkeletonProps, PropsProvider as SkeletonPropsProvider, type SkeletonTextProps, PropsProvider$1 as SkeletonTextPropsProvider };

package/dist/index.js

@@ -0,0 +1,177 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-0Xo90j3-.js";
+import "react";
+import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/empty-state/context.ts
+/**
+* Binds the empty state's recipe to the elements that draw its parts.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime.
+*/
+/**
+* Binds the recipe once. The root provides the variants and every other part reads them.
+*/
+const { withContext: withContext$2, withProvider } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/empty-state/content.ts
+/**
+* Centres what it holds, in a column, at the gap its size states.
+*/
+const Content = withContext$2("div", "content");
+//#endregion
+//#region src/empty-state/description.ts
+/**
+* Draws the explanation, quieter than the title and at one size whatever the panel's is.
+*/
+const Description = withContext$2("p", "description");
+//#endregion
+//#region src/empty-state/indicator.ts
+/**
+* Draws the mark at the box its size states.
+*/
+const Indicator = withContext$2("div", "indicator");
+//#endregion
+//#region src/empty-state/root.ts
+/**
+* Draws the panel and sets the size every part below it reads.
+*/
+const Root = withProvider("div", "root");
+//#endregion
+//#region src/empty-state/title.ts
+/**
+* Draws the title at the size the panel states.
+*/
+const Title = withContext$2("h2", "title");
+//#endregion
+//#region src/empty-state/index.ts
+var empty_state_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content,
+	Description: () => Description,
+	Indicator: () => Indicator,
+	Root: () => Root,
+	Title: () => Title
+});
+//#endregion
+//#region src/skeleton-text/context.ts
+/**
+* Binds the skeleton paragraph's recipe to the element that draws it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime.
+*/
+/**
+* Binds the recipe once, for the column the bars are drawn in.
+*/
+const { PropsProvider: PropsProvider$1, withContext: withContext$1 } = createRecipeContext(recipe$1);
+//#endregion
+//#region src/skeleton/context.ts
+/**
+* Binds the skeleton's recipe to the element that draws it.
+*
+* @remarks
+*   Apart from the recipe, because an application's compiler reads the recipe at build time and
+*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
+*   every compiler configuration that reads it.
+*/
+/**
+* Binds the recipe once, for the skeleton, for the lines a paragraph of them draws, and for
+* whatever sets their variants from above.
+*/
+const { PropsProvider, withContext } = createRecipeContext(recipe$2);
+//#endregion
+//#region src/skeleton/skeleton.ts
+/**
+* Stands in for content that has not arrived, taking the box of whatever it wraps.
+*/
+const Skeleton = withContext("div");
+//#endregion
+//#region src/skeleton-text/skeleton-text.tsx
+/**
+* Draws the column the bars sit in.
+*/
+const Column = withContext$1("div");
+/**
+* Stands in for a paragraph of text that has not arrived.
+*
+* @param props - The column's own, plus the count and what each bar is drawn like.
+* @returns The column, holding one bar per line.
+*/
+function SkeletonText(t0) {
+	const $ = c(21);
+	if ($[0] !== "3e498a8a62cfbdc6b1a8f49a0d7face7f241ed07bd456e29510103fe19bfc79d") {
+		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "3e498a8a62cfbdc6b1a8f49a0d7face7f241ed07bd456e29510103fe19bfc79d";
+	}
+	let motion;
+	let radius;
+	let rest;
+	let t1;
+	if ($[1] !== t0) {
+		({lines: t1, motion, radius, ...rest} = t0);
+		$[1] = t0;
+		$[2] = motion;
+		$[3] = radius;
+		$[4] = rest;
+		$[5] = t1;
+	} else {
+		motion = $[2];
+		radius = $[3];
+		rest = $[4];
+		t1 = $[5];
+	}
+	const lines = t1 === void 0 ? 3 : t1;
+	let t2;
+	if ($[6] !== motion) {
+		t2 = motion === void 0 ? {} : { motion };
+		$[6] = motion;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== radius) {
+		t3 = radius === void 0 ? {} : { radius };
+		$[8] = radius;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t2 || $[11] !== t3) {
+		t4 = {
+			...t2,
+			...t3
+		};
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	const drawn = t4;
+	let t5;
+	if ($[13] !== drawn || $[14] !== lines) {
+		let t6;
+		if ($[16] !== drawn) {
+			t6 = (_, at) => /* @__PURE__ */ jsx(Skeleton, { ...drawn }, at);
+			$[16] = drawn;
+			$[17] = t6;
+		} else t6 = $[17];
+		t5 = Array.from({ length: Math.max(lines, 1) }, t6);
+		$[13] = drawn;
+		$[14] = lines;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[18] !== rest || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Column, {
+			...rest,
+			children: t5
+		});
+		$[18] = rest;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	return t6;
+}
+//#endregion
+export { empty_state_exports as EmptyState, Skeleton, PropsProvider as SkeletonPropsProvider, SkeletonText, PropsProvider$1 as SkeletonTextPropsProvider };

package/dist/recipe-0Xo90j3-.js

@@ -0,0 +1,162 @@
+import { cornerVariants, defineRecipe, defineSlotRecipe, gapSizes, iconSizes, insetSizes, onSlots, textSizes } from "@stealthscale/theme/authoring";
+//#region src/empty-state/recipe.ts
+/**
+* States what an empty state is: the panel a page draws where there is nothing to show, holding a
+* mark, a heading and a line saying what would be here.
+*
+* @remarks
+*   Five parts, because each is styled and a caller composes them in whatever order a page wants.
+*   The root is the panel, the content centres what is inside it, the indicator draws the mark, and
+*   the title and the description carry the words.
+*   One axis moves all of them together. The room inside the panel, the gap in the content, the box
+*   of the mark and the size of the title each read the scale of the same name, so a small empty
+*   state in a side panel and a large one filling a page are one name apart. The description holds
+*   its size, because a line of explanation is read at the size the rest of the page is read at
+*   however big the panel is.
+*/
+/**
+* Draws a centred panel at the middle size until a caller says otherwise.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		content: {
+			alignItems: "center",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			textAlign: "center"
+		},
+		description: {
+			color: "fg.muted",
+			textStyle: "body.sm"
+		},
+		indicator: {
+			"& svg": { boxSize: "100%" },
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			justifyContent: "center"
+		},
+		root: {
+			alignItems: "center",
+			display: "flex",
+			justifyContent: "center",
+			width: "full"
+		},
+		title: { fontWeight: "semibold" }
+	},
+	className: "empty-state",
+	defaultVariants: { size: "md" },
+	jsx: [/^EmptyState(\.\w+)?$/u],
+	slots: [
+		"root",
+		"content",
+		"indicator",
+		"title",
+		"description"
+	],
+	variants: { 
+	/**
+	* How much room the panel takes, which every part steps with.
+	*/
+size: onSlots({
+		content: gapSizes(),
+		indicator: iconSizes(),
+		root: insetSizes(),
+		title: textSizes("heading")
+	}) }
+});
+//#endregion
+//#region src/skeleton-text/recipe.ts
+/**
+* States what a paragraph of skeleton is: a column of bars standing in for lines of text that have
+* not arrived.
+*
+* @remarks
+*   Every length here is read off the line the bars stand in for. A bar is one line tall and the
+*   space between two is half a line, so a column of stand-ins occupies what the real paragraph
+*   will occupy and the page does not jump when the words land. Nothing states a size of its own,
+*   which is what lets a caller drop a paragraph of stand-ins wherever text is read and have it
+*   come out the size of that text.
+*   The last bar of several is short. A paragraph rarely fills its final line, and a block of bars
+*   all the same width reads as a table rather than as prose.
+*/
+/**
+* Draws a column of bars, each the height of the line it stands in for.
+*/
+const recipe$1 = defineRecipe({
+	base: {
+		"& > *": { height: "1lh" },
+		"& > *:last-child:not(:only-child)": { maxWidth: "80%" },
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5lh",
+		width: "full"
+	},
+	className: "skeleton-text",
+	jsx: [/^SkeletonText$/u]
+});
+//#endregion
+//#region src/skeleton/recipe.ts
+/**
+* States what a skeleton is: a box standing in for content that has not arrived, drawn in one of
+* the theme's own motions and revealed once the content does.
+*
+* @remarks
+*   A skeleton wraps the content it stands in for rather than replacing it, so a caller writes one
+*   tree and flips one prop. While it is loading it takes the content's own box and hides
+*   everything inside it, which is what makes the stand-in the size of the thing it stands in for
+*   without anybody stating a width. Once it has loaded it fades the content in and gets out of
+*   the way.
+*   Every motion is an animation style the theme owns, so a reader who asked for less motion is
+*   answered once in the theme rather than in every recipe. Nothing here states a colour, a length
+*   or a duration of its own.
+*/
+/**
+* Draws a pulsing stand-in at the middle corner until a caller says otherwise.
+*/
+const recipe = defineRecipe({
+	base: {},
+	className: "skeleton",
+	defaultVariants: {
+		loading: true,
+		motion: "pulse",
+		radius: "l2"
+	},
+	jsx: [/^Skeleton$/u],
+	variants: {
+		/**
+		* Whether the content it stands in for has arrived.
+		*/
+		loading: {
+			false: { animationStyle: "fade.in" },
+			true: {
+				"&::before, &::after, *": { visibility: "hidden" },
+				backgroundClip: "padding-box",
+				boxShadow: "none",
+				color: "transparent",
+				flexShrink: "0",
+				pointerEvents: "none",
+				userSelect: "none"
+			}
+		},
+		/**
+		* How it moves while it waits.
+		*/
+		motion: {
+			none: { animation: "none" },
+			pulse: {
+				animationStyle: "pulse",
+				background: "bg.emphasized"
+			},
+			shimmer: {
+				animationStyle: "shimmer",
+				backgroundImage: "linear-gradient(270deg, {colors.bg.muted}, {colors.bg.emphasized})",
+				backgroundSize: "400% 100%"
+			}
+		},
+		radius: cornerVariants()
+	}
+});
+//#endregion
+export { recipe$1 as n, recipe$2 as r, recipe as t };

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/theme.d.ts

@@ -0,0 +1,12 @@
+//#region src/theme.d.ts
+/**
+ * Publishes the preset that registers every recipe in this package, for an application's compiler
+ * to install.
+ *
+ * @remarks
+ *   The list is written by hand. The package's own specification reports a recipe file the list
+ *   leaves out, so no generator runs here.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js

@@ -0,0 +1,23 @@
+import { n as recipe$1, r as recipe$2, t as recipe } from "./recipe-0Xo90j3-.js";
+import { definePreset } from "@stealthscale/theme/authoring";
+//#region src/theme.ts
+/**
+* Publishes the preset that registers every recipe in this package, for an application's compiler
+* to install.
+*
+* @remarks
+*   The list is written by hand. The package's own specification reports a recipe file the list
+*   leaves out, so no generator runs here.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/component-feedback",
+	theme: { extend: {
+		recipes: {
+			skeleton: recipe,
+			skeletonText: recipe$1
+		},
+		slotRecipes: { emptyState: recipe$2 }
+	} }
+});
+//#endregion
+export { theme_default as default };

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@stealthscale/component-feedback",
+  "version": "0.1.0",
+  "description": "Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.",
+  "keywords": [
+    "components",
+    "feedback",
+    "react",
+    "status"
+  ],
+  "homepage": "https://github.com/stealth-scale/config/tree/main/components/feedback#readme",
+  "bugs": "https://github.com/stealth-scale/config/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stealth-scale/config.git",
+    "directory": "components/feedback"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.5",
+    "@rolldown/plugin-babel": "^0.2.4",
+    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/vite-config": "^0.6.0",
+    "@stealthscale/vite-config-react": "^0.8.0",
+    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/vite-config-typescript": "^0.3.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "happy-dom": "^20.14.3",
+    "oxc-transform-react": "^0.149.0",
+    "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vitest": "4.1.11"
+  },
+  "peerDependencies": {
+    "@stealthscale/theme": "^0.3.0",
+    "react": "^19.3.0"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
+}