@surfnet/curve-angular 0.2.0

package/src/lib/ui/select/src/lib/hlm-select-trigger.ts

@@ -0,0 +1,59 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCaretUpDown } from '@ng-icons/phosphor-icons/regular';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { hlm } from '../../../utils/src';
+import type { SelectTriggerSizeName } from '@surfnet/curve-contracts';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-select-trigger',
+  imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
+  providers: [provideIcons({ phosphorCaretUpDown })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      brnSelectTrigger
+      brnFieldControlDescribedBy
+      [forceInvalid]="forceInvalid()"
+      [id]="buttonId()"
+      [class]="_computedClass()"
+      [attr.data-size]="size()"
+      data-slot="select-trigger"
+    >
+      <ng-content />
+      <ng-icon
+        name="phosphorCaretUpDown"
+        class="text-muted-foreground text-[calc(var(--spacing)*4)] ms-auto"
+      />
+    </button>
+  `,
+})
+export class HlmSelectTrigger {
+  private static _id = 0;
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+      this.userClass(),
+    ),
+  );
+
+  public readonly buttonId = input<string>(`hlm-select-trigger-${HlmSelectTrigger._id++}`);
+
+  public readonly size = input<SelectTriggerSizeName>('default');
+
+  /** Whether to force the trigger into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+}

package/src/lib/ui/select/src/lib/hlm-select-value-template.ts

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValueTemplate } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] })
+export class HlmSelectValueTemplate {}

package/src/lib/ui/select/src/lib/hlm-select-value.ts

@@ -0,0 +1,18 @@
+import { Directive, inject } from '@angular/core';
+import { BrnSelectValue } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectValue],hlm-select-value',
+  hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+  host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
+})
+export class HlmSelectValue {
+  private readonly _brnSelectValue = inject(BrnSelectValue);
+
+  protected readonly _hidden = this._brnSelectValue.hidden;
+
+  constructor() {
+    classes(() => 'data-hidden:hidden');
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-values-content.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
+export class HlmSelectValuesContent {
+  constructor() {
+    classes(() => 'gap-2 flex');
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-values.ts

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValues } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] })
+export class HlmSelectValues {}

package/src/lib/ui/select/src/lib/hlm-select.stories.ts

@@ -0,0 +1,105 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { selectContract } from '@surfnet/curve-contracts';
+import { HlmSelect } from './hlm-select';
+import { HlmSelectImports } from '..';
+
+const meta: Meta<HlmSelect> = {
+  title: 'Components/Select',
+  component: HlmSelect,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmSelectImports],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: selectContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmSelect>;
+
+/** A select with a placeholder until a value is chosen. */
+export const Default: Story = {
+  render: () => ({
+    template: `
+			<hlm-select>
+				<hlm-select-trigger class="w-56">
+					<hlm-select-value placeholder="Category: All" />
+				</hlm-select-trigger>
+        <hlm-select-content *hlmSelectPortal>
+					<hlm-select-item value="all">All</hlm-select-item>
+					<hlm-select-item value="identity">Identity</hlm-select-item>
+					<hlm-select-item value="storage">Storage</hlm-select-item>
+					<hlm-select-item value="marketplace">Marketplace</hlm-select-item>
+				</hlm-select-content>
+			</hlm-select>
+		`,
+  }),
+};
+
+/** A pre-selected value with grouped, labelled options. */
+export const Grouped: Story = {
+  render: () => ({
+    template: `
+			<hlm-select value="identity">
+				<hlm-select-trigger class="w-56">
+					<hlm-select-value placeholder="Pick a category" />
+				</hlm-select-trigger>
+        <hlm-select-content *hlmSelectPortal>
+					<hlm-select-group>
+						<hlm-select-label>Categories</hlm-select-label>
+						<hlm-select-item value="identity">Identity</hlm-select-item>
+						<hlm-select-item value="storage">Storage</hlm-select-item>
+						<hlm-select-item value="marketplace">Marketplace</hlm-select-item>
+					</hlm-select-group>
+				</hlm-select-content>
+			</hlm-select>
+		`,
+  }),
+};
+
+/** Disabled trigger. */
+export const Disabled: Story = {
+  render: () => ({
+    template: `
+			<hlm-select disabled>
+				<hlm-select-trigger class="w-56">
+					<hlm-select-value placeholder="Category: All" />
+				</hlm-select-trigger>
+        <hlm-select-content *hlmSelectPortal>
+					<hlm-select-item value="all">All</hlm-select-item>
+				</hlm-select-content>
+			</hlm-select>
+		`,
+  }),
+};
+
+/** Every trigger size declared in the contract. */
+export const Sizes: Story = {
+  render: () => ({
+    template: `
+			<div class="flex items-center gap-3">
+				${selectContract.props.sizes
+          .map(
+            (size) => `
+							<hlm-select key="${size}" value="all">
+								<hlm-select-trigger class="w-40" size="${size}">
+									<hlm-select-value />
+								</hlm-select-trigger>
+								<hlm-select-content *hlmSelectPortal>
+									<hlm-select-item value="all" selected>All</hlm-select-item>
+									<hlm-select-item value="identity">Identity</hlm-select-item>
+								</hlm-select-content>
+							</hlm-select>
+						`,
+          )
+          .join('')}
+			</div>
+		`,
+  }),
+};

package/src/lib/ui/select/src/lib/hlm-select.ts

@@ -0,0 +1,45 @@
+import { Directive } from '@angular/core';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnSelect } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelect],hlm-select',
+  providers: [
+    provideBrnPopoverConfig({
+      align: 'start',
+      sideOffset: 6,
+    }),
+    provideBrnDialogDefaultOptions({
+      autoFocus: 'first-heading',
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnSelect,
+      inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+      outputs: ['valueChange'],
+    },
+    {
+      directive: BrnPopover,
+      inputs: [
+        'align',
+        'autoFocus',
+        'closeDelay',
+        'closeOnOutsidePointerEvents',
+        'sideOffset',
+        'state',
+        'offsetX',
+        'restoreFocus',
+      ],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'select' },
+})
+export class HlmSelect {
+  constructor() {
+    classes(() => 'block');
+  }
+}

package/src/lib/ui/separator/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSeparator } from './lib/hlm-separator';
+
+export * from './lib/hlm-separator';
+
+export const HlmSeparatorImports = [HlmSeparator] as const;

package/src/lib/ui/separator/src/lib/hlm-separator.stories.ts

@@ -0,0 +1,88 @@
+import { type Meta, type StoryObj, argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { separatorContract } from '@surfnet/curve-contracts';
+import { HlmSeparator, HlmSeparatorImports } from '..';
+
+const meta: Meta<HlmSeparator> = {
+  title: 'Components/Separator',
+  component: HlmSeparator,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmSeparatorImports],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: separatorContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'inline-radio',
+      options: separatorContract.props.orientations,
+      description: separatorContract.props.orientations
+        .map(
+          (orientation) =>
+            `\`${orientation}\` — ${separatorContract.docs.orientations[orientation]}`,
+        )
+        .join('\n\n'),
+      table: {
+        defaultValue: { summary: separatorContract.defaults.orientations },
+      },
+    },
+  },
+  args: {
+    orientation: separatorContract.defaults.orientations,
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmSeparator>;
+
+/** Interactive playground — flip `orientation` in the controls to see both directions. */
+export const Default: Story = {
+  render: ({ ...args }) => ({
+    props: args,
+    template: `
+			<div class="
+				{{orientation === 'vertical'
+					? 'flex h-5 items-center gap-3 text-sm'
+					: 'flex w-72 flex-col gap-3 text-sm'
+				}}"
+			>
+				<span>One</span>
+ 				<hlm-separator ${argsToTemplate(args)} />
+				<span>Two</span>
+			</div>
+		`,
+  }),
+};
+
+/** A horizontal divider between stacked blocks of text. */
+export const Horizontal: Story = {
+  render: () => ({
+    template: `
+			<div class="w-72">
+				<p class="text-sm">Curve</p>
+				<hlm-separator orientation="horizontal" class="my-3" /> 
+				<p class="text-sm text-muted-foreground">Components for React and Angular.</p>
+			</div>
+		`,
+  }),
+};
+
+/** A vertical divider between inline items. */
+export const Vertical: Story = {
+  render: () => ({
+    template: `
+			<div class="flex h-5 items-center gap-3 text-sm">
+				<span>Docs</span>
+				<hlm-separator orientation="vertical" /> 
+				<span>Source</span>
+				<hlm-separator orientation="vertical" /> 
+				<span>Storybook</span>
+			</div>
+		`,
+  }),
+};

package/src/lib/ui/separator/src/lib/hlm-separator.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { classes } from '../../../utils/src';
+
+export const hlmSeparatorClass =
+  'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
+
+@Directive({
+  selector: '[hlmSeparator],hlm-separator',
+  hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+  host: {
+    'data-slot': 'separator',
+  },
+})
+export class HlmSeparator {
+  constructor() {
+    classes(() => hlmSeparatorClass);
+  }
+}

package/src/lib/ui/sheet/src/index.ts

@@ -0,0 +1,34 @@
+import { HlmSheet } from './lib/hlm-sheet';
+import { HlmSheetClose } from './lib/hlm-sheet-close';
+import { HlmSheetContent } from './lib/hlm-sheet-content';
+import { HlmSheetDescription } from './lib/hlm-sheet-description';
+import { HlmSheetFooter } from './lib/hlm-sheet-footer';
+import { HlmSheetHeader } from './lib/hlm-sheet-header';
+import { HlmSheetOverlay } from './lib/hlm-sheet-overlay';
+import { HlmSheetPortal } from './lib/hlm-sheet-portal';
+import { HlmSheetTitle } from './lib/hlm-sheet-title';
+import { HlmSheetTrigger } from './lib/hlm-sheet-trigger';
+
+export * from './lib/hlm-sheet';
+export * from './lib/hlm-sheet-close';
+export * from './lib/hlm-sheet-content';
+export * from './lib/hlm-sheet-description';
+export * from './lib/hlm-sheet-footer';
+export * from './lib/hlm-sheet-header';
+export * from './lib/hlm-sheet-overlay';
+export * from './lib/hlm-sheet-portal';
+export * from './lib/hlm-sheet-title';
+export * from './lib/hlm-sheet-trigger';
+
+export const HlmSheetImports = [
+  HlmSheet,
+  HlmSheetClose,
+  HlmSheetContent,
+  HlmSheetDescription,
+  HlmSheetFooter,
+  HlmSheetHeader,
+  HlmSheetOverlay,
+  HlmSheetPortal,
+  HlmSheetTitle,
+  HlmSheetTrigger,
+] as const;

package/src/lib/ui/sheet/src/lib/hlm-sheet-close.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnSheetClose } from '@spartan-ng/brain/sheet';
+
+@Directive({
+  selector: 'button[hlmSheetClose]',
+  hostDirectives: [{ directive: BrnSheetClose, inputs: ['delay'] }],
+  host: { 'data-slot': 'sheet-close' },
+})
+export class HlmSheetClose {}

