pict-section-filebrowser 0.0.1

package/README.md

@@ -0,0 +1,107 @@
+# Pict Section FileBrowser
+
+A composable file browser section for the Pict application platform.  Provides
+modular browsing, listing, and viewing views for building customizable file
+system navigation interfaces.
+
+## Features
+
+- Composable views for tree browsing, search, detail lists, icon grids, file
+  info and image preview
+- Multiple layout modes (tree-list, list-detail, browser-detail, browser-columns
+  and more)
+- Five independent providers: Browse, List, View, Layout, Icons
+- Hand-drawn SVG icon system with automatic file type detection
+- Built-in REST API service for filesystem access
+- CLI utility (`browse`) for instant file browser serving
+- Lazy-loaded folder tree with caching
+- Full-text file search
+- Sortable columns, breadcrumb navigation, file metadata display
+
+## Installation
+
+```bash
+npm install pict-section-filebrowser
+```
+
+## Quick Start
+
+```javascript
+const libPictSectionFileBrowser = require('pict-section-filebrowser');
+
+// Create a Pict application
+const tmpPict = new libPict();
+
+// Populate AppData with file entries
+tmpPict.AppData.PictFileBrowser = {
+	FileList: [
+		{ Name: 'Documents', Type: 'folder', Path: '/Documents' },
+		{ Name: 'report.pdf', Type: 'file', Path: '/report.pdf', Size: 245000, Extension: '.pdf' }
+	],
+	FolderTree: [
+		{ Name: 'Documents', Path: '/Documents', Children: [] }
+	]
+};
+
+// Register the file browser view
+let tmpFileBrowser = tmpPict.addView(
+	'Pict-FileBrowser',
+	libPictSectionFileBrowser.default_configuration,
+	libPictSectionFileBrowser
+);
+```
+
+## CLI Usage
+
+```bash
+browse [path] [options]
+  -p, --port <port>    Port to listen on (default: 8086)
+  -a, --hidden         Include hidden files (dotfiles)
+  -h, --help           Show help message
+
+Examples:
+  browse ~/Documents -p 9876
+  browse . --hidden
+  npx pict-section-filebrowser /var/log
+```
+
+## Architecture
+
+The module is organized into five provider types and six view types:
+
+**Providers:**
+- **BrowseProvider** - Folder hierarchy, tree navigation, search
+- **ListProvider** - File listing, sorting, filtering, selection
+- **ViewProvider** - Selected file utilities, image detection
+- **LayoutProvider** - View layout modes and pane visibility
+- **IconProvider** - SVG icon generation and file type mapping
+
+**Views:**
+- **FileBrowser** - Container view orchestrating the ecosystem
+- **BrowseTree** - Lazy-loaded hierarchical folder tree
+- **BrowseSearch** - Full-text search with results
+- **ListDetail** - Table-style listing with sortable columns
+- **ListIcons** - Icon grid layout
+- **ViewFileInfo** - File metadata display
+- **ViewImage** - Image preview
+
+**Service:**
+- **FileBrowserService** - REST API endpoints for filesystem access
+
+## Testing
+
+```bash
+npm test
+```
+
+## Related Packages
+
+- [pict](https://github.com/stevenvelozo/pict) - Core application framework
+- [pict-view](https://github.com/stevenvelozo/pict-view) - View base class
+- [pict-provider](https://github.com/stevenvelozo/pict-provider) - Provider base class
+- [orator](https://github.com/stevenvelozo/orator) - API server framework
+- [fable](https://github.com/stevenvelozo/fable) - Service infrastructure
+
+## License
+
+MIT

package/docs/README.md

@@ -0,0 +1,110 @@
+# Pict-Section-FileBrowser
+
+> A composable file browser section with modular browsing, listing, and viewing views for the Pict application platform
+
+Pict-Section-FileBrowser provides a complete set of views and providers for building customizable file browsing interfaces.  It supports multiple layout modes, a lazy-loaded folder tree, full-text search, sortable detail lists, icon grids, file metadata display, and image preview -- all wired together through the Pict AppData pattern.
+
+## Features
+
+- **Composable Views** - Mix and match tree, list, search and detail views
+- **Multiple Layouts** - Six built-in layout modes with custom layout support
+- **Provider Architecture** - Five independent providers for browse, list, view, layout and icons
+- **SVG Icon System** - Hand-drawn retro icons with automatic file type detection
+- **REST API Service** - Built-in filesystem endpoints with path traversal protection
+- **CLI Utility** - Instant file browser serving with `browse` command
+- **Lazy Loading** - On-demand folder tree expansion with caching
+- **Full-Text Search** - Case-insensitive file and folder search
+
+## Quick Start
+
+```javascript
+const libPictSectionFileBrowser = require('pict-section-filebrowser');
+
+// Create a Pict application
+const tmpPict = new libPict();
+
+// Populate AppData with file entries
+tmpPict.AppData.PictFileBrowser = {
+	FileList: [
+		{ Name: 'Documents', Type: 'folder', Path: '/Documents' },
+		{ Name: 'report.pdf', Type: 'file', Path: '/report.pdf', Size: 245000, Extension: '.pdf' }
+	],
+	FolderTree: [
+		{ Name: 'Documents', Path: '/Documents', Children: [] }
+	]
+};
+
+// Register the main file browser view
+let tmpFileBrowser = tmpPict.addView(
+	'Pict-FileBrowser',
+	libPictSectionFileBrowser.default_configuration,
+	libPictSectionFileBrowser
+);
+
+// Register specific sub-views as needed
+tmpPict.addView('BrowseTree', {}, libPictSectionFileBrowser.PictViewBrowseTree);
+tmpPict.addView('ListDetail', {}, libPictSectionFileBrowser.PictViewListDetail);
+tmpPict.addView('FileInfo', {}, libPictSectionFileBrowser.PictViewFileInfo);
+```
+
+## Installation
+
+```bash
+npm install pict-section-filebrowser
+```
+
+## CLI Usage
+
+The module includes a `browse` command for serving a file browser instantly:
+
+```bash
+browse [path] [options]
+  -p, --port <port>    Port to listen on (default: 8086)
+  -a, --hidden         Include hidden files (dotfiles)
+  -h, --help           Show help message
+```
+
+Examples:
+
+```bash
+browse ~/Documents -p 9876
+browse . --hidden
+npx pict-section-filebrowser /var/log
+```
+
+## Module Exports
+
+The main entry point exports the container view as the default, plus all sub-components:
+
+| Export | Description |
+|--------|-------------|
+| `default` | PictViewFileBrowser container view |
+| `PictFileBrowserBrowseProvider` | Folder hierarchy and search provider |
+| `PictFileBrowserListProvider` | File listing, sorting and selection provider |
+| `PictFileBrowserViewProvider` | File viewing utilities provider |
+| `PictFileBrowserLayoutProvider` | Layout mode management provider |
+| `PictFileBrowserIconProvider` | SVG icon generation provider |
+| `PictViewBrowseTree` | Lazy-loaded folder tree view |
+| `PictViewBrowseSearch` | Full-text search view |
+| `PictViewListDetail` | Sortable table listing view |
+| `PictViewListIcons` | Icon grid listing view |
+| `PictViewFileInfo` | File metadata display view |
+| `PictViewImageViewer` | Image preview view |
+| `FileBrowserService` | REST API service for filesystem access |
+
+## Documentation
+
+- [Providers](Providers.md) - Provider classes and their APIs
+- [Views](Views.md) - View classes and rendering
+- [Layouts](Layouts.md) - Built-in and custom layout modes
+- [Icons](Icons.md) - SVG icon system and extension mapping
+- [REST API](REST_API.md) - Filesystem service endpoints
+- [Configuration](Configuration.md) - AppData state and file entry format
+
+## Related Packages
+
+- [pict](https://github.com/stevenvelozo/pict) - Core application framework
+- [pict-view](https://github.com/stevenvelozo/pict-view) - View base class
+- [pict-provider](https://github.com/stevenvelozo/pict-provider) - Provider base class
+- [orator](https://github.com/stevenvelozo/orator) - API server framework
+- [fable](https://github.com/stevenvelozo/fable) - Service infrastructure

package/docs/_sidebar.md

@@ -0,0 +1,15 @@
+- Getting Started
+
+  - [Introduction](/)
+  - [Configuration](Configuration.md)
+
+- Architecture
+
+  - [Providers](Providers.md)
+  - [Views](Views.md)
+  - [Layouts](Layouts.md)
+  - [Icons](Icons.md)
+
+- Service
+
+  - [REST API](REST_API.md)

package/docs/_topbar.md

@@ -0,0 +1,7 @@
+# Pict Section FileBrowser
+
+- [Overview](README.md)
+- [Providers](Providers.md)
+- [Views](Views.md)
+- [REST API](REST_API.md)
+- [GitHub](https://github.com/stevenvelozo/pict-section-filebrowser)

package/docs/cover.md

@@ -0,0 +1,11 @@
+# Pict-Section-FileBrowser <small>1</small>
+
+> A composable file browser section with modular browsing, listing, and viewing views
+
+- Multiple layout modes with lazy-loaded folder tree navigation
+- Five independent providers: Browse, List, View, Layout, Icons
+- Built-in REST API service and CLI utility for instant file serving
+- Hand-drawn SVG icon system with automatic file type detection
+
+[GitHub](https://github.com/stevenvelozo/pict-section-filebrowser)
+[Get Started](#pict-section-filebrowser)

package/docs/css/docuserve.css

@@ -0,0 +1,73 @@
+/* ============================================================================
+   Pict Docuserve - Base Styles
+   ============================================================================ */
+
+/* Reset and base */
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	font-size: 16px;
+	line-height: 1.5;
+	color: #423D37;
+	background-color: #fff;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+	margin-top: 0;
+	line-height: 1.3;
+}
+
+a {
+	color: #2E7D74;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #256861;
+}
+
+/* Application container */
+#Docuserve-Application-Container {
+	min-height: 100vh;
+}
+
+/* Utility: scrollbar styling */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: #F5F0E8;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #D4CCBE;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #B5AA9A;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	html {
+		font-size: 14px;
+	}
+
+	#Docuserve-Sidebar-Container {
+		display: none;
+	}
+
+	.docuserve-body {
+		flex-direction: column;
+	}
+}

package/docs/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="Documentation powered by pict-docuserve">
+
+		<title>Documentation</title>
+
+		<!-- Application Stylesheet -->
+		<link href="css/docuserve.css" rel="stylesheet">
+		<!-- KaTeX stylesheet for LaTeX equation rendering -->
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+
+		<!-- Load the PICT library from jsDelivr CDN -->
+		<script src="https://cdn.jsdelivr.net/npm/pict@1/dist/pict.min.js" type="text/javascript"></script>
+		<!-- Bootstrap the Application -->
+		<script type="text/javascript">
+//<![CDATA[
+		Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(PictDocuserve, 2)});
+//]]>
+		</script>
+	</head>
+	<body>
+		<!-- The root container for the Pict application -->
+		<div id="Docuserve-Application-Container"></div>
+
+		<!-- Mermaid diagram rendering -->
+		<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+		<script>mermaid.initialize({ startOnLoad: false, theme: 'default' });</script>
+		<!-- KaTeX for LaTeX equation rendering -->
+		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"></script>
+		<!-- Load the Docuserve PICT Application Bundle from jsDelivr CDN -->
+		<script src="https://cdn.jsdelivr.net/npm/pict-docuserve@0/dist/pict-docuserve.min.js" type="text/javascript"></script>
+	</body>
+</html>

package/docs/retold-catalog.json

@@ -0,0 +1,100 @@
+{
+	"Generated": "2026-02-21T23:23:27.842Z",
+	"GitHubOrg": "stevenvelozo",
+	"DefaultBranch": "master",
+	"Groups": [
+		{
+			"Name": "Dist",
+			"Key": "dist",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "indoctrinate_content_staging",
+					"Repo": "indoctrinate_content_staging",
+					"Group": "dist",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				}
+			]
+		},
+		{
+			"Name": "Docs",
+			"Key": "docs",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "css",
+					"Repo": "css",
+					"Group": "docs",
+					"Branch": "master",
+					"HasDocs": true,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": [
+						"css/docuserve.css"
+					]
+				}
+			]
+		},
+		{
+			"Name": "Source",
+			"Key": "source",
+			"Description": "",
+			"Modules": [
+				{
+					"Name": "bin",
+					"Repo": "bin",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				},
+				{
+					"Name": "providers",
+					"Repo": "providers",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				},
+				{
+					"Name": "services",
+					"Repo": "services",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				},
+				{
+					"Name": "views",
+					"Repo": "views",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				},
+				{
+					"Name": "www",
+					"Repo": "www",
+					"Group": "source",
+					"Branch": "master",
+					"HasDocs": false,
+					"HasCover": false,
+					"Sidebar": [],
+					"DocFiles": []
+				}
+			]
+		}
+	]
+}

package/docs/retold-keyword-index.json

@@ -0,0 +1,19 @@
+{
+	"Generated": "2026-02-21T23:23:27.922Z",
+	"DocumentCount": 0,
+	"LunrIndex": {
+		"version": "2.3.9",
+		"fields": [
+			"title",
+			"module",
+			"group",
+			"body"
+		],
+		"fieldVectors": [],
+		"invertedIndex": [],
+		"pipeline": [
+			"stemmer"
+		]
+	},
+	"Documents": {}
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "pict-section-filebrowser",
+	"version": "0.0.1",
+	"description": "Pict file browser section - composable browsing, listing, and viewing views for file system navigation",
+	"main": "source/Pict-Section-FileBrowser.js",
+	"bin": {
+		"browse": "./source/bin/browse.js"
+	},
+	"scripts": {
+		"start": "node source/Pict-Section-FileBrowser.js",
+		"test": "npx mocha -u tdd -R spec",
+		"tests": "npx mocha -u tdd --exit -R spec --grep",
+		"coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec",
+		"build": "npx quack build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/stevenvelozo/pict-section-filebrowser.git"
+	},
+	"author": "steven velozo <steven@velozo.com>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/stevenvelozo/pict-section-filebrowser/issues"
+	},
+	"homepage": "https://github.com/stevenvelozo/pict-section-filebrowser#readme",
+	"dependencies": {
+		"fable": "^3.1.58",
+		"fable-serviceproviderbase": "^3.0.16",
+		"orator": "^6.0.2",
+		"orator-serviceserver-restify": "^2.0.7",
+		"pict-provider": "^1.0.10",
+		"pict-view": "^1.0.66"
+	},
+	"devDependencies": {
+		"chai": "^6.2.2",
+		"mocha": "^11.7.5",
+		"pict": "^1.0.350",
+		"quackage": "^1.0.56"
+	},
+	"mocha": {
+		"diff": true,
+		"extension": [
+			"js"
+		],
+		"package": "./package.json",
+		"reporter": "spec",
+		"slow": "75",
+		"timeout": "5000",
+		"ui": "tdd",
+		"watch-files": [
+			"source/**/*.js",
+			"test/**/*.js"
+		],
+		"watch-ignore": [
+			"lib/vendor"
+		]
+	}
+}