fix: resolve blank sub-storybook pages on packets.es.net

.changeset/fix-readme-exports-2-0-1-beta.md

@@ -0,0 +1,11 @@
+---
+"@esnet/packets-ui-react": patch
+"@esnet/packets-ui-css": patch
+"@esnet/packets-ui-web": patch
+---
+
+fix: correct README install commands, remove dead exports, fix avatar example
+
+- README install commands now use the @beta tag so beta testers get 2.x instead of the old 0.x/1.x stable release
+- Removed ./style.css export from ui-react exports map: no CSS file ships in the tarball, causing MODULE_NOT_FOUND for consumers who imported it
+- Fixed PktsAvatar usage example in ui-react README: initials and color are not props; correct props are alt (for the fallback label) and backgroundColor

apps/host-docs/src/components-react.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing React Components →](/?path=/docs/about-installing-react-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-react-components--docs" target="_parent"><strong>Installing React Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/components-web.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing Web Components →](/?path=/docs/about-installing-web-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-web-components--docs" target="_parent"><strong>Installing Web Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/css.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing CSS Components →](/?path=/docs/about-installing-css-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-css-components--docs" target="_parent"><strong>Installing CSS Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/design-tokens.mdx

@@ -75,9 +75,9 @@ const CustomButton = styled.button`
 
     If you're starting a new project or simply want to use Packets components, you **don't need design tokens**. Instead, use one of the component systems:
 
-    - **[Installing CSS Components →](/?path=/docs/about-installing-css-components--docs)** - For static sites and no-build projects
-    - **[Installing Web Components →](/?path=/docs/about-installing-web-components--docs)** - For framework-agnostic applications
-    - **[Installing React Components →](/?path=/docs/about-installing-react-components--docs)** - For React applications
+    - <a href="/?path=/docs/about-installing-css-components--docs" target="_parent"><strong>Installing CSS Components →</strong></a> - For static sites and no-build projects
+    - <a href="/?path=/docs/about-installing-web-components--docs" target="_parent"><strong>Installing Web Components →</strong></a> - For framework-agnostic applications
+    - <a href="/?path=/docs/about-installing-react-components--docs" target="_parent"><strong>Installing React Components →</strong></a> - For React applications
 
   </div>
 </div>
@@ -88,13 +88,13 @@ const CustomButton = styled.button`
 
     Browse the design tokens by category:
 
-    - **[Colors](/?path=/docs/design-tokens-colors--docs)** - Color ramps and semantic color tokens
-    - **[Spacing](/?path=/docs/design-tokens-spacing--docs)** - Margin, padding, and gap values
-    - **[Motion](/?path=/docs/design-tokens-motion--docs)** - Animation durations and easing functions
-    - **[Breakpoints](/?path=/docs/design-tokens-breakpoints--docs)** - Responsive breakpoint values
-    - **[Radius & Borders](/?path=/docs/design-tokens-radius-and-borders--docs)** - Border radius and border width values
-    - **[Elevation & Shadows](/?path=/docs/design-tokens-elevation-and-shadows--docs)** - Box shadow and elevation tokens
-    - **[Icons](/?path=/docs/design-tokens-icons--docs)** - Icon size and styling tokens
+    - <a href="/?path=/docs/design-tokens-colors--docs" target="_parent"><strong>Colors</strong></a> - Color ramps and semantic color tokens
+    - <a href="/?path=/docs/design-tokens-spacing--docs" target="_parent"><strong>Spacing</strong></a> - Margin, padding, and gap values
+    - <a href="/?path=/docs/design-tokens-motion--docs" target="_parent"><strong>Motion</strong></a> - Animation durations and easing functions
+    - <a href="/?path=/docs/design-tokens-breakpoints--docs" target="_parent"><strong>Breakpoints</strong></a> - Responsive breakpoint values
+    - <a href="/?path=/docs/design-tokens-radius-and-borders--docs" target="_parent"><strong>Radius & Borders</strong></a> - Border radius and border width values
+    - <a href="/?path=/docs/design-tokens-elevation-and-shadows--docs" target="_parent"><strong>Elevation & Shadows</strong></a> - Box shadow and elevation tokens
+    - <a href="/?path=/docs/design-tokens-icons--docs" target="_parent"><strong>Icons</strong></a> - Icon size and styling tokens
 
   </div>
 </div>

apps/host-docs/src/getting-started.mdx

@@ -29,7 +29,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-css-components--docs" className="pkts-link-blue">
+      <a href="?path=/docs/about-installing-css-components--docs" target="_parent" className="pkts-link-blue">
         Installation guide →
       </a>
     </div>
@@ -50,7 +50,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css @esnet/packets-ui-web</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-web-components--docs" className="pkts-link-purple">
+      <a href="?path=/docs/about-installing-web-components--docs" target="_parent" className="pkts-link-purple">
         Installation guide →
       </a>
     </div>
@@ -71,7 +71,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css @esnet/packets-ui-react</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-react-components--docs" className="pkts-link-cyan">
+      <a href="?path=/docs/about-installing-react-components--docs" target="_parent" className="pkts-link-cyan">
         Installation guide →
       </a>
     </div>
@@ -195,9 +195,9 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
         </tr>
         <tr>
           <td><strong>Installation</strong></td>
-          <td><a href="?path=/docs/about-installing-css-components--docs" className="pkts-link-blue">CSS guide →</a></td>
-          <td><a href="?path=/docs/about-installing-web-components--docs" className="pkts-link-purple">Web guide →</a></td>
-          <td><a href="?path=/docs/about-installing-react-components--docs" className="pkts-link-cyan">React guide →</a></td>
+          <td><a href="?path=/docs/about-installing-css-components--docs" target="_parent" className="pkts-link-blue">CSS guide →</a></td>
+          <td><a href="?path=/docs/about-installing-web-components--docs" target="_parent" className="pkts-link-purple">Web guide →</a></td>
+          <td><a href="?path=/docs/about-installing-react-components--docs" target="_parent" className="pkts-link-cyan">React guide →</a></td>
         </tr>
       </tbody>
     </table>

apps/react-docs/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "node ../../scripts/assemble-cloudflare.mjs",
-    "build:storybook": "storybook build",
+    "build": "storybook build",
+    "build:cloudflare": "node ../../scripts/assemble-cloudflare.mjs",
     "lint": "eslint ./src/stories/**/*.stories.tsx --max-warnings 0",
     "preview": "serve storybook-static"
   },

