@ojiepermana/angular 0.0.2

package/README.md

@@ -0,0 +1,237 @@
+# @ojiepermana/angular
+
+Theme and layout primitives for Angular applications.
+
+This package is organized around secondary entry points. The root TypeScript package is intentionally empty, so application code should not import APIs from `@ojiepermana/angular` directly.
+
+## Current Package Shape
+
+Use these entry points in application code:
+
+- `@ojiepermana/angular/theme/service`
+- `@ojiepermana/angular/theme/component`
+- `@ojiepermana/angular/theme/directive`
+- `@ojiepermana/angular/layout`
+- `@ojiepermana/angular/shell`
+- `@ojiepermana/angular/styles/index.css`
+- `@ojiepermana/angular/styles/resets.css` for optional application-level resets
+
+Do not import consumer code from:
+
+- `@ojiepermana/angular`
+- `@ojiepermana/angular/internal`
+
+## What The Library Provides
+
+- Theme runtime state through `ThemeService` and `provideNgTheme()` for scheme, color, and style.
+- Theme host mirroring through `ThemeHostDirective`.
+- Theme controls through `StyleSwitcherComponent`, `ColorPickerComponent`, and `SchemeSwitcherComponent`.
+- Layout runtime state through `LayoutService` and `provideNgLayout()` for shell mode and container width.
+- Combined runtime registration through `provideNgShell()`.
+- Layout host mirroring through `LayoutHostDirective`.
+- Reusable shell components through `LayoutVerticalComponent` and `LayoutHorizontalComponent`.
+- Layout controls through `LayoutModeSwitcherComponent` and `LayoutContainerSwitcherComponent`.
+- A combined stylesheet bundle through `@ojiepermana/angular/styles/index.css`.
+
+## Requirements
+
+The published package currently declares peer dependencies for:
+
+- `@angular/common` `^21.2.0`
+- `@angular/core` `^21.2.0`
+- `@angular/cdk` `^21.0.0`
+- `@angular/material` `^21.0.0`
+- `@lucide/angular` `>=1.0.0`
+- `tailwindcss` `>=4.0.0`
+
+If you use the layout shells, your application should also already be using Angular Router because the shell components render `RouterOutlet`.
+
+## Runtime Contract
+
+### Theme Runtime
+
+`ThemeService` writes these values to `document.documentElement`:
+
+- `.dark` when the resolved scheme is dark.
+- `style.color-scheme` with the resolved browser color scheme.
+- `data-theme-scheme`
+- `data-theme-color`
+- `data-theme-style`
+
+Theme persistence keys:
+
+- `theme-scheme`
+- `theme-color`
+- `theme-style`
+
+### Layout Runtime
+
+`LayoutService` writes these values to `document.documentElement`:
+
+- `data-layout-mode`
+- `data-layout-container`
+
+Layout persistence keys:
+
+- `layout-mode`
+- `layout-container`
+
+Legacy `ng-theme:v2:*` keys are migrated automatically by the owning runtime service when they are read.
+
+Deprecated config fields `storageKey` and `storageVersion` have been removed from the public config interfaces. The persistence keys are now fixed by the library runtime.
+
+Theme color labels can be localized through `provideNgTheme({ colorLabels: { ... } })`, and layout shells now prefer the internal `shell-content` marker over the deprecated HTML `content` element name.
+
+## Styling Model
+
+- `@ojiepermana/angular/styles/index.css` is the canonical aggregate bundle for applications. It imports theme first, then layout.
+- Application-level resets are intentionally not bundled. Import `@ojiepermana/angular/styles/resets.css` only if you want the library's optional reset helpers.
+- Theme and layout stylesheet sources remain internal composition layers behind the aggregate bundle.
+- Semantic tokens are the visual source of truth.
+- Angular Material is the behavior layer and consumes the shared theme variables.
+
+## Quick Start
+
+### 1. Register Providers
+
+```ts
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideNgShell } from '@ojiepermana/angular/shell';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideNgShell({
+      theme: {
+        defaultScheme: 'system',
+        defaultColor: 'brand',
+        defaultStyle: 'flat',
+      },
+      layout: {
+        defaultMode: 'vertical',
+        defaultContainer: 'boxed',
+      },
+    }),
+  ],
+};
+```
+
+### 2. Register Styles
+
+```css
+@import '@ojiepermana/angular/styles/index.css';
+@import 'tailwindcss';
+```
+
+Use this aggregate import for consumer applications.
+
+If your application also wants the library's optional reset helpers, add this before the aggregate bundle:
+
+```css
+@import '@ojiepermana/angular/styles/resets.css';
+@import '@ojiepermana/angular/styles/index.css';
+@import 'tailwindcss';
+```
+
+### 3. Compose A Shell
+
+```ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  LayoutContainerSwitcherComponent,
+  LayoutVerticalComponent,
+} from '@ojiepermana/angular/layout';
+import {
+  StyleSwitcherComponent,
+  ColorPickerComponent,
+  SchemeSwitcherComponent,
+} from '@ojiepermana/angular/theme/component';
+
+@Component({
+  selector: 'app-shell',
+  imports: [
+    StyleSwitcherComponent,
+    ColorPickerComponent,
+    LayoutContainerSwitcherComponent,
+    LayoutVerticalComponent,
+    SchemeSwitcherComponent,
+  ],
+  template: `
+    <vertical>
+      <nav navigation class="flex h-full w-full flex-col gap-6 px-4 py-5">
+        <div class="flex items-center gap-1">
+          <style-switcher />
+          <layout-container-switcher />
+          <scheme-switcher />
+        </div>
+
+        <color-picker />
+      </nav>
+    </vertical>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppShellComponent {}
+```
+
+### 4. Mirror Runtime State To A Subtree
+
+```html
+<section ngtThemeHost ngtLayoutHost>
+  <ng-content />
+</section>
+```
+
+## Entry Point Summary
+
+### `@ojiepermana/angular/theme/service`
+
+- `ThemeService`
+- `provideNgTheme`
+- `NG_THEME_CONFIG`
+- `ThemeScheme`
+- `ThemeColor`
+- `ThemeColorOption`
+- `ThemeStyle`
+- `NgThemeConfig`
+
+### `@ojiepermana/angular/theme/component`
+
+- `StyleSwitcherComponent`
+- `ColorPickerComponent`
+- `SchemeSwitcherComponent`
+
+### `@ojiepermana/angular/theme/directive`
+
+- `ThemeHostDirective`
+
+### `@ojiepermana/angular/layout`
+
+- `LayoutService`
+- `provideNgLayout`
+- `NG_LAYOUT_CONFIG`
+- `LayoutMode`
+- `LayoutContainer`
+- `NgLayoutConfig`
+- `LayoutHostDirective`
+- `LayoutVerticalComponent`
+- `LayoutHorizontalComponent`
+- `LayoutModeSwitcherComponent`
+- `LayoutContainerSwitcherComponent`
+
+### `@ojiepermana/angular/shell`
+
+- `provideNgShell`
+- `NgShellConfig`
+
+## Notes For Contributors
+
+- Keep public imports domain-based through the documented secondary entry points.
+- Document `@ojiepermana/angular/styles/index.css` as the consumer stylesheet entry point.
+- Treat `@ojiepermana/angular/internal` as implementation-only. It exists so library entry points can share code without turning that code into a supported consumer contract.
+- Do not add exports to `@ojiepermana/angular` unless the package contract changes intentionally.
+- Keep the root README, theme README, layout README, and entrypoint smoke tests aligned whenever the public surface changes.

package/fesm2022/ojiepermana-angular-internal.mjs

@@ -0,0 +1,58 @@
+import { provideLucideConfig } from '@lucide/angular';
+
+const libraryLucideConfigProvider = provideLucideConfig({
+    absoluteStrokeWidth: true,
+    strokeWidth: 1.35,
+});
+
+class LocalStorageStateAdapter {
+    config;
+    constructor(config) {
+        this.config = config;
+    }
+    clear(axis) {
+        if (!this.config.isBrowser || !this.config.storage) {
+            return;
+        }
+        this.config.storage.removeItem(this.key(axis));
+        this.config.storage.removeItem(this.legacyKey(axis));
+    }
+    persist(axis, value) {
+        if (!this.config.isBrowser || !this.config.storage) {
+            return;
+        }
+        this.config.storage.setItem(this.key(axis), value);
+        this.config.storage.removeItem(this.legacyKey(axis));
+    }
+    read(axis, fallback, isValid) {
+        if (!this.config.isBrowser || !this.config.storage) {
+            return fallback;
+        }
+        const storedValue = this.config.storage.getItem(this.key(axis));
+        if (storedValue && isValid(storedValue)) {
+            return storedValue;
+        }
+        const legacyValue = this.config.storage.getItem(this.legacyKey(axis));
+        if (legacyValue && isValid(legacyValue)) {
+            this.config.storage.setItem(this.key(axis), legacyValue);
+            this.config.storage.removeItem(this.legacyKey(axis));
+            return legacyValue;
+        }
+        return fallback;
+    }
+    key(axis) {
+        return this.config.keys[axis];
+    }
+    legacyKey(axis) {
+        return `${this.config.legacyPrefix}:${axis}`;
+    }
+}
+
+/* Internal composition utilities for library entrypoints. Not part of the supported consumer API. */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LocalStorageStateAdapter, libraryLucideConfigProvider };
+//# sourceMappingURL=ojiepermana-angular-internal.mjs.map

package/fesm2022/ojiepermana-angular-internal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-internal.mjs","sources":["../../../projects/library/internal/src/lucide-config.provider.ts","../../../projects/library/internal/src/local-storage-state.ts","../../../projects/library/internal/public-api.ts","../../../projects/library/internal/ojiepermana-angular-internal.ts"],"sourcesContent":["import { provideLucideConfig } from '@lucide/angular';\n\nexport const libraryLucideConfigProvider = provideLucideConfig({\n  absoluteStrokeWidth: true,\n  strokeWidth: 1.35,\n});\n","interface StorageLike {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n  removeItem(key: string): void;\n}\n\ninterface LocalStorageStateAdapterConfig<Axis extends string> {\n  readonly isBrowser: boolean;\n  readonly storage: StorageLike | null;\n  readonly keys: Record<Axis, string>;\n  readonly legacyPrefix: string;\n}\n\nexport class LocalStorageStateAdapter<Axis extends string> {\n  constructor(private readonly config: LocalStorageStateAdapterConfig<Axis>) {}\n\n  clear(axis: Axis): void {\n    if (!this.config.isBrowser || !this.config.storage) {\n      return;\n    }\n\n    this.config.storage.removeItem(this.key(axis));\n    this.config.storage.removeItem(this.legacyKey(axis));\n  }\n\n  persist(axis: Axis, value: string): void {\n    if (!this.config.isBrowser || !this.config.storage) {\n      return;\n    }\n\n    this.config.storage.setItem(this.key(axis), value);\n    this.config.storage.removeItem(this.legacyKey(axis));\n  }\n\n  read<T extends string>(axis: Axis, fallback: T, isValid: (value: string) => value is T): T {\n    if (!this.config.isBrowser || !this.config.storage) {\n      return fallback;\n    }\n\n    const storedValue = this.config.storage.getItem(this.key(axis));\n\n    if (storedValue && isValid(storedValue)) {\n      return storedValue;\n    }\n\n    const legacyValue = this.config.storage.getItem(this.legacyKey(axis));\n\n    if (legacyValue && isValid(legacyValue)) {\n      this.config.storage.setItem(this.key(axis), legacyValue);\n      this.config.storage.removeItem(this.legacyKey(axis));\n      return legacyValue;\n    }\n\n    return fallback;\n  }\n\n  private key(axis: Axis): string {\n    return this.config.keys[axis];\n  }\n\n  private legacyKey(axis: Axis): string {\n    return `${this.config.legacyPrefix}:${axis}`;\n  }\n}\n","/* Internal composition utilities for library entrypoints. Not part of the supported consumer API. */\n\nexport { libraryLucideConfigProvider } from './src/lucide-config.provider';\nexport { LocalStorageStateAdapter } from './src/local-storage-state';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAEO,MAAM,2BAA2B,GAAG,mBAAmB,CAAC;AAC7D,IAAA,mBAAmB,EAAE,IAAI;AACzB,IAAA,WAAW,EAAE,IAAI;AAClB,CAAA;;MCQY,wBAAwB,CAAA;AACN,IAAA,MAAA;AAA7B,IAAA,WAAA,CAA6B,MAA4C,EAAA;QAA5C,IAAA,CAAA,MAAM,GAAN,MAAM;IAAyC;AAE5E,IAAA,KAAK,CAAC,IAAU,EAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YAClD;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACtD;IAEA,OAAO,CAAC,IAAU,EAAE,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YAClD;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;AAClD,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACtD;AAEA,IAAA,IAAI,CAAmB,IAAU,EAAE,QAAW,EAAE,OAAsC,EAAA;AACpF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AAClD,YAAA,OAAO,QAAQ;QACjB;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE;AACvC,YAAA,OAAO,WAAW;QACpB;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAErE,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE;AACvC,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;AACxD,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AACpD,YAAA,OAAO,WAAW;QACpB;AAEA,QAAA,OAAO,QAAQ;IACjB;AAEQ,IAAA,GAAG,CAAC,IAAU,EAAA;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IAC/B;AAEQ,IAAA,SAAS,CAAC,IAAU,EAAA;QAC1B,OAAO,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;IAC9C;AACD;;AC/DD;;ACAA;;AAEG;;;;"}