sqlite-hub 0.9.0 → 0.9.3

package/frontend/styles/views.css

@@ -90,7 +90,7 @@
 }
 
 .landing-accent {
-    background: rgba(75, 71, 50, 0.2);
+    background: rgb(var(--rgb-outline) / 0.2);
     height: 1px;
     position: absolute;
 }
@@ -110,8 +110,8 @@
 }
 
 .landing-accent--c {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.12);
-    border-right: 1px solid rgba(75, 71, 50, 0.12);
+    border-bottom: 1px solid var(--border-subtle);
+    border-right: 1px solid var(--border-subtle);
     height: 4rem;
     left: 0;
     top: 50%;
@@ -126,7 +126,7 @@
 
 .system-placeholder-card {
     background: var(--color-surface-low);
-    border-bottom: 2px solid rgba(49, 48, 48, 1);
+    box-shadow: inset 0 -2px 0 rgb(49 48 48);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
@@ -148,16 +148,16 @@
 
 .charts-view__sidebar {
     background: var(--color-surface-low);
-    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    border-right: 1px solid var(--border-medium);
     display: flex;
-    flex: 0 0 23rem;
+    flex: 0 0 clamp(20rem, 28vw, 23rem);
     flex-direction: column;
     min-height: 0;
-    width: 23rem;
+    width: clamp(20rem, 28vw, 23rem);
 }
 
 .charts-view__sidebar-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: var(--spacing-5);
 }
 
@@ -171,16 +171,16 @@
 
 .structure-view__sidebar {
     background: var(--color-surface-low);
-    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    border-right: 1px solid var(--border-medium);
     display: flex;
-    flex: 0 0 18.5rem;
+    flex: 0 0 clamp(16rem, 22vw, 18.5rem);
     flex-direction: column;
     min-height: 0;
-    width: 18.5rem;
+    width: clamp(16rem, 22vw, 18.5rem);
 }
 
 .structure-view__sidebar-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: var(--spacing-5);
 }
 
@@ -200,7 +200,7 @@
 }
 
 .structure-view__header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: 1.25rem 1.5rem;
 }
 
@@ -262,7 +262,7 @@
 
 .charts-height-toggle {
     background: var(--color-surface-container-low);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    border: 1px solid var(--border-medium);
     display: inline-flex;
     gap: 0;
     height: var(--control-height);
@@ -287,7 +287,7 @@
 }
 
 .charts-height-toggle__button + .charts-height-toggle__button {
-    border-left: 1px solid rgba(75, 71, 50, 0.18);
+    border-left: 1px solid var(--border-medium);
 }
 
 .charts-height-toggle__button.is-active {
@@ -299,7 +299,7 @@
 .query-chart-card {
     --query-chart-height: 450px;
     background: var(--color-surface-low);
-    border: 1px solid rgba(75, 71, 50, 0.12);
+    border: 1px solid var(--border-subtle);
     overflow: hidden;
 }
 
@@ -327,7 +327,7 @@
 
 .query-chart-card__body {
     background:
-        radial-gradient(circle at top right, rgba(252, 227, 0, 0.08), transparent 28%),
+        radial-gradient(circle at top right, var(--primary-alpha-08), transparent 28%),
         linear-gradient(180deg, rgba(32, 31, 31, 0.92), rgba(14, 14, 14, 1));
     min-height: var(--query-chart-height);
     padding: 1rem;
@@ -360,25 +360,6 @@
     padding-top: var(--spacing-4);
 }
 
-.media-tagging-created-tags-shell {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.media-tagging-created-tags {
-    flex: 1;
-    max-height: none;
-    min-height: 0;
-}
-
-.media-tagging-mapping-list {
-    flex: 0 0 auto;
-    min-height: auto;
-    overflow-y: auto;
-}
-
 .media-tagging-shell {
     display: flex;
     flex: 1;
@@ -389,11 +370,6 @@
     padding: var(--spacing-6);
 }
 
-.media-tagging-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
-    padding-bottom: var(--spacing-4);
-}
-
 .media-tagging-grid {
     align-content: stretch;
     display: grid;
@@ -415,12 +391,13 @@
 }
 
 .media-tagging-card--workflow {
+    flex: 1;
     min-height: 32rem;
 }
 
 .media-tagging-card__header {
     align-items: start;
-    border-bottom: 1px solid rgba(75, 71, 50, 0.14);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-4);
@@ -505,18 +482,23 @@
 }
 
 .media-tagging-field__hint {
-    color: rgba(229, 226, 225, 0.45);
+    color: var(--text-subtle);
     font-family: var(--font-family-mono);
     font-size: 0.65rem;
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }
 
