@appkit/dek-lib 0.30.0 → 0.32.0

package/dist/components/CommandGroup/CommandGroup.d.ts

@@ -1,5 +1,8 @@
+import { CommandGroupAlignment } from './CommandGroup.styled';
 type Props = {
     groupKey: string;
+    title?: string;
+    align?: CommandGroupAlignment;
 };
-declare const CommandGroup: ({ groupKey }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const CommandGroup: ({ groupKey, title, align }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default CommandGroup;

package/dist/components/CommandGroup/CommandGroup.styled.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../../../ui/dist/components/View/View").ViewProps, never>> & Omit<({ label, direction, collapse, valign, halign, vscroll, hscroll, padding, paddingVert, paddingHorz, paddingRight, paddingLeft, paddingTop, paddingBottom, width, height, fixed, backColor, backColorHover, borderRadius, wrap, gap, gapRow, gapCol, className, onClick, style, children, }: import("../../../../ui/dist/components/View/View").ViewProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const CommandItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export type CommandGroupAlignment = 'left' | 'right';
+type ContainerProps = {
+    $align: CommandGroupAlignment;
+};
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../../../ui/dist/components/View/View").ViewProps, ContainerProps>> & Omit<({ label, direction, collapse, valign, halign, vscroll, hscroll, padding, paddingVert, paddingHorz, paddingRight, paddingLeft, paddingTop, paddingBottom, width, height, fixed, backColor, backColorHover, borderRadius, wrap, gap, gapRow, gapCol, className, onClick, style, children, }: import("../../../../ui/dist/components/View/View").ViewProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Group: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../../../ui/dist/components/View/View").ViewProps, ContainerProps>> & Omit<({ label, direction, collapse, valign, halign, vscroll, hscroll, padding, paddingVert, paddingHorz, paddingRight, paddingLeft, paddingTop, paddingBottom, width, height, fixed, backColor, backColorHover, borderRadius, wrap, gap, gapRow, gapCol, className, onClick, style, children, }: import("../../../../ui/dist/components/View/View").ViewProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const CommandItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps>>;
+export {};

package/dist/data/types/gql.d.ts

@@ -11,7 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": DocumentNode<types.UserDataQuery, types.Exact<{
+    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": DocumentNode<types.UserDataQuery, types.Exact<{
         [key: string]: never;
     }>>;
     "\n  query userPluginsAndIntegrations {\n    currentUser {\n      plugins {\n        name\n        code\n        version\n      }\n      integrations {\n        key\n        pluginName\n        pluginVersion\n        pluginConfig {\n          key\n          value\n        }\n      }\n    }\n  }\n": DocumentNode<types.UserPluginsAndIntegrationsQuery, types.Exact<{
@@ -37,7 +37,7 @@ export declare function gql(source: string): unknown;
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function gql(source: "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n"];
+export declare function gql(source: "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

package/dist/data/types/graphql.d.ts

@@ -91,9 +91,9 @@ export type AddCommandGroupResult = {
     error?: Maybe<Error>;
 };
 export type AddCommandInput = {
-    component: Scalars['String']['input'];
+    componentKey: Scalars['String']['input'];
     containerProps?: InputMaybe<Array<CommandPropInput>>;
-    integration: Scalars['String']['input'];
+    integrationKey: Scalars['String']['input'];
     props?: InputMaybe<Array<CommandPropInput>>;
     title: Scalars['String']['input'];
 };
@@ -172,9 +172,9 @@ export type AddUserResult = {
 };
 export type AddZoneInput = {
     boardId: Scalars['ID']['input'];
-    component: Scalars['String']['input'];
+    componentKey: Scalars['String']['input'];
     containerProps?: InputMaybe<Array<ZonePropInput>>;
-    integration: Scalars['String']['input'];
+    integrationKey: Scalars['String']['input'];
     key: Scalars['String']['input'];
     props?: InputMaybe<Array<ZonePropInput>>;
 };
@@ -325,11 +325,11 @@ export type Command = {
     __typename?: 'Command';
     archived: Scalars['Boolean']['output'];
     archivedAt?: Maybe<Scalars['DateTime']['output']>;
-    component: Scalars['String']['output'];
+    componentKey: Scalars['String']['output'];
     containerProps: Array<CommandProp>;
     createdAt: Scalars['DateTime']['output'];
     id: Scalars['ID']['output'];
-    integration: Scalars['String']['output'];
+    integrationKey: Scalars['String']['output'];
     props: Array<CommandProp>;
     title: Scalars['String']['output'];
     updatedAt: Scalars['DateTime']['output'];
@@ -991,9 +991,9 @@ export type UpdateCommandGroupResult = {
 };
 export type UpdateCommandInput = {
     archived?: InputMaybe<Scalars['Boolean']['input']>;
-    component?: InputMaybe<Scalars['String']['input']>;
+    componentKey?: InputMaybe<Scalars['String']['input']>;
     containerProps?: InputMaybe<Array<CommandPropInput>>;
-    integration?: InputMaybe<Scalars['String']['input']>;
+    integrationKey?: InputMaybe<Scalars['String']['input']>;
     props?: InputMaybe<Array<CommandPropInput>>;
     title?: InputMaybe<Scalars['String']['input']>;
 };
@@ -1067,9 +1067,9 @@ export type UpdateUserResult = {
 };
 export type UpdateZoneInput = {
     archived?: InputMaybe<Scalars['Boolean']['input']>;
-    component?: InputMaybe<Scalars['String']['input']>;
+    componentKey?: InputMaybe<Scalars['String']['input']>;
     containerProps?: InputMaybe<Array<ZonePropInput>>;
-    integration?: InputMaybe<Scalars['String']['input']>;
+    integrationKey?: InputMaybe<Scalars['String']['input']>;
     key?: InputMaybe<Scalars['String']['input']>;
     props?: InputMaybe<Array<ZonePropInput>>;
 };
@@ -1153,11 +1153,12 @@ export type Zone = {
     archived: Scalars['Boolean']['output'];
     archivedAt?: Maybe<Scalars['DateTime']['output']>;
     board: Board;
-    component: Scalars['String']['output'];
+    componentKey: Scalars['String']['output'];
     containerProps: Array<ZoneProp>;
     createdAt: Scalars['DateTime']['output'];
     id: Scalars['ID']['output'];
-    integration: Scalars['String']['output'];
+    integration: Integration;
+    integrationKey: Scalars['String']['output'];
     key: Scalars['String']['output'];
     props: Array<ZoneProp>;
     updatedAt: Scalars['DateTime']['output'];
@@ -1215,8 +1216,8 @@ export type UserDataQuery = {
             zones: Array<{
                 __typename?: 'Zone';
                 key: string;
-                integration: string;
-                component: string;
+                integrationKey: string;
+                componentKey: string;
                 props: Array<{
                     __typename?: 'ZoneProp';
                     key: string;
@@ -1236,8 +1237,8 @@ export type UserDataQuery = {
             commands: Array<{
                 __typename?: 'Command';
                 title: string;
-                integration: string;
-                component: string;
+                integrationKey: string;
+                componentKey: string;
                 props: Array<{
                     __typename?: 'CommandProp';
                     key: string;

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 export { default as Board } from './components/Board/Board';
 export { default as BoardProvider } from './components/BoardProvider/BoardProvider';
 export { default as CommandGroup } from './components/CommandGroup/CommandGroup';
-export { default as RouteResolver } from './components/RouteResolver/RouteResolver';
 export { default as Router } from './components/Router/Router';
+export { default as RouteResolver } from './components/RouteResolver/RouteResolver';
 export { default as Zone } from './components/Zone/Zone';
 export { default as loadCustomDekPlugin } from './lib/utils/loadCustomPlugin';
+export { default as useUserConfig } from './lib/hooks/useUserConfig';
+export { default as getPluginApi } from './lib/utils/getPluginApi';
+export { default as parsePropsForComponent } from './lib/utils/parsePropsForComponent';

package/dist/index.es.js

@@ -49811,8 +49811,8 @@ const Zone = (props) => {
     if (zones.length > 1) {
       const components = [];
       zones.forEach((zone2) => {
-        if (zone2.integration && zone2.component) {
-          const component = api2.integration(zone2.integration).component(zone2.component, {
+        if (zone2.integrationKey && zone2.componentKey) {
+          const component = api2.integration(zone2.integrationKey).component(zone2.componentKey, {
             ...parsePropsForComponent(api2, zone2.props),
             "aria-label": `zone-${props.id}`
           });
@@ -49843,9 +49843,9 @@ const Zone = (props) => {
     const zone = api2.board.zones.find(
       (z) => z.key === props.id
     );
-    if (zone && zone.integration && zone.component) {
-      label = `${props.id}: ${zone.integration}/${zone.component}`;
-      const component = api2.integration(zone.integration).component(zone.component, {
+    if (zone && zone.integrationKey && zone.componentKey) {
+      label = `${props.id}: ${zone.integrationKey}/${zone.componentKey}`;
+      const component = api2.integration(zone.integrationKey).component(zone.componentKey, {
         ...parsePropsForComponent(api2, zone.props),
         "aria-label": `zone-${props.id}`
       });
@@ -66270,11 +66270,11 @@ async function getClient(email, password) {
     cache: new InMemoryCache()
   });
 }
-const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
+const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrationKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "componentKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrationKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "componentKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
 const UserPluginsAndIntegrationsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userPluginsAndIntegrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "plugins" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "version" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginName" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginVersion" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginConfig" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] };
 const UserChangeDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "subscription", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "user" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }] } }] } }] } }] };
 const documents = {
-  "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
+  "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
   "\n  query userPluginsAndIntegrations {\n    currentUser {\n      plugins {\n        name\n        code\n        version\n      }\n      integrations {\n        key\n        pluginName\n        pluginVersion\n        pluginConfig {\n          key\n          value\n        }\n      }\n    }\n  }\n": UserPluginsAndIntegrationsDocument,
   "\n  subscription userChange {\n    userChange {\n      user {\n        id\n      }\n    }\n  }\n": UserChangeDocument
 };
@@ -66300,8 +66300,8 @@ const USER_DATA_QUERY = gql(`
         }
         zones {
           key
-          integration
-          component
+          integrationKey
+          componentKey
           props {
             key
             value
@@ -66317,8 +66317,8 @@ const USER_DATA_QUERY = gql(`
         key
         commands {
           title
-          integration
-          component
+          integrationKey
+          componentKey
           props {
             key
             value
@@ -66861,7 +66861,7 @@ async function fetchUserPlugins(email, password) {
   result.integrations.push({
     key: "base",
     pluginName: "base",
-    pluginVersion: "0.30.0",
+    pluginVersion: "0.32.0",
     pluginConfig: []
   });
   return result;
@@ -67036,7 +67036,7 @@ const Header = ({ height = 70 }) => {
 };
 const About = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, direction: "vert", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.30.0"}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.32.0"}` }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "From Appkit" })
   ] });
 };
@@ -103027,7 +103027,7 @@ async function updatePlugins(email, password) {
         {
           key: "base",
           pluginName: "base",
-          pluginVersion: "0.30.0",
+          pluginVersion: "0.32.0",
           pluginConfig: []
         }
       ],
@@ -104160,7 +104160,7 @@ const Router = ({ userConfig, transitionDelay: transitionDelay2 }) => {
   if (!data) {
     return null;
   }
-  const defaultBoard = data.boards.length > 0 ? data.boards[0].key : "empty";
+  const defaultBoard = data.boards.length > 0 ? data.boards[data.boards.length - 1].key : "empty";
   if (location2 === "/") {
     setLocation(`/${defaultBoard}`);
   } else {
@@ -104215,15 +104215,22 @@ const BoardProvider = ({ email, password, plugin, pluginConfig }) => {
   ] });
 };
 const Container = styled(u0)`
+  display: flex;
+  flex-direction: column;
+  ${({ $align }) => $align === "right" ? `align-items: flex-end;` : ""}
+`;
+const Group = styled(u0)`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  align-content: flex-start;
+  ${({ $align }) => $align === "right" ? `justify-content: flex-end;` : ""}
 `;
 const CommandItem = styled.div`
-  margin-left: 10px;
   margin-top: 10px;
+  ${({ $align }) => $align === "right" ? "margin-right: 10px;" : "margin-left: 10px;"}
 `;
-const CommandGroup = ({ groupKey }) => {
+const CommandGroup = ({ groupKey, title, align = "left" }) => {
   const api2 = getPluginApi();
   const group = api2.commandGroups.find(
     (g) => g.key == groupKey
@@ -104231,13 +104238,27 @@ const CommandGroup = ({ groupKey }) => {
   if (!group) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: group.commands.map((command, idx) => {
-    const instance = api2.integration(command.integration).component(
-      command.component,
-      parsePropsForComponent(api2, command.props)
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(CommandItem, { children: instance }, idx);
-  }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { $align: align, children: [
+    title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      h4,
+      {
+        size: "large",
+        weight: "bold",
+        family: "heading",
+        paddingLeft: 14,
+        paddingTop: 10,
+        paddingRight: 10,
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { $align: align, children: group.commands.map((command, idx) => {
+      const instance = api2.integration(command.integrationKey).component(
+        command.componentKey,
+        parsePropsForComponent(api2, command.props)
+      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CommandItem, { $align: align, children: instance }, idx);
+    }) })
+  ] });
 };
 const CommandGroup$1 = CommandGroup;
 async function loadCustomPlugin(code) {
@@ -104263,5 +104284,8 @@ export {
   RouteResolver,
   Router,
   Zone,
-  loadCustomPlugin as loadCustomDekPlugin
+  getPluginApi,
+  loadCustomPlugin as loadCustomDekPlugin,
+  parsePropsForComponent,
+  useUserConfig
 };

package/dist/index.umd.js

@@ -49828,8 +49828,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       if (zones.length > 1) {
         const components = [];
         zones.forEach((zone2) => {
-          if (zone2.integration && zone2.component) {
-            const component = api2.integration(zone2.integration).component(zone2.component, {
+          if (zone2.integrationKey && zone2.componentKey) {
+            const component = api2.integration(zone2.integrationKey).component(zone2.componentKey, {
               ...parsePropsForComponent(api2, zone2.props),
               "aria-label": `zone-${props.id}`
             });
@@ -49860,9 +49860,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       const zone = api2.board.zones.find(
         (z) => z.key === props.id
       );
-      if (zone && zone.integration && zone.component) {
-        label = `${props.id}: ${zone.integration}/${zone.component}`;
-        const component = api2.integration(zone.integration).component(zone.component, {
+      if (zone && zone.integrationKey && zone.componentKey) {
+        label = `${props.id}: ${zone.integrationKey}/${zone.componentKey}`;
+        const component = api2.integration(zone.integrationKey).component(zone.componentKey, {
           ...parsePropsForComponent(api2, zone.props),
           "aria-label": `zone-${props.id}`
         });
@@ -66287,11 +66287,11 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       cache: new InMemoryCache()
     });
   }
-  const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
+  const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrationKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "componentKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrationKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "componentKey" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
   const UserPluginsAndIntegrationsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userPluginsAndIntegrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "plugins" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "version" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginName" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginVersion" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginConfig" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] };
   const UserChangeDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "subscription", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "user" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }] } }] } }] } }] };
   const documents = {
-    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
+    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integrationKey\n          componentKey\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
     "\n  query userPluginsAndIntegrations {\n    currentUser {\n      plugins {\n        name\n        code\n        version\n      }\n      integrations {\n        key\n        pluginName\n        pluginVersion\n        pluginConfig {\n          key\n          value\n        }\n      }\n    }\n  }\n": UserPluginsAndIntegrationsDocument,
     "\n  subscription userChange {\n    userChange {\n      user {\n        id\n      }\n    }\n  }\n": UserChangeDocument
   };
@@ -66317,8 +66317,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         }
         zones {
           key
-          integration
-          component
+          integrationKey
+          componentKey
           props {
             key
             value
@@ -66334,8 +66334,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         key
         commands {
           title
-          integration
-          component
+          integrationKey
+          componentKey
           props {
             key
             value
@@ -66878,7 +66878,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     result.integrations.push({
       key: "base",
       pluginName: "base",
-      pluginVersion: "0.30.0",
+      pluginVersion: "0.32.0",
       pluginConfig: []
     });
     return result;
@@ -67053,7 +67053,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   };
   const About = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, direction: "vert", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.30.0"}` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.32.0"}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "From Appkit" })
     ] });
   };
@@ -103044,7 +103044,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           {
             key: "base",
             pluginName: "base",
-            pluginVersion: "0.30.0",
+            pluginVersion: "0.32.0",
             pluginConfig: []
           }
         ],
@@ -104177,7 +104177,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     if (!data) {
       return null;
     }
-    const defaultBoard = data.boards.length > 0 ? data.boards[0].key : "empty";
+    const defaultBoard = data.boards.length > 0 ? data.boards[data.boards.length - 1].key : "empty";
     if (location2 === "/") {
       setLocation(`/${defaultBoard}`);
     } else {
@@ -104233,14 +104233,21 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   };
   const Container = styled(u0)`
   display: flex;
+  flex-direction: column;
+  ${({ $align }) => $align === "right" ? `align-items: flex-end;` : ""}
+`;
+  const Group = styled(u0)`
+  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  align-content: flex-start;
+  ${({ $align }) => $align === "right" ? `justify-content: flex-end;` : ""}
 `;
   const CommandItem = styled.div`
-  margin-left: 10px;
   margin-top: 10px;
+  ${({ $align }) => $align === "right" ? "margin-right: 10px;" : "margin-left: 10px;"}
 `;
-  const CommandGroup = ({ groupKey }) => {
+  const CommandGroup = ({ groupKey, title, align = "left" }) => {
     const api2 = getPluginApi();
     const group = api2.commandGroups.find(
       (g) => g.key == groupKey
@@ -104248,13 +104255,27 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     if (!group) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: group.commands.map((command, idx) => {
-      const instance = api2.integration(command.integration).component(
-        command.component,
-        parsePropsForComponent(api2, command.props)
-      );
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(CommandItem, { children: instance }, idx);
-    }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { $align: align, children: [
+      title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        h4,
+        {
+          size: "large",
+          weight: "bold",
+          family: "heading",
+          paddingLeft: 14,
+          paddingTop: 10,
+          paddingRight: 10,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { $align: align, children: group.commands.map((command, idx) => {
+        const instance = api2.integration(command.integrationKey).component(
+          command.componentKey,
+          parsePropsForComponent(api2, command.props)
+        );
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(CommandItem, { $align: align, children: instance }, idx);
+      }) })
+    ] });
   };
   const CommandGroup$1 = CommandGroup;
   async function loadCustomPlugin(code) {
@@ -104279,6 +104300,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   exports2.RouteResolver = RouteResolver;
   exports2.Router = Router;
   exports2.Zone = Zone;
+  exports2.getPluginApi = getPluginApi;
   exports2.loadCustomDekPlugin = loadCustomPlugin;
+  exports2.parsePropsForComponent = parsePropsForComponent;
+  exports2.useUserConfig = useUserConfig;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@appkit/dek-lib",
   "private": false,
-  "version": "0.30.0",
+  "version": "0.32.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 5173 --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "codegen": "graphql-codegen",
+    "generate": "graphql-codegen",
     "preview": "vite preview"
   },
   "dependencies": {