@flexkit/studio 0.0.31 → 0.0.33

package/dist/index.css

@@ -5,6 +5,7 @@
 @layer theme {
   :root, :host {
     --fk-color-red-100: oklch(93.6% 0.032 17.717);
+    --fk-color-red-400: oklch(70.4% 0.191 22.216);
     --fk-color-red-600: oklch(57.7% 0.245 27.325);
     --fk-color-red-800: oklch(44.4% 0.177 26.899);
     --fk-color-orange-600: oklch(64.6% 0.222 41.116);
@@ -23,10 +24,10 @@
     --fk-color-black: #000;
     --fk-color-white: #fff;
     --fk-spacing: 0.25rem;
-    --fk-breakpoint-lg: 64rem;
     --fk-container-xs: 20rem;
     --fk-container-sm: 24rem;
     --fk-container-lg: 32rem;
+    --fk-container-5xl: 64rem;
     --fk-text-xs: 0.75rem;
     --fk-text-xs--line-height: calc(1 / 0.75);
     --fk-text-sm: 0.875rem;
@@ -57,6 +58,7 @@
     --fk-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --fk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --fk-animate-spin: spin 1s linear infinite;
+    --fk-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --fk-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --fk-animate-bounce: bounce 1s infinite;
     --fk-blur-sm: 8px;
@@ -343,6 +345,9 @@
   .fk\:z-20 {
     z-index: 20;
   }
+  .fk\:z-30 {
+    z-index: 30;
+  }
   .fk\:z-50 {
     z-index: 50;
   }
@@ -602,14 +607,17 @@
     }
     :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       color: var(--tw-prose-code);
-      font-weight: 600;
+      font-weight: 500;
       font-size: 0.875em;
+      background-color: hsl(var(--muted));
+      border-radius: 0.25rem;
+      padding: 0.15em 0.4em;
     }
     :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
-      content: "`";
+      content: "";
     }
     :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
-      content: "`";
+      content: "";
     }
     :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       color: inherit;
@@ -1050,6 +1058,9 @@
   .fk\:mt-0\.5 {
     margin-top: calc(var(--fk-spacing) * 0.5);
   }
+  .fk\:mt-0\.75 {
+    margin-top: calc(var(--fk-spacing) * 0.75);
+  }
   .fk\:mt-1 {
     margin-top: calc(var(--fk-spacing) * 1);
   }
@@ -1104,6 +1115,9 @@
   .fk\:mb-4 {
     margin-bottom: calc(var(--fk-spacing) * 4);
   }
+  .fk\:mb-6 {
+    margin-bottom: calc(var(--fk-spacing) * 6);
+  }
   .fk\:mb-6\.5 {
     margin-bottom: calc(var(--fk-spacing) * 6.5);
   }
@@ -1330,12 +1344,12 @@
   .fk\:max-h-48 {
     max-height: calc(var(--fk-spacing) * 48);
   }
+  .fk\:max-h-55 {
+    max-height: calc(var(--fk-spacing) * 55);
+  }
   .fk\:max-h-80 {
     max-height: calc(var(--fk-spacing) * 80);
   }
-  .fk\:max-h-\[220px\] {
-    max-height: 220px;
-  }
   .fk\:max-h-\[300px\] {
     max-height: 300px;
   }
@@ -1360,15 +1374,15 @@
   .fk\:min-h-9\.5 {
     min-height: calc(var(--fk-spacing) * 9.5);
   }
+  .fk\:min-h-14 {
+    min-height: calc(var(--fk-spacing) * 14);
+  }
   .fk\:min-h-16 {
     min-height: calc(var(--fk-spacing) * 16);
   }
   .fk\:min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }
-  .fk\:min-h-\[3\.5rem\] {
-    min-height: 3.5rem;
-  }
   .fk\:min-h-\[150px\] {
     min-height: 150px;
   }
@@ -1399,6 +1413,9 @@
   .fk\:w-5 {
     width: calc(var(--fk-spacing) * 5);
   }
+  .fk\:w-6 {
+    width: calc(var(--fk-spacing) * 6);
+  }
   .fk\:w-7 {
     width: calc(var(--fk-spacing) * 7);
   }
