sqlite-hub 2.0.1 → 2.2.0

package/frontend/styles/components.css

@@ -985,6 +985,226 @@
     color: var(--color-tertiary-dim);
 }
 
+.connection-registry-toolbar {
+    align-items: stretch;
+    background: var(--color-surface-container-low);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    display: grid;
+    gap: var(--spacing-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    margin-bottom: var(--spacing-6);
+    padding: var(--spacing-3);
+}
+
+.connection-registry-search {
+    align-items: center;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.18);
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--spacing-3);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    min-height: calc(var(--control-height) + var(--spacing-2));
+    padding-block: 0;
+    padding-inline: var(--spacing-4);
+    transition:
+        border-color var(--transition-fast),
+        box-shadow var(--transition-fast);
+}
+
+.connection-registry-search:focus-within {
+    border-color: var(--color-primary-container);
+    box-shadow: var(--focus-ring-inset);
+}
+
+.connection-registry-search__icon {
+    color: rgb(var(--rgb-on-surface-variant) / 0.45);
+    font-size: 18px;
+    line-height: 1;
+}
+
+.connection-registry-search__input {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    height: 100%;
+    line-height: 1;
+    min-width: 0;
+    outline: none;
+    padding: 0;
+    text-transform: uppercase;
+}
+
+.connection-registry-search__input::-webkit-search-cancel-button,
+.connection-registry-search__input::-webkit-search-decoration {
+    appearance: none;
+}
+
+.connection-registry-search__input::placeholder {
+    color: rgb(var(--rgb-on-surface-variant) / 0.35);
+}
+
+.connection-registry-search__input:focus {
+    box-shadow: none;
+    outline: none;
+}
+
+.connection-registry-search__shortcut {
+    align-items: center;
+    background: rgb(var(--rgb-outline) / 0.06);
+    border: 1px solid rgb(var(--rgb-outline) / 0.14);
+    display: inline-flex;
+    color: rgb(var(--rgb-on-surface-variant) / 0.42);
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    height: 1.5rem;
+    justify-content: center;
+    min-width: 1.5rem;
+}
+
+.connection-tag-filter {
+    flex: 0 0 auto;
+    min-width: 9.5rem;
+    width: clamp(9.5rem, 18vw, 15rem);
+}
+
+.connection-tag-filter__toggle {
+    background: var(--color-surface-container-low);
+    border-color: rgb(var(--rgb-outline) / 0.18);
+    box-sizing: border-box;
+    color: rgb(var(--rgb-on-surface) / 0.86);
+    display: inline-grid;
+    gap: var(--spacing-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    height: 100%;
+    min-height: var(--control-height);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-4);
+    width: 100%;
+}
+
+.connection-tag-filter__toggle-label {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.connection-tag-filter[open] .connection-tag-filter__toggle {
+    background: var(--color-surface-container);
+    border-color: rgb(var(--rgb-outline) / 0.26);
+    box-shadow: inset 0 -1px 0 rgb(var(--rgb-primary) / 0.2);
+    color: rgb(var(--rgb-on-surface) / 0.9);
+}
+
+.connection-tag-filter__toggle:hover,
+.connection-tag-filter[open] .connection-tag-filter__toggle:hover {
+    border-color: rgb(var(--rgb-primary) / 0.28);
+    color: var(--color-primary-container);
+}
+
+.connection-tag-filter__panel {
+    background: var(--color-surface-container-low);
+    border-color: rgb(var(--rgb-outline) / 0.16);
+    box-shadow: 0 18px 32px rgb(0 0 0 / 0.42);
+    min-width: 15.5rem;
+    padding: var(--spacing-2);
+}
+
+.connection-tag-filter__header {
+    align-items: center;
+    background: var(--color-surface-container);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface-variant) / 0.7);
+    display: flex;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.18em;
+    margin-bottom: var(--spacing-1);
+    min-height: 2rem;
+    padding: 0 var(--spacing-4);
+    text-transform: uppercase;
+}
+
+.connection-tag-filter__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-height: 16rem;
+    overflow: auto;
+}
+
+.connection-tag-filter-row {
+    align-items: center;
+    background: var(--color-surface-container-lowest);
+    border: 0;
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.08);
+    cursor: pointer;
+    display: grid;
+    gap: var(--spacing-4);
+    grid-template-columns: 1rem minmax(0, 1fr) auto;
+    min-height: calc(var(--control-height) + var(--spacing-1));
+    padding: 0 var(--spacing-4);
+}
+
+.connection-tag-filter-row:hover {
+    background: var(--color-surface-container);
+    color: var(--color-primary-container);
+}
+
+.connection-tag-filter-row input {
+    background-color: var(--color-surface-container-lowest);
+    border-color: rgb(var(--rgb-on-surface-variant) / 0.45);
+    color: var(--color-primary-container);
+    height: 1rem;
+    justify-self: start;
+    margin: 0;
+    width: 1rem;
+}
+
+.connection-tag-filter-row__name {
+    color: rgb(var(--rgb-on-surface) / 0.86);
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.connection-tag-filter-row__count {
+    color: rgb(var(--rgb-on-surface-variant) / 0.5);
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+}
+
+.connection-tag-filter__empty {
+    border: 1px dashed rgb(var(--rgb-outline) / 0.16);
+    color: rgb(var(--rgb-on-surface-variant) / 0.5);
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    padding: var(--spacing-4);
+    text-align: center;
+}
+
+.connection-tag-filter__reset {
+    background: var(--color-surface-container);
+    border: 0;
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface-variant) / 0.56);
+    height: calc(var(--control-height) + var(--spacing-1));
+    margin-top: var(--spacing-1);
+    width: 100%;
+}
+
 .connection-card {
     background: var(--color-surface-container);
     cursor: pointer;
@@ -1008,6 +1228,238 @@
         0 0 20px var(--primary-alpha-05);
 }
 
