@burdenoff/microfe-tours 2026.828.1 → 2026.830.2

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

@@ -1 +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';\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 { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport {\n  OptionalFields,\n  Button,\n  GlassCard,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { MarkdownEditor } from '../components/MarkdownEditor';\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';\nimport { emitToursApiFailed } from '../telemetry';\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 toursContext = useToursContext();\n  const { basePath = '/' } = toursContext;\n  const eventBus = useEventBus();\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(\n    () => typeof window !== 'undefined' && window.innerWidth < 768\n  );\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    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 {\n        emitToursApiFailed(eventBus, 'step.save', toursContext);\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 {\n      emitToursApiFailed(eventBus, 'media.attach', toursContext);\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-bg-surface\">\n      {/* Header */}\n      <div className=\"border-b border-border-subtle p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 bg-bg-surface\">\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"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-text-secondary\">\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              type=\"button\"\n              onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n              className=\"px-3 py-2 border border-border-subtle 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-action-primary-bg/20 rounded-full\">\n                  {steps.length}\n                </span>\n              )}\n            </button>\n          )}\n\n          {canCreateStep && (\n            <button\n              type=\"button\"\n              onClick={handleAddStep}\n              className=\"px-3 sm:px-4 py-2 border border-border-subtle 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              type=\"button\"\n              onClick={handleSaveSteps}\n              disabled={saving || !canUpdateStep}\n              className=\"min-h-[44px] 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=\"px-3 sm:px-4 pt-3 sm:pt-4\">\n        <PagePurpose>{tr('stepEditor.purpose')}</PagePurpose>\n      </div>\n\n      <div className=\"flex-1 flex overflow-hidden relative\">\n        {/* Mobile Sidebar Overlay */}\n        {isMobile && isSidebarOpen && (\n          <button\n            type=\"button\"\n            aria-label={tr('stepEditor.closeSteps')}\n            className=\"fixed inset-0 bg-foreground/40 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-[min(18rem,calc(100vw-2rem))] 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-subtle overflow-y-auto bg-bg-surface\n          `}\n        >\n          {/* Mobile sidebar header */}\n          {isMobile && (\n            <div className=\"flex items-center justify-between p-4 border-b border-border-subtle sticky top-0 bg-bg-surface z-10\">\n              <h2 className=\"font-semibold\">{tr('stepEditor.tourSteps')}</h2>\n              <button\n                type=\"button\"\n                onClick={() => setIsSidebarOpen(false)}\n                className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n                aria-label={tr('stepEditor.closeSteps')}\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-text-secondary\">\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                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => handleSelectStep(step)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      handleSelectStep(step);\n                    }\n                  }}\n                  className={`p-3 border rounded-md cursor-pointer transition-colors ${\n                    selectedStep?.id === step.id\n                      ? 'border-primary bg-action-primary-bg/10 shadow-[var(--shadow-pop)]'\n                      : 'border-border-seam 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-text-secondary 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-text-secondary 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                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            if (index > 0) {\n                              moveStep(index, index - 1);\n                            }\n                          }}\n                          className=\"p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] 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                          type=\"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 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] 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                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            deleteStep(step.id);\n                          }}\n                          className=\"p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-status-error-bg/10 rounded text-status-error-text\"\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-bg-sunken/50 rounded-lg p-2 mb-4\">\n                  <button\n                    type=\"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 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30\"\n                    aria-label={tr('stepEditor.previousStep')}\n                  >\n                    <ChevronLeft size={20} />\n                  </button>\n                  <span className=\"text-sm text-text-secondary\">\n                    {tr('stepEditor.stepNumber')}{' '}\n                    {steps.findIndex((s) => s.id === selectedStep.id) + 1} {tr('stepEditor.of')}{' '}\n                    {steps.length}\n                  </span>\n                  <button\n                    type=\"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 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30\"\n                    aria-label={tr('stepEditor.nextStep')}\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\" htmlFor=\"step-editor-title\">\n                  {tr('stepEditor.stepTitle')} *\n                </label>\n                <input\n                  id=\"step-editor-title\"\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-subtle rounded-md bg-bg-surface text-sm sm:text-base\"\n                  placeholder={tr('stepEditor.stepTitlePlaceholder')}\n                  aria-label={tr('stepEditor.stepTitle')}\n                />\n              </div>\n\n              {/* Content */}\n              <MarkdownEditor\n                id=\"step-editor-content\"\n                label={`${tr('stepEditor.content')} *`}\n                value={selectedStep.content}\n                onChange={(content) => updateStepField(selectedStep.id, 'content', content)}\n                rows={4}\n                placeholder={tr('stepEditor.contentPlaceholder')}\n                aria-label={tr('stepEditor.content')}\n              />\n\n              {/* Selector */}\n              <div>\n                <label\n                  className=\"block text-sm font-medium mb-2\"\n                  htmlFor=\"step-editor-css-selector\"\n                >\n                  {tr('stepEditor.cssSelector')} *\n                  <span className=\"text-text-secondary font-normal ml-2\">\n                    ({tr('stepEditor.targetElement')})\n                  </span>\n                </label>\n                <input\n                  id=\"step-editor-css-selector\"\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-subtle rounded-md bg-bg-surface font-mono text-sm\"\n                  aria-label=\"{tr('stepEditor.cssSelector')} *\n                  \n                    ({tr('stepEditor.targetElement')})\"\n                />\n                <p className=\"text-xs text-text-secondary mt-1\">{tr('stepEditor.dataTourHint')}</p>\n              </div>\n\n              {/* Placement */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"step-editor-placement\">\n                  {tr('stepEditor.tooltipPlacement')}\n                </label>\n                <select\n                  id=\"step-editor-placement\"\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-subtle rounded-md bg-bg-surface text-sm sm:text-base\"\n                  aria-label={tr('stepEditor.tooltipPlacement')}\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-subtle 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-subtle\">\n                  <p className=\"text-xs text-text-secondary mb-3\">\n                    {tr('stepEditor.deviceSelectorHint')}\n                  </p>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-mobile-selector\"\n                    >\n                      {tr('stepEditor.mobileSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-mobile-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.mobileSelector')}\n                    />\n                  </div>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-tablet-selector\"\n                    >\n                      {tr('stepEditor.tabletSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-tablet-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.tabletSelector')}\n                    />\n                  </div>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-desktop-selector\"\n                    >\n                      {tr('stepEditor.desktopSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-desktop-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.desktopSelector')}\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-subtle 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=\"size-4 rounded\"\n                    aria-label=\"Require interaction\"\n                  />\n                  <div>\n                    <div className=\"text-sm font-medium\">Require interaction</div>\n                    <div className=\"text-xs text-text-secondary\">\n                      User must interact with the highlighted element before advancing.\n                    </div>\n                  </div>\n                </label>\n\n                <div>\n                  <label\n                    className=\"block text-sm font-medium mb-2\"\n                    htmlFor=\"step-editor-wait-timeout\"\n                  >\n                    Wait for timeout (ms)\n                  </label>\n                  <input\n                    id=\"step-editor-wait-timeout\"\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-subtle rounded-md bg-bg-surface text-sm\"\n                    placeholder=\"1500\"\n                    aria-label=\"Wait for timeout (ms)\"\n                  />\n                </div>\n              </div>\n\n              {/* Advanced: step timing / skip conditions / analytics tags — collapse the long-tail knobs */}\n              <OptionalFields\n                title=\"Advanced settings\"\n                description=\"Step-timing waits, skip conditions, and analytics tags.\"\n              >\n                <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <div>\n                    <label\n                      className=\"block text-sm font-medium mb-2\"\n                      htmlFor=\"step-editor-wait-selector\"\n                    >\n                      Wait for selector\n                    </label>\n                    <input\n                      id=\"step-editor-wait-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      placeholder=\"[data-tour='agents-tabs']\"\n                      aria-label=\"Wait for selector\"\n                    />\n                  </div>\n\n                  <div>\n                    <label\n                      className=\"block text-sm font-medium mb-2\"\n                      htmlFor=\"step-editor-wait-event\"\n                    >\n                      Wait for event\n                    </label>\n                    <input\n                      id=\"step-editor-wait-event\"\n                      type=\"text\"\n                      value={selectedStep.waitForEvent || ''}\n                      onChange={(e) =>\n                        updateStepField(\n                          selectedStep.id,\n                          'waitForEvent',\n                          e.target.value || undefined\n                        )\n                      }\n                      className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm\"\n                      placeholder=\"tour:ready\"\n                      aria-label=\"Wait for event\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"mt-4\">\n                  <label\n                    className=\"block text-sm font-medium mb-2\"\n                    htmlFor=\"step-editor-skip-conditions\"\n                  >\n                    Skip conditions (JSON)\n                  </label>\n                  <textarea\n                    id=\"step-editor-skip-conditions\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                    placeholder='{\"selectorMissing\":\"[data-tour=\\\"missing\\\"]\"}'\n                    aria-label=\"Skip conditions (JSON)\"\n                  />\n                </div>\n              </OptionalFields>\n\n              <GlassCard treatment=\"plain\" className=\"p-4 space-y-4 border-border-seam\">\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-subtle p-2 text-sm\"\n                      >\n                        <div>\n                          <div className=\"font-medium\">{item.media.name}</div>\n                          <div className=\"text-xs text-text-secondary\">{item.position}</div>\n                        </div>\n                        <span className=\"text-xs text-text-secondary\">{item.media.type}</span>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <p className=\"text-sm text-text-secondary\">No media attached to this step yet.</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-subtle rounded-md bg-bg-surface text-sm\"\n                    aria-label=\"Select media to attach\"\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-subtle rounded-md bg-bg-surface text-sm\"\n                    aria-label=\"Attachment position\"\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 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50\"\n                  >\n                    Attach\n                  </button>\n                </div>\n              </GlassCard>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <IllustratedEmptyState\n                illustration={steps.length > 0 ? 'empty-generic' : 'onboarding'}\n                title={tr('stepEditor.emptyTitle')}\n                description={\n                  steps.length > 0\n                    ? tr('stepEditor.selectStepToEdit')\n                    : tr('stepEditor.createFirstStep')\n                }\n                action={\n                  steps.length === 0 && canCreateStep ? (\n                    <Button type=\"button\" onClick={handleAddStep} className=\"min-h-[44px]\">\n                      <Plus size={18} />\n                      {tr('stepEditor.addFirstStep')}\n                    </Button>\n                  ) : undefined\n                }\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepEditorPage.js","names":[],"sources":["../../../src/tours/pages/StepEditorPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useParams, useNavigate } from 'react-router';\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 { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport {\n  OptionalFields,\n  Button,\n  GlassCard,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { MarkdownEditor } from '../components/MarkdownEditor';\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';\nimport { emitToursApiFailed } from '../telemetry';\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 toursContext = useToursContext();\n  const { basePath = '/' } = toursContext;\n  const eventBus = useEventBus();\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(\n    () => typeof window !== 'undefined' && window.innerWidth < 768\n  );\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    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 {\n        emitToursApiFailed(eventBus, 'step.save', toursContext);\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(\n        tr('stepEditor.saveBeforeAttach', 'Save your steps before attaching media to them.')\n      );\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 {\n      emitToursApiFailed(eventBus, 'media.attach', toursContext);\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-bg-surface\">\n      {/* Header */}\n      <div className=\"border-b border-border-subtle p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 bg-bg-surface\">\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"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-text-secondary\">\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              type=\"button\"\n              onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n              className=\"px-3 py-2 border border-border-subtle 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-action-primary-bg/20 rounded-full\">\n                  {steps.length}\n                </span>\n              )}\n            </button>\n          )}\n\n          {canCreateStep && (\n            <button\n              type=\"button\"\n              onClick={handleAddStep}\n              className=\"px-3 sm:px-4 py-2 border border-border-subtle 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              type=\"button\"\n              onClick={handleSaveSteps}\n              disabled={saving || !canUpdateStep}\n              className=\"min-h-[44px] 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=\"px-3 sm:px-4 pt-3 sm:pt-4\">\n        <PagePurpose>{tr('stepEditor.purpose')}</PagePurpose>\n      </div>\n\n      <div className=\"flex-1 flex overflow-hidden relative\">\n        {/* Mobile Sidebar Overlay */}\n        {isMobile && isSidebarOpen && (\n          <button\n            type=\"button\"\n            aria-label={tr('stepEditor.closeSteps')}\n            className=\"fixed inset-0 bg-foreground/40 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-[min(18rem,calc(100vw-2rem))] 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-subtle overflow-y-auto bg-bg-surface\n          `}\n        >\n          {/* Mobile sidebar header */}\n          {isMobile && (\n            <div className=\"flex items-center justify-between p-4 border-b border-border-subtle sticky top-0 bg-bg-surface z-10\">\n              <h2 className=\"font-semibold\">{tr('stepEditor.tourSteps')}</h2>\n              <button\n                type=\"button\"\n                onClick={() => setIsSidebarOpen(false)}\n                className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n                aria-label={tr('stepEditor.closeSteps')}\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-text-secondary\">\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                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => handleSelectStep(step)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      handleSelectStep(step);\n                    }\n                  }}\n                  className={`p-3 border rounded-md cursor-pointer transition-colors ${\n                    selectedStep?.id === step.id\n                      ? 'border-primary bg-action-primary-bg/10 shadow-[var(--shadow-pop)]'\n                      : 'border-border-seam 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-text-secondary 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-text-secondary 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                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            if (index > 0) {\n                              moveStep(index, index - 1);\n                            }\n                          }}\n                          className=\"p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-accent rounded\"\n                          title={tr('stepEditor.moveStepUp', 'Move step up')}\n                          aria-label={tr('stepEditor.moveStepUp', 'Move step up')}\n                          disabled={index === 0}\n                        >\n                          <ChevronUp size={14} />\n                        </button>\n                        <button\n                          type=\"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 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-accent rounded\"\n                          title={tr('stepEditor.moveStepDown', 'Move step down')}\n                          aria-label={tr('stepEditor.moveStepDown', 'Move step down')}\n                          disabled={index === steps.length - 1}\n                        >\n                          <ChevronDown size={14} />\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            deleteStep(step.id);\n                          }}\n                          className=\"p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-status-error-bg/10 rounded text-status-error-text\"\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-bg-sunken/50 rounded-lg p-2 mb-4\">\n                  <button\n                    type=\"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 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30\"\n                    aria-label={tr('stepEditor.previousStep')}\n                  >\n                    <ChevronLeft size={20} />\n                  </button>\n                  <span className=\"text-sm text-text-secondary\">\n                    {tr('stepEditor.stepNumber')}{' '}\n                    {steps.findIndex((s) => s.id === selectedStep.id) + 1} {tr('stepEditor.of')}{' '}\n                    {steps.length}\n                  </span>\n                  <button\n                    type=\"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 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30\"\n                    aria-label={tr('stepEditor.nextStep')}\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\" htmlFor=\"step-editor-title\">\n                  {tr('stepEditor.stepTitle')} *\n                </label>\n                <input\n                  id=\"step-editor-title\"\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-subtle rounded-md bg-bg-surface text-sm sm:text-base\"\n                  placeholder={tr('stepEditor.stepTitlePlaceholder')}\n                  aria-label={tr('stepEditor.stepTitle')}\n                />\n              </div>\n\n              {/* Content */}\n              <MarkdownEditor\n                id=\"step-editor-content\"\n                label={`${tr('stepEditor.content')} *`}\n                value={selectedStep.content}\n                onChange={(content) => updateStepField(selectedStep.id, 'content', content)}\n                rows={4}\n                placeholder={tr('stepEditor.contentPlaceholder')}\n                aria-label={tr('stepEditor.content')}\n              />\n\n              {/* Selector */}\n              <div>\n                <label\n                  className=\"block text-sm font-medium mb-2\"\n                  htmlFor=\"step-editor-css-selector\"\n                >\n                  {tr('stepEditor.cssSelector')} *\n                  <span className=\"text-text-secondary font-normal ml-2\">\n                    ({tr('stepEditor.targetElement')})\n                  </span>\n                </label>\n                <input\n                  id=\"step-editor-css-selector\"\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-subtle rounded-md bg-bg-surface font-mono text-sm\"\n                  aria-label={`${tr('stepEditor.cssSelector')} * (${tr('stepEditor.targetElement')})`}\n                />\n                <p className=\"text-xs text-text-secondary mt-1\">{tr('stepEditor.dataTourHint')}</p>\n              </div>\n\n              {/* Placement */}\n              <div>\n                <label className=\"block text-sm font-medium mb-2\" htmlFor=\"step-editor-placement\">\n                  {tr('stepEditor.tooltipPlacement')}\n                </label>\n                <select\n                  id=\"step-editor-placement\"\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-subtle rounded-md bg-bg-surface text-sm sm:text-base\"\n                  aria-label={tr('stepEditor.tooltipPlacement')}\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-subtle 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-subtle\">\n                  <p className=\"text-xs text-text-secondary mb-3\">\n                    {tr('stepEditor.deviceSelectorHint')}\n                  </p>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-mobile-selector\"\n                    >\n                      {tr('stepEditor.mobileSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-mobile-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.mobileSelector')}\n                    />\n                  </div>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-tablet-selector\"\n                    >\n                      {tr('stepEditor.tabletSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-tablet-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.tabletSelector')}\n                    />\n                  </div>\n                  <div>\n                    <label\n                      className=\"block text-xs font-medium mb-1\"\n                      htmlFor=\"step-editor-desktop-selector\"\n                    >\n                      {tr('stepEditor.desktopSelector')}\n                    </label>\n                    <input\n                      id=\"step-editor-desktop-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      aria-label={tr('stepEditor.desktopSelector')}\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-subtle 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=\"size-4 rounded\"\n                    aria-label={tr('stepEditor.requireInteraction', 'Require interaction')}\n                  />\n                  <div>\n                    <div className=\"text-sm font-medium\">\n                      {tr('stepEditor.requireInteraction', 'Require interaction')}\n                    </div>\n                    <div className=\"text-xs text-text-secondary\">\n                      {tr(\n                        'stepEditor.requireInteractionDescription',\n                        'User must interact with the highlighted element before advancing.'\n                      )}\n                    </div>\n                  </div>\n                </label>\n\n                <div>\n                  <label\n                    className=\"block text-sm font-medium mb-2\"\n                    htmlFor=\"step-editor-wait-timeout\"\n                  >\n                    {tr('stepEditor.waitForTimeout', 'Wait for timeout (ms)')}\n                  </label>\n                  <input\n                    id=\"step-editor-wait-timeout\"\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-subtle rounded-md bg-bg-surface text-sm\"\n                    placeholder=\"1500\"\n                    aria-label={tr('stepEditor.waitForTimeout', 'Wait for timeout (ms)')}\n                  />\n                </div>\n              </div>\n\n              {/* Advanced: step timing / skip conditions / analytics tags — collapse the long-tail knobs */}\n              <OptionalFields\n                title={tr('stepEditor.advancedSettings', 'Advanced settings')}\n                description={tr(\n                  'stepEditor.advancedSettingsDescription',\n                  'Step-timing waits, skip conditions, and analytics tags.'\n                )}\n              >\n                <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <div>\n                    <label\n                      className=\"block text-sm font-medium mb-2\"\n                      htmlFor=\"step-editor-wait-selector\"\n                    >\n                      {tr('stepEditor.waitForSelector', 'Wait for selector')}\n                    </label>\n                    <input\n                      id=\"step-editor-wait-selector\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                      placeholder=\"[data-tour='agents-tabs']\"\n                      aria-label={tr('stepEditor.waitForSelector', 'Wait for selector')}\n                    />\n                  </div>\n\n                  <div>\n                    <label\n                      className=\"block text-sm font-medium mb-2\"\n                      htmlFor=\"step-editor-wait-event\"\n                    >\n                      {tr('stepEditor.waitForEvent', 'Wait for event')}\n                    </label>\n                    <input\n                      id=\"step-editor-wait-event\"\n                      type=\"text\"\n                      value={selectedStep.waitForEvent || ''}\n                      onChange={(e) =>\n                        updateStepField(\n                          selectedStep.id,\n                          'waitForEvent',\n                          e.target.value || undefined\n                        )\n                      }\n                      className=\"w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm\"\n                      placeholder=\"tour:ready\"\n                      aria-label={tr('stepEditor.waitForEvent', 'Wait for event')}\n                    />\n                  </div>\n                </div>\n\n                <div className=\"mt-4\">\n                  <label\n                    className=\"block text-sm font-medium mb-2\"\n                    htmlFor=\"step-editor-skip-conditions\"\n                  >\n                    {tr('stepEditor.skipConditions', 'Skip conditions (JSON)')}\n                  </label>\n                  <textarea\n                    id=\"step-editor-skip-conditions\"\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-subtle rounded-md bg-bg-surface text-sm font-mono\"\n                    placeholder='{\"selectorMissing\":\"[data-tour=\\\"missing\\\"]\"}'\n                    aria-label={tr('stepEditor.skipConditions', 'Skip conditions (JSON)')}\n                  />\n                </div>\n              </OptionalFields>\n\n              <GlassCard treatment=\"plain\" className=\"p-4 space-y-4 border-border-seam\">\n                <div className=\"flex items-center gap-2\">\n                  <Paperclip size={18} />\n                  <h3 className=\"text-sm font-semibold\">\n                    {tr('stepEditor.stepMedia', 'Step media')}\n                  </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-subtle p-2 text-sm\"\n                      >\n                        <div>\n                          <div className=\"font-medium\">{item.media.name}</div>\n                          <div className=\"text-xs text-text-secondary\">{item.position}</div>\n                        </div>\n                        <span className=\"text-xs text-text-secondary\">{item.media.type}</span>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <p className=\"text-sm text-text-secondary\">\n                    {tr('stepEditor.noMediaAttached', '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-subtle rounded-md bg-bg-surface text-sm\"\n                    aria-label={tr('stepEditor.selectUploadedMedia', 'Select uploaded media')}\n                  >\n                    <option value=\"\">\n                      {mediaLoading\n                        ? tr('stepEditor.loadingMedia', 'Loading media...')\n                        : tr('stepEditor.selectUploadedMedia', '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-subtle rounded-md bg-bg-surface text-sm\"\n                    aria-label={tr('stepEditor.positionHeader', 'Header')}\n                  >\n                    <option value=\"header\">{tr('stepEditor.positionHeader', 'Header')}</option>\n                    <option value=\"body\">{tr('stepEditor.positionBody', 'Body')}</option>\n                    <option value=\"footer\">{tr('stepEditor.positionFooter', 'Footer')}</option>\n                  </select>\n\n                  <button\n                    type=\"button\"\n                    onClick={handleAttachMedia}\n                    disabled={attachingMedia || !attachmentMediaId}\n                    className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50\"\n                  >\n                    {tr('stepEditor.attach', 'Attach')}\n                  </button>\n                </div>\n              </GlassCard>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <IllustratedEmptyState\n                illustration={steps.length > 0 ? 'empty-generic' : 'onboarding'}\n                title={tr('stepEditor.emptyTitle')}\n                description={\n                  steps.length > 0\n                    ? tr('stepEditor.selectStepToEdit')\n                    : tr('stepEditor.createFirstStep')\n                }\n                action={\n                  steps.length === 0 && canCreateStep ? (\n                    <Button type=\"button\" onClick={handleAddStep} className=\"min-h-[44px]\">\n                      <Plus size={18} />\n                      {tr('stepEditor.addFirstStep')}\n                    </Button>\n                  ) : undefined\n                }\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/SystemAnalyticsPage.js

@@ -1,171 +1,167 @@
-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 { EmphasisPanel as p, GlassCard as m, IllustratedEmptyState as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
-import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useToursI18n as e } from "../i18n.js";
+import { useGetWorkspaceAnalyticsSummaryQuery as t } from "../../generated/global-operations.js";
+import { useToursPermissionAccess as n } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as r } from "../../constants/permissions.js";
+import { useToursFormatters as i } from "../utils/index.js";
+import { BarChart3 as a, Compass as o, Eye as s, Globe as c, TrendingUp as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { EmphasisPanel as f, GlassCard as p, IllustratedEmptyState as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
 //#region src/tours/pages/SystemAnalyticsPage.tsx
-function v() {
-	let { t: v } = _(), y = a((e, t) => {
-		let n = v(e);
-		return n === e ? t : n;
-	}, [v]), { hasPermission: b, isLoading: x } = t(), S = b(n.TOUR_ANALYTICS_READ), { data: C, loading: w } = e({ skip: x || !S });
-	if (!x && !S) return /* @__PURE__ */ d("div", {
+function g() {
+	let { tr: g } = e(), { hasPermission: _, isLoading: v } = n(), y = _(r.TOUR_ANALYTICS_READ), { data: b, loading: x } = t({ skip: v || !y }), { formatNumber: S, formatPercentage: C } = i();
+	if (!v && !y) return /* @__PURE__ */ u("div", {
 		className: "flex items-center justify-center h-full p-3 sm:p-6",
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: "text-center",
-			children: [/* @__PURE__ */ d("h2", {
+			children: [/* @__PURE__ */ u("h2", {
 				className: "text-lg font-semibold text-text-primary mb-2",
-				children: y("systemAnalytics.accessDenied", "Access Denied")
-			}), /* @__PURE__ */ d("p", {
+				children: g("systemAnalytics.accessDenied", "Access Denied")
+			}), /* @__PURE__ */ u("p", {
 				className: "text-sm text-text-secondary",
-				children: y("systemAnalytics.noPermission", "You do not have permission to view system analytics.")
+				children: g("systemAnalytics.noPermission", "You do not have permission to view system analytics.")
 			})]
 		})
 	});
-	if (w) return /* @__PURE__ */ d("div", {
+	if (x) return /* @__PURE__ */ u("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ d("p", {
+		children: /* @__PURE__ */ u("p", {
 			className: "text-text-secondary",
-			children: y("systemAnalytics.loading", "Loading analytics...")
+			children: g("systemAnalytics.loading", "Loading analytics...")
 		})
 	});
-	let T = C?.workspaceAnalyticsSummary;
-	return T ? /* @__PURE__ */ f("div", {
+	let w = b?.workspaceAnalyticsSummary;
+	return w ? /* @__PURE__ */ d("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [
-			/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+			/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
 				className: "text-xl sm:text-2xl font-bold",
-				children: y("systemAnalytics.title", "System Analytics")
-			}), /* @__PURE__ */ d("p", {
+				children: g("systemAnalytics.title", "System Analytics")
+			}), /* @__PURE__ */ u("p", {
 				className: "text-sm text-text-secondary",
-				children: y("systemAnalytics.subtitle", "Workspace-wide tour performance overview")
+				children: g("systemAnalytics.subtitle", "Workspace-wide tour performance overview")
 			})] }),
-			/* @__PURE__ */ d(g, { children: y("systemAnalytics.purpose", "Get the big-picture health of onboarding across the whole workspace: how many tours exist, how many are live, total reach, and the overall completion rate. Use it to judge whether your guided experiences are actually landing.") }),
-			/* @__PURE__ */ d(p, {
+			/* @__PURE__ */ u(h, { children: g("systemAnalytics.purpose", "Get the big-picture health of onboarding across the whole workspace: how many tours exist, how many are live, total reach, and the overall completion rate. Use it to judge whether your guided experiences are actually landing.") }),
+			/* @__PURE__ */ u(f, {
 				className: "p-4 sm:p-6",
-				children: /* @__PURE__ */ f("div", {
+				children: /* @__PURE__ */ d("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ f("div", {
+					children: [/* @__PURE__ */ d("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ u("div", {
 							className: "p-2 bg-action-primary-bg/10 rounded-md",
-							children: /* @__PURE__ */ d(o, {
+							children: /* @__PURE__ */ u(a, {
 								className: "text-primary",
 								size: 24
 							})
-						}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
 							className: "text-sm text-text-secondary",
-							children: y("systemAnalytics.completionRate", "Completion Rate")
-						}), /* @__PURE__ */ d("div", {
+							children: g("systemAnalytics.completionRate", "Completion Rate")
+						}), /* @__PURE__ */ u("div", {
 							className: "text-3xl font-bold tabular-nums",
-							children: i(T.overallCompletionRate)
+							children: C(w.overallCompletionRate)
 						})] })]
-					}), /* @__PURE__ */ d("p", {
+					}), /* @__PURE__ */ u("p", {
 						className: "text-sm text-text-secondary sm:max-w-xs",
-						children: y("systemAnalytics.completionRateHint", "The share of started tours that users finished across this workspace.")
+						children: g("systemAnalytics.completionRateHint", "The share of started tours that users finished across this workspace.")
 					})]
 				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ d("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
 				children: [
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ d(p, {
 						treatment: "glass",
 						className: "p-4",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3 mb-2",
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "p-2 bg-action-primary-bg/10 rounded-md",
-								children: /* @__PURE__ */ d(s, {
+								children: /* @__PURE__ */ u(o, {
 									className: "text-primary",
 									size: 20
 								})
-							}), /* @__PURE__ */ d("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "text-sm text-text-secondary",
-								children: y("systemAnalytics.totalTours", "Total Tours")
+								children: g("systemAnalytics.totalTours", "Total Tours")
 							})]
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: r(T.totalTours)
+							children: S(w.totalTours)
 						})]
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ d(p, {
 						treatment: "metric",
 						className: "p-4",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3 mb-2",
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "p-2 bg-success/10 rounded-md",
-								children: /* @__PURE__ */ d(l, {
+								children: /* @__PURE__ */ u(c, {
 									className: "text-success",
 									size: 20
 								})
-							}), /* @__PURE__ */ d("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "text-sm text-text-secondary",
-								children: y("systemAnalytics.publishedTours", "Published Tours")
+								children: g("systemAnalytics.publishedTours", "Published Tours")
 							})]
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: r(T.publishedTours)
+							children: S(w.publishedTours)
 						})]
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ d(p, {
 						treatment: "metric",
 						className: "p-4",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3 mb-2",
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "p-2 bg-info/10 rounded-md",
-								children: /* @__PURE__ */ d(c, {
+								children: /* @__PURE__ */ u(s, {
 									className: "text-info",
 									size: 20
 								})
-							}), /* @__PURE__ */ d("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "text-sm text-text-secondary",
-								children: y("systemAnalytics.totalViews", "Total Views")
+								children: g("systemAnalytics.totalViews", "Total Views")
 							})]
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: r(T.totalViews)
+							children: S(w.totalViews)
 						})]
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ d(p, {
 						treatment: "metric",
 						className: "p-4",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3 mb-2",
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "p-2 bg-warning/10 rounded-md",
-								children: /* @__PURE__ */ d(u, {
+								children: /* @__PURE__ */ u(l, {
 									className: "text-warning",
 									size: 20
 								})
-							}), /* @__PURE__ */ d("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "text-sm text-text-secondary",
-								children: y("systemAnalytics.totalCompletions", "Total Completions")
+								children: g("systemAnalytics.totalCompletions", "Total Completions")
 							})]
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: r(T.totalCompletions)
+							children: S(w.totalCompletions)
 						})]
 					})
 				]
 			})
 		]
