@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/tools/components/error/ErrorDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDialog.cjs","names":["Info","AlertTriangle","X","AlertCircle","useErrorStore","AppError","Dialog","DialogContent","DialogHeader","cn","DialogTitle","DialogDescription","DialogFooter","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_ui_dialog","require_common_actions_ok","require_errors_code","require_errors_dialogtitle1","require_tools_lib_error_AppError","require_tools_lib_state_error_store","react_jsx_runtime","react","lucide_react","severityConfig","ErrorDialog","propError","propOpen","dialogErrors","getErrorsByMode","storeError","displayError","isOpen","handleClose","removeError","onClose","handlePrimaryAction","onPrimaryAction","handleSecondaryAction","onSecondaryAction","severity","config","Icon","open","secondaryActionLabel","testId","primaryActionLabel"],"sources":["../../../../src/tools/components/error/ErrorDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, X, AlertTriangle, Info } from 'lucide-react';\nimport * as m from '../../paraglide/messages.js';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore } from \"../../lib/state/error-store\";\n\n/**\n * ErrorDialogProps\n * エラーダイアログのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on dialog and buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorDialogProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 直接表示するエラー (制御モード) */\n  error?: AppError | null;\n  /** 開閉状態 (制御モード) */\n  open?: boolean;\n  /** 閉じるときのコールバック */\n  onClose?: () => void;\n  /** 主要アクションのラベル。デフォルト: 'OK' */\n  primaryActionLabel?: string;\n  /** 主要アクションのコールバック */\n  onPrimaryAction?: () => void;\n  /** セカンダリアクションのラベル */\n  secondaryActionLabel?: string;\n  /** セカンダリアクションのコールバック */\n  onSecondaryAction?: () => void;\n}\n\nconst severityConfig: Record<\n  ErrorSeverity,\n  {\n    icon: React.ElementType;\n    iconBgClass: string;\n    iconClass: string;\n    titleClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-blue-600 dark:text-blue-400',\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n    titleClass: 'text-amber-600 dark:text-amber-400',\n  },\n  error: {\n    icon: X,\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n  critical: {\n    icon: AlertCircle,\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n};\n\n/**\n * ErrorDialog Component\n * エラーダイアログコンポーネント\n *\n * Modal dialog for important errors.\n * 重要なエラーをモーダルで表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorDialog\n *     testId=\"api-error\"\n *     error={error}\n *     open={isOpen}\n *     onClose={() => setIsOpen(false)}\n *     primaryActionLabel=\"再試行\"\n *     onPrimaryAction={handleRetry}\n * />\n * // Container: data-testid=\"api-error\"\n * // Primary button: data-testid=\"api-error-primary\"\n * ```\n */\nexport function ErrorDialog({\n  testId,\n  error: propError,\n  open: propOpen,\n  onClose,\n  primaryActionLabel,\n  onPrimaryAction,\n  secondaryActionLabel,\n  onSecondaryAction,\n}: ErrorDialogProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // Store からダイアログモードのエラーを取得 (制御モードでない場合)\n  const dialogErrors = getErrorsByMode('dialog');\n  const storeError = dialogErrors.length > 0 ? dialogErrors[0] : null;\n\n  // 制御モードか Store モードかで表示するエラーを決定\n  const displayError = propError ?? storeError?.error ?? null;\n  const isOpen = propOpen ?? storeError !== null;\n\n  const handleClose = () => {\n    if (storeError) {\n      removeError(storeError.id);\n    }\n    onClose?.();\n  };\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.();\n    handleClose();\n  };\n\n  const handleSecondaryAction = () => {\n    onSecondaryAction?.();\n    handleClose();\n  };\n\n  if (!displayError) {\n    return null;\n  }\n\n  const severity = displayError instanceof AppError ? displayError.severity : 'error';\n  const config = severityConfig[severity];\n  const Icon = config.icon;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <DialogContent testId={testId} data-severity={severity} className='sm:max-w-md'>\n        <DialogHeader>\n          <div className='flex items-center gap-3'>\n            <div className={cn('rounded-full p-1.5', config.iconBgClass)}>\n              <Icon className={cn('h-4 w-4', config.iconClass)} aria-hidden='true' />\n            </div>\n            <DialogTitle className={config.titleClass}>\n              {m.errors_dialogTitle({ defaultValue: 'エラー' })}\n            </DialogTitle>\n          </div>\n        </DialogHeader>\n        <DialogDescription className='text-foreground'>{displayError.message}</DialogDescription>\n        {displayError instanceof AppError &&\n          displayError.code &&\n          displayError.code !== 'error/unknown' && (\n            <p className='text-xs text-muted-foreground mt-2'>\n              {m.errors_code({ defaultValue: 'コード' })}: {displayError.code}\n            </p>\n          )}\n        <DialogFooter className='gap-2 sm:gap-0'>\n          {secondaryActionLabel && (\n            <Button\n              testId={testId ? `${testId}-secondary` : undefined}\n              variant='outline'\n              onClick={handleSecondaryAction}\n            >\n              {secondaryActionLabel}\n            </Button>\n          )}\n          <Button testId={testId ? `${testId}-primary` : undefined} onClick={handlePrimaryAction}>\n            {primaryActionLabel ?? m.common_actions_ok({ defaultValue: 'OK' })}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"A,6oBA4CA,IAAM0B,EAQF,CACF,KAAM,CACJ,KAAM1B,EAAAA,KACN,YAAa,cACb,UAAW,aACX,WAAY,kCACd,EACA,QAAS,CACP,KAAMC,EAAAA,cACN,YAAa,eACb,UAAW,aACX,WAAY,oCACd,EACA,MAAO,CACL,KAAMC,EAAAA,EACN,YAAa,aACb,UAAW,aACX,WAAY,gCACd,EACA,SAAU,CACR,KAAMC,EAAAA,YACN,YAAa,aACb,UAAW,aACX,WAAY,gCACd,CACF,EA2BA,SAAgBwB,EAAY,CAC1B,SACA,MAAOC,EACP,KAAMC,EACN,UACA,qBACA,kBACA,uBACA,qBACmB,CACnB,GAAM,CAAE,cAAa,mBAAoBzB,EAAAA,cAAc,EAGjD0B,EAAeC,EAAgB,QAAQ,EACvCC,EAAaF,EAAa,OAAS,EAAIA,EAAa,GAAK,KAGzDG,EAAeL,GAAaI,GAAY,OAAS,KACjDE,EAASL,GAAYG,IAAe,KAEpCG,MAAoB,CACpBH,GACFI,EAAYJ,EAAW,EAAE,EAE3BK,IAAU,CACZ,EAEMC,MAA4B,CAChCC,IAAkB,EAClBJ,EAAY,CACd,EAEMK,MAA8B,CAClCC,IAAoB,EACpBN,EAAY,CACd,EAEA,GAAI,CAACF,EACH,OAAO,KAGT,IAAMS,EAAWT,aAAwB5B,EAAAA,SAAW4B,EAAa,SAAW,QACtEU,EAASjB,EAAegB,GACxBE,EAAOD,EAAO,KAEpB,OACE,EAAApB,EAAA,IAAA,CAACjB,EAAAA,OAAD,CAAQ,KAAM4B,EAAQ,aAAe,GAAS,CAACW,GAAQV,EAAY,EACjE,UAAA,EAAAZ,EAAA,KAAA,CAAChB,EAAAA,cAAD,CAAuB,SAAQ,gBAAemC,EAAU,UAAU,cAAlE,SAAA,EACE,EAAAnB,EAAA,IAAA,CAACf,EAAAA,aAAD,CAAA,UACE,EAAAe,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWd,EAAAA,GAAG,qBAAsBkC,EAAO,WAAW,EACzD,UAAA,EAAApB,EAAA,IAAA,CAACqB,EAAD,CAAM,UAAWnC,EAAAA,GAAG,UAAWkC,EAAO,SAAS,EAAG,cAAY,MAAQ,CAAA,CACnE,CAAA,GACL,EAAApB,EAAA,IAAA,CAACb,EAAAA,YAAD,CAAa,UAAWiC,EAAO,WAC5B,SAAAvB,EAAA,mBAAqB,CAAE,aAAc,KAAM,CAAC,CAClC,CAAA,CACV,CACO,CAAA,CAAA,CAAA,GACd,EAAAG,EAAA,IAAA,CAACZ,EAAAA,kBAAD,CAAmB,UAAU,kBAAmB,SAAAsB,EAAa,OAA2B,CAAA,EACvFA,aAAwB5B,EAAAA,UACvB4B,EAAa,MACbA,EAAa,OAAS,kBACpB,EAAAV,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,qCAAb,SAAA,CACiBJ,EAAA,YAAA,CAAE,aAAc,KAAM,CAAC,EAAE,KAAGc,EAAa,IACvD,C,IAEP,EAAAV,EAAA,KAAA,CAACX,EAAAA,aAAD,CAAc,UAAU,iBAAxB,SAAA,CACGkC,IACC,EAAAvB,EAAA,IAAA,CAACV,EAAAA,OAAD,CACE,OAAQkC,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAAQ,UACR,QAASP,EAER,SAAAM,CACK,CAAA,GAEV,EAAAvB,EAAA,IAAA,CAACV,EAAAA,OAAD,CAAQ,OAAQkC,EAAS,GAAGA,EAAO,UAAY,IAAA,GAAW,QAAST,EAChE,SAAAU,GAAA9B,EAAA,kBAA0C,CAAE,aAAc,IAAK,CAAC,CAC3D,CAAA,CACI,C,EACD,C,EACT,CAAA,CAEZ,C"}
+{"version":3,"file":"ErrorDialog.cjs","names":["Info","AlertTriangle","X","AlertCircle","useErrorStore","AppError","Dialog","DialogContent","DialogHeader","cn","DialogTitle","DialogDescription","DialogFooter","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_ui_dialog","require_common_actions_ok","require_errors_code","require_errors_dialogtitle1","require_tools_lib_error_AppError","require_tools_lib_state_error_store","react_jsx_runtime","react","lucide_react","severityConfig","ErrorDialog","propError","propOpen","dialogErrors","getErrorsByMode","storeError","displayError","isOpen","handleClose","removeError","onClose","handlePrimaryAction","onPrimaryAction","handleSecondaryAction","onSecondaryAction","severity","config","Icon","open","secondaryActionLabel","testId","primaryActionLabel"],"sources":["../../../../src/tools/components/error/ErrorDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, X, AlertTriangle, Info } from 'lucide-react';\nimport * as m from '../../paraglide/messages.js';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore } from \"../../lib/state/error-store\";\n\n/**\n * ErrorDialogProps\n * エラーダイアログのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on dialog and buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorDialogProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 直接表示するエラー (制御モード) */\n  error?: AppError | null;\n  /** 開閉状態 (制御モード) */\n  open?: boolean;\n  /** 閉じるときのコールバック */\n  onClose?: () => void;\n  /** 主要アクションのラベル。デフォルト: 'OK' */\n  primaryActionLabel?: string;\n  /** 主要アクションのコールバック */\n  onPrimaryAction?: () => void;\n  /** セカンダリアクションのラベル */\n  secondaryActionLabel?: string;\n  /** セカンダリアクションのコールバック */\n  onSecondaryAction?: () => void;\n}\n\nconst severityConfig: Record<\n  ErrorSeverity,\n  {\n    icon: React.ElementType;\n    iconBgClass: string;\n    iconClass: string;\n    titleClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-blue-600 dark:text-blue-400',\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n    titleClass: 'text-amber-800 dark:text-amber-400',\n  },\n  error: {\n    icon: X,\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n  critical: {\n    icon: AlertCircle,\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n};\n\n/**\n * ErrorDialog Component\n * エラーダイアログコンポーネント\n *\n * Modal dialog for important errors.\n * 重要なエラーをモーダルで表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorDialog\n *     testId=\"api-error\"\n *     error={error}\n *     open={isOpen}\n *     onClose={() => setIsOpen(false)}\n *     primaryActionLabel=\"再試行\"\n *     onPrimaryAction={handleRetry}\n * />\n * // Container: data-testid=\"api-error\"\n * // Primary button: data-testid=\"api-error-primary\"\n * ```\n */\nexport function ErrorDialog({\n  testId,\n  error: propError,\n  open: propOpen,\n  onClose,\n  primaryActionLabel,\n  onPrimaryAction,\n  secondaryActionLabel,\n  onSecondaryAction,\n}: ErrorDialogProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // Store からダイアログモードのエラーを取得 (制御モードでない場合)\n  const dialogErrors = getErrorsByMode('dialog');\n  const storeError = dialogErrors.length > 0 ? dialogErrors[0] : null;\n\n  // 制御モードか Store モードかで表示するエラーを決定\n  const displayError = propError ?? storeError?.error ?? null;\n  const isOpen = propOpen ?? storeError !== null;\n\n  const handleClose = () => {\n    if (storeError) {\n      removeError(storeError.id);\n    }\n    onClose?.();\n  };\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.();\n    handleClose();\n  };\n\n  const handleSecondaryAction = () => {\n    onSecondaryAction?.();\n    handleClose();\n  };\n\n  if (!displayError) {\n    return null;\n  }\n\n  const severity = displayError instanceof AppError ? displayError.severity : 'error';\n  const config = severityConfig[severity];\n  const Icon = config.icon;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <DialogContent testId={testId} data-severity={severity} className='sm:max-w-md'>\n        <DialogHeader>\n          <div className='flex items-center gap-3'>\n            <div className={cn('rounded-full p-1.5', config.iconBgClass)}>\n              <Icon className={cn('h-4 w-4', config.iconClass)} aria-hidden='true' />\n            </div>\n            <DialogTitle className={config.titleClass}>\n              {m.errors_dialogTitle({ defaultValue: 'エラー' })}\n            </DialogTitle>\n          </div>\n        </DialogHeader>\n        <DialogDescription className='text-foreground'>{displayError.message}</DialogDescription>\n        {displayError instanceof AppError &&\n          displayError.code &&\n          displayError.code !== 'error/unknown' && (\n            <p className='text-xs text-muted-foreground mt-2'>\n              {m.errors_code({ defaultValue: 'コード' })}: {displayError.code}\n            </p>\n          )}\n        <DialogFooter className='gap-2 sm:gap-0'>\n          {secondaryActionLabel && (\n            <Button\n              testId={testId ? `${testId}-secondary` : undefined}\n              variant='outline'\n              onClick={handleSecondaryAction}\n            >\n              {secondaryActionLabel}\n            </Button>\n          )}\n          <Button testId={testId ? `${testId}-primary` : undefined} onClick={handlePrimaryAction}>\n            {primaryActionLabel ?? m.common_actions_ok({ defaultValue: 'OK' })}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"A,6oBA4CA,IAAM0B,EAQF,CACF,KAAM,CACJ,KAAM1B,EAAAA,KACN,YAAa,cACb,UAAW,aACX,WAAY,kCACd,EACA,QAAS,CACP,KAAMC,EAAAA,cACN,YAAa,eACb,UAAW,aACX,WAAY,oCACd,EACA,MAAO,CACL,KAAMC,EAAAA,EACN,YAAa,aACb,UAAW,aACX,WAAY,gCACd,EACA,SAAU,CACR,KAAMC,EAAAA,YACN,YAAa,aACb,UAAW,aACX,WAAY,gCACd,CACF,EA2BA,SAAgBwB,EAAY,CAC1B,SACA,MAAOC,EACP,KAAMC,EACN,UACA,qBACA,kBACA,uBACA,qBACmB,CACnB,GAAM,CAAE,cAAa,mBAAoBzB,EAAAA,cAAc,EAGjD0B,EAAeC,EAAgB,QAAQ,EACvCC,EAAaF,EAAa,OAAS,EAAIA,EAAa,GAAK,KAGzDG,EAAeL,GAAaI,GAAY,OAAS,KACjDE,EAASL,GAAYG,IAAe,KAEpCG,MAAoB,CACpBH,GACFI,EAAYJ,EAAW,EAAE,EAE3BK,IAAU,CACZ,EAEMC,MAA4B,CAChCC,IAAkB,EAClBJ,EAAY,CACd,EAEMK,MAA8B,CAClCC,IAAoB,EACpBN,EAAY,CACd,EAEA,GAAI,CAACF,EACH,OAAO,KAGT,IAAMS,EAAWT,aAAwB5B,EAAAA,SAAW4B,EAAa,SAAW,QACtEU,EAASjB,EAAegB,GACxBE,EAAOD,EAAO,KAEpB,OACE,EAAApB,EAAA,IAAA,CAACjB,EAAAA,OAAD,CAAQ,KAAM4B,EAAQ,aAAe,GAAS,CAACW,GAAQV,EAAY,EACjE,UAAA,EAAAZ,EAAA,KAAA,CAAChB,EAAAA,cAAD,CAAuB,SAAQ,gBAAemC,EAAU,UAAU,cAAlE,SAAA,EACE,EAAAnB,EAAA,IAAA,CAACf,EAAAA,aAAD,CAAA,UACE,EAAAe,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWd,EAAAA,GAAG,qBAAsBkC,EAAO,WAAW,EACzD,UAAA,EAAApB,EAAA,IAAA,CAACqB,EAAD,CAAM,UAAWnC,EAAAA,GAAG,UAAWkC,EAAO,SAAS,EAAG,cAAY,MAAQ,CAAA,CACnE,CAAA,GACL,EAAApB,EAAA,IAAA,CAACb,EAAAA,YAAD,CAAa,UAAWiC,EAAO,WAC5B,SAAAvB,EAAA,mBAAqB,CAAE,aAAc,KAAM,CAAC,CAClC,CAAA,CACV,CACO,CAAA,CAAA,CAAA,GACd,EAAAG,EAAA,IAAA,CAACZ,EAAAA,kBAAD,CAAmB,UAAU,kBAAmB,SAAAsB,EAAa,OAA2B,CAAA,EACvFA,aAAwB5B,EAAAA,UACvB4B,EAAa,MACbA,EAAa,OAAS,kBACpB,EAAAV,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,qCAAb,SAAA,CACiBJ,EAAA,YAAA,CAAE,aAAc,KAAM,CAAC,EAAE,KAAGc,EAAa,IACvD,C,IAEP,EAAAV,EAAA,KAAA,CAACX,EAAAA,aAAD,CAAc,UAAU,iBAAxB,SAAA,CACGkC,IACC,EAAAvB,EAAA,IAAA,CAACV,EAAAA,OAAD,CACE,OAAQkC,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAAQ,UACR,QAASP,EAER,SAAAM,CACK,CAAA,GAEV,EAAAvB,EAAA,IAAA,CAACV,EAAAA,OAAD,CAAQ,OAAQkC,EAAS,GAAGA,EAAO,UAAY,IAAA,GAAW,QAAST,EAChE,SAAAU,GAAA9B,EAAA,kBAA0C,CAAE,aAAc,IAAK,CAAC,CAC3D,CAAA,CACI,C,EACD,C,EACT,CAAA,CAEZ,C"}

package/dist/tools/components/error/ErrorDialog.js

@@ -22,7 +22,7 @@ var y = {
 		icon: g,
 		iconBgClass: "bg-amber-500",
 		iconClass: "text-white",
-		titleClass: "text-amber-600 dark:text-amber-400"
+		titleClass: "text-amber-800 dark:text-amber-400"
 	},
 	error: {
 		icon: v,

package/dist/tools/components/error/ErrorDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDialog.js","names":["m.errors_dialogTitle","m.errors_code","m.common_actions_ok","errors_dialogtitle1","severityConfig","Info","AlertTriangle","X","AlertCircle","ErrorDialog","propError","propOpen","useErrorStore","dialogErrors","getErrorsByMode","storeError","displayError","isOpen","handleClose","removeError","onClose","handlePrimaryAction","onPrimaryAction","handleSecondaryAction","onSecondaryAction","severity","AppError","config","Icon","Dialog","open","DialogContent","DialogHeader","cn","DialogTitle","DialogDescription","errors_code","DialogFooter","secondaryActionLabel","Button","testId","primaryActionLabel","common_actions_ok"],"sources":["../../../../src/tools/components/error/ErrorDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, X, AlertTriangle, Info } from 'lucide-react';\nimport * as m from '../../paraglide/messages.js';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore } from \"../../lib/state/error-store\";\n\n/**\n * ErrorDialogProps\n * エラーダイアログのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on dialog and buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorDialogProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 直接表示するエラー (制御モード) */\n  error?: AppError | null;\n  /** 開閉状態 (制御モード) */\n  open?: boolean;\n  /** 閉じるときのコールバック */\n  onClose?: () => void;\n  /** 主要アクションのラベル。デフォルト: 'OK' */\n  primaryActionLabel?: string;\n  /** 主要アクションのコールバック */\n  onPrimaryAction?: () => void;\n  /** セカンダリアクションのラベル */\n  secondaryActionLabel?: string;\n  /** セカンダリアクションのコールバック */\n  onSecondaryAction?: () => void;\n}\n\nconst severityConfig: Record<\n  ErrorSeverity,\n  {\n    icon: React.ElementType;\n    iconBgClass: string;\n    iconClass: string;\n    titleClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-blue-600 dark:text-blue-400',\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n    titleClass: 'text-amber-600 dark:text-amber-400',\n  },\n  error: {\n    icon: X,\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n  critical: {\n    icon: AlertCircle,\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n};\n\n/**\n * ErrorDialog Component\n * エラーダイアログコンポーネント\n *\n * Modal dialog for important errors.\n * 重要なエラーをモーダルで表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorDialog\n *     testId=\"api-error\"\n *     error={error}\n *     open={isOpen}\n *     onClose={() => setIsOpen(false)}\n *     primaryActionLabel=\"再試行\"\n *     onPrimaryAction={handleRetry}\n * />\n * // Container: data-testid=\"api-error\"\n * // Primary button: data-testid=\"api-error-primary\"\n * ```\n */\nexport function ErrorDialog({\n  testId,\n  error: propError,\n  open: propOpen,\n  onClose,\n  primaryActionLabel,\n  onPrimaryAction,\n  secondaryActionLabel,\n  onSecondaryAction,\n}: ErrorDialogProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // Store からダイアログモードのエラーを取得 (制御モードでない場合)\n  const dialogErrors = getErrorsByMode('dialog');\n  const storeError = dialogErrors.length > 0 ? dialogErrors[0] : null;\n\n  // 制御モードか Store モードかで表示するエラーを決定\n  const displayError = propError ?? storeError?.error ?? null;\n  const isOpen = propOpen ?? storeError !== null;\n\n  const handleClose = () => {\n    if (storeError) {\n      removeError(storeError.id);\n    }\n    onClose?.();\n  };\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.();\n    handleClose();\n  };\n\n  const handleSecondaryAction = () => {\n    onSecondaryAction?.();\n    handleClose();\n  };\n\n  if (!displayError) {\n    return null;\n  }\n\n  const severity = displayError instanceof AppError ? displayError.severity : 'error';\n  const config = severityConfig[severity];\n  const Icon = config.icon;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <DialogContent testId={testId} data-severity={severity} className='sm:max-w-md'>\n        <DialogHeader>\n          <div className='flex items-center gap-3'>\n            <div className={cn('rounded-full p-1.5', config.iconBgClass)}>\n              <Icon className={cn('h-4 w-4', config.iconClass)} aria-hidden='true' />\n            </div>\n            <DialogTitle className={config.titleClass}>\n              {m.errors_dialogTitle({ defaultValue: 'エラー' })}\n            </DialogTitle>\n          </div>\n        </DialogHeader>\n        <DialogDescription className='text-foreground'>{displayError.message}</DialogDescription>\n        {displayError instanceof AppError &&\n          displayError.code &&\n          displayError.code !== 'error/unknown' && (\n            <p className='text-xs text-muted-foreground mt-2'>\n              {m.errors_code({ defaultValue: 'コード' })}: {displayError.code}\n            </p>\n          )}\n        <DialogFooter className='gap-2 sm:gap-0'>\n          {secondaryActionLabel && (\n            <Button\n              testId={testId ? `${testId}-secondary` : undefined}\n              variant='outline'\n              onClick={handleSecondaryAction}\n            >\n              {secondaryActionLabel}\n            </Button>\n          )}\n          <Button testId={testId ? `${testId}-primary` : undefined} onClick={handlePrimaryAction}>\n            {primaryActionLabel ?? m.common_actions_ok({ defaultValue: 'OK' })}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAMI,IAQF;CACF,MAAM;EACJ,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,SAAS;EACP,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,OAAO;EACL,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,UAAU;EACR,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;AACF;AA2BA,SAAgBC,EAAY,EAC1B,WACA,OAAOC,GACP,MAAMC,GACN,YACA,uBACA,oBACA,yBACA,wBACmB;CACnB,IAAM,EAAE,gBAAa,uBAAoBC,EAAc,GAGjDC,IAAeC,EAAgB,QAAQ,GACvCC,IAAaF,EAAa,SAAS,IAAIA,EAAa,KAAK,MAGzDG,IAAeN,KAAaK,GAAY,SAAS,MACjDE,IAASN,KAAYI,MAAe,MAEpCG,UAAoB;EAIxB,AAHIH,KACFI,EAAYJ,EAAW,EAAE,GAE3BK,IAAU;CACZ,GAEMC,UAA4B;EAEhC,AADAC,IAAkB,GAClBJ,EAAY;CACd,GAEMK,UAA8B;EAElC,AADAC,IAAoB,GACpBN,EAAY;CACd;CAEA,IAAI,CAACF,GACH,OAAO;CAGT,IAAMS,IAAWT,aAAwBU,IAAWV,EAAa,WAAW,SACtEW,IAASvB,EAAeqB,IACxBG,IAAOD,EAAO;CAEpB,OACE,kBAACE,GAAD;EAAQ,MAAMZ;EAAQ,eAAe,MAAS,CAACa,KAAQZ,EAAY;EACjE,UAAA,kBAACa,GAAD;GAAuB;GAAQ,iBAAeN;GAAU,WAAU;GAAlE,UAAA;IACE,kBAACO,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAWC,EAAG,sBAAsBN,EAAO,WAAW;MACzD,UAAA,kBAACC,GAAD;OAAM,WAAWK,EAAG,WAAWN,EAAO,SAAS;OAAG,eAAY;MAAQ,CAAA;KACnE,CAAA,GACL,kBAACO,GAAD;MAAa,WAAWP,EAAO;MAC5B,UAAA3B,EAAqB,EAAE,cAAc,MAAM,CAAC;KAClC,CAAA,CACV;IACO,CAAA,EAAA,CAAA;IACd,kBAACmC,GAAD;KAAmB,WAAU;KAAmB,UAAAnB,EAAa;IAA2B,CAAA;IACvFA,aAAwBU,KACvBV,EAAa,QACbA,EAAa,SAAS,mBACpB,kBAAC,KAAD;KAAG,WAAU;KAAb,UAAA;MACGf,EAAc,EAAE,cAAc,MAAM,CAAC;MAAE;MAAGe,EAAa;KACvD;;IAEP,kBAACqB,GAAD;KAAc,WAAU;KAAxB,UAAA,CACGC,KACC,kBAACC,GAAD;MACE,QAAQC,IAAS,GAAGA,EAAO,cAAc,KAAA;MACzC,SAAQ;MACR,SAASjB;MAER,UAAAe;KACK,CAAA,GAEV,kBAACC,GAAD;MAAQ,QAAQC,IAAS,GAAGA,EAAO,YAAY,KAAA;MAAW,SAASnB;MAChE,UAAAoB,KAAsBvC,EAAoB,EAAE,cAAc,KAAK,CAAC;KAC3D,CAAA,CACI;;GACD;;CACT,CAAA;AAEZ"}
+{"version":3,"file":"ErrorDialog.js","names":["m.errors_dialogTitle","m.errors_code","m.common_actions_ok","errors_dialogtitle1","severityConfig","Info","AlertTriangle","X","AlertCircle","ErrorDialog","propError","propOpen","useErrorStore","dialogErrors","getErrorsByMode","storeError","displayError","isOpen","handleClose","removeError","onClose","handlePrimaryAction","onPrimaryAction","handleSecondaryAction","onSecondaryAction","severity","AppError","config","Icon","Dialog","open","DialogContent","DialogHeader","cn","DialogTitle","DialogDescription","errors_code","DialogFooter","secondaryActionLabel","Button","testId","primaryActionLabel","common_actions_ok"],"sources":["../../../../src/tools/components/error/ErrorDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, X, AlertTriangle, Info } from 'lucide-react';\nimport * as m from '../../paraglide/messages.js';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore } from \"../../lib/state/error-store\";\n\n/**\n * ErrorDialogProps\n * エラーダイアログのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on dialog and buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorDialogProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 直接表示するエラー (制御モード) */\n  error?: AppError | null;\n  /** 開閉状態 (制御モード) */\n  open?: boolean;\n  /** 閉じるときのコールバック */\n  onClose?: () => void;\n  /** 主要アクションのラベル。デフォルト: 'OK' */\n  primaryActionLabel?: string;\n  /** 主要アクションのコールバック */\n  onPrimaryAction?: () => void;\n  /** セカンダリアクションのラベル */\n  secondaryActionLabel?: string;\n  /** セカンダリアクションのコールバック */\n  onSecondaryAction?: () => void;\n}\n\nconst severityConfig: Record<\n  ErrorSeverity,\n  {\n    icon: React.ElementType;\n    iconBgClass: string;\n    iconClass: string;\n    titleClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n    titleClass: 'text-blue-600 dark:text-blue-400',\n  },\n  warning: {\n    icon: AlertTriangle,\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n    titleClass: 'text-amber-800 dark:text-amber-400',\n  },\n  error: {\n    icon: X,\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n  critical: {\n    icon: AlertCircle,\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n    titleClass: 'text-red-600 dark:text-red-400',\n  },\n};\n\n/**\n * ErrorDialog Component\n * エラーダイアログコンポーネント\n *\n * Modal dialog for important errors.\n * 重要なエラーをモーダルで表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorDialog\n *     testId=\"api-error\"\n *     error={error}\n *     open={isOpen}\n *     onClose={() => setIsOpen(false)}\n *     primaryActionLabel=\"再試行\"\n *     onPrimaryAction={handleRetry}\n * />\n * // Container: data-testid=\"api-error\"\n * // Primary button: data-testid=\"api-error-primary\"\n * ```\n */\nexport function ErrorDialog({\n  testId,\n  error: propError,\n  open: propOpen,\n  onClose,\n  primaryActionLabel,\n  onPrimaryAction,\n  secondaryActionLabel,\n  onSecondaryAction,\n}: ErrorDialogProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // Store からダイアログモードのエラーを取得 (制御モードでない場合)\n  const dialogErrors = getErrorsByMode('dialog');\n  const storeError = dialogErrors.length > 0 ? dialogErrors[0] : null;\n\n  // 制御モードか Store モードかで表示するエラーを決定\n  const displayError = propError ?? storeError?.error ?? null;\n  const isOpen = propOpen ?? storeError !== null;\n\n  const handleClose = () => {\n    if (storeError) {\n      removeError(storeError.id);\n    }\n    onClose?.();\n  };\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.();\n    handleClose();\n  };\n\n  const handleSecondaryAction = () => {\n    onSecondaryAction?.();\n    handleClose();\n  };\n\n  if (!displayError) {\n    return null;\n  }\n\n  const severity = displayError instanceof AppError ? displayError.severity : 'error';\n  const config = severityConfig[severity];\n  const Icon = config.icon;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <DialogContent testId={testId} data-severity={severity} className='sm:max-w-md'>\n        <DialogHeader>\n          <div className='flex items-center gap-3'>\n            <div className={cn('rounded-full p-1.5', config.iconBgClass)}>\n              <Icon className={cn('h-4 w-4', config.iconClass)} aria-hidden='true' />\n            </div>\n            <DialogTitle className={config.titleClass}>\n              {m.errors_dialogTitle({ defaultValue: 'エラー' })}\n            </DialogTitle>\n          </div>\n        </DialogHeader>\n        <DialogDescription className='text-foreground'>{displayError.message}</DialogDescription>\n        {displayError instanceof AppError &&\n          displayError.code &&\n          displayError.code !== 'error/unknown' && (\n            <p className='text-xs text-muted-foreground mt-2'>\n              {m.errors_code({ defaultValue: 'コード' })}: {displayError.code}\n            </p>\n          )}\n        <DialogFooter className='gap-2 sm:gap-0'>\n          {secondaryActionLabel && (\n            <Button\n              testId={testId ? `${testId}-secondary` : undefined}\n              variant='outline'\n              onClick={handleSecondaryAction}\n            >\n              {secondaryActionLabel}\n            </Button>\n          )}\n          <Button testId={testId ? `${testId}-primary` : undefined} onClick={handlePrimaryAction}>\n            {primaryActionLabel ?? m.common_actions_ok({ defaultValue: 'OK' })}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAMI,IAQF;CACF,MAAM;EACJ,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,SAAS;EACP,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,OAAO;EACL,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;CACA,UAAU;EACR,MAAMC;EACN,aAAa;EACb,WAAW;EACX,YAAY;CACd;AACF;AA2BA,SAAgBC,EAAY,EAC1B,WACA,OAAOC,GACP,MAAMC,GACN,YACA,uBACA,oBACA,yBACA,wBACmB;CACnB,IAAM,EAAE,gBAAa,uBAAoBC,EAAc,GAGjDC,IAAeC,EAAgB,QAAQ,GACvCC,IAAaF,EAAa,SAAS,IAAIA,EAAa,KAAK,MAGzDG,IAAeN,KAAaK,GAAY,SAAS,MACjDE,IAASN,KAAYI,MAAe,MAEpCG,UAAoB;EAIxB,AAHIH,KACFI,EAAYJ,EAAW,EAAE,GAE3BK,IAAU;CACZ,GAEMC,UAA4B;EAEhC,AADAC,IAAkB,GAClBJ,EAAY;CACd,GAEMK,UAA8B;EAElC,AADAC,IAAoB,GACpBN,EAAY;CACd;CAEA,IAAI,CAACF,GACH,OAAO;CAGT,IAAMS,IAAWT,aAAwBU,IAAWV,EAAa,WAAW,SACtEW,IAASvB,EAAeqB,IACxBG,IAAOD,EAAO;CAEpB,OACE,kBAACE,GAAD;EAAQ,MAAMZ;EAAQ,eAAe,MAAS,CAACa,KAAQZ,EAAY;EACjE,UAAA,kBAACa,GAAD;GAAuB;GAAQ,iBAAeN;GAAU,WAAU;GAAlE,UAAA;IACE,kBAACO,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAWC,EAAG,sBAAsBN,EAAO,WAAW;MACzD,UAAA,kBAACC,GAAD;OAAM,WAAWK,EAAG,WAAWN,EAAO,SAAS;OAAG,eAAY;MAAQ,CAAA;KACnE,CAAA,GACL,kBAACO,GAAD;MAAa,WAAWP,EAAO;MAC5B,UAAA3B,EAAqB,EAAE,cAAc,MAAM,CAAC;KAClC,CAAA,CACV;IACO,CAAA,EAAA,CAAA;IACd,kBAACmC,GAAD;KAAmB,WAAU;KAAmB,UAAAnB,EAAa;IAA2B,CAAA;IACvFA,aAAwBU,KACvBV,EAAa,QACbA,EAAa,SAAS,mBACpB,kBAAC,KAAD;KAAG,WAAU;KAAb,UAAA;MACGf,EAAc,EAAE,cAAc,MAAM,CAAC;MAAE;MAAGe,EAAa;KACvD;;IAEP,kBAACqB,GAAD;KAAc,WAAU;KAAxB,UAAA,CACGC,KACC,kBAACC,GAAD;MACE,QAAQC,IAAS,GAAGA,EAAO,cAAc,KAAA;MACzC,SAAQ;MACR,SAASjB;MAER,UAAAe;KACK,CAAA,GAEV,kBAACC,GAAD;MAAQ,QAAQC,IAAS,GAAGA,EAAO,YAAY,KAAA;MAAW,SAASnB;MAChE,UAAAoB,KAAsBvC,EAAoB,EAAE,cAAc,KAAK,CAAC;KAC3D,CAAA,CACI;;GACD;;CACT,CAAA;AAEZ"}

package/dist/tools/components/error/ErrorInline.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("../../lib/error/AppError.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react");var o={info:{icon:a.Info,className:`text-blue-600 dark:text-blue-400`},warning:{icon:a.AlertTriangle,className:`text-amber-600 dark:text-amber-400`},error:{icon:a.XCircle,className:`text-destructive`},critical:{icon:a.AlertCircle,className:`text-destructive`}};function s({testId:e,error:i,code:a,message:s,className:c,severity:l=`error`,hideIcon:u=!1}){let d=null,f=l;if(i?i instanceof n.AppError?(d=i.message,f=i.severity):d=i.message:a?d=a:s&&(d=s),!d)return null;let p=o[f],m=p.icon;return(0,r.jsxs)(`div`,{"data-testid":e,"data-severity":f,className:t.cn(`flex items-center gap-2 text-sm`,p.className,c),role:`alert`,children:[!u&&(0,r.jsx)(m,{className:`h-4 w-4 flex-shrink-0`,"aria-hidden":`true`}),(0,r.jsx)(`span`,{children:d})]})}exports.ErrorInline=s;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../lib/error/AppError.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react");var o={info:{icon:a.Info,className:`text-blue-600 dark:text-blue-400`},warning:{icon:a.AlertTriangle,className:`text-amber-800 dark:text-amber-400`},error:{icon:a.XCircle,className:`text-destructive`},critical:{icon:a.AlertCircle,className:`text-destructive`}};function s({testId:e,error:i,code:a,message:s,className:c,severity:l=`error`,hideIcon:u=!1}){let d=null,f=l;if(i?i instanceof n.AppError?(d=i.message,f=i.severity):d=i.message:a?d=a:s&&(d=s),!d)return null;let p=o[f],m=p.icon;return(0,r.jsxs)(`div`,{"data-testid":e,"data-severity":f,className:t.cn(`flex items-center gap-2 text-sm`,p.className,c),role:`alert`,children:[!u&&(0,r.jsx)(m,{className:`h-4 w-4 flex-shrink-0`,"aria-hidden":`true`}),(0,r.jsx)(`span`,{children:d})]})}exports.ErrorInline=s;
 //# sourceMappingURL=ErrorInline.cjs.map

package/dist/tools/components/error/ErrorInline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorInline.cjs","names":["Info","AlertTriangle","XCircle","AlertCircle","AppError","cn","require_runtime","require_ui_lib_utils","require_tools_lib_error_AppError","react_jsx_runtime","react","lucide_react","severityConfig","ErrorInline","displayMessage","displaySeverity","severity","error","code","message","config","Icon","testId","className","hideIcon"],"sources":["../../../../src/tools/components/error/ErrorInline.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, XCircle, AlertTriangle, Info } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\n\n/**\n * ErrorInlineProps\n * インラインエラーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on container\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorInlineProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 表示するエラー */\n  error?: AppError | Error | null;\n  /** またはエラーコード (i18n から取得) */\n  code?: string;\n  /** エラーメッセージ (直接指定する場合) */\n  message?: string;\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 重要度 (アイコンと色を決定) */\n  severity?: ErrorSeverity;\n  /** アイコンを非表示にする */\n  hideIcon?: boolean;\n}\n\nconst severityConfig: Record<ErrorSeverity, { icon: React.ElementType; className: string }> = {\n  info: { icon: Info, className: 'text-blue-600 dark:text-blue-400' },\n  warning: { icon: AlertTriangle, className: 'text-amber-600 dark:text-amber-400' },\n  error: { icon: XCircle, className: 'text-destructive' },\n  critical: { icon: AlertCircle, className: 'text-destructive' },\n};\n\n/**\n * ErrorInline Component\n * インラインエラー表示コンポーネント\n *\n * Inline error display near form fields or submit buttons.\n * フォームのフィールド近くや送信ボタン周辺に表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container element\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorInline testId=\"form-error\" error={formError} />\n * ```\n */\nexport function ErrorInline({\n  testId,\n  error,\n  code,\n  message,\n  className,\n  severity = 'error',\n  hideIcon = false,\n}: ErrorInlineProps) {\n  // 表示するメッセージを決定\n  let displayMessage: string | null = null;\n  let displaySeverity = severity;\n\n  if (error) {\n    if (error instanceof AppError) {\n      displayMessage = error.message;\n      displaySeverity = error.severity;\n    } else {\n      displayMessage = error.message;\n    }\n  } else if (code) {\n    // Use the code directly as message - dynamic i18n key lookup not supported in Paraglide\n    displayMessage = code;\n  } else if (message) {\n    displayMessage = message;\n  }\n\n  // 表示するものがなければ何も表示しない\n  if (!displayMessage) {\n    return null;\n  }\n\n  const config = severityConfig[displaySeverity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      data-testid={testId}\n      data-severity={displaySeverity}\n      className={cn('flex items-center gap-2 text-sm', config.className, className)}\n      role='alert'\n    >\n      {!hideIcon && <Icon className='h-4 w-4 flex-shrink-0' aria-hidden='true' />}\n      <span>{displayMessage}</span>\n    </div>\n  );\n}\n"],"mappings":"A,iUA8BA,IAAMY,EAAwF,CAC5F,KAAM,CAAE,KAAMZ,EAAAA,KAAM,UAAW,kCAAmC,EAClE,QAAS,CAAE,KAAMC,EAAAA,cAAe,UAAW,oCAAqC,EAChF,MAAO,CAAE,KAAMC,EAAAA,QAAS,UAAW,kBAAmB,EACtD,SAAU,CAAE,KAAMC,EAAAA,YAAa,UAAW,kBAAmB,CAC/D,EAkBA,SAAgBU,EAAY,CAC1B,SACA,QACA,OACA,UACA,YACA,WAAW,QACX,WAAW,IACQ,CAEnB,IAAIC,EAAgC,KAChCC,EAAkBC,EAiBtB,GAfIC,EACEA,aAAiBb,EAAAA,UACnB,EAAiBa,EAAM,QACvB,EAAkBA,EAAM,UAExB,EAAiBA,EAAM,QAEhBC,EAET,EAAiBA,EACRC,IACT,EAAiBA,GAIf,CAACL,EACH,OAAO,KAGT,IAAMM,EAASR,EAAeG,GACxBM,EAAOD,EAAO,KAEpB,OACE,EAAAX,EAAA,KAAA,CAAC,MAAD,CACE,cAAaa,EACb,gBAAeP,EACf,UAAWV,EAAAA,GAAG,kCAAmCe,EAAO,UAAWG,CAAS,EAC5E,KAAK,QAJP,SAAA,CAMG,CAACC,IAAY,EAAAf,EAAA,IAAA,CAACY,EAAD,CAAM,UAAU,wBAAwB,cAAY,MAAQ,CAAA,GAC1E,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAA,SAAOK,CAAqB,CAAA,CACzB,C,EAET,C"}
+{"version":3,"file":"ErrorInline.cjs","names":["Info","AlertTriangle","XCircle","AlertCircle","AppError","cn","require_runtime","require_ui_lib_utils","require_tools_lib_error_AppError","react_jsx_runtime","react","lucide_react","severityConfig","ErrorInline","displayMessage","displaySeverity","severity","error","code","message","config","Icon","testId","className","hideIcon"],"sources":["../../../../src/tools/components/error/ErrorInline.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, XCircle, AlertTriangle, Info } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\n\n/**\n * ErrorInlineProps\n * インラインエラーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on container\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorInlineProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 表示するエラー */\n  error?: AppError | Error | null;\n  /** またはエラーコード (i18n から取得) */\n  code?: string;\n  /** エラーメッセージ (直接指定する場合) */\n  message?: string;\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 重要度 (アイコンと色を決定) */\n  severity?: ErrorSeverity;\n  /** アイコンを非表示にする */\n  hideIcon?: boolean;\n}\n\nconst severityConfig: Record<ErrorSeverity, { icon: React.ElementType; className: string }> = {\n  info: { icon: Info, className: 'text-blue-600 dark:text-blue-400' },\n  warning: { icon: AlertTriangle, className: 'text-amber-800 dark:text-amber-400' },\n  error: { icon: XCircle, className: 'text-destructive' },\n  critical: { icon: AlertCircle, className: 'text-destructive' },\n};\n\n/**\n * ErrorInline Component\n * インラインエラー表示コンポーネント\n *\n * Inline error display near form fields or submit buttons.\n * フォームのフィールド近くや送信ボタン周辺に表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container element\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorInline testId=\"form-error\" error={formError} />\n * ```\n */\nexport function ErrorInline({\n  testId,\n  error,\n  code,\n  message,\n  className,\n  severity = 'error',\n  hideIcon = false,\n}: ErrorInlineProps) {\n  // 表示するメッセージを決定\n  let displayMessage: string | null = null;\n  let displaySeverity = severity;\n\n  if (error) {\n    if (error instanceof AppError) {\n      displayMessage = error.message;\n      displaySeverity = error.severity;\n    } else {\n      displayMessage = error.message;\n    }\n  } else if (code) {\n    // Use the code directly as message - dynamic i18n key lookup not supported in Paraglide\n    displayMessage = code;\n  } else if (message) {\n    displayMessage = message;\n  }\n\n  // 表示するものがなければ何も表示しない\n  if (!displayMessage) {\n    return null;\n  }\n\n  const config = severityConfig[displaySeverity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      data-testid={testId}\n      data-severity={displaySeverity}\n      className={cn('flex items-center gap-2 text-sm', config.className, className)}\n      role='alert'\n    >\n      {!hideIcon && <Icon className='h-4 w-4 flex-shrink-0' aria-hidden='true' />}\n      <span>{displayMessage}</span>\n    </div>\n  );\n}\n"],"mappings":"A,iUA8BA,IAAMY,EAAwF,CAC5F,KAAM,CAAE,KAAMZ,EAAAA,KAAM,UAAW,kCAAmC,EAClE,QAAS,CAAE,KAAMC,EAAAA,cAAe,UAAW,oCAAqC,EAChF,MAAO,CAAE,KAAMC,EAAAA,QAAS,UAAW,kBAAmB,EACtD,SAAU,CAAE,KAAMC,EAAAA,YAAa,UAAW,kBAAmB,CAC/D,EAkBA,SAAgBU,EAAY,CAC1B,SACA,QACA,OACA,UACA,YACA,WAAW,QACX,WAAW,IACQ,CAEnB,IAAIC,EAAgC,KAChCC,EAAkBC,EAiBtB,GAfIC,EACEA,aAAiBb,EAAAA,UACnB,EAAiBa,EAAM,QACvB,EAAkBA,EAAM,UAExB,EAAiBA,EAAM,QAEhBC,EAET,EAAiBA,EACRC,IACT,EAAiBA,GAIf,CAACL,EACH,OAAO,KAGT,IAAMM,EAASR,EAAeG,GACxBM,EAAOD,EAAO,KAEpB,OACE,EAAAX,EAAA,KAAA,CAAC,MAAD,CACE,cAAaa,EACb,gBAAeP,EACf,UAAWV,EAAAA,GAAG,kCAAmCe,EAAO,UAAWG,CAAS,EAC5E,KAAK,QAJP,SAAA,CAMG,CAACC,IAAY,EAAAf,EAAA,IAAA,CAACY,EAAD,CAAM,UAAU,wBAAwB,cAAY,MAAQ,CAAA,GAC1E,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAA,SAAOK,CAAqB,CAAA,CACzB,C,EAET,C"}

package/dist/tools/components/error/ErrorInline.js

@@ -12,7 +12,7 @@ var c = {
 	},
 	warning: {
 		icon: a,
-		className: "text-amber-600 dark:text-amber-400"
+		className: "text-amber-800 dark:text-amber-400"
 	},
 	error: {
 		icon: s,

package/dist/tools/components/error/ErrorInline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorInline.js","names":["severityConfig","Info","AlertTriangle","XCircle","AlertCircle","ErrorInline","displayMessage","displaySeverity","severity","error","AppError","code","message","config","Icon","testId","cn","className","hideIcon"],"sources":["../../../../src/tools/components/error/ErrorInline.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, XCircle, AlertTriangle, Info } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\n\n/**\n * ErrorInlineProps\n * インラインエラーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on container\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorInlineProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 表示するエラー */\n  error?: AppError | Error | null;\n  /** またはエラーコード (i18n から取得) */\n  code?: string;\n  /** エラーメッセージ (直接指定する場合) */\n  message?: string;\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 重要度 (アイコンと色を決定) */\n  severity?: ErrorSeverity;\n  /** アイコンを非表示にする */\n  hideIcon?: boolean;\n}\n\nconst severityConfig: Record<ErrorSeverity, { icon: React.ElementType; className: string }> = {\n  info: { icon: Info, className: 'text-blue-600 dark:text-blue-400' },\n  warning: { icon: AlertTriangle, className: 'text-amber-600 dark:text-amber-400' },\n  error: { icon: XCircle, className: 'text-destructive' },\n  critical: { icon: AlertCircle, className: 'text-destructive' },\n};\n\n/**\n * ErrorInline Component\n * インラインエラー表示コンポーネント\n *\n * Inline error display near form fields or submit buttons.\n * フォームのフィールド近くや送信ボタン周辺に表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container element\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorInline testId=\"form-error\" error={formError} />\n * ```\n */\nexport function ErrorInline({\n  testId,\n  error,\n  code,\n  message,\n  className,\n  severity = 'error',\n  hideIcon = false,\n}: ErrorInlineProps) {\n  // 表示するメッセージを決定\n  let displayMessage: string | null = null;\n  let displaySeverity = severity;\n\n  if (error) {\n    if (error instanceof AppError) {\n      displayMessage = error.message;\n      displaySeverity = error.severity;\n    } else {\n      displayMessage = error.message;\n    }\n  } else if (code) {\n    // Use the code directly as message - dynamic i18n key lookup not supported in Paraglide\n    displayMessage = code;\n  } else if (message) {\n    displayMessage = message;\n  }\n\n  // 表示するものがなければ何も表示しない\n  if (!displayMessage) {\n    return null;\n  }\n\n  const config = severityConfig[displaySeverity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      data-testid={testId}\n      data-severity={displaySeverity}\n      className={cn('flex items-center gap-2 text-sm', config.className, className)}\n      role='alert'\n    >\n      {!hideIcon && <Icon className='h-4 w-4 flex-shrink-0' aria-hidden='true' />}\n      <span>{displayMessage}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,IAAMA,IAAwF;CAC5F,MAAM;EAAE,MAAMC;EAAM,WAAW;CAAmC;CAClE,SAAS;EAAE,MAAMC;EAAe,WAAW;CAAqC;CAChF,OAAO;EAAE,MAAMC;EAAS,WAAW;CAAmB;CACtD,UAAU;EAAE,MAAMC;EAAa,WAAW;CAAmB;AAC/D;AAkBA,SAAgBC,EAAY,EAC1B,WACA,UACA,SACA,YACA,cACA,cAAW,SACX,cAAW,MACQ;CAEnB,IAAIC,IAAgC,MAChCC,IAAkBC;CAiBtB,IAfIC,IACEA,aAAiBC,KACnB,IAAiBD,EAAM,SACvB,IAAkBA,EAAM,YAExB,IAAiBA,EAAM,UAEhBE,IAET,IAAiBA,IACRC,MACT,IAAiBA,IAIf,CAACN,GACH,OAAO;CAGT,IAAMO,IAASb,EAAeO,IACxBO,IAAOD,EAAO;CAEpB,OACE,kBAAC,OAAD;EACE,eAAaE;EACb,iBAAeR;EACf,WAAWS,EAAG,mCAAmCH,EAAO,WAAWI,CAAS;EAC5E,MAAK;EAJP,UAAA,CAMG,CAACC,KAAY,kBAACJ,GAAD;GAAM,WAAU;GAAwB,eAAY;EAAQ,CAAA,GAC1E,kBAAC,QAAD,EAAA,UAAOR,EAAqB,CAAA,CACzB;;AAET"}
+{"version":3,"file":"ErrorInline.js","names":["severityConfig","Info","AlertTriangle","XCircle","AlertCircle","ErrorInline","displayMessage","displaySeverity","severity","error","AppError","code","message","config","Icon","testId","cn","className","hideIcon"],"sources":["../../../../src/tools/components/error/ErrorInline.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertCircle, XCircle, AlertTriangle, Info } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { AppError, ErrorSeverity } from \"../../lib/error\";\n\n/**\n * ErrorInlineProps\n * インラインエラーのプロップス\n *\n * ## AI/Automation Features\n * - `testId`: Stable selector on container\n * - `data-severity`: error, warning, info, critical\n */\nexport interface ErrorInlineProps {\n  /** AI/E2E Test用の安定ID / Stable test identifier */\n  testId?: string;\n  /** 表示するエラー */\n  error?: AppError | Error | null;\n  /** またはエラーコード (i18n から取得) */\n  code?: string;\n  /** エラーメッセージ (直接指定する場合) */\n  message?: string;\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 重要度 (アイコンと色を決定) */\n  severity?: ErrorSeverity;\n  /** アイコンを非表示にする */\n  hideIcon?: boolean;\n}\n\nconst severityConfig: Record<ErrorSeverity, { icon: React.ElementType; className: string }> = {\n  info: { icon: Info, className: 'text-blue-600 dark:text-blue-400' },\n  warning: { icon: AlertTriangle, className: 'text-amber-800 dark:text-amber-400' },\n  error: { icon: XCircle, className: 'text-destructive' },\n  critical: { icon: AlertCircle, className: 'text-destructive' },\n};\n\n/**\n * ErrorInline Component\n * インラインエラー表示コンポーネント\n *\n * Inline error display near form fields or submit buttons.\n * フォームのフィールド近くや送信ボタン周辺に表示します。\n *\n * ## AI/Automation Features\n * - `data-testid`: Container element\n * - `data-severity`: Error severity level\n *\n * @example With testId\n * ```tsx\n * <ErrorInline testId=\"form-error\" error={formError} />\n * ```\n */\nexport function ErrorInline({\n  testId,\n  error,\n  code,\n  message,\n  className,\n  severity = 'error',\n  hideIcon = false,\n}: ErrorInlineProps) {\n  // 表示するメッセージを決定\n  let displayMessage: string | null = null;\n  let displaySeverity = severity;\n\n  if (error) {\n    if (error instanceof AppError) {\n      displayMessage = error.message;\n      displaySeverity = error.severity;\n    } else {\n      displayMessage = error.message;\n    }\n  } else if (code) {\n    // Use the code directly as message - dynamic i18n key lookup not supported in Paraglide\n    displayMessage = code;\n  } else if (message) {\n    displayMessage = message;\n  }\n\n  // 表示するものがなければ何も表示しない\n  if (!displayMessage) {\n    return null;\n  }\n\n  const config = severityConfig[displaySeverity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      data-testid={testId}\n      data-severity={displaySeverity}\n      className={cn('flex items-center gap-2 text-sm', config.className, className)}\n      role='alert'\n    >\n      {!hideIcon && <Icon className='h-4 w-4 flex-shrink-0' aria-hidden='true' />}\n      <span>{displayMessage}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,IAAMA,IAAwF;CAC5F,MAAM;EAAE,MAAMC;EAAM,WAAW;CAAmC;CAClE,SAAS;EAAE,MAAMC;EAAe,WAAW;CAAqC;CAChF,OAAO;EAAE,MAAMC;EAAS,WAAW;CAAmB;CACtD,UAAU;EAAE,MAAMC;EAAa,WAAW;CAAmB;AAC/D;AAkBA,SAAgBC,EAAY,EAC1B,WACA,UACA,SACA,YACA,cACA,cAAW,SACX,cAAW,MACQ;CAEnB,IAAIC,IAAgC,MAChCC,IAAkBC;CAiBtB,IAfIC,IACEA,aAAiBC,KACnB,IAAiBD,EAAM,SACvB,IAAkBA,EAAM,YAExB,IAAiBA,EAAM,UAEhBE,IAET,IAAiBA,IACRC,MACT,IAAiBA,IAIf,CAACN,GACH,OAAO;CAGT,IAAMO,IAASb,EAAeO,IACxBO,IAAOD,EAAO;CAEpB,OACE,kBAAC,OAAD;EACE,eAAaE;EACb,iBAAeR;EACf,WAAWS,EAAG,mCAAmCH,EAAO,WAAWI,CAAS;EAC5E,MAAK;EAJP,UAAA,CAMG,CAACC,KAAY,kBAACJ,GAAD;GAAM,WAAU;GAAwB,eAAY;EAAQ,CAAA,GAC1E,kBAAC,QAAD,EAAA,UAAOR,EAAqB,CAAA,CACzB;;AAET"}

package/dist/tools/components/error/ErrorNotification.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("../../lib/state/error-store.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react");var o={info:{icon:a.Info,bgClass:`bg-blue-50`,borderClass:`border-blue-200`,iconBgClass:`bg-blue-500`,iconClass:`text-white`},warning:{icon:a.AlertTriangle,bgClass:`bg-amber-50`,borderClass:`border-amber-200`,iconBgClass:`bg-amber-500`,iconClass:`text-white`},error:{icon:a.X,bgClass:`bg-red-50`,borderClass:`border-red-200`,iconBgClass:`bg-red-500`,iconClass:`text-white`},critical:{icon:a.AlertCircle,bgClass:`bg-red-100`,borderClass:`border-red-300`,iconBgClass:`bg-red-600`,iconClass:`text-white`},success:{icon:a.CheckCircle,bgClass:`bg-green-50`,borderClass:`border-green-200`,iconBgClass:`bg-green-500`,iconClass:`text-white`}},s={"top-left":`top-4 left-4`,"top-center":`top-4 left-1/2 -translate-x-1/2`,"top-right":`top-4 right-4`,"bottom-left":`bottom-4 left-4`,"bottom-center":`bottom-4 left-1/2 -translate-x-1/2`,"bottom-right":`bottom-4 right-4`};function c({className:e,maxVisible:i=5,position:a=`top-right`}){let{removeError:o,getErrorsByMode:c}=n.useErrorStore(),u=c(`notification`).slice(-i);return u.length===0?null:(0,r.jsx)(`div`,{className:t.cn(`fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none`,s[a],e),children:u.map(e=>(0,r.jsx)(l,{item:e,onDismiss:()=>o(e.id)},e.id))})}function l({item:e,onDismiss:n}){let i=o[e.severity],s=i.icon;return(0,r.jsxs)(`div`,{className:t.cn(`pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg`,`animate-in slide-in-from-right-full fade-in duration-300`,i.bgClass,i.borderClass),role:`alert`,children:[(0,r.jsx)(`div`,{className:t.cn(`rounded-full p-1.5 flex-shrink-0`,i.iconBgClass),children:(0,r.jsx)(s,{className:t.cn(`h-4 w-4`,i.iconClass)})}),(0,r.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,r.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:e.error.message}),e.error.code&&e.error.code!==`error/unknown`&&(0,r.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground`,children:e.error.code})]}),(0,r.jsx)(`button`,{onClick:n,className:`flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors`,"aria-label":`Close`,children:(0,r.jsx)(a.X,{className:`h-4 w-4`})})]})}exports.ErrorNotification=c;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../lib/state/error-store.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react");var o={info:{icon:a.Info,bgClass:`bg-blue-50 dark:bg-blue-950`,borderClass:`border-blue-200 dark:border-blue-800`,iconBgClass:`bg-blue-500`,iconClass:`text-white`},warning:{icon:a.AlertTriangle,bgClass:`bg-amber-50 dark:bg-amber-950`,borderClass:`border-amber-200 dark:border-amber-800`,iconBgClass:`bg-amber-500`,iconClass:`text-white`},error:{icon:a.X,bgClass:`bg-red-50 dark:bg-red-950`,borderClass:`border-red-200 dark:border-red-800`,iconBgClass:`bg-red-500`,iconClass:`text-white`},critical:{icon:a.AlertCircle,bgClass:`bg-red-100 dark:bg-red-950`,borderClass:`border-red-300 dark:border-red-800`,iconBgClass:`bg-red-600`,iconClass:`text-white`},success:{icon:a.CheckCircle,bgClass:`bg-green-50 dark:bg-green-950`,borderClass:`border-green-200 dark:border-green-800`,iconBgClass:`bg-green-500`,iconClass:`text-white`}},s={"top-left":`top-4 left-4`,"top-center":`top-4 left-1/2 -translate-x-1/2`,"top-right":`top-4 right-4`,"bottom-left":`bottom-4 left-4`,"bottom-center":`bottom-4 left-1/2 -translate-x-1/2`,"bottom-right":`bottom-4 right-4`};function c({className:e,maxVisible:i=5,position:a=`top-right`}){let{removeError:o,getErrorsByMode:c}=n.useErrorStore(),u=c(`notification`).slice(-i);return u.length===0?null:(0,r.jsx)(`div`,{className:t.cn(`fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none`,s[a],e),children:u.map(e=>(0,r.jsx)(l,{item:e,onDismiss:()=>o(e.id)},e.id))})}function l({item:e,onDismiss:n}){let i=o[e.severity],s=i.icon;return(0,r.jsxs)(`div`,{className:t.cn(`pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg`,`animate-in slide-in-from-right-full fade-in duration-300`,i.bgClass,i.borderClass),role:`alert`,children:[(0,r.jsx)(`div`,{className:t.cn(`rounded-full p-1.5 flex-shrink-0`,i.iconBgClass),children:(0,r.jsx)(s,{className:t.cn(`h-4 w-4`,i.iconClass)})}),(0,r.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,r.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:e.error.message}),e.error.code&&e.error.code!==`error/unknown`&&(0,r.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground`,children:e.error.code})]}),(0,r.jsx)(`button`,{onClick:n,className:`flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors`,"aria-label":`Close`,children:(0,r.jsx)(a.X,{className:`h-4 w-4`})})]})}exports.ErrorNotification=c;
 //# sourceMappingURL=ErrorNotification.cjs.map

