@contember/bindx-react 0.1.0

package/dist/jsx/componentBuilderCompat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentBuilderCompat.d.ts","sourceRoot":"","sources":["../../src/jsx/componentBuilderCompat.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAIpE;;;GAGG;AACH,wBAAgB,wBAAwB,CAEvC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAC7B,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAC3C,IAAI,CAKN;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAErC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAC7B,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAC3C,IAAI,CAKN"}

package/dist/jsx/componentFactory.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Component factory - builds React components with bindx selection metadata.
+ *
+ * This module handles the actual component creation, including:
+ * - Building React components with selection metadata
+ * - Implicit selection collection from JSX
+ * - Fragment creation
+ * - Selection provider interface
+ */
+import type { ReactNode } from 'react';
+import type { SelectionBuilder, SchemaDefinition } from '@contember/bindx';
+import { SchemaRegistry } from '@contember/bindx';
+import { type Condition } from './conditions.js';
+/**
+ * Marker symbol for identifying components created with createComponent
+ */
+export declare const COMPONENT_MARKER: unique symbol;
+/**
+ * Symbol for storing component brand on the component
+ */
+export declare const COMPONENT_BRAND: unique symbol;
+/**
+ * Symbol for stored selection metadata
+ */
+export declare const COMPONENT_SELECTIONS: unique symbol;
+export interface EntityConfig {
+    readonly entityName: string | null;
+    readonly selector?: (builder: SelectionBuilder<object>) => SelectionBuilder<object, object, object>;
+    readonly isInterface?: boolean;
+    readonly schema?: SchemaDefinition<Record<string, object>>;
+}
+/**
+ * Builds a bindx component from entity configs and render function.
+ *
+ * Note: Implicit selection collection is deferred (lazy) to avoid TDZ errors
+ * when components reference other components defined later in the same file.
+ */
+export declare function buildComponent<TProps extends object>(entityConfigs: Map<string, EntityConfig>, roles: readonly string[], renderFn: (props: TProps) => ReactNode, hasInterfacesMode: boolean, schemaRegistry: SchemaRegistry<Record<string, object>> | null, conditionFn: ((props: TProps) => Condition) | null): unknown;
+//# sourceMappingURL=componentFactory.d.ts.map

package/dist/jsx/componentFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentFactory.d.ts","sourceRoot":"","sources":["../../src/jsx/componentFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAGX,gBAAgB,EAEhB,gBAAgB,EAChB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACN,cAAc,EAKd,MAAM,kBAAkB,CAAA;AAQzB,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,iBAAiB,CAAA;AAMnE;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAA4B,CAAA;AAEzD;;GAEG;AACH,eAAO,MAAM,eAAe,eAA4B,CAAA;AAExD;;GAEG;AACH,eAAO,MAAM,oBAAoB,eAAiC,CAAA;AAMlE,MAAM,WAAW,YAAY;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAC1D;AAMD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,MAAM,EACnD,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,EACxC,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,EACtC,iBAAiB,EAAE,OAAO,EAC1B,cAAc,EAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,EAC7D,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,GAAG,IAAI,GAChD,OAAO,CAsHT"}

package/dist/jsx/components/Entity.d.ts

