@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/resizable/README.md

@@ -1,11 +1,275 @@
-# Resizable
+# Resizable (`@egose/shadcn-theme-ng/resizable`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A shadcn/ui-style **Resizable** panel layout — draggable split views (side-by-side or stacked) with collapsible panels. This is the Angular equivalent of shadcn/ui `ResizablePanelGroup` / `ResizablePanel` / `ResizableHandle`.
 
-## Building
+The behavior comes from **spartan-ng/brain** (`BrnResizableGroup`, `BrnResizablePanel`, `BrnResizableHandle`): pointer-drag resizing, panel size constraints, and layout events. This package is a thin styling/directive layer — a flex group container, constraint-forwarding panel directive with a `setSize` helper, and a handle with an optional grip pill.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/resizable` and `@egose/shadcn-theme-ng-tw/resizable` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng build resizable
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+```ts
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+// tw variant:
+// import { HlmResizableImports } from '@egose/shadcn-theme-ng-tw/resizable';
+```
+
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`, `@spartan-ng/brain`.
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol                | Kind          | Description                                                                           |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------- |
+| `HlmResizableGroup`   | Directive     | Flex row/column container; forwards `BrnResizableGroup`                               |
+| `HlmResizablePanel`   | Directive     | Size-constrained panel; forwards `BrnResizablePanel`, `exportAs: 'hlmResizablePanel'` |
+| `HlmResizableHandle`  | Component     | Drag handle with optional grip pill; `exportAs: 'hlmResizableHandle'`                 |
+| `HlmResizableImports` | `const` array | `[HlmResizableGroup, HlmResizablePanel, HlmResizableHandle]` standalone imports       |
+| `HlmResizableModule`  | `NgModule`    | NgModule wrapper re-exporting the three above                                         |
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [HlmResizableImports],
+  template: `...`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmResizableModule } from '@egose/shadcn-theme-ng/resizable';
+
+@NgModule({ imports: [HlmResizableModule] })
+export class DemoModule {}
+```
+
+## Anatomy / Structure
+
+```html
+<div hlmResizableGroup direction="horizontal">
+  <div hlmResizablePanel defaultSize="25">Sidebar</div>
+
+  <hlm-resizable-handle withHandle />
+
+  <div hlmResizablePanel defaultSize="75">Main content</div>
+</div>
+```
+
+Real selectors:
+
+| Selector                                     | Class                | Notes                                                                                            |
+| -------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------ |
+| `[hlmResizableGroup]`, `hlm-resizable-group` | `HlmResizableGroup`  | `data-slot="resizable-group"`; row by default, column when the panel-group direction is vertical |
+| `[hlmResizablePanel]`, `hlm-resizable-panel` | `HlmResizablePanel`  | `data-slot="resizable-panel"`                                                                    |
+| `hlm-resizable-handle`                       | `HlmResizableHandle` | `data-slot="resizable-handle"`; renders a grip `<div>` only when `withHandle` is true            |
+
+## API reference
+
+### HlmResizableGroup (directive)
+
+Thin directive wrapper — no own inputs. Forwarded `BrnResizableGroup` bindings:
+
+| Binding        | Kind   | Description                                   |
+| -------------- | ------ | --------------------------------------------- |
+| `direction`    | input  | `'horizontal' \| 'vertical'` layout direction |
+| `layout`       | input  | Controlled panel layout (sizes)               |
+| `dragStart`    | output | Emitted when a drag resize starts             |
+| `dragEnd`      | output | Emitted when a drag resize ends               |
+| `layoutChange` | output | Emitted when the panel layout changes         |
+
+### HlmResizablePanel (directive)
+
+Thin directive wrapper plus one helper method. No own inputs. Forwarded `BrnResizablePanel` inputs:
+
+| Input         | Description                                      |
+| ------------- | ------------------------------------------------ |
+| `defaultSize` | Initial size (percentage of the group)           |
+| `id`          | Panel id (used for persisted/controlled layouts) |
+| `collapsible` | Whether the panel can collapse to zero           |
+| `minSize`     | Minimum size (percentage)                        |
+| `maxSize`     | Maximum size (percentage)                        |
+
+| Method    | Signature                     | Description                                                                 |
+| --------- | ----------------------------- | --------------------------------------------------------------------------- |
+| `setSize` | `setSize(size: number): void` | Programmatically resize the panel; delegates to `BrnResizablePanel.setSize` |
+
+Because the directive is `exportAs: 'hlmResizablePanel'`, grab it with a template reference: `<div hlmResizablePanel #panel="hlmResizablePanel">` then call `panel.setSize(50)`.
+
+### HlmResizableHandle (component)
+
+| Input (forwarded to `BrnResizableHandle`) | Description                          |
+| ----------------------------------------- | ------------------------------------ |
+| `withHandle`                              | Show the grip pill inside the handle |
+| `disabled`                                | Disable dragging on this handle      |
+
+When `withHandle` is true the component renders a short rounded pill (`<div class="...">`) centered in the handle; otherwise the handle is just the thin hover/drag strip. Hover cursors adapt to direction (`ew-resize` horizontal, `ns-resize` vertical).
+
+## Examples
+
+### 1. Basic horizontal split
+
+```ts
+import { Component } from '@angular/core';
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+
+@Component({
+  selector: 'app-basic-resizable',
+  standalone: true,
+  imports: [HlmResizableImports],
+  template: `
+    <div hlmResizableGroup direction="horizontal" class="tw:h-64 tw:rounded-lg tw:border">
+      <div hlmResizablePanel defaultSize="30" class="tw:p-4">Nav</div>
+      <hlm-resizable-handle />
+      <div hlmResizablePanel defaultSize="70" class="tw:p-4">Content</div>
+    </div>
+  `,
+})
+export class BasicResizableComponent {}
+```
+
+### 2. Handle with grip pill
+
+```html
+<div hlmResizableGroup direction="horizontal" class="tw:h-64 tw:rounded-lg tw:border">
+  <div hlmResizablePanel defaultSize="25" class="tw:p-4">Files</div>
+
+  <hlm-resizable-handle withHandle />
+
+  <div hlmResizablePanel defaultSize="75" class="tw:p-4">Editor</div>
+</div>
+```
+
+### 3. Vertical stacking
+
+```ts
+import { Component } from '@angular/core';
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+
+@Component({
+  selector: 'app-vertical-resizable',
+  standalone: true,
+  imports: [HlmResizableImports],
+  template: `
+    <div hlmResizableGroup direction="vertical" class="tw:h-96 tw:rounded-lg tw:border">
+      <div hlmResizablePanel defaultSize="40" class="tw:p-4">Preview</div>
+      <hlm-resizable-handle withHandle />
+      <div hlmResizablePanel defaultSize="60" class="tw:p-4">Console</div>
+    </div>
+  `,
+})
+export class VerticalResizableComponent {}
+```
+
+The group flips to `flex-col` automatically for vertical direction, and the handle renders horizontally with an `ns-resize` cursor.
+
+### 4. Constrained + collapsible panels
+
+```html
+<div hlmResizableGroup direction="horizontal" class="tw:h-64 tw:rounded-lg tw:border">
+  <div hlmResizablePanel defaultSize="20" minSize="10" maxSize="40" collapsible class="tw:p-4">
+    Collapsible sidebar (10–40%)
+  </div>
+  <hlm-resizable-handle withHandle />
+  <div hlmResizablePanel defaultSize="80" minSize="30" class="tw:p-4">Main (≥30%)</div>
+</div>
 ```