@@ -1420,6 +1437,9 @@
   .fk\:w-28 {
     width: calc(var(--fk-spacing) * 28);
   }
+  .fk\:w-36 {
+    width: calc(var(--fk-spacing) * 36);
+  }
   .fk\:w-44 {
     width: calc(var(--fk-spacing) * 44);
   }
@@ -1486,30 +1506,30 @@
   .fk\:max-w-\(--skeleton-width\) {
     max-width: var(--skeleton-width);
   }
+  .fk\:max-w-5xl {
+    max-width: var(--fk-container-5xl);
+  }
   .fk\:max-w-60 {
     max-width: calc(var(--fk-spacing) * 60);
   }
   .fk\:max-w-64 {
     max-width: calc(var(--fk-spacing) * 64);
   }
+  .fk\:max-w-150 {
+    max-width: calc(var(--fk-spacing) * 150);
+  }
   .fk\:max-w-\[90vw\] {
     max-width: 90vw;
   }
   .fk\:max-w-\[95\%\] {
     max-width: 95%;
   }
-  .fk\:max-w-\[600px\] {
-    max-width: 600px;
-  }
   .fk\:max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
   .fk\:max-w-full {
     max-width: 100%;
   }
-  .fk\:max-w-screen-lg {
-    max-width: var(--fk-breakpoint-lg);
-  }
   .fk\:max-w-xs {
     max-width: var(--fk-container-xs);
   }
@@ -1619,6 +1639,9 @@
   .fk\:animate-bounce {
     animation: var(--fk-animate-bounce);
   }
+  .fk\:animate-ping {
+    animation: var(--fk-animate-ping);
+  }
   .fk\:animate-progress {
     animation: progress 1s infinite linear;
   }
@@ -1736,6 +1759,9 @@
   .fk\:gap-4 {
     gap: calc(var(--fk-spacing) * 4);
   }
+  .fk\:gap-5 {
+    gap: calc(var(--fk-spacing) * 5);
+  }
   .fk\:gap-8 {
     gap: calc(var(--fk-spacing) * 8);
   }
@@ -1815,9 +1841,6 @@
       margin-inline-end: calc(calc(var(--fk-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .fk\:gap-y-5 {
-    row-gap: calc(var(--fk-spacing) * 5);
-  }
   .fk\:self-end {
     align-self: flex-end;
   }
@@ -1899,6 +1922,10 @@
     border-top-right-radius: calc(var(--radius) - 2px);
     border-bottom-right-radius: calc(var(--radius) - 2px);
   }
+  .fk\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   .fk\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1911,6 +1938,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .fk\:border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
   .fk\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1961,6 +1992,12 @@
   .fk\:border-primary {
     border-color: hsl(var(--primary));
   }
+  .fk\:border-red-400\/30 {
+    border-color: var(--fk-color-red-400);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--fk-color-red-400) 30%, transparent);
+    }
+  }
   .fk\:border-sidebar-border {
     border-color: hsl(var(--sidebar-border));
   }
@@ -2261,15 +2298,15 @@
   .fk\:pr-9 {
     padding-right: calc(var(--fk-spacing) * 9);
   }
-  .fk\:pr-10 {
-    padding-right: calc(var(--fk-spacing) * 10);
-  }
   .fk\:pb-0 {
     padding-bottom: calc(var(--fk-spacing) * 0);
   }
   .fk\:pb-1\.5 {
     padding-bottom: calc(var(--fk-spacing) * 1.5);
   }
+  .fk\:pb-2 {
+    padding-bottom: calc(var(--fk-spacing) * 2);
+  }
   .fk\:pb-3 {
     padding-bottom: calc(var(--fk-spacing) * 3);
   }
@@ -3623,6 +3660,16 @@
       }
     }
   }
+  .fk\:hover\:bg-foreground\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--foreground));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--foreground)) 10%, transparent);
+        }
+      }
+    }
+  }
   .fk\:hover\:bg-github-hover\! {
     &:hover {
       @media (hover: hover) {
@@ -4079,6 +4126,25 @@
       }
     }
   }
