@burdenoff/microfe-tours 2026.624.1 → 2026.625.2

package/dist/tours/pages/TourPreviewPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourPreviewPage.js","names":[],"sources":["../../../src/tours/pages/TourPreviewPage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ChevronLeft,\n  ChevronRight,\n  X,\n  Smartphone,\n  Tablet,\n  Monitor,\n  CheckCircle,\n  AlertCircle,\n} from 'lucide-react';\nimport { useTourPreview } from '../hooks/useTourPreview';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursStore } from '../store/toursStore';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Tour preview page\n * Preview tour with device simulation and validation\n */\nexport function TourPreviewPage() {\n  const { tr } = useToursI18n();\n  const { tourId } = useParams();\n  const navigate = useNavigate();\n  const { basePath = '/' } = useToursContext();\n  const { hasPermission } = useToursPermissionAccess();\n  const canReadTour = hasPermission(TOUR_PERMISSIONS.TOUR_READ);\n  const { tour, loadTour } = useTourBuilder(tourId);\n  const { devicePreview } = useToursStore();\n\n  const {\n    isPreviewActive,\n    currentStepIndex,\n    currentStep,\n    totalSteps,\n    canGoNext,\n    canGoPrevious,\n    validationResults,\n    startPreview,\n    stopPreview,\n    nextStep,\n    previousStep,\n    changeDevice,\n    validateForPreview,\n  } = useTourPreview(tour || undefined);\n\n  useEffect(() => {\n    if (tourId) {\n      loadTour(tourId);\n    }\n  }, [tourId, loadTour]);\n\n  useEffect(() => {\n    if (tour) {\n      validateForPreview();\n    }\n  }, [tour, devicePreview, validateForPreview]);\n\n  if (!canReadTour) {\n    return (\n      <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('tourPreview.accessDeniedTitle')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">{tr('tourPreview.accessDeniedMessage')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!tour) {\n    return (\n      <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n        <p className=\"text-text-secondary\">{tr('tourPreview.loading')}</p>\n      </div>\n    );\n  }\n\n  const handleBack = () => {\n    navigate(`${basePath}/${tourId}/edit`);\n  };\n\n  const deviceIcons = {\n    mobile: <Smartphone size={20} />,\n    tablet: <Tablet size={20} />,\n    desktop: <Monitor size={20} />,\n  };\n\n  return (\n    <div className=\"flex flex-col h-screen bg-bg-sunken\">\n      {/* Header */}\n      <div className=\"border-b border-border-subtle bg-bg-surface p-3 sm:p-4 flex flex-wrap items-center gap-3 sm:gap-4\">\n        <button\n          type=\"button\"\n          onClick={handleBack}\n          className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n          aria-label={tr('tourBuilder.goBack')}\n        >\n          <ArrowLeft size={20} />\n        </button>\n        <div className=\"flex-1 min-w-[12rem]\">\n          <h1 className=\"text-base sm:text-lg font-semibold truncate\">\n            {tour?.name} - {tr('tourPreview.previewSuffix')}\n          </h1>\n          {isPreviewActive && (\n            <p className=\"text-sm text-text-secondary\">\n              {tr('tourPreview.stepOf')} {currentStepIndex + 1} {tr('tourPreview.stepOfConnector')}{' '}\n              {totalSteps}\n            </p>\n          )}\n        </div>\n\n        {/* Device Selector */}\n        <div className=\"flex gap-2 border border-border-subtle rounded-md overflow-hidden\">\n          {(['mobile', 'tablet', 'desktop'] as const).map((device) => (\n            <button\n              type=\"button\"\n              key={device}\n              onClick={() => changeDevice(device)}\n              className={`px-3 py-2 min-h-[44px] min-w-[44px] ${\n                devicePreview === device\n                  ? 'bg-action-primary-bg text-action-primary-text'\n                  : 'bg-bg-surface hover:bg-accent'\n              }`}\n              title={\n                device === 'mobile'\n                  ? tr('tourPreview.deviceMobile')\n                  : device === 'tablet'\n                    ? tr('tourPreview.deviceTablet')\n                    : tr('tourPreview.deviceDesktop')\n              }\n              aria-label={\n                device === 'mobile'\n                  ? tr('tourPreview.deviceMobile')\n                  : device === 'tablet'\n                    ? tr('tourPreview.deviceTablet')\n                    : tr('tourPreview.deviceDesktop')\n              }\n            >\n              {deviceIcons[device]}\n            </button>\n          ))}\n        </div>\n\n        {/* Preview Controls */}\n        {!isPreviewActive ? (\n          <button\n            type=\"button\"\n            onClick={startPreview}\n            disabled={!validationResults?.valid}\n            className=\"px-4 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50\"\n          >\n            {tr('tourPreview.startPreview')}\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={stopPreview}\n            className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent flex items-center gap-2\"\n          >\n            <X size={20} />\n            {tr('tourPreview.stopPreview')}\n          </button>\n        )}\n      </div>\n\n      {/* Validation Results */}\n      {validationResults && !validationResults.valid && (\n        <div className=\"bg-status-error-bg/10 border-b border-status-error-border px-3 sm:px-6 py-3\">\n          <div className=\"flex items-start gap-3\">\n            <AlertCircle className=\"text-status-error-text flex-shrink-0 mt-0.5\" size={20} />\n            <div className=\"flex-1\">\n              <h3 className=\"font-semibold text-status-error-text mb-1\">\n                {tr('tourPreview.validationErrorsTitle')}\n              </h3>\n              <ul className=\"list-disc list-inside space-y-1\">\n                {validationResults.errors.map((error) => (\n                  <li key={error} className=\"text-sm text-status-error-text\">\n                    {error}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Warnings */}\n      {validationResults && validationResults.warnings.length > 0 && (\n        <div className=\"bg-warning/10 border-b border-warning px-3 sm:px-6 py-3\">\n          <div className=\"flex items-start gap-3\">\n            <AlertCircle className=\"text-warning flex-shrink-0 mt-0.5\" size={20} />\n            <div className=\"flex-1\">\n              <h3 className=\"font-semibold text-warning mb-1\">{tr('tourPreview.warningsTitle')}</h3>\n              <ul className=\"list-disc list-inside space-y-1\">\n                {validationResults.warnings.map((warning) => (\n                  <li key={warning} className=\"text-sm text-warning\">\n                    {warning}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Preview Area */}\n      <div className=\"flex-1 flex items-center justify-center p-3 sm:p-6 overflow-auto\">\n        <div\n          className={`bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${\n            devicePreview === 'mobile'\n              ? 'w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full'\n              : devicePreview === 'tablet'\n                ? 'w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full'\n                : 'w-full max-w-[1920px] h-full max-h-[1080px]'\n          }`}\n        >\n          {isPreviewActive && currentStep ? (\n            <div className=\"h-full flex flex-col items-center justify-center p-4 sm:p-8\">\n              {/* Simulated Tour Tooltip */}\n              <div className=\"max-w-md border border-border-subtle rounded-lg shadow-lg bg-bg-surface p-4 sm:p-6\">\n                <h3 className=\"text-lg font-semibold mb-3\">{currentStep.title}</h3>\n                <p className=\"text-sm text-text-secondary mb-4 whitespace-pre-wrap\">\n                  {currentStep.content}\n                </p>\n                <div className=\"flex gap-2\">\n                  <button\n                    type=\"button\"\n                    onClick={previousStep}\n                    disabled={!canGoPrevious}\n                    className=\"px-3 py-2 min-h-[44px] min-w-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed\"\n                    aria-label={tr('tourPreview.previous')}\n                  >\n                    <ChevronLeft size={16} />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={nextStep}\n                    disabled={!canGoNext}\n                    className=\"flex-1 px-3 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed\"\n                  >\n                    {canGoNext ? tr('tourPreview.next') : tr('tourPreview.finish')}\n                  </button>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"h-full flex items-center justify-center text-text-secondary\">\n              <div className=\"text-center\">\n                <CheckCircle className=\"mx-auto mb-4\" size={48} />\n                <p className=\"mb-2\">{tr('tourPreview.readyTitle')}</p>\n                <p className=\"text-sm\">{tr('tourPreview.readyHint')}</p>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Footer Controls */}\n      {isPreviewActive && (\n        <div className=\"border-t border-border-subtle bg-bg-surface p-3 sm:p-4 flex items-center justify-center gap-3 sm:gap-4\">\n          <button\n            type=\"button\"\n            onClick={previousStep}\n            disabled={!canGoPrevious}\n            className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n          >\n            <ChevronLeft size={20} />\n            {tr('tourPreview.previous')}\n          </button>\n          <div className=\"text-sm text-text-secondary\">\n            {currentStepIndex + 1} / {totalSteps}\n          </div>\n          <button\n            type=\"button\"\n            onClick={nextStep}\n            disabled={!canGoNext}\n            className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n          >\n            {tr('tourPreview.nextFooter')}\n            <ChevronRight size={20} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TourPreviewPage.js","names":[],"sources":["../../../src/tours/pages/TourPreviewPage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ChevronLeft,\n  ChevronRight,\n  X,\n  Smartphone,\n  Tablet,\n  Monitor,\n  CheckCircle,\n  AlertCircle,\n} from 'lucide-react';\nimport { Button, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useTourPreview } from '../hooks/useTourPreview';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursStore } from '../store/toursStore';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Tour preview page\n * Preview tour with device simulation and validation\n */\nexport function TourPreviewPage() {\n  const { tr } = useToursI18n();\n  const { tourId } = useParams();\n  const navigate = useNavigate();\n  const { basePath = '/' } = useToursContext();\n  const { hasPermission } = useToursPermissionAccess();\n  const canReadTour = hasPermission(TOUR_PERMISSIONS.TOUR_READ);\n  const { tour, loadTour } = useTourBuilder(tourId);\n  const { devicePreview } = useToursStore();\n\n  const {\n    isPreviewActive,\n    currentStepIndex,\n    currentStep,\n    totalSteps,\n    canGoNext,\n    canGoPrevious,\n    validationResults,\n    startPreview,\n    stopPreview,\n    nextStep,\n    previousStep,\n    changeDevice,\n    validateForPreview,\n  } = useTourPreview(tour || undefined);\n\n  useEffect(() => {\n    if (tourId) {\n      loadTour(tourId);\n    }\n  }, [tourId, loadTour]);\n\n  useEffect(() => {\n    if (tour) {\n      validateForPreview();\n    }\n  }, [tour, devicePreview, validateForPreview]);\n\n  if (!canReadTour) {\n    return (\n      <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('tourPreview.accessDeniedTitle')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">{tr('tourPreview.accessDeniedMessage')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!tour) {\n    return (\n      <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n        <p className=\"text-text-secondary\">{tr('tourPreview.loading')}</p>\n      </div>\n    );\n  }\n\n  const handleBack = () => {\n    navigate(`${basePath}/${tourId}/edit`);\n  };\n\n  const deviceIcons = {\n    mobile: <Smartphone size={20} />,\n    tablet: <Tablet size={20} />,\n    desktop: <Monitor size={20} />,\n  };\n\n  return (\n    <div className=\"flex flex-col h-screen bg-bg-sunken\">\n      {/* Header */}\n      <div className=\"border-b border-border-subtle bg-bg-surface p-3 sm:p-4 flex flex-wrap items-center gap-3 sm:gap-4\">\n        <button\n          type=\"button\"\n          onClick={handleBack}\n          className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n          aria-label={tr('tourBuilder.goBack')}\n        >\n          <ArrowLeft size={20} />\n        </button>\n        <div className=\"flex-1 min-w-[12rem]\">\n          <h1 className=\"text-base sm:text-lg font-semibold truncate\">\n            {tour?.name} - {tr('tourPreview.previewSuffix')}\n          </h1>\n          {isPreviewActive && (\n            <p className=\"text-sm text-text-secondary\">\n              {tr('tourPreview.stepOf')} {currentStepIndex + 1} {tr('tourPreview.stepOfConnector')}{' '}\n              {totalSteps}\n            </p>\n          )}\n        </div>\n\n        {/* Device Selector */}\n        <div className=\"flex gap-2 border border-border-subtle rounded-md overflow-hidden\">\n          {(['mobile', 'tablet', 'desktop'] as const).map((device) => (\n            <button\n              type=\"button\"\n              key={device}\n              onClick={() => changeDevice(device)}\n              className={`px-3 py-2 min-h-[44px] min-w-[44px] ${\n                devicePreview === device\n                  ? 'bg-action-primary-bg text-action-primary-text'\n                  : 'bg-bg-surface hover:bg-accent'\n              }`}\n              title={\n                device === 'mobile'\n                  ? tr('tourPreview.deviceMobile')\n                  : device === 'tablet'\n                    ? tr('tourPreview.deviceTablet')\n                    : tr('tourPreview.deviceDesktop')\n              }\n              aria-label={\n                device === 'mobile'\n                  ? tr('tourPreview.deviceMobile')\n                  : device === 'tablet'\n                    ? tr('tourPreview.deviceTablet')\n                    : tr('tourPreview.deviceDesktop')\n              }\n            >\n              {deviceIcons[device]}\n            </button>\n          ))}\n        </div>\n\n        {/* Preview Controls */}\n        {!isPreviewActive ? (\n          <Button\n            type=\"button\"\n            onClick={startPreview}\n            disabled={!validationResults?.valid}\n            className=\"min-h-[44px]\"\n          >\n            {tr('tourPreview.startPreview')}\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={stopPreview}\n            className=\"min-h-[44px]\"\n          >\n            <X size={20} />\n            {tr('tourPreview.stopPreview')}\n          </Button>\n        )}\n      </div>\n\n      {/* Validation Results */}\n      {validationResults && !validationResults.valid && (\n        <div className=\"bg-status-error-bg/10 border-b border-status-error-border px-3 sm:px-6 py-3\">\n          <div className=\"flex items-start gap-3\">\n            <AlertCircle className=\"text-status-error-text flex-shrink-0 mt-0.5\" size={20} />\n            <div className=\"flex-1\">\n              <h3 className=\"font-semibold text-status-error-text mb-1\">\n                {tr('tourPreview.validationErrorsTitle')}\n              </h3>\n              <ul className=\"list-disc list-inside space-y-1\">\n                {validationResults.errors.map((error) => (\n                  <li key={error} className=\"text-sm text-status-error-text\">\n                    {error}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Warnings */}\n      {validationResults && validationResults.warnings.length > 0 && (\n        <div className=\"bg-warning/10 border-b border-warning px-3 sm:px-6 py-3\">\n          <div className=\"flex items-start gap-3\">\n            <AlertCircle className=\"text-warning flex-shrink-0 mt-0.5\" size={20} />\n            <div className=\"flex-1\">\n              <h3 className=\"font-semibold text-warning mb-1\">{tr('tourPreview.warningsTitle')}</h3>\n              <ul className=\"list-disc list-inside space-y-1\">\n                {validationResults.warnings.map((warning) => (\n                  <li key={warning} className=\"text-sm text-warning\">\n                    {warning}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Preview Area */}\n      <div className=\"flex-1 flex items-center justify-center p-3 sm:p-6 overflow-auto\">\n        <div\n          className={`bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${\n            devicePreview === 'mobile'\n              ? 'w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full'\n              : devicePreview === 'tablet'\n                ? 'w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full'\n                : 'w-full max-w-[1920px] h-full max-h-[1080px]'\n          }`}\n        >\n          {isPreviewActive && currentStep ? (\n            <div className=\"h-full flex flex-col items-center justify-center p-4 sm:p-8\">\n              {/* Simulated Tour Tooltip */}\n              <GlassCard\n                treatment=\"glass\"\n                className=\"max-w-md border-border-seam p-4 sm:p-6 shadow-[var(--shadow-pop)]\"\n              >\n                <h3 className=\"text-lg font-semibold mb-3\">{currentStep.title}</h3>\n                <p className=\"text-sm text-text-secondary mb-4 whitespace-pre-wrap\">\n                  {currentStep.content}\n                </p>\n                <div className=\"flex gap-2\">\n                  <button\n                    type=\"button\"\n                    onClick={previousStep}\n                    disabled={!canGoPrevious}\n                    className=\"px-3 py-2 min-h-[44px] min-w-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed\"\n                    aria-label={tr('tourPreview.previous')}\n                  >\n                    <ChevronLeft size={16} />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={nextStep}\n                    disabled={!canGoNext}\n                    className=\"flex-1 px-3 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed\"\n                  >\n                    {canGoNext ? tr('tourPreview.next') : tr('tourPreview.finish')}\n                  </button>\n                </div>\n              </GlassCard>\n            </div>\n          ) : (\n            <div className=\"h-full flex items-center justify-center text-text-secondary\">\n              <div className=\"text-center\">\n                <CheckCircle className=\"mx-auto mb-4\" size={48} />\n                <p className=\"mb-2\">{tr('tourPreview.readyTitle')}</p>\n                <p className=\"text-sm\">{tr('tourPreview.readyHint')}</p>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Footer Controls */}\n      {isPreviewActive && (\n        <div className=\"border-t border-border-subtle bg-bg-surface p-3 sm:p-4 flex items-center justify-center gap-3 sm:gap-4\">\n          <button\n            type=\"button\"\n            onClick={previousStep}\n            disabled={!canGoPrevious}\n            className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n          >\n            <ChevronLeft size={20} />\n            {tr('tourPreview.previous')}\n          </button>\n          <div className=\"text-sm text-text-secondary\">\n            {currentStepIndex + 1} / {totalSteps}\n          </div>\n          <button\n            type=\"button\"\n            onClick={nextStep}\n            disabled={!canGoNext}\n            className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n          >\n            {tr('tourPreview.nextFooter')}\n            <ChevronRight size={20} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/ToursListPage.js

@@ -6,322 +6,285 @@ import { useTourLifecycle as i } from "../hooks/useTourLifecycle.js";
 import { useToursPermissionAccess as a } from "../hooks/useToursPermissionAccess.js";
 import { TOUR_PERMISSIONS as o } from "../../constants/permissions.js";
 import { useToursI18n as s } from "../i18n.js";
-import { isNative as c, nativeConfirm as l, nativeImpact as u, nativeNotify as d, nativeToast as f } from "../../utils/nativeBridge.js";
-import { useEffect as p, useRef as m, useState as h } from "react";
-import { PermissionGate as g } from "@burdenoff/fe-libs/shared/components";
-import { Eye as _, Grid as v, List as ee, ListOrdered as te, MoreVertical as ne, Plus as re, Search as y, Settings as b } from "lucide-react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { useNavigate as C } from "react-router-dom";
+import { isNative as c, nativeConfirm as ee, nativeImpact as l, nativeNotify as u, nativeToast as d } from "../../utils/nativeBridge.js";
+import { useEffect as f, useState as p } from "react";
+import { PermissionGate as m } from "@burdenoff/fe-libs/shared/components";
+import { Eye as h, Grid as g, List as _, ListOrdered as v, Plus as y, Search as b, Settings as x } from "lucide-react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useNavigate as w } from "react-router-dom";
+import { AuroraBackground as T, Button as E, CTAOverflowMenu as D, GlassCard as O, GradientText as k, IllustratedEmptyState as A } from "@burdenoff/fe-libs/ui";
 //#region src/tours/pages/ToursListPage.tsx
-function w() {
-	let { tr: w } = s(), T = C(), { basePath: E = "/" } = e(), { viewMode: D, tourFilter: O, toursListRevision: k, setViewMode: A, updateTourFilter: j, notifyToursListChanged: M } = t(), { hasPermission: N, isLoading: P } = a(), F = N(o.TOUR_UPDATE), I = N(o.TOUR_STEP_UPDATE), L = N(o.TOUR_READ), R = N(o.TOUR_DELETE), z = N(o.TOUR_PUBLISH), B = N(o.TOUR_ARCHIVE), V = N(o.TOUR_DUPLICATE), { tours: H, loading: U, fetchTours: W } = r(), { publishTour: G, unpublishTour: ie, archiveTour: K, duplicateTour: q } = i(), [J] = n(), [Y, ae] = h(""), [oe, se] = h("all"), [X, Z] = h(null), Q = m(null);
-	p(() => {
-		P || W({ ...O });
+function j() {
+	let { tr: j } = s(), M = w(), { basePath: N = "/" } = e(), { viewMode: P, tourFilter: F, toursListRevision: I, setViewMode: L, updateTourFilter: R, notifyToursListChanged: z } = t(), { hasPermission: B, isLoading: V } = a(), H = B(o.TOUR_UPDATE), U = B(o.TOUR_STEP_UPDATE), W = B(o.TOUR_READ), G = B(o.TOUR_DELETE), K = B(o.TOUR_PUBLISH), te = B(o.TOUR_ARCHIVE), q = B(o.TOUR_DUPLICATE), { tours: J, loading: Y, fetchTours: X } = r(), { publishTour: Z, unpublishTour: Q, archiveTour: ne, duplicateTour: re } = i(), [ie] = n(), [ae, oe] = p(""), [se, ce] = p("all");
+	f(() => {
+		V || X({ ...F });
 	}, [
-		W,
-		O,
-		k,
-		P
+		X,
+		F,
+		I,
+		V
 	]);
-	let ce = (e) => {
-		ae(e), j({ search: e });
-	}, le = (e) => {
-		se(e), j({ status: e });
-	}, ue = () => {
-		T(E.endsWith("/") ? `${E}new` : `${E}/new`);
-	}, $ = (e) => {
+	let le = (e) => {
+		oe(e), R({ search: e });
+	}, ue = (e) => {
+		ce(e), R({ status: e });
+	}, $ = () => {
+		M(N.endsWith("/") ? `${N}new` : `${N}/new`);
+	}, de = (e) => {
 		switch (e) {
-			case "DRAFT": return w("toursList.statusDraft");
-			case "PUBLISHED": return w("toursList.statusPublished");
-			case "ARCHIVED": return w("toursList.statusArchived");
-			case "SCHEDULED": return w("toursList.statusScheduled");
-		}
-	}, de = async (e) => {
-		Z(null), u("light");
-		try {
-			await G(e), d("success");
-		} catch {
-			d("error"), c() ? f(w("toursList.errorPublish")) : alert(w("toursList.errorPublish"));
+			case "DRAFT": return j("toursList.statusDraft");
+			case "PUBLISHED": return j("toursList.statusPublished");
+			case "ARCHIVED": return j("toursList.statusArchived");
+			case "SCHEDULED": return j("toursList.statusScheduled");
 		}
 	}, fe = async (e) => {
-		Z(null), u("light");
+		l("light");
 		try {
-			await ie(e), d("success");
+			await Z(e), u("success");
 		} catch {
-			d("error"), c() ? f(w("toursList.errorUnpublish")) : alert(w("toursList.errorUnpublish"));
+			u("error"), c() ? d(j("toursList.errorPublish")) : alert(j("toursList.errorPublish"));
 		}
 	}, pe = async (e) => {
-		Z(null), u("light");
+		l("light");
 		try {
-			await K(e), d("success");
+			await Q(e), u("success");
 		} catch {
-			d("error"), c() ? f(w("toursList.errorArchive")) : alert(w("toursList.errorArchive"));
+			u("error"), c() ? d(j("toursList.errorUnpublish")) : alert(j("toursList.errorUnpublish"));
 		}
 	}, me = async (e) => {
-		Z(null), u("light");
+		l("light");
 		try {
-			await q(e), d("success");
+			await ne(e), u("success");
 		} catch {
-			d("error"), c() ? f(w("toursList.errorDuplicate")) : alert(w("toursList.errorDuplicate"));
+			u("error"), c() ? d(j("toursList.errorArchive")) : alert(j("toursList.errorArchive"));
 		}
 	}, he = async (e) => {
-		Z(null), u("medium");
-		let t = w("toursList.confirmDelete"), n = await l({
-			title: w("toursList.actionDelete"),
+		l("light");
+		try {
+			await re(e), u("success");
+		} catch {
+			u("error"), c() ? d(j("toursList.errorDuplicate")) : alert(j("toursList.errorDuplicate"));
+		}
+	}, ge = async (e) => {
+		l("medium");
+		let t = j("toursList.confirmDelete"), n = await ee({
+			title: j("toursList.actionDelete"),
 			message: t,
-			okButtonTitle: w("toursList.actionDelete")
+			okButtonTitle: j("toursList.actionDelete")
 		});
 		if (n === null ? window.confirm(t) : n) try {
-			await J({ variables: { id: e } }), M(), d("success");
+			await ie({ variables: { id: e } }), z(), u("success");
 		} catch {
-			d("error"), c() ? f(w("toursList.errorDelete")) : alert(w("toursList.errorDelete"));
+			u("error"), c() ? d(j("toursList.errorDelete")) : alert(j("toursList.errorDelete"));
 		}
 	};
-	return p(() => {
-		let e = (e) => {
-			Q.current && !Q.current.contains(e.target) && Z(null);
-		};
-		return X && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [X]), /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ C("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [
-			/* @__PURE__ */ S("div", {
-				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3",
-				children: [/* @__PURE__ */ S("div", {
-					className: "flex-1 min-w-0",
-					children: [/* @__PURE__ */ x("h1", {
-						className: "text-xl sm:text-2xl font-bold text-text-primary",
-						children: w("toursList.title")
-					}), /* @__PURE__ */ x("p", {
-						className: "text-sm sm:text-base text-text-secondary",
-						children: w("toursList.subtitle")
+			/* @__PURE__ */ C("div", {
+				className: "relative overflow-hidden rounded-xl",
+				children: [/* @__PURE__ */ S(T, { intensity: "subtle" }), /* @__PURE__ */ C("div", {
+					className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-1 sm:p-2",
+					children: [/* @__PURE__ */ C("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ S("h1", {
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
+							children: /* @__PURE__ */ S(k, { children: j("toursList.title") })
+						}), /* @__PURE__ */ S("p", {
+							className: "text-sm sm:text-base text-text-secondary",
+							children: j("toursList.subtitle")
+						})]
+					}), /* @__PURE__ */ S(m, {
+						permission: o.TOUR_CREATE,
+						children: /* @__PURE__ */ C(E, {
+							type: "button",
+							onClick: $,
+							className: "w-full sm:w-auto min-h-[44px]",
+							children: [/* @__PURE__ */ S(y, { size: 20 }), j("toursList.createTour")]
+						})
 					})]
-				}), /* @__PURE__ */ x(g, {
-					permission: o.TOUR_CREATE,
-					children: /* @__PURE__ */ S("button", {
-						type: "button",
-						onClick: ue,
-						className: "w-full sm:w-auto px-4 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 active:bg-action-primary-bg/80 flex items-center justify-center gap-2",
-						children: [/* @__PURE__ */ x(re, { size: 20 }), w("toursList.createTour")]
-					})
 				})]
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex flex-col sm:flex-row gap-3 sm:gap-4",
-				children: [/* @__PURE__ */ S("div", {
+				children: [/* @__PURE__ */ C("div", {
 					className: "flex-1 relative",
-					children: [/* @__PURE__ */ x(y, {
+					children: [/* @__PURE__ */ S(b, {
 						className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary",
 						size: 20
-					}), /* @__PURE__ */ x("input", {
+					}), /* @__PURE__ */ S("input", {
 						type: "text",
-						placeholder: w("toursList.searchPlaceholder"),
-						value: Y,
-						onChange: (e) => ce(e.target.value),
+						placeholder: j("toursList.searchPlaceholder"),
+						value: ae,
+						onChange: (e) => le(e.target.value),
 						className: "w-full pl-[3.25rem] pr-4 py-2 min-h-[44px] border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-						"aria-label": w("toursList.searchPlaceholder")
+						"aria-label": j("toursList.searchPlaceholder")
 					})]
-				}), /* @__PURE__ */ S("div", {
+				}), /* @__PURE__ */ C("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ S("select", {
-						value: oe,
-						onChange: (e) => le(e.target.value),
+					children: [/* @__PURE__ */ C("select", {
+						value: se,
+						onChange: (e) => ue(e.target.value),
 						className: "px-4 py-2 min-h-[44px] border border-border-subtle rounded-md bg-bg-surface text-text-primary",
-						"aria-label": w("toursList.statusAll"),
+						"aria-label": j("toursList.statusAll"),
 						children: [
-							/* @__PURE__ */ x("option", {
+							/* @__PURE__ */ S("option", {
 								value: "all",
-								children: w("toursList.statusAll")
+								children: j("toursList.statusAll")
 							}),
-							/* @__PURE__ */ x("option", {
+							/* @__PURE__ */ S("option", {
 								value: "DRAFT",
-								children: w("toursList.statusDraft")
+								children: j("toursList.statusDraft")
 							}),
-							/* @__PURE__ */ x("option", {
+							/* @__PURE__ */ S("option", {
 								value: "PUBLISHED",
-								children: w("toursList.statusPublished")
+								children: j("toursList.statusPublished")
 							}),
-							/* @__PURE__ */ x("option", {
+							/* @__PURE__ */ S("option", {
 								value: "ARCHIVED",
-								children: w("toursList.statusArchived")
+								children: j("toursList.statusArchived")
 							}),
-							/* @__PURE__ */ x("option", {
+							/* @__PURE__ */ S("option", {
 								value: "SCHEDULED",
-								children: w("toursList.statusScheduled")
+								children: j("toursList.statusScheduled")
 							})
 						]
-					}), /* @__PURE__ */ S("div", {
+					}), /* @__PURE__ */ C("div", {
 						className: "flex border border-border-subtle rounded-md overflow-hidden",
-						children: [/* @__PURE__ */ x("button", {
+						children: [/* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => A("grid"),
-							className: `px-3 py-2 min-h-[44px] ${D === "grid" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface text-text-primary hover:bg-accent"}`,
-							"aria-label": w("toursList.gridView"),
-							title: w("toursList.gridView"),
-							children: /* @__PURE__ */ x(v, { size: 20 })
-						}), /* @__PURE__ */ x("button", {
+							onClick: () => L("grid"),
+							className: `px-3 py-2 min-h-[44px] ${P === "grid" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface text-text-primary hover:bg-accent"}`,
+							"aria-label": j("toursList.gridView"),
+							title: j("toursList.gridView"),
+							children: /* @__PURE__ */ S(g, { size: 20 })
+						}), /* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => A("list"),
-							className: `px-3 py-2 min-h-[44px] ${D === "list" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface text-text-primary hover:bg-accent"}`,
-							"aria-label": w("toursList.listView"),
-							title: w("toursList.listView"),
-							children: /* @__PURE__ */ x(ee, { size: 20 })
+							onClick: () => L("list"),
+							className: `px-3 py-2 min-h-[44px] ${P === "list" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface text-text-primary hover:bg-accent"}`,
+							"aria-label": j("toursList.listView"),
+							title: j("toursList.listView"),
+							children: /* @__PURE__ */ S(_, { size: 20 })
 						})]
 					})]
 				})]
 			}),
-			U ? /* @__PURE__ */ x("div", {
+			Y ? /* @__PURE__ */ S("div", {
 				className: "text-center py-12",
-				children: /* @__PURE__ */ x("p", {
+				children: /* @__PURE__ */ S("p", {
 					className: "text-sm sm:text-base text-text-secondary",
-					children: w("toursList.loading")
+					children: j("toursList.loading")
 				})
-			}) : H.length > 0 ? /* @__PURE__ */ x("div", {
-				className: D === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4" : "space-y-3",
-				children: H.map((e) => {
-					let t = e.status, n = t === "DRAFT" && z, r = t === "PUBLISHED" && z, i = t !== "ARCHIVED" && B, a = n || r || V || i || R;
-					return /* @__PURE__ */ S("div", {
-						className: "border border-border-subtle rounded-md p-4 bg-bg-surface hover:shadow-md transition-shadow",
+			}) : J.length > 0 ? /* @__PURE__ */ S("div", {
+				className: P === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4" : "space-y-3",
+				children: J.map((e) => {
+					let t = e.status, n = t === "DRAFT" && K, r = t === "PUBLISHED" && K, i = t !== "ARCHIVED" && te, a = [];
+					return n && a.push({
+						label: j("toursList.actionPublish"),
+						onSelect: () => void fe(e.id)
+					}), r && a.push({
+						label: j("toursList.actionUnpublish"),
+						onSelect: () => void pe(e.id)
+					}), q && a.push({
+						label: j("toursList.actionDuplicate"),
+						onSelect: () => void he(e.id)
+					}), i && a.push({
+						label: j("toursList.actionArchive"),
+						onSelect: () => void me(e.id)
+					}), G && a.push({
+						label: j("toursList.actionDelete"),
+						onSelect: () => void ge(e.id),
+						intent: "destructive"
+					}), /* @__PURE__ */ C(O, {
+						treatment: "plain",
+						className: "p-4 border-border-seam shadow-[var(--shadow-pop)]",
 						children: [
-							/* @__PURE__ */ S("div", {
+							/* @__PURE__ */ C("div", {
 								className: "flex items-start justify-between mb-2",
-								children: [/* @__PURE__ */ x("h3", {
+								children: [/* @__PURE__ */ S("h3", {
 									className: "font-semibold text-text-primary",
-									children: F ? /* @__PURE__ */ x("button", {
+									children: H ? /* @__PURE__ */ S("button", {
 										type: "button",
 										className: "cursor-pointer hover:text-primary bg-transparent border-0 p-0 text-left font-inherit",
-										onClick: () => T(`${E}/${e.id}/edit`),
+										onClick: () => M(`${N}/${e.id}/edit`),
 										children: e.name
 									}) : e.name
-								}), /* @__PURE__ */ x("span", {
-									className: `px-2 py-1 text-xs rounded-full ${e.status === "PUBLISHED" ? "bg-success/10 text-success" : e.status === "DRAFT" ? "bg-bg-sunken text-text-secondary" : "bg-warning/10 text-warning"}`,
-									children: $(t)
+								}), /* @__PURE__ */ S("span", {
+									className: `px-2 py-1 text-xs rounded-full ${e.status === "PUBLISHED" ? "bg-success/10 text-success motion-safe:animate-vc-glow-pulse" : e.status === "DRAFT" ? "bg-bg-sunken text-text-secondary" : "bg-warning/10 text-warning"}`,
+									children: de(t)
 								})]
 							}),
-							e.description && /* @__PURE__ */ x("p", {
+							e.description && /* @__PURE__ */ S("p", {
 								className: "text-sm text-text-secondary mb-3",
 								children: e.description
 							}),
-							/* @__PURE__ */ S("div", {
+							/* @__PURE__ */ C("div", {
 								className: "flex items-center justify-between text-xs text-text-secondary mb-3",
-								children: [/* @__PURE__ */ S("span", { children: [
+								children: [/* @__PURE__ */ C("span", { children: [
 									e.steps?.length || 0,
 									" ",
-									w("toursList.steps")
-								] }), /* @__PURE__ */ S("span", { children: [
+									j("toursList.steps")
+								] }), /* @__PURE__ */ C("span", { children: [
 									e.viewCount,
 									" ",
-									w("toursList.views")
+									j("toursList.views")
 								] })]
 							}),
-							/* @__PURE__ */ S("div", {
-								className: "flex flex-wrap items-center gap-2 pt-3 border-t border-border-subtle",
+							/* @__PURE__ */ C("div", {
+								className: "flex flex-wrap items-center gap-2 pt-3 border-t border-border-seam",
 								children: [
-									I && /* @__PURE__ */ S("button", {
+									U && /* @__PURE__ */ C("button", {
 										type: "button",
 										onClick: (t) => {
-											t.stopPropagation(), T(`${E}/${e.id}/steps`);
+											t.stopPropagation(), M(`${N}/${e.id}/steps`);
 										},
 										className: "flex-1 min-w-[6.5rem] px-3 py-2 min-h-[44px] text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/80 flex items-center justify-center gap-1.5",
-										title: w("toursList.editStepsTitle"),
-										children: [/* @__PURE__ */ x(te, { size: 14 }), w("toursList.stepsButton")]
+										title: j("toursList.editStepsTitle"),
+										children: [/* @__PURE__ */ S(v, { size: 14 }), j("toursList.stepsButton")]
 									}),
-									L && /* @__PURE__ */ S("button", {
+									W && /* @__PURE__ */ C("button", {
 										type: "button",
 										onClick: (t) => {
-											t.stopPropagation(), T(`${E}/${e.id}/preview`);
+											t.stopPropagation(), M(`${N}/${e.id}/preview`);
 										},
-										className: "flex-1 min-w-[6.5rem] px-3 py-2 min-h-[44px] text-xs border border-border-subtle rounded hover:bg-accent flex items-center justify-center gap-1.5",
-										title: w("toursList.previewTitle"),
-										children: [/* @__PURE__ */ x(_, { size: 14 }), w("toursList.previewButton")]
+										className: "flex-1 min-w-[6.5rem] px-3 py-2 min-h-[44px] text-xs border border-border-seam rounded hover:bg-accent flex items-center justify-center gap-1.5",
+										title: j("toursList.previewTitle"),
+										children: [/* @__PURE__ */ S(h, { size: 14 }), j("toursList.previewButton")]
 									}),
-									F && /* @__PURE__ */ x("button", {
+									H && /* @__PURE__ */ S("button", {
 										type: "button",
 										onClick: (t) => {
-											t.stopPropagation(), T(`${E}/${e.id}/edit`);
+											t.stopPropagation(), M(`${N}/${e.id}/edit`);
 										},
-										className: "p-2 min-h-[44px] min-w-[44px] text-xs border border-border-subtle rounded hover:bg-accent",
-										title: w("toursList.settingsTitle"),
-										"aria-label": w("toursList.settingsTitle"),
-										children: /* @__PURE__ */ x(b, { size: 14 })
+										className: "p-2 min-h-[44px] min-w-[44px] text-xs border border-border-seam rounded hover:bg-accent",
+										title: j("toursList.settingsTitle"),
+										"aria-label": j("toursList.settingsTitle"),
+										children: /* @__PURE__ */ S(x, { size: 14 })
 									}),
-									a && /* @__PURE__ */ S("div", {
-										className: "relative",
-										ref: X === e.id ? Q : void 0,
-										children: [/* @__PURE__ */ x("button", {
-											type: "button",
-											onClick: (t) => {
-												t.stopPropagation(), Z(X === e.id ? null : e.id);
-											},
-											className: "p-2 min-h-[44px] min-w-[44px] text-xs border border-border-subtle rounded hover:bg-accent",
-											title: w("toursList.moreActionsTitle"),
-											"aria-label": w("toursList.moreActionsTitle"),
-											children: /* @__PURE__ */ x(ne, { size: 14 })
-										}), X === e.id && /* @__PURE__ */ S("div", {
-											className: "absolute right-0 top-full mt-1 w-40 bg-bg-surface border border-border-subtle rounded-md shadow-lg z-10",
-											children: [
-												n && /* @__PURE__ */ x("button", {
-													type: "button",
-													onClick: (t) => {
-														t.stopPropagation(), de(e.id);
-													},
-													className: "w-full text-left px-3 py-2 min-h-[44px] text-xs hover:bg-accent",
-													children: w("toursList.actionPublish")
-												}),
-												r && /* @__PURE__ */ x("button", {
-													type: "button",
-													onClick: (t) => {
-														t.stopPropagation(), fe(e.id);
-													},
-													className: "w-full text-left px-3 py-2 min-h-[44px] text-xs hover:bg-accent",
-													children: w("toursList.actionUnpublish")
-												}),
-												V && /* @__PURE__ */ x("button", {
-													type: "button",
-													onClick: (t) => {
-														t.stopPropagation(), me(e.id);
-													},
-													className: "w-full text-left px-3 py-2 min-h-[44px] text-xs hover:bg-accent",
-													children: w("toursList.actionDuplicate")
-												}),
-												i && /* @__PURE__ */ x("button", {
-													type: "button",
-													onClick: (t) => {
-														t.stopPropagation(), pe(e.id);
-													},
-													className: "w-full text-left px-3 py-2 min-h-[44px] text-xs hover:bg-accent",
-													children: w("toursList.actionArchive")
-												}),
-												R && /* @__PURE__ */ x("button", {
-													type: "button",
-													onClick: (t) => {
-														t.stopPropagation(), he(e.id);
-													},
-													className: "w-full text-left px-3 py-2 min-h-[44px] text-xs text-status-error-text hover:bg-status-error-bg/10",
-													children: w("toursList.actionDelete")
-												})
-											]
-										})]
-									})
+									a.length > 0 && /* @__PURE__ */ S(D, { actions: a })
 								]
 							})
 						]
 					}, e.id);
 				})
-			}) : /* @__PURE__ */ S("div", {
-				className: "text-center py-12 border border-dashed border-border-subtle rounded-md",
-				children: [/* @__PURE__ */ x("p", {
-					className: "text-sm sm:text-base text-text-secondary mb-2",
-					children: w("toursList.emptyTitle")
-				}), /* @__PURE__ */ x("p", {
-					className: "text-xs sm:text-sm text-text-secondary",
-					children: w("toursList.emptySubtitle")
-				})]
+			}) : /* @__PURE__ */ S(A, {
+				illustration: "onboarding",
+				title: j("toursList.emptyTitle"),
+				description: j("toursList.emptySubtitle"),
+				action: /* @__PURE__ */ S(m, {
+					permission: o.TOUR_CREATE,
+					children: /* @__PURE__ */ C(E, {
+						type: "button",
+						onClick: $,
+						className: "min-h-[44px]",
+						children: [/* @__PURE__ */ S(y, { size: 20 }), j("toursList.createTour")]
+					})
+				})
 			})
 		]
 	});
 }
 //#endregion
-export { w as ToursListPage };
+export { j as ToursListPage };
 
 //# sourceMappingURL=ToursListPage.js.map