-	}) : /* @__PURE__ */ d("div", {
+	}) : /* @__PURE__ */ u("div", {
 		className: "p-3 sm:p-6",
-		children: /* @__PURE__ */ d(h, {
+		children: /* @__PURE__ */ u(m, {
 			illustration: "empty-data",
-			title: y("systemAnalytics.noData", "No analytics data available"),
-			description: y("systemAnalytics.noDataHint", "Workspace-wide tour metrics appear once you have published tours and users have started seeing them. Publish a tour to begin collecting data.")
+			title: g("systemAnalytics.noData", "No analytics data available"),
+			description: g("systemAnalytics.noDataHint", "Workspace-wide tour metrics appear once you have published tours and users have started seeing them. Publish a tour to begin collecting data.")
 		})
 	});
 }
 //#endregion
-export { v as SystemAnalyticsPage };
+export { g as SystemAnalyticsPage };
 
 //# sourceMappingURL=SystemAnalyticsPage.js.map

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

@@ -1 +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 {\n  EmphasisPanel,\n  GlassCard,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\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-3 sm:p-6\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('systemAnalytics.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\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-text-secondary\">\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=\"p-3 sm:p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-data\"\n          title={tr('systemAnalytics.noData', 'No analytics data available')}\n          description={tr(\n            'systemAnalytics.noDataHint',\n            'Workspace-wide tour metrics appear once you have published tours and users have started seeing them. Publish a tour to begin collecting data.'\n          )}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold\">\n          {tr('systemAnalytics.title', 'System Analytics')}\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          {tr('systemAnalytics.subtitle', 'Workspace-wide tour performance overview')}\n        </p>\n      </div>\n\n      <PagePurpose>\n        {tr(\n          'systemAnalytics.purpose',\n          'Get the big-picture health of onboarding across the whole workspace: how many tours exist, how many are live, total reach, and the overall completion rate. Use it to judge whether your guided experiences are actually landing.'\n        )}\n      </PagePurpose>\n\n      {/* Headline KPI — the single emphasis zone on this page. */}\n      <EmphasisPanel className=\"p-4 sm:p-6\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n              <BarChart3 className=\"text-primary\" size={24} />\n            </div>\n            <div>\n              <div className=\"text-sm text-text-secondary\">\n                {tr('systemAnalytics.completionRate', 'Completion Rate')}\n              </div>\n              <div className=\"text-3xl font-bold tabular-nums\">\n                {formatPercentage(summary.overallCompletionRate)}\n              </div>\n            </div>\n          </div>\n          <p className=\"text-sm text-text-secondary sm:max-w-xs\">\n            {tr(\n              'systemAnalytics.completionRateHint',\n              'The share of started tours that users finished across this workspace.'\n            )}\n          </p>\n        </div>\n      </EmphasisPanel>\n\n      {/* Summary Cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <GlassCard treatment=\"glass\" className=\"p-4\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n              <Compass className=\"text-primary\" size={20} />\n            </div>\n            <span className=\"text-sm text-text-secondary\">\n              {tr('systemAnalytics.totalTours', 'Total Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(summary.totalTours)}</div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.publishedTours', 'Published Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">\n            {formatNumber(summary.publishedTours)}\n          </div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.totalViews', 'Total Views')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(summary.totalViews)}</div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.totalCompletions', 'Total Completions')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">\n            {formatNumber(summary.totalCompletions)}\n          </div>\n        </GlassCard>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SystemAnalyticsPage.js","names":[],"sources":["../../../src/tours/pages/SystemAnalyticsPage.tsx"],"sourcesContent":["import { Compass, Globe, Eye, TrendingUp, BarChart3 } from 'lucide-react';\nimport {\n  EmphasisPanel,\n  GlassCard,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { useToursI18n } from '../i18n';\nimport { useGetWorkspaceAnalyticsSummaryQuery } from '../../generated/global-operations';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursFormatters } 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 { tr } = useToursI18n();\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  const { formatNumber, formatPercentage } = useToursFormatters();\n\n  if (!permissionsLoading && !canViewAnalytics) {\n    return (\n      <div className=\"flex items-center justify-center h-full p-3 sm:p-6\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('systemAnalytics.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\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-text-secondary\">\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=\"p-3 sm:p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-data\"\n          title={tr('systemAnalytics.noData', 'No analytics data available')}\n          description={tr(\n            'systemAnalytics.noDataHint',\n            'Workspace-wide tour metrics appear once you have published tours and users have started seeing them. Publish a tour to begin collecting data.'\n          )}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold\">\n          {tr('systemAnalytics.title', 'System Analytics')}\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          {tr('systemAnalytics.subtitle', 'Workspace-wide tour performance overview')}\n        </p>\n      </div>\n\n      <PagePurpose>\n        {tr(\n          'systemAnalytics.purpose',\n          'Get the big-picture health of onboarding across the whole workspace: how many tours exist, how many are live, total reach, and the overall completion rate. Use it to judge whether your guided experiences are actually landing.'\n        )}\n      </PagePurpose>\n\n      {/* Headline KPI — the single emphasis zone on this page. */}\n      <EmphasisPanel className=\"p-4 sm:p-6\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n              <BarChart3 className=\"text-primary\" size={24} />\n            </div>\n            <div>\n              <div className=\"text-sm text-text-secondary\">\n                {tr('systemAnalytics.completionRate', 'Completion Rate')}\n              </div>\n              <div className=\"text-3xl font-bold tabular-nums\">\n                {formatPercentage(summary.overallCompletionRate)}\n              </div>\n            </div>\n          </div>\n          <p className=\"text-sm text-text-secondary sm:max-w-xs\">\n            {tr(\n              'systemAnalytics.completionRateHint',\n              'The share of started tours that users finished across this workspace.'\n            )}\n          </p>\n        </div>\n      </EmphasisPanel>\n\n      {/* Summary Cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <GlassCard treatment=\"glass\" className=\"p-4\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-action-primary-bg/10 rounded-md\">\n              <Compass className=\"text-primary\" size={20} />\n            </div>\n            <span className=\"text-sm text-text-secondary\">\n              {tr('systemAnalytics.totalTours', 'Total Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(summary.totalTours)}</div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.publishedTours', 'Published Tours')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">\n            {formatNumber(summary.publishedTours)}\n          </div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.totalViews', 'Total Views')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">{formatNumber(summary.totalViews)}</div>\n        </GlassCard>\n\n        <GlassCard treatment=\"metric\" className=\"p-4\">\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-text-secondary\">\n              {tr('systemAnalytics.totalCompletions', 'Total Completions')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold tabular-nums\">\n            {formatNumber(summary.totalCompletions)}\n          </div>\n        </GlassCard>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/TemplateLibraryPage.js

@@ -1,8 +1,8 @@
-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 { useToursI18n as e } from "../i18n.js";
+import { useToursContext as t } from "../providers/ToursProvider.js";
+import { useCreateTourFromTemplateMutation as n, useDeleteTourTemplateMutation as r, useGetTourTemplatesQuery as i } from "../../generated/global-operations.js";
+import { useToursPermissionAccess as a } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as o } from "../../constants/permissions.js";
 import { nativeConfirm as s, nativeImpact as c, nativeNotify as l } from "../../utils/nativeBridge.js";
 import { emitToursApiFailed as u } from "../telemetry.js";
 import { useState as d } from "react";
@@ -13,13 +13,13 @@ import { GlassCard as x, IllustratedEmptyState as S, PagePurpose as C } from "@b
 import { useEventBus as w } from "@burdenoff/fe-libs/shared/events";
 //#region src/tours/pages/TemplateLibraryPage.tsx
 function T() {
-	let { tr: T } = o(), E = b(), D = e(), { basePath: O = "/" } = D, k = w(), { hasPermission: A } = i(), j = A(a.TOUR_TEMPLATE_LIST), M = A(a.TOUR_TEMPLATE_USE), N = A(a.TOUR_TEMPLATE_DELETE), [P, F] = d(""), [I, L] = d("all"), [R, z] = d(!1), { data: B, loading: V } = r({
+	let { tr: T } = e(), E = b(), D = t(), { basePath: O = "/" } = D, k = w(), { hasPermission: A } = a(), j = A(o.TOUR_TEMPLATE_LIST), M = A(o.TOUR_TEMPLATE_USE), N = A(o.TOUR_TEMPLATE_DELETE), [P, F] = d(""), [I, L] = d("all"), [R, z] = d(!1), { data: B, loading: V } = i({
 		skip: !j,
 		variables: {
 			isPublic: R || void 0,
 			category: I === "all" ? void 0 : I
 		}
-	}), H = (B?.tourTemplates ?? []).filter((e) => !P || e.name.toLowerCase().includes(P.toLowerCase())), [U] = t(), W = async (e) => {
+	}), H = (B?.tourTemplates ?? []).filter((e) => !P || e.name.toLowerCase().includes(P.toLowerCase())), [U] = n(), W = async (e) => {
 		c("light");
 		try {
 			let { data: t } = await U({ variables: { templateId: e } });
@@ -27,7 +27,7 @@ function T() {
 		} catch {
 			l("error"), u(k, "template.create_from_template", D);
 		}
-	}, [G] = n(), K = async (e) => {
+	}, [G] = r(), K = async (e) => {
 		try {
 			await G({
 				variables: { id: e },