@@ -0,0 +1,82 @@
+import React, { type ReactElement } from 'react';
+import type { EntityAccessor } from '../types.js';
+import { type EntityDef, type EntityUniqueWhere, type FieldError, type CommonEntity } from '@contember/bindx';
+/**
+ * Base props shared by both edit and create modes.
+ * TRoleMap is the role map from EntityDef — entity type resolved as CommonEntity<TRoleMap>.
+ */
+interface EntityBaseProps<TRoleMap extends Record<string, object>> {
+    /** Entity definition reference */
+    entity: EntityDef<TRoleMap>;
+    /** Render function receiving typed entity accessor with direct field access */
+    children: (entity: EntityAccessor<CommonEntity<TRoleMap>>) => React.ReactNode;
+    /** Error fallback */
+    error?: (error: FieldError) => React.ReactNode;
+}
+/**
+ * Props for editing an existing entity (fetched by unique field)
+ */
+interface EntityByProps<TRoleMap extends Record<string, object>> extends EntityBaseProps<TRoleMap> {
+    /** Unique field(s) to identify the entity (e.g., { id: '...' } or { slug: '...' }) */
+    by: EntityUniqueWhere;
+    create?: never;
+    onPersisted?: never;
+    /** Loading fallback */
+    loading?: React.ReactNode;
+    /** Not found fallback */
+    notFound?: React.ReactNode;
+}
+/**
+ * Props for creating a new entity
+ */
+interface EntityCreateProps<TRoleMap extends Record<string, object>> extends EntityBaseProps<TRoleMap> {
+    by?: never;
+    /** Create a new entity instead of fetching an existing one */
+    create: true;
+    /** Callback when entity is persisted and receives server-assigned ID */
+    onPersisted?: (id: string) => void;
+    loading?: never;
+    notFound?: never;
+}
+/**
+ * Props for Entity component - union of edit mode (by) and create mode
+ */
+export type EntityProps<TRoleMap extends Record<string, object> = Record<string, object>> = EntityByProps<TRoleMap> | EntityCreateProps<TRoleMap>;
+/**
+ * Entity component - orchestrates the two-pass rendering approach.
+ *
+ * Supports two modes:
+ * - Edit mode: Fetches an existing entity by unique field(s)
+ * - Create mode: Creates a new entity locally
+ *
+ * @example Edit mode
+ * ```tsx
+ * <Entity entity={schema.Author} by={{ id: 'author-1' }}>
+ *   {author => (
+ *     <>
+ *       <Field field={author.fields.name} />
+ *       <HasMany field={author.fields.articles}>
+ *         {article => <Field field={article.fields.title} />}
+ *       </HasMany>
+ *     </>
+ *   )}
+ * </Entity>
+ * ```
+ *
+ * @example Create mode
+ * ```tsx
+ * <Entity entity={schema.Author} create onPersisted={id => navigate(`/authors/${id}`)}>
+ *   {author => (
+ *     <>
+ *       <Field field={author.fields.name} />
+ *       {author.isNew && <span>New author</span>}
+ *       {author.persistedId && <span>Saved as {author.persistedId}</span>}
+ *     </>
+ *   )}
+ * </Entity>
+ * ```
+ */
+declare function EntityImpl<TRoleMap extends Record<string, object>>(props: EntityProps<TRoleMap>): ReactElement | null;
+export declare const Entity: typeof EntityImpl;
+export {};
+//# sourceMappingURL=Entity.d.ts.map

package/dist/jsx/components/Entity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAIrH,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,aAAa,CAAA;AAChE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAiB,KAAK,UAAU,EAAgF,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI1M;;;GAGG;AACH,UAAU,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChE,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9C;AAED;;GAEG;AACH,UAAU,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACjG,sFAAsF;IACtF,EAAE,EAAE,iBAAiB,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,UAAU,iBAAiB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACrG,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACrF,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAuO9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1D,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC1B,YAAY,GAAG,IAAI,CA0BrB;AAGD,eAAO,MAAM,MAAM,EAAkC,OAAO,UAAU,CAAA"}

package/dist/jsx/components/EntityList.d.ts