package/src/lib/ui/sheet/src/lib/hlm-sheet-content.ts

@@ -0,0 +1,66 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  Renderer2,
+  signal,
+} from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { phosphorX } from '@ng-icons/phosphor-icons/regular';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { HlmButton } from '../../../button/src';
+import { HlmIconImports } from '../../../icon/src';
+import { classes } from '../../../utils/src';
+import { HlmSheetClose } from './hlm-sheet-close';
+
+@Component({
+  selector: 'hlm-sheet-content',
+  imports: [HlmIconImports, HlmButton, HlmSheetClose],
+  providers: [provideIcons({ phosphorX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'sheet-content',
+    '[attr.data-side]': '_sideProvider.side()',
+    '[attr.data-state]': 'state()',
+  },
+  template: `
+    <ng-content />
+
+    @if (showCloseButton()) {
+      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
+        <span class="sr-only">Close</span>
+        <ng-icon hlm size="sm" name="phosphorX" />
+      </button>
+    }
+  `,
+})
+export class HlmSheetContent {
+  private readonly _stateProvider = injectExposesStateProvider({ host: true });
+  protected readonly _sideProvider = injectExposedSideProvider({ host: true });
+  public readonly state = this._stateProvider.state ?? signal('closed');
+  private readonly _renderer = inject(Renderer2);
+  private readonly _element = inject(ElementRef);
+
+  public readonly showCloseButton = input<boolean, BooleanInput>(true, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(() => [
+      'bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+      'data-open:animate-in data-closed:animate-out',
+      'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
+      'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
+      'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
+      'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
+    ]);
+    effect(() => {
+      this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+    });
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-description.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSheetDescription } from '@spartan-ng/brain/sheet';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSheetDescription]',
+  hostDirectives: [BrnSheetDescription],
+  host: { 'data-slot': 'sheet-description' },
+})
+export class HlmSheetDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground text-sm');
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-footer.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSheetFooter],hlm-sheet-footer',
+  host: { 'data-slot': 'sheet-footer' },
+})
+export class HlmSheetFooter {
+  constructor() {
+    classes(() => 'gap-2 p-4 mt-auto flex flex-col');
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-header.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSheetHeader],hlm-sheet-header',
+  host: { 'data-slot': 'sheet-header' },
+})
+export class HlmSheetHeader {
+  constructor() {
+    classes(() => 'gap-1.5 p-4 flex flex-col');
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-overlay.ts

@@ -0,0 +1,27 @@
+import { Directive, computed, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnSheetOverlay } from '@spartan-ng/brain/sheet';
+import { hlm } from '../../../utils/src';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmSheetOverlay],hlm-sheet-overlay',
+  hostDirectives: [BrnSheetOverlay],
+})
+export class HlmSheetOverlay {
+  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'bg-black/10 supports-backdrop-filter:backdrop-blur-xs transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    effect(() => {
+      const classValue = this._computedClass();
+      untracked(() => this._classSettable?.setClassToCustomElement(classValue));
+    });
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnSheetContent } from '@spartan-ng/brain/sheet';
+
+@Directive({
+  selector: '[hlmSheetPortal]',
+  hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
+})
+export class HlmSheetPortal {}

