@internetarchive/collection-browser 4.1.3-alpha-webdev8257.0 → 4.1.3

package/src/tiles/tile-dispatcher.ts

@@ -1,6 +1,5 @@
 import { css, html, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { msg } from '@lit/localize';
 import type {
@@ -19,7 +18,7 @@ import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
-import { LayoutType, type TileAction } from './models';
+import { LayoutType } from './models';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
@@ -73,9 +72,6 @@ export class TileDispatcher
     'Remove this item from the list',
   );
 
-  /** Action buttons to display at the bottom of the tile (grid mode only) */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
   private hoverPaneController?: HoverPaneControllerInterface;
 
   @query('#container')
@@ -108,20 +104,14 @@ export class TileDispatcher
 
   render() {
     const isGridMode = this.tileDisplayMode === 'grid';
-    const hasTileActions = isGridMode && this.showTileActions;
     const hoverPaneTemplate =
       this.hoverPaneController?.getTemplate() ?? nothing;
-    const containerClasses = classMap({
-      hoverable: isGridMode,
-      'has-tile-actions': hasTileActions,
-    });
     return html`
-      <div id="container" class=${containerClasses}>
+      <div id="container" class=${isGridMode ? 'hoverable' : ''}>
         ${this.tileDisplayMode === 'list-header'
           ? this.headerTemplate
           : this.tileTemplate}
-        ${this.tileActionsTemplate} ${this.manageCheckTemplate}
-        ${hoverPaneTemplate}
+        ${this.manageCheckTemplate} ${hoverPaneTemplate}
       </div>
     `;
   }
@@ -316,57 +306,6 @@ export class TileDispatcher
     });
   }
 
-  /** Whether tile action buttons should be rendered */
-  private get showTileActions(): boolean {
-    return (
-      this.tileActions.length > 0 &&
-      !this.isManageView &&
-      this.tileDisplayMode === 'grid'
-    );
-  }
-
-  private get tileActionsTemplate() {
-    if (!this.showTileActions) return nothing;
-
-    return html`
-      <div
-        class="tile-actions"
-        @mouseenter=${this.handleTileActionsMouseEnter}
-        @mousemove=${(e: Event) => e.stopPropagation()}
-      >
-        ${this.tileActions.map(
-          action => html`
-            <button
-              class="tile-action-btn"
-              @click=${(e: Event) => this.handleTileActionClick(e, action)}
-            >
-              ${action.label}
-            </button>
-          `,
-        )}
-      </div>
-    `;
-  }
-
-  /**
-   * When the mouse enters the tile actions area, dispatch a synthetic mouseleave
-   * on the host to cancel the hover pane's show timer and hide any visible pane.
-   */
-  private handleTileActionsMouseEnter = (): void => {
-    this.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));
-  };
-
-  private handleTileActionClick(e: Event, action: TileAction): void {
-    e.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent('tileActionClicked', {
-        detail: { actionId: action.id, model: this.model },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
   private get tile() {
     const {
       model,
@@ -527,43 +466,8 @@ export class TileDispatcher
           border-radius: 4px;
         }
 
-        /*
-         * When tile actions are present, the container becomes the visual "card"
-         * so that the tile content and action buttons appear as one unified element.
-         */
-        /*
-         * When tile actions are present, the container takes over the tile's
-         * border-radius and box-shadow so that the action bar appears as part
-         * of the same card. The inner tile's own shadow/radius are disabled
-         * via CSS variable overrides so there is no visual duplication.
-         */
-        #container.has-tile-actions {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          box-shadow: var(--tileShadow, 1px 1px 2px 0);
-          --tileBoxShadow: none;
-          --tileCornerRadius: 0;
-        }
-
-        #container.has-tile-actions .tile-link {
-          flex: 1;
-          min-height: 0;
-          overflow: hidden;
-          border-radius: 0;
-        }
-
-        /* Move hover shadow to container level when tile actions are present */
-        #container.hoverable:not(.has-tile-actions) a:focus,
-        #container.hoverable:not(.has-tile-actions) a:hover {
-          box-shadow: var(
-            --tileHoverBoxShadow,
-            0 0 6px 2px rgba(8, 8, 32, 0.8)
-          );
-          transition: box-shadow 0.1s ease;
-        }
-
-        #container.hoverable.has-tile-actions:hover {
+        #container.hoverable a:focus,
+        #container.hoverable a:hover {
           box-shadow: var(
             --tileHoverBoxShadow,
             0 0 6px 2px rgba(8, 8, 32, 0.8)
@@ -617,32 +521,6 @@ export class TileDispatcher
           left: -9999px;
           z-index: 2;
         }
-
-        .tile-actions {
-          flex-shrink: 0;
-          display: flex;
-          border-top: 1px solid var(--tileActionSeparatorColor, #ddd);
-        }
-
-        .tile-action-btn {
-          flex: 1;
-          padding: 8px;
-          border: none;
-          border-radius: 0;
-          font-size: 1.2rem;
-          cursor: pointer;
-          color: var(--tileActionColor, #333);
-          background: var(--tileActionBg, #fff);
-          transition: background 0.15s;
-        }
-
-        .tile-action-btn + .tile-action-btn {
-          border-left: 1px solid var(--tileActionSeparatorColor, #ddd);
-        }
-
-        .tile-action-btn:hover {
-          background: var(--tileActionHoverBg, #f0f0f0);
-        }
       `,
     ];
   }

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "noEmitOnError": true,
-    "lib": [
-      "ESNext",
-      "dom",
-      "dom.iterable"
-    ],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "useDefineForClassFields": false,
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": [
+      "ESNext",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "useDefineForClassFields": false,
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});

package/web-test-runner.config.mjs

@@ -1,52 +1,52 @@
-import rollupImage from '@rollup/plugin-image';
-import { rollupAdapter } from '@web/dev-server-rollup';
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  mimeTypes: {
-    '**/*.scss': 'js',
-    '**/*.css': 'js',
-    '**/*.svg': 'js',
-    '**/*.json': 'js',
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  plugins: [rollupAdapter(rollupImage())],
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+import rollupImage from '@rollup/plugin-image';
+import { rollupAdapter } from '@web/dev-server-rollup';
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  mimeTypes: {
+    '**/*.scss': 'js',
+    '**/*.css': 'js',
+    '**/*.svg': 'js',
+    '**/*.json': 'js',
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  plugins: [rollupAdapter(rollupImage())],
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});

package/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(cd /c/Users/Laton/workspace/IA/iaux-collection-browser && npm test 2>&1)",
-      "Bash(cd /c/Users/Laton/workspace/IA/iaux-collection-browser && yarn run format 2>&1)",
-      "Bash(cd /c/Users/Laton/workspace/IA/iaux-collection-browser && npx tsc --noEmit 2>&1)",
-      "Bash(cd /c/Users/Laton/workspace/IA/iaux-collection-browser && npx wtr --coverage 2>&1)",
-      "Bash(cd /c/Users/Laton/workspace/IA/iaux-collection-browser && npm run format 2>&1)"
-    ]
-  }
-}