+
+### 5. Programmatic control via `setSize`
+
+```ts
+import { Component } from '@angular/core';
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+
+@Component({
+  selector: 'app-controlled-resizable',
+  standalone: true,
+  imports: [HlmResizableImports],
+  template: `
+    <div class="tw:mb-2 tw:flex tw:gap-2">
+      <button type="button" (click)="left.setSize(20)">Sidebar 20%</button>
+      <button type="button" (click)="left.setSize(50)">Split 50/50</button>
+    </div>
+    <div hlmResizableGroup direction="horizontal" class="tw:h-64 tw:rounded-lg tw:border">
+      <div hlmResizablePanel #left="hlmResizablePanel" defaultSize="30" class="tw:p-4">Nav</div>
+      <hlm-resizable-handle withHandle />
+      <div hlmResizablePanel defaultSize="70" class="tw:p-4">Content</div>
+    </div>
+  `,
+})
+export class ControlledResizableComponent {}
+```
+
+### 6. Layout events + three-pane IDE layout
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmResizableImports } from '@egose/shadcn-theme-ng/resizable';
+
+@Component({
+  selector: 'app-ide-resizable',
+  standalone: true,
+  imports: [HlmResizableImports],
+  template: `
+    <div
+      hlmResizableGroup
+      direction="horizontal"
+      class="tw:h-96 tw:rounded-lg tw:border"
+      (dragStart)="dragging.set(true)"
+      (dragEnd)="dragging.set(false)"
+      (layoutChange)="onLayout($event)"
+    >
+      <div hlmResizablePanel defaultSize="20" minSize="12" collapsible class="tw:p-4">Explorer</div>
+      <hlm-resizable-handle withHandle />
+      <div hlmResizablePanel defaultSize="55" minSize="30" class="tw:p-4">Editor</div>
+      <hlm-resizable-handle />
+      <div hlmResizablePanel defaultSize="25" minSize="15" collapsible class="tw:p-4">Outline</div>
+    </div>
+    @if (dragging()) {
+      <p class="tw:text-muted-foreground tw:text-sm">Resizing…</p>
+    }
+  `,
+})
+export class IdeResizableComponent {
+  readonly dragging = signal(false);
+
+  onLayout(layout: unknown): void {
+    console.log('panel layout:', layout);
+  }
+}
+```
+
+## Accessibility notes
+
+- The drag handle is keyboard-focusable via the underlying `BrnResizableHandle` — ensure handles remain in the tab order (do not set `tabindex="-1"` on them).
+- A handle without `withHandle` is only a 1px strip visually; prefer `withHandle` when pointer users need a bigger grab target, and keep `disabled` handles out of confusing layouts (they still occupy space).
+- Give each region a landmark or label (`role="region"` + `aria-label`, or headings) so screen-reader users understand the pane structure, since drag-to-resize itself is pointer/keyboard driven on the handle.
+
+## Theming / CSS variables
+
+Class-driven only (flex direction, borders, cursors). Size the group with your own height/width utilities — panels size themselves as percentages of it.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/card` — paneled content inside resizable regions
+- `@egose/shadcn-theme-ng/scroll-area` — scrollable overflow inside fixed-size panels
+- `@egose/shadcn-theme-ng/sidebar` — app-level collapsible navigation (alternative to a resizable nav pane)
+- `@egose/shadcn-theme-ng/separator` — static visual dividers where resizing is not needed