package/src/lib/ui/sheet/src/lib/hlm-sheet-title.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSheetTitle } from '@spartan-ng/brain/sheet';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSheetTitle]',
+  hostDirectives: [BrnSheetTitle],
+  host: { 'data-slot': 'sheet-title' },
+})
+export class HlmSheetTitle {
+  constructor() {
+    classes(() => 'text-foreground font-medium');
+  }
+}

package/src/lib/ui/sheet/src/lib/hlm-sheet-trigger.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnSheetTrigger } from '@spartan-ng/brain/sheet';
+
+@Directive({
+  selector: 'button[hlmSheetTrigger]',
+  hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+  host: { 'data-slot': 'sheet-trigger' },
+})
+export class HlmSheetTrigger {}

package/src/lib/ui/sheet/src/lib/hlm-sheet.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnSheet } from '@spartan-ng/brain/sheet';
+import { HlmSheetOverlay } from './hlm-sheet-overlay';
+
+@Component({
+  selector: 'hlm-sheet',
+  exportAs: 'hlmSheet',
+  imports: [HlmSheetOverlay],
+  providers: [
+    {
+      provide: BrnDialog,
+      useExisting: forwardRef(() => BrnSheet),
+    },
+    {
+      provide: BrnSheet,
+      useExisting: forwardRef(() => HlmSheet),
+    },
+    provideBrnDialogDefaultOptions({
+      // add custom options here
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-sheet-overlay />
+    <ng-content />
+  `,
+})
+export class HlmSheet extends BrnSheet {}