@open-mercato/documents 0.6.8-develop.7016.1.4ed7b1e49d

package/src/modules/documents/backend/documents/components/EntityPicker.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from 'react'
+import { Search } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { LoadingMessage } from '@open-mercato/ui/backend/detail'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DocumentEntityType } from '../../../lib/entityRegistry'
+import { sanitizeDocumentsDisplayLabel } from '../../../lib/displayLabels'
+import { EntityPickerResults } from './EntityPickerResults'
+import { useEntitySearch, type EntitySearchItem } from './useEntitySearch'
+
+export type EntityPickerSelection = {
+  type: DocumentEntityType
+  id: string
+  label: string
+  href: string
+  values: Record<string, string | null>
+}
+export type EntityPickerProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onPick: (pick: EntityPickerSelection) => void
+  typeFilter?: DocumentEntityType[]
+  excludeId?: string
+}
+
+export function EntityPicker({ open, onOpenChange, onPick, typeFilter, excludeId }: EntityPickerProps) {
+  const t = useT()
+  const inputId = `documents-entity-picker-${React.useId()}`
+  const listId = `${inputId}-results`
+  const search = useEntitySearch(open, typeFilter, excludeId)
+
+  const selectItem = React.useCallback((item: EntitySearchItem) => {
+    if (!search.activeEntry || !search.isResultCurrent()) return
+    const href = search.activeEntry.resolveHref(item)
+    const label = sanitizeDocumentsDisplayLabel(item.label)
+    if (!href || !label) return
+    const rawItem = item.rawItem ?? {}
+    const values = Object.fromEntries(search.activeEntry.tokenFields.map((field) => [
+      field.field,
+      sanitizeDocumentsDisplayLabel(field.extract(rawItem)),
+    ]))
+    onPick({ type: search.activeEntry.type, id: item.id, label, href, values })
+    onOpenChange(false)
+  }, [onOpenChange, onPick, search.activeEntry, search.isResultCurrent])
+
+  const pickActiveItem = React.useCallback(() => {
+    const item = search.items[search.activeIndex]
+    if (item) selectItem(item)
+  }, [search.activeIndex, search.items, selectItem])
+
+  const handleSearchKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && search.items.length === 0) {
+      event.preventDefault()
+      search.setActiveIndex(-1)
+      return
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      search.setActiveIndex((index) => Math.min(index + 1, search.items.length - 1))
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      search.setActiveIndex((index) => Math.max(index - 1, 0))
+      return
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      pickActiveItem()
+    }
+  }, [pickActiveItem, search.items.length, search.setActiveIndex])
+
+  if (!open) return null
+  const hasQuery = search.searchValue.trim().length > 0
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="lg" onKeyDown={(event) => {
+        if (event.defaultPrevented) return
+        if (event.key === 'Escape') { event.preventDefault(); onOpenChange(false); return }
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); pickActiveItem(); return }
+      }}>
+        <DialogHeader>
+          <DialogTitle>{t('documents.entityPicker.title')}</DialogTitle>
+          <DialogDescription>{t('documents.entityPicker.description')}</DialogDescription>
+        </DialogHeader>
+        {!search.isRegistryReady ? (
+          <div role="status" aria-live="polite">
+            <LoadingMessage label={t('documents.entityPicker.loadingRegistry')} />
+          </div>
+        ) : search.availableEntries.length > 0 ? (
+          <div className="space-y-4">
+            <SegmentedControl
+              value={search.activeEntry?.type}
+              onValueChange={(value) => {
+                const entry = search.availableEntries.find((candidate) => candidate.type === value)
+                if (!entry) return
+                search.setActiveType(entry.type)
+                search.setActiveIndex(-1)
+              }}
+              aria-label={t('documents.entityPicker.typeTabs')}
+              className="grid h-auto w-full grid-cols-2 gap-1 rounded-xl p-1 sm:grid-cols-4"
+            >
+              {search.availableEntries.map((entry) => (
+                <SegmentedControlItem
+                  key={entry.type}
+                  value={entry.type}
+                  className="h-auto min-h-7 min-w-0 whitespace-normal px-2 py-1 text-center leading-tight"
+                >
+                  {t(entry.labelKey)}
+                </SegmentedControlItem>
+              ))}
+            </SegmentedControl>
+            <div className="space-y-2">
+              <Label htmlFor={inputId}>{t('documents.entityPicker.searchLabel')}</Label>
+              <Input
+                id={inputId}
+                value={search.searchValue}
+                onChange={(event) => search.setSearchValue(event.target.value)}
+                placeholder={t('documents.entityPicker.searchPlaceholder')}
+                leftIcon={<Search />}
+                role="combobox"
+                aria-expanded={hasQuery}
+                aria-controls={listId}
+                aria-autocomplete="list"
+                aria-activedescendant={search.activeIndex >= 0 && search.activeIndex < search.items.length ? `${listId}-option-${search.activeIndex}` : undefined}
+                onKeyDown={handleSearchKeyDown}
+              />
+            </div>
+            <EntityPickerResults
+              listId={listId}
+              items={search.items}
+              activeIndex={search.activeIndex}
+              hasQuery={hasQuery}
+              isLoading={search.isLoading}
+              hasSearched={search.hasSearched}
+              hasError={search.hasError}
+              prompt={t('documents.entityPicker.prompt')}
+              loadingLabel={t('documents.entityPicker.loading')}
+              emptyLabel={t('documents.entityPicker.noMatches')}
+              errorLabel={t('documents.entityPicker.error.search')}
+              retryLabel={t('documents.actions.retry')}
+              onRetry={search.retry}
+              onActiveIndexChange={search.setActiveIndex}
+              onSelect={selectItem}
+            />
+          </div>
+        ) : (
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-8 text-center text-sm text-muted-foreground">
+            {t(search.allEntries.length === 0 ? 'documents.entityPicker.empty' : 'documents.entityPicker.unavailable')}
+          </div>
+        )}
+        <DialogFooter><Button type="button" variant="outline" onClick={() => onOpenChange(false)}>{t('documents.actions.cancel')}</Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default EntityPicker

