@ojiepermana/angular 0.0.2

package/layout/README.md

@@ -0,0 +1,143 @@
+# Layout Library
+
+Runtime layout state, shell components, layout controls, and shell selectors for `@ojiepermana/angular/layout`.
+
+## Package Shape
+
+Import the public API from:
+
+- `@ojiepermana/angular/layout`
+
+If you want one convenience provider that wires layout and theme together, use `@ojiepermana/angular/shell`.
+
+For styles in consumer applications, use `@ojiepermana/angular/styles/index.css`.
+If a consumer wants the library's optional application-level reset helpers, they can additionally import `@ojiepermana/angular/styles/resets.css`.
+
+## What This Library Owns
+
+- Global layout state with Angular signals through `LayoutService`
+- Layout runtime DOM contract on `document.documentElement`
+- Optional subtree mirroring through `LayoutHostDirective`
+- Reusable vertical and horizontal shell components
+- Standalone layout controls for mode and container width
+- Layout-owned shell selectors and layout state selectors
+
+## Runtime Contract
+
+When `LayoutService` is active, it writes the current state to `document.documentElement`.
+
+- `data-layout-mode` stores the active shell mode.
+- `data-layout-container` stores the active width mode.
+
+`LayoutHostDirective` mirrors the same contract onto any host element with `ngtLayoutHost`.
+
+## Supported Values
+
+- `LayoutMode`: `vertical`, `horizontal`, `empty`
+- `LayoutContainer`: `full`, `boxed`
+
+## Public API
+
+Import from `@ojiepermana/angular/layout`.
+
+- `LayoutService`
+- `provideNgLayout`
+- `NG_LAYOUT_CONFIG`
+- `LayoutMode`
+- `LayoutContainer`
+- `NgLayoutConfig`
+- `LayoutHostDirective`
+- `LayoutVerticalComponent`
+- `LayoutHorizontalComponent`
+- `LayoutContainerSwitcherComponent`
+- `LayoutModeSwitcherComponent`
+
+`provideNgLayout()` currently defaults to:
+
+- `defaultMode: 'vertical'`
+- `defaultContainer: 'full'`
+
+Persistence keys are fixed by the runtime. Deprecated config fields such as `storageKey` and `storageVersion` have been removed from `NgLayoutConfig`.
+
+`LayoutService` also exposes `reset()` to clear persisted layout state and restore the configured defaults.
+
+`LayoutModeSwitcherComponent` intentionally exposes only `vertical` and `horizontal`. The `empty` mode remains programmatic so consuming applications can opt into a content-only shell state without presenting it as a primary end-user toggle.
+
+## Styles
+
+The layout stylesheet source is `projects/library/layout/styles/index.css` inside this workspace.
+
+It owns the `data-layout-*` selectors and the `horizontal` and `vertical` shell selectors.
+
+Layout styles consume theme tokens. For application usage, prefer the aggregate stylesheet entry at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package.
+The shared bundle now includes reduced-motion-aware transitions for shell chrome colors, shadows, and radii while keeping structural mode changes immediate to avoid layout jank.
+
+Application-level resets are intentionally opt-in. If a consumer wants them, import `projects/library/styles/resets.css` in this workspace or `@ojiepermana/angular/styles/resets.css` from the published package in addition to the aggregate bundle.
+
+Internally, the shell templates now prefer `<shell-content>` instead of the deprecated HTML `<content>` element name. A legacy `content` selector remains supported for compatibility inside the library's internal shell marker directives.
+
+## SSR Notes
+
+- Providers can be registered on the server safely.
+- Layout DOM writes and `localStorage` persistence remain no-op until the browser runtime is available.
+- `empty` mode can still be set programmatically on the server or client; the switcher simply does not render it as a menu choice.
+
+## Troubleshooting
+
+- If layout state does not appear to update, verify that the aggregate stylesheet bundle is imported and that the consuming shell actually renders `vertical` or `horizontal`.
+- If a consuming application needs a content-only shell, set `LayoutService.setMode('empty')` or configure `defaultMode: 'empty'`; this is supported even though the switcher UI does not display that option.
+
+## Usage
+
+```ts
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideNgLayout } from '@ojiepermana/angular/layout';
+import { provideNgTheme } from '@ojiepermana/angular/theme/service';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideNgTheme(),
+    provideNgLayout({ defaultMode: 'vertical', defaultContainer: 'boxed' }),
+  ],
+};
+```
+
+```ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  LayoutContainerSwitcherComponent,
+  LayoutModeSwitcherComponent,
+  LayoutVerticalComponent,
+} from '@ojiepermana/angular/layout';
+
+@Component({
+  selector: 'app-shell',
+  imports: [LayoutContainerSwitcherComponent, LayoutModeSwitcherComponent, LayoutVerticalComponent],
+  template: `
+    <vertical>
+      <nav navigation class="flex h-full w-full flex-col gap-3 px-4 py-5">
+        <div class="flex items-center gap-1">
+          <layout-mode-switcher />
+          <layout-container-switcher />
+        </div>
+      </nav>
+    </vertical>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppShellComponent {}
+```
+
+## Persistence
+
+Layout state is persisted in `localStorage` using these flat keys:
+
+- `layout-mode`
+- `layout-container`
+
+Legacy `ng-theme:v2:layout-mode` and `ng-theme:v2:layout-container` entries are migrated automatically when they are read.

package/layout/styles/index.css

@@ -0,0 +1,157 @@
+[data-layout-container='full'] {
+  --layout-shell-max-width: 100%;
+  --layout-shell-padding: 0rem;
+  --layout-shell-radius: 0rem;
+}
+
+[data-layout-container='boxed'] {
+  --layout-shell-max-width: 82rem;
+  --layout-shell-padding: clamp(1rem, 2vw, 2rem);
+  --layout-shell-radius: var(--radius-xl);
+}
+
+[data-layout-mode='empty'] {
+  --layout-header-display: none;
+  --layout-sidebar-display: none;
+}
+
+horizontal,
+vertical {
+  display: block;
+  min-block-size: 100dvh;
+}
+
+horizontal > layout,
+vertical > layout {
+  display: block;
+  min-block-size: 100dvh;
+  padding: var(--layout-shell-padding);
+  background: var(--background);
+  color: var(--foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+horizontal > layout > :is(content, shell-content),
+vertical > layout > :is(content, shell-content) {
+  display: flex;
+  inline-size: min(100%, var(--layout-shell-max-width));
+  min-block-size: calc(100dvh - (var(--layout-shell-padding) * 2));
+  margin-inline: auto;
+  border: 1px solid var(--container-border);
+  border-radius: var(--layout-shell-radius);
+  background: var(--container-surface);
+  color: var(--container-foreground);
+  box-shadow: var(--container-shadow);
+  backdrop-filter: var(--container-backdrop);
+  -webkit-backdrop-filter: var(--container-backdrop);
+  overflow: hidden;
+  transition: var(--ngt-shell-transition);
+}
+
+horizontal > layout > :is(content, shell-content) {
+  flex-direction: column;
+}
+
+vertical > layout > :is(content, shell-content) {
+  flex-direction: column;
+}
+
+horizontal > layout > :is(content, shell-content) > header {
+  display: var(--layout-header-display);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  min-block-size: var(--layout-header-height);
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--nav-border);
+  background: var(--nav-surface);
+  color: var(--nav-foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+horizontal > layout > :is(content, shell-content) > header > brand,
+horizontal > layout > :is(content, shell-content) > header > panel {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+}
+
+horizontal > layout > :is(content, shell-content) > header > brand {
+  justify-content: flex-start;
+}
+
+horizontal > layout > :is(content, shell-content) > header > nav {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+horizontal > layout > :is(content, shell-content) > header > panel {
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+vertical > layout > :is(content, shell-content) > aside {
+  display: var(--layout-sidebar-display);
+  flex-direction: column;
+  inline-size: 100%;
+  border-bottom: 1px solid var(--sidebar-chrome-border);
+  background: var(--sidebar-chrome-surface);
+  color: var(--sidebar-chrome-foreground);
+  transition: var(--ngt-chrome-transition);
+}
+
+horizontal > layout > :is(content, shell-content) > main,
+vertical > layout > :is(content, shell-content) > main {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  background-color: var(--background);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--background) 94%, white 6%),
+    var(--background)
+  );
+  color: var(--foreground);
+  transition:
+    background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+@media (min-width: 48rem) {
+  vertical > layout > :is(content, shell-content) {
+    flex-direction: row;
+  }
+
+  vertical > layout > :is(content, shell-content) > aside {
+    inline-size: var(--layout-sidebar-width);
+    border-bottom: 0;
+    border-right: 1px solid var(--sidebar-chrome-border);
+  }
+}
+
+@media (max-width: 60rem) {
+  horizontal > layout > :is(content, shell-content) > header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: flex-start;
+  }
+
+  horizontal > layout > :is(content, shell-content) > header > nav {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 40rem) {
+  horizontal > layout > :is(content, shell-content) > header {
+    grid-template-columns: 1fr;
+  }
+
+  horizontal > layout > :is(content, shell-content) > header > panel {
+    justify-content: flex-start;
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@ojiepermana/angular",
+  "version": "0.0.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/material": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@lucide/angular": ">=1.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ojiepermana-angular.mjs",
+  "typings": "types/ojiepermana-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ojiepermana-angular.d.ts",
+      "default": "./fesm2022/ojiepermana-angular.mjs"
+    },
+    "./internal": {
+      "types": "./types/ojiepermana-angular-internal.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-internal.mjs"
+    },
+    "./layout": {
+      "types": "./types/ojiepermana-angular-layout.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-layout.mjs"
+    },
+    "./shell": {
+      "types": "./types/ojiepermana-angular-shell.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-shell.mjs"
+    },
+    "./theme": {
+      "types": "./types/ojiepermana-angular-theme.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-theme.mjs"
+    },
+    "./theme/component": {
+      "types": "./types/ojiepermana-angular-theme-component.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-theme-component.mjs"
+    },
+    "./theme/directive": {
+      "types": "./types/ojiepermana-angular-theme-directive.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-theme-directive.mjs"
+    },
+    "./theme/service": {
+      "types": "./types/ojiepermana-angular-theme-service.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-theme-service.mjs"
+    }
+  },
+  "type": "module"
+}

package/shell/README.md

@@ -0,0 +1,37 @@
+# Shell Provider
+
+Convenience provider helpers for `@ojiepermana/angular` applications.
+
+Import from:
+
+- `@ojiepermana/angular/shell`
+
+## Public API
+
+- `provideNgShell`
+- `NgShellConfig`
+
+## Usage
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideNgShell } from '@ojiepermana/angular/shell';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideNgShell({
+      theme: {
+        defaultScheme: 'system',
+        defaultColor: 'brand',
+        defaultStyle: 'flat',
+      },
+      layout: {
+        defaultMode: 'vertical',
+        defaultContainer: 'boxed',
+      },
+    }),
+  ],
+};
+```
+
+`provideNgShell()` is a convenience wrapper over `provideNgTheme()` and `provideNgLayout()`. It does not introduce a separate runtime state layer.

package/styles/index.css

@@ -0,0 +1,2 @@
+@import '../theme/styles/index.css';
+@import '../layout/styles/index.css';

package/styles/resets.css

@@ -0,0 +1,22 @@
+/* Optional application-level resets. Not imported by the default library bundle. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-block-size: 100%;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+}