sqlite-hub 0.9.1 → 0.9.4

package/frontend/js/views/mediaTagging.js

@@ -180,52 +180,39 @@ function renderParentTagFields({
 
     const isCreatingParentTag = Boolean(parentToggleColumn ? tagFormValues[parentToggleColumn.name] : false);
     const selectedParentTagId = parentSelectColumn ? String(tagFormValues[parentSelectColumn.name] ?? '') : '';
-
-    return `
-      ${
-          parentSelectColumn
-              ? `
-              <label class="media-tagging-field">
-                <span class="media-tagging-field__label">Parent Tag</span>
-                <select
-                  class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-                  data-bind="media-tagging-tag-form-field"
-                  data-field="${escapeHtml(parentSelectColumn.name)}"
-                  ${isCreatingParentTag ? 'disabled' : ''}
-                >
-                  ${renderOptionList(
-                      parentTagOptions.map(tag => ({
-                          value: String(tag.identityValue ?? ''),
-                          label: tag.label,
-                      })),
-                      selectedParentTagId,
-                      parentTagOptions.length ? 'Select a parent tag' : 'No parent tags available',
-                  )}
-                </select>
-              </label>
-            `
-              : ''
-      }
-      ${
-          parentToggleColumn
-              ? `
-              <div class="media-tagging-field">
-                <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-                  <input
-                    data-bind="media-tagging-tag-form-field"
-                    data-field="${escapeHtml(parentToggleColumn.name)}"
-                    type="checkbox"
-                    ${isCreatingParentTag ? 'checked' : ''}
-                  />
-                  <span class="media-tagging-field__meta">
-                    <span class="media-tagging-field__label">Create Parent Tag</span>
-                  </span>
-                </label>
-              </div>
-            `
-              : ''
-      }
-    `;
+    const parentSelectMarkup = parentSelectColumn
+        ? [
+              '<label class="media-tagging-field"><span class="media-tagging-field__label">Parent Tag</span>',
+              '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-tag-form-field" data-field="',
+              escapeHtml(parentSelectColumn.name),
+              '" ',
+              isCreatingParentTag ? 'disabled' : '',
+              '>',
+              renderOptionList(
+                  parentTagOptions.map(tag => ({
+                      value: String(tag.identityValue ?? ''),
+                      label: tag.label,
+                  })),
+                  selectedParentTagId,
+                  parentTagOptions.length ? 'Select a parent tag' : 'No parent tags available',
+              ),
+              '</select></label>',
+          ].join('')
+        : '';
+    const parentToggleMarkup = parentToggleColumn
+        ? [
+              '<div class="media-tagging-field"><label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+              '<input data-bind="media-tagging-tag-form-field" data-field="',
+              escapeHtml(parentToggleColumn.name),
+              '" type="checkbox" ',
+              isCreatingParentTag ? 'checked' : '',
+              '/>',
+              '<span class="media-tagging-field__meta"><span class="media-tagging-field__label">Create Parent Tag</span></span>',
+              '</label></div>',
+          ].join('')
+        : '';
+
+    return [parentSelectMarkup, parentToggleMarkup].join('');
 }
 
 function renderTagList(tags = [], selectedTagKeys = []) {
@@ -285,42 +272,40 @@ function renderCreatedTagList(tags = [], { canRemove = false, removingTagKey = n
     return `
     <div class="media-tagging-created-tags custom-scrollbar">
       ${tags
-          .map(
-              tag => `
-            <article class="media-tagging-created-tag">
-              <div class="media-tagging-created-tag__content">
-                <div class="media-tagging-created-tag__label">${escapeHtml(tag.label)}</div>
-                ${
-                    tag.isParentTag || tag.parentTagLabel
-                        ? `
-                            <div class="media-tagging-created-tag__meta">
-                              ${tag.isParentTag ? '<span class="media-tagging-created-tag__badge">Parent</span>' : ''}
-                              ${
-                                  tag.parentTagLabel
-                                      ? `<span class="media-tagging-created-tag__badge">${escapeHtml(tag.parentTagLabel)}</span>`
-                                      : ''
-                              }
-                            </div>
-                          `
-                        : ''
-                }
-              </div>
-              <button
-                aria-label="Remove tag"
-                class="delete-button media-tagging-created-tag__remove"
-                data-action="remove-media-tag"
-                data-tag-key="${escapeHtml(tag.key)}"
-                type="button"
-                title="Remove tag"
-                ${canRemove && removingTagKey !== tag.key ? '' : 'disabled'}
-              >
-                <span class="material-symbols-outlined text-[18px]">
-                  ${removingTagKey === tag.key ? 'hourglass_top' : 'delete'}
-                </span>
-              </button>
-            </article>
-          `,
-          )
+          .map(tag => {
+              const parentMetaMarkup =
+                  tag.isParentTag || tag.parentTagLabel
+                      ? [
+                            '<div class="media-tagging-created-tag__meta">',
+                            tag.isParentTag ? '<span class="media-tagging-created-tag__badge">Parent</span>' : '',
+                            tag.parentTagLabel
+                                ? [
+                                      '<span class="media-tagging-created-tag__badge">',
+                                      escapeHtml(tag.parentTagLabel),
+                                      '</span>',
+                                  ].join('')
+                                : '',
+                            '</div>',
+                        ].join('')
+                      : '';
+
+              return [
+                  '<article class="media-tagging-created-tag">',
+                  '<div class="media-tagging-created-tag__content">',
+                  '<div class="media-tagging-created-tag__label">',
+                  escapeHtml(tag.label),
+                  '</div>',
+                  parentMetaMarkup,
+                  '</div>',
+                  '<button aria-label="Remove tag" class="delete-button media-tagging-created-tag__remove" data-action="remove-media-tag" data-tag-key="',
+                  escapeHtml(tag.key),
+                  '" type="button" title="Remove tag" ',
+                  canRemove && removingTagKey !== tag.key ? '' : 'disabled',
+                  '><span class="material-symbols-outlined text-[18px]">',
+                  removingTagKey === tag.key ? 'hourglass_top' : 'delete',
+                  '</span></button></article>',
+              ].join('');
+          })
           .join('')}
     </div>
   `;
@@ -633,89 +618,71 @@ function renderTaggingSection(state) {
     const mediaTableColumns = state.mediaTagging.mediaTableColumns ?? [];
     const pathCandidates = state.mediaTagging.pathCandidates ?? [];
     const booleanCandidates = state.mediaTagging.booleanCandidates ?? [];
+    const tableOptions = renderOptionList(
+        tables
+            .map(table => ({ value: table.name, label: table.name }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.mediaTable,
+        'Select a media table',
+    );
+    const pathOptions = renderOptionList(
+        mediaTableColumns
+            .map(column => ({
+                value: column.name,
+                label: pathCandidates.includes(column.name)
+                    ? [column.name, ' // suggested'].join('')
+                    : column.name,
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.pathColumn,
+        'Select the media path column',
+    );
+    const taggedOptions = renderOptionList(
+        mediaTableColumns
+            .map(column => ({
+                value: column.name,
+                label: booleanCandidates.includes(column.name)
+                    ? [column.name, ' // suggested'].join('')
+                    : column.name,
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.taggedColumn,
+        mediaTableColumns.length ? 'Select the tagged flag column' : 'No columns available',
+    );
 
-    return `
-    <section class="media-tagging-card media-tagging-card--tagging shell-section">
-      <div class="media-tagging-card__header">
-        <div>
-          <div class="media-tagging-card__eyebrow">2. Tagging</div>
-          <h2 class="media-tagging-card__title">Media Source</h2>
-        </div>
-      </div>
-      <div class="media-tagging-card__body">
-        <div class="media-tagging-form-grid">
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Media Table</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="mediaTable">
-              ${renderOptionList(
-                  tables
-                      .map(table => ({ value: table.name, label: table.name }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.mediaTable,
-                  'Select a media table',
-              )}
-            </select>
-          </label>
-          <div></div>
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Path Column</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="pathColumn">
-              ${renderOptionList(
-                  mediaTableColumns
-                      .map(column => ({
-                          value: column.name,
-                          label: pathCandidates.includes(column.name) ? `${column.name} // suggested` : column.name,
-                      }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.pathColumn,
-                  'Select the media path column',
-              )}
-            </select>
-          </label>
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Tagged Boolean Column</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="taggedColumn">
-              ${renderOptionList(
-                  mediaTableColumns
-                      .map(column => ({
-                          value: column.name,
-                          label: booleanCandidates.includes(column.name) ? `${column.name} // suggested` : column.name,
-                      }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.taggedColumn,
-                  mediaTableColumns.length ? 'Select the tagged flag column' : 'No columns available',
-              )}
-            </select>
-          </label>
-        </div>
-
-        <div class="media-tagging-query-grid">
-          ${renderSqlTextarea({
-              label: 'Untagged Query',
-              value: draft.untaggedQuery,
-              dataBind: 'media-tagging-field',
-              dataField: 'untaggedQuery',
-          })}
-          ${renderSqlTextarea({
-              label: 'Tagged Query',
-              value: draft.taggedQuery,
-              dataBind: 'media-tagging-field',
-              dataField: 'taggedQuery',
-          })}
-        </div>
-
-        <div class="flex flex-wrap items-center gap-3">
-          <button
-            class="standard-button"
-            data-action="reset-media-tagging-queries"
-            type="button"
-          >
-            Reset Queries to Defaults
-          </button>
-        </div>
-      </div>
-    </section>
-  `;
+    return [
+        '<section class="media-tagging-card media-tagging-card--tagging shell-section">',
+        '<div class="media-tagging-card__header"><div><div class="media-tagging-card__eyebrow">2. Tagging</div><h2 class="media-tagging-card__title">Media Source</h2></div></div>',
+        '<div class="media-tagging-card__body"><div class="media-tagging-form-grid">',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Media Table</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="mediaTable">',
+        tableOptions,
+        '</select></label><div></div>',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Path Column</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="pathColumn">',
+        pathOptions,
+        '</select></label>',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Tagged Boolean Column</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="taggedColumn">',
+        taggedOptions,
+        '</select></label></div>',
+        '<div class="media-tagging-query-grid">',
+        renderSqlTextarea({
+            label: 'Untagged Query',
+            value: draft.untaggedQuery,
+            dataBind: 'media-tagging-field',
+            dataField: 'untaggedQuery',
+        }),
+        renderSqlTextarea({
+            label: 'Tagged Query',
+            value: draft.taggedQuery,
+            dataBind: 'media-tagging-field',
+            dataField: 'taggedQuery',
+        }),
+        '</div>',
+        '<div class="flex flex-wrap items-center gap-3"><button class="standard-button" data-action="reset-media-tagging-queries" type="button">Reset Queries to Defaults</button></div>',
+        '</div></section>',
+    ].join('');
 }
 
 function renderMappingSection(state) {

package/frontend/js/views/structure.js

@@ -3,60 +3,64 @@ import { escapeHtml, formatNumber } from "../utils/format.js";
 
 function renderEntryGroup(title, entries, activeName, options = {}) {
   const { compact = false, showMeta = true } = options;
+  const entriesMarkup = entries.length
+    ? [
+        '<div class="space-y-2">',
+        entries
+          .map((entry) => {
+            const isActive = entry.name === activeName;
+            const entryAttributes =
+              entry.type === "table"
+                ? [
+                    'data-structure-entry-name="',
+                    escapeHtml(entry.name),
+                    '"',
+                  ].join("")
+                : "";
+            const metaMarkup = showMeta
+              ? [
+                  '<div class="mt-1 text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">',
+                  escapeHtml(entry.tableName || entry.type),
+                  "</div>",
+                ].join("")
+              : "";
+
+            return [
+              '<button class="w-full border px-3 ',
+              compact ? "py-2.5" : "py-3",
+              " text-left transition-colors ",
+              isActive
+                ? "border-primary-container/30 bg-surface-container-high"
+                : "border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high",
+              '" data-action="select-structure-entry" data-entry-name="',
+              escapeHtml(entry.name),
+              '" ',
+              entryAttributes,
+              ' type="button">',
+              '<div class="font-mono text-xs ',
+              isActive ? "text-primary-container" : "text-on-surface",
+              '">',
+              escapeHtml(entry.name),
+              "</div>",
+              metaMarkup,
+              "</button>",
+            ].join("");
+          })
+          .join(""),
+        "</div>",
+      ].join("")
+    : [
+        '<div class="text-sm text-on-surface-variant/45">No ',
+        escapeHtml(title.toLowerCase()),
+        " found.</div>",
+      ].join("");
 
   return `
     <section class="structure-sidebar__section">
       <div class="mb-4 shrink-0 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
         ${escapeHtml(title)}
       </div>
-      ${
-        entries.length
-          ? `
-              <div class="space-y-2">
-                ${entries
-                  .map(
-                    (entry) => `
-                      <button
-                        class="w-full border px-3 ${compact ? "py-2.5" : "py-3"} text-left transition-colors ${
-                          entry.name === activeName
-                            ? "border-primary-container/30 bg-surface-container-high"
-                            : "border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high"
-                        }"
-                        data-action="select-structure-entry"
-                        data-entry-name="${escapeHtml(entry.name)}"
-                        ${
-                          entry.type === "table"
-                            ? `data-structure-entry-name="${escapeHtml(entry.name)}"`
-                            : ""
-                        }
-                        type="button"
-                      >
-                        <div class="font-mono text-xs ${
-                          entry.name === activeName
-                            ? "text-primary-container"
-                            : "text-on-surface"
-                        }">
-                          ${escapeHtml(entry.name)}
-                        </div>
-                        ${
-                          showMeta
-                            ? `
-                                <div class="mt-1 text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
-                                  ${escapeHtml(entry.tableName || entry.type)}
-                                </div>
-                              `
-                            : ""
-                        }
-                      </button>
-                    `
-                  )
-                  .join("")}
-              </div>
-            `
-          : `<div class="text-sm text-on-surface-variant/45">No ${escapeHtml(
-              title.toLowerCase()
-            )} found.</div>`
-      }
+      ${entriesMarkup}
     </section>
   `;
 }

package/frontend/styles/base.css

@@ -28,6 +28,26 @@ button {
     cursor: pointer;
 }
 
+button:disabled,
+button[aria-disabled='true'],
+input:disabled,
+select:disabled,
+textarea:disabled {
+    cursor: not-allowed;
+}
+
+:where(a, button, input, select, textarea, [tabindex]:not([tabindex='-1'])):focus-visible {
+    outline: 2px solid var(--color-primary-container);
+    outline-offset: 2px;
+}
+
+.control-shell:focus-within,
+.standard-checkbox:focus-within,
+.sql-highlight-shell:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+}
+
 .control-button {
     align-items: center;
     box-sizing: border-box;
@@ -52,22 +72,22 @@ button {
 
 input.control-input--ghost {
     appearance: none;
-    background: transparent !important;
-    background-color: transparent !important;
-    background-image: none !important;
-    border: 0 !important;
-    border-color: transparent !important;
-    box-shadow: none !important;
+    background: transparent;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    border-color: transparent;
+    box-shadow: none;
     -webkit-appearance: none;
     padding: 0;
 }
 
 input.control-input--ghost:focus,
 input.control-input--ghost:not(:focus) {
-    background: transparent !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none !important;
+    background: transparent;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
     outline: none;
 }
 
@@ -105,6 +125,7 @@ img {
 }
 
 [hidden] {
+    /* Hidden must beat utility display classes generated by Tailwind CDN. */
     display: none !important;
 }
 
@@ -118,9 +139,6 @@ img {
 
 .font-mono {
     font-family: var(--font-family-mono);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 }
 
 .material-symbols-outlined {
@@ -218,12 +236,14 @@ img {
     width: 100%;
     word-break: normal;
     overflow-wrap: anywhere;
+    font-variant-ligatures: none;
 }
 
 .query-editor-highlight {
     color: var(--color-on-surface);
     overflow: visible;
     pointer-events: none;
+    user-select: none;
 }
 
 .query-editor-input {
@@ -236,6 +256,14 @@ img {
     overflow: auto;
 }
 
+.query-editor-input:focus-visible {
+    outline: none;
+}
+
+.query-editor-layer:focus-within {
+    box-shadow: inset 0 0 0 1px var(--primary-alpha-30);
+}
+
 .query-editor-gutter-track {
     min-height: 100%;
     will-change: transform;
@@ -260,3 +288,19 @@ img {
         border-color: var(--color-primary-container);
     }
 }
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.001ms;
+        animation-iteration-count: 1;
+        scroll-behavior: auto;
+        transition-duration: 0.001ms;
+    }
+
+    .cursor-blink {
+        animation: none;
+        border-right-color: var(--color-primary-container);
+    }
+}