Prototype - new layout code design idea

declarations.d.ts

@@ -1,4 +1,4 @@
-declare module '*.css' {
-  const classes: Record<string, string>;
-  export default classes;
-}
+/// <reference types="unplugin-icons/types/web-components" />
+
+declare module '*.css';
+declare module '~icons/*';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "folder-pane",
-  "version": "4.0.0-0",
+  "version": "4.0.0-1",
   "description": "Solid-compatible Panes: File browser",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,8 @@
     }
   },
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "src/components/**/*.ts"
   ],
   "scripts": {
     "clean": "rm -rf dist",
@@ -58,6 +59,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^10.0.1",
+    "@iconify-json/lucide": "^1.2.116",
     "@types/node": "^24.13.3",
     "@typescript-eslint/parser": "^8.53.1",
     "@vitest/coverage-v8": "^4.0.18",
@@ -67,9 +69,11 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "rdflib": "2.4.0",
-    "solid-logic": "6.0.0-0",
-    "solid-ui": "5.0.0-0",
+    "@lit/context": "^1.1.6",
+    "pane-registry": "5.0.0-1",
+    "rdflib": "2.4.1",
+    "solid-logic": "6.0.0-2",
+    "solid-ui": "5.0.0-2",
     "vite": "^8.0.16",
     "vitest": "^4.0.18",
     "vitest-axe": "^0.1.0"

src/components/storage-container-pane/StorageContainerPane.styles.css

@@ -0,0 +1,257 @@
+/*
+ * Future shadow-DOM layout for the container pane.
+ * These rules are mirrored in src/styles/folderPane.css for now because the
+ * storage shell still renders into light DOM. Once the shell can move back to
+ * shadow DOM, this stylesheet can be reattached via static styles and the
+ * light-DOM copy can be removed.
+ */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+:host > .storage-container-pane-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+:host > .storage-container-pane-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+:host > .storage-container-pane-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:host > .storage-container-pane-content::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 999px;
+}
+
+:host > .storage-container-pane-content:hover {
+  scrollbar-color: #c7cbd1 transparent;
+}
+
+:host > .storage-container-pane-content:hover::-webkit-scrollbar-thumb {
+  background: #c7cbd1;
+}
+
+:host > .storage-container-pane-content > .storage-container-pane-resource-drop-zone {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+}
+
+.resource-grid,
+.resource-list {
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: visible;
+  min-height: 0;
+  margin: 0;
+  padding: 20px;
+}
+
+.resource-list {
+  flex-direction: column;
+}
+
+.resource-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--solid-ui-color-gray-600, #4A5565);
+  font-size: var(--solid-ui-font-size-sm, .875rem);
+  font-weight: 500;
+  list-style: none;
+}
+
+.resource-list-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.resource-grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+storage-content-view {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  flex: 0 0 auto;
+}
+
+storage-creation-area {
+  margin-top: auto;
+  align-self: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 10px 20px;
+  --storage-creation-area-message-font-size: var(--solid-ui-font-size-sm, .875rem);
+  --storage-creation-area-padding: 28px 20px;
+  --storage-creation-icon-size: 26px;
+  --storage-creation-gap: 10px;
+  --storage-creation-area-border-radius: 12px;
+}
+
+.storage-container-pane-resource-drop-zone {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.resource-actions-menu {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+
+.resource-actions-menu--grid {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.resource-actions-menu--list {
+  margin-left: auto;
+}
+
+.resource-grid-item {
+  position: relative;
+}
+
+.resource-grid-item.drop-target,
+.resource-list-item.drop-target {
+  outline: 2px solid var(--solid-ui-color-lavender-300, #C4B5FD);
+  outline-offset: -2px;
+  background: color-mix(in srgb, var(--solid-ui-color-lavender-200, #DDD6FE) 35%, white);
+}
+
+.resource-grid-top {
+  position: relative;
+}
+
+.resource-grid-icon {
+  display: flex;
+  width: 80px;
+  height: 80px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  margin: 12px auto 0;
+}
+
+.resource-grid-icon .resource-pane-icon {
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+}
+
+.resource-grid-icon--container {
+  width: 37.282px;
+  height: 37.282px;
+  padding: 0 9.32px;
+  margin: 12px 0 0 12px;
+  justify-content: flex-start;
+}
+
+.resource-grid-label--container {
+  color: var(--solid-ui-color-gray-700, #364153);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  font-weight: 500;
+}
+
+icon-lucide-folder,
+icon-lucide-file,
+icon-lucide-globe,
+icon-lucide-lock-keyhole {
+  width: 15px;
+  height: 15px;
+}
+
+.storage-container-pane-empty-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  min-height: 100%;
+  text-align: center;
+  color: var(--solid-ui-color-gray-700, #364153);
+}
+
+.storage-container-pane-empty-message-icon {
+  display: flex;
+  width: 64px;
+  height: 64px;
+  padding: 0 16.785px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+  border: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
+  background: var(--solid-ui-color-white, #FFF);
+}
+
+.storage-container-pane-empty-message-icon icon-lucide-file-box {
+  width: 32px;
+  height: 32px;
+  color: var(--solid-ui-color-gray-300, #D1D5DC);
+  stroke-width: 2px;
+}
+
+.storage-container-pane-empty-message-title {
+  margin: 0;
+  color: var(--solid-ui-color-gray-900, #030712);
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.storage-container-pane-empty-message-body {
+  max-width: 24rem;
+  margin: 0;
+  color: var(--solid-ui-color-gray-600, #4A5565);
+  font-size: var(--solid-ui-font-size-sm, .875rem);
+  line-height: 21.125px;
+}
+
+.storage-container-pane-empty-message--search {
+  min-height: 100%;
+}
+
+.storage-container-pane-empty-message-button {
+  --text-color: var(--solid-ui-color-primary);
+  --border-color: var(--solid-ui-color-gray-200, #e5e7eb);
+  --background-color: var(--solid-ui-color-white, #ffffff);
+  --hover-text-color: var(--solid-ui-color-primary);
+  --hover-border-color: var(--solid-ui-color-gray-300, #d1d5db);
+  --hover-background-color: var(--solid-ui-color-white, #ffffff);
+  align-self: center;
+}