package/resizable/fesm2022/resizable.mjs

@@ -6,12 +6,12 @@ import { classes } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmResizableGroup {
     constructor() {
-        classes(() => 'group flex h-full w-full data-[panel-group-direction=vertical]:flex-col');
+        classes(() => 'tw:group tw:flex tw:h-full tw:w-full tw:data-[panel-group-direction=vertical]:flex-col');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmResizableGroup, isStandalone: true, selector: "[hlmResizableGroup],hlm-resizable-group", host: { attributes: { "data-slot": "resizable-group" } }, hostDirectives: [{ directive: i1.BrnResizableGroup, inputs: ["direction", "direction", "layout", "layout"], outputs: ["dragEnd", "dragEnd", "dragStart", "dragStart", "layoutChange", "layoutChange"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmResizableGroup, isStandalone: true, selector: "[hlmResizableGroup],hlm-resizable-group", host: { attributes: { "data-slot": "resizable-group" } }, hostDirectives: [{ directive: i1.BrnResizableGroup, inputs: ["direction", "direction", "layout", "layout"], outputs: ["dragEnd", "dragEnd", "dragStart", "dragStart", "layoutChange", "layoutChange"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmResizableGroup],hlm-resizable-group',
@@ -32,18 +32,18 @@ class HlmResizableHandle {
     _brnResizableHandle = inject(BrnResizableHandle);
     constructor() {
         classes(() => [
-            'bg-border ring-offset-background focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
-            'data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:hover:cursor-ns-resize',
+            'tw:bg-border tw:ring-offset-background tw:focus-visible:ring-ring tw:relative tw:flex tw:w-px tw:items-center tw:justify-center tw:after:absolute tw:after:inset-y-0 tw:after:left-1/2 tw:after:w-1 tw:after:-translate-x-1/2 tw:focus-visible:ring-1 tw:focus-visible:outline-hidden tw:data-[panel-group-direction=vertical]:h-px tw:data-[panel-group-direction=vertical]:w-full tw:data-[panel-group-direction=vertical]:after:left-0 tw:data-[panel-group-direction=vertical]:after:h-1 tw:data-[panel-group-direction=vertical]:after:w-full tw:data-[panel-group-direction=vertical]:after:translate-x-0 tw:data-[panel-group-direction=vertical]:after:-translate-y-1/2 tw:[&[data-panel-group-direction=vertical]>div]:rotate-90',
+            'tw:data-[panel-group-direction=horizontal]:hover:cursor-ew-resize tw:data-[panel-group-direction=vertical]:hover:cursor-ns-resize',
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableHandle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmResizableHandle, isStandalone: true, selector: "hlm-resizable-handle", host: { attributes: { "data-slot": "resizable-handle" } }, exportAs: ["hlmResizableHandle"], hostDirectives: [{ directive: i1.BrnResizableHandle, inputs: ["withHandle", "withHandle", "disabled", "disabled"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableHandle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmResizableHandle, isStandalone: true, selector: "hlm-resizable-handle", host: { attributes: { "data-slot": "resizable-handle" } }, exportAs: ["hlmResizableHandle"], hostDirectives: [{ directive: i1.BrnResizableHandle, inputs: ["withHandle", "withHandle", "disabled", "disabled"] }], ngImport: i0, template: `
     @if (_brnResizableHandle.withHandle()) {
-      <div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
+      <div class="tw:bg-border tw:h-6 tw:w-1 tw:rounded-lg tw:z-10 tw:flex tw:shrink-0"></div>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableHandle, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-resizable-handle',
@@ -55,7 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     },
                     template: `
     @if (_brnResizableHandle.withHandle()) {
-      <div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
+      <div class="tw:bg-border tw:h-6 tw:w-1 tw:rounded-lg tw:z-10 tw:flex tw:shrink-0"></div>
     }
   `,
                 }]
@@ -66,10 +66,10 @@ class HlmResizablePanel {
     setSize(size) {
         this._resizablePanel.setSize(size);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizablePanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmResizablePanel, isStandalone: true, selector: "[hlmResizablePanel],hlm-resizable-panel", host: { attributes: { "data-slot": "resizable-panel" } }, exportAs: ["hlmResizablePanel"], hostDirectives: [{ directive: i1.BrnResizablePanel, inputs: ["defaultSize", "defaultSize", "id", "id", "collapsible", "collapsible", "maxSize", "maxSize", "minSize", "minSize"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizablePanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmResizablePanel, isStandalone: true, selector: "[hlmResizablePanel],hlm-resizable-panel", host: { attributes: { "data-slot": "resizable-panel" } }, exportAs: ["hlmResizablePanel"], hostDirectives: [{ directive: i1.BrnResizablePanel, inputs: ["defaultSize", "defaultSize", "id", "id", "collapsible", "collapsible", "maxSize", "maxSize", "minSize", "minSize"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizablePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizablePanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmResizablePanel],hlm-resizable-panel',
@@ -91,11 +91,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmResizableImports = [HlmResizableGroup, HlmResizablePanel, HlmResizableHandle];
 class HlmResizableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableModule, imports: [HlmResizableGroup, HlmResizablePanel, HlmResizableHandle], exports: [HlmResizableGroup, HlmResizablePanel, HlmResizableHandle] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableModule, imports: [HlmResizableGroup, HlmResizablePanel, HlmResizableHandle], exports: [HlmResizableGroup, HlmResizablePanel, HlmResizableHandle] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmResizableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmResizableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmResizableImports],
@@ -108,4 +108,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmResizableGroup, HlmResizableHandle, HlmResizableImports, HlmResizableModule, HlmResizablePanel };
-//# sourceMappingURL=resizable.mjs.map
+

package/scroll-area/README.md

@@ -1,11 +1,239 @@
-# ScrollArea
+# Scroll Area (`@egose/shadcn-theme-ng/scroll-area`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A shadcn/ui-style **Scroll Area** — a themed scrollable container with hover-reveal scrollbars. This is the Angular equivalent of shadcn/ui `ScrollArea`.
 
-## Building
+Unlike most subpaths in this library it is **not** built on spartan-ng/brain: it is a thin directive wrapper over `NgScrollbar` from **ngx-scrollbar**. The directive matches `ng-scrollbar[hlm]` (or `ng-scrollbar[hlmScrollbar]`), forces `visibility: 'hover'` scrollbar options, and pins the shadcn scrollbar CSS variables (thumb color, track color/thickness) so every scroll area looks consistent with the theme.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/scroll-area` and `@egose/shadcn-theme-ng-tw/scroll-area` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng build scroll-area
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+```ts
+import { HlmScrollAreaImports } from '@egose/shadcn-theme-ng/scroll-area';
+// tw variant:
+// import { HlmScrollAreaImports } from '@egose/shadcn-theme-ng-tw/scroll-area';
 ```
+
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`, `@spartan-ng/brain`. Runtime `ngx-scrollbar` is installed transitively — but note you must import `NgScrollbar` itself (from `ngx-scrollbar`) wherever you use the directive, since this package only provides the `hlm` styling layer.
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol                 | Kind          | Description                                                                                       |
+| ---------------------- | ------------- | ------------------------------------------------------------------------------------------------- |
+| `HlmScrollArea`        | Directive     | Styling/behavior layer for `NgScrollbar`; selector `ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]` |
+| `HlmScrollAreaImports` | `const` array | `[HlmScrollArea]` standalone imports                                                              |
+| `HlmScrollAreaModule`  | `NgModule`    | NgModule wrapper re-exporting `HlmScrollArea`                                                     |
+
+Standalone usage (you almost always pair it with `NgScrollbar`):
+
+```ts
+import { Component } from '@angular/core';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { HlmScrollAreaImports } from '@egose/shadcn-theme-ng/scroll-area';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [NgScrollbar, HlmScrollAreaImports],
+  template: ` <ng-scrollbar hlm class="tw:h-64"> ... </ng-scrollbar> `,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { HlmScrollAreaModule } from '@egose/shadcn-theme-ng/scroll-area';
+
+@NgModule({ imports: [NgScrollbar, HlmScrollAreaModule] })
+export class DemoModule {}
+```
+
+## Anatomy / Structure
+
+```html
+<ng-scrollbar hlm class="tw:h-72 tw:w-80 tw:rounded-md tw:border">
+  <div class="tw:p-4">
+    <h4>Title</h4>
+    <p>Scrollable content…</p>
+  </div>
+</ng-scrollbar>
+```
+
+Real selectors:
+
+| Selector                                          | Class           | Notes                                                                                                    |
+| ------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------- |
+| `ng-scrollbar[hlm]`, `ng-scrollbar[hlmScrollbar]` | `HlmScrollArea` | `data-slot="scroll-area"`; requires the `NgScrollbar` component from `ngx-scrollbar` as the host element |
+
+The directive sets these host bindings: `--scrollbar-thumb-color` and `--scrollbar-thumb-hover-color` to `var(--border)`, `--scrollbar-track-color: transparent`, `--scrollbar-track-thickness: 0.625rem`, `--scrollbar-track-offset: 1.5px`, plus a rounded/pill thumb shape and block layout classes. Scrollbars appear on hover (`visibility: 'hover'`).
+
+## API reference
+
+`HlmScrollArea` declares **no inputs, outputs, or methods of its own** — it is a pure styling directive. All scrolling behavior/inputs (e.g. `orientation`, `visibility` overrides, viewport access) come from the host `NgScrollbar` component itself; consult the `ngx-scrollbar` API for those.
+
+| Host CSS variables set by the directive | Value                |
+| --------------------------------------- | -------------------- |
+| `--scrollbar-thumb-color`               | `var(--border)`      |
+| `--scrollbar-thumb-hover-color`         | `var(--border)`      |
+| `--scrollbar-track-color`               | `transparent`        |
+| `--scrollbar-track-thickness`           | `0.625rem`           |
+| `--scrollbar-track-offset`              | `1.5px`              |
+| `--scrollbar-thumb-shape`               | `9999px` (via class) |
+
+## Examples
+
+### 1. Basic vertical scroll area
+
+```ts
+import { Component } from '@angular/core';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { HlmScrollAreaImports } from '@egose/shadcn-theme-ng/scroll-area';
+
+@Component({
+  selector: 'app-basic-scroll',
+  standalone: true,
+  imports: [NgScrollbar, HlmScrollAreaImports],
+  template: `
+    <ng-scrollbar hlm class="tw:h-64 tw:w-80 tw:rounded-md tw:border">
+      <div class="tw:p-4 tw:space-y-2">
+        @for (item of items; track item) {
+          <p class="tw:text-sm">{{ item }}</p>
+        }
+      </div>
+    </ng-scrollbar>
+  `,
+})
+export class BasicScrollComponent {
+  readonly items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
+}
+```
+
+### 2. Fixed-height log / chat window
+
+```ts
+import { Component, signal } from '@angular/core';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { HlmScrollAreaImports } from '@egose/shadcn-theme-ng/scroll-area';
+
+@Component({
+  selector: 'app-log-scroll',
+  standalone: true,
+  imports: [NgScrollbar, HlmScrollAreaImports],
+  template: `
+    <ng-scrollbar hlm class="tw:h-72 tw:rounded-md tw:border tw:bg-muted/30">
+      <div class="tw:p-4 tw:font-mono tw:text-xs tw:space-y-1">
+        @for (line of lines(); track $index) {
+          <div>{{ line }}</div>
+        }
+      </div>
+    </ng-scrollbar>
+    <button type="button" (click)="addLine()">Add line</button>
+  `,
+})
+export class LogScrollComponent {
+  readonly lines = signal(['[ok] booted', '[ok] connected']);
+
+  addLine(): void {
+    this.lines.update((ls) => [...ls, `[log] event ${ls.length}`]);
+  }
+}
+```
+
+### 3. Horizontal scrolling row
+
+`NgScrollbar` supports horizontal viewports — the `hlm` styling applies the same way:
+
+```html
+<ng-scrollbar hlm orientation="horizontal" class="tw:w-full tw:max-w-xl tw:rounded-md tw:border">
+  <div class="tw:flex tw:gap-3 tw:p-4 tw:w-max">
+    @for (card of cards; track card) {
+    <div class="tw:h-24 tw:w-40 tw:shrink-0 tw:rounded-md tw:bg-muted tw:p-2">{{ card }}</div>
+    }
+  </div>
+</ng-scrollbar>
+```
+
+### 4. Scroll area inside a card
+
+```html
+<div class="tw:rounded-lg tw:border tw:p-4">
+  <h3 class="tw:mb-2 tw:font-semibold">Recent activity</h3>
+  <ng-scrollbar hlm class="tw:h-48">
+    <ul class="tw:space-y-2 tw:pe-4">
+      @for (event of activity; track event.id) {
+      <li class="tw:flex tw:justify-between tw:text-sm">
+        <span>{{ event.label }}</span>
+        <span class="tw:text-muted-foreground">{{ event.at }}</span>
+      </li>
+      }
+    </ul>
+  </ng-scrollbar>
+</div>
+```
+
+Leave end-padding (`pe-4`) so text never slides under the hover scrollbar.
+
+### 5. Long select/popover content
+
+Scrollable dropdown content with the themed thumb:
+
+```html
+<ng-scrollbar hlm class="tw:max-h-60 tw:w-64 tw:rounded-md tw:border">
+  <div class="tw:p-1">
+    @for (option of options; track option.value) {
+    <button
+      type="button"
+      (click)="pick(option)"
+      class="tw:w-full tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-left tw:text-sm tw:hover:bg-accent"
+    >
+      {{ option.label }}
+    </button>
+    }
+  </div>
+</ng-scrollbar>
+```
+
+### 6. Overriding thumb color per instance
+
+The colors are CSS variables, so any instance can be re-themed inline:
+
+```html
+<ng-scrollbar
+  hlm
+  class="tw:h-64 tw:rounded-md tw:border"
+  style="--scrollbar-thumb-color: var(--primary); --scrollbar-thumb-hover-color: var(--primary);"
+>
+  <div class="tw:p-4">Brand-colored scrollbar…</div>
+</ng-scrollbar>
+```
+
+## Accessibility notes
+
+- `NgScrollbar` keeps native scroll semantics; keyboard users can scroll the region with arrows/PageUp/PageDown when it has focus — make sure scrollable regions with important content are focusable (`tabindex="0"`) and labelled (`aria-label`/`role="region"`).
+- Hover-only scrollbars can be hard to discover for pointer users and invisible to some low-vision users — for primary page-level scrolling prefer native overflow; reserve this component for secondary panes (sidebars, dropdowns, logs).
+- Do not nest scroll areas with competing orientations unless each has a clear label; nested scroll traps confuse both keyboard and screen-reader users.
+
+## Theming / CSS variables
+
+The component is driven by `--scrollbar-*` variables (see table above) plus the theme's `--border` token. Override per instance with inline `style` as shown in example 6; dark mode follows automatically through the theme tokens.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/resizable` — fixed-size panes that pair well with internal scroll areas
+- `@egose/shadcn-theme-ng/select` — its dropdown content scrolls internally for long option lists
+- `@egose/shadcn-theme-ng/sidebar` — sidebar content areas that often need themed scrolling
+- `@egose/shadcn-theme-ng/card` — bordered containers frequently wrapped around scroll areas

package/scroll-area/fesm2022/scroll-area.mjs

@@ -5,12 +5,12 @@ import { provideScrollbarOptions } from 'ngx-scrollbar';
 
 class HlmScrollArea {
     constructor() {
-        classes(() => 'rounded-md [--scrollbar-thumb-shape:9999px] block');
+        classes(() => 'tw:rounded-md tw:[--scrollbar-thumb-shape:9999px] tw:block');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmScrollArea, isStandalone: true, selector: "ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]", host: { attributes: { "data-slot": "scroll-area" }, properties: { "style.--scrollbar-thumb-color": "\"var(--border)\"", "style.--scrollbar-thumb-hover-color": "\"var(--border)\"", "style.--scrollbar-track-color": "\"transparent\"", "style.--scrollbar-track-thickness": "\"0.625rem\"", "style.--scrollbar-track-offset": "\"1.5px\"" } }, providers: [provideScrollbarOptions({ visibility: 'hover' })], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmScrollArea, isStandalone: true, selector: "ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]", host: { attributes: { "data-slot": "scroll-area" }, properties: { "style.--scrollbar-thumb-color": "\"var(--border)\"", "style.--scrollbar-thumb-hover-color": "\"var(--border)\"", "style.--scrollbar-track-color": "\"transparent\"", "style.--scrollbar-track-thickness": "\"0.625rem\"", "style.--scrollbar-track-offset": "\"1.5px\"" } }, providers: [provideScrollbarOptions({ visibility: 'hover' })], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollArea, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]',
@@ -31,11 +31,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmScrollAreaImports = [HlmScrollArea];
 class HlmScrollAreaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollAreaModule, imports: [HlmScrollArea], exports: [HlmScrollArea] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollAreaModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollAreaModule, imports: [HlmScrollArea], exports: [HlmScrollArea] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollAreaModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmScrollAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmScrollAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmScrollAreaImports],
@@ -48,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmScrollArea, HlmScrollAreaImports, HlmScrollAreaModule };
-//# sourceMappingURL=scroll-area.mjs.map
+