-.media-tagging-static-field {
+.media-tagging-static-field,
+.media-tagging-card .control-input,
+.media-tagging-card .control-select {
     align-items: center;
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--color-surface-container);
+    border: 1px solid var(--border-medium);
     color: var(--color-on-surface);
+}
+
+.media-tagging-static-field {
     display: flex;
     font-family: var(--font-family-mono);
     font-size: 0.8rem;
@@ -525,9 +507,12 @@
 }
 
 .media-tagging-textarea {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--color-surface-container);
+    border: 1px solid var(--border-medium);
     color: var(--color-on-surface);
+}
+
+.media-tagging-textarea {
     font-family: var(--font-family-mono);
     font-size: 0.8rem;
     min-height: 13rem;
@@ -535,9 +520,16 @@
     resize: vertical;
 }
 
+.media-tagging-textarea:focus-visible,
+.media-tagging-static-field:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+    outline: none;
+}
+
 .sql-highlight-shell {
     background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    border: 1px solid var(--border-medium);
     min-height: 13rem;
     overflow: hidden;
 }
@@ -586,7 +578,7 @@
 }
 
 .media-tagging-status__label {
-    color: rgba(229, 226, 225, 0.5);
+    color: rgb(var(--rgb-on-surface) / 0.5);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.14em;
@@ -602,20 +594,28 @@
     font-size: 1.25rem;
 }
 