+.connection-user-tags {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--spacing-2);
+    margin-top: var(--spacing-3);
+    max-width: 100%;
+    min-width: 0;
+}
+
+.connection-user-tag {
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.14);
+    color: rgb(var(--rgb-on-surface-variant) / 0.76);
+    display: inline-flex;
+    flex: 0 1 auto;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    line-height: 1;
+    max-width: 9.5rem;
+    min-width: 0;
+    overflow: hidden;
+    padding: var(--spacing-1) var(--spacing-2);
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.connection-user-tag:hover {
+    border-color: rgb(var(--rgb-primary) / 0.35);
+    color: var(--color-primary-container);
+}
+
+.connection-user-tag--more {
+    flex: 0 0 auto;
+}
+
+.connection-filter-empty {
+    align-items: center;
+    background: var(--color-surface-container-low);
+    border: 1px dashed rgb(var(--rgb-outline) / 0.2);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 17.5rem;
+    padding: var(--spacing-8);
+    text-align: center;
+}
+
+.connection-filter-empty__icon {
+    color: rgb(var(--rgb-on-surface-variant) / 0.28);
+    font-size: 3rem;
+    margin-bottom: var(--spacing-3);
+}
+
+.connection-filter-empty__title {
+    color: var(--color-primary-container);
+    font-family: var(--font-family-body);
+    font-size: 1.25rem;
+    font-weight: 900;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+.connection-filter-empty__hint {
+    color: rgb(var(--rgb-on-surface-variant) / 0.6);
+    font-size: 0.875rem;
+    margin-top: var(--spacing-2);
+}
+
+.connection-edit-tags {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.connection-edit-tags__label,
+.connection-edit-tag-options__section {
+    color: rgb(var(--rgb-on-surface-variant) / 0.6);
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+}
+
+.connection-edit-tags__assigned {
+    align-items: center;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    min-height: calc(var(--control-height) + var(--spacing-2));
+    padding: var(--spacing-4);
+}
+
+.connection-edit-tags__input-shell {
+    display: block;
+    width: 100%;
+}
+
+.connection-edit-tags__empty {
+    color: rgb(var(--rgb-on-surface-variant) / 0.4);
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+}
+
+.connection-edit-tag-chip {
+    align-items: center;
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
+    color: rgb(var(--rgb-on-surface-variant) / 0.82);
+    display: inline-flex;
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    max-width: 100%;
+    min-height: 1.75rem;
+    text-transform: uppercase;
+}
+
+.connection-edit-tag-chip__label {
+    overflow: hidden;
+    padding: 0 var(--spacing-2);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.connection-edit-tag-chip__remove {
+    align-items: center;
+    border-left: 1px solid rgb(var(--rgb-outline) / 0.14);
+    color: rgb(var(--rgb-on-surface-variant) / 0.7);
+    display: inline-flex;
+    height: 1.75rem;
+    justify-content: center;
+    width: 1.75rem;
+}
+
+.connection-edit-tag-chip__remove:hover {
+    background: var(--color-surface-highest);
+    color: var(--color-primary-container);
+}
+
+.connection-edit-tags__input {
+    appearance: none;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.18);
+    border-radius: 0;
+    box-shadow: none;
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: 0.875rem;
+    outline: none;
+    padding-inline: var(--spacing-4);
+    text-transform: uppercase;
+    width: 100%;
+}
+
+.connection-edit-tags__input::placeholder {
+    color: rgb(var(--rgb-on-surface-variant) / 0.38);
+}
+
+.connection-edit-tags__input:focus {
+    background: var(--color-surface-container-lowest);
+    border-color: var(--color-primary-container);
+    box-shadow: var(--focus-ring-inset);
+    color: var(--color-on-surface);
+    outline: none;
+}
+
+.connection-edit-tags__error {
+    color: var(--color-error);
+    font-size: 0.75rem;
+}
+
+.connection-edit-tag-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+    margin-top: var(--spacing-1);
+}
+
+.connection-edit-tag-option {
+    align-items: center;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    color: var(--color-on-surface);
+    display: flex;
+    font-family: var(--font-family-body);
+    font-size: 0.75rem;
+    justify-content: space-between;
+    min-height: var(--control-height);
+    padding-block: 0;
+    padding-inline: var(--spacing-4);
+    text-align: left;
+}
+
+.connection-edit-tag-option:focus-visible {
+    box-shadow: var(--focus-ring-inset);
+    outline: none;
+}
+
+.connection-edit-tag-option:hover,
+.connection-edit-tag-option--create:hover {
+    border-color: rgb(var(--rgb-primary) / 0.35);
+    color: var(--color-primary-container);
+}
+
+.connection-edit-tag-option--create {
+    color: rgb(var(--rgb-on-surface-variant) / 0.82);
+}
+
+@media (max-width: 720px) {
+    .connection-registry-toolbar {
+        grid-template-columns: 1fr;
+    }
+
+    .connection-tag-filter {
+        width: 100%;
+    }
+
+    .connection-tag-filter__panel {
+        left: 0;
+        min-width: 0;
+        right: 0;
+        width: 100%;
+    }
+}
+
 .bottom-tab {
     border-bottom: 1px solid transparent;
     color: var(--text-variant-subtle);
@@ -1099,8 +1551,7 @@
     padding: var(--spacing-4);
 }
 
-.query-history-list,
-.table-designer-constraints-modal__section {
+.query-history-list {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-4);
@@ -1348,6 +1799,36 @@ input.table-designer-sidebar__search-input[type='search'] {
     margin-top: 0;
 }
 
+.table-designer-import-source {
+    align-items: baseline;
+    border-left: 1px solid rgb(var(--rgb-outline) / 0.22);
+    display: inline-flex;
+    gap: var(--spacing-3);
+    min-width: 0;
+    padding-left: var(--spacing-4);
+}
+
+.table-designer-import-source__label {
+    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.table-designer-import-source__file {
+    color: rgb(var(--rgb-on-surface) / 0.72);
+    font-family: var(--font-family-body);
+    font-size: 0.8rem;
+    font-weight: 700;
+    max-width: min(22rem, 42vw);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .table-designer-main__name {
     -webkit-appearance: none;
     appearance: none;
@@ -1450,8 +1931,7 @@ input.table-designer-main__name[type='text'] {
     background: rgb(var(--rgb-error-container) / 0.12);
 }
 
-.table-designer-banner__header,
-.table-designer-constraints-modal__section-header {
+.table-designer-banner__header {
     align-items: center;
     display: flex;
     gap: var(--spacing-4);
@@ -1552,138 +2032,246 @@ input.table-designer-main__name[type='text'] {
     z-index: 2;
 }
 
-.table-designer-constraints__list {
-    align-items: start;
-    display: grid;
-    gap: var(--spacing-4);
-    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
+.table-designer-check-drawer {
+    color: var(--color-on-surface);
 }
 
-.table-designer-constraints-modal {
+.table-designer-check-drawer__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--spacing-4);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-4);
-    max-height: min(62vh, 44rem);
-    overflow: auto;
-    padding-right: calc(var(--spacing-1) / 2);
 }
 
-.table-designer-constraints-modal__summary {
-    align-items: center;
+.table-designer-check-drawer__section {
     background: var(--color-surface-container-lowest);
-    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
     display: flex;
-    gap: var(--spacing-4);
-    justify-content: space-between;
+    flex-direction: column;
     min-width: 0;
-    padding: var(--spacing-4) 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-check-drawer__section-header,
+.table-designer-check-drawer__item-header,
+.table-designer-check-drawer__item-actions,
+.table-designer-check-drawer__actions,
+.table-designer-check-drawer__subheader {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-2);
+    justify-content: space-between;
 }
 
-.table-designer-constraints-modal__label,
-.table-designer-constraints-modal__section-title {
-    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+.table-designer-check-drawer__section-header {
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface-variant) / 0.66);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
     font-weight: 700;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.14em;
+    padding: var(--spacing-2) var(--spacing-4);
     text-transform: uppercase;
 }
 
-.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-check-drawer__section-title {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--spacing-2);
+    min-width: 0;
 }
 
-.table-designer-constraint-editor {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgb(var(--rgb-outline) / 0.14);
+.table-designer-check-drawer__header-action {
+    flex: 0 0 auto;
+}
+
+.table-designer-check-drawer__list {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-4);
+}
+
+.table-designer-check-drawer__item {
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
     min-width: 0;
     padding: var(--spacing-4);
 }
 
-.table-designer-constraint-editor__header {
-    align-items: flex-start;
+.table-designer-check-drawer__item:first-child {
+    border-top: 0;
+}
+
+.table-designer-check-drawer__item-title {
+    color: var(--color-on-surface);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.table-designer-check-drawer__item-meta,
+.table-designer-check-drawer__note,
+.table-designer-check-drawer__empty p {
+    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+    font-size: 0.78rem;
+    line-height: 1.45;
+}
+
+.table-designer-check-drawer__sql,
+.table-designer-check-drawer__preview pre {
+    background: var(--color-surface-low);
+    border: 1px solid rgb(var(--rgb-outline) / 0.1);
+    color: rgb(var(--rgb-on-surface) / 0.74);
+    font-family: var(--font-family-mono);
+    font-size: 0.74rem;
+    line-height: 1.55;
+    margin: 0;
+    max-height: 12rem;
+    overflow: auto;
+    padding: var(--spacing-2) var(--spacing-4);
+    white-space: pre-wrap;
+}
+
+.table-designer-check-drawer__quick {
+    background: var(--color-surface-low);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.1);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
     display: flex;
-    gap: var(--spacing-4);
-    justify-content: space-between;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    padding: var(--spacing-4);
 }
 
-.table-designer-constraint-editor__name {
-    margin-top: var(--spacing-2);
-    width: min(22rem, 100%);
+.table-designer-check-drawer__section > .table-designer-check-drawer__quick,
+.table-designer-check-drawer__section > .table-designer-check-drawer__field,
+.table-designer-check-drawer__section > .table-designer-check-drawer__preview,
+.table-designer-check-drawer__section > .table-designer-check-drawer__error,
+.table-designer-check-drawer__section > .grid {
+    margin-top: var(--spacing-4);
 }
 
-.table-designer-constraint-editor__type {
-    color: var(--color-on-surface);
+.table-designer-check-drawer__section > .grid {
+    padding: 0 var(--spacing-4);
+}
+
+.table-designer-check-drawer__subheader {
+    color: rgb(var(--rgb-on-surface-variant) / 0.58);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
     font-weight: 700;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.table-designer-check-drawer__preset-grid {
+    display: grid;
+    gap: var(--spacing-2);
+    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
+}
+
+.table-designer-check-drawer__preset-button {
+    justify-content: flex-start;
+    min-width: 0;
+    padding-inline: var(--spacing-4);
+}
+
+.table-designer-check-drawer__preset-button span {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-transform: uppercase;
     white-space: nowrap;
 }
 
-.table-designer-constraint__columns {
+.table-designer-check-drawer__field {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: var(--spacing-2);
+    min-width: 0;
+    padding: 0 var(--spacing-4);
 }
 
-.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);
+.table-designer-check-drawer__field > span,
+.table-designer-check-drawer__preview > div {
+    color: rgb(var(--rgb-on-surface-variant) / 0.66);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
-    padding: var(--spacing-1) var(--spacing-2);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.table-designer-field.table-designer-check-drawer__textarea,
+.table-designer-field.table-designer-check-drawer__expression {
+    font-family: var(--font-family-mono);
+    height: auto;
+    line-height: 1.5;
+    min-height: 7rem;
+    padding: var(--spacing-2) var(--spacing-4);
+    resize: vertical;
+}
+
+.table-designer-field.table-designer-check-drawer__expression {
+    min-height: 9rem;
 }
 
-.table-designer-constraint__values {
+.table-designer-check-drawer__preview {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: var(--spacing-2);
-    max-height: 8rem;
-    overflow: auto;
+    padding: 0 var(--spacing-4);
 }
 
-.table-designer-constraint__values span {
-    background: var(--primary-alpha-06);
-    border-color: var(--primary-alpha-18);
-    color: var(--color-primary-container);
+.table-designer-check-drawer__error {
+    background: rgb(var(--rgb-error-container) / 0.12);
+    border: 1px solid rgb(var(--rgb-error) / 0.28);
+    color: var(--color-error);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+    padding: var(--spacing-4);
 }
 
-.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);
+.table-designer-check-drawer__error div {
     font-family: var(--font-family-mono);
-    font-size: 0.72rem;
-    line-height: 1.5;
-    margin: 0;
-    min-height: 7rem;
-    overflow: auto;
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.table-designer-check-drawer__error p {
+    color: rgb(var(--rgb-on-surface) / 0.76);
+    font-size: 0.82rem;
+    line-height: 1.45;
+}
+
+.table-designer-check-drawer__empty {
+    background: transparent;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    padding: var(--spacing-6) var(--spacing-4);
+}
+
+.table-designer-check-drawer__empty div {
+    color: rgb(var(--rgb-on-surface-variant) / 0.66);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.table-designer-check-drawer__actions {
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.1);
+    justify-content: flex-end;
     padding: var(--spacing-4);
-    resize: vertical;
-    width: 100%;
 }
 
 .table-designer-grid__row {
@@ -1704,6 +2292,15 @@ input.table-designer-main__name[type='text'] {
     white-space: nowrap;
 }
 
+.table-designer-row-check-button__count {
+    color: var(--color-primary-container);
+    min-width: 1.75rem;
+}
+
+.table-designer-row-check-button__count.is-empty {
+    visibility: hidden;
+}
+
 .table-designer-field {
     height: var(--control-height);
     min-height: var(--control-height);