@burdenoff/microfe-tours 2026.510.112

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepEditorPage.js","names":[],"sources":["../../../src/tours/pages/StepEditorPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  Plus,\n  Save,\n  Trash2,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  ChevronDown,\n  Menu,\n  Paperclip,\n  X,\n} from 'lucide-react';\nimport { PermissionGate } from '@burdenoff/fe-libs/shared/components';\nimport { useStepSequencer } from '../hooks/useStepSequencer';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useMediaLibrary } from '../hooks/useMediaLibrary';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Step editor page\n * Manage tour steps with sequencer and editor\n * Responsive: sidebar drawer on mobile, side panel on desktop\n */\nexport function StepEditorPage() {\n  const { tr } = useToursI18n();\n\n  const { tourId, stepId } = useParams();\n  const navigate = useNavigate();\n  const { basePath = '/' } = useToursContext();\n  const { hasPermission } = useToursPermissionAccess();\n  const canCreateStep = hasPermission(TOUR_PERMISSIONS.TOUR_STEP_CREATE);\n  const canUpdateStep = hasPermission(TOUR_PERMISSIONS.TOUR_STEP_UPDATE);\n  const canDeleteStep = hasPermission(TOUR_PERMISSIONS.TOUR_STEP_DELETE);\n\n  const { tour, loadTour, syncSteps, saving } = useTourBuilder(tourId);\n  const { steps, selectedStep, selectStep, createStep, deleteStep, updateStepField, moveStep } =\n    useStepSequencer();\n  const { media, fetchMedia, attachToStep, loading: mediaLoading } = useMediaLibrary();\n\n  // Mobile sidebar state\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n  const [isMobile, setIsMobile] = useState(false);\n  const [attachmentMediaId, setAttachmentMediaId] = useState('');\n  const [attachmentPosition, setAttachmentPosition] = useState<'header' | 'body' | 'footer'>(\n    'body'\n  );\n  const [attachingMedia, setAttachingMedia] = useState(false);\n\n  // Detect mobile viewport\n  useEffect(() => {\n    const checkMobile = () => {\n      const mobile = window.innerWidth < 768;\n      setIsMobile(mobile);\n      // Auto-close sidebar on desktop\n      if (!mobile) {\n        setIsSidebarOpen(false);\n      }\n    };\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n    return () => window.removeEventListener('resize', checkMobile);\n  }, []);\n\n  useEffect(() => {\n    if (tourId) {\n      loadTour(tourId);\n    }\n  }, [tourId, loadTour]);\n\n  useEffect(() => {\n    void fetchMedia();\n  }, [fetchMedia]);\n\n  useEffect(() => {\n    const selectedStepId = stepId || selectedStep?.id;\n    if (selectedStepId && steps.length > 0) {\n      const step = steps.find((s) => s.id === selectedStepId);\n      if (step) {\n        selectStep(step);\n      }\n    }\n  }, [stepId, steps, selectStep, selectedStep?.id]);\n\n  const handleAddStep = () => {\n    createStep();\n  };\n\n  const handleSaveSteps = async () => {\n    if (tourId) {\n      try {\n        await syncSteps(tourId, steps);\n      } catch (error) {\n        console.error('Failed to save steps:', error);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    navigate(`${basePath}/${tourId}/edit`);\n  };\n\n  const handleAttachMedia = async () => {\n    if (!selectedStep || !tourId || !attachmentMediaId) return;\n    if (selectedStep.id.startsWith('temp_')) {\n      window.alert('Save your steps before attaching media to them.');\n      return;\n    }\n\n    try {\n      setAttachingMedia(true);\n      await attachToStep(\n        selectedStep.id,\n        attachmentMediaId,\n        attachmentPosition,\n        (selectedStep.media?.length ?? 0) + 1\n      );\n      await loadTour(tourId);\n      setAttachmentMediaId('');\n    } catch (attachError) {\n      console.error('Failed to attach media:', attachError);\n    } finally {\n      setAttachingMedia(false);\n    }\n  };\n\n  const handleSelectStep = (step: (typeof steps)[0]) => {\n    selectStep(step);\n    // Close sidebar on mobile after selecting\n    if (isMobile) {\n      setIsSidebarOpen(false);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col h-full bg-background\">\n      {/* Header */}\n      <div className=\"border-b border-border p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 bg-card\">\n        <div className=\"flex items-center gap-3\">\n          <button\n            onClick={handleBack}\n            className=\"p-2 hover:bg-accent rounded-md shrink-0\"\n            aria-label={tr('stepEditor.goBack')}\n          >\n            <ArrowLeft size={20} />\n          </button>\n          <div className=\"flex-1 min-w-0\">\n            <h1 className=\"text-base sm:text-lg font-semibold truncate\">\n              {tour?.name || tr('stepEditor.tourFallback')} - {tr('stepEditor.stepsLabel')}\n            </h1>\n            <p className=\"text-xs sm:text-sm text-muted-foreground\">\n              {steps.length} {tr('stepEditor.stepsCount')}\n            </p>\n          </div>\n        </div>\n\n        {/* Action buttons */}\n        <div className=\"flex items-center gap-2 sm:gap-3 ml-auto\">\n          {/* Mobile: Toggle sidebar button */}\n          {isMobile && (\n            <button\n              onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n              className=\"px-3 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 sm:hidden\"\n            >\n              <Menu size={18} />\n              <span className=\"text-sm\">{tr('stepEditor.steps')}</span>\n              {steps.length > 0 && (\n                <span className=\"px-1.5 py-0.5 text-xs bg-primary/20 rounded-full\">\n                  {steps.length}\n                </span>\n              )}\n            </button>\n          )}\n\n          {canCreateStep && (\n            <button\n              onClick={handleAddStep}\n              className=\"px-3 sm:px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 text-sm sm:text-base\"\n            >\n              <Plus size={18} />\n              <span className=\"hidden xs:inline\">{tr('stepEditor.addStep')}</span>\n            </button>\n          )}\n          <PermissionGate permission={TOUR_PERMISSIONS.TOUR_STEP_UPDATE}>\n            <button\n              onClick={handleSaveSteps}\n              disabled={saving || !canUpdateStep}\n              className=\"px-3 sm:px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-2 text-sm sm:text-base\"\n            >\n              <Save size={18} />\n              <span className=\"hidden xs:inline\">\n                {saving ? tr('stepEditor.saving') : tr('stepEditor.save')}\n              </span>\n            </button>\n          </PermissionGate>\n        </div>\n      </div>\n\n      <div className=\"flex-1 flex overflow-hidden relative\">\n        {/* Mobile Sidebar Overlay */}\n        {isMobile && isSidebarOpen && (\n          <div\n            className=\"fixed inset-0 bg-black/50 z-40 md:hidden\"\n            onClick={() => setIsSidebarOpen(false)}\n          />\n        )}\n\n        {/* Step List Sidebar */}\n        <div\n          className={`\n            ${isMobile ? 'fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300' : 'w-64 lg:w-80 shrink-0'}\n            ${isMobile && !isSidebarOpen ? '-translate-x-full' : 'translate-x-0'}\n            border-r border-border overflow-y-auto bg-card\n          `}\n        >\n          {/* Mobile sidebar header */}\n          {isMobile && (\n            <div className=\"flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card z-10\">\n              <h2 className=\"font-semibold\">{tr('stepEditor.tourSteps')}</h2>\n              <button\n                onClick={() => setIsSidebarOpen(false)}\n                className=\"p-2 hover:bg-accent rounded-md\"\n              >\n                <X size={20} />\n              </button>\n            </div>\n          )}\n\n          <div className=\"p-3 sm:p-4 space-y-2\">\n            {steps.length === 0 ? (\n              <div className=\"text-center py-8 text-muted-foreground\">\n                <p className=\"text-sm\">{tr('stepEditor.noStepsYet')}</p>\n                <p className=\"text-xs mt-1\">{tr('stepEditor.clickAddStep')}</p>\n              </div>\n            ) : (\n              steps.map((step, index) => (\n                <div\n                  key={step.id}\n                  onClick={() => handleSelectStep(step)}\n                  className={`p-3 border rounded-md cursor-pointer transition-colors ${\n                    selectedStep?.id === step.id\n                      ? 'border-primary bg-primary/10'\n                      : 'border-border hover:bg-accent'\n                  }`}\n                >\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"text-xs text-muted-foreground mb-1\">\n                        {tr('stepEditor.stepNumber')} {index + 1}\n                      </div>\n                      <div className=\"font-medium text-sm truncate\">\n                        {step.title || tr('stepEditor.untitled')}\n                      </div>\n                      {step.targetSelector && (\n                        <div className=\"text-xs text-muted-foreground mt-1 truncate font-mono\">\n                          {step.targetSelector}\n                        </div>\n                      )}\n                    </div>\n                    {canDeleteStep && (\n                      <div className=\"flex items-center gap-1 shrink-0\">\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            if (index > 0) {\n                              moveStep(index, index - 1);\n                            }\n                          }}\n                          className=\"p-1.5 hover:bg-accent rounded\"\n                          title=\"Move step up\"\n                          aria-label=\"Move step up\"\n                          disabled={index === 0}\n                        >\n                          <ChevronUp size={14} />\n                        </button>\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            if (index < steps.length - 1) {\n                              moveStep(index, index + 1);\n                            }\n                          }}\n                          className=\"p-1.5 hover:bg-accent rounded\"\n                          title=\"Move step down\"\n                          aria-label=\"Move step down\"\n                          disabled={index === steps.length - 1}\n                        >\n                          <ChevronDown size={14} />\n                        </button>\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            deleteStep(step.id);\n                          }}\n                          className=\"p-1.5 hover:bg-destructive/10 rounded text-destructive\"\n                          title={tr('stepEditor.deleteStep')}\n                          aria-label={tr('stepEditor.deleteStep')}\n                        >\n                          <Trash2 size={14} />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              ))\n            )}\n          </div>\n        </div>\n\n        {/* Step Editor */}\n        <div className=\"flex-1 overflow-y-auto p-4 sm:p-6\">\n          {selectedStep ? (\n            <div className=\"max-w-2xl mx-auto space-y-4 sm:space-y-6\">\n              {/* Mobile: Step navigation */}\n              {isMobile && steps.length > 1 && (\n                <div className=\"flex items-center justify-between bg-muted/50 rounded-lg p-2 mb-4\">\n                  <button\n                    onClick={() => {\n                      const currentIndex = steps.findIndex((s) => s.id === selectedStep.id);\n                      if (currentIndex > 0) {\n                        selectStep(steps[currentIndex - 1]);\n                      }\n                    }}\n                    disabled={steps.findIndex((s) => s.id === selectedStep.id) === 0}\n                    className=\"p-2 hover:bg-accent rounded-md disabled:opacity-30\"\n                  >\n                    <ChevronLeft size={20} />\n                  </button>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {tr('stepEditor.stepNumber')}{' '}\n                    {steps.findIndex((s) => s.id === selectedStep.id) + 1} {tr('stepEditor.of')}{' '}\n                    {steps.length}\n                  </span>\n                  <button\n                    onClick={() => {\n                      const currentIndex = steps.findIndex((s) => s.id === selectedStep.id);\n                      if (currentIndex < steps.length - 1) {\n                        selectStep(steps[currentIndex + 1]);\n                      }\n                    }}\n                    disabled={steps.findIndex((s) => s.id === selectedStep.id) === steps.length - 1}\n                    className=\"p-2 hover:bg-accent rounded-md disabled:opacity-30\"\n                  >\n                    <ChevronRight size={20} />\n                  </button>\n                </div>\n              )}\n\n              <h2 className=\"text-lg sm:text-xl font-semibold\">{tr('stepEditor.editStep')}</h2>\n\n              {/* Title */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\">\n                  {tr('stepEditor.stepTitle')} *\n                </label>\n                <input\n                  type=\"text\"\n                  value={selectedStep.title}\n                  onChange={(e) => updateStepField(selectedStep.id, 'title', e.target.value)}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base\"\n                  placeholder={tr('stepEditor.stepTitlePlaceholder')}\n                />\n              </div>\n\n              {/* Content */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\">\n                  {tr('stepEditor.content')} *\n                </label>\n                <textarea\n                  value={selectedStep.content}\n                  onChange={(e) => updateStepField(selectedStep.id, 'content', e.target.value)}\n                  rows={4}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base resize-y min-h-[100px]\"\n                  placeholder={tr('stepEditor.contentPlaceholder')}\n                />\n              </div>\n\n              {/* Selector */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\">\n                  {tr('stepEditor.cssSelector')} *\n                  <span className=\"text-muted-foreground font-normal ml-2\">\n                    ({tr('stepEditor.targetElement')})\n                  </span>\n                </label>\n                <input\n                  type=\"text\"\n                  value={selectedStep.targetSelector || ''}\n                  onChange={(e) =>\n                    updateStepField(selectedStep.id, 'targetSelector', e.target.value)\n                  }\n                  placeholder={tr('stepEditor.cssSelectorPlaceholder')}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background font-mono text-sm\"\n                />\n                <p className=\"text-xs text-muted-foreground mt-1\">\n                  {tr('stepEditor.dataTourHint')}\n                </p>\n              </div>\n\n              {/* Placement */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\">\n                  {tr('stepEditor.tooltipPlacement')}\n                </label>\n                <select\n                  value={selectedStep.placement}\n                  onChange={(e) => updateStepField(selectedStep.id, 'placement', e.target.value)}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base\"\n                >\n                  <option value=\"AUTO\">{tr('stepEditor.placementAuto')}</option>\n                  <option value=\"TOP\">{tr('stepEditor.placementTop')}</option>\n                  <option value=\"BOTTOM\">{tr('stepEditor.placementBottom')}</option>\n                  <option value=\"LEFT\">{tr('stepEditor.placementLeft')}</option>\n                  <option value=\"RIGHT\">{tr('stepEditor.placementRight')}</option>\n                  <option value=\"CENTER\">{tr('stepEditor.placementCenter')}</option>\n                </select>\n              </div>\n\n              {/* Device-specific selectors */}\n              <details className=\"border border-border rounded-md\">\n                <summary className=\"px-4 py-3 cursor-pointer font-medium text-sm hover:bg-accent/50 rounded-t-md\">\n                  {tr('stepEditor.deviceSpecificSelectors')}\n                </summary>\n                <div className=\"p-4 pt-0 space-y-3 border-t border-border\">\n                  <p className=\"text-xs text-muted-foreground mb-3\">\n                    {tr('stepEditor.deviceSelectorHint')}\n                  </p>\n                  <div>\n                    <label className=\"block text-xs font-medium mb-1\">\n                      {tr('stepEditor.mobileSelector')}\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={selectedStep.targetSelectorMobile || ''}\n                      onChange={(e) =>\n                        updateStepField(selectedStep.id, 'targetSelectorMobile', e.target.value)\n                      }\n                      placeholder={tr('stepEditor.leaveEmptyDefault')}\n                      className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono\"\n                    />\n                  </div>\n                  <div>\n                    <label className=\"block text-xs font-medium mb-1\">\n                      {tr('stepEditor.tabletSelector')}\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={selectedStep.targetSelectorTablet || ''}\n                      onChange={(e) =>\n                        updateStepField(selectedStep.id, 'targetSelectorTablet', e.target.value)\n                      }\n                      placeholder={tr('stepEditor.leaveEmptyDefault')}\n                      className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono\"\n                    />\n                  </div>\n                  <div>\n                    <label className=\"block text-xs font-medium mb-1\">\n                      {tr('stepEditor.desktopSelector')}\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={selectedStep.targetSelectorDesktop || ''}\n                      onChange={(e) =>\n                        updateStepField(selectedStep.id, 'targetSelectorDesktop', e.target.value)\n                      }\n                      placeholder={tr('stepEditor.leaveEmptyDefault')}\n                      className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono\"\n                    />\n                  </div>\n                </div>\n              </details>\n\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <label className=\"flex items-center gap-3 cursor-pointer rounded-md border border-border p-3\">\n                  <input\n                    type=\"checkbox\"\n                    checked={selectedStep.requireInteraction ?? false}\n                    onChange={(e) =>\n                      updateStepField(selectedStep.id, 'requireInteraction', e.target.checked)\n                    }\n                    className=\"w-4 h-4 rounded\"\n                  />\n                  <div>\n                    <div className=\"text-sm font-medium\">Require interaction</div>\n                    <div className=\"text-xs text-muted-foreground\">\n                      User must interact with the highlighted element before advancing.\n                    </div>\n                  </div>\n                </label>\n\n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">Wait for timeout (ms)</label>\n                  <input\n                    type=\"number\"\n                    min=\"0\"\n                    value={selectedStep.waitForTimeout ?? ''}\n                    onChange={(e) =>\n                      updateStepField(\n                        selectedStep.id,\n                        'waitForTimeout',\n                        e.target.value ? Number(e.target.value) : undefined\n                      )\n                    }\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm\"\n                    placeholder=\"1500\"\n                  />\n                </div>\n              </div>\n\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">Wait for selector</label>\n                  <input\n                    type=\"text\"\n                    value={selectedStep.waitForSelector || ''}\n                    onChange={(e) =>\n                      updateStepField(\n                        selectedStep.id,\n                        'waitForSelector',\n                        e.target.value || undefined\n                      )\n                    }\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono\"\n                    placeholder=\"[data-tour='agents-tabs']\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">Wait for event</label>\n                  <input\n                    type=\"text\"\n                    value={selectedStep.waitForEvent || ''}\n                    onChange={(e) =>\n                      updateStepField(selectedStep.id, 'waitForEvent', e.target.value || undefined)\n                    }\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm\"\n                    placeholder=\"tour:ready\"\n                  />\n                </div>\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium mb-2\">Skip conditions (JSON)</label>\n                <textarea\n                  value={\n                    selectedStep.skipConditions\n                      ? JSON.stringify(selectedStep.skipConditions, null, 2)\n                      : ''\n                  }\n                  onChange={(e) => {\n                    const rawValue = e.target.value.trim();\n                    if (!rawValue) {\n                      updateStepField(selectedStep.id, 'skipConditions', undefined);\n                      return;\n                    }\n\n                    try {\n                      updateStepField(selectedStep.id, 'skipConditions', JSON.parse(rawValue));\n                    } catch {\n                      updateStepField(selectedStep.id, 'skipConditions', rawValue);\n                    }\n                  }}\n                  rows={4}\n                  className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono\"\n                  placeholder='{\"selectorMissing\":\"[data-tour=\\\"missing\\\"]\"}'\n                />\n              </div>\n\n              <div className=\"border border-border rounded-md p-4 space-y-4\">\n                <div className=\"flex items-center gap-2\">\n                  <Paperclip size={18} />\n                  <h3 className=\"text-sm font-semibold\">Step media</h3>\n                </div>\n\n                {selectedStep.media && selectedStep.media.length > 0 ? (\n                  <div className=\"space-y-2\">\n                    {selectedStep.media.map((item) => (\n                      <div\n                        key={item.id}\n                        className=\"flex items-center justify-between rounded-md border border-border p-2 text-sm\"\n                      >\n                        <div>\n                          <div className=\"font-medium\">{item.media.name}</div>\n                          <div className=\"text-xs text-muted-foreground\">{item.position}</div>\n                        </div>\n                        <span className=\"text-xs text-muted-foreground\">{item.media.type}</span>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <p className=\"text-sm text-muted-foreground\">\n                    No media attached to this step yet.\n                  </p>\n                )}\n\n                <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_160px_auto]\">\n                  <select\n                    value={attachmentMediaId}\n                    onChange={(e) => setAttachmentMediaId(e.target.value)}\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm\"\n                  >\n                    <option value=\"\">\n                      {mediaLoading ? 'Loading media...' : 'Select uploaded media'}\n                    </option>\n                    {media.map((item) => (\n                      <option key={item.id} value={item.id}>\n                        {item.name} ({item.type})\n                      </option>\n                    ))}\n                  </select>\n\n                  <select\n                    value={attachmentPosition}\n                    onChange={(e) =>\n                      setAttachmentPosition(e.target.value as 'header' | 'body' | 'footer')\n                    }\n                    className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-sm\"\n                  >\n                    <option value=\"header\">Header</option>\n                    <option value=\"body\">Body</option>\n                    <option value=\"footer\">Footer</option>\n                  </select>\n\n                  <button\n                    type=\"button\"\n                    onClick={handleAttachMedia}\n                    disabled={attachingMedia || !attachmentMediaId}\n                    className=\"px-4 py-2 border border-border rounded-md hover:bg-accent disabled:opacity-50\"\n                  >\n                    Attach\n                  </button>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center h-full text-center px-4\">\n              <div className=\"w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4\">\n                <Plus size={24} className=\"text-muted-foreground\" />\n              </div>\n              <p className=\"text-muted-foreground mb-2\">{tr('stepEditor.noStepSelected')}</p>\n              <p className=\"text-sm text-muted-foreground mb-4\">\n                {steps.length > 0\n                  ? tr('stepEditor.selectStepToEdit')\n                  : tr('stepEditor.createFirstStep')}\n              </p>\n              {steps.length === 0 && canCreateStep && (\n                <button\n                  onClick={handleAddStep}\n                  className=\"px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 flex items-center gap-2\"\n                >\n                  <Plus size={18} />\n                  {tr('stepEditor.addFirstStep')}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/SystemAnalyticsPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * System-wide analytics page
+ * Displays workspace-level tour analytics summary (no tourId needed)
+ */
+export declare function SystemAnalyticsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SystemAnalyticsPage.d.ts.map

package/dist/tours/pages/SystemAnalyticsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemAnalyticsPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/SystemAnalyticsPage.tsx"],"names":[],"mappings":"AAQA;;;GAGG;AACH,wBAAgB,mBAAmB,4CAqIlC"}

package/dist/tours/pages/SystemAnalyticsPage.js

@@ -0,0 +1,155 @@
+import { useGetWorkspaceAnalyticsSummaryQuery as e } from "../../generated/global-operations.js";
+import { useToursPermissionAccess as t } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as n } from "../../constants/permissions.js";
+import { formatNumber as r, formatPercentage as i } from "../utils/index.js";
+import { useCallback as a } from "react";
+import { BarChart3 as o, Compass as s, Eye as c, Globe as l, TrendingUp as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/tours/pages/SystemAnalyticsPage.tsx
+function m() {
+	let { t: m } = p(), h = a((e, t) => {
+		let n = m(e);
+		return n === e ? t : n;
+	}, [m]), { hasPermission: g, isLoading: _ } = t(), v = g(n.TOUR_ANALYTICS_READ), { data: y, loading: b } = e({ skip: _ || !v });
+	if (!_ && !v) return /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-center h-full p-6",
+		children: /* @__PURE__ */ f("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ d("h2", {
+				className: "text-lg font-semibold text-foreground mb-2",
+				children: h("systemAnalytics.accessDenied", "Access Denied")
+			}), /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground",
+				children: h("systemAnalytics.noPermission", "You do not have permission to view system analytics.")
+			})]
+		})
+	});
+	if (b) return /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ d("p", {
+			className: "text-muted-foreground",
+			children: h("systemAnalytics.loading", "Loading analytics...")
+		})
+	});
+	let x = y?.workspaceAnalyticsSummary;
+	return x ? /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+			className: "text-2xl font-bold",
+			children: h("systemAnalytics.title", "System Analytics")
+		}), /* @__PURE__ */ d("p", {
+			className: "text-sm text-muted-foreground",
+			children: h("systemAnalytics.subtitle", "Workspace-wide tour performance overview")
+		})] }), /* @__PURE__ */ f("div", {
+			className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4",
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-md p-4 bg-card",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3 mb-2",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-2 bg-primary/10 rounded-md",
+							children: /* @__PURE__ */ d(s, {
+								className: "text-primary",
+								size: 20
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: h("systemAnalytics.totalTours", "Total Tours")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "text-2xl font-bold",
+						children: r(x.totalTours)
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-md p-4 bg-card",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3 mb-2",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-2 bg-success/10 rounded-md",
+							children: /* @__PURE__ */ d(l, {
+								className: "text-success",
+								size: 20
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: h("systemAnalytics.publishedTours", "Published Tours")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "text-2xl font-bold",
+						children: r(x.publishedTours)
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-md p-4 bg-card",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3 mb-2",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-2 bg-info/10 rounded-md",
+							children: /* @__PURE__ */ d(c, {
+								className: "text-info",
+								size: 20
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: h("systemAnalytics.totalViews", "Total Views")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "text-2xl font-bold",
+						children: r(x.totalViews)
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-md p-4 bg-card",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3 mb-2",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-2 bg-warning/10 rounded-md",
+							children: /* @__PURE__ */ d(u, {
+								className: "text-warning",
+								size: 20
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: h("systemAnalytics.totalCompletions", "Total Completions")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "text-2xl font-bold",
+						children: r(x.totalCompletions)
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-md p-4 bg-card",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-3 mb-2",
+						children: [/* @__PURE__ */ d("div", {
+							className: "p-2 bg-primary/10 rounded-md",
+							children: /* @__PURE__ */ d(o, {
+								className: "text-primary",
+								size: 20
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-sm text-muted-foreground",
+							children: h("systemAnalytics.completionRate", "Completion Rate")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "text-2xl font-bold",
+						children: i(x.overallCompletionRate)
+					})]
+				})
+			]
+		})]
+	}) : /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ d("p", {
+			className: "text-muted-foreground",
+			children: h("systemAnalytics.noData", "No analytics data available")
+		})
+	});
+}
+//#endregion
+export { m as SystemAnalyticsPage };
+
+//# sourceMappingURL=SystemAnalyticsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SystemAnalyticsPage.js","names":[],"sources":["../../../src/tours/pages/SystemAnalyticsPage.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { Compass, Globe, Eye, TrendingUp, BarChart3 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useGetWorkspaceAnalyticsSummaryQuery } from '../../generated/global-operations';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { formatNumber, formatPercentage } from '../utils';\n\n/**\n * System-wide analytics page\n * Displays workspace-level tour analytics summary (no tourId needed)\n */\nexport function SystemAnalyticsPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const { hasPermission, isLoading: permissionsLoading } = useToursPermissionAccess();\n  const canViewAnalytics = hasPermission(TOUR_PERMISSIONS.TOUR_ANALYTICS_READ);\n\n  const { data, loading } = useGetWorkspaceAnalyticsSummaryQuery({\n    skip: permissionsLoading || !canViewAnalytics,\n  });\n\n  if (!permissionsLoading && !canViewAnalytics) {\n    return (\n      <div className=\"flex items-center justify-center h-full p-6\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-foreground mb-2\">\n            {tr('systemAnalytics.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr(\n              'systemAnalytics.noPermission',\n              'You do not have permission to view system analytics.'\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-muted-foreground\">\n          {tr('systemAnalytics.loading', 'Loading analytics...')}\n        </p>\n      </div>\n    );\n  }\n\n  const summary = data?.workspaceAnalyticsSummary;\n\n  if (!summary) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-muted-foreground\">\n          {tr('systemAnalytics.noData', 'No analytics data available')}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold\">{tr('systemAnalytics.title', 'System Analytics')}</h1>\n        <p className=\"text-sm text-muted-foreground\">\n          {tr('systemAnalytics.subtitle', 'Workspace-wide tour performance overview')}\n        </p>\n      </div>\n\n      {/* Summary Cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4\">\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-primary/10 rounded-md\">\n              <Compass className=\"text-primary\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('systemAnalytics.totalTours', 'Total Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatNumber(summary.totalTours)}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-success/10 rounded-md\">\n              <Globe className=\"text-success\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('systemAnalytics.publishedTours', 'Published Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatNumber(summary.publishedTours)}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-info/10 rounded-md\">\n              <Eye className=\"text-info\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('systemAnalytics.totalViews', 'Total Views')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatNumber(summary.totalViews)}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-warning/10 rounded-md\">\n              <TrendingUp className=\"text-warning\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('systemAnalytics.totalCompletions', 'Total Completions')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatNumber(summary.totalCompletions)}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-primary/10 rounded-md\">\n              <BarChart3 className=\"text-primary\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('systemAnalytics.completionRate', 'Completion Rate')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">\n            {formatPercentage(summary.overallCompletionRate)}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/TemplateLibraryPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Template library page
+ * Browse and use tour templates
+ */
+export declare function TemplateLibraryPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemplateLibraryPage.d.ts.map

package/dist/tours/pages/TemplateLibraryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateLibraryPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/TemplateLibraryPage.tsx"],"names":[],"mappings":"AAeA;;;GAGG;AACH,wBAAgB,mBAAmB,4CAyMlC"}

package/dist/tours/pages/TemplateLibraryPage.js

@@ -0,0 +1,207 @@
+import { useToursContext as e } from "../providers/ToursProvider.js";
+import { useCreateTourFromTemplateMutation as t, useDeleteTourTemplateMutation as n, useGetTourTemplatesQuery as r } from "../../generated/global-operations.js";
+import { useToursPermissionAccess as i } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as a } from "../../constants/permissions.js";
+import { useToursI18n as o } from "../i18n.js";
+import { nativeConfirm as s, nativeImpact as c, nativeNotify as l } from "../../utils/nativeBridge.js";
+import { useState as u } from "react";
+import { Globe as d, LayoutTemplate as f, Lock as p, Search as m, Star as h, Trash2 as g } from "lucide-react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useNavigate as y } from "react-router-dom";
+//#region src/tours/pages/TemplateLibraryPage.tsx
+function b() {
+	let { tr: b } = o(), x = y(), { basePath: S = "/" } = e(), { hasPermission: C } = i(), w = C(a.TOUR_TEMPLATE_LIST), T = C(a.TOUR_TEMPLATE_USE), E = C(a.TOUR_TEMPLATE_DELETE), [D, O] = u(""), [k, A] = u("all"), [j, M] = u(!1), { data: N, loading: P } = r({
+		skip: !w,
+		variables: {
+			isPublic: j || void 0,
+			category: k === "all" ? void 0 : k
+		}
+	}), F = (N?.tourTemplates ?? []).filter((e) => !D || e.name.toLowerCase().includes(D.toLowerCase())), [I] = t(), L = async (e) => {
+		c("light");
+		try {
+			let { data: t } = await I({ variables: { templateId: e } });
+			t?.createTourFromTemplate && (l("success"), x(`${S}/${t.createTourFromTemplate.id}/edit`));
+		} catch (e) {
+			l("error"), console.error("Failed to create tour from template:", e);
+		}
+	}, [R] = n(), z = async (e) => {
+		try {
+			await R({
+				variables: { id: e },
+				refetchQueries: ["GetTourTemplates"]
+			}), l("success");
+		} catch (e) {
+			l("error"), console.error("Failed to delete template:", e);
+		}
+	}, B = async (e) => {
+		c("medium");
+		let t = b("templateLibrary.deleteConfirm"), n = await s({
+			title: b("templateLibrary.deleteConfirm"),
+			message: t
+		});
+		(n === null ? window.confirm(t) : n) && await z(e);
+	};
+	return /* @__PURE__ */ v("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
+				className: "text-2xl font-bold",
+				children: b("templateLibrary.title")
+			}), /* @__PURE__ */ _("p", {
+				className: "text-sm text-muted-foreground",
+				children: b("templateLibrary.subtitle")
+			})] }),
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-col sm:flex-row gap-3",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "flex-1 relative",
+						children: [/* @__PURE__ */ _(m, {
+							className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
+							size: 20
+						}), /* @__PURE__ */ _("input", {
+							type: "text",
+							placeholder: b("templateLibrary.searchPlaceholder"),
+							value: D,
+							onChange: (e) => O(e.target.value),
+							className: "w-full pl-[3.25rem] pr-4 py-2 border border-border rounded-md bg-background"
+						})]
+					}),
+					/* @__PURE__ */ v("select", {
+						value: k,
+						onChange: (e) => A(e.target.value),
+						className: "px-4 py-2 border border-border rounded-md bg-background",
+						children: [
+							/* @__PURE__ */ _("option", {
+								value: "all",
+								children: b("templateLibrary.allCategories")
+							}),
+							/* @__PURE__ */ _("option", {
+								value: "ONBOARDING",
+								children: b("templateLibrary.categoryOnboarding")
+							}),
+							/* @__PURE__ */ _("option", {
+								value: "FEATURE_ANNOUNCEMENT",
+								children: b("templateLibrary.categoryFeatureAnnouncement")
+							}),
+							/* @__PURE__ */ _("option", {
+								value: "HELP",
+								children: b("templateLibrary.categoryHelp")
+							}),
+							/* @__PURE__ */ _("option", {
+								value: "CUSTOM",
+								children: b("templateLibrary.categoryCustom")
+							})
+						]
+					}),
+					/* @__PURE__ */ v("label", {
+						className: "flex items-center gap-2 px-4 py-2 border border-border rounded-md bg-background cursor-pointer",
+						children: [/* @__PURE__ */ _("input", {
+							type: "checkbox",
+							checked: j,
+							onChange: (e) => M(e.target.checked),
+							className: "rounded"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-sm",
+							children: b("templateLibrary.publicOnly")
+						})]
+					})
+				]
+			}),
+			P ? /* @__PURE__ */ _("div", {
+				className: "text-center py-12",
+				children: /* @__PURE__ */ _("p", {
+					className: "text-muted-foreground",
+					children: b("templateLibrary.loading")
+				})
+			}) : F.length > 0 ? /* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+				children: F.map((e) => /* @__PURE__ */ v("div", {
+					className: "border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow",
+					children: [/* @__PURE__ */ _("div", {
+						className: "aspect-video bg-muted flex items-center justify-center",
+						children: e.thumbnail ? /* @__PURE__ */ _("img", {
+							src: e.thumbnail,
+							alt: e.name,
+							className: "w-full h-full object-cover"
+						}) : /* @__PURE__ */ _(f, {
+							className: "text-muted-foreground",
+							size: 48
+						})
+					}), /* @__PURE__ */ v("div", {
+						className: "p-4",
+						children: [
+							/* @__PURE__ */ v("div", {
+								className: "flex items-start justify-between mb-2",
+								children: [/* @__PURE__ */ _("h3", {
+									className: "font-semibold",
+									children: e.name
+								}), /* @__PURE__ */ v("div", {
+									className: "flex gap-1",
+									children: [e.isPremium && /* @__PURE__ */ _(h, {
+										className: "text-warning",
+										size: 16
+									}), e.isPublic ? /* @__PURE__ */ _(d, {
+										className: "text-muted-foreground",
+										size: 16
+									}) : /* @__PURE__ */ _(p, {
+										className: "text-muted-foreground",
+										size: 16
+									})]
+								})]
+							}),
+							e.description && /* @__PURE__ */ _("p", {
+								className: "text-sm text-muted-foreground mb-3 line-clamp-2",
+								children: e.description
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ v("span", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										b("templateLibrary.usedTimes"),
+										" ",
+										e.useCount,
+										" ",
+										b("templateLibrary.times")
+									]
+								}), /* @__PURE__ */ v("div", {
+									className: "flex items-center gap-2",
+									children: [E && /* @__PURE__ */ _("button", {
+										onClick: () => void B(e.id),
+										className: "p-1 text-muted-foreground hover:text-destructive rounded-md",
+										children: /* @__PURE__ */ _(g, { size: 16 })
+									}), T && /* @__PURE__ */ _("button", {
+										onClick: () => L(e.id),
+										className: "px-3 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm",
+										children: b("templateLibrary.useTemplate")
+									})]
+								})]
+							})
+						]
+					})]
+				}, e.id))
+			}) : /* @__PURE__ */ v("div", {
+				className: "text-center py-12 border border-dashed border-border rounded-md",
+				children: [
+					/* @__PURE__ */ _(f, {
+						className: "mx-auto mb-4 text-muted-foreground",
+						size: 48
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-muted-foreground mb-2",
+						children: b("templateLibrary.noTemplatesFound")
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-sm text-muted-foreground",
+						children: b("templateLibrary.adjustFilters")
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { b as TemplateLibraryPage };
+
+//# sourceMappingURL=TemplateLibraryPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateLibraryPage.js","names":[],"sources":["../../../src/tours/pages/TemplateLibraryPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Search, LayoutTemplate, Star, Globe, Lock, Trash2 } from 'lucide-react';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport {\n  useGetTourTemplatesQuery,\n  useCreateTourFromTemplateMutation,\n  useDeleteTourTemplateMutation,\n} from '../../generated/global-operations';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport type { TemplateCategory } from '../types';\nimport { useToursI18n } from '../i18n';\nimport { nativeConfirm, nativeImpact, nativeNotify } from '../../utils/nativeBridge';\n\n/**\n * Template library page\n * Browse and use tour templates\n */\nexport function TemplateLibraryPage() {\n  const { tr } = useToursI18n();\n\n  const navigate = useNavigate();\n  const { basePath = '/' } = useToursContext();\n  const { hasPermission } = useToursPermissionAccess();\n  const canListTemplates = hasPermission(TOUR_PERMISSIONS.TOUR_TEMPLATE_LIST);\n  const canUseTemplate = hasPermission(TOUR_PERMISSIONS.TOUR_TEMPLATE_USE);\n  const canDeleteTemplate = hasPermission(TOUR_PERMISSIONS.TOUR_TEMPLATE_DELETE);\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const [categoryFilter, setCategoryFilter] = useState<TemplateCategory | 'all'>('all');\n  const [publicOnly, setPublicOnly] = useState(false);\n\n  const { data, loading } = useGetTourTemplatesQuery({\n    skip: !canListTemplates,\n    variables: {\n      isPublic: publicOnly || undefined,\n      category: categoryFilter === 'all' ? undefined : categoryFilter,\n    },\n  });\n  const templates = data?.tourTemplates ?? [];\n\n  const filteredTemplates = templates.filter(\n    (t: (typeof templates)[number]) =>\n      !searchQuery || t.name.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  const [createFromTemplate] = useCreateTourFromTemplateMutation();\n\n  const handleUseTemplate = async (templateId: string) => {\n    nativeImpact('light');\n    try {\n      const { data } = await createFromTemplate({\n        variables: { templateId },\n      });\n      if (data?.createTourFromTemplate) {\n        void nativeNotify('success');\n        navigate(`${basePath}/${data.createTourFromTemplate.id}/edit`);\n      }\n    } catch (error) {\n      void nativeNotify('error');\n      console.error('Failed to create tour from template:', error);\n    }\n  };\n\n  const [deleteTemplate] = useDeleteTourTemplateMutation();\n\n  const handleDeleteTemplate = async (templateId: string) => {\n    try {\n      await deleteTemplate({\n        variables: { id: templateId },\n        refetchQueries: ['GetTourTemplates'],\n      });\n      void nativeNotify('success');\n    } catch (error) {\n      void nativeNotify('error');\n      console.error('Failed to delete template:', error);\n    }\n  };\n\n  const handleDeleteTemplateClick = async (templateId: string) => {\n    nativeImpact('medium');\n    const message = tr('templateLibrary.deleteConfirm');\n    const nativeResult = await nativeConfirm({\n      title: tr('templateLibrary.deleteConfirm'),\n      message,\n    });\n    const confirmed = nativeResult === null ? window.confirm(message) : nativeResult;\n    if (confirmed) await handleDeleteTemplate(templateId);\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold\">{tr('templateLibrary.title')}</h1>\n        <p className=\"text-sm text-muted-foreground\">{tr('templateLibrary.subtitle')}</p>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col sm:flex-row gap-3\">\n        <div className=\"flex-1 relative\">\n          <Search\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n            size={20}\n          />\n          <input\n            type=\"text\"\n            placeholder={tr('templateLibrary.searchPlaceholder')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 border border-border rounded-md bg-background\"\n          />\n        </div>\n        <select\n          value={categoryFilter}\n          onChange={(e) => setCategoryFilter(e.target.value as TemplateCategory | 'all')}\n          className=\"px-4 py-2 border border-border rounded-md bg-background\"\n        >\n          <option value=\"all\">{tr('templateLibrary.allCategories')}</option>\n          <option value=\"ONBOARDING\">{tr('templateLibrary.categoryOnboarding')}</option>\n          <option value=\"FEATURE_ANNOUNCEMENT\">\n            {tr('templateLibrary.categoryFeatureAnnouncement')}\n          </option>\n          <option value=\"HELP\">{tr('templateLibrary.categoryHelp')}</option>\n          <option value=\"CUSTOM\">{tr('templateLibrary.categoryCustom')}</option>\n        </select>\n        <label className=\"flex items-center gap-2 px-4 py-2 border border-border rounded-md bg-background cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            checked={publicOnly}\n            onChange={(e) => setPublicOnly(e.target.checked)}\n            className=\"rounded\"\n          />\n          <span className=\"text-sm\">{tr('templateLibrary.publicOnly')}</span>\n        </label>\n      </div>\n\n      {/* Templates Grid */}\n      {loading ? (\n        <div className=\"text-center py-12\">\n          <p className=\"text-muted-foreground\">{tr('templateLibrary.loading')}</p>\n        </div>\n      ) : filteredTemplates.length > 0 ? (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {filteredTemplates.map((template: (typeof filteredTemplates)[number]) => (\n            <div\n              key={template.id}\n              className=\"border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow\"\n            >\n              {/* Thumbnail */}\n              <div className=\"aspect-video bg-muted flex items-center justify-center\">\n                {template.thumbnail ? (\n                  <img\n                    src={template.thumbnail}\n                    alt={template.name}\n                    className=\"w-full h-full object-cover\"\n                  />\n                ) : (\n                  <LayoutTemplate className=\"text-muted-foreground\" size={48} />\n                )}\n              </div>\n\n              {/* Content */}\n              <div className=\"p-4\">\n                <div className=\"flex items-start justify-between mb-2\">\n                  <h3 className=\"font-semibold\">{template.name}</h3>\n                  <div className=\"flex gap-1\">\n                    {template.isPremium && <Star className=\"text-warning\" size={16} />}\n                    {template.isPublic ? (\n                      <Globe className=\"text-muted-foreground\" size={16} />\n                    ) : (\n                      <Lock className=\"text-muted-foreground\" size={16} />\n                    )}\n                  </div>\n                </div>\n\n                {template.description && (\n                  <p className=\"text-sm text-muted-foreground mb-3 line-clamp-2\">\n                    {template.description}\n                  </p>\n                )}\n\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-xs text-muted-foreground\">\n                    {tr('templateLibrary.usedTimes')} {template.useCount}{' '}\n                    {tr('templateLibrary.times')}\n                  </span>\n                  <div className=\"flex items-center gap-2\">\n                    {canDeleteTemplate && (\n                      <button\n                        onClick={() => void handleDeleteTemplateClick(template.id)}\n                        className=\"p-1 text-muted-foreground hover:text-destructive rounded-md\"\n                      >\n                        <Trash2 size={16} />\n                      </button>\n                    )}\n                    {canUseTemplate && (\n                      <button\n                        onClick={() => handleUseTemplate(template.id)}\n                        className=\"px-3 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm\"\n                      >\n                        {tr('templateLibrary.useTemplate')}\n                      </button>\n                    )}\n                  </div>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : (\n        <div className=\"text-center py-12 border border-dashed border-border rounded-md\">\n          <LayoutTemplate className=\"mx-auto mb-4 text-muted-foreground\" size={48} />\n          <p className=\"text-muted-foreground mb-2\">{tr('templateLibrary.noTemplatesFound')}</p>\n          <p className=\"text-sm text-muted-foreground\">{tr('templateLibrary.adjustFilters')}</p>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/TourBuilderPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tour builder page
+ * Create or edit tour metadata
+ */
+export declare function TourBuilderPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TourBuilderPage.d.ts.map

package/dist/tours/pages/TourBuilderPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourBuilderPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/TourBuilderPage.tsx"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,wBAAgB,eAAe,4CAmZ9B"}