packages/ui-css/README.md

@@ -7,9 +7,11 @@ Use this package if you want Packets styles without a JavaScript framework. For
 ## Installation
 
 ```bash
-npm install @esnet/packets-ui-css
+npm install @esnet/packets-ui-css@beta
 ```
 
+Once 2.x reaches a stable release, drop the `@beta` tag.
+
 ## Setup
 
 ### 1. Add the fonts

packages/ui-react/README.md

@@ -5,11 +5,13 @@ React components for the [Packets Design System](https://github.com/esnet/packet
 ## Installation
 
 ```bash
-npm install @esnet/packets-ui-css @esnet/packets-ui-react
+npm install @esnet/packets-ui-css@beta @esnet/packets-ui-react@beta
 ```
 
 Packets ships styles separately. You must install `@esnet/packets-ui-css` alongside the React package.
 
+Once 2.x reaches a stable release, drop the `@beta` tag.
+
 ### Peer dependencies
 
 ```bash
@@ -61,7 +63,7 @@ function App() {
     <div>
       <PktsButton variant="primary">Save</PktsButton>
       <PktsAlert variant="success">Changes saved.</PktsAlert>
-      <PktsAvatar initials="JD" size="medium" color="grape" />
+      <PktsAvatar alt="JD" size="medium" backgroundColor="grape" />
     </div>
   );
 }

packages/ui-react/package.json

@@ -89,10 +89,6 @@
       "require": "./dist/cjs/bundle.js",
       "import": "./dist/esm/bundle.js"
     },
-    "./style.css": {
-      "import": "./dist/esm/style.css",
-      "require": "./dist/cjs/style.css"
-    },
     "./src/*": "./src/*"
   }
 }

packages/ui-web/README.md

@@ -5,11 +5,13 @@ Framework-agnostic Web Components for the [Packets Design System](https://github
 ## Installation
 
 ```bash
-npm install @esnet/packets-ui-css @esnet/packets-ui-web
+npm install @esnet/packets-ui-css@beta @esnet/packets-ui-web@beta
 ```
 
 Packets ships styles separately. You must install `@esnet/packets-ui-css` alongside the Web Components package.
 
+Once 2.x reaches a stable release, drop the `@beta` tag.
+
 ### Peer dependencies
 
 ```bash