package/src/modules/documents/backend/documents/components/EntityPickerResults.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { EntitySearchItem } from './useEntitySearch'
+
+type EntityPickerResultsProps = {
+  listId: string
+  items: EntitySearchItem[]
+  activeIndex: number
+  hasQuery: boolean
+  isLoading: boolean
+  hasSearched: boolean
+  hasError: boolean
+  prompt: string
+  loadingLabel: string
+  emptyLabel: string
+  errorLabel: string
+  retryLabel: string
+  onRetry: () => void
+  onActiveIndexChange: (index: number) => void
+  onSelect: (item: EntitySearchItem) => void
+}
+
+export function EntityPickerResults(props: EntityPickerResultsProps) {
+  return (
+    <div id={props.listId} role="listbox" className="min-h-56 max-h-80 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground">
+      {!props.hasQuery ? <div className="px-3 py-8 text-center text-sm text-muted-foreground">{props.prompt}</div> : null}
+      {props.hasQuery && props.isLoading ? (
+        <div className="flex items-center justify-center gap-2 px-3 py-8 text-sm text-muted-foreground"><Spinner className="size-4" /><span>{props.loadingLabel}</span></div>
+      ) : null}
+      {props.hasQuery && !props.isLoading && props.hasSearched && props.items.length === 0 ? (
+        <div className="px-3 py-8 text-center text-sm text-muted-foreground">{props.emptyLabel}</div>
+      ) : null}
+      {props.hasQuery && !props.isLoading && props.hasError ? (
+        <ErrorMessage
+          label={props.errorLabel}
+          action={<Button type="button" size="sm" variant="outline" onClick={props.onRetry}>{props.retryLabel}</Button>}
+        />
+      ) : null}
+      {!props.isLoading && !props.hasError && props.items.map((item, index) => (
+        <Button
+          id={`${props.listId}-option-${index}`}
+          key={item.id}
+          type="button"
+          variant="ghost"
+          role="option"
+          aria-selected={index === props.activeIndex}
+          className={cn('h-auto w-full justify-start px-3 py-2 text-left', index === props.activeIndex ? 'bg-accent text-accent-foreground' : null)}
+          onMouseDown={(event) => event.preventDefault()}
+          onMouseEnter={() => props.onActiveIndexChange(index)}
+          onClick={() => props.onSelect(item)}
+        >
+          <span className="min-w-0">
+            <span className="block truncate text-sm font-medium">{item.label}</span>
+            {item.subtitle ? <span className="block truncate text-xs text-muted-foreground">{item.subtitle}</span> : null}
+          </span>
+        </Button>
+      ))}
+    </div>
+  )
+}