@@ -0,0 +1,48 @@
+import React, { type ReactElement } from 'react';
+import { type EntityDef, type EntityWhere, type EntityOrderBy, type FieldError, type CommonEntity } from '@contember/bindx';
+import type { EntityAccessor } from '../types.js';
+/**
+ * Props for EntityList component
+ */
+export interface EntityListProps<TRoleMap extends Record<string, object> = Record<string, object>> {
+    /** Entity definition reference */
+    entity: EntityDef<TRoleMap>;
+    /** Optional filter criteria - type-safe based on entity schema */
+    filter?: EntityWhere<CommonEntity<TRoleMap>>;
+    /** Optional ordering - type-safe based on entity schema */
+    orderBy?: readonly EntityOrderBy<CommonEntity<TRoleMap>>[];
+    /** Optional limit */
+    limit?: number;
+    /** Optional offset */
+    offset?: number;
+    /** Render function receiving typed entity accessor with direct field access */
+    children: (entity: EntityAccessor<CommonEntity<TRoleMap>>, index: number) => React.ReactNode;
+    /** Loading fallback */
+    loading?: React.ReactNode;
+    /** Error fallback */
+    error?: (error: FieldError) => React.ReactNode;
+    /** Empty state fallback (when list has no items) */
+    empty?: React.ReactNode;
+}
+/**
+ * EntityList component - orchestrates the two-pass rendering approach for lists.
+ *
+ * Phase 1 (Collection): Renders children once with collector proxy to determine which fields are needed
+ * Phase 2 (Loading): Fetches data based on collected selection
+ * Phase 3 (Runtime): Renders children for each item with real data accessors
+ *
+ * @example
+ * ```tsx
+ * <EntityList entity={schema.Article} filter={{ published: true }} orderBy={[{ createdAt: 'desc' }]} limit={10}>
+ *   {(article, index) => (
+ *     <div key={article.id}>
+ *       <Field field={article.fields.title} />
+ *     </div>
+ *   )}
+ * </EntityList>
+ * ```
+ */
+declare function EntityListComponent<TRoleMap extends Record<string, object>>({ entity, filter, orderBy, limit, offset, children, loading, error: errorFallback, empty, }: EntityListProps<TRoleMap>): ReactElement | null;
+export declare const EntityList: typeof EntityListComponent;
+export {};
+//# sourceMappingURL=EntityList.d.ts.map

package/dist/jsx/components/EntityList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/EntityList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAQ,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAG3H,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChG,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC5C,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAA;IAC1D,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5F,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;IAC9C,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,mBAAmB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EACrE,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EAAE,aAAa,EACpB,KAAK,GACL,EAAE,eAAe,CAAC,QAAQ,CAAC,GAAG,YAAY,GAAG,IAAI,CAwDjD;AAGD,eAAO,MAAM,UAAU,EAA2C,OAAO,mBAAmB,CAAA"}

package/dist/jsx/components/Field.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement } from 'react';
+import type { FieldProps, SelectionProvider } from '../types.js';
+import { BINDX_COMPONENT } from '../types.js';
+/**
+ * Field component - renders a scalar field value
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - renders value as string
+ * <Field field={entity.fields.name} />
+ *
+ * // With custom render function
+ * <Field field={entity.fields.email}>
+ *   {field => <a href={`mailto:${field.value}`}>{field.value}</a>}
+ * </Field>
+ *
+ * // With format function
+ * <Field field={entity.fields.date} format={d => d?.toLocaleDateString()} />
+ * ```
+ */
+declare function FieldImpl<T>({ field, children, format }: FieldProps<T>): ReactElement | null;
+export declare const Field: typeof FieldImpl;
+declare const fieldWithSelection: typeof Field & SelectionProvider & {
+    [BINDX_COMPONENT]: true;
+};
+export { fieldWithSelection as FieldWithMeta };
+//# sourceMappingURL=Field.d.ts.map

package/dist/jsx/components/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAsB,iBAAiB,EAAY,MAAM,aAAa,CAAA;AAC9F,OAAO,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,SAAS,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAwBrF;AAED,eAAO,MAAM,KAAK,EAAsB,OAAO,SAAS,CAAA;AAGxD,QAAA,MAAM,kBAAkB,EAAY,OAAO,KAAK,GAAG,iBAAiB,GAAG;IAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA;AA4BlG,OAAO,EAAE,kBAAkB,IAAI,aAAa,EAAE,CAAA"}

package/dist/jsx/components/HasMany.d.ts