+.media-tagging-status--preview {
+    align-items: flex-start;
+    min-width: max-content;
+}
+
 .media-tagging-mapping-list {
     display: grid;
+    flex: 0 0 auto;
     gap: var(--spacing-3);
     max-height: 18rem;
+    min-height: auto;
+    overflow-y: auto;
 }
 
 .media-tagging-mapping-card {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     padding: var(--spacing-4);
 }
 
 .media-tagging-mapping-card.is-selected {
-    border-color: rgba(252, 227, 0, 0.45);
+    border-color: rgb(var(--rgb-primary) / 0.45);
 }
 
 .media-tagging-preview {
@@ -636,12 +636,12 @@
 .media-tagging-preview__media {
     align-items: stretch;
     background:
-        radial-gradient(circle at top right, rgba(252, 227, 0, 0.1), transparent 30%),
+        radial-gradient(circle at top right, var(--primary-alpha-10), transparent 30%),
         linear-gradient(180deg, rgba(32, 31, 31, 0.95), rgba(14, 14, 14, 1));
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     min-height: 26rem;
     overflow: hidden;
     padding: var(--spacing-4);
@@ -653,17 +653,52 @@
 }
 
 .media-tagging-preview__media--audio .media-tagging-preview__media-toolbar {
-    justify-content: flex-end;
-    position: static;
+    justify-content: space-between;
 }
 
 .media-tagging-preview__media-toolbar {
+    align-items: center;
+    border-bottom: 1px solid var(--border-medium);
     display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
     gap: var(--spacing-3);
-    position: absolute;
-    right: var(--spacing-4);
-    top: var(--spacing-4);
-    z-index: 1;
+    justify-content: space-between;
+    margin: calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-4);
+    min-height: calc(var(--control-height) + var(--spacing-4));
+    padding: var(--spacing-2) var(--spacing-4);
+    width: calc(100% + (var(--spacing-4) * 2));
+}
+
+.media-tagging-preview__toolbar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
+.media-tagging-preview__asset-shell {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    min-height: 0;
+    overflow: hidden;
+    width: 100%;
+}
+
+.media-tagging-preview__rotation-controls {
+    display: flex;
+    gap: var(--spacing-2);
+}
+
+.media-tagging-preview__icon-button {
+    backdrop-filter: blur(8px);
+    background: rgba(20, 20, 20, 0.78);
+    min-width: var(--control-height);
+    padding: 0;
+    width: var(--control-height);
 }
 
 .media-tagging-preview__toggle {
@@ -674,17 +709,26 @@
 .media-tagging-preview__asset {
     flex: 1;
     height: 100%;
+    min-height: 0;
     object-fit: contain;
+    transform: rotate(var(--media-tagging-preview-rotation, 0deg));
+    transform-origin: center;
+    transition: transform var(--transition-standard);
     width: 100%;
 }
 
+.media-tagging-preview__asset.is-rotated-quarter {
+    height: min(100%, 72vw);
+    width: min(100%, 72vh);
+}
+
 .media-tagging-audio-preview {
     align-items: center;
     align-self: center;
     background:
         linear-gradient(180deg, rgba(32, 31, 31, 0.96), rgba(14, 14, 14, 0.98)),
-        radial-gradient(circle at top left, rgba(252, 227, 0, 0.1), transparent 35%);
-    border: 1px solid rgba(75, 71, 50, 0.2);
+        radial-gradient(circle at top left, var(--primary-alpha-10), transparent 35%);
+    border: 1px solid rgb(var(--rgb-outline) / 0.2);
     box-shadow: var(--shadow-subtle-glow);
     display: grid;
     gap: var(--spacing-5);
@@ -697,8 +741,8 @@
 
 .media-tagging-audio-preview__icon {
     align-items: center;
-    background: rgba(252, 227, 0, 0.08);
-    border: 1px solid rgba(252, 227, 0, 0.22);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-22);
     color: var(--color-primary-container);
     display: flex;
     height: 5.5rem;
@@ -718,7 +762,7 @@
 }
 
 .media-tagging-audio-preview__eyebrow {
-    color: rgba(229, 226, 225, 0.48);
+    color: rgb(var(--rgb-on-surface) / 0.48);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     font-weight: 700;
@@ -744,7 +788,7 @@
 .media-tagging-preview__placeholder,
 .media-tagging-preview__empty {
     align-items: center;
-    color: rgba(229, 226, 225, 0.4);
+    color: rgb(var(--rgb-on-surface) / 0.4);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -754,7 +798,7 @@
 
 .media-tagging-preview__meta {
     background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex-direction: column;
     min-height: 0;
@@ -765,12 +809,13 @@
 .media-tagging-preview__meta-header {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--spacing-3);
     justify-content: space-between;
 }
 
 .media-tagging-preview__eyebrow {
-    color: rgba(229, 226, 225, 0.48);
+    color: rgb(var(--rgb-on-surface) / 0.48);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     font-weight: 700;
@@ -782,8 +827,15 @@
     flex: 0 0 auto;
 }
 
+.media-tagging-preview__meta-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    justify-content: flex-end;
+}
+
 .media-tagging-preview__metadata {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -802,7 +854,7 @@
 }
 
 .media-tagging-preview__metadata-row span:first-child {
-    color: rgba(229, 226, 225, 0.5);
+    color: rgb(var(--rgb-on-surface) / 0.5);
     font-family: var(--font-family-mono);
     font-size: 0.65rem;
     letter-spacing: 0.08em;
@@ -826,8 +878,8 @@
 }
 
 .media-tagging-tag-panel {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -841,7 +893,7 @@
 }
 
 .media-tagging-tag-panel__header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.14);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.14);
 }
 
 .media-tagging-tag-panel__header-row {
@@ -852,12 +904,38 @@
 }
 
 .media-tagging-tag-panel__footer {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-3);
 }
 
