@typestyles/next 0.0.0-unstable.247bf362710f → 0.2.0

package/dist/index.cjs

@@ -33,55 +33,29 @@ __export(index_exports, {
   TypestylesStylesheet: () => TypestylesStylesheet,
   collectStylesFromComponent: () => collectStylesFromComponent,
   createTypestylesLayout: () => createTypestylesLayout,
-  getRegisteredCss: () => import_server.getRegisteredCss,
-  getTypestylesMetadata: () => getTypestylesMetadata,
-  useServerInsertedHTML: () => import_react.useServerInsertedHTML,
-  useTypestyles: () => useTypestyles
+  getRegisteredCss: () => import_server.getRegisteredCss
 });
 module.exports = __toCommonJS(index_exports);
-
-// src/server.ts
-var import_server = require("typestyles/server");
-async function collectStylesFromComponent(component) {
-  const { renderToString } = await import("react-dom/server");
-  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
-  return css;
-}
-async function getTypestylesMetadata(component) {
-  return collectStylesFromComponent(component);
-}
-
-// src/client.tsx
 var import_react = require("react");
-var import_server2 = require("typestyles/server");
+var import_server = require("typestyles/server");
 var import_jsx_runtime = require("react/jsx-runtime");
-function useTypestyles() {
-  return (0, import_react.useSyncExternalStore)(
-    () => () => {
-    },
-    () => (0, import_server2.getRegisteredCss)(),
-    () => ""
-  );
-}
 function TypestylesStylesheet({ children }) {
   const [css, setCss] = (0, import_react.useState)("");
-  (0, import_react.useServerInsertedHTML)(() => {
-    const registeredCss = (0, import_server2.getRegisteredCss)();
-    if (registeredCss) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
-    }
-    return null;
-  });
   (0, import_react.useEffect)(() => {
-    setCss((0, import_server2.getRegisteredCss)());
+    setCss((0, import_server.getRegisteredCss)());
   }, []);
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: css } })
     ] });
   }