+  .fk\:has-\[input\:focus-visible\]\:border-ring {
+    &:has(*:is(input:focus-visible)) {
+      border-color: hsl(var(--ring));
+    }
+  }
+  .fk\:has-\[input\:focus-visible\]\:ring-\[3px\] {
+    &:has(*:is(input:focus-visible)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .fk\:has-\[input\:focus-visible\]\:ring-ring\/50 {
+    &:has(*:is(input:focus-visible)) {
+      --tw-ring-color: hsl(var(--ring));
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, hsl(var(--ring)) 50%, transparent);
+      }
+    }
+  }
   .fk\:has-\[\>\[data-align\=block-end\]\]\:h-auto {
     &:has(>[data-align=block-end]) {
       height: auto;
@@ -4557,6 +4623,13 @@
       }
     }
   }
+  .fk\:\*\*\:data-\[slot\=scroll-area-viewport\]\:h-auto {
+    :is(& *) {
+      &[data-slot="scroll-area-viewport"] {
+        height: auto;
+      }
+    }
+  }
   .fk\:\*\:data-\[slot\=select-value\]\:line-clamp-1 {
     :is(& > *) {
       &[data-slot="select-value"] {
@@ -5041,11 +5114,6 @@
       border-bottom-width: 1px;
     }
   }
-  .fk\:sm\:flex {
-    @media (width >= 40rem) {
-      display: flex;
-    }
-  }
   .fk\:sm\:w-\[350px\] {
     @media (width >= 40rem) {
       width: 350px;
@@ -5129,19 +5197,9 @@
       }
     }
   }
-  .fk\:md\:block {
-    @media (width >= 48rem) {
-      display: block;
-    }
-  }
-  .fk\:md\:flex {
-    @media (width >= 48rem) {
-      display: flex;
-    }
-  }
-  .fk\:md\:w-\[100px\] {
+  .fk\:md\:w-25 {
     @media (width >= 48rem) {
-      width: 100px;
+      width: calc(var(--fk-spacing) * 25);
     }
   }
   .fk\:md\:flex-row {
@@ -5183,9 +5241,9 @@
       display: none;
     }
   }
-  .fk\:lg\:w-\[300px\] {
+  .fk\:lg\:w-75 {
     @media (width >= 64rem) {
-      width: 300px;
+      width: calc(var(--fk-spacing) * 75);
     }
   }
   .fk\:lg\:p-8 {
@@ -5318,6 +5376,15 @@
       --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
     }
   }
+  .fk\:dark\:hover\:bg-accent {
+    &:is([style="color-scheme: dark;"] *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: hsl(var(--accent));
+        }
+      }
+    }
+  }
   .fk\:dark\:hover\:bg-accent\/50 {
     &:is([style="color-scheme: dark;"] *) {
       &:hover {
@@ -5406,6 +5473,20 @@
       }
     }
   }