package/dist/tools/components/error/ErrorNotification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorNotification.cjs","names":["Info","AlertTriangle","X","AlertCircle","CheckCircle","useErrorStore","cn","require_runtime","require_ui_lib_utils","require_tools_lib_state_error_store","react_jsx_runtime","react","lucide_react","severityConfig","positionClasses","ErrorNotification","notificationErrors","getErrorsByMode","maxVisible","position","className","NotificationItem","removeError","item","config","Icon","onDismiss"],"sources":["../../../../src/tools/components/error/ErrorNotification.tsx"],"sourcesContent":["import React from 'react';\nimport { X, AlertCircle, AlertTriangle, Info, CheckCircle } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore, ErrorItem } from \"../../lib/state/error-store\";\n\nexport interface ErrorNotificationProps {\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 通知の最大表示数。デフォルト: 5 */\n  maxVisible?: number;\n  /** 表示位置。デフォルト: 'top-right' */\n  position?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n}\n\nconst severityConfig: Record<\n  ErrorSeverity | 'success',\n  {\n    icon: React.ElementType;\n    bgClass: string;\n    borderClass: string;\n    iconBgClass: string;\n    iconClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    bgClass: 'bg-blue-50',\n    borderClass: 'border-blue-200',\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n  },\n  warning: {\n    icon: AlertTriangle,\n    bgClass: 'bg-amber-50',\n    borderClass: 'border-amber-200',\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n  },\n  error: {\n    icon: X,\n    bgClass: 'bg-red-50',\n    borderClass: 'border-red-200',\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n  },\n  critical: {\n    icon: AlertCircle,\n    bgClass: 'bg-red-100',\n    borderClass: 'border-red-300',\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n  },\n  success: {\n    icon: CheckCircle,\n    bgClass: 'bg-green-50',\n    borderClass: 'border-green-200',\n    iconBgClass: 'bg-green-500',\n    iconClass: 'text-white',\n  },\n};\n\nconst positionClasses: Record<NonNullable<ErrorNotificationProps['position']>, string> = {\n  'top-left': 'top-4 left-4',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2',\n  'top-right': 'top-4 right-4',\n  'bottom-left': 'bottom-4 left-4',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  'bottom-right': 'bottom-4 right-4',\n};\n\n/**\n * 通知バナー表示コンポーネント\n * 画面の角に通知を表示します。\n *\n * @example\n * ```tsx\n * // ErrorProvider 内で自動的に使用されます\n * <ErrorNotification position=\"top-right\" maxVisible={3} />\n * ```\n */\nexport function ErrorNotification({\n  className,\n  maxVisible = 5,\n  position = 'top-right',\n}: ErrorNotificationProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // notification モードのエラーのみ表示\n  const notificationErrors = getErrorsByMode('notification').slice(-maxVisible);\n\n  if (notificationErrors.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none',\n        positionClasses[position],\n        className,\n      )}\n    >\n      {notificationErrors.map((item) => (\n        <NotificationItem key={item.id} item={item} onDismiss={() => removeError(item.id)} />\n      ))}\n    </div>\n  );\n}\n\ninterface NotificationItemProps {\n  item: ErrorItem;\n  onDismiss: () => void;\n}\n\nfunction NotificationItem({ item, onDismiss }: NotificationItemProps) {\n  const config = severityConfig[item.severity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg',\n        'animate-in slide-in-from-right-full fade-in duration-300',\n        config.bgClass,\n        config.borderClass,\n      )}\n      role='alert'\n    >\n      <div className={cn('rounded-full p-1.5 flex-shrink-0', config.iconBgClass)}>\n        <Icon className={cn('h-4 w-4', config.iconClass)} />\n      </div>\n      <div className='flex-1 min-w-0'>\n        <p className='text-sm font-medium text-foreground'>{item.error.message}</p>\n        {item.error.code && item.error.code !== 'error/unknown' && (\n          <p className='mt-1 text-xs text-muted-foreground'>{item.error.code}</p>\n        )}\n      </div>\n      <button\n        onClick={onDismiss}\n        className='flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors'\n        aria-label='Close'\n      >\n        <X className='h-4 w-4' />\n      </button>\n    </div>\n  );\n}\n"],"mappings":"A,oUAqBA,IAAMa,EASF,CACF,KAAM,CACJ,KAAMb,EAAAA,KACN,QAAS,aACT,YAAa,kBACb,YAAa,cACb,UAAW,YACb,EACA,QAAS,CACP,KAAMC,EAAAA,cACN,QAAS,cACT,YAAa,mBACb,YAAa,eACb,UAAW,YACb,EACA,MAAO,CACL,KAAMC,EAAAA,EACN,QAAS,YACT,YAAa,iBACb,YAAa,aACb,UAAW,YACb,EACA,SAAU,CACR,KAAMC,EAAAA,YACN,QAAS,aACT,YAAa,iBACb,YAAa,aACb,UAAW,YACb,EACA,QAAS,CACP,KAAMC,EAAAA,YACN,QAAS,cACT,YAAa,mBACb,YAAa,eACb,UAAW,YACb,CACF,EAEMU,EAAmF,CACvF,WAAY,eACZ,aAAc,kCACd,YAAa,gBACb,cAAe,kBACf,gBAAiB,qCACjB,eAAgB,kBAClB,EAYA,SAAgBC,EAAkB,CAChC,YACA,aAAa,EACb,WAAW,aACc,CACzB,GAAM,CAAE,cAAa,mBAAoBV,EAAAA,cAAc,EAGjDW,EAAqBC,EAAgB,cAAc,CAAC,CAAC,MAAM,CAACC,CAAU,EAM5E,OAJIF,EAAmB,SAAW,EACzB,MAIP,EAAAN,EAAA,IAAA,CAAC,MAAD,CACE,UAAWJ,EAAAA,GACT,wEACAQ,EAAgBK,GAChBC,CACF,EAEC,SAAAJ,EAAmB,IAAK,IACvB,EAAAN,EAAA,IAAA,CAACW,EAAD,CAAsC,OAAM,cAAiBC,EAAYC,EAAK,EAAE,CAAI,EAA7DA,EAAK,EAAwD,CACrF,CACE,CAAA,CAET,CAOA,SAASF,EAAiB,CAAE,OAAM,aAAoC,CACpE,IAAMG,EAASX,EAAeU,EAAK,UAC7BE,EAAOD,EAAO,KAEpB,OACE,EAAAd,EAAA,KAAA,CAAC,MAAD,CACE,UAAWJ,EAAAA,GACT,6EACA,2DACAkB,EAAO,QACPA,EAAO,WACT,EACA,KAAK,QAPP,SAAA,EASE,EAAAd,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,GAAG,mCAAoCkB,EAAO,WAAW,EACvE,UAAA,EAAAd,EAAA,IAAA,CAACe,EAAD,CAAM,UAAWnB,EAAAA,GAAG,UAAWkB,EAAO,SAAS,CAAI,CAAA,CAChD,CAAA,GACL,EAAAd,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sCAAuC,SAAAa,EAAK,MAAM,OAAW,CAAA,EACzEA,EAAK,MAAM,MAAQA,EAAK,MAAM,OAAS,kBACtC,EAAAb,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,qCAAsC,SAAAa,EAAK,MAAM,IAAQ,CAAA,CAErE,C,IACL,EAAAb,EAAA,IAAA,CAAC,SAAD,CACE,QAASgB,EACT,UAAU,qIACV,aAAW,QAEX,UAAA,EAAAhB,EAAA,IAAA,CAACR,EAAAA,EAAD,CAAG,UAAU,SAAW,CAAA,CAClB,CAAA,CACL,C,EAET,C"}
+{"version":3,"file":"ErrorNotification.cjs","names":["Info","AlertTriangle","X","AlertCircle","CheckCircle","useErrorStore","cn","require_runtime","require_ui_lib_utils","require_tools_lib_state_error_store","react_jsx_runtime","react","lucide_react","severityConfig","positionClasses","ErrorNotification","notificationErrors","getErrorsByMode","maxVisible","position","className","NotificationItem","removeError","item","config","Icon","onDismiss"],"sources":["../../../../src/tools/components/error/ErrorNotification.tsx"],"sourcesContent":["import React from 'react';\nimport { X, AlertCircle, AlertTriangle, Info, CheckCircle } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore, ErrorItem } from \"../../lib/state/error-store\";\n\nexport interface ErrorNotificationProps {\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 通知の最大表示数。デフォルト: 5 */\n  maxVisible?: number;\n  /** 表示位置。デフォルト: 'top-right' */\n  position?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n}\n\nconst severityConfig: Record<\n  ErrorSeverity | 'success',\n  {\n    icon: React.ElementType;\n    bgClass: string;\n    borderClass: string;\n    iconBgClass: string;\n    iconClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    bgClass: 'bg-blue-50 dark:bg-blue-950',\n    borderClass: 'border-blue-200 dark:border-blue-800',\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n  },\n  warning: {\n    icon: AlertTriangle,\n    bgClass: 'bg-amber-50 dark:bg-amber-950',\n    borderClass: 'border-amber-200 dark:border-amber-800',\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n  },\n  error: {\n    icon: X,\n    bgClass: 'bg-red-50 dark:bg-red-950',\n    borderClass: 'border-red-200 dark:border-red-800',\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n  },\n  critical: {\n    icon: AlertCircle,\n    bgClass: 'bg-red-100 dark:bg-red-950',\n    borderClass: 'border-red-300 dark:border-red-800',\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n  },\n  success: {\n    icon: CheckCircle,\n    bgClass: 'bg-green-50 dark:bg-green-950',\n    borderClass: 'border-green-200 dark:border-green-800',\n    iconBgClass: 'bg-green-500',\n    iconClass: 'text-white',\n  },\n};\n\nconst positionClasses: Record<NonNullable<ErrorNotificationProps['position']>, string> = {\n  'top-left': 'top-4 left-4',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2',\n  'top-right': 'top-4 right-4',\n  'bottom-left': 'bottom-4 left-4',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  'bottom-right': 'bottom-4 right-4',\n};\n\n/**\n * 通知バナー表示コンポーネント\n * 画面の角に通知を表示します。\n *\n * @example\n * ```tsx\n * // ErrorProvider 内で自動的に使用されます\n * <ErrorNotification position=\"top-right\" maxVisible={3} />\n * ```\n */\nexport function ErrorNotification({\n  className,\n  maxVisible = 5,\n  position = 'top-right',\n}: ErrorNotificationProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // notification モードのエラーのみ表示\n  const notificationErrors = getErrorsByMode('notification').slice(-maxVisible);\n\n  if (notificationErrors.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none',\n        positionClasses[position],\n        className,\n      )}\n    >\n      {notificationErrors.map((item) => (\n        <NotificationItem key={item.id} item={item} onDismiss={() => removeError(item.id)} />\n      ))}\n    </div>\n  );\n}\n\ninterface NotificationItemProps {\n  item: ErrorItem;\n  onDismiss: () => void;\n}\n\nfunction NotificationItem({ item, onDismiss }: NotificationItemProps) {\n  const config = severityConfig[item.severity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg',\n        'animate-in slide-in-from-right-full fade-in duration-300',\n        config.bgClass,\n        config.borderClass,\n      )}\n      role='alert'\n    >\n      <div className={cn('rounded-full p-1.5 flex-shrink-0', config.iconBgClass)}>\n        <Icon className={cn('h-4 w-4', config.iconClass)} />\n      </div>\n      <div className='flex-1 min-w-0'>\n        <p className='text-sm font-medium text-foreground'>{item.error.message}</p>\n        {item.error.code && item.error.code !== 'error/unknown' && (\n          <p className='mt-1 text-xs text-muted-foreground'>{item.error.code}</p>\n        )}\n      </div>\n      <button\n        onClick={onDismiss}\n        className='flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors'\n        aria-label='Close'\n      >\n        <X className='h-4 w-4' />\n      </button>\n    </div>\n  );\n}\n"],"mappings":"A,oUAqBA,IAAMa,EASF,CACF,KAAM,CACJ,KAAMb,EAAAA,KACN,QAAS,8BACT,YAAa,uCACb,YAAa,cACb,UAAW,YACb,EACA,QAAS,CACP,KAAMC,EAAAA,cACN,QAAS,gCACT,YAAa,yCACb,YAAa,eACb,UAAW,YACb,EACA,MAAO,CACL,KAAMC,EAAAA,EACN,QAAS,4BACT,YAAa,qCACb,YAAa,aACb,UAAW,YACb,EACA,SAAU,CACR,KAAMC,EAAAA,YACN,QAAS,6BACT,YAAa,qCACb,YAAa,aACb,UAAW,YACb,EACA,QAAS,CACP,KAAMC,EAAAA,YACN,QAAS,gCACT,YAAa,yCACb,YAAa,eACb,UAAW,YACb,CACF,EAEMU,EAAmF,CACvF,WAAY,eACZ,aAAc,kCACd,YAAa,gBACb,cAAe,kBACf,gBAAiB,qCACjB,eAAgB,kBAClB,EAYA,SAAgBC,EAAkB,CAChC,YACA,aAAa,EACb,WAAW,aACc,CACzB,GAAM,CAAE,cAAa,mBAAoBV,EAAAA,cAAc,EAGjDW,EAAqBC,EAAgB,cAAc,CAAC,CAAC,MAAM,CAACC,CAAU,EAM5E,OAJIF,EAAmB,SAAW,EACzB,MAIP,EAAAN,EAAA,IAAA,CAAC,MAAD,CACE,UAAWJ,EAAAA,GACT,wEACAQ,EAAgBK,GAChBC,CACF,EAEC,SAAAJ,EAAmB,IAAK,IACvB,EAAAN,EAAA,IAAA,CAACW,EAAD,CAAsC,OAAM,cAAiBC,EAAYC,EAAK,EAAE,CAAI,EAA7DA,EAAK,EAAwD,CACrF,CACE,CAAA,CAET,CAOA,SAASF,EAAiB,CAAE,OAAM,aAAoC,CACpE,IAAMG,EAASX,EAAeU,EAAK,UAC7BE,EAAOD,EAAO,KAEpB,OACE,EAAAd,EAAA,KAAA,CAAC,MAAD,CACE,UAAWJ,EAAAA,GACT,6EACA,2DACAkB,EAAO,QACPA,EAAO,WACT,EACA,KAAK,QAPP,SAAA,EASE,EAAAd,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,GAAG,mCAAoCkB,EAAO,WAAW,EACvE,UAAA,EAAAd,EAAA,IAAA,CAACe,EAAD,CAAM,UAAWnB,EAAAA,GAAG,UAAWkB,EAAO,SAAS,CAAI,CAAA,CAChD,CAAA,GACL,EAAAd,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sCAAuC,SAAAa,EAAK,MAAM,OAAW,CAAA,EACzEA,EAAK,MAAM,MAAQA,EAAK,MAAM,OAAS,kBACtC,EAAAb,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,qCAAsC,SAAAa,EAAK,MAAM,IAAQ,CAAA,CAErE,C,IACL,EAAAb,EAAA,IAAA,CAAC,SAAD,CACE,QAASgB,EACT,UAAU,qIACV,aAAW,QAEX,UAAA,EAAAhB,EAAA,IAAA,CAACR,EAAAA,EAAD,CAAG,UAAU,SAAW,CAAA,CAClB,CAAA,CACL,C,EAET,C"}