@@ -0,0 +1,34 @@
+import { type ReactElement } from 'react';
+import type { HasManyProps, SelectionProvider, AnyBrand } from '../types.js';
+import { BINDX_COMPONENT } from '../types.js';
+/**
+ * HasMany component - renders a has-many relation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <HasMany field={author.fields.articles}>
+ *   {article => (
+ *     <div>
+ *       <Field field={article.fields.title} />
+ *     </div>
+ *   )}
+ * </HasMany>
+ *
+ * // With query parameters
+ * <HasMany field={author.fields.articles} limit={5} orderBy={{ publishedAt: 'desc' }}>
+ *   {(article, index) => (
+ *     <div key={article.id}>
+ *       {index + 1}. <Field field={article.fields.title} />
+ *     </div>
+ *   )}
+ * </HasMany>
+ * ```
+ */
+declare function HasManyImpl<TEntity, TSelected = TEntity, TBrand extends AnyBrand = AnyBrand, TEntityName extends string = string, TSchema extends Record<string, object> = Record<string, object>>({ field, children }: HasManyProps<TEntity, TSelected, TBrand, TEntityName, TSchema>): ReactElement;
+export declare const HasMany: typeof HasManyImpl;
+declare const hasManyWithSelection: typeof HasMany & SelectionProvider & {
+    [BINDX_COMPONENT]: true;
+};
+export { hasManyWithSelection as HasManyWithMeta };
+//# sourceMappingURL=HasMany.d.ts.map

package/dist/jsx/components/HasMany.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HasMany.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/HasMany.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAQ,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,YAAY,EAAqC,iBAAiB,EAAa,QAAQ,EAAc,MAAM,aAAa,CAAA;AACtI,OAAO,EAAkB,eAAe,EAAa,MAAM,aAAa,CAAA;AAIxE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CACnB,OAAO,EACP,SAAS,GAAG,OAAO,EACnB,MAAM,SAAS,QAAQ,GAAG,QAAQ,EAClC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9D,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,YAAY,CASnG;AAED,eAAO,MAAM,OAAO,EAAwB,OAAO,WAAW,CAAA;AAG9D,QAAA,MAAM,oBAAoB,EAAc,OAAO,OAAO,GAAG,iBAAiB,GAAG;IAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA;AA0DxG,OAAO,EAAE,oBAAoB,IAAI,eAAe,EAAE,CAAA"}

package/dist/jsx/components/HasOne.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement } from 'react';
+import type { HasOneProps, SelectionProvider, AnyBrand } from '../types.js';
+import { BINDX_COMPONENT } from '../types.js';
+/**
+ * HasOne component - renders a has-one relation
+ *
+ * @example
+ * ```tsx
+ * <HasOne field={article.fields.author}>
+ *   {author => (
+ *     <div>
+ *       <Field field={author.fields.name} />
+ *       <Field field={author.fields.email} />
+ *     </div>
+ *   )}
+ * </HasOne>
+ * ```
+ */
+declare function HasOneImpl<TEntity, TSelected = TEntity, TBrand extends AnyBrand = AnyBrand, TEntityName extends string = string, TSchema extends Record<string, object> = Record<string, object>>({ field, children }: HasOneProps<TEntity, TSelected, TBrand, TEntityName, TSchema>): ReactElement;
+export declare const HasOne: typeof HasOneImpl;
+declare const hasOneWithSelection: typeof HasOne & SelectionProvider & {
+    [BINDX_COMPONENT]: true;
+};
+export { hasOneWithSelection as HasOneWithMeta };
+//# sourceMappingURL=HasOne.d.ts.map

package/dist/jsx/components/HasOne.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HasOne.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/HasOne.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAQ,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,WAAW,EAAqC,iBAAiB,EAAE,QAAQ,EAAa,MAAM,aAAa,CAAA;AACzH,OAAO,EAAkB,eAAe,EAAa,MAAM,aAAa,CAAA;AAIxE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAClB,OAAO,EACP,SAAS,GAAG,OAAO,EACnB,MAAM,SAAS,QAAQ,GAAG,QAAQ,EAClC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9D,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,YAAY,CAMlG;AAED,eAAO,MAAM,MAAM,EAAuB,OAAO,UAAU,CAAA;AAG3D,QAAA,MAAM,mBAAmB,EAAa,OAAO,MAAM,GAAG,iBAAiB,GAAG;IAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA;AAuCrG,OAAO,EAAE,mBAAmB,IAAI,cAAc,EAAE,CAAA"}

package/dist/jsx/components/HasRole.d.ts

