@cratis/event-models 0.176.0 → 0.177.0

package/dist/screen-editor/ScreenEditor/Host/ScreenEditorOverlay.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ScreenEditorStrings } from '../Inspector/ScreenEditorStrings';
-import { type PaletteIcons, type PaletteSource } from '../Palette/buildPalette';
+import type { PaletteIcons, PaletteSource } from '../Palette/buildPalette';
 import type { LayoutLabels } from '../Layouts/toLayoutContainerDescriptors';
 import type { ScreenEditorEnvironment, ScreenEditorResult, ScreenEditorSubject } from './ScreenEditorHost';
 import { type WindowSizeMemory } from '../Viewport/windowSizeMemory';

package/dist/screen-editor/ScreenEditor/Host/ScreenEditorWorkspace.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ScreenEditorStrings } from '../Inspector/ScreenEditorStrings';
-import { type PaletteIcons, type PaletteSource } from '../Palette/buildPalette';
+import type { PaletteIcons, PaletteSource } from '../Palette/buildPalette';
 import type { LayoutLabels } from '../Layouts/toLayoutContainerDescriptors';
 import type { ScreenEditorEnvironment, ScreenEditorResult, ScreenEditorSubject } from './ScreenEditorHost';
 export interface ScreenEditorWorkspaceProps {

package/dist/screen-editor/ScreenEditor/Host/useScreenEditor.d.ts

@@ -1,4 +1,5 @@
 import type { ScreenEditorController } from './ScreenEditorController';
 import type { OpenedSubject } from './openSubject';
 import type { ScreenEditorEnvironment } from './ScreenEditorHost';
-export declare function useScreenEditor(opened: OpenedSubject, authoringTemplate: string | undefined, environment: ScreenEditorEnvironment): ScreenEditorController;
+export type ComponentInsertedListener = (key: string) => void;
+export declare function useScreenEditor(opened: OpenedSubject, authoringTemplate: string | undefined, environment: ScreenEditorEnvironment, onInserted?: ComponentInsertedListener): ScreenEditorController;

package/dist/screen-editor/ScreenEditor/Inspector/ScreenEditorStrings.d.ts

@@ -1,5 +1,6 @@
 import type { IconPickerLabels } from '@cratis/components/IconPicker';
 import type { IconPropertyFieldStrings } from '../../Icons/IconPropertyFieldStrings';
+import type { ComponentPickerStrings } from '../Palette/ComponentPicker';
 import type { PropertyEditorStrings } from '../PropertyEditors/Registry/PropertyEditorStrings';
 import type { StructuredEditorStrings } from '../PropertyEditors/Structured/StructuredEditorStrings';
 import type { Ownership } from '../Structure/Ownership';
@@ -43,6 +44,8 @@ export interface ScreenEditorStrings {
     redo: string;
     palette: string;
     layoutDrawer: string;
+    componentsDrawer: string;
+    picker?: ComponentPickerStrings;
     packageTitles: Record<string, string>;
     closeDrawer: string;
     deleteElement: string;

package/dist/screen-editor/ScreenEditor/Palette/ComponentPicker.d.ts

@@ -0,0 +1,21 @@
+import { type PickerEntry } from './componentPickerModel';
+import type { ComponentPickerMemory } from './componentPickerStorage';
+export interface ComponentPickerStrings {
+    heading: string;
+    filterPlaceholder: string;
+    filterLabel: string;
+    frequentlyUsed: string;
+    groupsHint: string;
+    nothingMatches: string;
+    viaKeyword: (badge: string, query: string, keyword: string) => string;
+    addLabel: (component: string) => string;
+}
+export declare const defaultComponentPickerStrings: ComponentPickerStrings;
+export interface ComponentPickerProps {
+    entries: readonly PickerEntry[];
+    memory: ComponentPickerMemory;
+    strings?: ComponentPickerStrings;
+    onAdd: (entry: PickerEntry) => void;
+    usageVersion?: number;
+}
+export declare const ComponentPicker: ({ entries, memory, strings, onAdd, usageVersion }: ComponentPickerProps) => import("react").JSX.Element;

package/dist/screen-editor/ScreenEditor/Palette/PaletteFolders.d.ts

@@ -1,7 +1,15 @@
-import type { PaletteDrawer } from './buildPalette';
+import type { ReactNode } from 'react';
+import { type ComponentPickerStrings } from './ComponentPicker';
+import type { PickerEntry } from './componentPickerModel';
+import type { ComponentPickerMemory } from './componentPickerStorage';
 export interface PaletteFoldersProps {
-    drawers: readonly PaletteDrawer[];
+    entries: readonly PickerEntry[];
+    memory: ComponentPickerMemory;
+    icon: ReactNode;
+    title: string;
     closeLabel: string;
-    onActivate: (payload: unknown) => void;
+    strings?: ComponentPickerStrings;
+    usageVersion: number;
+    onAdd: (entry: PickerEntry) => void;
 }
-export declare const PaletteFolders: ({ drawers, closeLabel, onActivate }: PaletteFoldersProps) => import("react").JSX.Element;
+export declare const PaletteFolders: ({ entries, memory, icon, title, closeLabel, strings, usageVersion, onAdd }: PaletteFoldersProps) => import("react").JSX.Element;

package/dist/screen-editor/ScreenEditor/Palette/buildPalette.d.ts

@@ -1,16 +1,10 @@
-import type { ToolbarDrawerItem } from '@cratis/components/Toolbar';
+import type { ComponentDescriptor } from '@cratis/scene.model';
 import type { ReactNode } from 'react';
-import type { LayoutLabels } from '../Layouts/toLayoutContainerDescriptors';
 import type { LayoutItem } from '../Layouts/LayoutItem';
-export interface PaletteDrawer {
-    id: string;
-    title: string;
-    icon: ReactNode;
-    items: ToolbarDrawerItem[];
-}
 export interface PaletteSource {
     package: string;
     components: readonly string[];
+    descriptors?: readonly ComponentDescriptor[];
 }
 export interface PaletteIcons {
     layout: (item: LayoutItem) => ReactNode;
@@ -20,4 +14,3 @@ export interface PaletteIcons {
         package: (packageName: string) => ReactNode;
     };
 }
-export declare function buildPalette(layoutTitle: string, labels: LayoutLabels, icons: PaletteIcons, sources: readonly PaletteSource[], packageTitles?: Readonly<Record<string, string>>): PaletteDrawer[];

package/dist/screen-editor/ScreenEditor/Palette/componentPickerModel.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentQueryMatch, type ComponentUsage } from '@cratis/scene.engine';
+import { type ComponentDescriptor } from '@cratis/scene.model';
+import type { PalettePayload } from './PaletteEntry';
+export interface PickerEntry {
+    key: string;
+    label: string;
+    badge: string;
+    category: string;
+    keywords: readonly string[];
+    package?: string;
+    packageTitle?: string;
+    payload: PalettePayload;
+}
+export interface PickerSource {
+    package: string;
+    components: readonly string[];
+    descriptors?: readonly ComponentDescriptor[];
+}
+export interface PickerLayout {
+    item: string;
+    label: string;
+}
+export declare const uncategorised = "Other";
+export declare const layoutCategory: "Layout";
+export declare function buildPickerEntries(sources: readonly PickerSource[], layouts: readonly PickerLayout[], packageTitles?: Readonly<Record<string, string>>): PickerEntry[];
+export interface PickerRow {
+    entry: PickerEntry;
+    match: ComponentQueryMatch;
+}
+export interface PickerGroup {
+    id: string;
+    title: string;
+    frequent: boolean;
+    count: number;
+    expanded: boolean;
+    rows: PickerRow[];
+}
+export interface PickerViewInputs {
+    entries: readonly PickerEntry[];
+    usage: Readonly<Record<string, ComponentUsage>>;
+    query: string;
+    groups: Readonly<Record<string, boolean>>;
+    frequentTitle: string;
+}
+export declare const frequentGroupId = "frequent";
+export declare function buildPickerView({ entries, usage, query, groups, frequentTitle }: PickerViewInputs): PickerGroup[];
+export declare const visibleRows: (view: readonly PickerGroup[]) => {
+    group: PickerGroup;
+    row: PickerRow;
+}[];
+export declare function highlightParts(text: string, ranges: readonly [number, number][]): {
+    text: string;
+    marked: boolean;
+}[];

package/dist/screen-editor/ScreenEditor/Palette/componentPickerStorage.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentUsage } from '@cratis/scene.engine';
+export declare const componentUsageKey = "cratis.studio.componentUsage.v1";
+export declare const componentGroupsKey = "cratis.studio.componentGroups.v1";
+export interface ComponentPickerStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+export interface ComponentPickerMemory {
+    readUsage(): Record<string, ComponentUsage>;
+    recordAdded(key: string, now?: number): Record<string, ComponentUsage>;
+    readGroups(): Record<string, boolean>;
+    writeGroups(groups: Readonly<Record<string, boolean>>): void;
+}
+export declare const browserComponentPickerStorage: () => ComponentPickerStorage | undefined;
+export declare function createComponentPickerMemory(storage?: ComponentPickerStorage | undefined, userId?: string): ComponentPickerMemory;

package/dist/screen-editor/ScreenEditor/Palette/useComponentPalette.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { LayoutLabels } from '../Layouts/toLayoutContainerDescriptors';
+import type { ScreenEditorStrings } from '../Inspector/ScreenEditorStrings';
+import type { PaletteIcons, PaletteSource } from './buildPalette';
+import { type PickerEntry } from './componentPickerModel';
+import { type ComponentPickerMemory } from './componentPickerStorage';
+export interface ComponentPaletteInputs {
+    strings: ScreenEditorStrings;
+    layoutLabels: LayoutLabels;
+    icons: PaletteIcons;
+    paletteSources: readonly PaletteSource[];
+    onAdd: (entry: PickerEntry) => void;
+    memory?: ComponentPickerMemory;
+}
+export declare function useComponentPalette({ strings, layoutLabels, icons, paletteSources, onAdd, memory: given }: ComponentPaletteInputs): {
+    palette: ReactNode;
+    recordInserted: (key: string) => void;
+};