package/src/modules/documents/backend/documents/components/NewFromTemplateDialog.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from 'react'
+import { Search } from 'lucide-react'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { TemplatePreview } from './TemplatePreview'
+import { TemplateSlotFields } from './TemplateSlotFields'
+import { useTemplateInstantiation, type PresetTemplateContext } from './useTemplateInstantiation'
+
+type NewFromTemplateDialogProps = {
+  open: boolean
+  folderId?: string | null
+  presetContext?: PresetTemplateContext
+  onOpenChange: (open: boolean) => void
+}
+
+export function NewFromTemplateDialog(props: NewFromTemplateDialogProps) {
+  const t = useT()
+  const titleInputId = React.useId()
+  const templateSearchId = React.useId()
+  const flow = useTemplateInstantiation(props)
+  const canCreate = Boolean(
+    flow.selectedTemplate && flow.preview && !flow.missingRequired &&
+    flow.preview.unresolvedTokens.length === 0 && !flow.isSubmitting,
+  )
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent size="xl" onKeyDown={(event) => {
+        if (event.key === 'Escape') props.onOpenChange(false)
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter' && canCreate) {
+          event.preventDefault()
+          void flow.submit()
+        }
+      }}>
+        <DialogHeader>
+          <DialogTitle>{t('documents.templates.instantiate.title')}</DialogTitle>
+          <DialogDescription>{t('documents.templates.instantiate.description')}</DialogDescription>
+        </DialogHeader>
+        {flow.isLoading ? <LoadingMessage label={t('documents.templates.instantiate.loading')} /> : null}
+        {flow.loadError ? (
+          <ErrorMessage
+            label={flow.loadError}
+            action={<Button type="button" size="sm" variant="outline" onClick={flow.retryTemplates}>{t('documents.actions.retry')}</Button>}
+          />
+        ) : null}
+        {!flow.isLoading && !flow.loadError ? (
+          <div className="grid gap-6 lg:grid-cols-2">
+            <div className="space-y-5">
+              <div className="space-y-2">
+                <Label htmlFor={templateSearchId}>{t('documents.templates.search.label')}</Label>
+                <Input id={templateSearchId} value={flow.templateSearch} onChange={(event) => flow.setTemplateSearch(event.target.value)} leftIcon={<Search />} placeholder={t('documents.templates.list.searchPlaceholder')} />
+              </div>
+              <RadioGroup
+                className="max-h-48 overflow-y-auto"
+                value={flow.selectedTemplateId ?? ''}
+                onValueChange={flow.setSelectedTemplateId}
+                aria-label={t('documents.templates.instantiate.template')}
+                orientation="vertical"
+              >
+                {flow.templates.length === 0 ? (
+                  <p className="rounded-md border border-border bg-muted/20 p-3 text-sm text-muted-foreground">{t('documents.templates.instantiate.empty')}</p>
+                ) : null}
+                {flow.templates.map((template) => {
+                  const compatible = props.presetContext
+                    ? template.contextSlots.some((slot) => slot.entityType === props.presetContext?.entityType)
+                    : false
+                  const optionId = `${templateSearchId}-${template.id}`
+                  return (
+                    <Label
+                      key={template.id}
+                      htmlFor={optionId}
+                      className={`flex w-full cursor-pointer items-center justify-between gap-3 rounded-md border p-3 text-left font-normal transition-colors ${template.id === flow.selectedTemplateId ? 'border-accent-indigo bg-accent-indigo/5' : 'border-border bg-background hover:bg-muted/50'}`}
+                    >
+                      <span className="flex min-w-0 items-center gap-3">
+                        <Radio id={optionId} value={template.id} />
+                        <span className="min-w-0"><span className="block truncate font-medium">{template.name}</span>{template.description ? <span className="block truncate text-xs text-muted-foreground">{template.description}</span> : null}</span>
+                      </span>
+                      {compatible ? <Tag variant="info">{t('documents.templates.compatible')}</Tag> : null}
+                    </Label>
+                  )
+                })}
+              </RadioGroup>
+              {flow.selectedTemplate ? (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor={titleInputId}>{t('documents.templates.instantiate.documentTitle')}</Label>
+                    <Input id={titleInputId} value={flow.title} onChange={(event) => flow.setTitle(event.target.value)} placeholder={t('documents.templates.instantiate.documentTitlePlaceholder')} />
+                  </div>
+                  <TemplateSlotFields
+                    slots={flow.selectedTemplate.contextSlots}
+                    selections={flow.selections}
+                    onSelectionChange={(slot, selection) => flow.setSelections((current) => ({ ...current, [slot]: selection }))}
+                  />
+                </>
+              ) : null}
+            </div>
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">{t('documents.templates.preview.title')}</h3>
+              {flow.previewError ? (
+                <Alert status="error">
+                  <AlertDescription className="flex flex-wrap items-center justify-between gap-3">
+                    <span>{flow.previewError}</span>
+                    <Button type="button" size="sm" variant="outline" onClick={flow.retryPreview}>{t('documents.actions.retry')}</Button>
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+              <TemplatePreview preview={flow.preview} isLoading={flow.isPreviewLoading} />
+            </div>
+          </div>
+        ) : null}
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => props.onOpenChange(false)} disabled={flow.isSubmitting}>{t('documents.actions.cancel')}</Button>
+          <Button type="button" onClick={() => void flow.submit()} disabled={!canCreate}>{t('documents.templates.instantiate.actions.create')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default NewFromTemplateDialog

package/src/modules/documents/backend/documents/components/PrincipalPicker.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from 'react'
+import { Search, X } from 'lucide-react'
+import { Alert } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { PrincipalType } from './principalPickerModel'
+import { usePrincipalPicker } from './usePrincipalPicker'
+
+type PrincipalPickerProps = {
+  documentId: string
+  principalType: PrincipalType
+  value: string | null
+  onChange: (id: string | null, label: string | null) => void
+  disabled?: boolean
+  id?: string
+}
+
+export function PrincipalPicker({ documentId, principalType, value, onChange, disabled = false, id }: PrincipalPickerProps) {
+  const t = useT()
+  const generatedId = React.useId()
+  const inputId = id ?? `documents-principal-picker-${generatedId}`
+  const listId = `${inputId}-list`
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const fallbackLabel = t(principalType === 'user' ? 'documents.users.unknown' : 'documents.roles.unknown')
+  const picker = usePrincipalPicker({ documentId, principalType, value, onChange, disabled, fallbackLabel })
+  const placeholder = t(principalType === 'user' ? 'documents.share.picker.searchUser' : 'documents.share.picker.searchRole')
+
+  return (
+    <div ref={containerRef} className="relative space-y-1" onKeyDown={picker.handleKeyDown} onBlur={(event) => {
+      if (event.relatedTarget instanceof Node && containerRef.current?.contains(event.relatedTarget)) return
+      picker.setOpen(false)
+    }}>
+      <div className="flex items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <Input
+            id={inputId}
+            className="w-full"
+            value={picker.displayValue}
+            onChange={(event) => picker.changeSearch(event.target.value)}
+            onFocus={() => { if (!picker.selectedLabel && !picker.fetchError) picker.setOpen(true) }}
+            placeholder={placeholder}
+            disabled={disabled}
+            leftIcon={<Search />}
+            role="combobox"
+            aria-expanded={picker.open && !picker.fetchError}
+            aria-controls={listId}
+            aria-autocomplete="list"
+            aria-activedescendant={!picker.fetchError && picker.activeIndex >= 0 ? `${listId}-option-${picker.activeIndex}` : undefined}
+          />
+        </div>
+        {picker.displayValue ? <IconButton type="button" variant="ghost" className="shrink-0" aria-label={t('documents.share.picker.clear')} onClick={picker.clear} disabled={disabled}><X aria-hidden="true" /></IconButton> : null}
+      </div>
+      {picker.fetchError ? <Alert status="error" size="sm" action={<Button type="button" size="sm" variant="outline" onMouseDown={(event) => event.preventDefault()} onClick={picker.retry} disabled={disabled || picker.loading}>{t('documents.share.picker.retry')}</Button>}>{t('documents.share.picker.error')}</Alert> : null}
+      {picker.open && !picker.fetchError ? (
+        <div id={listId} role="listbox" className="absolute z-popover mt-1 max-h-72 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg">
+          {picker.loading ? <div className="px-3 py-2 text-sm text-muted-foreground">{t('documents.share.picker.loading')}</div> : null}
+          {!picker.loading && picker.hasFetched && !picker.items.length ? <div className="px-3 py-2 text-sm text-muted-foreground">{t('documents.share.picker.noMatches')}</div> : null}
+          {!picker.loading && picker.items.length ? <div className="space-y-1">{picker.items.map((item, index) => (
+            <Button
+              id={`${listId}-option-${index}`}
+              key={item.id}
+              type="button"
+              variant="ghost"
+              role="option"
+              aria-selected={index === picker.activeIndex}
+              disabled={disabled}
+              className={cn('h-auto w-full justify-start px-3 py-2 text-left', index === picker.activeIndex && 'bg-accent text-accent-foreground')}
+              onMouseDown={(event) => event.preventDefault()}
+              onMouseEnter={() => picker.setActiveIndex(index)}
+              onClick={() => picker.selectOption(item)}
+            >
+              <span className="min-w-0"><span className="block truncate text-sm font-medium">{item.primary}</span>{item.secondary ? <span className="block truncate text-xs text-muted-foreground">{item.secondary}</span> : null}</span>
+            </Button>
+          ))}</div> : null}
+          {!picker.loading && picker.hasFetched ? <div className="border-t border-border px-2 py-2">
+            {picker.total > 0 ? <p className="mb-2 text-xs text-muted-foreground">{t('documents.share.picker.showing', { count: picker.items.length, total: picker.total })}</p> : null}
+            {picker.page < picker.totalPages ? <Button type="button" size="sm" variant="outline" className="w-full" onMouseDown={(event) => event.preventDefault()} onClick={picker.loadMore} disabled={picker.loadingMore}>{picker.loadingMore ? t('documents.share.picker.loading') : t('documents.share.picker.loadMore')}</Button> : null}
+          </div> : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default PrincipalPicker

package/src/modules/documents/backend/documents/components/ShareDialog.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { ShareDialogAddForm } from './ShareDialogAddForm'
+import { ShareDialogList } from './ShareDialogList'
+import { useShareDialog } from './useShareDialog'
+
+type ShareDialogProps = {
+  documentId: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * Explicit live share capability. Omission retains the pre-capability public
+   * component contract; new in-app callers must always pass the server value.
+   * Server authorization remains authoritative for every mutation.
+   * @default true
+   */
+  canManage?: boolean
+}
+
+export function ShareDialog({
+  documentId,
+  open,
+  onOpenChange,
+  canManage = true,
+}: ShareDialogProps) {
+  const t = useT()
+  const dialog = useShareDialog({ documentId, open, canManage })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="lg"
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter' && !dialog.isSubmitting) {
+            event.preventDefault()
+            void dialog.addShare()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{t('documents.share.dialog.title')}</DialogTitle>
+          <DialogDescription>{t('documents.share.dialog.description')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <ShareDialogAddForm
+            documentId={documentId}
+            principalType={dialog.principalType}
+            principalId={dialog.principalId}
+            permission={dialog.permission}
+            canManage={canManage}
+            isSubmitting={dialog.isSubmitting}
+            onPrincipalTypeChange={dialog.changePrincipalType}
+            onPrincipalIdChange={dialog.setPrincipalId}
+            onPermissionChange={dialog.setPermission}
+            onSubmit={dialog.addShare}
+          />
+          <ShareDialogList
+            shares={dialog.shares}
+            isLoading={dialog.isLoading}
+            error={dialog.error}
+            canManage={canManage}
+            pendingShareIds={dialog.pendingShareIds}
+            onRetry={() => void dialog.reload()}
+            onPermissionChange={dialog.changePermission}
+            onRemove={dialog.removeShare}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('documents.actions.close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/documents/backend/documents/components/ShareDialogAddForm.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { PrincipalPicker } from './PrincipalPicker'
+import {
+  PRINCIPAL_TYPES,
+  SHARE_PERMISSIONS,
+  readPermission,
+  readPrincipalType,
+  type DocumentSharePermission,
+  type DocumentSharePrincipalType,
+} from './shareDialogModel'
+
+type ShareDialogAddFormProps = {
+  documentId: string
+  principalType: DocumentSharePrincipalType
+  principalId: string
+  permission: DocumentSharePermission
+  canManage: boolean
+  isSubmitting: boolean
+  onPrincipalTypeChange: (value: DocumentSharePrincipalType) => void
+  onPrincipalIdChange: (value: string) => void
+  onPermissionChange: (value: DocumentSharePermission) => void
+  onSubmit: () => Promise<void>
+}
+
+export function ShareDialogAddForm({
+  documentId,
+  principalType,
+  principalId,
+  permission,
+  canManage,
+  isSubmitting,
+  onPrincipalTypeChange,
+  onPrincipalIdChange,
+  onPermissionChange,
+  onSubmit,
+}: ShareDialogAddFormProps) {
+  const t = useT()
+  const principalInputId = React.useId()
+  const principalTypeInputId = React.useId()
+  const permissionInputId = React.useId()
+  const disabled = !canManage || isSubmitting
+
+  return (
+    <form
+      className="grid gap-3 rounded-lg border border-border bg-muted/20 p-4 md:grid-cols-3"
+      onSubmit={(event) => {
+        event.preventDefault()
+        void onSubmit()
+      }}
+    >
+      <div className="space-y-2">
+        <Label htmlFor={principalInputId}>{t('documents.share.dialog.principalSearch')}</Label>
+        <PrincipalPicker
+          documentId={documentId}
+          id={principalInputId}
+          principalType={principalType}
+          value={principalId || null}
+          onChange={(id) => onPrincipalIdChange(id ?? '')}
+          disabled={disabled}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={principalTypeInputId}>{t('documents.share.dialog.principalType')}</Label>
+        <Select
+          value={principalType}
+          onValueChange={(value) => onPrincipalTypeChange(readPrincipalType(value))}
+          disabled={disabled}
+        >
+          <SelectTrigger id={principalTypeInputId}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {PRINCIPAL_TYPES.map((type) => (
+              <SelectItem key={type} value={type}>
+                {t(`documents.share.principalTypes.${type}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={permissionInputId}>{t('documents.share.dialog.permission')}</Label>
+        <Select
+          value={permission}
+          onValueChange={(value) => onPermissionChange(readPermission(value))}
+          disabled={disabled}
+        >
+          <SelectTrigger id={permissionInputId}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SHARE_PERMISSIONS.map((tier) => (
+              <SelectItem key={tier} value={tier}>
+                {t(`documents.permissions.${tier}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="md:col-span-3">
+        <Button type="submit" disabled={disabled || principalId.trim().length === 0}>
+          {t('documents.share.dialog.add')}
+        </Button>
+      </div>
+    </form>
+  )
+}