@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/tools/components/filter/filter.d.cts

@@ -1,41 +1,30 @@
 import { FilterProps, FilterResult } from './filter-types.cjs';
 /**
- * Filter Component
- * フィルターUIコンポーネント
- *
- * Schema-based filter UI with type inference.
- * スキーマからフィールド型を推論し、適切なフィルター入力を自動選択します。
- * MongoDBスタイルのフィルターオブジェクトを生成し、useFindと連携できます。
- *
- * ## AI/Automation Features
- * - `data-testid`: Container, apply/reset buttons
- * - Pattern: `{testId}`, `{testId}-apply`, `{testId}-reset`
- * - Filter inputs auto-generate testId from field name
- *
- * @example Basic usage with testId
+ * Renders schema-derived filter inputs and emits a MongoDB-style filter object.
+ * @param props - Field specifications, optional collection schema, labels and change callback; see {@link FilterProps}.
+ * @returns A responsive filter grid with apply/reset buttons when autoApply is false.
+ * @remarks Import Appkit CSS. This component creates local filter state; the host must apply the
+ * emitted filter to its own data query. autoApply defaults to true; false defers onChange
+ * until Apply or Reset. Reset emits an empty filter in manual mode. layout is currently ignored.
+ * With testId, the root uses data-testid=testId and field wrappers use `${testId}-${field}`.
+ * Manual apply/reset buttons use `${testId}-apply` and `${testId}-reset`; they are absent in auto mode.
+ * @example
  * ```tsx
- * <Filter
- *   testId="user-filter"
- *   schema={userSchema}
- *   fields={['name', 'age', 'status']}
- *   showPlaceholderOnAll={true}
- *   onChange={(filter) => setQueryFilter(filter)}
- * />
- * // Container: data-testid="user-filter"
- * // Apply button: data-testid="user-filter-apply"
- * // Reset button: data-testid="user-filter-reset"
- * // Filter inputs auto-generate testId from field name
+ * import { useState } from 'react';
+ * import { SchemaFilter, type CollectionSchema, type FilterResult } from '@alneas/appkit-react/tools/filter';
+ * import '@alneas/appkit-react/styles';
  *
- * @example Customizing filter widths
- * ```tsx
- * <Filter
- *   schema={userSchema}
- *   fields={[
- *     { field: 'name', className: 'min-w-[300px]' }, // Specific field
- *     'status'
- *   ]}
- *   inputClassName="min-w-[200px]" // Global default for this instance
- * />
+ * const schema: CollectionSchema = {
+ *   name: { type: 'string', label: 'Name' },
+ *   status: { type: 'enum', enum: ['active', 'inactive'], label: 'Status' },
+ * };
+ * export function UserFilter() {
+ *   const [filter, setFilter] = useState<FilterResult>({});
+ *   return <><SchemaFilter testId="user-filter" schema={schema} autoApply={false}
+ *     fields={[{ field: 'name', className: 'min-w-[300px]' }, 'status']}
+ *     inputClassName="min-w-[200px]" onChange={setFilter} />
+ *     <pre>{JSON.stringify(filter)}</pre></>;
+ * }
  * ```
  */
 export declare function SchemaFilter({ testId, schema, fields: fieldSpecs, defaultValues, onChange, autoApply, applyLabel, resetLabel, className, labelPosition: globalLabelPosition, labelWidth: globalLabelWidth, overlappingLabel: globalOverlappingLabel, showPlaceholderOnAll: globalShowPlaceholderOnAll, inputClassName: globalInputClassName, locale, // Add locale to destructured props

package/dist/tools/components/filter/filter.d.ts

@@ -1,41 +1,30 @@
 import { FilterProps, FilterResult } from './filter-types.js';
 /**
- * Filter Component
- * フィルターUIコンポーネント
- *
- * Schema-based filter UI with type inference.
- * スキーマからフィールド型を推論し、適切なフィルター入力を自動選択します。
- * MongoDBスタイルのフィルターオブジェクトを生成し、useFindと連携できます。
- *
- * ## AI/Automation Features
- * - `data-testid`: Container, apply/reset buttons
- * - Pattern: `{testId}`, `{testId}-apply`, `{testId}-reset`
- * - Filter inputs auto-generate testId from field name
- *
- * @example Basic usage with testId
+ * Renders schema-derived filter inputs and emits a MongoDB-style filter object.
+ * @param props - Field specifications, optional collection schema, labels and change callback; see {@link FilterProps}.
+ * @returns A responsive filter grid with apply/reset buttons when autoApply is false.
+ * @remarks Import Appkit CSS. This component creates local filter state; the host must apply the
+ * emitted filter to its own data query. autoApply defaults to true; false defers onChange
+ * until Apply or Reset. Reset emits an empty filter in manual mode. layout is currently ignored.
+ * With testId, the root uses data-testid=testId and field wrappers use `${testId}-${field}`.
+ * Manual apply/reset buttons use `${testId}-apply` and `${testId}-reset`; they are absent in auto mode.
+ * @example
  * ```tsx
- * <Filter
- *   testId="user-filter"
- *   schema={userSchema}
- *   fields={['name', 'age', 'status']}
- *   showPlaceholderOnAll={true}
- *   onChange={(filter) => setQueryFilter(filter)}
- * />
- * // Container: data-testid="user-filter"
- * // Apply button: data-testid="user-filter-apply"
- * // Reset button: data-testid="user-filter-reset"
- * // Filter inputs auto-generate testId from field name
+ * import { useState } from 'react';
+ * import { SchemaFilter, type CollectionSchema, type FilterResult } from '@alneas/appkit-react/tools/filter';
+ * import '@alneas/appkit-react/styles';
  *
- * @example Customizing filter widths
- * ```tsx
- * <Filter
- *   schema={userSchema}
- *   fields={[
- *     { field: 'name', className: 'min-w-[300px]' }, // Specific field
- *     'status'
- *   ]}
- *   inputClassName="min-w-[200px]" // Global default for this instance
- * />
+ * const schema: CollectionSchema = {
+ *   name: { type: 'string', label: 'Name' },
+ *   status: { type: 'enum', enum: ['active', 'inactive'], label: 'Status' },
+ * };
+ * export function UserFilter() {
+ *   const [filter, setFilter] = useState<FilterResult>({});
+ *   return <><SchemaFilter testId="user-filter" schema={schema} autoApply={false}
+ *     fields={[{ field: 'name', className: 'min-w-[300px]' }, 'status']}
+ *     inputClassName="min-w-[200px]" onChange={setFilter} />
+ *     <pre>{JSON.stringify(filter)}</pre></>;
+ * }
  * ```
  */
 export declare function SchemaFilter({ testId, schema, fields: fieldSpecs, defaultValues, onChange, autoApply, applyLabel, resetLabel, className, labelPosition: globalLabelPosition, labelWidth: globalLabelWidth, overlappingLabel: globalOverlappingLabel, showPlaceholderOnAll: globalShowPlaceholderOnAll, inputClassName: globalInputClassName, locale, // Add locale to destructured props

package/dist/tools/components/filter/filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.js","names":["m.filter_apply","m.filter_reset","SchemaFilter","fieldSpecs","globalLabelPosition","globalLabelWidth","globalOverlappingLabel","globalShowPlaceholderOnAll","globalInputClassName","useFilter","autoApply","onChange","displayApplyLabel","applyLabel","filter_apply","displayResetLabel","resetLabel","filter_reset","handleApply","filter","handleReset","reset","testId","cn","className","fields","FieldFactory","field","FilterInput","values","setField","value","debounceMs","Button","isEmpty"],"sources":["../../../../src/tools/components/filter/filter.tsx"],"sourcesContent":["/**\n * @fileoverview フィルターUIコンポーネント\n *\n * スキーマベースのフィルターUIを提供します。\n * useFilterフックと各種フィルター入力を組み合わせて、\n * 完全なフィルタリングUIを構築します。\n *\n * @module filter/filter\n */\n\n'use client';\n\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { FilterInput } from './filter-inputs';\nimport { useFilter } from './use-filter';\nimport { FilterProps, FilterResult } from './filter-types';\nimport { FieldFactory } from '../ui/field';\n\n// =============================================================================\n// Filter Component\n// =============================================================================\n\n/**\n * Filter Component\n * フィルターUIコンポーネント\n *\n * Schema-based filter UI with type inference.\n * スキーマからフィールド型を推論し、適切なフィルター入力を自動選択します。\n * MongoDBスタイルのフィルターオブジェクトを生成し、useFindと連携できます。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container, apply/reset buttons\n * - Pattern: `{testId}`, `{testId}-apply`, `{testId}-reset`\n * - Filter inputs auto-generate testId from field name\n *\n * @example Basic usage with testId\n * ```tsx\n * <Filter\n *   testId=\"user-filter\"\n *   schema={userSchema}\n *   fields={['name', 'age', 'status']}\n *   showPlaceholderOnAll={true}\n *   onChange={(filter) => setQueryFilter(filter)}\n * />\n * // Container: data-testid=\"user-filter\"\n * // Apply button: data-testid=\"user-filter-apply\"\n * // Reset button: data-testid=\"user-filter-reset\"\n * // Filter inputs auto-generate testId from field name\n *\n * @example Customizing filter widths\n * ```tsx\n * <Filter\n *   schema={userSchema}\n *   fields={[\n *     { field: 'name', className: 'min-w-[300px]' }, // Specific field\n *     'status'\n *   ]}\n *   inputClassName=\"min-w-[200px]\" // Global default for this instance\n * />\n * ```\n */\nexport function SchemaFilter({\n  testId,\n  schema,\n  fields: fieldSpecs,\n  defaultValues,\n  onChange,\n  autoApply = true,\n  applyLabel = '適用',\n  resetLabel,\n  className,\n  labelPosition: globalLabelPosition,\n  labelWidth: globalLabelWidth,\n  overlappingLabel: globalOverlappingLabel,\n  showPlaceholderOnAll: globalShowPlaceholderOnAll,\n  inputClassName: globalInputClassName,\n  locale, // Add locale to destructured props\n  debounceMs,\n}: FilterProps) {\n  const { values, filter, fields, setField, reset, isEmpty } = useFilter({\n    schema,\n    fields: fieldSpecs,\n    defaultValues,\n    onChange: autoApply ? onChange : undefined,\n    debounceMs,\n  });\n\n  const displayApplyLabel = applyLabel || m.filter_apply();\n  const displayResetLabel = resetLabel || m.filter_reset();\n\n  /**\n   * 適用ボタンのハンドラー\n   */\n  const handleApply = () => {\n    onChange?.(filter);\n  };\n\n  /**\n   * リセットボタンのハンドラー\n   */\n  const handleReset = () => {\n    reset();\n    if (!autoApply) {\n      onChange?.({});\n    }\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(\n        'w-full',\n        'grid gap-x-4 gap-y-2',\n        // Responsive grid: 1 column on small screens, 2 columns on sm+\n        'grid-cols-1 sm:grid-cols-2',\n        className,\n      )}\n    >\n      {fields.map((field) => (\n        <FieldFactory\n          key={field.field}\n          data-testid={testId ? `${testId}-${field.field}` : undefined}\n          label={field.label}\n          labelPosition={field.labelPosition || globalLabelPosition || 'responsive'}\n          labelWidth={field.labelWidth || globalLabelWidth}\n          overlappingLabel={\n            field.overlappingLabel !== undefined ? field.overlappingLabel : globalOverlappingLabel\n          }\n          showPlaceholderOnAll={\n            field.showPlaceholderOnAll !== undefined\n              ? field.showPlaceholderOnAll\n              : globalShowPlaceholderOnAll\n          }\n        >\n          <FilterInput\n            field={field}\n            value={values[field.field]}\n            onChange={(value) => setField(field.field, value)}\n            showPlaceholderOnAll={\n              field.showPlaceholderOnAll !== undefined\n                ? field.showPlaceholderOnAll\n                : globalShowPlaceholderOnAll\n            }\n            className={field.className || globalInputClassName}\n            locale={locale} // Pass locale down\n            debounceMs={field.debounceMs !== undefined ? field.debounceMs : debounceMs}\n          />\n        </FieldFactory>\n      ))}\n\n      {/* ボタン（autoApply=falseの場合のみ表示） */}\n      {!autoApply && (\n        <div className='flex items-end gap-2'>\n          <Button\n            testId={testId ? `${testId}-apply` : undefined}\n            onClick={handleApply}\n            variant='default'\n          >\n            {displayApplyLabel}\n          </Button>\n          <Button\n            testId={testId ? `${testId}-reset` : undefined}\n            onClick={handleReset}\n            variant='outline'\n            disabled={isEmpty}\n          >\n            {displayResetLabel}\n          </Button>\n        </div>\n      )}\n\n      {/* autoApply時のリセットボタン */}\n      {autoApply && !isEmpty && (\n        <div className='flex items-end'>\n          <Button\n            testId={testId ? `${testId}-reset` : undefined}\n            onClick={handleReset}\n            variant='ghost'\n            size='sm'\n          >\n            {displayResetLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\nSchemaFilter.displayName = 'SchemaFilter';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport type { FilterProps, FilterResult };\n"],"mappings":";;;;;;;;;;;AA+DA,SAAgBE,EAAa,EAC3B,WACA,WACA,QAAQC,GACR,kBACA,aACA,eAAY,IACZ,gBAAa,MACb,eACA,cACA,eAAeC,GACf,YAAYC,GACZ,kBAAkBC,GAClB,sBAAsBC,GACtB,gBAAgBC,GAChB,WACA,iBACc;CACd,IAAM,EAAE,WAAQ,WAAQ,WAAQ,aAAU,UAAO,eAAYC,EAAU;EACrE;EACA,QAAQN;EACR;EACA,UAAUO,IAAYC,IAAW,KAAA;EACjC;CACF,CAAC,GAEKC,IAAoBC,KAAcb,EAAe,GACjDe,IAAoBC,KAAcf,EAAe,GAKjDiB,UAAoB;EACxB,IAAWC,CAAM;CACnB,GAKMC,UAAoB;EAExB,AADAC,EAAM,GACDX,KACHC,IAAW,CAAC,CAAC;CAEjB;CAEA,OACE,kBAAC,OAAD;EACE,eAAaW;EACb,WAAWC,EACT,UACA,wBAEA,8BACAC,CACF;EARF,UAAA;GAUGC,EAAO,KAAK,MACX,kBAACC,GAAD;IAEE,eAAaJ,IAAS,GAAGA,EAAO,GAAGK,EAAM,UAAU,KAAA;IACnD,OAAOA,EAAM;IACb,eAAeA,EAAM,iBAAiBvB,KAAuB;IAC7D,YAAYuB,EAAM,cAActB;IAChC,kBACEsB,EAAM,qBAAqB,KAAA,IAAqCrB,IAAzBqB,EAAM;IAE/C,sBACEA,EAAM,yBAAyB,KAAA,IAE3BpB,IADAoB,EAAM;IAIZ,UAAA,kBAACC,GAAD;KACS;KACP,OAAOC,EAAOF,EAAM;KACpB,WAAW,MAAUG,EAASH,EAAM,OAAOI,CAAK;KAChD,sBACEJ,EAAM,yBAAyB,KAAA,IAE3BpB,IADAoB,EAAM;KAGZ,WAAWA,EAAM,aAAanB;KACtB;KACR,YAAYmB,EAAM,eAAe,KAAA,IAA+BK,IAAnBL,EAAM;IACpD,CAAA;GACW,GA3BPA,EAAM,KA2BC,CACf;GAGA,CAACjB,KACA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAACuB,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASJ;KACT,SAAQ;KAEP,UAAAN;IACK,CAAA,GACR,kBAACqB,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASF;KACT,SAAQ;KACR,UAAUc;KAET,UAAAnB;IACK,CAAA,CACL;;GAINL,KAAa,CAACwB,KACb,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAACD,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASF;KACT,SAAQ;KACR,MAAK;KAEJ,UAAAL;IACK,CAAA;GACL,CAAA;EAEJ;;AAET;AACA,EAAa,cAAc"}
+{"version":3,"file":"filter.js","names":["m.filter_apply","m.filter_reset","SchemaFilter","fieldSpecs","globalLabelPosition","globalLabelWidth","globalOverlappingLabel","globalShowPlaceholderOnAll","globalInputClassName","useFilter","autoApply","onChange","displayApplyLabel","applyLabel","filter_apply","displayResetLabel","resetLabel","filter_reset","handleApply","filter","handleReset","reset","testId","cn","className","fields","FieldFactory","field","FilterInput","values","setField","value","debounceMs","Button","isEmpty"],"sources":["../../../../src/tools/components/filter/filter.tsx"],"sourcesContent":["/**\n * @fileoverview フィルターUIコンポーネント\n *\n * スキーマベースのフィルターUIを提供します。\n * useFilterフックと各種フィルター入力を組み合わせて、\n * 完全なフィルタリングUIを構築します。\n *\n * @module filter/filter\n */\n\n'use client';\n\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { FilterInput } from './filter-inputs';\nimport { useFilter } from './use-filter';\nimport { FilterProps, FilterResult } from './filter-types';\nimport { FieldFactory } from '../ui/field';\n\n// =============================================================================\n// Filter Component\n// =============================================================================\n\n/**\n * Renders schema-derived filter inputs and emits a MongoDB-style filter object.\n * @param props - Field specifications, optional collection schema, labels and change callback; see {@link FilterProps}.\n * @returns A responsive filter grid with apply/reset buttons when autoApply is false.\n * @remarks Import Appkit CSS. This component creates local filter state; the host must apply the\n * emitted filter to its own data query. autoApply defaults to true; false defers onChange\n * until Apply or Reset. Reset emits an empty filter in manual mode. layout is currently ignored.\n * With testId, the root uses data-testid=testId and field wrappers use `${testId}-${field}`.\n * Manual apply/reset buttons use `${testId}-apply` and `${testId}-reset`; they are absent in auto mode.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { SchemaFilter, type CollectionSchema, type FilterResult } from '@alneas/appkit-react/tools/filter';\n * import '@alneas/appkit-react/styles';\n *\n * const schema: CollectionSchema = {\n *   name: { type: 'string', label: 'Name' },\n *   status: { type: 'enum', enum: ['active', 'inactive'], label: 'Status' },\n * };\n * export function UserFilter() {\n *   const [filter, setFilter] = useState<FilterResult>({});\n *   return <><SchemaFilter testId=\"user-filter\" schema={schema} autoApply={false}\n *     fields={[{ field: 'name', className: 'min-w-[300px]' }, 'status']}\n *     inputClassName=\"min-w-[200px]\" onChange={setFilter} />\n *     <pre>{JSON.stringify(filter)}</pre></>;\n * }\n * ```\n */\nexport function SchemaFilter({\n  testId,\n  schema,\n  fields: fieldSpecs,\n  defaultValues,\n  onChange,\n  autoApply = true,\n  applyLabel = '適用',\n  resetLabel,\n  className,\n  labelPosition: globalLabelPosition,\n  labelWidth: globalLabelWidth,\n  overlappingLabel: globalOverlappingLabel,\n  showPlaceholderOnAll: globalShowPlaceholderOnAll,\n  inputClassName: globalInputClassName,\n  locale, // Add locale to destructured props\n  debounceMs,\n}: FilterProps) {\n  const { values, filter, fields, setField, reset, isEmpty } = useFilter({\n    schema,\n    fields: fieldSpecs,\n    defaultValues,\n    onChange: autoApply ? onChange : undefined,\n    debounceMs,\n  });\n\n  const displayApplyLabel = applyLabel || m.filter_apply();\n  const displayResetLabel = resetLabel || m.filter_reset();\n\n  /**\n   * 適用ボタンのハンドラー\n   */\n  const handleApply = () => {\n    onChange?.(filter);\n  };\n\n  /**\n   * リセットボタンのハンドラー\n   */\n  const handleReset = () => {\n    reset();\n    if (!autoApply) {\n      onChange?.({});\n    }\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(\n        'w-full',\n        'grid gap-x-4 gap-y-2',\n        // Responsive grid: 1 column on small screens, 2 columns on sm+\n        'grid-cols-1 sm:grid-cols-2',\n        className,\n      )}\n    >\n      {fields.map((field) => (\n        <FieldFactory\n          key={field.field}\n          data-testid={testId ? `${testId}-${field.field}` : undefined}\n          label={field.label}\n          labelPosition={field.labelPosition || globalLabelPosition || 'responsive'}\n          labelWidth={field.labelWidth || globalLabelWidth}\n          overlappingLabel={\n            field.overlappingLabel !== undefined ? field.overlappingLabel : globalOverlappingLabel\n          }\n          showPlaceholderOnAll={\n            field.showPlaceholderOnAll !== undefined\n              ? field.showPlaceholderOnAll\n              : globalShowPlaceholderOnAll\n          }\n        >\n          <FilterInput\n            field={field}\n            value={values[field.field]}\n            onChange={(value) => setField(field.field, value)}\n            showPlaceholderOnAll={\n              field.showPlaceholderOnAll !== undefined\n                ? field.showPlaceholderOnAll\n                : globalShowPlaceholderOnAll\n            }\n            className={field.className || globalInputClassName}\n            locale={locale} // Pass locale down\n            debounceMs={field.debounceMs !== undefined ? field.debounceMs : debounceMs}\n          />\n        </FieldFactory>\n      ))}\n\n      {/* ボタン（autoApply=falseの場合のみ表示） */}\n      {!autoApply && (\n        <div className='flex items-end gap-2'>\n          <Button\n            testId={testId ? `${testId}-apply` : undefined}\n            onClick={handleApply}\n            variant='default'\n          >\n            {displayApplyLabel}\n          </Button>\n          <Button\n            testId={testId ? `${testId}-reset` : undefined}\n            onClick={handleReset}\n            variant='outline'\n            disabled={isEmpty}\n          >\n            {displayResetLabel}\n          </Button>\n        </div>\n      )}\n\n      {/* autoApply時のリセットボタン */}\n      {autoApply && !isEmpty && (\n        <div className='flex items-end'>\n          <Button\n            testId={testId ? `${testId}-reset` : undefined}\n            onClick={handleReset}\n            variant='ghost'\n            size='sm'\n          >\n            {displayResetLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\nSchemaFilter.displayName = 'SchemaFilter';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport type { FilterProps, FilterResult };\n"],"mappings":";;;;;;;;;;;AAoDA,SAAgBE,EAAa,EAC3B,WACA,WACA,QAAQC,GACR,kBACA,aACA,eAAY,IACZ,gBAAa,MACb,eACA,cACA,eAAeC,GACf,YAAYC,GACZ,kBAAkBC,GAClB,sBAAsBC,GACtB,gBAAgBC,GAChB,WACA,iBACc;CACd,IAAM,EAAE,WAAQ,WAAQ,WAAQ,aAAU,UAAO,eAAYC,EAAU;EACrE;EACA,QAAQN;EACR;EACA,UAAUO,IAAYC,IAAW,KAAA;EACjC;CACF,CAAC,GAEKC,IAAoBC,KAAcb,EAAe,GACjDe,IAAoBC,KAAcf,EAAe,GAKjDiB,UAAoB;EACxB,IAAWC,CAAM;CACnB,GAKMC,UAAoB;EAExB,AADAC,EAAM,GACDX,KACHC,IAAW,CAAC,CAAC;CAEjB;CAEA,OACE,kBAAC,OAAD;EACE,eAAaW;EACb,WAAWC,EACT,UACA,wBAEA,8BACAC,CACF;EARF,UAAA;GAUGC,EAAO,KAAK,MACX,kBAACC,GAAD;IAEE,eAAaJ,IAAS,GAAGA,EAAO,GAAGK,EAAM,UAAU,KAAA;IACnD,OAAOA,EAAM;IACb,eAAeA,EAAM,iBAAiBvB,KAAuB;IAC7D,YAAYuB,EAAM,cAActB;IAChC,kBACEsB,EAAM,qBAAqB,KAAA,IAAqCrB,IAAzBqB,EAAM;IAE/C,sBACEA,EAAM,yBAAyB,KAAA,IAE3BpB,IADAoB,EAAM;IAIZ,UAAA,kBAACC,GAAD;KACS;KACP,OAAOC,EAAOF,EAAM;KACpB,WAAW,MAAUG,EAASH,EAAM,OAAOI,CAAK;KAChD,sBACEJ,EAAM,yBAAyB,KAAA,IAE3BpB,IADAoB,EAAM;KAGZ,WAAWA,EAAM,aAAanB;KACtB;KACR,YAAYmB,EAAM,eAAe,KAAA,IAA+BK,IAAnBL,EAAM;IACpD,CAAA;GACW,GA3BPA,EAAM,KA2BC,CACf;GAGA,CAACjB,KACA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAACuB,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASJ;KACT,SAAQ;KAEP,UAAAN;IACK,CAAA,GACR,kBAACqB,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASF;KACT,SAAQ;KACR,UAAUc;KAET,UAAAnB;IACK,CAAA,CACL;;GAINL,KAAa,CAACwB,KACb,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAACD,GAAD;KACE,QAAQX,IAAS,GAAGA,EAAO,UAAU,KAAA;KACrC,SAASF;KACT,SAAQ;KACR,MAAK;KAEJ,UAAAL;IACK,CAAA;GACL,CAAA;EAEJ;;AAET;AACA,EAAa,cAAc"}

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":";;;;;;;;;;;;;;;;;AA2FA,IAAMQ,KACJ,MACmD;CACnD,IAAMC,IAAoD,CAAC,GACrDC,IAAoD,CAAC,GAErDC,IAAaC,EAAO,cAAc,CAAC;CAEzC,KAAK,IAAM,CAACC,GAAKC,MAAS,OAAO,QAAQH,CAAU,GACjD,AAAIG,EAAK,OAAO,EAAE,WAChB,EAAcD,KAAOC,IAErB,EAAcD,KAAOC;CAIzB,OAAO;EACL,UAAU;GAAE,GAAGF;GAAQ,YAAYH;EAAc;EACjD,UAAU;GAAE,GAAGG;GAAQ,OAAO,GAAGA,EAAO,SAAS,GAAG;GAAY,YAAYF;EAAc;CAC5F;AACF;AAyBA,SAAgBK,EAAqD,EACnE,WACA,eACA,SACA,WACA,iBAAc,UACd,aACA,aACA,aACA,WACA,oBAAiB,IACjB,iBACA,cACA,qBAAkB,IAClB,cAAW,OACX,mBAAgB,IAChB,2BAAwB,IACxB,gBAAa,QACb,aAAU,IACV,aACA,gBACwC;CACxC,IAAMC,IAAOC,EAAsB;EACjC,eAAeC;EACf,UAAUC,IAAaC,EAAgCR,GAAQO,CAAU,IAAI,KAAA;CAC/E,CAAC,GACK,EAAE,mBAAgBH,EAAK;CAC7B,EAAM,gBAAgB;EAAE,AAAIE,KAAQF,EAAK,MAAME,GAAwB,EAAE,iBAAiB,GAAK,CAAC;CAAG,GAAG,CAACA,GAAQF,CAAI,CAAC;CAEpH,IAAM,CAACK,GAAcC,KAAmBtB,EAAM,SAAS,EAAK,GACtDuB,IAAevB,EAAM,OAAuB,IAAI,GAGhD,EAAE,aAAU,gBAAaA,EAAM,cAAcQ,EAAuBI,CAAM,GAAG,CAACA,CAAM,CAAC,GACrFY,IAAoB,OAAO,KAAKC,EAAS,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,GAEpEC,UACJ,kBAAAzB,GAAA,EAAA,UAAA;EAEG2B,IACC,kBAAC,OAAD;GAAK,WAAU;GAAa;EAAc,CAAA,IAE1C,kBAAA3B,GAAA,EAAA,UAAA,CAEE,kBAAC4B,GAAD;GACQ;GACN,QAAQC,IAAwBC,IAAWnB;GACrC;GACE;GACK;GACH;GACA;GACA;GACF;GACR,gBAAgB,CAACoB,KAAiBC;GAClC,aAAaD;GACC;GACd,aAAaE,IAAU,SAAS;GAChC,gBAAgBA,IAAU,MAAM,KAAA;GACrB;EACZ,CAAA,GAGAJ,KAAyBN,KACxB,kBAACW,GAAD;GACE,MAAMd;GACN,cAAcC;GACd,WAAU;GAHZ,UAAA,CAKE,kBAACc,GAAD;IAAoB,WAAU;IAA9B,UAAA,CACE,kBAAC,QAAD,EAAA,UAAOlC,EAAkB,EAAE,cAAc,oBAAoB,CAAC,EAAQ,CAAA,GACtE,kBAACoC,GAAD,EACE,WAAW,gCAAgCjB,IAAe,eAAe,KAC1E,CAAA,CACiB;GACpB,CAAA,GAAA,kBAACkB,GAAD;IAAoB,WAAU;IAC5B,UAAA,kBAACV,GAAD;KACQ;KACN,QAAQJ;KACF;KACE;KACM;KACd,aAAaS,IAAU,SAAS;KAChC,gBAAgBA,IAAU,MAAM,KAAA;KACrB;IACZ,CAAA;GACiB,CAAA,CACT;EAEf,CAAA,CAAA,EAAA,CAAA;EAIHF,KAAiBQ,MAAS,UACzB,kBAACC,GAAD;GACE,cACEC,MAAgB,WACZvC,EAAwB,EAAE,cAAc,SAAS,CAAC,IAClDC,EAAwB,EAAE,cAAc,SAAS,CAAC;GAExD,WAAWwB,UAAiBL,EAAa,SAAS,cAAc,MAAM,CAAC,EAAE,cAAc,IAAI,KAAA;GAC3F,aAAasB;GACD;GACZ,QAAA;GACA,gBACEC,KACE,kBAACC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAc,SAASD;IAClD,UAAAzC,EAAwB,EAAE,cAAc,SAAS,CAAC;GAC7C,CAAA;EAGb,CAAA;EAIF2B,KAAiBQ,MAAS,UAAUP,KACnC,kBAACQ,GAAD;GACE,cAAcnC,EAAsB,EAAE,cAAc,OAAO,CAAC;GAC5D,WAAW4C;GACX,aAAaL;GACb,QAAA;EACD,CAAA;CAEH,EAAA,CAAA,GAGEM,IAAUX,MAAS,UAAU,CAACZ,IAClC,kBAACwB,GAAD;EAAc,GAAIpC;EAChB,UAAA,kBAAC,QAAD;GAAM,UAAUA,EAAK,cAAa,MAAQqC,IAAWC,CAAI,CAAC;GAAI,UAAA5B,EAAc;EAAQ,CAAA;CACxE,CAAA,IACZA,EAAc;CAUlB,OARI6B,IAEA,kBAACC,GAAD;EAAe,KAAKjC;EAAwB;EAAqB;EAC9D,UAAA4B;CACY,CAAA,IAKjB,kBAAC,OAAD;EAAK,KAAK5B;EAAyB;EAChC,UAAA4B;CACE,CAAA;AAET"}
+{"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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"}