databasium 0.1.0

data/app/assets/builds/databasium.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-blue-500:oklch(62.3% .214 259.815);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-300:oklch(87.2% .01 258.338);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-light:300;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--databasium-background);--color-main-text:var(--databasium-text);--color-border:var(--databasium-border);--color-panel:var(--databasium-panel)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}input:-webkit-autofill{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--color-background)inset!important;-webkit-text-fill-color:var(--color-main-text)!important}input:-webkit-autofill:hover{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--color-background)inset!important;-webkit-text-fill-color:var(--color-main-text)!important}input:-webkit-autofill:focus{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0px 1000px var(--color-background)inset!important;-webkit-text-fill-color:var(--color-main-text)!important}}@layer components{.pagy{--B:1;--H:360;--S:48.71;--L:73.56;--A:1;--spacing:.1875rem;--padding:.5rem;--rounding:.75rem;--border-width:.0625rem;--font-size:.875rem;--font-weight:300;--line-height:1.75;--text:hsl(var(--H)var(--S)calc(var(--L) - (30*var(--B))));--text-hover:hsl(var(--H)var(--S)calc(var(--L) - (33*var(--B))));--text-current:hsl(var(--H)var(--S)calc(100*(var(--B) + 1)));--background:hsl(var(--H)var(--S)calc(var(--L) + (30*var(--B))));--background-hover:hsl(var(--H)var(--S)calc(var(--L) + (20*var(--B))));--background-current:hsl(var(--H)var(--S)var(--L));--background-input:hsl(var(--H)var(--S)calc(var(--L) + (45*var(--B))));--opacity:1;column-gap:var(--spacing);font-size:var(--font-size);--tw-leading:var(--line-height);line-height:var(--line-height);--tw-font-weight:var(--font-weight);font-weight:var(--font-weight);color:var(--text);display:flex}.pagy a:not([role=separator]){border-radius:var(--rounding);border-style:var(--tw-border-style);border-width:var(--border-width);--tw-border-style:solid;border-style:solid;border-color:var(--background-current);background-color:var(--background);padding-inline:var(--padding);padding-block:calc(var(--padding)/3);opacity:var(--opacity);display:block}.pagy a[href]:hover{background-color:var(--background-hover);color:var(--text-hover)}.pagy a:not([href]){cursor:default}.pagy a[role=link]:not([aria-current]){opacity:calc(var(--opacity)*.6)}.pagy a[aria-current]{background-color:var(--background-current);color:var(--text-current)}.pagy label{border-radius:var(--rounding);border-style:var(--tw-border-style);border-width:var(--border-width);--tw-border-style:solid;border-style:solid;border-color:var(--background-current);background-color:var(--background);padding-inline:var(--padding);padding-block:calc(var(--padding)/3 - var(--border-width));white-space:nowrap;display:inline-block}.pagy label input{border-radius:calc(var(--rounding)/2);border-style:var(--tw-border-style);border-width:var(--border-width);border-color:var(--background-current);background-color:var(--background-input);font-size:var(--font-size);--tw-leading:var(--line-height);line-height:var(--line-height);--tw-font-weight:var(--font-weight);font-weight:var(--font-weight);color:var(--text)}.scrollbar-thin::-webkit-scrollbar{border-radius:3.40282e38px;width:6px;height:6px}.scrollbar-thin::-webkit-scrollbar-track{background-color:var(--databasium-background)}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--databasium-panel)}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--databasium-hover)}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--databasium-panel)var(--databasium-background)}}@layer utilities{.collapse{visibility:collapse}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.-top-1\.5{top:calc(var(--spacing)*-1.5)}.-top-2\.5{top:calc(var(--spacing)*-2.5)}.-top-3{top:calc(var(--spacing)*-3)}.-top-4{top:calc(var(--spacing)*-4)}.top-1{top:calc(var(--spacing)*1)}.top-2{top:calc(var(--spacing)*2)}.top-20{top:calc(var(--spacing)*20)}.-right-\[0\.5rem\]{right:-.5rem}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.-bottom-5\.5{bottom:calc(var(--spacing)*-5.5)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[9999\]{z-index:9999}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-2{margin:calc(var(--spacing)*2)}.m-4{margin:calc(var(--spacing)*4)}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing)*2)}.ms-1{margin-inline-start:calc(var(--spacing)*1)}.ms-2{margin-inline-start:calc(var(--spacing)*2)}.ms-auto{margin-inline-start:auto}.me-2{margin-inline-end:calc(var(--spacing)*2)}.me-auto{margin-inline-end:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-15{height:calc(var(--spacing)*15)}.h-\[90dvh\]{height:90dvh}.h-dvh{height:100dvh}.h-fit{height:fit-content}.h-full{height:100%}.max-h-50{max-height:calc(var(--spacing)*50)}.max-h-64{max-height:calc(var(--spacing)*64)}.max-h-100{max-height:calc(var(--spacing)*100)}.max-h-\[calc\(100dvh-135px\)\]{max-height:calc(100dvh - 135px)}.max-h-fit{max-height:fit-content}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\[calc\(100dvh-51px\)\]{min-height:calc(100dvh - 51px)}.min-h-full{min-height:100%}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-35{width:calc(var(--spacing)*35)}.w-55{width:calc(var(--spacing)*55)}.w-64{width:calc(var(--spacing)*64)}.w-80{width:calc(var(--spacing)*80)}.w-125{width:calc(var(--spacing)*125)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-15{max-width:calc(var(--spacing)*15)}.max-w-40{max-width:calc(var(--spacing)*40)}.max-w-55{max-width:calc(var(--spacing)*55)}.max-w-125{max-width:calc(var(--spacing)*125)}.max-w-\[50vw\]{max-width:50vw}.max-w-fit{max-width:fit-content}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-fit{min-width:fit-content}.min-w-max{min-width:max-content}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[max-content_1fr\]{grid-template-columns:max-content 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.divide-x>:not(:last-child)),:where(.divide-x-1>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--databasium-border)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-b-xl{border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.rounded-bl-xl{border-bottom-left-radius:var(--radius-xl)}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b,.border-b-1{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l,.border-l-1{border-left-style:var(--tw-border-style);border-left-width:1px}.border-accent{border-color:var(--databasium-accent)}.border-blue-500{border-color:var(--color-blue-500)}.border-border{border-color:var(--databasium-border)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-400{border-color:var(--color-green-400)}.border-red-400{border-color:var(--color-red-400)}.border-r-border{border-right-color:var(--databasium-border)}.border-b-border{border-bottom-color:var(--databasium-border)}.border-b-gray-300{border-bottom-color:var(--color-gray-300)}.bg-accent{background-color:var(--databasium-accent)}.bg-background{background-color:var(--databasium-background)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-green-100{background-color:var(--color-green-100)}.bg-panel{background-color:var(--databasium-panel)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-white{background-color:var(--color-white)}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.ps-1{padding-inline-start:calc(var(--spacing)*1)}.ps-4{padding-inline-start:calc(var(--spacing)*4)}.pe-2{padding-inline-end:calc(var(--spacing)*2)}.pe-4{padding-inline-end:calc(var(--spacing)*4)}.pr-10{padding-right:calc(var(--spacing)*10)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-center{text-align:center}.text-end{text-align:end}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-nowrap{text-wrap:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--databasium-accent)}.text-blue-500{color:var(--color-blue-500)}.text-gray-300{color:var(--color-gray-300)}.text-green-500{color:var(--color-green-500)}.text-green-700{color:var(--color-green-700)}.text-main-text{color:var(--databasium-text)}.text-red-500{color:var(--color-red-500)}.text-red-700{color:var(--color-red-700)}.text-selected{color:var(--databasium-selected)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-accent{--tw-shadow:var(--databasium-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-1000{--tw-duration:1s;transition-duration:1s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-hover:hover{border-color:var(--databasium-hover)}.hover\:bg-background:hover{background-color:var(--databasium-background)}.hover\:bg-panel:hover{background-color:var(--databasium-panel)}.hover\:text-hover:hover{color:var(--databasium-hover)}.hover\:text-red-800:hover{color:var(--color-red-800)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@media (min-width:64rem){.lg\:w-4xl{width:var(--container-4xl)}}}:root{--databasium-primary:var(--color-blue-500);--databasium-secondary:var(--color-blue-500);--databasium-accent:var(--color-blue-500);--databasium-background:var(--color-slate-900);--databasium-text:var(--color-slate-100);--databasium-border:var(--color-slate-600);--databasium-panel:var(--color-slate-800);--databasium-hover:var(--color-yellow-400);--databasium-selected:var(--color-green-500);--databasium-shadow:0 0 6px #60a5fa80;--databasium-active:var(--color-blue-500);--databasium-focus:var(--color-blue-500);--databasium-disabled:var(--color-blue-500);--databasium-error:var(--color-blue-500);--databasium-success:var(--color-blue-500);--databasium-warning:var(--color-blue-500)}[data-theme=white]{--app-primary:#fff;--app-secondary:yellow;--app-accent:#888;--app-background:#111;--app-text:#fff}[data-theme=ocean]{--app-primary:#0f172a;--app-secondary:#38bdf8;--app-accent:#06b6d4;--app-background:#ecfeff;--app-text:#082f49}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

data/app/assets/config/databasium_manifest.js

@@ -0,0 +1 @@
+//= link_tree ../builds .css

data/app/assets/javascript/databasium/application.js

@@ -0,0 +1,2 @@
+import "@hotwired/turbo-rails";
+import "databasium/controllers";

data/app/assets/javascript/databasium/controllers/attribute_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="attribute"
+export default class extends Controller {
+  static targets = ["name", "nameInput", "nameValidationInput"];
+
+  connect() {}
+
+  updateName() {
+    const name = this.nameInputTarget.value;
+    this.nameTarget.textContent = name;
+    this.nameValidationInputTargets.forEach((target) => {
+      target.value = name;
+    });
+  }
+
+  updateValidationName(e) {
+    const name = this.nameInputTarget.value;
+    this.nameValidationInputTargets.forEach((target) => {
+      target.value = name;
+    });
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}

data/app/assets/javascript/databasium/controllers/collapse_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="collapse"
+export default class extends Controller {
+  static targets = ["content", "collapseIcon"];
+
+  connect() {}
+
+  toggle(e) {
+    e.preventDefault();
+    if (this.hasContentTarget) {
+      this.contentTargets.forEach((target) => {
+        target.classList.toggle("hidden");
+      });
+    }
+    this.collapseIconTarget.classList.toggle("rotate-180");
+  }
+}

data/app/assets/javascript/databasium/controllers/error_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="error"
+export default class extends Controller {
+  static targets = [];
+
+  connect() {}
+
+  close() {
+    this.element.classList.add("opacity-0");
+    setTimeout(() => {
+      this.element.classList.add("hidden");
+    }, 1000);
+  }
+}

data/app/assets/javascript/databasium/controllers/filter_controller.js

@@ -0,0 +1,224 @@
+import { Controller } from "@hotwired/stimulus";
+
+const OPERATOR_LABELS = {
+  eq: "=",
+  not_eq: "!=",
+  matches: "like",
+  does_not_match: "not like",
+  gt: ">",
+  lt: "<",
+  gteq: ">=",
+  lteq: "<=",
+  // between: "between",
+  is_true: "= true",
+  is_false: "= false",
+  is_null: "is null",
+  is_not_null: "is not null"
+};
+
+const TEXT_OPERATORS = ["eq", "not_eq", "matches", "does_not_match"];
+const NUMBER_OPERATORS = ["eq", "not_eq", "gt", "lt", "gteq", "lteq"];
+const DATE_OPERATORS = ["eq", "not_eq", "gt", "lt", "gteq", "lteq"];
+const BOOLEAN_OPERATORS = ["eq", "not_eq", "is_true", "is_false", "is_null", "is_not_null"];
+
+const INPUT_TYPE_BY_COLUMN = {
+  string: "text",
+  text: "text",
+  integer: "number",
+  float: "number",
+  decimal: "number",
+  datetime: "date",
+  date: "date",
+  time: "time"
+};
+
+const CL = {
+  row: "flex items-center py-1 border-l-1 border-border ps-1 ms-1",
+  select: "px-4 py-2 rounded-md border-1 border-border w-fit h-10 bg-panel",
+  selectMuted: "px-4 py-2 rounded-md border-1 border-border w-fit h-10 bg-background",
+  selectWhere: "px-4 py-2 rounded-md border-1 border-border w-fit h-10",
+  input: "px-4 py-2 rounded-md border-1 border-border w-fit max-w-40 h-10",
+  separator: "bg-panel inline-block h-2 w-3",
+  removeBtn: "text-red-500 hover:text-red-800"
+};
+
+function operatorsForColumnType(type) {
+  if (type === "text" || type === "string") return TEXT_OPERATORS;
+  if (type === "integer" || type === "float" || type === "decimal") return NUMBER_OPERATORS;
+  if (type === "datetime" || type === "date" || type === "time") return DATE_OPERATORS;
+  if (type === "boolean") return BOOLEAN_OPERATORS;
+  return TEXT_OPERATORS;
+}
+
+function fillOperatorOptions(select, operatorKeys) {
+  select.add(new Option("Operator", ""));
+  for (const key of operatorKeys) {
+    select.add(new Option(OPERATOR_LABELS[key], key));
+  }
+}
+
+// Connects to data-controller="filter"
+export default class extends Controller {
+  static targets = ["selectColumn", "form", "closeButton", "removeIcon"];
+  static values = { columns: Array };
+
+  connect() {
+    this.previousValues = new WeakMap();
+    this.addFilter(null, false);
+  }
+
+  createSeparator() {
+    const el = document.createElement("div");
+    el.className = CL.separator;
+    return el;
+  }
+
+  chooseColumn(event) {
+    const columnSelect = event.target;
+    const selected = columnSelect.value;
+    let selectedAttribute = null;
+
+    this.columnsValue = this.columnsValue.map((c) => {
+      if (c.name === selected) {
+        selectedAttribute = c;
+        return { ...c, used: true };
+      }
+      if (c.name === this.previousValues.get(columnSelect)) {
+        return { ...c, used: false };
+      }
+      return c;
+    });
+
+    this.resetOptions();
+
+    if (this.previousValues.get(columnSelect)) {
+      while (
+        columnSelect.nextElementSibling &&
+        columnSelect.nextElementSibling.tagName !== "BUTTON"
+      ) {
+        columnSelect.nextElementSibling.remove();
+      }
+    }
+
+    if (!selectedAttribute) {
+      return;
+    }
+
+    const sep = this.createSeparator();
+    columnSelect.after(this.createInputField(selectedAttribute));
+    columnSelect.after(sep.cloneNode(true));
+    columnSelect.after(this.createOperatorField(selectedAttribute));
+    columnSelect.after(sep.cloneNode(true));
+  }
+
+  rememberValue(event) {
+    this.previousValues.set(event.target, event.target.value);
+  }
+
+  addFilter(e, withOperatorType = true) {
+    e?.preventDefault();
+
+    const row = document.createElement("div");
+    row.className = CL.row;
+
+    const columnSelect = this.buildColumnSelect();
+    const removeButton = this.buildRemoveButton();
+
+    row.appendChild(removeButton);
+    row.appendChild(withOperatorType ? this.createOperatorTypeField() : this.createWhereField());
+    row.appendChild(this.createSeparator());
+    row.appendChild(columnSelect);
+
+    this.formTarget.lastElementChild.before(row);
+  }
+
+  buildColumnSelect() {
+    const select = document.createElement("select");
+    select.add(new Option("Column", ""));
+    this.columnsValue.forEach((col) => {
+      if (!col.used) {
+        select.add(new Option(col.name, col.name));
+      }
+    });
+    select.setAttribute("data-filter-target", "selectColumn");
+    select.setAttribute(
+      "data-action",
+      "change->filter#chooseColumn mousedown->filter#rememberValue"
+    );
+    select.className = CL.select;
+    return select;
+  }
+
+  buildRemoveButton() {
+    const button = document.createElement("button");
+    button.setAttribute("data-action", "click->filter#removeFilter");
+    button.className = CL.removeBtn;
+    const xIcon = this.removeIconTarget.cloneNode(true);
+    xIcon.classList.remove("hidden");
+    xIcon.classList.add("inline-block");
+    button.appendChild(xIcon);
+    return button;
+  }
+
+  createInputField(selectedAttribute) {
+    const input = document.createElement("input");
+    input.type = INPUT_TYPE_BY_COLUMN[selectedAttribute.type] || "text";
+    input.className = CL.input;
+    input.name = `filter[${selectedAttribute.name}][value]`;
+    return input;
+  }
+
+  createOperatorField(selectedAttribute) {
+    const select = document.createElement("select");
+    select.name = `filter[${selectedAttribute.name}][operator]`;
+    select.className = CL.selectMuted;
+    fillOperatorOptions(select, operatorsForColumnType(selectedAttribute.type));
+    return select;
+  }
+
+  createOperatorTypeField() {
+    const select = document.createElement("select");
+    select.name = "filter[operator_types][]";
+    select.className = CL.selectMuted;
+    select.add(new Option("Operator Type", "and"));
+    select.add(new Option("AND", "and"));
+    select.add(new Option("OR", "or"));
+    return select;
+  }
+
+  createWhereField() {
+    const select = document.createElement("select");
+    select.className = CL.selectWhere;
+    select.add(new Option("Where", "Where"));
+    select.disabled = true;
+    return select;
+  }
+
+  removeFilter(event) {
+    const row = event.currentTarget.parentElement;
+    const columnName = row?.querySelector("[data-filter-target='selectColumn']")?.value;
+
+    if (columnName) {
+      this.columnsValue = this.columnsValue.map((c) =>
+        c.name === columnName ? { ...c, used: false } : c
+      );
+    }
+
+    row?.remove();
+    this.resetOptions();
+  }
+
+  resetOptions() {
+    this.selectColumnTargets.forEach((select) => {
+      const value = select.value;
+      select.innerHTML = "";
+      select.add(new Option("Column", ""));
+      this.columnsValue.forEach((col) => {
+        if (!col.used || col.name === value) {
+          select.add(new Option(col.name, col.name));
+        }
+      });
+      select.value = value;
+    });
+  }
+}

data/app/assets/javascript/databasium/controllers/flash_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="flash"
+export default class extends Controller {
+  static targets = [];
+
+  connect() {
+    setTimeout(() => {
+      this.element.classList.add("opacity-0");
+      setTimeout(() => this.element.remove(), 1000);
+    }, 4000);
+  }
+
+  close() {
+    this.element.classList.add("opacity-0");
+    setTimeout(() => this.element.remove(), 1000);
+  }
+}

data/app/assets/javascript/databasium/controllers/graph_controller.js

@@ -0,0 +1,193 @@
+import { Controller } from "@hotwired/stimulus";
+import { Graph, InternalEvent, HierarchicalLayout } from "@maxgraph/core";
+import "databasium/shapes/erd_table_shape";
+
+// Connects to data-controller="graph"
+export default class extends Controller {
+  static values = { tables: String };
+
+  connect() {
+    const data = JSON.parse(this.tablesValue);
+
+    const container = this.element;
+    InternalEvent.disableContextMenu(container);
+    const graph = new Graph(container);
+    graph.setPanning(true);
+
+    const panningHandler = graph.getPlugin("PanningHandler");
+    if (panningHandler) {
+      panningHandler.useLeftButtonForPanning = true;
+    }
+    container.style.cursor = "grab";
+
+    container.addEventListener(
+      "wheel",
+      (event) => {
+        event.preventDefault();
+
+        const currentScale = graph.view.scale;
+        const zoomFactor = event.deltaY < 0 ? 1.06 : 0.94;
+        const nextScale = Math.min(Math.max(currentScale * zoomFactor, 0.25), 2.5);
+
+        graph.zoomTo(nextScale, true);
+      },
+      { passive: false }
+    );
+
+    graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = "orthogonalEdgeStyle";
+
+    const vertexes = this.addVertexes(graph, data);
+    const edges = this.addEdges(graph, data, vertexes);
+
+    const layout = new HierarchicalLayout(graph);
+    layout.execute(graph.getDefaultParent());
+  }
+
+  addLabelToEdge(graph, edge, text, position = "start") {
+    const x = position === "start" ? -0.85 : 0.85;
+
+    graph.insertVertex(
+      edge,
+      null,
+      text,
+      x,
+      0,
+      1,
+      1,
+      {
+        fillColor: "none",
+        strokeColor: "none",
+        fontColor: "var(--color-main-text)",
+        fontSize: 12,
+        align: "center",
+        verticalAlign: "middle",
+        labelBackgroundColor: "var(--color-panel)",
+        labelPadding: 4
+      },
+      true // relative — without this, labels won't appear on the edge
+    );
+  }
+
+  addEdges(graph, data, vertexes) {
+    const edgeStyle = {
+      edgeStyle: "orthogonalEdgeStyle",
+      rounded: true,
+      startArrow: "none",
+      endArrow: "none",
+      strokeColor: "var(--color-border)",
+      strokeWidth: 2
+    };
+
+    graph.batchUpdate(() => {
+      const alreadySet = new Set();
+      for (let table of Object.keys(data)) {
+        for (let association of data[table]?.associations || []) {
+          const relatedTable = data[association.name];
+          if (!relatedTable || !vertexes[association.name]) continue;
+          if (alreadySet.has(`${association.name}-${table}`)) continue;
+
+          alreadySet.add(`${table}-${association.name}`);
+
+          const sourceMacro = association.macro;
+          const targetMacro = relatedTable.associations?.find(
+            (assoc) => assoc.name === table
+          )?.macro;
+
+          const edge = graph.insertEdge({
+            source: vertexes[table],
+            target: vertexes[association.name],
+            style: edgeStyle
+          });
+          // macros are declered on oposite sites, thats why we use labels for oposite macros
+          this.addLabelToEdge(
+            graph,
+            edge,
+            `${this.getLabelForEdge(sourceMacro)} (${targetMacro ?? "Missing relation"})`,
+            "end"
+          );
+          this.addLabelToEdge(
+            graph,
+            edge,
+            `${this.getLabelForEdge(targetMacro)} (${sourceMacro ?? "Missing relation"})`,
+            "start"
+          );
+        }
+      }
+    });
+  }
+
+  getLabelForEdge(macro) {
+    switch (macro) {
+      case "has_many":
+        return "0..*";
+      case "has_one":
+        return "1";
+      case "belongs_to":
+        return "1";
+      case "has_and_belongs_to_many":
+        return "0..*";
+      default:
+        return "0..*";
+    }
+  }
+
+  addZooming(graph) {
+    this.element.addEventListener(
+      "wheel",
+      (event) => {
+        event.preventDefault();
+
+        const currentScale = graph.view.scale;
+        const zoomFactor = event.deltaY < 0 ? 1.06 : 0.94;
+        const nextScale = Math.min(Math.max(currentScale * zoomFactor, 0.25), 2.5);
+
+        graph.zoomTo(nextScale, true);
+      },
+      { passive: false }
+    );
+  }
+
+  addVertexes(graph, data) {
+    const vertexes = {};
+    const parent = graph.getDefaultParent();
+
+    graph.batchUpdate(() => {
+      for (let table of Object.keys(data)) {
+        let longest = this.detectedMaxLength(data[table], "name");
+        let longestValue = this.detectedMaxLength(data[table], "sql_type");
+        let width = (longest + longestValue + 4) * 8;
+        const vertex = graph.insertVertex(
+          parent,
+          null,
+          {
+            name: table,
+            fields: this.getFields(data[table].columns)
+          },
+          0,
+          0,
+          width,
+          data[table].columns.filter((column) => column != undefined).length * 32 + 32,
+          { shape: "erdTable", label: "", fontSize: 0, perimeter: "rectanglePerimeter" }
+        );
+        vertexes[table] = vertex;
+      }
+    });
+    return vertexes;
+  }
+
+  getFields(columns) {
+    return columns
+      .filter((column) => column != undefined)
+      .map((column) => {
+        return { name: column.name, sql_type: column.sql_type };
+      });
+  }
+
+  detectedMaxLength(table, type) {
+    return (
+      table.columns.reduce((max, column) => {
+        return Math.max(max, column[type].length);
+      }, 0) || 0
+    );
+  }
+}

data/app/assets/javascript/databasium/controllers/index.js

@@ -0,0 +1,7 @@
+import { Application } from "@hotwired/stimulus";
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+
+const application = Application.start();
+window.Stimulus = application;
+
+eagerLoadControllersFrom("databasium/controllers", application);

data/app/assets/javascript/databasium/controllers/layout_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="layout"
+export default class extends Controller {
+  static targets = ["sidebar"];
+
+  connect() {}
+
+  toggleSidebar(event) {
+    event.preventDefault();
+    this.sidebarTarget.classList.toggle("hidden");
+  }
+}

data/app/assets/javascript/databasium/controllers/model_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="model"
+export default class extends Controller {
+  static targets = [
+    "attribute",
+    "validation",
+    "relation",
+    "attributesContainer",
+    "validationsContainer",
+    "relationsContainer"
+  ];
+
+  connect() {}
+
+  add(event) {
+    const target = event.params["target"];
+    const container = event.params["container"];
+
+    if (!target || !container) return;
+
+    const capitalizedTarget = target[0].toUpperCase() + target.slice(1);
+
+    if (!this[`has${capitalizedTarget}Target`]) return;
+
+    const scope = event.currentTarget.closest("[data-controller~='attribute']") || this.element;
+    const destination = scope.querySelector(`[data-model-target='${container}']`);
+    if (!destination) return;
+
+    destination.insertAdjacentHTML("beforeend", this[`${target}Target`].innerHTML);
+  }
+}