+  .fk\:dark\:data-\[state\=active\]\:border-transparent\! {
+    &:is([style="color-scheme: dark;"] *) {
+      &[data-state="active"] {
+        border-color: transparent !important;
+      }
+    }
+  }
+  .fk\:dark\:data-\[state\=active\]\:bg-background {
+    &:is([style="color-scheme: dark;"] *) {
+      &[data-state="active"] {
+        background-color: hsl(var(--background));
+      }
+    }
+  }
   .fk\:dark\:data-\[state\=active\]\:bg-input\/30 {
     &:is([style="color-scheme: dark;"] *) {
       &[data-state="active"] {
@@ -5519,6 +5600,11 @@
       width: calc(var(--fk-spacing) * 5);
     }
   }
+  .fk\:\[\&_\[data-slot\=scroll-area-scrollbar\]\[data-orientation\=vertical\]\]\:hidden {
+    & [data-slot=scroll-area-scrollbar][data-orientation=vertical] {
+      display: none;
+    }
+  }
   .fk\:\[\&_p\]\:leading-relaxed {
     & p {
       --tw-leading: var(--fk-leading-relaxed);
@@ -6167,6 +6253,24 @@
 html, body {
   height: 100%;
 }
+@layer components {
+  .flexkit-sidebar-desktop-block, .flexkit-sidebar-desktop-flex, .flexkit-sidebar-sm-flex {
+    display: none;
+  }
+  @media (width >= 40rem) {
+    .flexkit-sidebar-sm-flex {
+      display: flex;
+    }
+  }
+  @media (width >= 48rem) {
+    .flexkit-sidebar-desktop-block {
+      display: block;
+    }
+    .flexkit-sidebar-desktop-flex {
+      display: flex;
+    }
+  }
+}
 @layer base {
   :root {
     --font-geist-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji',
@@ -6759,6 +6863,12 @@ pre {
     transform: rotate(360deg);
   }
 }
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { Dispatch, JSX, SetStateAction, UIEvent, ReactElement } from 'react';
-import { A as AppContextType, a as ActionSetRelationship, b as ActionSetScope, C as Config, c as AppOptions, E as Entity, P as PluginOptions, d as ProjectOptions, O as OrderedAssetValue, S as SearchRequestProps, e as SearchResultItem, f as Attribute, U as UseEntityQueryParams, M as MappedEntityItem, F as FormEntityItem, I as ImageValue, g as Schema, h as AttributeValue, i as MultipleRelationshipConnection, j as SingleRelationshipConnection } from './types.d-CX3kDxFZ.js';
-export { D as DataType, k as DefaultValue, l as DefaultValueByDataType, m as EntityData, n as FormFieldParams, o as FormFieldProps, p as FormFieldValue, L as LogoProps, q as ScopeType, r as SingleProject } from './types.d-CX3kDxFZ.js';
+import { A as AppContextType, a as ActionSetRelationship, b as ActionSetScope, C as Config, c as AppOptions, E as Entity, P as PluginOptions, d as ProjectOptions, O as OrderedAssetValue, S as SearchRequestProps, e as SearchResultItem, f as Attribute, F as FieldGroup, g as AuthService, U as UseEntityQueryParams, M as MappedEntityItem, h as FormEntityItem, I as ImageValue, i as Schema, j as User, k as AttributeValue, l as MultipleRelationshipConnection, m as SingleRelationshipConnection } from './types.d-C12xWeN_.js';
+export { n as ConditionalFieldContext, o as ConditionalFlag, D as DataType, p as DefaultValue, q as DefaultValueByDataType, r as EntityData, s as FormFieldParams, t as FormFieldProps, u as FormFieldValue, L as LogoProps, v as ScopeType, w as SingleProject } from './types.d-C12xWeN_.js';
 export { Outlet, useLocation, useParams } from 'react-router-dom';
 import { OperationVariables, DocumentNode, ErrorLike } from '@apollo/client';
 export { gql } from '@apollo/client';
@@ -67,8 +67,10 @@ type UploadedAssetResult = UploadedFileResult & {
 type OpenFileDialogAndUploadOptions = {
     projectId: string | undefined;
     accept?: string;
+    files?: File[] | FileList;
     multiple?: boolean;
     maxBytes?: number;
+    onUploadStart?: () => void;
 };
 declare function useUploadAssets(): (options: OpenFileDialogAndUploadOptions) => Promise<UploadedAssetResult[]>;
 
@@ -117,31 +119,18 @@ declare function filterEntitiesForSpaces(schema: Entity[], userSpaces: string[]
 declare function canMutateData(role: string | null | undefined): boolean;
 declare function useCanMutate(): boolean;
 
-type User = {
-  id: string;
-  email: string;
-  display_name: string;
-  avatar_url: string;
-  role: string;
-  /** Space codes the user belongs to (owners receive every project space). */
-  spaces: string[];
-};
-
-type Auth = {
-  user: User | undefined;
-  logout: (projectId: string) => Promise<void>;
-};
-
-type AuthService = [boolean, Auth];
+declare const ALL_FIELDS_GROUP_NAME = "all";
+declare const ALL_FIELDS_GROUP: FieldGroup;
 
 declare function useAuth(): AuthService;
 
 type Props$1 = {
     scope: string | undefined;
     checked: boolean;
+    disabled?: boolean;
     onChange: (checked: boolean) => void;
 };
-declare function DefaultValueSwitch({ scope, checked, onChange }: Props$1): JSX.Element | null;
+declare function DefaultValueSwitch({ scope, checked, disabled, onChange }: Props$1): JSX.Element | null;
 
 type FetchMoreOptions = {
     variables: OperationVariables & {
@@ -200,6 +189,15 @@ type EntityQuery = {
     queryEntityName: string;
     query: string;
 };
+type EntityQueryCountMode = 'aggregate' | 'total';
+type SortNotNullWhere = {
+    NOT: {
+        [attributeName: string]: {
+            eq: null;
+        };
+    };
+};
+declare function getSortNotNullWhere(sort: unknown, entity: Entity | undefined): SortNotNullWhere | undefined;
 declare function getEntityQuery(entityNamePlural: string, scope: string, schema: Schema, options?: {
     selection?: 'list' | 'full';
     /**
@@ -208,11 +206,14 @@ declare function getEntityQuery(entityNamePlural: string, scope: string, schema:
      * still stands.
      */
     includeCount?: boolean;
+    countMode?: EntityQueryCountMode;
+    operationName?: string;
 }): EntityQuery;
 /**
  * Returns a string with the GraphQl query needed to mutate the dataToMutate object for the given entity and scope.
  */
 declare function getEntityUpdateMutation(entityNamePlural: string, entityId: string, scope: string, schema: Schema, originalData: FormEntityItem, dataToMutate: FormEntityItem, options?: {
+    currentUser?: User;
     responseFields?: string;
 }): string;
 /**
@@ -228,7 +229,9 @@ declare function getEntityDeleteWhere(ids: string | readonly string[]): {
         in: string[];
     };
 };
-declare function getEntityCreateMutation(entityNamePlural: string, schema: Schema, entityData: FormEntityItem, _id: string): string;
+declare function getEntityCreateMutation(entityNamePlural: string, schema: Schema, entityData: FormEntityItem, _id: string, options?: {
+    currentUser?: User;
+}): string;
 declare function getEntitySchema(schema: Schema, entityNamePlural: string): Entity | undefined;
 
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -389,4 +392,4 @@ declare const assetSchema: Entity;
 
 declare const tagSchema: Entity;
 
-export { AppOptions, Attribute, AttributeValue, type ConfigContext, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTableRowActions, DataTableSortedBy, DataTableToolbar, DataTableViewOptions, DefaultValueSwitch, Entity, type EntityListRowPatch, FlexkitStudio, FormEntityItem, IMAGES_BASE_URL, MappedEntityItem, PluginOptions, ProjectDisabled, Schema, SchemaError, SearchRequestProps, SearchResultItem, type UploadedFileResult, assetSchema, canAccessSpaces, canMutateData, defineConfig, defineEntity, filterAttributesForSpaces, filterEntitiesForSpaces, getEntityCreateMutation, getEntityDeleteMutation, getEntityDeleteWhere, getEntityQuery, getEntitySchema, getEntityUpdateMutation, tagSchema, useAppContext, useAppDispatch, useAuth, useCanMutate, useConfig, useDispatch, useEntityMutation, useEntityQuery, useGraphQLError, useGridColumnsDefinition, usePatchEntityList, useRefreshEntityList, useSearch, useUploadAssets };
+export { ALL_FIELDS_GROUP, ALL_FIELDS_GROUP_NAME, AppOptions, Attribute, AttributeValue, type ConfigContext, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTableRowActions, DataTableSortedBy, DataTableToolbar, DataTableViewOptions, DefaultValueSwitch, Entity, type EntityListRowPatch, FieldGroup, FlexkitStudio, FormEntityItem, IMAGES_BASE_URL, MappedEntityItem, PluginOptions, ProjectDisabled, Schema, SchemaError, SearchRequestProps, SearchResultItem, type UploadedFileResult, assetSchema, canAccessSpaces, canMutateData, defineConfig, defineEntity, filterAttributesForSpaces, filterEntitiesForSpaces, getEntityCreateMutation, getEntityDeleteMutation, getEntityDeleteWhere, getEntityQuery, getEntitySchema, getEntityUpdateMutation, getSortNotNullWhere, tagSchema, useAppContext, useAppDispatch, useAuth, useCanMutate, useConfig, useDispatch, useEntityMutation, useEntityQuery, useGraphQLError, useGridColumnsDefinition, usePatchEntityList, useRefreshEntityList, useSearch, useUploadAssets };