package/dist/tools/components/error/ErrorNotification.js

@@ -8,36 +8,36 @@ import { AlertCircle as i, AlertTriangle as a, CheckCircle as o, Info as s, X as
 var l = {
 	info: {
 		icon: s,
-		bgClass: "bg-blue-50",
-		borderClass: "border-blue-200",
+		bgClass: "bg-blue-50 dark:bg-blue-950",
+		borderClass: "border-blue-200 dark:border-blue-800",
 		iconBgClass: "bg-blue-500",
 		iconClass: "text-white"
 	},
 	warning: {
 		icon: a,
-		bgClass: "bg-amber-50",
-		borderClass: "border-amber-200",
+		bgClass: "bg-amber-50 dark:bg-amber-950",
+		borderClass: "border-amber-200 dark:border-amber-800",
 		iconBgClass: "bg-amber-500",
 		iconClass: "text-white"
 	},
 	error: {
 		icon: c,
-		bgClass: "bg-red-50",
-		borderClass: "border-red-200",
+		bgClass: "bg-red-50 dark:bg-red-950",
+		borderClass: "border-red-200 dark:border-red-800",
 		iconBgClass: "bg-red-500",
 		iconClass: "text-white"
 	},
 	critical: {
 		icon: i,
-		bgClass: "bg-red-100",
-		borderClass: "border-red-300",
+		bgClass: "bg-red-100 dark:bg-red-950",
+		borderClass: "border-red-300 dark:border-red-800",
 		iconBgClass: "bg-red-600",
 		iconClass: "text-white"
 	},
 	success: {
 		icon: o,
-		bgClass: "bg-green-50",
-		borderClass: "border-green-200",
+		bgClass: "bg-green-50 dark:bg-green-950",
+		borderClass: "border-green-200 dark:border-green-800",
 		iconBgClass: "bg-green-500",
 		iconClass: "text-white"
 	}

package/dist/tools/components/error/ErrorNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorNotification.js","names":["severityConfig","Info","AlertTriangle","X","AlertCircle","CheckCircle","positionClasses","ErrorNotification","useErrorStore","notificationErrors","getErrorsByMode","maxVisible","cn","position","className","NotificationItem","removeError","item","config","Icon","onDismiss"],"sources":["../../../../src/tools/components/error/ErrorNotification.tsx"],"sourcesContent":["import React from 'react';\nimport { X, AlertCircle, AlertTriangle, Info, CheckCircle } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore, ErrorItem } from \"../../lib/state/error-store\";\n\nexport interface ErrorNotificationProps {\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 通知の最大表示数。デフォルト: 5 */\n  maxVisible?: number;\n  /** 表示位置。デフォルト: 'top-right' */\n  position?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n}\n\nconst severityConfig: Record<\n  ErrorSeverity | 'success',\n  {\n    icon: React.ElementType;\n    bgClass: string;\n    borderClass: string;\n    iconBgClass: string;\n    iconClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    bgClass: 'bg-blue-50',\n    borderClass: 'border-blue-200',\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n  },\n  warning: {\n    icon: AlertTriangle,\n    bgClass: 'bg-amber-50',\n    borderClass: 'border-amber-200',\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n  },\n  error: {\n    icon: X,\n    bgClass: 'bg-red-50',\n    borderClass: 'border-red-200',\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n  },\n  critical: {\n    icon: AlertCircle,\n    bgClass: 'bg-red-100',\n    borderClass: 'border-red-300',\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n  },\n  success: {\n    icon: CheckCircle,\n    bgClass: 'bg-green-50',\n    borderClass: 'border-green-200',\n    iconBgClass: 'bg-green-500',\n    iconClass: 'text-white',\n  },\n};\n\nconst positionClasses: Record<NonNullable<ErrorNotificationProps['position']>, string> = {\n  'top-left': 'top-4 left-4',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2',\n  'top-right': 'top-4 right-4',\n  'bottom-left': 'bottom-4 left-4',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  'bottom-right': 'bottom-4 right-4',\n};\n\n/**\n * 通知バナー表示コンポーネント\n * 画面の角に通知を表示します。\n *\n * @example\n * ```tsx\n * // ErrorProvider 内で自動的に使用されます\n * <ErrorNotification position=\"top-right\" maxVisible={3} />\n * ```\n */\nexport function ErrorNotification({\n  className,\n  maxVisible = 5,\n  position = 'top-right',\n}: ErrorNotificationProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // notification モードのエラーのみ表示\n  const notificationErrors = getErrorsByMode('notification').slice(-maxVisible);\n\n  if (notificationErrors.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none',\n        positionClasses[position],\n        className,\n      )}\n    >\n      {notificationErrors.map((item) => (\n        <NotificationItem key={item.id} item={item} onDismiss={() => removeError(item.id)} />\n      ))}\n    </div>\n  );\n}\n\ninterface NotificationItemProps {\n  item: ErrorItem;\n  onDismiss: () => void;\n}\n\nfunction NotificationItem({ item, onDismiss }: NotificationItemProps) {\n  const config = severityConfig[item.severity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg',\n        'animate-in slide-in-from-right-full fade-in duration-300',\n        config.bgClass,\n        config.borderClass,\n      )}\n      role='alert'\n    >\n      <div className={cn('rounded-full p-1.5 flex-shrink-0', config.iconBgClass)}>\n        <Icon className={cn('h-4 w-4', config.iconClass)} />\n      </div>\n      <div className='flex-1 min-w-0'>\n        <p className='text-sm font-medium text-foreground'>{item.error.message}</p>\n        {item.error.code && item.error.code !== 'error/unknown' && (\n          <p className='mt-1 text-xs text-muted-foreground'>{item.error.code}</p>\n        )}\n      </div>\n      <button\n        onClick={onDismiss}\n        className='flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors'\n        aria-label='Close'\n      >\n        <X className='h-4 w-4' />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAqBA,IAAMA,IASF;CACF,MAAM;EACJ,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,OAAO;EACL,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;AACF,GAEMC,IAAmF;CACvF,YAAY;CACZ,cAAc;CACd,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,gBAAgB;AAClB;AAYA,SAAgBC,EAAkB,EAChC,cACA,gBAAa,GACb,cAAW,eACc;CACzB,IAAM,EAAE,gBAAa,uBAAoBC,EAAc,GAGjDC,IAAqBC,EAAgB,cAAc,CAAC,CAAC,MAAM,CAACC,CAAU;CAM5E,OAJIF,EAAmB,WAAW,IACzB,OAIP,kBAAC,OAAD;EACE,WAAWG,EACT,yEACAN,EAAgBO,IAChBC,CACF;EAEC,UAAAL,EAAmB,KAAK,MACvB,kBAACM,GAAD;GAAsC;GAAM,iBAAiBC,EAAYC,EAAK,EAAE;EAAI,GAA7DA,EAAK,EAAwD,CACrF;CACE,CAAA;AAET;AAOA,SAASF,EAAiB,EAAE,SAAM,gBAAoC;CACpE,IAAMG,IAASlB,EAAeiB,EAAK,WAC7BE,IAAOD,EAAO;CAEpB,OACE,kBAAC,OAAD;EACE,WAAWN,EACT,8EACA,4DACAM,EAAO,SACPA,EAAO,WACT;EACA,MAAK;EAPP,UAAA;GASE,kBAAC,OAAD;IAAK,WAAWN,EAAG,oCAAoCM,EAAO,WAAW;IACvE,UAAA,kBAACC,GAAD,EAAM,WAAWP,EAAG,WAAWM,EAAO,SAAS,EAAI,CAAA;GAChD,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAuC,UAAAD,EAAK,MAAM;IAAW,CAAA,GACzEA,EAAK,MAAM,QAAQA,EAAK,MAAM,SAAS,mBACtC,kBAAC,KAAD;KAAG,WAAU;KAAsC,UAAAA,EAAK,MAAM;IAAQ,CAAA,CAErE;;GACL,kBAAC,UAAD;IACE,SAASG;IACT,WAAU;IACV,cAAW;IAEX,UAAA,kBAACjB,GAAD,EAAG,WAAU,UAAW,CAAA;GAClB,CAAA;EACL;;AAET"}
+{"version":3,"file":"ErrorNotification.js","names":["severityConfig","Info","AlertTriangle","X","AlertCircle","CheckCircle","positionClasses","ErrorNotification","useErrorStore","notificationErrors","getErrorsByMode","maxVisible","cn","position","className","NotificationItem","removeError","item","config","Icon","onDismiss"],"sources":["../../../../src/tools/components/error/ErrorNotification.tsx"],"sourcesContent":["import React from 'react';\nimport { X, AlertCircle, AlertTriangle, Info, CheckCircle } from 'lucide-react';\nimport { cn } from \"../../lib/utils\";\nimport { ErrorSeverity } from \"../../lib/error\";\nimport { useErrorStore, ErrorItem } from \"../../lib/state/error-store\";\n\nexport interface ErrorNotificationProps {\n  /** 追加の CSS クラス */\n  className?: string;\n  /** 通知の最大表示数。デフォルト: 5 */\n  maxVisible?: number;\n  /** 表示位置。デフォルト: 'top-right' */\n  position?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n}\n\nconst severityConfig: Record<\n  ErrorSeverity | 'success',\n  {\n    icon: React.ElementType;\n    bgClass: string;\n    borderClass: string;\n    iconBgClass: string;\n    iconClass: string;\n  }\n> = {\n  info: {\n    icon: Info,\n    bgClass: 'bg-blue-50 dark:bg-blue-950',\n    borderClass: 'border-blue-200 dark:border-blue-800',\n    iconBgClass: 'bg-blue-500',\n    iconClass: 'text-white',\n  },\n  warning: {\n    icon: AlertTriangle,\n    bgClass: 'bg-amber-50 dark:bg-amber-950',\n    borderClass: 'border-amber-200 dark:border-amber-800',\n    iconBgClass: 'bg-amber-500',\n    iconClass: 'text-white',\n  },\n  error: {\n    icon: X,\n    bgClass: 'bg-red-50 dark:bg-red-950',\n    borderClass: 'border-red-200 dark:border-red-800',\n    iconBgClass: 'bg-red-500',\n    iconClass: 'text-white',\n  },\n  critical: {\n    icon: AlertCircle,\n    bgClass: 'bg-red-100 dark:bg-red-950',\n    borderClass: 'border-red-300 dark:border-red-800',\n    iconBgClass: 'bg-red-600',\n    iconClass: 'text-white',\n  },\n  success: {\n    icon: CheckCircle,\n    bgClass: 'bg-green-50 dark:bg-green-950',\n    borderClass: 'border-green-200 dark:border-green-800',\n    iconBgClass: 'bg-green-500',\n    iconClass: 'text-white',\n  },\n};\n\nconst positionClasses: Record<NonNullable<ErrorNotificationProps['position']>, string> = {\n  'top-left': 'top-4 left-4',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2',\n  'top-right': 'top-4 right-4',\n  'bottom-left': 'bottom-4 left-4',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  'bottom-right': 'bottom-4 right-4',\n};\n\n/**\n * 通知バナー表示コンポーネント\n * 画面の角に通知を表示します。\n *\n * @example\n * ```tsx\n * // ErrorProvider 内で自動的に使用されます\n * <ErrorNotification position=\"top-right\" maxVisible={3} />\n * ```\n */\nexport function ErrorNotification({\n  className,\n  maxVisible = 5,\n  position = 'top-right',\n}: ErrorNotificationProps) {\n  const { removeError, getErrorsByMode } = useErrorStore();\n\n  // notification モードのエラーのみ表示\n  const notificationErrors = getErrorsByMode('notification').slice(-maxVisible);\n\n  if (notificationErrors.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'fixed z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none',\n        positionClasses[position],\n        className,\n      )}\n    >\n      {notificationErrors.map((item) => (\n        <NotificationItem key={item.id} item={item} onDismiss={() => removeError(item.id)} />\n      ))}\n    </div>\n  );\n}\n\ninterface NotificationItemProps {\n  item: ErrorItem;\n  onDismiss: () => void;\n}\n\nfunction NotificationItem({ item, onDismiss }: NotificationItemProps) {\n  const config = severityConfig[item.severity];\n  const Icon = config.icon;\n\n  return (\n    <div\n      className={cn(\n        'pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg',\n        'animate-in slide-in-from-right-full fade-in duration-300',\n        config.bgClass,\n        config.borderClass,\n      )}\n      role='alert'\n    >\n      <div className={cn('rounded-full p-1.5 flex-shrink-0', config.iconBgClass)}>\n        <Icon className={cn('h-4 w-4', config.iconClass)} />\n      </div>\n      <div className='flex-1 min-w-0'>\n        <p className='text-sm font-medium text-foreground'>{item.error.message}</p>\n        {item.error.code && item.error.code !== 'error/unknown' && (\n          <p className='mt-1 text-xs text-muted-foreground'>{item.error.code}</p>\n        )}\n      </div>\n      <button\n        onClick={onDismiss}\n        className='flex-shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors'\n        aria-label='Close'\n      >\n        <X className='h-4 w-4' />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAqBA,IAAMA,IASF;CACF,MAAM;EACJ,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,OAAO;EACL,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EACR,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,SAAS;EACP,MAAMC;EACN,SAAS;EACT,aAAa;EACb,aAAa;EACb,WAAW;CACb;AACF,GAEMC,IAAmF;CACvF,YAAY;CACZ,cAAc;CACd,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,gBAAgB;AAClB;AAYA,SAAgBC,EAAkB,EAChC,cACA,gBAAa,GACb,cAAW,eACc;CACzB,IAAM,EAAE,gBAAa,uBAAoBC,EAAc,GAGjDC,IAAqBC,EAAgB,cAAc,CAAC,CAAC,MAAM,CAACC,CAAU;CAM5E,OAJIF,EAAmB,WAAW,IACzB,OAIP,kBAAC,OAAD;EACE,WAAWG,EACT,yEACAN,EAAgBO,IAChBC,CACF;EAEC,UAAAL,EAAmB,KAAK,MACvB,kBAACM,GAAD;GAAsC;GAAM,iBAAiBC,EAAYC,EAAK,EAAE;EAAI,GAA7DA,EAAK,EAAwD,CACrF;CACE,CAAA;AAET;AAOA,SAASF,EAAiB,EAAE,SAAM,gBAAoC;CACpE,IAAMG,IAASlB,EAAeiB,EAAK,WAC7BE,IAAOD,EAAO;CAEpB,OACE,kBAAC,OAAD;EACE,WAAWN,EACT,8EACA,4DACAM,EAAO,SACPA,EAAO,WACT;EACA,MAAK;EAPP,UAAA;GASE,kBAAC,OAAD;IAAK,WAAWN,EAAG,oCAAoCM,EAAO,WAAW;IACvE,UAAA,kBAACC,GAAD,EAAM,WAAWP,EAAG,WAAWM,EAAO,SAAS,EAAI,CAAA;GAChD,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAuC,UAAAD,EAAK,MAAM;IAAW,CAAA,GACzEA,EAAK,MAAM,QAAQA,EAAK,MAAM,SAAS,mBACtC,kBAAC,KAAD;KAAG,WAAU;KAAsC,UAAAA,EAAK,MAAM;IAAQ,CAAA,CAErE;;GACL,kBAAC,UAAD;IACE,SAASG;IACT,WAAU;IACV,cAAW;IAEX,UAAA,kBAACjB,GAAD,EAAG,WAAU,UAAW,CAAA;GAClB,CAAA;EACL;;AAET"}

package/dist/tools/components/file-browser/FileBrowser.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../ui/components/ui/alert.cjs"),t=require("../ui/dnd/DnDProvider.cjs"),n=require("./useStorageBrowser.cjs"),r=require("./FileNavbar.cjs"),i=require("./FileListView.cjs"),a=require("./FileGridView.cjs"),o=require("./FilePreview.cjs"),s=require("./FileDetailsPanel.cjs"),c=require("./StorageFileProvider.cjs");let l=require("react/jsx-runtime"),u=require("react"),d=require("lucide-react");function f({provider:f,adapter:p,initialPath:m=``,initialViewMode:h=`grid`,groupingAxis:g,onOpenFile:_,className:v}){let[y,b]=(0,u.useState)(null),[x,S]=(0,u.useState)(null),[C,w]=(0,u.useState)(null),T=(0,u.useMemo)(()=>{if(f)return f;if(p)return new c.StorageFileProvider(p);throw Error(`Either provider or adapter must be provided to FileBrowser`)},[f,p]),{state:E,verifyingIds:D,navigate:O,navigateUp:k,search:A,openNode:j,setViewMode:M,select:N,refresh:P,deleteNodes:F,renameNode:I,updateTags:L,verifyNode:R}=n.useStorageBrowser({provider:T,initialPath:m,initialViewMode:h,groupingAxis:g}),z=(0,u.useCallback)(async e=>{let t=await j(e);t&&(b(e),S(t),_?.(e,t))},[j,_]),B=(0,u.useCallback)(async e=>{confirm(`Are you sure you want to delete "${e.name}"?`)&&await F([e.id])},[F]),V=(0,u.useCallback)(e=>{w(e)},[]),H=(0,u.useCallback)(async e=>{let t=prompt(`Enter new name:`,e.name);t&&t!==e.name&&await I(e.id,t)},[I]),U=(0,u.useCallback)(async e=>{let t=e.metadata?.tags||``,n=prompt(`Enter tags (comma separated):`,t);n!==null&&n!==t&&await L(e.id,n)},[L]),W=(0,u.useCallback)(async()=>{let e=prompt(`Enter folder name:`);e&&(await T.createFolder(E.path,e),P())},[T,E.path,P]),G=(0,u.useCallback)(async()=>{let e=document.createElement(`input`);e.type=`file`,e.multiple=!0,e.onchange=async e=>{let t=e.target.files;if(t){for(let e of Array.from(t))await T.uploadFile(E.path,e,e.name);P()}},e.click()},[T,E.path,P]),K=(0,u.useCallback)(async e=>{let{active:t,over:n}=e;if(!n)return;let r=t.data.current,i=n.data.current;if(r.kind===`file`&&i.kind===`folder`){let e=i.id.endsWith(`/`)?i.id:`${i.id}/`;if(r.id.startsWith(e))return;try{await T.moveNode(r.id,e),P()}catch(e){alert(e instanceof Error?e.message:`Failed to move file`)}}},[T,P]);return(0,l.jsxs)(`div`,{className:`flex flex-col h-full bg-background border rounded-lg overflow-hidden ${v}`,children:[(0,l.jsx)(r.FileNavbar,{path:E.path,viewMode:E.viewMode,isLoading:E.isLoading,onNavigate:O,onNavigateUp:k,onSetViewMode:M,onRefresh:P,onSearch:A,onUpload:G,onCreateFolder:W}),E.error&&(0,l.jsxs)(e.Alert,{variant:`destructive`,className:`m-2`,children:[(0,l.jsx)(d.AlertCircle,{className:`h-4 w-4`}),(0,l.jsx)(e.AlertTitle,{children:`Error`}),(0,l.jsx)(e.AlertDescription,{children:E.error})]}),(0,l.jsx)(t.DnDProvider,{onDragEnd:K,children:(0,l.jsx)(`div`,{className:`flex-1 relative flex flex-col min-h-0`,children:E.isLoading&&E.nodes.length===0?(0,l.jsx)(`div`,{className:`flex-1 flex items-center justify-center`,children:(0,l.jsx)(d.Loader2,{className:`w-8 h-8 animate-spin text-muted-foreground`})}):(0,l.jsx)(l.Fragment,{children:E.viewMode===`list`?(0,l.jsx)(i.FileListView,{nodes:E.nodes,selectedIds:E.selectedIds,verifyingIds:D,onSelect:N,onOpen:z,onDelete:B,onDetails:V,onRename:H,onUpdateTags:U,onVerify:e=>void R(e.id)}):(0,l.jsx)(a.FileGridView,{nodes:E.nodes,selectedIds:E.selectedIds,verifyingIds:D,onSelect:N,onOpen:z,onDelete:B,onDetails:V,onRename:H,onUpdateTags:U,onVerify:e=>void R(e.id)})})})}),(0,l.jsxs)(`div`,{className:`px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between text-[11px] text-muted-foreground`,children:[(0,l.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,l.jsxs)(`span`,{children:[E.nodes.length,` items`]}),E.selectedIds.length>0&&(0,l.jsxs)(`span`,{className:`text-primary font-medium`,children:[E.selectedIds.length,` selected`]})]}),(0,l.jsx)(`div`,{children:E.path||`Root`})]}),(0,l.jsx)(o.FilePreview,{node:y,url:x,onClose:()=>{b(null),S(null)}}),(0,l.jsx)(s.FileDetailsPanel,{node:C,provider:T,onClose:()=>w(null)})]})}exports.FileBrowser=f;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../ui/components/ui/alert.cjs"),t=require("../ui/dnd/DnDProvider.cjs"),n=require("./useStorageBrowser.cjs"),r=require("./FileNavbar.cjs"),i=require("./FileListView.cjs"),a=require("./FileGridView.cjs"),o=require("./FilePreview.cjs"),s=require("./FileDetailsPanel.cjs"),c=require("./StorageFileProvider.cjs"),l=require("./file-drop.cjs");let u=require("react/jsx-runtime"),d=require("react"),f=require("lucide-react");function p({provider:p,adapter:m,initialPath:h=``,initialViewMode:g=`grid`,groupingAxis:_,onOpenFile:v,className:y}){let[b,x]=(0,d.useState)(null),[S,C]=(0,d.useState)(null),[w,T]=(0,d.useState)(null),E=(0,d.useRef)(0),D=(0,d.useMemo)(()=>{if(p)return p;if(m)return new c.StorageFileProvider(m);throw Error(`Either provider or adapter must be provided to FileBrowser`)},[p,m]),{state:O,verifyingIds:k,navigate:A,navigateUp:j,search:M,openNode:N,setViewMode:P,select:F,refresh:I,deleteNodes:L,renameNode:R,updateTags:z,verifyNode:B}=n.useStorageBrowser({provider:D,initialPath:h,initialViewMode:g,groupingAxis:_}),V=(0,d.useCallback)(async e=>{e.kind===`folder`&&E.current++;let t=await N(e);t&&(x(e),C(t),v?.(e,t))},[N,v]),H=(0,d.useCallback)(async e=>{confirm(`Are you sure you want to delete "${e.name}"?`)&&await L([e.id])},[L]),U=(0,d.useCallback)(e=>{T(e)},[]),W=(0,d.useCallback)(async e=>{let t=prompt(`Enter new name:`,e.name);t&&t!==e.name&&await R(e.id,t)},[R]),G=(0,d.useCallback)(async e=>{let t=e.metadata?.tags||``,n=prompt(`Enter tags (comma separated):`,t);n!==null&&n!==t&&await z(e.id,n)},[z]),K=(0,d.useCallback)(async()=>{let e=prompt(`Enter folder name:`);e&&(await D.createFolder(O.path,e),I())},[D,O.path,I]),q=(0,d.useCallback)(async()=>{let e=document.createElement(`input`);e.type=`file`,e.multiple=!0,e.onchange=async e=>{let t=e.target.files;if(t){for(let e of Array.from(t))await D.uploadFile(O.path,e,e.name);I()}},e.click()},[D,O.path,I]),J=(0,d.useRef)(null),Y=(0,d.useRef)(null);return(0,d.useLayoutEffect)(()=>(Y.current={provider:D,path:O.path,refresh:I},()=>{Y.current=null}),[D,O.path,I]),(0,d.useLayoutEffect)(()=>(E.current++,()=>{E.current++}),[D,h]),(0,d.useLayoutEffect)(()=>{J.current=null},[D,O.path,O.viewMode,O.isLoading,O.nodes]),(0,u.jsxs)(`div`,{className:`flex flex-col h-full bg-background border rounded-lg overflow-hidden ${y}`,children:[(0,u.jsx)(r.FileNavbar,{path:O.path,viewMode:O.viewMode,isLoading:O.isLoading,onNavigate:e=>{E.current++,A(e)},onNavigateUp:()=>{E.current++,j()},onSetViewMode:P,onRefresh:I,onSearch:M,onUpload:q,onCreateFolder:K}),O.error&&(0,u.jsxs)(e.Alert,{variant:`destructive`,className:`m-2`,children:[(0,u.jsx)(f.AlertCircle,{className:`h-4 w-4`}),(0,u.jsx)(e.AlertTitle,{children:`Error`}),(0,u.jsx)(e.AlertDescription,{children:O.error})]}),(0,u.jsx)(t.DnDProvider,{onDragStart:()=>{J.current={provider:D,path:O.path,viewMode:O.viewMode,navigationEpoch:E.current}},onDragEnd:async(e,t)=>{let n=J.current;J.current=null;let{source:r,target:i}=e.operation;if(!n||n.navigationEpoch!==E.current||n.provider!==D||n.path!==O.path||n.viewMode!==O.viewMode||O.isLoading||!r||!i||t.registry.draggables.get(r.id)!==r||t.registry.droppables.get(i.id)!==i)return;let a=l.resolveFileDrop(e,O.nodes);if(a)try{await D.moveNode(a.nodeId,a.targetPath);let e=Y.current;e?.provider===D&&e.path===n.path&&E.current===n.navigationEpoch&&e.refresh()}catch(e){alert(e instanceof Error?e.message:`Failed to move file`)}},children:(0,u.jsx)(`div`,{className:`flex-1 relative flex flex-col min-h-0`,children:O.isLoading&&O.nodes.length===0?(0,u.jsx)(`div`,{className:`flex-1 flex items-center justify-center`,children:(0,u.jsx)(f.Loader2,{className:`w-8 h-8 animate-spin text-muted-foreground`})}):(0,u.jsx)(u.Fragment,{children:O.viewMode===`list`?(0,u.jsx)(i.FileListView,{nodes:O.nodes,selectedIds:O.selectedIds,verifyingIds:k,onSelect:F,onOpen:V,onDelete:H,onDetails:U,onRename:W,onUpdateTags:G,onVerify:e=>void B(e.id)}):(0,u.jsx)(a.FileGridView,{nodes:O.nodes,selectedIds:O.selectedIds,verifyingIds:k,onSelect:F,onOpen:V,onDelete:H,onDetails:U,onRename:W,onUpdateTags:G,onVerify:e=>void B(e.id)})})})}),(0,u.jsxs)(`div`,{className:`px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between text-[11px] text-muted-foreground`,children:[(0,u.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,u.jsxs)(`span`,{children:[O.nodes.length,` items`]}),O.selectedIds.length>0&&(0,u.jsxs)(`span`,{className:`text-primary font-medium`,children:[O.selectedIds.length,` selected`]})]}),(0,u.jsx)(`div`,{children:O.path||`Root`})]}),(0,u.jsx)(o.FilePreview,{node:b,url:S,onClose:()=>{x(null),C(null)}}),(0,u.jsx)(s.FileDetailsPanel,{node:w,provider:D,onClose:()=>T(null)})]})}exports.FileBrowser=p;
 //# sourceMappingURL=FileBrowser.cjs.map

