docs: create CLAUDE.md files (#8227)

- root md file: For developers working on this repo.
- packages md files: For consumers - bundled in.

_In this PR the `files` field in the package.json of the packages is
also cleanup up. `LICENSE` is added by lerna, the reference there was
pointing to a non existing file._

Author: Lukas742

CLAUDE.md

@@ -51,7 +51,7 @@ export default function AppOrRootLayout() {
 #### Icon and Feature Imports in Server Components
 
 Some UI5 Web Component features rely on the registration of a component during runtime on the client.
-The most common of these are icon imports (e.g. `import '@ui5/webcomponents-icons/dist/add.js';`), feature imports (e.g. `import '@ui5/webcomponents/dist/features/FormSupport.js';` and asset imports (e.g. `import '@ui5/webcomponents-react/dist/Assets.js';`).
+The most common of these are icon imports (e.g. `import '@ui5/webcomponents-icons/dist/add.js';`) and asset imports (e.g. `import '@ui5/webcomponents-react/dist/Assets.js';`).
 
 In order to fulfill their purpose in your application, you must ensure that these imports are only used in client components (the file or a parent component must contain the `'use client';` directive).
 If they are imported into server components, these imports will do nothing and you'll notice that some features or icons are not available in your application.

docs/knowledge-base/ServerSideRendering.mdx

@@ -0,0 +1,45 @@
+# @ui5/webcomponents-ai-react
+
+React wrappers for `@ui5/webcomponents-ai` - AI-focused UI5 Web Components.
+
+> **Experimental:** This package is under active development. APIs may change.
+>
+> **Horizon themes only** - not compatible with other SAP themes.
+
+## Documentation
+
+For component APIs, props, and usage examples, see the official UI5 Web Components AI documentation:
+
+**https://sap.github.io/ui5-webcomponents/components/ai/**
+
+## Installation
+
+```bash
+npm install @ui5/webcomponents-ai-react @ui5/webcomponents-ai
+```
+
+## Available Components
+
+| Component     | Description                        |
+| ------------- | ---------------------------------- |
+| `Button`      | Multi-state AI action button       |
+| `ButtonState` | State definition for Button        |
+| `PromptInput` | Input for AI prompts               |
+| `Input`       | Input with AI Writing Assistant    |
+| `TextArea`    | TextArea with AI Writing Assistant |
+
+## Import Pattern
+
+```tsx
+import { Button } from '@ui5/webcomponents-ai-react/Button';
+import { ButtonState } from '@ui5/webcomponents-ai-react/ButtonState';
+import { PromptInput } from '@ui5/webcomponents-ai-react/PromptInput';
+import { Input } from '@ui5/webcomponents-ai-react/Input';
+import { TextArea } from '@ui5/webcomponents-ai-react/TextArea';
+```
+
+## Event Handling
+
+Event data is in `e.detail`. For fully controlled components, call `e.preventDefault()` in `onInput` to prevent internal state updates.
+
+**Cancelable events:** `Input.onInput`, `Input.onButtonClick`, `TextArea.onInput`

packages/ai/CLAUDE.md

@@ -62,6 +62,6 @@
   "files": [
     "dist",
     "CHANGELOG.md",
-    "NOTICE.txt"
+    "CLAUDE.md"
   ]
 }

packages/ai/package.json

@@ -0,0 +1,124 @@
+# @ui5/webcomponents-react-base
+
+Core utilities, hooks, and infrastructure for UI5 Web Components React wrappers. This package is primarily used internally by `@ui5/webcomponents-react` but exports useful hooks and utilities for consumers.
+
+## Import Pattern
+
+Subpath imports are recommended for clarity:
+
+```tsx
+// ✅ Recommended - subpath imports
+import { useI18nBundle, useViewportRange } from '@ui5/webcomponents-react-base/hooks';
+import * as Device from '@ui5/webcomponents-react-base/Device';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
+
+// Also works - root import
+import { useI18nBundle, useViewportRange } from '@ui5/webcomponents-react-base';
+```
+
+## Public API
+
+### Hooks (`@ui5/webcomponents-react-base/hooks`)
+
+#### `useI18nBundle(bundleName: string)`
+
+Access internationalization bundles for translated text.
+
+```tsx
+import { useI18nBundle } from '@ui5/webcomponents-react-base/hooks';
+
+function MyComponent() {
+  const i18n = useI18nBundle('@ui5/webcomponents-react');
+  const label = i18n.getText('BUTTON_LABEL');
+  // With placeholders: i18n.getText('ITEMS_SELECTED', 5, 20) -> "5 of 20 items selected"
+
+  return <span>{label}</span>;
+}
+```
+
+#### `useViewportRange()`
+
+Get current viewport size range for responsive layouts.
+
+```tsx
+import { useViewportRange } from '@ui5/webcomponents-react-base/hooks';
+
+function ResponsiveComponent() {
+  const range = useViewportRange();
+  // Returns: 'Phone' | 'Tablet' | 'Desktop' | 'LargeDesktop'
+
+  return range === 'Phone' ? <MobileView /> : <DesktopView />;
+}
+```
+
+### Device Utilities (`@ui5/webcomponents-react-base/Device`)
+
+Re-exports from `@ui5/webcomponents-base/dist/Device.js` plus additional resize/orientation handlers.
+
+```tsx
+import * as Device from '@ui5/webcomponents-react-base/Device';
+
+// From @ui5/webcomponents-base - check capabilities
+Device.supportsTouch();
+
+// Resize handling
+Device.attachResizeHandler((windowSize) => {
+  console.log(windowSize.width, windowSize.height);
+});
+Device.detachResizeHandler(handler);
+
+// Orientation handling
+Device.getOrientation(); // { landscape: boolean, portrait: boolean }
+Device.attachOrientationChangeHandler((orientation) => {
+  console.log(orientation.landscape, orientation.portrait);
+});
+Device.detachOrientationChangeHandler(handler);
+
+// Media range queries
+Device.getCurrentRange(); // Current viewport range
+Device.attachMediaHandler(handler);
+Device.detachMediaHandler(handler);
+```
+
+### ThemingParameters (`@ui5/webcomponents-react-base/ThemingParameters`)
+
+TypeScript-friendly mappings for SAP theming CSS variables. Useful for **inline styles** or **CSS-in-JS** solutions.
+
+```tsx
+import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
+
+// CSS-in-JS / inline styles
+const style = {
+  backgroundColor: ThemingParameters.sapBackgroundColor, // 'var(--sapBackgroundColor)'
+  color: ThemingParameters.sapTextColor, // 'var(--sapTextColor)'
+  borderRadius: ThemingParameters.sapElement_BorderCornerRadius,
+  fontFamily: ThemingParameters.sapFontFamily,
+};
+
+// Semantic colors
+ThemingParameters.sapPositiveColor; // success/positive
+ThemingParameters.sapNegativeColor; // error/negative
+ThemingParameters.sapCriticalColor; // warning
+ThemingParameters.sapInformativeColor; // info
+```
+
+**For standard CSS files**, use the CSS variables directly (e.g., `var(--sapBackgroundColor)`).
+
+See the full list of available CSS variables: https://experience.sap.com/fiori-design-web/theming-base-content/
+
+### Types (`@ui5/webcomponents-react-base/types`)
+
+```tsx
+import type { UI5WCSlotsNode } from '@ui5/webcomponents-react-base/types';
+
+// UI5WCSlotsNode - Type for slot content (ReactNode | ReactNode[])
+```
+
+## Internal APIs
+
+The following exports exist for sharing between packages of this library. **They are not intended for consumer use** and may change without notice:
+
+- `./internal/hooks` - Internal hooks (`useSyncRef`, `useStylesheet`, `useIsRTL`, `useCurrentTheme`, `useIsomorphicLayoutEffect`)
+- `./internal/utils` - Internal utilities (`debounce`, `throttle`, `enrichEventWithDetails`)
+- `./internal/types` - Internal types (`CommonProps`, `Ui5CustomEvent`, `Ui5DomRef`)
+- `./withWebComponent` - HOC for wrapping web components

packages/base/CLAUDE.md

@@ -105,8 +105,7 @@
   "files": [
     "dist",
     "CHANGELOG.md",
-    "LICENSE",
-    "NOTICE.txt",
+    "CLAUDE.md",
     "README.md"
   ]
 }