sqlite-hub 0.12.0 → 0.17.0

package/frontend/styles/components.css

@@ -156,14 +156,32 @@
 .sidebar-footer {
     margin-top: auto;
     padding: 0 var(--spacing-6);
+    position: relative;
 }
 
 .sidebar-footer-card {
     align-items: center;
     background: var(--color-surface-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    cursor: pointer;
     display: flex;
     gap: var(--spacing-3);
+    list-style: none;
     padding: var(--spacing-2);
+    transition:
+        background-color var(--transition-fast),
+        border-color var(--transition-fast),
+        color var(--transition-fast);
+}
+
+.sidebar-footer-card:hover,
+.sidebar-db-picker[open] .sidebar-footer-card {
+    background: var(--color-surface-container);
+    border-color: var(--primary-alpha-24);
+}
+
+.sidebar-footer-card::-webkit-details-marker {
+    display: none;
 }
 
 .sidebar-footer-mark {
@@ -178,6 +196,146 @@
     width: 2rem;
 }
 
+.sidebar-db-picker {
+    position: relative;
+}
+
+.sidebar-db-picker__chevron {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    font-size: 18px;
+    line-height: 1;
+    transition:
+        color var(--transition-fast),
+        transform var(--transition-fast);
+}
+
+.sidebar-db-picker[open] .sidebar-db-picker__chevron {
+    color: var(--color-primary-container);
+    transform: rotate(180deg);
+}
+
+.sidebar-db-picker__panel {
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.2);
+    bottom: calc(100% + var(--spacing-3));
+    box-shadow: 0 18px 48px rgb(0 0 0 / 0.42);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    left: 0;
+    padding: var(--spacing-2);
+    position: absolute;
+    right: 0;
+    z-index: 35;
+}
+
+.sidebar-db-picker__header {
+    align-items: center;
+    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+    display: flex;
+    font-family: var(--font-family-mono);
+    font-size: 9px;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.16em;
+    padding: var(--spacing-1) var(--spacing-2);
+    text-transform: uppercase;
+}
+
+.sidebar-db-picker__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
+.sidebar-db-picker-card {
+    align-items: center;
+    background: var(--color-surface-low);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    color: var(--color-on-surface);
+    cursor: pointer;
+    display: flex;
+    gap: var(--spacing-3);
+    min-width: 0;
+    padding: var(--spacing-2);
+    text-align: left;
+    transition:
+        background-color var(--transition-fast),
+        border-color var(--transition-fast),
+        box-shadow var(--transition-fast);
+    width: 100%;
+}
+
+.sidebar-db-picker-card:hover {
+    background: var(--color-surface-high);
+    border-color: var(--primary-alpha-24);
+}
+
+.sidebar-db-picker-card.is-active {
+    box-shadow: inset 2px 0 0 var(--color-primary-container);
+}
+
+.sidebar-db-picker-card__mark {
+    align-items: center;
+    background: var(--color-surface-container-highest);
+    color: var(--color-outline-variant);
+    display: flex;
+    flex: 0 0 2rem;
+    height: 2rem;
+    justify-content: center;
+    width: 2rem;
+}
+
+.sidebar-db-picker-card.is-active .sidebar-db-picker-card__mark {
+    background: var(--color-primary-container);
+    color: var(--color-on-primary);
+}
+
+.sidebar-db-picker-card__body {
+    display: block;
+    min-width: 0;
+}
+
+.sidebar-db-picker-card__label,
+.sidebar-db-picker-card__path,
+.sidebar-db-picker-card__meta {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sidebar-db-picker-card__label {
+    color: var(--color-on-surface);
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+.sidebar-db-picker-card__path {
+    color: rgb(var(--rgb-on-surface-variant) / 0.54);
+    font-family: var(--font-family-mono);
+    font-size: 9px;
+    margin-top: 1px;
+}
+
+.sidebar-db-picker-card__meta {
+    color: rgb(var(--rgb-primary) / 0.78);
+    font-family: var(--font-family-mono);
+    font-size: 8px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    margin-top: 2px;
+    text-transform: uppercase;
+}
+
+.sidebar-db-picker__empty {
+    border: 1px dashed rgb(var(--rgb-outline) / 0.16);
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    font-size: 0.72rem;
+    padding: var(--spacing-3);
+    text-align: center;
+}
+
 .status-bar-shell {
     align-items: center;
     background: var(--color-surface-lowest);
@@ -277,6 +435,8 @@
 .signature-button:focus-visible,
 .delete-button:focus-visible,
 .toolbar-button:focus-visible,
+.query-result-column-menu__toggle:focus-visible,
+.query-result-column-menu__item:focus-visible,
 .query-history-icon-button:focus-visible,
 .top-nav-icon:focus-visible,
 .query-history-item-hit:focus-visible,
@@ -284,6 +444,8 @@
 .bottom-tab:focus-visible,
 .sidebar-link:focus-visible,
 .sidebar-sublink:focus-visible,
+.sidebar-footer-card:focus-visible,
+.sidebar-db-picker-card:focus-visible,
 .charts-height-toggle__button:focus-visible {
     box-shadow: var(--focus-ring);
     outline: none;
@@ -303,6 +465,142 @@
         color var(--transition-fast);
 }
 
+.query-result-header-cell {
+    min-width: 10rem;
+    position: relative;
+}
+
+.query-result-column-header {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+    min-width: 0;
+    position: relative;
+}
+
+.query-result-column-sort {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-2);
+    justify-content: space-between;
+    min-width: 0;
+    text-align: left;
+    transition: color var(--transition-fast);
+    width: 100%;
+}
+
+.query-result-column-static {
+    display: block;
+    min-width: 0;
+    width: 100%;
+}
+
+.query-result-column-label {
+    display: block;
+    min-width: 0;
+}
+
+.query-result-column-menu {
+    cursor: pointer;
+    flex: 0 0 auto;
+    position: relative;
+}
+
+.query-result-column-menu__toggle {
+    align-items: center;
+    color: var(--color-on-surface-variant);
+    cursor: pointer;
+    display: flex;
+    height: 22px;
+    justify-content: center;
+    list-style: none;
+    opacity: 0.22;
+    transition:
+        background-color var(--transition-fast),
+        color var(--transition-fast),
+        opacity var(--transition-fast);
+    width: 22px;
+}
+
+.query-result-column-menu__toggle::-webkit-details-marker {
+    display: none;
+}
+
+.query-result-column-header:hover .query-result-column-menu__toggle,
+.query-result-column-menu[open] .query-result-column-menu__toggle {
+    opacity: 1;
+}
+
+.query-result-column-menu[open] .query-result-column-menu__toggle {
+    background: var(--color-surface-bright);
+    color: var(--color-primary-container);
+}
+
+.query-result-column-menu__toggle .material-symbols-outlined {
+    font-size: 18px;
+    line-height: 1;
+}
+
+.query-result-column-menu__panel {
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.22);
+    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
+    min-width: 13rem;
+    padding: 4px;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 6px);
+    z-index: 30;
+}
+
+.query-result-column-menu__item {
+    color: var(--color-on-surface);
+    cursor: pointer;
+    display: block;
+    font-family: var(--font-family-body);
+    font-size: 0.75rem;
+    line-height: 1.3;
+    padding: 0.55rem 0.7rem;
+    text-align: left;
+    transition:
+        background-color var(--transition-fast),
+        color var(--transition-fast);
+    width: 100%;
+}
+
+.query-result-column-menu__item:hover {
+    background: var(--color-surface-highest);
+    color: var(--color-primary-container);
+}
+
+.copy-column-preview {
+    background: var(--color-surface-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    color: rgb(var(--rgb-on-surface) / 0.72);
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    line-height: 1.55;
+    margin: 0;
+    max-height: 7.5rem;
+    overflow: auto;
+    overflow-wrap: anywhere;
+    padding: var(--spacing-3);
+    white-space: pre-wrap;
+}
+
+.copy-column-preview--editable {
+    display: block;
+    min-height: 10rem;
+    outline: none;
+    resize: vertical;
+    width: 100%;
+}
+
+.copy-column-preview--editable:focus {
+    border-color: rgb(var(--rgb-primary) / 0.55);
+    color: rgb(var(--rgb-on-surface) / 0.9);
+}
+
 .metric-card {
     background: var(--color-surface-low);
     display: flex;
@@ -799,6 +1097,10 @@ input.table-designer-main__name[type='text'] {
     background: var(--primary-alpha-06);
 }
 
+.table-designer-banner.is-note {
+    background: rgb(var(--rgb-on-surface-variant) / 0.035);
+}
+
 .table-designer-banner.is-validation {
     background: rgb(var(--rgb-error-container) / 0.12);
 }
@@ -853,6 +1155,18 @@ input.table-designer-main__name[type='text'] {
     padding: var(--spacing-2) 0 var(--spacing-4);
 }
 
+.table-designer-main__section-actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    justify-content: flex-end;
+}
+
+.table-designer-main__section-actions .standard-button {
+    gap: var(--spacing-2);
+}
+
 .table-designer-grid {
     background: var(--color-surface-container-lowest);
     border: 1px solid rgb(var(--rgb-outline) / 0.14);
@@ -874,8 +1188,8 @@ input.table-designer-main__name[type='text'] {
         minmax(10rem, 1fr)
         minmax(10rem, 1fr)
         minmax(10rem, 1fr)
-        minmax(7rem, max-content);
-    min-width: 82rem;
+        minmax(13rem, max-content);
+    min-width: 88rem;
     padding: var(--spacing-3);
 }
 
@@ -892,11 +1206,171 @@ input.table-designer-main__name[type='text'] {
     z-index: 2;
 }
 
+.table-designer-constraints__list {
+    align-items: start;
+    display: grid;
+    gap: var(--spacing-3);
+    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
+}
+
+.table-designer-constraints-modal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    max-height: min(62vh, 44rem);
+    overflow: auto;
+    padding-right: 0.1rem;
+}
+
+.table-designer-constraints-modal__summary {
+    align-items: center;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    min-width: 0;
+    padding: var(--spacing-3) var(--spacing-4);
+}
+
+.table-designer-constraints-modal__summary code {
+    color: var(--color-primary-container);
+    display: block;
+    font-family: var(--font-family-mono);
+    font-size: 0.875rem;
+    margin-top: var(--spacing-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.table-designer-constraints-modal__label,
+.table-designer-constraints-modal__section-title {
+    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.table-designer-constraints-modal__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.table-designer-constraints-modal__section-header {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+}
+
+.table-designer-constraints-modal__empty {
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface) / 0.58);
+    font-size: 0.8125rem;
+    padding: var(--spacing-4);
+}
+
+.table-designer-constraint-editor {
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.14);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+    min-width: 0;
+    padding: var(--spacing-3);
+}
+
+.table-designer-constraint-editor__header {
+    align-items: flex-start;
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+}
+
+.table-designer-constraint-editor__name {
+    margin-top: var(--spacing-2);
+    width: min(22rem, 100%);
+}
+
+.table-designer-constraint-editor__type {
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.table-designer-constraint__columns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+}
+
+.table-designer-constraint__columns span,
+.table-designer-constraint__values span {
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
+    color: rgb(var(--rgb-on-surface) / 0.72);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    padding: 0.2rem 0.45rem;
+}
+
+.table-designer-constraint__values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    max-height: 8rem;
+    overflow: auto;
+}
+
+.table-designer-constraint__values span {
+    background: var(--primary-alpha-06);
+    border-color: var(--primary-alpha-18);
+    color: var(--color-primary-container);
+}
+
+.table-designer-constraint-editor__sql {
+    background: var(--color-surface-low);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface) / 0.68);
+    font-family: var(--font-family-mono);
+    font-size: 0.72rem;
+    line-height: 1.5;
+    margin: 0;
+    min-height: 7rem;
+    overflow: auto;
+    padding: var(--spacing-3);
+    resize: vertical;
+    width: 100%;
+}
+
 .table-designer-grid__row {
     border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
     align-items: center;
 }
 
+.table-designer-row-actions {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-2);
+    justify-content: flex-end;
+    min-width: 0;
+}
+
+.table-designer-row-check-button {
+    gap: var(--spacing-2);
+    white-space: nowrap;
+}
+
 .table-designer-field {
     height: var(--control-height);
     min-height: var(--control-height);

package/frontend/styles/structure-graph.css

@@ -1,6 +1,5 @@
 .structure-graph {
     background: var(--color-surface-container);
-    border: 1px solid rgba(138, 123, 52, 0.26);
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -10,8 +9,6 @@
 
 .structure-graph__toolbar {
     align-items: center;
-    background: linear-gradient(to bottom, rgba(45, 43, 37, 0.97), rgba(23, 23, 20, 0.96));
-    border-bottom: 1px solid rgba(138, 123, 52, 0.24);
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;