merge main into feat/modal-auto-width

Author: RezoR0xFF

docs/guide/layout.md

@@ -167,7 +167,7 @@ ui.row({ gap: 1 }, [
 
 Rezi clips rendering to each widget’s allocated rect. Overflow is handled per-widget:
 
-- `ui.text` supports `textOverflow: "clip" | "ellipsis"` (and `maxWidth`)
+- `ui.text` supports `textOverflow: "clip" | "ellipsis" | "middle"` (and `maxWidth`)
 - Containers clip their children to the padded/bordered content area
 
 Example: ellipsis truncation

docs/recipes/data-table.md

@@ -89,7 +89,7 @@ await app.start();
 ## Explanation
 
 - Filter state is kept in `state.filter` and applied before passing data to the table.
-- Sorting is handled by the table (it emits `onSort(column, direction)` and you store that in state).
+- Sorting is handled by the table (click a sortable header, or focus the header and press Enter; it emits `onSort(column, direction)` and you store that in state).
 - Selection is stored as row keys and updated via `onSelectionChange`.
 
 ## Related

docs/widgets/layer.md

@@ -34,6 +34,7 @@ ui.layer({
 
 - Use [`Layers`](layers.md) to manage stacking order and modals.
 - `BackdropStyle` values: `"none"`, `"dim"`, `"opaque"`.
+- Backdrops are rendered behind the layer. `"dim"` uses a light shade pattern; `"opaque"` clears the area behind the layer to the theme background color.
 
 ## Related
 

docs/widgets/layers.md

@@ -17,6 +17,7 @@ ui.layers([
 - Child order defines z-order: later children render on top.
 - Use [`Layer`](layer.md) for explicit z-index or custom backdrops.
 - Layers enable deterministic hit testing and focus management across overlaps.
+- Backdrops (from [`Modal`](modal.md) and [`Layer`](layer.md)) render behind the active overlay(s) and stack in draw order.
 
 ## Related
 

docs/widgets/modal.md

@@ -68,6 +68,7 @@ ui.modal({
 - Modals are rendered by conditionally including them in the tree (there is no `open` prop).
 - Render modals inside `ui.layers(...)` so they stack above base content.
 - `width: "auto"` sizes to content/actions and is clamped by `maxWidth` and the viewport.
+- Backdrops are rendered behind the modal. `"dim"` uses a light shade pattern; `"opaque"` clears the area behind the modal to the theme background color.
 
 ## Related
 

docs/widgets/panel-group.md

@@ -9,7 +9,6 @@ ui.panelGroup(
   {
     id: "panel-group",
     direction: "horizontal",
-    autoSaveId: "main-layout",
   },
   [
     ui.resizablePanel({ defaultSize: 25 }, [Sidebar()]),
@@ -24,12 +23,11 @@ ui.panelGroup(
 |------|------|---------|-------------|
 | `id` | `string` | **required** | Group identifier |
 | `direction` | `"horizontal" \| "vertical"` | **required** | Layout direction |
-| `autoSaveId` | `string` | - | App-level key for persisting layout (core does not persist) |
 
 ## Notes
 
-- `PanelGroup` distributes space evenly when sizes are not provided.
-- `ResizablePanel` size hints are preserved but not applied by core layout.
+- `PanelGroup` distributes space based on `ResizablePanel` size hints (with equal distribution when unspecified).
+- `ResizablePanel` size hints are interpreted as percentages of the group's width/height (based on `direction`).
 - Use [`SplitPane`](split-pane.md) for draggable resizing.
 
 ## Related

docs/widgets/resizable-panel.md

@@ -18,13 +18,13 @@ ui.panelGroup(
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `defaultSize` | `number` | auto | Initial size (percent or cells, based on parent) |
-| `minSize` | `number` | - | Minimum size |
-| `maxSize` | `number` | - | Maximum size |
+| `defaultSize` | `number` | auto | Initial size (percentage of the parent axis) |
+| `minSize` | `number` | - | Minimum size (percentage) |
+| `maxSize` | `number` | - | Maximum size (percentage) |
 | `collapsible` | `boolean` | `false` | Allow collapsing the panel |
 
 ## Notes
 
 - `ResizablePanel` should contain exactly one child widget.
-- `PanelGroup` distributes space evenly; size hints on `ResizablePanel` are preserved as metadata but not applied by core layout.
+- `PanelGroup` uses `defaultSize`/`minSize`/`maxSize` as sizing hints along its primary axis.
 - For draggable sizing, use [`SplitPane`](split-pane.md).

docs/widgets/table.md

@@ -34,6 +34,7 @@ ui.table({
 | `sortDirection` | `"asc" \| "desc"` | - | Current sort direction |
 | `onSort` | `(column: string, direction: "asc" \| "desc") => void` | - | Called when sort changes |
 | `onRowPress` | `(row: T, index: number) => void` | - | Row activation callback |
+| `onRowDoublePress` | `(row: T, index: number) => void` | - | Row double-activation callback (double-click) |
 | `virtualized` | `boolean` | `true` | Enable windowed rendering for large datasets |
 | `overscan` | `number` | `3` | Extra rows rendered outside viewport |
 | `showHeader` | `boolean` | `true` | Show/hide header row |
@@ -63,6 +64,9 @@ ui.table({
 
 - **Arrow keys** navigate rows. **Enter** activates the selected row.
 - **Mouse click** on a row selects it and moves focus to the table.
+- **Mouse click** on a sortable header toggles sort and fires `onSort(column, direction)`.
+- When focused: **Up** from the first row focuses the header. **Left/Right** moves between columns. **Enter** toggles sort on the focused header.
+- **Double click** on a row fires `onRowDoublePress` (when provided).
 - **Mouse scroll wheel** scrolls rows when the table is virtualized.
 
 ## Notes

docs/widgets/text.md

@@ -22,7 +22,7 @@ ui.text("Caption", { variant: "caption", textOverflow: "ellipsis" }); // pass Te
 | `key` | `string` | - | Reconciliation key for lists |
 | `style` | `TextStyle` | - | Style applied to this text |
 | `variant` | `"body" \| "heading" \| "caption" \| "code" \| "label"` | `"body"` | Predefined styling intent |
-| `textOverflow` | `"clip" \| "ellipsis"` | `"clip"` | How to handle overflow |
+| `textOverflow` | `"clip" \| "ellipsis" \| "middle"` | `"clip"` | How to handle overflow |
 | `maxWidth` | `number` | - | Maximum width (cells) for overflow handling |
 
 ## Examples
@@ -48,10 +48,22 @@ ui.box({ width: 20, border: "single", p: 1 }, [
 ]);
 ```
 
+### 3) Middle truncation
+
+```typescript
+import { ui } from "@rezi-ui/core";
+
+ui.box({ width: 24, border: "single", p: 1 }, [
+  ui.text("/home/user/documents/project/src/index.ts", { textOverflow: "middle" }),
+]);
+```
+
 ## Notes
 
 - Text is not focusable and does not emit events.
 - Measurement and truncation are cell-based and deterministic.
+- `maxWidth` caps both measurement (layout) and truncation width.
+- `variant` applies a small default style (heading/label: bold, caption: dim, code: inverse) which can be overridden via `style`.
 
 ## Related
 

packages/core/src/app/__tests__/helpers.ts

@@ -31,7 +31,8 @@ type EncodedEvent =
       wheelX?: number;
       wheelY?: number;
     }>
-  | Readonly<{ kind: "resize"; timeMs: number; cols: number; rows: number }>;
+  | Readonly<{ kind: "resize"; timeMs: number; cols: number; rows: number }>
+  | Readonly<{ kind: "tick"; timeMs: number; dtMs?: number }>;
 
 export function encodeZrevBatchV1(
   opts: Readonly<{ flags?: number; events?: readonly EncodedEvent[] }>,
@@ -102,6 +103,19 @@ export function encodeZrevBatchV1(
       continue;
     }
 
+    if (ev.kind === "tick") {
+      dv.setUint32(off + 0, 6, true);
+      dv.setUint32(off + 4, 32, true);
+      dv.setUint32(off + 8, ev.timeMs, true);
+      dv.setUint32(off + 12, 0, true);
+      dv.setUint32(off + 16, ev.dtMs ?? 0, true);
+      dv.setUint32(off + 20, 0, true);
+      dv.setUint32(off + 24, 0, true);
+      dv.setUint32(off + 28, 0, true);
+      off += 32;
+      continue;
+    }
+
     dv.setUint32(off + 0, 5, true);
     dv.setUint32(off + 4, 32, true);
     dv.setUint32(off + 8, ev.timeMs, true);