package/dist/tools/components/file-browser/FileBrowser.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileBrowser.cjs","names":["useState","useMemo","StorageFileProvider","useStorageBrowser","useCallback","FileNavbar","Alert","AlertCircle","AlertTitle","AlertDescription","DnDProvider","Loader2","_Fragment","FileListView","FileGridView","FilePreview","FileDetailsPanel","require_ui_components_ui_alert","require_tools_components_ui_dnd_DnDProvider","require_tools_components_file_browser_useStorageBrowser","require_tools_components_file_browser_FileNavbar","require_tools_components_file_browser_FileListView","require_tools_components_file_browser_FileGridView","require_tools_components_file_browser_FilePreview","require_tools_components_file_browser_FileDetailsPanel","require_tools_components_file_browser_StorageFileProvider","react_jsx_runtime","react","lucide_react","FileBrowser","propProvider","previewNode","setPreviewNode","previewUrl","setPreviewUrl","detailsNode","setDetailsNode","provider","adapter","handleOpen","url","openNode","node","onOpenFile","handleDelete","deleteNodes","handleDetails","handleRename","newName","renameNode","handleUpdateTags","currentTags","newTags","updateTags","handleCreateFolder","name","state","refresh","handleUpload","input","files","file","handleDragEnd","event","over","activeNode","active","overNode","targetPath","error","className","navigate","navigateUp","setViewMode","search","select","verifyNode"],"sources":["../../../../src/tools/components/file-browser/FileBrowser.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useStorageBrowser } from './useStorageBrowser';\nimport { FileNavbar } from './FileNavbar';\nimport { FileListView } from './FileListView';\nimport { FileGridView } from './FileGridView';\nimport { FilePreview } from './FilePreview';\nimport { FileDetailsPanel } from './FileDetailsPanel';\nimport { StorageFileProvider } from './StorageFileProvider';\nimport type { StorageAdapter } from '../../lib/storage/types';\nimport type { FileBrowserViewMode, FileNode, FileGroupingAxis, FileProvider } from './types';\nimport { Alert, AlertDescription, AlertTitle } from '../ui/alert';\nimport { AlertCircle, Loader2 } from 'lucide-react';\nimport { DnDProvider } from '../ui/dnd';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nexport interface FileBrowserProps {\n  /** ファイルプロバイダー（優先） */\n  provider?: FileProvider;\n  /** ストレージアダプター（providerが未指定の場合にラップして使用） */\n  adapter?: StorageAdapter;\n  /** 初期パス */\n  initialPath?: string;\n  /** 初期表示モード */\n  initialViewMode?: FileBrowserViewMode;\n  /** グループ化の軸（仮想ツリー用、将来拡張用） */\n  groupingAxis?: FileGroupingAxis;\n  /** ファイルがクリック（開かれた）時のコールバック */\n  onOpenFile?: (node: FileNode, url: string) => void;\n  /** クラス名 */\n  className?: string;\n}\n\n/**\n * 高機能ファイルブラウザコンポーネント\n *\n * S3, R2, OCI などのオブジェクトストレージをエクスプローラー形式で表示・操作します。\n * DBテーブル管理 + UUIDファイル名といった複雑な構成にも FileProvider を通じて対応可能です。\n */\nexport function FileBrowser({\n  provider: propProvider,\n  adapter,\n  initialPath = '',\n  initialViewMode = 'grid',\n  groupingAxis,\n  onOpenFile,\n  className,\n}: FileBrowserProps) {\n  // モーダル・パネル状態\n  const [previewNode, setPreviewNode] = useState<FileNode | null>(null);\n  const [previewUrl, setPreviewUrl] = useState<string | null>(null);\n  const [detailsNode, setDetailsNode] = useState<FileNode | null>(null);\n\n  // アダプターが直接渡された場合は標準のプロバイダーでラップする\n  const provider = useMemo(() => {\n    if (propProvider) return propProvider;\n    if (adapter) return new StorageFileProvider(adapter);\n    throw new Error('Either provider or adapter must be provided to FileBrowser');\n  }, [propProvider, adapter]);\n\n  const {\n    state,\n    verifyingIds,\n    navigate,\n    navigateUp,\n    search,\n    openNode,\n    setViewMode,\n    select,\n    refresh,\n    deleteNodes,\n    renameNode,\n    updateTags,\n    verifyNode,\n  } = useStorageBrowser({\n    provider,\n    initialPath,\n    initialViewMode,\n    groupingAxis,\n  });\n\n  const handleOpen = useCallback(\n    async (node: FileNode) => {\n      const url = await openNode(node);\n      if (url) {\n        setPreviewNode(node);\n        setPreviewUrl(url);\n        onOpenFile?.(node, url);\n      }\n    },\n    [openNode, onOpenFile],\n  );\n\n  const handleDelete = useCallback(\n    async (node: FileNode) => {\n      if (confirm(`Are you sure you want to delete \"${node.name}\"?`)) {\n        await deleteNodes([node.id]);\n      }\n    },\n    [deleteNodes],\n  );\n\n  const handleDetails = useCallback((node: FileNode) => {\n    setDetailsNode(node);\n  }, []);\n\n  const handleRename = useCallback(\n    async (node: FileNode) => {\n      const newName = prompt('Enter new name:', node.name);\n      if (newName && newName !== node.name) {\n        await renameNode(node.id, newName);\n      }\n    },\n    [renameNode],\n  );\n\n  const handleUpdateTags = useCallback(\n    async (node: FileNode) => {\n      const currentTags = node.metadata?.tags || '';\n      const newTags = prompt('Enter tags (comma separated):', currentTags);\n      if (newTags !== null && newTags !== currentTags) {\n        await updateTags(node.id, newTags);\n      }\n    },\n    [updateTags],\n  );\n\n  const handleCreateFolder = useCallback(async () => {\n    const name = prompt('Enter folder name:');\n    if (name) {\n      await provider.createFolder(state.path, name);\n      refresh();\n    }\n  }, [provider, state.path, refresh]);\n\n  const handleUpload = useCallback(async () => {\n    // 簡易的なファイル選択\n    const input = document.createElement('input');\n    input.type = 'file';\n    input.multiple = true;\n    input.onchange = async (e) => {\n      const files = (e.target as HTMLInputElement).files;\n      if (!files) return;\n\n      for (const file of Array.from(files)) {\n        await provider.uploadFile(state.path, file, file.name);\n      }\n      refresh();\n    };\n    input.click();\n  }, [provider, state.path, refresh]);\n\n  /**\n   * ドラッグ&ドロップ終了時の処理\n   */\n  const handleDragEnd = useCallback(\n    async (event: DragEndEvent) => {\n      const { active, over } = event;\n      if (!over) return;\n\n      const activeNode = active.data.current as FileNode;\n      const overNode = over.data.current as FileNode;\n\n      // ファイルをフォルダにドロップした場合のみ移動を実行\n      if (activeNode.kind === 'file' && overNode.kind === 'folder') {\n        const targetPath = overNode.id.endsWith('/') ? overNode.id : `${overNode.id}/`;\n\n        // 同じ場所なら何もしない\n        if (activeNode.id.startsWith(targetPath)) return;\n\n        try {\n          await provider.moveNode(activeNode.id, targetPath);\n          refresh();\n        } catch (error) {\n          alert(error instanceof Error ? error.message : 'Failed to move file');\n        }\n      }\n    },\n    [provider, refresh],\n  );\n\n  return (\n    <div\n      className={`flex flex-col h-full bg-background border rounded-lg overflow-hidden ${className}`}\n    >\n      {/* ツールバー */}\n      <FileNavbar\n        path={state.path}\n        viewMode={state.viewMode}\n        isLoading={state.isLoading}\n        onNavigate={navigate}\n        onNavigateUp={navigateUp}\n        onSetViewMode={setViewMode}\n        onRefresh={refresh}\n        onSearch={search}\n        onUpload={handleUpload}\n        onCreateFolder={handleCreateFolder}\n      />\n\n      {/* エラー表示 */}\n      {state.error && (\n        <Alert variant='destructive' className='m-2'>\n          <AlertCircle className='h-4 w-4' />\n          <AlertTitle>Error</AlertTitle>\n          <AlertDescription>{state.error}</AlertDescription>\n        </Alert>\n      )}\n\n      {/* メインコンテンツ */}\n      <DnDProvider onDragEnd={handleDragEnd}>\n        <div className='flex-1 relative flex flex-col min-h-0'>\n          {state.isLoading && state.nodes.length === 0 ? (\n            <div className='flex-1 flex items-center justify-center'>\n              <Loader2 className='w-8 h-8 animate-spin text-muted-foreground' />\n            </div>\n          ) : (\n            <>\n              {state.viewMode === 'list' ? (\n                <FileListView\n                  nodes={state.nodes}\n                  selectedIds={state.selectedIds}\n                  verifyingIds={verifyingIds}\n                  onSelect={select}\n                  onOpen={handleOpen}\n                  onDelete={handleDelete}\n                  onDetails={handleDetails}\n                  onRename={handleRename}\n                  onUpdateTags={handleUpdateTags}\n                  onVerify={(node) => void verifyNode(node.id)}\n                />\n              ) : (\n                <FileGridView\n                  nodes={state.nodes}\n                  selectedIds={state.selectedIds}\n                  verifyingIds={verifyingIds}\n                  onSelect={select}\n                  onOpen={handleOpen}\n                  onDelete={handleDelete}\n                  onDetails={handleDetails}\n                  onRename={handleRename}\n                  onUpdateTags={handleUpdateTags}\n                  onVerify={(node) => void verifyNode(node.id)}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </DnDProvider>\n\n      {/* ステータスバー */}\n      <div className='px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between text-[11px] text-muted-foreground'>\n        <div className='flex items-center gap-3'>\n          <span>{state.nodes.length} items</span>\n          {state.selectedIds.length > 0 && (\n            <span className='text-primary font-medium'>{state.selectedIds.length} selected</span>\n          )}\n        </div>\n        <div>{state.path || 'Root'}</div>\n      </div>\n\n      {/* プレビューモーダル */}\n      <FilePreview\n        node={previewNode}\n        url={previewUrl}\n        onClose={() => {\n          setPreviewNode(null);\n          setPreviewUrl(null);\n        }}\n      />\n\n      {/* 詳細パネル */}\n      <FileDetailsPanel\n        node={detailsNode}\n        provider={provider}\n        onClose={() => setDetailsNode(null)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"FileBrowser.cjs","names":["useState","useRef","useMemo","StorageFileProvider","useStorageBrowser","useCallback","resolveFileDrop","FileNavbar","Alert","AlertCircle","AlertTitle","AlertDescription","DnDProvider","Loader2","_Fragment","FileListView","FileGridView","FilePreview","FileDetailsPanel","require_ui_components_ui_alert","require_tools_components_ui_dnd_DnDProvider","require_tools_components_file_browser_useStorageBrowser","require_tools_components_file_browser_FileNavbar","require_tools_components_file_browser_FileListView","require_tools_components_file_browser_FileGridView","require_tools_components_file_browser_FilePreview","require_tools_components_file_browser_FileDetailsPanel","require_tools_components_file_browser_StorageFileProvider","require_tools_components_file_browser_file_drop","react_jsx_runtime","react","lucide_react","FileBrowser","propProvider","previewNode","setPreviewNode","previewUrl","setPreviewUrl","detailsNode","setDetailsNode","navigationEpoch","provider","adapter","handleOpen","node","url","openNode","onOpenFile","handleDelete","deleteNodes","handleDetails","handleRename","newName","renameNode","handleUpdateTags","currentTags","newTags","updateTags","handleCreateFolder","name","state","refresh","handleUpload","input","files","file","dragSnapshot","refreshContext","initialPath","className","navigate","path","navigateUp","setViewMode","search","snapshot","event","source","target","manager","move","current","error","select","verifyNode"],"sources":["../../../../src/tools/components/file-browser/FileBrowser.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useStorageBrowser } from './useStorageBrowser';\nimport { FileNavbar } from './FileNavbar';\nimport { FileListView } from './FileListView';\nimport { FileGridView } from './FileGridView';\nimport { FilePreview } from './FilePreview';\nimport { FileDetailsPanel } from './FileDetailsPanel';\nimport { StorageFileProvider } from './StorageFileProvider';\nimport type { StorageAdapter } from '../../lib/storage/types';\nimport type { FileBrowserViewMode, FileNode, FileGroupingAxis, FileProvider } from './types';\nimport { Alert, AlertDescription, AlertTitle } from '../ui/alert';\nimport { AlertCircle, Loader2 } from 'lucide-react';\nimport { DnDProvider, type DnDProviderProps } from '../ui/dnd';\nimport {resolveFileDrop} from './file-drop';\n\nexport interface FileBrowserProps {\n  /** ファイルプロバイダー（優先） */\n  provider?: FileProvider;\n  /** ストレージアダプター（providerが未指定の場合にラップして使用） */\n  adapter?: StorageAdapter;\n  /** 初期パス */\n  initialPath?: string;\n  /** 初期表示モード */\n  initialViewMode?: FileBrowserViewMode;\n  /** グループ化の軸（仮想ツリー用、将来拡張用） */\n  groupingAxis?: FileGroupingAxis;\n  /** ファイルがクリック（開かれた）時のコールバック */\n  onOpenFile?: (node: FileNode, url: string) => void;\n  /** クラス名 */\n  className?: string;\n}\n\n/**\n * Browse files through a host-supplied FileProvider or wrapped StorageAdapter.\n * @param props - Provider (preferred), optional adapter, initial path (default empty),\n * initial view mode (default grid), grouping axis, open callback and presentation.\n * @returns The browser, native drag boundary and preview/detail surfaces.\n * @throws An Error during rendering when neither provider nor adapter is supplied.\n * @remarks Hosts authorize storage access. A drop moves one currently listed file\n * into a registered folder, awaits moveNode and then refreshes the current relevant\n * view. Canceled/stale drops do not write; navigation does not undo a write already\n * in flight. Import Appkit CSS once; this component owns its native drag provider.\n * @example\n * ```tsx\n * import {FileBrowser, type FileProvider} from '@alneas/appkit-react/tools/file-browser';\n * import '@alneas/appkit-react/styles';\n * export function Files({provider}: {provider: FileProvider}) {\n *   return <div style={{height: 500}}><FileBrowser provider={provider} /></div>;\n * }\n * ```\n */\nexport function FileBrowser({\n  provider: propProvider,\n  adapter,\n  initialPath = '',\n  initialViewMode = 'grid',\n  groupingAxis,\n  onOpenFile,\n  className,\n}: FileBrowserProps) {\n  // モーダル・パネル状態\n  const [previewNode, setPreviewNode] = useState<FileNode | null>(null);\n  const [previewUrl, setPreviewUrl] = useState<string | null>(null);\n  const [detailsNode, setDetailsNode] = useState<FileNode | null>(null);\n  const navigationEpoch = useRef(0);\n\n  // アダプターが直接渡された場合は標準のプロバイダーでラップする\n  const provider = useMemo(() => {\n    if (propProvider) return propProvider;\n    if (adapter) return new StorageFileProvider(adapter);\n    throw new Error('Either provider or adapter must be provided to FileBrowser');\n  }, [propProvider, adapter]);\n\n  const {\n    state,\n    verifyingIds,\n    navigate,\n    navigateUp,\n    search,\n    openNode,\n    setViewMode,\n    select,\n    refresh,\n    deleteNodes,\n    renameNode,\n    updateTags,\n    verifyNode,\n  } = useStorageBrowser({\n    provider,\n    initialPath,\n    initialViewMode,\n    groupingAxis,\n  });\n\n  const handleOpen = useCallback(\n    async (node: FileNode) => {\n      if (node.kind === 'folder') navigationEpoch.current++;\n      const url = await openNode(node);\n      if (url) {\n        setPreviewNode(node);\n        setPreviewUrl(url);\n        onOpenFile?.(node, url);\n      }\n    },\n    [openNode, onOpenFile],\n  );\n\n  const handleDelete = useCallback(\n    async (node: FileNode) => {\n      if (confirm(`Are you sure you want to delete \"${node.name}\"?`)) {\n        await deleteNodes([node.id]);\n      }\n    },\n    [deleteNodes],\n  );\n\n  const handleDetails = useCallback((node: FileNode) => {\n    setDetailsNode(node);\n  }, []);\n\n  const handleRename = useCallback(\n    async (node: FileNode) => {\n      const newName = prompt('Enter new name:', node.name);\n      if (newName && newName !== node.name) {\n        await renameNode(node.id, newName);\n      }\n    },\n    [renameNode],\n  );\n\n  const handleUpdateTags = useCallback(\n    async (node: FileNode) => {\n      const currentTags = node.metadata?.tags || '';\n      const newTags = prompt('Enter tags (comma separated):', currentTags);\n      if (newTags !== null && newTags !== currentTags) {\n        await updateTags(node.id, newTags);\n      }\n    },\n    [updateTags],\n  );\n\n  const handleCreateFolder = useCallback(async () => {\n    const name = prompt('Enter folder name:');\n    if (name) {\n      await provider.createFolder(state.path, name);\n      refresh();\n    }\n  }, [provider, state.path, refresh]);\n\n  const handleUpload = useCallback(async () => {\n    // 簡易的なファイル選択\n    const input = document.createElement('input');\n    input.type = 'file';\n    input.multiple = true;\n    input.onchange = async (e) => {\n      const files = (e.target as HTMLInputElement).files;\n      if (!files) return;\n\n      for (const file of Array.from(files)) {\n        await provider.uploadFile(state.path, file, file.name);\n      }\n      refresh();\n    };\n    input.click();\n  }, [provider, state.path, refresh]);\n\n  const dragSnapshot = useRef<{provider: FileProvider; path: string; viewMode: FileBrowserViewMode; navigationEpoch: number} | null>(null);\n  const refreshContext = useRef<{provider: FileProvider; path: string; refresh: () => void} | null>(null);\n  useLayoutEffect(() => {\n    refreshContext.current = {provider, path: state.path, refresh};\n    return () => {refreshContext.current = null;};\n  }, [provider, state.path, refresh]);\n  useLayoutEffect(() => {\n    navigationEpoch.current++;\n    return () => {navigationEpoch.current++;};\n  }, [provider, initialPath]);\n  useLayoutEffect(() => {\n    dragSnapshot.current = null;\n  }, [provider, state.path, state.viewMode, state.isLoading, state.nodes]);\n  const handleDragStart: DnDProviderProps['onDragStart'] = () => {\n    dragSnapshot.current = {provider, path: state.path, viewMode: state.viewMode, navigationEpoch: navigationEpoch.current};\n  };\n  const handleDragEnd: DnDProviderProps['onDragEnd'] = async (event, manager) => {\n    const snapshot = dragSnapshot.current;\n    dragSnapshot.current = null;\n    const {source, target} = event.operation;\n    if (!snapshot || snapshot.navigationEpoch !== navigationEpoch.current || snapshot.provider !== provider || snapshot.path !== state.path || snapshot.viewMode !== state.viewMode || state.isLoading) return;\n    if (!source || !target || manager.registry.draggables.get(source.id) !== source || manager.registry.droppables.get(target.id) !== target) return;\n    const move = resolveFileDrop(event, state.nodes);\n    if (!move) return;\n    try {\n      await provider.moveNode(move.nodeId, move.targetPath);\n      const current = refreshContext.current;\n      if (current?.provider === provider && current.path === snapshot.path && navigationEpoch.current === snapshot.navigationEpoch) current.refresh();\n    } catch (error) {\n      alert(error instanceof Error ? error.message : 'Failed to move file');\n    }\n  };\n\n  return (\n    <div\n      className={`flex flex-col h-full bg-background border rounded-lg overflow-hidden ${className}`}\n    >\n      {/* ツールバー */}\n      <FileNavbar\n        path={state.path}\n        viewMode={state.viewMode}\n        isLoading={state.isLoading}\n        onNavigate={path => {navigationEpoch.current++; navigate(path);}}\n        onNavigateUp={() => {navigationEpoch.current++; navigateUp();}}\n        onSetViewMode={setViewMode}\n        onRefresh={refresh}\n        onSearch={search}\n        onUpload={handleUpload}\n        onCreateFolder={handleCreateFolder}\n      />\n\n      {/* エラー表示 */}\n      {state.error && (\n        <Alert variant='destructive' className='m-2'>\n          <AlertCircle className='h-4 w-4' />\n          <AlertTitle>Error</AlertTitle>\n          <AlertDescription>{state.error}</AlertDescription>\n        </Alert>\n      )}\n\n      {/* メインコンテンツ */}\n      <DnDProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n        <div className='flex-1 relative flex flex-col min-h-0'>\n          {state.isLoading && state.nodes.length === 0 ? (\n            <div className='flex-1 flex items-center justify-center'>\n              <Loader2 className='w-8 h-8 animate-spin text-muted-foreground' />\n            </div>\n          ) : (\n            <>\n              {state.viewMode === 'list' ? (\n                <FileListView\n                  nodes={state.nodes}\n                  selectedIds={state.selectedIds}\n                  verifyingIds={verifyingIds}\n                  onSelect={select}\n                  onOpen={handleOpen}\n                  onDelete={handleDelete}\n                  onDetails={handleDetails}\n                  onRename={handleRename}\n                  onUpdateTags={handleUpdateTags}\n                  onVerify={(node) => void verifyNode(node.id)}\n                />\n              ) : (\n                <FileGridView\n                  nodes={state.nodes}\n                  selectedIds={state.selectedIds}\n                  verifyingIds={verifyingIds}\n                  onSelect={select}\n                  onOpen={handleOpen}\n                  onDelete={handleDelete}\n                  onDetails={handleDetails}\n                  onRename={handleRename}\n                  onUpdateTags={handleUpdateTags}\n                  onVerify={(node) => void verifyNode(node.id)}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </DnDProvider>\n\n      {/* ステータスバー */}\n      <div className='px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between text-[11px] text-muted-foreground'>\n        <div className='flex items-center gap-3'>\n          <span>{state.nodes.length} items</span>\n          {state.selectedIds.length > 0 && (\n            <span className='text-primary font-medium'>{state.selectedIds.length} selected</span>\n          )}\n        </div>\n        <div>{state.path || 'Root'}</div>\n      </div>\n\n      {/* プレビューモーダル */}\n      <FilePreview\n        node={previewNode}\n        url={previewUrl}\n        onClose={() => {\n          setPreviewNode(null);\n          setPreviewUrl(null);\n        }}\n      />\n\n      {/* 詳細パネル */}\n      <FileDetailsPanel\n        node={detailsNode}\n        provider={provider}\n        onClose={() => setDetailsNode(null)}\n      />\n    </div>\n  );\n}\n"],"mappings":"A,wgBAmDA,SAAgBgC,EAAY,CAC1B,SAAUC,EACV,UACA,cAAc,GACd,kBAAkB,OAClB,eACA,aACA,aACmB,CAEnB,GAAM,CAACC,EAAaC,IAAA,EAAkBnC,EAAAA,SAAAA,CAA0B,IAAI,EAC9D,CAACoC,EAAYC,IAAA,EAAiBrC,EAAAA,SAAAA,CAAwB,IAAI,EAC1D,CAACsC,EAAaC,IAAA,EAAkBvC,EAAAA,SAAAA,CAA0B,IAAI,EAC9DwC,GAAA,EAAkBvC,EAAAA,OAAAA,CAAO,CAAC,EAG1BwC,GAAA,EAAWvC,EAAAA,QAAAA,KAAc,CAC7B,GAAI+B,EAAc,OAAOA,EACzB,GAAIS,EAAS,OAAO,IAAIvC,EAAAA,oBAAoBuC,CAAO,EACnD,MAAU,MAAM,4DAA4D,CAC9E,EAAG,CAACT,EAAcS,CAAO,CAAC,EAEpB,CACJ,QACA,eACA,WACA,aACA,SACA,WACA,cACA,SACA,UACA,cACA,aACA,aACA,cACEtC,EAAAA,kBAAkB,CACpB,WACA,cACA,kBACA,cACF,CAAC,EAEKuC,GAAA,EAAatC,EAAAA,YAAAA,CACjB,KAAO,IAAmB,CACpBuC,EAAK,OAAS,UAAU,EAAgB,UAC5C,IAAMC,EAAM,MAAMC,EAASF,CAAI,EAC3BC,IACFV,EAAeS,CAAI,EACnBP,EAAcQ,CAAG,EACjBE,IAAaH,EAAMC,CAAG,EAE1B,EACA,CAACC,EAAUC,CAAU,CACvB,EAEMC,GAAA,EAAe3C,EAAAA,YAAAA,CACnB,KAAO,IAAmB,CACpB,QAAQ,oCAAoCuC,EAAK,KAAK,GAAG,GAC3D,MAAMK,EAAY,CAACL,EAAK,EAAE,CAAC,CAE/B,EACA,CAACK,CAAW,CACd,EAEMC,GAAA,EAAgB7C,EAAAA,YAAAA,CAAa,GAAmB,CACpDkC,EAAeK,CAAI,CACrB,EAAG,CAAC,CAAC,EAECO,GAAA,EAAe9C,EAAAA,YAAAA,CACnB,KAAO,IAAmB,CACxB,IAAM+C,EAAU,OAAO,kBAAmBR,EAAK,IAAI,EAC/CQ,GAAWA,IAAYR,EAAK,MAC9B,MAAMS,EAAWT,EAAK,GAAIQ,CAAO,CAErC,EACA,CAACC,CAAU,CACb,EAEMC,GAAA,EAAmBjD,EAAAA,YAAAA,CACvB,KAAO,IAAmB,CACxB,IAAMkD,EAAcX,EAAK,UAAU,MAAQ,GACrCY,EAAU,OAAO,gCAAiCD,CAAW,EAC/DC,IAAY,MAAQA,IAAYD,GAClC,MAAME,EAAWb,EAAK,GAAIY,CAAO,CAErC,EACA,CAACC,CAAU,CACb,EAEMC,GAAA,EAAqBrD,EAAAA,YAAAA,CAAY,SAAY,CACjD,IAAMsD,EAAO,OAAO,oBAAoB,EACpCA,IACF,MAAMlB,EAAS,aAAamB,EAAM,KAAMD,CAAI,EAC5CE,EAAQ,EAEZ,EAAG,CAACpB,EAAUmB,EAAM,KAAMC,CAAO,CAAC,EAE5BC,GAAA,EAAezD,EAAAA,YAAAA,CAAY,SAAY,CAE3C,IAAM0D,EAAQ,SAAS,cAAc,OAAO,EAC5C,EAAM,KAAO,OACb,EAAM,SAAW,GACjB,EAAM,SAAW,KAAO,IAAM,CAC5B,IAAMC,EAAS,EAAE,OAA4B,MAC7C,GAAKA,EAEL,KAAK,IAAMC,KAAQ,MAAM,KAAKD,CAAK,EACjC,MAAMvB,EAAS,WAAWmB,EAAM,KAAMK,EAAMA,EAAK,IAAI,EAEvDJ,EAAQ,CAF+C,CAGzD,EACAE,EAAM,MAAM,CACd,EAAG,CAACtB,EAAUmB,EAAM,KAAMC,CAAO,CAAC,EAE5BK,GAAA,EAAejE,EAAAA,OAAAA,CAA8G,IAAI,EACjIkE,GAAA,EAAiBlE,EAAAA,OAAAA,CAA2E,IAAI,EAgCtG,OA/BA,EAAA6B,EAAA,gBAAA,MACE,EAAe,QAAU,CAAC,WAAU,KAAM8B,EAAM,KAAM,SAAO,MAChD,CAAC,EAAe,QAAU,IAAK,GAC3C,CAACnB,EAAUmB,EAAM,KAAMC,CAAO,CAAC,GAClC,EAAA/B,EAAA,gBAAA,MACE,EAAgB,cACH,CAAC,EAAgB,SAAU,GACvC,CAACW,EAAU2B,CAAW,CAAC,GAC1B,EAAAtC,EAAA,gBAAA,KAAsB,CACpB,EAAa,QAAU,IACzB,EAAG,CAACW,EAAUmB,EAAM,KAAMA,EAAM,SAAUA,EAAM,UAAWA,EAAM,KAAK,CAAC,GAsBrE,EAAA/B,EAAA,KAAA,CAAC,MAAD,CACE,UAAW,wEAAwEwC,IADrF,SAAA,EAIE,EAAAxC,EAAA,IAAA,CAACtB,EAAAA,WAAD,CACE,KAAMqD,EAAM,KACZ,SAAUA,EAAM,SAChB,UAAWA,EAAM,UACjB,WAAY,GAAQ,CAAC,EAAgB,UAAWU,EAASC,CAAI,CAAE,EAC/D,iBAAoB,CAAC,EAAgB,UAAWC,EAAW,CAAE,EAC7D,cAAeC,EACf,UAAWZ,EACX,SAAUa,EACV,SAAUZ,EACV,eAAgBJ,CACjB,CAAA,EAGAE,EAAM,QACL,EAAA/B,EAAA,KAAA,CAACrB,EAAAA,MAAD,CAAO,QAAQ,cAAc,UAAU,MAAvC,SAAA,EACE,EAAAqB,EAAA,IAAA,CAACpB,EAAAA,YAAD,CAAa,UAAU,SAAW,CAAA,GAClC,EAAAoB,EAAA,IAAA,CAACnB,EAAAA,WAAD,CAAA,SAAY,OAAiB,CAAA,GAC7B,EAAAmB,EAAA,IAAA,CAAClB,EAAAA,iBAAD,CAAA,SAAmBiD,EAAM,KAAwB,CAAA,CAC5C,C,IAIT,EAAA/B,EAAA,IAAA,CAACjB,EAAAA,YAAD,CAAa,gBAhD8C,CAC7D,EAAa,QAAU,CAAC,WAAU,KAAMgD,EAAM,KAAM,SAAUA,EAAM,SAAU,gBAAiBpB,EAAgB,OAAO,CACxH,EA8C+C,UAAW,MA7CE,EAAO,IAAY,CAC7E,IAAMmC,EAAWT,EAAa,QAC9B,EAAa,QAAU,KACvB,GAAM,CAAC,SAAQ,UAAUU,EAAM,UAE/B,GADI,CAACD,GAAYA,EAAS,kBAAoBnC,EAAgB,SAAWmC,EAAS,WAAalC,GAAYkC,EAAS,OAASf,EAAM,MAAQe,EAAS,WAAaf,EAAM,UAAYA,EAAM,WACrL,CAACiB,GAAU,CAACC,GAAUC,EAAQ,SAAS,WAAW,IAAIF,EAAO,EAAE,IAAMA,GAAUE,EAAQ,SAAS,WAAW,IAAID,EAAO,EAAE,IAAMA,EAAQ,OAC1I,IAAME,EAAO1E,EAAAA,gBAAgBsE,EAAOhB,EAAM,KAAK,EAC/C,GAAKoB,EACL,GAAI,CACF,MAAMvC,EAAS,SAASuC,EAAK,OAAQA,EAAK,UAAU,EACpD,IAAMC,EAAUd,EAAe,QAC3Bc,GAAS,WAAaxC,GAAYwC,EAAQ,OAASN,EAAS,MAAQnC,EAAgB,UAAYmC,EAAS,iBAAiBM,EAAQ,QAAQ,CAChJ,OAASC,EAAO,CACd,MAAMA,aAAiB,MAAQA,EAAM,QAAU,qBAAqB,CACtE,CACF,EA+BM,UAAA,EAAArD,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCACZ,SAAA+B,EAAM,WAAaA,EAAM,MAAM,SAAW,GACzC,EAAA/B,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0CACb,UAAA,EAAAA,EAAA,IAAA,CAAChB,EAAAA,QAAD,CAAS,UAAU,4CAA8C,CAAA,CAC9D,CAAA,GAEL,EAAAgB,EAAA,IAAA,CAAAf,EAAAA,SAAA,CAAA,SACG8C,EAAM,WAAa,QAClB,EAAA/B,EAAA,IAAA,CAACd,EAAAA,aAAD,CACE,MAAO6C,EAAM,MACb,YAAaA,EAAM,YACL,eACd,SAAUuB,EACV,OAAQxC,EACR,SAAUK,EACV,UAAWE,EACX,SAAUC,EACV,aAAcG,EACd,SAAW,GAAS,KAAK8B,EAAWxC,EAAK,EAAE,CAC5C,CAAA,GAED,EAAAf,EAAA,IAAA,CAACb,EAAAA,aAAD,CACE,MAAO4C,EAAM,MACb,YAAaA,EAAM,YACL,eACd,SAAUuB,EACV,OAAQxC,EACR,SAAUK,EACV,UAAWE,EACX,SAAUC,EACV,aAAcG,EACd,SAAW,GAAS,KAAK8B,EAAWxC,EAAK,EAAE,CAC5C,CAAA,CAEH,CAAA,CAED,CAAA,CACM,CAAA,GAGb,EAAAf,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uGAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAAC,OAAD,CAAA,SAAA,CAAO+B,EAAM,MAAM,OAAO,QAAY,CAAA,CAAA,EACrCA,EAAM,YAAY,OAAS,IAC1B,EAAA/B,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,2BAAhB,SAAA,CAA4C+B,EAAM,YAAY,OAAO,WAAe,CAEnF,CAAA,CAAA,CACL,CAAA,GAAA,EAAA/B,EAAA,IAAA,CAAC,MAAD,CAAA,SAAM+B,EAAM,MAAQ,MAAY,CAAA,CAC7B,C,IAGL,EAAA/B,EAAA,IAAA,CAACZ,EAAAA,YAAD,CACE,KAAMiB,EACN,IAAKE,EACL,YAAe,CACbD,EAAe,IAAI,EACnBE,EAAc,IAAI,CACpB,CACD,CAAA,GAGD,EAAAR,EAAA,IAAA,CAACX,EAAAA,iBAAD,CACE,KAAMoB,EACI,WACV,YAAeC,EAAe,IAAI,CACnC,CAAA,CACE,C,EAET,C"}

package/dist/tools/components/file-browser/FileBrowser.d.cts

@@ -17,9 +17,22 @@ export interface FileBrowserProps {
     className?: string;
 }
 /**
- * 高機能ファイルブラウザコンポーネント
- *
- * S3, R2, OCI などのオブジェクトストレージをエクスプローラー形式で表示・操作します。
- * DBテーブル管理 + UUIDファイル名といった複雑な構成にも FileProvider を通じて対応可能です。
+ * Browse files through a host-supplied FileProvider or wrapped StorageAdapter.
+ * @param props - Provider (preferred), optional adapter, initial path (default empty),
+ * initial view mode (default grid), grouping axis, open callback and presentation.
+ * @returns The browser, native drag boundary and preview/detail surfaces.
+ * @throws An Error during rendering when neither provider nor adapter is supplied.
+ * @remarks Hosts authorize storage access. A drop moves one currently listed file
+ * into a registered folder, awaits moveNode and then refreshes the current relevant
+ * view. Canceled/stale drops do not write; navigation does not undo a write already
+ * in flight. Import Appkit CSS once; this component owns its native drag provider.
+ * @example
+ * ```tsx
+ * import {FileBrowser, type FileProvider} from '@alneas/appkit-react/tools/file-browser';
+ * import '@alneas/appkit-react/styles';
+ * export function Files({provider}: {provider: FileProvider}) {
+ *   return <div style={{height: 500}}><FileBrowser provider={provider} /></div>;
+ * }
+ * ```
  */
 export declare function FileBrowser({ provider: propProvider, adapter, initialPath, initialViewMode, groupingAxis, onOpenFile, className, }: FileBrowserProps): import('react').JSX.Element;

package/dist/tools/components/file-browser/FileBrowser.d.ts

@@ -17,9 +17,22 @@ export interface FileBrowserProps {
     className?: string;
 }
 /**
- * 高機能ファイルブラウザコンポーネント
- *
- * S3, R2, OCI などのオブジェクトストレージをエクスプローラー形式で表示・操作します。
- * DBテーブル管理 + UUIDファイル名といった複雑な構成にも FileProvider を通じて対応可能です。
+ * Browse files through a host-supplied FileProvider or wrapped StorageAdapter.
+ * @param props - Provider (preferred), optional adapter, initial path (default empty),
+ * initial view mode (default grid), grouping axis, open callback and presentation.
+ * @returns The browser, native drag boundary and preview/detail surfaces.
+ * @throws An Error during rendering when neither provider nor adapter is supplied.
+ * @remarks Hosts authorize storage access. A drop moves one currently listed file
+ * into a registered folder, awaits moveNode and then refreshes the current relevant
+ * view. Canceled/stale drops do not write; navigation does not undo a write already
+ * in flight. Import Appkit CSS once; this component owns its native drag provider.
+ * @example
+ * ```tsx
+ * import {FileBrowser, type FileProvider} from '@alneas/appkit-react/tools/file-browser';
+ * import '@alneas/appkit-react/styles';
+ * export function Files({provider}: {provider: FileProvider}) {
+ *   return <div style={{height: 500}}><FileBrowser provider={provider} /></div>;
+ * }
+ * ```
  */
 export declare function FileBrowser({ provider: propProvider, adapter, initialPath, initialViewMode, groupingAxis, onOpenFile, className, }: FileBrowserProps): import('react').JSX.Element;