@@ -0,0 +1,51 @@
+/**
+ * HasRole component — runtime role gating with optional entity type narrowing.
+ *
+ * Mode 1 (context gate): Renders children only if user has at least one specified role.
+ * Mode 2 (entity re-typing): Narrows entity accessor type to the role-specific entity type.
+ */
+import { type ReactNode, type ReactElement } from 'react';
+import type { EntityAccessor, EntityForRoles, RoleNames } from '@contember/bindx';
+/**
+ * Props for HasRole in context-gate mode (no entity).
+ */
+interface HasRoleGateProps<TRoles extends string> {
+    /** Roles to check — renders if user has at least one */
+    roles: readonly TRoles[];
+    /** Children to render if role check passes */
+    children: ReactNode;
+    entity?: never;
+}
+/**
+ * Props for HasRole in entity-narrowing mode.
+ * TRoleMap is inferred from the entity accessor's __roleMap phantom type.
+ */
+interface HasRoleEntityProps<TRoleMap extends Record<string, object>, TRoles extends RoleNames<TRoleMap>> {
+    /** Roles to expand to */
+    roles: readonly TRoles[];
+    /** Entity accessor to narrow */
+    entity: EntityAccessor<any, any, any, any, any, TRoleMap>;
+    /** Render function receiving the role-expanded entity */
+    children: (entity: EntityAccessor<EntityForRoles<TRoleMap, TRoles>>) => ReactNode;
+}
+export type HasRoleProps<TRoleMap extends Record<string, object> = Record<string, object>, TRoles extends RoleNames<TRoleMap> = RoleNames<TRoleMap>> = HasRoleGateProps<TRoles> | HasRoleEntityProps<TRoleMap, TRoles>;
+/**
+ * HasRole component — conditionally renders based on user roles.
+ *
+ * @example Context gate mode
+ * ```tsx
+ * <HasRole roles={['admin']}>
+ *   <AdminPanel />
+ * </HasRole>
+ * ```
+ *
+ * @example Entity narrowing mode
+ * ```tsx
+ * <HasRole roles={['admin']} entity={article}>
+ *   {adminArticle => <span>{adminArticle.internalNotes.value}</span>}
+ * </HasRole>
+ * ```
+ */
+export declare function HasRole<TRoleMap extends Record<string, object>, TRoles extends RoleNames<TRoleMap>>(props: HasRoleProps<TRoleMap, TRoles>): ReactElement | null;
+export {};
+//# sourceMappingURL=HasRole.d.ts.map

package/dist/jsx/components/HasRole.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HasRole.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/HasRole.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EACX,cAAc,EACd,cAAc,EACd,SAAS,EAET,MAAM,kBAAkB,CAAA;AAOzB;;GAEG;AACH,UAAU,gBAAgB,CAAC,MAAM,SAAS,MAAM;IAC/C,wDAAwD;IACxD,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,KAAK,CAAA;CACd;AAED;;;GAGG;AACH,UAAU,kBAAkB,CAC3B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACvC,MAAM,SAAS,SAAS,CAAC,QAAQ,CAAC;IAElC,yBAAyB;IACzB,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,gCAAgC;IAChC,MAAM,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAA;IACzD,yDAAyD;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,KAAK,SAAS,CAAA;CACjF;AAED,MAAM,MAAM,YAAY,CACvB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,MAAM,SAAS,SAAS,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC,IACrD,gBAAgB,CAAC,MAAM,CAAC,GAAG,kBAAkB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;AAMnE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACvC,MAAM,SAAS,SAAS,CAAC,QAAQ,CAAC,EACjC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,YAAY,GAAG,IAAI,CAkB5D"}

package/dist/jsx/components/If.d.ts