-  return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: css } });
+}
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
+  return css;
 }
 function createTypestylesLayout(layout) {
   return function TypestylesLayout(props) {
@@ -93,8 +67,5 @@ function createTypestylesLayout(layout) {
   TypestylesStylesheet,
   collectStylesFromComponent,
   createTypestylesLayout,
-  getRegisteredCss,
-  getTypestylesMetadata,
-  useServerInsertedHTML,
-  useTypestyles
+  getRegisteredCss
 });

package/dist/index.js

@@ -1,45 +1,24 @@
-// src/server.ts
+// src/index.tsx
+import { useEffect, useState } from "react";
 import { collectStyles, getRegisteredCss } from "typestyles/server";
-async function collectStylesFromComponent(component) {
-  const { renderToString } = await import("react-dom/server");
-  const { css } = collectStyles(() => renderToString(component));
-  return css;
-}
-async function getTypestylesMetadata(component) {
-  return collectStylesFromComponent(component);
-}
-
-// src/client.tsx
-import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
-import { getRegisteredCss as getRegisteredCss2 } from "typestyles/server";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function useTypestyles() {
-  return useSyncExternalStore(
-    () => () => {
-    },
-    () => getRegisteredCss2(),
-    () => ""
-  );
-}
 function TypestylesStylesheet({ children }) {
   const [css, setCss] = useState("");
-  useServerInsertedHTML(() => {
-    const registeredCss = getRegisteredCss2();
-    if (registeredCss) {
-      return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
-    }
-    return null;
-  });
   useEffect(() => {
-    setCss(getRegisteredCss2());
+    setCss(getRegisteredCss());
   }, []);
   if (children) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       children,
-      /* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+      /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: css } })
     ] });
   }
-  return null;
+  return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: css } });
+}
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
 }
 function createTypestylesLayout(layout) {
   return function TypestylesLayout(props) {
@@ -50,8 +29,5 @@ export {
   TypestylesStylesheet,
   collectStylesFromComponent,
   createTypestylesLayout,
-  getRegisteredCss,
-  getTypestylesMetadata,
-  useServerInsertedHTML,
-  useTypestyles
+  getRegisteredCss
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typestyles/next",
-  "version": "0.0.0-unstable.247bf362710f",
+  "version": "0.2.0",
   "description": "Next.js integration for typestyles SSR",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -11,17 +11,6 @@
       "types": "./src/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./server": {
-      "types": "./src/server.d.ts",
-      "import": "./dist/server.js",
-      "require": "./dist/server.cjs"
-    },
-    "./client": {
-      "types": "./src/client.d.ts",
-      "import": "./dist/client.js",
-      "require": "./dist/client.cjs",
-      "default": "./dist/client.js"
     }
   },
   "files": [

package/src/index.tsx

@@ -1,27 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { collectStyles, getRegisteredCss } from 'typestyles/server';
+
+export { getRegisteredCss };
+
+/**
+ * Props for the TypestylesStylesheet component.
+ */
+export interface TypestylesStylesheetProps {
+  /**
+   * The children to render (styles will be collected from these).
+   * If not provided, only the existing registered CSS will be included.
+   */
+  children?: React.ReactNode;
+}
+
 /**
- * @typestyles/next - Next.js integration for typestyles
+ * A React component that renders typestyles CSS.
+ *
+ * For App Router: Use this in your root layout to collect and render styles.
  *
- * This package provides two entry points:
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { TypestylesStylesheet } from '@typestyles/next';
  *
- * 1. Main entry (this file) - Re-exports everything
- * 2. `/server` - Server-safe utilities (getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata)
- * 3. `/client` - Client components (TypestylesStylesheet, useTypestyles, useServerInsertedHTML)
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <TypestylesStylesheet />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function TypestylesStylesheet({ children }: TypestylesStylesheetProps) {
+  const [css, setCss] = useState('');
+
+  useEffect(() => {
+    // On client: get any CSS that was registered before hydration
+    setCss(getRegisteredCss());
+  }, []);
+
+  if (children) {
+    return (
+      <>
+        {children}
+        <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />
+      </>
+    );
+  }
+
+  return <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />;
+}
+
+/**
+ * Collect styles from a React component and return them as a string.
+ * Useful for server components or when you need more control.
  *
- * For App Router, prefer using the client entry for components:
- *   import { TypestylesStylesheet } from '@typestyles/next/client';
+ * @example
+ * ```tsx
+ * // app/styles.ts
+ * import { collectStylesFromComponent } from '@typestyles/next';
+ * import { YourApp } from './YourApp';
  *
- * Or use server utilities for SSR:
- *   import { getRegisteredCss } from '@typestyles/next/server';
+ * export async function getStyles() {
+ *   return collectStylesFromComponent(<YourApp />);
+ * }
+ * ```
  */
+export async function collectStylesFromComponent(component: React.ReactElement): Promise<string> {
+  const { renderToString } = await import('react-dom/server');
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
 
-// Re-export server-safe utilities
-export { getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata } from './server';
-
-// Re-export client components and hooks
-export {
-  TypestylesStylesheet,
-  useTypestyles,
-  useServerInsertedHTML,
-  createTypestylesLayout,
-  type TypestylesStylesheetProps,
-} from './client';
+/**
+ * Create a Next.js layout export that includes typestyles.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { createTypestylesLayout } from '@typestyles/next';
+ *
+ * export default createTypestylesLayout(function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <title>My App</title>
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * });
+ * ```
+ */
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.ReactNode {
+  return function TypestylesLayout(props: P) {
+    return <TypestylesStylesheet>{layout(props)}</TypestylesStylesheet>;
+  };
+}

package/README.md

@@ -1,303 +0,0 @@
-# @typestyles/next
-
-Next.js integration for typestyles with full support for App Router, Pages Router, and React Server Components.
-
-## Installation
-
-```bash
-npm install @typestyles/next typestyles
-# or
-pnpm add @typestyles/next typestyles
-# or
-yarn add @typestyles/next typestyles
-```
-
-## Requirements
-
-- Next.js >= 13.0.0
-- React >= 18.0.0
-- typestyles >= 0.1.0
-
-## Quick Start
-
-### App Router (Recommended)
-
-Import `getRegisteredCss` in your root layout to inject styles during SSR:
-
-```tsx
-// app/layout.tsx
-import { getRegisteredCss } from '@typestyles/next';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const css = getRegisteredCss();
-
-  return (
-    <html lang="en">
-      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-### Pages Router
-
-Wrap your pages with the stylesheet component:
-
-```tsx
-// pages/_app.tsx
-import { TypestylesStylesheet } from '@typestyles/next';
-import type { AppProps } from 'next/app';
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <TypestylesStylesheet>
-      <Component {...pageProps} />
-    </TypestylesStylesheet>
-  );
-}
-```
-
-## React Server Components (RSC)
-
-The package provides multiple approaches for RSC support:
-
-### Option 1: Layout SSR (Simplest)
-
-Import `getRegisteredCss` in your root layout - this works in both Server and Client Components:
-
-```tsx
-// app/layout.tsx
-import { getRegisteredCss } from '@typestyles/next';
-
-export default function RootLayout({ children }) {
-  const css = getRegisteredCss();
-
-  return (
-    <html>
-      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-### Option 2: Client Component Provider
-
-For complex cases with dynamic styles, create a client component wrapper:
-
-```tsx
-// components/TypestylesProvider.tsx
-'use client';
-
-import { getRegisteredCss } from 'typestyles/server';
-import { useEffect, useState } from 'react';
-
-export function TypestylesProvider({ children }) {
-  const [css, setCss] = useState('');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    setCss(getRegisteredCss());
-  }, []);
-
-  return (
-    <>
-      {children}
-      {mounted && css && <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />}
-    </>
-  );
-}
-```
-
-Then use it in your layout:
-
-```tsx
-// app/layout.tsx
-import { TypestylesProvider } from '@/components/TypestylesProvider';
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <TypestylesProvider>{children}</TypestylesProvider>
-      </body>
-    </html>
-  );
-}
-```
-
-### Option 3: Metadata API
-
-For static generation, you can collect styles in `generateMetadata`:
-
-```tsx
-// app/layout.tsx
-import { generateMetadata } from 'next';
-import { getTypestylesMetadata } from '@typestyles/next/server';
-import { Home } from './Home';
-
-export async function generateMetadata() {
-  const css = await getTypestylesMetadata(<Home />);
-  return {
-    styles: [{ cssText: css, id: 'typestyles' }],
-  };
-}
-```
-
-## API Reference
-
-### getRegisteredCss
-
-Returns all currently registered CSS as a string. This is the simplest way to get styles for SSR.
-
-```tsx
-import { getRegisteredCss } from '@typestyles/next';
-
-const css = getRegisteredCss();
-```
-
-### collectStylesFromComponent
-
-Collect styles from a React component tree. Useful when you need explicit control over style collection.
-
-```tsx
-import { collectStylesFromComponent } from '@typestyles/next/server';
-import { YourComponent } from './YourComponent';
-
-const css = await collectStylesFromComponent(<YourComponent />);
-```
-
-### getTypestylesMetadata
-
-Generate CSS for use in Next.js metadata API. Collects styles by rendering the component server-side.
-
-```tsx
-import { getTypestylesMetadata } from '@typestyles/next/server';
-import { Home } from './Home';
-
-const css = await getTypestylesMetadata(<Home />);
-```
-
-### TypestylesStylesheet (Pages Router)
-
-A React component that renders typestyles CSS. Works with Pages Router.
-
-```tsx
-import { TypestylesStylesheet } from '@typestyles/next';
-
-<TypestylesStylesheet>
-  <YourApp />
-</TypestylesStylesheet>;
-```
-
-## Examples
-
-### Basic Usage with App Router
-
-```tsx
-// app/page.tsx
-import { styles } from 'typestyles';
-
-const button = styles.create('button', {
-  base: {
-    padding: '12px 24px',
-    backgroundColor: '#0066ff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    cursor: 'pointer',
-  },
-});
-
-export default function Home() {
-  return (
-    <main>
-      <button className={button('base')}>Click me</button>
-    </main>
-  );
-}
-```
-
-### With Design Tokens
-
-```tsx
-// app/tokens.ts
-import { tokens } from 'typestyles';
-
-export const colors = tokens.create('color', {
-  primary: '#0066ff',
-  secondary: '#64748b',
-});
-
-export const spacing = tokens.create('space', {
-  sm: '8px',
-  md: '16px',
-  lg: '24px',
-});
-
-// app/page.tsx
-import { styles } from 'typestyles';
-import { colors, spacing } from './tokens';
-
-const card = styles.create('card', {
-  base: {
-    padding: spacing.md,
-    backgroundColor: colors.primary,
-    borderRadius: '8px',
-  },
-});
-
-export default function Page() {
-  return <div className={card('base')}>Hello World</div>;
-}
-```
-
-### With Dark Mode
-
-```tsx
-// app/layout.tsx
-import { tokens } from 'typestyles';
-import { getRegisteredCss } from '@typestyles/next';
-
-const darkTheme = tokens.createTheme('dark', {
-  color: {
-    background: '#1a1a1a',
-    text: '#ffffff',
-  },
-});
-
-export default function RootLayout({ children }) {
-  const css = getRegisteredCss();
-
-  return (
-    <html className={darkTheme}>
-      <head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-## Troubleshooting
-
-### Flash of Unstyled Content (FOUC)
-
-If you see a flash of unstyled content, ensure `getRegisteredCss()` is called in the layout and styles are injected before the body renders.
-
-### Styles not appearing
-
-Make sure `typestyles` is installed in your project:
-
-```bash
-npm install typestyles
-```
-
-### TypeScript errors
-
-Ensure you have `"moduleResolution": "bundler"` or `"node"` in your `tsconfig.json`.
-
-## License
-
-MIT

package/dist/client.cjs

@@ -1,72 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/client.tsx
-var client_exports = {};
-__export(client_exports, {
-  TypestylesStylesheet: () => TypestylesStylesheet,
-  createTypestylesLayout: () => createTypestylesLayout,
-  useServerInsertedHTML: () => import_react.useServerInsertedHTML,
-  useTypestyles: () => useTypestyles
-});
-module.exports = __toCommonJS(client_exports);
-var import_react = require("react");
-var import_server = require("typestyles/server");
-var import_jsx_runtime = require("react/jsx-runtime");
-function useTypestyles() {
-  return (0, import_react.useSyncExternalStore)(
-    () => () => {
-    },
-    () => (0, import_server.getRegisteredCss)(),
-    () => ""
-  );
-}
-function TypestylesStylesheet({ children }) {
-  const [css, setCss] = (0, import_react.useState)("");
-  (0, import_react.useServerInsertedHTML)(() => {
-    const registeredCss = (0, import_server.getRegisteredCss)();
-    if (registeredCss) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
-    }
-    return null;
-  });
-  (0, import_react.useEffect)(() => {
-    setCss((0, import_server.getRegisteredCss)());
-  }, []);
-  if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
-    ] });
-  }
-  return null;
-}
-function createTypestylesLayout(layout) {
-  return function TypestylesLayout(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypestylesStylesheet, { children: layout(props) });
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TypestylesStylesheet,
-  createTypestylesLayout,
-  useServerInsertedHTML,
-  useTypestyles
-});

package/dist/client.js

@@ -1,45 +0,0 @@
-"use client";
-
-// src/client.tsx
-import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
-import { getRegisteredCss } from "typestyles/server";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function useTypestyles() {
-  return useSyncExternalStore(
-    () => () => {
-    },
-    () => getRegisteredCss(),
-    () => ""
-  );
-}
-function TypestylesStylesheet({ children }) {
-  const [css, setCss] = useState("");
-  useServerInsertedHTML(() => {
-    const registeredCss = getRegisteredCss();
-    if (registeredCss) {
-      return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
-    }
-    return null;
-  });
-  useEffect(() => {
-    setCss(getRegisteredCss());
-  }, []);
-  if (children) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      children,
-      /* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
-    ] });
-  }
-  return null;
-}
-function createTypestylesLayout(layout) {
-  return function TypestylesLayout(props) {
-    return /* @__PURE__ */ jsx(TypestylesStylesheet, { children: layout(props) });
-  };
-}
-export {
-  TypestylesStylesheet,
-  createTypestylesLayout,
-  useServerInsertedHTML,
-  useTypestyles
-};

package/dist/server.cjs

@@ -1,52 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/server.ts
-var server_exports = {};
-__export(server_exports, {
-  collectStylesFromComponent: () => collectStylesFromComponent,
-  getRegisteredCss: () => import_server.getRegisteredCss,
-  getTypestylesMetadata: () => getTypestylesMetadata
-});
-module.exports = __toCommonJS(server_exports);
-var import_server = require("typestyles/server");
-async function collectStylesFromComponent(component) {
-  const { renderToString } = await import("react-dom/server");
-  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
-  return css;
-}
-async function getTypestylesMetadata(component) {
-  return collectStylesFromComponent(component);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  collectStylesFromComponent,
-  getRegisteredCss,
-  getTypestylesMetadata
-});

package/dist/server.js

@@ -1,15 +0,0 @@
-// src/server.ts
-import { collectStyles, getRegisteredCss } from "typestyles/server";
-async function collectStylesFromComponent(component) {
-  const { renderToString } = await import("react-dom/server");
-  const { css } = collectStyles(() => renderToString(component));
-  return css;
-}
-async function getTypestylesMetadata(component) {
-  return collectStylesFromComponent(component);
-}
-export {
-  collectStylesFromComponent,
-  getRegisteredCss,
-  getTypestylesMetadata
-};

package/src/client.d.ts

@@ -1,34 +0,0 @@
-import type * as React from 'react';
-import type { useSyncExternalStore, useServerInsertedHTML } from 'react';
-
-/**
- * Subscribe to typestyles CSS changes. Use this in client components
- * that need to stay up-to-date with dynamically registered styles.
- */
-export function useTypestyles(): ReturnType<typeof useSyncExternalStore<string>>;
-
-/**
- * Collect styles during server rendering for App Router.
- */
-export { useServerInsertedHTML };
-
-/**
- * Props for the TypestylesStylesheet component.
- */
-export interface TypestylesStylesheetProps {
-  children?: React.ReactNode;
-}
-
-/**
- * A React component that renders typestyles CSS.
- */
-export function TypestylesStylesheet(
-  props: TypestylesStylesheetProps,
-): React.JSX.Element | null;
-
-/**
- * Create a Next.js layout export that includes typestyles.
- */
-export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
-  layout: (props: P) => React.ReactNode,
-): (props: P) => React.JSX.Element;

package/src/client.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from 'react';
-import { getRegisteredCss } from 'typestyles/server';
-
-/**
- * Subscribe to typestyles CSS changes. Use this in client components
- * that need to stay up-to-date with dynamically registered styles.
- *
- * @example
- * ```tsx
- * // components/Styles.tsx
- * 'use client';
- * import { useTypestyles } from '@typestyles/next/client';
- *
- * export function Styles() {
- *   useTypestyles();
- *   return null;
- * }
- * ```
- */
-export function useTypestyles() {
-  return useSyncExternalStore(
-    () => () => {},
-    () => getRegisteredCss(),
-    () => '',
-  );
-}
-
-/**
- * Collect styles during server rendering for App Router.
- * Use this in a Client Component wrapper that collects styles from its children.
- *
- * @example
- * ```tsx
- * // components/TypestylesProvider.tsx
- * 'use client';
- *
- * import { useServerInsertedHTML, getRegisteredCss } from '@typestyles/next/client';
- *
- * export function TypestylesProvider({ children }: { children: React.ReactNode }) {
- *   useServerInsertedHTML(() => {
- *     return (
- *       <style
- *         id="typestyles"
- *         dangerouslySetInnerHTML={{ __html: getRegisteredCss() }}
- *       />
- *     );
- *   });
- *   return <>{children}</>;
- * }
- * ```
- */
-export { useServerInsertedHTML };
-
-/**
- * Props for the TypestylesStylesheet component.
- */
-export interface TypestylesStylesheetProps {
-  /**
-   * The children to render (styles will be collected from these).
-   * If not provided, only the existing registered CSS will be included.
-   */
-  children?: React.ReactNode;
-}
-
-/**
- * A React component that renders typestyles CSS.
- *
- * For App Router: Use this in your root layout to collect and render styles.
- * Works with both Client Components and React Server Components.
- *
- * @example
- * ```tsx
- * // app/layout.tsx
- * import { TypestylesStylesheet } from '@typestyles/next/client';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <head>
- *         <TypestylesStylesheet />
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * }
- * ```
- */
-export function TypestylesStylesheet({ children }: TypestylesStylesheetProps) {
-  const [css, setCss] = useState('');
-
-  useServerInsertedHTML(() => {
-    const registeredCss = getRegisteredCss();
-    if (registeredCss) {
-      return <style id="typestyles" dangerouslySetInnerHTML={{ __html: registeredCss }} />;
-    }
-    return null;
-  });
-
-  useEffect(() => {
-    setCss(getRegisteredCss());
-  }, []);
-
-  if (children) {
-    return (
-      <>
-        {children}
-        <style id="typestyles-client" dangerouslySetInnerHTML={{ __html: css }} />
-      </>
-    );
-  }
-
-  return null;
-}
-
-/**
- * Create a Next.js layout export that includes typestyles.
- *
- * @example
- * ```tsx
- * // app/layout.tsx
- * import { createTypestylesLayout } from '@typestyles/next/client';
- *
- * export default createTypestylesLayout(function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <head>
- *         <title>My App</title>
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * });
- * ```
- */
-export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
-  layout: (props: P) => React.ReactNode,
-): (props: P) => React.ReactNode {
-  return function TypestylesLayout(props: P) {
-    return <TypestylesStylesheet>{layout(props)}</TypestylesStylesheet>;
-  };
-}

package/src/server.ts

@@ -1,54 +0,0 @@
-/**
- * Server-safe utilities for Next.js integration.
- * These functions can be used in Server Components without adding "use client".
- */
-import { collectStyles, getRegisteredCss } from 'typestyles/server';
-
-export { getRegisteredCss };
-
-/**
- * Collect styles from a React component and return them as a string.
- * Useful for server components or when you need more control.
- *
- * @example
- * ```tsx
- * // app/styles.ts
- * import { collectStylesFromComponent } from '@typestyles/next/server';
- * import { YourApp } from './YourApp';
- *
- * export async function getStyles() {
- *   return collectStylesFromComponent(<YourApp />);
- * }
- * ```
- */
-export async function collectStylesFromComponent(component: React.ReactElement): Promise<string> {
-  const { renderToString } = await import('react-dom/server');
-  const { css } = collectStyles(() => renderToString(component));
-  return css;
-}
-
-/**
- * Generate CSS for use in Next.js metadata API.
- * Call this in your layout or page to get CSS for the head.
- *
- * Note: This only captures CSS registered during the synchronous render.
- * For dynamic styles that may be registered client-side, use TypestylesStylesheet.
- *
- * @example
- * ```tsx
- * // app/layout.tsx
- * import { generateMetadata } from 'next/metadata';
- * import { getTypestylesMetadata } from '@typestyles/next/server';
- * import { Home } from './Home';
- *
- * export async function generateMetadata() {
- *   const css = await getTypestylesMetadata(<Home />);
- *   return {
- *     styles: [{ cssText: css }],
- *   };
- * }
- * ```
- */
-export async function getTypestylesMetadata(component: React.ReactElement): Promise<string> {
-  return collectStylesFromComponent(component);
-}