+.media-tagging-tag-panel__footer-main {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+}
+
+.media-tagging-tag-panel__remaining {
+    color: var(--text-variant-subtle);
+    flex: 1 1 auto;
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    letter-spacing: 0.14em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.media-tagging-tag-panel__actions {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: flex-end;
+}
+
 .media-tagging-tag-list {
     align-content: start;
     display: grid;
@@ -870,10 +948,14 @@
 }
 
 .media-tagging-created-tags-shell {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
     margin-top: var(--spacing-2);
-    padding-top: var(--spacing-4);
+    min-height: 0;
     overflow: hidden;
+    padding-top: var(--spacing-4);
 }
 
 .media-tagging-created-tags-frame {
@@ -884,8 +966,8 @@
 }
 
 .media-tagging-created-tags {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -898,8 +980,8 @@
 
 .media-tagging-created-tag {
     align-items: center;
-    background: rgba(252, 227, 0, 0.05);
-    border: 1px solid rgba(252, 227, 0, 0.12);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-12);
     display: flex;
     gap: var(--spacing-3);
     justify-content: space-between;
@@ -928,8 +1010,8 @@
 .media-tagging-created-tag__badge,
 .media-tagging-tag-option__badge {
     align-items: center;
-    background: rgba(252, 227, 0, 0.1);
-    border: 1px solid rgba(252, 227, 0, 0.18);
+    background: var(--primary-alpha-10);
+    border: 1px solid var(--primary-alpha-18);
     color: var(--color-primary-container);
     display: inline-flex;
     font-family: var(--font-family-mono);
@@ -954,8 +1036,8 @@
 
 .media-tagging-tag-option {
     align-items: start;
-    background: rgba(252, 227, 0, 0.03);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--primary-alpha-05);
+    border: 1px solid var(--border-medium);
     border-radius: 0.25rem;
     cursor: pointer;
     display: grid;
@@ -970,15 +1052,20 @@
 }
 
 .media-tagging-tag-option:hover {
-    border-color: rgba(252, 227, 0, 0.28);
-    background: rgba(252, 227, 0, 0.05);
+    border-color: rgb(var(--rgb-primary) / 0.28);
+    background: var(--primary-alpha-08);
     transform: translateY(-1px);
 }
 
+.media-tagging-tag-option:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+}
+
 .media-tagging-tag-option.is-selected {
-    background: rgba(252, 227, 0, 0.09);
-    border-color: rgba(252, 227, 0, 0.34);
-    box-shadow: inset 0 0 0 1px rgba(252, 227, 0, 0.14);
+    background: rgb(var(--rgb-primary) / 0.09);
+    border-color: rgb(var(--rgb-primary) / 0.34);
+    box-shadow: inset 0 0 0 1px rgb(var(--rgb-primary) / 0.14);
 }
 
 .media-tagging-tag-option__checkbox {
@@ -1018,8 +1105,8 @@
 }
 
 .media-tagging-issue {
-    background: rgba(252, 227, 0, 0.06);
-    border: 1px solid rgba(252, 227, 0, 0.15);
+    background: var(--primary-alpha-06);
+    border: 1px solid var(--primary-alpha-15);
     color: var(--color-on-surface);
     font-size: 0.875rem;
     line-height: 1.65;
@@ -1051,7 +1138,7 @@
     align-items: center;
     background: transparent;
     border: 0;
-    color: rgba(229, 226, 225, 0.45);
+    color: var(--text-subtle);
     cursor: pointer;
     display: inline-flex;
     font-size: 1rem;
@@ -1076,8 +1163,8 @@
 }
 
 .media-tagging-inline-warning {
-    background: rgba(252, 227, 0, 0.08);
-    border: 1px solid rgba(252, 227, 0, 0.2);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-20);
     color: var(--color-on-surface);
     font-size: 0.85rem;
     line-height: 1.6;
@@ -1139,9 +1226,44 @@
         grid-template-columns: 1fr;
     }
 
+    .sql-highlight-shell--media {
+        min-height: 9rem;
+    }
+
     .media-tagging-audio-preview {
         grid-template-columns: 1fr;
         justify-items: center;
         text-align: center;
     }
 }
+
+@media (min-width: 1024px) and (max-height: 900px) {
+    .media-tagging-card--tagging .media-tagging-card__header,
+    .media-tagging-card--tagging .media-tagging-card__body {
+        padding: var(--spacing-4);
+    }
+
+    .media-tagging-card--tagging .media-tagging-card__body {
+        gap: var(--spacing-3);
+    }
+
+    .media-tagging-card--tagging .media-tagging-form-grid,
+    .media-tagging-card--tagging .media-tagging-query-grid {
+        gap: var(--spacing-3);
+    }
+
+    .media-tagging-card--tagging .media-tagging-field {
+        gap: 0.35rem;
+    }
+
+    .media-tagging-card--tagging .sql-highlight-shell--media {
+        min-height: 4.5rem;
+    }
+
+    .media-tagging-card--tagging .sql-highlight-content,
+    .media-tagging-card--tagging .sql-highlight-input {
+        font-size: 0.72rem;
+        line-height: 1.5;
+        padding: 0.65rem 0.75rem;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.9.0",
+    "version": "0.9.3",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {