@furystack/shades-common-components 12.0.1 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [12.1.0] - 2026-02-11
+
+### ✨ Features
+
+### New `CacheView` component
+
+Added a new `CacheView` component that renders the state of a cache entry. It subscribes to a `Cache` instance observable and handles all states automatically:
+
+1. **Error first** — shows error UI with a retry button
+2. **Value next** — renders the content component (triggers reload when obsolete)
+3. **Loading last** — shows a custom loader or nothing by default
+
+```tsx
+import { CacheView } from '@furystack/shades-common-components'
+
+<CacheView cache={userCache} args={[userId]} content={UserContent} />
+
+// With custom loader and error UI
+<CacheView
+  cache={userCache}
+  args={[userId]}
+  content={UserContent}
+  loader={<Skeleton />}
+  error={(err, retry) => (
+    <Alert severity="error">
+      <Button onclick={retry}>Retry</Button>
+    </Alert>
+  )}
+/>
+```
+
+### 🐛 Bug Fixes
+
+- Fixed `Skeleton` component background styles not rendering correctly when used inside Shadow DOM — moved gradient styles from host CSS to inline styles on the inner element
+
+### 📚 Documentation
+
+- Added `CacheView` usage examples to the package README
+
+### ⬆️ Dependencies
+
+- Added `@furystack/cache` (workspace:^) as a new dependency
+
 ## [12.0.1] - 2026-02-11
 
 ### 🧪 Tests

package/README.md

