@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/tools/components/form/EnhancedDetailPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedDetailPage.cjs","names":["useForm","createAjvResolver","React","_Fragment","SchemaDetailPage","Collapsible","CollapsibleTrigger","ChevronDown","CollapsibleContent","FormActionBar","Button","FormProvider","FormContainer","require_runtime","require_ui_components_ui_button_components","require_ui_components_ui_collapsible","require_common_actions_create","require_common_actions_delete","require_common_actions_edit","require_common_actions_update","require_common_advanced","require_tools_components_form_form_container","require_tools_components_form_form_action_bar","require_tools_lib_schema_ajv","require_tools_components_schema_SchemaDetailPage","react_jsx_runtime","react","lucide_react","react_hook_form","separateAdvancedFields","standardProps","advancedProps","properties","schema","key","prop","EnhancedDetailPage","form","values","validation","advancedOpen","setAdvancedOpen","containerRef","hasAdvancedFields","advanced","renderContent","children","progressiveDisclosure","standard","stickyActions","showEditButton","useGrid","mode","submitLabel","onCancel","onDelete","onEdit","content","onSubmit","data","containerLayout"],"sources":["../../../../src/tools/components/form/EnhancedDetailPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormProvider, useForm, type FieldValues, type DefaultValues } from 'react-hook-form';\nimport { createAjvResolver, type SchemaFormValidationOptions } from '../../lib/schema/ajv';\nimport * as m from '../../paraglide/messages.js';\nimport { ChevronDown } from 'lucide-react';\n\nimport type { JSONSchema, JSONSchemaProperty } from '../../lib/schema/types';\nimport { FormContainer, type FormContainerWidth } from './form-container';\nimport { FormActionBar, type SaveStatus } from './form-action-bar';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';\nimport { Button } from '../ui/button';\nimport { SchemaDetailPage } from '../schema/SchemaDetailPage';\nimport type { RelatedFieldConfig } from '../ui/form';\n\ntype DetailMode = 'view' | 'edit';\ntype GroupDisplay = 'heading' | 'card' | 'dropdown';\n\ninterface EnhancedDetailPageProps<TFieldValues extends FieldValues> {\n  /** Opt into whole-record schema validation. */\n  validation?: SchemaFormValidationOptions;\n  /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */\n  schema: JSONSchema;\n  /** 表示モード */\n  mode: DetailMode;\n  /** 現在の値 */\n  values?: Partial<TFieldValues>;\n  /** 送信ボタンのラベル */\n  submitLabel?: 'create' | 'update';\n  /** フォーム送信時のハンドラ */\n  onSubmit?: (values: TFieldValues) => void | Promise<void>;\n  /** キャンセル時のハンドラ */\n  onCancel?: () => void;\n  /** 削除時のハンドラ */\n  onDelete?: () => void;\n  /** 編集モード切り替えハンドラ */\n  onEdit?: () => void;\n  /** 編集ボタンを表示 */\n  showEditButton?: boolean;\n  /** グループ表示スタイル */\n  groupDisplay?: GroupDisplay;\n  /** リレーションデータ */\n  relations?: Record<string, RelatedFieldConfig>;\n\n  // 新しいレイアウトオプション\n\n  /**\n   * 中央揃えコンテナレイアウトを使用\n   * @default true\n   */\n  containerLayout?: boolean;\n  /**\n   * コンテナの最大幅\n   * @default \"4xl\"\n   */\n  maxWidth?: FormContainerWidth;\n  /**\n   * スティッキーアクションバーを有効化\n   * @default false\n   */\n  stickyActions?: boolean;\n  /**\n   * プログレッシブディスクロージャー (advanced フィールドを折りたたみ)\n   * @default true\n   */\n  progressiveDisclosure?: boolean;\n  /**\n   * 保存状態インジケーター\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * レスポンシブグリッドを使用 (field.width を考慮)\n   * @default true\n   */\n  useGrid?: boolean;\n  /**\n   * グリッドの列数\n   * @default 2\n   */\n  gridColumns?: 1 | 2 | 3;\n\n  /**\n   * カスタムフォームコンテンツ (schema による自動生成を上書き)\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * 拡張されたフィールドを通常と高度に分離 (JSONSchema版)\n */\nconst separateAdvancedFields = (\n  schema: JSONSchema,\n): { standard: JSONSchema; advanced: JSONSchema } => {\n  const standardProps: Record<string, JSONSchemaProperty> = {};\n  const advancedProps: Record<string, JSONSchemaProperty> = {};\n\n  const properties = schema.properties || {};\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (prop['x-ui']?.advanced) {\n      advancedProps[key] = prop;\n    } else {\n      standardProps[key] = prop;\n    }\n  }\n\n  return {\n    standard: { ...schema, properties: standardProps },\n    advanced: { ...schema, title: `${schema.title || ''}_advanced`, properties: advancedProps },\n  };\n};\n\n/**\n * デスクトップ最適化された詳細/編集ページコンポーネント\n *\n * UXベストプラクティスに基づく拡張レイアウト機能:\n * - 中央揃えの読みやすいコンテナ幅\n * - レスポンシブグリッドレイアウト (モバイル1列、デスクトップ2列)\n * - プログレッシブディスクロージャー (advanced フィールドの折りたたみ)\n * - スティッキーアクションバー\n * - 保存状態インジケーター\n *\n * @example\n * ```tsx\n * <EnhancedDetailPage\n *   schema={userSchema}\n *   mode=\"edit\"\n *   values={userData}\n *   onSubmit={handleSave}\n *   containerLayout\n *   stickyActions\n *   progressiveDisclosure\n * />\n * ```\n */\nexport function EnhancedDetailPage<TFieldValues extends FieldValues>({\n  schema,\n  validation,\n  mode,\n  values,\n  submitLabel = 'update',\n  onSubmit,\n  onCancel,\n  onDelete,\n  onEdit,\n  showEditButton = false,\n  groupDisplay,\n  relations,\n  containerLayout = true,\n  maxWidth = '4xl',\n  stickyActions = false,\n  progressiveDisclosure = true,\n  saveStatus = 'idle',\n  useGrid = true,\n  children,\n  className,\n}: EnhancedDetailPageProps<TFieldValues>) {\n  const form = useForm<TFieldValues>({\n    defaultValues: values as DefaultValues<TFieldValues>,\n    resolver: validation ? createAjvResolver<TFieldValues>(schema, validation) : undefined,\n  });\n  const { dirtyFields } = form.formState;\n  React.useEffect(() => { if (values) form.reset(values as TFieldValues, { keepDirtyValues: true }); }, [values, form]);\n  void dirtyFields;\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  // プログレッシブディスクロージャー: 通常/高度フィールドを分離\n  const { standard, advanced } = React.useMemo(() => separateAdvancedFields(schema), [schema]);\n  const hasAdvancedFields = Object.keys(advanced.properties || {}).length > 0;\n\n  const renderContent = () => (\n    <>\n      {/* カスタムコンテンツがある場合はそれを優先、ない場合はスキーマ駆動フォームを表示 */}\n      {children ? (\n        <div className='space-y-6'>{children}</div>\n      ) : (\n        <>\n          {/* 標準フィールド */}\n          <SchemaDetailPage\n            form={form}\n            schema={progressiveDisclosure ? standard : schema}\n            mode={mode}\n            values={values}\n            submitLabel={submitLabel}\n            onSubmit={onSubmit}\n            onCancel={onCancel}\n            onDelete={onDelete}\n            onEdit={onEdit}\n            showEditButton={!stickyActions && showEditButton}\n            hideActions={stickyActions}\n            groupDisplay={groupDisplay}\n            groupLayout={useGrid ? 'full' : 'column'}\n            columnMinWidth={useGrid ? 300 : undefined}\n            relations={relations}\n          />\n\n          {/* 高度なフィールド (折りたたみ) */}\n          {progressiveDisclosure && hasAdvancedFields && (\n            <Collapsible\n              open={advancedOpen}\n              onOpenChange={setAdvancedOpen}\n              className='mt-6 border-t pt-4'\n            >\n              <CollapsibleTrigger className='flex w-full items-center justify-between py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors'>\n                <span>{m.common_advanced({ defaultValue: 'Advanced Settings' })}</span>\n                <ChevronDown\n                  className={`h-4 w-4 transition-transform ${advancedOpen ? 'rotate-180' : ''}`}\n                />\n              </CollapsibleTrigger>\n              <CollapsibleContent className='pt-4'>\n                <SchemaDetailPage\n                  form={form}\n                  schema={advanced}\n                  mode={mode}\n                  values={values}\n                  groupDisplay={groupDisplay}\n                  groupLayout={useGrid ? 'full' : 'column'}\n                  columnMinWidth={useGrid ? 300 : undefined}\n                  relations={relations}\n                />\n              </CollapsibleContent>\n            </Collapsible>\n          )}\n        </>\n      )}\n\n      {/* スティッキーアクションバー */}\n      {stickyActions && mode === 'edit' && (\n        <FormActionBar\n          primaryLabel={\n            submitLabel === 'create'\n              ? m.common_actions_create({ defaultValue: 'Create' })\n              : m.common_actions_update({ defaultValue: 'Update' })\n          }\n          onPrimary={children ? () => containerRef.current?.querySelector('form')?.requestSubmit() : undefined}\n          onSecondary={onCancel}\n          saveStatus={saveStatus}\n          sticky\n          tertiaryAction={\n            onDelete && (\n              <Button type='button' variant='destructive' onClick={onDelete}>\n                {m.common_actions_delete({ defaultValue: 'Delete' })}\n              </Button>\n            )\n          }\n        />\n      )}\n\n      {/* View モードのアクション */}\n      {stickyActions && mode === 'view' && showEditButton && (\n        <FormActionBar\n          primaryLabel={m.common_actions_edit({ defaultValue: 'Edit' })}\n          onPrimary={onEdit}\n          onSecondary={onCancel}\n          sticky\n        />\n      )}\n    </>\n  );\n\n  const content = mode === 'edit' && !children ? (\n    <FormProvider {...form}>\n      <form onSubmit={form.handleSubmit(data => onSubmit?.(data))}>{renderContent()}</form>\n    </FormProvider>\n  ) : renderContent();\n\n  if (containerLayout) {\n    return (\n      <FormContainer ref={containerRef} maxWidth={maxWidth} className={className}>\n        {content}\n      </FormContainer>\n    );\n  }\n\n  return (\n    <div ref={containerRef} className={className}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EnhancedDetailPage.cjs","names":["useForm","createAjvResolver","React","_Fragment","SchemaDetailPage","Collapsible","CollapsibleTrigger","ChevronDown","CollapsibleContent","FormActionBar","Button","FormProvider","FormContainer","require_runtime","require_ui_components_ui_button_components","require_ui_components_ui_collapsible","require_common_actions_create","require_common_actions_delete","require_common_actions_edit","require_common_actions_update","require_common_advanced","require_tools_components_form_form_container","require_tools_components_form_form_action_bar","require_tools_lib_schema_ajv","require_tools_components_schema_SchemaDetailPage","react_jsx_runtime","react","lucide_react","react_hook_form","separateAdvancedFields","standardProps","advancedProps","properties","schema","key","prop","EnhancedDetailPage","form","values","validation","advancedOpen","setAdvancedOpen","containerRef","hasAdvancedFields","advanced","renderContent","children","progressiveDisclosure","standard","stickyActions","showEditButton","useGrid","mode","submitLabel","onCancel","onDelete","onEdit","content","onSubmit","data","containerLayout"],"sources":["../../../../src/tools/components/form/EnhancedDetailPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormProvider, useForm, type FieldValues, type DefaultValues } from 'react-hook-form';\nimport { createAjvResolver, type SchemaFormValidationOptions } from '../../lib/schema/ajv';\nimport * as m from '../../paraglide/messages.js';\nimport { ChevronDown } from 'lucide-react';\n\nimport type { JSONSchema, JSONSchemaProperty } from '../../lib/schema/types';\nimport { FormContainer, type FormContainerWidth } from './form-container';\nimport { FormActionBar, type SaveStatus } from './form-action-bar';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';\nimport { Button } from '../ui/button';\nimport { SchemaDetailPage } from '../schema/SchemaDetailPage';\nimport type { RelatedFieldConfig } from '../ui/form';\n\ntype DetailMode = 'view' | 'edit';\ntype GroupDisplay = 'heading' | 'card' | 'dropdown';\n\n/**\n * Form values, schema and presentation settings for {@link EnhancedDetailPage}.\n * @typeParam TFieldValues - React Hook Form field-value shape supplied to onSubmit.\n */\ninterface EnhancedDetailPageProps<TFieldValues extends FieldValues> {\n  /** Opt into whole-record schema validation. */\n  validation?: SchemaFormValidationOptions;\n  /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */\n  schema: JSONSchema;\n  /** View renders details; edit renders form inputs. */\n  mode: DetailMode;\n  /** Initial values and later reset values; later updates preserve dirty fields. */\n  values?: Partial<TFieldValues>;\n  /** Submit action wording; defaults to update. */\n  submitLabel?: 'create' | 'update';\n  /** Called with form values after configured validation on submit; the host performs persistence. */\n  onSubmit?: (values: TFieldValues) => void | Promise<void>;\n  /** Called by the cancel action; the host handles navigation or rollback. */\n  onCancel?: () => void;\n  /** Called by the delete action; the host performs deletion. */\n  onDelete?: () => void;\n  /** Called by the edit action; the host updates mode. */\n  onEdit?: () => void;\n  /** Shows the view-mode edit action when true; defaults to false. */\n  showEditButton?: boolean;\n  /** Group presentation forwarded to SchemaDetailPage; omitted uses its default. */\n  groupDisplay?: GroupDisplay;\n  /** Related-field display and selection configuration forwarded to SchemaDetailPage. */\n  relations?: Record<string, RelatedFieldConfig>;\n\n  // 新しいレイアウトオプション\n\n  /**\n   * Wrap content in a centered FormContainer.\n   * @defaultValue true\n   */\n  containerLayout?: boolean;\n  /**\n   * Maximum width preset when containerLayout is enabled.\n   * @defaultValue \"4xl\"\n   */\n  maxWidth?: FormContainerWidth;\n  /**\n   * Use the sticky FormActionBar and hide ordinary generated actions.\n   * @defaultValue false\n   */\n  stickyActions?: boolean;\n  /**\n   * Separate fields marked x-ui.advanced into a section initially collapsed.\n   * @defaultValue true\n   */\n  progressiveDisclosure?: boolean;\n  /**\n   * Host-supplied save indicator; defaults to idle and does not track persistence automatically.\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * Use SchemaDetailPage groupLayout full and columnMinWidth 300; false uses column layout.\n   * @defaultValue true\n   */\n  useGrid?: boolean;\n  /**\n   * Reserved compatibility option; currently ignored. Changing it does not set columns.\n   * Use useGrid to select the supported layout behavior.\n   */\n  gridColumns?: 1 | 2 | 3;\n\n  /**\n   * Replace generated content. The caller supplies its own form, submission wiring and providers.\n   */\n  children?: React.ReactNode;\n\n  /** Additional classes on the outer container. */\n  className?: string;\n}\n\n/**\n * 拡張されたフィールドを通常と高度に分離 (JSONSchema版)\n */\nconst separateAdvancedFields = (\n  schema: JSONSchema,\n): { standard: JSONSchema; advanced: JSONSchema } => {\n  const standardProps: Record<string, JSONSchemaProperty> = {};\n  const advancedProps: Record<string, JSONSchemaProperty> = {};\n\n  const properties = schema.properties || {};\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (prop['x-ui']?.advanced) {\n      advancedProps[key] = prop;\n    } else {\n      standardProps[key] = prop;\n    }\n  }\n\n  return {\n    standard: { ...schema, properties: standardProps },\n    advanced: { ...schema, title: `${schema.title || ''}_advanced`, properties: advancedProps },\n  };\n};\n\n/**\n * Renders schema-driven view/edit content with an optional container, advanced fields and action bar.\n * @typeParam TFieldValues - React Hook Form value shape passed to the submit callback.\n * @param props - Schema, host-owned values/actions and layout settings; see EnhancedDetailPageProps.\n * @returns The detail content inside a centered container or plain div.\n * @remarks Import Appkit CSS. Generated edit content supplies its own React Hook Form provider\n * and form element; validation is opt-in via validation. Later values updates preserve dirty fields.\n * The host owns persistence, saveStatus, mode changes and errors from async onSubmit.\n * Custom children replace generated content and must supply their own form/provider wiring.\n * gridColumns is ignored; useGrid selects SchemaDetailPage layout and a 300px column minimum,\n * without guaranteeing an exact number of columns. No fixed two-column default is implemented.\n * @example\n * ```tsx\n * import { EnhancedDetailPage } from '@alneas/appkit-react/tools/form';\n * import '@alneas/appkit-react/styles';\n *\n * export function UserDetails() {\n *   return <EnhancedDetailPage<{ name: string }> mode=\"view\"\n *     schema={{ type: 'object', properties: { name: { type: 'string', title: 'Name' } } }}\n *     values={{ name: 'Ada' }} />;\n * }\n * ```\n */\nexport function EnhancedDetailPage<TFieldValues extends FieldValues>({\n  schema,\n  validation,\n  mode,\n  values,\n  submitLabel = 'update',\n  onSubmit,\n  onCancel,\n  onDelete,\n  onEdit,\n  showEditButton = false,\n  groupDisplay,\n  relations,\n  containerLayout = true,\n  maxWidth = '4xl',\n  stickyActions = false,\n  progressiveDisclosure = true,\n  saveStatus = 'idle',\n  useGrid = true,\n  children,\n  className,\n}: EnhancedDetailPageProps<TFieldValues>) {\n  const form = useForm<TFieldValues>({\n    defaultValues: values as DefaultValues<TFieldValues>,\n    resolver: validation ? createAjvResolver<TFieldValues>(schema, validation) : undefined,\n  });\n  const { dirtyFields } = form.formState;\n  React.useEffect(() => { if (values) form.reset(values as TFieldValues, { keepDirtyValues: true }); }, [values, form]);\n  void dirtyFields;\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  // プログレッシブディスクロージャー: 通常/高度フィールドを分離\n  const { standard, advanced } = React.useMemo(() => separateAdvancedFields(schema), [schema]);\n  const hasAdvancedFields = Object.keys(advanced.properties || {}).length > 0;\n\n  const renderContent = () => (\n    <>\n      {/* カスタムコンテンツがある場合はそれを優先、ない場合はスキーマ駆動フォームを表示 */}\n      {children ? (\n        <div className='space-y-6'>{children}</div>\n      ) : (\n        <>\n          {/* 標準フィールド */}\n          <SchemaDetailPage\n            form={form}\n            schema={progressiveDisclosure ? standard : schema}\n            mode={mode}\n            values={values}\n            submitLabel={submitLabel}\n            onSubmit={onSubmit}\n            onCancel={onCancel}\n            onDelete={onDelete}\n            onEdit={onEdit}\n            showEditButton={!stickyActions && showEditButton}\n            hideActions={stickyActions}\n            groupDisplay={groupDisplay}\n            groupLayout={useGrid ? 'full' : 'column'}\n            columnMinWidth={useGrid ? 300 : undefined}\n            relations={relations}\n          />\n\n          {/* 高度なフィールド (折りたたみ) */}\n          {progressiveDisclosure && hasAdvancedFields && (\n            <Collapsible\n              open={advancedOpen}\n              onOpenChange={setAdvancedOpen}\n              className='mt-6 border-t pt-4'\n            >\n              <CollapsibleTrigger className='flex w-full items-center justify-between py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors'>\n                <span>{m.common_advanced({ defaultValue: 'Advanced Settings' })}</span>\n                <ChevronDown\n                  className={`h-4 w-4 transition-transform ${advancedOpen ? 'rotate-180' : ''}`}\n                />\n              </CollapsibleTrigger>\n              <CollapsibleContent className='pt-4'>\n                <SchemaDetailPage\n                  form={form}\n                  schema={advanced}\n                  mode={mode}\n                  values={values}\n                  groupDisplay={groupDisplay}\n                  groupLayout={useGrid ? 'full' : 'column'}\n                  columnMinWidth={useGrid ? 300 : undefined}\n                  relations={relations}\n                />\n              </CollapsibleContent>\n            </Collapsible>\n          )}\n        </>\n      )}\n\n      {/* スティッキーアクションバー */}\n      {stickyActions && mode === 'edit' && (\n        <FormActionBar\n          primaryLabel={\n            submitLabel === 'create'\n              ? m.common_actions_create({ defaultValue: 'Create' })\n              : m.common_actions_update({ defaultValue: 'Update' })\n          }\n          onPrimary={children ? () => containerRef.current?.querySelector('form')?.requestSubmit() : undefined}\n          onSecondary={onCancel}\n          saveStatus={saveStatus}\n          sticky\n          tertiaryAction={\n            onDelete && (\n              <Button type='button' variant='destructive' onClick={onDelete}>\n                {m.common_actions_delete({ defaultValue: 'Delete' })}\n              </Button>\n            )\n          }\n        />\n      )}\n\n      {/* View モードのアクション */}\n      {stickyActions && mode === 'view' && showEditButton && (\n        <FormActionBar\n          primaryLabel={m.common_actions_edit({ defaultValue: 'Edit' })}\n          onPrimary={onEdit}\n          onSecondary={onCancel}\n          sticky\n        />\n      )}\n    </>\n  );\n\n  const content = mode === 'edit' && !children ? (\n    <FormProvider {...form}>\n      <form onSubmit={form.handleSubmit(data => onSubmit?.(data))}>{renderContent()}</form>\n    </FormProvider>\n  ) : renderContent();\n\n  if (containerLayout) {\n    return (\n      <FormContainer ref={containerRef} maxWidth={maxWidth} className={className}>\n        {content}\n      </FormContainer>\n    );\n  }\n\n  return (\n    <div ref={containerRef} className={className}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/form/EnhancedDetailPage.d.cts

@@ -7,92 +7,97 @@ import { RelatedFieldConfig } from '../ui/form.cjs';
 import * as React from 'react';
 type DetailMode = 'view' | 'edit';
 type GroupDisplay = 'heading' | 'card' | 'dropdown';
+/**
+ * Form values, schema and presentation settings for {@link EnhancedDetailPage}.
+ * @typeParam TFieldValues - React Hook Form field-value shape supplied to onSubmit.
+ */
 interface EnhancedDetailPageProps<TFieldValues extends FieldValues> {
     /** Opt into whole-record schema validation. */
     validation?: SchemaFormValidationOptions;
     /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */
     schema: JSONSchema;
-    /** 表示モード */
+    /** View renders details; edit renders form inputs. */
     mode: DetailMode;
-    /** 現在の値 */
+    /** Initial values and later reset values; later updates preserve dirty fields. */
     values?: Partial<TFieldValues>;
-    /** 送信ボタンのラベル */
+    /** Submit action wording; defaults to update. */
     submitLabel?: 'create' | 'update';
-    /** フォーム送信時のハンドラ */
+    /** Called with form values after configured validation on submit; the host performs persistence. */
     onSubmit?: (values: TFieldValues) => void | Promise<void>;
-    /** キャンセル時のハンドラ */
+    /** Called by the cancel action; the host handles navigation or rollback. */
     onCancel?: () => void;
-    /** 削除時のハンドラ */
+    /** Called by the delete action; the host performs deletion. */
     onDelete?: () => void;
-    /** 編集モード切り替えハンドラ */
+    /** Called by the edit action; the host updates mode. */
     onEdit?: () => void;
-    /** 編集ボタンを表示 */
+    /** Shows the view-mode edit action when true; defaults to false. */
     showEditButton?: boolean;
-    /** グループ表示スタイル */
+    /** Group presentation forwarded to SchemaDetailPage; omitted uses its default. */
     groupDisplay?: GroupDisplay;
-    /** リレーションデータ */
+    /** Related-field display and selection configuration forwarded to SchemaDetailPage. */
     relations?: Record<string, RelatedFieldConfig>;
     /**
-     * 中央揃えコンテナレイアウトを使用
-     * @default true
+     * Wrap content in a centered FormContainer.
+     * @defaultValue true
      */
     containerLayout?: boolean;
     /**
-     * コンテナの最大幅
-     * @default "4xl"
+     * Maximum width preset when containerLayout is enabled.
+     * @defaultValue "4xl"
      */
     maxWidth?: FormContainerWidth;
     /**
-     * スティッキーアクションバーを有効化
-     * @default false
+     * Use the sticky FormActionBar and hide ordinary generated actions.
+     * @defaultValue false
      */
     stickyActions?: boolean;
     /**
-     * プログレッシブディスクロージャー (advanced フィールドを折りたたみ)
-     * @default true
+     * Separate fields marked x-ui.advanced into a section initially collapsed.
+     * @defaultValue true
      */
     progressiveDisclosure?: boolean;
     /**
-     * 保存状態インジケーター
+     * Host-supplied save indicator; defaults to idle and does not track persistence automatically.
      */
     saveStatus?: SaveStatus;
     /**
-     * レスポンシブグリッドを使用 (field.width を考慮)
-     * @default true
+     * Use SchemaDetailPage groupLayout full and columnMinWidth 300; false uses column layout.
+     * @defaultValue true
      */
     useGrid?: boolean;
     /**
-     * グリッドの列数
-     * @default 2
+     * Reserved compatibility option; currently ignored. Changing it does not set columns.
+     * Use useGrid to select the supported layout behavior.
      */
     gridColumns?: 1 | 2 | 3;
     /**
-     * カスタムフォームコンテンツ (schema による自動生成を上書き)
+     * Replace generated content. The caller supplies its own form, submission wiring and providers.
      */
     children?: React.ReactNode;
+    /** Additional classes on the outer container. */
     className?: string;
 }
 /**
- * デスクトップ最適化された詳細/編集ページコンポーネント
- *
- * UXベストプラクティスに基づく拡張レイアウト機能:
- * - 中央揃えの読みやすいコンテナ幅
- * - レスポンシブグリッドレイアウト (モバイル1列、デスクトップ2列)
- * - プログレッシブディスクロージャー (advanced フィールドの折りたたみ)
- * - スティッキーアクションバー
- * - 保存状態インジケーター
- *
+ * Renders schema-driven view/edit content with an optional container, advanced fields and action bar.
+ * @typeParam TFieldValues - React Hook Form value shape passed to the submit callback.
+ * @param props - Schema, host-owned values/actions and layout settings; see EnhancedDetailPageProps.
+ * @returns The detail content inside a centered container or plain div.
+ * @remarks Import Appkit CSS. Generated edit content supplies its own React Hook Form provider
+ * and form element; validation is opt-in via validation. Later values updates preserve dirty fields.
+ * The host owns persistence, saveStatus, mode changes and errors from async onSubmit.
+ * Custom children replace generated content and must supply their own form/provider wiring.
+ * gridColumns is ignored; useGrid selects SchemaDetailPage layout and a 300px column minimum,
+ * without guaranteeing an exact number of columns. No fixed two-column default is implemented.
  * @example
  * ```tsx
- * <EnhancedDetailPage
- *   schema={userSchema}
- *   mode="edit"
- *   values={userData}
- *   onSubmit={handleSave}
- *   containerLayout
- *   stickyActions
- *   progressiveDisclosure
- * />
+ * import { EnhancedDetailPage } from '@alneas/appkit-react/tools/form';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function UserDetails() {
+ *   return <EnhancedDetailPage<{ name: string }> mode="view"
+ *     schema={{ type: 'object', properties: { name: { type: 'string', title: 'Name' } } }}
+ *     values={{ name: 'Ada' }} />;
+ * }
  * ```
  */
 export declare function EnhancedDetailPage<TFieldValues extends FieldValues>({ schema, validation, mode, values, submitLabel, onSubmit, onCancel, onDelete, onEdit, showEditButton, groupDisplay, relations, containerLayout, maxWidth, stickyActions, progressiveDisclosure, saveStatus, useGrid, children, className, }: EnhancedDetailPageProps<TFieldValues>): React.JSX.Element;

package/dist/tools/components/form/EnhancedDetailPage.d.ts

@@ -7,92 +7,97 @@ import { RelatedFieldConfig } from '../ui/form.js';
 import * as React from 'react';
 type DetailMode = 'view' | 'edit';
 type GroupDisplay = 'heading' | 'card' | 'dropdown';
+/**
+ * Form values, schema and presentation settings for {@link EnhancedDetailPage}.
+ * @typeParam TFieldValues - React Hook Form field-value shape supplied to onSubmit.
+ */
 interface EnhancedDetailPageProps<TFieldValues extends FieldValues> {
     /** Opt into whole-record schema validation. */
     validation?: SchemaFormValidationOptions;
     /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */
     schema: JSONSchema;
-    /** 表示モード */
+    /** View renders details; edit renders form inputs. */
     mode: DetailMode;
-    /** 現在の値 */
+    /** Initial values and later reset values; later updates preserve dirty fields. */
     values?: Partial<TFieldValues>;
-    /** 送信ボタンのラベル */
+    /** Submit action wording; defaults to update. */
     submitLabel?: 'create' | 'update';
-    /** フォーム送信時のハンドラ */
+    /** Called with form values after configured validation on submit; the host performs persistence. */
     onSubmit?: (values: TFieldValues) => void | Promise<void>;
-    /** キャンセル時のハンドラ */
+    /** Called by the cancel action; the host handles navigation or rollback. */
     onCancel?: () => void;
-    /** 削除時のハンドラ */
+    /** Called by the delete action; the host performs deletion. */
     onDelete?: () => void;
-    /** 編集モード切り替えハンドラ */
+    /** Called by the edit action; the host updates mode. */
     onEdit?: () => void;
-    /** 編集ボタンを表示 */
+    /** Shows the view-mode edit action when true; defaults to false. */
     showEditButton?: boolean;
-    /** グループ表示スタイル */
+    /** Group presentation forwarded to SchemaDetailPage; omitted uses its default. */
     groupDisplay?: GroupDisplay;
-    /** リレーションデータ */
+    /** Related-field display and selection configuration forwarded to SchemaDetailPage. */
     relations?: Record<string, RelatedFieldConfig>;
     /**
-     * 中央揃えコンテナレイアウトを使用
-     * @default true
+     * Wrap content in a centered FormContainer.
+     * @defaultValue true
      */
     containerLayout?: boolean;
     /**
-     * コンテナの最大幅
-     * @default "4xl"
+     * Maximum width preset when containerLayout is enabled.
+     * @defaultValue "4xl"
      */
     maxWidth?: FormContainerWidth;
     /**
-     * スティッキーアクションバーを有効化
-     * @default false
+     * Use the sticky FormActionBar and hide ordinary generated actions.
+     * @defaultValue false
      */
     stickyActions?: boolean;
     /**
-     * プログレッシブディスクロージャー (advanced フィールドを折りたたみ)
-     * @default true
+     * Separate fields marked x-ui.advanced into a section initially collapsed.
+     * @defaultValue true
      */
     progressiveDisclosure?: boolean;
     /**
-     * 保存状態インジケーター
+     * Host-supplied save indicator; defaults to idle and does not track persistence automatically.
      */
     saveStatus?: SaveStatus;
     /**
-     * レスポンシブグリッドを使用 (field.width を考慮)
-     * @default true
+     * Use SchemaDetailPage groupLayout full and columnMinWidth 300; false uses column layout.
+     * @defaultValue true
      */
     useGrid?: boolean;
     /**
-     * グリッドの列数
-     * @default 2
+     * Reserved compatibility option; currently ignored. Changing it does not set columns.
+     * Use useGrid to select the supported layout behavior.
      */
     gridColumns?: 1 | 2 | 3;
     /**
-     * カスタムフォームコンテンツ (schema による自動生成を上書き)
+     * Replace generated content. The caller supplies its own form, submission wiring and providers.
      */
     children?: React.ReactNode;
+    /** Additional classes on the outer container. */
     className?: string;
 }
 /**
- * デスクトップ最適化された詳細/編集ページコンポーネント
- *
- * UXベストプラクティスに基づく拡張レイアウト機能:
- * - 中央揃えの読みやすいコンテナ幅
- * - レスポンシブグリッドレイアウト (モバイル1列、デスクトップ2列)
- * - プログレッシブディスクロージャー (advanced フィールドの折りたたみ)
- * - スティッキーアクションバー
- * - 保存状態インジケーター
- *
+ * Renders schema-driven view/edit content with an optional container, advanced fields and action bar.
+ * @typeParam TFieldValues - React Hook Form value shape passed to the submit callback.
+ * @param props - Schema, host-owned values/actions and layout settings; see EnhancedDetailPageProps.
+ * @returns The detail content inside a centered container or plain div.
+ * @remarks Import Appkit CSS. Generated edit content supplies its own React Hook Form provider
+ * and form element; validation is opt-in via validation. Later values updates preserve dirty fields.
+ * The host owns persistence, saveStatus, mode changes and errors from async onSubmit.
+ * Custom children replace generated content and must supply their own form/provider wiring.
+ * gridColumns is ignored; useGrid selects SchemaDetailPage layout and a 300px column minimum,
+ * without guaranteeing an exact number of columns. No fixed two-column default is implemented.
  * @example
  * ```tsx
- * <EnhancedDetailPage
- *   schema={userSchema}
- *   mode="edit"
- *   values={userData}
- *   onSubmit={handleSave}
- *   containerLayout
- *   stickyActions
- *   progressiveDisclosure
- * />
+ * import { EnhancedDetailPage } from '@alneas/appkit-react/tools/form';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function UserDetails() {
+ *   return <EnhancedDetailPage<{ name: string }> mode="view"
+ *     schema={{ type: 'object', properties: { name: { type: 'string', title: 'Name' } } }}
+ *     values={{ name: 'Ada' }} />;
+ * }
  * ```
  */
 export declare function EnhancedDetailPage<TFieldValues extends FieldValues>({ schema, validation, mode, values, submitLabel, onSubmit, onCancel, onDelete, onEdit, showEditButton, groupDisplay, relations, containerLayout, maxWidth, stickyActions, progressiveDisclosure, saveStatus, useGrid, children, className, }: EnhancedDetailPageProps<TFieldValues>): React.JSX.Element;

package/dist/tools/components/form/EnhancedDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedDetailPage.js","names":["React","_Fragment","m.common_advanced","m.common_actions_create","m.common_actions_update","m.common_actions_delete","m.common_actions_edit","React$1","separateAdvancedFields","standardProps","advancedProps","properties","schema","key","prop","EnhancedDetailPage","form","useForm","values","validation","createAjvResolver","advancedOpen","setAdvancedOpen","containerRef","hasAdvancedFields","advanced","renderContent","Fragment","children","SchemaDetailPage","progressiveDisclosure","standard","stickyActions","showEditButton","useGrid","Collapsible","CollapsibleTrigger","common_advanced","ChevronDown","CollapsibleContent","mode","FormActionBar","submitLabel","common_actions_create","common_actions_update","onCancel","onDelete","Button","common_actions_delete","common_actions_edit","onEdit","content","FormProvider","onSubmit","data","containerLayout","FormContainer"],"sources":["../../../../src/tools/components/form/EnhancedDetailPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormProvider, useForm, type FieldValues, type DefaultValues } from 'react-hook-form';\nimport { createAjvResolver, type SchemaFormValidationOptions } from '../../lib/schema/ajv';\nimport * as m from '../../paraglide/messages.js';\nimport { ChevronDown } from 'lucide-react';\n\nimport type { JSONSchema, JSONSchemaProperty } from '../../lib/schema/types';\nimport { FormContainer, type FormContainerWidth } from './form-container';\nimport { FormActionBar, type SaveStatus } from './form-action-bar';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';\nimport { Button } from '../ui/button';\nimport { SchemaDetailPage } from '../schema/SchemaDetailPage';\nimport type { RelatedFieldConfig } from '../ui/form';\n\ntype DetailMode = 'view' | 'edit';\ntype GroupDisplay = 'heading' | 'card' | 'dropdown';\n\ninterface EnhancedDetailPageProps<TFieldValues extends FieldValues> {\n  /** Opt into whole-record schema validation. */\n  validation?: SchemaFormValidationOptions;\n  /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */\n  schema: JSONSchema;\n  /** 表示モード */\n  mode: DetailMode;\n  /** 現在の値 */\n  values?: Partial<TFieldValues>;\n  /** 送信ボタンのラベル */\n  submitLabel?: 'create' | 'update';\n  /** フォーム送信時のハンドラ */\n  onSubmit?: (values: TFieldValues) => void | Promise<void>;\n  /** キャンセル時のハンドラ */\n  onCancel?: () => void;\n  /** 削除時のハンドラ */\n  onDelete?: () => void;\n  /** 編集モード切り替えハンドラ */\n  onEdit?: () => void;\n  /** 編集ボタンを表示 */\n  showEditButton?: boolean;\n  /** グループ表示スタイル */\n  groupDisplay?: GroupDisplay;\n  /** リレーションデータ */\n  relations?: Record<string, RelatedFieldConfig>;\n\n  // 新しいレイアウトオプション\n\n  /**\n   * 中央揃えコンテナレイアウトを使用\n   * @default true\n   */\n  containerLayout?: boolean;\n  /**\n   * コンテナの最大幅\n   * @default \"4xl\"\n   */\n  maxWidth?: FormContainerWidth;\n  /**\n   * スティッキーアクションバーを有効化\n   * @default false\n   */\n  stickyActions?: boolean;\n  /**\n   * プログレッシブディスクロージャー (advanced フィールドを折りたたみ)\n   * @default true\n   */\n  progressiveDisclosure?: boolean;\n  /**\n   * 保存状態インジケーター\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * レスポンシブグリッドを使用 (field.width を考慮)\n   * @default true\n   */\n  useGrid?: boolean;\n  /**\n   * グリッドの列数\n   * @default 2\n   */\n  gridColumns?: 1 | 2 | 3;\n\n  /**\n   * カスタムフォームコンテンツ (schema による自動生成を上書き)\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * 拡張されたフィールドを通常と高度に分離 (JSONSchema版)\n */\nconst separateAdvancedFields = (\n  schema: JSONSchema,\n): { standard: JSONSchema; advanced: JSONSchema } => {\n  const standardProps: Record<string, JSONSchemaProperty> = {};\n  const advancedProps: Record<string, JSONSchemaProperty> = {};\n\n  const properties = schema.properties || {};\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (prop['x-ui']?.advanced) {\n      advancedProps[key] = prop;\n    } else {\n      standardProps[key] = prop;\n    }\n  }\n\n  return {\n    standard: { ...schema, properties: standardProps },\n    advanced: { ...schema, title: `${schema.title || ''}_advanced`, properties: advancedProps },\n  };\n};\n\n/**\n * デスクトップ最適化された詳細/編集ページコンポーネント\n *\n * UXベストプラクティスに基づく拡張レイアウト機能:\n * - 中央揃えの読みやすいコンテナ幅\n * - レスポンシブグリッドレイアウト (モバイル1列、デスクトップ2列)\n * - プログレッシブディスクロージャー (advanced フィールドの折りたたみ)\n * - スティッキーアクションバー\n * - 保存状態インジケーター\n *\n * @example\n * ```tsx\n * <EnhancedDetailPage\n *   schema={userSchema}\n *   mode=\"edit\"\n *   values={userData}\n *   onSubmit={handleSave}\n *   containerLayout\n *   stickyActions\n *   progressiveDisclosure\n * />\n * ```\n */\nexport function EnhancedDetailPage<TFieldValues extends FieldValues>({\n  schema,\n  validation,\n  mode,\n  values,\n  submitLabel = 'update',\n  onSubmit,\n  onCancel,\n  onDelete,\n  onEdit,\n  showEditButton = false,\n  groupDisplay,\n  relations,\n  containerLayout = true,\n  maxWidth = '4xl',\n  stickyActions = false,\n  progressiveDisclosure = true,\n  saveStatus = 'idle',\n  useGrid = true,\n  children,\n  className,\n}: EnhancedDetailPageProps<TFieldValues>) {\n  const form = useForm<TFieldValues>({\n    defaultValues: values as DefaultValues<TFieldValues>,\n    resolver: validation ? createAjvResolver<TFieldValues>(schema, validation) : undefined,\n  });\n  const { dirtyFields } = form.formState;\n  React.useEffect(() => { if (values) form.reset(values as TFieldValues, { keepDirtyValues: true }); }, [values, form]);\n  void dirtyFields;\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  // プログレッシブディスクロージャー: 通常/高度フィールドを分離\n  const { standard, advanced } = React.useMemo(() => separateAdvancedFields(schema), [schema]);\n  const hasAdvancedFields = Object.keys(advanced.properties || {}).length > 0;\n\n  const renderContent = () => (\n    <>\n      {/* カスタムコンテンツがある場合はそれを優先、ない場合はスキーマ駆動フォームを表示 */}\n      {children ? (\n        <div className='space-y-6'>{children}</div>\n      ) : (\n        <>\n          {/* 標準フィールド */}\n          <SchemaDetailPage\n            form={form}\n            schema={progressiveDisclosure ? standard : schema}\n            mode={mode}\n            values={values}\n            submitLabel={submitLabel}\n            onSubmit={onSubmit}\n            onCancel={onCancel}\n            onDelete={onDelete}\n            onEdit={onEdit}\n            showEditButton={!stickyActions && showEditButton}\n            hideActions={stickyActions}\n            groupDisplay={groupDisplay}\n            groupLayout={useGrid ? 'full' : 'column'}\n            columnMinWidth={useGrid ? 300 : undefined}\n            relations={relations}\n          />\n\n          {/* 高度なフィールド (折りたたみ) */}\n          {progressiveDisclosure && hasAdvancedFields && (\n            <Collapsible\n              open={advancedOpen}\n              onOpenChange={setAdvancedOpen}\n              className='mt-6 border-t pt-4'\n            >\n              <CollapsibleTrigger className='flex w-full items-center justify-between py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors'>\n                <span>{m.common_advanced({ defaultValue: 'Advanced Settings' })}</span>\n                <ChevronDown\n                  className={`h-4 w-4 transition-transform ${advancedOpen ? 'rotate-180' : ''}`}\n                />\n              </CollapsibleTrigger>\n              <CollapsibleContent className='pt-4'>\n                <SchemaDetailPage\n                  form={form}\n                  schema={advanced}\n                  mode={mode}\n                  values={values}\n                  groupDisplay={groupDisplay}\n                  groupLayout={useGrid ? 'full' : 'column'}\n                  columnMinWidth={useGrid ? 300 : undefined}\n                  relations={relations}\n                />\n              </CollapsibleContent>\n            </Collapsible>\n          )}\n        </>\n      )}\n\n      {/* スティッキーアクションバー */}\n      {stickyActions && mode === 'edit' && (\n        <FormActionBar\n          primaryLabel={\n            submitLabel === 'create'\n              ? m.common_actions_create({ defaultValue: 'Create' })\n              : m.common_actions_update({ defaultValue: 'Update' })\n          }\n          onPrimary={children ? () => containerRef.current?.querySelector('form')?.requestSubmit() : undefined}\n          onSecondary={onCancel}\n          saveStatus={saveStatus}\n          sticky\n          tertiaryAction={\n            onDelete && (\n              <Button type='button' variant='destructive' onClick={onDelete}>\n                {m.common_actions_delete({ defaultValue: 'Delete' })}\n              </Button>\n            )\n          }\n        />\n      )}\n\n      {/* View モードのアクション */}\n      {stickyActions && mode === 'view' && showEditButton && (\n        <FormActionBar\n          primaryLabel={m.common_actions_edit({ defaultValue: 'Edit' })}\n          onPrimary={onEdit}\n          onSecondary={onCancel}\n          sticky\n        />\n      )}\n    </>\n  );\n\n  const content = mode === 'edit' && !children ? (\n    <FormProvider {...form}>\n      <form onSubmit={form.handleSubmit(data => onSubmit?.(data))}>{renderContent()}</form>\n    </FormProvider>\n  ) : renderContent();\n\n  if (containerLayout) {\n    return (\n      <FormContainer ref={containerRef} maxWidth={maxWidth} className={className}>\n        {content}\n      </FormContainer>\n    );\n  }\n\n  return (\n    <div ref={containerRef} className={className}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EnhancedDetailPage.js","names":["React","_Fragment","m.common_advanced","m.common_actions_create","m.common_actions_update","m.common_actions_delete","m.common_actions_edit","React$1","separateAdvancedFields","standardProps","advancedProps","properties","schema","key","prop","EnhancedDetailPage","form","useForm","values","validation","createAjvResolver","advancedOpen","setAdvancedOpen","containerRef","hasAdvancedFields","advanced","renderContent","Fragment","children","SchemaDetailPage","progressiveDisclosure","standard","stickyActions","showEditButton","useGrid","Collapsible","CollapsibleTrigger","common_advanced","ChevronDown","CollapsibleContent","mode","FormActionBar","submitLabel","common_actions_create","common_actions_update","onCancel","onDelete","Button","common_actions_delete","common_actions_edit","onEdit","content","FormProvider","onSubmit","data","containerLayout","FormContainer"],"sources":["../../../../src/tools/components/form/EnhancedDetailPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormProvider, useForm, type FieldValues, type DefaultValues } from 'react-hook-form';\nimport { createAjvResolver, type SchemaFormValidationOptions } from '../../lib/schema/ajv';\nimport * as m from '../../paraglide/messages.js';\nimport { ChevronDown } from 'lucide-react';\n\nimport type { JSONSchema, JSONSchemaProperty } from '../../lib/schema/types';\nimport { FormContainer, type FormContainerWidth } from './form-container';\nimport { FormActionBar, type SaveStatus } from './form-action-bar';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';\nimport { Button } from '../ui/button';\nimport { SchemaDetailPage } from '../schema/SchemaDetailPage';\nimport type { RelatedFieldConfig } from '../ui/form';\n\ntype DetailMode = 'view' | 'edit';\ntype GroupDisplay = 'heading' | 'card' | 'dropdown';\n\n/**\n * Form values, schema and presentation settings for {@link EnhancedDetailPage}.\n * @typeParam TFieldValues - React Hook Form field-value shape supplied to onSubmit.\n */\ninterface EnhancedDetailPageProps<TFieldValues extends FieldValues> {\n  /** Opt into whole-record schema validation. */\n  validation?: SchemaFormValidationOptions;\n  /** JSON Schema definition with vendor extensions (x-ui, x-db, x-zod) */\n  schema: JSONSchema;\n  /** View renders details; edit renders form inputs. */\n  mode: DetailMode;\n  /** Initial values and later reset values; later updates preserve dirty fields. */\n  values?: Partial<TFieldValues>;\n  /** Submit action wording; defaults to update. */\n  submitLabel?: 'create' | 'update';\n  /** Called with form values after configured validation on submit; the host performs persistence. */\n  onSubmit?: (values: TFieldValues) => void | Promise<void>;\n  /** Called by the cancel action; the host handles navigation or rollback. */\n  onCancel?: () => void;\n  /** Called by the delete action; the host performs deletion. */\n  onDelete?: () => void;\n  /** Called by the edit action; the host updates mode. */\n  onEdit?: () => void;\n  /** Shows the view-mode edit action when true; defaults to false. */\n  showEditButton?: boolean;\n  /** Group presentation forwarded to SchemaDetailPage; omitted uses its default. */\n  groupDisplay?: GroupDisplay;\n  /** Related-field display and selection configuration forwarded to SchemaDetailPage. */\n  relations?: Record<string, RelatedFieldConfig>;\n\n  // 新しいレイアウトオプション\n\n  /**\n   * Wrap content in a centered FormContainer.\n   * @defaultValue true\n   */\n  containerLayout?: boolean;\n  /**\n   * Maximum width preset when containerLayout is enabled.\n   * @defaultValue \"4xl\"\n   */\n  maxWidth?: FormContainerWidth;\n  /**\n   * Use the sticky FormActionBar and hide ordinary generated actions.\n   * @defaultValue false\n   */\n  stickyActions?: boolean;\n  /**\n   * Separate fields marked x-ui.advanced into a section initially collapsed.\n   * @defaultValue true\n   */\n  progressiveDisclosure?: boolean;\n  /**\n   * Host-supplied save indicator; defaults to idle and does not track persistence automatically.\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * Use SchemaDetailPage groupLayout full and columnMinWidth 300; false uses column layout.\n   * @defaultValue true\n   */\n  useGrid?: boolean;\n  /**\n   * Reserved compatibility option; currently ignored. Changing it does not set columns.\n   * Use useGrid to select the supported layout behavior.\n   */\n  gridColumns?: 1 | 2 | 3;\n\n  /**\n   * Replace generated content. The caller supplies its own form, submission wiring and providers.\n   */\n  children?: React.ReactNode;\n\n  /** Additional classes on the outer container. */\n  className?: string;\n}\n\n/**\n * 拡張されたフィールドを通常と高度に分離 (JSONSchema版)\n */\nconst separateAdvancedFields = (\n  schema: JSONSchema,\n): { standard: JSONSchema; advanced: JSONSchema } => {\n  const standardProps: Record<string, JSONSchemaProperty> = {};\n  const advancedProps: Record<string, JSONSchemaProperty> = {};\n\n  const properties = schema.properties || {};\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (prop['x-ui']?.advanced) {\n      advancedProps[key] = prop;\n    } else {\n      standardProps[key] = prop;\n    }\n  }\n\n  return {\n    standard: { ...schema, properties: standardProps },\n    advanced: { ...schema, title: `${schema.title || ''}_advanced`, properties: advancedProps },\n  };\n};\n\n/**\n * Renders schema-driven view/edit content with an optional container, advanced fields and action bar.\n * @typeParam TFieldValues - React Hook Form value shape passed to the submit callback.\n * @param props - Schema, host-owned values/actions and layout settings; see EnhancedDetailPageProps.\n * @returns The detail content inside a centered container or plain div.\n * @remarks Import Appkit CSS. Generated edit content supplies its own React Hook Form provider\n * and form element; validation is opt-in via validation. Later values updates preserve dirty fields.\n * The host owns persistence, saveStatus, mode changes and errors from async onSubmit.\n * Custom children replace generated content and must supply their own form/provider wiring.\n * gridColumns is ignored; useGrid selects SchemaDetailPage layout and a 300px column minimum,\n * without guaranteeing an exact number of columns. No fixed two-column default is implemented.\n * @example\n * ```tsx\n * import { EnhancedDetailPage } from '@alneas/appkit-react/tools/form';\n * import '@alneas/appkit-react/styles';\n *\n * export function UserDetails() {\n *   return <EnhancedDetailPage<{ name: string }> mode=\"view\"\n *     schema={{ type: 'object', properties: { name: { type: 'string', title: 'Name' } } }}\n *     values={{ name: 'Ada' }} />;\n * }\n * ```\n */\nexport function EnhancedDetailPage<TFieldValues extends FieldValues>({\n  schema,\n  validation,\n  mode,\n  values,\n  submitLabel = 'update',\n  onSubmit,\n  onCancel,\n  onDelete,\n  onEdit,\n  showEditButton = false,\n  groupDisplay,\n  relations,\n  containerLayout = true,\n  maxWidth = '4xl',\n  stickyActions = false,\n  progressiveDisclosure = true,\n  saveStatus = 'idle',\n  useGrid = true,\n  children,\n  className,\n}: EnhancedDetailPageProps<TFieldValues>) {\n  const form = useForm<TFieldValues>({\n    defaultValues: values as DefaultValues<TFieldValues>,\n    resolver: validation ? createAjvResolver<TFieldValues>(schema, validation) : undefined,\n  });\n  const { dirtyFields } = form.formState;\n  React.useEffect(() => { if (values) form.reset(values as TFieldValues, { keepDirtyValues: true }); }, [values, form]);\n  void dirtyFields;\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  // プログレッシブディスクロージャー: 通常/高度フィールドを分離\n  const { standard, advanced } = React.useMemo(() => separateAdvancedFields(schema), [schema]);\n  const hasAdvancedFields = Object.keys(advanced.properties || {}).length > 0;\n\n  const renderContent = () => (\n    <>\n      {/* カスタムコンテンツがある場合はそれを優先、ない場合はスキーマ駆動フォームを表示 */}\n      {children ? (\n        <div className='space-y-6'>{children}</div>\n      ) : (\n        <>\n          {/* 標準フィールド */}\n          <SchemaDetailPage\n            form={form}\n            schema={progressiveDisclosure ? standard : schema}\n            mode={mode}\n            values={values}\n            submitLabel={submitLabel}\n            onSubmit={onSubmit}\n            onCancel={onCancel}\n            onDelete={onDelete}\n            onEdit={onEdit}\n            showEditButton={!stickyActions && showEditButton}\n            hideActions={stickyActions}\n            groupDisplay={groupDisplay}\n            groupLayout={useGrid ? 'full' : 'column'}\n            columnMinWidth={useGrid ? 300 : undefined}\n            relations={relations}\n          />\n\n          {/* 高度なフィールド (折りたたみ) */}\n          {progressiveDisclosure && hasAdvancedFields && (\n            <Collapsible\n              open={advancedOpen}\n              onOpenChange={setAdvancedOpen}\n              className='mt-6 border-t pt-4'\n            >\n              <CollapsibleTrigger className='flex w-full items-center justify-between py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors'>\n                <span>{m.common_advanced({ defaultValue: 'Advanced Settings' })}</span>\n                <ChevronDown\n                  className={`h-4 w-4 transition-transform ${advancedOpen ? 'rotate-180' : ''}`}\n                />\n              </CollapsibleTrigger>\n              <CollapsibleContent className='pt-4'>\n                <SchemaDetailPage\n                  form={form}\n                  schema={advanced}\n                  mode={mode}\n                  values={values}\n                  groupDisplay={groupDisplay}\n                  groupLayout={useGrid ? 'full' : 'column'}\n                  columnMinWidth={useGrid ? 300 : undefined}\n                  relations={relations}\n                />\n              </CollapsibleContent>\n            </Collapsible>\n          )}\n        </>\n      )}\n\n      {/* スティッキーアクションバー */}\n      {stickyActions && mode === 'edit' && (\n        <FormActionBar\n          primaryLabel={\n            submitLabel === 'create'\n              ? m.common_actions_create({ defaultValue: 'Create' })\n              : m.common_actions_update({ defaultValue: 'Update' })\n          }\n          onPrimary={children ? () => containerRef.current?.querySelector('form')?.requestSubmit() : undefined}\n          onSecondary={onCancel}\n          saveStatus={saveStatus}\n          sticky\n          tertiaryAction={\n            onDelete && (\n              <Button type='button' variant='destructive' onClick={onDelete}>\n                {m.common_actions_delete({ defaultValue: 'Delete' })}\n              </Button>\n            )\n          }\n        />\n      )}\n\n      {/* View モードのアクション */}\n      {stickyActions && mode === 'view' && showEditButton && (\n        <FormActionBar\n          primaryLabel={m.common_actions_edit({ defaultValue: 'Edit' })}\n          onPrimary={onEdit}\n          onSecondary={onCancel}\n          sticky\n        />\n      )}\n    </>\n  );\n\n  const content = mode === 'edit' && !children ? (\n    <FormProvider {...form}>\n      <form onSubmit={form.handleSubmit(data => onSubmit?.(data))}>{renderContent()}</form>\n    </FormProvider>\n  ) : renderContent();\n\n  if (containerLayout) {\n    return (\n      <FormContainer ref={containerRef} maxWidth={maxWidth} className={className}>\n        {content}\n      </FormContainer>\n    );\n  }\n\n  return (\n    <div ref={containerRef} className={className}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/form/form-action-bar.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../../ui/components/ui/button-components.cjs"),r=require("../../paraglide/messages/common_actions_cancel.cjs"),i=require("../../paraglide/messages/common_actions_save.cjs");let a=require("react/jsx-runtime"),o=require("react");o=e.__toESM(o,1);let s=require("lucide-react");var c={idle:null,saving:(0,a.jsx)(s.Loader2,{className:`h-4 w-4 animate-spin text-muted-foreground`}),saved:(0,a.jsx)(s.Check,{className:`h-4 w-4 text-green-500`}),error:(0,a.jsx)(s.AlertCircle,{className:`h-4 w-4 text-destructive`})},l=o.forwardRef(({testId:e,className:o,primaryLabel:l,secondaryLabel:u,onPrimary:d,onSecondary:f,saveStatus:p=`idle`,sticky:m=!0,primaryDisabled:h=!1,tertiaryAction:g,children:_,...v},y)=>{let b=l??i.common_actions_save({defaultValue:`Save`}),x=u??r.common_actions_cancel({defaultValue:`Cancel`});return(0,a.jsxs)(`div`,{ref:y,"data-testid":e,"data-save-status":p,className:t.cn(`flex flex-wrap items-center gap-3 border-t bg-background py-4`,m&&`sticky bottom-0 z-10`,o),...v,children:[(0,a.jsxs)(`div`,{className:`flex flex-1 flex-wrap items-center gap-3`,children:[(0,a.jsxs)(n.Button,{type:`submit`,testId:e?`${e}-primary`:void 0,onClick:d,disabled:h||p===`saving`,children:[p===`saving`&&(0,a.jsx)(s.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),b]}),f&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,testId:e?`${e}-secondary`:void 0,onClick:f,disabled:p===`saving`,children:x}),g,_]}),p!==`idle`&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[c[p],``]})]})});l.displayName=`FormActionBar`,exports.FormActionBar=l;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../../ui/components/ui/button-components.cjs"),r=require("../../paraglide/messages/common_actions_cancel.cjs"),i=require("../../paraglide/messages/common_actions_save.cjs");let a=require("react/jsx-runtime"),o=require("react");o=e.__toESM(o,1);let s=require("lucide-react");var c={idle:null,saving:(0,a.jsx)(s.Loader2,{className:`h-4 w-4 animate-spin text-muted-foreground`}),saved:(0,a.jsx)(s.Check,{className:`h-4 w-4 text-green-500`}),error:(0,a.jsx)(s.AlertCircle,{className:`h-4 w-4 text-destructive`})};function l({ref:e,testId:o,className:l,primaryLabel:u,secondaryLabel:d,onPrimary:f,onSecondary:p,saveStatus:m=`idle`,sticky:h=!0,primaryDisabled:g=!1,tertiaryAction:_,children:v,...y}){let b=u??i.common_actions_save({defaultValue:`Save`}),x=d??r.common_actions_cancel({defaultValue:`Cancel`});return(0,a.jsxs)(`div`,{ref:e,"data-testid":o,"data-save-status":m,className:t.cn(`flex flex-wrap items-center gap-3 border-t bg-background py-4`,h&&`sticky bottom-0 z-10`,l),...y,children:[(0,a.jsxs)(`div`,{className:`flex flex-1 flex-wrap items-center gap-3`,children:[(0,a.jsxs)(n.Button,{type:`submit`,testId:o?`${o}-primary`:void 0,onClick:f,disabled:g||m===`saving`,children:[m===`saving`&&(0,a.jsx)(s.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),b]}),p&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,testId:o?`${o}-secondary`:void 0,onClick:p,disabled:m===`saving`,children:x}),_,v]}),m!==`idle`&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[c[m],``]})]})}l.displayName=`FormActionBar`,exports.FormActionBar=l;
 //# sourceMappingURL=form-action-bar.cjs.map

package/dist/tools/components/form/form-action-bar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form-action-bar.cjs","names":["Loader2","Check","AlertCircle","React","cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_common_actions_cancel","require_common_actions_save","react_jsx_runtime","react","lucide_react","statusIcons","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","resolvedSecondaryLabel","secondaryLabel","testId","saveStatus","sticky","className","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\n/**\n * FormActionBarProps\n * フォームアクションバーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n */\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /**\n   * プライマリアクションのラベル\n   * @default \"Save\"\n   */\n  primaryLabel?: string;\n  /**\n   * セカンダリアクションのラベル\n   * @default \"Cancel\"\n   */\n  secondaryLabel?: string;\n  /**\n   * プライマリアクションのハンドラ\n   */\n  onPrimary?: () => void;\n  /**\n   * セカンダリアクションのハンドラ\n   */\n  onSecondary?: () => void;\n  /**\n   * 保存状態のインジケーター\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * スティッキー表示を有効にする\n   * @default true\n   */\n  sticky?: boolean;\n  /**\n   * プライマリボタンを無効にする\n   */\n  primaryDisabled?: boolean;\n  /**\n   * 第三のアクション（削除など）\n   */\n  tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n  idle: null,\n  saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n  saved: <Check className='h-4 w-4 text-green-500' />,\n  error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/**\n * FormActionBar Component\n * フォーム用のアクションバー\n *\n * Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n *\n * @example With testId\n * ```tsx\n * <FormActionBar\n *   testId=\"profile-form\"\n *   onPrimary={handleSave}\n *   onSecondary={handleCancel}\n *   saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport const FormActionBar = React.forwardRef<HTMLDivElement, FormActionBarProps>(\n  (\n    {\n      testId,\n      className,\n      primaryLabel,\n      secondaryLabel,\n      onPrimary,\n      onSecondary,\n      saveStatus = 'idle',\n      sticky = true,\n      primaryDisabled = false,\n      tertiaryAction,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n    const resolvedSecondaryLabel =\n      secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n    const statusMessage = '';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        data-save-status={saveStatus}\n        className={cn(\n          'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n          sticky && 'sticky bottom-0 z-10',\n          className,\n        )}\n        {...props}\n      >\n        <div className='flex flex-1 flex-wrap items-center gap-3'>\n          <Button\n            type='submit'\n            testId={testId ? `${testId}-primary` : undefined}\n            onClick={onPrimary}\n            disabled={primaryDisabled || saveStatus === 'saving'}\n          >\n            {saveStatus === 'saving' && (\n              <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n            )}\n            {resolvedPrimaryLabel}\n          </Button>\n          {onSecondary && (\n            <Button\n              type='button'\n              variant='outline'\n              testId={testId ? `${testId}-secondary` : undefined}\n              onClick={onSecondary}\n              disabled={saveStatus === 'saving'}\n            >\n              {resolvedSecondaryLabel}\n            </Button>\n          )}\n          {tertiaryAction}\n          {children}\n        </div>\n\n        {saveStatus !== 'idle' && (\n          <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n            {statusIcons[saveStatus]}\n            {statusMessage && <span>{statusMessage}</span>}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":"A,kdAyDA,IAAMc,EAAmD,CACvD,KAAM,KACN,QAAQ,EAAAH,EAAA,IAAA,CAACX,EAAAA,QAAD,CAAS,UAAU,4CAA8C,CAAA,EACzE,OAAO,EAAAW,EAAA,IAAA,CAACV,EAAAA,MAAD,CAAO,UAAU,wBAA0B,CAAA,EAClD,OAAO,EAAAU,EAAA,IAAA,CAACT,EAAAA,YAAD,CAAa,UAAU,0BAA4B,CAAA,CAC5D,EA0Baa,EAAgBZ,EAAM,YAE/B,CACE,SACA,YACA,eACA,iBACA,YACA,cACA,aAAa,OACb,SAAS,GACT,kBAAkB,GAClB,iBACA,WACA,GAAGa,GAEL,IACG,CACH,IAAMC,EAAuBC,GAAAR,EAAA,oBAAsC,CAAE,aAAc,MAAO,CAAC,EACrFS,EACJC,GAAAX,EAAA,sBAA0C,CAAE,aAAc,QAAS,CAAC,EAGtE,OACE,EAAAE,EAAA,KAAA,CAAC,MAAD,CACO,MACL,cAAaU,EACb,mBAAkBC,EAClB,UAAWlB,EAAAA,GACT,gEACAmB,GAAU,uBACVC,CACF,EACA,GAAIR,EATN,SAAA,EAWE,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,OAAQgB,EAAS,GAAGA,EAAO,UAAY,IAAA,GACvC,QAASI,EACT,SAAUC,GAAmBJ,IAAe,SAJ9C,SAAA,CAMGA,IAAe,WACd,EAAAX,EAAA,IAAA,CAACX,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEiB,CACK,C,GACPU,IACC,EAAAhB,EAAA,IAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,OAAQgB,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAASM,EACT,SAAUL,IAAe,SAExB,SAAAH,CACK,CAAA,EAETS,EACAC,CACE,CAEJ,CAAA,EAAAP,IAAe,SACd,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wDAAf,SAAA,CACGG,EAAYQ,GACZ,EACE,CAEJ,CAAA,CAAA,C,EAET,CACF,EACA,EAAc,YAAc,gB"}
+{"version":3,"file":"form-action-bar.cjs","names":["Loader2","Check","AlertCircle","cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_common_actions_cancel","require_common_actions_save","react_jsx_runtime","react","lucide_react","statusIcons","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","resolvedSecondaryLabel","secondaryLabel","testId","saveStatus","sticky","className","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';\n\n/**\n * FormActionBarProps\n * フォームアクションバーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n */\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /**\n   * プライマリアクションのラベル\n   * @default \"Save\"\n   */\n  primaryLabel?: string;\n  /**\n   * セカンダリアクションのラベル\n   * @default \"Cancel\"\n   */\n  secondaryLabel?: string;\n  /**\n   * プライマリアクションのハンドラ\n   */\n  onPrimary?: () => void;\n  /**\n   * セカンダリアクションのハンドラ\n   */\n  onSecondary?: () => void;\n  /**\n   * 保存状態のインジケーター\n   */\n  saveStatus?: SaveStatus;\n  /**\n   * スティッキー表示を有効にする\n   * @default true\n   */\n  sticky?: boolean;\n  /**\n   * プライマリボタンを無効にする\n   */\n  primaryDisabled?: boolean;\n  /**\n   * 第三のアクション（削除など）\n   */\n  tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n  idle: null,\n  saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n  saved: <Check className='h-4 w-4 text-green-500' />,\n  error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/**\n * FormActionBar Component\n * フォーム用のアクションバー\n *\n * Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n *\n * @example With testId\n * ```tsx\n * <FormActionBar\n *   testId=\"profile-form\"\n *   onPrimary={handleSave}\n *   onSecondary={handleCancel}\n *   saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport function FormActionBar({\n  ref,\n  testId,\n  className,\n  primaryLabel,\n  secondaryLabel,\n  onPrimary,\n  onSecondary,\n  saveStatus = 'idle',\n  sticky = true,\n  primaryDisabled = false,\n  tertiaryAction,\n  children,\n  ...props\n}: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>) {\n  const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n  const resolvedSecondaryLabel =\n    secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n  const statusMessage = '';\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-save-status={saveStatus}\n      className={cn(\n        'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n        sticky && 'sticky bottom-0 z-10',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex flex-1 flex-wrap items-center gap-3'>\n        <Button\n          type='submit'\n          testId={testId ? `${testId}-primary` : undefined}\n          onClick={onPrimary}\n          disabled={primaryDisabled || saveStatus === 'saving'}\n        >\n          {saveStatus === 'saving' && (\n            <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n          )}\n          {resolvedPrimaryLabel}\n        </Button>\n        {onSecondary && (\n          <Button\n            type='button'\n            variant='outline'\n            testId={testId ? `${testId}-secondary` : undefined}\n            onClick={onSecondary}\n            disabled={saveStatus === 'saving'}\n          >\n            {resolvedSecondaryLabel}\n          </Button>\n        )}\n        {tertiaryAction}\n        {children}\n      </div>\n\n      {saveStatus !== 'idle' && (\n        <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n          {statusIcons[saveStatus]}\n          {statusMessage && <span>{statusMessage}</span>}\n        </div>\n      )}\n    </div>\n  );\n}\nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":"A,kdAyDA,IAAMa,EAAmD,CACvD,KAAM,KACN,QAAQ,EAAAH,EAAA,IAAA,CAACV,EAAAA,QAAD,CAAS,UAAU,4CAA8C,CAAA,EACzE,OAAO,EAAAU,EAAA,IAAA,CAACT,EAAAA,MAAD,CAAO,UAAU,wBAA0B,CAAA,EAClD,OAAO,EAAAS,EAAA,IAAA,CAACR,EAAAA,YAAD,CAAa,UAAU,0BAA4B,CAAA,CAC5D,EA0BA,SAAgBY,EAAc,CAC5B,MACA,SACA,YACA,eACA,iBACA,YACA,cACA,aAAa,OACb,SAAS,GACT,kBAAkB,GAClB,iBACA,WACA,GAAGC,GAC+E,CAClF,IAAMC,EAAuBC,GAAAR,EAAA,oBAAsC,CAAE,aAAc,MAAO,CAAC,EACrFS,EACJC,GAAAX,EAAA,sBAA0C,CAAE,aAAc,QAAS,CAAC,EAGtE,OACE,EAAAE,EAAA,KAAA,CAAC,MAAD,CACO,MACL,cAAaU,EACb,mBAAkBC,EAClB,UAAWlB,EAAAA,GACT,gEACAmB,GAAU,uBACVC,CACF,EACA,GAAIR,EATN,SAAA,EAWE,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,OAAQgB,EAAS,GAAGA,EAAO,UAAY,IAAA,GACvC,QAASI,EACT,SAAUC,GAAmBJ,IAAe,SAJ9C,SAAA,CAMGA,IAAe,WACd,EAAAX,EAAA,IAAA,CAACV,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEgB,CACK,C,GACPU,IACC,EAAAhB,EAAA,IAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,OAAQgB,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAASM,EACT,SAAUL,IAAe,SAExB,SAAAH,CACK,CAAA,EAETS,EACAC,CACE,CAEJ,CAAA,EAAAP,IAAe,SACd,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wDAAf,SAAA,CACGG,EAAYQ,GACZ,EACE,CAEJ,CAAA,CAAA,C,EAET,CACA,EAAc,YAAc,gB"}

package/dist/tools/components/form/form-action-bar.d.cts

@@ -72,4 +72,7 @@ export interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement>
  * // Secondary: data-testid="profile-form-secondary"
  * ```
  */
-export declare const FormActionBar: React.ForwardRefExoticComponent<FormActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormActionBar({ ref, testId, className, primaryLabel, secondaryLabel, onPrimary, onSecondary, saveStatus, sticky, primaryDisabled, tertiaryAction, children, ...props }: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormActionBar {
+    var displayName: string;
+}

package/dist/tools/components/form/form-action-bar.d.ts

@@ -72,4 +72,7 @@ export interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement>
  * // Secondary: data-testid="profile-form-secondary"
  * ```
  */
-export declare const FormActionBar: React.ForwardRefExoticComponent<FormActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormActionBar({ ref, testId, className, primaryLabel, secondaryLabel, onPrimary, onSecondary, saveStatus, sticky, primaryDisabled, tertiaryAction, children, ...props }: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormActionBar {
+    var displayName: string;
+}

package/dist/tools/components/form/form-action-bar.js

@@ -4,54 +4,55 @@ import { Button as t } from "../../../ui/components/ui/button-components.js";
 import { common_actions_cancel as n } from "../../paraglide/messages/common_actions_cancel.js";
 import { common_actions_save as r } from "../../paraglide/messages/common_actions_save.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "react";
-import { AlertCircle as s, Check as c, Loader2 as l } from "lucide-react";
+import "react";
+import { AlertCircle as o, Check as s, Loader2 as c } from "lucide-react";
 //#region src/tools/components/form/form-action-bar.tsx
-var u = {
+var l = {
 	idle: null,
-	saving: /* @__PURE__ */ i(l, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
-	saved: /* @__PURE__ */ i(c, { className: "h-4 w-4 text-green-500" }),
-	error: /* @__PURE__ */ i(s, { className: "h-4 w-4 text-destructive" })
-}, d = o.forwardRef(({ testId: o, className: s, primaryLabel: c, secondaryLabel: d, onPrimary: f, onSecondary: p, saveStatus: m = "idle", sticky: h = !0, primaryDisabled: g = !1, tertiaryAction: _, children: v, ...y }, b) => {
-	let x = c ?? r({ defaultValue: "Save" }), S = d ?? n({ defaultValue: "Cancel" });
+	saving: /* @__PURE__ */ i(c, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+	saved: /* @__PURE__ */ i(s, { className: "h-4 w-4 text-green-500" }),
+	error: /* @__PURE__ */ i(o, { className: "h-4 w-4 text-destructive" })
+};
+function u({ ref: o, testId: s, className: u, primaryLabel: d, secondaryLabel: f, onPrimary: p, onSecondary: m, saveStatus: h = "idle", sticky: g = !0, primaryDisabled: _ = !1, tertiaryAction: v, children: y, ...b }) {
+	let x = d ?? r({ defaultValue: "Save" }), S = f ?? n({ defaultValue: "Cancel" });
 	return /* @__PURE__ */ a("div", {
-		ref: b,
-		"data-testid": o,
-		"data-save-status": m,
-		className: e("flex flex-wrap items-center gap-3 border-t bg-background py-4", h && "sticky bottom-0 z-10", s),
-		...y,
+		ref: o,
+		"data-testid": s,
+		"data-save-status": h,
+		className: e("flex flex-wrap items-center gap-3 border-t bg-background py-4", g && "sticky bottom-0 z-10", u),
+		...b,
 		children: [/* @__PURE__ */ a("div", {
 			className: "flex flex-1 flex-wrap items-center gap-3",
 			children: [
 				/* @__PURE__ */ a(t, {
 					type: "submit",
-					testId: o ? `${o}-primary` : void 0,
-					onClick: f,
-					disabled: g || m === "saving",
-					children: [m === "saving" && /* @__PURE__ */ i(l, {
+					testId: s ? `${s}-primary` : void 0,
+					onClick: p,
+					disabled: _ || h === "saving",
+					children: [h === "saving" && /* @__PURE__ */ i(c, {
 						className: "mr-2 h-4 w-4 animate-spin",
 						"aria-hidden": "true"
 					}), x]
 				}),
-				p && /* @__PURE__ */ i(t, {
+				m && /* @__PURE__ */ i(t, {
 					type: "button",
 					variant: "outline",
-					testId: o ? `${o}-secondary` : void 0,
-					onClick: p,
-					disabled: m === "saving",
+					testId: s ? `${s}-secondary` : void 0,
+					onClick: m,
+					disabled: h === "saving",
 					children: S
 				}),
-				_,
-				v
+				v,
+				y
 			]
-		}), m !== "idle" && /* @__PURE__ */ a("div", {
+		}), h !== "idle" && /* @__PURE__ */ a("div", {
 			className: "flex items-center gap-2 text-sm text-muted-foreground",
-			children: [u[m], ""]
+			children: [l[h], ""]
 		})]
 	});
-});
-d.displayName = "FormActionBar";
+}
+u.displayName = "FormActionBar";
 //#endregion
-export { d as FormActionBar };
+export { u as FormActionBar };
 
 //# sourceMappingURL=form-action-bar.js.map