hazo_files 3.1.0 → 3.2.0

package/CHANGE_LOG.md

@@ -5,6 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 3.2.0 — 2026-08-04
+
+### Fixed
+
+Moved 3 packages from optional `peerDependencies` to `dependencies`. Each is imported
+statically at the top level of this package's own `dist/`, but was declared as
+an *optional* peer — and npm never auto-installs an optional peer, under any
+`legacy-peer-deps` setting. The result was a package that could not run as
+shipped: a consumer installed it, imported it, and the build failed with
+module-not-found on packages it had never heard of and had no reason to
+declare. They are implementation details of this package, so this package now
+brings them.
+
+- @dnd-kit/core@^6.0.0
+- @dnd-kit/sortable@^8.0.0
+- @dnd-kit/utilities@^3.0.0
+
+
+## 3.1.2 — 2026-08-04
+
+### Fixed
+
+Widened stale host-framework peer ranges that excluded currently-shipping
+majors and made a strict install unsatisfiable for React 19 consumers:
+
+- `react` / `react-dom`: `^18.0.0` -> `^18.0.0 || ^19.0.0`
+
+
 ## 3.1.0 — 2026-06-11
 
 **Additive** — no breaking changes from 3.0.x.

package/dist/background-upload/react/index.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 
@@ -107,7 +106,7 @@ interface HazoFileUploadProviderProps {
     config?: UploadManagerConfig;
     enable_toasts?: boolean;
 }
-declare function HazoFileUploadProvider({ children, config, enable_toasts, }: HazoFileUploadProviderProps): react_jsx_runtime.JSX.Element;
+declare function HazoFileUploadProvider({ children, config, enable_toasts, }: HazoFileUploadProviderProps): React__default.JSX.Element;
 
 declare class UploadManager {
     private jobs;

package/dist/background-upload/react/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 
@@ -107,7 +106,7 @@ interface HazoFileUploadProviderProps {
     config?: UploadManagerConfig;
     enable_toasts?: boolean;
 }
-declare function HazoFileUploadProvider({ children, config, enable_toasts, }: HazoFileUploadProviderProps): react_jsx_runtime.JSX.Element;
+declare function HazoFileUploadProvider({ children, config, enable_toasts, }: HazoFileUploadProviderProps): React__default.JSX.Element;
 
 declare class UploadManager {
     private jobs;

package/dist/ui/index.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 
 /**
  * Naming rule types for hazo_files package
@@ -223,13 +223,19 @@ interface FileBrowserState {
  * CreateFolderDialog Component
  * Dialog for creating a new folder
  */
+
 interface CreateFolderDialogProps {
     isOpen: boolean;
     onClose: () => void;
     onSubmit: (name: string) => Promise<void>;
     currentPath: string;
 }
-declare function CreateFolderDialog({ isOpen, onClose, onSubmit, currentPath, }: CreateFolderDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function CreateFolderDialog({ isOpen, onClose, onSubmit, currentPath, }: CreateFolderDialogProps): React__default.JSX.Element | null;
+
+/**
+ * RenameDialog Component
+ * Dialog for renaming a file or folder
+ */
 
 interface RenameDialogProps {
     isOpen: boolean;
@@ -237,7 +243,7 @@ interface RenameDialogProps {
     onClose: () => void;
     onSubmit: (newName: string) => Promise<void>;
 }
-declare function RenameDialog({ isOpen, item, onClose, onSubmit, }: RenameDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function RenameDialog({ isOpen, item, onClose, onSubmit, }: RenameDialogProps): React__default.JSX.Element | null;
 
 interface DeleteConfirmDialogProps {
     isOpen: boolean;
@@ -245,19 +251,20 @@ interface DeleteConfirmDialogProps {
     onClose: () => void;
     onConfirm: () => Promise<void>;
 }
-declare function DeleteConfirmDialog({ isOpen, item, onClose, onConfirm, }: DeleteConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function DeleteConfirmDialog({ isOpen, item, onClose, onConfirm, }: DeleteConfirmDialogProps): React.JSX.Element | null;
 
 /**
  * UploadDialog Component
  * Dialog for uploading files with drag and drop support
  */
+
 interface UploadDialogProps {
     isOpen: boolean;
     currentPath: string;
     onClose: () => void;
     onUpload: (files: FileList) => Promise<void>;
 }
-declare function UploadDialog({ isOpen, currentPath, onClose, onUpload, }: UploadDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function UploadDialog({ isOpen, currentPath, onClose, onUpload, }: UploadDialogProps): React__default.JSX.Element | null;
 
 /**
  * Extended metadata including database record data
@@ -302,7 +309,7 @@ interface FileInfoPanelProps {
  * // With custom styling
  * <FileInfoPanel item={file} className="p-4 bg-gray-50 rounded-lg" />
  */
-declare function FileInfoPanel({ item, metadata, isLoading, showCustomMetadata, className, }: FileInfoPanelProps): react_jsx_runtime.JSX.Element;
+declare function FileInfoPanel({ item, metadata, isLoading, showCustomMetadata, className, }: FileInfoPanelProps): React.JSX.Element;
 
 interface MetadataDialogProps {
     isOpen: boolean;
@@ -311,7 +318,7 @@ interface MetadataDialogProps {
     isLoading?: boolean;
     onClose: () => void;
 }
-declare function MetadataDialog({ isOpen, item, metadata, isLoading, onClose, }: MetadataDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function MetadataDialog({ isOpen, item, metadata, isLoading, onClose, }: MetadataDialogProps): React.JSX.Element | null;
 
 interface FileBrowserAPI$1 {
     listDirectory: (path: string) => Promise<OperationResult<FileSystemItem[]>>;
@@ -341,18 +348,24 @@ interface FileBrowserProps {
     onNavigate?: (path: string) => void;
     onSelect?: (item: FileSystemItem | null) => void;
 }
-declare function FileBrowser({ api, initialPath, showPreview, showTree, viewMode, className, treeWidth, previewHeight, onError, onNavigate, onSelect, }: FileBrowserProps): react_jsx_runtime.JSX.Element;
+declare function FileBrowser({ api, initialPath, showPreview, showTree, viewMode, className, treeWidth, previewHeight, onError, onNavigate, onSelect, }: FileBrowserProps): React.JSX.Element;
 
 /**
  * PathBreadcrumb Component
  * Displays the current path as a breadcrumb navigation
  */
+
 interface PathBreadcrumbProps {
     currentPath: string;
     onNavigate: (path: string) => void;
     className?: string;
 }
-declare function PathBreadcrumb({ currentPath, onNavigate, className }: PathBreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function PathBreadcrumb({ currentPath, onNavigate, className }: PathBreadcrumbProps): React__default.JSX.Element;
+
+/**
+ * FolderTree Component
+ * Displays a hierarchical tree view of folders
+ */
 
 interface FolderTreeProps {
     tree: TreeNode[];
@@ -364,7 +377,12 @@ interface FolderTreeProps {
     dropTargetPath?: string | null;
     className?: string;
 }
-declare function FolderTree({ tree, currentPath, onSelect, onExpand, onToggle, isDragging, dropTargetPath, className, }: FolderTreeProps): react_jsx_runtime.JSX.Element;
+declare function FolderTree({ tree, currentPath, onSelect, onExpand, onToggle, isDragging, dropTargetPath, className, }: FolderTreeProps): React__default.JSX.Element;
+
+/**
+ * FileList Component
+ * Displays a grid/list of files and folders
+ */
 
 interface FileListProps {
     files: FileSystemItem[];
@@ -372,13 +390,13 @@ interface FileListProps {
     isLoading: boolean;
     onSelect: (item: FileSystemItem) => void;
     onOpen: (item: FileSystemItem) => void;
-    onContextMenu?: (item: FileSystemItem, event: React.MouseEvent) => void;
+    onContextMenu?: (item: FileSystemItem, event: React__default.MouseEvent) => void;
     viewMode?: 'grid' | 'list';
     draggedItem?: FileSystemItem | null;
     dropTargetPath?: string | null;
     className?: string;
 }
-declare function FileList$1({ files, selectedItem, isLoading, onSelect, onOpen, onContextMenu, viewMode, draggedItem, dropTargetPath, className, }: FileListProps): react_jsx_runtime.JSX.Element;
+declare function FileList$1({ files, selectedItem, isLoading, onSelect, onOpen, onContextMenu, viewMode, draggedItem, dropTargetPath, className, }: FileListProps): React__default.JSX.Element;
 
 interface FilePreviewProps {
     item: FileSystemItem | null;
@@ -386,7 +404,12 @@ interface FilePreviewProps {
     getFileContent?: (path: string) => Promise<string>;
     className?: string;
 }
-declare function FilePreview({ item, getPreviewUrl, getFileContent, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ item, getPreviewUrl, getFileContent, className, }: FilePreviewProps): React.JSX.Element;
+
+/**
+ * FileActions Component
+ * Toolbar with action buttons for file operations
+ */
 
 interface FileActionsProps {
     selectedItem: FileSystemItem | null;
@@ -399,7 +422,12 @@ interface FileActionsProps {
     isLoading?: boolean;
     className?: string;
 }
-declare function FileActions({ selectedItem, onCreateFolder, onUpload, onDownload, onDelete, onRename, onRefresh, isLoading, className, }: FileActionsProps): react_jsx_runtime.JSX.Element;
+declare function FileActions({ selectedItem, onCreateFolder, onUpload, onDownload, onDelete, onRename, onRefresh, isLoading, className, }: FileActionsProps): React__default.JSX.Element;
+
+/**
+ * ContextMenu Component
+ * Custom right-click context menu positioned at cursor location
+ */
 
 interface IconProps$1 {
     className?: string;
@@ -408,7 +436,7 @@ interface IconProps$1 {
 interface ContextMenuItem {
     id: string;
     label: string;
-    icon?: React.ComponentType<IconProps$1>;
+    icon?: React__default.ComponentType<IconProps$1>;
     onClick: () => void;
     disabled?: boolean;
     danger?: boolean;
@@ -422,13 +450,18 @@ interface ContextMenuProps {
     } | null;
     onClose: () => void;
 }
-declare function ContextMenu({ items, position, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ContextMenu({ items, position, onClose }: ContextMenuProps): React__default.JSX.Element | null;
 
 interface DragPreviewProps {
     item: FileSystemItem;
     className?: string;
 }
-declare function DragPreview({ item, className }: DragPreviewProps): react_jsx_runtime.JSX.Element;
+declare function DragPreview({ item, className }: DragPreviewProps): React.JSX.Element;
+
+/**
+ * FileBrowser Context
+ * Provides state management for the file browser component
+ */
 
 type FileBrowserAction = {
     type: 'SET_LOADING';
@@ -485,7 +518,7 @@ interface FileBrowserAPI {
 }
 interface FileBrowserContextValue {
     state: FileBrowserState;
-    dispatch: React.Dispatch<FileBrowserAction>;
+    dispatch: React__default.Dispatch<FileBrowserAction>;
     api: FileBrowserAPI | null;
     navigateTo: (path: string) => Promise<void>;
     refresh: () => Promise<void>;
@@ -504,7 +537,7 @@ interface FileBrowserProviderProps {
     api: FileBrowserAPI;
     initialPath?: string;
 }
-declare function FileBrowserProvider({ children, api, initialPath }: FileBrowserProviderProps): react_jsx_runtime.JSX.Element;
+declare function FileBrowserProvider({ children, api, initialPath }: FileBrowserProviderProps): React__default.JSX.Element;
 declare function useFileBrowserContext(): FileBrowserContextValue;
 
 /**
@@ -576,39 +609,44 @@ interface UseMultiFileOperationsReturn {
 }
 declare function useMultiFileOperations(): UseMultiFileOperationsReturn;
 
+/**
+ * File Type Icons
+ * SVG icons for different file types
+ */
+
 interface IconProps {
     className?: string;
     size?: number;
 }
-declare function FolderIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FolderOpenIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FileIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FileTextIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ImageIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function VideoIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function AudioIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ArchiveIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PdfIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function CodeIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function UploadIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function DownloadIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function TrashIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PencilIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PlusIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function RefreshIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ChevronRightIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ChevronDownIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function HomeIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function MoreVerticalIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function XIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function LoaderIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function InfoIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
+declare function FolderIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FolderOpenIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FileIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FileTextIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ImageIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function VideoIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function AudioIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ArchiveIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PdfIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function CodeIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function UploadIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function DownloadIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function TrashIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PencilIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PlusIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function RefreshIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ChevronRightIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ChevronDownIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function HomeIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function MoreVerticalIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function XIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function LoaderIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function InfoIcon({ className, size }: IconProps): React__default.JSX.Element;
 /**
  * Get the appropriate icon component for a file type
  */
-declare function getFileIcon(mimeType: string, isDirectory: boolean): React.ComponentType<IconProps>;
+declare function getFileIcon(mimeType: string, isDirectory: boolean): React__default.ComponentType<IconProps>;
 
-declare function NamingRuleConfigurator({ variables, initialSchema, onChange, onExport, onImport, className, customDateFormats, readOnly, sampleFileName, }: NamingRuleConfiguratorProps): react_jsx_runtime.JSX.Element;
+declare function NamingRuleConfigurator({ variables, initialSchema, onChange, onExport, onImport, className, customDateFormats, readOnly, sampleFileName, }: NamingRuleConfiguratorProps): React.JSX.Element;
 
 interface VariableListProps {
     /** User-defined variables */
@@ -622,7 +660,7 @@ interface VariableListProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function VariableList({ userVariables, customDateFormats, onVariableClick, disabled, className, }: VariableListProps): react_jsx_runtime.JSX.Element;
+declare function VariableList({ userVariables, customDateFormats, onVariableClick, disabled, className, }: VariableListProps): React.JSX.Element;
 
 interface PatternBuilderProps {
     /** Current pattern segments */
@@ -650,7 +688,7 @@ interface PatternBuilderProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternBuilder({ pattern, label, droppableId, onAddSegment, onRemoveSegment, onUpdateSegment, onClear, readOnly, placeholder, className, }: PatternBuilderProps): react_jsx_runtime.JSX.Element;
+declare function PatternBuilder({ pattern, label, droppableId, onAddSegment, onRemoveSegment, onUpdateSegment, onClear, readOnly, placeholder, className, }: PatternBuilderProps): React.JSX.Element;
 
 interface PatternPreviewProps {
     /** File pattern segments */
@@ -668,7 +706,7 @@ interface PatternPreviewProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternPreview({ filePattern, folderPattern, userVariables, sampleFileName, previewDate, counterValue, className, }: PatternPreviewProps): react_jsx_runtime.JSX.Element;
+declare function PatternPreview({ filePattern, folderPattern, userVariables, sampleFileName, previewDate, counterValue, className, }: PatternPreviewProps): React.JSX.Element;
 
 interface DraggableVariableProps {
     /** The variable data */
@@ -680,7 +718,7 @@ interface DraggableVariableProps {
     /** Whether the variable is disabled */
     disabled?: boolean;
 }
-declare function DraggableVariable({ variable, onClick, className, disabled, }: DraggableVariableProps): react_jsx_runtime.JSX.Element;
+declare function DraggableVariable({ variable, onClick, className, disabled, }: DraggableVariableProps): React.JSX.Element;
 
 interface PatternSegmentItemProps {
     /** The segment data */
@@ -694,7 +732,7 @@ interface PatternSegmentItemProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternSegmentItem({ segment, onUpdate, onDelete, readOnly, className, }: PatternSegmentItemProps): react_jsx_runtime.JSX.Element;
+declare function PatternSegmentItem({ segment, onUpdate, onDelete, readOnly, className, }: PatternSegmentItemProps): React.JSX.Element;
 
 /**
  * SeparatorPicker Component
@@ -708,7 +746,7 @@ interface SeparatorPickerProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function SeparatorPicker({ onSelect, disabled, className, }: SeparatorPickerProps): react_jsx_runtime.JSX.Element;
+declare function SeparatorPicker({ onSelect, disabled, className, }: SeparatorPickerProps): React.JSX.Element;
 
 /**
  * useNamingRule Hook
@@ -726,6 +764,11 @@ interface UseNamingRuleOptions {
  */
 declare function useNamingRule(options?: UseNamingRuleOptions): UseNamingRuleReturn;
 
+/**
+ * Naming Convention List Component
+ * Displays a list of naming conventions with CRUD actions, grouped by type
+ */
+
 interface NamingConventionListProps {
     /** List of naming conventions to display */
     conventions: ParsedNamingConvention[];
@@ -765,7 +808,7 @@ interface NamingConventionListProps {
  * />
  * ```
  */
-declare function NamingConventionList({ conventions, selectedId, onSelect, onCreate, onDelete, onDuplicate, isLoading, className, showScope, }: NamingConventionListProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionList({ conventions, selectedId, onSelect, onCreate, onDelete, onDuplicate, isLoading, className, showScope, }: NamingConventionListProps): React__default.JSX.Element;
 
 /**
  * Simplified variable definition for passing variables via props.
@@ -830,7 +873,7 @@ interface NamingConventionEditorProps {
  * />
  * ```
  */
-declare function NamingConventionEditor({ convention, variableDefinitions, availableVariables, onSave, onCancel, isSaving, className, readOnly, defaultScopeId, onExport, onImport, }: NamingConventionEditorProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionEditor({ convention, variableDefinitions, availableVariables, onSave, onCancel, isSaving, className, readOnly, defaultScopeId, onExport, onImport, }: NamingConventionEditorProps): React.JSX.Element;
 
 /**
  * API interface for naming convention operations
@@ -917,6 +960,6 @@ interface NamingConventionManagerProps {
  * />
  * ```
  */
-declare function NamingConventionManager({ api, availableVariables, listOptions, defaultScopeId, onSave, onDelete, onError, className, listWidth, showScope, initialSelectedId, }: NamingConventionManagerProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionManager({ api, availableVariables, listOptions, defaultScopeId, onSave, onDelete, onError, className, listWidth, showScope, initialSelectedId, }: NamingConventionManagerProps): React.JSX.Element;
 
 export { ArchiveIcon, AudioIcon, ChevronDownIcon, ChevronRightIcon, CodeIcon, ContextMenu, type ContextMenuItem, type ContextMenuProps, CreateFolderDialog, type CreateFolderDialogProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DownloadIcon, DragPreview, type DragPreviewProps, DraggableVariable, type DraggableVariableProps, FileActions, type FileActionsProps, FileBrowser, type FileBrowserAPI$1 as FileBrowserAPI, type FileBrowserProps, FileBrowserProvider, type FileBrowserProviderProps, FileIcon, FileInfoPanel, type FileInfoPanelProps, FileList$1 as FileList, type FileListProps, type FileMetadata, FilePreview, type FilePreviewProps, FileTextIcon, FolderIcon, FolderOpenIcon, FolderTree, type FolderTreeProps, HomeIcon, ImageIcon, InfoIcon, LoaderIcon, MetadataDialog, type MetadataDialogProps, MoreVerticalIcon, type NamingConventionAPI, NamingConventionEditor, type NamingConventionEditorProps, NamingConventionList, type NamingConventionListProps, NamingConventionManager, type NamingConventionManagerProps, NamingRuleConfigurator, type OperationState, PathBreadcrumb, type PathBreadcrumbProps, PatternBuilder, type PatternBuilderProps, PatternPreview, type PatternPreviewProps, PatternSegmentItem, type PatternSegmentItemProps, PdfIcon, PencilIcon, PlusIcon, RefreshIcon, RenameDialog, type RenameDialogProps, SeparatorPicker, type SeparatorPickerProps, TrashIcon, UploadDialog, type UploadDialogProps, UploadIcon, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileOperationsReturn, type UseMultiFileOperationsReturn, type UseNamingRuleOptions, VariableList, type VariableListProps, VideoIcon, XIcon, getFileIcon, useFileBrowser, useFileBrowserContext, useFileOperations, useMultiFileOperations, useNamingRule };

package/dist/ui/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 
 /**
  * Naming rule types for hazo_files package
@@ -223,13 +223,19 @@ interface FileBrowserState {
  * CreateFolderDialog Component
  * Dialog for creating a new folder
  */
+
 interface CreateFolderDialogProps {
     isOpen: boolean;
     onClose: () => void;
     onSubmit: (name: string) => Promise<void>;
     currentPath: string;
 }
-declare function CreateFolderDialog({ isOpen, onClose, onSubmit, currentPath, }: CreateFolderDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function CreateFolderDialog({ isOpen, onClose, onSubmit, currentPath, }: CreateFolderDialogProps): React__default.JSX.Element | null;
+
+/**
+ * RenameDialog Component
+ * Dialog for renaming a file or folder
+ */
 
 interface RenameDialogProps {
     isOpen: boolean;
@@ -237,7 +243,7 @@ interface RenameDialogProps {
     onClose: () => void;
     onSubmit: (newName: string) => Promise<void>;
 }
-declare function RenameDialog({ isOpen, item, onClose, onSubmit, }: RenameDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function RenameDialog({ isOpen, item, onClose, onSubmit, }: RenameDialogProps): React__default.JSX.Element | null;
 
 interface DeleteConfirmDialogProps {
     isOpen: boolean;
@@ -245,19 +251,20 @@ interface DeleteConfirmDialogProps {
     onClose: () => void;
     onConfirm: () => Promise<void>;
 }
-declare function DeleteConfirmDialog({ isOpen, item, onClose, onConfirm, }: DeleteConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function DeleteConfirmDialog({ isOpen, item, onClose, onConfirm, }: DeleteConfirmDialogProps): React.JSX.Element | null;
 
 /**
  * UploadDialog Component
  * Dialog for uploading files with drag and drop support
  */
+
 interface UploadDialogProps {
     isOpen: boolean;
     currentPath: string;
     onClose: () => void;
     onUpload: (files: FileList) => Promise<void>;
 }
-declare function UploadDialog({ isOpen, currentPath, onClose, onUpload, }: UploadDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function UploadDialog({ isOpen, currentPath, onClose, onUpload, }: UploadDialogProps): React__default.JSX.Element | null;
 
 /**
  * Extended metadata including database record data
@@ -302,7 +309,7 @@ interface FileInfoPanelProps {
  * // With custom styling
  * <FileInfoPanel item={file} className="p-4 bg-gray-50 rounded-lg" />
  */
-declare function FileInfoPanel({ item, metadata, isLoading, showCustomMetadata, className, }: FileInfoPanelProps): react_jsx_runtime.JSX.Element;
+declare function FileInfoPanel({ item, metadata, isLoading, showCustomMetadata, className, }: FileInfoPanelProps): React.JSX.Element;
 
 interface MetadataDialogProps {
     isOpen: boolean;
@@ -311,7 +318,7 @@ interface MetadataDialogProps {
     isLoading?: boolean;
     onClose: () => void;
 }
-declare function MetadataDialog({ isOpen, item, metadata, isLoading, onClose, }: MetadataDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function MetadataDialog({ isOpen, item, metadata, isLoading, onClose, }: MetadataDialogProps): React.JSX.Element | null;
 
 interface FileBrowserAPI$1 {
     listDirectory: (path: string) => Promise<OperationResult<FileSystemItem[]>>;
@@ -341,18 +348,24 @@ interface FileBrowserProps {
     onNavigate?: (path: string) => void;
     onSelect?: (item: FileSystemItem | null) => void;
 }
-declare function FileBrowser({ api, initialPath, showPreview, showTree, viewMode, className, treeWidth, previewHeight, onError, onNavigate, onSelect, }: FileBrowserProps): react_jsx_runtime.JSX.Element;
+declare function FileBrowser({ api, initialPath, showPreview, showTree, viewMode, className, treeWidth, previewHeight, onError, onNavigate, onSelect, }: FileBrowserProps): React.JSX.Element;
 
 /**
  * PathBreadcrumb Component
  * Displays the current path as a breadcrumb navigation
  */
+
 interface PathBreadcrumbProps {
     currentPath: string;
     onNavigate: (path: string) => void;
     className?: string;
 }
-declare function PathBreadcrumb({ currentPath, onNavigate, className }: PathBreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function PathBreadcrumb({ currentPath, onNavigate, className }: PathBreadcrumbProps): React__default.JSX.Element;
+
+/**
+ * FolderTree Component
+ * Displays a hierarchical tree view of folders
+ */
 
 interface FolderTreeProps {
     tree: TreeNode[];
@@ -364,7 +377,12 @@ interface FolderTreeProps {
     dropTargetPath?: string | null;
     className?: string;
 }
-declare function FolderTree({ tree, currentPath, onSelect, onExpand, onToggle, isDragging, dropTargetPath, className, }: FolderTreeProps): react_jsx_runtime.JSX.Element;
+declare function FolderTree({ tree, currentPath, onSelect, onExpand, onToggle, isDragging, dropTargetPath, className, }: FolderTreeProps): React__default.JSX.Element;
+
+/**
+ * FileList Component
+ * Displays a grid/list of files and folders
+ */
 
 interface FileListProps {
     files: FileSystemItem[];
@@ -372,13 +390,13 @@ interface FileListProps {
     isLoading: boolean;
     onSelect: (item: FileSystemItem) => void;
     onOpen: (item: FileSystemItem) => void;
-    onContextMenu?: (item: FileSystemItem, event: React.MouseEvent) => void;
+    onContextMenu?: (item: FileSystemItem, event: React__default.MouseEvent) => void;
     viewMode?: 'grid' | 'list';
     draggedItem?: FileSystemItem | null;
     dropTargetPath?: string | null;
     className?: string;
 }
-declare function FileList$1({ files, selectedItem, isLoading, onSelect, onOpen, onContextMenu, viewMode, draggedItem, dropTargetPath, className, }: FileListProps): react_jsx_runtime.JSX.Element;
+declare function FileList$1({ files, selectedItem, isLoading, onSelect, onOpen, onContextMenu, viewMode, draggedItem, dropTargetPath, className, }: FileListProps): React__default.JSX.Element;
 
 interface FilePreviewProps {
     item: FileSystemItem | null;
@@ -386,7 +404,12 @@ interface FilePreviewProps {
     getFileContent?: (path: string) => Promise<string>;
     className?: string;
 }
-declare function FilePreview({ item, getPreviewUrl, getFileContent, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ item, getPreviewUrl, getFileContent, className, }: FilePreviewProps): React.JSX.Element;
+
+/**
+ * FileActions Component
+ * Toolbar with action buttons for file operations
+ */
 
 interface FileActionsProps {
     selectedItem: FileSystemItem | null;
@@ -399,7 +422,12 @@ interface FileActionsProps {
     isLoading?: boolean;
     className?: string;
 }
-declare function FileActions({ selectedItem, onCreateFolder, onUpload, onDownload, onDelete, onRename, onRefresh, isLoading, className, }: FileActionsProps): react_jsx_runtime.JSX.Element;
+declare function FileActions({ selectedItem, onCreateFolder, onUpload, onDownload, onDelete, onRename, onRefresh, isLoading, className, }: FileActionsProps): React__default.JSX.Element;
+
+/**
+ * ContextMenu Component
+ * Custom right-click context menu positioned at cursor location
+ */
 
 interface IconProps$1 {
     className?: string;
@@ -408,7 +436,7 @@ interface IconProps$1 {
 interface ContextMenuItem {
     id: string;
     label: string;
-    icon?: React.ComponentType<IconProps$1>;
+    icon?: React__default.ComponentType<IconProps$1>;
     onClick: () => void;
     disabled?: boolean;
     danger?: boolean;
@@ -422,13 +450,18 @@ interface ContextMenuProps {
     } | null;
     onClose: () => void;
 }
-declare function ContextMenu({ items, position, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ContextMenu({ items, position, onClose }: ContextMenuProps): React__default.JSX.Element | null;
 
 interface DragPreviewProps {
     item: FileSystemItem;
     className?: string;
 }
-declare function DragPreview({ item, className }: DragPreviewProps): react_jsx_runtime.JSX.Element;
+declare function DragPreview({ item, className }: DragPreviewProps): React.JSX.Element;
+
+/**
+ * FileBrowser Context
+ * Provides state management for the file browser component
+ */
 
 type FileBrowserAction = {
     type: 'SET_LOADING';
@@ -485,7 +518,7 @@ interface FileBrowserAPI {
 }
 interface FileBrowserContextValue {
     state: FileBrowserState;
-    dispatch: React.Dispatch<FileBrowserAction>;
+    dispatch: React__default.Dispatch<FileBrowserAction>;
     api: FileBrowserAPI | null;
     navigateTo: (path: string) => Promise<void>;
     refresh: () => Promise<void>;
@@ -504,7 +537,7 @@ interface FileBrowserProviderProps {
     api: FileBrowserAPI;
     initialPath?: string;
 }
-declare function FileBrowserProvider({ children, api, initialPath }: FileBrowserProviderProps): react_jsx_runtime.JSX.Element;
+declare function FileBrowserProvider({ children, api, initialPath }: FileBrowserProviderProps): React__default.JSX.Element;
 declare function useFileBrowserContext(): FileBrowserContextValue;
 
 /**
@@ -576,39 +609,44 @@ interface UseMultiFileOperationsReturn {
 }
 declare function useMultiFileOperations(): UseMultiFileOperationsReturn;
 
+/**
+ * File Type Icons
+ * SVG icons for different file types
+ */
+
 interface IconProps {
     className?: string;
     size?: number;
 }
-declare function FolderIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FolderOpenIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FileIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function FileTextIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ImageIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function VideoIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function AudioIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ArchiveIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PdfIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function CodeIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function UploadIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function DownloadIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function TrashIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PencilIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function PlusIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function RefreshIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ChevronRightIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function ChevronDownIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function HomeIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function MoreVerticalIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function XIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function LoaderIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
-declare function InfoIcon({ className, size }: IconProps): react_jsx_runtime.JSX.Element;
+declare function FolderIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FolderOpenIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FileIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function FileTextIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ImageIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function VideoIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function AudioIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ArchiveIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PdfIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function CodeIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function UploadIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function DownloadIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function TrashIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PencilIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function PlusIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function RefreshIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ChevronRightIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function ChevronDownIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function HomeIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function MoreVerticalIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function XIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function LoaderIcon({ className, size }: IconProps): React__default.JSX.Element;
+declare function InfoIcon({ className, size }: IconProps): React__default.JSX.Element;
 /**
  * Get the appropriate icon component for a file type
  */
-declare function getFileIcon(mimeType: string, isDirectory: boolean): React.ComponentType<IconProps>;
+declare function getFileIcon(mimeType: string, isDirectory: boolean): React__default.ComponentType<IconProps>;
 
-declare function NamingRuleConfigurator({ variables, initialSchema, onChange, onExport, onImport, className, customDateFormats, readOnly, sampleFileName, }: NamingRuleConfiguratorProps): react_jsx_runtime.JSX.Element;
+declare function NamingRuleConfigurator({ variables, initialSchema, onChange, onExport, onImport, className, customDateFormats, readOnly, sampleFileName, }: NamingRuleConfiguratorProps): React.JSX.Element;
 
 interface VariableListProps {
     /** User-defined variables */
@@ -622,7 +660,7 @@ interface VariableListProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function VariableList({ userVariables, customDateFormats, onVariableClick, disabled, className, }: VariableListProps): react_jsx_runtime.JSX.Element;
+declare function VariableList({ userVariables, customDateFormats, onVariableClick, disabled, className, }: VariableListProps): React.JSX.Element;
 
 interface PatternBuilderProps {
     /** Current pattern segments */
@@ -650,7 +688,7 @@ interface PatternBuilderProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternBuilder({ pattern, label, droppableId, onAddSegment, onRemoveSegment, onUpdateSegment, onClear, readOnly, placeholder, className, }: PatternBuilderProps): react_jsx_runtime.JSX.Element;
+declare function PatternBuilder({ pattern, label, droppableId, onAddSegment, onRemoveSegment, onUpdateSegment, onClear, readOnly, placeholder, className, }: PatternBuilderProps): React.JSX.Element;
 
 interface PatternPreviewProps {
     /** File pattern segments */
@@ -668,7 +706,7 @@ interface PatternPreviewProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternPreview({ filePattern, folderPattern, userVariables, sampleFileName, previewDate, counterValue, className, }: PatternPreviewProps): react_jsx_runtime.JSX.Element;
+declare function PatternPreview({ filePattern, folderPattern, userVariables, sampleFileName, previewDate, counterValue, className, }: PatternPreviewProps): React.JSX.Element;
 
 interface DraggableVariableProps {
     /** The variable data */
@@ -680,7 +718,7 @@ interface DraggableVariableProps {
     /** Whether the variable is disabled */
     disabled?: boolean;
 }
-declare function DraggableVariable({ variable, onClick, className, disabled, }: DraggableVariableProps): react_jsx_runtime.JSX.Element;
+declare function DraggableVariable({ variable, onClick, className, disabled, }: DraggableVariableProps): React.JSX.Element;
 
 interface PatternSegmentItemProps {
     /** The segment data */
@@ -694,7 +732,7 @@ interface PatternSegmentItemProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function PatternSegmentItem({ segment, onUpdate, onDelete, readOnly, className, }: PatternSegmentItemProps): react_jsx_runtime.JSX.Element;
+declare function PatternSegmentItem({ segment, onUpdate, onDelete, readOnly, className, }: PatternSegmentItemProps): React.JSX.Element;
 
 /**
  * SeparatorPicker Component
@@ -708,7 +746,7 @@ interface SeparatorPickerProps {
     /** Additional CSS class */
     className?: string;
 }
-declare function SeparatorPicker({ onSelect, disabled, className, }: SeparatorPickerProps): react_jsx_runtime.JSX.Element;
+declare function SeparatorPicker({ onSelect, disabled, className, }: SeparatorPickerProps): React.JSX.Element;
 
 /**
  * useNamingRule Hook
@@ -726,6 +764,11 @@ interface UseNamingRuleOptions {
  */
 declare function useNamingRule(options?: UseNamingRuleOptions): UseNamingRuleReturn;
 
+/**
+ * Naming Convention List Component
+ * Displays a list of naming conventions with CRUD actions, grouped by type
+ */
+
 interface NamingConventionListProps {
     /** List of naming conventions to display */
     conventions: ParsedNamingConvention[];
@@ -765,7 +808,7 @@ interface NamingConventionListProps {
  * />
  * ```
  */
-declare function NamingConventionList({ conventions, selectedId, onSelect, onCreate, onDelete, onDuplicate, isLoading, className, showScope, }: NamingConventionListProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionList({ conventions, selectedId, onSelect, onCreate, onDelete, onDuplicate, isLoading, className, showScope, }: NamingConventionListProps): React__default.JSX.Element;
 
 /**
  * Simplified variable definition for passing variables via props.
@@ -830,7 +873,7 @@ interface NamingConventionEditorProps {
  * />
  * ```
  */
-declare function NamingConventionEditor({ convention, variableDefinitions, availableVariables, onSave, onCancel, isSaving, className, readOnly, defaultScopeId, onExport, onImport, }: NamingConventionEditorProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionEditor({ convention, variableDefinitions, availableVariables, onSave, onCancel, isSaving, className, readOnly, defaultScopeId, onExport, onImport, }: NamingConventionEditorProps): React.JSX.Element;
 
 /**
  * API interface for naming convention operations
@@ -917,6 +960,6 @@ interface NamingConventionManagerProps {
  * />
  * ```
  */
-declare function NamingConventionManager({ api, availableVariables, listOptions, defaultScopeId, onSave, onDelete, onError, className, listWidth, showScope, initialSelectedId, }: NamingConventionManagerProps): react_jsx_runtime.JSX.Element;
+declare function NamingConventionManager({ api, availableVariables, listOptions, defaultScopeId, onSave, onDelete, onError, className, listWidth, showScope, initialSelectedId, }: NamingConventionManagerProps): React.JSX.Element;
 
 export { ArchiveIcon, AudioIcon, ChevronDownIcon, ChevronRightIcon, CodeIcon, ContextMenu, type ContextMenuItem, type ContextMenuProps, CreateFolderDialog, type CreateFolderDialogProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DownloadIcon, DragPreview, type DragPreviewProps, DraggableVariable, type DraggableVariableProps, FileActions, type FileActionsProps, FileBrowser, type FileBrowserAPI$1 as FileBrowserAPI, type FileBrowserProps, FileBrowserProvider, type FileBrowserProviderProps, FileIcon, FileInfoPanel, type FileInfoPanelProps, FileList$1 as FileList, type FileListProps, type FileMetadata, FilePreview, type FilePreviewProps, FileTextIcon, FolderIcon, FolderOpenIcon, FolderTree, type FolderTreeProps, HomeIcon, ImageIcon, InfoIcon, LoaderIcon, MetadataDialog, type MetadataDialogProps, MoreVerticalIcon, type NamingConventionAPI, NamingConventionEditor, type NamingConventionEditorProps, NamingConventionList, type NamingConventionListProps, NamingConventionManager, type NamingConventionManagerProps, NamingRuleConfigurator, type OperationState, PathBreadcrumb, type PathBreadcrumbProps, PatternBuilder, type PatternBuilderProps, PatternPreview, type PatternPreviewProps, PatternSegmentItem, type PatternSegmentItemProps, PdfIcon, PencilIcon, PlusIcon, RefreshIcon, RenameDialog, type RenameDialogProps, SeparatorPicker, type SeparatorPickerProps, TrashIcon, UploadDialog, type UploadDialogProps, UploadIcon, type UseFileBrowserOptions, type UseFileBrowserReturn, type UseFileOperationsReturn, type UseMultiFileOperationsReturn, type UseNamingRuleOptions, VariableList, type VariableListProps, VideoIcon, XIcon, getFileIcon, useFileBrowser, useFileBrowserContext, useFileOperations, useMultiFileOperations, useNamingRule };

package/dist/ui/index.js

@@ -3355,6 +3355,9 @@ function formatDateToken(date, format) {
       return format;
   }
 }
+function isCounterVariable(variableName) {
+  return variableName === "counter" || variableName.startsWith("counter:");
+}
 function formatCounter(value, digits = 3) {
   return String(value).padStart(digits, "0");
 }
@@ -3852,9 +3855,16 @@ var import_react17 = require("react");
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
 var import_jsx_runtime19 = (
-  // Variable segment - not editable, just display
+  // Counter variable - digit padding is editable via an inline stepper
   require("react/jsx-runtime")
 );
+var COUNTER_MIN_DIGITS = 1;
+var COUNTER_MAX_DIGITS = 6;
+function parseCounterDigits(value) {
+  const m = value.match(/^counter:(\d+)$/);
+  const n = m ? parseInt(m[1], 10) : 3;
+  return Math.min(COUNTER_MAX_DIGITS, Math.max(COUNTER_MIN_DIGITS, n));
+}
 function getSegmentStyle(type) {
   if (type === "variable") {
     return "bg-blue-100 border-blue-300 text-blue-800";
@@ -3912,6 +3922,12 @@ function PatternSegmentItem({
     }
   };
   const segmentStyle = getSegmentStyle(segment.type);
+  const isCounter = segment.type === "variable" && isCounterVariable(segment.value);
+  const counterDigits = isCounter ? parseCounterDigits(segment.value) : 3;
+  const handleCounterDigitsChange = (next) => {
+    const clamped = Math.min(COUNTER_MAX_DIGITS, Math.max(COUNTER_MIN_DIGITS, next));
+    onUpdate?.(segment.id, `counter:${clamped}`);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
@@ -3929,11 +3945,35 @@ function PatternSegmentItem({
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       children: [
-        segment.type === "variable" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center px-2 py-1", children: [
+        isCounter ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center px-2 py-1 gap-0.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs opacity-60", children: "{" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "font-medium", children: segment.value }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "font-medium", children: "counter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs opacity-60", children: ":" }),
+          readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "font-medium tabular-nums", children: counterDigits }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "input",
+            {
+              type: "number",
+              min: COUNTER_MIN_DIGITS,
+              max: COUNTER_MAX_DIGITS,
+              value: counterDigits,
+              "aria-label": "Counter digits",
+              title: "Number of digits (zero-padded)",
+              onChange: (e) => handleCounterDigitsChange(parseInt(e.target.value, 10) || COUNTER_MIN_DIGITS),
+              onPointerDown: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              onClick: (e) => e.stopPropagation(),
+              className: "w-10 px-1 py-0 text-sm text-center bg-white/70 border border-blue-300 rounded tabular-nums focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs opacity-60", children: "}" })
-        ] }) : isEditing && !readOnly ? (
+        ] }) : segment.type === "variable" ? (
+          // Variable segment - not editable, just display
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center px-2 py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs opacity-60", children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "font-medium", children: segment.value }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs opacity-60", children: "}" })
+          ] })
+        ) : isEditing && !readOnly ? (
           // Literal segment in edit mode
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
@@ -5273,6 +5313,7 @@ function NamingConventionManager({
   const [isLoading, setIsLoading] = (0, import_react23.useState)(true);
   const [isSaving, setIsSaving] = (0, import_react23.useState)(false);
   const [isCreating, setIsCreating] = (0, import_react23.useState)(false);
+  const [editorResetKey, setEditorResetKey] = (0, import_react23.useState)(0);
   const loadConventions = (0, import_react23.useCallback)(async () => {
     try {
       setIsLoading(true);
@@ -5368,6 +5409,8 @@ function NamingConventionManager({
     if (isCreating) {
       setIsCreating(false);
       setSelectedConvention(conventions[0] || null);
+    } else if (selectedConvention) {
+      setEditorResetKey((k) => k + 1);
     }
   };
   const listStyle = typeof listWidth === "number" ? { width: `${listWidth}px` } : { width: listWidth };
@@ -5394,7 +5437,8 @@ function NamingConventionManager({
         onCancel: handleCancel,
         isSaving,
         defaultScopeId
-      }
+      },
+      isCreating ? "new" : `${selectedConvention?.id ?? "none"}-${editorResetKey}`
     ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center h-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "svg",

package/dist/ui/index.mjs

@@ -3280,6 +3280,9 @@ function formatDateToken(date, format) {
       return format;
   }
 }
+function isCounterVariable(variableName) {
+  return variableName === "counter" || variableName.startsWith("counter:");
+}
 function formatCounter(value, digits = 3) {
   return String(value).padStart(digits, "0");
 }
@@ -3780,6 +3783,13 @@ import { useState as useState11, useRef as useRef5, useEffect as useEffect8 } fr
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var COUNTER_MIN_DIGITS = 1;
+var COUNTER_MAX_DIGITS = 6;
+function parseCounterDigits(value) {
+  const m = value.match(/^counter:(\d+)$/);
+  const n = m ? parseInt(m[1], 10) : 3;
+  return Math.min(COUNTER_MAX_DIGITS, Math.max(COUNTER_MIN_DIGITS, n));
+}
 function getSegmentStyle(type) {
   if (type === "variable") {
     return "bg-blue-100 border-blue-300 text-blue-800";
@@ -3837,6 +3847,12 @@ function PatternSegmentItem({
     }
   };
   const segmentStyle = getSegmentStyle(segment.type);
+  const isCounter = segment.type === "variable" && isCounterVariable(segment.value);
+  const counterDigits = isCounter ? parseCounterDigits(segment.value) : 3;
+  const handleCounterDigitsChange = (next) => {
+    const clamped = Math.min(COUNTER_MAX_DIGITS, Math.max(COUNTER_MIN_DIGITS, next));
+    onUpdate?.(segment.id, `counter:${clamped}`);
+  };
   return /* @__PURE__ */ jsxs18(
     "div",
     {
@@ -3854,7 +3870,31 @@ function PatternSegmentItem({
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       children: [
-        segment.type === "variable" ? (
+        isCounter ? (
+          // Counter variable - digit padding is editable via an inline stepper
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center px-2 py-1 gap-0.5", children: [
+            /* @__PURE__ */ jsx19("span", { className: "text-xs opacity-60", children: "{" }),
+            /* @__PURE__ */ jsx19("span", { className: "font-medium", children: "counter" }),
+            /* @__PURE__ */ jsx19("span", { className: "text-xs opacity-60", children: ":" }),
+            readOnly ? /* @__PURE__ */ jsx19("span", { className: "font-medium tabular-nums", children: counterDigits }) : /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "number",
+                min: COUNTER_MIN_DIGITS,
+                max: COUNTER_MAX_DIGITS,
+                value: counterDigits,
+                "aria-label": "Counter digits",
+                title: "Number of digits (zero-padded)",
+                onChange: (e) => handleCounterDigitsChange(parseInt(e.target.value, 10) || COUNTER_MIN_DIGITS),
+                onPointerDown: (e) => e.stopPropagation(),
+                onKeyDown: (e) => e.stopPropagation(),
+                onClick: (e) => e.stopPropagation(),
+                className: "w-10 px-1 py-0 text-sm text-center bg-white/70 border border-blue-300 rounded tabular-nums focus:outline-none focus:ring-1 focus:ring-blue-500"
+              }
+            ),
+            /* @__PURE__ */ jsx19("span", { className: "text-xs opacity-60", children: "}" })
+          ] })
+        ) : segment.type === "variable" ? (
           // Variable segment - not editable, just display
           /* @__PURE__ */ jsxs18("div", { className: "flex items-center px-2 py-1", children: [
             /* @__PURE__ */ jsx19("span", { className: "text-xs opacity-60", children: "{" }),
@@ -5201,6 +5241,7 @@ function NamingConventionManager({
   const [isLoading, setIsLoading] = useState15(true);
   const [isSaving, setIsSaving] = useState15(false);
   const [isCreating, setIsCreating] = useState15(false);
+  const [editorResetKey, setEditorResetKey] = useState15(0);
   const loadConventions = useCallback16(async () => {
     try {
       setIsLoading(true);
@@ -5296,6 +5337,8 @@ function NamingConventionManager({
     if (isCreating) {
       setIsCreating(false);
       setSelectedConvention(conventions[0] || null);
+    } else if (selectedConvention) {
+      setEditorResetKey((k) => k + 1);
     }
   };
   const listStyle = typeof listWidth === "number" ? { width: `${listWidth}px` } : { width: listWidth };
@@ -5322,7 +5365,8 @@ function NamingConventionManager({
         onCancel: handleCancel,
         isSaving,
         defaultScopeId
-      }
+      },
+      isCreating ? "new" : `${selectedConvention?.id ?? "none"}-${editorResetKey}`
     ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center h-full bg-white", children: /* @__PURE__ */ jsxs25("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx26(
         "svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_files",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "File management including integration to cloud files",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -86,8 +86,11 @@
   },
   "homepage": "https://github.com/pub12/hazo_files#readme",
   "dependencies": {
-    "ini": "^4.1.3",
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.0.0",
     "googleapis": "^140",
+    "ini": "^4.1.3",
     "mime-types": "^2.1.35"
   },
   "devDependencies": {
@@ -102,9 +105,9 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "dropbox": "^10.34.0",
-    "hazo_core": "^1.1.0",
-    "hazo_jobs": "^0.12.0",
-    "hazo_llm_api": "^2.1.0",
+    "hazo_core": "^2.0.0",
+    "hazo_jobs": "^0.17.0",
+    "hazo_llm_api": "^2.3.0",
     "jsdom": "^28.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -115,35 +118,23 @@
     "xxhash-wasm": "^1.1.0"
   },
   "peerDependencies": {
-    "@dnd-kit/core": "^6.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.0.0",
     "dropbox": "^10.0.0",
     "googleapis": "^140.0.0",
-    "hazo_connect": "^3.4.1",
-    "hazo_core": "^1.1.0",
-    "hazo_debug": "^3.1.1",
-    "hazo_jobs": "^0.12.0",
-    "hazo_llm_api": "^2.1.0",
-    "hazo_logs": "^2.0.3",
-    "hazo_secure": "^1.2.0",
-    "hazo_ui": "^3.2.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "hazo_connect": "^4.0.0",
+    "hazo_core": "^2.0.0",
+    "hazo_debug": "^3.2.0",
+    "hazo_jobs": "^0.17.0",
+    "hazo_llm_api": "^2.3.0",
+    "hazo_logs": "^2.2.0",
+    "hazo_secure": "^1.7.1",
+    "hazo_ui": "^6.8.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "server-only": "^0.0.1",
     "sonner": "^2.0.7",
     "xxhash-wasm": "^1.0.0"
   },
   "peerDependenciesMeta": {
-    "@dnd-kit/core": {
-      "optional": true
-    },
-    "@dnd-kit/sortable": {
-      "optional": true
-    },
-    "@dnd-kit/utilities": {
-      "optional": true
-    },
     "dropbox": {
       "optional": true
     },