@@ -150,6 +150,32 @@ import { Tabs } from '@furystack/shades-common-components'
 />
 ```
 
+### CacheView
+
+Renders the state of a cache entry. Takes a `Cache` instance and `args`, subscribes to the observable, and handles loading, error (with retry), and loaded/obsolete states.
+
+```tsx
+import { CacheView } from '@furystack/shades-common-components'
+import type { CacheWithValue } from '@furystack/cache'
+
+const UserContent = Shade<{ data: CacheWithValue<User> }>({
+  shadowDomName: 'user-content',
+  render: ({ props }) => <div>{props.data.value.name}</div>,
+})
+
+// Basic usage
+<CacheView cache={userCache} args={[userId]} content={UserContent} />
+
+// With custom loader and error
+<CacheView
+  cache={userCache}
+  args={[userId]}
+  content={UserContent}
+  loader={<Skeleton />}
+  error={(err, retry) => <Alert severity="error"><Button onclick={retry}>Retry</Button></Alert>}
+/>
+```
+
 ### Loader
 
 A loading spinner component.

package/esm/components/cache-view.d.ts

@@ -0,0 +1,46 @@
+import type { Cache, CacheWithValue } from '@furystack/cache';
+import type { ShadeComponent } from '@furystack/shades';
+/**
+ * Props for the CacheView component.
+ * @typeParam TData - The type of data stored in the cache
+ * @typeParam TArgs - The tuple type of arguments used to identify the cache entry
+ */
+export type CacheViewProps<TData, TArgs extends any[]> = {
+    /** The cache instance to observe and control */
+    cache: Cache<TData, TArgs>;
+    /** The arguments identifying which cache entry to display */
+    args: TArgs;
+    /** Shades component rendered when a value is available (loaded or obsolete). Receives CacheWithValue<TData>. */
+    content: ShadeComponent<{
+        data: CacheWithValue<TData>;
+    }>;
+    /** Optional custom loader element. Default: null (nothing shown when loading). */
+    loader?: JSX.Element;
+    /**
+     * Optional custom error UI. Receives the error and a retry callback.
+     * The retry callback calls cache.reload(...args).
+     * If not provided, a default Result + retry Button is shown.
+     */
+    error?: (error: unknown, retry: () => void) => JSX.Element;
+};
+/**
+ * CacheView renders the state of a cache entry for the given cache + args.
+ *
+ * It subscribes to the cache observable and handles all states:
+ * 1. **Error first** - If the cache entry has failed, shows the error UI with a retry button.
+ * 2. **Value next** - If the entry has a value (loaded or obsolete), renders the content component.
+ *    When obsolete, it also triggers a reload automatically.
+ * 3. **Loading last** - If there is no value and no error, shows the loader (or null by default).
+ *
+ * @example
+ * ```tsx
+ * const MyContent = Shade<{ data: CacheWithValue<User> }>({
+ *   shadowDomName: 'my-content',
+ *   render: ({ props }) => <div>{props.data.value.name}</div>,
+ * })
+ *
+ * <CacheView cache={userCache} args={[userId]} content={MyContent} />
+ * ```
+ */
+export declare const CacheView: <TData, TArgs extends any[]>(props: CacheViewProps<TData, TArgs>) => JSX.Element;
+//# sourceMappingURL=cache-view.d.ts.map

package/esm/components/cache-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache-view.d.ts","sourceRoot":"","sources":["../../src/components/cache-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAMvD;;;;GAIG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,EAAE,KAAK,SAAS,GAAG,EAAE,IAAI;IACvD,gDAAgD;IAChD,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC1B,6DAA6D;IAC7D,IAAI,EAAE,KAAK,CAAA;IACX,gHAAgH;IAChH,OAAO,EAAE,cAAc,CAAC;QAAE,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;KAAE,CAAC,CAAA;IACxD,kFAAkF;IAClF,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAA;CAC3D,CAAA;AAWD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,OA4C/F,CAAA"}

package/esm/components/cache-view.js

@@ -0,0 +1,65 @@
+import { hasCacheValue, isFailedCacheResult, isObsoleteCacheResult } from '@furystack/cache';
+import { Shade, createComponent } from '@furystack/shades';
+import { Button } from './button.js';
+import { Result } from './result.js';
+const getDefaultErrorUi = (error, retry) => (createComponent(Result, { status: "error", title: "Something went wrong", subtitle: String(error) },
+    createComponent(Button, { variant: "outlined", onclick: retry }, "Retry")));
+/**
+ * CacheView renders the state of a cache entry for the given cache + args.
+ *
+ * It subscribes to the cache observable and handles all states:
+ * 1. **Error first** - If the cache entry has failed, shows the error UI with a retry button.
+ * 2. **Value next** - If the entry has a value (loaded or obsolete), renders the content component.
+ *    When obsolete, it also triggers a reload automatically.
+ * 3. **Loading last** - If there is no value and no error, shows the loader (or null by default).
+ *
+ * @example
+ * ```tsx
+ * const MyContent = Shade<{ data: CacheWithValue<User> }>({
+ *   shadowDomName: 'my-content',
+ *   render: ({ props }) => <div>{props.data.value.name}</div>,
+ * })
+ *
+ * <CacheView cache={userCache} args={[userId]} content={MyContent} />
+ * ```
+ */
+export const CacheView = Shade({
+    shadowDomName: 'shade-cache-view',
+    render: ({ props, useObservable, useState }) => {
+        const { cache, args, content, loader, error } = props;
+        const argsKey = JSON.stringify(args);
+        const observable = cache.getObservable(...args);
+        const [result] = useObservable(`cache-${argsKey}`, observable);
+        const [lastReloadedArgsKey, setLastReloadedArgsKey] = useState('lastReloadedArgsKey', null);
+        const retry = () => {
+            cache.reload(...args).catch(() => {
+                /* error state will be set by cache */
+            });
+        };
+        // 1. Error first
+        if (isFailedCacheResult(result)) {
+            const errorRenderer = error ?? getDefaultErrorUi;
+            return errorRenderer(result.error, retry);
+        }
+        // 2. Value next
+        if (hasCacheValue(result)) {
+            if (isObsoleteCacheResult(result)) {
+                if (lastReloadedArgsKey !== argsKey) {
+                    setLastReloadedArgsKey(argsKey);
+                    cache.reload(...args).catch(() => {
+                        /* error state will be set by cache */
+                    });
+                }
+            }
+            else if (lastReloadedArgsKey !== null) {
+                setLastReloadedArgsKey(null);
+            }
+            return createComponent(content, {
+                data: result,
+            });
+        }
+        // 3. Loading last
+        return loader ?? null;
+    },
+});
+//# sourceMappingURL=cache-view.js.map

package/esm/components/cache-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache-view.js","sourceRoot":"","sources":["../../src/components/cache-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAE5F,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAwBpC,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAAE,KAAiB,EAAe,EAAE,CAC3E,CACE,gBAAC,MAAM,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC;IACzE,gBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,YAEhC,CACF,CACgB,CAAA;AAE7B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAqF,KAAK,CAAC;IAC/G,aAAa,EAAE,kBAAkB;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAsB,EAAE;QACjE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;QAErD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACpC,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAA;QAE/C,MAAM,CAAC,MAAM,CAAC,GAAG,aAAa,CAAC,SAAS,OAAO,EAAE,EAAE,UAAU,CAAC,CAAA;QAE9D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAgB,qBAAqB,EAAE,IAAI,CAAC,CAAA;QAE1G,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;gBAC/B,sCAAsC;YACxC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,iBAAiB;QACjB,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,MAAM,aAAa,GAAG,KAAK,IAAI,iBAAiB,CAAA;YAChD,OAAO,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;QAC3C,CAAC;QAED,gBAAgB;QAChB,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,IAAI,qBAAqB,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClC,IAAI,mBAAmB,KAAK,OAAO,EAAE,CAAC;oBACpC,sBAAsB,CAAC,OAAO,CAAC,CAAA;oBAC/B,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;wBAC/B,sCAAsC;oBACxC,CAAC,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;iBAAM,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;gBACxC,sBAAsB,CAAC,IAAI,CAAC,CAAA;YAC9B,CAAC;YACD,OAAO,eAAe,CAAC,OAA4D,EAAE;gBACnF,IAAI,EAAE,MAAM;aACb,CAA2B,CAAA;QAC9B,CAAC;QAED,kBAAkB;QAClB,OAAO,MAAM,IAAI,IAAI,CAAA;IACvB,CAAC;CACF,CAAC,CAAA"}

package/esm/components/cache-view.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cache-view.spec.d.ts.map

package/esm/components/cache-view.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache-view.spec.d.ts","sourceRoot":"","sources":["../../src/components/cache-view.spec.tsx"],"names":[],"mappings":""}

package/esm/components/cache-view.spec.js

@@ -0,0 +1,183 @@
+import { Cache } from '@furystack/cache';
+import { Shade, createComponent, flushUpdates } from '@furystack/shades';
+import { sleepAsync } from '@furystack/utils';
+import { describe, expect, it, vi } from 'vitest';
+import { CacheView } from './cache-view.js';
+const TestContent = Shade({
+    shadowDomName: 'test-cache-content',
+    render: ({ props }) => createComponent("span", { className: "content-value" }, props.data.value),
+});
+const renderCacheView = async (cache, args, options) => {
+    const el = (createComponent("div", null,
+        createComponent(CacheView, { cache: cache, args: args, content: TestContent, loader: options?.loader, error: options?.error })));
+    const cacheView = el.firstElementChild;
+    cacheView.updateComponent();
+    await flushUpdates();
+    return { container: el, cacheView };
+};
+describe('CacheView', () => {
+    it('should be defined', () => {
+        expect(CacheView).toBeDefined();
+        expect(typeof CacheView).toBe('function');
+    });
+    it('should create a cache-view element', () => {
+        const cache = new Cache({ load: async (key) => key });
+        const el = (createComponent(CacheView, { cache: cache, args: ['test'], content: TestContent }));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-cache-view');
+        cache[Symbol.dispose]();
+    });
+    describe('loading state', () => {
+        it('should render null by default when loading', async () => {
+            const cache = new Cache({
+                load: () => new Promise(() => { }),
+            });
+            const { cacheView } = await renderCacheView(cache, ['test']);
+            expect(cacheView.querySelector('test-cache-content')).toBeNull();
+            expect(cacheView.querySelector('shade-result')).toBeNull();
+            cache[Symbol.dispose]();
+        });
+        it('should render custom loader when provided', async () => {
+            const cache = new Cache({
+                load: () => new Promise(() => { }),
+            });
+            const { cacheView } = await renderCacheView(cache, ['test'], {
+                loader: (createComponent("span", { className: "custom-loader" }, "Loading...")),
+            });
+            const loader = cacheView.querySelector('.custom-loader');
+            expect(loader).not.toBeNull();
+            expect(loader?.textContent).toBe('Loading...');
+            cache[Symbol.dispose]();
+        });
+    });
+    describe('loaded state', () => {
+        it('should render content when cache has loaded value', async () => {
+            const cache = new Cache({ load: async (key) => `Hello ${key}` });
+            await cache.get('world');
+            const { cacheView } = await renderCacheView(cache, ['world']);
+            const contentEl = cacheView.querySelector('test-cache-content');
+            expect(contentEl).not.toBeNull();
+            const contentComponent = contentEl;
+            contentComponent.updateComponent();
+            await flushUpdates();
+            const valueEl = contentComponent.querySelector('.content-value');
+            expect(valueEl?.textContent).toBe('Hello world');
+            cache[Symbol.dispose]();
+        });
+    });
+    describe('failed state', () => {
+        it('should render default error UI when cache has failed', async () => {
+            const cache = new Cache({
+                load: async () => {
+                    throw new Error('Test failure');
+                },
+            });
+            try {
+                await cache.get('test');
+            }
+            catch {
+                // expected
+            }
+            const { cacheView } = await renderCacheView(cache, ['test']);
+            const resultEl = cacheView.querySelector('shade-result');
+            expect(resultEl).not.toBeNull();
+            const resultComponent = resultEl;
+            resultComponent.updateComponent();
+            await flushUpdates();
+            expect(resultComponent.querySelector('.result-title')?.textContent).toBe('Something went wrong');
+            cache[Symbol.dispose]();
+        });
+        it('should render custom error UI when error prop is provided', async () => {
+            const cache = new Cache({
+                load: async () => {
+                    throw new Error('Custom failure');
+                },
+            });
+            try {
+                await cache.get('test');
+            }
+            catch {
+                // expected
+            }
+            const customError = vi.fn((err, _retry) => (createComponent("span", { className: "custom-error" }, String(err))));
+            const { cacheView } = await renderCacheView(cache, ['test'], { error: customError });
+            expect(customError).toHaveBeenCalledOnce();
+            expect(customError.mock.calls[0][0]).toBeInstanceOf(Error);
+            const customErrorEl = cacheView.querySelector('.custom-error');
+            expect(customErrorEl).not.toBeNull();
+            cache[Symbol.dispose]();
+        });
+        it('should not render content when failed even if stale value exists', async () => {
+            const cache = new Cache({ load: async (key) => key });
+            await cache.get('test');
+            cache.setExplicitValue({
+                loadArgs: ['test'],
+                value: { status: 'failed', error: new Error('fail'), value: 'stale', updatedAt: new Date() },
+            });
+            const { cacheView } = await renderCacheView(cache, ['test']);
+            expect(cacheView.querySelector('test-cache-content')).toBeNull();
+            expect(cacheView.querySelector('shade-result')).not.toBeNull();
+            cache[Symbol.dispose]();
+        });
+        it('should call cache.reload when retry is invoked', async () => {
+            const loadFn = vi.fn(async () => {
+                throw new Error('fail');
+            });
+            const cache = new Cache({ load: loadFn });
+            try {
+                await cache.get('test');
+            }
+            catch {
+                // expected
+            }
+            let capturedRetry;
+            const customError = (_err, retry) => {
+                capturedRetry = retry;
+                return (createComponent("span", { className: "custom-error" }, "Error"));
+            };
+            await renderCacheView(cache, ['test'], { error: customError });
+            expect(capturedRetry).toBeDefined();
+            loadFn.mockResolvedValueOnce('recovered');
+            capturedRetry();
+            await sleepAsync(50);
+            const observable = cache.getObservable('test');
+            const result = observable.getValue();
+            expect(result.status).toBe('loaded');
+            expect(result.value).toBe('recovered');
+            cache[Symbol.dispose]();
+        });
+    });
+    describe('obsolete state', () => {
+        it('should render content when obsolete and trigger reload', async () => {
+            const loadFn = vi.fn(async (key) => `Hello ${key}`);
+            const cache = new Cache({ load: loadFn });
+            await cache.get('test');
+            cache.setObsolete('test');
+            const { cacheView } = await renderCacheView(cache, ['test']);
+            const contentEl = cacheView.querySelector('test-cache-content');
+            expect(contentEl).not.toBeNull();
+            await sleepAsync(50);
+            // reload should have been called (initial load + obsolete reload)
+            expect(loadFn).toHaveBeenCalledTimes(2);
+            cache[Symbol.dispose]();
+        });
+    });
+    describe('error takes priority over value', () => {
+        it('should show error when failed with value, not content', async () => {
+            const cache = new Cache({ load: async (key) => key });
+            await cache.get('test');
+            const failedWithValue = {
+                status: 'failed',
+                error: new Error('whoops'),
+                value: 'stale-data',
+                updatedAt: new Date(),
+            };
+            cache.setExplicitValue({ loadArgs: ['test'], value: failedWithValue });
+            const { cacheView } = await renderCacheView(cache, ['test']);
+            expect(cacheView.querySelector('test-cache-content')).toBeNull();
+            expect(cacheView.querySelector('shade-result')).not.toBeNull();
+            cache[Symbol.dispose]();
+        });
+    });
+});
+//# sourceMappingURL=cache-view.spec.js.map

package/esm/components/cache-view.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache-view.spec.js","sourceRoot":"","sources":["../../src/components/cache-view.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/index.d.ts

@@ -8,6 +8,7 @@ export * from './badge.js';
 export * from './breadcrumb.js';
 export * from './button-group.js';
 export * from './button.js';
+export * from './cache-view.js';
 export * from './card.js';
 export * from './carousel.js';
 export * from './chip.js';

package/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/esm/components/index.js

@@ -8,6 +8,7 @@ export * from './badge.js';
 export * from './breadcrumb.js';
 export * from './button-group.js';
 export * from './button.js';
+export * from './cache-view.js';
 export * from './card.js';
 export * from './carousel.js';
 export * from './chip.js';

package/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/esm/components/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,QAAQ;;;;sEAiDnB,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,QAAQ;;;;sEAwCnB,CAAA"}

package/esm/components/skeleton.js

@@ -3,15 +3,6 @@ import { cssVariableTheme } from '../services/css-variable-theme.js';
 import { promisifyAnimation } from '../utils/promisify-animation.js';
 export const Skeleton = Shade({
     shadowDomName: 'shade-skeleton',
-    css: {
-        opacity: '0',
-        display: 'inline-block',
-        background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
-        backgroundSize: '400% 400%',
-        width: '100%',
-        height: '100%',
-        minHeight: '1em',
-    },
     render: ({ props, useRef }) => {
         const wrapperRef = useRef('wrapper');
         const { delay = 1500 } = props;
@@ -34,8 +25,8 @@ export const Skeleton = Shade({
         return (createComponent("div", { ref: wrapperRef, style: {
                 opacity: '0',
                 display: 'inline-block',
-                background: 'inherit',
-                backgroundSize: 'inherit',
+                background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
+                backgroundSize: '400% 400%',
                 width: '100%',
                 height: '100%',
                 minHeight: '1em',

package/esm/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AASpE,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAgB;IAC3C,aAAa,EAAE,gBAAgB;IAC/B,GAAG,EAAE;QACH,OAAO,EAAE,GAAG;QACZ,OAAO,EAAE,cAAc;QACvB,UAAU,EAAE,8CAA8C,gBAAgB,CAAC,IAAI,CAAC,SAAS,0CAA0C,gBAAgB,CAAC,IAAI,CAAC,SAAS,0CAA0C,gBAAgB,CAAC,IAAI,CAAC,SAAS,qBAAqB;QAChQ,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,KAAK;KACjB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC5B,MAAM,UAAU,GAAG,MAAM,CAAiB,SAAS,CAAC,CAAA;QACpD,MAAM,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;QAC9B,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAA;YAC7B,IAAI,CAAC,EAAE;gBAAE,OAAM;YACf,KAAK,kBAAkB,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;gBAC5D,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,UAAU;gBAClB,KAAK;aACN,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACX,KAAK,kBAAkB,CACrB,EAAE,EACF,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,EAAE,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,EACxG;oBACE,QAAQ,EAAE,KAAK;oBACf,UAAU,EAAE,QAAQ;iBACrB,CACF,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,OAAO,CACL,yBACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG;gBACZ,OAAO,EAAE,cAAc;gBACvB,UAAU,EAAE,SAAS;gBACrB,cAAc,EAAE,SAAS;gBACzB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,KAAK;aACjB,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AASpE,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAgB;IAC3C,aAAa,EAAE,gBAAgB;IAC/B,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC5B,MAAM,UAAU,GAAG,MAAM,CAAiB,SAAS,CAAC,CAAA;QACpD,MAAM,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;QAC9B,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAA;YAC7B,IAAI,CAAC,EAAE;gBAAE,OAAM;YACf,KAAK,kBAAkB,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;gBAC5D,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,UAAU;gBAClB,KAAK;aACN,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACX,KAAK,kBAAkB,CACrB,EAAE,EACF,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,EAAE,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,EACxG;oBACE,QAAQ,EAAE,KAAK;oBACf,UAAU,EAAE,QAAQ;iBACrB,CACF,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,OAAO,CACL,yBACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG;gBACZ,OAAO,EAAE,cAAc;gBACvB,UAAU,EAAE,8CAA8C,gBAAgB,CAAC,IAAI,CAAC,SAAS,0CAA0C,gBAAgB,CAAC,IAAI,CAAC,SAAS,0CAA0C,gBAAgB,CAAC,IAAI,CAAC,SAAS,qBAAqB;gBAChQ,cAAc,EAAE,WAAW;gBAC3B,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,KAAK;aACjB,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/skeleton.spec.js

@@ -37,7 +37,7 @@ describe('Skeleton', () => {
         Element.prototype.animate = originalAnimate;
         vi.restoreAllMocks();
     });
-    it('should render with shadow DOM', async () => {
+    it('should render with correct initial state and default delay', async () => {
         await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
             initializeShadeRoot({
@@ -48,32 +48,11 @@ describe('Skeleton', () => {
             await sleepAsync(50);
             const skeleton = document.querySelector('shade-skeleton');
             expect(skeleton).not.toBeNull();
-        });
-    });
-    it('should have initial opacity of 0', async () => {
-        await usingAsync(new Injector(), async (injector) => {
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Skeleton, null),
-            });
-            await sleepAsync(50);
-            const skeleton = document.querySelector('shade-skeleton');
-            expect(skeleton).not.toBeNull();
-            const computedStyle = window.getComputedStyle(skeleton);
+            const skeletonDiv = document.querySelector('shade-skeleton div');
+            expect(skeletonDiv).not.toBeNull();
+            const computedStyle = window.getComputedStyle(skeletonDiv);
             expect(computedStyle.opacity).toBe('0');
-        });
-    });
-    it('should use default delay of 1500ms', async () => {
-        await usingAsync(new Injector(), async (injector) => {
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Skeleton, null),
-            });
-            await sleepAsync(50);
+            expect(computedStyle.display).toBe('inline-block');
             const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
             expect(fadeInCall).toBeDefined();
             expect(fadeInCall?.options?.delay).toBe(1500);
@@ -93,21 +72,6 @@ describe('Skeleton', () => {
             expect(fadeInCall?.options?.delay).toBe(500);
         });
     });
-    it('should have correct css styles applied', async () => {
-        await usingAsync(new Injector(), async (injector) => {
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Skeleton, null),
-            });
-            await sleepAsync(50);
-            const skeleton = document.querySelector('shade-skeleton');
-            expect(skeleton).not.toBeNull();
-            const computedStyle = window.getComputedStyle(skeleton);
-            expect(computedStyle.display).toBe('inline-block');
-        });
-    });
     it('should start fade-in animation with correct parameters', async () => {
         await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
@@ -129,7 +93,7 @@ describe('Skeleton', () => {
             expect(options.delay).toBe(100);
         });
     });
-    it('should start background animation after fade-in completes', async () => {
+    it('should start background animation with correct keyframes after fade-in completes', async () => {
         await usingAsync(new Injector(), async (injector) => {
             const rootElement = document.getElementById('root');
             initializeShadeRoot({
@@ -143,19 +107,6 @@ describe('Skeleton', () => {
             const options = backgroundAnimation?.options;
             expect(options.duration).toBe(10000);
             expect(options.iterations).toBe(Infinity);
-        });
-    });
-    it('should have gradient background animation keyframes', async () => {
-        await usingAsync(new Injector(), async (injector) => {
-            const rootElement = document.getElementById('root');
-            initializeShadeRoot({
-                injector,
-                rootElement,
-                jsxElement: createComponent(Skeleton, { delay: 0 }),
-            });
-            await sleepAsync(100);
-            const backgroundAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'backgroundPosition' in kf));
-            expect(backgroundAnimation).toBeDefined();
             const keyframes = backgroundAnimation?.keyframes;
             expect(keyframes).toHaveLength(3);
             expect(keyframes[0].backgroundPosition).toBe('0% 50%');

package/esm/components/skeleton.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.spec.js","sourceRoot":"","sources":["../../src/components/skeleton.spec.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"skeleton.spec.js","sourceRoot":"","sources":["../../src/components/skeleton.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "12.0.1",
+  "version": "12.1.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -44,6 +44,7 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "@furystack/cache": "^6.0.0",
     "@furystack/core": "^15.0.36",
     "@furystack/inject": "^12.0.30",
     "@furystack/shades": "^12.0.1",

package/src/components/cache-view.spec.tsx

@@ -0,0 +1,210 @@
+import { Cache } from '@furystack/cache'
+import type { CacheResult, CacheWithValue } from '@furystack/cache'
+import { Shade, createComponent, flushUpdates } from '@furystack/shades'
+import { sleepAsync } from '@furystack/utils'
+import { describe, expect, it, vi } from 'vitest'
+import { CacheView } from './cache-view.js'
+
+const TestContent = Shade<{ data: CacheWithValue<string> }>({
+  shadowDomName: 'test-cache-content',
+  render: ({ props }) => <span className="content-value">{props.data.value}</span>,
+})
+
+const renderCacheView = async (
+  cache: Cache<string, [string]>,
+  args: [string],
+  options?: {
+    loader?: JSX.Element
+    error?: (error: unknown, retry: () => void) => JSX.Element
+  },
+) => {
+  const el = (
+    <div>
+      <CacheView cache={cache} args={args} content={TestContent} loader={options?.loader} error={options?.error} />
+    </div>
+  )
+  const cacheView = el.firstElementChild as JSX.Element
+  cacheView.updateComponent()
+  await flushUpdates()
+  return { container: el, cacheView }
+}
+
+describe('CacheView', () => {
+  it('should be defined', () => {
+    expect(CacheView).toBeDefined()
+    expect(typeof CacheView).toBe('function')
+  })
+
+  it('should create a cache-view element', () => {
+    const cache = new Cache<string, [string]>({ load: async (key) => key })
+    const el = (<CacheView cache={cache} args={['test']} content={TestContent} />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-cache-view')
+    cache[Symbol.dispose]()
+  })
+
+  describe('loading state', () => {
+    it('should render null by default when loading', async () => {
+      const cache = new Cache<string, [string]>({
+        load: () => new Promise(() => {}),
+      })
+      const { cacheView } = await renderCacheView(cache, ['test'])
+      expect(cacheView.querySelector('test-cache-content')).toBeNull()
+      expect(cacheView.querySelector('shade-result')).toBeNull()
+      cache[Symbol.dispose]()
+    })
+
+    it('should render custom loader when provided', async () => {
+      const cache = new Cache<string, [string]>({
+        load: () => new Promise(() => {}),
+      })
+      const { cacheView } = await renderCacheView(cache, ['test'], {
+        loader: (<span className="custom-loader">Loading...</span>) as unknown as JSX.Element,
+      })
+      const loader = cacheView.querySelector('.custom-loader')
+      expect(loader).not.toBeNull()
+      expect(loader?.textContent).toBe('Loading...')
+      cache[Symbol.dispose]()
+    })
+  })
+
+  describe('loaded state', () => {
+    it('should render content when cache has loaded value', async () => {
+      const cache = new Cache<string, [string]>({ load: async (key) => `Hello ${key}` })
+      await cache.get('world')
+      const { cacheView } = await renderCacheView(cache, ['world'])
+      const contentEl = cacheView.querySelector('test-cache-content')
+      expect(contentEl).not.toBeNull()
+      const contentComponent = contentEl as JSX.Element
+      contentComponent.updateComponent()
+      await flushUpdates()
+      const valueEl = contentComponent.querySelector('.content-value')
+      expect(valueEl?.textContent).toBe('Hello world')
+      cache[Symbol.dispose]()
+    })
+  })
+
+  describe('failed state', () => {
+    it('should render default error UI when cache has failed', async () => {
+      const cache = new Cache<string, [string]>({
+        load: async () => {
+          throw new Error('Test failure')
+        },
+      })
+      try {
+        await cache.get('test')
+      } catch {
+        // expected
+      }
+      const { cacheView } = await renderCacheView(cache, ['test'])
+      const resultEl = cacheView.querySelector('shade-result')
+      expect(resultEl).not.toBeNull()
+      const resultComponent = resultEl as JSX.Element
+      resultComponent.updateComponent()
+      await flushUpdates()
+      expect(resultComponent.querySelector('.result-title')?.textContent).toBe('Something went wrong')
+      cache[Symbol.dispose]()
+    })
+
+    it('should render custom error UI when error prop is provided', async () => {
+      const cache = new Cache<string, [string]>({
+        load: async () => {
+          throw new Error('Custom failure')
+        },
+      })
+      try {
+        await cache.get('test')
+      } catch {
+        // expected
+      }
+      const customError = vi.fn(
+        (err: unknown, _retry: () => void) =>
+          (<span className="custom-error">{String(err)}</span>) as unknown as JSX.Element,
+      )
+      const { cacheView } = await renderCacheView(cache, ['test'], { error: customError })
+      expect(customError).toHaveBeenCalledOnce()
+      expect(customError.mock.calls[0][0]).toBeInstanceOf(Error)
+      const customErrorEl = cacheView.querySelector('.custom-error')
+      expect(customErrorEl).not.toBeNull()
+      cache[Symbol.dispose]()
+    })
+
+    it('should not render content when failed even if stale value exists', async () => {
+      const cache = new Cache<string, [string]>({ load: async (key) => key })
+      await cache.get('test')
+      cache.setExplicitValue({
+        loadArgs: ['test'],
+        value: { status: 'failed', error: new Error('fail'), value: 'stale', updatedAt: new Date() },
+      })
+      const { cacheView } = await renderCacheView(cache, ['test'])
+      expect(cacheView.querySelector('test-cache-content')).toBeNull()
+      expect(cacheView.querySelector('shade-result')).not.toBeNull()
+      cache[Symbol.dispose]()
+    })
+
+    it('should call cache.reload when retry is invoked', async () => {
+      const loadFn = vi.fn<(key: string) => Promise<string>>(async () => {
+        throw new Error('fail')
+      })
+      const cache = new Cache<string, [string]>({ load: loadFn })
+      try {
+        await cache.get('test')
+      } catch {
+        // expected
+      }
+      let capturedRetry: (() => void) | undefined
+      const customError = (_err: unknown, retry: () => void) => {
+        capturedRetry = retry
+        return (<span className="custom-error">Error</span>) as unknown as JSX.Element
+      }
+      await renderCacheView(cache, ['test'], { error: customError })
+      expect(capturedRetry).toBeDefined()
+
+      loadFn.mockResolvedValueOnce('recovered')
+      capturedRetry!()
+      await sleepAsync(50)
+
+      const observable = cache.getObservable('test')
+      const result = observable.getValue()
+      expect(result.status).toBe('loaded')
+      expect(result.value).toBe('recovered')
+      cache[Symbol.dispose]()
+    })
+  })
+
+  describe('obsolete state', () => {
+    it('should render content when obsolete and trigger reload', async () => {
+      const loadFn = vi.fn(async (key: string) => `Hello ${key}`)
+      const cache = new Cache<string, [string]>({ load: loadFn })
+      await cache.get('test')
+      cache.setObsolete('test')
+
+      const { cacheView } = await renderCacheView(cache, ['test'])
+      const contentEl = cacheView.querySelector('test-cache-content')
+      expect(contentEl).not.toBeNull()
+
+      await sleepAsync(50)
+      // reload should have been called (initial load + obsolete reload)
+      expect(loadFn).toHaveBeenCalledTimes(2)
+      cache[Symbol.dispose]()
+    })
+  })
+
+  describe('error takes priority over value', () => {
+    it('should show error when failed with value, not content', async () => {
+      const cache = new Cache<string, [string]>({ load: async (key) => key })
+      await cache.get('test')
+      const failedWithValue: CacheResult<string> = {
+        status: 'failed',
+        error: new Error('whoops'),
+        value: 'stale-data',
+        updatedAt: new Date(),
+      }
+      cache.setExplicitValue({ loadArgs: ['test'], value: failedWithValue })
+      const { cacheView } = await renderCacheView(cache, ['test'])
+      expect(cacheView.querySelector('test-cache-content')).toBeNull()
+      expect(cacheView.querySelector('shade-result')).not.toBeNull()
+      cache[Symbol.dispose]()
+    })
+  })
+})

package/src/components/cache-view.tsx

@@ -0,0 +1,103 @@
+import type { Cache, CacheWithValue } from '@furystack/cache'
+import { hasCacheValue, isFailedCacheResult, isObsoleteCacheResult } from '@furystack/cache'
+import type { ShadeComponent } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+
+import { Button } from './button.js'
+import { Result } from './result.js'
+
+/**
+ * Props for the CacheView component.
+ * @typeParam TData - The type of data stored in the cache
+ * @typeParam TArgs - The tuple type of arguments used to identify the cache entry
+ */
+export type CacheViewProps<TData, TArgs extends any[]> = {
+  /** The cache instance to observe and control */
+  cache: Cache<TData, TArgs>
+  /** The arguments identifying which cache entry to display */
+  args: TArgs
+  /** Shades component rendered when a value is available (loaded or obsolete). Receives CacheWithValue<TData>. */
+  content: ShadeComponent<{ data: CacheWithValue<TData> }>
+  /** Optional custom loader element. Default: null (nothing shown when loading). */
+  loader?: JSX.Element
+  /**
+   * Optional custom error UI. Receives the error and a retry callback.
+   * The retry callback calls cache.reload(...args).
+   * If not provided, a default Result + retry Button is shown.
+   */
+  error?: (error: unknown, retry: () => void) => JSX.Element
+}
+
+const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
+  (
+    <Result status="error" title="Something went wrong" subtitle={String(error)}>
+      <Button variant="outlined" onclick={retry}>
+        Retry
+      </Button>
+    </Result>
+  ) as unknown as JSX.Element
+
+/**
+ * CacheView renders the state of a cache entry for the given cache + args.
+ *
+ * It subscribes to the cache observable and handles all states:
+ * 1. **Error first** - If the cache entry has failed, shows the error UI with a retry button.
+ * 2. **Value next** - If the entry has a value (loaded or obsolete), renders the content component.
+ *    When obsolete, it also triggers a reload automatically.
+ * 3. **Loading last** - If there is no value and no error, shows the loader (or null by default).
+ *
+ * @example
+ * ```tsx
+ * const MyContent = Shade<{ data: CacheWithValue<User> }>({
+ *   shadowDomName: 'my-content',
+ *   render: ({ props }) => <div>{props.data.value.name}</div>,
+ * })
+ *
+ * <CacheView cache={userCache} args={[userId]} content={MyContent} />
+ * ```
+ */
+export const CacheView: <TData, TArgs extends any[]>(props: CacheViewProps<TData, TArgs>) => JSX.Element = Shade({
+  shadowDomName: 'shade-cache-view',
+  render: ({ props, useObservable, useState }): JSX.Element | null => {
+    const { cache, args, content, loader, error } = props
+
+    const argsKey = JSON.stringify(args)
+    const observable = cache.getObservable(...args)
+
+    const [result] = useObservable(`cache-${argsKey}`, observable)
+
+    const [lastReloadedArgsKey, setLastReloadedArgsKey] = useState<string | null>('lastReloadedArgsKey', null)
+
+    const retry = () => {
+      cache.reload(...args).catch(() => {
+        /* error state will be set by cache */
+      })
+    }
+
+    // 1. Error first
+    if (isFailedCacheResult(result)) {
+      const errorRenderer = error ?? getDefaultErrorUi
+      return errorRenderer(result.error, retry)
+    }
+
+    // 2. Value next
+    if (hasCacheValue(result)) {
+      if (isObsoleteCacheResult(result)) {
+        if (lastReloadedArgsKey !== argsKey) {
+          setLastReloadedArgsKey(argsKey)
+          cache.reload(...args).catch(() => {
+            /* error state will be set by cache */
+          })
+        }
+      } else if (lastReloadedArgsKey !== null) {
+        setLastReloadedArgsKey(null)
+      }
+      return createComponent(content as ShadeComponent<{ data: CacheWithValue<unknown> }>, {
+        data: result,
+      }) as unknown as JSX.Element
+    }
+
+    // 3. Loading last
+    return loader ?? null
+  },
+})

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './badge.js'
 export * from './breadcrumb.js'
 export * from './button-group.js'
 export * from './button.js'
+export * from './cache-view.js'
 export * from './card.js'
 export * from './carousel.js'
 export * from './chip.js'

package/src/components/skeleton.spec.tsx

@@ -46,7 +46,7 @@ describe('Skeleton', () => {
     vi.restoreAllMocks()
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render with correct initial state and default delay', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -60,40 +60,13 @@ describe('Skeleton', () => {
 
       const skeleton = document.querySelector('shade-skeleton')
       expect(skeleton).not.toBeNull()
-    })
-  })
-
-  it('should have initial opacity of 0', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
 
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
+      const skeletonDiv = document.querySelector('shade-skeleton div') as HTMLElement
+      expect(skeletonDiv).not.toBeNull()
 
-      const computedStyle = window.getComputedStyle(skeleton)
+      const computedStyle = window.getComputedStyle(skeletonDiv)
       expect(computedStyle.opacity).toBe('0')
-    })
-  })
-
-  it('should use default delay of 1500ms', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
+      expect(computedStyle.display).toBe('inline-block')
 
       const fadeInCall = animateCalls.find(
         (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
@@ -125,26 +98,6 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should have correct css styles applied', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
-
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
-
-      const computedStyle = window.getComputedStyle(skeleton)
-      expect(computedStyle.display).toBe('inline-block')
-    })
-  })
-
   it('should start fade-in animation with correct parameters', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
@@ -175,7 +128,7 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should start background animation after fade-in completes', async () => {
+  it('should start background animation with correct keyframes after fade-in completes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -196,26 +149,6 @@ describe('Skeleton', () => {
       const options = backgroundAnimation?.options as KeyframeAnimationOptions
       expect(options.duration).toBe(10000)
       expect(options.iterations).toBe(Infinity)
-    })
-  })
-
-  it('should have gradient background animation keyframes', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton delay={0} />,
-      })
-
-      await sleepAsync(100)
-
-      const backgroundAnimation = animateCalls.find(
-        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
-      )
-
-      expect(backgroundAnimation).toBeDefined()
 
       const keyframes = backgroundAnimation?.keyframes as Keyframe[]
       expect(keyframes).toHaveLength(3)

package/src/components/skeleton.tsx

@@ -11,15 +11,6 @@ export type SkeletonProps = {
 
 export const Skeleton = Shade<SkeletonProps>({
   shadowDomName: 'shade-skeleton',
-  css: {
-    opacity: '0',
-    display: 'inline-block',
-    background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
-    backgroundSize: '400% 400%',
-    width: '100%',
-    height: '100%',
-    minHeight: '1em',
-  },
   render: ({ props, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props
@@ -49,8 +40,8 @@ export const Skeleton = Shade<SkeletonProps>({
         style={{
           opacity: '0',
           display: 'inline-block',
-          background: 'inherit',
-          backgroundSize: 'inherit',
+          background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
+          backgroundSize: '400% 400%',
           width: '100%',
           height: '100%',
           minHeight: '1em',