@@ -0,0 +1,51 @@
+import React, { type ReactElement } from 'react';
+import type { IfProps, SelectionProvider } from '../types.js';
+import { BINDX_COMPONENT } from '../types.js';
+/**
+ * If component - conditional rendering that ensures both branches are analyzed
+ *
+ * During collection phase, BOTH branches are analyzed to capture all required fields.
+ * During runtime, only the matching branch is rendered.
+ *
+ * Supports three types of conditions:
+ * 1. Boolean literals: `condition={true}` or `condition={someBoolean}`
+ * 2. FieldRef<boolean>: `condition={task.isActive}` - field value is used
+ * 3. Condition objects: `condition={cond.hasItems(task.developers)}` - composable DSL
+ *
+ * @example
+ * ```tsx
+ * // With boolean condition
+ * <If condition={showBio} then={
+ *   <Field field={author.bio} />
+ * } />
+ *
+ * // With field condition
+ * <If
+ *   condition={author.isPublished}
+ *   then={<Field field={author.publishedAt} />}
+ *   else={<span>Draft</span>}
+ * />
+ *
+ * // With condition DSL
+ * <If
+ *   condition={cond.hasItems(task.developers)}
+ *   then={<HasMany field={task.developers}>{dev => ...}</HasMany>}
+ * />
+ *
+ * // Complex conditions
+ * <If
+ *   condition={cond.and(
+ *     cond.hasItems(task.developers),
+ *     cond.eq(task.status, 'active')
+ *   )}
+ *   then={<span>Ready to work</span>}
+ * />
+ * ```
+ */
+declare function IfImpl({ condition, then: thenBranch, else: elseBranch }: IfProps): ReactElement | null;
+export declare const If: React.MemoExoticComponent<typeof IfImpl>;
+declare const ifWithSelection: typeof If & SelectionProvider & {
+    [BINDX_COMPONENT]: true;
+};
+export { ifWithSelection as IfWithMeta };
+//# sourceMappingURL=If.d.ts.map

package/dist/jsx/components/If.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"If.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAQ,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,OAAO,EAAqC,iBAAiB,EAAY,MAAM,aAAa,CAAA;AAC1G,OAAO,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CAe/F;AAED,eAAO,MAAM,EAAE,0CAAe,CAAA;AAG9B,QAAA,MAAM,eAAe,EAAS,OAAO,EAAE,GAAG,iBAAiB,GAAG;IAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA;AAqDzF,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,CAAA"}

package/dist/jsx/components/Show.d.ts

@@ -0,0 +1,33 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { FieldRef, SelectionProvider } from '../types.js';
+import { BINDX_COMPONENT } from '../types.js';
+/**
+ * Props for Show component
+ */
+export interface ShowProps<T> {
+    field: FieldRef<T>;
+    children: (value: NonNullable<T>) => ReactNode;
+    fallback?: ReactNode;
+}
+/**
+ * Show component - renders content only if field has a value
+ * Useful for nullable fields.
+ *
+ * @example
+ * ```tsx
+ * <Show field={article.fields.publishedAt}>
+ *   {value => <time>{value.toISOString()}</time>}
+ * </Show>
+ *
+ * <Show field={author.fields.bio} fallback={<span>No bio</span>}>
+ *   {bio => <p>{bio}</p>}
+ * </Show>
+ * ```
+ */
+declare function ShowImpl<T>({ field, children, fallback }: ShowProps<T>): ReactElement | null;
+export declare const Show: typeof ShowImpl;
+declare const showWithSelection: typeof Show & SelectionProvider & {
+    [BINDX_COMPONENT]: true;
+};
+export { showWithSelection as ShowWithMeta };
+//# sourceMappingURL=Show.d.ts.map

package/dist/jsx/components/Show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Show.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAQ,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAqC,iBAAiB,EAAE,MAAM,aAAa,CAAA;AACjG,OAAO,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7D;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,CAAA;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAMrF;AAED,eAAO,MAAM,IAAI,EAAqB,OAAO,QAAQ,CAAA;AAGrD,QAAA,MAAM,iBAAiB,EAAW,OAAO,IAAI,GAAG,iBAAiB,GAAG;IAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA;AAgB/F,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAE,CAAA"}

package/dist/jsx/components/index.d.ts

@@ -0,0 +1,8 @@
+export { Field, FieldWithMeta } from './Field.js';
+export { HasMany, HasManyWithMeta } from './HasMany.js';
+export { HasOne, HasOneWithMeta } from './HasOne.js';
+export { If, IfWithMeta } from './If.js';
+export { Show, ShowWithMeta, type ShowProps } from './Show.js';
+export { Entity, type EntityProps } from './Entity.js';
+export { EntityList, type EntityListProps } from './EntityList.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/jsx/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAGjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAGvD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGpD,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGxC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAG9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AAGtD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAA"}