@open-mercato/ui 0.7.1-develop.7152.1.a69e92f9c9 → 0.7.1-develop.7153.1.7145d295e6

package/dist/backend/forms/FormHeader.js

@@ -36,16 +36,18 @@ function EditHeader({
   backHref,
   resolvedBackLabel,
   title,
+  titleHeadingLevel = 2,
   actions,
   actionsContent
 }) {
+  const TitleHeading = titleHeadingLevel === 1 ? "h1" : "h2";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       backHref ? /* @__PURE__ */ jsxs(Link, { href: backHref, className: "text-sm text-muted-foreground hover:text-foreground", children: [
         "\u2190 ",
         resolvedBackLabel
       ] }) : null,
-      title ? /* @__PURE__ */ jsx("div", { className: "text-base font-medium", children: title }) : null
+      title ? /* @__PURE__ */ jsx(TitleHeading, { className: "text-base font-medium", children: title }) : null
     ] }),
     actionsContent ?? (actions ? /* @__PURE__ */ jsx(FormActionButtons, { ...actions }) : null)
   ] });

package/dist/backend/forms/FormHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/forms/FormHeader.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { usePathname, useSearchParams } from 'next/navigation'\nimport { Trash2, Loader2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { FormActionButtons, type FormActionButtonsProps } from './FormActionButtons'\nimport { ActionsDropdown, type ActionItem } from './ActionsDropdown'\nimport { InjectionSpot } from '../injection/InjectionSpot'\n\n/** Base props shared by both modes */\ntype FormHeaderBaseProps = {\n  /** Back link URL */\n  backHref?: string\n  /** Back link label */\n  backLabel?: string\n}\n\n/** Edit mode: compact header for CrudForm pages */\nexport type FormHeaderEditProps = FormHeaderBaseProps & {\n  mode?: 'edit'\n  /** Small title next to the back link */\n  title?: string\n  /** Structured action buttons (Delete/Cancel/Save) */\n  actions?: FormActionButtonsProps\n  /** Custom right-side content (overrides `actions`) */\n  actionsContent?: React.ReactNode\n}\n\n/** Detail mode: large header for view/detail pages */\nexport type FormHeaderDetailProps = FormHeaderBaseProps & {\n  mode: 'detail'\n  /** Large title -- string renders as h1; ReactNode for InlineTextEditor */\n  title?: React.ReactNode\n  /** Small uppercase entity type label above the title */\n  entityTypeLabel?: string\n  /** Subtitle text below the title */\n  subtitle?: string\n  /** Status badge or similar element below the title */\n  statusBadge?: React.ReactNode\n  /** Context actions grouped into an \"Actions\" dropdown (preferred) */\n  menuActions?: ActionItem[]\n  /** Optional label for actions dropdown trigger */\n  menuLabel?: string\n  /** Trigger style for actions dropdown */\n  menuTriggerMode?: 'label' | 'icon'\n  /** Accessible label used when trigger is icon-only */\n  menuAriaLabel?: string\n  /** Optional utility actions (icon-only) displayed before menu actions */\n  utilityActions?: React.ReactNode\n  /** Delete action -- rendered as a standalone destructive button next to the dropdown */\n  onDelete?: () => void\n  /** Delete button label */\n  deleteLabel?: string\n  /** Whether delete is in progress */\n  isDeleting?: boolean\n  /** Fallback: fully custom right-side content (overrides menuActions + onDelete) */\n  actionsContent?: React.ReactNode\n}\n\nexport type FormHeaderProps = FormHeaderEditProps | FormHeaderDetailProps\n\nexport function FormHeader(props: FormHeaderProps) {\n  const t = useT()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const resolvedBackLabel = props.backLabel ?? t('ui.navigation.back')\n  const injectionContext = React.useMemo(\n    () => ({\n      path: pathname ?? '',\n      query: searchParams?.toString() ?? '',\n    }),\n    [pathname, searchParams],\n  )\n\n  if (props.mode === 'detail') {\n    return (\n      <>\n        <DetailHeader {...props} resolvedBackLabel={resolvedBackLabel} />\n        <InjectionSpot spotId=\"form-header:detail\" context={injectionContext} />\n      </>\n    )\n  }\n\n  return (\n    <>\n      <EditHeader {...props} resolvedBackLabel={resolvedBackLabel} />\n      <InjectionSpot spotId=\"form-header:edit\" context={injectionContext} />\n    </>\n  )\n}\n\nfunction EditHeader({\n  backHref,\n  resolvedBackLabel,\n  title,\n  actions,\n  actionsContent,\n}: FormHeaderEditProps & { resolvedBackLabel: string }) {\n  return (\n    <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3\">\n      <div className=\"flex items-center gap-3\">\n        {backHref ? (\n          <Link href={backHref} className=\"text-sm text-muted-foreground hover:text-foreground\">\n            &larr; {resolvedBackLabel}\n          </Link>\n        ) : null}\n        {title ? <div className=\"text-base font-medium\">{title}</div> : null}\n      </div>\n      {actionsContent ?? (actions ? <FormActionButtons {...actions} /> : null)}\n    </div>\n  )\n}\n\nfunction DetailHeader({\n  backHref,\n  resolvedBackLabel,\n  title,\n  entityTypeLabel,\n  subtitle,\n  statusBadge,\n  menuActions,\n  menuLabel,\n  menuTriggerMode,\n  menuAriaLabel,\n  utilityActions,\n  onDelete,\n  deleteLabel,\n  isDeleting,\n  actionsContent,\n}: FormHeaderDetailProps & { resolvedBackLabel: string }) {\n  const t = useT()\n  const resolvedDeleteLabel = deleteLabel ?? t('ui.forms.actions.delete')\n\n  const hasActions = actionsContent || utilityActions || menuActions?.length || onDelete\n\n  return (\n    <div className=\"flex flex-col gap-2 md:gap-3 md:flex-row md:items-center md:justify-between\">\n      <div className=\"flex flex-wrap items-center gap-2 md:gap-3 min-w-0\">\n        {backHref ? (\n          <Link\n            href={backHref}\n            className=\"inline-flex items-center text-sm text-muted-foreground hover:text-foreground shrink-0\"\n          >\n            <span aria-hidden className=\"mr-1 text-base\">&larr;</span>\n            <span className=\"sr-only\">{resolvedBackLabel}</span>\n          </Link>\n        ) : null}\n        <div className=\"space-y-0.5 md:space-y-1 min-w-0\">\n          {entityTypeLabel ? (\n            <p className=\"text-xs uppercase text-muted-foreground\">{entityTypeLabel}</p>\n          ) : null}\n          {title ? (\n            typeof title === 'string' ? (\n              <h1 className=\"text-lg md:text-2xl font-semibold leading-tight truncate\">{title}</h1>\n            ) : (\n              <div className=\"text-lg md:text-2xl font-semibold leading-tight\">{title}</div>\n            )\n          ) : null}\n          {statusBadge}\n          {subtitle ? (\n            <p className=\"text-xs md:text-sm text-muted-foreground\">{subtitle}</p>\n          ) : null}\n        </div>\n      </div>\n      {hasActions ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {actionsContent ? actionsContent : (\n            <>\n              {utilityActions}\n              {menuActions?.length ? (\n                <ActionsDropdown\n                  items={menuActions}\n                  label={menuLabel}\n                  triggerMode={menuTriggerMode}\n                  ariaLabel={menuAriaLabel}\n                />\n              ) : null}\n              {onDelete ? (\n                <Button\n                  type=\"button\"\n                  variant=\"destructive\"\n                  size=\"sm\"\n                  onClick={onDelete}\n                  disabled={isDeleting}\n                >\n                  {isDeleting ? (\n                    <Loader2 className=\"size-4 mr-2 animate-spin\" />\n                  ) : (\n                    <Trash2 className=\"size-4 mr-2\" />\n                  )}\n                  {resolvedDeleteLabel}\n                </Button>\n              ) : null}\n            </>\n          )}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { usePathname, useSearchParams } from 'next/navigation'\nimport { Trash2, Loader2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { FormActionButtons, type FormActionButtonsProps } from './FormActionButtons'\nimport { ActionsDropdown, type ActionItem } from './ActionsDropdown'\nimport { InjectionSpot } from '../injection/InjectionSpot'\n\n/** Base props shared by both modes */\ntype FormHeaderBaseProps = {\n  /** Back link URL */\n  backHref?: string\n  /** Back link label */\n  backLabel?: string\n}\n\n/** Edit mode: compact header for CrudForm pages */\nexport type FormHeaderEditProps = FormHeaderBaseProps & {\n  mode?: 'edit'\n  /** Small title next to the back link */\n  title?: string\n  /** Semantic level for the title. Defaults to 2 for section-level compatibility. */\n  titleHeadingLevel?: 1 | 2\n  /** Structured action buttons (Delete/Cancel/Save) */\n  actions?: FormActionButtonsProps\n  /** Custom right-side content (overrides `actions`) */\n  actionsContent?: React.ReactNode\n}\n\n/** Detail mode: large header for view/detail pages */\nexport type FormHeaderDetailProps = FormHeaderBaseProps & {\n  mode: 'detail'\n  /** Large title -- string renders as h1; ReactNode for InlineTextEditor */\n  title?: React.ReactNode\n  /** Small uppercase entity type label above the title */\n  entityTypeLabel?: string\n  /** Subtitle text below the title */\n  subtitle?: string\n  /** Status badge or similar element below the title */\n  statusBadge?: React.ReactNode\n  /** Context actions grouped into an \"Actions\" dropdown (preferred) */\n  menuActions?: ActionItem[]\n  /** Optional label for actions dropdown trigger */\n  menuLabel?: string\n  /** Trigger style for actions dropdown */\n  menuTriggerMode?: 'label' | 'icon'\n  /** Accessible label used when trigger is icon-only */\n  menuAriaLabel?: string\n  /** Optional utility actions (icon-only) displayed before menu actions */\n  utilityActions?: React.ReactNode\n  /** Delete action -- rendered as a standalone destructive button next to the dropdown */\n  onDelete?: () => void\n  /** Delete button label */\n  deleteLabel?: string\n  /** Whether delete is in progress */\n  isDeleting?: boolean\n  /** Fallback: fully custom right-side content (overrides menuActions + onDelete) */\n  actionsContent?: React.ReactNode\n}\n\nexport type FormHeaderProps = FormHeaderEditProps | FormHeaderDetailProps\n\nexport function FormHeader(props: FormHeaderProps) {\n  const t = useT()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const resolvedBackLabel = props.backLabel ?? t('ui.navigation.back')\n  const injectionContext = React.useMemo(\n    () => ({\n      path: pathname ?? '',\n      query: searchParams?.toString() ?? '',\n    }),\n    [pathname, searchParams],\n  )\n\n  if (props.mode === 'detail') {\n    return (\n      <>\n        <DetailHeader {...props} resolvedBackLabel={resolvedBackLabel} />\n        <InjectionSpot spotId=\"form-header:detail\" context={injectionContext} />\n      </>\n    )\n  }\n\n  return (\n    <>\n      <EditHeader {...props} resolvedBackLabel={resolvedBackLabel} />\n      <InjectionSpot spotId=\"form-header:edit\" context={injectionContext} />\n    </>\n  )\n}\n\nfunction EditHeader({\n  backHref,\n  resolvedBackLabel,\n  title,\n  titleHeadingLevel = 2,\n  actions,\n  actionsContent,\n}: FormHeaderEditProps & { resolvedBackLabel: string }) {\n  const TitleHeading = titleHeadingLevel === 1 ? 'h1' : 'h2'\n  return (\n    <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3\">\n      <div className=\"flex items-center gap-3\">\n        {backHref ? (\n          <Link href={backHref} className=\"text-sm text-muted-foreground hover:text-foreground\">\n            &larr; {resolvedBackLabel}\n          </Link>\n        ) : null}\n        {title ? <TitleHeading className=\"text-base font-medium\">{title}</TitleHeading> : null}\n      </div>\n      {actionsContent ?? (actions ? <FormActionButtons {...actions} /> : null)}\n    </div>\n  )\n}\n\nfunction DetailHeader({\n  backHref,\n  resolvedBackLabel,\n  title,\n  entityTypeLabel,\n  subtitle,\n  statusBadge,\n  menuActions,\n  menuLabel,\n  menuTriggerMode,\n  menuAriaLabel,\n  utilityActions,\n  onDelete,\n  deleteLabel,\n  isDeleting,\n  actionsContent,\n}: FormHeaderDetailProps & { resolvedBackLabel: string }) {\n  const t = useT()\n  const resolvedDeleteLabel = deleteLabel ?? t('ui.forms.actions.delete')\n\n  const hasActions = actionsContent || utilityActions || menuActions?.length || onDelete\n\n  return (\n    <div className=\"flex flex-col gap-2 md:gap-3 md:flex-row md:items-center md:justify-between\">\n      <div className=\"flex flex-wrap items-center gap-2 md:gap-3 min-w-0\">\n        {backHref ? (\n          <Link\n            href={backHref}\n            className=\"inline-flex items-center text-sm text-muted-foreground hover:text-foreground shrink-0\"\n          >\n            <span aria-hidden className=\"mr-1 text-base\">&larr;</span>\n            <span className=\"sr-only\">{resolvedBackLabel}</span>\n          </Link>\n        ) : null}\n        <div className=\"space-y-0.5 md:space-y-1 min-w-0\">\n          {entityTypeLabel ? (\n            <p className=\"text-xs uppercase text-muted-foreground\">{entityTypeLabel}</p>\n          ) : null}\n          {title ? (\n            typeof title === 'string' ? (\n              <h1 className=\"text-lg md:text-2xl font-semibold leading-tight truncate\">{title}</h1>\n            ) : (\n              <div className=\"text-lg md:text-2xl font-semibold leading-tight\">{title}</div>\n            )\n          ) : null}\n          {statusBadge}\n          {subtitle ? (\n            <p className=\"text-xs md:text-sm text-muted-foreground\">{subtitle}</p>\n          ) : null}\n        </div>\n      </div>\n      {hasActions ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {actionsContent ? actionsContent : (\n            <>\n              {utilityActions}\n              {menuActions?.length ? (\n                <ActionsDropdown\n                  items={menuActions}\n                  label={menuLabel}\n                  triggerMode={menuTriggerMode}\n                  ariaLabel={menuAriaLabel}\n                />\n              ) : null}\n              {onDelete ? (\n                <Button\n                  type=\"button\"\n                  variant=\"destructive\"\n                  size=\"sm\"\n                  onClick={onDelete}\n                  disabled={isDeleting}\n                >\n                  {isDeleting ? (\n                    <Loader2 className=\"size-4 mr-2 animate-spin\" />\n                  ) : (\n                    <Trash2 className=\"size-4 mr-2\" />\n                  )}\n                  {resolvedDeleteLabel}\n                </Button>\n              ) : null}\n            </>\n          )}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/backend/messages/MessageComposer.js

@@ -104,6 +104,7 @@ function MessageComposer(props) {
     {
       backHref,
       title: composeWithContextPreview.composerTitle,
+      titleHeadingLevel: 2,
       fields: createMessageComposeFormGroups(composeWithContextPreview),
       initialValues: {},
       submitLabel: composeWithContextPreview.submitLabel,

package/dist/backend/messages/MessageComposer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/messages/MessageComposer.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Forward, Reply, Send } from 'lucide-react'\nimport { CrudForm } from '../CrudForm'\nimport { Button } from '../../primitives/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { getMessageUiComponentRegistry } from '@open-mercato/core/modules/messages/components/utils/typeUiRegistry'\nimport { getMessageObjectType } from '@open-mercato/core/modules/messages/lib/message-objects-registry'\nimport { createMessageComposeFormGroups } from './message-compose-form-groups'\nimport { useMessageCompose } from './useMessageCompose'\nimport type { MessageComposerContextObject, MessageComposerProps } from './message-composer.types'\n\nexport type {\n  MessageComposerContextObject,\n  MessageComposerProps,\n  MessageComposerRequiredActionConfig,\n  MessageComposerRequiredActionOption,\n  MessageComposerVariant,\n  MessageTypeItem,\n} from './message-composer.types'\n\nfunction ContextObjectPreview({ contextObject }: { contextObject: MessageComposerContextObject }) {\n  const t = useT()\n  const registry = getMessageUiComponentRegistry()\n  const previewComponentKey = `${contextObject.entityModule}:${contextObject.entityType}`\n  const PreviewComponent = registry.objectPreviewComponents[previewComponentKey]\n    ?? registry.objectPreviewComponents['messages:default']\n  const objectType = getMessageObjectType(contextObject.entityModule, contextObject.entityType)\n\n  if (PreviewComponent) {\n    return (\n      <PreviewComponent\n        entityId={contextObject.entityId}\n        entityModule={contextObject.entityModule}\n        entityType={contextObject.entityType}\n        actionRequired={contextObject.actionRequired}\n        actionType={contextObject.actionType}\n        actionLabel={contextObject.actionLabel}\n        previewData={contextObject.previewData ?? undefined}\n        icon={objectType?.icon}\n      />\n    )\n  }\n\n  return (\n    <div className=\"space-y-1\">\n      <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n        {t('messages.composer.contextPreview.title', 'Context object')}\n      </p>\n      <p className=\"text-sm font-medium\">\n        {contextObject.entityModule}:{contextObject.entityType}\n      </p>\n      <p className=\"text-xs font-mono text-muted-foreground\">\n        {contextObject.entityId}\n      </p>\n    </div>\n  )\n}\n\nexport function MessageComposer(props: MessageComposerProps) {\n  const compose = useMessageCompose(props)\n  const inlineBackHref = props.inlineBackHref\n  const SubmitIcon = compose.variant === 'reply'\n    ? Reply\n    : compose.variant === 'forward'\n      ? Forward\n      : Send\n\n  const inlineExtraActions = compose.inline\n    ? (\n      <>\n        {compose.variant === 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleSaveDraft}\n            disabled={compose.submitting}\n          >\n            {compose.t('messages.saveDraft', 'Save draft')}\n          </Button>\n        ) : null}\n        {compose.variant !== 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleBack}\n            disabled={compose.submitting}\n          >\n            {compose.t('ui.forms.actions.cancel', 'Cancel')}\n          </Button>\n        ) : null}\n      </>\n    )\n    : null\n\n  const dialogExtraActions = !compose.inline\n    ? (\n      <>\n        {compose.variant === 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleSaveDraft}\n            disabled={compose.submitting}\n          >\n            {compose.t('messages.saveDraft', 'Save draft')}\n          </Button>\n        ) : null}\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={compose.handleBack}\n          disabled={compose.submitting}\n        >\n          {compose.t('ui.forms.actions.cancel', 'Cancel')}\n        </Button>\n      </>\n    )\n    : null\n\n  const backHref = compose.inline\n    ? inlineBackHref === undefined\n      ? '/backend/messages'\n      : inlineBackHref ?? undefined\n    : undefined\n\n  const fallbackContextPreview = React.useMemo(() => {\n    if (compose.contextPreview) return compose.contextPreview\n    if (!props.contextObject) return null\n    return <ContextObjectPreview contextObject={props.contextObject} />\n  }, [compose.contextPreview, props.contextObject])\n\n  const composeWithContextPreview = React.useMemo(\n    () => ({ ...compose, contextPreview: fallbackContextPreview }),\n    [compose, fallbackContextPreview],\n  )\n\n  const composePanel = (\n    <CrudForm<Record<string, unknown>>\n      backHref={backHref}\n      title={composeWithContextPreview.composerTitle}\n      fields={createMessageComposeFormGroups(composeWithContextPreview)}\n      initialValues={{}}\n      submitLabel={composeWithContextPreview.submitLabel}\n      submitIcon={SubmitIcon}\n      extraActions={composeWithContextPreview.inline ? inlineExtraActions : dialogExtraActions}\n      hideFooterActions\n      onSubmit={async () => {\n        await composeWithContextPreview.handleSubmit()\n      }}\n    />\n  )\n\n  if (compose.inline) {\n    return (\n      <div className=\"space-y-4\">\n        {composePanel}\n      </div>\n    )\n  }\n\n  return (\n    <Dialog open={Boolean(compose.open)} onOpenChange={compose.handleDialogOpenChange}>\n      <DialogContent className=\"sm:max-w-3xl [&>button]:hidden\">\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{compose.composerTitle}</DialogTitle>\n          <DialogDescription>\n            {compose.t('messages.composer.dialogDescription', 'Compose and send a message.')}\n          </DialogDescription>\n        </DialogHeader>\n        {composePanel}\n        <div className=\"flex items-center justify-end gap-2 border-t pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleBack}\n            disabled={compose.submitting}\n          >\n            {compose.t('ui.forms.actions.cancel', 'Cancel')}\n          </Button>\n          <Button\n            type=\"button\"\n            onClick={() => {\n              void compose.handleSubmit()\n            }}\n            disabled={compose.submitting}\n          >\n            <SubmitIcon className=\"mr-2 size-4\" />\n            {compose.submitLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Forward, Reply, Send } from 'lucide-react'\nimport { CrudForm } from '../CrudForm'\nimport { Button } from '../../primitives/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { getMessageUiComponentRegistry } from '@open-mercato/core/modules/messages/components/utils/typeUiRegistry'\nimport { getMessageObjectType } from '@open-mercato/core/modules/messages/lib/message-objects-registry'\nimport { createMessageComposeFormGroups } from './message-compose-form-groups'\nimport { useMessageCompose } from './useMessageCompose'\nimport type { MessageComposerContextObject, MessageComposerProps } from './message-composer.types'\n\nexport type {\n  MessageComposerContextObject,\n  MessageComposerProps,\n  MessageComposerRequiredActionConfig,\n  MessageComposerRequiredActionOption,\n  MessageComposerVariant,\n  MessageTypeItem,\n} from './message-composer.types'\n\nfunction ContextObjectPreview({ contextObject }: { contextObject: MessageComposerContextObject }) {\n  const t = useT()\n  const registry = getMessageUiComponentRegistry()\n  const previewComponentKey = `${contextObject.entityModule}:${contextObject.entityType}`\n  const PreviewComponent = registry.objectPreviewComponents[previewComponentKey]\n    ?? registry.objectPreviewComponents['messages:default']\n  const objectType = getMessageObjectType(contextObject.entityModule, contextObject.entityType)\n\n  if (PreviewComponent) {\n    return (\n      <PreviewComponent\n        entityId={contextObject.entityId}\n        entityModule={contextObject.entityModule}\n        entityType={contextObject.entityType}\n        actionRequired={contextObject.actionRequired}\n        actionType={contextObject.actionType}\n        actionLabel={contextObject.actionLabel}\n        previewData={contextObject.previewData ?? undefined}\n        icon={objectType?.icon}\n      />\n    )\n  }\n\n  return (\n    <div className=\"space-y-1\">\n      <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n        {t('messages.composer.contextPreview.title', 'Context object')}\n      </p>\n      <p className=\"text-sm font-medium\">\n        {contextObject.entityModule}:{contextObject.entityType}\n      </p>\n      <p className=\"text-xs font-mono text-muted-foreground\">\n        {contextObject.entityId}\n      </p>\n    </div>\n  )\n}\n\nexport function MessageComposer(props: MessageComposerProps) {\n  const compose = useMessageCompose(props)\n  const inlineBackHref = props.inlineBackHref\n  const SubmitIcon = compose.variant === 'reply'\n    ? Reply\n    : compose.variant === 'forward'\n      ? Forward\n      : Send\n\n  const inlineExtraActions = compose.inline\n    ? (\n      <>\n        {compose.variant === 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleSaveDraft}\n            disabled={compose.submitting}\n          >\n            {compose.t('messages.saveDraft', 'Save draft')}\n          </Button>\n        ) : null}\n        {compose.variant !== 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleBack}\n            disabled={compose.submitting}\n          >\n            {compose.t('ui.forms.actions.cancel', 'Cancel')}\n          </Button>\n        ) : null}\n      </>\n    )\n    : null\n\n  const dialogExtraActions = !compose.inline\n    ? (\n      <>\n        {compose.variant === 'compose' ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleSaveDraft}\n            disabled={compose.submitting}\n          >\n            {compose.t('messages.saveDraft', 'Save draft')}\n          </Button>\n        ) : null}\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={compose.handleBack}\n          disabled={compose.submitting}\n        >\n          {compose.t('ui.forms.actions.cancel', 'Cancel')}\n        </Button>\n      </>\n    )\n    : null\n\n  const backHref = compose.inline\n    ? inlineBackHref === undefined\n      ? '/backend/messages'\n      : inlineBackHref ?? undefined\n    : undefined\n\n  const fallbackContextPreview = React.useMemo(() => {\n    if (compose.contextPreview) return compose.contextPreview\n    if (!props.contextObject) return null\n    return <ContextObjectPreview contextObject={props.contextObject} />\n  }, [compose.contextPreview, props.contextObject])\n\n  const composeWithContextPreview = React.useMemo(\n    () => ({ ...compose, contextPreview: fallbackContextPreview }),\n    [compose, fallbackContextPreview],\n  )\n\n  const composePanel = (\n    <CrudForm<Record<string, unknown>>\n      backHref={backHref}\n      title={composeWithContextPreview.composerTitle}\n      titleHeadingLevel={2}\n      fields={createMessageComposeFormGroups(composeWithContextPreview)}\n      initialValues={{}}\n      submitLabel={composeWithContextPreview.submitLabel}\n      submitIcon={SubmitIcon}\n      extraActions={composeWithContextPreview.inline ? inlineExtraActions : dialogExtraActions}\n      hideFooterActions\n      onSubmit={async () => {\n        await composeWithContextPreview.handleSubmit()\n      }}\n    />\n  )\n\n  if (compose.inline) {\n    return (\n      <div className=\"space-y-4\">\n        {composePanel}\n      </div>\n    )\n  }\n\n  return (\n    <Dialog open={Boolean(compose.open)} onOpenChange={compose.handleDialogOpenChange}>\n      <DialogContent className=\"sm:max-w-3xl [&>button]:hidden\">\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{compose.composerTitle}</DialogTitle>\n          <DialogDescription>\n            {compose.t('messages.composer.dialogDescription', 'Compose and send a message.')}\n          </DialogDescription>\n        </DialogHeader>\n        {composePanel}\n        <div className=\"flex items-center justify-end gap-2 border-t pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={compose.handleBack}\n            disabled={compose.submitting}\n          >\n            {compose.t('ui.forms.actions.cancel', 'Cancel')}\n          </Button>\n          <Button\n            type=\"button\"\n            onClick={() => {\n              void compose.handleSubmit()\n            }}\n            disabled={compose.submitting}\n          >\n            <SubmitIcon className=\"mr-2 size-4\" />\n            {compose.submitLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.7.1-develop.7152.1.a69e92f9c9",
+  "version": "0.7.1-develop.7153.1.7145d295e6",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.7.1-develop.7152.1.a69e92f9c9",
+    "@open-mercato/shared": "0.7.1-develop.7153.1.7145d295e6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.7.1-develop.7152.1.a69e92f9c9",
+    "@open-mercato/shared": "0.7.1-develop.7153.1.7145d295e6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -1324,6 +1324,12 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
       className={`relative min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`}
       style={{ '--topbar-height': '61px' } as React.CSSProperties}
     >
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-tooltip focus:rounded-md focus:border focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-focus"
+      >
+        {t('appShell.skipToMainContent', 'Skip to main content')}
+      </a>
       {/* Desktop sidebar collapse/expand toggle — sits on the divider line between
           sidebar and content, like Notion/Vercel. Hidden on mobile (hamburger in
           topbar handles the drawer). */}
@@ -1499,7 +1505,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           </div>
         </header>
         <ProgressTopBar t={t} className="sticky top-0 z-sticky" completedAutoHideMs={progressCompletedAutoHideMs} />
-        <main className="flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl">
+        <main id="main-content" tabIndex={-1} className="flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl">
           <InjectionSpot spotId={BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID} context={injectionContext} />
           <FlashMessages />
           <PartialIndexBanner />

package/src/backend/CrudForm.tsx

@@ -349,6 +349,8 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   // Legacy field-only grid toggle. Use `groups` for advanced layout.
   twoColumn?: boolean
   title?: string
+  /** Semantic level for the form title. Defaults to 2 for section-level compatibility. */
+  titleHeadingLevel?: 1 | 2
   backHref?: string
   // Optional extra action buttons rendered next to Delete/Cancel/Save
   // Useful for custom links like "Show Records" etc.
@@ -726,6 +728,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   disableOptimisticLock = false,
   twoColumn = false,
   title,
+  titleHeadingLevel = 2,
   backHref,
   entityId,
   entityIds,
@@ -3677,6 +3680,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             backHref={backHref}
             backLabel={backLabel}
             title={title}
+            titleHeadingLevel={titleHeadingLevel}
             actions={{
               extraActions: headerExtraActions,
               showDelete: !formReadOnly && showDelete,
@@ -3759,6 +3763,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           backHref={backHref}
           backLabel={backLabel}
           title={title}
+          titleHeadingLevel={titleHeadingLevel}
           actions={{
             extraActions: headerExtraActions,
             showDelete: !formReadOnly && showDelete,

package/src/backend/DataTable.tsx

@@ -296,6 +296,11 @@ export type DataTableProps<T extends RowData> = {
   data: T[]
   toolbar?: React.ReactNode
   title?: React.ReactNode
+  /**
+   * Semantic level for the title. String titles default to 2 for section-level
+   * compatibility; ReactNode titles remain caller-owned unless this is set.
+   */
+  titleHeadingLevel?: 1 | 2
   actions?: React.ReactNode
   refreshButton?: DataTableRefreshButton
   sortable?: boolean
@@ -1209,6 +1214,7 @@ export function DataTable<T extends RowData>({
   data,
   toolbar,
   title,
+  titleHeadingLevel,
   actions,
   refreshButton,
   sortable,
@@ -3270,9 +3276,12 @@ export function DataTable<T extends RowData>({
       }
     : undefined
 
+  const TitleHeading = titleHeadingLevel === 1 ? 'h1' : 'h2'
   const titleContent = hasTitle ? (
     <div className="text-base font-semibold leading-tight min-h-[2.25rem] flex items-center">
-      {typeof title === 'string' ? <h2 className="text-base font-semibold">{title}</h2> : title}
+      {typeof title === 'string' || titleHeadingLevel
+        ? <TitleHeading className="text-base font-semibold">{title}</TitleHeading>
+        : title}
     </div>
   ) : <div className="min-h-[2.25rem]" />
 

package/src/backend/__tests__/AppShell.test.tsx

@@ -92,6 +92,7 @@ jest.mock('../devtools', () => ({
 
 const dict = {
   'appShell.productName': 'Mercato',
+  'appShell.skipToMainContent': 'Skip to main content',
   'appShell.menu': 'Menu',
   'appShell.toggleSidebar': 'Toggle sidebar',
   'appShell.collapseSidebar': 'Collapse',
@@ -212,6 +213,19 @@ describe('AppShell', () => {
     )
   })
 
+  it('provides a skip link targeting the focusable main content landmark', () => {
+    renderWithProviders(
+      <AppShell email="demo@example.com" groups={groups}>
+        <div>Child content</div>
+      </AppShell>,
+      { dict },
+    )
+
+    expect(screen.getByRole('link', { name: 'Skip to main content' })).toHaveAttribute('href', '#main-content')
+    expect(screen.getByRole('main')).toHaveAttribute('id', 'main-content')
+    expect(screen.getByRole('main')).toHaveAttribute('tabindex', '-1')
+  })
+
   it('keeps the incoming page breadcrumb when the pathname change and ApplyBreadcrumb land in the same commit', () => {
     const { rerender } = renderWithProviders(
       <AppShell email="demo@example.com" groups={groups}>

package/src/backend/__tests__/CrudForm.defaults.test.tsx

@@ -64,6 +64,32 @@ describe('CrudForm custom field default application', () => {
     })
   })
 
+  it('forwards explicit title heading semantics while preserving the section-level default', () => {
+    const { rerender } = renderWithProviders(
+      <CrudForm
+        title="Edit"
+        fields={fields}
+        initialValues={{ name: 'Test' }}
+        onSubmit={() => {}}
+      />,
+      { dict },
+    )
+
+    expect(screen.getByRole('heading', { level: 2, name: 'Edit' })).toBeInTheDocument()
+
+    rerender(
+      <CrudForm
+        title="Edit"
+        titleHeadingLevel={1}
+        fields={fields}
+        initialValues={{ name: 'Test' }}
+        onSubmit={() => {}}
+      />,
+    )
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Edit' })).toBeInTheDocument()
+  })
+
   it('applies defaultValue to text inputs on create form', async () => {
     setupMockDefinitions([
       { key: 'status', kind: 'text', label: 'Status', defaultValue: 'active', formEditable: true },

package/src/backend/__tests__/DataTable.render.test.tsx

@@ -19,6 +19,36 @@ jest.mock('../injection/useInjectionDataWidgets', () => ({
 type Row = { id: string; name: string }
 
 describe('DataTable SSR render', () => {
+  it('keeps section-level title semantics by default and supports an explicit page heading', () => {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'name', header: 'Name' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable columns={columns} data={[]} title="People" />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByRole('heading', { level: 2, name: 'People' })).toBeInTheDocument()
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable columns={columns} data={[]} title="People" titleHeadingLevel={1} embedded />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByRole('heading', { level: 1, name: 'People' })).toBeInTheDocument()
+    } finally {
+      queryClient.clear()
+    }
+  })
+
   it('renders built-in FilterBar when search/filters provided', () => {
     const columns: ColumnDef<Row>[] = [
       { accessorKey: 'name', header: 'Name' },

package/src/backend/__tests__/FormHeader.test.tsx

@@ -59,13 +59,13 @@ describe('FormHeader', () => {
     )
   })
 
-  it('renders edit header injection spot with routing context', () => {
+  it('renders edit titles as section headings by default with an explicit page-heading option', () => {
     renderWithProviders(
       <FormHeader title="Edit Person" />,
       { dict: {} },
     )
 
-    expect(screen.getByText('Edit Person')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { level: 2, name: 'Edit Person' })).toBeInTheDocument()
     expect(screen.getByTestId('injection-spot:form-header:edit')).toBeInTheDocument()
     expect(mockInjectionSpot).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -76,5 +76,12 @@ describe('FormHeader', () => {
         },
       }),
     )
+
+    renderWithProviders(
+      <FormHeader title="Edit Company" titleHeadingLevel={1} />,
+      { dict: {} },
+    )
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Edit Company' })).toBeInTheDocument()
   })
 })

package/src/backend/forms/FormHeader.tsx

@@ -23,6 +23,8 @@ export type FormHeaderEditProps = FormHeaderBaseProps & {
   mode?: 'edit'
   /** Small title next to the back link */
   title?: string
+  /** Semantic level for the title. Defaults to 2 for section-level compatibility. */
+  titleHeadingLevel?: 1 | 2
   /** Structured action buttons (Delete/Cancel/Save) */
   actions?: FormActionButtonsProps
   /** Custom right-side content (overrides `actions`) */
@@ -96,9 +98,11 @@ function EditHeader({
   backHref,
   resolvedBackLabel,
   title,
+  titleHeadingLevel = 2,
   actions,
   actionsContent,
 }: FormHeaderEditProps & { resolvedBackLabel: string }) {
+  const TitleHeading = titleHeadingLevel === 1 ? 'h1' : 'h2'
   return (
     <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
       <div className="flex items-center gap-3">
@@ -107,7 +111,7 @@ function EditHeader({
             &larr; {resolvedBackLabel}
           </Link>
         ) : null}
-        {title ? <div className="text-base font-medium">{title}</div> : null}
+        {title ? <TitleHeading className="text-base font-medium">{title}</TitleHeading> : null}
       </div>
       {actionsContent ?? (actions ? <FormActionButtons {...actions} /> : null)}
     </div>

package/src/backend/messages/MessageComposer.tsx

@@ -141,6 +141,7 @@ export function MessageComposer(props: MessageComposerProps) {
     <CrudForm<Record<string, unknown>>
       backHref={backHref}
       title={composeWithContextPreview.composerTitle}
+      titleHeadingLevel={2}
       fields={createMessageComposeFormGroups(composeWithContextPreview)}
       initialValues={{}}
       submitLabel={composeWithContextPreview.submitLabel}

package/src/backend/messages/__tests__/MessageComposer.test.tsx

@@ -526,6 +526,16 @@ describe('MessageComposer draft flow', () => {
     })
   })
 
+  it('keeps inline composer titles at section level', async () => {
+    renderWithProviders(
+      <MessageComposer inline variant="reply" messageId="message-1" />,
+      { dict: {} },
+    )
+
+    expect(await screen.findByRole('heading', { level: 2, name: 'Reply' })).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { level: 1, name: 'Reply' })).not.toBeInTheDocument()
+  })
+
   it('does not render back link when inlineBackHref is null', async () => {
     const { container } = renderWithProviders(
       <MessageComposer inline inlineBackHref={null} variant="reply" messageId="message-1" />,