@ng-zen/cli 22.8.0 → 22.9.0-next.1

package/README.md

@@ -209,9 +209,10 @@ ng generate @ng-zen/cli:layouts --layouts dashboard --stories
 
 ## 🧭 Available Layouts
 
-| Layout        | Description                         | Features                                                                    |
-| ------------- | ----------------------------------- | --------------------------------------------------------------------------- |
-| **Dashboard** | Responsive app shell: nav + content | Nav slot + scrollable main, in-flow mobile bottom bar, pairs with `sidenav` |
+| Layout        | Description                                   | Features                                                                       |
+| ------------- | --------------------------------------------- | ------------------------------------------------------------------------------ |
+| **Dashboard** | Responsive app shell: nav + content           | Nav slot + scrollable main, in-flow mobile bottom bar, pairs with `sidenav`    |
+| **Focus**     | Centered shell for screens outside app chrome | Pure centered slot, safe overflow scroll, max-width container, auth/onboarding |
 
 ## 🎨 Customization
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.8.0",
+  "version": "22.9.0-next.1",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -50,6 +50,7 @@
     "ui components cli",
     "layouts",
     "dashboard",
+    "focus",
     "alert",
     "avatar",
     "badge",

package/schematics/layouts/files/focus/focus.scss

@@ -0,0 +1,13 @@
+:host {
+  --zen-focus-padding: 1.5rem;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 100dvh;
+  padding: var(--zen-focus-padding);
+}

package/schematics/layouts/files/focus/focus.spec.ts

@@ -0,0 +1,37 @@
+import { Component, provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenFocus } from './focus';
+
+@Component({
+  template: `
+    <zen-focus>
+      <p>Centered Content</p>
+    </zen-focus>
+  `,
+  imports: [ZenFocus],
+})
+class FocusTestComponent {}
+
+describe('ZenFocus', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FocusTestComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(FocusTestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('zen-focus')).toBeTruthy();
+  });
+
+  it('should project content', () => {
+    const fixture = TestBed.createComponent(FocusTestComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('zen-focus p')?.textContent).toBe('Centered Content');
+  });
+});

package/schematics/layouts/files/focus/focus.stories.ts

@@ -0,0 +1,42 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenFocus } from './focus';
+
+type Story = StoryObj<ZenFocus>;
+
+const meta = {
+  title: 'Layouts/Focus',
+  component: ZenFocus,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [applicationConfig({ providers: [] }), moduleMetadata({ imports: [ZenFocus] })],
+} satisfies Meta<ZenFocus>;
+
+export default meta;
+
+const focusTemplate = `
+  <zen-focus style="height: 32rem;">
+    <div style="border: 1px solid #e0e0e0; border-radius: 0.75rem; padding: 2rem; text-align: center;">
+      <h2 style="margin: 0 0 0.5rem; font-size: 1.25rem;">Centered Content</h2>
+      <p style="margin: 0; color: #666; font-size: 0.875rem;">This content is centered both horizontally and vertically.</p>
+    </div>
+  </zen-focus>
+`;
+
+export const Default: Story = {
+  render: () => ({
+    template: focusTemplate,
+  }),
+};
+
+export const Mobile: Story = {
+  tags: ['!autodocs'],
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: () => ({
+    template: focusTemplate,
+  }),
+};

package/schematics/layouts/files/focus/focus.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenFocus is a presentational app shell: centered content. No business logic —
+ * auth, onboarding and error states live in the consumer.
+ *
+ * Designed for screens outside the app chrome (no navigation shell) — Login,
+ * 401/403, onboarding, and full-screen empty states.
+ *
+ * Slots:
+ * - default — centered content (e.g. `<router-outlet />`, login, onboarding)
+ *
+ * Layout:
+ * ```
+ * ┌─────────────────────────────────────────────┐
+ * │                                             │
+ * │               ┌───────────────┐             │
+ * │               │  ⟨default⟩    │             │
+ * │               │  centered     │             │
+ * │               │  content      │             │
+ * │               └───────────────┘             │
+ * │                                             │
+ * └─────────────────────────────────────────────┘
+ * ```
+ * Full height is self-contained: the host is a `100dvh` flex with centered
+ * alignment, placing projected content dead-center horizontally and vertically
+ * without unnecessary wrapper elements.
+ *
+ * @example
+ * ```html
+ * <zen-focus>
+ *   <zen-card>
+ *     <h1 card-title>Sign in</h1>
+ *     <p card-subtitle>Welcome back, please enter your details.</p>
+ *   </zen-card>
+ * </zen-focus>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-focus-padding: 1.5rem;
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-focus',
+  template: '<ng-content />',
+  styleUrl: './focus.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenFocus {}

package/schematics/layouts/files/focus/index.ts

@@ -0,0 +1 @@
+export * from './focus';

package/schematics/layouts/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/layouts/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../ui/schema';\n\nexport type LayoutType = 'dashboard';\n\nexport interface Schema extends GeneratorSchemaBase {\n  layouts: LayoutType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/layouts/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../ui/schema';\n\nexport type LayoutType = 'dashboard' | 'focus';\n\nexport interface Schema extends GeneratorSchemaBase {\n  layouts: LayoutType[];\n}\n"]}

package/schematics/layouts/schema.json

@@ -36,7 +36,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["dashboard"]
+        "enum": ["dashboard", "focus"]
       },
       "multiselect": true,
       "minItems": 1,

package/schematics/layouts/schema.ts

@@ -1,6 +1,6 @@
 import { GeneratorSchemaBase } from '../ui/schema';
 
-export type LayoutType = 'dashboard';
+export type LayoutType = 'dashboard' | 'focus';
 
 export interface Schema extends GeneratorSchemaBase {
   layouts: LayoutType[];